illustrator下载_使用Illustrator或手绘创建XP样式的图标

最新推荐文章于 2024-04-04 11:38:50 发布

culi3182

最新推荐文章于 2024-04-04 11:38:50 发布

阅读量247

点赞数

文章标签： mac webgl photoshop 数据可视化 dwr

原文链接：https://www.sitepoint.com/create-xp-style-icons/

版权

illustrator下载

In this third and last article of our vector graphic series, you’ll use your knowledge of faux 3d vector graphics as we walk step-by-step through a real-life, practical application that I think you’ll find extremely useful.

在矢量图形系列的第三篇也是最后一篇文章中，您将逐步了解真实的，实用的应用程序，以此来了解人造3d矢量图形的知识，我认为您会发现它非常有用。

You’ll learn how to make your own Windows XP-style artwork, which you may end up using for Website graphics, software application icons, or in other projects.

您将学习如何制作自己的Windows XP风格的图稿，最终将这些图稿用于网站图形，软件应用程序图标或其他项目。

Note: I’ll be making my diagrams and commands using Adobe Illustrator 8, but those who use Freehand should be able to follow along just as easily.

注意：我将使用Adobe Illustrator 8制作图表和命令，但是那些使用Freehand的人应该能够轻松地进行操作。

Let’s start by deconstructing a familiar XP icon — the flat-screen monitor shown here:

让我们首先解构一个熟悉的XP图标-此处显示的纯平显示器：

First, create a rectangular shape for the screen using the Pen tool. It’s helpful if you understand a little bit about how to draw with perspective (see the links at the end of this article if you want to learn more).

首先，使用钢笔工具为屏幕创建一个矩形。如果您了解一些有关如何使用透视图进行绘画的信息，将很有帮助(如果您想了解更多信息，请参见本文结尾处的链接)。

Fill the shape with a radial, white-to-aqua gradient.

用径向的白到水渐变填充形状。

Using the gradient tool, click and hold near the upper middle edge of the shape and drag down, releasing the mouse button just before you reach the bottom of the shape.

使用渐变工具，单击并按住该形状的上中间边缘附近并向下拖动，在到达形状底部之前释放鼠标按钮。

Now, we’ll create a rounded-edged shape around the screen, which will act as the frame of the monitor. Set the fill of the shape to "none" to help you see what you’re doing, then use the pen tool to draw an edge around the screen with rounded corners.

现在，我们将在屏幕周围创建一个圆角形状，它将用作监视器的框架。将形状的填充设置为“无”以帮助您查看正在执行的操作，然后使用钢笔工具在带有圆角的屏幕周围绘制边缘。

One the shape looks the way you like it, fill it with a grey-to-purple gradient.

一种形状看起来像您喜欢的形状，并用灰色至紫色的渐变填充。

Right-click on the shape and choose Arrange > Send to Back. This will allow the blue screen shape to lie on top.

右键单击形状，然后选择“排列”>“发送回”。这将使蓝屏形状位于顶部。

Now, use the Pen tool to create a rounded "L" shape along the top and left edges of the screen and fill it with a purple-to-white gradient. Use the gradient tool to fill the shape with the white coming from the top left corner to make it look like the light is coming from that direction.

现在，使用“钢笔”工具在屏幕的顶部和左侧边缘创建一个圆形的“ L”形，并用紫色到白色的渐变填充它。使用渐变工具用左上角的白色填充形状，使其看起来像是来自该方向的光。

Create a highlighted edge along the bottom of the screen using the Pen tool as well. Don’t be afraid to zoom in and use the white arrow tool to adjust the edges. We also filled this with the same white-to-purple gradient.

也使用钢笔工具在屏幕底部创建突出显示的边缘。不要害怕放大并使用白色箭头工具来调整边缘。我们还用相同的白色到紫色渐变填充了它。

The screen part is done! Now, for the stand…

屏幕部分已完成！现在，看台...

The stand is essentially made up of two shapes that make the front surface and side surface. First, create the shape for the front surface. I filled it with the grey-to-purple gradient.

支架基本上由构成正面和侧面的两种形状组成。首先，创建前表面的形状。我用灰色到紫色的渐变填充它。

Next, create the side shape and fill it with a purple-to-white gradient. The gradient changes from dark-to-light from top to bottom, which makes it look as if the light is hitting the monitor from that side, but the top part is slightly shaded by the screen.

接下来，创建侧面形状并将其填充为紫色到白色的渐变。渐变从顶部到底部从暗到亮变化，这使它看起来好像光线从该侧射向监视器，但屏幕的顶部略有阴影。

