欢迎访问文稿网!

让人过目不忘的启动图标

范文之家 分享 时间: 加入收藏 我要投稿 点赞

让人过目不忘的启动图标

    对于专业手机APP设计者来说,必须要细心地处理手机APP的界面设计。一款手机APP应用或系统首先是通过界面将自身的整体性格传递给用户,体现了界面风格营造的氛围,属于产品的一种性格。事实上,市面上已经出现了很多让人过目不忘的启动图标。视觉设计的姿态决定了用户对产品的观点、兴趣,乃至后面的使用情况。APP界面的视觉设计制作可以帮助产品的感性部分找到更多的共性,或者规避一些用户可能的抵触点。

    Android系统启动图标如图3.138所示。

    iOS系统启动图标如图3.139所示。

    Windows系统启动图标如图3.140所示。

    图3.138

    图3.139

    图3.140

    3.3.1  Android系统启动图标

    Android系统启动图标是常见的图标之一,其绘制方法多种多样。下面介绍怎样通过最简便的形状工具进行绘制,效果也同样出彩。

    安卓系统启动图标制作流程如下。

    ①执行“文件”→“新建”命令,在弹出的“新建”对话框中设置各项参数及选项,设置完成后单击“确定”按钮,新建空白图像文件(图3.141)。

    图3.141

    ②单击椭圆工具,在其属性栏中设置其属性为“形状”,“填色”为绿色,然后在画面适当位置绘制圆形(图3.142)。

    图3.142

    ③单击矩形工具,在其属性栏中设置其属性为“形状”,“填色”为绿色,然后按住Alt键在画面适当位置绘制矩形,减去部分形状(图3.143)。

    图3.143

    ④单击圆角矩形工具,在其属性栏上选择“形状”选项,在属性栏上设置“填色”为绿色,“半径”为60 px,在画面上绘制圆角矩形形状(图3.144)。

    图3.144

    ⑤单击圆角矩形工具,在其属性栏中设置其属性为“形状”,“填色”为绿色,然后按住Alt键在画面适当位置绘制矩形,减去部分形状(图3.145)。

    图3.145

    ⑥单击直线工具,在其属性栏中设置其属性为“形状”,“填色”为绿色,然后在半圆上方绘制直线。复制“形状1”,生成“形状1副本”,对复制图像进行水平翻转并适当调整位置(图3.146)。

    图3.146

    ⑦单击圆角矩形工具,在其属性栏上选择“形状”选项,在属性栏上设置“填充”为绿色,绘制圆角矩形形状。复制“圆角矩形2”,生成副本图层,适当调整其位置至右侧(图3.147)。

    图3.147

    ⑧使用相同方法,继续复制“圆角矩形2”,生成更多副本,适当调整其位置至图像下方,制作出机器人双腿的效果(图3.148)。

    图3.148

    ⑨单击椭圆工具,在其属性栏中设置其属性为“形状”,“填色”为白色,然后在画面适当位置绘制圆形。复制“椭圆2”,生成“椭圆2副本”,并拖至画面适当位置(图3.149)。

    图3.149

    ⑩单击自定形状工具,在其属性栏上选择“形状”选项,在属性栏上设置“填充”为白色,并选择适当的图形,完成后在画面中绘制形状(图3.150)。

    图3.150

    k单击“添加图层蒙版”按钮,结合画笔工具,在添加的蒙版中适当涂抹黑色,隐藏部分图像(图3.151)。

    图3.151

    l单击横排文字工具,在打开的字符面设置各项参数,完成后在画面适当位置输入文字。至此,本实例制作完成(图3.152)。

    图3.152

    [技巧点拨]

    蒙版的运用可以在保留图像原有像素的情况下,隐藏部分图像。在进行图标绘制时,用处很大,结合其他形状工具可以轻松制作出所需要的图标效果。

    3.3.2  iOS系统启动图标

    iOS系统启动图标是常见的图标之一,其绘制方法多种多样。下面通过路径转化选区并结合渐变工具进行绘制,可以快速绘制出所需要的图标效果。

    iOS系统启动图标流程如下。

    ①执行“文件”→“新建”命令,在弹出的“新建”对话框中设置各项参数及选项,设置完成后单击“确定”按钮,新建空白图像文件(图3.153)。

    图3.153

    ②设置前景色为黑色,按快捷键Alt+Delete填充背景图层。单击钢笔工具,在属性栏中选择“路径”选项,然后在画面上勾勒iOS系统启动图标路径(图3.154)。

    图3.154

    ③新建“图层1”,设置前景色为白色,单击路径面板上的“用前景色填充路径”按钮,填充路径,单击面板空白区域取消路径。单击钢笔工具,继续勾勒iOS系统启动图标下半部阴影路径(图3.155)。

    图3.155

    ④新建“图层2”,按快捷键Ctrl+Enter将路径转化为选区,单击渐变工具,在属性栏上选择“灰色至白色”渐变,完成后从上至下绘制渐变(图3.156)。

    图3.156

    ⑤按住Ctrl键单击“图层1”前的缩览图,将图像载入选区。单击“添加图层蒙版”按钮,添加蒙版,隐藏图像。使用相同方法,绘制其他渐变色块(图3.157)。

    图3.157

    ⑥按住Shift键选中绘制的iOS系统启动图标的所有图层,复制后按快捷键Ctrl+E进行合并,生成“图层5副本”。双击“图层5副本”,添加“描边”效果。至此,本实例制作完成(图3.158)。

    图3.158

    [技巧点拨]

    路径与选区的转化:路径转化选区按快捷键Ctrl+Enter即可完成,而选区转化路径则直接在路径面板中单击“从选区生成路径”按钮即可。

    3.3.3  Windows系统启动图标

    Windows系统启动图标是常见的图标之一,其绘制方法多种多样。下面通过路径转化选区并结合渐变工具进行绘制,可以快速绘制出所需要的图标效果。

    Windows 系统启动图标制作流程如下。

    ①执行“文件”→“新建”命令,在弹出的“新建”对话框中设置各项参数及选项,设置完成后单击“确定”按钮,新建空白图像文件(图3.159)。

    图3.159

    ②新建“组1”,单击钢笔工具,在属性栏中选择“形状”选项,设置“填充”为红色,然后在画面上勾勒图形路径(图3.160)。

    图3.160

    ③双击“形状1”,分别勾选“斜面和浮雕”“投影”选项并设置各项参数,完成后单击“确定”按钮(图3.161)。

    图3.161

    ④使用相同方法,制作其他3个不同颜色的色块。新建“图层1”,设置前景色为黄色,单击画笔工具,绘制黄色色块(图3.162)。

    图3.162

    ⑤设置“图层1”的混合模式为“颜色减淡”,创建剪贴蒙版。复制“图层1”,生成“图层1副本”,设置其混合模式为“线性减淡”, 单击“添加图层蒙版”按钮,结合画笔工具,在添加的蒙版中适当涂抹黑色,隐藏部分图像(图3.163)。

    图3.163

    ⑥单击横排文字工具,在打开的字符面设置各项参数,完成后在画面适当位置输入文字。单击自定形状工具,在其属性栏中选择需要的形状,在画面中进行绘制。至此,本实例制作完成(图3.164)。

    图3.164

    [技巧点拨]

    绘制需要的自定义形状:单击自定形状工具,在其属性栏中选择需要的形状,设置其颜色,在画面中绘制需要的自定义形状即可。

221381
领取福利

微信扫码领取福利

微信扫码分享