Photoshop切图

首先,今天不用再p什么海报之类的东西了,哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈,好开心。嗯。。。接下来切入正题。(严肃脸)

在网页设计过程当中,必定会遇到需要往页面中插入图片的情况,这个时候,就要会用photoshop对一张图片进行切割,选取需要的部分,用以装饰自己的页面。接下来就以上课老师讲的一个图片为例,总结一下切图基本的方法,以及切图过程中需要注意的问题:

一.首先,在ps中加载出素材图: 
这里写图片描述

此时发现列出图片中所有图层: 
这里写图片描述

注:改图的格式是PSD,即加载进photoshop后,可以显示各个图层,方便再次编辑图片。但是在操作前最好养成赋值图层(ctrl+shift+alt+e)的好习惯,以免造成在以后的操作中因为失误而不可挽回的尴尬情况

二.切图 
1.简单图片的裁切(以切出图中二维码为例): 
A.点击移动工具(V)这里写图片描述勾选上面菜单栏的“自动选择”这里写图片描述 
B.将鼠标移动至二维码处点击,可发现右边图层栏中二维码对应的图层已经被自动选中。这里写图片描述 
注:发现该图层右下角有个标记,此时应该单右选择“栅格化图层”之后再进行操作 
C. 选中该图层,点击锁定,会发现该图层出现了一个“锁”,表示当前操作锁定该图层。 
这里写图片描述 
注:锁定某图层是ps操作中很重要的一个功能,它可以保证在对某图层操作时不受任何其他图层的干扰。但一定记得操作完之后,再次点击锁定以解除对该图层的锁定,以保证接下来的操作能正常执行。 
D.点击选框工具,对二维码进行框选: 
这里写图片描述 
注:可以发现,选框范围远远大于二维码范围,但这不影响切图的正常尺寸,因为已经执行了上一步锁定图层的操作,框选的内容不会涉及到其他图层。 
E.选框完成后,先按ctrl+c赋值已选内容,再按ctrl+n新建一个图层,点击确定。新建图层中会出现一个和框选内容同等大小的画布,此时按ctrl+v粘贴已选内容即可: 
这里写图片描述 
这里写图片描述

这里写图片描述

F.将已切好的图片转为web形式保存:按ctrl+shift+alt+s,选择jpeg或png-24,由于二维码背景不要求透明,保存为jpg格式就好。再调整图片品质,选择保存路径,按确定即可: 
这里写图片描述

2.复杂图片的裁切(以中间的楼群图为例): 
A.首先观察,楼群图上还缀有“A、B、C、区”等的样式,首先应该去掉它们,方法如下: 
用移动工具分别选中多余的装饰图,找到对应的图层,点击该图层前“可视状态”这里写图片描述使之变为”隐藏状态“这里写图片描述,从而将影响我们操作的图层隐藏。 
B.同样,点击移动工具,在图中点击楼群图,会发现右边已经选中相应的图层。但是区别在于,该图最终效果是由好几个图层共同组成的,但对最外面的图层进行裁切显然会出错,此时就需要进行下面的操作。 
C.找到该图层所属的图层组(本例中图片属于图层组这里写图片描述),按ctrl+E合并改组图层,使之成为完整的一个图层这里写图片描述

D.再按照上述步骤进行选框、新建、保存即可。 
这里写图片描述

3.矢量图的裁切(以图中红色空心圆圈为例): 
A.同上述框选步骤,对圆圈进行框选,复制,新建文件并且复制。 
B.由于圆圈是矢量图,即为了使切出来的圆圈保证空心(背景透明),则在新建文件的时候,需要将白色背景的“可视状态”变为“隐藏状态”从而使背景透明。 
这里写图片描述

这里写图片描述

C.由于背景透明,所以在存储的时候,要注意将格式设置为png-24. 
更多关于ps中的图片格式的内容,可以参照上篇博客

最终切出的圆圈:这里写图片描述

