Web Design

Web用画像のカラープロファイルの埋め込みについて

ogp
ogp

みなさんはWeb用に画像を書き出す際、カラープロファイルってどうしていますか?

カラープロファイルとはざっくりいうとWebサイトを見る人の環境による画像の色の違いを極力なくして同じ色で表示させるためのデータです。

私の場合は基本カラープロファイルは埋め込まないのですが色が重要な写真にはsRGBのカラープロファイルを埋め込むようにしています。その理由は以下の通りです。

まずはこちらのページをご覧ください→カラープロファイルテストページ

大抵の方の場合は下記画像のようにカラープロファイルが埋め込まれている画像も埋め込まれていない画像も同じように表示されているかと思います。

chrome

しかし一部の方の環境によってはデザイナーが意図していない状態で表示されているかもしれません。

safari(Version6〜)やChrome(Version61〜)ではカラープロファイルが埋め込まれていない画像はsRGBとみなして表示するので問題ないのですがFirefox(Version58現在)が曲者です。広色域ディスプレイ+Firefoxの組み合わせで見ると下記のような感じで表示されます。(こちらの画像はイメージです。sRGB画像で擬似的に表現するために加工しています)

firefox

彩度が高く(設定による)、人物の場合は大抵赤ら顔になってしまいます。ごく少数のユーザーとはいえ化粧品の宣伝用画像だったりしたら致命的ですよね。某有名化粧品メーカーの画像もカラープロファイルが埋め込まれていないので広色域ディスプレイお持ちの方はサイトをFirefoxとsafariで比較するとよくわかると思います。

書き出し画像にカラープロファイルを埋め込む事でこの大きな差異を防ぐことが出来ます。

