fbpx

[email protected]

购物车

 查看订单

  • 我的帐户
东东购 | EasternEast
  • 中文书店
    • 畅销排行榜
      • 小说 畅销榜
      • 童书 畅销榜
      • 外语畅销榜
      • 管理畅销榜
      • 法律畅销榜
      • 青春文学畅销榜
    • 热门分类
      • 社会小说
      • 成功/励志 畅销榜
      • 人物传记
      • 大陆原创
      • 绘本童书
      • 影视小说
    • 文学推荐
      • 文集
      • 戏剧
      • 纪实文学
      • 名家作品
      • 民间文学
      • 中国现当代随笔
    • 新书热卖榜
      • 小说 新书热卖榜
      • 青春文学 新书热卖榜
      • 童书 新书热卖榜
      • 管理 新书热卖榜
      • 成功/励志 新书热卖榜
      • 艺术 新书热卖榜
  • 精选分类
    • 小说
    • 保健养生
    • 烹饪/美食
    • 风水/占卜
    • 青春文学
    • 童书
    • 管理
    • 成功/励志
    • 文学
    • 哲学/宗教
    • 传记
    • 投资理财
    • 亲子家教
    • 动漫/幽默
    • 法律 Legal
    • 经济 Economics
    • 所有分类
  • 关于东东
  • 帮我找书
搜索
首页计算机/网络移动开发移动界面(Web/App)Photoshop UI设计十全大补

移动界面(Web/App)Photoshop UI设计十全大补

全新的设计理念和表现方法,一线设计师的成功商业作品,真正做到零基础无障碍速成!

作者:曾军梅 出版社:清华大学出版社 出版时间:2017年04月 

ISBN: 9787302455943
年中特卖用“SALE15”折扣卷全场书籍85折!可与三本88折,六本78折的优惠叠加计算!全球包邮!
trust badge

EUR €50.99

类别: 移动开发 SKU:5d840c945f98491045404625 库存: 有现货
  • 描述
  • 评论( 0 )

描述

开 本: 128开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787302455943

编辑推荐
★★详细分析各类风格的UI设计及实现过程★★从清新的扁平化风格到重金属风格一应俱全★★全方位了解图标、按钮、界面、字效、UI整体设计的制作方法 
作者简介
曾军梅      

 西安工程大学副教授,陕西省动漫游戏行业协会动漫教育专业委员会委员,陕西当代水彩粉画研究院研究员、理事。        发表论文及作品30余篇(其中EI 、ISTP检索5篇),获外观专利1项。参加了一项*、五项省级、三项院级科研项目,十二项横向课题。其中14项为项目负责人,十八项已结题。获教学成果一等奖(主持人)一次,传统工艺美术作品获首届全国高校美术.设计作品大奖赛入围奖,中国西部风情全国水彩作品媒体展入选,获毕业设计(论文)工作优秀指导教师奖3次,指导学生多次在国内专业比赛获奖,并获大赛优秀指导教师9次。        研究方向:数字媒体艺术、动画设计理论及实践、动漫游戏美术理论与实践。现作为主导师指导学生11名,副导师指导学生2名。
目  录

目
录

Chapter 01 智能手机App UI设计

1.1 App UI设计概述 / 2

1.1.1 UI设计的概念 / 2

1.1.2 App客户端 / 2

1.1.3 主要工具软件 / 3

1.2 智能手机平面设计师要掌握的技术 / 3

1.3 优秀App界面 / 4

1.3.1 优秀App界面的特点 / 5

1.3.2 产品团队与设计师 / 6

1.3.3 项目中的App设计流程 / 6

1.3.4 设计灵感 / 7

1.4 设计构图与界面布局 / 8

1.4.1 App界面设计构图 / 8

1.4.2 智能手机界面的布局构成 / 9

1.5 优秀App界面的要求 / 12

 

Chapter 02 App界面设计的配色意向

2.1 App UI的色彩设计意象 / 18

2.2 色彩的表现力和感染力 / 20

2.2.1 色彩的效应 / 20

2.2.2 色彩的反应 / 22

2.3 色彩研究 / 22

2.4 配色 / 24

2.4.1 色相配色 / 25

2.4.2 色调配色 / 25

2.4.3 明度配色 / 27

2.5 使用Photoshop进行配色 / 28

