Photoshopに関するTipsや便利な裏技を紹介するサイトです。Blogホームプロフィールお問い合わせ2019.04.23Webサイト&アプリデザイン効率化エクステンション「Bootcomp4」リリースWebサイト&アプリのデザインをもっと効率的に、さらにスピーディーに。本日Bootcomp4を公開しました。ダウンロードは「Bootcomp」の特設サイトから。2018.02.04Photoshopのデザインデータをエンジニアに引き継ぐ際に利用したいハンドオフツール「Zeplin」の使い方|DearpsWebサイトやアプリを制作する際にデザインとコーディングを分業化している会社さんは多いと思います。その場合よく課題にあがるのがデザイナーとエンジニア間の連携について。デザインカンプとコーディングされた仕上がりの差を極力なくすためにデザイナー側でマージン、フォント、カラーなどを細かく指定したコーディングガイド(以下ガイド)を作成するのですが、これがけっこう面倒な作業で時間もかかります。これデザイナーにとって過去のスライス作業並みにモチベーションが下がります↓↓↓この面倒なガイド作成を猛烈楽にするサービス「Zeplin」を紹介します。ガイドが作成されます。これを他メンバーと共有することにより招待されたメンバーはPhotoshopがなくてもブラウザ上から要素のサイズやマージン、カラー、フォントといったコーディングに必要な情報を取得できるようになります。画像書き出し、スタイルガイドの作成、コメントなど様々な機能が用意されています。XDの最新アップデートでも連携が発表されるなど注目度の高いハンドオフツールです。Brackets、avocodeなど他のハンドオフツールも試しましたがZeplinが機能、操作性共にNo.1だと思ったので今回紹介させていただきます。画像の書き出し設定コメント入力メンバーの招待スタイルガイドの作成インストール方法1)まずZEPLINのサイトから会員登録をします。2)自分のOSのアプリをダウンロードします。3)ダウンロードしたZeplinのアイコンをアプリケーションフォルダに移動します。4)アプリケーションフォルダ内のZeplinをダブルクリックして立ち上げます。ログイン画面が表示されるのでメアドかユーザー名とパスワードを入力してログインします。5)以上でインストールが完了です。Pluginを選択してPhotoshopにZeplinのプラグインをインストールします。2)Photoshopを起動(起動した状態の場合は再起動)してウインドウメニュー/エクステンション/Zeplinを選択してZeplinパネルを表示しします。3)Zeplinアプリを開きます。最初はプロジェクトが何もない状態なので新しいプロジェクトを作成します。4)作成するプロジェクトタイプを選択します。今回はデスクトップサイトなのでWebを選択します。5)まずプロジェクト名を入力します。6)Photoshopでデザインカンプを開きZeplinにアップロードするアートボードを選択します。アートボードを使用していない場合はレイヤーパネル上ですべてのレイヤーを選択した状態でレイヤーメニュー/新規/レイヤーからのアートボードを選択してアートボードを作成します。サンプルで作成したデザインカンプはこちらからダウンロードできるのでテスト用にお使いください。7)ZeplinパネルのExportボタンをクリックします。8)アップロードするプロジェクトを選択してインポートボタンをクリックします。9)等倍でデザインしている場合はそのまま1xにチェックを入れた状態でChooseボタンをクリックします。アップロードが開始されます。(2倍で作成している場合は2xをチェックします。)10)アップロードが完了するとZeplinアプリが表示されます。プロジェクトをダブルクリックするとプロジェクトが開きます。画面解説Projectsプロジェクトの一覧が表示されます。無料版は1プロジェクトに限定されます。Dashboardダッシュボードにはプロジェクトの画面一覧が表示されます。(サンプルは1つのアートボードのみアップしていますが複数のアートボードをアップすることが可能です)この画面からメンバーを招待することができます。Book)を登録するとこの画面でスタイルガイドとして表示されます。1)Informationデザインカンプに関する情報が表示されます。2)Colorsデザインカンプに使用されている色情報が表示されます。3)AssetsPhotoshop側で書き出し設定をするとここに書き出し画像が表示されます。詳しくは画像の書き出し設定をご覧ください。4)Notesコメントの一覧が表示されます。コメントの方法はコメント入力をご覧ください。要素情報の確認方法プロジェクトのデザインカンプを開いた状態で情報を知りたいパーツをクリックします。するとサイズやマージン、CSS情報などが表示されます。画像の書き出し設定1)Photoshopのレイヤーパネルで書き出すレイヤーまたはレイヤーグループを選択します。asset」ボタンをクリックします。するとレイヤー名の頭に-e-という文字列が追加されます。2)書き出すパーツすべてに書き出し設定ができたらアップするアートボードを選択した状態でZeplinパネルのExportボタンをクリックします。name」にチェックを入れた状態でInportボタンをクリックします。(同名画面を上書き保存する)4)Zeplinでアップしたデザインカンプを開きAssetsタブを開き、さきほど書き出し設定をおこなったパーツのサムネイルが表示されていることを確認します。この画面から直接Web用画像を書き出すことができます。assetsボタンをクリックすると書き出しファイル名の命名規則を設定することができます。レイヤー名のままにする場合はOriginalを選択します。入力フィールドが表示されるのでコメントを入力してPostをクリックします。2)Notesタブを表示すればコメントの一覧を表示することができます。メンバーの招待Dashboard画面のInviteボタンをクリックすると招待者のメールアドレス入力フィールドが表示されるので入力して招待します。招待者にZeplinから招待メールが送信され招待者はメンバーに加わりプロジェクトを閲覧やコメントができるようになります。汎用的なフォント情報や色情報は登録することによってスタイルガイドに記載することができます。登録するにはパーツを選択した状態で表示された情報の右側にあるアイコンをクリックしてチェックをいれます。フォント情報は[Aa]アイコン。色情報は[水滴]アイコン。Colorsタブからも色情報を登録することができます。登録された情報がスタイルガイドにまとめられて表示されます。以上がZeplinのご紹介でした。今回デザイナーとエンジニアとの連携ということでZeplinを紹介しましたがコメント機能などを活用してディレクターとのやりとりにも活用できるアプリケーションです。デザイナーxエンジニアxディレクターとの連携でお悩みの方は是非お試しいただければと思います。2018.01.26Web用画像のカラープロファイルの埋め込みについてみなさんはWeb用に画像を書き出す際、カラープロファイルってどうしていますか?カラープロファイルとはざっくりいうとWebサイトを見る人の環境による画像の色の違いを極力なくして同じ色で表示させるためのデータです。私の場合は基本カラープロファイルは埋め込まないのですが色が重要な写真にはsRGBのカラープロファイルを埋め込むようにしています。その理由は以下の通りです。こちらのページをご覧ください→カラープロファイルテストページ大抵の方の場合は下記画像のようにカラープロファイルが埋め込まれている画像も埋め込まれていない画像も同じように表示されているかと思います。一部の方の環境によってはデザイナーが意図していない状態で表示されているかもしれません。safari(Version6〜)やChrome(Version61〜)ではカラープロファイルが埋め込まれていない画像はsRGBとみなして表示するので問題ないのですがFirefox(Version58現在)が曲者です。広色域ディスプレイ+Firefoxの組み合わせで見ると下記のような感じで表示されます。(こちらの画像はイメージです。sRGB画像で擬似的に表現するために加工しています)彩度が高く(設定による)、人物の場合は大抵赤ら顔になってしまいます。少数のユーザーとはいえ化粧品の宣伝用画像だったりしたら致命的ですよね。某有名化粧品メーカーの画像もカラープロファイルが埋め込まれていないので広色域ディスプレイお持ちの方はサイトをFirefoxとsafariで比較するとよくわかると思います。書き出し画像にカラープロファイルを埋め込む事でこの大きな差異を防ぐことが出来ます。写真以外にカラープロファイルを埋め込む場合は注意が必要です。カラープロファイルテストページの左側の青の部分ですが背景をCSSで青(#218dd9)にしてそのなかに同じ青(#218dd9)で色付けしたロゴ画像を配置しています。上の画像のように広色域ディスプレイ+Firefoxのような組み合わせの場合、画像部分にカラープロファイルを入れるとCSS部分は彩度高めで表示されて画像部分はsRGBで表示されるので差異が生じてしまいます。最初に「基本カラープロファイルは埋め込まない」と書きましたがこのような理由から写真以外はプロファイルを埋め込まないようにしています。「書き出し形式」や「Web用に保存(従来)」を使って書き出します。保存ダイアログで「sRGBに変換」と「カラープロファイルの埋め込み」にチェックを入れて保存します。ちなみに「画像アセット」で書き出された画像はカラープロファイルが埋め込まれません。自分はWeb用画像を書き出す場合ほぼ画像アセットで書き出しているので不便でどうにかできないかということで書き出された複数の画像に対して簡単にsRGBのカラープロファイルを埋め込む事が出来るTipsを開発しました。ダウンロードしたzipファイルを解凍して「スクリプトフォルダ」内の「Dearps_sRGB_jpg.jsx」と「Dearps_sRGB_png.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動します。(3)カラープロファイルを埋め込みたい画像ファイル(フォルダでもOK)を選択して「ドロップレット」フォルダの中の「sRGB_jpg.app」もしくは「sRGB_png.app」にドラック&ドロップします。IEC61966-2.1」が埋め込まれた状態で上書き保存されます。(上書き保存なので必要に応じて要バックアップ)ちなみにドロップレットはどこに保存しておいてもOKです。「上端揃え」+「水平方向中央揃え」といった形で2つの整列の組み合わせをすることが多いと思います。厳密に言えば最初に「カンバス全体に選択範囲を作成」して「移動ツール」に持ち替えてといったフローも必要です。今回配布するエクステンションを使えば↓のように1クリックでレイヤーを移動することができます。・カンバスを基準にする場合はそのまま「移動」エクステンションのボタンをクリック。・選択範囲を基準にする場合は選択範囲を作成して「移動」エクステンションのボタンをクリック。・数値を指定してオブジェクトを移動したい場合は右側の「水平移動」または「垂直移動」をクリックします。するとダイアログが表示されるので移動する数値を入力して移動をクリック。「移動」のインストール方法について「移動」エクステンションをダウンロードDOWNLOADダウンロードしたzipファイルを解凍します。解凍されたフォルダ「Move」を下記ディレクトリに移動します。Support/Adobe/CEP/extensionsライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。Photoshopを再起動します。メニュー[ウインドウ]/[エクステンション]/[移動]を選択します。以上で「移動」パネルが表示されて利用できる状態になります。Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!私のパートでお話させていただいたエクステンションなどのURLをお知らせします。Editionとして作成したので配布させていただきます。3」リリースWebサイトのデザインをもっと効率的に、もっと早く。本日Bootcomp3を公開しました。アップデート内容は下記になります。大量の画像をあっというまに配置して最適なサイズに自動でリサイズすることができます。2水平垂直移動機能を追加レイヤーまたはレイヤーグループを数値を指定して移動することができます。他細かなバグを修正しています。ダウンロードは「Bootcomp」の特設サイトから。ファイルと同じサブフォルダーに保存されるようになりました。2018にアップデートしたら使用できなくなってしまいました。Renamer」というエクステンションを作成したので配布させていただきます。Renamer」をダウンロードDOWNLOADダウンロードしたzipファイルを解凍します。解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。Support/Adobe/CEP/extensionsライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。Photoshopを再起動します。Renamer]を選択します。Renamer」パネルが表示されて利用できる状態になります。Renamer」の使用方法についてリネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。下部の項目はjpg形式で書き出す際に使用。2018がリリースされました。多くの機能が追加されましたが自分的に良いなと思ったのは下記の2つの機能です。・レイヤーのコピー&ペースト・プレーンテキストとして貼り付ける新機能詳細は下記リンク先にてご確認ください。公式サイト)アップデート方法は下記手順にて。CCのアップデートをクリックこのバージョンアップでデバイスプレビュー機能が廃止されました。CCよく使う方は要注意です。2017を再インストールすることによって共存が可能になります。)2017.07.10選択範囲をシェイプに変換するスクリプト選択範囲をシェイプに変換するスクリプトを作成しました。更新:2017.7.10シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。「単位:px」でご利用ください。ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。[スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択すると選択範囲がシェイプに変換されます。私はこのスクリプトにショートカット(command+U)を設定しています。ファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。差分確認レイヤー作成スクリプト今回は差分を確認できるレイヤーを作成するスクリプトのご紹介です。こちらの動画をご覧ください。この動画のようにレタッチの比較に使用する以外にも、Webサイトのデザインカンプをエンジニアに渡した後に修正が発生した場合、このスクリプトで差分確認レイヤーを作成してから修正をおこなえば「修正箇所は一番上のレイヤー表示して確認してね」っていう一言だけで済みます。チームで共同作業を行う場合にも使えますね。スクリプトの利用手順について差分確認レイヤー作成スクリプトをダウンロードDOWNLOADダウンロードしたzipファイルを解凍して「差分確認レイヤー作成.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts1ファイルを開いた状態で[ファイル]メニュー/[スクリプト]/[Dearps_差分確認レイヤーを作成]を選択してスクリプトを実行します。2最上部に「差分確認レイヤー」が作成されます。レイヤー名には自動で日時が3修正作業を行います。サンプルでは赤枠の部分を変更します。4文字と写真を変更しました。5差分確認レイヤーを表示させます。すると差異がある部分が下の画像の様に表示されます。6修正前の状態を見たい場合は描画モードを通常にします。複数のファイルを修正するときなど毎回スクリプトを実行するのが面倒だったり、忘れたりしてしまうことがあるのでファイルを開いたら必ずこのスクリプトが実行するように設定してしまえば楽ちんです。1[ファイル]メニュー/[スクリプト]/[スクリプトイベントマネージャー]を選択します。2(1)にチェックを入れる。(2)のプルダウンメニューから「ドキュメントを開く」を選択する。プルダウンメニューの「参照」を選択して「Dearps_差分確認レイヤーの作成.jsx」を指定する。3(4)の「追加」をクリックして(5)の「完了」をクリック。これでファイルを開くたびに差分確認レイヤーが作成されます。