PS进阶教程!30分钟拟物图标速成记之直刀篇 - 优设网 - UISDC

PS进阶教程!30分钟拟物图标速成记之直刀篇

2015/02/08 25503评论区

skeuomorphism-icon-design-knife-1

编者按:超精致图标教程第三弹!今天的图标效果特别抢眼,30分钟帮你速成帅气利落的直刀,跟着@张小碗儿grace  的教程来,一边学习Photoshop的操作,一边了解专业的图标绘制流程,一举两得,赶紧收 >>>

@张小碗儿grace 同学图标教程系列:

强烈推荐大家关注小碗同学的设计师交流群:150327690

先展示一下最终效果图

绘制背景

NO.1-1

首先新建一张纸    宽:1280px  高:800px  分辨率:72像素/英寸

名称:Knife-test

NO.1-2 添加画纸背景色

点击选色工具中的前景色工具,输入色值3d313b

NO.1-3 绘制背景光

用椭圆选框工具,在下图位置画出一个色值:fbf2e6的椭圆;图层命名为:“背景光”

再点击滤镜中的高斯模糊,半径:180px;


在图层“背景光”上面新建一图层命名为“背景杂色”;色值:9d9d9d;

再点击滤色-杂色-添加杂色 , 数量:7%;高斯分布;单色;

设置好上面的数值后,将“背景杂色”的图层样式调成“叠加”,不透明度“30%”图层状态如下:


NO.1-4 整理图层

选择背景杂色、背景光、背景三个图层,把他们编辑成一个图层文件夹(快捷键ctrl+g),将文件夹命名:“背景”

2789979969173834174

NO.2 绘制整理轮廓

下图是这一步的完整效果图

NO.2-1

首先用钢笔工具,勾勒出刀身的轮廓,色值:f2f2f7;图层命名为:“刀身”;效果图如下:

现在要切除刀身上多余的部分,选中刀身的路径,然后选择椭圆工具,再点击ps界面上方,选择减去顶层形状选项;再在下图位置绘制几个正圆。

NO.2-2

现在要绘制出护手,首先选择圆角矩形工具,宽:32px,高:214px;半径:4px;色值:dbd8e3;图层命名:“护手”

选中护手的路径,再点击钢笔工具,再点击减去顶层形状选项慢慢的勾勒出下图的图形;

为了让护手看着造型美观,还要继续调整它的外形,用刚才同样的方法(钢笔+减去顶层形状)来完善如下图,旁边是两个放大图;

护手的外形勾勒可以有很多方法,我这里用的是路径的布尔方法绘制,也可以用钢笔工具直接绘制;

NO.2-3

接着钢笔工具,勾勒出刀柄,色值:a4684c ;图层命名为:刀柄;

刀柄同护手一样,很多方法可以实现,我psd中用的是钢笔勾勒+路径的布尔方法;

NO.3 绘制直刀投影

NO.3-1

首先将刀柄、护手、刀身 三个图层复制,然后将被复制的三个图层合并图层(ctrl+e);

新图层命名为:“投影”

为了更好的展示这把直刀的体感,我做了两层投影。

给图层“投影”添加图层样式,点击图层界面下方的,选择投影…

混合模式:正片叠底;色值:321f51;不透明度:95%;角度:90度 ;距离:10px;扩展:8%;大小:18px;


现在要做第二层投影,将图层“投影”复制,命名为“投影-1”,放在图层“投影”的下面;

给“投影-1”添加描边样式,大小:1px;位置:外部;混合模式:叠加;不透明度:78%;色值:40333e;

继续给它添加投影样式,混合模式:正片叠底;色值:302443;不透明度:52%;角度:90度;距离:24px;扩展:26%;大小:43px;


NO.3-2 整理图层

选择“投影”、“投影-1”两个图层,把他们编辑成一个图层文件夹(快捷键ctrl+g),将文件夹命名:“投影”

NO.4 细致刻画刀身

NO.4-1

将图层“刀身”复制,命名为“刀身-1”,放在图层“刀身”的上面,然后右键图层,创建剪贴蒙版;