2.6 配色案例 / 31

2.7 色彩的对比组合 / 38

Chapter 03 
Photoshop制作App UI常用的操作

3.1 Photoshop CC的工作界面 / 40

3.1.1 了解Photoshop CC的工作界面 / 40

3.1.2 工具箱 / 41

3.1.3 选项栏 / 42

3.1.4 状态栏 / 44

3.1.5 面板 / 44

3.1.6 调整面板 / 46

3.2 选择工具 / 47

3.2.1 设定选区的工具组 / 48

3.2.2 矩形选框工具的选项栏 / 48

3.2.3 选区的基本运算 / 49

3.3 填充工具 / 51

3.3.1 渐变工具的选项栏 / 52

3.3.2 油漆桶工具的选项栏 / 56

3.4 理解图层的概念 / 57

3.4.1 “图层编组”命令 / 59

3.4.2 “排列”命令 / 60

Chapter 04 手机UI设计平面图标制作

4.1 设计吸引眼球的图标 / 62

4.2 图标的设计方案 / 63

4.3 正确的图标设计流程 / 64

4.4 启动键制作 / 70

4.5 人像图标制作 / 72

4.6 记事本图标制作 / 74

4.7 放大镜搜索图标制作 / 76

4.8 麦克风图标制作 / 78

Chapter 05 
UI的质感表现

5.1 质感图标设计的三个阶段 / 82

5.1.1 确定题材 / 82

5.1.2 确定表现风格 / 82

5.1.3 具体实现 / 83

5.2 金属质感 / 84

5.3 磨砂玻璃质感 / 90

5.4 光滑表面质感 / 99

5.5 皮革质感 / 107

Chapter 06 
手机UI设计的字效表现

6.1 App UI的字号控制 / 114

6.1.1 字体尺寸的规则 / 114

6.1.2 字体规范 / 115

6.2 字体配色 / 116

6.2.1 配色规则 / 116

6.2.2 叠加、柔光和透明度 / 117

6.3 玻璃字体 / 118

6.4 镶钻字效 / 123

6.5 布料字体 / 133

Chapter 07 手机UI设计立体图标制作

7.1 图标的存储格式 / 140

7.1.1 矢量格式与位图格式 / 140

7.1.2 
JPG压缩格式 / 141

7.1.3 PNG非压缩格式 / 142

7.1.4 图像的有损和无损压缩 / 143

7.2 照相机图标制作 / 144

7.3 循环图标制作 / 158

7.4 多云图标制作 / 164

 

Chapter 08 手机UI界面元素设计

8.1 App UI设计思路 / 172

8.2 图形设计尺寸 / 173

8.3 登录界面 / 175

8.4 设置界面开关 / 181

8.5 通知列表 / 192

Chapter 09 手机UI按钮设计

9.1 App IU中按钮的设计思路 /
202

9.2 启动按钮 / 204

9.3 音乐播放按钮 / 215

9.4 清新彩色按钮 / 221

9.5 选项按钮 / 230

Chapter 10 智能手机UI整体界面制作

10.1 完整App UI界面的设计流程 / 238

10.1.1 需求阶段 / 238

10.1.2 分析设计阶段 / 238

10.1.3 调研验证阶段 / 239

10.1.4 方案改进阶段  / 239

10.1.5 用户验证反馈阶段 / 240

10.2 Android界面时尚风格设计 /
241

10.2.1 制作锁屏界面 / 241

10.2.2 制作日程安排界面 / 246

10.2.3 制作相册界面 / 249

10.2.4 制作列表界面 / 253

10.3  iOS界面扁平化风格设计 /
256

10.3.1 
制作登录界面 / 256

10.3.2 
制作主界面 / 258

10.3.3 制作日程安排界面 / 262

10.3.4 制作提示栏界面 / 265

前  言
前 言

