电商设计师入门 - 第二章:必备基础
分享给朋友:

按住画面移动小窗

下载
PS-淘宝店铺如何进行PC端装修
虎课APP支持视频下载
扫码下载/打开虎课APP
支持视频下载,随时随地学
手机观看
扫一扫,手机继续学
扫码下载/打开虎课APP
支持视频下载,随时随地学
PS-淘宝店铺如何进行PC端装修_虎课网
记笔记

全新AI视频总结上线

一键节省你80%学习时间

视频暂不支持AI视频总结
AI视频总结
编辑完成后,记得点我~

3.7万

已学

38小时

时长

44

配套素材

完课证书

¥199(¥299)

全站通VIP免费畅学

立即购买
图文教程学员评价 (589条评论)视频字幕

1.首先看一下本节课的重点内容。

2.使用【PS】新建画布【宽1920x高8000】,绘制一个高120像素的矩形框,然后向下拉一条参考线,绘制一个高30像素的矩形框,然后向下拉一条参考线。

3.新建图层,绘制一个宽950像素的矩形框,放在画板中间,然后进行两侧拉出参考线。

4.将上面店铺招牌区域进行绘制矩形框整体填充浅蓝色,然后进行添加LOGO。不建议摆放到参考线外。

5.接下来制作导航栏,绘制矩形框整体填充青蓝色,然后进行输入文案,文字字号不宜超过20,整体摆放如图所示。

6.接下来向下制作Banner海报,宽度1920高974,然后拖入我们下载的样板,进行看一下区域分排。

7.打开我们的淘宝网的店铺装修,点击PC端,然后点击基础页的首页点击装修店铺,将之前的装修点击上面的备份,进行保存。

8.将页面当中所有东西进行删除,然后选择左侧的模块选项,进行添加需要的模块。

9.接下来回到我们的PS当中将我们制作好的页面进行切片,将竖向的参考线进行删除,只留下导航栏跟海报的参考线。

10.然后将优惠券进行拉出参考线,接下来在下面进行按照自己的喜好进行将下面的各个模块内容部分拉出参考线进行区分。

查看更多
您需要学习后才可以评价, 立即学习
您需要学习后才可以评价, 立即学习
评论列表
仅显示有内容的评论
仅显示带图评论
排序方式:

大家好 ,我是虎课网的讲师小老胡子 ,那今天呢我们要和大家分享一下 ,我们的淘宝店铺的一个PC端的一个装修 ,那今天我们的装修的主要目的呢是了解一下 ,我们在装修之前,首页的制作的一个规范和 ,我们店铺的一些最基本的一些装修方式 ,那整个装修呢我们会分四节课和大家介绍 ,内容呢包括了我的PC端的装修 ,手机端的装修和一些常用的装修效果 ,这些东西那我们会分四节课 ,那今天这节课呢主要讲我们PC端的规范和 ,我们PC端的一个装修 ,当然我们说的是淘宝店铺 ,但天猫店铺呢和淘宝店铺的制作呢几乎是 ,差不多的 ,唯一的那个差别呢 ,就是它的一个制作尺寸上的一个差别 ,那接下来呢我们来对这个店铺进行我的一个制作 ,先简单地制作一个首页 ,在制作过程中呢 ,我会和大家介绍一下我的一个制作时候的 ,一个规范 ,开始制作,那我们文件 ,新建一个 ,在制作首页的过程中呢 ,我们的这个PC端呢一般来说它的尺寸呢 ,宽度在1920 ,也就是我们现在屏幕的最大的一个分辨率1920 ,为了保证我们所有电脑都能看到 ,所以说它会去使用1920这个像素 ,高度呢其实我们的首页高度呢不需要太高 ,其实它最理想的高度呢应该是在8000像素到12000像素 ,这是一个比较理想的高度 ,那这个高度呢它根据我们的这个 ,店铺的一个实际的产品 ,它可以增可以减 ,那这没有太大的关系 ,那只是一个比较理想的高度 ,和大家说一下 ,点击确定 ,那这个时候呢它就会出现一个 ,

