PS教程!手把手教你绘制一枚扁平的相机图标 - 优设-UISDC

PS教程!手把手教你绘制一枚扁平的相机图标

2015/06/30 10532评论区

photoshop-elegant-camera-icon-1

编者按:今天的PS教程是一枚扁平的相机图标,作者@yu0910 昨天的教程人气也非常旺,简单易懂,好操作好上手,效果也好看得飞起,作品评论见 >>>

作者系列教程:《PS教程!手把手教你绘制一枚酷炫的机械风格图标》

Step 01

点击 — 【文件】— 【新建】(快捷键Ctrl+N)新建一个新的图像,命名好并把宽度设置为800px,高度为600px,分辨率为72dpi,然后点击确定,记得顺手保存文件(快捷键Ctrl+S)。

Step 02

选择【圆角矩形工具】(快捷键U,可按Shift+U切换),在画布点击【创建圆角矩形】弹出层,设置宽度为200px,高度为150px,半径10px,并勾选【从中心】,然后点击确定;(PS:因为是不规则形状的主题图标,长宽比采用4:3比例)

Step 03

重命名图层为di,右键选择【混合选项】,设置

【描边】:大小为1,位置内部,填充类型为渐变,色值从上到下为 #ededed — #ffffff,角度为90°

【渐变叠加】:线性渐变,色值从上到下为 #f1f1f1 — #ffffff,角度为90°;

再复制图层(快捷键Ctrl+J),重命名为di2,填充颜色改为b9b9b9,并把图层向下移动三像素;

Step 04

绘制镜头部分,选择【椭圆工具】(快捷键U,可按Shift+U切换),按住Shift键画个正圆,大小自定适合即可,源文件的大小是为120×120px,图层重命名为B_yuan;设置图层混合选项:

【描边】:大小为5,位置外部,填充类型为渐变,色值从上到下为 #d5d5d5 — #e6e6e6,角度为90°

【渐变叠加】:色值从上到下为 #292929 — #232323,角度为90°

【投影】:颜色为#323232,角度90°,距离7px,扩展0,大小13px;

复制图层B_yuan重命名为Blue_yuan;点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小60%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:

【描边】:大小1px,位置内部,颜色# 111111,

【渐变叠加】:线性渐变,色值从上到下为 # 082441 — # 08101b,角度为90°;

再用【椭圆工具】画个正圆,大小自定,命名为S_yuan,填充颜色# 0c0c0c,

最后画镜头的高光,一样用【椭圆工具】画个正圆,大小自定,命名为guang,填充颜色# FFFFFF,不透明度为10%;

Step 05

绘制相机的顶部,用【椭圆工具】和【矩形工具】通过删除部分节点、路径移动和填充颜色等绘制,在此就不一一详解;

最后绘制相机的小红点,用【椭圆工具】画个正圆,大小自定,放在相机的左上角位置,设置图层样式:

【描边】:大小1px,位置外部,颜色#ff4d42;

【内阴影】:颜色#ff483d,角度90°,距离5px,阻塞0,大小8px;

【渐变叠加】:线性渐变,色值从上到下为 # fe574c — #ff463b,角度为90°;

完成图标的绘制。

END:用相同的方法跟技巧完成整套主题图标,应该注意整体的一些细节(图片来自设计师@ElethomHunter),因为这套主题是不规则形状的,形状上无法统一,整体视觉细节效果应更加谨慎细腻。

【优设六月人气好文排行榜】

光明正大看AV的时候到了!
《好孩子看不见!AV封面上那些精美的图标和文字》

最新版的PS CC逆天功能全搜罗!
《PS CC 2015来啦!逆天新功能你准备好接招了吗?(附下载)》

色彩运用秘籍全科普!
《超赞!让顶尖设计师告诉你10个色彩运用秘技》

作者:@yu0910

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量97万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/photoshop-elegant-camera-icon

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里