如何在Photoshop中设计一个空间未来画廊布局

在本网页设计教程中，您将找到一种使用Photoshop创建3D空间/未来画廊布局的方法。我们介绍了几种方法，如使用矩形选框工具和使用透视变换工具绘图。

更新

编者注(雅各布·古比):我很遗憾地宣布，本教程的第二部分将不会发布。在本教程系列的第二部分中，我们考虑到了质量问题。

我们尝试着修改第二个教程，但是却不能让我在网站上发布它。将来，在发布教程的第一部分之前，我将更彻底地审查、测试、调试并确保后续教程可以发布。这个由两部分组成的系列教程将向您展示如何在Photoshop中创建布局，然后在第二部分中如何将设计转换为使用基于标准的HTML/CSS和jQuery的功能齐全的web模板。

下载源文件

请随意下载源文件，以便您可以研究它，尽管我们鼓励您推迟这样做，直到您完成教程，以便您可以将您的工作与提供的Photoshop文件进行比较。

• 3 d-space-futuristic-gallery-psd.zip(ZIP, 0.23 mb)

最终结果

下面，您将看到我们希望最终实现的设计的预览。点击图片查看全面的版本的3D空间/未来影像画廊。让我们开始学习，好吗?

设置Photoshop画布

1让我们来设置工作区域。新建一个Photoshop文档，file> new (Ctrl + N)，宽度为955 px高度为600 px．2在图层面板中，选择你的背景图层，通过编辑>填充(Shift + F5)填充你的背景图层。

使用的颜色值为# 2 e2e2e．

创建画廊的地板

3.在背景图层的顶部创建一个图层。4从工具面板选择矩形选框工具(M)创建一个矩形选区，宽度为816 px高度为60像素．

