在Photoshop中创造一个优雅的摄影Web版式.docx

在Photoshop中创造一个优雅的摄影Web版式.docx

《在Photoshop中创造一个优雅的摄影Web版式.docx》由会员分享，可在线阅读，更多相关《在Photoshop中创造一个优雅的摄影Web版式.docx（33页珍藏版）》请在冰豆网上搜索。

在Photoshop中创造一个优雅的摄影Web版式

在Photoshop中，创造一个优雅的摄影Web版式

本文转自【创美优品】

在这个Photoshop教程中，您将学习如何制作漂亮的网页设计PSD是黑暗的主题和完善的网络营销组合是围绕着照片。

这是一个非常简单的教程，旨在说明一些伟大的技术，以适应到您的网页设计工作流程。

预览

您可以点击下面的图片看到满刻度的网页设计。

教程资源

PSD模板：

960网格系统

质地：

防锈

划伤质地：

金属

图片：

日落

图片：

向日葵

图片：

男婴

图片：

背景虚化

字体：

ITCAVANTGARDE

字体：

黑体

步骤1：

设置Photoshop的文件

创建一个新的图层在Photoshop中（按Ctrl/Cmd+N），尺寸为1200×910px。

第2步：

将960网格系统

我们将根据我们的布局，在16列960网格系统。

您可以从他们的网站下载免费的PSD模板。

一旦你已经完成下载的PSD模板，在Photoshop中打开PSD，将其拖动到画布上。

记住要保持这个网格层，最上面的图层在图层面板中，这将作为我们的导游的路线。

第3步：

布局的背景

暂时隐藏我们的网格层，并创建一个新层，其下。

在“工具”面板中，设置前景色为一个棕橙色（＃bc7821）和背景颜色为深褐色（＃362a21）。

选择渐变工具（G），并设置您的选择径向渐变。

创建一个渐变的中心处的画布。

梯度看起来有点普通，所以让我们添加一些纹理。

转到滤镜“>”转换为智能滤镜。

通过这样做，我们能够做出改变的过滤器适用于这层。

现在，让我们添加一些噪音，这种梯度，选择滤镜>杂色>添加杂色。

让我们添加更多的发光的顶部区域，我们的背景。

拿出你的画笔工具（B），设置主直径“选项周围700像素，还设置前景色为白色。

创建一个新层顶部的渐变在画布上单击一次申请的笔触。

改变这层的混合模式为叠加，调整不透明度为34％。

建议在Photoshop 的教程资源列表（浏览设计指导赠品区类似的东西），打开锈纹理。

我们的画布上拖动图像，并使用自由变换命令（Ctrl/Cmd的+T）调整其大小，使其略小于画布上。

使用普通的圆形，羽毛刷，稍微清除掉两侧和底部区域，使用橡皮擦工具（E）。

或者，您可以使用图层蒙版，如果你不想要的改变是永久性的。

更改的铁锈纹理的混合模式为叠加，不透明度为16％。

接下来，在Photoshop中打开刮伤的金属质感，也到我们的画布上拖动这个纹理，，稍微清除掉两侧和底部。

设置这层的混合模式为正片叠底，并调整其透明度为15％。

第4步：

添加的站点名称

取消隐藏我们的网格层。

选择横排文字工具（T），并设置字体选项ITC前卫CE（或你喜欢的字体）。

还可以设置文字的颜色到一个棕色（＃523117）。

然后键入“JOHNDOE摄影”（或任何你想的站点名称）的中心的布局。

复制文字图层，然后复制文字图层的颜色设置为白色（＃FFFFFF），改变其混合模式为叠加，调整不透明度为32％。

移动1px的下降与向下箭头键，使用移动工具（V）相结合，这将建立某种形式的蚀刻效果。

步骤5：

创建导航菜单

创建一个新层。

使用横排文字工具（T）（选项设置如下图所示），输入您的网站名称下方的导航文字。

确保集中在画布上的。

现在，让我们的每个项目设计的悬停状态的导航。

选择圆角矩形工具（U）。

设置工具的选择形状图层，半径为30px。

绘制一个圆角矩形，一个新的图层下方的导航链接项目（“HOME”）。

接下来，应用颜色叠加和内阴影的圆角矩形的图层（在图层面板中的缩略图，双击访问图层样式“对话框窗口）。

颜色叠加

设置颜色成黄色（＃f9a81f）。

内阴影

设置内阴影的颜色为黑色（＃000000）。

此外，圆角矩形图层的不透明度设置为30％左右，稍微显示我们的背景。

让的圆角矩形看起来更加蚀刻。

将通过按下Ctrl/cmd，然后点击图层面板上的圆角矩形，圆角矩形的选区。

在一个新层，去编辑>描边。

更改图层的混合模式为叠加，并调整其不透明度为18％。

删除左侧和顶部的行程，使用橡皮擦工具（E）具有体积小，羽毛的尖端。

第6步：

添加幻灯片的第

将我们的网格层上。

使用矩形选框工具（M），低于我们的导航绘制一个矩形选区，然后选择黑色（＃000000）填充（按Shift+F5）。

确保矩形是14格的列宽和集中在我们的布局。

这个矩形图层的混合模式为柔光，让一些背景显示通过。

时间在我们的幻灯片中放置一个图像。

在Photoshop中打开一张照片（如日落的图片中提到的教程资源列表），将它拖到我们的布局。

它的规模适当自由变换。

暂时隐藏照片的图层，然后绘制一个矩形的幻灯片区域内，选择矩形选框工具（M）。

让我们掩盖了照片上添加矢量蒙版“按钮，通过点击图层面板，它应该创建一个掩码与您所选择的区域。

现在，您可以取消隐藏图片层。

你应该注意到，如果操作正确，图像的任何部分被屏蔽的区域之外，规定将被隐藏。

步骤7：

在幻灯片控制

下面的幻灯片层，并创建一个新图层组，命名为“箭头”（组织）。

这个新创建的图层组内创建一个新层。

选择椭圆工具（U）和左侧的幻灯片上绘制一个圆。

接下来，添加外发光和渐变叠加圆上。

外发光

设置外发光的颜色为黑色（＃000000）。

渐变叠加

梯度从暗棕色（＃271303），一个稍微不那么深褐色（＃3a2102）。

这是我们的左边的幻灯片控制现在的样子。

我们将需要删除不必要的阴影的圆。

要做到这一点，我们需要去图层>栅格化>形状，这种形状的扁平化。

之后，它的扁平化，选择下方的区域使用矩形选框工具（M）的幻灯片，然后按Delete删除不需要的下方区域的矩形选择。

现在，让我们创建的箭头，我们的按钮。

在一个新的图层，选择圆角矩形工具（U），然后设置其选项，因此它被设置为形状图层，半径30像素。

有一个高价值的“半径”选项，使每到底是什么通函。

画一条对角线的形状表示的箭头的左侧部分。

更改形状的颜色到一个黑暗的静音状态橙色（＃b56d1b），给它一个颜色叠加图层样式。

要创建的底部箭头，复制这个形状，去编辑>变换路径>“水平翻转”。

选择这两个层，在图层面板中的箭头，然后去编辑>变换>旋转，旋转的箭头-90 ?

因此，它是指向左边。

合并这两个图层，在图层面板中选择它们，然后按下Ctrl/Cmd的+E.复制合并后的图层。

给新复制的图层黑色（＃000000）的颜色叠加图层样式来改变它的颜色，也将其移动1像素的左侧，使用移动工具（V），这将创建一个蚀刻的外观。

现在，我们将要创建的右箭头。

选择我们的“箭头”图层组在图层面板，复制组，然后去编辑>变换>水平翻转，翻转的方向。

重复的幻灯片显示控制移动到右侧。

现在，我们应该有这样的事情：

第8步：

创建小的照片缩略图

将网格层上。

使用矩形选框工具（M），绘制一个选区约4年半的列宽，下面的幻灯片。

黑色（＃000000）填充它。

改变混合模式为柔光。

打开一张照片（如向日葵的图片），将其放在画布上，然后调整到其原始大小的80％左右。

暂时隐藏的向日葵层，使用矩形选框工具（M），我们的第一个矩形内绘制一个较小的选择。

取消隐藏向日葵的照片，在图层面板中单击“添加图层蒙板图标。

这将使它所以只有向日葵的选定区域显示。

现在让我们来创建我们的缩略图的标签。

使用矩形选框工具（M），创建一个选择底部的照片，并填写它与我们的暗棕色（＃261103）。

更改层的不透明度为85％，让照片背后的部分。

使用横排文字工具（T），添加一个标签（如“NATURE”）。

我有一个黄色的文本颜色（＃ffbf47），使用Helvetica字体。

我们的缩略图下面添加一些文本，这将作为某种描述这个特殊的缩略图。

重复同样的过程，添加2个照片缩略图（您可以使用男婴和建议的背景虚化图像的教程资源列表，或使用一些自己的照片）。

第9步：

使页脚

在这个过程中的最后一步，我们将创建页脚区域。

创建一个新层。

选择铅笔工具（B），并设置其颜色为深褐色（＃2c1303）。

绘制了14列宽划分以下三个缩略图，将作为我们的主要内容和页脚区域之间的分隔。

提示：

按住Shift键，可以确保我们创建了一个直线。

重复您刚刚创建的线路层，并改变其颜色为白色（＃FFFFFF）使用颜色叠加图层样式。

将重复1px的下降。

改变其混合模式为叠加，减少其不透明度为18％，建立某种形式的蚀刻效果。

最后，使用横排文字工具（T），添加页脚文本（可以包括，例如，一些版权信息）。

教程总结

我们已经成功地创造了一个优雅的摄影网站设计样机！

我们使用各种技术和开发网站的布局，包括使用选择工具，形状工具，采用垃圾纹理和过滤器，调整层的混合模式，等是常见的方法。

我希望您发现本教程非常有用，感觉自由离开任何问题的评论

下载源文件

elegant_photography_layout（ZIP，9.31MB）

更多分享请登陆创美优品