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をダウンロード
(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の３つの画像を「.ico」形式に変換します。(複数の画像をひとつにまとめられる「マルチアイコン」にします。)
Photoshopでは変換することができないので下記サイトを利用します。
①画像ファイル３つを選択します。
②「アイコン作成」をクリック。
③背景色を選択。
④「アイコンをダウンロード」をクリックすると「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">
ガイド作成スクリプト
レイヤー、レイヤーグループ、選択範囲からガイドを作成することができるスクリプトを作成しました。Photoshop CC 2015用になります。
スクリプトの利用手順について
ガイド作成スクリプトをダウンロード
(1) ダウンロードしたzipファイルを解凍して「Dearps_ガイド作成.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts
(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成するか、ガイドを作成する対象のレイヤー(レイヤーグループ)をレイヤーパネルで選択します。
(3) [ファイル] / [スクリプト]から「Dearps_ガイド作成.jsx」を選択するとガイドが作成されます。