如果你想，让这个精确的选择更容易，在矩形选框工具选项下，在样式下，选择固定大小并设置适当的宽度和高度值。5用白色(# FFFFFF)颜色使用编辑>填充(Shift + F5)。查看下图以检查您的工作。

6现在，我们将在白色矩形上添加一个渐变叠加。为此，我们将添加它作为图层样式。右键单击图层面板中的白色矩形图层，然后选择混合选项打开图层样式对话框。

7在旁边的方框里打勾渐变叠加要添加图层样式，并使用下图所示的值。8有了我们的图层样式，我们将改变矩形的透视。选择编辑>变换>扭曲。

这将显示矩形周围的变换控件;使用顶部和中间转换控件，通过拖动画布上的控件来更改透视图。使用下图作为如何改变透视的指导。9按住Ctrl键在转换后的矩形周围创建一个选框，然后在图层面板中单击该图层的缩略图。

这样做应该加载对象周围的选框(如下图所示)。10创建一个新选区，该选区将包含选区周围的描边。使用Edit > Stroke在选区周围添加一个黑色边框。

使用下图中的设置，使用黑色(# 000000)．11从工具面板中选择矩形选框工具(M)，在矩形周围创建一个选区，但忽略底部边框。查看下图作为如何进行此选择的指导。

12通过选择Edit > Clear或按Del键删除边框/笔画。这将只留下底部边界(这是我们想要的)。13在图层面板中选择带有底部边框的图层，双击图层缩略图或右键单击图层，然后选择混合选项，打开图层样式对话框，添加渐变叠加图层样式。

请使用下图中的值。14检查你的工作，你应该有如下图所示的东西。15在你的1像素底部边框的正下方，使用矩形选框工具(M)创建一个矩形选区。

使选择使它跨越整个宽度的底部边界，并有一个高度约10 px．使用下图作为如何创建此选择的指导。16使用编辑>填充(Shift + F5)用颜色填充选区# 9 b9b9b．

17检查您的工作，它应该类似于下图。

建造画廊的墙壁

18现在，我们要创建3D空间/未来画廊的侧面。从工具面板中选择矩形选框工具(M)，在地板的左侧创建一个选区，使用下图作为如何创建此选区的指导。

19在地板层的顶部创建一个新层。用填充所选内容任何颜色使用编辑>填充(Shift + F5)。20.点击地板层，同时按住Ctrl键加载周围的选区。

21确保活动层是步骤19中新创建的层。使用Select > Inverse (Shift + Ctrl + I)反转步骤20中所做的选择。22使用Edit > Clear或按Del键删除反转选区下方的区域。23为了确保您正确地完成了前面的步骤，请对照后面的图检查您的工作。

24现在，我们加入a渐变叠加图层样式在左边的墙层上。双击图层的缩略图打开图层样式对话框。使用下图作为如何设置渐变叠加的选项和值的指导。

25现在，我们在左边的墙上加上一个笔画，就像我们对地板所做的一样。在图层面板中点击图层的缩略图，同时按住键盘上的Ctrl键，在墙壁周围加载一个选区。26在你的墙层上面创建一个新层。

在这个新图层上，选择编辑> Stroke，使用与步骤10相同的设置添加一个描边。27添加一个颜色叠加通过双击图层打开图层样式对话框来创建图层样式。使用下图作为指导如何调整颜色叠加的设置，使用# 808080就像颜色。28就像地板一样，我们删除了我们创建的边界的一些部分，但这一次，我们只删除了底部和右侧的边界描边。

请参见下图预览我们将在接下来的步骤中做什么。29首先，创建一个新层在所有其他层的顶部。在墙的左侧，选择矩形选框工具(M)创建一个10 px从框架的顶部到底部的广泛选择(参见下图作为指导)。

30.选择Edit > Fill，用灰色填充新创建的选区(# 9 b9b9b)．您应该得到如下图所示的内容。31右边的墙重复步骤18 - 30，但是，为了保持我们的照明和阴影准确，当添加渐变叠加时，如步骤24所示，使用180度随着角值(见下图)。

32对照下图检查你的工作，确保你跟上了进度。

在地板上添加嵌入分隔器

33我们将把地板分成几部分;当我们稍后将图像放在这里时，它们将帮助描绘每个缩略图。首先，在工具面板中选择矩形选框工具(M)创建一个高框1 px在我们的空间/未来3D画廊的地板上有广泛的选择。

选择的高度并不重要-只要确保它明显高于图片库的地板。34创建一个新层。在您的1px宽选框仍然激活的情况下，使用编辑>填充(Shift + F5)填充区域，用灰色阴影(# D6D6D6)．

35在选区仍然活跃的情况下，使用右箭头键将1px宽的选区向右移动1px。用灰色阴影填充选区下面的区域，# B8B8B8．36对照下图检查前面的步骤是否正确。

37复制这个2px的线到另一个图层。这样做，当前图层仍然活跃在图层面板中，切换到工具面板中的移动工具(V)。按住Alt键，然后按右箭头键。

这将复制线条到另一个图层，向右移动1px(或您的默认移动增量)。38现在，我们将这条复制的线向右移动大约100 px．要做到这一点，仍然使用移动工具(V)，按住Shift键并按右方向键10倍;按住Shift键，移动增量应该从1px变为10px。

39我们通过重复步骤37 - 38创建更多的嵌入分隔符。完成后，您应该得到如下图所示的内容。注意所有的行之间都有相同的间距。另外，请注意左墙和第一个分隔器之间的间隙/空间，以及右墙和最后一个分隔器之间的间隙/空间是相等的。

40让我们通过合并所有的嵌入分隔层来整理一下。右键单击最上面的图层，选择向下合并(Ctrl + E)。一直向下合并，直到你只有一个图层可以容纳所有的分隔符。

41现在，我们将转换嵌入分隔符的视角，使它们遵循图库的3D方向。选择Edit > Transform > Perspective，并向内拖动右上角的转换控件。使用下图作为如何转换我们的嵌入分隔线的视角的指导。

42通过按住Ctrl键并在图层面板中单击图层的缩略图来加载地板周围的选区(再次)。43切换回你的插入分隔层，确保它是图层面板中的活动层。44通过选择“Select > Inverse (Shift + Ctrl + I)”反转当前选区。

45通过选择Edit > Clear或按Del键删除反向选区下方的区域。这将删除插入分隔符的多余部分(关于它们现在应该是什么样子，请参阅下图)。

创建画廊的背景

46首先在所有图层下面创建一个新层(在背景层上面的一个层)。

47从工具面板中选择矩形选框工具(M)，在新创建的图层上选择一个选区，使用下图作为如何选择的指导。48创建选区后，通过选择Edit > fill (Shift + F5)来填充选区下方的区域;使用任何颜色，因为我们将添加一个渐变叠加，将覆盖你选择的任何颜色。49打开图层样式对话框，添加一个渐变叠加;通过双击图层的缩略图来完成。

颜色梯度的左色位为灰色(# 9 b9b9b)，而渐变的右边颜色站是浅灰色(# D5D5D5)．查看下面的图，看看应该为这个渐变叠加使用什么设置。50用下图确认你仍然在正确的轨道上，你应该有这样的东西:

在画廊的背景上制作圆形的窗户

51我们会让它看起来像有窗户，你可以往外看。

在图库的背景上创建一个新层。从工具面板中选择椭圆选框工具(如果你愿意，也可以选择椭圆工具)。按住Shift键同时拖动椭圆选框工具到画布上创建一个完美的圆。

52选择编辑>填充(Shift + F5)填充圆形任何颜色;你选择什么颜色都没关系因为我们很快就会在上面放一些东西。53创建一个新图层，然后在你刚刚创建的另一个圆圈旁边创建另一个圆圈，使它与另一个完全相同。或者，复制另一个图层(右键单击它，然后选择复制图层)，然后使用移动工具(V)相应地定位它。

现在您应该得到如下图所示的内容。54为了让我们的画廊看起来像在外太空，我们将使用由deviantArt的James Oliver提供的库存图片，名为:地球．转到地球页面，将图像复制到剪贴板上。

55按住Ctrl键在第一个圆圈周围创建一个选区，然后单击该图层的缩略图。56通过选择Edit > Paste into (Ctrl + Shift + V)将剪贴板中的图像粘贴到圆形选框中。57从工具面板中选择移动工具(V)，用鼠标在窗口内定位背景(为了更精确的移动，使用箭头键)。

58对右侧窗口重复前面的两个步骤。59通过执行上述步骤，你会注意到现在每个圆圈层的顶部都有图层蒙版。右键单击图层的蒙版，然后选择将面膜．

60通过选择> All (Ctrl + a)在整个Photoshop画布周围创建一个选框。61现在，选择Edit > Crop将画布裁剪到选区。这样做可以去除隐藏在Photoshop画布边缘之外的库存照片的任何部分。

62在我们的圆/窗口图层上，我们将添加两个图层样式:内阴影而且中风．这些图层样式的设置见下图。的设置如下图所示内阴影图层样式:的设置如下图所示中风图层样式:

为现实主义增加了窗户的光泽

63使用椭圆选框工具(或椭圆工具)，在我们的一个圆形窗口内创建一个完美的圆(按住Shift键)。

64创建一个新图层，新的选区仍然是活动的，选择编辑>填充(Shift + F5)，并填充选区下面的区域，颜色为白色(# FFFFFF)．65点击图层面板底部的添加图层蒙版图标添加一个图层蒙版。66从工具面板中选择渐变工具，并确保渐变样式设置为线性渐变在选项栏中。

67用你的鼠标，在图层蒙版上应用线性渐变，从圆的底部到圆的一半。68降低这层的不透明度，以适应你的口味。69对另一个圆形窗口重复步骤63 - 68。

这应该在窗户上增加了光泽，使它们看起来更真实(参见下图检查你到目前为止的工作)。

在圆形窗口之间创建嵌入分隔

70我们现在要在我们的画廊背景上添加垂直和水平的嵌入分隔符，这样背景看起来就像未来宇宙飞船上的面板。首先，在工具面板中选择矩形选框工具(M)。

71选择矩形选框工具，创建与我们之前在教程中所做的类似的嵌入分隔符:作为复习，返回到步骤33 - 36，在前面的小节中称为“在地板上添加嵌入分隔符”。用下面的例子作为指导。72在两个圆形窗口的中间垂直地创建第一行。然后，水平创建另一条线。

您应该得到如下图所示的内容。

密封我们的3D空间/未来画廊

73我们现在要把房间的边缘封闭起来，这样它看起来就像一个真正的房间。首先，在工具面板中选择圆角矩形工具。

在圆角矩形工具的“选项”栏中设置半径价值15个像素．74在画布上创建圆角矩形形状，使其覆盖整个房间区域。请注意，在下面的图中，圆角向左和向右悬挂了一点。

75创建一个新图层，填充圆角矩形任何颜色，选择什么颜色并不重要因为它会被图层样式覆盖。76在我们的圆角矩形图层上，我们将添加四个图层样式阴影,一个斜面和浮雕,一个颜色叠加，以及中风．请参考下面的图，以获得应应用于每个图层样式的设置。

下图为阴影图层样式:下图为斜面和浮雕图层样式:下图为颜色叠加图层样式:下图为中风图层样式:77我们会完成画廊的边缘。首先，按住Ctrl键在你的圆角矩形图层周围创建一个选框，然后点击图层的缩略图;这将加载适当的选择。78接下来，我们通过选择Select > Modify > Contract来缩小选定框。

我们把选择缩短到8像素。79现在，我们通过选择Edit > Clear或按Del键删除收缩选框下方的区域。删除选定区域后，查看您的工作是否类似下图。

为画廊添加阴影以获得逼真的灯光效果

80我们想让我们的灯光和阴影尽可能真实，真正给设计一个三维的外观。首先，在工具面板中选择矩形选框工具，以下图为指导创建一个矩形选区。81接下来，在画廊的边界下面创建一个新层，但在所有其他层之上。

82在工具面板中设置前景色为黑色(# 000000)．83从工具面板中选择渐变工具，在选项栏中选择渐变工具前景变为透明颜色渐变，并选择线性渐变渐变样式。84确保你在第80步中所做的选框仍然在那里，并且图层面板上的活动层是新创建的层。

通过拖动鼠标从图库的顶部，到底部，再到选框选择的中间，创建线性渐变。85将这个图层的不透明度降低到大约60％．这层现在是我们的阴影层。

检查下图，看看你是否能够准确地创建阴影。

设计左右箭头按钮

86我们图库中的图像将左右移动。为了允许用户在图像缩略图中移动，我们需要为他们提供左右控件。

首先，使用工具面板中的椭圆选框工具在圆角矩形边框层的左侧和顶部创建一个小圆。87用任意颜色填充圆形，点击编辑>填充(Shift + F5)。88现在，我们将添加四个图层样式阴影,一个斜面和浮雕,渐变叠加，以及中风．

这些图层样式的设置参照下图。的设置如下图所示阴影图层样式:的设置如下图所示斜面和浮雕图层样式:的设置如下图所示渐变叠加图层样式:的设置如下图所示中风图层样式:89对照下图检查你的工作;它应该看起来像这样:90现在，我们将在它上面添加一个向左的箭头。我们使用工具面板中的自定义形状工具来实现这一点。

在“选项”栏中，选择箭头9在形状。91为了创建右箭头，我们简单地复制圆层和箭头自定义形状层。首先，在图层面板中按住Ctrl同时点击每个图层，选择两个图层。

然后，右键单击图层面板，选择复制图层。92复制的图层仍然是图层面板中的活动图层，选择编辑>变换>水平翻转，重新定位图层指向右侧。93使用移动工具(V)，移动向右的箭头穿过房间，到向左的箭头的相反方向。

创建图库的缩略图

94从工具面板中选择矩形选框工具(M)，创建一个新层，然后在房间内部创建一个正方形。95通过选择“编辑>填充(Shift + F5)”来填充此选框选择的任何颜色。96现在，我们将在缩略图层上应用两个图层样式:a渐变叠加和一个中风．

使用下图作为图层样式设置的指导。的设置如下图所示渐变叠加图层样式:的设置如下图所示中风图层样式:97检查您的图像缩略图容器，看看它是否像下图所示。98复制此图层两次，然后使用移动工具(V)移动它们穿过房间。

在下图中，我使用水平文字工具(T)添加文本。

我们完成了!

如果你做到了，那就给自己一个鼓励吧——这是一个很长的教程，不是吗?

最终结果

如果一切顺利，这就是你的网页布局应该是什么样的。

点击下面的图片来查看全面的版本的3D空间/未来影像画廊。

请继续关注第2部分:制作一个jquery支持的图片库!

在我们希望在下周发布的后续教程中，我将向你展示如何将这个图库布局转换为一个功能齐全的HTML/CSS模板，然后我们将在它的帮助下制作动画jQuery．为了确保你不会错过后续教程，你必须这样做订阅六版RSS订阅，一旦后续教程发布，它就会让你知道!

“太空未来画廊”教程系列

这两部分教程系列在第二部分中，将向您展示如何在Photoshop中创建布局，然后如何将设计转换为使用基于标准的HTML/CSS和jQuery的功能齐全的web模板。

• 第1部分:如何在Photoshop中设计一个空间未来画廊布局
• 第2部分:如何用jQuery制作一个空间未来主义图像库

在评论中提出你的问题

如果你在教程中发现了任何麻烦、困难或错误，请在评论中给我们留言，我们会尽我们所能帮助你!

相关内容

• 使用jQuery创建一个光滑和易访问的幻灯片
• 如何创建一个3D文本照片操作
• 如何在Photoshop中创建一个说明性的网页设计