第一步:打开photoshop软件。
我们打开photoshop软件。我这里安装的是photoshop CS5。版本比较旧,但是还是很好用的。您可以下载更新的版本。现在应该是Photoshop 2021。最近,我没有太关注这个。我觉得什么软件并不重要,只要够用就行。
第二步:在photoshop中打开效果图。
单击Photoshop 顶部菜单中的“文件”,然后单击下拉菜单中的“打开”。将会弹出一个窗口。在这个窗口中,找到我们刚刚在浏览器中捕获的WordPress主题渲染,如下图:
双击打开它或左键单击选择它,然后单击“打开”按钮。此时Photoshop的编辑区域中就会显示WordPress主题效果图,如下图:
第三步:放大图片。
此时在编辑区域中,图片是以全景的形式显示的,所以看起来很小,很难剪切。按住ctrl键并连续点击+键后,我们可以放大图片,如下图:
第四步:选择“切片”工具。
将光标移至Photoshop左侧工具栏中的“裁剪工具”,单击鼠标右键。此时会显示该按钮的右键菜单,如下图:
然后,我们点击,在弹出的右键菜单中选择“切片工具”。
第五步:切割效果图中的图片。
选择剪切图片后,我们就可以剪切WordPress主题渲染了。切片工具的操作非常简单。我们只需在需要剪切的区域上按下鼠标左键,然后拖动到合适的区域即可创建切片,如下图:

在这个演示中,我剪切了7次,也就是说,我只剪切了效果图中的图片,因为我在写前端静态模板的时候,只需要这些图片作为素材,而对于文字部分,我可能直接添加文字。每次我们剪切的时候,被子的图片上都会显示一个蓝色的标记,这说明我们已经剪切了这部分。
第六步:保存切图。
当我们剪切完效果图后,我们还需要保存它们。点击Photoshop顶部菜单中的“文件”,在下拉菜单中选择并点击“保存为网络和设备”子菜单,如下图:
此时会弹出“Save in format for web and device”窗口,如下图:
在这个窗口中,我们可以设置存储图像的格式、大小等,然后点击“保存”按钮,会弹出“优化结果另存为”窗口。在此窗口中,我们可以选择保存的格式。这里我选择“Image Only”,如下图:
然后,在“切片”选项中,我选择了“所有用户切片”,如下图:
“所有用户切片”就是我们用切片工具剪切出来的图片,比如我们第五步剪切的7张图片。当然,我们也可以选择“所有切片”。当我们剪切我们需要的图片时,Photoshop会自动将不需要的部分剪切成其他部分。所有切片包括用户切片和其他切片。
这些设置完成后,我们就可以点击“保存”按钮开始保存到本地电脑了。保存的图片会放在images文件夹中,每张图片都会以渲染名作为前缀来命名,如下图:
用户评论
空巷
这个裁剪WordPress主题效果图的方法太实用了!终于不用手动调整了。
有11位网友表示赞同!
◆残留德花瓣
学习了!以前都是手动裁剪,现在知道这个技巧,感觉效率提升不少。
有18位网友表示赞同!
心安i
裁剪效果图这个步骤很重要,希望这篇教程能让我少走弯路。
有17位网友表示赞同!
何年何念
太感谢了,这个教程真的帮到了我,WordPress主题开发进步了不少。
有16位网友表示赞同!
毒舌妖后
裁剪效果图总是让我头疼,这篇教程正好解了我的燃眉之急。
有5位网友表示赞同!
迷路的男人
这个方法听起来挺简单,我得试试看能不能应用到我的项目中。
有8位网友表示赞同!
孤者何惧
裁剪WordPress主题效果图这个技巧一定要掌握,对开发效率有很大帮助。
有17位网友表示赞同!
艺菲
一直想知道如何裁剪效果图,这篇教程太及时了,点赞收藏!
有12位网友表示赞同!
惯例
学到了,裁剪效果图的时候注意细节真的很关键。
有13位网友表示赞同!
念安я
这个教程的截图太清晰了,跟着步骤做应该没问题。
有13位网友表示赞同!
人心叵测i
感觉这个裁剪技巧对于初学者来说有点难度,希望能有更详细的解释。
有6位网友表示赞同!
漫长の人生
WP主题开发04这篇文章很有用,特别是裁剪效果图这部分。
有18位网友表示赞同!
堕落爱人!
裁剪WordPress主题效果图的方法挺多,这篇教程介绍的方法比较实用。
有14位网友表示赞同!
病态的妖孽
这个教程太棒了,我之前一直不知道如何裁剪效果图,现在解决了大问题。
有6位网友表示赞同!
各自安好ぃ
看了这个教程,感觉WordPress主题开发不是那么难了,尤其是裁剪效果图。
有20位网友表示赞同!
为爱放弃
裁剪效果图这个步骤我之前总是做不好,这篇教程让我有了新的思路。
有15位网友表示赞同!
秒淘你心窝
这篇教程让我对WordPress主题开发有了更深的理解,尤其是裁剪效果图部分。
有9位网友表示赞同!
笑傲苍穹
这个裁剪技巧我之前听说过,但不知道具体怎么操作,现在终于明白了。
有7位网友表示赞同!
神经兮兮°
感谢分享这个裁剪WordPress主题效果图的方法,对我的项目有很大帮助。
有6位网友表示赞同!