Photoshopに関するTipsや便利な裏技を紹介するサイトです。Managerを使う必要がありました。Add-onsというサイトから公開されているエクステンションをインストールしなければならなくなりました。Add-onsに公開していない場合使用することができなくなってしまいました。2015でもエクステンションを動かすことのできる方法があります。PS」というエクステンションのインストールを例に手順を解説します。Awesomeのアイコンをシェイプとして利用できるエクステンションです。Add-onsには公開されていません。PSのサイトからエクステンションのデータをダウンロードします。Expanderなどの解凍アプリでさらに解凍します。Expanderを使用しました。)3解凍できたらそのフォルダを丸ごと下記ディレクトリに移動します。OSのライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。4Photoshopを再起動します。PS」パネルが表示され使用できる状態になります。Add-onsでのインストールを推奨しているのでこの方法は自己責任でお試しください。2016.04.27ぶっこ抜きエクステンションデザインパーツを1クリックでぶっこ抜き当ブログで公開しているぶっこ抜きスクリプトとぶっこ抜いてリンクスクリプトをパネルから利用できるようにエクステンション化させました。機能を簡単に説明します。Webサイト制作の場合ヘッダーやナビゲーションなどを別ファイル化させたい場合があるかと思います。そのような時にレイヤーパネル上でレイヤーグループを選択してぶっこ抜きボタンをクリックするだけで別ファイルに抜き出すことができます。ぶっこ抜いてリンクの方は別ファイルに抜き出し、さらに元のファイルとリンクした状態で保存することができます。2015ぶっこ抜きエクステンションのインストール方法についてぶっこ抜きエクステンションをダウンロードDOWNLOADダウンロードしたzipファイルを解凍します。解凍されたフォルダ「Bukkonuki」を下記ディレクトリに移動します。Support/Adobe/CEP/extensionsライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。Photoshopを再起動します。メニュー[ウインドウ]/[エクステンション]/[ぶっこ抜き]を選択します。以上で「ぶっこ抜き」パネルが表示されて利用できる状態になります。今後も新しいエクステンションの制作を計画しているのでお楽しみに!2016.04.15ダミー画像作成スクリプトシェイプを作成してスクリプトを実行するだけ!長方形ツールなどでシェイプを作成してスクリプトを実行するだけで自動でサイズを表記したダミー画像を作成してくれます。丸型などにも対応しています。ダウンロードしたzipファイルを解凍して「Dearps_Dummy.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動して適当なファイルを開いてください。(3)長方形ツールなどでシェイプを作成します。[スクリプト]から「Dearps_Dummy」を選択します。(5)ダミー画像が作成されます。コーディング時のダミー画像はPlacehold.jpをおすすめします。2016.04.14画像配置の超効率化スクリプト|PHOTOBOX画像配置の手間をスクリプトで解消!Webサイトのカンプを制作するうえで、画像配置って結構な手間ですよね。それを解消するスクリプトを作成したのでご紹介します。一般的な画像を配置する方法について(1)長方形ツールなどで画像サイズのシェイプを描く。(2)シェイプの上に画像を配置してシャイプに対してクリッピングマスクをかける。(3)色調補正などを施す際は調整レイヤーでさらにクリッピングマスクで重ねていきます。この方法でもいいのですが、レイヤー構成として美しくないし、クリッピングマスクが面倒だったり、誤操作でクリッピングマスクが外れてしまったりと、なにかと不満を感じます。それを解消するわたしの理想のレイヤー構成は下のような構成になります。簡単に説明するとレイヤーグループに対して画像サイズでベクトルマスクを設定して、その中に写真や調整レイヤーなどを配置していく構成です。今回紹介するスクリプトはこの構成を驚くほど簡単にスピーディーに作成してさらに+αの機能を含めています。利用してみてください。ダウンロードしたzipファイルを解凍して「Dearps_PHOTOBOX.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動して適当なファイルを開いてください。(3)画像を配置したいサイズ、位置に選択範囲を作成します。[スクリプト]から「Dearps_PHOTOBOX」を選択します。(5)画像配置のダイアログが表示されるので配置する画像を選択して「配置」ボタンをクリックします。環境設定で「配置時に変形をスキップ」にチェックが入っていない場合画像配置した際バウンディングボックスが表示されてしまいます。その場合は何も行わずそのまま「enter」で変形を終了させてください。(6)画像が配置されるので適宜サイズ調整を行い完成です。このスクリプトを使用しないで普通に画像配置をする場合は表示領域の中心に画像配置されてしまうので移動するのが手間です。PHOTOBOXスクリプトを使用すれば選択したエリアの中心に画像が配置されるので移動の手間が省けます。配置する画像が決まっていなくて「ダミー画像」を入れたい場合は、(5)のステップで画像配置のダイアログが表示された際に「キャンセル」をクリックすれば下のようなダミー画像が配置されます。ダミー画像のレイヤー名には画像サイズが表記されます。(写真を配置した場合でもダミー画像は背面に配置されます。2014以前のバージョンをお使いの方はPSDデータを配布させていただきますのでそちらをご利用ください。4/12Bootstrapを利用する場合のカンプ制作に!1クリックでBootstrapのグリッドシステムに対応したフォーマットが作成できるスクリプトをつくりました。BootstrapBootstrapはWebサイトなどを作成するためのCSSフレームワークです。Webサイト制作に必要なHTMLやCSS、JSが用意されているので簡単にスピーデイーにサイトを制作することができます。ダウンロードしたzipファイルを解凍して3つのファイル「Bootstrap_[デバイス].jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動します。[スクリプト]から「Bootstrap_[デバイス].jsx」を選択します。作成するデバイスを選択します。(4)Bootstrapのフォーマットが作成されました。「Bootstrap_デスクトップ.jsx」を実行した場合のサイズは下記になります。カンバスサイズはフルHDのディスプレイを想定して1920pxに幅を広げています。(750×1334)の画面サイズを想定してフォーマットが作成されます。2016.04.04レイヤーを選択範囲に移動するスクリプトレイヤーを選択範囲に移動するスクリプトを作成しました。ダウンロードしたzipファイルを解凍して「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。(3)レイヤーパネルで移動させたいレイヤー(レイヤーグループ)を選択します。[スクリプト]から「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」を選択すると選択範囲にレイヤーが移動します。2015の新機能「アートボード」で作成した各グループを個別のPSDとして書き出す方法を紹介します。[アートボードからファイル]を選択。(2)「アートボードからファイル」ダイアログが表示されるので適宜入力します。1保存先を選択します。2ファイルの先頭に文字列を入れたい場合は入力します。入力しなければそのままアートボード名がファイル名になります。3チェックをいれると選択したアートボードだけを書き出すことができます。4ファイル形式を選択します。PSD以外に下記ファイル形式が選択できます。BMP,JPEG,PDF,Targa,TIFF,PNG-8,PNG-245アートボードを保持したい場合はチェックをいれます。実行ボタンをクリックするとファイルが書き出されます。レイヤーパネルでアートボードを選択した状態で「ぶっこ抜きスクリプト」を実行して別ファイルとして抜き出す方法も手軽でおすすめです。2016.04.02選択範囲をベクトルマスクに変換するスクリプト選択範囲をベクトルマスクに変換するスクリプトを作成しました。ダウンロードしたzipファイルを解凍して「Dearps_選択範囲からベクトルマスク.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。[スクリプト]から「Dearps_選択範囲からベクトルマスク.jsx」を選択すると選択範囲がシェイプに変換されます。2015のアートボード機能を利用したfavicon(ファビコン)作成のTipsを紹介します。現在faviconの種類は膨大にありますが必要最低限ということで下記サイズを作成できるようにしています。Tipsfavicon.psdをダウンロードDOWNLOAD(1)ダウンロードした「favicon.psd」を開いてください。(edit)」のサムネイルをダブルクリックしてスマートオブジェクトを編集します。ロゴを配置するなどして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を作ろう!」1画像ファイル3つを選択します。2「アイコン作成」をクリック。4「アイコンをダウンロード」をクリックすると「favicon.ico」が保存されます。<head>内に下記コードを記述すれば完成です。href="/apple-touch-icon.png">2016.03.13ガイド作成スクリプトレイヤー、レイヤーグループ、選択範囲からガイドを作成することができるスクリプトを作成しました。2015用になります。ダウンロードしたzipファイルを解凍して「Dearps_ガイド作成.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成するか、ガイドを作成する対象のレイヤー(レイヤーグループ)をレイヤーパネルで選択します。[スクリプト]から「Dearps_ガイド作成.jsx」を選択するとガイドが作成されます。