PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含29043字，纯文字阅读大概需要42分钟。

内容图文

作为编码者，美工基础是偏弱的。我们可以参考一些成熟的网页PS教程，提高自身的设计能力。套用一句话，“熟读唐诗三百首，不会作诗也会吟”。

本系列的教程来源于网上的PS教程，都是国外的，全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限，翻译的细节上还有待推敲，希望广大网友不吝赐教。

约定：

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的，本人在重新制作的基础上，重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数，以红色的文字显示。有些错误的参数，直接以红色文字显示正确的参数

例如：（90，22，231，77），表示矩形的左上角的坐标是（90，22），宽231，高77

例如：（90，22），表示矩形的左上角的坐标是（90，22），矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

In this web design tutorial, we will create a beautiful and colorful portfolio layout using Photoshop. I’ll show you many techniques for creating different things like bended paper corners, dashed lines, image carousels, 3D bars, and more! I’ll walk you through each step in exact detail so you won’t be left guessing how to do a certain technique. We will use the 960 Grid System to create this layout (which I’ll cover at the start).

在本教程中，我们要在PS中创建美丽多彩的作品集。我会告诉你许多技术用于创建不同的东西，如弯曲的纸角，虚线，图像跑马灯，3D的横幅，和更多！我将指导您完成每个步骤，精确的细节，你没必要去猜测用了什么特别的技术。我们将使用960网格系统创建这个布局（一开始就使用）。

Step 1: Understanding the grid

Download the 960 Grid and unzip the archive. Inside the Photoshop template folder, you will find three .PSD files. Each one has a grid with certain number of columns (12, 16, and 24). For this layout, we will use the 16-column grid. So, open the file 960_grid_16_col.psd file in Photoshop. As you can see, you have 16 red (almost pinkish) vertical stripes inside your document. We will create the layout within these red vertical stripes.

In the Layers Panel you have two groups: “16 Col Grid” (which contains all the red vertical stripes) and “Layer 1″ (we don’t need this layer, so you can delete it).

To show or hide the grid, click on the eye icon of the “16 Col Grid” group in the Layers Panel to toggle its visibility. All the elements of the layout should be created beneath this group, so it has to be on top all the time. The .PSD file contains guidelines as well, which will be very helpful. To show or hide the guidelines go to View > Show > Guides (or press Ctrl/Cmd + ;).

This is pretty much everything you need to know about the grid.

Before we begin, make sure that your Info Panel is opened (Window > Info). During the tutorial, I will ask you to create shapes with a certain size and you will be able to see the exact width and height of your shapes in the Info panel while you are creating them.

步骤1：了解网格
下载960网格并解压缩的存档。在Photoshop模板文件夹内，你会发现三个PSD文件。每一个都有一定数目的列（12，16，和24）的网格。这种布局中，我们将使用16列的网格。所以，在Photoshop中打开该文件，960_grid_16_col.psd文件。你可以看到，你有16个红色（几乎是粉红色的）在你的文档中的垂直条纹。我们将在这些红色的垂直条纹上创建网页布局。
在图层面板中有两个组：“16 Col Grid”（其中包含所有的红色竖条纹）和“图层1”（我们并不需要这一层，这样你可以删除它）。
要显示或隐藏网格，单击眼睛图标的“16 Col Grid”组在图层面板中切换它的可见性。网页布局的左右元素都在这个组的下方创建的，所以它总是在最上面。 PSD文件包含的参考线，这将是非常有益的。要显示或隐藏的指引去查看“>”显示“>”参考线“（或按Ctrl / Cmd的+ ;)。
这是几乎所有你需要知道的关于网格。
在我们开始之前，请确保您打开信息面板（“窗口”>“信息”）。在本教程中，我会要求您创建具有一定规模的形状，当您创建形状时，你在“信息”面板中，将能看到确切的宽度和高度。

基本的知识点，了解布局系统的基本情况。本翻译教程不使用布局系统。