我们的一个首页的一个尺寸的一张画布 ,好 ,出现了这张画布以后呢 ,我们要开始来进行我的一个首页的制作 ,那首页呢一般来说呢包含了那么几个部分 ,第一是我的页头 ,也就是我的这个店招这块部分 ,店招,店招呢它包含了店铺的招牌 ,和我的这个导航栏这块区域 ,那我们先来看这个店招 ,店招,店铺的招牌 ,店招,店招,店铺招牌 ,那所以说店招呢它其实是一个招牌性质一个东西 ,它的尺寸呢是1920宽度 ,宽度是1920,那就是这个宽 ,那高度是多少呢 ,店招它的高度 ,一般情况下,我说的是一般情况下 ,不是说一定的 ,一般情况下它在高度呢在120像素 ,120像素 ,那这个高度呢你可以用这个选区工具 ,里面选择的样式固定大小 ,你选择一个120像素这个高 ,你把它在我的画布上面拖出这么一个高度 ,120像素的这个框 ,然后呢用我们ps里面的这个参考线,参考线 ,快捷键呢是Ctrl+2 ,可以调出我这个标尺 ,然后呢把鼠标放到这个标尺上往下拉 ,拖到哪里呢,拖到我的这个高度120像素这个地方 ,那这个时候在120像素这个区域 ,它就出现一条蓝色的参考线 ,好 ,这个是我放店招的部分 ,店招的部分就这么点 ,高,宽度1920 ,好,店招完了以后呢在它下面呢其实还有一个尺寸 ,也还有一个东西就是我的这个导航条 ,那导航条呢高度呢是30像素 ,当然宽呢一样也是1920,那30像素 ,我可以把它设置成,然后呢一样把鼠标放到 ,这个第一条这个蓝色线的下方 ,

那然后呢再去拖 ,我们来看这里,这块地方它Y轴150像素有显示的 ,你自己看一看,好,这样子就是说我的店招加导航 ,区域刚好是150像素 ,好 ,那绘制出这个,规定出来这两个区域以后呢 ,我们还需要你再去规定两个区域 ,也就是我们现在规定出了横的区域 ,我们还得规定出竖的这个区域 ,竖的话呢我们的店招你可以去看看淘宝的一些网上 ,它的店招的 ,招牌一般来说是放在我的店铺的最中间的区域 ,那这个最中间的区域是多少呢 ,那淘宝店放在最中间的950像素 ,天猫店放在最中间的990像素 ,这个是规定的,规定的 ,除非,除非你会花钱买一些那个模板或什么 ,那这个我们不去管它 ,为什么 ,既然已经到了这个花钱去买模板的地步 ,或者你在公司里面老板给你花了这么多钱了 ,那一般情况下 ,你这方面也不可能不懂 ,我们现在是主要是针对一些初级美工或者 ,不太懂这个方面的一些人 ,反正你们就记住我们淘宝店铺的店招放在 ,最中间的950的范围 ,天猫店放在最中间的990的范围 ,那这两个范围怎么去控制呢 ,我们可以用 ,还是可以用我的矩形选框工具把它的这个宽度 ,设置成 ,我是淘宝店那950 ,然后呢我们新建一个图层 ,随便的把这个矩形呢在我画面当中呢画一下 ,Alt+Delete ,我的一个前景色填充 ,这时候你会出现一条黑色的,950宽的一个矩形 ,

然后呢把这个图层和下面这个图层呢 ,按住Ctrl键加选,加选 ,然后在移动工具的后方这里有个什么呢 ,居中水平居中对齐 ,这个时候你会发现,这个矩形放到这个画面的最中间了 ,好 ,然后呢参考线把它拉上 ,那其实如果你对这个数值熟的话 ,其实你会发现这里是485 ,左边这条是485 ,右边这条是1435 ,其实以后自己拉的话可以直接这样子拉 ,那你不想这样拉 ,那你可以这样子,记我的一个这个中间950 ,这样子去绘制都可以 ,你可以继续 ,左边485 ,右边1435这样子去记也可以 ,像我这样子新建个图层 ,把这个物体呢把它居中到画面当中都是可以的 ,没什么问题 ,好 ,这是我们的一个参考线的一个绘制 ,有了这个参考线以后呢 ,我们就可以去进行我的一个电招的一个设计 ,设计,那设计方面事情 ,我不去多说 ,我们简单地操作一下 ,比如说我的店招 ,那我的店铺的招牌在,不选固定大小了啊 ,比如说这里是我的店铺的招牌的区域 ,比如说随便用一个颜色好了 ,好,比如说这就是我的店铺招牌 ,对吧 ,这是我的招牌的区域 ,招牌招牌,店铺招牌 ,那肯定会包含什么呢 ,当然是店铺的招牌 ,对不对 ,那比如说你这个店铺的名称 ,对吧 ,你店铺或者你公司的logo ,或者说呢,这两样东西是我招牌里面肯定会有的 ,也就是店招的一个主体 ,当然除了我这个电招的这个主体以外呢 ,

