• 2018年8月17日

WebデザインをアップさせるPhotoshopスキルテクニック Part.1

WebデザインをアップさせるPhotoshopスキルテクニック Part.1

WebデザインをアップさせるPhotoshopスキルテクニック Part.1 700 433 パソコン生活サポート Pasonal

Webデザインをする上で、最近よく利用するのがAdobe XDです。始めはとっつきにくいと思っていたAdobe XDですが、アップデートを重ねるごとにのめり込んでいきました。

いやぁ、本当にAdobe XDは使いやすくてバンバンデザイン出来ちゃいます。しかし、デザインする上においてPhotoshopやIllustratorの存在も欠かせません。私の場合は、WebデザインはAdobe XD、画像の編集・加工はPhotoshop、ロゴやアイコン・キャラクタなどはIllustratorと言う感じで使い分けています。

３つを完璧に使いこなすことは難しいですが、それぞれのアプリケーションの特徴を把握し、テクニックを向上させることで、Webデザインもおのずと向上するでしょう。

さて、今回は「WebデザインをアップさせるPhotoshopスキルテクニック Part.1」を記事にしたいと思います。

 

驚くほど簡単にできる、一味違った画像デザイン

下記の手順は「驚くほど簡単にできる、一味違った画像デザイン」のチュートリアルです。最小限のステップで、簡単にデザイン的な画像を作ることができます。

 

【完成図】

今回のイメージの完成図です。画像を３つ並べるだけよりも、斜めにカットすることで、よりデザイン的な雰囲気になります。これは実際のWebデザインでも利用することができます。

すごーく簡単に出来るので、ぜひ実践してみましょう！

デザイン的な画像

 

【手順１】キャンバスの作成

キャンバスを作成します。ここでは「1920  ×  600px」で作成しています。

キャンバスの作成

 

【手順２】シェイプレイヤーで平行四辺形を作る

キャンバスの中心に四角形のシェイプレイヤーを作成し、ゆがみ（Ctrl + Tで編集モードにし、右クリックから歪みを選択）を利用して平行四辺形を作ります。

シェイプレイヤーで平行四辺形を作る

 

【手順３】シェイプレイヤーの左に画像を入れる

手順２で作成したシェイプレイヤーの下に、任意の画像を挿入します。画像は、平行四辺形（中央）の左側に配置します。

手順２で作成したシェイプレイヤーの下に画像を入れる

 

【手順４】シェイプレイヤーの右に画像を入れる

手順３と同様に、シャイプレイヤーの下に画像を挿入します。今度は、平行四辺形（中央）の右側に配置します。

手順２で作成したシェイプレイヤーの下にさらに画像を入れる（画像一番右）

 

【手順５】シェイプレイヤーにクリッピングマスクを適用する

次にシャイプレイヤーの上に、画像を挿入します。この画像は、クリッピングマスクを適用します。

※クリッピングマスクの適用は、「Altキー」を押しながら、レイヤーの間の境界線をクリックします。

手順２で作成したシェイプレイヤーにクリッピングマスクを適用する

 

【完成】It’s done！ これで完成

これで完成です。どうでしょうか？ただ３つの画像を並べるだけでは素っ気ないですが、斜めにカットすることで、デザインちっくな感じに仕上がります。Webデザインに取り入れるのはどうでしょうか。

デザイン的な画像

 

あっと言う間に出来るかもしれないPhotoshop テクニック