Step 2: Modifying the size of the canvas

To give us more room height-wise, we need to increase the size of our canvas. Go to Image > Canvas Size and change the height to 1920px.

步骤2：修改画布的尺寸

为了让我们有更多的空间在高度方向上，我们需要增加我们的画布的大小。点击：图像 > 画布大小，高度为1920px。

由于不使用960布局系统，本步改成新建文档，尺寸：1020px*1920px

Step 3: Creating the layout’s background

Select the Rectangle Tool (U) and create a white rectangle with the size 940px by 1920px. Make sure that Photoshop’s Guides are activated (Ctrl/Cmd + ;) so that you can create the rectangle easily. Name this layer “bg“, double-click on it to open the Layer Style window and use the settings from the following image to apply an Outer Glow and Stroke layer style.

步骤3：创建布局的背景

用矩形工具创建一个白色的矩形（40，0），尺寸：940px*1920px。确信PS的参考线是激活的（Ctrl/Cmd + ;），这样你创建这样的矩形是很简单的。命名图层为bg，双击打开图层样式窗口，按照下图的设置给它添加外发光和描边的图层样式

描边的颜色： #1f1907

Step 4: Creating the header

Create a new group and name it “header“. Then select the Rectangle Tool (U) and create a rectangle using the color #aedee1. Name this layer “header bg“, double-click on it, and use the settings from the following image for a Gradient Overlay layer style.

步骤4：创建头部区域

新建组header。然后选择矩形工具创建一个矩形（40，0，940，96），颜色： #aedee1。命名为header bg，双击该图层，按照下图设置添加渐变叠加图层样式

Step 5: Site name letterpress type treatment

Select the Type Tool (T) and write the name of your layout using the color #93b9bb. I have used the font Museo 700 for the word “creative” and Museo 300 for “folio”.

Now we will create a letterpress type treatment using Photoshop’s layer styles. Double-click on your text layer to open the Layer Style window and use the settings from the following image for Inner Shadow, Inner Glow, and Bevel and Emboss layer styles. By the way, if you want a more detailed tutorial on this technique, check out Jacob’s Inset Typography tutorial on Six Revisions (which uses a different technique).

步骤5：网站名称的凹型处理
选择文字工具（T）的写你的网站名字，颜色：#93b9bb。对文字creative使用字体：Museo 700，对文字folio使用字体：Museo 300。

现在，我们将创建一个凹型处理，使用Photoshop的图层样式。双击您的文字层，打开图层样式窗口按照下图的设置内阴影、内发光、斜面和浮雕图层样式。顺便说一下，如果你想知道一个更详细的这种技术教程，检视Six Revisions上的Jacob’s Inset Typography tutorial（使用不同的技术）。

Step 6: Creating a small cloud in the header

Create a new group and name it “cloud“.

Then select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a few white circles with different sizes.

Then arrange all these circles using the Move Tool (V) to form a cloud. Set the opacity of the “cloud” group to 80%.

步骤6：创建一个头部区域中的一小片云
创建一个新组，将其命名为cloud。

然后选择椭圆工具（U），按住Shift键，以保持比例，并创建了几个不同大小的白色圆圈。（具体地说，本翻译教程用的是5个圆）

然后使用移动工具（V）安排这些圆形成云。将cloud组的不透明度设置为80%。

Step 7: Creating a “hire me” banner

Now we are going to create a small piece of paper and write a call-to-action text over it that will attract possible clients. A strong call to action is very important for a portfolio website because it encourages visitors who might be looking to hire a designer to get in touch with the website’s owner.

Create a new group and name it “hire me“. Then select the Rectangle Tool (U) and create a small rectangle in the right side of the header using the color #f7efda.

Name this layer “paper“, double-click on it to open the Layer Style window, and use the settings from the following image.

步骤7：创建一个“hrie me”的公告栏