因为店招有个特殊性 ,店招它这个页面呢 ,它其实是在我的所有的这个,在我的所有的 ,淘宝页面都是可以看到这个店铺招牌的 ,所以说呢这个页面呢它使用的功能 ,或者说有些人会充分的把这个电招利用起来 ,它会在这个店招这里呢可能还会写上一些什么呢 ,写上优惠券 ,满多少减多少放到这里 ,或者说呢我会把这个店招上面呢会放上几款 ,我们卖的最好的产品就放在我的店招上面 ,对吧 ,比如说关注收藏也会放到我的店招上面 ,当然这不是一定要有的 ,只是有些店铺为了更好的利用这个空间 ,它往上放 ,但是店招最主要的 ,就是最重要的还是我的店铺招牌和logo ,这个东西是肯定需要的 ,好,我这里呢就简单的写一下 ,还有就是什么呢 ,你看我的店铺招牌 ,或者说我里面要放什么优惠券什么东西 ,那这个东西它的范围呢肯定就是在我们刚才 ,规定的这个范围之内 ,那左边右边它最中间的950一个范围 ,或者天猫店最中间的990范围 ,高度呢在我的1200一个范围之内 ,那你可不可以把这个logo或什么东西 ,放出去呢 ,可以可以 ,但是对于一个初级美工而言 ,我不建议你放出去 ,为什么呢,能放出去的东西 ,只局限于那些没有链接的东西 ,比如说logo ,你不需要手去点一下 ,它跳到某个页面或者说二维码 ,对吧 ,我不需要跳到某个页面 ,它只是我的 ,不需要鼠标点击的 ,那这个东西呢你超过这个范围呢 ,其实是没有太大的关系的 ,

为了方便记忆 ,对于那些初学者而言 ,我建议大家就按照我的规定 ,别把我的这个东西呢放到我的这个范围之外 ,也就是950或者990这个范围之外 ,自己注意一下 ,好 ,有了这个logo ,这个店招以后呢下面呢是我的这个导航 ,那导航同样的我们再去进行我的制作 ,导航,1920乘以一个我们刚才说的30像素 ,导航呢你可以像我这样子也给它加一个底色 ,这样给它随便的 ,当然我这个也是随便,随便画的,加个底色 ,然后呢写上我的这个文字 ,在导航里面 ,它是我的店铺的一个什么 ,就是一个引导性的一个作用 ,导航呢我建议大家呢就是说 ,在写文字的时候呢 ,尽量,因为这个它高度只有一百 ,那个导航只有30像素 ,所以我在建议大家写文字的时候呢不要超过 ,20像素 ,这么大的一个,那20字号,20这么一个大小 ,这样子 ,如果再大的话 ,它的文字要顶到我的导航的两端了 ,不好看 ,导航当中呢有两样东西一般来说是会有的 ,第一呢是我的首页,首页,这个东西一般来说呢 ,会出现在我的导航的这个上方,导航的上方 ,除了我这首页以外呢 ,可能还会有什么东西呢 ,可能还会有我的 ,这个一般来说会有的,就是一个叫做我的这个 ,所有宝贝 ,

好 ,除了这个首页和所有宝贝以外呢 ,其它的东西呢往往就也没什么特别的 ,就是你店铺的分类 ,比如说我是卖服装的 ,那可能有外套内衣 ,什么裤子裙装什么这种 ,反正就是按照这种去分 ,你店铺有多少分类 ,你就多少去分,比如说外套 ,好,这些我就不去多分了 ,做完以后呢这些文字的这个呢你需要给它 ,对齐一下 ,把所有这个文字选中 ,然后呢比如说给它对齐一下,此对齐或者彼对齐 ,你还可以什么呢 ,给它什么,水平平均分布 ,让这几个文字之间呢它的一个距离变得相等 ,水平的一个平均分布 ,选中我所选的图层 ,然后再去点我的这个对齐方式 ,好,那这样子你看我的导航就做完了 ,导航做完了 ,然后再往下呢一般来说呢就开始我的这个什么呢 ,我的一个最重要的一个主体部位 ,也就是我们的Banner的一个大海报 ,这个海报呢相对而言是我们整个设计当中 ,最重要的一张海报 ,它是来吸引我的一个注意力的 ,这张海报呢你可以在制作的时候呢 ,一般情况下是宽度是1920的 ,海报的制作我具体规则不去跟你说了,宽度是1920的 ,然后高度呢一般来说呢这张海报的高度呢 ,会控制在一个屏幕左右 ,也就是我们现在最高的一个屏幕的话 ,一般来说也就是900像素到1100 ,1000多像素这样子一个规则 ,最高也就是说一般情况下,最高1000多像素 ,一个高度 ,不会再高了 ,好 ,那这里是我的一个制作海报的区域 ,

