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. 解决高版本vm打开虚拟机报错

    问题: 打开虚拟机的文件目录,找到.vmx 文件 用记事本打开重命名后的“.vmx.txt”文件 找到行:policy.vm.mvmtid = "52 10 08 ed ff 34 ed d ...

  2. ReactiveCocoa简单使用20例

    ReactiveCocoa简单使用20例 1. 观察值变化 你别动,你一动我就知道. //当self.value的值变化时调用Block,这是用KVO的机制,RAC封装了KVO @weakify(se ...

  3. IDL build

    For Developers‎ > ‎Design Documents‎ > ‎ IDL build 目录 1 Steps 2 GYP 3 Performance 3.1 Details ...

  4. Surfaces

    For Developers‎ > ‎Design Documents‎ > ‎Chromium Graphics // Chrome GPU‎ > ‎ Surfaces Goals ...

  5. vue 退出动画无效解决方法

    遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了. 写个简单的结构: <div class="mask" v-show="warni ...

  6. UVA-10200 Prime Time 素数(注意除法精度)

    题目链接:https://cn.vjudge.net/problem/UVA-10200 题意 给出一个公式$ m=n^2+n+41, n \in Z^+ $ 现在$ a,b\in[0, 10000] ...

  7. Entity Framework的一个实例

    环境:Visual studio2013+sql server本地数据库 创建一个C#应用程序,首先在nuget中添加Entity Framework 接下来的工作分为四个主要部分: 第一部分:App ...

  8. Unity经验之谈

    1.全屏与非全屏之间的切换 if (Input.GetMouseButtonDown(1)) { Screen.fullScreen = !Screen.fullScreen; } 2.Camera适 ...

  9. 洛谷 P1542 包裹快递

    P1542 包裹快递 题目描述 小K成功地破解了密文.但是乘车到X国的时候,发现钱包被偷了,于是无奈之下只好作快递员来攒足路费去Orz教主…… 一个快递公司要将n个包裹分别送到n个地方,并分配给邮递员 ...

  10. OpenStack云桌面系列【1】—開始

    关于"云桌面"和"桌面云" 首先,wiki里面是没有关于"桌面云"和"云桌面"的定义和其他信息.     百度百科   ...