随着移动互联网等新兴产业进入了高速发展的阶段,各行规模不断扩大,增速飞快,用户体验至上的时代已经来临。技术领域的逐步拓展,产品生产的人性化意识日趋增强,用户界面设计师(即UI设计师)也成为了人才市场上十分紧俏的职业。UI设计师简称UID(User Interface Designer),指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计,是目前中国信息产业中最为抢手的人才之一。 App是Accelerated Parallel Processing 的缩写,随着智能手机在中国的快速发展,App这类软件被越来越多的人青睐。本书主要包含了Android和iOS软件的用户界面(UI)的设计思路和制作过程。全书分为两部分,共10章。第1部分介绍了图标设计的领域和概念,包括图标设计中材质绘制的色彩理论和图标的设计技巧;第2部分介绍用Photoshop 制作各种UI常用元素,包括常用图形、控件、启动图标以及图片特殊处理、实战练习,同时分析了各平台UI的设计思路。第1章 智能手机App UI设计,系统介绍了设计智能手机UI的基本概念。第2章 App界面设计的配色意向以及高水平的色彩设计原理,要求设计师有对色彩绝对的把控能力。第3章 利用Photoshop制作App UI常用的操作,介绍了Photoshop CC中制作图标常用的和必备的一些工具知识,然后透过UI设计高手的设计思路来学习图标设计的过程,最后介绍了文件格式对于UI设计的影响。第4章 手机UI设计平面图标的制作,介绍了使用Photoshop的矢量图形工具,通过将基本元素进行合并、剪切等操作,一个个生动的图形呈现在眼前。第5章 UI的质感表现,介绍了使用Photoshop CC表现不同的质感,包括金属、玻璃、木质、纸质、皮革、陶瓷、塑料光滑表面等。灵活掌握这些制作方法,会对今后的UI表现技法产生极大的方便。第6章 手机UI设计的字效表现,介绍了字效设计的案例。在智能手机的UI设计中字体特效的表现非常重要,美观好的字体和字效设计能够让图标如虎添翼,让界面更加吸引人。第7章 手机UI设计立体图标制作,介绍了立体效果的图标案例。立体图标就是根据平面矢量图形进行二次加工,将导角、阴影、光泽、渐变填充等特效添加到形状上,从而得到光影和质感。第8章 手机UI界面元素设计,介绍了不同的控件制作案例。第9章 手机UI按钮设计,介绍了多种效果的按钮案例。第10章 智能手机UI整体界面制作,通过综合上面章节的案例知识,系统讲解了几种Android和iOS系统的综合案例。本书赠送资源目前图书市场上,计算机图书中夹带随书光盘销售而导致光盘损坏的情况屡屡出现,鉴于此,本书特将随书赠送资源制作成网盘文件。下载网盘文件的方法如下:(1)下载并安装百度云管家客户端(如果是手机,请下载安卓版或苹果版;如果是电脑,请下载Windows版);(2)新用户请注册一个账号,然后登录到百度云网盘客户端中;(3)利用手机扫描右侧的网盘二维码,可进入光盘文件外链地址中,将光盘文件转存或者下载到自己的百度云网盘中;(4)也可以直接输入本书配套资源文件在百度云网盘下载地址:http://pan.baidu.com/s/1qX9VjGw作者信息本书由西安工程大学专业老师曾军梅主编,参加编写的还包括白帆、蔡海燕、蔡晋、蔡妍丽、曹蕾、常超杰、常亮、陈慧蓉、陈英杰、范景泽、冯浩、葛银川、荆宝洁、李慧、刘晖、刘建邦、刘静、刘姝、刘正旭。本书读者对象本书适合Photoshop CC软件的使用快速掌握UI设计制作的方法,也适合广大平面设计爱好者,有一定设计经验需要进一步提高图像处理、平面设计水平的相关行业从业人员使用;还可作为各类电脑培训学校、大中专院校的教学辅导用书。感谢您选择了本书,希望我们的努力对您的工作和学习有所帮助,也希望您把对本书的意见和建议告诉我们。作者邮箱:[email protected]编辑邮箱:[email protected]
免费在线读
UI 的质感表现 05 Chapter UI的质感表现05Chapter本章我们讲学习使用 Photoshop CC表现不同的质感,包括金属、玻璃、木质、纸质、皮革、陶瓷、塑料光滑表面等。灵活掌握这些制作方法,会对今后的 UI表现技法提供极大的方便。

5.15.1质感图标设计的三个阶段 

