スクール会員専用サイトです。

• ダウンロード

Webデザイン講座のカリキュラムについて

この講座では「フランス料理専門店」というテーマで架空のWebサイトを作ります。架空のクライアントへのヒアリングを基にコンセプトにあったWebサイトを制作していきます。

• ダウンロード

学習素材のダウンロード

学習素材のダウンロードはこちらからどうぞ！

• Illustrator

Illustrator ロゴ作成 Step01 ベースの作成

新規ファイル作成・環境設定・図形ツール・図形の拡大縮小・オブジェクトの整列・パスファインダ（交差）・回転ツール・アピアランス効果と分割・レイヤーの管理

• Illustrator

Illustrator ロゴ作成 Step02 イラストの作成

パスの操作・パスファインダ（合体）・オリジナルブラシの作成・登録・図形の拡大縮小・ペンツール・オブジェクトのグループ化・HSBでの色の指定方法・リフレクトツール

• Illustrator

Illustrator ロゴ作成 Step03 文字の入力とクリッピングマスク

文字間のカーニング・文字づめ・行送りの設定・文字のアウトライン化・グラデーションツール・透明度・クリッピングマスク

Photoshop Step01 背景・コンテンツベースの作成

Photoshopでデザインカンプの作成をしていきます。新規ファイルの作成・環境設定・ガイドの作成・レイヤーの管理・レイヤースタイル

Photoshop Step02 ヘッダーの作成

ヘッダーの作成・オブジェクトのコピー・移動・グラデーションオーバーレイの編集・ロゴの配置・スマートオブジェクト形式・ナビゲーションメニューの作成・文字の入力・文字パネルを使いこなすコツ・文字調整とショートカットキー

Photoshop Step03 イメージ画像の作成

イメージ画像の作成・画像の配置・レイヤーマスク編集のコツ・画像のレベル補正

• Photoshop

Photoshop Step04 キャッチコピーエリアの作成

キャッチコピーエリアの作成・テキストエリアの作成・両端が透明な罫線の作成

Photoshop Step05 コンテンツの作成

コンテンツの作成・効率よく複数画像を正確に配置する

Photoshop Step06 コンテンツ・フッターの作成

コンテンツ・フッターの作成、グループレイヤーの複製で効率よくデザインする

Photoshop Step07 IllustratorとPhotoshopの連携

IllustratorとPhotoshopの連携、Illustratorで背景画像のパーツを作成する・画像トレース機能(Illustrator)・レイヤーマスクの編集・レイヤースタイルの複製

Photoshop Step08 スライス機能と書き出し01

スライス機能と書き出し01 スライスのコツと注意点・ショートカットキーの割り当て・アンチエイリアスの使い分け・PNG形式での書き出し・Web用に保存する・書き出し設定の注意点

Photoshop Step09 スライス機能と書き出し02

スライス機能と書き出し02 スライス機能を利用したパーツの均等配置・スライスの分割・スライスの前後関係

Step01 サイトの管理：HTML

Photoshopで書き出した画像を使い、DreamweaverでHTML・CSSコーディングを行っていきます。

Step02 HTML

リンクの設定・li要素の入れ子

Step03 HTML

要素のグループ分け・コメントタグ

Step04 CSS

外部スタイルシートの作成・リセットのためのCSSの作成・CSSとHTMLファイルの連携・スタイル用のCSSの作成・サイト全体を中央に配置にする・ページ全体を囲む枠の指定

Step05 CSS

背景画像の指定・ロゴとナビゲーションメニューの配置・ナビゲーションメニューを横並びにする・コンテンツエリアの指定・hrの応用スタイル

Step06 CSS

li要素の横並びとマージン指定のテクニック・float（回り込み）解除の指定・プロパティの一括指定