深圳网站建设

ps网页切片教程:要做网页怎么切片才是规范高效的

来源:深圳网站建设   更新时间:2018-11-22

  先说一下为什么要对设计图进行切片处理,我们的设计图是由很多的文字、图片以及模块组成,如何将整张图片保存放到网页中使用,一来图片太大,网页的打开速度就会很慢,用户等待时间就会很长,体验度就会很差;二来,如果使用纯图片不利于百度搜索引擎的抓取,对网站的排名优化有影响。

  所以我们要使用切片工具将设计图图文分离,纯色背景以及文字类的我们可以使用代码书写,主要将图片分割成一个个的小模块。图片的存储格式主要有三种:jpg、png和gif。

  jpg格式:不支持背景透明,文件比较小,网页加载速度快,对多色彩表现较好,多适用于产品图片、广告banner图片等色彩丰富的图片。

  png格式:支持背景透明,文件比较大,多适用于logo等小图标、特殊文字、颜色相近的图片。

  gif格式:gif格式图片使用较少,主要是用于制作动图使用,由于文件本身太大,图片保存后不清晰,在网页端应用较小。

  要做网页怎么切片?我们参考下边的这张网站首页图片来介绍下如何切片。

要做网页怎么切片

  这是一个网站首页的设计图,我们可以大体观察一下,整个页面可以分为头部、banner、中间图标以及产品图片。

  按照我们之前所说的,多色彩图片保存jpg格式,单色彩图标保存为png格式;

  1)jpg图片的切片

  第一步:左侧工具栏中选择切片工具(快捷键C);

网页切片

  第二步:我们将banner图片以及成功案例图片使用切片工具整体切片划分好,每张图片我们都单独进行切片;

网页怎么切片

  第三步:右击每个切片进行单独的命名,命名我们一般使用纯英文来表示,最好是能表现该图片的模块特征;(比如,第一个是banner图片我们可以命名banner01,下边的案例图我们可以命名case01、case02、case03)

网页切片教程

  第四步:选择文件-导出-存储为web所用格式(快捷键:Alt+Shift+Ctrl+S),按住Shift选中我们切好的图片,然后右侧选择jpg格式,品质我们选择60即可(60既可以保证图片的清晰度,又可以缩减图片的大小),然后选择对应存储目录进行存储。

网页切片

  最后一步:选择我们要存储的目录,切片我们选择选中的切片,系统会自动创建images文件夹并将图片统一放到里边。这样我们的图片就存储的本地了。

网页切片教程

  对于png格式的图片应该如何存储呢?

  首先第一步:我们先将这几个图片使用切片工具切割出来,名字分别命名为about01-04如下图所示:

网页怎么切片

  第二步:这一步比较关键,我们要降这几个图层放到一个文件组中,然后使用alt键点击隐藏其它图层,这样我们图标的背景层就变成透明的了。

网页切片
网页切片的作用

  第三步:选择文件-导出-存储为web所用格式(快捷键:Alt+Shift+Ctrl+S),按住Shift选中我们切好的图片,然后右侧选择jpg格式,品质我们选择60即可(60既可以保证图片的清晰度,又可以缩减图片的大小),然后按照存储jpg的过程选择对应存储目录进行存储即可。

ps切片制作网页

  好了,关于切片工具今天就说到这里,大家可以自己多练习了,熟悉下操作流程。

要做网页怎么切片 ps网页切片教程

上一篇:ajax面试题不过关?带你认识ajax技术!

下一篇:网站建设如何设计一个好看的网站首页?

返回列表

最新动态

网站建设品牌设计整合营销seo优化
建站知识品牌知识网络营销seo技术