Ps Version:CS4 CS5 CS6 CC平时看到那些大师们的 icon,我们总是惊讶不已。作为初学者的我们,当被要求或自己想要做一个 icon的时候,却不知道如何下手,从而导致时间在各种无意义的杂乱思考和“寻找素材”中被白白消耗掉了。
在这里,作者结合大师指导以及自己的经历,总结一套流程和大家一起分享:初学者怎样才能完成一个 icon设计。
5.1.1 确定题材在进行 icon制作之前,首先要想一些必要的问题:为什么要设计这个 icon?这个设计的需求是什么?什么题材才能满足这些需求?这个题材能做到很好地表达吗?等等。这些问题有的可能暂时还没有答案,不要着急,我们可以带着问题去看一些优秀的作品,从别人的成果中得到启发,有时候灵感就是这样产生的。激发灵感还有一个方法就是随手画草图。
思考之后,在脑海中确定要画什么,还要考虑一些像做一套图标时间是不是允许,某个题材的细节是不是太复杂导致无法完成等客观条件。我们可以选择几个题材作为备选方案。若不是商业需求,则可以从感兴趣的题材入手,这样就能激发自己的创作欲望。
5.1.2 确定表现风格物体的展现形式是什么?单个物体还是物体组合?色彩如何搭配才能突出主题?趣味性如何展现?以上这些问题我们在表现风格时都要一一考虑到,同时还需要考虑:根据现在 icon设计的流行趋势来选择写实风格,根据所要表达的主题选择材质等问题。 

SS不同设计师给 Dridddle网站设计的 logo形象UI的质感表现05Chapter83通过上述问题,我们可以发现,确定题材和确定风格的过程是互相影响、相互交织着进行的。只要把握这两点,然后大量地观看优秀的icon设计作品,并打草稿,从别人的设计中吸取其作品所传达的信息,可以让我们知道什么是好的作品,好的作品是怎么组成的。或许有的人在某些情况下根本不需要问问题,直接上手就开始做icon。即便是这样,想必他也是经过了前期的思考和权衡。因为这是完成一个优质icon设计的必经过程。5.1.3 具体实现经过了确定题材和表现风格之后,就开始进入实战操作了。现在需要考虑的问题是如何实现题材和风格,选择什么技巧工具和方法。很多初学者在具体实现这个步骤的时候,不知道怎么实现某种材质,也不知道怎么制作某种高光。这里介绍几个方法。1. 临摹创造是从临摹开始的。我们在临摹的时候,要选择最好的作品来临摹。这虽然有些难度,但是临摹好作品要比临摹水平一般的作品出来的效果要好很多。需要强调的是,在临摹之前要仔细地观察分析,观察光源的位置、颜色分布以及icon的层次等。这样要比直接上手的效果好得多。2. 找到PSD学习分析优秀的PSD文件,看它们是怎么用图层样式来实现金属质感和制作高光的堆叠细节。05Chapter83通过上述问题,我们可以发现,确定题材和确定风格的过程是互相影响、相互交织着进行的。只要把握这两点,然后大量地观看优秀的icon设计作品,并打草稿,从别人的设计中吸取其作品所传达的信息,可以让我们知道什么是好的作品,好的作品是怎么组成的。或许有的人在某些情况下根本不需要问问题,直接上手就开始做icon。即便是这样,想必他也是经过了前期的思考和权衡。因为这是完成一个优质icon设计的必经过程。5.1.3 具体实现经过了确定题材和表现风格之后,就开始进入实战操作了。现在需要考虑的问题是如何实现题材和风格,选择什么技巧工具和方法。很多初学者在具体实现这个步骤的时候,不知道怎么实现某种材质,也不知道怎么制作某种高光。这里介绍几个方法。1. 临摹创造是从临摹开始的。我们在临摹的时候,要选择最好的作品来临摹。这虽然有些难度,但是临摹好作品要比临摹水平一般的作品出来的效果要好很多。需要强调的是,在临摹之前要仔细地观察分析,观察光源的位置、颜色分布以及icon的层次等。这样要比直接上手的效果好得多。2. 找到PSD学习分析优秀的PSD文件,看它们是怎么用图层样式来实现金属质感和制作高光的堆叠细节。制作 icon过程中需要注意的细节有以下 3点。 

.越是精细的图标越要注意路径对像素的影响。 .因为 icon尺寸较小,所以就要求色彩饱满、对比度突出和有丰富的色阶层次。 .缩放图标时,要注意相应调整。5.2金属质感 

