実践Webデザインスキル ー 第11章 チャレンジ

NESTschool公式サイトをデザインしよう(1)

このスキルのデータをダウンロード: Windows Mac

チャレンジ内容

完成版のpsdファイルをトレースしてNESTschool公式サイトを作ろう!



使用するファイル

・作業用.psd
・使用しているフォントは「Kozuka Gothic ProN6」のみ
・画像素材は全て「素材」フォルダより利用



トップページ(作業用).psdを開くと、見本のレイヤー、つまり真似をするデザインの画像が、不透明度が下がっている状態で表示されます。
上からなぞるような形で真似をしてもらう、という方法が一番早くて簡単な方法です。
少し慣れてきたら見本のレイヤーを非表示にして作業してみてください。よりスキルアップに繋がりますので、ご自分の状況に合わせて作業してください。



進め方

以下に示すステップは、あくまで進め方の参考です。
まずは、みなさん自身のやり方で進めて、わからない所は動画で学習するなどして、苦手を克服しよう!



01.ヘッダーのデザインを完成させよう

STEP1. ヘッダーのトップにあるラインを作成しよう
長方形ツール等を利用して、トップのラインを完成させましょう。
※ラインの色は、完成版のpsdファイルでスポイトツールなどを利用して調べてみよう。



STEP2.ロゴを配置しよう
ロゴは、今回は画像として用意してあります。「logo.png」
ファイル>埋め込みを配置 に進み、ロゴを配置しましょう。



STEP3.横並びのナビゲーション一覧を作ろう
完成版.psdと同じナビゲーションを作っていきましょう。
文字のフォントは、同じものかもしくは似たフォントで代用してください。

・完成版のpsdファイルで、ものさしツール等を利用して文字とラインの間の余白を測ってみよう。
・文字を入力しよう。
・長方形ツール等で、区切りのラインを作ろう。
完成したヘッダー関連のレイヤーをまとめてフォルダ化しょう


レイヤーの管理を予め行っておくと、後からの編集がやりやすいので、ここで必ずレイヤーを整理しておこう。





02.メイン画像を完成させよう

STEP1.キャッチコピーの文字を入力しよう
メイン画像の左側にあるキャッチコピーや文章を完成させよう。
※文字の大きさや色、余白等は全て完成版のpsdファイルで調べて下さい。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー



オンラインで磨く、クリエイティブスキル

NESTSCHOOL

いつでも、どこでも、自分のペースで学べる、クリエイティブな学校。

「楽しみながら」をモットーに、現場のプロによるハイクオリティな講義を、動画形式で配信!



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー




STEP2.どんなコースがあるの?ボタンを作ろう

・長方形ツールを使って、ボタンの背景を作ろう
テキストツールを使って、「どんなコースがあるの?」を入力し、文字パネルよりスタイルを調整しよう
文字の左側にあるアイコンを配置しよう
※アイコンは素材フォルダに「icon_next.png」という名前で保存しています。


・背景の画像を配置しよう
「main.jpg」という画像が、フォルダの中に入っています。
画像をそのまま配置し、完成版と同じになるように大きさを調整してください。
※背景画像なので、最後にレイヤー階層の移動も忘れずに!


・完成したメイン画像関連のレイヤーをまとめてフォルダ化しょう
レイヤーの管理を予め行っておくと、後からの編集がやりやすいので、ここで必ずレイヤーを整理しておこう。



03.授業内容を完成させよう

STEP1.見出しを作ろう
まずは見出しを作っていきましょう。
「授業内容」テキストの下にある下線は、「テキストの下線」ではなく「長方形」です。
※文字やラインの大きさや色、余白等は全て完成版のpsdファイルで調べて下さい。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー


授業内容

楽しく学ぶをモットーに、常により楽しく質の高い授業展開を心がけています。



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー





STEP2.講師紹介部分を作ろう
・まずは見出し「講師紹介」を作ろう
・クリッピングマスクを使って、講師の写真を配置しよう
※講師の写真は素材フォルダに「講師(1).jpg」という名前で保存しています。

・講師の名前、コメントを入力しよう
※文字のスタイルは全て完成版のpsdファイルで調べて下さい。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー


田村花子

ウェブデザインに関することなら、任せてください!



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



・長方形ツールを使って背景を作成しよう
この時点でひとまずレイヤーを整理しよう






04.コース紹介一覧を完成させよう

講師紹介部分と同じ背景、見出しになるので、レイヤーを複製して再利用すると便利です。

STEP1.見出しを作成しよう
・コース一覧のアイコンを配置しよう
※アイコンは、素材フォルダに画像として入っています。

・文字を入力しよう

ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー


Photoshopコース

Illustratorコース

Premiereコース

Fireworksコース

Dreamweaverコース



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

・文字と文字の間のラインを作成しよう
※この時、余白を統一しているという事を忘れずに!



STEP2.長方形ツールを使って、ピンク色の背景を作成しよう
背景になるので、レイヤー階層の移動を忘れずに!

STEP3.完成した授業内容関連のレイヤーをまとめてフォルダ化しょう
レイヤーの管理を予め行っておくと、後からの編集がやりやすいので、ここで必ずレイヤーを整理しておこう。

05.料金体制の部分を作成しよう

STEP1.見出しを作ろう
講座案内と同じ見出しのスタイルなので、レイヤーを複製してから利用すると便利です。



ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー



料金体制

学びたいと思った時がベストな時期。いつでも気軽に始めれるように、月額課金制です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

STEP2.まずはフリープラン一覧を完成させよう

・まずは必要な文字を入力しよう
・完成版のデザインを参考に、文字のスタイルや位置を調整しよう
・一覧にある区切りの「点線」を作成しよう
※作成方法は様々ですが、ここでは「鉛筆ツール」を使ってみましょう

ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー

フリープラン

無料 /月

・毎日1動画無料

・コンテンツダウンロード(有料)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



・入会するボタンを作成しよう
・長方形ツールを使って背景を作成しよう
・この時点でひとまずレイヤーを整理しよう



STEP3.フォルダにまとめた「フリープラン」を複製して、完成版と同じになるように文字を編集しよう
フリープラン部分と同じデザインで、文章だけが違うので、レイヤーを複製して再利用すると便利です。

ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー

フリープラン
無料 /月
・毎日1動画無料
・コンテンツダウンロード(有料)



デザイナープラン
1,980円 /月
・Photoshopコースの動画見放題
・Illustratorコースの動画見放題
・無料コンテンツダウンロード



コンプリートプラン
3,980円 /月
・全コースの動画見放題
・無料コンテンツダウンロード
・教科書プレゼント

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー




STEP4.長方形ツールを使って、全体の背景を作成しよう
背景になるので、レイヤー階層の移動を忘れずに!

STEP5.完成した料金体制関連のレイヤーをまとめてフォルダ化しょう
レイヤーの管理を予め行っておくと、後からの編集がやりやすいので、ここで必ずレイヤーを整理しておこう。



06.フッターを作成しよう

STEP1.長方形ツールを使って、フッターの背景を作ろう
※背景の色は、完成版のpsdファイルより調べて下さい。

STEP2.テキスト(コピーライト)を入力しよう

ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー

Copyright (c) Nest inc. All Rights Reserved.

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



STEP3.テキストを上下左右の中央に揃えよう



以上のステップは、あくまで進め方の参考です。
まずは、みなさん自身のやり方で進めて、わからない所を動画学習で苦手を克服しましょう!