网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群
当前位置:PS爱好者教程网主页 > PS基础教程 > 教程

PS网页制作基础教程:学习切图那点儿事

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

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

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

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

PS网页制作基础教程:学习切图那点儿事

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程