预览
你可以点击下面的图片查看网页设计的全尺寸．
教程资源
- PSD模板:960网格系统
- 材质:生锈
- 材质:刮花金属
- 图片来源:Sunset
- 图片来源:葵花
- 图片:男婴
- 图片:散景
- 字体:ITC前卫
- 字体:字体
步骤1:设置Photoshop文档
在Photoshop中创建一个新图层(Ctrl/Cmd + N)，尺寸:1200x910px。
步骤2:合并960网格系统
我们将以16列布局为基础960网格系统．
您可以下载免费的PSD模板他们的网站．一旦你完成下载PSD模板，在Photoshop中打开PSD并将其拖到我们的画布上。记住在图层面板中将这个网格层作为最上面的图层，因为这将作为我们对齐的指南。
步骤3:制作布局的背景
暂时隐藏我们的网格层，并在它下面创建一个新层。在工具面板中，设置前景色为棕橙色(#bc7821)，背景色为深棕色(#362a21)。选择渐变工具(G)，将选项设置为径向渐变。
在画布的中心创建一个渐变。
渐变看起来有点平淡，所以让我们给它添加一些纹理。转到过滤器>转换为智能过滤器。
通过这样做，我们可以对稍后应用于该层的过滤器进行更改。现在让我们通过选择滤镜> noise > add noise来给这个渐变添加一些噪点。
让我们在背景的顶部区域添加更多的发光。
拿出画笔工具(B)，设置主直径选项为700px左右;同时将前景色设置为白色。在我们的渐变顶部创建一个新层，点击画布一次，应用画笔笔触。
将该图层的混合模式改为叠加，并将其不透明度调整为34%。
打开教程参考资料列表中建议的Rust纹理(或浏览设计指导免费赠品部分)在Photoshop中。将图像拖到画布上，使用自由变换命令(Ctrl/Cmd + T)调整它的大小，使它比画布略小。使用一个普通的圆形羽毛刷，用橡皮擦工具(E)稍微擦去边缘和底部区域。
另外，如果您不希望更改是永久性的，您可以使用图层蒙版。
改变铁锈纹理的混合模式为叠加，不透明度为16%。
接下来，在Photoshop中打开划痕金属纹理，并将该纹理拖到画布上，并稍微擦除侧面和底部。
设置该图层的混合模式为正片叠底，并调整其不透明度为15%。
步骤4:添加站点名称
取消隐藏网格层。选择水平文字工具(T)，设置字体选项为ITC Avant Garde CE(或您喜欢的字体)。
同时设置文本的颜色为棕色(#523117)。然后在布局的中心输入“JohnDoe Photography”(或者任何你喜欢的网站名称)。
复制文本图层，然后将复制的文本图层的颜色设置为白色(#ffffff)，将混合模式更改为叠加，并将其不透明度调整为32%。
用移动工具(V)和向下箭头键将它向下移动1px;这会产生某种蚀刻效果。
步骤5:创建导航菜单
创建一个新图层。使用水平文字工具(T)(选项设置如下所示)在网站名称下方键入导航文字。
确保它位于画布的中心。
现在让我们来设计导航栏上每个项目的悬停状态。选择圆角矩形工具(U)。
设置工具的选项为形状图层，半径为30px。在导航链接项Home的下面新建一个图层，画一个圆角矩形。
接下来，在圆角矩形的图层上应用颜色叠加和内阴影(双击图层面板中的缩略图，进入图层样式对话框窗口)。
颜色叠加
设置颜色为黄色(#f9a81f)。
内阴影
设置内阴影的颜色为黑色(#000000)。
同时，将圆角矩形图层的不透明度设置为30%，以稍微显示背景。
让我们使圆角矩形看起来更蚀刻。按Ctrl/Cmd在圆角矩形周围画一个选区，然后在图层面板中点击圆角矩形。在新图层上，点击编辑>描边。
改变图层的混合模式为叠加，并调整其不透明度为18%。使用橡皮擦工具(E)设置一个小的，有羽毛的尖端擦去左侧和顶部的描边。
第六步:添加幻灯片部分
重新打开网格层。
使用矩形选框工具(M)，在导航栏下方画一个矩形选区，然后用黑色(#000000)填充(Shift + F5)。确保矩形的宽度为14格列，并位于布局的中心。
改变这个矩形图层的混合模式为柔光，让一些背景通过它显示出来。
是时候在幻灯片中放置一张图片了。在Photoshop中打开一张照片(比如教程参考资料列表中提到的日落照片)，并将其拖到我们的布局中。用自由变换适当地缩小它。
暂时隐藏照片的图层，然后用矩形选框工具(M)在幻灯片区域内画一个矩形选区。
让我们通过点击图层面板中的添加矢量蒙版按钮来蒙版照片，这应该会在你选择的区域创建一个蒙版。现在你可以再次取消隐藏照片层。
您应该注意到，如果操作正确，任何位于遮罩区域之外的图像部分都将被隐藏。
步骤7:制作幻灯片控件
在幻灯片图层下面创建一个新图层组，命名为arrow(为了组织)。在这个新创建的图层组中创建一个新图层。
选择椭圆工具(U)，在幻灯片的左侧画一个圆。接下来，在圆上添加外发光和渐变叠加。
外发光
设置外发光的颜色为黑色(#000000)。
渐变叠加
让渐变从深棕色(#271303)到稍微浅一点的深棕色(#3a2102)。
这是左边幻灯片显示控件现在的样子。
我们需要移除不必要的圆圈阴影。
要做到这一点，我们需要通过点击图层>栅格化>形状来平化这个形状。平坦后，用矩形选框工具(M)选择幻灯片下方的区域，然后点击删除以移除矩形选区下方不想要的区域。
现在让我们为按钮创建箭头。
在一个新图层上，选择圆角矩形工具(U)，然后设置它的选项，使其设置为形状图层和半径为30px。为半径选项设置高值使每个端点看起来都是圆形的。画一个对角线形状，表示箭头的左边部分。
改变这个形状的颜色为暗柔和的橙色(#b56d1b)，给它一个颜色叠加图层样式。
要创建箭头的底部，复制这个形状，然后点击编辑>变换路径>水平翻转。
在图层面板中选择构成箭头的两个图层，然后点击编辑>变换>旋转;旋转箭头-90度o所以它是指向左边的。
合并这两个图层，在图层面板中选择它们，然后按Ctrl/Cmd + e。复制合并的图层。
给复制的图层一个黑色(#000000)颜色叠加图层样式来改变它的颜色，并使用移动工具(V)向左移动1px;这将创建一个蚀刻外观。
现在我们将创建一个右箭头。在图层面板中选择我们的arrow图层组，复制该组，然后点击编辑>变换>水平翻转它的方向。将重复的幻灯片控件移动到右侧。
我们现在应该有这样的东西:
步骤8:创建小照片缩略图
重新打开网格层。使用矩形选框工具(M)，在幻灯片下方画一个大约4.5列宽的选区。填充颜色:黑色(#000000)。
将混合模式更改为柔光。
打开一张照片(比如向日葵的照片)，把它放在画布上，然后把它的大小调整到原来大小的80%。暂时隐藏向日葵的图层，使用矩形选框工具(M)，在第一个矩形内画一个较小的选区。
取消向日葵图片的隐藏，点击图层面板中的添加图层蒙版图标。这将使它只显示向日葵的选定区域。
现在让我们为缩略图创建标签。
使用矩形选框工具(M)，在照片的底部创建一个选区，并填充为深棕色(#261103)。将这个图层的不透明度设置为85%，这样可以显示出图片后面的部分。使用水平文字工具(T)，给它添加一个标签(比如“NATURE”)。
我使用Helvetica字体，文字颜色为黄色(#ffbf47)。
在缩略图下面添加一些文本;这将作为这个特定缩略图的某种描述。
重复相同的过程，再添加2张缩略图(您可以使用教程参考资料列表中建议的Baby boy和Bokeh库存图像，或者使用您自己的一些照片)。
步骤9:制作页脚
作为这个过程的最后一步，我们将创建页脚区域。创建一个新图层。选择铅笔工具(B)，设置颜色为深棕色(#2c1303)。
在三个缩略图下面画一个14列宽的分隔，作为主内容和页脚区域之间的分隔。提示:按住Shift键确保我们创建一条直线。
复制刚刚创建的直线层，并使用颜色叠加样式将其颜色更改为白色(#ffffff)。
将副本向下移动1px。将混合模式更改为叠加，并将不透明度降低到18%，以创建某种蚀刻效果。
最后，使用水平文字工具(T)添加页脚文本(例如，您可以包括一些版权信息)。
教程汇总
我们已经成功创建了一个优雅的摄影网站设计模型!我们使用了开发站点布局时常用的各种技术和方法，包括使用选择工具、形状工具、应用grunge纹理和滤镜、调整图层的混合模式等等。如果你仍然不习惯这样从头开始创建一个网站，我建议你去看看网页设计公司！
如果你不确定如何找到一个好的，看看这些建议！有些公司可以设计比这复杂得多的网站，比如一个网站有数百个页面大学在美国，有很多选择。但如果你只是在寻找一个简单的设计，我希望你觉得这个教程有用，并随时在评论中留下任何问题。
下载源文件
- elegant_photography_layout(zip, 9.31 mb)
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识并成长为个人。
