ガイドを使い仮の線を引いていきますが、レイアウトを作っていくうえで黄金比と言う比率が有りますのでその事を少しお話します。黄金比とは1:1.618の比率で物を作成すると美しく見える比率なんです。でも私はこれを気にしなくてレイアウトを作成しています。興味がある方は「黄金比」で検索されると詳しいことが書いてあるサイトがたくさん有りますので検索してみてください。
ここでは黄金比率は無視して作成していきますがご了承ください。それでは各パーツのサイズを決めていきます。この画面のサイズは横幅が1500pxになっていますが実際のホームページのサイズは横幅1070pxで仕上げますのでそれをふまえてガイドを引いていきます。上部メニューの表示-新規ガイドをクリックするとガイドを設定する画面に行きますので各数値を入力していきます。
ホームページに影をつける為のガイド設定
影がついて浮き出てるようなかんじのホームページにしますので影をつける為のガイドを設定して実際影をつけてみます。新規ガイド垂直方向に200pxを入力してOKを押し続いて垂直方向に1270pxを入力してOKを押します
するとラインが縦に2本引かれます。ちなみに線の内部の幅が1270-200=1070pxになっています。なんで両サイドに無駄な余白を作っているのかと言うと無駄な余白の部分がホームページの背景画面になるからです。
それでは次に垂直方向に210pxと1260pxのガイドを入力してください。次に水平方向に0pxと3000pxを入力します。ここで入力したガイドの内部に長方形ツールを使い四角形を配置します。ガイドラインの側からドラッグして描くとガイドにくっついて四角形が描けます。
四角形が描けたら右側のレイヤーの場所にシェイプ1と言うレイヤーが増えました。
描いた四角形がきちんとサイズと配置が合っているのかを確認してみます。レイヤーのシェイプ1を選んでいる状態のまま(シェイプ1の背景が上図のように青くなってる場合が選択された状態です。)
Photoshop上メニューの編集-変形-拡大・縮小をクリックしてください。
Photoshop上メニューの所に画像の詳細が出ます。小さな白い四角ボックスの真ん中に黒いボックスが有りますがそれはシェイプ1の四角形の基準値がセンターになっている事を表しています。
小さな白い四角ボックスの左上の場所をクリックして下さい、これでシェイプ1の四角形の基準値が左上になりました。x=210pxとy=0pxになっていれば左隅の場所にきちんと配置されています。
次にその隣にあるW,Hを確認します。最初は両方とも100%になっていますがこれではサイズが分からないためWに正式なサイズ1050px,Hに3000pxと入力して右端にある丸ボタンを押せば完了です。これで先ほど作成したシェイプ1は配置もサイズもきちんとガイドに沿って作成されている事が確認できました。
レイアウトを作成するときは少し面倒ですがこの方法で確認することをおススメします。たまになんですけど、見た目ではガイドにきちんと沿って作成されているように見えても実際は1pxずれていたりすることがあります。たった1pxのずれでも例えばシェイプの周りに1pxのラインを描いていた場合がそのラインは消えてしまいますので大事な1pxになっていきます。
ここまででとりあえず保存してみましょう。ファイル-別名で保存をクリックして名前はお好きな名前で結構です。ファイルの形式はPhotoshopにしておきます
それでは次に背景が浮き上がっているような影をつけていきます。
最終更新日: 2013年1月24日