使用PS进行切图
一,设置PS 使用PS进行切图前的设置:
1,打开PS----打开PSD图片----点击窗口-----分别把:历史记录,信息,图层,三个打勾。
历史记录:可以回到之前想要的步骤,特别是不小心把图层的文字或者图层删除了,进行恢复。
信息:可以获得框选部分的:rgb ,XY轴的起始位置,还有宽高。
图层:PSD图片,是通过很多图层叠加起来才变成视觉上为一个页面的效果。
2,设置自动选择图层:点击窗口----选项打勾----即显示顶部的选项,选项中的:自动选择:图层。自动选择打勾,并且把组改为图层。
此时随便点击PSD文件的任何一个地方,图层都会显示该图层。
3,设置标尺:点击是图----标尺打勾。
按键盘M(矩形框选工具) ,如果有该选取,那么标尺移动到该处时,会自动吸附。很好用
二,测量
1,测量时注意,不要把边框算进去。
2,在使用选取工具时,选区左边 与 图层左边对齐时,选区可以从右边向左边画选区,这样比较好对齐,不会跑动。
因为鼠标点击时很难确定哪里开始画。
方法一:比较简单,推荐使用:
1,打开PS ----打开PSD文件
2,按快捷键M 画矩形选区 ------- 选区左边 与 图层 左边对齐。
3,按住Shift ------ 画矩形选区 ------- 选区右边 与 图层 右边对齐。
4,查看信息,这时的 W 就是 两个矩形选区之间的宽度,指左边选区的左边 到 右边选区的右边 之间的宽度。
H 就是 两个矩形选区之间的高度,指上面一个选区的上边 到 下面一个选区的下边 之间的高度。
方法二:
1,打开PS ----打开PSD文件
2,快捷键M----在图层左边画一个矩形选区 和 图层左边对齐,拉一条标尺对准左边。
3,在图层右边----按住shift 键 画一个矩形选区 和 图层 右边对齐,拉一条标尺对准右边。
4,按住 ctrl + 鼠标滚轮 ---- 缩小PSD文件,再按M(矩形选区工具) 从两条标尺之间画一个矩形选区,查看信息中的W的即可,H也一样的测量方法。
三,快捷键
Ctrl + 鼠标滚轮 缩放PSD文件
空格键 + 鼠标左键 拖动PSD文件
M 矩形选区
V 拖动指定对象
T 查看字体颜色时,点击字体按下 T 键,在选项中可以获取字体的信息,包括字体样式,大小,颜色等。
四,写样式时的习惯做法,比如 站点导航:
1,使用 Ctrl + 鼠标左键 选中 站点导航结构里面 要写样式的所有 class 。
2,黏贴到 指定样式表中。
3,使用 Shift + 鼠标右键 选中所有className 前面 添加一个 "." ,再按小键盘 1(end) 回到末尾 添加 " { }" 即可。如下:
/* nav-site 站点导航 */
.nav-site {
//写好结构样式名称后,再开始一层一层写样式
}
.container {
//写好结构样式名称后,再开始一层一层写样式
}
.nav-site-signin {
//写好结构样式名称后,再开始一层一层写样式
}
.nav-site-signup {
//写好结构样式名称后,再开始一层一层写样式
}
.nav-site-mobile {
//写好结构样式名称后,再开始一层一层写样式
}
五,颜色吸取
1,使用左边工具的吸管工具,点击指定位置获取颜色
2,点击前景色-----拾色器中获取颜色信息。
六,切图:透明图标
1,按 V 键-----找到需要的图标图层------右击图层-----复制图层 ----- 文档:新建---- 点击菜单栏 图像-----裁切----出现一个窗口----
---- 基于:选中 透明像素 裁切:全选 ---- 点击确定-----存储为web使用格式----设定好存储位置 和 名称.png 即可完成切图。
七,动态添加样式的三种方法:
第一种:最优雅: