美文网首页
前端切图,知道这些就够了

前端切图,知道这些就够了

作者: 玉面小猿 | 来源:发表于2018-02-12 15:31 被阅读0次

相信每一个刚上手项目的前端都会被这种七零八碎的PS切图搞得晕头转向,下面就来一篇干货,传授前端切图的每一项必杀技,不多不少,足够你在WD这个领域驰骋天下。
---------------------------------------------------------下面是重点---------------------------------------------------------

涉及方面

1.1前端切图常用快捷键
1.2其他快捷键设置方法
2.1几项原则
2.2结语

1.1 只讲前端最经常用到的快捷键

1.1.1 工具箱基础功能汇总

工具箱(标星号的表内有多个同类工具,你可以按“Shift”键加相应的快捷键来循环切换)
移动工具 - V
选框工具 - M *
套索工具 - L *
裁剪工具 - C *
快速选择/魔术棒 - W *
修复画笔 – J *
橡皮擦 – E *
渐变工具/油漆桶 - G *
钢笔工具 - P *
文字工具 - T *
切换前景色/背景色 - X
默认的前景色/背景色 - D
矩形/圆形/多边形/椭圆工具 - U *
减淡/加深/海绵工具 - O *
历史记录画笔工具 – Y *
旋转视图工具 - R
抓手工具 – H

---------------------------------------------------------下面是重点---------------------------------------------------------

M 选框工具 Shift + M 矩形 椭圆选框工具切换

如果有热键冲突请参照下面进行首选项修改
修改为可直接输入M快捷键来切换矩形选框工具和椭圆选框工具。
操作如下:
photoshop菜单 ----> 编辑 ----> 首选项 ----> 常规 ----> 使用Shift键切换工具
将原来的 √ 去掉
之后就可以直接使用 M进行切换了哦~

C 裁剪工具 (Shift) + C 裁剪工具箱工具切换

遇到设计给的图比较大,用裁剪经常会卡死,所以大图尽量不要裁剪,这种方式很直接但是要比新建拷贝到新文件占用更多的内存。

V 移动工具

键盘空格可以临时控制图层移动

L 套索工具 W 魔棒工具 J 修复画笔工具 B 画笔工具

S 图章工具 Y 历史记录画笔 Shift + Y 历史记录画笔切换
用的很少,不做累述
1.1.2 快捷键介绍

选择功能

Ctrl + A 全部选择
Ctrl + D 取消选择
Ctrl + Shift + D 重新选择
Ctrl + Shift + I 反选

图层功能

Ctrl + N 新建文档
Ctrl + Shift + N 新建图层 - 创建一个新的图层,会有弹框可以修改图层名称
嫌麻烦的朋友使用 Ctrl + Alt + Shift + N直接快速建立新图层,不会弹出框让你设置东西
Ctrl+J  通过拷贝建立一个图层(无对话框)
ctrl+Alt+J  从对话框建立一个通过拷贝的图层
Ctrl+Shift+J  通过剪切建立一个图层(无对话框)
Ctrl + Alt + I 调整图像大小
Ctrl+O 打开文件
Ctrl+W 关闭当前文件
Ctrl+S 保存当前图像
Ctrl+Shift+S  另存为...
Ctrl+Q 退出photoshop
Ctrl + R 拉出小窗口,在使用标尺线时比较方便
Ctrl+Alt+Shift+S 存储为web所用格式
可以说是前端一定一定要用的快捷键了 ,弹出的对话框中选择保存格式,可以查看生成的图片大小并修改格式,一定注意如果要保留透明背景必须要选择png格式才可以。
一般小的icon使用png格式,否则使用jpeg,对于对像素要求不是特别高的场合,比如二维码,保存质量为中即可,最重要的还是加载速度速度速度~

编辑操作

