搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
UI教程—QQ浏览器图标设计临摹
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
教程
浏览器
图标
设计
临摹
UI学习
发布时间:2020-05-08
关注
编者按:今天教大家临摹一枚QQ浏览器的图标, 教程难度中等偏下,要考验的主要是大家对钢笔工具的运用,蒙版和渐变等也有涉及,教程特别细致,新手完成应该木有问题!学习交流群:631661187最终效果:
新建一个500*500画布,按U用椭圆工具画一个200*200的圆(颜色随意)
路径选择工具选中画好的圆形。ctrl+c,ctrl+v 复制这个圆形在同一个图层
ctrl+t 缩小的时候按住shift+alt ,同比例缩小(大小自己看着合适就行)
如图所示。切掉它
合并成一个形状。
添加图层样式渐变叠加角度是120度(颜色数值用吸管吸我截图颜色就行啦)
用刚刚说的方法再切一个左边的小圆来
添加图层样式 90°的线性渐变叠加~
把小圆放到中间
ctrl+j复制出外面那个大圆,右键清除图层样式
填充颜色 a5daff
添加蒙版,拉个黑到白色的渐变,拉出这样的效果,如果拉不出这样的效果就用笔刷调整好 透明度慢慢擦。
覆盖到大圆上面,把添加蒙版的这个圆形向下向右各移动一个像素,让整体具有立体感
ok我们来画云。按U椭圆工具和矩形工具依照下图所示画。记住每个形状
都必须是单独的图层
按P钢笔工具勾出这个形状。
这时候把云朵填充白色,先随便复制出一个圆形,添加蒙版填充颜色 (颜色数值a5daff)按照刚才的方法擦擦 or 加渐变拉。擦出如图形状
覆盖到原来的圆形的上面,其他两个圆也按照如上,复制添加蒙版擦出来。
钢笔勾出的形状,也是添加蒙版擦擦。
用钢笔勾出这个形状,添加蒙版擦擦,用钢笔顺着圆形的内侧勾就行。
勾好后,放在内侧这个位置
新建个图层,用钢笔顺着圆形勾出这个形状,描边白色。还是添加蒙版,稍微擦擦两端。放到这个位置
教程到这里基本结束啦。自己试着做个阴影 高光 之类的,细节方面自己在把控下。
再次附上最终临摹的效果图
UI学习作品
UI教程—QQ浏览器图标设计临摹相关作品
收藏
网页设计
收藏
网页设计
收藏
卡通图标
收藏
卡通图标
收藏
小程序设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More