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

実際に「デザインスペース」を使って作業してみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopに新しく搭載されたワークスペース「デザインスペース」を使って実際にレイアウトを調整する方法について、解説していきます。
講師:
06:59

字幕

このレッスンでは Photoshop に新しく搭載されたワークスペースデザインスペースを使って実際にレイアウトを調整する方法について学んでいきます。今ご覧頂いているのは Photoshop のアートボードを使って作成したスマートフォンのサイトのレイアウトです。まだこちらの作業が途中ですのでデザインスペースを使ってデザインを詰めていきたいと思います。まずデザインスペースの左側に6つのツールがありますので1番上の選択ツールを選びます。そしてアートボード上をクリックするとまるで Illustrator や Fireworks のようにクリックした部分のレイヤーを直接選択することができます。そしてこの今1番上のグリーンのヘッダーの部分こちらはレイヤーパネルを見ますとグループになっていますけれどもこちらも目的のレイヤーをダブルクリックしていくだけでグループを掘り下げて選択していくことができます。今 header の中の「長方形1」のレイヤーをダブルクリックしていくことで選択することができました。こちらシェイプレイヤーですけれども選択をしますとアピアランスパネルに様々な情報が表示されてきます。ここで塗りのカラーをクリックして色を変更しますとこのようにレイヤーパネルを開かなくてもシェイプの塗りのカラーを変更することが可能です。 では次に位置の入れ替え機能を使ってみましょう。ヘッダーの下部に4つのメニューがあります。この「アクセス」と「問い合わせ」の部分を簡単に位置の入れ替えをしてみたいと思います。先程と同様に目的のレイヤーをダブルクリックしていくとグループを掘り下げて選択することができます。この状態で Shift キーを押しながら2つのレイヤーを同時に選択します。そしてこちらの「位置の入れ替え」ボタンをクリックしましょう。そうしますと、瞬時に2つのレイヤーの位置を変更することが可能です。メニューの順番が入れ替わったり写真の順番が入れ替わった時等に利用することが可能です。では次に、テキストの編集をしてみましょう。画面の下部にメンバーの紹介が入っていますが名前と説明文がダミーになっています。この名前の部分を編集していきたいと思います。まず選択ツールでクリックしますと全体のグループが選択されますので目的のレイヤーが選択されるまでダブルクリックしていきます。そして選択ツールのままこのテキストをダブルクリックしていくと文字ツールに自動的に切り替わるのでここでメンバーの名前を編集しましょう。もう一度選択ツールに持ち替えて今度は下の方も同様に編集していきます。 この辺りの挙動はかなりIllustrator、Fireworksもしくは Sketch などと近づいてきてPhotoshop ならではのレイヤーを選択するのが面倒だという問題が解決されてきているなと感じます。では次に写真のマスクを行ってみましょう。選択ツールに持ち替えてメインの写真を選択していきます。グループになっていますのでダブルクリックしてメインの写真、こちらの cat01 というレイヤーを選択します。レイヤーを選択できましたら右上にあるこちらのマスクモードのボタンをクリックしましょう。これをクリックした状態で楕円形ツールを選んでこのようにパスを描きますと写真に即座にベクトルマスクが反映されます。では最後に、画像の書き出しについて見ていきましょう。まず1番最初に、この画面の右上にある下向きの矢印のアイコンをクリックしてみましょう。これをクリックしますとアートボードを丸ごと全体を一枚として書き出すことが可能です。そしてこちらの右下の書き出しのパネルに着目してください。こちらは目的のレイヤーやグループを選択しておいて個別に書き出すことができます。試してみましょう。まずは main-image のレイヤーを選択してみます。 今深い階層のレイヤーが選ばれていますので戻りたいときは Esc を押すとグループ全体を選択することができるようになります。レイヤーを遡っていってmain-image というグループを選択することができました。この状態で書き出しパネルの右上にあるこちらの下向き矢印のボタンをクリックするとこのレイヤーだけをすぐに書き出すことが可能です。標準の Photoshop のユーザーインターフェースでもレイヤーパネルから簡単にレイヤーごとに分けて書き出すことが可能でしたけれどもデザインスペースではもっと簡単に書き出しのパネルを使って個別に切り出すことができるようになりました。以上、このレッスンではPhotoshop に新しく搭載されたワークスペースデザインスペースを使って実際にスマートフォン用のレイアウト作成を行ってみました。通常の Photoshop のワークスペースに比べレイアウト作業のみに集中できる環境になったことがお分かり頂けたことと思います。デザインスペースに対応したマシンをお持ちの方は是非試しに使ってみてください。

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

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

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

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

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

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