Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。Illustratorでロゴやパーツを作り、PhotoshopでWebデザイン、その後、HTML・CSSでのコーディングまでの現場レベルのWeb制作を効率的に学べる実践編 Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。

HOME >> Webデザイナースクール体験記Illustrator-Photshopユニット >> Illustrator-Photshopユニット 教程5 Photshopの基本操作-2

Illustrator-Photshopユニット 教程5 Photshopの基本操作-2

Illustrator-Photshopユニットの4週目です。

【教程5 Photshopの基本操作-2】
項目:フィルタ操作、レイヤー操作、ペイントツール

今回は、Photshopで半透明で立体的なボタンを作成しました。
ボタンの作成のプロセスよりも、無駄な作業を省いた、Photshopの機能、操作方法、ステップなどの要素を知り、体験する事が目的です。

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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


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


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


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

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

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


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

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

選択範囲解除する。


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


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


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


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


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

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


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

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


Webデザイナースクール探しのコツ

ウェブデザイナースクールを探す時、まずあなたはどんな情報を重視しますか?

Webデザイナーと一言でいっても、 Webプロデューサー、Webディレクター、Webプログラマー、派遣でWeb制作、企業内でWeb担当・・といったように就職先や職種など様々な道があります。

無駄なく、すべてを学べる最適な学習プランを見つけるコツはWeb講座専用の資料を入手することです。

Web講座専用の資料を請求すると、Webデザイナーとして目指すクリエイターになるには、何を勉強し、どんなスキルを習得すればよいのか?
また、それには費用はいくらかかるのか?
など無駄なく、すべてを学べる最適な学習プランをチェックできます。

また、講座の詳しい説明はもちろん、修了生の感想や活躍状況など ネットや広告には書かれていないプロならではの業界最新事情なども手に入ります。

ヒューマンアカデミーには、無料資料が用意されていますので、スクール探しの情報収集として、まずは最新情報を無料で取り寄せてみましょう!!


ウェブデザイナー スクール ヒューマンアカデミー名古屋


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミWeb講座資料請求(無料)>>>

ウェブデザイナー スクール ヒューマンアカデミー名古屋Webのお仕事とは?

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座コース料金一覧

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座の特徴・講師紹介

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web関連試験資格情報


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミーWeb講座資料請求(無料)はこちらから>>>

« Illustrator-Photshopユニット 教程4 Photshopの基本操作-1 | HOMEへ | Illustrator-Photshopユニット 教程6 Photshopの基本操作-3 »

【Webデザイナースクール体験記Illustrator-Photshopユニットカテゴリーの関連記事】

Illustrator-Photshopユニット 教程6 Photshopの基本操作-3
Illustrator-Photshopユニット 教程5 Photshopの基本操作-2
Illustrator-Photshopユニット 教程4 Photshopの基本操作-1
Illustrator-Photshopユニット 教程3 Illsutratorの基本操作-3
Illustrator-Photshopユニット 教程2 Illsutratorの基本操作-2
Illustrator-Photshopユニット 教程1 Illsutratorの基本操作-1
初心者のWebデザイナーのスクール探し


HOMEへ   ▲画面上へ
Hatenaブックマークに追加 このエントリーをHatenaブックマークに追加

Yahoo!ブックマークに登録 Yahoo!ブックマークに登録  ブックマークに追加する

トラックバック

このエントリーのトラックバックURL:
http://www.pro-web.info/mt/mt-tb.cgi/12

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)