UI购物袋图标绘制详细教程,手提袋图标制作,PS绘制精致手提袋图标,PS绘制UI写实购物袋

本章设计教程文章给大家分享的内容是；用PS绘制一个逼真的手提袋图标，制作购物袋UI图标。整个绘制的过程比较详细，便于刚接触图标设计的新手更好的练习制作。最终绘制出来的效果（如下图所示）

第一步、打开PS软件，新建画布，尺寸设置（如下图所示）

第二步、给画布拉个渐变。（如下图所示）

第三步、拉个圆角矩形。（如下图所示）

第四步、双击图层添加图层样式，投影（如下图所示）

图层样式-内阴影，内发光和渐变叠加。（如下图所示）

图层样式-图案叠加，任选一个用来做纹理（如下图所示）

加完样式后得到效果（如下图所示）

第五步、拷贝一份圆角矩形，把它置于最下面。（如下图所示）

第六步、右键清除图层样式，填充黑色，在属性里羽化四像素。（如下图所示）

第七步、刚才我们是把圆角矩形眼睛关闭了，现在打开，选中圆角拷贝层（就楼上羽化黑色这个）按住ctrl+下键（就是键盘右键上下左右四个键）往下移动三四个像素，使它作为阴影。（如下图所示）

第八步、画长条矩形，创建剪辑蒙版。（如下图所示）

第九步、制作灰到白的渐变。（如下图所示）

第十步、用椭圆工具画两个小圆，位置一定放对，这是细节部分，填充黑色。（如下图所示）

第十一步、调出图层样式，添加描边、内阴影、渐变叠加，让它看起来像金属质感。（如下图所示）

 

做好图层样式之后，现在看起来有点金属的样子了。（如下图所示）

第十二步、在小圆形上面再画两个更小的圆填充黑色。（如下图所示）

第十三步、制作购物袋的绳子，这点要切图，大家注意看椭圆工具。（如下图所示）

第十四步、路径选择工具选中那个椭圆。（如下图所示）

第十五步、Ctrl+C、Ctrl+V，复制粘贴，再把复制的那个图层稍微往上拉点Ctrl+T 变小点。（如下图所示）

把它切掉。（如下图所示）

然后，合并为一个形状。（如下图所示）

第十六步、先按下Shift在画一个矩形，必须要画在同一个图层。（如下图所示）

再切。（如下图所示）

合并成一个形状。（如下图所示）

第十七步、椭圆画个小圆，放在接口上面，圆最好是偶数，这样才能对齐。（如下图所示）

第十八步、把小圆形放在另一个接口上，觉得绳子太长再调节下。（如下图所示）

第十九步、把圆的绳子合并成一个形状图层。给绳子添加图层样式。（如下图所示）

添加图层样式后得到效果（如下图所示）

第二十步、Alt复制一份，右键清除图层样式，放在这个位置制作阴影。（如下图所示）

羽化一下。（如下图所示）

第二十一不步、添加图层蒙版，画笔调为黑色，慢慢的擦。（如下图所示）

第二十二步、现在做细节，给绳子添加纹理细节，画一个椭圆放在这个位置不要填充，也不要描边。（如下图所示）

第二十三步、文字工具围着路径打一串SSSS。（如下图所示）

第二十四步、文字颜色随意，打好字以后把路径删掉 ，文字图层置于绳子上面，创建剪辑蒙版。（如下图所示）

做好以上步骤后得到效果（如下图所示）

第二十五步、实物手提袋的造型不可能那么平滑规整的，所以现在我们来制作手提袋的褶皱。画一个长条矩形填充黑色，在添加图层蒙版。（如下图所示）

第二十六步、打开渐变，调成黑到白。（如下图所示）

第二十七步、用编辑好的渐变，在黑矩形蒙版上从右往左拉一下（如下图所示）

放在箭头标注的位置，模式改为叠加。（如下图所示）

第二十八步、Alt复制一份放在对面。（如下图所示）

第二十九步、现在我们来制作表皮的褶皱，钢笔勾出这样的三角形状，放在这个位置，颜色填充稍微深点。（如下图所示）

三十步、复制三分，分别放在不同的位置，稍微羽化下。（如下图所示）

三十一步、剪辑蒙版。（如下图所示）

三十二步、再用钢笔顺着三角形侧面勾一个。（如下图所示）

三十三步、复制三份，看图上面的具体摆放（为了朋友们更直观看所以把刚刚剪辑蒙版撤销了）（如下图所示）

第三十四步、分别创建剪辑蒙版（如下图所示）

三十五步、至于这个褶皱，和刚刚方法如出一辙（如下图所示）

最后根据自己的想法和审美观点再综合调整一下。这就是我们最终制作完毕的手提袋图标效果图（如下图所示）