Web需要用到的PS技能

WEB前端,常常会用到的PS操作有以下四种:

1、常规切图

2、生成图片资源

3、生成CSS代码

4、批量压缩图片

今天先来讲前两种:常规切图和生成图片资源

1、使用photoshop进行切图操作的方法步骤如下

进入主界面,添加要分割的图片,然后点击“切片工具”--“划分切片

1.jpg

将图片切成12片为例: 将划分切片的水平划分为4,垂直划分为3,如图所示

2.jpg

接着点工具栏最下面的键计入IR状态下编辑图片,如图所示

3.jpg

点击“文件”→“另存为”,将优化结果储存为HTML格式,如图所示

4.jpg

保存好后发现出现一个HTML格式的网,这里打开另一个文件名为Images的文件包,里面就是刚才分割好的小图片

5.jpg

发现打开这些小图时会返现默认为索引颜色,点击“图片”→“模式”→“RGB颜色”对小图片进行处理

6.jpg

 

2、使用photoshop进行生成图片资源的方法步骤如下

在Photoshop中点击“编辑”>“首选项”>“增效工具”,选择启用生成器

7.jpg

 


文件”>“生成”>“图像资源可用(如果设置首选项中没有在启用生成器上打钩,此功能将不可用)

8.jpg


新建一个图像资源生成案例文件

9.jpg


制作3个按钮,分别为默认状态,鼠标经过,鼠标点击

10.jpg


怎么导出呀,把图层名称加上格式后缀,再点击菜单“文件“>”生成”>”“图像资源“,就能自动同步导出。

11.jpg


12.jpg


默认导出的文件位置为本文档的存储位置,如果本文件没有存储,会自动导出到桌面,文件名为,“本文档名称“+  ”-assets“!

 13.jpg

 

查看导出的内容


14.jpg











 





返回按钮 回到页面顶部 点赞按钮