PhotoshopでWebデザイン

ガイドと定規を使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プランをもとにガイドを引いていきます。
講師:
06:15

字幕

ガイドとグリッドについて見ていきましょう。ガイドもグリッドもこのドキュメント上に後から配置するプレースホルダを配置し易くための補助ツールになっています。まずはガイドの方から見ていきましょう。Ctrl/Command+R を押してあげます。そうすると、この上側と左側に定規を出すことができます。この定規の上をクリックドラッグで引っ張ってくるとガイドを引くことができます。ガイドはこういう感じの線になっています。この辺りにヘッダーを置くようとかこの辺りまでドキュメントの幅がくるよというのを設定してあげます。こんな感じですね。ここから先は背景だよ見たいな感じにします。このガイドを消す場合は簡単です。戻します。定規の上までに行ったら話します。そうするとこのガイド消すごとができます。では、このドキュメントにガイドを引いていきましょう。今このドキュメント「1200px×2000px」で作っています。少し大目に作っている理由というのは真ん中に 960px 分でコンテンツを配置してどういう風に背景用素材、背景用のイメージが見えるのかも確認したいから横に長めに作っています。では、真ん中の 960px を取っていきたいと思います。 一番簡単な方法「シェイプツール」を使います。「長方形」に持ち替えます。ドキュメント上をクリックします。クリックするとどういうサイズでその長方形を書くのか聞いてくれます。「幅:960px」で「高さ」は何でも構いません。OK 押します。そうすると、ぴったり「960」の幅で長方形を描いてくれます。これを真ん中に持っていきます。正確に真ん中に持っていく方法はCtrl/Command+A で全体を選択した後で真ん中へ揃えるのボタンでした。選択の解除はCtrl/Command+D でしたね。後はこのガイドをこの両端にぴたっと持っていくだけです。近くに持っていくと簡単にこうぴたっと吸着します。後はこの長方形を選択してDel/Backspace で削除します。では次に、ヘッダーの高さを引いていきたいと思います。今回は高さを 100 にしたいと思います。このガイドを引っ張ると真ん中に、Y 「230」とか 「250」 だっていますよね。これで100 ぴったりの所を持っていきます。少しズームしましょうか。Alt/Option を押しながらマウスのゴロゴロドラッグ入れてこうズームしていきます。もしくはCtrl/Command++ ですね。 正確に「100px」の所で止めたいと思います。ちょっと難しいですね。もう少し細かく見る方法は「ウインドウ」「情報」これを開きます。この「情報」のパレットの X と Y のここの数字を見ます。マウスカーソルのある位置ここを教えてくれます。後はガイドを持ってこう Y の数字を見ながら「100」になったら止めます。そうするときれいに「100」を取ることができます。もう少し簡単な方法も一回この「長方形」を使います。恐らくこれが一番簡単な方法でしょう。「100×100」で作りましょうか。この一番上にぴたっと区つけて後はこのガイドをこの端っこ合うようにぴたっと置いておきます。凄い簡単ですよね。ストレスなく100px 分のガイドを引くことはできました。では次は、下にフッター用のガイドを引きたいと思います。フッターは下から 300px にしたいと思います。「長方形」に持ち替えてドキュメント上をクリック「高さ:300px」とします。この「長方形」を下まで持っていて後はガイドを上から引っ張ってきてくっ付ける簡単ですね。「長方形」を選択して削除します。こうするだけで簡単にガイドを引くことができました。後はこのガイドで作った中にドキュメントを作成していくだけです。 もう一つはグリッドという方法もあります。「表示」「表示・非表示」「グリッド」これを選択します。そうすると、細かいこういうグリッドを描くことができます。これは「XXX不明XXX」のようなものでこのグリッド化の状態で「長方形ツール」を取って描いていけば簡単に等間隔でグリッドに沿ったシェイプを描くことができます。これもデザインの時によく使える方法です。今回はガイドの方を使用したいのでも一度「表示・非表示」「グリッド」をアンチェックにして隠しちゃいます。どちらを使っても構いません。ガイドもグリッドも使い易い方を選んでWeb デザインをし易いようにしていきましょう。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

4時間27分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年04月13日

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

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

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