はじめに
デザインをする際にこんな悩みありませんか?
「ECデザインを始めたいけれど、Photoshopの機能が多すぎる…」
「何から覚えればいいかわからない…」
「いまいちきれいに作れない…」
この「ECデザインの教科書」シリーズ(全3回)では、初心者さんが最短で習得できるテクニックを体系的に解説します。
生産性急上昇!Photoshopの必須機能3選
Part.1となる今回は、作業スピードと修正対応力を劇的に向上させる「Photoshopの必須機能3選」をご紹介します。
ECデザインの案件では「セール用にバナーを10種類作って」「この商品の写真を差し替えて」といった急な依頼が日常茶飯事です。
これから紹介する3つの機能は、そんな現場でプロが使っている「三種の神器」とも言える機能です。これらを使いこなすだけで、作業時間は半分以下、修正にかかるストレスも激減します。
1、修正に強い「スマートオブジェクト」
初心者が一番最初に覚えるべき機能、それが「スマートオブジェクト」です。 これは画像を元の画質を保ったまま保護する状態のことです。
通常、Photoshopで画像を配置し、それを小さく縮小した後に「やっぱり大きくしたい」と拡大すると、画像はぼやけて劣化してしまいます。しかし、スマートオブジェクトに変換しておけば、何度拡大・縮小を繰り返しても画質劣化しづらくなります(=非破壊編集)。
画像レイヤーのサムネイルに「スマートオブジェクトマーク」がついているかどうかを確認してみてください。
スマートオブジェクトへの変換方法は、「対象のレイヤーを右クリック」し、「スマートオブジェクトに変換」を選択で可能です。
ECデザインでの活用シーン
使い方のポイント
画像をカンバスに配置したら、まずはレイヤーパネルでその画像のレイヤーを右クリックし、「スマートオブジェクトに変換」を選びましょう。また、画像は大きいサイズの時点(=縮小する前)で変換しておくことをおすすめです。
これはスマートオブジェクトのサムネイルをダブルクリックして元のデータを復元する際に、大きいサイズのデータを復元できるほうが便利だからです。
2、作業効率が飛躍する「アートボード」
「PC用のデザイン」と「スマホ用のデザイン」、あるいは「Instagram用のバナー」と「X用のバナー」。 これらを別々のファイルで作っていませんか?「アートボード」機能を使えば、1つのPhotoshopファイル(.psd)の中に、複数のカンバス(画面)を並べて管理できます。
ECデザインでの活用シーン
使い方のポイント
新規作成時に「アートボード」にチェックを入れるか、ツールバーから「アートボードツール」を選択して画面上をドラッグすると追加できます。 ただしデータが重くなりすぎる場合は適度にデータを分けましょう。
3、画像の細かい加工に重宝する「ブラシツール」
ブラシといえば何かを描く道具ですが、「ブラシツール」は絵を描くためだけの機能ではありません。 ECデザインでは、商品写真の切り抜きを馴染ませたり、部分的に影を足したりと、クオリティを左右する「仕上げ」の工程で必ず使用します。
↓
ECデザインでの活用シーン
【使い方のポイント】
ソフト円ブラシ:フチがふわっとしているブラシ。髪の毛や影など、背景と自然になじませたい時に使います。
ハード円ブラシ:フチがくっきりしているブラシ。商品ボトルの輪郭など、パキッと見せたい境界線の修正に使います。
Part.1 まとめ
今回は、ECデザインを始める前の土台となる「機能」に焦点を当てました。
1、スマートオブジェクトで画質劣化を防ぐ
2、アートボードで複数デザインを俯瞰する
3、ブラシツールで画像を加工、修正する
次回の「Part.2」では、ECサイトの主役である「商品画像」にフォーカスします。 「暗い写真を明るくしたい」「背景を広げたい」「余計なものを消したい」といった悩みを解決する写真補正テクニックを解説します。
もしデザインでのお悩みがありましたらこちらののサービスもチェックしてみてください。Webデザイン講師がサポートいたします。
最後まで読んで頂きありがとうございます。