网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.PS首选项设置 编辑——>首选项——>单位与标尺,将标尺和文字的单位都改为像素. 默认"标尺"的单位是厘米,"文字"的单位是点. 2.面板 在…

这节分享一个photoshop cc 开始有的自动生成图标的方法 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:我这里用的是photoshop cc 2015 没有photoshop,这里准备了photoshop cc 2015的安装包和破解工具,具体安装和破解方法可以百度一下 http://pan.baidu.com/s/1gfJUEzT 1 开始 1.打开给大家准备的psd文件  2.选择“编辑”=>“首选项”=>“增效工具”  3.勾选“启用生…

http://gdc.qq.com/ http://gdc.qq.com/?p=4445…

作为一个前端工程师切图这个步骤是必不可少的,方式多种多样,有和切图工具的,也有是把要切的图层元素或者组直接新建保存成文件的,现在photoshop cc2015,可以让你轻松切图,摆脱繁琐的切图步骤. 如何使用PhotoshopCC生成图像资源新功能,看PS怎么自动导出自定义大小.格式.名称的文件.web设计图片分层导出的有效工具!我们可以让Photoshop自己随时导出我们设置大小.格式.压缩品质的图像,web设计的一大亮点. 生成图像资源功能启用和导出位置 1.在Photoshop中点击“编…

在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计.排版和导出. 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photoshop CC 2015版中得到了解决. 准备 使用Photoshop CC 2015版 准备好要切的图片 第一种方法 Ps自带切图 首先打开图层,找到要切图的部分 选中要切图的图层 图层上单击右键,选择快速导出为PNG 选择一个文件夹保存即可 可以发现导出的文件以图层名称保存成为PNG格式,保留了透明像…

作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实,有更快的切图方式 1,使用切片工具选中每一个图片,然后一次性另存为Web格式. 如果两个图片有重叠,可以用移动工具把两个模块分离.(当鼠标选中移动工具时,菜单栏中的自动选择勾选去掉,这样可以以模块为单位整体移动) 有些图片是错位重叠,有些完全是先后关系,其实本质都是一样的,完全移开就行了. 2,对于…

转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和所有开发全盘拉通,不然一切都是空谈. 不同的团队使用的软件都不一样,如果经常使用sketch软件中Symbols 的同学,可能在命名的时候会考虑更多内容,但是照顾到还有很多同学在使用PS 作图,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,仅供参…

前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:http://www.imooc.com/learn/506 -------------------------------------------------------------------------------------------------------------------- 一.Pho…

先选择“编辑”-“首选项” 打开,找到“参考线”    设置一下每格网格 100像素 5个细块 确定后 ctrl+‘ 出现网格.(通过网格对齐切图比用参考线切图更好). 如果使用PS cc的软件的话,就选择智能切图. 推荐两个PS插件切图插件,一个是cutterman切图,另一个LayerCraft切图.两个都比较方便,比原来PS CC切图更智能.…

Extract Assets 是 Photoshop CC 2014 版本新增的一个特性,主要用来快速导出适用于 Web 和屏幕设计的资源,你可以用它导出 JPG.PNG.GIF,甚至是 SVG 图像资源. 在photoshop cc 2015/2014 版本支持,但在Cs6没有. # PS CC2015 下载地址 http://pan.baidu.com/s/1gfJUEzT 通过 Extract Assets,你可以: 将 PSD 中的图层或图层组导出为一个或多个的图像资源 导出 JPG.P…