photoshop皮包主题UI图标设计教程

 更新时间:2016年9月14日 23:52  点击:1903
今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说设计一个皮包主题的UI图标的教程,各位想知道具体的制作教程的使用者们,那么就快来跟着小编一起看一看吧。
给各位photoshop软件的使用者们来详细的说一下皮包主题UI图标的设计教程。
教程分享:
最终效果:

 

_0224021539-0.jpg
下面,教程开始!
在正式做图标之前,需要先自定义一个图案。
首先新建一个1000×1000px 的画布,填充颜色#c5ab90,然后【滤镜】-【杂色】-【添加杂色】,给图层添加7%的杂色。完成之后,【编辑】-【自定义图案】添加一个图案,命名为【磨砂纹理】

 

_0224021438-1.jpg
准备工作做好了,开始画皮包。
新建一个1000×1000的画布,填充一个从#d9d5cf到#9c8c7e的径向渐变。

 

_02240230S-2.jpg
建一个512×512,半径为90的圆角矩形,并添加图层样式,其中【图案叠加】叠加的是刚才新建的【磨砂纹理】

 

_0224021163-3.jpg

 

_0224025560-4.jpg

 

_0224022302-5.jpg
CTRL+J复制一层刚才的圆角矩形,CTRL+T并按住ALT+SHIFT等比缩小,然后再给这个图层添加一个投影。

 

_0224021H7-6.jpg
画一个竖着的矩形,居中摆放,并添加图层样式。

 

_0224021020-7.jpg

 

_0224026442-8.jpg

 

_0224025631-9.jpg

 

_02240235K-10.jpg
画一条细线,紧贴竖矩形的右边缘,添加图层样式。

 

_0224021160-11.jpg

 

_02240240a-12.jpg

 

_022402N30-13.jpg
将这个线条复制一层,移动到竖矩形的左侧,将【投影】角度改为0°

 

_0224025529-14.jpg
复制一层较小的圆角矩形(图层【中】),清除图层样式,用布尔运算裁掉上半部分,并填充颜色#372715

 

_0224023532-15.jpg
给这个形状添加图层样式,其中【图案叠加】叠加的是【皮革纹理】(素材包中有提供)

 

_0224024I3-16.jpg

 

_0224025519-17.jpg

 

_0224021496-18.jpg

 

_0224026143-19.jpg
CTLR+J复制一层之前画的竖线(图层【左】),CTRL+T旋转为横线,放到皮革的上边缘。
调节颜色和投影,做成这个样子~

 

_022402L15-20.jpg
把这条横线复制一层,在形状工具下将线条改为虚线。

 

_0224023356-21.jpg
调整图层颜色和投影,做成以下效果:

 

_02240231N-22.jpg
将刚才做的实线和虚线一起建组(CTRL+G),添加一个图层蒙版,然后在蒙版上拉一个渐变。

 

_02240251K-23.jpg
然后新建一个图层,添加一个黑白渐变。

 

_02240245a-24.jpg
按住CTRL较小的圆角矩形(图层【中】)的选区,加一个蒙版,把多余的地方隐藏掉。然后将混合模式改为【柔光】不透明度改为60%。
中间部分的效果已经完成了,建议把除了【底面】和【背景】以外的图层一起建一个组。

 

_022402L15-20.jpg
将【底面】图层复制一层,调整形状,更改图层样式。

 

_0224022I5-26.jpg
将刚才的图层【盖】再复制一层,调整大小,修改图层样式。

 

_0224021911-27.jpg

 

_0224021B8-28.jpg

 

_0224024264-29.jpg
再复制一层,将形状改为虚线,然后拷贝之前做的【虚线】图层的图层样式,粘贴到这个虚线图层上,修改图层样式。

 

_0224021132-30.jpg

 

_022402J64-31.jpg

 

_0224021916-32.jpg
调整图层顺序,把【上虚线】图层移动到【上】图层的下面。
然后通过布尔运算做出以下白色形状。

 

_0224025940-33.jpg
栅格化图层,【滤镜】-【高斯模糊】给予适当的模糊度,并调节图层透明度,用图层蒙版隐藏掉多余的部分,做出如下效果。

 

_0224021S6-34.jpg
皮包的整体形状已经有了,接下来做皮带和金属扣。
用圆角矩形工具画一个下图的形状,并填充颜色#c5ab90,记得将这个图层移动到刚才做的【上高光】图层的下面。

 

_022402FK-35.jpg
将前面【皮革层】的图层样式拷贝过来,适当调节图层样式,用蒙版隐藏掉多余的形状,得到如下效果:

 

_0224022B7-36.jpg
用之前做虚线的办法,再做一条虚线。

 

_0224024V9-37.jpg
在皮带上画一个黑色的小圆,然后复制一个小圆,用布尔运算画一个圆环,填充颜色# c5ab90。
这里最好不要用图层描边的方式做圆环。如果一定要这么做,就必须要把圆环栅格化,才能继续后面的步骤。
将【虚线】图层的图层样式拷贝过来,粘贴给【环】图层,适当调节,做出以下效果

 

