使用Photoshop创建一个3D元素的网页布局

在本网页设计教程中，您将发现一种方法来创建一个光滑和专业的网页布局，结合3D彩带设计趋势，以及一些其他迷人的3D元素，使用Photoshop。

最终结果

下面是我们将要创建的内容的预览。点击下面的图片来查看全分辨率最终产品．

创建Photoshop文档

1首先创建一个新文档(Ctrl+N);输入尺寸1200像素通过1200像素．

使背景层可编辑

2默认情况下，Photoshop会锁定背景图层，这样你就不能编辑它了。为了使它可编辑，双击图层面板内的背景图层(如果不可见，按F7切换图层面板)。

或者，你可以右键单击背景图层，选择“来自背景的图层”。双击后，您将看到一个对话框(如下图所示)。为你的背景图层输入一个新名称，然后按OK;这样做将使我们能够编辑背景层。

创建背景

3.现在我们的背景图层是可编辑的，双击图层的缩略图添加一个渐变叠加图层样式;使用下图作为图层样式设置的指导。

4新建图层(Ctrl+Shift+N)命名为"标题背景”。

在工具面板中选择矩形选框工具(M)，然后在画布的上半部分做一个选区;选择应该是关于150 px在高度和跨度的整个宽度的画布。

5用任意颜色填充选区(Alt+Backspace)，然后添加这些图层样式。

6新建图层(Ctrl+Shift+N)标签:导航背景”。重复步骤4 - 5，只是这一次选择应该是大约50 px在高度上，仍然跨越了画布的整个宽度;选择也应该直接在最后一个下面。

7填充选区(Alt+Backspace)与任何颜色，然后添加两个图层样式(a颜色叠加和一个中风图层样式)。

您现在应该有这样的东西。

创建头部

8新建图层(Ctrl+Shift+N)标签:头，从工具面板中使用矩形选框工具(M)，然后创建一个固定大小的选区850 px宽,150 px在高度。

9将选区放在画布的中间，确保选区的底部在应用到“导航背景”图层的描边处结束。

10用任意颜色填充选区(Alt+Backspace)，然后添加以下三个图层样式。

添加Header标题

11使用水平文字工具(T)将网站标题和标语添加到标题的左侧。设置和颜色代码如下图所示。

你应该有这样的东西。

创建导航栏

12新建图层(Ctrl+Shift+N)标签:导航”。

使用矩形选框工具(M)做出一个固定的选区850 px宽,50 px在高度。

13使选区直接在标题下方，然后填充任意颜色。

14现在，将这三个图层样式添加到你的导航图层中。

你应该有这样的东西。

15使用水平文字工具在导航栏上添加导航链接。

制作导航悬停按钮

16在工具面板中选择圆角矩形工具(U)并设置它的大小半径来10 px．

17画出一个小矩形，大约80 pxx50 px．

18用矩形选框工具(M)在矩形的上半部分创建一个矩形。填充矩形的颜色与圆角矩形相同。

19复制形状右键单击图层，选择复制图层。然后使用变换功能旋转复制层180度，编辑>变换>旋转180度^o．

最后，把这些形状放在一起，确保它们水平;使用移动工具(V)移动形状。

20.使用矩形选框工具(M)在复制形状的一半左右选择一个选区。一旦你做出了一个选区，点击Del键清除选框下方的区域。

21使用移动工具(V)和方向键将小形状对齐到大形状旁边，确保它们没有直接重叠。

移动到位后，在图层面板窗口中按Ctrl +点击你的小形状图层的缩略图，在它周围加载一个选区。

22切换到较大形状的图层，按Del键清除它下面的区域。在形状的另一侧重复上述步骤-当你完成时-你应该有这样的东西。

切换鼠标悬停按钮

23一旦你有了鼠标悬停按钮，你可以删除复制的图层，然后将剩下的图层重命名为“悬停”。现在，添加这两个图层样式。

24拖动“nav hover”图层到你的导航文本图层下面。