当然这个海报是怎么样子的 ,这个需要,把这个海报的话,换个颜色 ,不然看不清楚 ,具体怎么做海报 ,这不是我的一个事情的先 ,不是我这节课主要讲的了 ,那这里呢我从网上的随便的下载了一张这个图片下来 ,我们来看看 ,你看 ,当我把这个下载下来图片拖过来以后 ,你会发现这张东西它其实就是我的这个 ,这个我下载过来的 ,上面谁家的店铺包含一下 ,不管,包含一下 ,这是我随机下的 ,包括边上的这个截图 ,这个东西都还在,都还在 ,这张海报里面呢你来看 ,我们来看我,这张图片把它放置到多少的Ctrl+T ,自己变化看 ,我把它在百分之百的状态 ,你看它的宽度也就是1920和我所说的是一样的 ,然后张海报呢你看它的制作的高度在哪里 ,也是基本上是在我的一个屏幕之内 ,我再Ctrl+U 100% ,当然我这个是因为笔记本它的这个分辨率 ,实在太低了 ,那一般来说呢也是在我的一个屏幕之内 ,可以把我这个产品给看完了 ,我的店招导航下面就开始做我的这个海报 ,海报呢有些店铺呢它是轮播 ,就是好几张海报 ,你可以试着做几张尺寸一样的海报尺寸一样的海报 ,海报做完以后 ,下面是什么呢 ,我的海报完了以后 ,一般来说在我的下方就是我的一个什么叫做 ,我的这个,这家店铺它其实还少一样东西 ,就什么呢 ,就少一样,叫做什么,优惠券的一个东西 ,

优惠券的一个东西 ,把它放到下面了,放到下面了 ,一般来说我的海报结束以后 ,下方放了就是什么呢,我的优惠券 ,我的优惠券 ,或者说我店铺的一些优惠活动 ,优惠活动 ,然后呢优惠活动结束以后呢 ,我们放的是什么呢 ,我的店铺的一些我们的这个分类 ,我们叫做分类 ,那它有雪纺衫分类,外套 ,T恤连衣裙怎么怎么样分类 ,分类 ,当然这两块之间它的上下关系没有这么严格的区分 ,一定要说这个优惠券放上,这个分类放下也没有 ,一般我只是说一般,一般是优惠券放上面 ,我的分类放在优惠券下方更多一点 ,然后呢优惠券结束以后呢 ,再下面就是我,我的各个的,各个产品的分类 ,就是有新款 ,那下面放的全部是新款 ,那比如说再往下 ,比如说外套,那下面放的可能比如热卖款 ,那我下面放的可能都是热卖款 ,那它的排版方式那这里呢我们不去细说它 ,不是细说它,具体怎么排 ,更多的是设计上面的一些事情 ,你在做之前多去参考参考 ,还有就是我们在,我现在讲的只是一些规则上面的 ,好 ,规则的话呢没有什么太多的了 ,就这么点 ,就是一定要注意它的编辑好导航的宽度和高度 ,还有呢就是我的海报的高度一般来说不会超过 ,一屏 ,整个店 ,这个首页呢一般来说呢是1920一样宽 ,然后呢店招,这个首页 ,除了我的这个店招导航 ,这个文字必须在950或者990这个范围之内 ,

