Tortoise Shell

デザイン、システム開発、ライフハックについてゆるく書きます

レスポンシブを前提にしたPhotoshopでのカンプ作成

Web業界では、技術の進化やトレンドに合わせて、現場のワークフローも変わり続けている。

数年前までは、PhotoshopやFireworksでしっかりとデザインカンプを作ってスライスを切り、やっとコーディングする流れだったが、それも古くなりつつある。

今日では、エンドユーザーがWebを閲覧する環境も多様化している。

従来のように、デバイス毎にがっちりとカンプを作って管理するのは無理があるのだ。

今求められているのは、どんな環境からでも快適にコンテンツを見られるような、拡張性のあるレイアウトなのだ。

そこで、カンプ作成の段階でも、レスポンシブを前提としたワークフローが必須になってくる。とはいえ、具体的にどのような方法で作ればいいのか。

「Webデザインの現場ですぐに役立つ Photoshop仕事術」は、そんな疑問を解決してくれる一冊だった。

特に、Photoshopのプラグインに関する解説は、かなり参考になった。例えば、アイコンフォントの扱いについて。

今だと、FontAwesomeがよく使われている。できることなら、カンプの段階で反映しておきたい。

そんな時には、「FontAwesomePS」というプラグインが使える。

これを入れておけば、Photoshopのタブから直接カンバスにFontAwesomeのアイコンを挿入できる。

レスポンシブデザイン周りだと、Bootstrapをベースにしたカンプ作成のフローも学ぶことができた。

グリッドシステムに基づいたガイドの設定や、簡単にグリッドを引くための便利プラグイン。レスポンシブを前提としたファイルの正しい作り方など。

個人的に一番熱かったのは「スライスは過去の作業に」という見出しの一文だった。

今では、スライスを切って名前をつけてとしなくても、一気に効率よく書き出せる。

それにしても、Web制作に特化したPhotoshopの技術書も、やっと分かりやすくて良いものが揃ってきたように思う。

数年前までは、Photoshopの技術書といえば、レタッチやイラストレーションなどグラフィックに特化したものばかりだった。

今後も良い本があれば紹介していきたい。