演習Web01 オリジナルデザイントレース「デザイン会社のWebサイト」

基本情報&ポイント

トレースの基本情報

まずはトレースの基本情報の確認です。

基本情報

• 1440px x 3570px(Webのため可変)
• 構成要素・・・
  ヘッダー(ロゴ/グローバルナビゲーション/SNSアイコン)
  メイン画像(画像/メインコピー)
  Conceptブロック(ブロック見出し/画像・テキスト)
  Topicsブロック(ブロック見出し/画像・カテゴリ&日付/誘導テキスト)
  Instagramブロック(ブロック見出し/画像・カテゴリ&日付/誘導テキスト)
  フッター(ロゴ/SNSアイコン/著作権表記)

サイズはWebのため可変ですが、横1,440px x 縦3,570pxです。

使用データ

• 写真・・・__img_concept(.psd) / __img_main(.psd)/
  「img_instagram」フォルダ内instagram01～05(.psd) / 「img_topics」フォルダ内topics01～05(.psd)
• イラスト・・・__social_icon(.ai)

使用フォント(Googleフォントからダウンロード)

• 英字・・・Montserrat
• 日本語・・・游ゴシック(PCインストール済み)

Adobe Fontsが使用できないため、Googleフォントの中から私の方で近いものを選びました。
あらかじめダウンロード・インストールしておきすぐに使えるようにしておきましょう。
早速上記のリンクを開いてダウンロード・インストールを行ってください。

使用カラー

• グレー(フォントなど)・・・R:113/G:112/B:106(#71706a)
• グレー(背景など)・・・R:251/G:249/B:250(#fbf9fa)
• ホワイト(背景など)・・・R:255/G:255/B:255(#ffffff)

トレースのポイント

今回習得すべきトレースのポイントは「ブロック分けの背景」と「部分的な背景」の使い方です。

トレース開始

Web01__main(.psd)を開く

今回は「Web01__main(.psd)」に「下絵」として画像を埋め込み「トレース」グループも作成してます。
ファイルのダブルクリック、もしくはPhotoshop上部メニューからファイルを開きましょう。

1. Web01__main(.psd)をダブルクリックするか、Photoshopを起動して上部「ファイル>開く」よりWeb01__main(.psd)を開く。
2. 上部「ファイル > 保存」をクリックし保存先をUSBメモリなど管理できるフォルダを指定、
   保存名を「学籍番号_traceWeb01.psd」にして保存する。

トレース作業開始

ではトレース作業に入ります。