* 工具准备 *

1、PS（photoshop）

【注意】：安装时，需要先选择“试用”，之后通过注册机进行注册，直接重新打开ps应用即可（应该会无需登录）

2、更改：缓存盘路径、默认单位

【注意】：ps安装时默认缓存盘是系统盘，默认单位是cm；

【编辑->首选项->暂存盘】，选择除了C盘以外的盘符，确定即可；
【编辑->首选项->单位与标尺】，标尺/文字修改为“像素”，确定即可；

* 操作 *

【注意】：常用的工具在【视图】、【窗口】中都可以找到，具体可参考《ps快捷键.pdf》（ps中默认文件格式为.psd格式）

1、切图

（1）选用切图工具，【文件->导出->存储为web格式】（png-8即可）（会自动生成一个images文件夹）；

（2）将图层移动到新建的图层中，【图像->裁剪->确定】（可保存为一个独立的图标）；

切图保存格式：

gif：动图&背景透明颜色单一的小图标；
jpeg：不能处理背景颜色为透明的图片；（品质越高，图片清晰度越高）
png-8：
png-24：ie浏览器低版本不支持
wbmp：

2、文字

（1）选择【T】，直接选中图片中文字，即可查看文字的样式；（或者是直接打开【字符工具】）

（2）导航栏中红色背景可以通过切图运用，但是写网页时应该越少使用图片越好，图片越多网页加载速度越慢，所以需要设置【图像->画布大小】“宽度”设置为1，再【文件->导出->存储为web格式】（jpg格式即可）；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>切图教程</title><style>.nav{width: 83px;  /*设置为实际图片大小*/height: 37px;background: url("images/nav-btn.jpg"); /*图片宽度为1，则实现图片平铺*/}</style>
</head>
<body><div class="nav"></div>
</body>
</html>

3、雪碧图

【注意】：因为网页中尽量少加载多个图片，则可以将所需要的图片都保存到一张图上，使用时通过位置判断使用哪张图片

4、搜索图标

（1）直接使用【裁切工具】，直接切图，保存；

（2）在【图层】中，选中放大镜和背景ctrl+E合并；

5、切图优化

颜色代替图片
雪碧图
字体图标

6、快捷键

撤销裁切（Ctrl+Alt+Z）
裁切（enter）
删除图层：enter
合并图层：Ctrl+E
移动：v
裁切：c

7、切图辅助

Markman：国内，快速测量图中颜色，字体大小，字体和文件之间的间距
TinyPNG：压缩图片
前端自动化：一键生成雪碧图等

【ps】：新手接触，仅仅记录下目前所学内容，后续涉及及时补充

前端 ~ PS切图工具相关推荐

ps切图工具cutterman安装和使用
1.做web前端要学会切图常用的Ps切图工具cutterman 下面就介绍一下安装和使用的过程 2.下载地址:http://www.cutterman.cn/zh/cutterman 下载好解压安装 ...
android ps切图工具下载,移动APP设计之PS切图插件大汇总，值得收藏
移动APP界面设计切图和标注是一项必不可少的步骤.所以,设计界也涌现出了很多切图神器和标注神器. 包括25学堂之前介绍过的很多切图工具和切图教程. 今天25学堂的小编为大家精选了几个不错的移动APP设 ...
前端ps切图，图文教程，详细。
写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波.图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端.虽然好的UI会给我们把图切好,但是他们切的图不 ...
android ps切图工具下载,Cutterman
Cutterman是款专注于设计的ps切图插件,支持各种各样的图片尺寸.格式.形态,一键切图,自动将你需要的图层进行输出,有了它就免去了"导出web所用格式" 以及使用切片工具进行 ...
Web前端 PS切图
网页切图常用的工具有ps.fireworks,这儿使用ps对网页进行切图,我们通过切图得到所需的图片(.png..jpg文件),用于给网页提供需要的素材. ps切图常用的快捷键: 初始化PSD文件:F ...
PS切图工具retinize it actions的用法
资源包前端群1064534163 ,打开群文件 -- 开发工具,点击下载即可. 放到自己电脑的文件夹里后, 双击自动安装. 应用场景比如我有下面1和2两个图层,需要切图成一张图片: 平常做法是,关 ...
前端PS切图（笔记）
一界面设置预设WEB 1920*1080 自定义 *2000 72 RGB 背景:透明自动选择图层 Ctrl+单击视图>显示>智能参考线>标尺(Ctrl+R) ...
ps 切图工具的使用
1.选择切片工具 2.使用切片工具切啊切啊. 3.ctrl+shift+alter+s,点击存储,选择所有切片,就会导出一个文件夹,images,切好的一块块的图片就在里面 4.结果图展示 5.清除所 ...
实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...

前端 ~ PS切图工具

* 工具准备 *

* 操作 *

前端 ~ PS切图工具相关推荐

最新文章

热门文章

前端 ~ PS切图工具

*** 工具准备 ***

*** 操作 ***

前端 ~ PS切图工具相关推荐

最新文章

热门文章

* 工具准备 *

* 操作 *