在wordpress主题开发的整个过程中,切图虽然是一个很不显眼的流程,但有时却是不可或缺的,尤其是团队协同开发的时候。wordpress主题的效果图,往往是一张很大的图片,我们在开发wordpress主题的静态模板时,不会也不可能把整张效果图放到web页面上给客户看。我们需要把这张超大的效果图中图片分割下来,给wordpress主题静态模板的前端开发人员,由他们通过HTML代码和CSS代码来把它们展现在web网页上,这个过程,就是切图。那么,我们怎样给我们的wordpress主题模板的效果图进行切图呢?
首先,切图人员要熟悉切图的软件,详情页长图ps切片怎么用,我们这里以photoshop为例,因为,我一般都是通过photoshop来进行切图的。这里,我们先弄一张效果图,这里我就不通过photoshop来设计了,我直接找到一个自己比较喜欢的网站——时美网,然后通过搜狗浏览器来对它整个页面进行截图。在搜狗浏览器打开《时美网》,然后点击搜狗浏览器的“文件”导航菜单中的“保存为图片”子菜单(如下图),这样,我们就把时美网的首页以图片的形式保存到了我们的本地电脑中。
第一步:打开photoshop软件。
方法如下:1、将准备好的详情页置入PS画布中(或随意一张图片置入画布中)。2、选择工具栏中的“切片工具”,然后鼠标移动到画布中的时候,就会显示一个刀片的形状,而且会有数字显示切片个数。3、在最上方开始,鼠标按住。
第二步:在photoshop中打开效果图。
1、首先将要裁剪的图片备好份,先检察好需要裁剪的图片,若是没有图片有问题,裁剪就是在浪费时间,因此一定要养成检察的好习惯。2、用PS打开图片,点开始--打开,找到文件所在的位置,将其打开,如图:3、找到切片工具,。
双击打开它 或者 鼠标左键点击选择它,再点击“打开”按钮,这时wordpress主题效果图就在photoshop的编辑区域展示,如下图:
第三步:放大图片。
第四步:选择“切片”工具。
光标移到photoshop的左侧的工具栏中的“裁剪工具”上,单击鼠标的右键,这时,会显示这个按钮上的右键菜单,如下图:
然后,我们在这个弹出来的右键菜单中,点击选择“切片工具”。
第五步:切割效果图中的图片。
01 首先,如图打开PS,打开要进行处理的淘宝图片。02 点击左侧工具栏上的裁剪工具,选择切片工具。03
在这个演示中,我切割了7次,也就是说,我只切割了效果图中的图片,因为,在我编写前端静态模板时,我只需要这些图片来作为素材,而文字部分我可能直接用文字来添加。我们每切割一次,就会在被的图片上显示一个蓝色的标记,意思是我们切割了这部分。
第六步:保存切图。
我们切割好效果图后,我们还要保存它们。点击photoshop顶部菜单中的“文件”,在下拉菜单中选择点击“存储为web和设备所用的格式”子菜单,如下图:
这时会弹出一个“存储为web和设备所用的格式”的窗口,如下图:
在这个窗口中,我们可以对存储图片的格式、大小等进行设置,然后点击“存储”按钮,这时会弹出“将优化结果存储为”窗口。在这个窗口中,我们可以选择保存的格式,这里我选择的是“仅限图像”,如下图:
然后,在“切片”选项中,我选择的是“所有用户切片”,如下图:
“所有用户切片”就是我们用切片工具切割过的图片,如我们在第五步中切割的那7个图片。当然,我们也可以选择“所有切片”,我们在切割我们需要的图片时,photoshop会把不需要部分自动切割成其它的部分,所有切片包括用户切片和其它切片。
这些设置成后,我们就可以点击“保存”按钮,就开始保存到本地电脑上。保存后的图片会放到一个images文件夹中,而每个图片都会以效果图名作为前缀来命名的,如下图:
1、用PS打开淘宝详情页图片。2、用标尺将每个需要切片的图片隔开。3、标尺全部标注完成。4、点击使用【切片工具】5、将图片全部切出。6、点击【文件】→【导出】→【储存为web所用格式】7、点击【储存】8、设置一下保存。