袖珍玫瑰花期:photoshop网页布局教程:设计wordpress模板

在本教程中，我们把主要运用容易的外形作出创造性的博客布局，我们主要用到几个笔刷技术，一些图象素材...。网页设计布局设计是很轻松的。主要靠你的想象力，你也可设计出具有吸引力的网页作品。在这篇教程里，您将理解一些专业技巧，主要是钢笔工具与外形矩形工具~~~~。好好学吧，我们开始了！

教程具体：

计划：Adobe Photoshop CS4中 难度： 中级 预计做完时间： 1.5小时

先看一看完成效果吧。

资源

要做完本教程，您想要先下载 960网格psd。如下图的效果，他会把帮你画好辅助性，如此的设计的好处于于切换为div+css方便些，还有方便调节布局等~~~

第1步

打开960网格psd模板。如下的图象。

第2步

创建层。加上一美丽的渐变色。此时去层“图层样式>渐变叠加”，并运用下面设定。

第3步

创建层，选取圆角矩形工具，并并绘出如下外形。

第4步

在这个导航栏加上下方的图层样式。{内发光，渐变叠加，描边}

第5步

创建层，运用一样的工具（圆角矩形工具）新建另一外形与色彩：＃001424。

第6步

在这层加上图层样式如下。"内发光"

第7步

新建（新层）另一和圆角矩形图形，运用的色彩白色。

第8步

提高对这个图形的一点容易的图层样式，调整填充值为10％。

下方是到目前为止的效果。

第9步

在这个地方上放上一照片。如下效果。

第10步

此时你想要调节放上来的照片，选取刚刚的白色层，用魔术棒选定白色区，再单击加载的照片图层，右键>反选，删除多余部分。

第11步

把照片调节缩小~~~

第12步

按ctrl + D以取消选取。创建2个层，此时运用圆角矩形工具来新建另一色彩为＃4b6e82外形图形。见下图：

过程13

对于这两个图形加上见下图层样式。"内发光，描边"

过程14

在右半图形图层下，创建图层，运用椭圆工具在见下图部分勾出一椭圆，填充#000000。主要做投影效果，

第15步

打开“滤镜>模糊>高斯模糊”，并运用下面设定。 Photoshop把询问您是否要栅格化的外形，接着前进，按确认。看看投影效果出来了~~

过程16

此时，我们在投影的上方提高了一点亮光的效果。选取右半图形层，创建图层，选取线条工具，并设定线宽为1像素，之后新建一如下的垂直线。

过程17

右键点击并选取层栅格化层。（站码（zmool）注：在这儿相对喜爱用钢笔工具，假如用铅笔工具，就不想要这部操作了~~）

第18步

选取橡皮工具，并选取一光滑，圆刷约100px。用它来删除顶部与底部的一部分。

过程19

因为一样的手法在顶部新建另一亮光效果。

过程20

也可在顶部的白线拷贝一层，下移一像素，见P，作为对比的投影关联。

第21步

见下图，选取中央下方图形图层，创建图层，新建另一圆角矩形图形，白色。

过程22

之后在此图层上方创建，新建几个矩形工具外形。我们在后面把加上一点图象。

过程23

在这些外形加上一样的图层样式。"描边"

过程24

此时我们在这些白色的图形上加上一点照片。并在右半加上文字标题与一点文字描述。（加上文字时，用文字工具在右半区域勾出一矩形，之后键入....）

过程25

之后在每篇文章中间加上虚线。

过程26

在这儿新建另三个外形，并设定的在文字图层下，见P。（可运用描边，投影/内发光实现）

过程27

运用圆角矩形工具在上面侧栏新建搜索框。 同时，你可看到我放置在导航栏上的一点文字了。

过程28

在此搜索框下方加上下面图层样式。"内发光，描边"

过程29

此时运用圆角矩形工具来新建另一外形。如下。此外，再添加一右半的图标。

第30步

在如下图的地方新建另一白色的外形。

过程31

这个外形加上下面图层样式。"内发光，渐变叠加，描边"

第32步

按住ctrl键，用钢笔工具选定外形的边上按两次。“切换点工具”更改外形的外观。

第33步

随着仍旧按下ctrl键选取下面锚点。朝下拖动。。。

第34步

此时效果图如下。

第35步

运用椭圆工具来新建一圆。

第36步

右键点击并选取层栅格化层。随着矩形选项框工具作出如此的选取如下。删除右半部分...

第37步

把小圆图层移到白条的图层下，看看下方的效果吧~~。

第38步

此时，我们把加上两个按钮，并在上方加上一点文字。

第39步

左半的都好了，此时在侧边栏创造一点白色的外形，如下。

第40步

对于所有这些白色的外形一样，请加上下面图层样式。"描边"

第41步

在侧边栏中加上一点图标。在网上可找到很多如此的图标，此外，我们也加上了一点广告照片。

第42步

此时在右侧下方加上也些最新文章什么的~~。

第43步

此时都几乎了，再处理下导航栏上的另外细处吧。运用直线工具来新建两个小线。放大，见下图效果。

第44步

按住ctrl键，同时选取这两个层。当您选定的路线按ctrl + E的拼合成这亮光芒层。选取橡皮工具，并用它来删除顶部与底部的一点部分。请留意，您想要一柔软的擦皮，为20像素大小圆刷。

第45步

修改层为柔光混合模式。重复到另外导航文字中间。

第46步

此时做logo标志，见下图。

第47步

加上此文字图层混合样式。"投影，内发光，渐变叠加"

第48步

在logo背景加上高光效果,运用圆形透明渐变工具，见P。

第49步

修改图层为柔光混合模式。

结束，大功告成了！

设计做完了！~~~~~~ 如何？希望你们都喜欢，也希望对你们都有用....

在这儿教程里，希望各位多用钢笔工具与外形矩形工具~~~~