写真以外にカラープロファイルを埋め込む場合は注意が必要です。カラープロファイルテストページの左側の青の部分ですが背景をCSSで青(#218dd9)にしてそのなかに同じ青(#218dd9)で色付けしたロゴ画像を配置しています。

上の画像のように広色域ディスプレイ+Firefoxのような組み合わせの場合、画像部分にカラープロファイルを入れるとCSS部分は彩度高めで表示されて画像部分はsRGBで表示されるので差異が生じてしまいます。最初に「基本カラープロファイルは埋め込まない」と書きましたがこのような理由から写真以外はプロファイルを埋め込まないようにしています。

img

写真にカラープロファイルを埋め込むには 「書き出し形式」や「Web用に保存(従来)」を使って書き出します。保存ダイアログで「sRGBに変換」と「カラープロファイルの埋め込み」にチェックを入れて保存します。

cap

ちなみに「画像アセット」で書き出された画像はカラープロファイルが埋め込まれません。

01

自分はWeb用画像を書き出す場合ほぼ画像アセットで書き出しているので不便でどうにかできないかということで書き出された複数の画像に対して簡単にsRGBのカラープロファイルを埋め込む事が出来るTipsを開発しました。

複数の画像に対してあっという間にカラープロファイルを埋め込む方法について

カラープロファイル(sRGB)埋め込み用データ一式をダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「スクリプトフォルダ」内の「Dearps_sRGB_jpg.jsx」と「Dearps_sRGB_png.jsx」をPhotoshopのスクリプトフォルダに移動します。
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動します。

(3)カラープロファイルを埋め込みたい画像ファイル(フォルダでもOK)を選択して「ドロップレット」フォルダの中の「sRGB_jpg.app」もしくは「sRGB_png.app」にドラック&ドロップします。
(jpgの場合→「sRGB_jpg.app」、pngの場合→「sRGB_png.app」)

03

すると元データにカラープロファイル「sRGB IEC61966-2.1」が埋め込まれた状態で上書き保存されます。(上書き保存なので必要に応じて要バックアップ)

ちなみにドロップレットはどこに保存しておいてもOKです。

是非お試しください。

Adobe MAX Japan フォローアップ

ogp
photo

「Adobe MAX Japan」— 2017年11月28日(火)パシフィコ横浜
ベテランほど知らずに損してるPhotoshop[MAX Special]

Adobe MAX Japan Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!
私のパートでお話させていただいたエクステンションなどのURLをお知らせします。
またセッション中に使用したWebサイトのサンプルデータとセッションで紹介したBootcomp3の重要機能だけに絞ったコンパクト版をMAX Editionとして作成したので配布させていただきます。
ぜひご利用ください!
max

「フォローアップデータ」をダウンロード

DOWNLOAD

画像アセット用リネーム エクステンション「Asset Renamer」
http://dearps.lovwar.com/2017/11/03/asset-renamer/
Bootcomp3.0
http://dearps.lovwar.com/bootcomp/

Creative Cloud ライブラリとは?
https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html

Adobe Stock
https://stock.adobe.com/jp/

favicon作成 効率化Tips

Photoshop CC 2015のアートボード機能を利用したfavicon(ファビコン)作成のTipsを紹介します。現在faviconの種類は膨大にありますが必要最低限ということで下記サイズを作成できるようにしています。

  • 16×16 px (IE)
  • 32×32 px (Chrome、Firefox、Safariなど)
  • 48×48 px (Windows デスクトップ)
  • 152×152 px (iOS・Androidのホーム画面)

favicon(ファビコン)作成 Tips

favicon.psdをダウンロード

DOWNLOAD

(1)ダウンロードした「favicon.psd」を開いてください。

(2)レイヤーパネルで最前面のレイヤー「favicon (edit)」のサムネイルをダブルクリックしてスマートオブジェクトを編集します。

(3) ロゴを配置するなどしてfaviconを作成します。

(4)完成したら上書き保存をして閉じます。この時点で全サイズのfaviconにデザインが反映されます。

(5)[ファイル]メニュー/[生成]/[画像アセット]を選択します。すると「favicon.psd」と同一階層に「favicon-assets」フォルダが作成され中に4種類のfaviconが書き出されます。

(5)favicon-16×16.png、favicon-32×32.png、favicon-48×48.pngの3つの画像を「.ico」形式に変換します。(複数の画像をひとつにまとめられる「マルチアイコン」にします。)
Photoshopでは変換することができないので下記サイトを利用します。

半透過マルチアイコンfavicon.icoを作ろう!

①画像ファイル3つを選択します。

②「アイコン作成」をクリック。

③背景色を選択。

④「アイコンをダウンロード」をクリックすると「favicon.ico」が保存されます。

(6)あとは「favicon.ico」、「apple-touch-icon.png」をルートディレクトリにアップロードしてHTML の <head>内に下記コードを記述すれば完成です。

<link rel="icon" href="/favicon.ico"> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

Retina対応用画像の作成について@2x

最近Retinaディスプレイ対応画像を制作する機会が増えてきています。

Photoshop CCから機能追加された「画像アセット機能」ではレイヤー名に200%とRetina対応用画像のファイル名(□□□□@2x.jpg)を書いておくことで画像サイズ200%の画像を生成することが可能です。

しかし上記の方法で書き出された画像には注意が必要です。

下記画像をみていただくと分かる通りテキストレイヤーはくっきり綺麗に拡大されているのに対し後ろの写真がぼやけてしまっているのがわかります。

原因は画像アセット機能で保存される画像はスマートオブジェクトに対応していない為画像が荒れてしまいます。

この機能で綺麗に書きだすにはテキストレイヤーやシェイプレイヤーに限られてしまうのでRetinaディスプレイ対応させたい画像というのは写真が多いため機能として致命的です。

 

そこで今回はDearpsの考えるRetinaディスプレイ対応のための解像度2倍の画像を作成する一番最適な方法をご紹介します。

まず下記の記事より「ぶっこ抜きスクリプト.jsx」をダウンロードして下さい。

ぶっこ抜きスクリプト http://dearps.lovwar.com/2010/12/bukko/

Retinaディスプレイ対応させる画像を作成する際の注意点

・写真は極力解像度が高いものを用意。

・写真を配置する際最初にスマートオブジェクト化しておく
(埋め込み配置、リンクを配置で読み込んだ場合は最初からスマートオブジェクト化された状態になります。)

・シェイプレイヤーやテキストレイヤーはラスタライズ化させない。

Retina対応用(サイズ200%)の画像を作成する。

①Retina対応用に高解像度版画像を作成したいレイヤー(レイヤーグループ)を選択します。

②[ファイル]メニューの[スクリプト]から[参照]を選択し、先ほどダウンロードした「Dearps_bukkonuki.jsx」を実行します。

③すると選択していたレイヤー(レイヤーグループ)が別ファイル抜き出されます。

④[ファイル]メニューの[イメージ]から[画像解像度]を選択し画像解像度を200%にします。(@3xにしたい場合は300%)

⑤これでRetinaディスプレイ用の画像の出来上がりです。

画像アセット機能で作成された画像と比較すると後ろの写真が綺麗に書きだされていることがわかります。

ぶっこ抜きスクリプト@2xを作ったので配布します。

ぶっこ抜いた後の画像サイズ2倍にする作業も自動化させたいという方のために 「ぶっこ抜きスクリプト@2x」を作成しました。

下記リンク先よりスどうぞ!

↓ぶっこ抜きスクリプト@2x ダウンロード↓

最後に宣伝。

この度共著でPhotoshopの本を執筆させていただきました。2015年3月13日にソシム社より発売になります。今回紹介したようなWebデザインに役立つスクリプトやTipsを多数紹介させて頂いています。下記バナーがamazonへのリンクとなっております。

ご興味がある方は是非御覧ください!

Webデザインの現場ですぐに役立つ Photoshop仕事術

ブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニック

今回はブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニックを紹介します。
(Photoshop CC 2014以降で利用できるテクニックです)
まずはじめに以下リンク先よりブラウザフレームのPSDファイルをダウンロードして下さい。
browser.psdのダウンロードは以下から。

①ファーストビューを確認したいWebサイトのデザインカンプを開きます。

②[ファイル] / [リンクを配置]を選択し先ほどダウンロードした「browser.psd」を配置します。

③配置する際、ドキュメントサイズに合わせて縮小されている可能性があるのでオプションバーを確認し、幅(W)と高さ(H)が100%になっていない場合は100%に変更します。

④配置された「browser.psd」は中心に配置された状態なのでドキュメントの上端に揃えます。選択範囲でドキュメント全体を選択しオプションバーから「上端揃え」をクリックします。

⑤[ウインドウ] / [属性]を選択し属性パネルを表示します。

⑥「browser.psd」は画面解像度ごとにレイヤーカンプを設定しているので属性パネルのプルダウンで切り替える事が出来ます。

⑦属性パネルのプルダウンから確認したい画面解像度を選択します。

⑧デザインカンプにブラウザフレームが表示されました。(IE11のブラウザフレームです)

ご活用いただけると幸いです。

Webデザイン超効率化(バナー制作編)


※フルスクリーンでご覧下さい。

今回は“Webデザイン超効率化 第3弾”として、変数を利用したWebバナー制作を楽にするテクニックを紹介します。

取引企業の中で毎月キャンペーンを実施している会社があるのですが、
都度バナーをサイズ違いで10種類近く作らなければなりませんでした。普通にやっていては結構な手間だったので効率化を図る為に今回の変数を利用した方法を考えました。

【まずは下準備】

①新規ファイルを作成。[幅600px、高600px 72dpi]
シェイプツールでキャンバスサイズいっぱいに(適当でOK)に矩形を作成し“background”と名前をつけます。(後にバナーの背景になります)

②“background”レイヤーをスマートオブジェクト化して、
一旦“background”レイヤーは縮小して右下に移動させておきます。

③また①〜②と同じ行程でスマートオブジェクトを作成し“graphic”と名前をつけます。(後にバナーに入るオブジェクトになります)

【基本となるバナーを作成します】

④任意のサイズのレイヤーボックスを作成します。

⑤次にバナーに入れる情報のテキストレイヤーを作成します。(変数の箱になります)
今回の例では
・サービス名
・テキストL
・テキストM
・テキストS
・コピーライト
としました。

⑤次に変数を定義していきます。
メニューからイメージ/変数/定義 を選択します。
ダイアログが出てくるのでレイヤーのプルダウンで先ほど入力したテキストレイヤーを選択します。
次にテキストの置き換えチェックボックスにチェックを入れてレイヤー名と同じ名前を入力します。
上記作業をテキストレイヤーすべてに定義していきます。

⑥完了したら他のサイズのバナーも①〜⑤の作業を繰り返し行い、作成します。

⑦先ほど②でスマートオブジェクト化した“background”レイヤーを複製して各レイヤーボックスに移動し、レイヤーボックスのサイズいっぱいになるように拡大します。

⑧同じように③で作成した“graphic”レイヤーも複製して各レイヤーボックスに移動し、こちらは任意のサイズで配置します。
以上でベースとなるPSDの完成です。

⑨以上でベースとなるPSDの完成です。

【値を入力するCSVをエクセルで作成】

⑩次は値を入力する為のcsvをエクセルで作成していきます。
1行目に変数を定義したテキストレイヤー名を入力します。
2行目に値を入力します。今回は例としてピザ屋さんを想定して入力しました。
ファイルをPSDと同じ階層にcsvで保存します。
※保存後CSVファイルは必ず閉じて下さい。

⑪Photoshopに戻りCSVを読み込みます。
メニューからイメージ/変数/データセット を選択します。
ダイアログが出てくるので読み込みボタンを押下して
先ほど作成したcsvファイルを選択してOKボタンを押下。
適用ボタンを押下してOKボタンを押下。

⑫これですべてのテキストレイヤーに値が入りました。

【デザインをする】

⑬“background”レイヤーをダブルクリックしてスマートオブジェクトを展開します。
素材を配置して上書き保存。保存が終わったら閉じて下さい。

⑭これで背景が完成です。すべてのバナーの背景に反映されました。

⑮次にオブジェクトをのせていきたいと思います。
“graphic”レイヤーをダブルクリックしてスマートオブジェクトを展開します。
素材を配置して上書き保存。今回はピザを配置しました。
保存が終わったら閉じて下さい。

⑯すべてのバナーにピザが配置されました。

⑰次にテキストを装飾していきます。
レイヤーの絞り込み機能で装飾したいレイヤーを名前で絞り込みます。
例では“新登場!!”レイヤーを絞り込みました。

⑱一つのレイヤーをレイヤー効果で装飾します。完成したらそのレイヤースタイルをコピーして他のレイヤーすべてにペーストして反映します。

⑲あとは他のテキストも同様に装飾していき、レイアウトを調整して完成です。

今回紹介したテクニックは特にルーチンワークに効果的です。
一度作ったデータはフォーマットとして別の案件に流用可能です。
バナーに限らずさまざまな場面で役に立つテクニックだと思うので
ぜひ皆様の業務にあった応用法を考案してご活用ください。

参考ファイルは下記リンク先よりDL下さい。

Webデザイン超効率化(ナビゲーション編)

00

WEBデザインの超効率化ということで今回はナビゲーションのデザインにスポットをあててテクニックを紹介したいと思います。
私自身が業務で行っているナビゲーション作成のフローを以下に紹介します。

①ナビゲーションのベースになるシェイプを作成します。

01

ここでは当ブログで配布しているスクリプトを使用します。

幅!高さ!角丸!サイズを指定してシェイプを作成!幅!高さ!角丸!サイズを指定してシェイプを作成!

②シェイプにレイヤー効果等を利用して装飾する。

02
様々なレイヤー効果が公開されているのでそちらを利用するとより効率化が図れます。
保存版!Photoshop用無料レイヤースタイル750個+まとめ [PHOTOSHOP VIP]

③装飾が完了したらレイヤーを全て選択してスマートオブジェクト化させます。

03
レイヤー/スマートオブジェクト/スマートオブジェクトに変換
※スマートオブジェクト化する理由は後ほど。

④スマートオブジェクトの上にテキストレイヤーを作成し、テキストを入力

04
配置、行揃え共に中央に!(テキストを変更してもレイアウトが崩れ無い様にするため。)

⑤テキストレイヤーと先ほど作成したスマートオブジェクトをグループ化する。

05
これでナビゲーションボタンの1つ目が完成。次のステップからこれを必要数分、複製して行きます。

⑥複製スクリプトでナビゲーションを複製!!

06
今回紹介するテクニックの目玉です。

まずは以下リンク先よりスクリプトをダウンロードして下さい。
Dearps_copy_yoko.zipのダウンロードは以下から。

【準備】
ダウンロードした“Dearps_複製横移動.jsx”ファイルをPhotoshopのスクリプトフォルダに入れる。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

準備が完了したら先ほどのグループ化したナビゲーションを選択した状態で[ファイル] / [スクリプト]からDearps_複製横移動.jsxを実行する。

すると自動でグループが複製されてナビゲーションの横幅分移動されます。

これを必要数分くりかえしてそれぞれのテキストを変更して完了です。

③でスマートオブジェクト化した理由

07
スマートオブジェクト化したものを複製するとすべてコピー元の情報が関連付けされます。

これにより1つのスマートオブジェクトに修正を加えれば全てのスマートオブジェクトに修正内容が反映されます。

ナビゲーションのデザインの修正が非常に楽になります。

以上でWEBデザイン超効率化(ナビゲーション編)は終了です。

次回はWEBデザイン超効率化(バナー編)を紹介しようと思っています。

それではまた!

⑥で紹介したスクリプトの縦移動版は以下から。

Adobe Flash Catalyst β版がAdobe Labで公開

top

PhotoshopでおこしたデザインがそのままFlexアプリのRIAに変換できるということで話題のAdobe Flash CatalystのパブリックベータがAdobe Labで公開されました。試したい方は以下リンクから。なお、CS4のPSDデータしかサポートされていないっぽいのでCS4もっていないかたはこちらのデータをご自由にお使いください。

Adobe Flash Catalyst β(Adobe Lab)

簡単な説明はこちらから。(Adobe Edge)