MacのDockのアイコンのサイズ感を揃える Biscuitを例にして

目次

ビスケットでかい!

色々なアプリをまとめて表示できるブラウザBiscuitを最近試しています。使ってて思うことは「アイコンがでかい!」スクショを見てもらった方が早いと思うのでそうします。

わかりますでしょうか。他のアイコンより1周りぐらい大きいんです。右の方にある右下のバッジ表示も大きいですね。サイズ感を揃えたくてアイコンの大きさを変えようと思った時にけっこう手こずったのでノウハウを共有します。

Macのアイコンを作る方法には大体3通り

  1. コマンドラインで作る(icon.icnsで検索)
  2. Mac標準のプレビューを使って作る 余談:Keynoteでも作れるそうです
  3. GIMPなどのグラフィック系アプリを使って作る

私はグラフィックアプリでの作成が一番慣れているのでそうしました。

無料アプリGIMPとImage2Iconを併用してMac OS用のアイコンを作る

以下簡単に作り方を説明します。

1、アイコンの元画像を探してくる

まずはアイコンのもとになる画像を用意する必要があります。以下のような方法で準備します。

  1. アプリのパッケージ内のデータを使用
  2. 開発元のサイトで探してくる
  3. macOSiconsなどのサードパーティのサイトから探してくる
  4. 自分で好きなアイコンを作る

今回の場合は1でした。以下の手順で画像取得できます。

あわせて読みたい
Macのプレビューでアプリアイコンを作成する方法・作り方 | 深作浩一郎の「好きを仕事にする方法」を背中で... こんにちは、深作浩一郎です。ブログでMacのアプリやソフトの使い方や操作のやり方を紹介したりアプリやソフトに関係する記事を書く場合、アプリやソフトのアイコン画像が...

余談:最初は以下の方法で画像をコピーしていましたがショートカットキーでもっと楽にできたんですね。これだと拡張子がtiffになるし。

Finder>アプリケーション>Biscuit>アイコンの上で右クリック>パッケージの内容を表示>Contents>Resources>icon.icns>ダブルクリック>左側の1のアイコン画像をデスクトップにドラッグ&ドロップ

先程の記事のようにこのままプレビューで完結できるらしいんですけど私がやった方法も書いておきますね。

2、画像を適度なサイズに縮小

出典が良くわかりませんが、MacOSのアイコンははキャンバス1024✕1024に対して80%の大きさにするとちょうどいいらしいです。

A Memorandum
アイコン ファイル icns / ico の作り方 - A Memorandum はじめに TL; DR png2icons 実行時のセキュリティ設定 png2icons のオプション icns ファイル ico ファイル はじめに ドローツールではなく、単画像ファイルから Windows ...

Biscuitのアイコンは100%ドーン!って感じなので80%で作ることに。なので819px四方ですね。

今回は以下のように作りました。簡単ですみません。

  1. GIMPのファイル>新しい画像から1024px四方のキャンパスを作る
  2. 詳細設定から塗りつぶし色を透明、ガンマは知覚的ガンマ(sRGB)でOKボタンを押す
  3. 先ほどコピーしたアイコン画像を別タブで開き、拡大・縮小で画像サイズを819px四方に⇨カット
  4. 1、2で作った透明キャンバスに貼り付け
  5. ファイル⇨名前を付けてエクスポートでicon.pngなどしてエクスポート

3、画像ファイルをアイコンに変換する

次に普通の画像ファイルをアイコンファイルに変換する作業です。これがいくつも違う画像を用意しなくちゃいけなくてめんどくさい!

多分画像をアイコンに変換してくれるジェネレーターサイトもあると思うのですが検索すると出るのは怪しいサイトも多いのでデスクトップアプリで行いました。といっても無料だし使い方も簡単なので是非使ってみて下さい。以下のページからダウンロードできます。(Macのみ)

Image2icon − 独自のアイコンを作ろう

あとはインストールして立ち上げて、先程の画像をドラッグ&ドロップして「書き出す」をクリック>ICNSを選んでicon.icnsなどとして保存すれば終了です。(ここで調節もできるのでもしかしてGIMPで修正する必要なかったかも…。)

4、アイコンファイルをアプリに設定する

最後はアイコンファイルをアプリに登録する作業です。LIFEHACKERの記事に解説があります。

MacのDock「アイコンのサイズバラバラ問題」を一発で修正する方法https://www.lifehacker.jp/article/how_to_fix_those_oversized_icons_on_your_mac_docs

最後の「アプリの名前が書いてあるあたり」というのは下のスクショの赤で囲った部分です。アイコンの上に画像をドラッグすると+マークが出るのでそこで離します。

結果は?

肝心の結果ですが以下のようになりました。他のアイコンとサイズ感が揃っていい感じですね!

地味ですが目に入るたび気になっていたのでやっとスッキリしました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次