<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="zh-cn"><generator uri="https://gohugo.io/" version="0.147.7">Hugo</generator><title type="html">有呀</title><link href="https://nuoea.com/tags/mac/" rel="alternate" type="text/html" title="html"/><link href="https://nuoea.com/tags/mac/index.xml" rel="alternate" type="application/rss+xml" title="rss"/><updated>2026-07-07T04:03:54+00:00</updated><id>https://nuoea.com/tags/mac/</id><entry><title type="html">制作Big Sur风格的 icon</title><link href="https://nuoea.com/big-sur-icns/" rel="alternate" type="text/html"/><id>https://nuoea.com/big-sur-icns/</id><published>2021-06-27T16:30:37+08:00</published><updated>2021-06-27T16:30:37+08:00</updated><content type="html"><![CDATA[<h2 id="什么是-icns">什么是 icns</h2>
<p>icns 是 Apple 的 macOS 操作系统的 App 图标文件的扩展名，你在 macOS 的「 Desktop 桌面」、「Finder 访达」、「Dock 程序坞」等看到应用程序的外观就是由一个内置在此 App 内部的扩展名为.icns的文件实现的。</p>
<p>你可以通过鼠标“右键”点击 App - “显示包内容” - 进入 “Contents” 目录 - 进入“Resources”目录，然后在目录下可以找到名为Appicon.icns或其他后缀为.icns的一个图标文件。</p>
<p>要创建一个.icns图标文件，需要准备以下 10 种不同大小的.png图片文件</p>
<table>
  <thead>
      <tr>
          <th>图片名称</th>
          <th>图片大小</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>icon_16x16.png</td>
          <td>16x16</td>
      </tr>
      <tr>
          <td><a href="mailto:icon_16x16@2x.png">icon_16x16@2x.png</a></td>
          <td>32x32</td>
      </tr>
      <tr>
          <td>icon_32x32.png</td>
          <td>32x32</td>
      </tr>
      <tr>
          <td><a href="mailto:icon_32x32@2x.png">icon_32x32@2x.png</a></td>
          <td>64x64</td>
      </tr>
      <tr>
          <td>icon_128x128.png</td>
          <td>128x128</td>
      </tr>
      <tr>
          <td><a href="mailto:icon_128x128@2x.png">icon_128x128@2x.png</a></td>
          <td>256x256</td>
      </tr>
      <tr>
          <td>icon_256x256.png</td>
          <td>256x256</td>
      </tr>
      <tr>
          <td><a href="mailto:icon_256x256@2x.png">icon_256x256@2x.png</a></td>
          <td>512x512</td>
      </tr>
      <tr>
          <td>icon_512x512.png</td>
          <td>512x512</td>
      </tr>
      <tr>
          <td><a href="mailto:icon_512x512@2x.png">icon_512x512@2x.png</a></td>
          <td>1024x1024</td>
      </tr>
  </tbody>
</table>
<h2 id="big-sur">Big Sur</h2>
<p>在发布会上，Craig提及了macOS全新的拟物化设计。类似IOS的图标风格，加速了苹果全终端融合的进程。</p>
<p>但是因为时间的关系，很多第三方的APP暂时还没有适配这种风格的图标。所以，作为一名深度强迫症患者。自己去制作相关的ICNS就是唯一的出路了。</p>
<p><img class="lozad" data-src="https://i.nuoea.com/img/2021/20210627170052.jpg" alt=""  /></p>
<h2 id="制作过程">制作过程</h2>
<ul>
<li>准备最大尺寸 1024x1024 图片一张，重命名为icon.png，其他大小尺寸可以通过终端命令生成；</li>
</ul>
<p>最好是能根据Apple的设计规范，制作统一视觉效果的图标。如果会使用设计工具。如：PS、Sketch、Figma等。可以使用相关工具的模版自动生成。</p>
<blockquote>
<p><a href="https://github.com/elrumo/macOS_Big_Sur_icons_replacements/raw/master/design/Template-Icon-App.sketch">Sketch图标模版</a></p></blockquote>
<ul>
<li>通过鼠标右键或者命令，创建一个名为icons.iconset的文件夹；</li>
</ul>
<pre tabindex="0"><code> mkdir icons.iconset
</code></pre><ul>
<li>通过终端来快速创建各种不同尺寸要求的图片文件;</li>
</ul>
<pre tabindex="0"><code>sips -z 16 16 icon.png -o icons.iconset/icon_16x16.png
sips -z 32 32 icon.png -o icons.iconset/icon_16x16@2x.png
sips -z 32 32 icon.png -o icons.iconset/icon_32x32.png
sips -z 64 64 icon.png -o icons.iconset/icon_32x32@2x.png
sips -z 128 128 icon.png -o icons.iconset/icon_128x128.png
sips -z 256 256 icon.png -o icons.iconset/icon_128x128@2x.png
sips -z 256 256 icon.png -o icons.iconset/icon_256x256.png
sips -z 512 512 icon.png -o icons.iconset/icon_256x256@2x.png
sips -z 512 512 icon.png -o icons.iconset/icon_512x512.png
sips -z 1024 1024 icon.png -o icons.iconset/icon_512x512@2x.png
</code></pre><ul>
<li>最后，终端中运行下面的命令，就可以获得名为icon.icns的图标文件了;</li>
</ul>
<pre tabindex="0"><code>iconutil -c icns icons.iconset -o icon.icns
</code></pre><p><strong>注意 : icon.png图片文件和icons.iconset文件夹要保存在同一级目录下，终端启动后切换到该目录。</strong></p>
<div class="row">
  
  
  
  
</div>


]]></content><category scheme="https://nuoea.com/categories/%E6%8A%98%E8%85%BE" term="%E6%8A%98%E8%85%BE" label="折腾"/><category scheme="https://nuoea.com/tags/mac" term="mac" label="Mac"/><category scheme="https://nuoea.com/tags/%E6%95%99%E7%A8%8B" term="%E6%95%99%E7%A8%8B" label="教程"/></entry></feed>