游戏优化系列二：Android Studio制作图标教程

作者

大家好，我叫Jack冯；
本人20年硕士毕业于广东工业大学，于2020年6月加入37手游安卓团队；目前主要负责海外游戏发行安卓相关开发。

本文目录

1、 关于Image Asset Studio
2、 自适应和旧版启动器图标
3、 操作栏和标签页图标
4、通知图标

背景

谷歌在Android8.0后就推出了圆形图标，并在AndroidStudio中提供了制作工具。那么如果不制作圆形工具会怎么样？在部分设备上图标会出现适配问题，UI上不美观。本文将介绍Image Asset Studio工具的使用，介绍如何制作圆形图标

1、关于Image Asset Studio

Android Studio 包含一个名为 Image Asset Studio 的工具，可帮助您根据素材图标、自定义图片和文本字符串生成自己的应用图标。它会针对您的应用支持的每种像素密度以适当的分辨率生成一组图标。Image Asset Studio 会将新生成的图标放置在项目中 res/ 目录下的特定于密度的文件夹中。在运行时，Android 将根据运行应用的设备的屏幕密度来使用适当的资源。

Image Asset Studio 可帮助您生成以下图标类型：

• 启动器图标
• 操作栏和标签页图标
• 通知图标

运行 Image Asset Studio

如需启动 Image Asset Studio，请按以下步骤操作：

• 在 Project 窗口中，选择 Android 视图。
• 右键点击 res 文件夹，然后依次选择 New > Image Asset。

img

2、自适应和旧版启动器图标

打开 Image Asset Studio 后，您可以按照以下步骤添加自适应和旧版图标：

（1）在 Icon Type 字段中，选择 Launcher Icons (Adaptive & Legacy)。

（2）在 Foreground Layer 标签页的 Asset Type 中选择一种资源类型，然后在下面的字段中指定资源：

• 选择 Image 以指定图片文件的路径。
• 选择 Clip Art 以指定 Material Design 图标集中的图片。
• 选择 Text 以指定文本字符串并选择字体。

（3）在 Background Layer 标签的 Asset Type 中选择一种资源类型，然后在下面的字段中指定资源。您可以选择一种颜色或指定一张图片作为背景图层。

（4）在 Legacy 标签页中，查看默认设置并确认您要生成旧版、圆形和 Google Play 商店中使用的图标。

（5）（可选）在 Foreground Layer 和 Background Layer 标签页中更改每个图标的名称和显示设置：

• Name - 如果您不想使用默认名称，请输入新名称。如果项目中已存在该资源名称（由向导底部的错误来指示），它将被覆盖。名称只能包含小写字符、下划线和数字。
• Trim - 要调整源资源中图标图形与边框之间的边距，请选择 Yes。此操作将移除透明空间，同时让宽高比保持不变。要让源资源保持不变，请选择 No。
• Color - 要更改 Clip Art 或 Text 图标的颜色，请点击该字段。在 Select Color 对话框中，指定一种颜色，然后点击 Choose。该字段中会显示新值。
• Resize - 使用滑块指定缩放系数（以百分比表示）以调整 Image、Clip Art 或 Text 图标的大小。指定 Color 资源类型时，会为背景图层停用此控件。

（6）点击 Next。

（7）（可选）更改资源目录。选择想在其中添加图片资源的资源源代码集：src/main/res、src/debug/res、src/release/res 或自定义源代码集。 主源集适用于所有构建变体，包括调试和发布。调试和发布源代码集将替换主源代码集，并适用于构建的一个版本。调试源集仅用于调试。要定义新源集，请依次选择 File > Project Structure > app > Build Types。例如，您可以定义一个测试版源集，并创建一个版本的图标，在其右下角显示“BETA”文本。如需了解详情，请参阅配置构建变体。

（8）点击 Finish。Image Asset Studio 会针对不同的密度将图片添加到 mipmap 文件夹。

示例1：

img

最后生成素材：

img

效果：

img

3. 操作栏和标签页图标

打开 Image Asset Studio 后，您可以按照以下步骤添加操作栏或标签页图标：

（1）在 Icon Type 字段中，选择 Action Bar and Tab Icons。

（2）在 Asset Type 中选择一种资源类型，然后在下面的字段中指定资源：

• 在 Clip Art 字段中，点击相应按钮。
• 在 Select Icon 对话框中，选择一个素材图标，然后点击 OK。
• 在 Path 字段中，指定图片的路径和文件名。点击 ... 以使用对话框。
• 在 Text 字段中，输入文本字符串并选择字体。 图标会显示在右侧的 Source Asset 区域以及向导底部的预览区域中。

（3）（可选）更改名称和显示选项：

