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. ReactiveCocoa结合了几种编程风格

    函数式编程(Functional Programming):使用高阶函数,例如函数用其他函数作为参数.响应式编程(Reactive Programming):关注于数据流和变化传播.所以,你可能听说过 ...

  2. c#DataGridView复制粘贴删除功能

    //可在dgv中复制.剪切.粘贴.删除数据 /// <summary> /// DataGridView复制 /// </summary> /// <param name ...

  3. NodeJS学习笔记 进阶 (3)Nodejs 进阶:Express 常用中间件 body-parser 实现解析(ok)

    个人总结:Node.js处理post表单需要body-parser,这篇文章进行了详细的讲解. 摘选自网络 写在前面 body-parser是非常常用的一个express中间件,作用是对http请求体 ...

  4. linu基础入门(一)

    原创作品,允许转载,转载时请务必声明作者信息和本声明. https://www.cnblogs.com/zhu520/p/10730550.html 本人小白,有错指出.谢谢! 一:根据上一步安装与新 ...

  5. HackingTeam重磅炸弹: 估值超1000万美金带有军火交易性质的木马病毒以及远控源代码泄露

    [简单介绍] 经常使用网名: 猪头三 出生日期: 1981.XX.XX 个人站点: http://www.x86asm.com QQ交流: 643439947 编程生涯: 2001年~至今[共14年] ...

  6. RenderScript on LLVM笔记

    Android 为何引入 Render Script: 3D 可移植  ( 直接用 opengl 也能够移植呀?) 性能 易用性 ( 让 opengl 难入门的人,用 Render Script ?) ...

  7. git帮助命令

    git帮助命令 零.自己实例 cd D://software/code/PHP/phpStudy/PHPTutorial/WWW/github/m_Orchestrate git checkout - ...

  8. 2.cocos设置背景图片

    在bool HelloWorld::init()中加入如下代码 auto bg = Sprite::create("1.jpg"); if (bg) { bg->setPos ...

  9. gym 100735I

    Description standard input/outputStatements You are given three numbers. Is there a way to replace v ...

  10. 紫书 习题 10-25 UVa 1575 (有重复元素的全排列+暴搜)

    我一开始以为有什么很牛逼的方法来做,然后一直没有思路 后来看了https://blog.csdn.net/zju2016/article/details/78562932的博客 竟然是暴搜?????? ...