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

Creative Cloud Librariesを利用してコンポーネントを配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、Photoshop、Illustrator、Dreamweaverなど数多くのアプリケーションを横断して様々なデザイン素材を共有できる機能「Creative Cloud Libraries」を利用し、Photoshopのドキュメント内にコンポーネントを配置する方法を学びます。
講師:
07:22

字幕

このレッスンでは PhotoshopIllustrator Dreamweaver 等数多くのアプリケーションを横断して様々なデザイン素材を共有できる機能Creative Cloud ライブラリを利用しPhotoshop のドキュメント内にコンポーネントを配置する方法を学びます。今ご覧頂いているのは私が Web サイトのパーツつまりコンポーネントとしてデザインしたテキストと写真のセットです。レイヤーパネルを開いて確認してみるとphoto+text という名前のグループの中にタイトルと写真と文章が入っています。こちらのコンポーネントは考え方としては伸び縮みを左右にしても成立するようなものになっています。横幅が伸び縮みした場合この丸い写真は常にセンターにある状態そしてテキストの方もこのように左右幅を変えることができる状態に想定しています。では早速このコンポーネントをライブラリにグラフィックとして登録してみましょう。レイヤーパネルを一度切り離しておくと作業がしやすいので左側に寄せておきます。そしてライブラリパネルを開きます。次にこの photo+text というグループを選択してライブラリパネルにドラッグします。 マウスカーソルをパネルに重ねると「+」のアイコンが出てくるのでここで手を放します。この操作だけで この photo+text というグラフィックがライブラリに登録されました。では 実際にこれを使ってみましょう。レイアウト途中のドキュメントに移動してきます。レイヤーパネルが邪魔なのでもとに戻しましょう。このファイルは PC 向けのWeb サイトのデザインカンプを作業している途中で予め Bootstrap の 12 のグリッドに合わせたガイドラインを作ってあります。このガイドですけれども縦方向に 12 のグリッドがありますので先程登録したこちらのコンポーネントを3つ分のグリッドの横幅に合わせて使っていく想定で配置してみたいと思います。その時ライブラリパネルから先程登録したものをドラッグ&ドロップしてReturn キーを押すことで配置することができます。この時注意が必要です。ただドラッグ&ドロップだけで配置をしてしまうとシンボルと同じような考え方でこちらのオリジナルを複製したものが配置されたということになってしまいます。そうしますと、編集する時にこちらのコンポーネントだけのテキストを書き換えたり写真を個別に差し替えたりということができなくなってしまいます。 それを避けるために作業をやり直してみますがCommand+Zヒストリーパネルで元に戻してもう一度作業してみます。ライブラリパネルから Option キーを押しながら配置してください。こうすると、コンポーネントを個別に編集することができます。このライブラリパネルから配置する時にOption キーを押す時と押さない時の違いを覚えておいてください。次に、Illustrator でもライブラリにグラフィックを登録してそれを Photoshop で利用することができますので試しにやってみましょう。仮にこちらのサービスのロゴマークが差し変わったということにしたいと思います。Illustrator の方に移動してこちらが新しいサービスのロゴマークです。これをライブラリに登録する為には先程の Photoshop の場合と同様にロゴマークを選択してライブラリパネルの中にドラッグ&ドロップします。「アートワーク1」という名前になっているのでダブルクリックして名前をlogo に変えておきます。そして Photoshop の画面の方に移動します。もう既にこちらの Illustrator で作ったロゴマークが同期されていますので今あるロゴマークと差し替えてみましょう。 ロゴマークを選択してこのライブラリのパネルから新しいログマークをドラッグ&ドロップします。今この時 Option キーを押さずにドラッグ&ドロップしました。理由はロゴマークがもしこの後また差し替えられた時にオリジナルのロゴマークを編集するだけでOption を押さずに配置されたライブラリのグラフィックは全て編集内容が反映されるためです。このように、ライブラリパネルから配置する時Option キーを押すと個別に編集可能になる、Option キーを押さないと全体管理ができてオリジナルを編集すればその編集内容が全てに反映される、という違いがありますので是非使い分けをしてみてください。では ロゴマークのところを差し替えてしまいましょう。古い方のロゴマークを非表示にして新しいロゴマークを所定の位置に入れてみます。Illustrator で作ってライブラリに登録したものをPhotoshop でも活用できるという事例でした。またライブラリパネルの中にはグラフィックや写真だけではなくて文字のスタイルですとかよく使うカラースキームを登録しておくこともできます。統一したスタイルで様々なデザインを作りたいときこのカラースキーム、文字スタイルを活用することができるでしょう。 以上、このレッスンではPhotoshop Illustrator Dreamweaver 等数多くのアプリケーションを横断して様々なデザイン素材を共有できる機能Creative Cloud ライブラリを利用しPhotoshop のドキュメント内にコンポーネントを配置する方法を説明しました。

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

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

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

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

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

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