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

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

  • 精准切图~文件~脚本~将图层导出到文件
    查看全部
    0 采集 收起 来源:PS精准切图

    2016-05-25

  • 文件~生成~图像资源勾选~关闭ps~打开图片文件夹所在地~旁边生成另一个文件夹~返回ps~更改图层或组的后缀格式便可以了
    查看全部
  • 启动生成器勾选上
    查看全部
  • 组切图 首选项 cturl+k 启动
    查看全部
  • ctrl+T 自由变换
    查看全部
  • 画内圆:选区---右键(变换选区)---alt+shift 缩小一个圆
    查看全部
  • alt+delete 前景色填充 ctrl+delete 背景色填充
    查看全部
  • 网页宽1920 高1080
    查看全部
  • 历史记录画笔工具
    查看全部
  • #3.5参考线及辅助# 作图时挺重要的 1.ctrl+R 标尺快捷键 2.用鼠标左键从标尺拖动到图片,可以出现参考线 3.横向参考线按住 alt 键变成纵向参考线 4.删除参考线将其拖回到标尺位置即可 5.新建参考线 按Alt\ V 后 E 6.隐藏\出现参考线 ctrl+; 网页标准:1920X1080 选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格:作图中经常会用到
    查看全部
  • #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.4图层原理及操作#五环案例 Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 画圆选区:椭圆选区->Shift+左键(先放开鼠标再放开shift键),alt+delete填充颜色 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动工具->Alt+拖动:复制并且自动新建图层 CTRL+在图层缩览图中单击:选中图层中环选区。。。再填充另外颜色 按住Ctrl键,然后点击图片区域,会自动选中该图层,对该图层进行操作 按住Shift键,选中第一个和最后一个图层可以把所有这之内的图层全选中,最后一起操作 裁剪:按住Alt键,以图像为中心建立裁剪区域 五环相连:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • #4.1Photoshop传统切图# 1、切图与切片 2、切片的基本操作及其技巧 3、导出操作 ----------- 切图工具(C): 切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片 传统切图方式:将需要的图片一个个都切上 简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来 然后,选择切片工具,点击属性中的,基于参考线的切片,然后将一块图片中多余的切片右键删掉,需要的一块图片形成一个切片 注意:为了使参考线看起来密集,首先使用裁剪工具,将网页切为一块一块,然后再切。 ----------- 参考线的删除和隐藏: 选择移动工具后,将参考线拖动回标尺,就删除了 如果只是想临时隐藏参考线,可以点击视图菜单>显示>参考线,也可以直接按快捷键“ Ctrl + ; ” 如果所有的参考线都不想用了,可以点击视图菜单>清除参考线 ----------- 导出切片: alt+shift+ctrl+s(文件-存储为web所用格式) 选择png-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2018-03-22

  • 1,自动切图 1)菜单栏--编辑--首选项--增效工具--生成器--启用 2)文件--生成--图像资源--勾选 3)图层(图层文件)重命名(格式:名称+.png24/.jpg8/.svg)苹果reatin切图 200%名称+空格@2x.png24/jpg8/svg 4)名字取消,电脑中文件夹中的图片自动会删除。 2,抽出资源 选中图层--文件--抽出资源 3,赋值css 图层--复制css
    查看全部

举报

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

微信扫码,参与3人拼团

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

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