This post was originally published in 2008
介绍的技巧和技术可能过时。

The shiny and glossy image of 'Web 2.0' is right at home when it comes to icons.按照此Adobe Illustrator教程创建一个具有光滑和半透明表面效果的可缩放矢量即时消息样式图标。

半透明即时消息图标
1.GIF

Open up Illustrator and draw a circle on the artboard (Hold Shift to constrain).
也,pick out two colours of your choice and either add them to the Swatches palette or draw a couple of boxes to one side.

2.gif

With the circle still selected choose the Gradient Mesh tool and click once slightly off center within the circle.选择最近通过保存的样本或颜色选择器选择的两种颜色的较浅阴影。

3.GIF

Back with the circle tool draw a larger oval as the body of the icon.

4.GIF

Repeat the process of adding a lighter shade with the Gradient Mesh tool.

5.GIF

再画一个椭圆形来代表手臂,旋转形状并将其定位到身体的一侧。

6GIF

使用渐变网格工具添加另一个选择。

7.GIF

复制粘贴手臂,rotate and position the new arm to the opposite side of the body.

8.gif

按ctrl+shift+[将新手臂发送到对象的后面。

9GIF

Draw two small white ovals as reflective highlights on the head of the icon.

10GIF

Set these two highlights to 20% Opacity to give a subtle effect.

11GIF

在图标的主体上精确绘制另一个圆。为什么不复制粘贴身体形状呢?The reason is the Gradient Mesh points cause problems with the Pathfinder at a later stage.另一种解决方案是使用直接选择工具手动删除网格点。

12.gif

Draw another circle as a temporary tool for use with the pathfinder,注意在图标的主体上生成平滑的曲线。

13GIF

With both objects selection choose the Intersect Shape Area option from the Pathfinder and Expand.

14GIF

按ctrl+[将对象送回,直到它位于手臂和头部下方,但仍与身体形状有关。
将高光设置为20%不透明度。

15GIF

Draw two more subtle reflections on the body with the same 20% white fill.

16.GIF

Repeat the process of drawing an identical shape,这一次是在图标的手臂上。
再画一个临时的形状,again following the contour of the underlying shape.

17.gif

With both arm objects selected use the Subtract From Shape Area option from the Pathfinder and Expand.
将新的高光设置为20%不透明度。

17-5.GIF

选择头部,手臂和身体对象,并将不透明度更改为95%,以提供轻微的半透明外观。

18.GIF

最后画一个由你选择的颜色到白色的渐变填充的圆圈。

19.GIF

使用边界框的手柄压扁此形状,并使用ctrl+shift+[命令定位在堆栈底部。将此对象设置为相乘,以便在不同颜色的背景上使用。

半透明即时消息图标

即时消息图标本身看起来不太合适,duplicate the icon at least once to represent the social aspect of IM.Change the colours of the new icon through the Filter > Colors > Adjust Colors option or manually select the mesh points with the Direct Selection Tool and add a new colour swatch.

分享
在Pinterest分享
There are no images.
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

Subscribe to my newsletter to be the first to hear about new posts

26 Comments

  1. 真的很好,爱它!!

    By the way does anyone know another tutorial similar to this with other icons e.i Apple (mac) or Internet Explorer or Quicktime???或者只是任何

    THANK EVERY1's

    (- 1)
  2. 嘿!!这个信使真是太棒了。我刚试过,我告诉你它看起来太干净了,太棒了。关于如何让你的物品看起来更干净的提示,请看Thanx。!!!

    再来一次。

    (- 1)

Comments are now closed