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

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

  • 传统截图需要参考线
    查看全部
    0 采集 收起 来源:PS传统切图

    2017-03-01

  • 一 图层 1 新建:CTRL+N 宽度:单位为“像素”,宽度固定为:1920; 高度:单位为“像素”,高度可自定义; 分辨率:常用为“72 像素/英寸”; 颜色模式:RGB,8位; 背景内容:透明。 2 初始化界面设置: V移动工具 勾选自由选择 下拉选择图层 可以自由移动图层 PSD图 视图设置:勾选“视图-显示-智能参考线”、“视图-标尺”; 窗口设置:勾选“窗口-历史记录”、“窗口-信息”、“窗口-字符”、“窗口-图层”; 信息面板设置:颜色模式都选为“RGB模式”,标尺单位选择“像素”,状态信息勾选“文档尺寸”; 编辑设置:“编辑-首选项-单位与标尺”中,单位都选择“像素”,打印分辨率:300,屏幕分辨率:72;
    查看全部
  • 隐藏/显示参考线 ctrl+;
    查看全部
  • 新建参考线 alt+V+E
    查看全部
  • 按住alt拖动复制图层
    查看全部
  • kty
    五 自动切图 1 “编辑-首选项-增效工具”: 勾选“启用生成器”; 2 勾选“文件-生成-图像资源”; a 勾选后,在该psd文件所在文件夹下,会自动生成一个以该文件命名的文件夹; b 若想要某图层/图层组的图片,可直接在该图层/图层组的名字后加上”.png”后缀,则在a所诉的文件夹中会自动生成所需的png图片;(后缀改为“.jpg”、“.svg”同样可以)。 c 若需生成的图片增大,可在加后缀后,在名称前加需增大的百分比。(例如logo, 要两倍大的:则将名字改为200% logo.jgp); d 若生成图后,不想要了,则可将加的后缀重命名时去除后缀即可; e 若想生成的图片的质量为原来的80%,则可在后缀后加数字8.(例如logo,则改为: logo.jpg8 ); 六 图层复制css :鼠标单击图层,单击鼠标右键,复制css。 七 图层管理:可通过名称、颜色等等来查找到所需要的图层。
    查看全部
  • 右边选中图层,然后按住crtl 鼠标单击图层的缩略图就可以选中这个图层
    查看全部
  • 圆选中 右键变化选区 选中图层 按住alt拖动
    查看全部
  • 前景色填充 alt+delete 背景色填充 ctrl+delete
    查看全部
  • kty
    一 界面设置 1 新建: 预设:web 宽度:单位为“像素”,宽度固定为:1920; 高度:单位为“像素”,高度可自定义; 分辨率:常用为“72 像素/英寸”; 颜色模式:RGB,8位; 背景内容:透明。 2 初始化界面设置: 移动工具: 勾选“自动选择”,下拉框选择“图层”; 视图设置:勾选“视图-显示-智能参考线”、“视图-标尺”; 窗口设置:勾选“窗口-历史记录”、“窗口-信息”、“窗口-字符”、“窗口-图层”; 信息面板设置:颜色模式都选为“RGB模式”,标尺单位选择“像素”,状态信息勾选“文档尺寸”; 编辑设置:“编辑-首选项-单位与标尺”中,单位都选择“像素”,打印分辨率:300,屏幕分辨率:72; 工作区调整好,以上设置完后,“窗口-工作区-新建工作区”,将工作区保存,方便以后调用。
    查看全部
  • kty
    二 参考线的使用: “ctrl + 分号” 表示显示/隐藏参考线。
    查看全部
  • kty
    三 传统切图 1 切片: a 裁剪工具-切片: 手动一个一个切所需的图片。 b 先拉好参考线,裁剪工具-切片-基于参考线的切片,切好后删除不需要的切片。 c 先裁剪,再切。 2 导出切片图片: “文件-导出为web所用格式”, 常保存为:PNG-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2017-02-28

  • kty
    四 精准切图 1 “文件-脚本-将图层导出到文件”: 文件类型: PNG-24 PNG-24选项: 勾选 “透明区域”、“交错”、“裁剪图层”
    查看全部
    0 采集 收起 来源:PS精准切图

    2017-02-28

  • ps
    查看全部
  • 1.按住shift,选框,先放鼠标,后放shift 2.alt键 中心 减少选区,shift增加选区 3.双击闭合 4.enter裁剪确认 5.历史记录
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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