Ps Version:CS4 CS5 CS6 CCKeyword:圆角矩形工具、图层样式
在本例中,我们将学习使用椭圆选框工具绘制由中心向外的正圆,通过“图层样式”的“描边”效果为正圆添加金属光泽,通过椭圆工具和“路径”面板配合使用绘制金属效果的外围。 

设计构思

金属材料给人的视觉效果是坚硬、冷,而白色、浅灰色为冷色调,可以带给人压迫感、距离感以及冰凉的感觉,如右图所示。 

Chapter UI的质感表现 05 

▼
01 新建文档 执行“文件”→“新建”命令,或按下快捷键 Ctrl N,打开“新建”对话框,设
置大小为 1280像素 × 1024像素,分辨率为 72像素,完成后单击“确定”按钮,新建一个空白文档,
如图01所示。01▼
02 填充背景色 单击前景色图标,在弹出的“拾色器(前景色) ”对话框中设置参数,改变前景色,
按下快捷键 Alt Delete为背景填充前景色,在“背景”图层上右击,在弹出的下拉列表中选择“转
换为智能滤镜”,得到“图层0”图层,如图02所示。02▼
03 绘制正圆并填充 按下快捷键 Ctrl R,打开“标尺工具”,从垂直和水平方向分别拉出辅助线,使其位于画布的中央,选择“椭圆选框工具”,在辅助线交接的地方单击并按住 Alt Shift键拖曳鼠标绘制正圆,按下快捷键 D,设置前景色和背景色默认为黑白色,新建“图层 1”图层,为选区填充黑色,按下快捷键 Ctrl D,取消选区。
Tips: 用椭圆工具绘制正圆,如图03所示。按下快捷键Alt Delete填充前景色,如图04所示。按下快捷键Ctrl D,取消选区,如图05所示。030405在定位原点的过程中,按住Shift键可以使标尺原点与标尺刻度记号对齐。如果要隐藏标尺,可以执行“视图”→“标尺”命令或再次按下快捷键Ctrl R。▼
04 为正圆添加描边效果 双击“图层 1”图层,打开“图层样式”对话框,选择“描边”,设
置大小 54像素,位置为内部,填充类型为渐变,样式角度为 42度,单击“确定”按钮,为正圆添
加金属描边效果,如图06所示。R:255 R:255 R:162 R:255 G:255 G:255 G:162 G:255 B:255 B:255 B:162 B:255 

R:99 R:161 R:87 R:255 R:255 R:99 G:99 G:161 G:87 G:255 G:255 G:99 B:99 B:161 B:8 B:255 B:255 B:99 06SS渐变条参数设置 05(▼) 复制图层 按下快捷键 Ctrl J,复制“图层 1”图层,得到“图层 1 副本”图层,选择该图层,
右击,选择“清除图层样式”,使正圆还原到未被描边前的效果,如图07所示。07▼
06 等比例缩小正圆 按下快捷键 Ctrl T,在正圆四周出现可调节的控制点,按住 Alt Delete键等比例缩小正圆,完成后,按下 Enter键确认操作。
执行“自由变换”命令,如图08所示。调整正圆大小,如图09所示。0809在这一步中出现的选区,只是为了方便读者观看等比例缩小的范围,因为复制后的椭圆也是黑色,读者很难发现到底缩小了多少。Chapter UI的质感表现 05 

07(▼) 再次复制正圆,进行缩小 再次将正圆进行复制,然后使用同样的方法进行等比例缩小,如
图10所示。10Tips: 08(▼) 打开金属质感素材 按下快捷键 Ctrl O,在弹出的“打开”对话框中选择素材,将其打开,
按住Alt键的同时双击“背景”素材将其解锁,如图11所示。Tips: 11“背景”图层永远在“图层”面板的最底层,不能调整顺序,并且不能设置不透明度、混合模式、添加效果等。要进行这些操作,需要将“背景”图层进行解锁。▼
09 调整大小 使用“移动工具”,将素材拖曳到当前绘制的文档中,按下快捷键 Ctrl T,改变素材的大小,调整大小至可将黑色正圆遮挡住即可,选择“图层 2”图层,右击,选择“创建剪贴蒙版”,使金属图像限制在刚才绘制的正圆中。
用椭圆工具绘制正圆,如图12所示。调整素材的大小,如图13所示。创建剪贴蒙版,如图14所示。121314▼
10 打开金属质感素材 选择“椭圆选框工具”,在中心点的位置单击,按住 Alt Shift键绘制正圆,
此次正圆绘制的范围与金属素材大小相同,按下快捷键 Ctrl J,复制选区,得到“图层 3”图层。
绘制选区,如图15所示。复制选区,如图16所示。1516▼
11 添加效果 打开“图层 3”→“图层样式”对话框,选择“描边”“投影”选项设置参数,
为金属添加效果,使用“椭圆选框工具”绘制正圆,填充淡蓝色。 

