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

PS
363
文章
16
评论
2020年2月24日13:57:49 评论 213

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

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

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

Paste_Image.png

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

工作区的内容

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

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

切图需求:

前端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切图方法,图文详细

  • 本文由 发表于 2020年2月24日13:57:49
PS前端切图完整教程 切图教程

PS前端切图完整教程

部分看了文章的设计师,来找我说怎么切图。sorry?在我的理解,这就是切图啊,但是他们所指的“切图”是,怎么把设计图制作成html页面,下面我们通过详细案例讲解PS前端切图完整教程。 在我看来,现在人...
HTML5+CSS3技术ps页面切图 切图教程

HTML5+CSS3技术ps页面切图

准备一个标准网站模板:中国节能环保集团公司 网址去某度自己行查找 利用photoshop cs6 专业工具进行简单切图: 粗略切图后如下: 之后将其存储为html和图像格式: 步骤 -->文件 ...
photoshop兄弟的ImageReady 切图教程

photoshop兄弟的ImageReady

假设Photoshop是网页筹画专门使用图像东西的话,ImageReady就会被纯粹吸引在Photoshop中,就不会有独立运转的软件形式。因为Photoshop也使用在网页用意之外的得多规模,所以不...
PS如何用标尺线快速切长图? 切图教程

PS如何用标尺线快速切长图?

例如我有一张500*5000的长图,体积超过10M。上传到网站的时候很慢。现在我想把这张长图切成5张500*1000的组合图,分别上传。接合部位要切的精准。用PS如何自动切图呢?下面我们就一起来看看P...
CSS切图学习之认识PHOTOSHOP(PS) 切图教程

CSS切图学习之认识PHOTOSHOP(PS)

CSS切图软件之ps截图 Adobe PHOTOSHOP平时咱们又被喻为PS。 少数人关于PHOTOSHOP的了解仅限于“一个很好的图象编纂软件”,其实不晓得它的诸多应用方面,实践上,PHOTOSHO...
CSS制作之PS对源网页美工图片分析 切图教程

CSS制作之PS对源网页美工图片分析

平日div+css网页拓荒者拿到一个需要切图开发重构的网页美工图的时候,都不是直接到软件中切图的,而是需要对这个网页美工图进行阐发,综合要点以下: 1、赏析网页机关是怎么样样的 2、分析不需要切进去的...
匿名

发表评论

匿名网友 填写信息