>

PS教程:如何正确使用Photoshop切片工具

- 编辑:betway88 -

PS教程:如何正确使用Photoshop切片工具

学习PS切图教程,PS网页制作基础教程:学习切图那点儿事。切图的目的就是把设计图转化成网页代码,不用理解代码的含义也可以操作,所以独立一篇来讲。

1正确使用Photoshop切片工具(一)

早年间我学切图的时候,网上就没看到过什么教程的,只能靠自己摸索学习,挺简单的东西还是绕了点弯子。这次写出来应该会帮助其他人学会切图的。

  【PConline教程】通过Photoshop图片分割可以将网页中的大图一次性加载,图片分割又是怎么做到的呢?微博中的九宫格是不是很好玩,那一张图又是用了什么工具把它分成九等份的呢?它就是我们这个PS教程中要介绍的切片工具。下面就让我们一起来学习吧!

先说下软件,我用的是PhotoShop CS5 这个版本,你要用其他版本也行,反正对切图这个功能影响不大。

图片 1

图片 2

如何正确使用Photoshop切片工具

如上图红框所示,我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具。左边有个小按钮,你按住它这三个选项就会显示出来。

  在网页中处理图片时,有时会想要加载一个大的图像,比如页面上的主图,或者是背景。如果文件很大,它加载的时候需要的时间就会长,尤其是用户网速比较慢的时候。你可以通过压缩来减小文件大小,但是这会使图像质量受到影响,压缩文件也要适可而止。因此你需要注意以下几个问题:一是实际文件的大小;二是分辨率;三是压缩。

图片 3

  解决这个问题的方法就是把图片分割,它将允许你在加载图片的时候可以一片一片地加载,直到整个图像出现在你的屏幕上。

上图是我等下用做示范的图片。

  1 它的使用原理

图片 4

  首先概述下它的工作原理,当你有一个需要花很长时间来加载的大图像时,你可以使用Photoshop中的切片工具把图像切成几个小图。这些图像将被作为一个单独的文件保存,还可以进行优化通过保存为中Web所用格式。

在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线。在PS上方的菜单栏,你可以在视图里找到新建参考线选项。如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置。

  此外,Photoshop生成HTML和CSS以便用来显示切片图像。在网页中使用时,图像通过使用前面提到的HTML或CSS在浏览器中重新组合以便达到一个平滑流畅的效果。下面是一个关于图像切片的例子。

图片 5

图片 6

好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色。

图01

图片 7

  2 切片的基础知识

我继续用切图工具裁第二个框,记住01和02的框一定要贴合,否则会出现一个03的框。如果你这次切图位置没切对,可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的,你可以把鼠标放在边框上试着移动下,看下效果。你只能移动02,不能移动01。

  为了简单起见,我们只在一个图上使用切片工具。在这个例子中,我使用的图片大小为960 x722px。在我们开始之前你需要了解一些知识:

图片 8

  a.在创建切片时,你可以使用切片工具或构建使用层。

当我发现切图的位置出现错误,开始调整,刚才我把02位置往右挪好,它从02变成了03。

  b.切片可以选择使用选择工具来选中。

图片 9

  c.你可以移动它,设置它的大小,还可以让切片与其他切片对齐。而且你还可以给切片指定一个名称,类型和URL。

  d.每个切片都可以通过保存时的网页对话框进行优化设置。

  按下键盘上的C键,选中裁剪工具,右键选择切片工具。

图片 10

图02

  当您创建切片时,你可以进行如下三个样式设置:正常,固定长宽比和固定大小。

  a.正常:随意切片,切片的大小和位置取决于你在图像中所画的框开始和结束的位置

  b.固定长宽比:给高度和宽度设置数字后,你得到的切片框就会是这个长宽比

  c.固定大小:固定设置长和宽的大小

  当分割图像时你会碰到一些选项。如果精确度不那么重要时,你可以手工切片图像,必要的时候,可以使用切片选择工具对已完成的切片图像进行调整。如果精确度很重要,可以使用参考线在图像上标出重要的位置。

图片 11

图03

  在顶部的切片菜单栏,点击C或切片工具激活它片上面菜单栏图片,画好参考线后选择基于参考线的切片的按钮。

图片 12图04

  它就会自动为您绘制切片。你还可以使用切片选择工具重新定位切片。

图片 13

图05

2正确使用Photoshop切片工具(二)

  3 编辑切片信息

  创建切片之后,您可以编辑切片信息通过以下两种方式中的任一种。一种要做的就是点击切片选择工具,单击你想编辑的切片,然后点击菜单栏中>为当前切片设置选项的按钮。

本文由摄影专区发布,转载请注明来源:PS教程:如何正确使用Photoshop切片工具