PS切图(一)
Photoshop界面设置
新建文件Ctrl+N,其中【预设】-【web】,【宽度】-【1920】,高度不定。【背景内容】-【透明】,也可存储为预设。

移动设置(V)

建议不勾选【自动选择】,选择【图层】,当我们选中某一个位置时,按住Ctrl,在PSD大图上单击相应位置,右下方图层列表会自动跳到相应的图层。也可以在图层列表中,按住Ctrl,并单击该图,PSD大图上会形成选区。视图设置
勾选【视图】-【智能参考线】和【标尺】,不勾选【窗口】-【库】和【颜色】

调整右侧

点击属性,关闭。

勾选【窗口】-【信息】和【字符】,并关闭段落和属性。

将信息和字符都拉到右侧,如下图

设置信息中单位为像素,颜色模式为RGB模式


在【编辑】-【首选项】-【单位与标尺】中单位设置为像素

最后,完成设置,存储为工作区,保存当前设置。【窗口】-【工作区】-【新建工作区】

Photoshop基本操作
简单工具操作
移动工具(V)
当按住Ctrl,选中多个图层,如下图:

菜单栏下方显示属性,包含对齐方式

选区工具(M)
选区工具+ - x框。

单行、单列选框工具都是1px。

重要的【shift键】,选框时,按住shift,可成正方形选框或者正圆。(注意先放鼠标,再放shift键)

重要的【Alt键】,设置圆心,鼠标点击某个位置,并按住Alt键,再拖动。(可配合shift键画正圆)

shift 键又等价于选区工具+,Alt键等价于选区工具-
shift+M在
和
之间切换。套索工具(L)
也是选区的,选择不规则图形。

多边形套索工具,在每条边的顶点单击一下,最后一个点双击,或者在起始点处单击,就能闭合多边形了。(注意鼠标箭头带圆圈表闭合)

磁性套索工具,根据颜色边界来进行判断。快速选择工具(W)
单击时,会把相同颜色的区域选择出来,还可以拉动再选择。
[键 缩小快速选择工具的画笔, ]键 放大画笔。同时也可以在菜单栏下方设置,如图

裁剪工具(C)
选择裁剪工具,单击画布时,会发现整个画布周围多了一些小的可控角。可控制裁剪区域面积。点击对勾,确认裁剪。保存-导出

用选框工具选中区域后,再单击裁剪工具(围绕选区,生成最小裁剪矩形),按下回车键,进行选区裁剪。其他快捷键
按住空格键----------------抓手工具
Ctrl和+ ---------------------放大
Ctrl和- ----------------------缩小
Ctrl和D ---------------------删除选区
Alt和Delete ----------------前景色填充
Ctrl和Delete ---------------背景色填充
图层的原理及其操作
图层相当于一层层玻璃,每层上都画了不同的图案,然后眼睛从上往下看。
参考线及其操作
【视图】-【新建参考线】或Alt -> V -> E或Ctrl+R。

选择当前图层,再拖动参考线,它会自动吸附到边缘。
【视图】-【显示】-【网格】
Ctrl+; 关闭参考线 Alt->V->E->H水平参考线。
PS切图(一)的更多相关文章
- 页面制作部分之PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 前端技术-PS切图
页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...
- 学习笔记2:前端PS切图
前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...
- PS切图保存后的背景图为透明
1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...
- 前端PS切图
http://www.imooc.com/learn/506 慕课网地址 Tools Tools Photoshop 快捷键 l 移动工具 V l 选取工具 M l 套索工具 L l ...
- ps切图插件
ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用
- 两种ps切图方法(图层/切片)
两种Ps切图方法 一. 基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
- 2018年设计师都在用的PS切图插件--摹客iDoc
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- 前端菜鸟起飞之学会ps切图
由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...
随机推荐
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(49)-工作流设计-我的申请
系列目录 提交一个表单后 我们需要一个管理的列表.我的申请,我的申请包含了提交内容的列表状态 状态分:过期,未审核,审核通过,驳回,废弃 列表对应代码 @using App.Admin; @using ...
- Java设计模式之代理模式(Proxy)
前言: 最近在研究Retrofit开源框架的时候,其主要核心代码是通过注解标示参数,动态代理模式实现具体接口,反射机制进行参数解析,最终实现发送请求.其实之前在学习Xutils源码的时候,Xutils ...
- [入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二)
[入门级] 基于 visual studio 2010 mvc4 的图书管理系统开发初步 (二) Date 周六 10 一月 2015 By 钟谢伟 Category website develop ...
- 你真的会玩SQL吗?你所不知道的 数据聚合
你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...
- JS魔法堂:不完全国际化&本地化手册 之 拓展篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- C#开发微信门户及应用(27)-公众号模板消息管理
通过模板消息接口,公众号能向关注其账号的用户发送预设模板的消息.模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中,如信用卡刷卡通知,商品购买成功通知等.不支持广告等营销类消 ...
- EXCEL中多级分类汇总空白字段填充
使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...
- js的命名规范
js的命名规范 1.驼峰命名法:首字母是小写的,接下来的字母都以大写字符开头.例如: var testValue = 0; var oneValue = 10; 2. ...
- angularjs 弹出框 $modal
angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报 分类: Angularjs(3) $modal只有一 ...