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

HOME >> サイトマップ

Webデザイナースクール体験記Illustrator-Photshopユニット [7]

初心者のWebデザイナーのスクール探し
Webデザイナーのスクール探しのきっかけ、予算、資料請求、説明会

Illustrator-Photshopユニット教程１ Illsutratorの基本操作-1
Webデザイニングレッスンコースは、初心者からホームページ制作の流れを一通りマスターできる基本マスターコースです。ドキドキ・・わくわく・・Webデザイニングレッスンコースの第1週目です。

Illustrator-Photshopユニット教程2 Illsutratorの基本操作-2
今日は、イラストのトレースです。図形ツール、変形ツール、ペンツールを使用して教材ファイルの「カニ」を描きました。

Illustrator-Photshopユニット教程3 Illsutratorの基本操作-3
今日は、地図の制作実習です。地図等で作成される線やパスを連結する方法を習いました。

Illustrator-Photshopユニット教程4 Photshopの基本操作-1
今回は、Photshopの基本操作です。講師によるとPhotshopを使いこなすコツは、まず遊ぶこと。

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

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

Webデザイナースクール体験記スタンダードテクニックユニット [16]

Webスタンダードテクニックユニット教程7 ブラウザとソースコード
今回から、いよいよHTML。Dreamwerverを使用してHTMLの基本を覚えていきます。前半は、前回の続きでIllustratorでポストカードの仕上げ。後半が、HTMLの基本。という授業内容でした。

Webスタンダードテクニックユニット教程8 テーブルレイアウト
今日は、テーブルレイアウトです。テーブルを構成するHTMLタグの細かな設定の前に、Dreamwerverの操作に慣れる、感覚をつかむという内容。

Webスタンダードテクニックユニット教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP
今回はテーブルを構成するHTMLタグの細かな解説を受けながらの授業でした。またファイル転送ソフトFFFTPを使って受講生用に準備されているサーバーへのアップロードも行いました。

Webスタンダードテクニックユニット教程10 テーブルレイアウトデータ用テーブル、入れ子テーブル
先週に続いて、テーブルレイアウトです。テーブルを構成するHTMLタグの細かな解説を受けながらレイアウトのためのテーブルを理解していくという授業内容でした。

Webスタンダードテクニックユニット教程11 実践的レイアウト、デザイン
今週からいよいよ本格的なデザイン、レイアウトを実践していきます。今後、Webデザイナーとして作成するホームページの基本となる技です。

Webスタンダードテクニックユニット教程12 実践的レイアウト FireworksとDreamwerverの連動
今週は、前回の続き。自分のデザインしたレイアウトをブラウザで確実に表示させる超実践的な授業です。

【Webスタンダードテクニックユニット教程13 実践的レイアウトその2】
今週から、もう一歩進んだ「実践的レイアウト、デザイン」に入ります。目的は、ナビゲーションの役割や考え方を踏まえながら、0から自分のデザインでホームページを作る訓練。

【Webスタンダードテクニックユニット教程14 実践的レイアウトその3】
表示させたボタンの対となるボタンを作りロールオーバーイメージを作ります。Fireworksの同一画面でロールオーバーボタンを作成するミソは、レイヤーを整理して上手く使いこなすこと。

【Webスタンダードテクニックユニット教程15 実践的レイアウトその4】
これまでの過程を反復練習しながら、Fireworks、Dreamwerverの操作に慣れるという流れから、今週は、先週、先々週に習った作業を反復練習、CSSの解説、キャッチコピー、テキストの配置などをしました。

【Webスタンダードテクニックユニット教程18 Flash】
今週はいよいよFlashに入ります。Flashをさわるのは初めてなので、ちょっとワクワク・・・。Flashは、アニメーションのように1コマ1コマ作らなくても、人が設定することで勝手に計算しながら動いてくれるのが大きな特徴。

【Webスタンダードテクニックユニット教程17 実践的レイアウトその6】
先週の複数ページ展開の続きです。ホームページの基本となるレイアウトとコンテンツの関連情報を入れるフォーマットができたらあとは複製していくだけです。

【Webスタンダードテクニックユニット教程16 実践的レイアウトその5】
先週作成したトップページを活かしながら複数ページ展開の方法を学びました。コンテンツとしてCDジャケットと関連情報を入れていきます。

【Webスタンダードテクニックユニット教程19 Flash】
今週はFlashの2回目。ナビゲーションのエリアを使い文字の表現の仕方を交えながらFlashの基本を身につけていきます。FireworksからWebサイトのヘッダー部分をコピーして、Flashにペースト。タイトル部分に透明感をもたせ、動きの変化をつけていきます。

【Webスタンダードテクニックユニット教程20 Flash】
Flashの3回目。先週の続きで、今週はヘッダー右側の「会社概要」などの5つのボタンにボタンタイプをつくり、ここに動きを入れていきます。Webページが表示された時、タイトル部分の動きが止まると同時くらいに上部から5つのボタンが順番におりてくるように設定。マウスオーバー時のカラーにも変化をつけます。

【Webスタンダードテクニックユニット教程21 Flash・HTML・CSS】
DreamwerverでFlash（swfファイル）をhtmlに組み込み、複数ページ展開していきます。これにCSSの適用も取りいれながらCSSの基本とDreamwerverでの操作方法も練習しました。テーブルを使ったレイアウトからCSSレイアウトへの移行する過渡期の方法論。簡素なテーブルに、CSSレイアウトを組み合わせてコーディングを行います。

【Webスタンダードテクニックユニット教程22 Flash・Fireworks】
Dreamwerverでswfファイルをhtmlに組み込み、複数ページ展開していく上で各ページが同じヘッダーだとつまらない・・ということで今日は、Fireworksでの各ページ用のヘッダー画像（Flash swfファイル）のリサイズ、作成方法とFlashとの連動を学びました