美文网首页
第九次课程小结: 切图

第九次课程小结: 切图

作者: jiujiumi | 来源:发表于2019-10-19 20:27 被阅读0次

    常见的快捷键

    放大图片:”CTRL” +“+” 缩小图片:“CTRL”+ “-”

    存储为web所用格式alt+shift+ctrl+s

    存储为png-24格式,png-24格式的图片质量比较高

    具体操作:

    手动切图详细操作

    网站设计常用格式:宽度1920*2000像素 分辨率72像素/英寸

    选择界面设置:快捷键V 转换到选择工具。

    选框工具:

    shift+鼠标左键:圈出正方形或原型

    Alt+左键:定位圆心

    Shift:增加选区

    Alt:删除选区

    Ctrl+d删除选区

    工具的具体用途:
    污点修复画笔工具(J):从点击周围来取素材再做一个融合
    修复画笔工具:ctrl+右键,取素材,鼠标放开画出的内容,有羽化效果(复用某个地方的素材)
    修补工具:将修补区域圈起来,按住鼠标左键拖动,放开后,放开区域回合圈的区域融合可以盖掉涂抹工具

    画笔工具(B):可以通过属性面板调节硬度来实现画出来的轮廓的模糊程度
    铅笔工具:画出的效果带毛边,硬度调到最小,画出的依然比较生硬

    防制图章工具(S):取到的素材,什么样子画出来就是什么样子;与修复画笔不同的是,修复画笔松开左键会羽化图片边缘
    图案图章工具:sp库中存在的图案

    历史记录画笔工具(Y):打开历史记录面板,将历史记录画笔放在前面的方框内,点回原图,这时,画笔就带有历史记录,可以在原图上进行局部处理。

    橡皮擦工具(E):设置背景颜色后,使用橡皮擦,擦过的地方会被背景颜色填充。
    背景橡皮擦工具:会将图片直接擦掉,露出背景图层。
    魔术橡皮擦工具:颜色相同区域,会被直接擦掉,露出背景图层。

    渐变工具(G):设置前景色和背景色后,在图层上拉动,会出现渐变效果,属性面板上有各种渐变方式。
    油漆桶工具

    模糊工具
    锐化工具:内容会变得干燥
    涂抹工具:类似画板上画完画,用手抹一下,比如加长睫毛
    污点修复画笔工具:照片处理,抹掉不需要的地方 修复画笔工具:复用某个地方的文字或图片 修补工具:选中要抹掉的区域,按住鼠标左键,拖至要填补成的区域,可以融合图片盖掉涂抹区域 画笔工具:可调整画笔硬度和大小 铅笔工具:线条细且硬,也可调整画笔硬度和大小 -- 减淡工具(O):使脸部皮肤变白 加深工具 海绵工具
    快捷键:
    Alt+shift:变换选区

    Alt+del填充前景色

    Ctrl+del填充背景色

    Alt+拖动图片:复制图像

    Ctrl+t自由变换

    按住Ctrl,在收敛图层上单击

    切图的三种方式:

    手动切图

    手动切图需要切图人员完全手动的使用“切片工具”一个一个的去切割图片。首选,选择“切片工具”,然后在需要切图的图标上使用“切片工具”选择一个包含了图标区域。例如下图的ADDRESS文字上方的图标就使用了“切片工具”选中。继续切其他图标,从图中也可看出每个切图左上角都有一个数字,这个数字就是切图的编号,表示当且切图时第几个切图。
    有时候看着这么多切图觉得挺烦,那可不可以只显示我们自己切的图?答案是肯定的。我们先把工具切换到“切片选择工具”,上面的菜单栏多了一个“隐藏自动切图”按钮。

    参考线的添加有两种方式:

    第一种:打开菜单“视图”->“新建参考线”,弹出“新建参考线”。参考包括“取向”(水平或垂直)、“位置”
    第二种:如果参考线都是按照第一种方式添加,那就显得效率太低了。特别是马上要介绍的参考线切图,如果按照第一种方式添加几十条参考线,那要等到猴年马月。第二种添加参考线的方式非常简单,直接在垂直标尺或者水平标尺处按住鼠标左键,一直往外拖动就可拖出一条新增的参考线。
    然后在工具栏中选中“切片工具”,此刻工具菜单栏中多了一个“基于参考线的切片”按钮。点击这个按钮。设计图中自动生成了几个切片,切片工具基于参考线自动生成切图。这样生成切图的方式比传统的一个一个手动切图效率要高一些。
    精准切图
    精准切图是CC版本引入的新功能,何为精准切图?精准切图解放了切图人员的双手,PS通过脚本自动对每个图层执行切图。切图人员只需选择几个菜单执行切图命令,剩下的工作就是等待PS执行切图。另外一方面,精准切图是计算机基于”图层对象“切图,所有切出来的图形精准度肯定也比人工切图高。
    打开菜单“文件”->”导出"->“将图层到处到文件”,弹出导出窗口:
    image
    上面窗口需要填写几个参数,“目标”即导出到哪个目录下,“文件名前缀”为所有导出图片文件名称的前缀,“仅限可见图层”只导出可见图层,“文件类型”为导出文件的类型(例如png、jpg等)。最后点击“运行”按钮开始执行自动切图。下图是切图过程PS“图层”自动切图的一个截图。可以看出PS在自动选择每个图层然后执行导出。

    自动切图

    自动切图我们根本就看不到切图的过程,当我们把图层设计好了,我们的切图也就完成了。
    在使用自动切图功能之前,我们需要做两个操作:
    操作一,选择菜单“编辑”->”首选项"->“增效工具”,弹出下面的窗口。勾选“启用生成器”。

    操作二,勾选“文件”->“生成”->“图像资源”菜单。

    现在准备工作已经完成了,接下来就看看怎样自动切图。举个例子,现在我们需要导出下图的图层,并且不包含背景色。

    其实上面图片的所有资源都放在一个叫做“Address”的图层分组下。现在把分组名称重新改为“Address.png”。然后我们到psd文件目录下,psd文件名字为“Artica - One Page PSD Template“,可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。

    然后打开”Artica - One Page PSD Template-assets“文件夹,看到有一个叫做Address.png的文件,正好是我们图层分组的名字,并且图片背景是透明的。这样的功能是不是很强大?

    自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件,还支持生成svg文件。现在我想把下面的图标保存为svg格式,我们仅需要把图层文件名字改为“Icon.svg”。打开”Artica - One Page PSD Template-assets“文件夹,可看到生成了Icon.svg文件。imageimage

    用文本编辑器打开Icon.svg文件看看生成了什么内容。文件中包含了width和height以及css样式,正是一个比较常见的svg文件。我们通过修改css样式就可以改变图片的颜色了。

    相关文章

      网友评论

          本文标题:第九次课程小结: 切图

          本文链接:https://www.haomeiwen.com/subject/jtvnmctx.html