前端开发小工具的使用(FSCapture、Chrome、Emmet语法、IDEA自动格式化代码、Snipaster)

不点 阅读:381 2022-06-06 14:13:25 评论:0

1. FSCapture

功能:支持屏幕录制、滚动截图、高清长图、图片编辑、图片转PDF格式、屏幕取色

官网下载是需要收费的,建议大家支持正版

  1. 屏幕标尺功能

打开FSCapture软件后,点击设置,再选择屏幕标尺,如下图所示:

设置
出现的屏幕标尺如下图所示,我们选择垂直模式
垂直设置
如下图所示,我们测量行高,右下角是放大后的效果,移动鼠标进行调整,会自动显示当前的px值
测量行高

  1. 屏幕取色功能

打开FSCapture软件后,点击设置,再选择屏幕取色,如下图所示:

设置

鼠标移动到我们需要吸取颜色的地方,点击鼠标左键,复制下图的16进制颜色即可

吸取颜色

2. Chrome

通过F12打开谷歌浏览器的调试工具

  1. 可以对调试工具进行放大缩小,Ctrl + 0进行复原
  2. 可以对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

  1. 打开软件,按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 切片切图

第一步:选择切片工具
选择切片工具
第二步:对要导出的部分进行切片框选,然后选择文件菜单
框选区域
第三步:选择导出,再选择导出为Web所用格式(旧版)
选择导出第四步:导出格式选择为JPEG高,再选择储存
导出格式第五步:选择导出路径,再选择导出选中的切片
导出选中的切片查看导出后的图片,如下图所示:
导出效果图

6.1.3 安装Cutterman插件进行切图

第一步:从Cutterman官网进行下载,解压zip文件,安装exe文件

第二步: 重启photoshop

第三步:选择窗口菜单的拓展(旧版),再选择Cutterman-切图神器
选择cutterman
第四步:注册账号,然后登录

第五步:取消IOS和Andriod,选择Web,再设置导出路径,按住Shift键,鼠标左键选择多个图层,选择合并导出选中的图层,最后点击导出选中图层
导出图层
在导出的路径中,打开图片,效果如下:
导出效果
如果不想导出整个图层,只想导出图层的一部分,操作如下:

选中要导出的图层,然后选择选取框,再框选需要导出的区域,最后点击导出选中图层
导出部分图层
效果图如下:
效果图

6.2 常见图片格式

  1. jpg(JPEG):对色彩的信息保留较好、高清、颜色较多,通常用于产品类的图片
  2. gif:最多只能储存256色,但可以保存透明背景和动画效果,通常用于简单图形和字体,以及一些图片小动画
  3. png:结合了gif和jpg的优点,具有储存形式丰富,能保存透明背景
  4. PSD:photoshop专用格式,可以存放图层、通道、遮罩等,可以直接进行文字复制,获取图片,测量大小和距离

标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号