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

新規ガイドレイアウトを作成する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、Photoshopの「新規ガイドレイアウト」機能を利用して、CSSフレームワーク「Bootstrap」に合わせたグリッドのセットを素早く作成する方法について、学んでいきます。
講師:
09:03

字幕

このレッスンでは Photoshop の新規ガイドレイアウト機能を利用してCSS フレームワーク Bootstrap に合わせたグリッドのセットを素早く作成する方法について学びます。Photoshop を触ってデザインを開始する前にBootstrap のグリッドの仕組みについて確認していきしょう。Bootstrap ではコンテンツの入れ物としてウィンドウの幅がどこまで広くなっても追随してくるこの container-fluid という名前のクラスとそれから最大値が 1170px に固定されている container というクラス両方が用意されています。どちらの場合もウィンドウ幅を768px より狭めた場合カラムが縦方向に並びますがウィンドウ幅を広げていくとcontainer-fluid の方はどこまでウィンドウを広げても横幅いっぱいいっぱいになるのに対しただの container の方は最大値が 1170 になったところで横幅が固定されます。Photoshop でグリッドを設定する際にはこの container のクラスの方のこのカラムの数値設定を使っていくととても便利ですのでもう少し詳しく見ていきましょう。 今画面に映っているのがその container のデフォルトの指定を解説したものです。まず1から12までの12個の縦方向のカラムが用意されています。そしてそれぞれのカラムの両脇には15px ずつの空きが指定されています。ということは、1番左と1番右は1つ分の空き、15px ですけれどもこの1と2の間2と3の間は左右両方の空きが足されるので15足す15で30の空きがそれぞれ用意されています。そしてそれらをくるむcontainer というクラスは最大値が 1170 に指定されていますのでその中にこのルールで12分割されるとコンテンツの中身は左右の 15px ずつを差し引いて1140 の中に収めてデザインをしていくことになります。そして Photoshop で作る時には少し左右に余白をつけておきたいのでドキュメントのサイズを 1300px にして左右に背景の余白 65px ずつを足すというようにします。纏めると、左側の空きの所を65 足す 15 で 80px 空けた所に1つ目のガイドを引く、そして等分に 30px ずつの空きを作った12 本のガイドを引いた後に最後も一番右側に 80px の空きを作る、そして合計が 1300 になるという形で設定していきます。 では早速その作業を Photoshop の方でやっていきましょう。Photoshop の画面に移りました。こちらのドキュメントには予め2つのアートボードを作ってあります。左側の方に PC 用の1300×1300 pixel のアートボード右側に iPhone 6 用の750×1334 のアートボードを作ってあります。では早速作業を始めていきましょう。メニューバーの「表示」から「新規ガイドレイアウトを作成」を選択します。ダイアログボックスが出てきますので「ターゲット」のところを見てください。今左側のこの PC のアートボードが選択されていますので選択したアートボードがターゲットになっている状態で左側の方にガイドが表示されています。これを iPhone 6 の方のアートボードを選ぶと今度は右側にガイドがつくようになります。このターゲットになるアートボードを指定して新規ガイドレイアウトを作成できる機能はPhotoshop CC 2o15.1 からついた機能ですので1つ前の 2015 を使っている方はこちらは使えませんのでご注意ください。ではまず、今の時点ではPC の方、こちらの左側の方をターゲットにして作業を進めます。 そしてこの下の数値を先ほどチェックしたBootstrap のデフォルトの数値に合わせていきます。列が縦方向ですのでまず列の数は 12 にします。そして列そのものの幅は指定しません。列と列の間、この間隔を設定します。先ほどのスライドでチェックしましたけれども間の数値は 30px です。ここに間隔 30 と入力します。px (ピクセル)はつけなくてもPhotoshop が補完してくれますので数字を半角で入れておけば大丈夫です。次にチェックしたいのがこちらの「マージン」の項目です。マージンのところにチェックを入れると上下左右に 20px ずつがデフォルトでついてきます。上下の方はマージンは必要ないので0 にしてください。そして肝になるのがこの左右のマージン設定です。もう一度スライドの方に移りますが左右の数値が 65+15 で 80 を空けておくとこの 15px の空きを除いたこの部分に対してガイドを引くことができます。ではやってみましょう。左を 80、右を 80 にします。このように数値を入れるとリアルタイムでガイドの位置が変わってきます。このドキュメントの縁から 80px左右に空いた後に12 個のカラムが縦方向に並んでカラム同士の間隔が指定した 30px になっています。 これで OK を押すとこの PC の画面の方に Bootstrap の12 のグリッドと同じ数値設定でガイドラインを引くことができました。次に iPhone の方にも試しにガイドを引いてみましょう。iPhone の方はターゲットとして iPhone 6 と名前を付けたアートボードを選択します。そして iPhone になる時はこの縦 12 個のカラムは使わないので基本的には数値を1にしておきます。間隔は付きませんので空欄にしておきましょう。左右のマージンですけれどもここでは仮に 20px にしておきたいと思います。そして OK をクリックします。アートボードツールを使ってレイヤーパネルの中で選択した方のアートボードのガイドラインだけが見えるようになっています。PC のアートボードをクリックするとこちらの Bootstrap の設定のガイドラインが見えますしiPhone 6 の方のアートボードをクリックすると左右 20px ずつの1カラムの状態のガイドラインが表示されます。ここまで、このレッスンではPhotoshop の新規ガイドレイアウト機能を利用してCSS フレームワーク Bootstrap に合わせたグリッドのセットを素早く作成する方法について解説しました。

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

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

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

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

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

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