Extract]2016/12/14ツイート最近Photoshopの「CSSをコピー」が結構使えるなということに気づき、他にも知らなかった便利な機能があるかもと調べていたところ、Adobeのびっくりサービスを発見。「CSSの生成」と「スライス」について、コーディングがスピードアップしそうなデザインツールの機能をまとめました。※本記事内のショートカットはWindows基準です。ExtractPhotoshop、スライス、計測、必要なくなるかも。強力にコーディングをサポートしてくれるAdobeのサービスです。Cloudのアカウントを登録しておけば、なんと無償メンバーシップでも利用できます。アカウントを持っているメンバーがファイルを共有すれば、無償メンバーシップすら必要ないようです。最新のPhotoshopCCがなくても大丈夫。百聞は一見に如かずですので試しにPSDファイルをアップロードしてみてください。あの面倒な作業、いらないじゃん!と驚かれること請け合いです。こちらからサンプルファイルをダウンロードできます。Assetsからログイン(未登録の場合は新規登録)します。開いた画面上にPSDファイルをドロップしてアップロードします。アップロードしたファイルを開き、「Extract」タブをクリックします。CSSをコピーこれがコーダーさんにとって一番嬉しい機能ではないでしょうか。オブジェクトをクリックすると、すぐさまCSSが確認できます。ここからコピーして、いらない記述を削除。これでかなり時短になりますよね。微妙にサイズが違った、スペルが間違ってた、などの細かなミスも防げそう。親要素に対する大きさをパーセントで表示なんていう機能もあります。テキストをコピーこの機能欲しかったんです。Photoshopでのテキストコピーって、地味に何ステップか作業があるんですよね。これをワンクリックで済ませられます。オブジェクト間の余白計測Shiftを押しながらオブジェクトをクリックしていくことで、2つのオブジェクト間のマージンを計測してくれます。PhotoshopCCでもマージンが表示できますが、こちらのほうがかゆいところに手が届く感じ。テキストボックスの周りの余白を測りたい時、テキストボックス自体の大きさが邪魔をしますよね。それがExtractだとぴったりテキストの端から計測してくれます。表示された計測結果はクリックすればコピーが可能。画像アセット生成PhotoshopCCにも同じく画像アセット(詳しくはこちら)という強力な機能が備わっていますが、Extractだとさらに直感的に画像を作成することが可能です。簡単に言うと、画像にしたいレイヤーを選択して矢印ボタンをクリックし、ファイル形式や画像名を設定するだけ。これだけ見るともうPSDでの画像作成とはおさらばしたくなるかもしれません。この機能はPhotoshopCCを持っていない、もしくはPhotoshopがあまり分からない人向けかなと思います。いうと、Extractではレイヤーの表示/非表示以外の編集ができません。レイヤーの順序変更やグループ化、余白を入れたりといった微調整ができないので、意図したように画像が作成できない場合が多いのです。全アセット画像の一括ダウンロード機能もありません。快適に利用するには、最初からExtractで画像を作成するつもりで、きっちりレイヤー整理をしたデザインを作ってもらう必要がありそうです。いうことで、Photoshopに慣れている人は普通にPSDデータを開いて画像アセットなどで作成したほうが早いのではと思います。ファイルの共有PSDを表示している画面の右上に「共有」ボタンがあり、作成された公開リンクを他の人に教えることでデザインを共有することができます。Extractの使用を許可している場合、公開リンクを共有した相手は、リンクを開いただけでいきなりExtractでデザインを確認することができます。共有相手に許可する項目は「詳細オプション」から設定します。他の人は読み取りのみでの確認となり、勝手にPSDを削除したり編集したりということはできませんので安心してください。高度なレイヤー効果などをCSSで表現したい時は、プラグイン「CSS3Ps」が便利です。Extractより優れている部分として、直接ブラウザ上で結果が確認できること、ベンダープレフィックスの設定ができることなどがあります。対応バージョンはCS3~6・CCと幅広く、しかも無料です。わたしが使用しているCC2017(Windows)の場合、下記手順でインストールできました。ファイルをダウンロード。instructionのとおりにインストールします。ダウンロードしたzipファイルを解凍します。解凍したファイルを丸ごと下記ディレクトリに置きます。該当ディレクトリがなければ作成してください。Files\Adobe\CEP\extensions\”Photoshopを再起動します。“CSS3Ps”をクリックで利用できます。使用方法は簡単で、CSSを書き出したいレイヤーを選択(複数も可)し、パネルで表示されている”CSS3Ps”の部分をクリックします。すると自動でブラウザが立ち上がり、ブラウザ上で表示を確認することができます。CSSをコピーPhotoshopCCで標準機能として利用できる「CSSをコピー」。先述した他の方法と比べてのメリットは動作が軽いこと。レイヤーパネル上で右クリックして「CSSをコピー」をクリックすると、さくっとCSSを取得できます。オブジェクトのサイズやテキストのスタイルなど、ちょっとした情報取得に使用するのがよいと思います。ピクセルではなく倍率に変換されるのが少し嬉しい。グラデーションについては記述に不備があるようで要注意。[CSSをコピー]の比較サンプルとして、適度に効果を付けたシェイプに上記の3つのツールを使用し結果を比べてみました。Extract」はほぼ同じ見た目ですね。光彩は再現されず、ボックスシャドウもデザインとは少し違う感じがします。「CSS3Ps」だとほぼデザイン通りに再現できています。IllustratorからCSSを生成[CSSプロパティ]IllustratorCCで標準機能として利用できる機能です。クリックでパネルが表示されます。パネルが表示されていれば、レイヤーを選択するだけでCSSが表示されます。初期設定では名称が設定されていないオブジェクトのCSSは生成されません。「名称未設定オブジェクト用にCSSを生成」にチェックを入れておく必要があります。Photoshopに比べ、Illustratorではレイヤー構造が複雑になる傾向があります。あれ?選択したのにCSSがでない、という時は効果がかかっているレイヤーではなくグループが選択されている状態だと思います。オブジェクトのダブルクリックを繰り返してグループの中身を選択、またはレイヤーパネル上からグループ内のレイヤーを選択し、CSSを取得したい効果がかかっているレイヤーを見つけましょう。こちらもデザインとCSS生成の結果を比べてみました。光彩は出ず、ドロップシャドウがちょっと違う。Photoshopの「CSSをコピー」と同じような結果ですね。heightの記述は出なかったので追記しました。Photoshopのアセット機能を使ってスライスもう常識かもしれませんが、PhotoshopCCから追加された新機能「アセット」を使用すると、スライス作業が飛躍的に早くなります。svg)付きで書き出す画像名に変更するだけ。“画像アセット”にチェックを入れると、PSDデータと同じ階層に自動でフォルダが作成され、その中に画像が書き出されます。ダミーの画像やテキストを入れておいて、後から差し替えるってことありますよね。アセットを利用していると、レイヤー/レイヤーグループに変更があった際に自動で画像が再生成されるので、頻繁に修正があるような案件にとても強いです。名前の付け方によって、同じレイヤーから異なるサイズ・異なるファイル形式など複数の画像を生成することも可能。名前を付けることでサブフォルダーへの書き出しもできます。参考:命名ルールただ、レイヤー構造が複雑で、書き出したい部分を独立したグループにまとめられないようなデザインには不向きです。従来のスライスとうまく使い分けていきましょう。アセットに余白をいれる一番疑問が出そうなのが「余白はどうやっていれるの?」というところだと思いますので、簡単にご説明します。書き出したいサイズのシェイプを作成し、塗りのカラーに背景色を設定して、書き出すレイヤーグループの最下層に置くだけです。背景が透明の場合1背景が不透明の場合と同様にシェイプを作り、Ctrlを押しながら、レイヤーパネル上でそのシェイプのサムネイル部分をクリックします。レイヤーパネル下部の「マスクを追加」ボタンをクリックします。3マスク用に作成したシェイプを非表示にします。参考:【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコトIllustratorのアセット機能を使ってスライス2016年6月のアップデートで、IllustratorCCにもアセット機能が新登場しました。クリックで「アセットの書き出し」パネルが表示されます。書き出したいオブジェクトをパネルにドロップするという新感覚の使い方。パネル内に表示される名前が、書き出される画像名になります。元オブジェクトを編集するとちゃんと同期されます。サイズやファイル形式もパネル内で設定でき、今までのIllustratorでのスライスに比べるとかなり分かりやすくなった印象です。svgが選べるのもよいですね。この機能、マスクで隠されている部分が余白として書き出されてしまうという大きな欠点があります。一応書き出したいサイズでアートボードを追加するという対処法があるようなのですが、これであればスライスと大差ないかもしれません。今のところはアイコンなどシンプルな部品の書き出しに便利、といった感じでしょうか。以上、いかがでしたでしょうか。時々は最新機能をチェックして、進化著しい時代に取り残されないようにしたいですね。タイトルを裏切りますが、まずはaiファイルをPhotoshopで開くというのを試しましょう。形のとき、どうコーディングしようか迷うことがありますね。ランディングページ新規構築リキッドレイアウトは誰でもできる!!コーディングのコツまとめましたもう悩まない。