在网页设计中要如何进行切图？

网页设计

打开PhotoShop

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

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

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

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

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

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

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

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

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

【关键词标签】网页设计    (PC+手机)响应式网站建设

• 如何较好的提升网页设计水平？
• Banner设计
• 橱柜企业如何使用微信进行网络营销
• 如何建设中英文双语网站，中英文双语网站制..
• 外贸网站建设如何查看域名和服务器
• 国外风格网站设计,欧美网站布局是怎样的?
• 外贸网站优化从提升访问速度开始
• 现在宽屏网站尺寸多少,页面可以100%铺..
• 1G空间可以放多少图片,一般网站需要多大..
• 阿里巴巴进货技巧看你功夫,找到性价比高的..
• 门户网站分为几个类型？有什么区别
• 什么样的网站设计比较适合百度搜索引擎
• 有什么办法加速百度快照更新
• 什么是WAP网站？WAP上网,WAP网站..
• 什么是网站前台后台?网站前台后台的诠释