photoshop切图教程 PhotoShop教程 切图那点事儿

切图的目的就是把设计图转化成网页代码,不用理解代码的含义也可以操作,所以独立一篇来讲。

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

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

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

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

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

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

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

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

然后我用切图选择工具选择01,这样我就能把01的位置调整正确了。

切好图之后就到最重要的步骤了,如上图所示,选择文件下面的存储为WEB和设备所用格式,最好能记住快捷键。

图片格式为JPEG,它就是JPG,一样的。关键是品质的设定,我们都知道如果一张图片越大它在网上打开的速度就越慢,当我们把图片的品质设的越小,它的大小就越小,但是如果品质太差,图片会变模糊,所以一般情况下如果是网上使用的图片,品质可以设置60,既保证图片较小也不会模糊。这个数值由你自己设置,是大是小,具体看你的要求,试试就知道了。这里有个问题是你只是对其中一个切片设置品质,其他切片又要重新设置,所以存的时候最好检查一下。

前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像,默认是图像的,这样我们就能得到网页代码了。

存好后得到一个图片文件夹和一个网页,你看到的网页图标可能跟我这个不一样,这个没有关系,因为我们的浏览器不一样。

用DreamWeaver软件打开这个网页看到如上界面,如果不懂DreamWeaver的设置,请参考我前篇 做淘宝的也该懂点代码 那里有讲到一点DreamWeaver的使用技巧。我们需要的就是大红框中《table … 《/table》这段代码,待会拷贝到淘宝页面里去的。拷贝之前要先把图片地址换一下,先把刚才那个images文件夹里的图片上传到淘宝图片空间里去,再复制图片的网络地址替换上图小红框里的那个地址。替换的原因是,PS存的图片地址是你电脑上的,在网络上无法使用,只有你把图片上传到网上别人才会看的到。

至此,大功告成。希望这个教程会对生手有所帮助。

photoshop切图教程 PhotoShop教程 切图那点事儿

  

爱华网本文地址 » http://www.413yy.cn/a/8105100103/336593.html

更多阅读

说说中国移动GPRS无线上网流量那点事儿 gprs流量是什么

昨天就想抽出时间写点东西,说说中国移动GPRS无线上网流量那点事儿,大学上学,毕业之后工作,一直到现在都用着中国移动的电话号,主要就是看重了信号比较好,服务很不错这两个特点,用的是感动地带的套餐。大家都知道,感动地带每个月都会赠送给用

转载 对面楼上那点事儿(高清图集) 对面楼上

原文地址:对面楼上那点事儿(高清图集)作者:实时热点每个人最私密的空间,在家里你可以做自己想做的任何事,然而近日一则帖子却让网友心里绷紧了弦。一位网名为“对面楼上那点事儿”的北京男网友在微博中陆续晒出自己拍

早年东北农村那点事儿 东北农村电视剧

早年东北农村那点事儿雨泽随时博主按语:这里转载一组早年东北农村的生活图片。图片中的某些主人公可能已经作古,这里无意冒犯他们的在天之灵。他们的形象,是一个时代的写照。这个时代,距离我们并不久远。很多有把年纪的人也并不陌生。

女生宿舍那点事儿 女生宿舍里的龌龊事

十号从丽江回来马上又投入了康师傅的短剧《女生宿舍那点事儿》,主要就是501C这间宿舍这四个女生的八卦,我在里面饰演的是角色叫范范,她的称号叫乐活美女,是一个很可爱那样的女生角色也会影响自己的情绪,像这样一个天天那么快乐,蹦

声明:《photoshop切图教程 PhotoShop教程 切图那点事儿》为网友绅士风度分享!如侵犯到您的合法权益请联系我们删除