Finally, create a "border" for the shape. This new shape juts out slightly on the left and bottom of the stand, but aligns with the right border of the stand.

最后，为形状创建一个“边框”。这种新形状在支架的左侧和底部略微突出，但与支架的右边框对齐。

When you fill this shape (with a dark purple color, or purple-to-grey gradient), it will hide the pair of shapes that make up the stand.

当您填充此形状(深紫色或紫色到灰色的渐变)时，它将隐藏构成支架的一对形状。

Again, right-click on the shape and go to Arrange > Send to Back to send the "border" behind the shapes of the stand.

同样，右键单击形状，然后转到“排列”>“发送回”以将“边框”发送到支架形状的后面。

Finally, using the ellipse tool, create the base of the stand, filled with a light white-to-lavender fill.

最后，使用椭圆工具，创建底座，并用浅白色至淡紫色填充填充。

Again, "Send to Back" to place the base behind all the other objects.

同样，“发送到背面”将底座放置在所有其他对象的后面。

Choose the Scale tool.

选择缩放工具。

With the base still selected, click and hold the mouse button to scale it down very slightly. Hold the Alt key (Option for Mac) while you drag slightly inward and let go of the mouse button. What this does is scale down a copy of the shape. Now you should have two ellipses, one inside of the other.

在仍然选择基准的情况下，单击并按住鼠标按钮可以将其略微缩小。稍微向内拖动并放开鼠标按钮时，按住Alt键(对于Mac，则为Option)。这是按比例缩小形状的副本的。现在您应该有两个椭圆，一个在另一个内部。

Select the outer shape and fill it with the darker grey-to-purple gradient colors.

选择外部形状，并用较深的灰色到紫色渐变颜色填充它。

And there you have it: a vector version of a flat-screened monitor that looks disturbingly like the Windows XP monitor graphic, using nine individual shapes and lots of gradients.

在那里，您可以找到：纯平显示器的矢量版本，它看起来很像Windows XP显示器图形，使用了9种单独的形状和许多渐变。

Now, let’s put this shape into Photoshop and add a drop-shadow to make it look "officially" XP-ish. Select the entire group of objects and copy.

现在，让我们将此形状放入Photoshop中并添加阴影以使其看起来“正式”为XP-ish。选择整个对象组并复制。

Paste the shape into a Photoshop document ("as pixels"), resize it as needed, then go to Layer > Layer Style > Drop Shadow.

将形状粘贴到Photoshop文档中(“作为像素”)，根据需要调整其大小，然后转到“图层”>“图层样式”>“阴影”。

Set the angle of the drop shadow to 135. Set the Distance and Size to 2 or 3 pixels and adjust it to suit the size of your graphic.

将阴影的角度设置为135。将“距离和大小”设置为2或3像素，然后对其进行调整以适合图形的大小。

And there you have it: an XP-style computer monitor!

在那里，您将拥有：XP风格的计算机显示器！

Now, to create and make up your own Windows XP-style graphics will take a bit more artistic skill. In particular, you have to be comfortable with drawing in perspective, and you must be able to take the object you want to draw and "simplify" it so that the icon or graphic will work at small or large sizes.

现在，要创建和制作自己的Windows XP风格的图形将需要更多的艺术技巧。特别是，您必须对透视图感到满意，并且必须能够拿下要绘制的对象并对其进行“简化”，以便图标或图形可以使用小尺寸或大尺寸。

The first step is to get familiar with Microsoft’s style and design guide for creating Windows XP icons. This gives you some guidelines on what the "look" is all about ("fun, color, and energy"), provides a general color palette (duplicated below), and gives examples of how objects should be angled and grouped.

第一步是熟悉Microsoft创建Windows XP图标的样式和设计指南。这为您提供了有关“外观”的全部内容的一些准则(“乐趣，颜色和能量”)，提供了常规的调色板(在下面重复)，并提供了有关如何对物体进行角度和分组的示例。

The color palette used in Windows XP icons.

Windows XP图标中使用的调色板。

Did you enjoy reading through the style guide? Then, let’s get started with this last step-by-step example, where I’ll show you how I make a dog house graphic in the Windows XP style.

您喜欢阅读样式指南吗？然后，让我们从最后一个分步示例开始，在该示例中，我将向您展示如何制作Windows XP风格的狗屋图形。

在狗屋里！ (In The Dog House!)

