火星网校
photoshop制作网店产品详情图 PS设计实例 电商美工干货教程
发布时间：2024-01-10 19:21:55 浏览量：380次
关注我，每天为你推送更多的电商美工设计教程。
大家好，今天给大家带来更多的设计干货设计教程，不需要你太专业的水平，也不需要太多的设计基础，跟着我的步伐，你也可以设计一个完美的店铺产品详情图。我们来看看效果吧！
设计效果图
第1步：打开photoshop软件，新建文档，文档的尺寸我们使用750x1180像素，这个尺寸刚好正是我们手机看产品详情的一屏，这也是目前最多人设计手机版详情的尺寸。然后新建图层文件夹，在文件夹里新建图层，给图层添加一个渐变背景，渐变的颜色先采用深绿色跟淡绿色，编码为：#379901、#afe0a9
第2步：复制一张我们准备好的素材图片到文档，然后按photoshop菜单中的滤镜，高斯模糊对图片进行模糊处理，这样即不侵权，又可以作为素材使用。在百度图片里搜居家图片，就很多素材可用。
第3步：用虚线框选择底部图片进行删除，让底部素材图片不会有虚化的效果，然后给素材图片增加图层蒙版，在蒙版中添加黑色到透明的渐变，让素材自然融合到背景之中。
第4步：接着导入我们事先抠图好的产品图片，给产品调整好图片大小。让产品图片靠左。
第5步：用粗的黑体输入产品名称与品质信息，颜色暂时用黑色，最后进行细节的修改。
第6步：在文字上面输入英文字体，当然有英文公司名可输入，接着给英文字体增加一个圆角矩形框，圆角的弧度20像素。按Ctrl+回车转换为选框，然后给选框描边，描边选择1个像素，描边的颜色暂时用黑色。
第7步：在大的文字下面输入小的辅助广告语，字体选择细点的字体，颜色选择灰色。最后在文字下面用圆角矩形工具画3个圆点，然后填充灰色。
第8步：到这步，我们的设计基本设计好了，排版也排好了。接下来我们就是对产品详情进行调整细节了。我们取消原来设计的背景，发现不要绿色的背景还更好看，更协调。
第9步：给我们原来设计的绿色背景添加一个图层样式，样式中我们选择灰色的渐变。
第10步：在背景层上新建图层，前景色设置黑色，用画笔在上面随意画几笔，然后用模糊工具进行模糊处理。
第11步：经过黑色模糊滤镜后，我们按照同样的方法新建图层，然后画白色的涂鸦，然后同样的方法高斯模糊处理，给整个背景增加亮的白色。
第12步：白色模糊处理好后，我们给大的粗体字增加一个图层样式，选择外发光跟渐变叠加，渐变选择黑色到深灰色渐变。最后在背景的底部画一条横线，横线粗2像素，颜色选用白色。这样基本就设计好了。
小伙伴们，今天的干货分享如何？你学会了吗？刚学的新人也能设计大气的网店产品详情图。如有疑问，欢迎在评论区留言给我！
关注我，每天为你推送更多的电商美工设计教程。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
