关闭

Photoshop切图

标签: photoshopweb开发图片切图
828人阅读 评论(1) 收藏 举报
分类:

切图,顾名思义,将图片切成若干块,以供web开发使用。
原始图片如下:
Ps切图


直接使用切片工具

简单的切图工作我们可以直接使用切图工具。

比如我们需要切出左上角第二张图片。

首先我们选中切片工具

ps切图

shift加鼠标拖动是构建一个正方形,然后进行微调。

ps切图

蓝色部分就是切出来的图片,切完后存储为web所用样式即可。

ps切图


根据参考线切片

如果是较为复杂的切图需求,建议先建立参考线。

比如我们要刚才那片图片的中间四个子图片。

我们首先通过ctrl+r打开标尺,然后从标尺中拖出参考线
ps切图

可以看到青绿色的线就是参考线

然后我们点击切片工具,选择基于参考线的切片

ps切图

可以看到蓝色切图区域生成:

ps切图

接下来就是一个个的选中然后右键编辑,来微微调整了。

最后还是保存为web样式。四个图就切出来了:

ps切图

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:252058次
    • 积分:4171
    • 等级:
    • 排名:第7874名
    • 原创:146篇
    • 转载:0篇
    • 译文:0篇
    • 评论:78条
    博客专栏