就淘宝店950天猫店990这个范围之内 ,那下方这些东西呢 ,你看它是不是超过了950或者990 ,这是下方呢是可以超过的 ,但是下方呢一般来说呢不会超过多少范围 ,就是1200这个范围 ,你自己注意一下 ,自己注意一下,那下方是不是超过了 ,对吧 ,那中间它,我们给你看看 ,我们要新建一个图层 ,我们建1200 ,固定大小,宽度1200 ,来看 ,它是不是在1200这个范围之内的 ,它这个是放在最中间的1200的一个范围之内的 ,我们这里虚线自己看一下,1200,注意一下 ,为什么要1200这个范围呢 ,因为这个还是根据电脑的分辨率来做的 ,就像我这个笔记本它的分辨率很低 ,它如果超过1200 ,我们到时候这个首页做起来就不好看 ,它是整个屏幕的 ,自己注意一下就可以了 ,那这里呢是我的这个首页制作的一个简单的 ,一个规则 ,没有讲,具体讲设计方面的事情 ,那规则完了以后呢 ,我们把这个,按照我规则所做的这个首页呢 ,要进行我的一个什么 ,进行我的一个装修,店铺的一个装修 ,好 ,那我们下面来看看这个店铺是如何进行装修的 ,那进行装修之前呢我们先进到我的这个淘宝店铺 ,那你这个店铺的话呢你如果没有的话 ,我需要你自己去进行我的一个 ,去进行我的一个注册 ,需要支付宝的一个实名认证 ,你去认证一下 ,注册店铺这块地方我们不去多说了 ,那当你把这个店铺注册完以后呢 ,

我们可以到我的这个淘宝店铺 ,开始我的这个店铺的一个装修 ,那这里我呢我是已经到我的店铺里面了 ,你可以登录淘宝网 ,然后呢把你的账号登录进去 ,然后呢你点击我的这个卖家中心 ,当然这个账号其实不是我的 ,问我朋友借来的 ,因为我自己的淘宝店铺的话呢 ,它因为信誉的话已经超过了一钻 ,它已经没有免费的这个旺铺政策了 ,我就不来用我的店铺 ,我问朋友借了一个这个账号 ,然后呢点击卖家中心进入我的店铺 ,然后呢你在它的这个卖家中心的这个首页里面呢 ,你可以看到我的这个店铺装修 ,在店铺管理当中有一个店铺装修 ,点击店铺装修 ,可以进到我的这个装修页面 ,那一钻以下它可以免费升级为智能板 ,那这个呢我不是升级了 ,然后呢点击PC端的店铺装修 ,那我们现在装修的是PC端 ,好 ,然后呢我们对什么进行装修 ,我们对它进行基础页面的当中的首页 ,对它进行装修 ,把鼠标放到首页这页面 ,点击这个装修页面 ,这个时候呢就进入到了我的这个首页的这个 ,装修这个页面 ,好,进入这个页面以后呢,好 ,我们要开始对我这个页面呢进行我的一个装修 ,当然在装修之前呢我们有几件事情需要你 ,

去进行我的一个制作 ,具体首先第一件事情就是什么呢 ,如果你的店铺,像我这样子就是装修之前 ,它这里呢已经有过一些其它的一些装修了 ,那我需要你做一件事情就是什么呢 ,备份,备份,写上比如说3月7号的一个备份 ,那这里呢方便你万一做错以后 ,我的一个重新的一个还原 ,那如果是你没有装修的,是一个新开店铺 ,没有装修的,那你这个备份呢 ,你可以不去备份 ,那也没太大的关系 ,好 ,当你把这个备份完以后 ,或者说你的页面跟我不一样的 ,页面跟我是长的不太一样的 ,那你呢也是跟我这样子 ,就是说我们要说的是什么 ,备份完以后 ,

登录后查看更多
初级平面设计师
共 98 节课
产品精修师
共 76 节课
创意字体设计师
共 22 节课
包装设计师入门到精通
共 75 节课
IP形象设计学习
共 89 节课
已是第一张图了
已是最后一张图了
记笔记

导出笔记

笔记导出历史

00:00

0/12
确定保存
笔记导出历史导出完成的笔记将保留1天,如有需求请及时下载
课程名称
导出时间
文件大小
状态
操作
AI视频总结
AI正在分析视频,请稍等…
AI总结遇到了一些问题 点击重新获取
点击重新获取
成为全站通VIP 查看完整AI总结
复制

职业路径建议意见

请选择你对职业路径课程的满意程度

请选择你对职业路径课程的满意程度

请填写关于职业路径的建议意见:

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了41,154
并提交了234份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证