以上就是针对几种不同的图,对切图功能的简单总结。

接下来,介绍对一张图片大小、字体大小的度量方法 
1.最简单的方法,拿到一张图片,单右-属性-详细信息,即可查看该图的大小像素信息。 
2.利用ps进行测量: 
A.在ps中载入一张jpg格式的图片: 
这里写图片描述 
测量图中黄色输入框的大小 
1)用选框工具选出黄色输入框,鼠标未松动之前,鼠标右下角就已经出现框选内容的weight和height的像素值大小:这里写图片描述

或者,点击右边的详细信息按钮,也能显示出框选内容的weight和height信息:这里写图片描述 
注,前提是点击绿色标记的按钮,将单位选择为像素

测试文字的大小: 
1)若文字是可编辑的文字图层,选中图层点击左边文字工具这里写图片描述,在上面信息栏中就会出现文字的详细信息 
2)若文字无法编辑,则同图片测大小的方法,框选后查看信息即可。

注:由于这里的框选牵扯测量结果,故框选之前应按ctrl+“+”,将所要测量部分尽可能放大,保证框选精确。

最后,还有对一张图片里文字进行涂抹的方法: 
例:将这里写图片描述中所有文字涂抹掉 
1)若文字所在处背景颜色为纯色(以“01.15 周二”和“DAY 12”为例): 
a.用吸管工具吸取文字背景色; 
b.框选所需涂抹的文字; 
c.按alt+delete之间填充前景色(注:填充后景色的快捷键是:ctrl+delete) 

2)若文字所在处背景颜色为渐变色(以“签到”为例) 
a.在渐变处框选一块无文字区; 
b.按ctrl+t弹出对选框的编辑格水平向有文字方向拖拉,即可抹去文字,并且保证涂抹后背景同为渐变色 
这里写图片描述

最终涂抹文字后的结果如下:

这里写图片描述

以上就是对今天课上所有内容的总结。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Photoshop批处理脚本可以帮助您自动化的过程,提高工作效率。以下是一个简单的Photoshop批处理脚本示例: ``` #target photoshop // 获取当前文档对象 var docRef = app.activeDocument; // 尺寸 var sliceWidth = 200; var sliceHeight = 200; // 起始位置 var startX = 0; var startY = 0; // 数量 var numSlicesX = Math.ceil(docRef.width / sliceWidth); var numSlicesY = Math.ceil(docRef.height / sliceHeight); // 循环 for (var i = 0; i < numSlicesX; i++) { for (var j = 0; j < numSlicesY; j++) { // 计算位置 var sliceX = startX + i * sliceWidth; var sliceY = startY + j * sliceHeight; // 计算区域 var sliceBounds = [ sliceX, sliceY, sliceX + sliceWidth, sliceY + sliceHeight ]; // 创建 var sliceRef = docRef.artLayers.add(); sliceRef.name = "Slice_" + i + "_" + j; sliceRef.bounds = sliceBounds; // 导出 var sliceName = sliceRef.name + "_" + docRef.name + ".png"; var exportOptions = new ExportOptionsSaveForWeb(); exportOptions.format = SaveDocumentType.PNG; exportOptions.PNG8 = false; exportOptions.transparency = true; exportOptions.interlaced = false; exportOptions.includeProfile = false; exportOptions.optimized = true; docRef.exportDocument(new File(docRef.path + "/" + sliceName), ExportType.SAVEFORWEB, exportOptions); // 删除 sliceRef.remove(); } } // 完成 alert("完成!"); ``` 这个脚本将文档分成若干个指定大小的片,并将每个片导出为PNG文件。您可以根据需要修改片大小和导出选项。要使用此脚本,请将代码复制到一个文本编辑器中,并将文件保存为.jsx格式。然后在Photoshop中打开您要的文档,并选择“文件”>“脚本”>“浏览”,然后选择您保存的脚本文件。脚本将自动运行,并生成片。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值