两种ps切图方法(图层/切片)
两种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切图方法(图层/切片)的更多相关文章
- 第144天:PS切图方法总结
一.切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS ...
- 前端PS切图
http://www.imooc.com/learn/506 慕课网地址 Tools Tools Photoshop 快捷键 l 移动工具 V l 选取工具 M l 套索工具 L l ...
- PS切图导出代码后出现的图片布局散乱的解决方法——table布局
前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...
- [超级懒人最简单法]iPhone 6 plus 适配切图方法分享(转载文章)
网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1. 有人说用sketc ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 学习笔记2:前端PS切图
前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...
- PS 切图、抠图
PS切图https://www.cnblogs.com/xiongmanli/p/6079172.html https://tech.youzan.com/cut-boy/?hmsr=toutiao. ...
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 前端技术-PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
随机推荐
- Oracle中add_months()函数的用法
查询当前时间1个月以前的时间: select add_months(sysdate,-1) from dual; 查询当前时间1个月以后的时间: select add_months(sysdate,1 ...
- python单引号(')、双引号(")、三引号(''',""")
python对字符串的表示方法比c更有灵活性,但是也更难理解. 为了在平时使用.看代码过程中对着单引号(').双引号(").三引号(''',""")不混淆,知道 ...
- 在 VS Code 和 Chrome 中调试
先决条件 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 请通过 Vue CLI,遵循它的 REA ...
- 10.13 Django随笔
2018-10-13 14:20:59 越努力,越幸运! 永远不要高估自己! Django的渲染是在render()时候渲染的,然后把字符串传给浏览器 Django请求流程, 跨域 参考链接: htt ...
- day_5.22 py
#!/usr/bin/env/python #-*-coding:utf-8-*- ''' 私有化 __相当于prevate 外部不能直接调用,只能通过set get方法用 property ''' ...
- include_once与require_once的区别
①作用及用法 可以减少代码的重复 include(_once)("文件的路径")与require(_once)("文件的路径") ②理解 说白了,就是用包含进 ...
- MySQL-记一次备份失败的排查过程
山竹来临,窝在家里整理个人文档. 本篇文章主要讲解排查问题的思路,涉及linux 删除文件的原理.实例误删数据恢复.MySQL实例初始化参数优先级别等,虽然涉及知 ...
- centos下nginx的启动
今天下载了个nginx,编译安装之后,无法启动,以前的启动方法无法实现(services nginx start), 在网上找了半天,才找到一个方法,与大家分享: 命令如下: 启动:/usr/loca ...
- datagrid---columns列
{ field:"city", //字段名,从后台传来的要一致 title:"城市",//列的标题文字. width:,//列的宽度 formatter:fun ...
- Saltstack设置安装源为阿里源
Saltstack设置安装源为官方源有时候在国内网络不好安装较慢或者安装不上,可设置为阿里源 比如对于 Centos 7 系统,在 saltstack 的官网提供的配置初始化手册是: sudo yum ...