1 / 78
文档名称:

UI设计-从图标到界面完美解析第五章 图形、图标设计.ppt

格式:ppt   大小:7,639KB   页数:78页
下载后只包含 1 个 PPT 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

UI设计-从图标到界面完美解析第五章 图形、图标设计.ppt

上传人:梅子 2022/4/28 文件大小:7.46 MB

下载得到文件列表

UI设计-从图标到界面完美解析第五章 图形、图标设计.ppt

相关文档

文档介绍

文档介绍:第五章 图形图标设计
简约扁平化ICON设计
实例操作:照相机图标设计
5、绘制镜头部分
选择“椭圆工具”在画布中点击鼠标左键弹出“创建椭圆”弹出层,设置宽度为230px,高度为230px,并勾选“从中心”,然后点击确定,图层重
实例操作:音乐图标设计
4、绘制中间部分
选择“椭圆工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层,设置宽度为280px,高度为280px,并勾选“从中心”,然后点击确定,在图层面板将图层名称改为“圆形1”,将“圆形1”和“外框”居中对齐。
选中“圆形1”图层,添加渐变叠加,设置渐变方式“线性渐变”,颜色色值从左到右分别为#ffffff(色标位置0)—#bbb5b5(色标位置100),角度为90°。
第五章 图形图标设计
三维效果ICON设计
实例操作:音乐图标设计
复制“圆形1”图层(快捷键ctrl+j),新图层命名为“圆形2”,点击菜单栏“编辑” >“自由变换路径”(快捷键Ctrl+T),宽度和高度缩小90%,右键清除图层样式。修改颜色为黑色#000000。
复制“圆形2”图层(快捷键ctrl+j),新图层命名为“圆形3”,点击菜单栏“编辑” >“自由变换路径”(快捷键Ctrl+T),宽度和高度缩小94%。添加描边样式,大小5px,位置外部,颜色#1c1c1c,
选中“圆形3”,添加渐变叠加,。设置渐变方式“角度渐变”。色值从左到右分别为#555252(色标位置0)—#000000(色标位置13)—#e0e0e0(色标位置22)—#000000(色标位置31)—#424242(色标位置48)—#0b0b0b(色标位置60)—#c2c2c2(色标位置70)—#000000(色标位置80)—#555252(色标位置100),角度为90°。
第五章 图形图标设计
三维效果ICON设计
实例操作:音乐图标设计
5、绘制中间纹理部分
复制“圆形3”图层(快捷键ctrl+j),新图层命名为“纹理容器”,在“纹理容器”图层上方新建一个普通图层命名为“纹理”,填充成白色#ffffff,修改前景色和背景色为默认。执行菜单>滤镜>杂色>添加杂色,
选择“纹理”图层,执行菜单>滤镜>模糊>径向模糊,在弹出的径向模糊面板设置数量100,模糊方法旋转,品质最好,点击确定。执行一次Ctrl+F,重复一次刚刚的滤镜,
第五章 图形图标设计
三维效果ICON设计
实例操作:音乐图标设计
6、绘制中间蓝色圆形
选择“椭圆工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层,设置宽度为80px,高度为80px,并勾选“从中心”,然后点击确定,在图层面板将图层名称改为“蓝色圆形”。
给图层添加混合选项:
渐变叠加:设置渐变方式“线性渐变”。色值从左到右分别为#092958(色标位置0)—#6383b6(色标位置100),角度90°。
描边:大小3px,位置外部,混合模式正片叠底,不透明60,颜色#2a2a2a。
投影:颜色#000000,混合模式正片叠底,不透明度75,角度90°,距离5,扩展0,大小5。
内阴影:颜色#729ad9,混合模式正常,不透明度100,角度90°,距离2。
第五章 图形图标设计
三维效果ICON设计
实例操作:音乐图标设计
7、绘制中间小圆球
选择“椭圆工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层,设置宽度为25px,高度为25px,并勾选“从中心”,然后点击确定,在图层面板将图层名称改为“小圆球”。
图层添加混合选项:
渐变叠加:设置渐变方式“径向渐变”。色值从左到右分别为#6b6b6b(色标位置0)—#1d1d1d(色标位置28)—#ffffff(色标位置100),角度90°。
描边:大小1px,位置内部,混合模式正常,不透明100,颜色#282828。
投影:颜色#000000,混合模式正常,不透明度85,角度90°,距离8,扩展5,大小5。
第五章 图形图标设计
三维效果ICON设计
实例操作:音乐图标设计
8、绘制拨针
选择“椭圆工具”在画布中点击鼠标左键弹出“创建圆角矩形”弹出层,设置宽度为60px,高度为60px,并勾选“从中心”,然后点击确定,在图层面板将图层名称改为“拨针1”。
图层添加混合选项:
渐变叠加:设置渐变方式“线性渐变”。色值从左到右分别为#dedcdd(色标位置0)—#ececec(色标位置100),角度90°。
内阴影:颜色#ffffff,混合模式正常,不透明度100,角度120°,不使用全局光,距离2,扩展0,大小0。
投影:颜色#000000,混合模式正片叠底,不透明度60,角度90°,不使用全局光,距离5,扩展0,大小6。
第五章 图形图