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

Webデザイン講座(CS6版)

Webデザイン講座

  • ダウンロード

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

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

続きを読む

学習素材のダウンロード

  • ダウンロード

学習素材のダウンロード

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

続きを読む

Step01 ベースの作成

  • Illustrator

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

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

続きを読む

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

  • Illustrator

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

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

続きを読む

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

  • Illustrator

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

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

続きを読む

Photoshopでデザインカンプの作成をしていきます。

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

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

続きを読む

Photoshop Step02 ヘッダーの作成

Photoshop Step02 ヘッダーの作成

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

続きを読む

Photoshop Step03 イメージ画像の作成

Photoshop Step03 イメージ画像の作成

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

続きを読む

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

  • Photoshop

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

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

続きを読む

Photoshop Step05 コンテンツの作成

Photoshop Step05 コンテンツの作成

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

続きを読む

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

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

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

続きを読む

Photoshop Step07 IllustratorとPhotoshopの連携

Photoshop Step07 IllustratorとPhotoshopの連携

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

続きを読む

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

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

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

続きを読む

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

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

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

続きを読む

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

Step01 サイトの管理:HTML

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

続きを読む

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

Step02 HTML

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

続きを読む

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

Step03 HTML

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

続きを読む

HTML・CSS Step04 CSS

Step04 CSS

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

続きを読む

HTML・CSS Step05 CSS

Step05 CSS

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

続きを読む

HTML・CSS Step06 CSS

Step06 CSS

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

続きを読む

「自分の仕事は自分でクリエイトする」

当サイトは、Webクリエイターズスクール メンバー専用サイトです。