首页 > 平面设计 > photoshop教程

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

admin photoshop教程 2022-02-18 01:58:21 ps   淘宝   详情页"

用ps制作详情页左侧的190小图,它可以用到展示新上架的宝贝或热销宝贝,它不是默认显示的,需要我们手动进行添加,该怎么设计呢?下面我们就来看看ps设计详情页左侧展示图的技巧。

Adobe Photoshop 2021 v22.5.1.441 ACR13.4 一键直装特别版

查看详情

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们新建一个190*690像素的白色画布,命名为详情页小图,然后点击【创建】,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们点击【矩形工具】画出一个190*230的形状,把填充颜色设置为无,描边设置为5像素,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们点击【钢笔工具】设置为【形状】,填充为橙色,不要描边,画出一个不规则的形状,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

接着,我们把两个形状一起选中按下【Ctrl+G】编组,点击【fx】选择【渐变叠加】,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

接下来,我们设置好渐变颜色,样式选择为线性,角度调整为180度,点击【确定】,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们用【椭圆工具】画出一个圆形,描边颜色设置为白色大小为1.2像素。填充设置为渐变颜色从橙色到白色,然后把两个颜色叠放在一起,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们在左上角处画出一个不规则的形状,用【文字工具】输入相关的文字,插入宝贝的图片,然后把图层全部选中(除了背景)编组在一起,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们按下【Alt】键向下复制出两组,分别修改文字和图片,然后点击【切片工具】,选择【基于参考线的切片】,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

接下来,我们点击【文件】-【导出】选择【存储为web所用格式】,把图片保存下来,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们在PC端的店铺装修中,选择【默认宝贝详情页】,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

我们在190模块中,把【自定义区】拖入详情页的左侧,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

最后,我们点击【编辑】不显示标题,然后分别插入图片加上相关的链接,点击【确定】就完成了,如图所示。

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

ps怎么制作淘宝店铺详情页左侧推荐小图怎么做?

以上就是用ps制作详情页左侧的190小图的技巧,希望大家喜欢,请继续关注潘少俊衡。

相关推荐:

PS怎么设计小清新海报背景?

ps怎么设计穿插效果的海报艺术字体?

PS怎么设计创意的水果海报? ps合成果汁喷溅苹果海报的技巧

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/PMsheji/PS/152728.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持