Webデザインをする上で、最近よく利用するのがAdobe XDです。始めはとっつきにくいと思っていたAdobe XDですが、アップデートを重ねるごとにのめり込んでいきました。
いやぁ、本当にAdobe XDは使いやすくてバンバンデザイン出来ちゃいます。しかし、デザインする上においてPhotoshopやIllustratorの存在も欠かせません。私の場合は、WebデザインはAdobe XD、画像の編集・加工はPhotoshop、ロゴやアイコン・キャラクタなどはIllustratorと言う感じで使い分けています。
３つを完璧に使いこなすことは難しいですが、それぞれのアプリケーションの特徴を把握し、テクニックを向上させることで、Webデザインもおのずと向上するでしょう。
さて、今回は「WebデザインをアップさせるPhotoshopスキルテクニック Part.1」を記事にしたいと思います。
[s_ad]
驚くほど簡単にできる、一味違った画像デザイン
下記の手順は「驚くほど簡単にできる、一味違った画像デザイン」のチュートリアルです。最小限のステップで、簡単にデザイン的な画像を作ることができます。
【完成図】
今回のイメージの完成図です。画像を３つ並べるだけよりも、斜めにカットすることで、よりデザイン的な雰囲気になります。これは実際のWebデザインでも利用することができます。
すごーく簡単に出来るので、ぜひ実践してみましょう！
【手順１】キャンバスの作成
キャンバスを作成します。ここでは「1920 × 600px」で作成しています。
【手順２】シェイプレイヤーで平行四辺形を作る
キャンバスの中心に四角形のシェイプレイヤーを作成し、ゆがみ（Ctrl + Tで編集モードにし、右クリックから歪みを選択）を利用して平行四辺形を作ります。
[s_ad]
【手順３】シェイプレイヤーの左に画像を入れる
手順２で作成したシェイプレイヤーの下に、任意の画像を挿入します。画像は、平行四辺形（中央）の左側に配置します。
【手順４】シェイプレイヤーの右に画像を入れる
手順３と同様に、シャイプレイヤーの下に画像を挿入します。今度は、平行四辺形（中央）の右側に配置します。
[s_ad]
【手順５】シェイプレイヤーにクリッピングマスクを適用する
次にシャイプレイヤーの上に、画像を挿入します。この画像は、クリッピングマスクを適用します。
※クリッピングマスクの適用は、「Altキー」を押しながら、レイヤーの間の境界線をクリックします。
【完成】It’s done！ これで完成
これで完成です。どうでしょうか？ただ３つの画像を並べるだけでは素っ気ないですが、斜めにカットすることで、デザインちっくな感じに仕上がります。Webデザインに取り入れるのはどうでしょうか。
[s_ad]
あっと言う間に出来るかもしれないPhotoshop テクニック
[f_PhotoshopPosts]