网页设计培训教程
深圳网页设计：如何利用PhotoShop切图
[来源] 未知 [编辑] admin [时间]
& & 一般做的都知道切图这个概念，按照字面意思来讲，切图就是把一张图利用到切片工具，把自己所需的切成一张张小图。切图的目的就是把设计图转化成网页代码，不用理解代码的含义也可以操作。网页设计师一般也都懂得切图的技巧。本文主要目的就是普及一下切图的知识，以备有需要的朋友参考。
& & &先说下软件，本文用的是PhotoShop CS5 这个版本，你要用其他版本也行，反正对切图这个功能影响不大。
& & 如上图红框所示，我们要用到的切图工具有两个，一个是切片工具，另一个是切片选择工具。左边有个小按钮，你按住它这三个选项就会显示出来。
& & 在切图之前有一点需要说明的是，如果你需要辅助切图，你可以先添加参考线。在PS上方的菜单栏，你可以在视图里找到新建参考线选项。添加两条参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置。
& & 好了现在我们开始切图，我用切图工具先裁一个框出来，我们可以看到图片上已经有01的框，但是右边02显示为灰色。
& & &我继续用切图工具裁第二个框，记住01和02的框一定要贴合，否则会出现一个03的框。如果你这次切图位置没切对，可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的，你可以把鼠标放在边框上试着移动下，看下效果。你只能移动02，不能移动01。
& & 当我发现切图的位置出现错误，开始调整，刚才我把02位置往右挪好，它从02变成了03。
& & 然后我用切图选择工具选择01，这样我就能把01的位置调整正确了。
& & 切好图之后就到最重要的步骤了，如上图所示，选择文件下面的存储为WEB和设备所用格式，最好能记住快捷键。
& & 图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求，试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他切片又要重新设置，所以存的时候最好检查一下。
& & 前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像，默认是图像的，这样我们就能得到网页代码了。
& & 存好后得到一个图片文件夹和一个网页，你看到的网页图标可能跟我这个不一样，这个没有关系，因为我们的浏览器不一样。
& & 用DreamWeaver软件打开这个网页看到如上界面。我们需要的就是大红框中《table & 《/table》这段代码，待会拷贝到淘宝页面里去的。拷贝之前要先把图片地址换一下，先把刚才那个images文件夹里的图片上传到淘宝图片空间里去，再复制图片的网络地址替换上图小红框里的那个地址。替换的原因是，PS存的图片地址是你电脑上的，在网络上无法使用，只有你把图片上传到网上别人才会看的到。
& & 以上就是达内数字艺术学院部老师根据自己实际操作经验，总结出来的，网页设计中切图的几个小技巧。可能本文介绍的比较简单，切图其实也是一个细心的活，在实际操作过程中还需要注意许多细节的地方。当前位置: &>&&>& >
文章分类：
怎样在Photoshop中进行规范的切图工作
　　Hi 大家好～
第一次分享个人经验。这是工作这些年自己的切图方法。无论是给PC客户端还是android，iPhone切图，我都用这个方案。主要是方便多人协作以及中间的管理/维护。
&　　Hi 大家好～
第一次分享个人经验。这是工作这些年自己的切图方法。无论是给PC客户端还是android，iPhone切图，我都用这个方案。主要是方便多人协作以及中间的管理/维护。
(责任编辑：丨bruce0721丨)
真的，我猜你也会喜欢的：
大家的评论：
　　本教程光影效果制作的非常不错。利用设置好的画笔制作简单的光点，然
　　不少PS用户都反应，在处理较大尺寸的图片、使用HDR、图像合成或者3D和
　　hotoshop
后制技巧在数字时代，已变成不可或缺的一环，小则修尺寸，大则
　　每次用相机手机照出来的照片都会灰蒙蒙的效果不好，想要让照片效果美
　　如何使用PS进行切片,如何切好图片的大小　　使用方法：使用&切
　　Photoshop 是视觉设计师最强有力的武器之一，其实 Photoshop 也为前端
　　盗图之事屡见不鲜，为了与大家分享还要把这种事情的损失降到最小，缩小
　　盗图之事屡见不鲜，为了与大家分享还要把这种事情的损失降到最小，缩小
　　之前，周迅在慈善晚会上宣布结婚，主页君看完视频之后非常激动。这对新
　　对于网页设计师来说，使用Photoshop的目的大多是进行网页排版，当然有时怎么用PS网页切图_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者贡献于
评价文档：
8页免费8页免费12页免费8页免费8页免费32页免费7页免费47页1下载券29页1下载券10页免费
喜欢此文档的还喜欢4页免费24页免费34页1下载券11页免费60页1下载券
怎么用PS网页切图|
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：59.54KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢如何用PS切图
如何用PS切图
如何用PS切图，我都划分好了，如何保存为一块一块的
点击&& 文件—存储为Web所用格式。
选择文件类型为“仅图象”
其他回答 (1)
按完了把一块一块的分出来
相关知识等待您来回答
多媒体领域专家ps切片工具怎么使用_百度知道
ps切片工具怎么使用
ps切片工具怎么使用
方便网页里面的排版。
PS中的切片快捷键是K当然不同版本的PS快捷键不一样工具栏里也有然后就像画图那样选择要切的部分然后再存储为WEB所用格式 即可
是这样导出的吧，你应该切好了以后，按住ctrl+alt+shift+s存储为WEB格式的，在对话框中按ctrl键选中要导出的切片，右边栏中有JPG还有GIF等格式的，下面选仅选图像，即可，如果你没有设置的话，电脑有可能会...
其他类似问题
按默认排序
其他3条回答
打开页面按k键鼠标就会变成刀片，然后将你想要切的图切好，然后单击左上角的文件选择存蓄为WEB所用格式就可以了
ps切片工具，ps中好像没有这个名字的工具呀！
你好，有个百度经验也可以参考一下，
切片工具的相关知识
您可能关注的推广回答者：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}