网址导航网首页

嗨,欢迎来到25Qi网址导航

站长QQ:2598903095

WordPress

WP主题开发04:怎样给wordpress主题效果图切图?

时间:2022-06-23 丨 作者:WordPress教程学习网站 丨 关键词:WP主题开发04

WordPress主题开发的整个过程中,切图虽然是一个很不显眼的流程,但有时却是不可或缺的,尤其是团队协同开发的时候。WordPress主题的效果图,往往是一张很大的图片,我们在开发wordpress主题的静态模板时,不会也不可能把整张效果图放到Web页面上给客户看。我们需要把这张超大的效果图中图片分割下来,给wordpress主题静态模板的前端开发人员,由他们通过HTML代码和CSS代码来把它们展现在web网页上,这个过程,就是切图。那么,我们怎样给我们的wordpress主题模板的效果图进行切图呢?

首先,切图人员要熟悉切图的软件,我们这里以Photoshop为例,因为,我一般都是通过photoshop来进行切图的。这里,我们先弄一张效果图,这里我就不通过photoshop来设计了,我直接找到一个自己比较喜欢的网站——时美网,然后通过搜狗浏览器来对它整个页面进行截图。在搜狗浏览器打开《时美网》,然后点击搜狗浏览器的“文件”导航菜单中的“保存为图片”子菜单(如下图),这样,我们就把时美网的首页以图片的形式保存到了我们的本地电脑中。

image.png

第一步:打开photoshop软件。

我们打开photoshop软件,我这里安装的是 photoshop CS5,版本比较老,但用起来还是挺顺手,你们可以下载更新一点的版本,现在应该是photoshop 2021了吧,最近,也没太关注这个。我觉得,不管什么软件,只要够用就行。

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

点击photoshop顶部菜单中的“文件”,在下拉菜单中点击“打开”,这时会弹出一个窗口,在这个窗口中找到我们刚刚在浏览器中截取的wordpress主题效果图,如下图:

 image.png

双击打开它 或者 鼠标左键点击选择它,再点击“打开”按钮,这时wordpress主题效果图就在photoshop的编辑区域展示,如下图:

image.png

第三步:放大图片。

这时,在编辑区域,图片是以全景的形式展示,所以看上非常小,不好切割。我们按住 ctrl 键后,再连续点击 +号键,就可以把图片放大,如下图:

image.png

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

光标移到photoshop的左侧的工具栏中的“裁剪工具”上,单击鼠标的右键,这时,会显示这个按钮上的右键菜单,如下图:

image.png

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

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

选择好切割图片后,我们就可以对wordpress主题效果图进行切割操作了。切片工具操作是很简单的,我们只需在那些需要切割的地方,按下鼠标左键,然后拖拽到适当的区域,就可以创建切片,如下图:

image.png

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

第六步:保存切图。

我们切割好效果图后,我们还要保存它们。点击photoshop顶部菜单中的“文件”,在下拉菜单中选择点击“存储为web和设备所用的格式”子菜单,如下图:

image.png

这时会弹出一个“存储为web和设备所用的格式”的窗口,如下图:

image.png

在这个窗口中,我们可以对存储图片的格式、大小等进行设置,然后点击“存储”按钮,这时会弹出“将优化结果存储为”窗口。在这个窗口中,我们可以选择保存的格式,这里我选择的是“仅限图像”,如下图:

image.png

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

image.png

“所有用户切片”就是我们用切片工具切割过的图片,如我们在第五步中切割的那7个图片。当然,我们也可以选择“所有切片”,我们在切割我们需要的图片时,photoshop会把不需要部分自动切割成其它的部分,所有切片包括用户切片和其它切片。

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

image.png

好了,这就是我们对wordpress主题的效果图进行切割的整个过程。还是那句话,在wordpress主题的整个开发过程中,切图并不是必须的,一般情况下,只有团队协同开发中,可能会用到切图。在我个人的wordpress主题模板开发过程中,我很少用到切图这个流程。当然,这要视每个人的习惯而定了。嗯,有关切图就介绍到这里。如有疑问,欢迎点评或私信。

在线随机小姐姐图片换一批
最新收录
  • 安庆人事考试培训网

    安庆人事考试培训网:承办公务员、军队转业干部和专业技术人员继续教育培训工作;协助行业主管部门开展专业技术人员继续教育专业课培训和人事培训基地建设;承办机关事业单位技术工人等级考试的培训和各类社会化培训工作;组织培训考务人员;在政策规定范围内,开展人事考试考前培训和其他社会化培训业务。

  • 山东自学考试网

    山东自考网为广大山东自考人提供山东自考资讯、山东自考培训、山东自考历年真题下载,第1时间发布山东自考报名时间、山东自考成绩查询、山东自考网上报名、山东自考网校和山东自考书等相关资料和信息,全心全意为广大山东自考人服务

  • 上海公务员考试网

    上海公务员考试网发布2023年上海公务员考试报名时间、报名政策、职位表、考试大纲、上海公务员考试报名入口以及历年真题等辅导信息、申论热点,上海市公务员考试网承诺每日更新……

  • 浙江公务员考试网

    浙江公务员考试网:2023年浙江公务员考试时间、2023年浙江公务员考试职位表、公告大纲来自浙江省公务员局官网,2023年浙江公务员考试报名入口、报考条件、历年真题、成绩查询

  • 南充市教育考试院

    南充市教育考试院官方网站—咨询电话:0817-2239002

  • 在职研究生网

    在职研究生网第一时间公布在职硕士、在职博士等在职研究生招生信息,并为学员提供在职研究生报名、在职研究生招生简章及同等学力申硕、非全日制研究生、中外合作办学、高级研修班等咨询服务。