*** 工具准备 ***
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】:新手接触,仅仅记录下目前所学内容,后续涉及及时补充