PS切图新手实用入门

作者: zengsiyong | 来源:发表于2017-04-24 18:12 被阅读216次

注:本文使用的PS软件为CS5和CC2017,所以适用各个版本PS

PSCC2017.jpg

一、PS首选项设置

  • 在顶部菜单栏中选择 编辑>首选项>单位和标尺

    菜单选择.png
  • 标尺与文字选择为 像素

    修改单位标尺.png

二、工作区面板设置

  • 在菜单栏 窗口 中打开三个视图面板

    视图面板设置.png
  • 保存到新建的工作区


    保存新建工作区.png

三、基本工具设置

  • 移动工具 : 将自动选择打钩,选择 图层 而不是

    移动工具设置.png
  • 魔棒工具 : 容差越小,选择的颜色范围越小

    魔棒工具修改容差

四、辅助视图

  • 在菜单栏 视图 中开启 : 显示额外内容、对齐、标尺、参考线
    视图设置.png

五、切图常需测量的数值

  • 宽度、高度
  • 内边距、外边距
  • 边框
  • 定位
  • 文字大小
  • 行高
  • 背景图位置

六、使用矩形选框工具进行长度测量

  • 矩形选框 : 选择图片后通过 信息 面板查看图片的宽和高

    查看图片的宽和高.png
  • 使用选框测量嵌入背景中的字体大小,高度即为字号大小


    测量嵌入背景中的字体大小.png
  • 快捷键

  • 添加到选取 : 在已选区按住 shift

  • 从选区减去 : 在已选区按住 alt

  • 与选取交叉 : 在已选区按住 shift + alt

七、取色

  • 使用 拾色器&吸管工具
    拾色.png
  • 拾色器中的此值用来应用在css中


    css应用数值.png

八、常见切图需求

  • 隐藏文字只留背景
    背景是纯色适合拉伸时,使用 ctrl+T,先矩形选框一小块区域,然后拉伸覆盖字体
    拉伸背景图片

背景有纹理时,先用矩形选框一小块区域,然后按住alt(shift键可以保证拖动选框时是水平方向)

  • 抠播放按钮
      在 矩形工具 框选按钮图标区域,使用 魔棒工具,容差按背景颜色设定,鼠标点选按键内的空白部分,就可以扣出按钮,可以结合以下快捷键
ctrl+shift+T(反选)
alt + 魔棒(删减选中区域)
shift + 魔棒(增加选中区域)
Paste_Image.png
  • 切片工具
    在需要切图的地方画置参考线,画好后点选 切片工具,上方选择基于
    参考线自动切片,如图对应两条参考线自动切好。
    切片工具的使用.png

点击 文件>导出>存储为Web所用格式

保存切片.png

选择好切片,右边统一修改为JPG格式,高,品质60,点击下方保存(点击菜单栏的 双联 可以对比保存前后的切片图)

设置图片选项.png

九、图片保存类型

平时在ps中对于用于网站设计的图片,应该存储为web所用格式

图片保存类型.png
  • 保存类型一 : 当图片色彩丰富且无透明要求时,建议保存为JPG 格式并选择合适的品质
  • 保存类型二 : 当图片色彩不太丰富时无论有无透明要求,请保存为 PNG8
  • 保存类型三 : 当图片有半透明要求,请保存为 PNG24
  • 保存类型四 : 为保证图片质量,保留一份 PSD ,方便修改

十、修改和维护

  • 更改画布大小:菜单栏 图像>画布大小
  • 减小画布到制定区域矩形工具 选中区域后菜单栏选中 *** 图像>裁剪***,或者直接使用 裁剪工具
    修改画布.png

十一、常用快捷键

  • 图层窗口中使用 Ctrl 可以多选所需图层
  • 右键合并图层(Ctrl +E
  • 复制图层(Ctrl + C
  • 新建文档用于存放合并修改好的图层(Ctrl + N
  • 粘贴图层 (Ctrl +V
  • 跨文档移动图层也可以通过在图层右键点击复制图层后选择要粘贴到的文档,或者直接拖动图层到另外一个文档。

注意事项

修改PNG8格式的图片时,需要在菜单栏 图像>模式>更改为RGB颜色

修改颜色模式.png

相关文章

  • PS切图新手实用入门

    注:本文使用的PS软件为CS5和CC2017,所以适用各个版本PS 一、PS首选项设置 在顶部菜单栏中选择 编辑>...

  • 【ps教程】价值1888元的ps新手入门教程,免费送啦!

    今天给大家分享一套ps新手入门教程,包括软件介绍,各功能按钮操作说明,以及各种工具的操作介绍,还有17种ps实用技...

  • ps切图必知必会

    收听音频戳链接ps切图必知必会 前言 对于前端切图,相信很多小伙伴都不会陌生,但是对于新手,有时却很棘手,想着我本...

  • 60集全套ps工具技巧零基础入门视频教程+经典素材,新手免费教程

    60集全套ps工具技巧零基础入门视频教程+经典素材,新手免费教程 2019年ps工具技巧教程 PS之所以广为职场青...

  • ps新手入门

    新手入门的必要步骤: 1

  • PS 快速抠图:新手必学

    今天给大家介绍一个超简单超实用的PS抠图方法,对于大部分图片来说,还是比较适用的,特别适合新手。好了,话不多说,下...

  • Polarr Photo Editor Pro for Mac

    下载地址:风云社区 无论你是入门新手还是摄影专家,泼辣修图都可以满足你的需求。对于入门新手而言,泼辣修图搭载的先进...

  • ps切图

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

  • ps切图

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

  • ps切图

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

网友评论

    本文标题:PS切图新手实用入门

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