将“nav button”图层移到一个导航链接的后面，然后将链接文本的颜色改为白色(#FFFFFF）.

25在“nav hover”按钮图层下面，新建一个图层(Ctrl+Shift+N)，命名为“导航盘旋额外”。在这个图层上，使用椭圆选框工具(M)创建一个小椭圆，并填充椭圆的颜色# A3002F．

26使用矩形选框工具将椭圆切成两半，对下半部分进行选择，并删除它的底部部分。然后将半椭圆移动到导航按钮的圆形部分下面。

如果椭圆悬挂在导航，修剪它一些。一旦椭圆是正确的大小，复制它的层，并把复制的另一边。

你应该有这样的东西。

创建内容区

27新建图层(Ctrl + Shift + N)命名为内容区域”。使用矩形选框工具，创建一个选区850 px在宽度上，和我们的其他盒子一样，你需要的高度取决于你要有多少内容;根据需要，您可以稍后将其放大或缩小。

用任意颜色填充选区，然后添加这三个图层样式。

28拖动“content area”图层到“navigation”图层下面，用移动工具(V)调整内容区域框，使其看起来像一条缩进的线，内容区域和导航的交汇处。

使搜索框图形化

29新建图层(Ctrl+Shift+N)命名为搜索框，并使用矩形选框工具(M)在右侧的导航区域内创建一个矩形选框。

30.通过选择编辑>填充(Shift+F5)与白色(#FFFFFF)，然后添加一个描边图层样式。

31在虚拟搜索区域内，使用水平文字工具添加一些文本。

32直接在虚拟搜索字段旁边，使用矩形选框工具(M)创建另一个选区。

33用任意颜色填充选区，然后添加渐变叠加而且中风图层样式;使用下图作为设置的指导。

你应该有这样的东西。

创建特色区域

34新建图层(Ctrl+Shift+N)命名为特色区域，使用圆角矩形工具创建一个圆角矩形区域，半径设置为10 px．

35使用多边形套索工具(L)在左上角创建一个尖箭头。用圆角矩形相同的颜色填充同一层上的箭头。

36现在添加两个图层样式(渐变叠加和描边)到你的特色区域图层。

用内容填充特色区域

37新建图层(Ctrl+Shift+N)命名为有特色的边境，并使用圆角矩形工具(U)在特征区域内创建一个矩形形状。

38添加一个微妙的渐变叠加到特色的边缘层。点击图层的缩略图，同时按住键盘上的Ctrl键来加载它周围的选区，然后点击“选择>修改>合约”。

订约选择10 px，然后按“OK”。

39找到一张你想要使用的图片/照片(我使用了一些花的图片)，在Photoshop中打开它，并复制图像到你的剪贴板(Ctrl +C)。然后与我们在上一步中所做的收缩选框仍然活跃，点击编辑>粘贴到(Shift+Ctrl+V)。然后，图像将被粘贴在选区内。

40用一些虚拟文本和标题完成特色区域。

创建内容区域的3D彩带

41使用与我们的导航悬停按钮相同的方法来创建左侧par，只是这次创建的主要重叠部分要长得多，并且是水平方向的，而不是垂直方向的制作导航悬停按钮部分的教程，以刷新您的记忆，如果需要)。

42在彩带的末端(右侧)，使用多边形套索工具(L)创建一个三角形，并使用Del键删除不需要的区域。

最后，给这个图层添加一个投影图层样式(使用你喜欢的设置)和一些虚拟文本。

43复制3D色带层，并通过选择编辑>转换>水平翻转来翻转复制的层。使用移动工具(V)将它定位到右侧;它们将作为侧边栏内容的标题。

44在每个标题下面，添加一些虚拟文本和一两个图像。

创建页脚

45再次创建悬停按钮(或者，您可以简单地复制悬停按钮的图层)。

46使用下面列出的颜色替换渐变叠加设置。

47合并成一个图层，并通过编辑>变换>旋转90^o公约。将对象移动到布局的左侧。

48再次复制形状，并使用编辑>变换>水平翻转它。

将形状移动到布局的另一侧。

49合并两个形状到一个图层(Ctrl+E)，缩放(Z)到任何一个形状，并做出一个矩形选择，就像下图，并选择编辑>自由变换(Ctrl+T)。

50选择中间的锚点并拖动到画布的另一侧。

你应该有这样的东西。

51最后，使用水平文字工具添加你的页脚信息。

结束!

如果您按照教程进行操作，您应该会得到如下图所示的内容。

下载Photoshop文件

您可以下载本教程中使用的最终Photoshop文件(PSD)，以加强您的学习，并将您自己的工作与我们的工作进行比较。

• 3 d-ribbon-layout.zip(ZIP, 1.24 mb)

请分享你的结果!

你可以在网站上分享自己的研究结果Flickr加入六个修订组上传你的最终产品。无论你是初学者还是高级Photoshop用户，我们都想看看你有什么!

相关内容

• 如何在Photoshop中制作一个绿色和光滑的网页布局
• 使用Photoshop创建一个黑暗和光滑的网页布局
• 如何用Photoshop创建一个干净的博客设计