前端ps切图(css页面制作切图教程)

常见的图片格式

jpg格式

文件名.jpg |文件名.jpeg。

特点:色彩信息保留较好,高清,颜色较多。

实际用处:常用于产品类图片。

gif格式

文件名.gif。

特点:最多存储256色,可以保存透明背景和动画效果。

实际用处:简单图形及字体,动态图。

png格式

文件名.png。

特点:存储形式丰富,可以保存透明背景。

实际用处:微信表情包

psd格式

文件名.psd。

是Photoshop的专用格式。

特点:可以存放图层、通道、遮罩等多种设计稿。

实际用处:可以直接从上面复制文字、获得图片、测量大小和距离。

PS切图

切图方式:图层切图、切片切图、PS插件切图等。

  • 图层切图

第一步需要先选中需要的图层

初识CSS——PS切图

鼠标单击图层就是选中,被选中的图层颜色背景颜色变浅。

选中单个图层:

鼠标选中图层后右击——快速导出为PNG——设置文件名——保存。

初识CSS——PS切图

选中多个图层:

图层连续排列:长按shift键不动+鼠标选中所需的第一个图层+鼠标选中最后一个图层。

初识CSS——PS切图

长按shift键选择图层

图层不连续排列,长按ctrl键不动+鼠标点选所需图层。

初识CSS——PS切图

长按ctrl键选择图层

第二步选中需要的图层后

选择图层菜单(或直接在任意选中的图层上右击)——合并图层(Ctrl+e)——右击合并图层——快速导出为PNG——设置文件名——保存。

初识CSS——PS切图

合并图层

初识CSS——PS切图

导出png

  • 切片切图

在左侧工具栏选中切片工具——框选所需图片——选择格式——保存——切片选择:选中的切片——保存。

初识CSS——PS切图

左侧选项卡中第五个凹陷的小刀就是切片工具

在图层选项卡上背景图片的左侧有个小眼睛的标志,这个是代表图层的可见性,点击小眼睛就会不可见图层,背景就变成透明的。

在背景透明的情况下,使用切片工具选中想要裁切的内容

初识CSS——PS切图

切片工具切出内容

“文件”——导出——存储为web所用格式

初识CSS——PS切图初识CSS——PS切图

选择图片存储位置,在最下方切片选项那里,选择选中的切片。

初识CSS——PS切图

选项卡最下方切片:选中的切片

jpg格式:保存的切片图带有纯色背景;

png格式:保存切片图是透明背景。

格式级别越高,图片越清晰,相对内存越大。

  • PS插件切图

Cutterman:在ps中运行的插件,可以代替手工导出以及使用切片工具切图。

使用方法:首先从Cutterman官网上注册账号并下载安装包进行安装。

要求:ps必须是完整版的,绿色版本不支持。

官网网址:***

下载好之后,解压。双击.exe安装文件。默认安装地址,直接点击安装。

安装好之后重启PS。

选择窗口——扩展功能——Cutterman切图神器——最后注册Cutterman账号登录使用。

初识CSS——PS切图

暂时不想使用插件切图,就不多赘述了,有需要的可自行了解。

明天开始准备使用学成在线这个案例,练练手。

本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023-07-04 10:12
下一篇 2023-07-04 11:04

相关推荐