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

Photoshopでアートボードを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopの「アートボード」機能を使って1つのドキュメント内に複数のアートボードを作成する方法について、ご一緒に練習していきましょう。
講師:
06:13

字幕

このレッスンでは Photoshop のアートボード機能を使って1つのドキュメント内に複数のアートボードを作成する方法についてご一緒に練習していきましょう。まず今ご覧頂いている画面上にPhotoshop CC 2015.1 が起動してあります。ここで新規ファイルを作成していきますがメニューバーの「ファイル」から「新規」でも結構ですしこの新しくなったスタート画面の「新規」ボタンを押しても結構です。新規ドキュメントのダイアログボックスが出てきますのでファイル名を入力しましょう。アートボード...「アートボード作成練習」としましたけれどもお好きなファイル名にして頂いて結構です。そして重要なのは2番目、このドキュメントの種類のドロップダウンメニューです。これまでですと、「Web」を選ぶ方も多かったかと思いますけれども1つのドキュメントの中に複数のアートボードを作成したい場合には「アートボード」の項目を選びます。そうすると、「アートボードのサイズ」という項目に予め設定されている様々な端末の選択肢が出てきます。この時ご自分がデザインしたいサイズに合わせて選択して頂けば OK ですけれどもここでは仮に Web(1280×800) を選んでおきます。 まず Web サイト用のアートボードを作ってその後に iPhone 用のアートボードを足すという形にします。こちらを選択したら OK をクリックします。アートボード1が作成されました。少し画面いっぱいで見づらいのでズームを引いてズームアウトしておきたいと思います。これ位にしておきましょう。次に、アートボードを増やす為にはアートボードツールを使います。ツールパネルが1行表示になっていますが2行表示にして説明を進めます。ツールパネルを2行の表示にした時に右側の一番上にあるのがアートボードツールです。こちらを選択してください。そしてアートボード1を選択するんですがレイヤーパネルの中に、このアートボード1というものが含まれています。Illustrator はアートボードのパネルが個別にありましたけれどもPhotoshop ではそういったアートボードのパネルが個別には存在していません。レイヤーパネルの中にまるでグループの上位の概念かのようにアートボードが入っています。ここでアートボード1というこちらの列を選択して頂きますとこのアートボードの上下左右に「+」のマークが出てきます。この+をクリックするとアートボードが増えます。 元々あったものは「アートボード1」でしたが今+をクリックしたことで「アートボード2」が増えました。少し注意して頂きたいのがこの+のアイコンが出てくるのがPhotoshop CC 2015.1 以上の機能であるということです。もし1つ前の CC 2015 を利用されている方はアートボードを増やすアイコンがこちらのオプションバーの方にありますのでこれをクリックしてその後にお好きなところでクリックして頂くことでもう1つアートボードを増やすこともできます。このような方法で増やしたアートボードですけれども1番最初に作ったこの Web のサイズと同じものがどんどん増えていきます。ここでアートボードのサイズを変更したい場合にはアートボードツールでターゲットのアートボードを選択してその後にオプションバーのこのサイズのドロップダウンメニューを開きます。そして iPhone 6 ですとかiPhone 6 Plus ですとかご希望のものを選んで頂いて今、横位置になってしまっているのでオプションバーの縦位置に変更するボタンをクリックします。また、アートボードの周りにバウンディングボックスが表示されていますのでこちらを使って 自由な大きさに変更することも可能です。 すこし引いて見てみましょう。今の説明の間でアートボード1,2,33つのアートボードを1つのドキュメント内に作ることができました。また、アートボードの名前を変えたい時にはレイヤーパネルの中の「アートボード1」をダブルクリックして名前を編集していきます。例えば1つ目は PC「アートボード2」をダブルクリックしてスマートフォンの頭文字 SP「アートボード3」は SP2といったように、アートボード名を変更することができます。そうしますと、これに従って画面上でも名前が書き変わっていることが分かります。このあたりの振る舞いがIllustrator とは違うところですのでぜひ注意してみてください。以上、このレッスンではPhotoshop のアートボード機能を使って1つのドキュメント内に複数のアートボードを作成する方法について説明しました。

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

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

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

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

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

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