给“刀身-1”添加渐变图层样式 , 混合模式:正常;不透明度:100%;样式:线性;角度:96度;缩放:100%;


NO.4-2

在图层“刀身-1”上面新建一个图层,起名“刀身-1-渐变”,然后右键“刀身-1-渐变”,创建剪贴蒙版;

·用钢笔工具在“刀身-1-渐变”上面绘制下图的形状,色值:dbd9e8;

现在要给“刀身-1-渐变”添加图层样式,点击,选择描边样式;大小:1px;位置:外部;混合模式:正常;不透明度:100%;颜色:ffffff;

再给它添加渐变样式;混合模式:正常;不透明度:100%;渐变:样式:线性;角度:-180度;缩放:100%;


NO.4-3

在图层“刀身-1-渐变”上面新建一个图层,起名“刀身-2”,然后右键“刀身-2”,创建剪贴蒙版;

用钢笔工具在“刀身-2”上面绘制下图的形状,色值:aeacbc;

现在要给“刀身-2”添加描边样式,点击,选择描边样式;大小:3px;位置:内部;混合模式:正常;不透明度:78%;填充类型:渐变;样式:线性;角度:-180度;缩放:100%;

再给“刀身-2”添加渐变叠加样式,混合模式:正常;不透明度:100%;样式:线性;角度:-90度;缩放:100%;


NO.4-4

将图层“刀身-2”复制,起名“刀身-2-光影”,然后右键“刀身-2-光影”,创建剪贴蒙版;

再将“刀身-2-光影”图层的填充调为:0%;

给图层“刀身-2-光影”添加内阴影样式,混合模式:正片叠底;色值:747089;  不透明度:75%;角度:50度;距离:5px;阻塞:0%;大小:65px;

再给“刀身-2-内阴影”添加矢量蒙版,再点击渐变工具,渐变工具的属性;然后按住鼠标左键,将鼠标放在A位置,按箭头方向滑动到B位置,然后松开鼠标左键;


为了更加清晰的表现刀身的质感,我把图层“刀身-2-光影”复制一层,命名为“刀身-2-光影1”

NO.4-5

现在继续做刀身的质感

再将图层“刀身-2”复制,起名“刀身-2-高光”,放在图层“刀身-2-光影1”的上面,然后右键“刀身-2-高光”,创建剪贴蒙版;

再将“刀身-2-高光”图层的填充调为:0%;

给图层“刀身-2-高光”添加描边样式,大小:2px;位置:居中;混合模式:正常;不透明度:100%;填充类型:渐变;样式:线性;角度:-180度;缩放:100%;


NO.4-6 给刀身增加材质

大家可以去图片网站下载一张光亮的铁皮材质,然后把材质图片放在图层“刀身-2-高光”的上面,命名“刀身-2-材质”,右键“刀身-2-材质”图层,选择创建剪贴蒙版;

将图层“刀身-2-材质”的样式改成:叠加;不透明度改成:35%;

NO.4-7  整理图层

选择下图选中的图层,把他们编辑成一个图层文件夹(快捷键ctrl+g),将文件夹命名:刀身

NO.5 细致刻画护手

NO.5-1

将图层“护手”复制,命名为“护手-渐变”,放在图层“护手”的上面,然后右键图层,创建剪贴蒙版;

给“护手-渐变”添加渐变图层样式 , 混合模式:正常;不透明度:100%;样式:线性;角度:90度;缩放:100%;


NO.5-2

将刚才下载的铁皮材质再次拖入ps,放在图层“护手-渐变”的上面,命名为“护手-材质”然后右键图层,创建剪贴蒙版;

将图层“刀身-材质”的图层样式调节为“叠加”,不透明度:35%;

NO.5-3

给图层“护手”添加描边样式,大小:2px;位置:外部;混合模式:正常;不透明度:100%;填充类型:渐变;样式:线性;角度:90度;缩放:100%;


NO.5-4

新建一个图层,命名为“护手-结构”然后右键图层,选择创建剪贴蒙版;然后选择钢笔工具,勾勒出下图的形状,色值:8e8e91;

