前端 ~ PS切图工具

最新推荐文章于 2024-06-27 11:00:23 发布

「已注销」

最新推荐文章于 2024-06-27 11:00:23 发布

阅读量1.1k

点赞数 2

分类专栏： Tools 文章标签： ps

本文链接：https://blog.csdn.net/Allisa_yan/article/details/89472904

版权

Tools 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

* 工具准备 *

1、PS（photoshop）

【注意】：安装时，需要先选择“试用”，之后通过注册机进行注册，直接重新打开ps应用即可（应该会无需登录）

2、更改：缓存盘路径、默认单位

【注意】：ps安装时默认缓存盘是系统盘，默认单位是cm；

【编辑->首选项->暂存盘】，选择除了C盘以外的盘符，确定即可；
【编辑->首选项->单位与标尺】，标尺/文字修改为“像素”，确定即可；

* 操作 *

【注意】：常用的工具在【视图】、【窗口】中都可以找到，具体可参考《ps快捷键.pdf》（ps中默认文件格式为.psd格式）

1、切图

（1）选用切图工具，【文件->导出->存储为web格式】（png-8即可）（会自动生成一个images文件夹）；

（2）将图层移动到新建的图层中，【图像->裁剪->确定】（可保存为一个独立的图标）；

切图保存格式：

gif：动图&背景透明颜色单一的小图标；
jpeg：不能处理背景颜色为透明的图片；（品质越高，图片清晰度越高）
png-8：
png-24：ie浏览器低版本不支持
wbmp：

2、文字

（1）选择【T】，直接选中图片中文字，即可查看文字的样式；（或者是直接打开【字符工具】）

（2）导航栏中红色背景可以通过切图运用，但是写网页时应该越少使用图片越好，图片越多网页加载速度越慢，所以需要设置【图像->画布大小】“宽度”设置为1，再【文件->导出->存储为web格式】（jpg格式即可）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切图教程</title>
    <style>
        .nav{
            width: 83px;  /*设置为实际图片大小*/
            height: 37px;
            background: url("images/nav-btn.jpg"); /*图片宽度为1，则实现图片平铺*/
        }
    </style>
</head>
<body>
    <div class="nav"></div>
</body>
</html>

3、雪碧图

【注意】：因为网页中尽量少加载多个图片，则可以将所需要的图片都保存到一张图上，使用时通过位置判断使用哪张图片

4、搜索图标

（1）直接使用【裁切工具】，直接切图，保存；

（2）在【图层】中，选中放大镜和背景ctrl+E合并；

5、切图优化

颜色代替图片
雪碧图
字体图标

6、快捷键

撤销裁切（Ctrl+Alt+Z）
裁切（enter）
删除图层：enter
合并图层：Ctrl+E
移动：v
裁切：c

7、切图辅助

Markman：国内，快速测量图中颜色，字体大小，字体和文件之间的间距
TinyPNG：压缩图片
前端自动化：一键生成雪碧图等

【ps】：新手接触，仅仅记录下目前所学内容，后续涉及及时补充

「已注销」

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端 ~ PS切图工具

*** 工具准备 ***1、PS（photoshop）【注意】：安装时，需要先选择“试用”，之后通过注册机进行注册，直接重新打开ps应用即可（应该会无需登录）2、更改：缓存盘路径、默认单位【注意】：ps安装时默认缓存盘是系统盘，默认单位是cm；【编辑->首选项->暂存盘】，选择除了C盘以外的盘符，确定即可；【编辑->首选项->单位与标尺】，标尺/文字...
复制链接

扫一扫