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

HOME >> Webデザイナースクール体験記スタンダードテクニックユニット >> 【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】

【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】

【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】

今週から、もう一歩進んだ「実践的レイアウト、デザイン」に入ります。
目的は、ナビゲーションの役割や考え方を踏まえながら、0から自分のデザインでホームページを作る訓練。

初心者の実践的レイアウト、デザイン練習のコツは、

・隙間を多く作ること。
パーツやイメージ画像、テキストでページを埋め尽くさない。

・色数をおさえること。
あえて、モノクロでデザインして色数をおさえる練習。

隙間を多く作り、色数をおさえ、揃えるべきところをピシッと揃える。

これができるようになれば、初心者でも今どきのデザインでホームページをデザイン、レイアウトすることができる。
ページをパーツで埋め尽くし、多くの色を配色して、上級デザインをするのは、熟練デザイナーでも難しいことなのだそうです。


【今日の授業内容】

Fireworks
■背景画像作成

・色調補正、明るさ、コントラストでメリハリをつける。
・背景画像にレイヤーを重ねながら、各種ツールで画像補正していく。
・下のレイヤーに対して効果をかける。
・ぼかし、描画モード、不透明度、フィルター、カラー調整、トーンカーブなど。

クリエイターは、一枚の画像を加工したら満足するのではなく、レイヤーを重ね合わせてビジュアルを作り上げる技をもっている。
プロのクリエイターになる訓練・・いろいろとさわりながら、自分のオリジナルのビジュアルをつくる技とセンスを磨く。

・マスクを使わないで背景に溶け込ませる方法。
・グラデーションツールの効率のよい使い方。

■タイトル・ナビゲーションボタン作成

・ガイドの使い方。
・計算されたタイトル位置を決める。
・フィルター効果で文字のエッジをいい感じにぼかす。

・ナビゲーションボタン作成。
・アイコンの作り方。

■ページの基本レイアウトを決める。

・各ボタンに対してスライスをきる。
・スライスツールの効率のよい使い方。
・選択スライスの書き出し。

・背景画像の書き出し。


Dreamwerver
・新規作成
・背景画像を表示させる。
・新規CSSルールの作成

Fireworks
・各ボタンの寸法を計る。
Dreamwerverのテーブルを使って各ボタンを配置させるためには正確な寸法が必要となる。

Dreamwerver
・Fireworksで書き出したボタンを配置するためのテーブルを挿入。
・マージンの設定

ヒューマンアカデミー Webデザイナースクール ホームページ作成過程


今日はここまでで終了。

この流れは、基本的に前回のデザインレイアウトと同じです。
1回目では、授業についていくのに必死でしたが、2回目となると少し余裕がでます。

Dreamwerverでできること、Fireworksでできること。
これらをしっかり把握しながら連動させていく作業がよくわかってきました。

この繰り返しが、基礎を身に付け、応用につながる訓練になると思います。
ここで、しっかりと基礎を身につけておかなくては!


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

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

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

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

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

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

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


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


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

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

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

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

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


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

« Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動 | HOMEへ | 【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】 »

【Webデザイナースクール体験記スタンダードテクニックユニットカテゴリーの関連記事】

【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
【Webスタンダードテクニックユニット 教程20 Flash】
【Webスタンダードテクニックユニット 教程19 Flash】
【Webスタンダードテクニックユニット 教程18 Flash】
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動
Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン
Webスタンダードテクニックユニット 教程10 テーブルレイアウト データ用テーブル、入れ子テーブル
Webスタンダードテクニックユニット 教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP
Webスタンダードテクニックユニット 教程8 テーブルレイアウト
Webスタンダードテクニックユニット 教程7 ブラウザとソースコード


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

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

トラックバック

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

コメントを投稿

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