PS:切图
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:切图的更多相关文章
- 页面制作部分之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掉,可见前端开发人员学会切图是多么重要.通过观看 ...
随机推荐
- Mac上vmware虚拟机Windows10安装Tomcat8.0及配置环境
1.下载tomcat8.0或其他版本.下载地址:http://tomcat.apache.org/download-80.cgi 2.双击进行解压. 3.安装成功之后,右键我的电脑 --> 选择 ...
- nginx的Rewrite重写
location /{ if ($remote_addr=192.168.1.100){ //禁止此 ip 访问 ...
- [NOIP2009提高组]靶形数独
题目:洛谷P1074.Vijos P1755.codevs1174. 题目大意:给你一个数独,让你填完这个数独,并要求得分最大,问这个得分是多少(不能填完输出-1). 每个格子的得分是当前格子所填的数 ...
- 【Codeforces Round #422 (Div. 2) D】My pretty girl Noora
[题目链接]:http://codeforces.com/contest/822/problem/D [题意] 有n个人参加选美比赛; 要求把这n个人分成若干个相同大小的组; 每个组内的人数是相同的; ...
- mysql中lock tables与unlock tables(锁表/解锁)使用总结
php mysql lock tables 使用有感 mysql 的 表锁 lock tables 感觉就像一个 封闭的空间 mysql发现 lock tables 命令的时候,会将带有锁标记的表(t ...
- type 'simple Class' does not conform to protocol 'Example Protocol'错误
在看swift教程中"接口和扩展"这小部分. 在编写时提示"type 'simple Class' does not conform to protocol 'Examp ...
- vue23:vue-loader
vue-loader: 其他loader -> css-loader.url-loader.html-loader..... 后台: nodeJs(模块化) -> require expo ...
- 13. Intellij IDEA调试功能使用总结
转自:https://www.cnblogs.com/Bowu/p/4026117.html 这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序 ...
- vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义
'use strict' //引入node path 中间件 可以获取到 path 路径的一些信息 const path = require('path') //引入utils工具模块 utils主要 ...
- ASP.net Web API允许跨域访问解决办法
来源 http://blog.csdn.net/wxg_kingwolfmsncn/article/details/48545099 遇到此跨域访问问题,解决办法如下: 方法一: 1. 在we ...