现在，我们要创建一个小的一张纸，在上面写一个号召性文字去吸引潜在客户。强调的号召性文字对作品集网站是非常重要的，因为它鼓励有雇佣设计师意愿的去点击它去联系网站的所有者。

创建一个新组hire me。然后选择矩形工具（U），在头部区域的右侧创建一个小的矩形（795，15，145，81），颜色： #f7efda。

命名此图层为paper，双击打开图层样式窗口，并按照下图设置样式。

Step 8: Bending a corner of the paper

Now I will show you how to create a bended corner effect in Photoshop. First, click on the vector mask of the “paper” layer to make it active.

Then select the Pen Tool (P), make sure that the “Shape layers” button is activated and select the Subtract from shape area button from the Options bar.

Now use the Pen Tool (P) to create a triangle over the upper right corner of the yellow rectangle as you see in the following image.

步骤8：折曲纸的一角

现在，我会告诉你如何在Photoshop中创建一个折曲的拐角效果。首先，对paper层激活矢量蒙版。

然后选择钢笔工具（P），确保模式是“形状图层”，并在选项栏中选择“从形状区域减去”按钮。

现在使用钢笔工具（P）创建一个三角形在黄色矩形的右上角，你在下面的图片中看到。

这一步是非常有意思的步骤，在之前的教程中从未出现过，因此在这里补充详细的过程，由于不善于使用钢笔工具，在说明过程中用矩形工具替代

首先激活paper的矢量蒙版，点击图层面板上的paper层的矢量蒙版（paper层上的两个矩形中的右边的那个）。

然后选择矩形工具，点中是“形状图层”和“从形状区域减去”按钮

在paper层上的矩形的右上角画一个小的正方形（按住Shift键）

再用直接选择工具选择小矩形的右下角的控制点

按键盘上的delete键删除左下角的控制点，使得形成一个三角形

鼠标点击其余图层，完成此步骤

Step 9: Apply a Gradient Overlay on the bended paper

Create a new layer and use the Pen Tool (P) to create a triangle like the one you see in the following image using the color #f1e9d3.

Name this layer “corner“, double-click on it and use the settings from the following image for Gradient Overlay.

步骤9：应用一个渐变叠加到折曲的纸张上

创建一个新图层，使用钢笔工具（P）创建一个三角形，颜色： #f1e9d3，就像下面的图片中看到的一个三角形。

命名此层为“corner”，双击图层并按照下图设置渐变叠加。

对于不善于使用钢笔工具的，可以用矩形工具加直接选择工具选择一个控制点后删除的方法来实现三角形

Step 10: Adding shadow to the paper corner

Create a new layer beneath the “corner” layer.

Select the Pen Tool (P) and create a black triangle like the one from the following image.

Right-click on the new layer and select Convert to Smart Object.

Then go to Filter > Blur > Gaussian Blur and use a 2px radius.

Add a mask to this layer (Layer > Layer Mask > Reveal All), select a small black brush tip (B) and paint with it over the shadow from the right side of the paper corner to erase it.

Name this layer “shadow” and set its opacity to 15%.

步骤10：对纸的折角添加阴影

在corner层的下方，创建一个新的图层。

选择钢笔工具（P），创建一个黑色三角形，就像下图一样。这一步还是用复制conner层比较好

右键单击新图层，选择“转换为智能对象”。可能由于PS版本的原因，在CS5版本中，为了完成后面的步骤，这一步应该是栅格化图层。

然后点击：滤镜 > 模糊 > 高斯模糊，并使用一个2px半径。

这一层（图层 > 图层蒙版 > 显示全部）添加蒙版，选择一个黑色的小笔尖（B）和涂抹它的右侧的纸护角的影子，将其擦除。

命名此层为shadow，并设置其不透明度为15%

Step 11: Adding noise to the paper

Now we are going to add a little bit of noise to the paper to make it look more realistic. Ctrl/Cmd-click on the vector mask of the “paper” layer to make a selection of the paper. Create a new layer above all the other ones from this group and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).