选择“描边”选项,大小16像素,位置为内部,填充类型为渐变,渐变条的设置与第04步一样,样式角度为角度42度,如图17所示。选择“投影”选项,距离为22像素,大小为27像素,如图18所示。设置前景色为R:43;G:233;B:222,如图19所示。171819▼
12 绘制路径 选择工具箱中的“椭圆工具”,在选项栏中选择“路径”选项,绘制以中心点出
发的正圆路径。设置前景色为黑色,选择“画笔工具”,按下 F5键,打开“画笔”面板,设置相
应参数,如图20、21所示。2021路径是矢量对象,它不包含像素,因此,没有进行填充或者描边处理的路径是不能被打印出来的。 Tips: Chapter UI的质感表现 05 

▼
13 描边路径 新建“图层 5”图层,执行“窗口”→“路径”命令,打开“路径”面板,在“工
作路径”图层上右击,选择“描边路径”,打开“描边路径”对话框,选择工具为画笔,单击“确定”
按钮,为路径进行描边,如图22~24所示。Tips: 222324做到这一步也许有些读者会疑惑,为何自己绘制出来的原点是黑色或其他颜色呢?这就与前景色的颜色有关了,那么我们在执行“描边路径”之前,就要先确定前景色的色调。▼
14 删除路径 选择“橡皮擦工具”,在进行描边后的路径下方进行涂抹,将下方的原点擦掉,
然后在“工作路径”图层上右击,选择“删除路径”,将路径删除。 

擦掉多余原点,如图25所示。删除路径,如图26所示。2526▼
15 添加外发光效果 选择“图层 4”图层,打开该图层“图层样式”对话框,选择“外发光”,
设置混合模式为“正常”,不透明度设置为 19%,设置颜色为 

R:33;G:255;B:231,大小为 29像素,为蓝色圆点添加外发光效果,完成金属的制作,如图 27所示。“外发光”效果可以沿着图层内容的边缘向外创建发光效果,其设置面板中“等高线”“消除锯齿”“范围”和“抖动”等选项与“投影”样式相应选项的作用相同。Tips: 27磨砂玻璃质感

5.3Ps Version:CS4 CS5 CS6 CC
Keyword:圆角矩形工具、路径转换选区、横版文字工具、图层样式
磨砂玻璃质感被广泛应用于设计中,可以说是设计领域的宠儿,这不仅是因为磨砂玻璃看上去非常朦胧,半透明的质感非常适合作背景,还因为玻璃的雾化效果会轻松地营造出清新、唯美的感觉。 

设计构思

本例先使用木质底纹素材作背景,再搭配雾化磨砂的玻璃,给人传达出一种干净利落的氛围,恰到好处的高光和阴影搭配使得画面十分逼真、写实,如右图所示。 

01 

▼
新建文件 执行“文件”→“新建”命令,或按下快捷键 Ctrl O,打开“新建”对话框,创
建大小为1467像素× 1250像素的文档,完成后单击“确定”按钮,如图01、02所示。0201Chapter UI的质感表现 05 

▼
02 导入素材 执行“文件”→“打开”命令,在弹出的“打开”对话框中选择下载的对应素材文
件并将其打开,拖入到场景中,如图03、04所示。0304▼
03 绘制选区 单击工具箱中的“圆角矩形工具”按钮,在选项栏中设置工作模式为“路径”,
像素为 40,在页面上绘制路径,按下快捷键 Ctrl Enter将其转换为选区并新建一个阴影图层,如图 

05、06所示。0506▼
04 绘制阴影 按下快捷键 Shift F6,在弹出的“羽化选区”对话框中设置羽化半径为 15像素,单击工具箱中的“渐变工具”按钮,在选项栏中选择“径向渐变”,单击“点按可编辑渐变”按钮,
在弹出的对话框中设置渐变颜色,在选区内拖曳填充颜色,如图07~09所示。07090805(▼) 添加图层蒙版 单击“图层面板”下方的“添加图层蒙版”按钮,为其添加蒙版,单击工具
箱中的“画笔”按钮,在选项栏中设置相应参数,在页面上进行涂抹将图像部分隐藏,如图10~12所示。 