Ctrl+Z 还原/重做前一步操作
Ctrl+(Alt)+Z 可以一步一步还原之前的操作,无限后退直到最后一步操作
Ctrl+C  拷贝选取的图像或路径
Ctrl+Shfit+C 合并拷贝
Ctrl+T 自由变换

1.1.2 常用操作

切片工具

一个在工具栏里不起眼的小刀刀,却是切图量尺寸中的必备,一个还原度100%的前端绝对离不开切片

双击查看宽高
ZO1109FF(AKRGKOQJ966TEH.png
将图片划分为多块,防止一张图片加载速度过慢而导致网页空白无内容

选择切片 ----> 在图像区域单击右键 ----> 划分切片 ----> 保存为web所用格式 ----> 存储选项选择html和图片 ---->
![DK6DRW}}3Y5J)YJ$]7M%T.png](https://img.haomeiwen.com/i9357687/0cad786fbef42ed6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
存储选项选择html和图片

image.png
最后就可以得到宽度间隔均匀的图片啦~
image.png

1.2其他快捷键设置方法

Ctrl+Shift+Alt+K 打开键盘快捷键和菜单设置,把你常用的一些操作在此进行自定义

2.1前端切图规范

几项原则

1.能用颜色的用颜色,不能用颜色的用平铺的用平铺,最后才考虑用图片,尽量使用sprite技术,尽可能减少HTTP请求次数。
2.对于色彩比较丰富且没有透明要求的图片使用png格式,对于有透明度要求的图片使用png24格式,并对IE6进行png8退化。对于色彩不是很丰富的图片建议采用png8格式。
可以使用工具对图片进行再次压缩,但前提是不会影响色彩和透明。
建议使用谷歌的 webp
此外,可以遵循此规则: 最终k数原则上不能超过以下公式计算出的结果:k数≤宽0.4/1024
3.命名要符合适用场景
背景图片以bg_开头来命名,图标以ico_开头来命名,按钮则以btn_开头来命名,雪碧图则以sprite_开头来命名

2.2结语

多切多练多请教。
前端小白献上

相关文章

  • 前端切图,知道这些就够了

    相信每一个刚上手项目的前端都会被这种七零八碎的PS切图搞得晕头转向,下面就来一篇干货,传授前端切图的每一项必杀技,...

  • Markdown:知道这些就够了

    推荐编辑器 Chrome最佳插件 - 马克飞象 跨平台软件,印象笔记爱好者肯定需要 - Haroopad/Subl...

  • 床垫:知道这些就够了

    思维导图 引言 睡眠不只事关明天,而是在今后的二十年里都很重要。睡在不合适的床垫上是引起背痛的一个主要原因 你与床...

  • 前端面试,看这些就够了!

    s1.css中display的属性有几种,分别是什么; none,inline,block; 2.css中list...

  • 搞定英语,知道这些就够了!

    搞定英语,知道这些就够了 英语,这对于我们来说完全就是一个老生长谈的问题。 在我们十几年的学生生涯中他一直伴随我们...

  • SVG指令 知道这些就够了

    SVG指令常用来编辑图标等图片资源,当然,Android,也支持SVG指令设计图片,这篇博客收录了几个常用指令用法...

  • git命令知道这些就够了

    git的commit分三个区域以及三个阶段: working tree:就是你所工作在的目录,每当你在代码中进行了...

  • 日语入门,知道这些就够了

    入门之一:什么是假名?什么是五十音图? 假名 日语的字母叫做假名,每个假名代表一个音节。假名有两种书写方式,即平假...

  • 自我解压,知道这些就够了

    1、现状 社会发展越来越快,人们的生活节奏也变得很难够停得下来,来自工作、学习、交际、家庭等等各个方面的压力让很多...

  • 前端工程——基础篇

    喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧。你好,切图仔。 不知道你的团队如何定义前端开发,据我所知,...

网友评论

      本文标题:前端切图,知道这些就够了

      本文链接:https://www.haomeiwen.com/subject/jnsrtftx.html