Convert this layer into a smart object, then go to Filter > Noise > Add Noise and use the settings from the following image.

Name this layer “noise” and set its blending mode to Multiply and layer opacity to 15%.

In the following steps, we will add noise to other elements of the layout as well and I will refer to this step, so you might want to keep in mind this method.

步骤11：将杂色添加到纸张

现在我们要添加一点点的杂色在纸张上，以使它看起来更逼真。按Ctrl / Cmd+Click在在paper层的矢量蒙版上，作出纸张的选区。在该组所有其他层的上方中创建一个新层，选择油漆桶工具（G）用白色（＃FFFFFF）填充选区。

这层转换为智能对象，然后点击：滤镜 > 杂色 > 添加杂色，按照下图设置。

命名此层为“noise”，并设置其混合模式为正片叠底，图层不透明度改为15％。

在下面的步骤中，我们将添加其他元素的杂色，我也会重复这一步，所以你可能要牢记这种方法。

Step 12: Adding a text over the paper

Now it’s time to add your call-to-action text. Select the Horizontal Type Tool (T) and write a text over the paper using the color #514c3f and the font Museo.

步骤12：在纸上添加文字

现在是时候添加您的号召性文本。选择横排文字工具（T），并写在纸张上的文字使用的颜色： #514c3f和Museo字体。

Step 13: Adding a paper airplane

Download a paper airplane image from the Internet and open it in Photoshop. Then use the Move Tool (V) to move the airplane into your document. The image I used is from GraphicRiver and it costs $3 (or $1 if you have a prepaid deposit).

Convert this layer into a smart object. Then go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key to maintain the proportions, change the size of the paper airplane, and rotate it. My airplane is pointing to the call-to-action banner to make it even more noticeable.

Go to Filter > Noise > Add Noise and use the settings from the following image.

Then name this layer “paper airplane“, double-click on it to open the Layer Style window and use the settings from the image below for a Drop Shadow layer style.

步骤13：添加一个纸飞机

从互联网上下载一个纸飞机图像，在Photoshop中打开它。然后使用移动工具（V）移动飞机到您的文档中。我使用的图像是从GraphicRiver的，它的成本为3美元（或1美元，如果你有一个预付订金）。

把这层转换为智能对象。然后点击：编辑 > 自由变换（Ctrl / Cmd+ T），按住Shift键保持的比例，改变纸飞机的大小，并旋转它。我的飞机指向的号召性文字的公告栏，使其更加明显。

点击：滤镜 > 杂色 > 添加杂色，从下面的图片中使用的设置。

然后将此图层命名为paper airline，双击它打开图层样式窗口，按照下图设置的投影的图层样式。

Step 14: Creating a dashed line behind the airplane

I used Adobe Illustrator (yeah, I cheated just a tad bit, but you can use Photoshop for this too – it just won’t be as easy) to create a dashed line behind the plane. If you don’t have Illustrator, you can download and use my dashed line PNG image called dashed_line.png (tips for Windows users: right-click on one of the links and select Save As). Open it in Photoshop and position it on your canvas using the Move Tool (V).

Optional: for Adobe Illustrator users

