comp

カンプでホームページのレイアウト練習

Photoshopを開く

新規640px・550px　白
表示→環境設定→単位・定規→ピクセル
表示→新規ガイド→水平方向(Y軸)
　　　10 35 80 90 250 260 280
表示→新規ガイド→垂直方向(X軸)
10 35 120 130 180 420 430 600 610
表示→ガイドをロック（触ると動いてしまうので）

ガイドのラインに沿って長方形ツールなどで描いていく

完成形↓


  • 電話のマークはwingdingsでShift+8
  • メインキービジュアルのところ角丸長方形ツール（丸み5〜6）で写真を入れたいところの枠を描き次に挿入したい写真をphotoshopで開きレイヤーのサムネイルからドラッグする。角丸でかいたレイヤーと挿入した写真のレイヤーの間の線のところをAltを押しながらマウスを合わせて絵が変わったらクリックして写真を入れ込む。
  • テキストで作った文字をコピーして文字ツールでドラッグした枠の中にペースト。そのテキストボックスの大きさを調節するときは文字ツールで大きさを変えると文字がつぶれない。選択ツールでバウンディングボックスにして大きさを変えると文字がつぶれる。
  • グラデーションのバーの上に白い文字を載せたいときはfx→ドロップシャドウにして見やすくする。
  • シャエイプツールは面なのでレイヤーマスクが選択されていて枠が見fx→境界線１px