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

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

  • 网页设计新建文件格式: 预设:自定 宽度:1920像素 固定的 高度:不确定,先设置为2000像素 分辨率:一般设置为72像素/英寸 颜色:RGB颜色 8位 背景内容:透明色 (重点注意)
    查看全部
  • 自动输出切图方式 1 导出-将图层导出到文件(批量一次性全导出) 2 首选项-增效工具-启用生成器(可针对单个直接生成切图,主要掌握命名规则) 文件-生成-勾选图像资源 然后将要导出的图层或组命名,命名规则:图层/组.png 或.jpg 或.svg 或 200%图层/组 @2x.jpg/.png(自动导出多倍数的高清切图) 3 抽出资源 文件-抽出资源-选择要抽出的文件以及文件格式(PS CC 2014) 4 复制CSS 选中图层-图层-复制CSS-打开sublime 粘贴CSS代码
    查看全部
  • 隐藏参考线ctrl + H 比加分号好用
    查看全部
  • #ps技能—切图# 一。界面设置 1.新建:预设为web/自定义 1920像素的宽。 分辨率:72 颜色模式RGB 背景模式:透明 二。移动工具设置 1.自动选择:可以选择图层,之后可以选中某个图层的ctrl加单机 可以在右边找到 三。视图设置 1.视图--显示--智能参考线 勾选 方便切图 2.视图--标尺 勾选 3.窗口--可关闭不需要的窗口 4.右上角--面板设置--鼠标坐标单位:像素、颜色:RGB、文档尺寸:确定。
    查看全部
  • 1.新建设置: 像素: 宽1920,分辨率72,RGB颜色,8位,透明 2.移动工具设置: 左上角工具条建议不勾选“自动选择”,旁边下拉框选择“图层”. 使用时,按住ctrl然后点击鼠标左键。 3.视图设置: 工具栏[视图]菜单-->勾选<显示>:“智能参考线”和“标尺” 面板建议只留“图层”,“历史纪录”,“信息”,“字符”([窗口]菜单中添加) 在“信息”面板,点击设置,点击面板选项,“鼠标坐标”单位设置为<像素>,颜色模式rgb,勾选<文档尺寸> 4.[编辑]菜单里,打开[首选项],选择<单位与标尺>,将<单位>的标尺和文字改为<像素>,分辨率72 5. 保存为工作区 -===> [窗口] --> 工作区 --> 新建工作区(起名,下次直接选择)
    查看全部
  • ctrl+r显示或者隐藏标尺 alt可以改变参考线的方向 新建参考线的快捷键: alt+v+e可以快速新建垂直参考 alt+v+h可以快速新建垂直参考线 参考线隐藏ctrl+; ,重新打开ctrl+;
    查看全部
  • 到3-19分57秒
    查看全部
  • 单击文件-脚本-将图层导出到文件 文件类型:png-24 透明区域,交错,裁剪图层勾选 注意:比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本 当中引入堆栈,那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    2 采集 收起 来源:PS精准切图

    2017-01-18

  • 1,切片工具:灰色代表被动切片,蓝色代表主动切片 2,使用参考线切图 3,先使用裁剪工具---再使用参考线切图 4,切图完毕,导出步奏 文件---存储为web所用格式(快捷键:alt+shift+ctrl+s) 5,存储格式png-24
    查看全部
    2 采集 收起 来源:PS传统切图

    2017-01-18

  • ctrl+r显示或者隐藏标尺 alt可以改变参考线的方向 新建参考线的快捷键: alt+v+e可以快速新建垂直参考 alt+v+h可以快速新建垂直参考线 ctrl+;(分号)可以显示或者隐藏参考线
    查看全部
  • 3.Alt+delete前景填充,control+delete背景填充; 3.切换到选区工具——右键--变换选区--Alt+shift+鼠标左键——同心圆缩小--确定-delete删掉小同心圆内部颜色; 4.调整大小:control+t 自由变换选区 按住shift拖住右下角的控制按钮 缩小或放大<br><br> 5.复制图层 在移动工具 按住alt键拖动<br><br> 6.填充颜色 选中图层的缩略图 按住control单击图层 会选中图层中的像素 可以对图层中的形状填充颜色 7.复制四份并填充形影颜色值,调成五环的位置 8.删掉压住的部分,使其呈现出一环扣一环的效果:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • 设置:1视图-显示-勾选只能参考线 1,视图标尺; 2窗口-去掉调整,颜色,加上信息,字符。然后可以把不用的去掉 3.面盘选项-模式都改成rgb模式, 4.编辑-首选项-单位于标尺-单位改成像素 5,编辑模式的保存 窗口-新增工作区-保存名字便可在下次恢复默认之后之后用之前设置好的模式
    查看全部
  • 切图片开始
    查看全部
  • Ctrl+N 新建
    查看全部
  • 在选区状态下,按住Shift键是对选区执行“和”的逻辑操作,按住Alt键是对选区执行“减”的逻辑操作,我这么理解
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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