Photoshop美工教程：设计清新高雅的网页布局.pdfVIP

photoshop 学 习 教 程 Photoshop 美工教程：设计清新高雅的网页布局 在这篇网页设计教程中，你将学习如何设计优雅并专业的网页布局，我们将运用各种photoshop 技巧，依靠图形工具和图层样式等基本操作来实现此布局。作为奖励， 在教程结束后附有HTML/CSS/JavaScript 的网站模板，完全免费下载。 设计好的效果图 网站模板 1、新建文档 打开photoshop，新建尺寸为1020*1180px 的空白文档。 2 、设置导航条背景 选取矩形选框工具(M)，创建有整个画布宽的选区，高度不要太高，然后用深灰色(#393939)进行填充(cmd/ctrl+F5)，如下所示： 复制(cmd/ctrl+J)刚新建的导航图层，并对其添加杂色滤镜(滤镜杂色添加杂色)，如下设置： 然后更改图层混合模式为”叠加” ，透明度下降到大约23% 。 3、创建站点logo/名称 对于logo，我使用了粗斜样式的字体Georgia，用白色(#ffffff)编辑‟Six‟时，用米黄色(#F7E5C4)编辑‟Studios‟，对于图标，选用了Mono 图标中的boxupload32 图标， 如下所示： 1 photoshop 学 习 教 程 4 、添加菜单 使用颜色(#DBD1BE)编辑激活时的菜单，正常状态的菜单使用颜色(#ABAAAA)。 为了让激活状态下的菜单更加醒目，选取圆角矩形工具(T)创建一个圆角矩形(圆角半径为5px，前景色为#464646)放置在菜单图层下方，如下所示： ，然后设置如下图层样式： „内阴影‟/描边‟： 5、添加展示区背景 在布局头部，我们还要添加一个作品展示区，以幻灯片形式来播放图片，每张图片配有简单介绍和导航。在开始前，选取矩形选框工具(M)创建矩形，以颜色(#D3CAB8) 进行填充。 下一步，下载凌乱、自然灰褐色图案(或其它图案)拖放到文档中，放在矩形图层上方。 接下来我们要遮住一些不需要的纹理，在图层面板选中矩形图层，按住cmd/ctrl 键，点击缩略图，创建一个自动选区，然后选中纹理图层，在下拉菜单中点击”添加 图层蒙版” ，这样遮住了除选区外的所有区域，最后，撤消选区(ctrl+D)，把纹理图层的透明度下降到35% 。 2 photoshop 学 习 教 程 6 、添加网站介绍 使用水平字体工具(T)，在展示区左侧添加网站文字说明，采用Helvetica 或Arial 字体进行编辑，确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。 为了使标题更加炫目，按如下设置添加图层样式： „阴影‟/渐变叠加‟： 接下来，创建”About us” 的圆角按钮。再一次选取圆角矩形工具(U)，设置半径5PX，文本颜色为#404040，同时在右边有一个箭头图标(Mono 图标集中的circleright32)， 重设它的大小以匹配按钮。 在矩形图层上添加以下样式： „外发光‟/渐变叠加‟： 3 photoshop 学 习 教 程 最后一步是在按钮右边添加花纹，就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷(资源区的上方)，先设置前景色为#343434，选取画笔工具(B)， 找到花纹笔刷，在画布上进行一次点击，然后把图层混合模式改为“强光”。 7、创建幻灯片区 选取圆角矩形工具(U)，前景色为白色，半径为5PX，在展示区右侧生成一个圆角矩形。 设置此图层的透明度为15%，以显示背景图案，接着添加‟阴影‟的图层样式： 此刻，我们需要在幻灯片区域添加图片缩略图，你可以找一个网站截图或其它图片，放在白色圆角矩形上方。我们得把图片四角变成圆角，在图层面板，按住cm