icnsファイルの作り方(Mac)
高解像度のRetinaディスプレイ登場以降、Mac で使われるアイコンの作り方は以前より複雑になり、用意する画像も多くなって面倒になりました。
僕はアイコンの元となる icnsファイルの作り方をよく忘れるので、自分なりの見解も含めてメモしておきます。
アイコン用の画像ファイルを用意する
下の表のように、アイコン用の画像ファイル(png)を各サイズ、それぞれのファイル名にして用意します。(すべてのサイズを用意しなくても icnsファイル は一応作れる)
( macOS Human Interface Guidelines: Designing App Icons より参考)
ファイル名+拡張子 | 画像サイズ(pixel) | dpi |
---|---|---|
icon_512x512@2x.png | 1024 × 1024 | 144 |
icon_512x512.png | 512 × 512 | 72 |
icon_256x256@2x.png | 512 × 512 | 144 |
icon_256x256.png | 256 × 256 | 72 |
icon_128x128@2x.png | 256 × 256 | 144 |
icon_128x128.png | 128 × 128 | 72 |
icon_32x32@2x.png | 64 × 64 | 144 |
icon_32x32.png | 32 × 32 | 72 |
icon_16x16@2x.png | 32 × 32 | 144 |
icon_16x16.png | 16 × 16 | 72 |
ファイル名の後ろに「@2x」が付くものはRetina用の画像。
ガイドラインにはdpiの指示はないけど、Apple純正のアプリケーションのアイコンの仕様では @2xが 144dpi、普通が 72dpi になっています。
(iTunes のアイコンの例↓)
またpngファイルのカラープロファイルは sRGB が推奨されてます。
ちなみに、僕はアイコンを描くのに Sketch を利用しています。
Sketch ではpngファイルに出力すると72dpiで書き出されます。
僕は1024pxで描いて、それを「@2x」で2048px-72dpiのpngファイルに出力し、それを1024px-144dpiに縮小してアイコンの基本の画像としています。
それと Sketch で書き出したpngファイルのカラープロファイルは「一般RGB」です。これを sRGB に変更すると、かなり見た目の色が変わってしまうので原則「一般RGB」のまま使用しています。(強制ではなく「推奨」なので)
(一般RGB から sRGB に変更した画像サンプル↓)
iconset フォルダを作成する
用意した画像ファイル群を1つのフォルダにまとめ、そのフォルダに拡張子「.iconset」を付け加えます。
このフォルダは QuickLook でアイコンファイルのように確認できます。
iconutil コマンドで変換
目的の iconsetフォルダを内包するディレクトリに cd
して iconutil
コマンドで icnsファイルに変換します。
例えば「ピクチャ」フォルダに存在する「hoge.iconset」を icns ファイルに変換するならば、ターミナルなどで下のようにコマンドを実行します。
$ cd ~/Pictures
$ iconutil -c icns hoge.iconset
これで出来上がり。
もし、icnsファイル → iconsetフォルダ に変換するなら、下のように実行します。
$ iconutil -c iconset hoge.icns
参考
Optimizing for High Resolution
macOS Human Interface Guidelines: Designing App Icons
日本語名と英語名を併せ持つフォルダを作る(.localized ディレクトリを作る)
タイトルの意味がよくわからないかもしれないけど・・・。
例えばホームフォルダ内にあるフォルダの名前は
- 書類 ←→ Documents
- デスクトップ ←→ Desktop
- ピクチャ ←→ Pictures
- ミュージック ←→ Music
こんな感じで日本語名と英語名を併せ持つようになっています。
これらは設定した言語環境によって名称表示の言語が変わってきます。システム環境設定の言語の設定で「English」を優先させるようにすれば、Finder でのこれらのフォルダ名の表示が英語表記に変わります。
自分で作成したファイルやフォルダの名前にも、上記のうような英語名も併せ持つフォルダを作りたい!なぜなら Quicksilver を使ってると日本語の名前のファイルやフォルダは検索しづらいので。
最初から「英語」もしくはアルファベットを使ったローマ字とかの名前をつければ済む話ですが、やっぱり日本語の名前の方がわかりやすくていいのです。
ずっと以前に「Create Localized Folder」というものがあったのですが、今はもう無いので検索してみると・・・
ここの 2. はシステムフォルダ内のファイルをいじるので、あまりやりたくない。なので1.の .localized ディレクトリを作る方法をターミナルとか使わないで真似してやってみましょう。(名前の後ろに「.localized」がくっつくけど)
例として
柴犬画像 ←→ shibainu_pics.localized
という日本語名・英語名を併せ持つフォルダを作っていきます。
① まず英語名でフォルダを新規作成
Finder で「shibainu_pics.localized」という名前のフォルダを新規作成(Finder上では「.localized」は省かれた状態で表示される)
② .localized ディレクトリ内に「ja.strings」ファイルを作成
テキストエディタで新規ファイルを作成し、内容を
"shibainu_pics" = "柴犬画像";
と入力します。
これで保存ダイアログを開いて、「新規フォルダ」ボタンをクリックして、「shibainu_pics.localized」フォルダ内に「.localized」フォルダ(Finder上では不可視)を新規作成します。
そしてファイル名を「ja.strings」として保存。
③ Finder 再起動して出来上がり
Finder を再起動すると、先ほどのフォルダ名の表記が変わります。
こんな風に「柴犬画像」という日本語名で表示されるようになりました。(当然ながら言語設定で日本語を指定した場合)
Quicksilver でこのフォルダを見るとこんな感じ。↓
名前の後ろに「.localized」が付くけど、日本語環境で使っている時には見えることもそうそう無いので、大して気になりません。
さあ、これで Quicksilver でフォルダ検索しやすくなりました。
めでたし、めでたし。
Quicksilver 再び
OSをクリーンインストール後、ぼちぼちと作業環境を再構築している最中で、 Quicksilver をインストールしました。
昔々アイデア次第でなんでもかんでも出来てしまう、この「Quicksilver」というアプリケーションにはまり、毎日のようにいじり倒していました。
久々に使ってみると、⌘command+英数(JISキーボードのみ)の呼び出しホットキーの裏技的な設定が未だ健在、懐かしい。
spaceキー で階層移動・QuickLookの表示、⌘command+return で「Alternate Action」を実行、「Event Trigger」の追加など、僕の知らない新しい機能も追加されてました。
このアプリケーションを使う一番の理由は、この見た目がかっこいいから。
使い勝手もよく、手に馴染みます。
Blacktree による開発が止まってオープンソースになって以降、現在の Quicksilver は下記サイトからダウンロードできます。
あえて書くけど Quicksilver はドネーションウェア(寄付)です。「フリー」ではありません。最近いろいろ気になることがあるので・・・。
Quicksilver とは?
初めての人にとっては「Quicksilver」って何者?となるので簡単に説明します。
ランチャであったり、ファイルブラウザであったり、Safari の履歴・ブックマークをブラウズできたり、AppleScriptの実行、コマンドの実行、iTunesのライブラリにアクセス・再生する(※)・・・などなど。
プラグインを追加インストールすることによって、様々な機能が追加されていくアプリケーションです。
(※)iTunesの環境設定で「iTunes ライブラリ XML をほかのアプリケーションと共有」する設定にしておく
最初に設定したホットキーで Quicksilver のウインドウを呼び出して操作していきます。
Quicksilver のウインドウは
- 1st Pane - Object(ファイルなど対象とするもの)
- 2nd Pane - Action(行動)
- 3rd Pane - Argument(引数)
の3つのペインによって構成されます。それぞれのペインで半角英数のキーボード入力で目的のものを選択していき、ペイン間のフォーカス移動は tab(or ⇧shift+tab) 、最終的に returnキー で実行します。
日本語でいえば
「(1stPane)〇〇を (2ndPane)□□する (3rdPane)△△で」
の文章を Quicksilver 上で完成させて実行するようなものです。
Quicksilver の基本的な使い方の例
Quicksilver を呼び出して、例えば(半角英数入力で)「s」と入力します。
1st Pane に Safari が表示されて、このまま returnキー で実行すれば、Safari が起動します。
もし 1st Pane に他のものが表示されていたなら、「safa」とか入力して Safari を選択します。また下のサブウインドウを ↓ or ↑ などでブラウズして選択することもできます。
このあたりの使い勝手は学習して、入力した文字に対してよく使うものがより上位に表示されるようになっていきます。(省略語を設定することも可)
spaceキー or → or / で Safari の履歴やブックマークをブラウズしていくこともできます。
(要 Safari Plugin)
webページを選択して space もしくは ⌘command+Y でQuickLook表示します。
いろいろショートカットキーなど
⌘command+esc(サービス)
Finderで選択しているファイルや、最前面のアプリケーションで選択しているテキストを1stPaneにピックアップした状態で、Quicksilver を呼び出します。
似たようなショートカットキーに、Quicksilver のウインドウを表示しておいてから ⌘command+G で Finderで選択中のアイテムをピックアップできます。
「=」を入力してから計算式を入力
(要 Calculator Plugin)
「.」ピリオドを入力してからテキスト入力
「,」コンマで複数アイテムを選択
不可視ファイルやパッケージ内をブラウズ
⌥option+→ でフォルダ内の不可視ファイルを見ることができたり、アプリケーションなどのパッケージ内のフォルダにアクセスできます。
Command Object を使う
例えば「システムをスリープさせるスクリプト」を実行するように Quicksilver で下のように表示する。
ここで ⌃control+return を入力すると、Command Object と呼ばれるものになり、 『「システムをスリープさせるスクリプト」を実行すること』が 1stPaneに集約されてウインドウを開き直します。
こうやって例えば「Run after Delay...」Action で実行したりします。
こんな感じで Quicksilver には、まだまだいっぱい機能があります。
ほんとにキリがないので、どこかに詳しいサイトはないかなあー?
・・・・
・・・
・・
あった!
( ´_ゝ`)。o0(わざとらしい・・・)
まあ古いけど、内容は似たようなものです。
さあ、また Quicksilver 使っていきましょう。