Webデザイナースクール体験記

マニュアル通りのやり方ではなく、レイヤーの操作、レイヤースタイル、ぼかしや陰、不透明度などのディティールデザイン、グラデーションツールの使い方、オブジェクトの自由変形、スライスの基本、
などWebデザイナーとして現場ですぐに使える必要最低限の技を教えてもらいました。

カリキュラムでは、【フィルタ操作、レイヤー操作、ペイントツール】となっていますが、この基本をより実践向けにプラスアルファのポイント付きの授業内容。

【今日のWeb講座のポイント】

■レイヤー作成
オブジェクトに効果をつける前に、必ず工程ごとにレイヤーを作成すること。
（こまめにレイヤーを作ることで、後から編集が自由自在にできる。）

■レイヤースタイルを使いこなす。

■グラデーションツールをマスターする。
（グラデーションは、どのアプリケーションよりもPhotshopが一番美しく出来上がるそうです。）

■サイズの変更方法。
ドキュメントサイズの変更は、カンバスサイズを変更する。
オブジェクトサイズの変更は、画像解像度を変更する。

Web講座の覚えがき ボタン作成過程

新規ドキュメント作成。
ドキュメントサイズ
500×500ピクセル
カンバスカラー　透明
表示　100%

■レイヤー１
塗りの色を決める。
背景を塗りつぶしツールで塗りつぶす。
フィルター→テクスチャ→テクスチャライザで効果をつける。

『ボタンを作成』
楕円形選択ツールで楕円形に選択範囲を作る。。
グラデーションツール→オプションバーのグラデーションをクリックしてグラデーションエディタを表示
インクボトルでグラデーションカラーを調整。

■レイヤー２
新規レイヤーを作成
オプションバーのグラデーションの形態を選び、選択された楕円形内を上から下にドラッグ。
これで、楕円形で選択された範囲にグラデーションが適用される。

『ボタンの縁に陰をつける』
レイヤー→レイヤースタイル→光彩（内側
描画モード　通常
カラーピッカーをクリック。
黒を選択。

『ボタンのエッジを微調整する。』
レイヤースタイルで不透明度、サイズ、チョークなどで微調整。

※レイヤースタイルの注意
どの効果を選択しているかを確認すること。

『ボタンにツヤ感を出す』
レイヤーパレット上で不透明度を調整。

『ボタンに陰をつける』
レイヤースタイルを表示しドロップシャドウ。
描画モード　乗算
サイズ、スプリッド、距離を調整。

■レイヤー３ボタンにディティールをつけていく。
新規レイヤー作成

『白のてかりをつける』
選択範囲→選択範囲を変形

てかりをつけたい部分を白で塗りつぶすと立体感が出ない。（←素人
グラデーションツールを上手く使う。（←プロ

■レイヤー４
ボタンの真ん中にぼかしを入れ、ボタンに厚みをつける。
新規レイヤー作成

ボタン下部に楕円形の選択範囲を作る。
選択範囲→境界をぼかす
白のグラデーションを適用。

選択範囲解除する。

ここからは、各工程色をどのように溶け込ませていくか、各レイヤーのモード、不透明度などを調整する。

■文字ツールで文字を入れる
テキスト中央揃え
レイヤースタイルドロップシャドウで文字に陰効果をつける。

■レイヤーを整理する
新規グループ作成することによりここまでの一連のレイヤーがグループ化されました。
これを複製することで同じボタンがいくつも作成できます。
あとは、テキストを入れ替えるだけです。

■ボタンサイズの変更方法
ドキュメントサイズの変更は、カンバスサイズを変更する。
オブジェクトサイズの変更は、画像解像度を変更する。

■スライスツールで文字を正確に配置していく

背景にイメージ画像を溶け込ませて完了。

３時間の時間をいっぱい使ってとても充実した授業でした。
こんなことは、初心者には一度で覚えられるはずもなく、メモしながらの受講です。

この効率を重視したボタン作成の過程を何度も何度も復習することがPhotshopを使いこなす一番の訓練！