_0224024Y7-38.jpg
将【环】和【孔】一起建组,复制组,排列成以下效果:

 

_0224021103-39.jpg
画一个矩形,利用变形做出以下形状,并填充颜色#c5ab90。

 

_0224021056-40.jpg
将【皮革层】的图层样式拷贝过来,适当调节,并添加一个【渐变叠加】

 

_0224021005-41.jpg

 

_0224021417-42.jpg
在【横扣】右边画一个圆,添加图层样式

 

_02240232A-43.jpg

 

_0224025304-44.jpg

 

_0224022Y1-45.jpg

 

_022402HO-46.jpg
复制一个【圆扣】到左边。再复制一个【横扣】图层到下面,调节形状,做成以下效果。

 

_0224022924-47.jpg
用布尔运算画出金属扣的形状,再将【圆扣】的图层样式拷贝过来,适当调节

 

_022402H46-48.jpg
关于这个金属扣,我自己是画了一个圆,然后将下面的锚点拖上去,并调节锚点的手柄,得到了这个形状。
做出金属扣之后,用图层蒙版隐藏掉下面的那条边,然后用之前做高光的办法,给金属扣被皮带盖住的部分加点阴影

 

_022402BQ-49.jpg
画一个瘦长的矩形,将【金属扣】的图层样式拷贝过来。

 

_0224025L7-50.jpg
给这个图层添加一个蒙版,在蒙版上拉一个黑白渐变。

 

_0224024Q3-51.jpg
然后皮包就大功告成了~

 

_0224023I8-52.jpg
好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的皮包主题UI图标的设计教程分享的全部内容了,各位看到这里的photoshop的软件使用者们,小编相信你们现在是非常的清楚了制作教程了吧,那么各位就快去按照小编分享的教程自己去制作吧。
[!--infotagslink--]

相关文章

  • Photoshop制作雨中野外孤独行走的一头牛海报教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程,各位想知道具体制作方法的使用者们,大家就快来看一看小编给...2016-09-14
  • photoshop想象力无边界超现实合成图鉴赏

    今天小编在这里就为各位photoshop的这一款软件的使用者们带来了想象力无边界超现实合成图,各位想知道这些超现实的合成图都是些什么呢?那么下面各位就来跟着小编一起看...2016-09-14
  • photoshop简单制作一个搞笑的换脸表情包教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程,各位想知道具体制作方法的使用者们,那么大家就快来看一看教程吧。...2016-09-14
  • photoshop合成爱丽丝漫游仙境的小人国场景制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说合成爱丽丝漫游仙境的小人国场景制作教程,各位想知道具体的合成制作方法的使用者们,那么各位就快来...2016-09-14
  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • photoshop给手绘画调色变换场景后期教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程,各位想知道具体后期处理步骤的使用者们,那么大家就快来跟着小编来看...2016-10-02
  • Photoshop古装美女图片转为工笔画效果制作教程

    今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
  • photoshop用各种素材合成闪电侠效果制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来跟着小编一起看...2016-09-14
  • Photoshop火龙变冰龙制作教程分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程,各位想知道具体的制作步骤的使用者们,那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14
  • photoshop制作延时摄影城市照片效果教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说制作延时摄影城市照片效果的教程,各位想知道具体制作方法的使用者们,那么就快来看看教程吧。 给...2016-09-14
  • photoshop画斜线/直线/虚线的入门级教程

    这篇文章算是超级入门级别的了,我们下面来给各位介绍在photoshop画斜线/直线/虚线的教程了,希望下面这篇文章给你入门来帮助。 PS怎么画斜线 选择铅笔工具,或者画笔...2016-09-14
  • Photoshop打开PSD文件空白怎么解决

    有时我们接受或下载到的PSD文件打开是空白的,那么我们要如何来解决这个 问题了,下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14
  • photoshop制作菱形编织图案的无缝纹理背景教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说制作菱形编织图案的无缝纹理背景的教程,各位想知道具体制作方法的,那么下面就来跟着小编一起看一看吧。...2016-09-14
  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • photoshop设计暗红色金属文字效果制作步骤

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计暗红色金属文字效果的制作步骤,各位想知道具体制作步骤的使用者们,那么各位朋友们就快来跟着小...2016-10-10
  • Photoshop功夫熊猫电影海报制作步骤分享

    不知不觉功夫熊猫这部电影已经出到3了,今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报,各位想知道制作方法的,那么下面就来跟着小编一起看看吧。 给各...2016-09-14
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • Photoshop枪战电影海报图片制作教程

    Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • AI源文件转photoshop图像变模糊问题解决教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程,各位想知道具体解决方法的使用者们,那么下面就快来跟着小编...2016-09-14