技术派社区»论坛 › 技•综合 › Photoshop › photoshop设计制作一款清新典雅的网页模板 ...

[PS教程] photoshop设计制作一款清新典雅的网页模板

大眼勾魂 2013-12-4 21:39:30

本教程中我们介绍如何利用photoshop设计制作一款清新典雅的网页模板布局,利用图形工具和图层样式等photoshop技巧,实现漂亮的网页布局.

网站模板
单击下图观察网站模板

素材
矢量社区媒体图标（下载）凌乱、自然灰褐色图片（下载）高清花纹笔刷（下载） Mono图标（下载）一，创建文档
打开photoshop，创建尺寸为1020*1180px的空白文档。
二，设定导航条背景
选择矩形选项框工具（M），新建有整个画布宽的选区，高度不能太高，之后用深灰色（#393939）执行填充（cmd/ctrl+F5），如下：

拷贝（cmd/ctrl+J）刚创建的导航图层，并对其加上杂色滤镜（滤镜>杂色>加上杂色），如下设定：

之后修改图层混合模式为”叠加”，透明度下降到大概23%。
三，新建站点logo/名称
对于logo，我运用了粗斜样式的字体Georgia，用白色（#ffffff）编辑’Six’时，用米黄色（#F7E5C4）编辑’Studios’，对于图标，选用了Mono图标中的boxupload32图标，如下：

四，加上菜单
运用色彩（#DBD1BE）编辑激活时的菜单，正常状态的菜单运用色彩（#ABAAAA）。

只为让激活状态下的菜单越加醒目，选择圆角矩形工具（T）新建一圆角矩形（圆角半径为5px，前景色为#464646）放置在菜单图层下面，如下：

，之后设定见下图层样式：
‘内阴影’/'描边’：

五，加上展览区背景
在布局头部，我们还要加上一作品展览区，以幻灯片形式来播放照片，每张照片配有容易讲解与导航。在开始前，选择矩形选项框工具（M）新建矩形，以色彩（#D3CAB8）执行填充。

下一步，下载凌乱、自然灰褐色图片（或者其它图片）拉放在文档中，放到矩形图层上面。
接下来我们要盖住一点不想要的纹理，在图层面版选中矩形图层，按住cmd/ctrl键，单击缩稍图，新建一主动选区，之后选中纹理图层，在下拖菜单中单击”加上图层蒙板”，如此盖住了除选区外的所有区域，最终，撤消选区（ctrl+D），将纹理图层的透明度下降到35%。

六，加上网站讲解
运用水平字体工具（T），在展览区左侧加上网站文字描述，采用Helvetica 或者Arial字体执行编辑，确保标题（色彩#FFFFFF）与内容（色彩#2A2A2A）文字在不同图层。

只为使标题越加炫目，按如下设定加上图层样式：
‘阴影’/'渐变叠加’：

接下来，新建”About us”的圆角按钮。再一遍选择圆角矩形工具（U），设定半径5PX，文本色彩为#404040，同时在右半有一箭头图标（Mono图标集中的circleright32），重设它的大小以匹配按钮。

在矩形图层上加上下面样式：
‘外发光’/'渐变叠加’：

最终一步是在按钮右半加上花纹，就是这微妙的设计元素提高了此设计的优雅度。下载并安装花纹笔刷（资源区的上面），先设定前景色为#343434，选择画笔工具（B），找到花纹笔刷，在画布上执行一遍单击，之后将图层混合模式改成“强光”。

七，新建幻灯片区
选择圆角矩形工具（U），前景色为白色，半径为5PX，在展览区右侧生成一圆角矩形。

设定此图层的透明度为15%，以显示背景图片，继续加上’阴影’的图层样式：

现在，我们想要在幻灯片区域加上照片缩稍图，你可找一网站抓图或者其它照片，放到白色圆角矩形上面。我们得将照片四角变成圆角，在图层面版，按住cmd/ctrl，单击白色圆角矩形的缩稍图，新建一主动选区，继续选取放照片的图层，去往菜单”选取>更改>收缩”，收缩10px，之后运行”选取>反选”（cmd/ctrl+shift+I）反选选区，最终运行”编辑>清除”。

接下来加上照片说明，在图层面版，按住cmd/ctrl，单击照片图层的缩稍图，新建一主动选区，创建图层，并以黑色填充选区，之后运用圆角矩形选项框工具（M），选择创建的黑色矩形的上部分并删除。

降低图层透明度到75%，加上容易的文字描述

八，在展览区底部加上分隔线
像过程2相同在展览区底部加上一条灰色、水平分隔线，不同在于还要加上’内阴影’的样式：

设计的主内容区的时间到了！
九，给主内容区加上背景
就像预览P1样，主内容区分布为三列，选择矩形选项框工具（M），生成画布宽的选区，用色彩（#FBF5EA）执行填充。

主内容区的设计其实非常容易，可是要让人看出很容易也要花一定时间做完。我们把从左半开始，放置服务列表。
十，加上列标题
对于我们的列标题，从Mono图标选择一象征符号，并放到标题左半，运用字体”Georgia“与色彩（#323232）编辑标题文本。下一步，在文本底部加上弧线边界，这就要用到钢笔工具（P）了，像下P1样新建一条路径。