• Name - 如果您不想使用默认名称，请输入新名称。如果项目中已存在该资源名称（由向导底部的错误来指示），它将被覆盖。名称只能包含小写字符、下划线和数字。
• Trim - 要调整源资源中图标图形与边框之间的边距，请选择 Yes。此操作将移除透明空间，同时让宽高比保持不变。要让源资源保持不变，请选择 No。
• Padding - 如果要调整全部四面的源资源内边距，请移动滑块。选择一个介于 -10% 和 50% 之间的值。如果也选择了 Trim，则先进行剪裁。
• Theme - 选择 HOLO_LIGHT 或 HOLO_DARK。或者，如需在 Select Color 对话框中指定颜色，请选择 CUSTOM，然后点击 Custom color 字段。 Image Asset Studio 会在透明的正方形内创建图标，所以边缘上有一些内边距。内边距为标准的阴影图标效果提供了充足的空间。

（4）点击 Next。

(5)（可选）更改资源目录： Res Directory - 选择想在其中添加图片资源的资源源代码集：src/main/res、src/debug/res、src/release/res 或用户定义的源代码集。主源集适用于所有构建变体，包括调试和发布。调试和发布源集将替换主源集，并应用于构建的一个版本。调试源集仅用于调试。要定义新源集，请依次选择 File > Project Structure > app > Build Types。例如，您可以定义一个 Beta 版源集，并创建一个版本的图标，使其右下角包含文本“BETA”。如需了解详情，请参阅配置构建变体。 Output Directories 区域会显示图片以及它们将出现在 Project 窗口的“项目文件”视图中的哪些文件夹中。

(6)点击 Finish。 Image Asset Studio 会针对不同的密度将图片添加到 drawable 文件夹。

4、通知图标

通知是您可以在应用的正常界面之外向用户显示的消息。Image Asset Studio 会将通知图标放置在 res/drawable-density/ 目录中的适当位置：

• 对于 Android 2.2（API 级别 8）及更低版本，会将图标放置在 res/drawable-density/ 目录中。
• 对于 Android 2.3 到 2.3.7（API 级别 9 到 10），会将图标放置在 res/drawable-density-v9/ 目录中。
• 对于 Android 3（API 级别 11）及更高版本，会将图标放置在 res/drawable-density-v11/ 目录中。
• 如果您的应用支持 Android 2.3 到 2.3.7（API 级别 9 到 10），Image Asset Studio 会生成灰色版本的图标。更高版本的 Android 使用 Image Asset Studio 生成的白色图标。

5、制作流程

打开 Image Asset Studio 后，您可以按照以下步骤添加通知图标：

(1)在 Icon Type 字段中，选择 Notification Icons。 (2)在 Asset Type 中选择一种资源类型，然后在下面的字段中指定资源：

• 在 Clip Art 字段中，点击相应按钮。
• 在 Select Icon 对话框中，选择一个素材图标，然后点击 OK。
• 在 Path 字段中，指定图片的路径和文件名。点击 ... 以使用对话框。
• 在 Text 字段中，输入文本字符串并选择字体。 图标会显示在右侧的 Source Asset 区域以及向导底部的预览区域中。

(3)（可选）更改名称和显示选项：

• Name - 如果您不想使用默认名称，请输入新名称。如果项目中已存在该资源名称（由向导底部的错误来指示），它将被覆盖。名称只能包含小写字符、下划线和数字。
• Trim - 要调整源资源中图标图形与边框之间的边距，请选择 Yes。此操作将移除透明空间，同时让宽高比保持不变。要让源资源保持不变，请选择 No。
• Padding - 如果要调整全部四面的源资源内边距，请移动滑块。选择一个介于 -10% 和 50% 之间的值。如果也选择了 Trim，则先进行剪裁。

Image Asset Studio 会在透明的正方形内创建图标，所以边缘上有一些内边距。内边距为标准的阴影图标效果提供了充足的空间。

(4)点击 Next。

(5)（可选）更改资源目录：

• Res Directory - 选择想在其中添加图片资源的资源源代码集：src/main/res、src/debug/res、src/release/res 或用户定义的源代码集。主源集适用于所有构建变体，包括调试和发布。调试和发布源集将替换主源集，并应用于构建的一个版本。调试源集仅用于调试。要定义新源集，请依次选择 File > Project Structure > app > Build Types。例如，您可以定义一个 Beta 版源集，并创建一个版本的图标，使其右下角包含文本“BETA”。如需了解详情，请参阅配置构建变体。

Output Directories 区域会显示图片以及它们将出现在 Project 窗口的“项目文件”视图中的哪些文件夹中。

(6)点击 Finish。 Image Asset Studio 会针对不同的密度和版本将图片添加到 drawable 文件夹。

示例1：在 Clip Art 字段中选择一个图标

img

效果1：

[图片上传失败...(image-d21189-1614571089250)]

示例2：在 Text 字段中，输入字符“ 37 ”

img

效果2：

img

示例3：在 Path 字段中，指定图片的路径和文件名

img

效果3：

[图片上传失败...(image-b88fe2-1614571089250)]