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

配置したコンポーネントを編集する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Creative Cloud Librariesを利用して配置したコンポーネントを、いま作っているレイアウトに合わせて編集する方法について、解説していきます。
講師:
07:53

字幕

このレッスンでは Creative Cloud ライブラリを利用して配置したコンポーネントを今作っているレイアウトに合わせて編集する方法について解説します。今ご覧頂いているのは私が作っているWeb サイトのデザインPC 向けのデザインをアートボードの機能を使って作っているものです。そして Bootstrap の 12 のグリッドに合わせて予め新規ガイドレイアウトを使ってガイドを引いてあります。そしてこちらの部分、少し拡大して見ていきたいと思いますがこの部分にコンポーネントをライブラリパネルに登録したものをOption キーを押しながら個別に編集可能な状態で配置したものがおいてあります。ではこのコンポーネントを3つ分のグリッドの幅に合わせて編集したいと思いますがその前にライブラリパネルからこのグラフィックとして登録したコンポーネントを Option キーを押さないで配置した時と見え方がどう違うのかというのと併せて解説していきたいと思います。ではレイヤーパネルを開いて脇に置いて見えやすくしておきます。今ご覧頂いているこの「お仕事募集中」というコンポーネントはこちらの、この赤く色を付けたPhoto+text のグループです。 そしてライブラリパネルからPhoto+text をOption キーを押さない状態で配置してみます。Return もしくは Enter キーを押します。ちょっと位置をずらしておきましょう。レイヤーパネルの中を見てください。Option キーを押していない状態ですとこの雲のマークが付いた状態つまりオリジナルと連動していて個別の編集はできないよ、という状態になっています。こちらは捨てて次に、Option キーを押しながら配置するとどうなるかと言うとこちら赤い色を付けたものの1つ上に入っていますがきちんとフォルダーの構造がある状態編集可能な状態で配置されています。ライブラリパネルから配置する時にOption キーを「押す」と「押さない」という違いがレイヤーパネルから見てもお分かり頂けたかと思います。では、今配置したものは一回捨てて元々配置してあったこちらのPhoto+textこのコンポーネントを編集してみましょう。まずはテキストから作業するとわかりやすいのでテキストをいじっていきます。テキストツールで写真の下に入っているテキストを触ります。ボックスで作ってありますのでこのように横幅を伸び縮みさせることができます。 次に移動ツールに持ち替えてこの丸い写真を選択します。Shift キーを押しながら水平に移動させましょう。真ん中まできたところで手を放します。次はこちらのライン、タイトルの下にあるこの下線です。こちらを選んだら今度はパス選択ツールを選びます。そして右側のアンカーポイントだけを動かして丁度このグリッドの3つ目の右側に沿った所で手を放します。では、開いたパネルを片づけて全体を見てみたいと思います。この3つ分のグリッドに横幅を合わせたコンポーネントを複製して全部で4つに増やしていきたいと思います。レイヤーパネルを開いて赤く色を付けた Photo+text のグループを全体を選びます。そして Option キーを押しながら移動ツールで横に移動させていきます。グリッドに沿った所で手を放します。少しずれてしまいましたので拡大して作業したいと思います。Shift キーを押しながら左右移動することで水平方向がずれないように移動させています。2つ目ができたので今度はグループをもう一回複製します。Option キーを押しながらドラッグして手を放してあとはキーボードの左右キーで位置を調節します。もう1度グループを増やしましょう。 3つ目のグループをまた Option キーを押しながらShift キーも押して水平方向に移動させます。そしてキーボードの左右のキーを使って水平方向に移動させます。ガイドを非表示にして確認しましょう。このようにコンポーネントが4つ入りました。あとはそれぞれのタイトルですとか本文を打ち変えていく、ということになります。また、写真の方も差し替えが可能ですので試しにやってみましょう。左から2つ目のこちらの写真を選択します。レイヤーパネルを見てみると猫の写真の周りに丸いレイヤーマスクがあります。この中身の写真を差し替えてみたいと思います。ライブラリパネルを使ってこちらの花の写真に差し替えてみましょう。サイズを小さくします。Return もしくは Enter キーで確定します。レイヤーパネルの方に戻って元々あった写真のレイヤーマスクサムネイルを新しく入れた写真の方にドラッグ&ドロップします。そして古い写真の方を非表示にします。この操作をすることによってこのレイヤーマスクサムネイルの位置を動かさずに写真だけを差し替えることが可能です。あとはこの4つ全てのコンポーネントのテキストと写真を差し替えていけばこのコンポーネントが4つ並んだ部分は完成します。 ここまで、このレッスンではCreative Cloud ライブラリを利用して配置したコンポーネントを今作っているレイアウトに合わせて編集する方法について解説しました。

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

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

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

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

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

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