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

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

Illustrator-Photshopユニット 教程6 Photshopの基本操作-3

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

【教程6 Photshopの基本操作-3】
項目:PhotshopとIllustratorの連動方法、WebとDTP(印刷)の解像度の違い、テキストボックスの設定、デザインレイアウトの手法

今回は、PhotshopとIllustratorのそれぞれの得意な機能をいかし、ポストカードを作ります。
ポストカードを作ることが目的ではなく、その過程で、PhotshopとIllustratorの連動方法、WebとDTP(印刷)の解像度の違い、テキストボックスの設定、操作方法、デザインレイアウトの手法を学ぶことが課題です。

ポストカードの土台は、Illustrator作ります。
Photshopで加工、切り抜いた画像をIllustratorで開き、テキストを配置して仕上げていきます。

Web講座の覚えがき PhotshopとIllustratorの連動

【Photshop】
レイアウトしたい画像を加工していく。

■Photshopで加工したい画像を開く。
レイヤーパレットで背景をダブルクリックしてレイヤーに変換する。(忘れないこと!

■自動選択ツールで切り抜く。
自動選択ツールとは、クリックしたらクリックした時の同じような色を拾う機能。
選択できなかったところは、Shiftキーを押しながらクリックして選択範囲を拾っていく。

Webデザイナースクール

注意事項
オプションバーの「色の許容値」に注意。
許容値を上げるほど選択値が上がる。

さらに画像を美しく見せるためにレベル補正で修正する。
画像をpsdファイルで保存する。

■新規ファイルを作成
背景色をつける。
この背景色がキーカラーになる。

重要:
Photshopで加工した画像をコピー&ペーストでIllustratorに移動した場合、移動できるのは切り抜いた画像のみ。
切り抜き情報は消えてしまうので、背景が透明だとIllustratorにペーストした時に背景が白になってしまう。
なので、ここで背景色(キーカラー)をつけておく必要がある。

■移動ツールで保存したpsdファイルをドラッグ。

■自由変形ツールでレイアウトしていく。

■選択範囲→すべて選択。
表示レイヤーを結合。

これをコピーしてIllustratorへペーストする。

【Illustrator】
ポストカードの土台を作る。

■新規ドキュメント作成
サイズ:148×100
カラー:RGB

■Photshopからペースト
Webデザイナースクール

拡大縮小ツールでサイズを調整する。

■レイヤーをロック。

■新規レイヤー作成。

■文字ツールでテキストを配置していく。

■文字ブロックを作成、整列させる。
Webデザイナースクール

Webデザイナースクール


今回の授業はここまで。仕上げは来週です。

IllustratorとPhotshopの基本操作について今回で6回の授業が終了しました。

一番の収穫は、豊富な機能のうちで使いこなすべきツールはどれなのかだんだんわかってきたことです。
独学で、ただ、やみくもに市販の参考書とにらめっこしていた時に比べるとなんと効率のよいことか・・

できない、わからないところはその場ですぐに質問、解決できるのが、これまた嬉しい。
スクールに通っている間に弱点を克服しようと貪欲です。

【デザインレイアウトの3つコツ】

1.パーツで埋め尽くさないこと。
重心になる部分と何もない部分をつくる。

2.使う色は3色まで。
1色キーカーラーを決めておき、その1色の濃淡でカラーコーディネートしていく。
色数が少ないほどクールなデザインが出来上がる。
初心者は、初めは色を使わず白と黒の濃淡だけでデザインできるように訓練していくのが上手くなる近道。

3.テキストや文字のブロックなどのパーツは整理整頓。
整列ウィンドウでパーツを整理して配置する。


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

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

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

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

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

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

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


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


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

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

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

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

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


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

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

【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/13

コメントを投稿

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