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

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

  • 单击文件-脚本-将图层导出到文件 文件类型:png-24 透明区域,交错,裁剪图层勾选 注意:比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本 当中引入堆栈,那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    1 采集 收起 来源:PS精准切图

    2016-02-11

  • 裁剪->切片工具:灰色代表被动切片,蓝色代表主动切片 裁剪图片->建立参考线->基于参考线的切片 导出切片:文件->存储为web所用格式->PNG-24->存储
    查看全部
    1 采集 收起 来源:PS传统切图

    2018-03-22

  • 钢笔工具(可选路径/形状) 自由钢笔工具 文本工具:Windows LCD 可以让文字没有毛边 文字可以直接添加在路径上 蒙版文字:可以向文字填充渐变色 路径选择工具:移动路径 直接选择工具:改变路径形状 形状工具:绘制标准形状 抓手工具、旋转视图 选择工具+空格+鼠标左键:抓手工具 放大工具(松开Alt)、缩小工具(Atl) 快捷键H:可以放大和缩小
    查看全部
  • 1,切片工具:灰色代表被动切片,蓝色代表主动切片 2,使用参考线切图 3,先使用裁剪工具---再使用参考线切图 4,切图完毕,导出步奏 文件---存储为web所用格式(快捷键:alt+shift+ctrl+s) 5,存储格式png-24 [ 查看全文 ]
    查看全部
    1 采集 收起 来源:PS传统切图

    2016-01-29

  • 按住shift,拖动选框工具,画正圆或正方形。 按住alt,拖动选框工具,以起点为圆心或矩形的起点。 按住alt+shift,拖动选框工具,以起点为圆心或矩形的起点的正圆或正方形
    查看全部
  • 「切图笔记」 ***** ps设置 ***** 1.视图-显示-智能参考线√ 2.新建工作区:信息(面板选项-模式改为RGB)/字符/图层/历史记录 ***** ps切图 ***** 1.传统切图:裁剪 + 基于参考线的切片 2.脚本切图:文件-脚本-将图层导出到文件 3.自动切图(cc新功能)  [设置] i.编辑-首选项-增效工具-启用生成器√      ii.文件-生成-图像处理√  [生成] 将图层后缀改为.jpg/.png/.svg等      retina优化命名规则:200% XXX @2X.jpg 4.抽出资源:文件-抽出资源 5.复制CSS:图层-复制CSS 6.利用<图层管理>功能可快速筛选查找图层
    查看全部
  • 1.界面预设
    查看全部
  • Alt + Delete 前景色填充 Ctrl + Delete 背景色填充 对选区右键选择变换选区,然后按住Alt键缩小选区,可得到同心的小范围的选区 五环的嵌套 去掉环被覆盖的区域: Ctrl+单击被覆盖环C1的图层获取C1的选区,然后选中覆盖环C2的图层,最后用选框工具选中环C1中要去除被覆盖部分的相反部分,按delete键即可得到嵌套环。
    查看全部
  • 网页界面的宽度为1920像素,高不作要求,背景为透明,分辨率最好采用72,这些参数可以做预设。 Ctrl+左键=自动选择+左键。 视图中,要勾上标尺和智能参考线。 工作区中只需要“信息”“历史记录”“字符”“图层”这是个面板,工作区可以存储,如果变成基本工作区后,可以打开恢复存储的工作区。
    查看全部
  • 选择工具栏当中选中“图层”选项,当Ctrl+单击某个图层的时候,该图层会被选中
    查看全部
  • 用于修MM照片 1.历史记录画笔工具:可以用于抹掉脸上的斑点,痘印; 2.涂抹工具:可以用于加长睫毛; 3.减淡工具:可以使脸部皮肤变白;
    查看全部
  • 【简单工具操作】 移动工具(V): 选择两个图层,可以进行各种对齐方式 选区工具(M): 一旦有了选区,工具的操作都是针对选区的那一部分<br> 右键扩展工具中有椭圆选区(shift+M切换)<br> 当鼠标选区+shift,选区变为正方/圆,当鼠标选区+alt,鼠标点击处为选区的中心位置 “ALT+Shift”画圆是以鼠标的始端为圆心画出正圆。 当按住Shift再选区时加选,ALT反之。 单行和单列选区,仅仅为1个像素<br> 套索工具(L):<br> [放大缩小一倍:ctrl加+/-;百分之十:alt+鼠标滚轮] 选区的shift与alt 添加,减去选区是通用的。 多边形套索工具,鼠标点到初始点位置,闭合,如果不想点初始点位置,鼠标双击,依然闭合。 磁性套索工具会根据颜色进行判断,如果磁性套索工具对于某块处理不好,多个套索工具配合使用,效果会更佳 快速选择工具(W):<br> 单击时根据相同颜色选中区域,快速选择工具也有添加减去按键,还可以调整笔头大小,使用左右中括号(在属性栏里也可以调整) 魔棒选择工具,同上 取消选中,ctrl+d M,L,W都是选区工具,选区是站在图层当中的,选中一个选区,就会针对选区内部进行填充等其他操作。 裁剪工具(C): 当选中一个图层时,按住ctrl+图层左键,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 当使用选区工具,选中一个不规则选区时,按下裁剪工具,会围绕选区,选出一个最小的矩形 吸管工具(I): 点击取色 一节课完毕
    查看全部
  • 扩展知识【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上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏。]
    查看全部
  • 四个目标: 1、能够自己使用photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源。 2、对photoshop操作有一个基本了解。 3、可以做一些简单的图片处理和调整。 4、提供啊自己的审美及其美感的培养
    查看全部
  • 1、能够自己使用photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源。 2、对photoshop操作有一个基本了解。 3、可以做一些简单的图片处理和调整。 4、提供啊自己的审美及其美感的培养。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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