WP主题开发04:如何裁剪WordPress主题效果图?

在wordpress主题开发的整个过程中,切图虽然是一个很不显眼的流程,但有时却是不可或缺的,尤其是团队协同开发的时候。wordpress主题的效果图,往往是一

第一步:打开photoshop软件。

我们打开photoshop软件。我这里安装的是photoshop CS5。版本比较旧,但是还是很好用的。您可以下载更新的版本。现在应该是Photoshop 2021。最近,我没有太关注这个。我觉得什么软件并不重要,只要够用就行。

第二步:在photoshop中打开效果图。

单击Photoshop 顶部菜单中的“文件”,然后单击下拉菜单中的“打开”。将会弹出一个窗口。在这个窗口中,找到我们刚刚在浏览器中捕获的WordPress主题渲染,如下图:

双击打开它或左键单击选择它,然后单击“打开”按钮。此时Photoshop的编辑区域中就会显示WordPress主题效果图,如下图:

第三步:放大图片。

此时在编辑区域中,图片是以全景的形式显示的,所以看起来很小,很难剪切。按住ctrl键并连续点击+键后,我们可以放大图片,如下图:

第四步:选择“切片”工具。

将光标移至Photoshop左侧工具栏中的“裁剪工具”,单击鼠标右键。此时会显示该按钮的右键菜单,如下图:

然后,我们点击,在弹出的右键菜单中选择“切片工具”。

第五步:切割效果图中的图片。

选择剪切图片后,我们就可以剪切WordPress主题渲染了。切片工具的操作非常简单。我们只需在需要剪切的区域上按下鼠标左键,然后拖动到合适的区域即可创建切片,如下图:

WP主题开发04:如何裁剪WordPress主题效果图?

在这个演示中,我剪切了7次,也就是说,我只剪切了效果图中的图片,因为我在写前端静态模板的时候,只需要这些图片作为素材,而对于文字部分,我可能直接添加文字。每次我们剪切的时候,被子的图片上都会显示一个蓝色的标记,这说明我们已经剪切了这部分。

第六步:保存切图。

当我们剪切完效果图后,我们还需要保存它们。点击Photoshop顶部菜单中的“文件”,在下拉菜单中选择并点击“保存为网络和设备”子菜单,如下图:

此时会弹出“Save in format for web and device”窗口,如下图:

在这个窗口中,我们可以设置存储图像的格式、大小等,然后点击“保存”按钮,会弹出“优化结果另存为”窗口。在此窗口中,我们可以选择保存的格式。这里我选择“Image Only”,如下图:

然后,在“切片”选项中,我选择了“所有用户切片”,如下图:

“所有用户切片”就是我们用切片工具剪切出来的图片,比如我们第五步剪切的7张图片。当然,我们也可以选择“所有切片”。当我们剪切我们需要的图片时,Photoshop会自动将不需要的部分剪切成其他部分。所有切片包括用户切片和其他切片。

这些设置完成后,我们就可以点击“保存”按钮开始保存到本地电脑了。保存的图片会放在images文件夹中,每张图片都会以渲染名作为前缀来命名,如下图:

用户评论

WP主题开发04:如何裁剪WordPress主题效果图?
空巷

这个裁剪WordPress主题效果图的方法太实用了!终于不用手动调整了。

    有11位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
◆残留德花瓣

学习了!以前都是手动裁剪,现在知道这个技巧,感觉效率提升不少。

    有18位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
心安i

裁剪效果图这个步骤很重要,希望这篇教程能让我少走弯路。

    有17位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
何年何念

太感谢了,这个教程真的帮到了我,WordPress主题开发进步了不少。

    有16位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
毒舌妖后

裁剪效果图总是让我头疼,这篇教程正好解了我的燃眉之急。

    有5位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
迷路的男人

这个方法听起来挺简单,我得试试看能不能应用到我的项目中。

    有8位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
孤者何惧

裁剪WordPress主题效果图这个技巧一定要掌握,对开发效率有很大帮助。

    有17位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
艺菲

一直想知道如何裁剪效果图,这篇教程太及时了,点赞收藏!

    有12位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
惯例

学到了,裁剪效果图的时候注意细节真的很关键。

    有13位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
念安я

这个教程的截图太清晰了,跟着步骤做应该没问题。

    有13位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
人心叵测i

感觉这个裁剪技巧对于初学者来说有点难度,希望能有更详细的解释。

    有6位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
漫长の人生

WP主题开发04这篇文章很有用,特别是裁剪效果图这部分。

    有18位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
堕落爱人!

裁剪WordPress主题效果图的方法挺多,这篇教程介绍的方法比较实用。

    有14位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
病态的妖孽

这个教程太棒了,我之前一直不知道如何裁剪效果图,现在解决了大问题。

    有6位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
各自安好ぃ

看了这个教程,感觉WordPress主题开发不是那么难了,尤其是裁剪效果图。

    有20位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
为爱放弃

裁剪效果图这个步骤我之前总是做不好,这篇教程让我有了新的思路。

    有15位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
秒淘你心窝

这篇教程让我对WordPress主题开发有了更深的理解,尤其是裁剪效果图部分。

    有9位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
笑傲苍穹

这个裁剪技巧我之前听说过,但不知道具体怎么操作,现在终于明白了。

    有7位网友表示赞同!

WP主题开发04:如何裁剪WordPress主题效果图?
神经兮兮°

感谢分享这个裁剪WordPress主题效果图的方法,对我的项目有很大帮助。

    有6位网友表示赞同!

综合资源

扫盲Web前端中的“切图”到底是什么?

2024-9-16 16:15:37

综合资源

11不规则形状网页设计欣赏

2024-9-16 16:19:33

购物车
优惠劵
搜索