如何设计淘宝详情页面 淘宝详情页图片大小设置


如何设计淘宝详情页面 淘宝详情页图片大小设置

文章插图
一,淘宝美工常用图片格式及各自优缺点(PSD,jpg,PNG,GIF)
二,淘宝美工常用图片尺寸(主图/直通车/详情页/首页装修/活动报名等图片尺寸)
一.淘宝美工常用图片格式及相应区别
我们平时工作中接触的图片格式主要有这4种——PSD/Jpg/PNG/GIF 。其中打交道最多的就是PSD和jpg格式的图片了,先和大家说说这2种图片的区别 。
1.什么是jpg图片?
平时我们在手机上看到的90%以上的图片都是jpg格式的,豆芽文章中的配图基本上也都是jpg格式的 。这种图片的后缀名一般是.jpg,好处是占内存小,打开速度快 。如下,箭头指向=后缀名+图片大小 。
2.什么是PSD图片?
那么什么是psd图片呢,一般来说经过PS编辑过的图片(分层的/可以修改的)就是PSD图片,后缀名通常为.psd 。比如上面这张jpg格式的图片我将它拖到PS中,再打上“学设计的小豆芽”这几个字,然后再保存成PSD格式的文件,如下
可以看到文件的后缀名变成了.psd,大小居然变成了4.73MB(=4843KB),未经PS编辑之前它的大小仅687KB,占内存是原来的7倍多 。PSD格式的图片优点是便于再次修改,因为它是分层的 。
比如上图中,我现在想把“学设计的小豆芽”这几个字改成“小豆芽”这三个字并让其居中显示,直接将其拖入PS中,打开图层面板中对应的文字图层直接修改即可,非常方便 。看下图我箭头指向的地方
改好之后,我再次把它存成jpg格式的图片给大家看看,可以看到文件夹中从最初的1张图片,变成了现在的三张,最右边是原图,中间的是PSD格式的,左边的是加了文字后的jpg格式的图片 。
现在如果我把中间的PSD文件和最右边的原图片给删了,然后想要去掉第一张图片中的小豆芽3个字,难度就要大些,因为文字和背景合并在一起了 。但如果之前的PSD图层还在的话,直接删掉小豆芽这三个字就OK了 。
jpg和PSD格式的图片是我们平时工作中几乎每天都要接触的图片类型,其次就是PNG和GIF了,接触的相对要少一些 。
3.什么是PNG图片?
PNG图片就是经过PS处理过的透明图片,可以随意换背景的图片 。后缀名为.png 。
也就是抠图后的图片(具体怎么抠图,后面的文章和视频中会讲到),比如豆芽这张头像,我如果只想保留人物,那么我就要把背景抠出来删除掉,然后保存成PNG格式的图片,我就可以随意地把背景换成各种不同的颜色或者不同的场景了,甚至可以随心所欲地和明星合照!
4.什么是GIF图片?
也就是会动的图片,如下图 。
像QQ或者微信的表情基本上都是GIF图片了 。具体如何制作GIF图片后面的文章和视频中也会讲到 。
总结一下,jpg/PSD/PNG/GIF图片各自有自己的优缺点,
jpg图片——占内存小,用途广,修改麻烦
PSD图片——占内存最大,修改方便
PNG图片——占内存略大,好处是可以随意更换背景
GIF图片——占内存略大,好处是图像更生动
将这4种格式的图片放在一个文件夹中展示如下,注意它们的后缀名 。
5.那么如何将图片保存成自己想要的图片格式呢?保存图片的时候选择相应的后缀名就好了 。方法有2种,PS中分别执行如下命令:
A.文件-存储为
这种方法保存的图片占内存相对要大些
B.文件-存储为Web所用格式
工作中常用此种方法保存图片,可以在保存图片清晰度的前提下尽可能地将图片压缩得最小,更省电脑空间的同时,上传到店铺,消费者打开图片的速度相对也要快些 。豆芽保存图片常用这种方法 。


以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: