关闭

Photoshop切图

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

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


直接使用切片工具

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

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

首先我们选中切片工具

ps切图

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

ps切图

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

ps切图


根据参考线切片

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

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

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

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

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

ps切图

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

ps切图

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

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

ps切图

2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Photoshop CC中对图片进行切片分割

1.新建一个文档 2.将欲处理图片拖入背景中 3.选择切片工具,左边第五个,如果没有(在裁剪工具选项中右键第三个),选择划分切片,如图3*4划分 4.在窗口->动作中...
  • wangjianyu0115
  • wangjianyu0115
  • 2015-09-01 16:34
  • 2005

利用Photoshop进行快速切图

概要在UI设计中我们常常使用Ai来进行矢量图的绘制,然后导入Ps中进行设计、排版和导出。 在以前的版本中,切图一直是个很麻烦的事情,要么依托于脚本,要么手动一张张导出,很不方便,这种窘况在Photo...
  • u011383131
  • u011383131
  • 2016-03-11 22:02
  • 9955

前端ps切图,图文教程,详细。

写在前面:本文主要内容是目前我所知道的切图技巧结合网上的资料,写出来分享一波。图文教程,多图!! BB:很多人都会说,切图这个活倒底分给UI还是分给前端。虽然好的UI会给我们把图切好,但是他们切的图...
  • OBKoro1
  • OBKoro1
  • 2017-04-09 15:17
  • 4214

Photoshop——切图小技巧

准备工作把Photoshop功能面板设置成我们前端常用的并保存下来,这样就不用我们每次使用的时候都要花时间再去设置一次了。1、设置标尺单位——CSS里面用的最多的单位是像素(px),测量和读取的值也都...
  • Ling201509
  • Ling201509
  • 2015-09-19 21:09
  • 1305

使用Photoshop切片等分切图技巧

做网页时使用PS切片工具来切图是最常用的方法,这里我们不讨论简单的PS切图方法,主要来说说如何用PS切片来将图片切成等分大小的图块 教程:打开要分割的图片,点工具栏的切片工具,选择切片选...
  • Elina_1992
  • Elina_1992
  • 2016-12-24 11:56
  • 694

photoshop设置及切图

1.设置画布新建画布:Ctrl + N 注意:一定要设置成 像素。2.设置工具移动工具(V)设置步骤:①视图 → 显示 → 勾上 智能参考线(这个在切图中有很大帮助)。 ②打开标尺(Ctrl + ...
  • erdouzhang
  • erdouzhang
  • 2017-02-28 15:07
  • 161

前端必备之切图(一、使用PhotoShop测量和取色)

一、准备工作 1.首选项设置(快捷键:ctrl + K)     编辑 >首选项>单位与标尺(把文字和标尺的单位改为:像素)  2.面板操作(设置工作区)    在窗口中开启[工具 、...
  • fw_summer
  • fw_summer
  • 2017-07-19 20:53
  • 625

PhotoShop教程:切图那点事儿

切图的目的就是把设计图转化成网页代码,不用理解代码的含义也可以操作,所以独立一篇来讲。 早年间我学切图的时候,网上就没看到过什么教程的,只能靠自己摸索学习,挺简单的东西还是绕了点弯子。这次写出来...
  • gebitan505
  • gebitan505
  • 2014-06-09 10:19
  • 1155

前端Photoshop切图快速入门

如果你是一个从没用过ps的同学,请打开软件边看边尝试。相信这样可以让你更快的熟悉切图的基本方法,自己多练习应该可以满足前端工作中遇到的切图需求啦。(坚持看完,你会有收获的,当然仅仅是入门一丢丢咯~)P...
  • Admin_yi
  • Admin_yi
  • 2017-03-04 12:05
  • 1156

前端工程师技能之photoshop巧用系列第三篇——切图篇

前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图。本文是photoshop巧用系列的第三篇——切图篇   切图信息   在网页制作中有哪些图片是需...
  • yinjing8435
  • yinjing8435
  • 2017-05-02 22:58
  • 70
    个人资料
    • 访问:296790次
    • 积分:4530
    • 等级:
    • 排名:第7544名
    • 原创:146篇
    • 转载:0篇
    • 译文:0篇
    • 评论:86条
    博客专栏