给图层“护手-结构”添加描边样式,大小:2px;位置:外部;混合模式:正片叠底;不透明度:55%;样式:线性;角度:0度;缩放:100%;

再给图层“护手-结构”添加外发光样式,结构【混合模式:正常;不透明度:93%;杂色:0%;】图素【方法:精确;扩展:0%;大小:3px】品质【范围:50%;抖动:0%】

再将图层“护手-结构”的填充改成:94%;


NO.5-5

新建一个图层,命名为“护手-高光”然后右键图层,选择创建剪贴蒙版;然后选择矩形工具,宽:2px;高:216px;色值:ffffff;

将图层“护手-高光”的样式改为:柔光;

NO.5-6 整理图层

选择下图选中的图层,把他们编辑成一个图层文件夹(快捷键ctrl+g),将文件夹命名:护手

NO.6 细致刻画刀柄

NO.6-1

首先将图层“刀柄”移动到文件夹“刀身”的下面

NO.6-2

将图层“刀柄”复制,命名为“刀柄-渐变”,放在图层“刀柄”的上面,然后右键图层,创建剪贴蒙版;

给图层“刀柄-渐变”添加渐变样式,混合模式:正常;不透明度:100%;样式:线性;角度:90度;缩放:100%;


NO.6-3

找一张适合做刀柄的材质,命名为“刀柄-材质1”,放在图层“刀柄-渐变”的上面,然后右键图层,创建剪贴蒙版;

将图层“刀柄-材质1”的不透明度,调为:80%;

现在要加深木纹的肌理,首先复制图层“刀柄-材质1”,命名为“刀柄-材质2”,同样创建剪切蒙版;

再用魔棒工具,选中比较深色的纹路

选区反选(快捷键ctrl+shift+i)

delete删除没用的纹路,只保留颜色深的纹路

ctrl+d,去掉选区 ;然后给图层“刀柄-材质2”添加斜面与浮雕图层样式

结构【样式:外斜面;方法:平滑;深度:100%;方向:上;大小:1px;软化:0px;】

阴影【角度:-90度;高度:32度;高光模式:滤色;不透明度:25%;阴影模式:正片叠底;不透明度:100%;】


NO.6-4

在图层“刀柄-材质2”上面新建图层,命名为“刀柄-光1”,然后右键图层,剪贴蒙版;用钢笔工具,勾勒出如下图的图形,色值:ffffff;

将图层“刀柄-光1”右键选择转换为智能对象;然后给图层“刀柄-光1”增加高斯模糊,,半径:4px;


再将图层“刀柄-光1”的图层样式改为:叠加;不透明度:30%;

NO.6-5

为了增加光感,我们制作第二层光,将图层“刀柄-光1”复制放在其上面,命名为“刀柄-光2”, 右键,创建剪切蒙版;

然后将图层“刀柄-光2”的样式改为:柔光;不透明度:30%;

NO.6-6

为了增加结构光感,再制作第二渐变,将图层“刀柄-渐变”复制放在图层“刀柄-光2”的上面,命名为“刀柄-渐变2”并右键,创建剪切蒙版;

给“刀柄-渐变2”添加渐变样式,混合模式:柔光;不透明度:100%;样式:线性;角度:90度;缩放:100%;

然后将“刀柄-渐变2”的填充改为:0%;

NO.6-7

现在绘制刀柄的结构,新建图层命名“刀柄-结构-上”,右键,创建剪切蒙版,用钢笔工具绘制出如下图,色值:853b30;

右键,转为只能对象,并给其加上高斯模糊,半径:3px;图层样式:正片叠底;不透明度:40%;

NO.6-8

新建图层命名“刀柄-结构-下”,右键,创建剪切蒙版,用钢笔工具绘制出如下图,色值:5c3b31;

右键,转为智能对象,并给其加上高斯模糊,半径:4.8px;    图层样式:正片叠底;不透明度:80%;

NO.6-9

将图层命名“刀柄-结构-下”复制,命名“刀柄-反光”右键,创建剪切蒙版;

给“刀柄-反光”在增加一个颜色叠加图层样式,混合模式:正常;不透明度:100%;

选中图层“刀柄-反光”将其下移至合适位置,并将其不透明度调整为:8%;

