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

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

  • 在信息里的面板选项中要将图片改为RGB模式 单位改为像素
    查看全部
  • 颜色模式改为RGB
    查看全部
  • ctrl加鼠标左键 直接选图层
    查看全部
  • 按住字母V可以自动回到移动工具里
    查看全部
  • 背景选择为透明
    查看全部
  • 网页设计中图片的宽度固定为1920像素而高度不定
    查看全部
  • 扩展知识【Photoshop CC2014以上版本】 自动切图-将单独图层切成一个图 1、编辑-首选项(ctrl+k)-增效工具-将启用生成器勾选(下次启动生效) 2、文件-生成-图像资源勾选,在文件夹中多出assets空文件夹 -给图层重命名,加上后缀,发现,此图层已经在assets文件夹中产生了。 如:.png/.jpg 注:针对Retina显示器,图片需要进行Retina优化:命名如:200%XXX @2x.jpg(宽度和高度大了一倍) -如果不想要此图片,将后缀名删掉,此图片就自动在assets文件夹中消失了。 -如果后缀为.jpg8质量为jpg的80%,如果只写jpg或是jpg10默认为最佳品质(png8和png24透明度是不一样,png8后面会有个白边) 如果设计师在做网页设计时,直接把图层命名好(如button.png),图片直接保存出来,省去切图过程,省事 ----------- SVG和WebP格式的导出技巧(矢量图格式) 后缀为.svg/.WebP 在文件夹中找到此文件,看源代码,进行微调。 ----------- 抽出资源: 找到图层,选择文件-抽出资源 可以找到需要的图层,选择抽出格式。 单击抽出 ----------- 复制CSS: 图层上并非外部引用的内容 点击图层-复制CSS 单击后,代码已经生成了,粘贴下来了会自动命名一个class,直接在html元素上使用即可。 如:.line{} ----------- 图层管理: 图层面板有个类型: 按名称,颜色,属性,等等来寻找图层。 点击只能对象,只留下搜索的图层,其他图层都隐藏掉 ----------- Retina(一种新型高分辨率的显示技术) [所谓“Retina”是一种显示技术,可以将把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。]
    查看全部
  • Photoshop精准切图 改进切图流程 利用Ps的脚本,进行一种更加快捷精准的切图方法 自动化切图,省时(由于图片可能很大,省时不敢保证)省力 计算机自动计算,尺寸更精确 ----------- 单击文件-脚本-将图层导出到文件 文件类型:png-24 透明区域,交错,裁剪图层勾选 注意:比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本 当中引入堆栈,那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    4 采集 收起 来源:PS精准切图

    2015-11-02

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

    2018-03-22

  • 污点修复画笔工具(J):从点击周围来取素材再做一个融合 修复画笔工具:ctrl+右键,取素材,鼠标放开画出的内容,有羽化效果 修补工具:将修补区域圈起来,按住鼠标左键拖动,放开后,放开区域回合圈的区域融合 --- 画笔工具(B):可以通过属性面板调节硬度来实现画出来的轮廓的模糊程度 铅笔工具:画出的效果带毛边,硬度调到最小,画出的依然比较生硬 --- 防制图章工具(S):取到的素材,什么样子画出来就是什么样子 图案图章工具:sp库中存在的图案 -- 历史记录画笔工具(Y):打开历史记录面板,将历史记录画笔放在前面的方框内,点回原图,这时,画笔就带有历史记录,可以在原图上进行局部处理。 -- 橡皮擦工具(E):设置背景颜色后,使用橡皮擦,擦过的地方会被背景颜色填充。 背景橡皮擦工具:会将图片直接擦掉,露出背景图层。 魔术橡皮擦工具:颜色相同区域,会被直接擦掉,露出背景图层。 -- 渐变工具(G):设置前景色和背景色后,在图层上拉动,会出现渐变效果,属性面板上有各种渐变方式。 油漆桶工具 -- 模糊工具 锐化工具:内容会变得干燥 涂抹工具:类似画板上画完画,用手抹一下 -- 减淡工具(O): 加深工具 海绵工具
    查看全部
  • psd:就是ps处理的照片。
    查看全部
  • command+单击鼠标(在选择工具未勾选自动选择,设置为图层),选中图层。
    查看全部
  • dsd
    查看全部
  • ctrl+D 删除选区
    查看全部
  • ctrl + 左键 直接选取图层
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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