- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(57日目)


基金訓練(Webデザイン・プログラミング科)の57日目に行ってまいりました。
57日目は、Adobe Photoshop CS4の実習です。

57日目の内容は下記のとおりです。

フォトショップを使ってWebデザイン

1.ガイドを引く

  • 長方形選択ツールで、スタイルを固定にして、ガイドを引きたい間隔を、幅や高さに数値を入力して、カンバス上の適当な位置でクリックして選択範囲を表示させます。
  • 選択範囲をドラックして、ページの端に近づけて端にスナップします。
  • 定規からドラックしたガイドを、選択範囲にスナップします。
  • これを繰り返して、必要な箇所にガイドを引きます。

※上下左右端にもガイドを引いておくと便利。

2.ロゴ文字にミラー影付け

  • ロゴのレイヤーをコピーします。
  • コピーしたレイヤーを選択し、Ctrl+Cでバウンディングボックスを表示します。
  • 下に影をつけたい場合、バウンディングボックスの上の辺をつかんで、下の辺を過ぎて、適当なミラー影になる位置までドラッグします。
  • レイヤーパネルで塗りを0%にします。
  • レイヤースタイルでグラデーションをつけて完成。

3.メインイメージの貼り付け

  • 貼り付けたいイメージをコピペします。
  • トリミングしたい範囲を、長方形選択ツールで囲みます。
  • コピペしたレイヤーを選択し、レイヤーパネルの下にあるベクトルマスクのボタンをクリックすると、トリミング完了。
  • ※トリミング範囲を後から変更したい時は、レイヤーパネルのカギマークをクリックしてマークを消し、レイヤーパネルのマスクのアイコンを選択してマスクを変更します。
  • ※周りをぼかしたい時は、長方形選択ツールを使用するときに、ぼかしの値を指定します。

4.ナビボタンの作成

長方形を作る

  • 長方形ツールで長方形を描きます。
  • 移動ツール+Altキーで、必要個数コピーします。
  • スタイルパネルからスタイルを選びます。
  • レイヤースタイルをすべての長方形にコピペします。
  • ※長方形ツールで長方形を描く時、ガイドにスナップさせて描かないと、長方形のエッジがぼけるので注意してください。
  • ※スタイルは、「フォトショップ スタイル」でググると、無料でダウンロードできるサイトがたくさんあるので、ググって見てください。

文字を入れる

  • 文字ツールを使って文字を入れます。
  • レイヤースタイルをいじって、文字を仕上げます。

5.バナーの作成

長方形の枠の書き方

  • 新規レイヤーを作成します。
  • 長方形選択ツールで長方形を描きます。
  • 編集メニュー→境界線を描く で、長方形の枠が描けます。




実習で使用している教本