为了账号安全,请及时绑定邮箱和手机立即绑定

前端工程师必备的PS技能——切图篇

  • 简单工具操作(一) 移动工具(V): 按所属快捷键直接切换 快捷键所示操作。 选择图层,自动选择可选可不选,按Ctrl,点击即可移动。 选区工具(M): Shift:正图形 Alt:以小箭头为中心画区域 Shift+Alt:以鼠标所示位置为图形中心画区域(先放开鼠标!) Shift:增加选区快捷键 Alt:减去选区快捷键 按M:自动进入选区工具 按Shift+M:切换选区工具图形 删除选区:Ctrl+D 套索工具(L):<选择其他图形> Ctrl+"+":放大图形 Ctrl+"-":缩小图层 按空格键切换:抓手:可拖动 套索工具:也利用选取的Shift,Alt进行选取的加减(通用) 磁性套索工具:根据颜色进行选择。 快速选择(W): 左花括号:画笔的缩小 右花括号:画笔的放大 魔棒工具(W)选区针对图层,填充 裁剪工具(C): 1.拖动可控角选择区域 2.拖动鼠标选择所选区域 技巧:在移动工具中按Ctrl选定图层,单击,切换到裁剪工具,就能得到图形或最小矩形区域。(非常实用) 单独一个图层的显隐模式:裁剪选定元素后,按Alt+图层的眼睛(!将其他图层全部隐藏,得到只有一个图层的显隐模式!) 吸管工具(I):       吸取所选颜色。 以上6个工具同属一组!
    查看全部
  • 扩展知识介绍 一.自动切图 1. 编辑一一>首选项(Ctrl+K)一一>增效工具一一>这里对“启动生成器”打勾√ (更改在下一次启动 PS 后生效) 2. 文件--生成--图像资源(将其打勾√ )勾选后PSD 文件所在路径会出现对应文件名“-assets”的文件夹。 3. 对文件所在图层进行重命名,比如要导出.png图片,命名后再对应的-assets文件夹中会出现命名的图片。 4. 如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在-assets文件夹内消失。 5. 可以通过图层和图层组的文件后缀名来控制导出图片质量,例如“.jpg8”则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 6. Retian优化 @如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 7. SVG(矢量图格式)(同WebP格式) @SVG生成:改后缀名可自动生成SVG。 @SVG导出:选中资源-文件-抽出资源,抽出SVG图片。 8. 复制CSS:选中资源-图层-复制CSS ,单击右键在DW编辑器中,直接出现代码。 @这里将图层默认识别为类。 9. 图层管理:图层下方可选择类型(各属性),进行图层筛选。
    查看全部
  • ctrl + r 标尺的快捷键 ctrl +选择工具 选择图层 shift 画正方形/圆形 增加图层 alt 减少图层 ctrl +'+'放大镜 ctrl+'-' 缩小 图层的快捷键 M 套索工具的快捷键L快速选择的快捷键W 裁剪工具的快捷键C 新建参考线:Alt+V再按住E ctrl+; 将参考线隐藏。
    查看全部
  • 1111
    查看全部
  • alt+shift 以一个中心画圆
    查看全部
  • 我要学
    查看全部
  • #3.1简单工具操作1# ps界面中有菜单栏、属性栏、工具栏、面板、工作区。 移动工具快捷键(v) 选框工具快捷键(m),按shift(画正圆),按alt+shirt(以中心画正圆),按shift+m为选框工具的切换。 放大快捷键ctrl++,缩小ctrl+- 快速选择工具画笔的放大缩小可以按"[""]"这两个括号来调整。 裁剪文字时,按住alt单击眼睛,隐藏背景,也就是显影模式,可以用来导出png图片! 盖印图层的概念:快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。 alt键可以确定圆心在哪里。 shift可以让圆成为正圆 小技巧 1.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 2.当使用选区工具,选中一个不规则选区时,按下裁剪工具,会围绕选区,选出一个最小的矩形 3.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 4.ctrl+左键点图层缩略图,给图层加选区
    查看全部
  • 工具栏: 编辑-->首选项-->单位与标尺:勾选“像素”
    查看全部
  • 信息栏设置: RGB颜色 像素 文档尺寸勾选
    查看全部
  • ps界面设置 信息、字符 图层、历史记录
    查看全部
  • 文字工具:1.默认有毛边。可以选择windowslcd、锐利、浑厚等等。 选择钢笔工具后可以,画一条波浪线,文字就会沿波浪线放置。 2.文字工具有一个蒙版工具,写上文字可以填充颜色。 3.路径选择工具:可以移动钢笔画出的路径,直接选择工具:可以移动路径的某个点。 4.各种形状工具:矩形工具、圆角矩形等等。还有自定义形状。 5.抓手工具=选择工具+空格键。 6.填充前景色alt+del,背景色ctrl+del。 7.按住h键不放手的同时按住鼠标左键,可以让图片边的小,然后出来一个方框,我们想选哪一部分就在哪一部分放手,我们想要的那一部分就变大了。(cc之后版本是这样,以前用z+空格)
    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • 1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • 1.1alt+鼠标滚轮放大缩小; 1.2Ctrl+单击左键自动选择; 1.3 Ctrl+单击图层,形成选区 #2.1界面设置# 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • 新建web图层
    查看全部

举报

0/150
提交
取消
课程须知
本课程适合对Photoshop有简单了解,希望学习前端开发切图方法的用户。
老师告诉你能学到什么?
使用Photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源,并进行简单的调整和处理。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!