前序1 前端ps基础

1、常用的图片格式以及他们在网页中的应用

图片格式	透明度支持	应用场景	示例
psd	啥都支持，分图层	一般都是设计师给前端的设计稿
JPG	不支持透明、半透明，所有空白区域填充白色	网页中的大图，高清图（体积大）	多数电商网站的产品列表
gif	支持透明，不支持半透明	网页中的小图标或者动画图片	很多动图的表情包都是，在网页上很多loading图片都是gif。如 http://www.lanrentuku.com/gif/a/loading.html
png8	支持透明，不支持半透明	网页中的小图标	因为ie下不太兼容，所以只会在个别场景应用
png24	支持透明，也支持半透明	图像中存在半透明效果的图片	因为ie下不太兼容，所以只会在个别场景应用

2、ps中常用的面板和工具

    下载好ps用具后，可以找下我们前端开发常用的面板（如图所示）。

2.1工具面板

         工具面板中包含了我们常用的一些小工具。

2.1.1缩放工具

         打开一个文件，如果文件太大，怎会有点看不太清楚。此时可用缩放工具对图片进行放大。快捷方式：按住ctrl+alt的同时滚动鼠标。

 

2.1.2矩形选框工具

         矩形选框工具的作用有两个，一个是测量（详情见2.3信息面板），一个是抠图（详细方法见2.2图层面板。）。

2.1.3拾取颜色

         拾色器长得有点像胶头滴管。单击拾色器，再点击想要取色的地方，颜色区就会变成你要拾取的颜色。单击颜色区可查看颜色的具体信息。

  

2.1.4移动工具（自动选择）

       当我们前端拿到设计师给的设计稿时（一般是psd），我们可以使用该工具定位到目的图层。详细方法见2.2图层面板。

2.2图层面板

       点击移动工具，勾选自动选择图层。此时点击psd文件上的任意位置，在图层面板上都会选中该图层。图层前边的小眼睛用于隐藏图层，亮的时候表示可见，灰色表示图层不可见。

 

         抠图的过程：首先定位到目标图片所在的图层（可用显示隐藏进行验证），然后使用矩形选框工具选中目标图片（最好刚好包住），最后复制选框中的图片（ctrl+c）黏贴到新建的文件中并保存。

2.3字符面板

         如果要测量设计稿中文字的大小，首先要定位到文字所在的图层。选中工具面板中的文字工具，点击文字，此时文字变为可编辑状态，字符面板出现文字的信息。

2.4信息面板

       测量图片大小的方法：使用矩形选框工具选中目标图片，在信息面板可看到图片的宽（W）高（H）。注：前端中我们用到的单位一般是px（像素）。

2.5历史记录

         历史记录面板中我们可对历史操作进行恢复。

2.6其他常用

标尺、辅助线。

保存格式:另存为web格式（ctrl+shift+s）

版权声明：素材来源于妙味课堂