If you do have Adobe Illustrator and know how to use it, you can follow the next steps. Open a new document (Ctrl/Cmd + N) and use the Rectangle Tool (M) to create a big gray rectangle. Then select the Pen Tool (P) and create a path like the one from the following image. Use a 1pt white (#ffffff) stroke and no fill. Then open the Stroke Panel (Window > Stroke) and use the settings from the following image.

Select your dashed line using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop, and paste it as a smart object (Ctrl/Cmd + V).

Name this layer “line” and put it beneath the “paper airplane” layer. Use Free Transform (Ctrl/Cmd + T) to rotate this line the way you want.

步骤14：创建纸飞机后面的虚线

我用了Adobe Illustrator中（是的，我只是一个稍微有点被骗，但可以使用Photoshop解决这件事 - 它是不会那么容易）创建一个飞机后面的虚线。如果你没有Illustrator中，你可以下载和使用我的虚线dashed_line.png（提示Windows用户：右键单击的链接，选择“另存为”）的PNG图像。在Photoshop中打开它，和它放置在你的画布，使用移动工具（V）。

可选：Adobe Illustrator的用户

如果你有Adobe Illustrator和知道如何使用它，你可以按照下面的步骤。打开一个新文件（按Ctrl / Cmd+ N），使用矩形工具（M）创建一个大的灰色矩形。然后选择钢笔工具（P），像一个从下面的图片中创建一个路径。使用1点白色（＃FFFFFF）描边和无填充。然后打开“笔触”面板（点击：窗口>描边），从下面的图片中使用的设置。

使用选择工具（V）选择您的虚线，将它复制（按Ctrl / Cmd+ C），返回到Photoshop中，作为一个智能对象（按Ctrl / Cmd+ V），并将其粘贴。

命名此层为line，并把它放在的paper airplane层的下方。使用自由变换（Ctrl / Cmd+ T），把这条虚线的移动到你想要的位置。

Step 15: Creating the navigation bar

Create a new group beneath the “header” group and name it “navigation bar“.

Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 40px and the color #c0e332. Name this layer “navigation bar bg“, double-click on it and use the settings from the following image.

步骤15：创建导航栏

在组header的下方创建一个新组navigation bar。

然后选择矩形工具（U）创建一个矩形（40，96），尺寸：940px*40px，颜色： #c0e332。命名此层为navigation bar bg，双击它按照下图进行设置。

Step 16: Make 1px lines for detail

Select the Line Tool (U), set the weight to 1px and create a horizontal line at the top of the navigation bar using the color #7e961d. Name this layer “1px dark line“.

Hit Ctrl/Cmd + J to duplicate this layer and move the new line at the bottom of the navigation bar.

步骤16：添加细节部分的1px线条

选择直线工具（U）的权重设置为1px，并在导航栏的顶部创建一个水平线（40，96，940，1），颜色： #7e961d。命名此层为“1px dark line”。

按Ctrl/ Cmd+ J复制这个图层，并移动新的水平线到导航栏的底部（40，135，940，1）。

Step 17: Give the 1px lines some depth

Create a new line with the weight of 1px using the Line Tool (U) and the color #d8fd42.

Name this layer “1px light line” and put it beneath the first dark line.

Duplicate this layer (Ctrl/Cmd + J) and put the new one above the second dark line.

步骤17：让1px的线看起来有深度感

使用直线工具（U），粗细为1px，创建一个新的水平线，颜色： #d8fd42。

命名此层为“1px light line”，并把它移到第一条暗线的下方（40，97，940，1）。

复制这个图层（Ctrl / Cmd+ J），并把它移到第二条暗线的上方（40，134，940，1）。

Step 18: Type out the navigation menu items

Select the Type Tool (T) and write the name for your navigation menu items. Use the font Museo 700 and the color #336600.

步骤18：输入导航菜单项

选择文字工具（T）和输入导航菜单项的名称。使用字体museo700，颜色： #336600。

Step 19: Creating the featured content area

Create a new group above the “navigation bar” group and name it “featured“.

Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 450px using the color #e6b633.

Name this layer “featured area bg“.

步骤19：创建特色内容区域

在navigation bar组上方创建一个新组featured。

然后选择矩形工具（U）创建一个矩形（40，136），尺寸：940px*450px，颜色： #e6b633。

命名此层为featured area bg

Step 20: Add 1px lines for detail

Web design is all about the details. Use the Line Tool (U) to create two horizontal lines with the weight 1px at the bottom of the yellow rectangle.

For the dark line, use the color #755c18 and name the layer “1px dark line“.

For the light line, use the color #ffdf87 and name its layer “1px light line“.

步骤20：添加细节部分的1px线条

网页设计是取决于的细节。使用直线工具（U）在黄色矩形的底部创建粗细1px的两条水平线。

对于暗线（40，585，960，1），使用颜色： #755c18，图层命名为1px dark line。

对于亮线（40，584，960，1），使用颜色： #ffdf87，图层命名为1px light line。

Step 21: Adding noise to the featured content background

Now we will add some noise to the background of the featured content area just like we did with the paper. Ctrl/Cmd-click on the vector mask of the “featured area bg” layer to select the yellow rectangle. Then create a new layer and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).

