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

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

  • css
    查看全部
  • 设置: 1.视图-显示-勾上智能参考线 2.视图-标尺 3.窗口-去掉调整、颜色-加上信息、字符,然后去掉不需要的(通道、路径、属性、段落、) 4.选中信息右上角的面板选项-把模式都改成RGB颜色、标尺单位改成像素、勾上状态信息中的文档尺寸 5.编辑-首选项-单位与标尺-把单位改成像素就可以了
    查看全部
  • 盖印图层就是把所有图层拼合后的效果变成一个图层,但是保留了之前的所有图层,并没有真正的拼合图层,方便以后继续编辑个别图层。
    查看全部
  • 选框工具,shift键画正圆,正方形,ALT键制定图形中心画选框
    查看全部
  • 第一节:目标
    查看全部
  • 自动选择不勾选--》图层 按住ctrl键 选择相应的图层
    查看全部
  • 切图技巧步骤1:编辑- 首选项 - 增效工具 - 使用生成器 切图技巧步骤2:文件-生成 - 图片资源【直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ,自动导出或删除图片。注意:文件名还可以命名为200%文件名(x%文件名是原大小百分之x大小),jpg8、.png8、.png24....(原质量的百分之x)】 .svg格式是一种矢量图的格式,图片变成代码。 抽出资源:文件-抽出资源 复制css:选择-图层-复制成css样式(非智能对象),可用于自己制作的图片或文字 1.编辑——首选项ctrl+k——勾选启动生成器 2.文件——生成——勾选图像资源【文件夹.assets】 3.文件命名--200%文件名space@/文件名8(尺寸/大小) 4.图层--复制CSS sublime text2【这个技能不错】 5.图层管理
    查看全部
  • 单击文件-脚本-将图层导出到文件 文件类型:png-24 透明区域,交错,裁剪图层勾选 注意:比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本 当中引入堆栈,那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    0 采集 收起 来源:PS精准切图

    2017-01-05

  • 1、切片工具切片 2、基于参考线的切片 3、利用裁剪工具,局部切片 4、存储为Web所用格式
    查看全部
    0 采集 收起 来源:PS传统切图

    2017-01-05

  • 选中,右键,填充,内容识别。 按住alt,点击眼睛,会取消点击之外的所有眼睛。
    查看全部
  • 1.新建设置: 宽度:1920px,高度自定义,分辨率:72,颜色模式:RGB颜色、8位,背景内容:透明。 2.移动工具设置: 左上角不勾选“自动选择”,旁边下拉框选择“图层”。使用时,按住ctrl然后点击鼠标左键。 3.视图设置: 勾选“智能参考线”,勾选“标尺”。 窗口中,将“库”、“颜色”、“通道”、“路径”、“属性”关闭,只留下“图层”,勾选“历史纪录”、“信息”、“字符”,接着单击“信息”面板,点击设置,点击面板选项,“鼠标坐标”单位设置为“像素”,颜色模式都使用rgb模式,勾选文档尺寸,然后单击确定。 4.编辑菜单里,打开首选项,选择“单位与标尺”,将“单位”的标尺和文字改为像素。
    查看全部
  • 切图技巧步骤1:编辑- 首选项 - 增效工具 - 使用生成器 切图技巧步骤2:文件-生成 - 图片资源【直接通过向图层或文件夹添加或删除后缀名 .png / .jpg / .svg ,自动导出或删除图片。注意:文件名还可以命名为200%文件名(x%文件名是原大小百分之x大小),jpg8、.png8、.png24....(原质量的百分之x)】 .svg格式是一种矢量图的格式,图片变成代码。 抽出资源:文件-抽出资源 复制css:选择-图层-复制成css样式(非智能对象),可用于自己制作的图片或文字
    查看全部
  • 1、切片工具切片 2、基于参考线的切片 3、利用裁剪工具,局部切片 4、存储为Web所用格式
    查看全部
    0 采集 收起 来源:PS传统切图

    2017-01-04

  • Ctrl+R 显示隐藏标尺 只有在移动工具下,可以拖出参考线 Alt可以改变参考线方向 视图V->新建参考线E == Alt+V+E Alt+V+E+H 新建水平参考线 显示、隐藏网格 视图-》网格 Ctrl+; 显示、隐藏参考线
    查看全部
  • 1.新建工具: web/自定 宽1920 高可以设置高点 像素 透明 72分辨率 可以按照以上参数设置,然后存储为预设 2.移动工具: 自动选择不勾选,选择 图层,不选组 windows系统按住ctrl,鼠标左键单击就可以自动选择右边图层,按住左键不放,移动鼠标还可以拖动图标,文字,图片 3.视图工具: 勾选 标尺 显示->智能参考线 窗口:1.只留下图层,其它都关闭,并把历史记录和图层拖到一起,属性也关闭,放在右侧下部 2.选择信息,字符,关闭段落,放在一起,右侧上部,在图层和历史记录上部 3.信息界面设定: 点击信息面板右侧图标, 选择 界面选项: 第一颜色信息 rgb 第二颜色信息 rgb 鼠标坐标 标尺单位:像素 状态信息:选勾 文档大小 文档尺寸 选勾 显示工具提示(H) 编辑->单位与标尺 单位: 标尺:像素 文字: 像素 新文档预设分变率: 打印分辨率: 像素/英寸 屏幕分辨率:像素/英寸 自动选择椭圆区,可以看到长宽:ctrl+点击图层的缩略图 以上设置好后,可以保存下当前设置,窗口->工作区->新建工作区-> 名称:web切图, 捕捉:勾选键盘快捷键(k) 菜单(m) 当工作区变成基本功能工作区时 右上角,选择 web切图,就能切换到自己设置的工作区了,不需要重新设置了
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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