「2014年4月の、これだけは押さえておきたいWeb関連の動き」という記事を書いていたところ、あまりにもWebデザイナーのためのPhotoshop関連記事が多かったため別の記事としてまとめました。
Fireworks からの乗り換えの方向けの記事からより速く制作するためのテクニック、Adobe が開発中の CSS をコピーしたり画像アセットをダウンロードするためのWebアプリなど。
基礎〜現役Webデザイナー向けの制作テクニック
FireworksユーザーがPhotoshopでwebデザインカンプを作る時、注意が必要なポイントとその解決策 | tipsBear
- シェイプやスマートオブジェクトを別の PSD に複製する方法
- テキストボックスのサイズを変える方法
- シェイプなどのサイズを取得する方法
など、普段 Fireworks をお使いの方が Photoshop でWebデザインしようとした時に困りそうなところについてまとめられています。
ASCII.jp：Webデザインが3倍速くなる！Photoshop神速テク4つ
神速Photoshop [Webデザイン編] の内容の一部がWebで公開されました。
- サイズ違いのバナーはまとめて使い回し
- カラートーンパターンを作って打ち合わせをスムーズに
- よく使うアイコンはカスタムシェイプに登録
- 変数機能を使って地域別の不動産バナーを量産
などの記事が公開されています。
「変数機能を使って地域別の不動産バナーを量産」は私が執筆した記事です。
神速Photoshop [Webデザイン編] に興味を持たれた方は、よろしければ下記記事もご覧ください。
関連: 神速Photoshop [Webデザイン編]を書きました。 | Stocker.jp / diary
Web屋のーりー » ウェブデザインの主役！ Photoshopと親密にお付き合いする方法 -CSS Nite LP34 セミナーレポート-
4月に CSS Nite LP, Disk 34「Webデザインで使うPhotoshop」（2014年4月19日開催） で「試してみた！便利なPhotoshop有料プラグイン」「自分でスクリプトを書いて効率アップ」というテーマで講演しました。
同じイベントでは、
- 黒葛原 道さんによる「レイヤースタイルを使いたおす！ よく目にする、あの表現を作ってみよう」
- 石嶋 未来さんによる「Webだからこそできる、写真やイラストがないときの低コストでデキるデザイン発想方法」
- 牧下 浩之さんによる「実案件で活用できるPhotoshopデータ作成ルール」
などの講演もありました。この記事では、そのイベント内容がまとまっています。
なお、4月1日には CSS Nite back2basic の WebデザイナーのためのPhotoshop神速テクニック で「Photoshop でWebデザインを始めたい方、現在 Photoshop でWebデザインされていて、もっと Photoshop によるWebデザインに詳しくなりたい方」向けにも講演しましたが、平日でお越しいただけなかった方も多かったので、6月29日（日）に渋谷 Stocker.jp / Space にて同じような内容のイベントを開くことを予定しています。
詳細が決まりましたら、こちらのブログ等で告知いたします。
使い方・活用法 – WebデザインのためのPhotoshopの整列の基礎 | Adobe Creative Station
昨年、Adobe のサイト向けに私が寄稿した記事が掲載されていました。
Webデザインカンプ制作では避けて通れない、整列機能について解説しています。
Photoshop の整列は、Illustrator や Fireworks と操作方法が異なるため「カンバスに整列」や「キーオブジェクトに整列」ができないと思っている方もいらっしゃるかと思いますが、実はそれと同等の操作は可能です。
使い方・活用法 – スライスより便利！画像アセット機能でWeb用にパーツを保存する | Adobe Creative Station
こちらも、昨年 Adobe のサイト向けに私が寄稿した記事です。
このブログでも解説していますが、スライスより便利な新機能「画像アセット」機能について解説しています。
素材など
Dribbble – iOS 7 UI Kit Photoshop Action Set by Jérémy Paul
iOS 7のモックアップを作るためのPhotoshopアクションセットです。
新しいWebアプリ
Project Parfait、公開！ | // andy hall
Project Parfait （プロジェクトパフェ）は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。
これは、Adobe 公式の PSD から画像やCSSを書き出すためのWebアプリです。現在ベータ版です。
使用するには、Webブラウザーで Project Parfait に Adobe ID でログインし、PSD ファイルをドラッグしてアップロードします。
クリックで選択した箇所にあわせて、右側の「Styles」タブ内の「CSS Inspector」の部分に CSS が、「Assets」タブに画像アセットが表示されます。
「CSS Inspector」は、CS6 以降の「CSS のコピー」機能に比べて不要なプロパティが少なく、有料プラグインの CSS Hat に近い印象です。
ただ、今のところ画像アセット機能で生成された画像をまとめてダウンロードする方法がない（？）ことや、そもそもWebブラウザーに PSD をアップロードするのは面倒なので、個人的には「CSS のコピー」機能を強化してくれればそれで良い気がします。
Avocode – Preview and inspect PSDs
CSS Hat という CSS をコピーするための Photoshop プラグインを開発している会社も、上記の Project Parfait と同じようにWebブラウザーで PSD をアップロードして CSS をコピーしたり画像を書き出すためのWebアプリを開発中のようです。
メールアドレスを登録すると、いち早く体験できるそうです。
こちらは、ネイティブアプリも開発中のようです。