photoshopでカンプ作成

Photoshop

photoshop CCでデザインカンプを作成。メリットとデメリット


みなさんこんにちは、mayukouです。
最近、webデザインのカンプやバナーを作るのに
photoshopを使うようにしてみました。
かつてwebデザインのオススメツールと言われていたFireworksのアップデートがなくなり、webデザインのカンプづくりはPhotoshopが取って代わったとも言われていました。
でも私はなかなか慣れ親しんだIllustratorで使うことがやめられず、そちらで作っていました。
今まではillustratorで作ることがほとんどでしたが、グラフィカルな表現をもっとしたくて
photoshopに少しずつ移行しています。結果、今までにない表現ができている気がします。
今回のアイキャッチもphotoshopでサクッと作ってみました。
photoshopはレイヤーの使い方など、illustratorと少し違うところがあり
結構戸惑いましたが、
だいぶ慣れてきて、便利な部分もわかってきましたので、
ご紹介します。

スポンサードリンク

photoshopで作るメリットとは?

ドロップシャドウ、境界線の追加などのリッチなデザインが簡単にできる

Illustratorのドロップシャドウや光彩は、ちゃんとエフェクトがかかったのかどうなのか少し心もとない印象でした。
Photoshopはドロップシャドウをはじめ、そういったグラデーション系の表現に強い気がします。

スライスしていた画像書き出しがしやすくなった


画像アセットでスライス不要になります。これはCCの新しい機能になりますが、今までスライスを使って画像のパーツを書き出していましたが、
レイヤーごとに画像を書き出すことができるようになりました。
グループでも書き出すことができます。その場合、レイヤー名は、.jpgなど拡張子までつけるようにしましょう。
ただ、最近はイラレでもできるようです。

カンプ内ですぐに画像加工ができる

今までIllustratorで画像を読み込んで、画像はPhotoshopで別に加工していて手間がありましたが、
Photoshop内で全てが完結します。

書き出したときににじみにくい&ピクセルのズレがない

Illustratorで書き出していたとき、なぜか端っこに隙間が入ってしまうことがあって使いにくかったのですが、
Photoshopではずれることはないように思います。

Photoshopで作るデメリット

ファイルサイズが大きくなる

ファイルサイズがIllustratorの10倍もする場合もあります。
ドロップシャドウや、画像を埋め込んでいるせいか、
ファイルサイズが大きくなりがちです。
そのため、ファイルサイズを小さくする工夫が必要だと感じました。

レイヤーが煩雑になりがち。ネーミング必須

Illustratorと違ってレイヤーを選択したかどうかがわかりにくいのと、
レイヤーに名前をつけないと、後で編集するときに
どのレイヤーなのかわからなくなったりします。
またグラフィックをひとまとめにしたいときは、グループ化しておいたほうがいいでしょう。
グループ化したものをまとめて移動するのもやりにくいのでコツが必要です。

アートボードの仕様が少し違う


アートボードはありますがイラレと使い方が違うため慣れが必要です。
逆に、今までなかった機能ですので使いこなせたら便利でしょう。

ロゴやシェイプが使いにくい

イラレのベジェ曲線などをバリバリ使っていたので、photoshopのベジェ曲線などの使いにくさに少し戸惑いました。
また、イラレの場合は文字のタッチツールで1文字ずつ大きさを変えたり向きを変えたり色を変えたりするのも簡単ですが、
photoshopのテキストツールはそこまでできません。
そのため、イラレからコピーして持ってきた方がいいようです。

最後に

いかがでしたか?メリットとデメリットは伝わりましたでしょうか。
私も本格的にカンプ作成ツールとして使い始めて1〜2週間程度なので、まだまだわからないこともありますが、また発見がありましたらご紹介します。でも肝心なのは実際に使ってみることです。
グラフィカルな表現を目指したい方は、ぜひ挑戦してみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  2. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  3. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  4. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  5. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  6. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!

    こんにちは、mayukouです。最近ランニングウェアを新調して、ち…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    仕事のBGMに!Apple Music始めてみました。使用感をご紹介
  2. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
  3. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  4. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  5. Photoshop

    アナログにも負けない水彩画風表現を!Photoshopで混色しながら色を塗る方法…
PAGE TOP