您的位置:CSS5 > CSS PS切图教程 >

CSS PS切图时需要隐藏的图层内容

发布日期:2016-05-04 08:45:57 来源:css5.com.cn

CSS切图之在PS(photoshop)切图的时候,什么情况下需要隐藏图层内容及隐藏方法。

需要隐藏情况:
1、挡住背景图片或文字内容
2、叠加图片隐藏于显示。

在前面我们就给大家介绍在制作网页的时候不要将设计的网页文件进行合并图层,因为有的时候需要将有些图层隐蔽,如果合层了就不好操作。

css ps图层
PS图层截图

隐藏方法即是点击将所要隐藏内容图层前“眼睛”关闭

PS图层隐藏按钮
PS图层隐藏按钮

点击一次眼睛将消失

对应PS图层隐藏后截图
对应PS图层隐藏后截图

即隐藏了该图层。

实例讲解隐藏地方:
1、挡住背景截图需要隐藏

PS美工效果图需要隐藏图层效果截图
PS美工效果图需要隐藏图层效果截图

这是QQ首页的搜索部分的背景一部分,而他的背景是一个图片型(需要切这个整块背景图片作为以后DIV+CSS设计时候背景素材),而非单色背景,这个时候我们就需要将

设计图后切图前需要PS隐藏对应图层
设计图后切图前需要PS隐藏对应图层

(云、17度、成都、几个颜色选择图标)隐藏掉,从而为给背景截图带来无干扰。大家可以分析腾讯QQ首页此部分,而他同样背景截图也是将刚刚说说部分隐藏然后再截图,结果图片背景如下

隐藏图层后美工效果截图
隐藏图层后美工效果截图

大家可以使用傲游+ViewPage分析(“CSS工具使用与介绍”有介绍)

2、叠加需要暂时隐藏,背景切出后再显示。
如果一个整页的背景是一个图片,那我们就需要将挡住背景所有内容及图片隐藏,然后将背景切出来后,再恢复隐藏的内容及图片。


以上是一直切图的思路,通过此内容介绍也再次说明在网页美工设计的时候尽量不要将网页美工图文件合并图层,如果要看效果或给别人看网页效果图可以将美工图导出单独的JPG\GIF等格式,但源图不需要合并图层,即可。

总结:
通过介绍我们让新手懂得了隐藏网页某内容的方法(点击图层小眼睛,眼睛在即显示图层,眼睛没有即隐藏了该图层)。

标签(Tag): 切图 隐藏图层
本文分享URL地址:/css-ps/833.shtml

作者:css5

上一篇:CSS制作之PS对源网页美工图片分析
下一篇:没有了