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

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  2. jQuery

    ホームページに必須!?jQueryでトップへ戻るボタンの作り方

    みなさんこんにちは、mayukouです。だいぶ春らしくなってきました…

  3. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  4. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  5. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate Lineartが便利…

    みなさん、こんにちは、mayukouです。デザインやイラストの仕事…

  6. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

コメント

  • コメント (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. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方
  2. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法
  3. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  4. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
  5. Illustrator

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