WordPress主题PS设计图制作过程

知更鸟
知更鸟
知更鸟
1551
文章
6920
评论
2010年4月14日15:03:03 10 10.6K

在这个教程,我将给大家演示如何制作简洁优雅的WordPress主题.虽然只是使用简单的技术,但我保证你能创建一个极好的 WordPress主题.

新建宽度为960像素,高度为1200像素的文档.背景层双击>图层样式>渐变叠加,渐变颜色从左到右分别 是#91a2b4,#6a7f94.

WordPress主题PS设计图制作过程

用圆角矩形工具新建2个图形.第一个在顶部填充白色.在这里我将放置WordPress主题的头部,以及网站的主体部分.第二个放在底部,你可以用 于放置小工具,或者其他细节.

WordPress主题PS设计图制作过程

下一步选择白色图形,然后按下CTRL+J键复制图形.最后再新复制图层上击右键>栅格化图层.栅格化图层之后选择>载入选区.我们将 删除图形的下半部分.需要用到矩形选区工具.按住Alt键在上面提到的选区下面拉一个选区,你将会看到一个”-”符号当你按住Alt键不放的时候.这个符 号表示你将减去激活图层的选区.

WordPress主题PS设计图制作过程

下一步点击编辑菜单里面的选择>修改>收缩,收缩值介乎3到5个像素.点击确定你将会看到比原来更小的选区.

WordPress主题PS设计图制作过程

创建一个新的图层(按下CTRL+SHIFT+ALT+N),载入.随便使用填充工具填充选区.然后按下CTRL+D取消选择.如下设置图层样式.

WordPress主题PS设计图制作过程

WordPress主题PS设计图制作过程

WordPress主题PS设计图制作过程

WordPress主题PS设计图制作过程

到目前为止的结果.

WordPress主题PS设计图制作过程

按照相同的方式切割另一个图形,如下放置页面上.

WordPress主题PS设计图制作过程

其实这个图形的样式跟上面那个是一样的,不过渐变颜色稍微更改了一下.

WordPress主题PS设计图制作过程

用矩形工具在右边创建新的图形.

WordPress主题PS设计图制作过程

图层样式跟教程第一个的图层样式一样,然后使用钢笔工具在下面勾出阴影.

WordPress主题PS设计图制作过程

在阴影上面选择滤镜>模糊>高斯模糊,调整模糊半径为6.0,然后我吧图层的透明度减少到40%,下面是我目前为止的结果,我创建了 一个漂亮和光滑的阴影.

WordPress主题PS设计图制作过程

在黑色区域,我放置了一些文字和另外的图行.在右边部分我放进去一张图片.

WordPress主题PS设计图制作过程

在这里我将图层放大到400%,然后使用钢笔工具勾出简单的三角形.确保图片在背景层上面.

WordPress主题PS设计图制作过程

使用横向排版工具,在WordPress主题中添加文字内容.

WordPress主题PS设计图制作过程

右边制作广告区域.

WordPress主题PS设计图制作过程

下面的图片你会看的帖子和侧边栏中间有一条线.线所使用的正是线条工具.使用相同的工具,在帖子间画出一条线,这次我将会格式化线所在图层,然后用 橡皮擦工具擦除左右两边部分.

WordPress主题PS设计图制作过程

最后再页脚和底部添加文字.在增加9个按钮.我想我已经完成教程.这只是非常简单的教程,用到的不外乎一些基本的技巧.我希望你你使用这些技巧去完 成更为复杂的WordPress主题.

我的最终结果. 请点击图片看整体布局.

WordPress主题PS设计图制作过程

weinxin
版权声明
本站原创文章转载请注明文章出处
关于Photoshop CC 2017 临时文件夹 实用技巧

关于Photoshop CC 2017 临时文件夹

升级到Photoshop CC 2017后,每次打开Photoshop会在程序安装盘的下一个盘符中生成名称类似XXXzxpsign8251fd8558a05d80的两个文件夹,关闭程序后也不会自动删除...
25个免费WordPress公司企业主题 Themes

25个免费WordPress公司企业主题

据国外统计80%的盗版商业收费主题,有后门注入,比如我之前写的这篇文章《小心!盗版主题中可能存在后门》,对于会些编程知识的人,耍弄小白还是很简单。 这里推荐一些适合公司企业使用的免费WordPress...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:10   其中:访客  9   博主  0   引用   1
    • 毒药 毒药 2

      并在保留原文地址及作者的情况下引用到你的网站或博客。

      这文一看就是老外的。博主从可能吧转过来的,我跳过去一看根本就没人家老外的原文链接。
      还比较无聊的说。。。

      • nortan nortan 0

        不得不说你这个太强大了:)

        • Ansonyi Ansonyi 1

          学习一下咯….谢谢分享分

          • 岚 3

            果然很强。。。。学习中。。。

            • wahyle wahyle 0

              这个比较强大。

              • 小也 小也 2

                有点看不懂。。。

                • 51taodd.net 51taodd.net 4

                  外表是做出来了,代码怎么加呢?
                  鸟哥有没有用其他工具做主题设计的教程呢?

                  • 诸葛小邪 诸葛小邪 0

                    难道要切图后一个一个小图片替换掉?工作量还是有点大哦

                    • 支付宝免签约 支付宝免签约 0

                      工作量还是有点大