In the first of this two-part series, we looked at how to create a number of Web 2.0 visual effects in Photoshop, including gradients, stripey backgrounds, transparency, reflections, and more.
在这个由两部分组成的系列文章的第一个部分中 ，我们研究了如何在Photoshop中创建许多Web 2.0视觉效果，包括渐变，条纹背景，透明度，反射等。
In this article, we’re going to look at a few more effects: we’ll make objects pop out, fade images, and create starbursts. As with the first article, whenever I mention a tool for which a keyboard shortcut can be used in this tutorial, I’ll indicate that shortcut key in parentheses. If you’re a keyboard junkie, you’ll know that mastering these shortcuts is a real time-saver.
在本文中，我们将研究更多的效果：我们将使对象弹出，使图像褪色并创建爆炸。 与第一篇文章一样，每当我在本教程中提到可以使用键盘快捷键的工具时，我都会在括号中指出该快捷键。 如果您是键盘迷，那么您会知道掌握这些快捷键是真正的节省时间。
One of the things that can make a good Web 2.0-style design really stand out is the use of juicy icons and bold, isolated graphics that really pop off the page.
可以使一个出色的Web 2.0样式设计真正脱颖而出的事情之一就是使用多汁的图标和大胆的，孤立的图形，这些图形实际上从页面上弹出。
Plenty of cheaply available photo objects and vector icon shapes are available for purchase on the Web. If you’re interested in making your own, though, have a look at my article series, where I show how to use Illustrator to create your own custom icon graphics, as well as my article about isolating objects in Photoshop.
可以在网上购买大量便宜的照片对象和矢量图标形状。 但是，如果您有兴趣制作自己的文章，请阅读我的文章系列，其中我将展示如何使用Illustrator创建自己的自定义图标图形 ，以及有关在Photoshop中隔离对象的文章 。
Once you have an icon or object on your page, you can easily apply fun effects to the icon to help make it stand out.
页面上有图标或对象后，就可以轻松地将有趣的效果应用于图标，以使其脱颖而出。
1. Add a reflection, like I’ve done here.
1.像我在这里所做的那样添加反射。
2. Add a drop shadow by going to the Layers palette, clicking the Add a layer style icon, and choosing Drop Shadow. The settings dialog box will allow you to adjust the opacity, color, direction, size, and distance of the shadow effect, as shown here.
2.转到“图层”调板，单击“添加图层样式”图标，然后选择“投影”，以添加投影。 设置对话框将允许您调整阴影效果的不透明度，颜色，方向，大小和距离，如下所示。
3. Finally, simply positioning the icon so that it breaks the "grid" can make a design more interesting. The example below creates some tension by poking over the edge of its container, which makes the content area more interesting.
3.最后，只需放置图标以使其打破“网格”，就可以使设计更加有趣。 下面的示例通过戳戳其容器的边缘来产生一些张力，这使内容区域更加有趣。
TipMake the graphic you use for your icon a transparent PNG, and positing it in your document using CSS positioning. Or for a more "old school" method, create two graphics — one that contains both the grey/white background behind the icon, and one that’s exactly the same size but doesn’t include the icon — and use these two images as background images in your CSS for that section.
提示 使用于图标的图形为透明的PNG，并使用CSS定位将其放置在文档中。 或者，对于更“古老的”方法，创建两个图形-一个包含图标后面的灰色/白色背景，另一个包含相同大小但不包含图标的图形-并将这两个图像用作背景图像在该部分CSS中。
On Web 2.0-style sites, splashy photos or illustrations are often used to accent an area of the design. These graphic devices can often be employed in combination with shapes to which other effects have been applied. One of the easiest effects that you can create (other than simply pasting an image into a flat rectangular container) is to contain the image within a specific shape, such as a rounded box.
在Web 2.0样式的网站上，经常使用醒目的照片或插图来强调设计的某个区域。 这些图形设备通常可以与已应用其他效果的形状结合使用。 您可以创建的最简单的效果之一(除了简单地将图像粘贴到扁平的矩形容器中)，是将图像包含在特定的形状内，例如圆形框。
1. In this example, we’ll start with a rounded rectangle that has a drop shadow effect applied to it. Choose the rounded rectangle tool (U), set the radius for the corners, and click and drag to draw the shape. Then, apply the drop shadow layer effect.
1.在此示例中，我们将从一个具有阴影效果的圆角矩形开始。 选择圆角矩形工具(U)，设置拐角的半径，然后单击并拖动以绘制形状。 然后，应用阴影层效果。
2. Paste the photo or illustration as a new layer immediately above the shape layer, positioning it over the left-hand side of the rounded box, as shown below.
2.如下图所示，将照片或插图作为新层粘贴到形状层的正上方，将其放置在圆形框的左侧。
3. In the Layers palette, move the cursor in between the photo layer and the shape layer. Hold the Alt key (Option for Mac), and when the cursor changes to overlapping circles (depicted below), click the mouse button. This creates a "clipping mask" that allows only the parts of the photo layer that overlap the layer below to display.
3.在“图层”调板中，将光标移到照片图层和形状图层之间。 按住Alt键(对于Mac，则为Option)，然后当光标变为重叠的圆圈(如下图所示)时，单击鼠标按钮。 这将创建一个“剪贴蒙版”，仅允许照片层中与下面的层重叠的部分显示。
4. You can now move the photo around and it will stay clipped to the box. The final step is to add a layer mask to the photo layer. The result is shown here.
4.现在，您可以四处移动照片，它将被剪辑到盒子中。 最后一步是向光敏图层添加图层蒙版。 结果显示在这里。
The last Web 2.0 effect that I’ll cover is the creation of starbursts.
我要介绍的最后一个Web 2.0效果是爆炸形的创建。
Photoshop comes with a few custom shapes that would work well as starbursts — you can find them by selecting the Custom Shape tool (U), selecting the custom shape drop-down, and selecting the shape that takes your fancy. (You can increase your palette of glyphs by clicking the small arrow in the top right-hand corner and loading more built-in shapes.)
Photoshop附带了一些自定义形状，可以很好地用作爆炸形—您可以通过选择“自定义形状”工具(U)，选择自定义形状下拉列表并选择需要的形状来找到它们。 (您可以通过单击右上角的小箭头并加载更多内置形状来增加字形调色板。)
You can also create your own customized starburst by choosing the Polygon tool (U). In the options bar, increase the number of sides (30 works well for me). Then click the little arrow next to the row of shapes to access the Polygon Options. Check Star and choose a small amount for the Indent Sides By field. As you can see below, I chose to use 10%.
您也可以通过选择多边形工具(U)创建自己的自定义爆炸形。 在选项栏中，增加侧面的数量(30个对我而言效果很好)。 然后单击形状行旁边的小箭头以访问“多边形选项”。 选中星号，然后为缩进边按字段选择少量。 如下所示，我选择使用10％。
Now, draw a shape on the page, and a starburst like the one below will appear!
现在，在页面上绘制一个形状，将出现如下图所示的爆炸形！
As with any other shape, you can use a combination of other Web 2.0 effects on the starburst. Here are some examples.
与其他任何形状一样，您可以在爆炸形上使用其他Web 2.0效果的组合。 这里有些例子。
That’s it for now! If you’ve worked through both of these articles, you now know eight different Web 2.0 graphic effects that can be applied to any site — and a host of additional Photoshop wizardry skills that you can mix and match to create those effects.
现在就这样！ 如果您已经阅读了这两篇文章，那么您现在知道可以应用于任何站点的八种不同的Web 2.0图形效果-以及可以混合使用以匹配这些效果的许多其他Photoshop向导技能。
I’ve created a master document that you can download, which includes all of these effects so that you can pick apart the layers and layer styles to better understand how it’s all done.
我创建了一个主文档，您可以下载该文档 ，其中包括所有这些效果，以便您可以区分图层和图层样式以更好地了解其完成方式。
If you’re interested in learning more about how to create web graphics with Photoshop, check out The Photoshop Anthology, which contains over 101 tips just like these!
如果您有兴趣了解有关如何使用Photoshop创建Web图形的更多信息，请查看Photoshop Anthology ，其中包含超过101个这些技巧！
翻译自: https://www.sitepoint.com/web-2-0-effects-photoshop-2/
相关资源：jdk-8u281-windows-x64.exe