游戏优化系列二: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)]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,047评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,807评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,501评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,839评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,951评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,117评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,188评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,929评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,372评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,679评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,837评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,536评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,168评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,886评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,129评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,665评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,739评论 2 351

推荐阅读更多精彩内容