photoshop网页切图怎么用?ps网页切图图文教程
发布时间：2015-11-12 13:04:49 作者：佚名 
我要评论
我要评论photoshop网页切图怎么用?有一个网页，想把各个部分都单独切出来，该怎么办呢？这时候可以用ps对网页进行切图，下面分享ps网页切图的图文教程，需要的朋友可以参考下
网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里主要向各位介绍怎么使用PS进行网页切图。
1、用PS打开网页效果图PSD文件，根据网页效果图拉出参考线，同时为了方便切图可以右键点击把面板的颜色自定成对比鲜明的颜色。
2、在PS图层中找出主背景图层，如果背景图是渐变的话可以只切出一两像素，后面再代码中设置填充。
3、隐藏其他图层，把背景图切出来。如果背景图很大，可以考虑分段切出，这样可以加速网页加载。
4、切出背景后，就从上到下，先把LOGO切出。这里同样要隐藏其他图层，输出图片的时候保存文件类型选择png，因为这样可以使得图片背景透明。
5、导出图片可以选择文件——存储为web和设备所有格式
6、在保存切出图片的时候，选择保存HTML和图片，这样导出来的就会自动生成一个网页页面和切图图片
7、在切像尾部版权部分的背景时候，发现这个是渐变图层，这样就可以只切出一个像素的长度。然后在代码中设置repeat-x横轴填充
相关文章
- 这篇教程是向脚本之家的朋友介绍PS切图经验技巧，教程比较实用，很适合新手来学习，推荐到脚本之家，喜欢的朋友可以过来吧2015-06-11
- Cutterman是一个著名的PS切图插件，在您的photoshop中安装Cutterman后，它能够自动将你需要的图层进行输出，以替代传统2016-06-28
- 用了Photoshop CC一段时间感觉到一些强大的新功能，不过今天脚本之家的小编又发现了一个新功能，那就是智能切图啦，应用在图像输出上非常方便，想要详细了解的话，就来阅读2014-10-12
- ps切片工具怎么用?切片工具对于网站的美工和淘宝美工都非常的重要,本教程就向大家介绍ps切片工具切图技巧，喜欢的朋友可以跟着一起来学习2014-09-06
- 本篇教程主要教大家扣图方法，步骤很简单，适合初学者学习，喜欢的朋友可以一起来学习2014-01-15
- 先把把所有标记归置内外边距归置为0,其实还有一种方法是根据根据BODY，里面所用到的HTML标记进行重置为02013-04-17
最新评论