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

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

  • 传统切图方法:拉参考线,用切片工具一个个切 精确切图方法:用ps的自动化工具,文件》脚本》将图层导出到文件,即可自动化地取每个图层中的各个图片(这个方法非常强悍!)
    查看全部
  • 网页设计制作时一般是1920px*1080px,分辨率为72,背景颜色为透明
    查看全部
  • 单位都为像素
    查看全部
  • 信息 字符 图层 历史记录
    查看全部
  • 这一节课有切图实用技巧
    查看全部
  • 传统的快速切片方式:先将图片根据不同的区块裁剪出来(为了便于参考线不太混乱),然后再拖动参考线去将图片进行一个大概的标块,标块之后在软件上方选择【将参考线转化为切片】这样的选项即可完成大致的切图,之后我们可以在不需要细致的切图区右击选择【删除切片】将不需要的切片删掉合并,最后一步到【文件】-【存储为WEB格式】
    查看全部
    0 采集 收起 来源:PS传统切图

    2015-10-02

  • 选择图片的保存为PNG-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2015-10-02

  • 传统的快速切片方式:先将图片根据不同的区块裁剪出来(为了便于参考线不太混乱),然后再拖动参考线去将图片进行一个大概的标块,标块之后在软件上方选择【将参考线转化为切片】这样的选项即可完成大致的切图,之后我们可以在不需要细致的切图区右击选择【删除切片】将不需要的切片删掉合并,最后一步到【文件】-【存储为WEB格式】
    查看全部
    0 采集 收起 来源:PS传统切图

    2015-10-02

  • 切图: 1、用切片工具一块一块切出来 2、拉参考线,选择切图工具,在上方选择基于参考线切图,然后把不需要的切片删掉。 3、精确切图:文件-》脚本-》将图层导出到文件,选择文件夹,png-24文件类型,勾选以下所有选项,运行 4、自动切图:编辑-》首选项-》增效工具-》勾选启用生成器。文件-》生成-》图像资源。(这时在当前图层的文件下自动生成一个文件夹用来存储切出来的图片)。切图方式:重命名图层(或组)的名字为:名字.png/jpg等,此时在文件夹中就有了这个图像。删除名字的后缀名图像也跟着删除。 扩展:复制css:选中图层,智能对象图层-》复制,已经复制了css代码,在编辑中粘贴就行。
    查看全部
    0 采集 收起 来源:PS精准切图

    2015-10-02

  • 网页切图工作区:在窗口中调出信息、字符、图层、历史记录4个面板就可以。为方便使用,可窗口-》工作区-》新建工作区,勾选所有项,保存当前工作区为web切图,需要时再窗口-》工作区-》web切图调出来。防止日后需要用到其他面板又得重新配置回来
    查看全部
  • 请看,快速找到所需图像图层,在移动模式下,勾选上方“自动选择”(或者按住ctrl)和邻右边的组-》图层,点击内容的图像就可定位到相应图层,
    查看全部
  • 请看,现今的网页设计尺寸,宽度固定1920,高度不固定,分辨率72,背景内容透明
    查看全部
  • alt+shift 键可以定圆心画正圆!
    查看全部
  • 按住shift键拉正圆后一定要先放左键再松开shift键!
    查看全部
  • 【Photoshop CC 版本支持】 · 文件--抽出资源(可以导出图层为指定格式) · 图层--复制 CSS (可以将矢量图形对象复制为 CSS 代码) 1、CSS 代码会以图层名称作为 class 名称 · 图层管理 图层面板处,可以使用 名称、智能对象、颜色等进行筛选查找
    查看全部

举报

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

微信扫码,参与3人拼团

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

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