【1min. Webデザイン】PhotoShopで作るWebデザインを解説 Vol.0002
【1min. Webデザイン】ではWebデザイン制作の様子を一分に早送りにした動画を元に、どういった作業を実施したのかを解説いたします。
今回の動画はこちら！
無駄な動きが多いですね…では、一つづつ解説していきましょう！
1, ファイルの新規作成、サイドメニューの作成
まずは、ファイルを以下の数値で新規作成します。
・横幅：1920px
・高さ：1080px
・解像度：72dpi
・背景色：#fff
次にサイドメニューを設置致します。
「W:80px、H:1080px」色を「#001d28」の長方形シェイプを作成します。
このシェイプは背景レイヤーの次の階層におき、「X:0、Y:0」に設置してください。
次にサイドメニューに掲載する各種ボタンを掲載します。
「X:0、Y:0」にハンバーガーメニューのトグルボタンを設置します。
「W:24px、H:3px」「W:16px、H:3px」「W:8px、H:3px」の長方形シェイプを作成します。
左揃え、余白を8pxづつ均等に開けて配置します。
さらにボタンの背景に横幅と高さを80pxにした正方形を配置し、色を「#003547」にします。
サイドメニューの下には「インスタグラム」「ツイッター」「フェイスブック」のアイコンを均等に縦にレイアウトし、サイドメニューに対しセンタリング、下辺から80pxの場所に設置します。
※各種SNSアイコンは「フラットアイコン」からダウンロードできます。
https://www.flaticon.com/
2, メイン画像と、メインコピーの掲載
次にメイン画像を掲載します。
掲載したい写真を開き、デザインファイルにペーストします。
ペーストした写真レイヤーを「スマートオブジェクト」に変更し、適切な大きさに縮小します。
次に「W:840px、H:1080px」のシェイプを作成し、ペーストした写真にシェイプのベクターラインのみをペーストします。
すると、写真が「W:840px、H:1080px」にトリミング（マスク）される為、写真の位置と大きさをいい感じにします。
最後に写真のカラーリングを「Camera Raw フィルター」で調整してメイン画像は完了です。
続いてメインコピーを記載します。
今回は「Roboto」という書体を使用しました。Googleフォントからダウンロード可能です。
文字サイズは大きめ、ウェイトは太めの書体を選択し「NIKE」「AIR」「JORDAN」と入力します。
今回は行間を開けないデザインを提案しましたが、お好みに合わせてレイアウトしてください。
続いて、サブコピーですが「Speciality Sneaker」と記載しました。
一旦、小さめの文字にいい感じにレイアウトしましたが、退屈な印象になった為、ハンドライトフォントに変更し躍動感があるように変更しました、
3, コンテンツ部分の作成
まず、横幅と高さを450pxに設定した正方形シェイプを作成します。
次に掲載したい写真をデザインファイルにペースト、さらに写真に正方形シェイプのベクターラインをペーストして、トリミングを行います。
写真の上部にコピー（今回は商品名）を記載して、一コマ作成しました。
※Movieでは商品名を調べるためにググっています。
一コマ分のレイヤーをグルーピングし、三列用意します。
上記と同じ要領で写真と、コピーを変更します。
4, 最後に色々調整
コンテンツ部分の角写真のカラーリングを調整し、デザイン全体に統一感を出します。
右上に記載していた「01」の文字に違和感を感じたため削除。代わりにジョーダンの切り抜き写真を掲載します。
写真の切り抜き機能は様々ですが、玄人的な筆者はやはり「ペンツール」で切り抜きたくなります。
自動切り抜きを便利なのですが、どうも抵抗があって…
切り抜きも他の写真と同様に、シェイプを作成しベクターラインでトリミングします。
スマートオブジェクト化したレイヤーを、ベクターラインでトリミングすれば拡大・縮小も自由自在ですから。
最後に切り抜いた写真に影をつけて完成です。
実は無類のスニーカー好き
コレクションできるほどの金銭的な余裕はないですが、スニーカー大好きです。
仕事ではなかなか好きなものばかりでデザインを作成する訳にはいきませんが、自由に作れるもの非常に楽しいです。