【1min. Webデザイン】PhotoShopで作るWebデザインを解説 Vol.0001

2019年5月4日2019年5月11日

【1min. Webデザイン】ではWebデザイン制作の様子を一分に早送りにした動画を元に、どういった作業を実施したのかを解説いたします。
今回の動画はこちら！

では、一つづつ解説していきましょう！

1, ファイルの新規作成、メイン画像の掲載・サイズ・カラーリングの調整

まずは、ファイルを以下の数値で新規作成します。
・横幅：1920px
・高さ：1920px ※後から変更します。
・解像度：72dpi
・背景色：#fff ※すぐに#000に塗りつぶしますが…

まず、背景色を#000に塗りつぶします。
続いて、メイン画像（今回は鳥居が無数に並ぶ「伏見稲荷の写真」）を、作成したファイルにペーストします。
ペーストした写真レイヤーを「スマートオブジェクト」に変更します。
※スマートオブジェクトは「非破壊的に画像を変更可能にするレイヤーモード」です。
いまいちピンと来ませんが「拡大縮小やカラーの変更を行っても、元画像の状態が保持される為、画質が劣化しない」と覚えてください。

スマートオブジェクトに変更したレイヤーを「W:1920px」に縮小します。
レイヤーのポジションを「x:0,y:0」に移動し、画面幅全体に写真がレイアウトされるようにします。

さらに写真のカラーリングを変更する為、「フィルタ＞Camera Raw フィルター」を使用します。
今回は「神々しさ」を表現する為、コントラストと明度・彩度、さらにシャープを調整しました。

2, ヘッダーの作成、ロゴマーク・ナビゲーションの設置

今回のデザインでは、写真とヘッダーに明確が境がないデザインを作成しています、
但し、このままでは可読性が損なわれるため、写真の上部に「黒→透明」のグラデーションを施します。
このグラデーションは「不透明度:50%程度」で良いと思います。

ロゴマークとナビゲーションの設置ですが、まず中心軸から左右に800pxづつの場所にガイドを記載します。
これにより1600pxコンテナが出来上がり、さらに高さ100pxの場所にガイドを記載します。
今回は「AMASING JAPAN」というロゴマークをガイドの左端に、ナビゲーションを「HOME、ABOUT、SERVICE、SUPPORT、CONTACT」とし、文字を均等揃えに並び替え、右端に設置します。
さらに画面上部から100pxの場所に記載したガイドを目安に、高さの中心にロゴマークとナビゲーションを設置します。

3, メイン画像を黒のグラデーションを施す、メインコピー・サブコピーの記載

メイン画像レイヤーの下部に「透明→黒」のグラデーションを設定します。
メイン画像レイヤーを「control」を押しながらクリックし「レイヤー効果」を選択。
写真の下部から「透明→黒」のグラデーションオーバーレイを設定してください。

続いて、メインコピー・サブコピーの設定をします。
メインに「KYOTO」、サブに「AMASING JAPAN」と記載します。
文字のサイズやバランスについては、任意で調整をお願いいたします。
メイン・サブそれぞれのレイヤーを選択し、「comand+g」でグループ化、さらに左側のガイドに沿うように整列させます。
高さの位置は下に記載するコンテンツ位置を想像し、およそ中央になるように設置します。

4, コンテンツの作成、見出し・写真のトリミング・掲載

コンテンツ部分を作成します。
見出しを「HISTORICAL SPOTS」小見出しを「Kyoto City」と記載し、先ほどと同じ要領でグループ化。
さらに左側のガイドに沿うように整列させます。

3点掲載する写真ですが、まず写真サイズを同じ大きさ「W:330px、H:396px」の長方形シェイプを作成します。
長方形シェイプは追って削除してしまう為、色についてはお好みのもので構いません。
次に掲載したい写真をペースト、例のごとくスマートオブジェクトに変換します。

先ほど作成した長方形シェイプのベクターラインのみをコピーします。
次にペーストした写真レイヤーを選択し、コピーしたベクターラインをペーストします。
すると、写真レイヤーがベクターラインの内側のみが表示される形になります。
これによりベクターデータ（伸縮可能なデータ）で作成したマスクが作成されます。
写真の見えている部分が適切になるよう、拡大縮小・カラーリングを調整します。

掲載したい他２点の写真も同様の手順で写真をトリミングします。
シェイプデータは１点目に作成したものを流用できる為、コピー＆ペーストでトリミングを行います。
トリミング＆カラー調整を施したレイヤーが用意できたら、適切な場所に掲載します。