Webデザインコースのご案内 ＝ 誰でもいつでも参加できるパソコン塾

パソコン教室・パソコンスクール本郷PC塾トップ>授業 > Webデザイン・DTP >Webデザイン

Webデザインコース

授業内容

Webデザイン制作を始める前に、デザインについての知識を深めましょう。

●Web特有のレイアウトを知る

　Webページの各部の呼び方、既存のサイトからレイアウトを学ぶ、などです。　

●色彩・配色

　色相、明度、彩度、16進数によるRGB色空間の表記、Photoshopフォトショップのカラーピッカーで色を選ぶ、Webデザインで各色を使うときの注意、などです。

●おさえておきたいフォント

　明朝体、ゴシック体、セリフ体、サンセリフ体

などWebデザイン制作に必要なことについて学びます。 

画像編集アプリケーション、JPEG、GIF、PNGなどのような画像形式の違いについての知識を深めます。

●アプリケーションの特性を理解して使い分ける
　・Adobe photoshop　アドビ フォトショップ

　本来写真編集用のアプリケーション。画像編集はもちろん、動画編集、3DCGなどさまざまな画像や動画を扱える高機能なアプリケーション。

　・Adobe Illustrator　アドビ イラストレーター

　本来はイラスト等を描くためのアプリケーション。「ベクターグラフィック」とよばれる、拡大しても回転しても劣化しない図形を描画することができる。

　・Adobe Fireworks　アドビ ファイアワークス

　本来Webデザイン制作用のアプリケーション。

●Web画像の特性を理解して使い分ける

　・JPEG、GIF、PNGなどの特性

　・画像のサイズや形式について

PhotoshopフォトショップをWebデザインで効率的に使う方法を習得します。

●Webデザインが快適になる環境設定
　Windowsの環境設定、Photoshopフォトショップの設定ファイルの削除、Photoshopの環境設定などです。

●基本操作 １ 図形作成をマスター

　新規作成、グリッドの表示、図形（シェイプ）の作成、長方形をドラッグで作成・サイズ指定で作成、図形の（シェイプ）の移動と変形、などです。Exercise1「5つの正方形を作成、移動」

●基本操作 ２ 文字作成をマスター
　文字の作成と調整、文字パネルの表示、行送りの設定、などです。Exercise2「見やすい文字組み」

●基本操作 ３ レイヤー操作をマスター
　レイヤーパネル、テキストの作成、角丸長方形の作成・移動・複製・カラー変更、レイヤースタイルダイアログの表示・操作、レイヤースタイルの追加、などです。Exercise3「レイヤー作成の練習」、Exercise4「レイヤースタイルの練習」

●基本操作 ４ 整列／塗りつぶし／ズームイン・アウト

　整列、塗りつぶし、ズームイン、ズームアウト、写真の保存と貼り付け、写真の枠のレイヤースタイル、ボタンの土台の作成・グラデーション・境界線など、テキストのドロップシャドウ、レイヤースタイルのコピー／複製、新規スタイルの登録、などです。Exercise5「写真を紙焼き風にして、めくれたようなドロップシャドウをつける」、Exercise6「レイヤースタイルを使ったやさしいデザインのボタン」

Illustratorイラストレーターは、アイコンやイラストの制作に非常に便利ですので、しっかり身につけておきましょう。

●PhotoshopフォトショップとIllustratorイラストレーターはどう使い分ける

●快適に使うための設定

　設定の初期化、環境設定、などです。

●Illustratorイラストレーターの基本操作

　新規作成、長方形や楕円計の作成、整列パネル、レイヤーパネル、ペンツール使い方、オープンパスとクローズパス、パスの型抜きと分割、などです。

バナーのデザインでひと通りのテクニックを身につけましょう。

●Exercise1「Photoshopフォトショップのマスク機能を活用した広告バナーの制作」

　写真素材のダウンロード、写真に選択範囲を作成／コピー、カンバス作成、グラデーションレイヤーの作成、テクスチャの作成、文字の作成、レイヤースタイル、枠線、Web用に保存、などです。

●Exercise2「Illustratorイラストレーターを活用したキャンペーンバナーの制作」

　Illustratorイラストレーターで形状を作成、Photoshopフォトショップでバナーの土台となるファイルを制作、テキストを制作、などです。

PhotoshopフォトショップとIllustratorイラストレーターを使って架空のカフェのWebサイトをデザインし、Dreamweaverを使ってコーディングし、トップページを完成させます。

●一般的なWeb制作のワークフロー

　ディレクター／デザイナー／コーダーの役割、Web制作のワークフロー、などです。

●サイトの構造を考え、サイトマップを作る

●Exercise1「デザインカンプ作成①　アイコン」

　コーヒー／ドリンク／サンドイッチのアイコンを制作

●Exercise2「デザインカンプ作成②　ページの土台」

　ガイド／背景／背景用のパターンを制作

●Exercise3「デザインカンプ作成③　ロゴ」

　ガイド／背景／背景用のパターンを制作

●Exercise4「デザインカンプ作成④　サイドバー」

　サイドバー、コンテンツの背景を制作／アイコンをサイドバーに配置／サイドバーに文字を配置し、整える

●Exercise5「デザインカンプ作成⑤　コンテンツ」

　コンテンツ部分に画像・文字とシェイプを配置／地図を制作／地図をPhotoshopにペーストし、マスクする

●Exercise6「デザインカンプ作成⑥　フッター」

　フッターを制作

●マークアップにHTML5を使おう

　HTMLとは／HTML5の基本的なマークアップ／HTML5の新しいタグ

●装飾はCSSと使う

　CSSとは

●Webブラウザの知識を身につける

　さまざまなWebブラウザー／古いブラウザのバグ

●Dreamweaverの基礎知識と環境設定

　Dreamweaverに関する注意・アップデート・環境設定

●Exercise1「HTMLでサイトの構造をマークアップする」

　新規サイトを作成／HTMLを修正／テキストを流し込む／HTMLでページ全体の構造を定義／ヘッダー、フッター、ナビゲーションなどをそれぞれ囲む／EVENT、ACCESSをそれぞれ囲む／フッターの著作権表示を文字参照にする／HTMLのインデントをそろえる／タイトルを記述する／

●Exercise2「デザインカンプから画像を書き出す」

　デザインカンプを開き、別名保存／背景を書き出す／その他の画像をスライスする

●Exercise3「CSSで装飾する」

　リセットCSS／CSSファイルをHTMLファイルにリンク／ヘッダー・ロゴ・コンテンツ背景・リード文・EVENT・ACCESS・メニュー・フッターのコーディング／カフェサイトをアレンジ 

修了生の作品

・佐藤さん　お花とお料理が学べるお教室「Salon de HANA」
・機さん　0-12歳の子供と楽しく遊べる「子連れで上野動物園」
・佐野さん　リラクゼーションスペース「RoseBerry」
・山本さん　囲碁クラブ「三軒茶屋囲碁クラブ」 
・グループ制作　洋食「だんでぃらいおん」

・グループ制作　たこ焼きとワインのお店「OctoPanchos」

日程

●6月開講

平日コース

　7月3日（木）、10日（木）、17日（木）、24日（木）、8月1日（金）　10：00～17：00

授業料

授業料50,000円(税込、テキスト代込)

お申込方法

お電話でお申し込みください。
本郷PC塾　TEL:03-3818-5811

お問い合わせはお電話またはこちらからお気軽にどうぞ。