绿维网络绿维网络
 
建站资讯

建站资讯最新消息,企业数字化营销知识分享

网页设计中如何做好页面切片

人气:  作者:  发表时间:2021-01-23 09:50:24
在网页设计后期,设计师们通常需要配合前端工程师来完成“切片”的工作。而在一般情况下,纯色的背景、描边、按钮以及一些系统自带的文字是可以通过代码来实现的。如果遇到代码无法实现的效果,如icon、Logo等制作时,就需要用到“切片工具”。

而在“切片工具”的使用过程中,需要将这些图片从视觉效果中单独分离,并将它们保存成网页格式的图片,再由前端工程师通过代码将其嵌入Html页面中,以实现要求的视觉效果。

通常情况下,使用Photoshop工具栏中的“切片工具”进行图片的切片,默认快捷键为C。由于“切片工具”的快捷键C对应工具箱中的多种工具,所以在实际操作过程中可以通过快捷键Shift+C切换到所需要的工具。

一、切片工具的使用方法
首先,把需要切片的设计图在Photoshop中打开。

然后,通过“放大工具”将图片调整到合适的尺寸大小,同时将需要切图的部分重点放大。

需要设计师切片的主要是背景图片、Logo及icon等。而设计稿中的文字可通过代码实现,是不需要出现在切片中的。

这里只需要将红框内的“蓝色渐变背景”切片并保存成透明背景的.png格式的图片。因此,在实际操作过程中需要把红框中的“人物头像”和“文字”隐藏起来,同时将背景色和其他可能会干扰切片的元素一并隐藏起来。

随后就可以开始对图片进行切片了,操作流程如下。

在Photoshop的“工具栏”中选择“切片工具”,并在设计图上拖曳出需要切片的部分,切片区域的大小可通过4个顶点来进行调整。如果当前需要切片的区域是透明背景,可将切片区域适当拉大,在保存图片时系统将自动保存有效像素的区域。

在“菜单栏”中单击“编辑”菜单中的“拷贝”选项,对切片的区域进行复制。

新建一个窗口,在“菜单栏”中单击“文件”菜单中的“新建”选项,界面中会弹出一个“新建”窗口,此时系统会自动将宽度、高度设置成该切片有效像素的尺寸,一般不需要再通过手动来调整尺寸大小。同时,切片的区域需要保存成透明底色的图片,所以在“背景内容”选项中,选择“透明”样式。

在Photoshop的界面中,可以得到一个全新的图层。

将之前复制过的切片粘贴到当前“窗口”中,在“菜单栏”中选择“编辑”菜单中的“粘贴”选项。

经过上一步操作之后,可以看到切片出现在当前窗口中的效果。

到了这一步也是最后一步,把切片文件导出。

在“菜单栏”中选择“文件”选项,然后选择下拉菜单中的“存储为Web所用格式”选项。

完成上一步操作之后,系统会弹出一个调整图片保存选项的对话框,此时将图片格式改为PNG-24。

单击“窗口”右下方的“存储”按钮,并选择图片导出的文件夹位置,将图片重新命名后,单击“保存”,完成存储。

提示:在网页设计过程中,所使用到的切片一般都需要保存成Web格式,目的是最大程度优化图片质量,并压缩文件大小,以保证网页在打开过程中的流畅性。

二、图片命名规范及保存格式
图片的规范化命名对设计师来说非常重要。在一些大型的网站或较为复杂的网页设计中,会用到许多的切片图片,此时如果未按规范将这些切片图片命名的话,后期查找起来会非常麻烦。规范的命名有助于梳理设计逻辑,在工作中提高工作效果、降低维护成本,也有助于更好地与前端维护人员衔接工作。

1、图片命名规范
根据网页的一般布局,切片文件的一般命名格式为“模板_类别_功能_状态.png/jpg/gif”,例如,form_button_login_disabled.png,意为“表单_按钮_注册_不可用.png”。

2、图片保存格式
选择合适的图片输出格式不但有利于展现图像的最佳效果,也能压缩图像数据量,从而提高网页的加载速度,优化用户的使用体验。图片的常见格式有JPEG、PNG、TIFF、PSD等,而网页中所使用的图片格式一般为前两种,即JPEG和PNG。

