|
在这篇网页设计教程中，你将学习如何设计优雅并专业的网页布局，我们将运用各种 photoshop技巧，依靠图形工具和图层样式等基本操作来实现此布局。
1、新建文档
打开 photoshop，新建尺寸为 1020*1180px的空白文档。
2、设置导航条背景
选取矩形选框工具(M)，创建有整个画布宽的选区，高度不要太高，然后用深灰色(#393939)进行填充(cmd/ctrl+F5)：
复制(cmd/ctrl+J)刚新建的导航图层，并对其添加杂色滤镜(滤镜>杂色>添加杂色)。
然后更改图层混合模式为”叠加”，透明度下降到大约 23%。
3、创建站点 logo/名称
对于 logo，我使用了粗斜样式的字体 Georgia，用白色编辑Six时，用米黄色编辑Studios，对于图标，选用了 Mono图标中的 boxupload32图标，
4、添加菜单
使用颜色(#DBD1BE)编辑激活时的菜单，正常状态的菜单使用颜色(#ABAAAA)。
为了让激活状态下的菜单更加醒目，选取圆角矩形工具(T)创建一个圆角矩形(圆角半径为 5px，前景色为#464646)放置在菜单图层下方。
5、添加展示区背景
在布局头部，我们还要添加一个作品展示区，以幻灯片形式来播放图片，每张图片配有简单介绍和导航。在开始前，选取矩形选框工具(M)创建矩形，以颜色(#D3CAB8)
进行填充。
下一步，下载凌乱、自然灰褐色图案(或其它图案)拖放到文档中，放在矩形图层上方。
接下来我们要遮住一些不需要的纹理，在图层面板选中矩形图层，按住 cmd/ctrl键，点击缩略图，创建一个自动选区，然后选中纹理图层，在下拉菜单中点击”添加
图层蒙版”，这样遮住了除选区外的所有区域，最后，撤消选区(ctrl+D)，把纹理图层的透明度下降到 35%。
6、添加网站介绍
使用水平字体工具(T)，在展示区左侧添加网站文字说明，采用 Helvetica或 Arial字体进行编辑，确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。
为了使标题更加炫目，添加图层样式。
7、创建幻灯片区
选取圆角矩形工具(U)，前景色为白色，半径为 5PX，在展示区右侧生成一个圆角矩形。
设置此图层的透明度为 15%，以显示背景图案，接着添加?阴影?的图层样式：
此刻，我们需要在幻灯片区域添加图片缩略图，你可以找一个网站截图或其它图片，放在白色圆角矩形上方。我们得把图片四角变成圆角，在图层面板，按住 cmd/ctrl，
点击白色圆角矩形的缩略图，创建一个自动选区，接着选择放图片的图层，去往菜单”选择>修改>收缩”，收缩 10px，然后执行”选择>反选”(cmd/ctrl+shift+I)反选选区。
最后执行”编辑>清除”。
接下来添加图片描述，在图层面板，按住 cmd/ctrl，点击图片图层的缩略图，创建一个自动选区，新建图层，并以黑色填充选区，然后使用圆角矩形选框工具(M)，选
取新建的黑色矩形的上部分并删除。
8、在展示区底部添加分隔线
在展示区底部添加一条灰色、水平分隔线，不同在于还要添加内阴影的样式。
9、给主内容区添加背景
就像预览图一样，主内容区分布为三列，选取矩形选框工具(M)，生成画布宽的选区，用颜色(#FBF5EA)进行填充。
主内容区的设计其实相当简单，但是要让人看出很简单也要花一定时间完成。我们将从左边开始，放置服务列表。
10、添加列标题
对于我们的列标题，从 Mono图标挑选一个象征符号，并放在标题左边，使用字体”Georgia“和颜色(#323232)编辑标题文本。下一步，在文本底部添加弧线边界，这
就要用到钢笔工具(P)了，创建一条路径。
|
