基金訓練(Webデザイン・プログラミング科)の57日目に行ってまいりました。
57日目は、Adobe Photoshop CS4の実習です。
57日目の内容は下記のとおりです。
フォトショップを使ってWebデザイン
1.ガイドを引く
- 長方形選択ツールで、スタイルを固定にして、ガイドを引きたい間隔を、幅や高さに数値を入力して、カンバス上の適当な位置でクリックして選択範囲を表示させます。
- 選択範囲をドラックして、ページの端に近づけて端にスナップします。
- 定規からドラックしたガイドを、選択範囲にスナップします。
- これを繰り返して、必要な箇所にガイドを引きます。
※上下左右端にもガイドを引いておくと便利。
2.ロゴ文字にミラー影付け
- ロゴのレイヤーをコピーします。
- コピーしたレイヤーを選択し、Ctrl+Cでバウンディングボックスを表示します。
- 下に影をつけたい場合、バウンディングボックスの上の辺をつかんで、下の辺を過ぎて、適当なミラー影になる位置までドラッグします。
- レイヤーパネルで塗りを0%にします。
- レイヤースタイルでグラデーションをつけて完成。
3.メインイメージの貼り付け
- 貼り付けたいイメージをコピペします。
- トリミングしたい範囲を、長方形選択ツールで囲みます。
- コピペしたレイヤーを選択し、レイヤーパネルの下にあるベクトルマスクのボタンをクリックすると、トリミング完了。
- ※トリミング範囲を後から変更したい時は、レイヤーパネルのカギマークをクリックしてマークを消し、レイヤーパネルのマスクのアイコンを選択してマスクを変更します。
- ※周りをぼかしたい時は、長方形選択ツールを使用するときに、ぼかしの値を指定します。
4.ナビボタンの作成
長方形を作る
- 長方形ツールで長方形を描きます。
- 移動ツール+Altキーで、必要個数コピーします。
- スタイルパネルからスタイルを選びます。
- レイヤースタイルをすべての長方形にコピペします。
- ※長方形ツールで長方形を描く時、ガイドにスナップさせて描かないと、長方形のエッジがぼけるので注意してください。
- ※スタイルは、「フォトショップ スタイル」でググると、無料でダウンロードできるサイトがたくさんあるので、ググって見てください。
文字を入れる
- 文字ツールを使って文字を入れます。
- レイヤースタイルをいじって、文字を仕上げます。
5.バナーの作成
長方形の枠の書き方
- 新規レイヤーを作成します。
- 長方形選択ツールで長方形を描きます。
- 編集メニュー→境界線を描く で、長方形の枠が描けます。
実習で使用している教本