PS/photoshop教你快速学习网页切片工具的使用。

网页设计中,常常会用到PS/photoshop中的切片工具。目的是让浏览者能够快速的浏览网页,优化网页的打开速度和增强浏览者的用户体验。

操作方法

  • 01

    在PS/photoshop软件中打开你需要切片的图片。(这里我们举例打开一张风景照)

  • 02

    因为切片要十分的仔细,不能有一丝一点的空隙。所以我们要用“标尺”工具来辅助我们。在该图层上,打开上方的导航栏中的“视图”,选择“标尺”工具。(当然我们也可以直接同时按下快捷键CTRL+R键)

  • 03

    现在我们就可以看到操作区中,出现两条X轴与Y轴的辅助线了。(当然我们在其他操作的时候也可以选择标尺工具,来帮助我们更好地操作。)

  • 04

    按住鼠标“左键”,从标尺哪里向图像拖动,拉出辅助线。(因为切片的要求比较高,所以我们一定要仔细的建立辅助线。)

  • 05

    现在我们可以看到,该图像上出现的6条辅助线,把该图像平均的分成的4块区域。这4块区域就是我们等会儿要切片的图形。(当然,你也可以拉出更多的辅助线)

  • 06

    接下来,我们选择左侧的“工具栏”,选择“切片工具”。

  • 07

    如果你是要均匀的切片出这4处图像,我们就点击上方导航栏中的“基于参考线的切片”即可。(如果你所切片的图形比较多,或者样式不一,那就拖动切片工具,在图形上选择手动切片。)切片工具只能切片与矩形。切片完成后,会在每个图像的左上角出现小小的数字。代表你切片的张数。

  • 08

    切片成功后,我们点击上方的导航栏中“文件”,选择“储存为Wed所用格式”,因为此格式文件占比小,图像却不会失真。

  • 09

    选择文件的颜色,透明度。调节数值。

  • 10

    选择文件储存的格式,和名称。

  • 11

    储存成功后,在你所选择的储存文件夹里,找到该文件。就会发现切片完成图片呈现一张一张了。做网页的时候,就可以一张一张的上传上去了。

(0)

相关推荐

  • PS/photoshop教你快速简单给东西加倒影,投影。

    给东西加上倒影很容易,如何给东西加上又美观又大气的倒影了,今天我就教给大家快速简单的给实物加上倒影. 操作方法 01 这是对比图是不是很大方简单了.快来和我一起学习吧! 02 在PS/photosho ...

  • PS/photoshop教你用标尺工具快速把图片摆正。

    常常在PS/photoshop作图时,发现图像怎么都摆不正,角度调来调去都调不好.今天我就教给大家一种快速把图像摆正的方法. 操作方法 01 首先在PS/photoshop软件中打开你要拉正的图片或者 ...

  • PS/photoshop教你简单快速给人物换脸。

    常常看到网上有爱豆的照片,幻想把自己P到偶像的脸上,或者把与爱豆合照的人的脸P成自己.今天,我就教给大家一种简单,快速的方法.把一个人的脸P到另一个人的脸上. 操作方法 01 在PS/photosho ...

  • PS/photoshop教你制作高大上色块渐变背景。

    常常作图时没有好看的背景,或者看见别人的背景十分的高大上,是不是十分的心动.今天,我就教给大家一种快速制作一种高大上的色块渐变背景.快快和我一起来学习吧! 操作方法 01 首先在PS/photosho ...

  • PS/photoshop教你把风景照片转化为日本动漫风。

    日本动漫里不仅剧情吸引眼球,穿插在动漫里的场景也是让人跌跌称赞.今天我就教给大家一种方法,把风景照片转化为日本动漫风. 操作方法 01 这是转化前与转化后的效果对比图.是不是很有感觉,快来和我一起学习 ...

  • 资源嗅探器教你快速下载网页图片视频等文件

    想下载网页的视频.图片,可是网站不让复制下载,怎么办?资源探嗅器是做什么用的呢?资源探嗅器就是探嗅网页中的图片.视频.音频等,更快更方便的帮助网友们下载网站资源: 操作方法 01 打开傲游浏览器,在地 ...

  • 如何快速学习PS?

    PS是我们进行照片处理必不可少的一个工具.当然,图片处理工具很多,够用就好.如果是专业用途,建议使用PS,因为其强大的功能在目前是无可替代的.笔者目前也在学习PS,就如何快速学习PS分享一点的.希望对 ...

  • 教你使用PS切片工具

    在使用制作网页图片时常常要用到切片工具.切片就是对图像按照需要进行切割,编辑,并保存.下面教你在PS中如何切片工具进行切割图片操作. PS切片工具使用 01 进入PS界面新建一张画布. 02 在左侧选 ...

  • PS的切片工具使用方法步骤讲解photoshop

    在做好一张图片时,有时要成一张图分成多张图,那这时就要用到切片工具了,(最常见的切片应用场所有淘宝详情页.淘宝店铺首页装修.网站等等)本文以PS CC2018版本为例,其他版本操作一样. 操作方法 0 ...