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. 写给自己的Java程序员学习路线图_转载

    如下是我做开发这三年经常使用一些技术和工具,当然这些技术也都是需要加强的(有些是我一直使用的,不过不深入,有些内部的原理等等不是很清楚) 前端部分: 1)HTML:网页的核心语言,构成网页的基础 2) ...

  2. 三分钟明白 Activiti工作流 -- java运用_转载

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

  3. nginx直接连接操作memcache

    原理:     Nginx 要设定一个 key 去查 mem ,如果没查到,要有一个回调 php ,并且 key 传给 php.     配置方式:     server{               ...

  4. vue中使用console.log无效

    webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请 ...

  5. 关联Anaconda和最新Pycharm2018.3.2

    在Anaconda和Pycharm 2018.3.2 x64都安装好之后,进行Anaconda 与Pycharm的关联操作 首先File -->New Project 打开以后切记要把Proje ...

  6. 【转载】Perl中字符串编码的处理

    在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编 ...

  7. element-ui table 行内编辑

    EditRow.ts vue+element-ui+slot-scope原生实现可编辑表格 interface NoParamConstructor<T> { new(): T; } ex ...

  8. Python组织文件 实践:将文件的不同版本备份为ZIP文件

    功能:备份文件夹.能将文件的不同版本备份下来,并且每个有不同的名字 #! python3 # backupToZip.py - 备份文件的不同版本到压缩文件中 import zipfile,os #f ...

  9. select &amp; epoll

    同步.异步.堵塞和非堵塞差别 同步:发出一个功能调用时.在没有得到结果之前,该调用就不返回 异步:当一个异步过程调用发出后.调用者不能立马得到结果.实际处理这个调用的部件在完毕后.通过状态.通知和回调 ...

  10. android数据储存之存储方式

    能够将数据储存在内置或可移动存储,数据库,网络.sharedpreference. android能够使用Content provider来使你的私有数据暴漏给其它应用程序. 一.sharedpref ...