|
|
51CTO旗下网站
|
|
移动端

2.2.2 拟物化图标的特点(1)

《Photoshop智能手机APP界面设计》第2章移动APP 图标设计,本章将向读者介绍移动APP图标的设计重点和技巧,并通过实例的制作讲解,使读者能够快速掌握图标的设计方法。本节为大家介绍拟物化图标的特点。

作者:高鹏来源:机械工业出版社|2017-10-26 14:22

2.2.2 拟物化图标的特点(1)

拟物化设计因其完全模拟现实生活中的物体对象,其优势也很明显,主要包括以下几点。

1.高辨识度

拟物化风格图标因为完全模拟现实生活中对象的外观和质感,所以其具有很高的辨识度,无论是什么肤色、什么性别、什么年龄或文化程度的人都能够认知拟物化的设计。如图2-12 所示为高辨识度的拟物化图标设计。

2.人性化

拟物化风格图标能够体现较好的人性化,其设计的风格与使用方法与实现生活中的对象相统一,在使用上非常方便,也更容易使用户理解。如图 2-13 所示为人性化的拟物化图标设计。

3.质感强烈

拟物化设计的视觉质感非常强烈,并且其交互效果能够给人很好的体验,以至于人们对拟物化设计已经养成了统一的认知和使用习惯。如图 2-14 所示为质感强烈的拟物化图标设计。

拟物化风格图标的缺点是,在设计中花费大量的时间和精力实现对象的视觉表现和质感效果,而忽略了其功能化的实现。许多拟物化设计并没有实现较强的功能化,而只是实现了较好的视觉效果。并且在移动设备中,受到屏幕尺寸大小的限制,图标的显示尺寸有可能较小,当拟物化图标在较小的尺寸时,其辨识度会大大降低,如图2-15 所示。

实战案例——设计拟物化时钟图标

源文件:源文件\第2 章\拟物化时钟图标.psd

视 频:视 频\第2 章\拟物化时钟图标.mp4

1. 案例特点

本案例设计一款拟物化时钟图标,在该图标的设计过程中完全模拟真实生活中时钟的外观,通过颜色明暗的变化、高光、阴影等效果的应用,表现出图标的凹凸视觉层次感,给人一种直观、真实、大方的感觉。

2. 设计思维过程

 

3. 制作要点

在本案例所设计的拟物化时钟图标过程中,通过添加渐变颜色、高光、阴影等效果,着重表现图形的质感和真实感,但需要注意的是,高光、阴影等效果的设置不宜过分夸张,着重表现真实效果。表盘刻度图形的绘制可以通过旋转复制的方法来实现,但需要注意调整图形旋转的中心点位置,中心点始终是位于圆心的位置。

4. 配色分析

本案例所设计的拟物化时钟图标使用红色作为主色调,搭配不同明度的红色表现出图标的颜色层次质感,搭配白色的表盘背景和黑色的刻度指针,与现实生活中的图形统一,整个图标的配色,视觉层次分明,效果清晰。

5. 制作步骤

执行“文件>新建”命令,弹出“新建”对话框,新建一个空白文档,如图 2-16 所示。使用“渐变工具”,打开“渐变编辑器”对话框,设置渐变颜色,如图2-17 所示。

在渐变预览条下方单击可以添加新色标,选择一个色标后,单击“删除”按钮,或者直接将它拖动到渐变预览条之外,可以删除该色标。

02 单击“确定”按钮,完成渐变颜色的设置,在画布中拖动鼠标填充径向渐变,效果如图2-18 所示。按【Ctrl+R】组合键,显示出文档标尺,从标尺中拖出参考线,定位图标的中心位置,如图2-19 所示。

使用参考线可以帮助用户在对图像进行编辑、裁切及缩放调整的操作时更加方便和精准。如果在操作的过程中担心参考线会被移动,可以执行“视图>锁定参考线”命令,将其锁定在原来的位置上。

03 新建名称为“主体”的图层组,使用“圆角矩形工具”,在“选项”栏上设置“工具模式”为“形状”,“半径”为60 像素,在画布中绘制黑色的圆角矩形,如图2-20 所示。为该图层添加“渐变叠加”图层样式,对相关选项进行设置,如图2-21 所示。

此处所添加的“渐变叠加”图层样式从左至右滑块颜色依次为RGB(255,68,0)、RGB(242,88,36)、RGB(237,70,9)、RGB(242,87,48)、RGB(255,255,255)、RGB(242,141,121)、RGB(229,96,92)和RGB(217,22,0)。

04 继续添加“投影”图层样式,对相关选项进行设置, 如图2-22 所示。单击“确定”按钮,完成“图层样式”对话框的设置,效果如图2-23所示。

05 复制“ 圆角矩形1”图层得到“圆角矩形1拷贝”图层,将该图层的图层样式清除,并调整复制得到的图形的大小,如图2-24 所示。为该图层添加“斜面和浮雕”图层样式,对相关选项进行设置,如图2-25 所示。

通过对“斜面和浮雕”图层样式的相关选项设置,可以为图像模拟出多种内斜面、外斜面和浮雕效果。

06 继续添加“渐变叠加”图层样式,对相关选项进行设置,如图2-26 所示。单击“确定”按钮,完成“图层样式”对话框的设置,效果如图2-27所示。

07 复制“ 圆角矩形1”图层得到“圆角矩形1拷贝2”图层,将该图层的图层样式清除,为该图层添加“投影”图层样式,对相关选项进行设置,如图2-28 所示。单击“确定”按钮,完成“图层样式”对话框的设置,将该图层调整至“圆角矩形1”图层下方,效果如图2-29 所示。

08 在“圆角矩形1 拷贝”图层上方新建“图层1”,使用“画笔工具”,设置“前景色”为RGB(15,11,11),选择合适的笔触,在画布中进行涂抹,如图2-30 所示。按住【Alt】键,单击“圆角矩形1 拷贝”图层的缩览图,载入选区,为“图层1”添加图层蒙版,效果如图2-31 所示。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

218人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

83人订阅学习

Mysql DBA修炼之路

Mysql DBA修炼之路

MySQL入门到高阶
共24章 | 武凤涛

472人订阅学习

读 书 +更多

Java Web标签应用开发

Java Web程序员直接在JSP页面中书写Java代码的做法,使得页面中混杂有JavaScript、HTML、Java等多种语言的程序代码,可读性差,可复用性也...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客