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

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

  • 1.将界面设置保存为新建工作区web切图,方便以后调用<br> 2.首选项,所有的单位改成像素<br> 3.分辨率72,背景内容透明<br> 4.在做图时……视图……勾选……标尺……智能参考线 5.界面设置 ctrl+N(新建) 预设:自定义 宽度:1920 高度:2000 分辨率:72像素(比较流行) 背景内容:透明(注意) ----------- 移动工具设置:快捷键V——上方属性栏,自动选择不要勾选,冒号后,选中图层。当,想选中一个图层时,按住ctrl+左键,就会选中此图层,并可以拖拽 ----------- 视图设置:上方菜单栏-视图-显示-智能参考线(切图会提供很大帮助) 打开标尺:上方菜单栏-视图-标尺(也可以ctrl+r) 窗口设置:不需要的统统关闭;库、颜色、右侧的:通道、路径等关闭,只留四大面板在右面信息和字符(放上面),图层和历史记录(放下面) 信息设置:单击信息右侧的设置-面板选项:第一第二颜色模式:RGB;标尺单位:像素;文档尺寸勾选 ----------- 编辑设置:菜单栏-编辑-首选项-单位与标尺,将标尺和文字都改为像素 小经验: 选中一个图层:右下角图层位置,ctrl+点击,在图片中形成一个选区,并且选区的信息会出现在面板中;如果选中字的话,字体信息也会显示在面板上。 建议:窗口-工作区-新建工作区:取名,并勾选两个选项:此方法可以保存之前的设置信息,以免,软件设置复位基本功能后,找不回之前的设置。
    查看全部
  • 文本工具:Windows LCD 可以让文字没有毛边 文字可以直接添加在路径上 蒙版文字:可以向文字填充渐变色 路径选择工具:移动路径 直接选择工具:改变路径形状 形状工具:绘制标准形状 抓手工具、旋转视图 选择工具+空格+鼠标左键:抓手工具 放大工具(松开Alt)、缩小工具(Atl) 快捷键H:可以放大和缩小
    查看全部
  • 盖印图层的概念,快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。<br> alt键可以确定圆心在哪里。<br> shift可以让圆成为正圆<br> 右键扩展工具中有椭圆选区(shift+M切换)<br> 当按住shift再选区的时候,选区属性自动变为第二个添加到选区<br> 当按住alt再选区的时候,选区属性自动变为第三个从选区减去<br> 套索工具(L):<br> [放大缩小一倍:ctrl加+/-;百分之十:alt+鼠标滚轮]<br> 当按住alt再选区的时候,选区属性自动变为第三个从选区减去<br> 取消选中,ctrl+d<br> 小技巧—当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功<br> 当使用选区工具,选中一个不规则选区时,按下裁剪工具,会围绕选区,选出一个最小的矩形<br> 小技巧—当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功<br> ctrl+左键点图层缩略图,给图层加选区 Ctrl + ‘+’/‘-’或者Alt+鼠标滑轮(放大缩小视图); Ctrl + 滑轮(左右移动视图)
    查看全部
  • alt+鼠标滚轮放大缩小。或者sh+ct+空格加鼠标移动放大缩小<br> 界面设置<br> ctrl+N(新建)<br> 预设:自定义<br> 宽度:1920<br> 高度:2000<br> 分辨率:72像素(比较流行)<br> 背景内容:透明(注意)<br> -----------<br> 移动工具设置:快捷键V——上方属性栏,自动选择不要勾选,冒号后,选中图层。当,想选中一个图层时,按住ctrl+左键,就会选中此图层,并可以拖拽<br> -----------<br> 视图设置:上方菜单栏-视图-显示-智能参考线(切图会提供很大帮助)<br> 打开标尺:上方菜单栏-视图-标尺(也可以ctrl+r)<br> 窗口设置:不需要的统统关闭;库、颜色、右侧的:通道、路径等关闭,只留四大面板在右面:信息和字符(放上面),图层和历史记录(放下面)<br> 信息设置:单击信息右侧的设置-面板选项:第一第二颜色模式:RGB;标尺单位:像素;文档尺寸勾选<br> -----------<br> 编辑设置:菜单栏-编辑-首选项-单位与标尺,将标尺和文字都改为像素<br> 小经验:<br> 选中一个图层:右下角图层位置,ctrl+点击,在图片中形成一个选区,并且选区的信息会出现在面板中;如果选中字的话,字体信息也会显示在面板上。<br> 建议:窗口-工作区-新建工作区:取名,并勾选两个选项:此方法可以保存之前的设置信息,以免,软件设置复位基本功能后,找不回之前的设置。<br> 编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】<br> <br> 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。
    查看全部
  • 按住Shift增加选区 按住Alt 减掉选区 按住Shift加工具快捷键可以切换快捷键对应的工具 鼠标点下后 按住Shift画正方/圆 按住Alt就以鼠标开始那个点为中心画 两个可以结合 Ctrl+t就可以变换选区 按住Shift变换选区可以保持比例不变
    查看全部
  • 感谢老师,这算是讲完了吗
    查看全部
  • 网页设计 新建-》web 1920宽度,高不固定
    查看全部
  • 传统切图:利用手动或者参考线一键切图,然后存储为web格式

    精准切图:文件->脚本->将图层导出到文件(勾选透明区域、交错、裁切图层)

    查看全部
    2 采集 收起 来源:PS精准切图

    2019-08-11

  • 怎么下载呢
    查看全部
  • ctrl+alt+shift+E 盖印图层
    查看全部
  • 我的2014 CC 并不能生成svg文件。能生成png jpg。 我试了一下,能生成png jpg。我百度了一下,是不是少了一个转svg脚本呢? svg 是矢量图,ps是像素图设计软件。 因此PS自然是不能导出SVG的!要想导出SVG必须使用矢量图设计软件 如AI CDR等! 然后你就可以在你的页面中插入你切出的图片了,用<img src="/i/eg_tulip.jpg" />,也可以直接复制课程中生成的css文件进行你的网站建设
    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • 网页设计一般尺寸都是1920*1080(高度>=)。中间1200px放置内容,两边各留出360px。
    查看全部
  • ps界面设置: 1.新建设置:web或自定义,宽1920,高2000像素,背景透明,分辨率72,RGB颜色。 2.移动工具设置:改各个标尺像素。打开视图的显示的只能参考线,标尺Ctrl+R,打开窗口的信息和字符。Ctrl+鼠标左键,不用选自动选择,然后选图层,自由移动,然后显示一切信息和想要的字符。信息面板,改为RGB颜色,像素,打开文档尺寸。 3.图层,信息,字符,历史记录。这是四大面板。 4.打开编辑的首选项的单位和标尺,把单位都改为像素。 5.最后,打开窗口,工作区,新建工作区,叫web切图。下面框快捷键都可以打勾选。
    查看全部
  • 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。 七 图层管理:可通过名称、颜色等等来查找到所需要的图层。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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