Convert this layer into a smart object.

Then go to Filter > Noise > Add Noise and use the settings from the following image.

Set the blend mode of this layer to Multiply, lower the layer opacity to 25%, and name it “noise“.

步骤21：添加特色内容背景的杂色

现在我们将在特色内容区域添加一些杂色，就像我们之前纸张的背景一样。按Ctrl / Cmd+click点击featured area bg的矢量蒙版，出线黄色矩形的选区。然后创建一个新层，使用油漆桶工具（G）用白色（#FFFFFF）填充选区。

将这层转换为智能对象。

然后点击：滤镜 > 杂色 > 添加杂色，从下面的图片中使用的设置。

设置这层的混合模式为正片叠底，图层的不透明度降低到25％，并命名为noise。

Step 22: Creating a blue bar for the headlines

Create a new group and name it “blue bar“.

Then select the Rectangle Tool (U) and create a rectangle like the one you see in the following image using the color #1e92e4.

Name this layer “blue bar” as well, double-click on it to open the Layer Style window and use the settings from the following image to add a Gradient Overlay and Stroke layer style to it.

Then select the Move Tool (V) and move your rectangle 10px beyond the left edge of the layout and at a distance of 20px from the navigation bar.

步骤22：创建标题行的一个蓝条

创建一个新组blue bar。

然后选择矩形工具（U）创建一个矩形（30，156，190，42），颜色： #1e92e4，像下图一样。

命名此层为blue bar，双击打开图层样式窗口，并按照下图添加一个渐变叠加和描边图层样式。

然后选择移动工具（V）和移动的矩形到超出的左边缘10px，距上方导航栏的距离为20px。

描边的颜色： #3a77be

Step 23: Create the 3D effect

Create a new layer, select the Pen Tool (P) and create a small triangle beneath the lower left corner of the rectangle to make the blue bar look like it’s 3D.

Name this layer “triangle“, double-click on it and use the settings from the following image for Gradient Overlay.

步骤23：创建3D效果

创建一个新的图层，选择钢笔工具（P），并创建一个小的三角形在矩形的蓝条左下角的下方，颜色： #166ead，看起来像它的3D阴影。

此步也可以是用矩形工具新建一个矩形（30，198，10，10），然后直接选择工具选择矩形的左下角的控制点，按delete删除左下角的控制点，得到三角形

命名此层为triangle，双击图层并按照下图设置渐变叠加。

Step 24: Add the text on the blue bar

Select the Type Tool (T) and write “Featured »” on the blue bar using the font Museo 700 and the color #ffffff.

步骤24：在蓝条上添加文字

选择文字工具（T），并写上Featured »在蓝条上，使用的字体：Museo 700，颜色： #FFFFFF。

Step 25: Adding images to the featured content area

Create a new group and name it “images“.

Then open three images that you like in Photoshop and crop each one to the dimensions 290px by 260px. I just used some random images and screengrabs from Six Revisions and from my site PSDBURN.

Move each image in your canvas using the Move Tool (V), arranging them like you see below.

Add an Inner Glow and a Stroke to each image using the settings from the following image to create a double stroke effect.

步骤25：在特色内容区域中添加图像

创建一个新组iamges

然后在Photoshop打开你喜欢的图像，每一个都是260px*290px的尺寸。我只是用了一些随机图像和从Six Revisions上的screengrabs，和从我的网站PSDBURN。