101112▼
06 绘制圆角矩形 单击工具箱中的“圆角矩形工具”按钮,设置工作模式为“形状”,在页面
上绘制形状。在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中
分别选择“描边”“颜色叠加”,设置相应的参数,为其添加效果,如图13~15所示。131514▼
07 复制形状 复制“形状 1”图层为“形状 1拷贝”图层,清除该图层的图层样式,再双击图层,
在弹出的“图层样式”对话框中分别选择“描边”“投影”,设置相应参数,为其添加效果,如图 

18161716~18所示。Chapter UI的质感表现 05 

08(▼) 绘制椭圆 单击工具箱中的“椭圆工具”按钮,在选项栏中选择工具模式为“形状”,按住 

Shift键在页面上绘制正圆,如图19、20所示。192009(▼) 添加渐变叠加 双击“形状 2”图层,在弹出的“图层样式”对话框中选择“渐变叠加”,
设置相应参数,为其添加效果,如图21~23所示。21232210(▼) 添加斜面和浮雕 双击“形状 2”图层,在弹出的“图层样式”对话框中分别选择“斜面和
浮雕”“阴影”“投影”,设置相应参数,为其添加效果,如图24~26所示。24262511(▼) 复制形状 选择“形状 2”图层,连续 3次按下快捷键 Ctrl J,将图层复制 3次,如图 27、28所示。
272812(▼) 导入素材 执行“文件”→“打开”命令,在打开的对话框中选择下载的对应素材文件并将
其打开,拖入到场景中,如图29、30所示。2930▼
13 绘制圆角矩形 单击工具箱中的“圆角矩形工具”按钮,设置工作模式为“形状”,在页面
上绘制形状。在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中
分别选择“内阴影”“颜色叠加”,设置相应参数,为其添加效果,如图31~33所示。313332Chapter UI的质感表现 05 

▼
14 添加外发光 双击“形状 3”图层,在弹出的“图层样式”对话框中分别选择“外发光”“投
影”,设置相应参数,为其添加效果,如图34~36所示。363435▼
15 绘制形状 单击工具箱中的“圆角矩形工具”按钮,设置工作模式为“形状”,在页面上绘制形状。
在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中分别选择“内阴影”“颜
色叠加”,设置相应参数,为其添加效果,如图37~39所示。383739▼
16 添加图层样式 双击“形状 4”图层,在弹出的“图层样式”对话框中分别选择“外发光”“投
影”,设置相应参数,为其添加效果,如图40~42所示。414042▼
17 绘制圆角矩形 单击工具箱中的“圆角矩形工具”按钮,设置工作模式为“形状”,在页面
上绘制形状。在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中
分别选择“内阴影”“投影”,设置相应参数,为其添加效果,如图43~45所示。44434518(▼) 添加外发光 双击“形状 5”图层,在弹出的“图层样式”对话框中选择“外发光”,设置
相应参数,为其添加效果,如图46、47所示。4647▼
19 绘制圆角矩形 单击工具箱中的“圆角矩形工具”按钮,设置工作模式为“形状”,在页面
上绘制形状。在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中
分别选择“渐变叠加”“投影”,设置相应参数,为其添加效果,如图48~50所示。494850Chapter UI的质感表现 05 

▼
20 绘制矩形 单击工具箱中的“矩形工具”按钮,设置工作模式为“形状”,在页面上绘制形
状。在“图层面板”中设置填充为 0%,并双击该图层,在弹出的“图层样式”对话框中分别选择“颜
色叠加”“投影”,设置相应参数,为其添加效果,如图51~53所示。53515221(▼) 添加文字 单击工具箱中的“文字工具”在“字符面板”中设置字体为“微软雅黑”,在页
面中输入文字,如图54、55所示。545522(▼) 添加投影 双击文字图层,在弹出的“图层样式”对话框中选择“颜色叠加”,设置“颜色叠加”
参数,为文字添加效果,如图56、57所示。565723(▼) 绘制高光 单击工具箱中的“钢笔工具”按钮,在页面中绘制封闭路径,按下快捷键 

