PS切图

作者: Anwfly | 来源:发表于2020-10-18 21:05 被阅读0次

​ 因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。

​ 部分操作:

  • 文件→打开 :可以打开我们要测量的图片
  • Ctrl+R:可以打开标尺,或者 视图→标尺
  • 右击标尺,把里面的单位改为像素
  • Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图
  • 按住空格键,鼠标可以变成小手,拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区


    1571494543539.png

一、切图

1.1. 常见的图片格式

序号 格式 特点和常用的用途
1 jpg JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片 经常用jpg格式的
2 gif GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效果
3 png png图像格式,是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景. 如果想要切成 背景透明的图片 ,请选择png格式.
4 psd PSD图像格式,Photoshop的专用格式,里面可以存放图层、通道、遮罩等多种设计稿. 对我们前端人员来说,最大的优点,我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.

PS 有很多的切图方式:图层切图、切片切图、PS 插件切图等。

1.2. 图层切图

简单版步骤:
① 使用移动工具,点击需要的图片

1571299959992.png

② 查看右侧,找到图片对应的图层,右击图层 → 快速导出为 PNG


1571300150618.png

但是很多情况下,我们需要合并图层再导出:

步骤:

​ ① 选中需要的若干个图层:选择一个图层,再按住shift键,继续选第二个图层:
​ ② 图层菜单 → 合并图层(ctrl+e)

1571300529539.png
​ ③ 查看右侧生成的新图层,在合并后的图层上,右击 → 快速导出为 PNG

1.3. 切片切图

步骤:
① 利用切片选中图片 :利用切片工具手动划出


1571301270696.png

② 导出选中的图片:文件菜单 → 导出 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。

注意:保存的时候,要选“选中的切片”:

1571301357818.png

1.4. 插件切图

1.4.1. 介绍

Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

1.4.2. 安装

注意: cutterman插件要求你的ps 必须是完整版,不能是绿色版,所以大家需要从新安装完整版本。

查看 “窗口菜单”里面的“扩展功能”:

​ ① 如果是扩展功能的是灰色的,表示就是绿色版的,需要重新安装PS

​ ② 如果是扩展功能右侧是可以使用的,表示就是完整版的,可以安装cutterman插件快速切图


1571302032310.png

官网: http://www.cutterman.cn/zh/cutterman

当cutterman 安装完成后,重启PS,会发现扩展功能里面多了一个cutterman工具:

1.4.3 使用步骤

​ ① 选择需要的图层

​ ② 选择web端,点击web下面的下拉三角

​ ③ 选择需要的图片格式

​ ④ 设置好存储路径

​ ⑤ 点击 “导出选中图层” 按钮

1571303715362.png

示意图:

<img src="images/sample1.gif" />

二、PS 基本操作

​ 因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。

​ 部分操作:

  • 文件→打开 :可以打开我们要测量的图片
  • Ctrl+R:可以打开标尺,或者 视图→标尺
  • 右击标尺,把里面的单位改为像素
  • Ctrl+ 加号(+)可以放大视图, Ctrl+ 减号(-)可以缩小视图
  • 按住空格键,鼠标可以变成小手,拖动 PS 视图
  • 用选区拖动 可以测量大小
  • Ctrl+ D 可以取消选区,或者在旁边空白处点击一下也可以取消选区

[图片上传失败...(image-de17ea-1603026310972)]

相关文章

  • ps切图

    ps ps首选项设置 编辑 > 首选项 > 单位与标尺 > 把文字和标尺设置成像素单位 > 确定 放大图片:”CT...

  • ps切图

    按住ctrl鼠标左击图片上元素,右侧会高亮元素对应的图层 在图层上按住鼠标左键不放能拖动该图层到指定位置 多个图层...

  • ps切图

    1)清除参考线--- 视图->清除参考线 2)切图-----------图层->基于图层的切片1,使用切片工具Pa...

  • ps 切图

    本文以 PS CC 2015 为例 旨在熟悉简单的切图步骤,更为巧妙的切图技巧--请自行Google 搜索慕课网上...

  • PS切图

    ​ 因为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是...

  • PS切图

    常用知识点 网页常用尺寸:1920px*1080px 快速使用工具栏工具的快捷键:先按Alt,菜单栏下部会出现短横...

  • PS切图

    除了用切片工具一个一个框起要切的部分进行分割,还可以使用参考线,使用参考线划分之后,会出现这样的按键 点击这个基于...

  • PS 切图

    一、安装和基本设置(二)界面设置: 视图:显现>智能参考线、标尺 窗口:设置四大常用选项卡:信息、字符、图层、历史...

  • ps切图

    切图 1、找到切片工具 2、导入psd后,找到要切的图片 把其他一些图片点掉,留下你要切的那个图层 3、保存 保存...

  • 网页(UI)设计--切图标注工具

    cutterman(免费)--切图(ps 插件) parker(收费)--标注(ps 插件) PxCook(免费)...

网友评论

      本文标题:PS切图

      本文链接:https://www.haomeiwen.com/subject/oppapktx.html