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. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  2. Illustrator

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

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

  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  4. Web Design

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

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

  5. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法
  2. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
  3. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法
  4. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive …
  5. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ
PAGE TOP