JPEG格式是一种有损压缩的模式。顾名思义,在图片的压缩过程中,jpg格式图片会降低图像的质量,并且在编辑或重新保存的过程中,图片的损失会不断累积。JPEG格式适合摄影类或色彩层次较为丰富的图像压缩,并且可以通过调整参数来控制图片的品质大小。

PNG格式是一种无损压缩的模式。在压缩保存时能够尽量还原图像品质,在存储为Web所用格式时,有PNG-8和PNG-24两种格式可供选择。

PNG-8最多可展示256种颜色,因此适合保存以纯色为主的图片,同时图片数据量会压缩得比较小,但是PNG-8不太适合保存透明背景的切片,否则会产生白色毛边,影响显示效果。

PNG-24的展示颜色多达1600万种左右,因此适合展示色彩丰富的图片,且图像的品质会更高,但缺点是图像的数据量会相应增大。

接下来就讲讲如何选择合适的图片参数及图片格式,这里以两类网页设计常见的图片风格来进行比较,看看不同格式下图片的展示效果。

3、实物图像在不同格式下的展示效果
首先将同一张实物图像分别存储为Web使用的PNG-8、PNG-24、JPEG:质量和40JPEG:质量100这4种格式,然后看一下保存后的图片质量与数据量有什么差异。

通过对比可以看出,PNG-8与PNG-24格式经过压缩后的图片数据量仍然比较大,同时在PNG-8的格式下,图片质量损失非常严重,这显然是不符合使用要求的。相比之下,JPEG-质量40格式下的显示效果要明显优化PNG-8的格式,而且经过压缩后的图片数据量只有25K,这对网页加载来说,是非常合适的。

综上所述,针对此类色彩较为丰富的图片,建议保存为JPEG格式,且图片的质量可根据具体需要在0~100区间内做调整。

4、单色图像在不同格式下的展示效果
首先选取一张由纯色构成的图片,并同样将这张图分别存储为Web使用的PNG8、PNG-24、JPEG-质量40的JPEG-质量100这4种格式。

通过对比可以看出,这4种格式的图片经过压缩之后,图像的数据量都比较小。其中虽然PNG-8与JPEG-质量40的图片数据量相同,但是JPEG格式的图片的画质损失非常严重,图片中部分边缘部分已经出现明显的锯齿。

综上所述,在保存纯色图片时,建议使用PNG-8格式,这样不但能够极大地压缩图像数据量,也能最大程度地保证图像的清晰度,还可以较好地还原较长像的视觉效果。

提示:在保存JPEG图像时,应注意平衡图片质量与图像数据量的关系。图片的质量值越高,保存后的图片数据量越大,在保存之前可以比较不同质量值下图片的显示效果,同时留心对比图片数据量的区别。一般情况下,如果按质量值为100来保存图片,会增加图片无谓的数据量,因此在日常网页的使用中,60~80的质量值足够使用。

小结:在一些较大的设计团队中,切图工作一般是由前端工程师完成的。但在一些小团队中,切图工作则需要由网页设计师来完成。因此,这里建议网页设计师多了解一些切图规范知识,以便很好地配合团队中的其他成员开展工作。并且在切图过程中,需重点注意的是根据不同图片的特征采用不同的图片格式,在保证图片品质的情况下尽量压缩图片大小,保证用户使用时可以流畅加载。
网页设计中如何做好页面切片:http://www.luweit.com/news/jianzhan/192.html
标签: 网页设计
热门标签
相关新闻
免费获取一份方案或报价
* 请认真填写需求信息,我们会在24小时内与您取得联系。

关于我们

东莞市绿维信息技术有限公司致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发,等服务范围,并且涵盖基础的域名服务、主机服务;企业邮箱、网络营销等应用服务;
more>
立即咨询
快速获得解决方案
咨询电话
135 8088 5012
公司地址
广东省东莞市南城建设大厦7F
公司邮箱
Copyright ©2016-2021 东莞市绿维信息技术有限公司 粤ICP备18104664号-2