1、从psd中获取资源
2、基本了解
3、简单的图片操作和调整
4、对自己的审美提高
一、界面设置:
1、新建设置:ctr+n;
预设:Web,大小Web(1920*1080)
背景:透明
2、移动工具设置:
右上角选择自动选择,后面选择图层。在后面选中可以移动。trl单机选中(自动选择未选)
3、视图设置
智能参考线,标尺选中。
窗口:打开信息,字符,信息右侧设置,修改单位像素,颜色RGB,文档尺寸大勾。编辑,首选项中:单位标尺修改称像素。trl左击,在信息,字符中显示一些信息。
窗口=》工作区=》新建工作区=》Web切图存储
二、photoshop基本操作:
1、简单的工具操作:
工具:像素移动,选中后会在属性菜单栏中出现相应的属性,更具属性进行设置。
选区:M选中图层,填充颜色,选中颜色,右击填充。选取属性常见的*,+,-可多选。可扩展的属性。按住shit键,成为正方形或圆,但先放鼠标,再放shit键。alt圆形,alt+shit组合成正圆。画一个选区后,增加选区按shit会默认增加选区,放开鼠标再放开快捷键,减少是alt.
套手选区:按鼠标左键走,几种选择的使用。
快速选择工具:括号是快捷键。不断地托就可以选中。
采选工具:出现一些晓得可控角,可拖动,单机对勾,其他的会去掉。
选中选区,按住ctr,单机裁剪工具,按回车可选择选区。
吸码工具:吸取颜色。
2、图层的原理:

3、参考线及其辅助:

4、传统切图:
一、切图与切片:
二、切片的基本操作及其技巧:
三、导出操作: (1)裁剪工具=》切片工具,拖动切图。导出。
(2)选中后拖动参考线会有吸附作用。选择切片,在属性栏中有基于参考线的切片,都会成为切片。不需要的右击删除。
导出:文件存储为WEB..生成一个模型,右侧导出格式图片,点击存储。
5、精准切图:
改进切图流程:利用photoshop的脚本,自动切图。
文件=》脚本=》将图层导出到文件,选择格式,三个打勾,起名字,运行。
6、自动切图:
编辑=》首选项系数=》增效工具=》启动生成打勾,确定。
文件=》生成图像资源打勾。会多一个文件夹。选中选区,修改后缀名后即可切出。
apple的rutina屏在后缀名后面“ &rx”;
可导出svg图,.svg,修改后缀名。或者:抽出资源,文件=》抽出资源,可以找到文件资源,单击抽出。
复制css:图层=》单击复制css(外部引用无法实现)在笔记本中黏贴,则会出现css样式。
图层管理:右侧类型=》名称输入会找到对应的图层。等各种属性查找对应的图层。

勤,练,做,看,想。

PS:切图的更多相关文章

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

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

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

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

  3. 前端技术-PS切图

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

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

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

  5. PS切图保存后的背景图为透明

    1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...

  6. 前端PS切图

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

  7. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用

  8. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  9. 2018年设计师都在用的PS切图插件--摹客iDoc

    终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

  10. 前端菜鸟起飞之学会ps切图

    由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...

随机推荐

  1. Fans同学已死,终年24岁

    亲爱的同学们,朋友们,QQ好友. 告诉大家一个悲剧:Fans同学已死,终年24岁. 马甲变迁 正式告诉大家一个消息,我的ID"Fans同学"正在退出"历史舞台" ...

  2. 15 hbase 学习(十五)缓存机制以及可以利用SSD作为存储的BucketCache

    下面介绍Hbase的缓存机制:  a.HBase在读取时,会以Block为单位进行cache,用来提升读的性能 b.Block可以分类为DataBlock(默认大小64K,存储KV).BloomBlo ...

  3. silverlight wcf mvvm

    近期工作比較忙.也没有时间发表新内容,今天有点时间,就顺便写点,说说近期开发的一套系统心得. 我刚去这个公司已经将前端确定要用Silverlight,我不知道为什么要选择这个,或许是为以后转C/S系统 ...

  4. 【 Beginning iOS 7 Development《精通iOS7开发》】05 Autorotation and Autosizing

    一.旋转后相对位置不变 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ29nbGVy/font/5a6L5L2T/fontsize/400/fill/I0 ...

  5. Gonet2 游戏server框架解析之gRPC提高(5)

    上一篇blog是关于gRPC框架的基本使用,假设说gRPC仅仅是远程发几个參数,那和一个普通的http请求也没多大区别了. 所以今天我就来学习一下gRPC高级一点的用法. 流! 流能够依据用法,分为单 ...

  6. legend---二、如何降低编程复杂度

    legend---二.如何降低编程复杂度 一.总结 一句话总结:配置文件,数据库 个性的东西可以一起写入数据库,那么编程复杂度会大幅降低,页面灵活度也大幅降低(特有属性写进数据库) 比如不同难度的颜色 ...

  7. legend---四、菜鸟教程css3里面有教你炫酷的按钮怎么做

    legend---四.菜鸟教程css3里面有教你炫酷的按钮怎么做 一.总结 一句话总结:想学,总是有很多资料的 1. 自动居中是 margin:100px 0px;么? 自动居中是margin:100 ...

  8. 10.ng-class-even与ng-class-odd

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素 ng-class-even与n ...

  9. angularjs之手机输入法回车变搜索,并触发事件,兼容pc回车事件

    一.效果:回车按钮变搜索 之前的输入法: 之后的输入法: 二.功能实现 <input type="search" id="search_input" pl ...

  10. 【TC SRM 718 DIV 2 B】Reconstruct Graph

    [Link]: [Description] 给你两个括号序列; 让你把这两个括号序列合并起来 (得按顺序合并) 使得组成的新的序列为合法序列; 即每个括号都能匹配; 问有多少种合并的方法; [Solu ...