Ctrl Enter将其转换为选区,并新建一个图层为“高光1”,为选区填充白色,如图58、59所示。5859▼
24 添加渐变叠加 选择“高光 1”图层,在“图层面板”中设置填充为 0%,双击该图层,在弹
出的“图层样式”对话框中选择“渐变叠加”,设置相应参数,为其添加效果,如图60、61所示。606125(▼) 绘制高光 单击工具箱中的“钢笔工具”按钮,在页面中绘制封闭路径,按下快捷键 

Ctrl Enter将其转换为选区,并新建一个图层为“高光2”,为选区填充白色,如图62、63所示。6362▼
26 添加渐变叠加 选择“高光 2”图层,在“图层面板”中设置填充为 0%,双击该图层,在弹
出的“图层样式”对话框中选择“渐变叠加”,设置相应参数,为其添加效果,如图64、65所示。6465Chapter UI的质感表现 05 

光滑表面质感
5.4Ps Version:CS4 CS5 CS6 CC
在本例中,我们将学习结合不同的工具来绘制手机的外形,大量运用图层的“图层样式”效果来为形状添加效果,使手机表现出完美的立体感和质感。Keyword:圆角矩形工具、图层样式设计构思

黑色给人的感觉是神秘、沉默,而深蓝色给人的感觉是幽静、深远、冷郁,如右图所示。 

01 

▼
新建文档 执行“文件”→“新建”命令,
02 

▼
绘制基本形 选择“圆角矩形工具”,在
或按下快捷键 Ctrl N,打开“新建”对话框,
选项栏中设置填充为黑色,半径为 40像素,在设置大小为 960像素 × 720像素,分辨率为 72
图像上拖曳并绘制基本形,如图 02所示。 像素,完成后单击“确定”按钮,新建一个空白文档,如图 01所示。 

0102▼
03 复制图层 将“圆角矩形 1”图层进行复制,得到“圆角矩形 1 副本”图层,按下快捷键 Ctrl T,按住快捷键 Alt Shift从中心向内等比缩
小形状,按下Enter键确认操作,如图03所示。03选择“内阴影”,设置不透明度为57%,阻塞为5%,大小为24像素,如图05所示。0505 

▼
绘制开关键和复制图层 设置前景色为 

▼
04 绘制手机屏幕和添加内阴影效果 设置前
景色为 R:116;G:116;B:116,选择“矩形工具”,在图像上绘制矩形,为其添加“内阴影”图层样式效果。 

R:32;G:32;B:32;选择“椭圆工具”,按住 Shift键绘制正圆。将该图层进行复制,将椭圆的颜色改为黑色,按住键盘上↓键,移动椭圆的位置。绘制手机屏幕,如图04所示。04绘制开关键,如图06所示。06

书摘插画
插图

插图

插图

插图

插图

插图

插图

抢先评论了 “移动界面(Web/App)Photoshop UI设计十全大补” 取消回复

评论

还没有评论。

相关产品

阅读更多
缺货

Android组件化架构

EUR €48.99
加入购物车

从零开始学微信小程序开发

EUR €35.99
阅读更多
缺货

第一行代码 Android 第2版

EUR €48.99
评分 5.00 / 5
加入购物车

术与道 移动应用UI设计必修课 第2版

EUR €41.99

东东购的宗旨是服务喜爱阅读中文书籍的海外人民,提供一个完善的购书平台,让国人不论何时何地都能沉浸在书香之中,读着熟悉的中文字,回忆着家乡的味道。


安全加密结账 安心网络购物 支持Paypal付款

常见问题

  • 货物配送
  • 退换货政策
  • 隐私政策
  • 联盟营销

客户服务

  • 联系东东
  • 关于东东
  • 帮我找书
  • 货物追踪
  • 会员登入

订阅最新的优惠讯息和书籍资讯

选择币别

EUR
USD
CAD
AUD
NZD
NOK
GBP
CHF
SEK
CNY
UAH
ILS
SAR
MXN
KRW
MYR
SGD
HUF
TRY
JPY
HKD
TWD
facebookinstagram
©2020 东东购 EasternEast.com

限时特卖:用“SALE15”优惠券全场书籍85折!可与三本88折,六本78折的优惠叠加计算。 忽略