欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

前端ps切图方法,图文详细

 

1.下载

我现在使用的版本号:PS-CS6,网上很多破解版本的自行搜索下载。

2.安装好PS之后,先要调整工作区域的布局。

1.选择“窗口”——把“信息”,“图层”,“历史记录”,“颜色”面板打开,其他的可以先关闭了,在切图的工作中其他的基本用不到,这个很简单的,打几个勾就可以了,如下图所示:

前端ps切图方法,图文详细

Paste_Image.png

前端ps切图方法,图文详细

工作区的内容

2.调整好面板之后,选择“窗口”——“工作区”——“新建工作区”,将当前的工作布局保存起来,并命个名,之后下次打开的时候就会直接出现你调整好的工作布局,否则的话你每次重新打开ps的时候都要重新设置。

ps:就算有别人弄乱了你的面板也可以直接通过“窗口”——“工作区”——选择你之前保存的工作布局。

3.切图

切图需求:

前端ps切图方法,图文详细

这是我们需要切的图

切图步骤见图

前端ps切图方法,图文详细

切图步骤1.

选择图层的时候要先按住alt不放,然后再按鼠标右键。

前端ps切图方法,图文详细

Paste_Image.png

### 隐藏图层。

前端ps切图方法,图文详细

Paste_Image.png

效果:

前端ps切图方法,图文详细

Paste_Image.png

#### 连续操作隐藏图层(背景图要隐藏干净):

效果,以及接下的步骤(切线就是一根根淡蓝色的线)

前端ps切图方法,图文详细

Paste_Image.png

保存切片1

前端ps切图方法,图文详细

Paste_Image.png

保存切片2

前端ps切图方法,图文详细

Paste_Image.png

保存切片3

前端ps切图方法,图文详细

Paste_Image.png

被局限的方法(原理是一样的):

前端ps切图方法,图文详细

这有局限

踩坑经历:

网上很多教程都说使用png格式就可以,却并没有说png-8或者是png-24,甚至有些教程告诉我使用png-8!在这里分享一波,保存切片必须使用png-24,因为我踩过坑了(/(ㄒoㄒ)/~~)

切出来的图片对比:

前端ps切图方法,图文详细

Paste_Image.png

网页效果对比:

前端ps切图方法,图文详细

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50423.shtml

我要分享到:
上一篇:HTML5+CSS3技术ps页面切图
下一篇:PS切图

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-16 16:00 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。