photoshop CC智能切图

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS,这里使用PS进行网页切图。

我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background)。

一、使用PS工具

1、PS首选项设置

编辑——》首选项——》单位与标尺,将标尺和文字的单位都改为像素。

默认"标尺"的单位是厘米,"文字"的单位是点。

2、面板

在“窗口”菜单下开启:

工具(默认已开启)

选项(默认已开启)

图层(默认已开启)

信息(默认已开启)

历史记录(手动开启)

关闭其他不需要的功能,将以上功能放置在合适的区域,窗口——》工作区——》保存工作区,

可以通过下面两种办法恢复ps默认窗口。

窗口——》工作区——》复位基本功能。

窗口——》工作区——》基本功能(默认)。

二、切图方法

1、photoshop CC智能切图

个人觉得这种方法适用于自己做设计自己切图的情况。

第一步

通过文件菜单开启智能切图。

第二步

开启智能切图后,只要将ps文件中图层或群组(group)按照想要输出的图片名称和格式命名。

第三步

当保存psd的同时,切图文件就会自动生成到psd相同路径下的子文件夹中。该文件夹中的图片会实时更新。

输出文件命名技巧

1,如果一个图层需要输出多种格式图片,命名可以用逗号分割。(例如:a.jpg,a.png)

2,同一个图层想输出多种质量的图片,可以在命名后加参数。 (比如:a.png8,b.png32 这样就会输出一张8位的a.png和一张32位的b.png文件)

3,JPG默认输出是90%的质量,也可以命名加参数控制(例如:a.jpg50%)

 

图片默认自动生成到psd相同路径下的子文件夹中,不知道怎么修改这个默认的图片存储位置?有谁知道还请告知

 

 

参考资料:

页面制作部分之PS切图

http://www.cnblogs.com/jingwhale/p/4396235.html

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4835703.html有问题欢迎与我讨论,共同进步。

posted @ 2017-04-14 17:00  starof  阅读(1627)  评论(0编辑  收藏  举报