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

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

  • 扩展知识介绍 一.自动切图 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. 图层管理:图层下方可选择类型(各属性),进行图层筛选。
    查看全部
  • 永远记住,勤、练、做、看、想,没有任何诀窍。
    查看全部
  • Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动+Alt+拖动:复制并且自动新建图层 移动工具:针对的是选中的图层 Ctrl+鼠标左键单击某图层:直接移动该图层 裁剪:按住Alt键,以图像为中心建立裁剪区域 建立选区->选中图层->减掉不需要删除的选区->Delete->删除该图层的选区部分->达到五环效果
    查看全部
  • ps切图
    查看全部
  • 查看全部
  • 基本操作
    查看全部
  • 界面设置 ctrl+N(新建) 预设:自定义 宽度:1920 高度:2000 分辨率:72像素(比较流行) 背景内容:透明(注意) ----------- 移动工具设置:快捷键V——上方属性栏,自动选择不要勾选,冒号后,选中图层。当,想选中一个图层时,按住ctrl+左键,就会选中此图层,并可以拖拽 ----------- 视图设置:上方菜单栏-视图-显示-智能参考线(切图会提供很大帮助) 打开标尺:上方菜单栏-视图-标尺(也可以ctrl+r) 窗口设置:不需要的统统关闭;库、颜色、右侧的:通道、路径等关闭,只留四大面板在右面信息和字符(放上面),图层和历史记录(放下面) 信息设置:单击信息右侧的设置-面板选项:第一第二颜色模式:RGB;标尺单位:像素;文档尺寸勾选 ----------- 编辑设置:菜单栏-编辑-首选项-单位与标尺,将标尺和文字都改为像素 小经验: 选中一个图层:右下角图层位置,ctrl+点击,在图片中形成一个选区,并且选区的信息会出现在面板中;如果选中字的话,字体信息也会显示在面板上。 建议:窗口-工作区-新建工作区:取名,并勾选两个选项:此方法可以保存之前的设置信息,以免,软件设置复位基本功能后,找不回之前的设置。
    查看全部
  • 这个重要
    查看全部
  • alt + V + E :新建参考线<br> alt + V + E + H :新建水平参考线<br> alt + V + E + V :新建垂直参考线<br> 选定图层后移动参考线,参考线会自动靠到图层的边缘上。 ctrl + ; :隐藏参考线
    查看全部
  • Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动+Alt+拖动:复制并且自动新建图层 移动工具:针对的是选中的图层 Ctrl+鼠标左键单击某图层:直接移动该图层 裁剪:按住Alt键,以图像为中心建立裁剪区域 建立选区->选中图层->减掉不需要删除的选区->Delete->删除该图层的选区部分->达到五环效果
    查看全部
  • #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+左键点图层缩略图,给图层加选区
    查看全部
  • 界面设置 ctrl+N(新建) 预设:自定义 宽度:1920 高度:2000 分辨率:72像素(比较流行) 背景内容:透明(注意) ----------- 移动工具设置:快捷键V——上方属性栏,自动选择不要勾选,冒号后,选中图层。当,想选中一个图层时,按住ctrl+左键,就会选中此图层,并可以拖拽 ----------- 视图设置:上方菜单栏-视图-显示-智能参考线(切图会提供很大帮助) 打开标尺:上方菜单栏-视图-标尺(也可以ctrl+r) 窗口设置:不需要的统统关闭;库、颜色、右侧的:通道、路径等关闭,只留四大面板在右面信息和字符(放上面),图层和历史记录(放下面) 信息设置:单击信息右侧的设置-面板选项:第一第二颜色模式:RGB;标尺单位:像素;文档尺寸勾选 ----------- 编辑设置:菜单栏-编辑-首选项-单位与标尺,将标尺和文字都改为像素 小经验: 选中一个图层:右下角图层位置,ctrl+点击,在图片中形成一个选区,并且选区的信息会出现在面板中;如果选中字的话,字体信息也会显示在面板上。 建议:窗口-工作区-新建工作区:取名,并勾选两个选项:此方法可以保存之前的设置信息,以免,软件设置复位基本功能后,找不回之前的设置。
    查看全部
  • 视图--显示:智能参考线 标尺Ctrl+R 窗口--关闭库、颜色、通道、路径、段落 属性 打开 :字符(窗口)、信息(设置信息面板选项 --鼠标坐标单位:px 第一/二颜色信息:RGB 选中:文档大小、文本尺寸)形成四大面板:图层、字符、信息、历史记录 编辑--首选项--单位与标尺--单位:标尺、文字:px /新文档预设分辨率-屏幕分辨率:72
    查看全部
  • 1.Ctrl+N 新建(存储预设) 预设:Web 大小:Web(1920*1080)(单位为px),若为默认(单位为cm) 分辨率:72 颜色模式:RGB颜色 8位 背景内容:透明
    查看全部
  • 扩展知识介绍 一.自动切图 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. 图层管理:图层下方可选择类型(各属性),进行图层筛选。
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

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