4kaku design

マーケティングを勉強しているWebデザイナーのノート

デザイナーからPSDのデザインカンプを渡されたはいいけれど、Photoshopは多機能すぎて敷居が高い…とお悩みのコーダーさん向けにコーディングに役立つ機能・プラグインをピックアップしました。

本エントリは「appleple 公開社内勉強会」にて発表する内容です。


目次



※本エントリーは「Photoshopなんてわかりません!」という初心者さん向けです。


テキストの色(カラーコード)を拾う方法

スポイトツールで地道に色を拾おうにも、テキストにアンチエイリアスがかかっていると拾うドットによってカラーコードは変わってしまいます。



レイヤーウインドウの左端(サムネイルが表示されている場合もあります)をダブルクリックしてテキストを選択し、メニューバーに表示されたカラーピッカーから色を確認するのがオススメです。




オブジェクトからCSSをコピーする方法


カラーコードだけではなく、フォントサイズやシャドウの情報をCSSとして取得することもできます。



コピーしたCSSは下記の通りです。不要なプロパティもたくさんあるので、必要なものだけご利用ください。line-heightはきちんと単位なしで書き出してくれます。

.あめんぼ_あかいな_アイウエオ_うきもに_こえびも_およいでる_かきのき_くりのき_カキクケコ {
  font-size: 12px;
  font-family: "FOT-TsukuARdGothic Std";
  color: rgb(255, 125, 125);
  line-height: 1.455;
  text-shadow: 0px 0px 5px rgba(4, 0, 0, 0.004);
  -moz-transform: matrix( 5.20498336421407,0,0,5.20498336421407,0,0);
  -webkit-transform: matrix( 5.20498336421407,0,0,5.20498336421407,0,0);
  -ms-transform: matrix( 5.20498336421407,0,0,5.20498336421407,0,0);
  position: absolute;
  left: 412.455px;
  top: 193.956px;
  z-index: 2;
}

オブジェクトのサイズや距離を測定し、メモを残す方法


手軽なのは「ものさしツール」です。(ツールバーのスポイトと同じところに入っています)



直線を引くように2点を指定し、その点と点の距離を表示します。



また、オブジェクトを1つ選択した後に Commandキーを押しながら他のオブジェクトにカーソルを合わせると、2つのオブジェクト間の距離が表示されます。



オブジェクトの計測ができる「Ink」

計測だけでなく、オブジェクトのサイズをメモとして残しておきたいときはエクステンション(拡張機能)「Ink」が便利です。


雫マークのボタンをクリックすると、選択した正方形のサイズが生成されました


Ink のインストール方法

「Ink」製品サイトでエクステンションをダウンロードしたら、お手元のマシンに入っているPhotoshopのバージョン名がついたフォルダを選択します。その中の「IMPORTANT.txt」を参考に、「Ink」フォルダをPhotoshopエクステンション用のフォルダにコピー&ペーストしましょう。(MacOSの場合、ちょっとだけターミナルの操作が必要になります)


ダウンロードしたzipファイルの中身 ※「Ink 2」フォルダはデフォルトではありません


Photoshop CC 2015でできる「画像アセットの生成」


Photoshop CC 2015 では、「画像のアセット生成」という画像の書き出し方法があります。スライスを切っていくよりも手軽なので、ぜひ覚えてみてください。



PSDファイルを保存したフォルダと同じ場所に「(PSDファイル名)-assets」というフォルダが生成され、その中に書き出された画像が入ります。

レイヤー名のつけ方によって、画像サイズを2倍で書き出したり、JPG画像の圧縮率を指定したりすることもできます。

レイヤー名のつけ方(パラメータ)

Photoshop ヘルプ | レイヤーからの画像アセットの生成
たとえば、「サンプル.jpg5」「サンプル.jpg50%」というレイヤー名をつけると、圧縮率50%のJPG画像が生成されます。

エクステンション「Oven」でパラメータを指定する


エクステンション「Oven」を使えば、覚えるのが面倒なパラメータ(接尾詞)を自動でレイヤー名に追加してくれます。


注目のツール「Creative Cloud Extract」


「Adobe Creative Cloud Extract」でもっと楽にコーディングができるんじゃないかと調査中です。



03/25追記 Photoshop CC 月額プランが安売りしてました

(2016年3月25日追記)
Adobe Creative Cloud フォトグラフィプラン(PhotoshopとLightroomがセットになったお手軽なプラン)がAmazonで安売りしてました。期間限定30%オフだそうです。 (月980円×12ヶ月=11,760円が定価)



PSDカンプをもらったから、Photoshopだけ使いたい!という方にはオススメのプランです。