简单的photoshop切片切图教程

Tags: 网站建设  网站制作  做网站  Author:凯旋网络   Date:2013/4/21

  我们在制作网页时常常要将设计稿制作成切片以备用,然后将切图用HTML语言组织起来,这个过程是就俗称的“切图”,Photoshop中如何使用切片工具进行切图呢?下面我们就结合实例简单介绍一下:

 

  1、要进行切割的原图如下:

 

2、打开Photoshop,点击切片工具,选择划分切片选项:

 

3、我们要将这张图切成12块,所以我们使用切片工具水平划分为4,垂直划分为3,确定后成功将原图分为12等块:

 

4、划分好后我们点击工具栏下部的按键进入ImagReady中,对图片进行编辑,如图所示:

 

5、编辑好后点文件-将优化结果储存为,在出现的对话下拉框中选择HTML格式,保存在电脑上:

 

6、找到我们保存的文件,里面会有一个HTML文件、一个images文件夹,images文件夹里的就是我们已经切好的12块小图,如下图所示:

 

7、打开这些小图,我们会发现图片颜色是默认的索引颜色,此时可以点击图像-模式-RGB颜色就可以对小图片进行处理了:

 

 8、简单的切图过程到此结束,接下来我们就可以用这些小图来制作网页了:

 

 

  看完这个Photoshop切片切图教程,有些初学者可能会有个问题:为什么一定要将图切成小块呢?直接大图放上去不就行了吗?其实,原因就是切成小图更有利于加快网页的浏览速度。