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

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

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

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

Fireworksでスライスをきり、書き出したパーツをDreamwerverで実装して、デザインしたパーツを1pxも違わずブラウザで確実に表示させるというサイト作り。
現在はこれらを完璧にできるようにとその過程を反復練習しながら、Fireworks、Dreamwerverの操作に慣れるという流れです。

今週は、先週、先々週に習った作業を反復練習、CSSの解説、キャッチコピー、テキストの配置などをしました。

【今日の授業内容】

Fireworks
・レイヤー管理
・スライス挿入、書き出しの反復練習
・背景画像、タイトルロゴ作成、書き出しの反復練習

Dreamwerver
・Fireworksで書き出したパーツをテーブルを組んで実装させる反復練習。

・CSSタグに対して詳細を設定する練習。
外部CSSでの記述をする前に、CSSを理解するためにまずタグに対してスタイルを設定する練習をしていきます。

・複数ページ展開していくレイアウトの基本。
サイト作成の基本はレイアウトの幅をきっちりと決めること。
ページが変わるたびに、レイアウトが違うのは、ユーザーにとっては見難いもの。

・キャッチコピーとテキストの配置


Webデザインレイアウトの練習


何度も何度も基本を反復練習することで、かなり作業もスムーズに進むようになりました。
しかし、レイヤーの管理として、「レイヤーの基準をどう決めるのか?」がまだ理解しきれていないので、この点を講師に質問しました。

「レイヤーの基準をどう決めるのか?」

Fireworksの場合、表示、非表示の切り替えを基準にレイヤーを作ります。
書き出す時のことを考えて、レイヤーを表示、非表示で切り替えやすい状態をレイヤーで再現するということ。

例えば、ボタンを作成で、ロールオーバーイメージを作成する場合、
レイヤーパレット上で、ノーマル、オーバーを表示、非表示を切りかえればスライスをきりやすくなり、書き出しが効率的にできる。

Webデザイン Fireworks レイヤーの整理

背景画像だけを書き出したい場合は、背景画像用のレイヤーを表示させ、ボタン等のレイヤーを非表示にすればよい。

つまり、レイヤーを切り替えることによりスライスの書き出しやすさを基準にすればよいのだということが理解できました。

今週は宿題がでました。
講師の用意したpsdファイルのテンプレートをFireworksで開き、スライスをきり、書き出し、Dreamwerverで実装してくること。

あーーできるかしら・・・。

やらなければ!!


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

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

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

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

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

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

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


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


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

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

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

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

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


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

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

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

コメントを投稿

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