2022-03-29 09:26:53
Bulut0907
码龄6年
关注
目录
1. FSCapture
2. Chrome
3. Emmet语法
3.1 HTML部分
3.2 CSS部分
4. IDEA自动格式化代码
5. Snipaster
6. photoshop
6.1 利用photoshop进行切图
6.1.1 图层切图
6.1.2 切片切图
6.1.3 安装Cutterman插件进行切图
6.2 常见图片格式
1. FSCapture
功能：支持屏幕录制、滚动截图、高清长图、图片编辑、图片转PDF格式、屏幕取色
官网下载是需要收费的，建议大家支持正版
屏幕标尺功能
打开FSCapture软件后，点击设置，再选择屏幕标尺，如下图所示：
设置
出现的屏幕标尺如下图所示，我们选择垂直模式
垂直设置
如下图所示，我们测量行高，右下角是放大后的效果，移动鼠标进行调整，会自动显示当前的px值
测量行高
屏幕取色功能
打开FSCapture软件后，点击设置，再选择屏幕取色，如下图所示：
设置
鼠标移动到我们需要吸取颜色的地方，点击鼠标左键，复制下图的16进制颜色即可
吸取颜色
2. Chrome
通过F12打开谷歌浏览器的调试工具
可以对调试工具进行放大缩小，Ctrl + 0进行复原
可以对CSS的值进行修改，达到调试的效果
3. Emmet语法
能提高我们的开发效率
3.1 HTML部分
输入div*3，再按tab，输出结果如下：
div*3
输入ul>li，再按tab，输出结果如下：
ul>li
输入div+p，再按tab，输出结果如下：
div+p输入.my-class, 再按tab，输出结果如下：
.my-class
输入p#my-id, 再按tab，输出结果如下：
p#my-id
输入.my-class$*3，再按tab，输出结果如下：
.my-class$*3
输入div{盒子一}，再按tab，输出结果如下：
div{盒子一}
3.2 CSS部分
输入w100，再按tab，输出结果如下：
w100
4. IDEA自动格式化代码
先安装Save Actions插件，然后重启IDEA
安装插件
设置Save Actions的参数如下，点击保存按钮时，就会自动格式化我们的所有代码
设置参数
5. Snipaster
打开软件，按F1开始截图
截图
2. 如上图所示，可以按Shift切换RGB和十六进制的颜色，按C复制颜色值
3. 按Ctrl + C复制选中的截图；按F3可以将截图置顶于屏幕
6. photoshop
标尺
Ctrl + R打开标尺，右键点击标尺，选择像素
可以使用Ctrl和+、-进行放大缩小图片。按住空格键，再按住鼠标左键，可以拖到图片
选框功能
选择选框，再框选图片，可以进行尺寸的测量
取色器
打开取色器，点击图片，就会有16进制的颜色出来
6.1 利用photoshop进行切图
6.1.1 图层切图
第一步：在图层区域，按住shift键，鼠标左键选择需要合并的图层，然后点击鼠标右键，选择合并图层(合并图层快捷键为Ctrl + E)
合并图层
第二步：鼠标右键点击合并后的图层，选择导出为
导出图层第三步：
导出格式选择为png，然后点击导出，选择导出路径，确认即可导出为png
导出后的图片，如下图所示：
导出图片效果
6.1.2 切片切图
第一步：选择切片工具
选择切片工具
第二步：对要导出的部分进行切片框选，然后选择文件菜单
控制显示的代码是$sharelink[0][] = ($rt['logo'] ? "<div class=\"fl\"><a href=\"$rt[url]\"><img src=\"$rt[logo]\" width=\"88\" height=\"31\" /></a></div>" : '')."<div><a href=\"$rt[url]\" target=\"_blank\">$rt[name]</a><br />$rt[descrip]</div>"
