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

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

  • 1、切图与切片 2、切片的基本操作及其技巧 3、导出操作 ----------- 切图工具(C): 切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片 传统切图方式:将需要的图片一个个都切上 简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来 然后,选择切片工具,点击属性中的,基于参考线的切片,然后将一块图片中多余的切片右键删掉,需要的一块图片形成一个切片 注意:为了使参考线看起来密集,首先使用裁剪工具,将网页切为一块一块,然后再切。 ----------- 参考线的删除和隐藏: 选择移动工具后,将参考线拖动回标尺,就删除了 如果只是想临时隐藏参考线,可以点击视图菜单>显示>参考线,也可以直接按快捷键“ Ctrl + ; ” 如果所有的参考线都不想用了,可以点击视图菜单>清除参考线 ----------- 导出切片: alt+shift+ctrl+s(文件-存储为web所用格式) 选择png-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2018-03-22

  • 1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾,则在assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)。 2、如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 3、如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失。 4、还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如『.jpg8』则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 · 导出为 SVG 格式 与自动切图类似,图层或图层组名称添加.svg 的后缀名即可自动导出。 1、如果导出图层不是标准矢量智能对象,则可能会出现问题,需要手动调整。 2、SVG格式文件大小很小,还可以用sublime 等编辑器对其代码进行精简或进一步优化。 【Photoshop CC 版本支持】 · 文件--抽出资源(可以导出图层为指定格式) · 图层--复制 CSS (可以将矢量图形对象复制为 CSS 代码) 1、CSS 代码会以图层名称作为 class 名称 · 图层管理 图层面板处,可以使用 名称、智能对象、颜色等进行筛选查找
    查看全部
  • 文件,脚本,下面很多重要的功能!这个实在是太赞了!
    查看全部
    0 采集 收起 来源:PS精准切图

    2016-05-22

  • 删除选区快捷键 ctrl+d; 对于选区shift是加,alt是减
    查看全部
  • #3.4图层原理及操作#五环案例 Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 画圆选区:椭圆选区->Shift+左键(先放开鼠标再放开shift键),alt+delete填充颜色 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动工具->Alt+拖动:复制并且自动新建图层 CTRL+在图层缩览图中单击:选中图层中环选区。。。再填充另外颜色 按住Ctrl键,然后点击图片区域,会自动选中该图层,对该图层进行操作 按住Shift键,选中第一个和最后一个图层可以把所有这之内的图层全选中,最后一起操作 裁剪:按住Alt键,以图像为中心建立裁剪区域 五环相连:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • #3.2简单工具操作 第二部分# 污点修复画笔工具(J):从点击周围来取素材再做一个融合<br> 修复画笔工具:ctrl+右键,取素材,鼠标放开画出的内容,有羽化效果(复用某个地方的素材)<br> 修补工具:将修补区域圈起来,按住鼠标左键拖动,放开后,放开区域回合圈的区域融合可以盖掉涂抹工具<br> ---<br> 画笔工具(B):可以通过属性面板调节硬度来实现画出来的轮廓的模糊程度<br> 铅笔工具:画出的效果带毛边,硬度调到最小,画出的依然比较生硬<br> ---<br> 防制图章工具(S):取到的素材,什么样子画出来就是什么样子;与修复画笔不同的是,修复画笔松开左键会羽化图片边缘<br> 图案图章工具:sp库中存在的图案<br> --<br> 历史记录画笔工具(Y):打开历史记录面板,将历史记录画笔放在前面的方框内,点回原图,这时,画笔就带有历史记录,可以在原图上进行局部处理。<br> --<br> 橡皮擦工具(E):设置背景颜色后,使用橡皮擦,擦过的地方会被背景颜色填充。<br> 背景橡皮擦工具:会将图片直接擦掉,露出背景图层。<br> 魔术橡皮擦工具:颜色相同区域,会被直接擦掉,露出背景图层。<br> --<br> 渐变工具(G):设置前景色和背景色后,在图层上拉动,会出现渐变效果,属性面板上有各种渐变方式。<br> 油漆桶工具<br> --<br> 模糊工具<br> 锐化工具:内容会变得干燥<br> 涂抹工具:类似画板上画完画,用手抹一下,比如加长睫毛<br> 污点修复画笔工具:照片处理,抹掉不需要的地方 修复画笔工具:复用某个地方的文字或图片 修补工具:选中要抹掉的区域,按住鼠标左键,拖至要填补成的区域,可以融合图片盖掉涂抹区域 画笔工具:可调整画笔硬度和大小 铅笔工具:线条细且硬,也可调整画笔硬度和大小 -- 减淡工具(O):使脸部皮肤变白 加深工具 海绵工具
    查看全部
  • #4.1Photoshop传统切图# 1、切图与切片 2、切片的基本操作及其技巧 3、导出操作 ----------- 切图工具(C): 切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片 传统切图方式:将需要的图片一个个都切上 简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来 然后,选择切片工具,点击属性中的,基于参考线的切片,然后将一块图片中多余的切片右键删掉,需要的一块图片形成一个切片 注意:为了使参考线看起来密集,首先使用裁剪工具,将网页切为一块一块,然后再切。 ----------- 参考线的删除和隐藏: 选择移动工具后,将参考线拖动回标尺,就删除了 如果只是想临时隐藏参考线,可以点击视图菜单>显示>参考线,也可以直接按快捷键“ Ctrl + ; ” 如果所有的参考线都不想用了,可以点击视图菜单>清除参考线 ----------- 导出切片: alt+shift+ctrl+s(文件-存储为web所用格式) 选择png-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2018-03-22

  • #3.5参考线及辅助# 作图时挺重要的 1.ctrl+R 标尺快捷键 2.用鼠标左键从标尺拖动到图片,可以出现参考线 3.横向参考线按住 alt 键变成纵向参考线 4.删除参考线将其拖回到标尺位置即可 5.新建参考线 按Alt\ V 后 E 6.隐藏\出现参考线 ctrl+; 网页标准:1920X1080 选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格:作图中经常会用到
    查看全部
  • #3.4图层原理及操作#五环案例 Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 画圆选区:椭圆选区->Shift+左键(先放开鼠标再放开shift键),alt+delete填充颜色 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动工具->Alt+拖动:复制并且自动新建图层 CTRL+在图层缩览图中单击:选中图层中环选区。。。再填充另外颜色 按住Ctrl键,然后点击图片区域,会自动选中该图层,对该图层进行操作 按住Shift键,选中第一个和最后一个图层可以把所有这之内的图层全选中,最后一起操作 裁剪:按住Alt键,以图像为中心建立裁剪区域 五环相连:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • #3.3简单工具操作第三部分#注意快捷键的使用 钢笔工具(可选路径/形状) 自由钢笔工具 文本工具:Windows LCD 可以让文字没有毛边 文字可以直接添加在路径上 蒙版文字:可以向文字填充渐变色 路径选择工具:移动路径 直接选择工具:改变路径形状 形状工具:绘制标准形状 抓手工具、旋转视图 选择工具+空格+鼠标左键:抓手工具 放大工具(松开Alt)、缩小工具(Atl) 快捷键H:可以放大和缩小
    查看全部
  • #3.2简单工具操作 第二部分# 污点修复画笔工具(J):从点击周围来取素材再做一个融合<br> 修复画笔工具:ctrl+右键,取素材,鼠标放开画出的内容,有羽化效果(复用某个地方的素材)<br> 修补工具:将修补区域圈起来,按住鼠标左键拖动,放开后,放开区域回合圈的区域融合可以盖掉涂抹工具<br> ---<br> 画笔工具(B):可以通过属性面板调节硬度来实现画出来的轮廓的模糊程度<br> 铅笔工具:画出的效果带毛边,硬度调到最小,画出的依然比较生硬<br> ---<br> 防制图章工具(S):取到的素材,什么样子画出来就是什么样子;与修复画笔不同的是,修复画笔松开左键会羽化图片边缘<br> 图案图章工具:sp库中存在的图案<br> --<br> 历史记录画笔工具(Y):打开历史记录面板,将历史记录画笔放在前面的方框内,点回原图,这时,画笔就带有历史记录,可以在原图上进行局部处理。<br> --<br> 橡皮擦工具(E):设置背景颜色后,使用橡皮擦,擦过的地方会被背景颜色填充。<br> 背景橡皮擦工具:会将图片直接擦掉,露出背景图层。<br> 魔术橡皮擦工具:颜色相同区域,会被直接擦掉,露出背景图层。<br> --<br> 渐变工具(G):设置前景色和背景色后,在图层上拉动,会出现渐变效果,属性面板上有各种渐变方式。<br> 油漆桶工具<br> --<br> 模糊工具<br> 锐化工具:内容会变得干燥<br> 涂抹工具:类似画板上画完画,用手抹一下,比如加长睫毛<br> 污点修复画笔工具:照片处理,抹掉不需要的地方 修复画笔工具:复用某个地方的文字或图片 修补工具:选中要抹掉的区域,按住鼠标左键,拖至要填补成的区域,可以融合图片盖掉涂抹区域 画笔工具:可调整画笔硬度和大小 铅笔工具:线条细且硬,也可调整画笔硬度和大小 -- 减淡工具(O):使脸部皮肤变白 加深工具 海绵工具
    查看全部
  • #3.1简单工具操作1# ps界面中有菜单栏、属性栏、工具栏、面板、工作区。 移动工具快捷键(v) 选框工具快捷键(m),按shift(画正圆),按alt+shirt(以中心画正圆),按shift+m为选框工具的切换。 放大快捷键ctrl++,缩小ctrl+- 快速选择工具画笔的放大缩小可以按"[""]"这两个括号来调整。 裁剪文字时,按住alt单击眼睛,隐藏背景,也就是显影模式,可以用来导出png图片! 盖印图层的概念:快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。 alt键可以确定圆心在哪里。 shift可以让圆成为正圆 小技巧 1.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 2.当使用选区工具,选中一个不规则选区时,按下裁剪工具,会围绕选区,选出一个最小的矩形 3.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 4.ctrl+左键点图层缩略图,给图层加选区
    查看全部
  • 1.新建预设:大小1920宽,单位像素,分辨率72,背景色透明; 2.移动设置:移动快捷键V,对于打开的psd图,设置左上角自动选择,图层,可以用鼠标直接移动psd图上的任意图层;不过建议平时不要自动选择,Ctrl+鼠标点击psd图上的任意图层,将会在图层面板自动选中该图层。 3.视图设置:视图中勾选智能参考线,标尺;窗口打开中信息,字符,历史记录和图层,其他可以关闭;信息的右上角面板选项中该单位为像素,颜色为RGB;ctrl+单击图层,可以选中psd图中的图层,它的信息将在信息和字符面板中显示。 最后,对以上设置的保存,窗口→工作区→新建工作区并命名1,四大面板需要调出来:信息、字符、图层、历史记录。且信息里的颜色都调成RGB,鼠标坐标为像素,勾选文档尺寸,2在windows系统,设置图层选取,在移动箭头下,按住CTRL键点击需要选取的图层,点击左键即可移动到其他图层
    查看全部
  • ALT是选择上方菜单的快捷键
    查看全部
  • psCC 脚本-将图层导出到文件 切图神器
    查看全部
    0 采集 收起 来源:PS精准切图

    2016-05-18

举报

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

微信扫码,参与3人拼团

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

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