两种Ps切图方法

一.      基础操作:

a)    Ctrl++ 放大图片,ctrl - -缩小图片

b)    按住空格键space+,点击鼠标左键,拖动图片。

c)    修改单位,点击编辑->首选项-> 单位与标尺,将厘米修改为像素px。

d)    点击视图,选择标尺(ctrl+R),清除默认参考线(ctrl+;),清除切片(ctrl+,)。

e)    点击编辑->设置快捷键,将常用操作设置为我们熟悉的键。

f)     移动(V),选区(M),切片(C),将v图层转换成智能对象(ctrl+/).

二.      切图过程:

1、        打开psd图,先浏览整个页面,哪些是能用css实现,哪些是用图片实现的,能用css代码实现的尽量用代码实现;

2、        页面中需要切成图片的,看是背景图还是内容图,背景图保存为png,内容图保存为jpg,页面中不是从后台获取的图片一般为背景图(png),后台获取的一般为内容图(jpg);

3、        形状不均匀的背景图片使用图层切图,形状均匀的内容图用切片切图。具体切图方式按实际情况而定,切片切图与图层切图相结合。如果规则图片多的使用切片切图,其他的图片使用图层切图;

4、        使用切片切图保存图片时,图片的格式视情况而定,可以自己为选中切片中的图片设置格式,若需要全部选中为同一种格式,全选中整个页面再选图片的格式。

5、        最后保存时要注意,一定要选中所有用户切片;

6、        命名时注意,(内容图)jpg图片以pic-xx.jpg命名,(背景图/小图标)png图片以icon-xx命名,xx要有语义。

三.      图层切图(形状不均匀的背景图片):

a)    点击移动选择工具,将左上角的的自动选择勾上,再将旁边的组换成图层.

b)    用移动选择工具将我们要切得图层选中,在右侧的图层区,可以自动定位到我们的图层,点击左边的小眼睛确定此图层是否使我们要切得图层,确定之后,将右击将图层转换为智能对象(防止图片失真)。

c)    用矩形选框工具,将图层框起来(框框只能大不能小于图层)。

d)    依次执行以下操作:ctrl+c复制图层,ctrl+n新建透明背景画布,,ctrl+v粘贴图层,ctrl+alt+shift+s保存图层,如果切得是背景图,保存为png24格式,前缀为icon-xxx.,再保存到我们的项目工程里。

e)    背景图,类似于图标之类的都用png,其他的都用jpg,png可以代替jpg,但是jpg不能代替png。

四.      切片切图(形状均匀的内容图):

a)    选择切片工具。

b)    用辅助线将要切的图层框起来。

c)    用切片框住我们的图层。

d)    Ctrl++alt+shift+s保存用户切片,格式选jpeg,前缀为pic-xxx。

e)    在保存时选中了假如默认为png,但是要选择jpeg时可能会出现有部分图片还是会有png的图片,此时需要自己选中图片修改为jpeg。

五.      合并图层(需要切的图由多个图层组合而成)

a)    按住ctrl,选中我们要合并的两个图层,右击转换为智能对象,进行图层切图。

六.      图片格式.

切图出来的图片一般保存为png-24和jpeg格式

两种ps切图方法(图层/切片)的更多相关文章

  1. 第144天:PS切图方法总结

    一.切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS ...

  2. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  3. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

  4. [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)

    网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketc ...

  5. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  6. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  7. PS 切图、抠图

    PS切图https://www.cnblogs.com/xiongmanli/p/6079172.html https://tech.youzan.com/cut-boy/?hmsr=toutiao. ...

  8. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  9. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

随机推荐

  1. 4G通信模块在ARM平台下的应用

    4G模块是连接物与物的重要载体,是终端设备接入物联网的核心部件之一.随着4G的普及,许多新兴市场对4G通信模块的需求都在日益扩大,那么在ARM平台的嵌入式设备上如何快速的应用4G模块呢? 4G通信模块 ...

  2. iOS - DNS劫持

    ******科普** 1.DNS劫持的危害 不知道大家有没有发现这样一个现象,在打开一些网页的时候会弹出一些与所浏览网页不相关的内容比如这样奇(se)怪(qing)的东西 图一   或者这样 图二   ...

  3. 二分求幂/快速幂取模运算——root(N,k)

    二分求幂 int getMi(int a,int b) { ; ) { //当二进制位k位为1时,需要累乘a的2^k次方,然后用ans保存 == ) { ans *= a; } a *= a; b / ...

  4. C#枚举类型和int类型相互转换

    C#枚举类型和int类型相互转换 C# 枚举(Enum) 枚举是一组命名整型常量.枚举类型是使用 enum 关键字声明的. C# 枚举是值数据类型.换句话说,枚举包含自己的值,且不能继承或传递继承. ...

  5. C#基础--类/接口/成员修饰符,多态、重载、重写,静态和非静态

    C#基础--类/接口/成员修饰符,多态.重载.重写,静态和非静态 类/接口/成员修饰符 C#修饰符---接口: 接口默认访问符是internal接口的成员默认访问修饰符是public C#修饰符--类 ...

  6. Django之Web框架本质及第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  7. 第八天py

    我发现这个老师讲的太基础只是我懒得跳过而已想慢慢听 列表公共功能 索引 切片 for 长度 特有功能 翻转 排序 追加 插入 索引位置 删除

  8. 文件二进制与String相互转换

    //转换base64 OpenFileDialog dialog = new OpenFileDialog(); //dialog.Filter = "所有文件(*.*)|*.*" ...

  9. docker swarm 英文参考资料阅读列表

    将自己在使用 docker swarm 过程中阅读的英文参考资料收集在这篇博文中,便于以后查阅与温习,顺带分享. 2017年8月5日之前阅读 My experience with Docker Swa ...

  10. Netty入门教程——认识Netty

    什么是Netty? Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架. Netty 是一个广泛使用的 Java 网络编程框架(N ...