在你的画布上使用移动工具（V），排列他们，就像你看到下面的图像。经测算，这3图片的位置分别是（80，207）、（380，207），（680，207）

每个图像按照下图添加内发光和描边的设置，创建一个双描边效果。

描边的颜色： #5d5643

Step 26: Creating a “read more” button

Create a new group and name it “buttons“.

Then select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle using the color #f8c539.

Double-click on this layer to open the Layer Style window and use the settings from the following image.

Then select the Type Tool (T) and write “Read more »” on your button using the font Museo 500 and the color #3d382a.

步骤26：创建一个read more按钮

创建一个新组buttons。

然后选择圆角矩形工具（U），设置半径为6px的，颜色： #f8c539，创建一个圆角矩形（322，524，179，41）。

双击层打开图层样式窗口，按照下图进行设置。

然后选择文字工具（T），并在按钮上写上Read more »，使用的字体Museo 500和颜色： #3d382a。

Step 27: Creating a “view portfolio” button

Duplicate the rounded rectangle layer which you have created at the previous step (Ctrl/Cmd + J) and move the new rounded rectangle to the right. Then change its color to #dfd7c0, and the stroke color to #ccc5b2.

Use the Type Tool (T), the font Museo 300 and the color #3d382a to write “View Portfolio” on your button.

步骤27：创建一个view portfolio按钮

复制的上一步创建圆角矩形层（按Ctrl / Cmd+ J），移到上一步圆角矩形的右边（522，524）。然后改变它的颜色为： #dfd7c0，描边的颜色设置为： #ccc5b2。

使用文字工具（T），字体：Museo 300，颜色： #3d382a，在按钮上写View Portfolio

Step 28: Creating a lamp

Now we will create a lamp that will light the middle image from the featured content area. Create a new group and name it “lamp“. Then select the Rounded Rectangle Tool (U), set the radius to 7px and create a small rounded rectangle using the color #8f631e.

Double-click on this layer to open the Layer Style window and use the settings from the following image to apply Inner Shadow, Inner Glow, Gradient Overlay, and Stroke layer styles.

Name this layer “wood“.

Add a little bit of noise to the wood part of the lamp just like you did with the paper at the Step 11. Use an amount of 5% uniform and monochromatic noise.

Set the blend mode of this noise layer to Multiply 35%.

步骤28：创建一盏灯

现在，我们将在特色内容区域的中间将放置一个点亮的灯。创建一个新组lamp。然后选择圆角矩形工具（U），设置半径为7px的，并创建一个小的圆角矩形（475，162，66，12），颜色： #8f631e。

双击打开图层样式窗口，使用下图设置内阴影、内发光、渐变叠加、描边的图层样式。

命名此层为wood。

对灯的木质部分添加一点点的杂点就像你在第11步对纸一样。使用5％的平均分布和单色。

设置noise层的混合模式的为正片叠底，不透明度为35％。

描边的颜色： #634513

Step 29: Creating the lamp shade of our lamp

We’ll create a lamp that sort of illuminates our featured work, which is not only symbolic of what the featured area means, but also to bring more attention to this section of the web layout. Select the Rounded Rectangle Tool (U) and create a rounded rectangle like the one from the following image using the color #9ce340.

Make sure that the vector mask of this layer is selected, click on the Exclude overlapping shape areas button from the Options bar and drag a new rectangle over the bottom half of the first one to erase that area. Take a look at the following image for reference.

Then double-click on this layer and use the settings from the image below to add Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke layer styles.

步骤29：为我们的灯创建灯罩

我们将按顺序创建一盏灯，照亮我们的特色工作，这不仅是在的特色区域的符号，也希望带来更多的关注这部分的网络布局。选择圆角矩形工具（U）创建一个圆角矩形（439，168，141，39），半径设置为15px，像下面的图片，颜色： #9ce340。

