5分钟学编程：前端工程师必备的开发工具—Photoshop篇

前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码，所以我们要学习一些设计软件的基础操作和切图方法。

Photoshop 运用最广泛的设计软件，大部分人都在用它，很有必要学习一下

Photoshop界面设置

新建设置

高：1920像素

宽：2000像素

分辨率：72像素/英寸

颜色模式：RGB颜色 8位

背景内容：透明

颜色配置文件：SRGB IEC61966-2.1

像素长宽比：方形像素

记得存为预设-----方便下次使用

网页设计，因为不用打印出来，所以一般用像素作为单位，而需要打印的一般用厘米作为单位

移动工具设置

快捷键“v”

左上方，“自动选择”中选择“图层”。如果不弄这个，下一步会选中“组”

移动工具，按住ctrl，然后用左键点击，可以选中图层

视图设置

在“视图”中勾选“智能参考线”、“标尺”

窗口，只需要“图层”、“历史记录”、“信息”、“字符”

在信息的面板选项中，“第一颜色信息”、“第二颜色信息”的模式都选择 RGB。“鼠标坐标”的标尺单位用 像素，“状态信息”，勾选 文档大小， 文档尺寸

编辑

首选项->单位与尺寸

“单位”中的“标尺”和“尺寸”都用 像素

“列尺寸”中的“宽度”是 180点，“装订线”是 12点

“新文档预设分辨率”中的“打印分辨率”是 300像素/英寸，“屏幕分辨率”是 72像素/英寸

“点/派卡大小”是 PostScript(72点/英寸)

工作区

窗口->工作区->新建工作区

勾选键盘快捷键和菜单，可以将刚刚的设置保存下来

PS前端切图

1. 什么是切图？

从设计稿（如.psd文件）中切出图片素材（如.png、.jpg文件）DIV+CSS切图 1.第一步：从设计稿里面切出按钮、图标、logo、背景 图、其他内容性图片... 2.第二步：按照效果图，编写代码，引入切出来的图片，实现一个静态页面。

2.为什么要切图？

网页上的有些效果无法通过编写代码来实现，或者用代码实现的效果的兼容性不够好，此时，

可以通过引入图片资源的方式来实现这些效果。在网页中添加图片素材的两种方法：

1.HTML:img标签2.CSS:background属性

2.切片工具+参考线

* 弄好参考线之后，点击切片工具，点击上方的 基于参考线的切片 * 参考线的快捷键按住 Alt+v+e，要快 * 建议： 可以用裁剪工具，裁剪成小块来切 * 切好片之后，点击“文件”中的“存储为web所用格式” * 精准切图 * “文件”->脚本->将图片导出到文件

3.切图之前

**哪些是需要切出来的？

1.修饰性的（一般用在background属性——CSS） . 图标、logo . 有特殊效果的按钮、文字等 . 非纯色的背景 背景平铺：对于可平铺背景的切图，针对CSS中background-repeat属性 2.内容性的（一般用在img标签—HTML） . Banner、广告图片 . 文章中的配图…

关于前端的简单ps的工具及操作

1.移动工具—快捷键V

*设置*:选项区——自动选择、图层 *作用*:可以用鼠标直接移动psd图上的任意图层； 不过建议平时不要自动选择，Cmd+鼠标点击psd图上的任意图层，将会在图层面板自动选中该图层。

2.选取工具—快捷键M

添加到选区：按住Shift 从选区减去：按住Alt 按shift（画正圆） 按alt+shift（以中心画正圆） 删除选区--ctrl+d

3.裁剪工具+切片工具

适用于可以一刀切的活动页 1.拉参考线：从标尺栏拉线 2.选择切片工具点击“基于参考线的切片”按钮

切出来的图片存为哪种类型？

1.内容性的图片

颜色相对丰富，一般存为JPG格式，还需要进行压缩，以保证图片大小合适

2.修饰性图片

一般保存为PNG24格式（IE6不支持半透明）或者PNG8格式，两者皆支持全透明， PNG24还支持半透明，PNG24图片质量较高

上面就是总结的关于前端的ps技能,当然还有很多内容没有涉及到.自己也在不断学习和补充。

如果大家觉得这篇文章有用的话，点个收藏呦，谢谢！（想要学习前端的私信小编）

转载自Mr丶ing