ブログ

IllustratorとPhotoshop カンプ制作ソフトについての雑感

webdesign

こんにちは、デザイナーのTantanです。紙媒体から転身してきた駆け出しWebデザイナーです。
日々カンプ制作をしていますが、実はまだ作業スタイルを模索中です。

Illustratorでカンプを作る

最も使い慣れたソフトです。急いでクライアント確認用のデザインを作る場合は慣れたソフトでやるしかありません。選択する、揃える、繰り返すなどレイアウト周りの機能が充実しているのでザクザク作れます。前半工程はザクザクですが、後半工程がしんどいです。ピクセルの端数が!端数が!気をつけたつもりでも端数が出てしまいます。コーディングに渡す前に必死で整えています。あと、画像の書き出しにはつらいものがあります。最新のIllustratorはWeb用の機能が昔より充実している感じはするのですが、それでもなかなか厳しいです。いくつか手段を使い分けて画像を切り出しています。まだ試行錯誤しているところなので、「使い方間違ってるよ、もっとこうしたらいいよ!」というアドバイスがあれば、ぜひ教えて下さい。MF広島のTwitterまで!

画像アセットで書き出す

けっこう新しい機能のはず。2倍で書き出せて便利。ピクセルの端数が出てしまった時は苦しい。マスク範囲を切り落としてくれないのが致命的。そのため使用用途が限られます。

使いどころ

  • 確認用画像
  • アタリ画像
  • イラストやアイコン(自由曲線的な、サイズが厳密じゃなくていいもの)

スライスで書き出す

意図した通りに切ってくれるので、わりと良い奴だと思っています。2倍書き出しできないのが残念!アートボード外で拡大して切り出したりしています。

使いどころ

  • サイズの決まっているパーツ
  • マスクされたオブジェクト

Photoshopに持っていく

写真については最後に頼りになるのはやっぱりこれ。イラレのマスク範囲でアタリをつけて、ついでに画像補正して保存したりします。ソフトを横断するのは面倒ですが、イラレで端数と戦うよりよっぽど早かったりします。ただ、修正が重なる場合はつらいかもしれません。

使いどころ

  • 劣化させたくない写真
  • サイズをぴったり作りたいパーツ

CSSパーツは指示書でカバー

ピクセルの端数問題は、画像書き出しのときだけ慎重にやって、CSSで実装するパーツは指示書を細かく記載して対応しています。Specctrというプラグインが便利です。余白やパーツサイズを測りまくって、微妙な1ピクセルの端数は自分でこっそり丸めて記載してから渡します。こんな感じでフォントやサイズの指示が付けられます↓
specctr_sample

Photoshopでカンプを作る

画像補正ソフトとしてはこれまでも使ってきましたが、レイアウト周りの使い方を修行中です。例えばパーツをコピーしながら移動したい場合、イラレだとOption押しながらドラッグ移動ですが、フォトショだとレイヤーを複製して移動(command+Option+T)とか、微妙な使い勝手の差にまだ慣れません。あと、スマートオブジェクトとかライブラリとかの理解が不足しています。ですが、もし今後外部にコーディングを依頼することになったらイラレで渡せないでしょうし、高速レイアウトできるように頑張って習得しようと思います。

※09/13追記 Option押してコピー移動はPhotoshopでもできることに気づきました。Illustratorで作業するときはドラッグの途中でOptionを押していましたが、Photoshopではドラッグの前にOptionを押すとできるようです。

新しいツールも気になる

XD、 Comp、PreviewなどのAdobe製品も触ってみたいし、Sketchも機会があれば触ってみたい。CSSをもっと勉強してExtract for BracketsとPhotoshopの連携とかも試してみたいとか、妄想だけは抱えています。あとIllustratorやPhotoshopのプラグインも導入していきたいです。

色々試して最適な作業環境を構築し、後工程に支障の出ないデータ作りを目指していきたいと思います。日々修行!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. color-12 イラレのイラストに自然な陰影を与える配色のコツ
  2. hamburger そのサイト、スマホの使い勝手どうでしょう?〜メニューボタン編〜
  3. illust-tips-17 Illustratorで陰影のあるイラストを描くチュートリアル
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など 【初心者OK】IllustratorCCで漫画風吹き出しの作り方…
  5. japanese-flower-tutorial-title-8 Illustratorチュートリアル 和風「ねじり梅」の描き方
  6. disign-study ヒロフロデザイン部 ご参加ありがとうございました!
  7. Google-auto-mail-return-8 Googleフォームの自動返信機能を追加する(前編)
  8. Materialicon-00 デザイナーのためのGoogle Material iconsの使…

最近の記事

  1. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  2. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  3. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  4. 吹き出しの作り方タイトル画像 いろいろな種類の吹き出しフラッシュ・ベタフラ・叫びや雲形など
  5. lig_10
PAGE TOP