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

给各位photoshop软件的使用者们来详细的说一下皮包主题UI图标的设计教程。

教程分享:

最终效果:

 


下面,教程开始!

在正式做图标之前,需要先自定义一个图案。

首先新建一个1000×1000px 的画布,填充颜色#c5ab90,然后【滤镜】-【杂色】-【添加杂色】,给图层添加7%的杂色。完成之后,【编辑】-【自定义图案】添加一个图案,命名为【磨砂纹理】

 


准备工作做好了,开始画皮包。

新建一个1000×1000的画布,填充一个从#d9d5cf到#9c8c7e的径向渐变。

 


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

 


 


 


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

 


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

 


 


 


 


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

 


 


 


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

 


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

 


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

 


 


 


 


CTLR+J复制一层之前画的竖线(图层【左】),CTRL+T旋转为横线,放到皮革的上边缘。

调节颜色和投影,做成这个样子~

 


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

 


调整图层颜色和投影,做成以下效果:

 


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

 


然后新建一个图层,添加一个黑白渐变。

 


按住CTRL较小的圆角矩形(图层【中】)的选区,加一个蒙版,把多余的地方隐藏掉。然后将混合模式改为【柔光】不透明度改为60%。

中间部分的效果已经完成了,建议把除了【底面】和【背景】以外的图层一起建一个组。

 


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

 


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

 


 


 


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

 


 


 


调整图层顺序,把【上虚线】图层移动到【上】图层的下面。

然后通过布尔运算做出以下白色形状。

 


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

 


皮包的整体形状已经有了,接下来做皮带和金属扣。

用圆角矩形工具画一个下图的形状,并填充颜色#c5ab90,记得将这个图层移动到刚才做的【上高光】图层的下面。

 


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

 


用之前做虚线的办法,再做一条虚线。

 


在皮带上画一个黑色的小圆,然后复制一个小圆,用布尔运算画一个圆环,填充颜色# c5ab90。

这里最好不要用图层描边的方式做圆环。如果一定要这么做,就必须要把圆环栅格化,才能继续后面的步骤。

将【虚线】图层的图层样式拷贝过来,粘贴给【环】图层,适当调节,做出以下效果

 


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

 


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

 


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

 


 


在【横扣】右边画一个圆,添加图层样式

 


 


 


 


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

 


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

 


关于这个金属扣,我自己是画了一个圆,然后将下面的锚点拖上去,并调节锚点的手柄,得到了这个形状。

做出金属扣之后,用图层蒙版隐藏掉下面的那条边,然后用之前做高光的办法,给金属扣被皮带盖住的部分加点阴影

 


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

 


给这个图层添加一个蒙版,在蒙版上拉一个黑白渐变。

 


然后皮包就大功告成了~

 


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

时间: 2024-09-20 04:18:32

photoshop皮包主题UI图标设计教程的相关文章

Photoshop设计电视机主题UI图标制作教程

给各位Photoshop软件的使用者们来详细的解析分享一下设计电视机主题UI图标的制作教程. 教程分享: 首先,我们看看原图,一个400*300的小图.   新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块.   我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示. 在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变

photoshop设计玉镯主题UI图标制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计玉镯主题UI图标的制作教程. 教程分享: 第一步.绘制图标底座形状,这里给的是300*300,圆角度数为20.   第二步.给底座填充一个从深色到浅色渐变,顶部添加亮色内阴影,底部添加投影.     第三步.添加一个240PX的圆,并给上暗内阴影,下亮投影.同时添加一个比矩形略深的渐变叠加,打造凹槽效果.   第四步.在凹槽内添加一个直径200px,宽度30px的圆环,颜色给高亮绿色,这里给了#adfcd6,做玉镯的基本形状.   第

Photoshop螺旋桨式风扇主题UI图标制作教程

给各位Photoshop软件的使用者们来详细的解析分享一下螺旋桨式风扇主题UI图标的制作教程. 教程分享:   首先,我们来建立一个1667*1250,300DPI的画布.整个教程分为右图五个部分,每个部分在完成以后,都进行了编组,并且每个组的图层状态都为穿透,这个同学们在做的时候要注意.我们首先从背景层开始.   背景1:这一层主要是用一个渐变工具(径向渐变)拉出差不多的效果就可以了.   新建一个图层,命名为背景2:这一层则是在原有背景的基础上,在下半部分制造一个近景的亮色部分.同样的,也是

photoshop简洁地图主题UI图标制作教程

给各位photoshop软件的使用者们来详细分享一下简洁地图主题UI图标的制作教程. 教程分享: 新建文档,这里我用的是800*600像素,画一个圆角矩形,颜色#e8e8e8.   为这个圆角矩形添加一个图层样式.       复制一层圆角矩形,将图层的填充更改为0,添加一个投影样式.     接下来,我们画出定位的那个图标的形状来,颜色#97d601.   这个形状,可能好多人会用圆加矩形去拼接,这里我讲一下我用的方法.先把垂直居中参考线标注出来,画一个正圆.   使用直接选择工具,选择住图中

PS制作经典质感拉丝钟表UI图标设计教程

UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味, 还要让软件的操作变得舒适.简单.自由,充分体现软件的定位和特点. UI设计原则 1.简易性 界面的简洁是要让用户便于使用.便于了解.并能减少用户发生错误选择的可能性. 2.用户语言 界面中要使用能反应用户本身的语言,而不是游戏设计者的语言. 3.记忆负担最小化 人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度.人类的短期记忆极不

PhotoShop立体质感砖块UI图标设计步骤制作教程

教大用PhotoShop打造立体质感砖块UI图标效果,UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑. 界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适.简单.自由.充分体现软件的定位和特点. 效果图: 教程制作步骤如下: 相关教程: PhotoShop绘制一个太极图图标教程 PS制作一把质感金属锁具图标教程 AI和PS绘制齿轮图标 PS制作经典质感拉丝钟表UI图标设计教程 分类: PS鼠绘教程 ps图标制作教

photoshop设计电视机主题UI图标效果制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计电视机主题UI图标的制作教程. 教程分享: 首先,我们看看原图,一个400*300的小图.   新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块.   我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示. 在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变

photoshop设计奶酪主题UI图标实例制作教程

给各位photoshop软件的使用者们来详细的解析分享一下设计奶酪主题UI图标实例的制作教程. 教程分享:           好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的设计奶酪主题UI图标实例的制作教程解析分享的全部内容了,各位看到这里的软件使用者们,小编相信大家现在那是非常的清楚了UI图标的制作方法了吧,那么各位就快去按照小编上面的教程自己去制作下奶酪主题的UI图标吧.

优秀的Photoshop图标设计教程

现在大部分网站都融入了图标,图标逐渐成为网站里重要的一部分.适当地使用图标能帮助实现一个在客户看来非常专业的网站.尽管从网上可以下载到免费 的图标或者也可以购买通用的图标,但是学会了图标设计的技术无疑能够带来很多益处.这里就有国外20个优秀的Photoshop图标设计教程,希望对你有 所帮助. How To Design a Realistic Takeout Coffee Icon Tutorial Link For How To Design a Realistic Takeout Coff