PhotoshopでレスポンシブWebデザイン!

Photoshopを使ったレスポンシブWebデザインレイアウトの概要

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopを使ってレスポンシブなWebサイトのデザインカンプを作成するワークフローについて、概要をご説明していきます。個々の作業の詳細については、この後のレッスンで個別にご説明しますので、このレッスンでは、ワークフローの概要をチェックしていきましょう。
講師:
05:59

字幕

このレッスンでは Photoshop を使ってレスポンシブなウェブサイトのデザインカンプを作成するワークフローについて概要を説明していきます。個々の作業の詳細についてはこの後のレッスンで個別に説明しますのでこのレッスンではワークフローの概要をチェックしていきましょう。まず利用する Photoshop のバージョンについて確認します。これからお話しするワークフローで進めていくには少なくとも Photoshop CC 2015以上にしておくことが必要です。同じ Photoshop CC 2015 でも、2015 年の 1 月にリリースされたバージョンですとこのコースでお話しする中のいくつかの機能が使えません。ですのでできれば 2015 年11 月の末に発表された2015.1 以上のバージョンをインストールしておくのが望ましいです。では最新の Photoshop が準備できましたら、このコースで利用する新機能を見ていきましょう。まずはアートボードの機能です。今ご覧いただいている画面にはこのように二つのレイアウトが表示されています。Illustrator をお使いの方にはおなじみのアートボードの概念ですが2015年1月にリリースされたバージョンからPhotoshop にも搭載されました。 これにより一つのドキュメントの中で複数のレイアウトを並列に並べて俯瞰しながら製作を進めることが可能になりました。次に新規ガイドレイアウトの機能です。これは2014年2月にリリースされたバージョンから利用可能で、ガイドラインをいちいち手で引かなくても数値で設定して、まとめてガイドラインをセットで作ることができるようになりました。この時設定する数値を CSS フレームワークブートストラップのデフォルトの値に合わせておくとコーディングするときに計算する手間が削減されます。さてアートボードを利用して複数のレイアウトパターンを作成したら iPhone アプリのPreview CC を使ってWiFi でつないでリアルタイムに確認することが可能です。こちらの Device Preview のパネルを開きますと、私の iPhone が接続されていることが分かります。iPhone の画面を QuickTime でMac に映しているところですがPhotoshop の中で作成したスマートフォン用のレイアウトをそのままリアルタイムにiPhone の中でチェックすることができます。PC の画面のみで確認しているとどうしてもスマートフォンの実寸の感覚が狂いがちですのでiPhone の画面でこまめにバランスをチェックするようにしましょう。 さてデザインが完成したら今度は画像の切り出しです。こちらも新機能を利用することで非常に簡単になりました。以前はスライスを切って画像を切り出したり、という方もいたかと思いますが最新のバージョンではスライスを切らなくてもレイヤーパネルの中から画像を書き出すことができます。こちらの写真のレイヤーを右クリックしますと、PNG としてクイック書き出しですとか、書き出し形式というオプションを選ぶことができます。そして今までとは違う書き出し画面で選んだレイヤーだけをすぐに書き出すことができます。この方法で書き出した画像は従来の書き出し方法よりも非常に軽くなるケースが多いのでぜひ試してみてください。またコーディングをするときにはボタンの角丸の値、グラデーションの数値、もしくはテキストなどをそのまま流用することが可能です。これは Photoshop の単体の機能ではなくてAdobe が提供している Extract という機能を利用します。Extract はウェブブラウザからCreative Cloud のサービスを使って利用することもできます。今ご覧いただいている PSD をCreative Cloud の方に登録してありますが、このようにパーツをクリックするとCSS をコピーですとかテキストをコピー、もしくは画像をここから書き出すということが可能になります。 また Dream Weaver の中にもこの Extract の機能が搭載されているのでウェブブラウザの中で PSD からそれぞれの要素を取り出したり、Dream Weaver の中からすぐに取り出した CSS やテキストをコピーしてエディターで利用したりということが可能になります。いかかがでしょうか。これまでのワークフローで感じていた手間がかなり削減されて、便利で軽快になった印象を持たれるのではないかと思います。ここまで Photoshop を使ってレスポンシブなウェブサイトのデザインカンプを作成するワークフローについて概要をお話ししました。この次のレッスンからそれぞれの機能を詳細に解説していきます。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

2時間16分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年03月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。