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

アートボードを複製しサイズを変更する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopのアートボード機能を使ってレイアウトしたPC向けのデザインを複製し、アートボードのサイズをスマートフォン向けに変更する方法について、解説します。
講師:
02:46

字幕

このレッスンでは Photoshop のアートボード機能を使ってレイアウトした PC 向けのデザインを複製しアートボードのサイズをスマートフォン向けに変更する方法について解説します。今ご覧頂いているのはPhotoshop CC 2015 以上にあるアートボードの機能を使ってPC 向けの Web サイトのデザインカンプを作ってある状態です。では、アートボードツールを使ってこちらの配置してあるコンポーネントごとアートボードを複製してみます。ツールパネルからアートボードツールを選択します。そしてレイヤーパネルを開いて今1つだけあるアートボードPC を選択しましょう。そしてグループやレイヤーを複製する時と同様にOption キーを押しながらドラッグします。Shift キーを押すと、水平方向の移動を制限することができます。ではアートボードとアートボードの間が150px になったところでマウスカーソルを放しましょう。レイヤーパネルの中を見ると「PC のコピー」という名前でもう1つアートボードができました。こちらをダブルクリックしてスマートフォンを意味する SP に名前を変更しておきたいと思います。こちらの名前を変更すると連動してアートボードの左上の表示も変更になります。 次に、この SP のアートボードのサイズを変更しましょう。今 SP というアートボードがレイヤーパネル内で選択されている状態でオプションバーのドロップダウンメニューを開きます。ここでは iPhone 6 の大きさにしたいと思いますのでこちらを選択しましょう。アートボードのサイズが変わりました。この状態ではガイドラインがPC 向けのまま付いていたりですとか中身も何も変わっていないのでこの後、これを使ってスマートフォン向けのレイアウトに編集していくことになります。ここまで、このレッスンではPhotoshop のアートボード機能を使ってレイアウトした PC 向けのデザインを複製しアートボードのサイズをスマートフォン向けに変更する方法についてご説明しました。

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

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

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

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

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

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