First, I make a rough sketch of what I want the icon to look like, keeping in mind the angle guidelines provided by Microsoft.

首先，我要牢记Microsoft所提供的角度指南，以粗略地勾勒出图标的外观。

Then, I create a grid of lines that match the perspective grid from the Microsoft style guide, and use the pen tool to create the front of the doghouse. (You may download an Illustrator file with the same grid.)

然后，我创建一个与Microsoft样式指南中的透视图网格相匹配的线网格，并使用钢笔工具创建狗窝的正面。 (您可以下载具有相同网格的Illustrator文件。)

Once I have the front of the doghouse, I hide the grid (View > Hide Guides) and use the pen tool to draw the side of the dog house:

进入狗屋的前面后，我将隐藏网格(“视图”>“隐藏指南”)，并使用钢笔工具绘制狗屋的侧面：

I fill the side and the front with a red-to-darker-red gradient:

我用红色到较暗的红色渐变填充了侧面和正面：

Then I draw two more shapes for the roof and fill them with a darker red-brown gradient. The second shape (the right diagram) is the back side of the roof; it’s what the shape would be if you could "see through" the house. It looks a bit odd in the diagram because it’s lying on top of all the other pieces of the dog house.

然后我再为屋顶绘制两个形状，并用较深的红棕色渐变填充它们。第二个形状(右图)是屋顶的背面。如果您可以“看穿”房屋，形状将是什么样。在图中看起来有点奇怪，因为它位于狗屋其他所有部分的顶部。

So, I right-click the second shape (the "back" roof) and choose Arrange > Send to Back.

因此，我右键单击第二个形状(“后部”屋顶)，然后选择“排列”>“发送至后部”。

This gives me a nice dog house shape.

这给了我一个不错的狗屋形状。

I use the pen tool again to create a door shape and fill it with the darker gradient colors.

我再次使用钢笔工具创建门形状，并用较深的渐变颜色填充它。

Then, I use the pen tool — set to "no fill" — to draw an outline around the entire shape. I fill it with an even darker red-brown gradient to get a "border" for the shape.

然后，我使用钢笔工具(设置为“不填充”)在整个形状周围绘制轮廓。我用更深的红棕色渐变填充它，以得到形状的“边界”。

Since this new shape is lying on top of everything else (and hiding the other parts of the image), I send it to the back as before.

由于此新形状位于其他所有物体的顶部(并隐藏了图像的其他部分)，因此我像以前一样将其发送到背面。

My finished vector graphic:

我完成的矢量图形：

After I copy it into Photoshop and add a drop shadow, the graphic is complete!

将其复制到Photoshop中并添加阴影后，图形就完成了！

That wasn’t too hard, was it?

那不是太难，不是吗？

注释，链接和参考 (Notes, Links, and References)

In some cases, you can get away with setting a stroke for a shape instead of using the pen tool to make a "custom border." With larger-sized graphics, however, I like to make a custom border because then I can have a gradient-filled "stroke."

在某些情况下，您可以不用为图形设置笔触，而不必使用钢笔工具绘制“自定义边框”。但是，对于较大尺寸的图形，我喜欢创建自定义边框，因为这样我就可以具有渐变填充的“笔触”。

The Microsoft "Creating Windows XP Icons" document also gives a nice overview of how to take your Photoshop file and, using another piece of icon-editing software, create an icon file (.ico) out of it.

Microsoft的“ 创建Windows XP图标 ”文档还很好地概述了如何获取Photoshop文件，以及使用另一种图标编辑软件从中创建图标文件(.ico)。

There are tons of other icon editors out there. A simple search at download.com returns lots of results that you can try.

那里还有大量其他图标编辑器。在download.com上进行简单搜索即可返回许多结果，您可以尝试。

If you want to learn more about perspective drawing, here are a few places to start:

如果要了解有关透视图的更多信息，请从以下几个地方开始：

Did this article make you wonder, "How do I make ‘aqua’ (Mac) icons?" Here are two sites that might be helpful with the design aspect of that particular challenge. Just be aware that Mac icons generally require "real" 3D-rendering:

本文是否使您感到奇怪，“我如何制作'aqua'(Mac)图标？” 这是两个站点，可能会对特定挑战的设计方面有所帮助。请注意，Mac图标通常需要“真实的” 3D渲染：

Stuck for ideas with the "drawing" aspect? intersmash.com shows just how many ways you can make an arrow icon or a shopping cart icon.

对“绘画”方面有想法吗？ intersmash.com显示了制作箭头图标或购物车图标的方式。