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

レスポンシブWebデザインにおけるPhotoshopでのカンプ作成のポイント

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、レスポンシブなWebサイト作成における、Photoshopでのデザインカンプ作りのポイントについて、ご一緒にチェックしておきましょう。
講師:
04:00

字幕

このレッスンではレスポンシブなWeb サイトの制作におけるPhotoshop でのデザインカンプ作りのポイントについてご一緒にチェックしておきましょう。いきなりですが Web サイトを制作する際にデザインカンプを作らずにいきなりコーディングをしていきブラウザで表示を確認していくインブラウザデザインという手法もあるのはご存知でしょうか。この手法では制作しながらブラウザのウィンドウの幅を変化させたりして各ブレイクポイントに向けたレイアウトをリアルタイムに確認しながらデザインを進められるというメリットもあります。小規模なサイトや個人向けのプロジェクトではこの手法を使うことによってデザインカンプのレイアウトに費やす時間と手間を削減するというメリットもあるでしょう。それに対してPhotoshop などのツールでデザインカンプを作るというメリットこれは何でしょうか。例えば現代の Web サイト制作では大規模なサイトを複数人のデザイナーで分担してデザインするケースとかもしくはクライアントから制作を依頼されたサイトでクライアント上層部のデザインチェックや承認というものが必要なプロジェクト等サイトのデザインに対する合意形成もしくは情報伝達というものが必要な場面というのは多々あります。 また、個人でサイトを制作する際にも頭の中で考えたデザインをメモ代わりに定着させておく必要というのがある場合もあるでしょう。今まで述べたようなケースの場合レイアウトパターンですとかデザインカンプを予め作っておいて、情報共有をするまたは合意形成するというのはワークフロー上非常に重要なことになってきます。近年の Photoshop にはアートボードの機能ですとかデザインスペースの機能などWeb デザイン作業を楽にするものが続々と盛り込まれてきています。これらの機能を活用してできるだけデザインカンプ作成にかける時間を短縮できればアンチデザインカンプ派、できるだけデザインカンプに時間をかけたくないような方々にとっても納得して頂けるということもあるかもしれません。では、実際の Photoshop の画面でもう少し詳細に見ていきましょう。Photoshop の画面に移動します。今こちらイラストの PNG データを開いているところです。例えば、最近搭載された機能ですとレイヤーパネルの中でレイヤーを右クリックするだけですぐに書き出すことができる機能ですとかもしくは1つのファイルの中に複数のアートボードを作ってデザインのバリエーションをチェックしていく機能またプレビュー版ですけどもデザインスペースのユーザーインターフェースを使ってこのように今までと異なるシンプルなユーザーインターフェースを使ってデザインを進めていくこともできます。 この後のレッスンではこれらの機能を詳細にご紹介していきますので気に入ったものを今までのワークフローに取り入れることできっとデザイン作業の効率が良くなることでしょう。以上、このレッスンではレシポンシブなWeb サイト制作におけるPhotoshop でのデザインカンプ作りのポイントについて見てきました。

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

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

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

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

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

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