单击选择这层的矢量蒙版，在选项栏上选择“从形状区域减去”按钮，并拖动一个新的矩形的在前一个矩形的下半部分，达到删除的目的。就像下面的图片一样。和之前做的纸片折角的做法是一样的。

然后双击这一层，从下面的图像中添加内发光，斜面和浮雕，渐变叠加和描边的图层样式。

描边的颜色： #84b93d

Step 30: Giving our lamp a nice gradient overlay

Duplicate the layer which you have created at the previous step (Ctrl/Cmd + J) and set its fill to 0%. Right-click on this layer and select Clear Layer Style.

Then double-click on it and use the settings from the following image for Gradient Overlay.

步骤30：给我们的灯一个漂亮的渐变叠加

复制在上一步创建的图层（按Ctrl / Cmd+ J），设置其填充为%。在该图层上单击鼠标右键，选择清除图层样式。

然后双击它，按照下图设置渐变叠加。

渐变编辑器的颜色： #535b5e、#fefefe、#535b5e、#fefefe、#535b5e。

Step 31: Add another gradient overlay on the lamp shade

Duplicate the layer from the previous step (Ctrl/Cmd + J) and use the settings from the following image for Gradient Overlay.

步骤31：给灯罩添加另一个渐变叠加

复制上一步的图层（按Ctrl / Cmd+ J），并按照下图设置渐变叠加。

Step 32: Add noise to the lamp shade

Add some noise to the lamp to give it a bit of texture using the same technique which you have used for the paper at the Step 11. Set the blend mode of this noise layer to Multiply and set the layer opacity to 15%.

步骤32：给添加杂色

给灯添加一些杂色，给它一点的质地，就像在第11步中对纸张使用的技术的技术一样。这种杂色层设置混合模式为正片叠底，并设置图层不透明度为15％。

Step 33: Giving the lamp shade some depth

Duplicate the layer which you have created at the Step 29 (“Shape 1″) and put it above the “noise” layer.

Clear the layer style and change the color of this shape to #eef8e2.

Go to Edit > Free Transform (Ctrl/Cmd + T) and decrease the width of the shape as you see in the image below.

Add a mask to this layer (Layer > Layer Mask > Reveal All), select the Gradient Tool (G) and drag a black to transparent gradient from the bottom to the middle of this shape.

Name this layer “highlight” and set its blend mode to Overlay and layer opacity to 20%.

步骤33：给灯罩一些深度

复制在步骤29中创建的图层，并把它移到图层noise的上面。

清除图层样式，并改变这种形状的颜色：#eef8e2。

点击：编辑 > 自由变换（Ctrl / Cmd的+ T），并减少宽度的形状，当就像你看到的下图。

给这一层（点击：图层 > 图层蒙版 > 显示全部）添加蒙版，选择渐变工具（G），并选择一个黑色到透明的渐变，从这形状的底部到中间拖动渐变。

命名此层为highlight，并设置其混合模式为叠加，图层不透明度为20％。

Step 34: Creating a light bulb

What would a lamp be without a light bulb? Create a new layer beneath the “Shape 1″ layer, select the Ellipse Tool (U) and create a circle (hold down the Shift key to create a perfect circle) using the color #f6f3a2.

Name this layer “light bulb“, double-click on it and use the settings from the following image for Inner Glow, Gradient Overlay, and Stroke layer styles.

步骤34：创建一个灯泡

没有灯泡的灯怎么能算灯呢？ 在shade层下方创建一个新层，选择椭圆工具（U）创建一个圆（按住Shift键，以创建一个完美的圆圈），颜色： #f6f3a2。

命名此层为light bulb，双击它按照下图设置内发光、渐变叠加、描边的图层样式。

<img title="PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计 " src="https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/f16dd867ec9e4b68755f791bf4e80c78-72.png" alt="PS网页设

内容总结

以上是互联网集市为您收集整理的PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计全部内容，希望文章能够帮你解决PS网页设计教程XV——如何在Photoshop中创建一个充满活力的作品集的网页设计所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---