NO.6-10

现在细化刀柄的高光,新建图层命名为:“刀柄-高光”,右键创建剪切蒙版,用钢笔工具勾勒出如下形状;

然后右键图层“刀柄-高光”,选择转为智能对象,并给“刀柄-高光”添加高斯模糊滤镜,半径:4px;

调节“刀柄-高光”的样式:柔光;

NO.6-11

现在加强刀柄的高光,将“刀柄-高光”复制,命名为“刀柄-高光1”,混合模式:正常;不透明度:100%;样式:线性;角度:0度;缩放:100%;

调节“刀柄-高光1”的样式:柔光;不透明度:50%;填充:0%;

NO.6-12

现在绘制刀柄尾部的金属,新建图层“刀柄-金属1”,用钢笔工具绘制出如下图形,再右键,创建剪切蒙版;

给“刀柄-金属1”添加描边样式,结构【大小:3px;位置:内部;混合模式:正常;不透明度:90%;】【 填充类型:渐变;样式:线性;角度:83度;缩放:100%;】

再给“刀柄-金属1”添加渐变叠加,混合模式:叠加;不透明度:100%;样式:线性;角度:78度;缩放:100%;

再给“刀柄-金属1”添加外发光 ,结构【混合模式:叠加;不透明度:75%】,图素【扩展:0%;大小:2px】;品质【范围:50%;抖动:0%】


NO.6-13

继续绘制刀柄尾部的金属,新建图层“刀柄-金属2”,用钢笔工具绘制出如下图形,再右键,创建剪切蒙版;

给“刀柄-金属2”,添加描边样式,大小:2px;位置:外部;混合模式:叠加;不透明度:100%;色值:5e1707;

给“刀柄-金属2”,添加内阴影,混合模式:正常,色值:741502;不透明度:100%;角度:120度;距离:1px;阻塞:0%;大小:1px;杂色:0%;

给“刀柄-金属2”,添加渐变叠加,混合模式:叠加 ; 不透明度:100%;样式:线性;角度:78%;缩放:100%;


NO.6-14

继续绘制刀柄尾部的金属,新建图层“刀柄-金属3”,用钢笔工具绘制出如下图形,色值:d2ae72;右键,创建剪切蒙版;

结构【大小:2px;位置:外部;混合模式:叠加;不透明度:100%;】 填充类型【颜色:380d05】

混合模式:叠加;不透明度:100%;样式:线性;角度:90度;缩放:100%;


NO.6-15

现在细化刀柄-金属3部分,新建图层,命名为:“刀柄-金属3-高光”,用矩形工具,绘制出如下图形,色值:ffffff;

·右键“刀柄-金属3-高光”创建剪切蒙版,再将它的样式调为:柔光;

NO.6-16

现在继续细化刀柄-金属3部分,新建图层,命名为:“刀柄-金属3-结构”,用钢笔工具,绘制出如下图形,色值:000000;

右键“刀柄-金属3-结构”创建剪切蒙版,再添加描边样式,大小:3px;位置:外部;混合模式:正片叠底;不透明度:78%;颜色:621b06;

将它的样式调整为:叠加;不透明度:35%;

NO.6-17

现在继续细化刀柄 , 新建图层,命名为:“刀柄-细节光”,用矩形工具,绘制出如下图(宽:3px;高:130px);色值:ffffff;

将“刀柄-细节光”的样式调整为:叠加;不透明度:25%;

NO.6-18 整理图层

选择下图选中的图层,把他们编辑成一个图层文件夹(快捷键ctrl+g),将文件夹命名:刀柄

整体图层是好习惯,大家要养成好习惯哦~


【能搞定的同学给你送点福利】

千万千万低调收藏马克:
《强烈推荐:90%的人都不知道的电影资源下载站》

边放松边提高审美的电影大片:
《看电影涨姿势!有哪些电影适合推荐给学艺术的人看?》
《看电影涨姿势!哪些电影适合推荐给学艺术的人看?(二)》

原文地址:xiaowangrace
投稿者:@张小碗儿grace

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

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

chat-yinliu-pic

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

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