当前位置:首页>ps实例教程>ps网页设计>logo教程>教程内容

在5分钟内就能制作出Web2.0风格的网页图标

来源:不详 作者:佚名 学习:653人次
在5分钟内就能制作出Web2.0风格的网页图标
文章出处:cfan 作者:miniworm 
我指灯发誓:包你在5分钟内就能制作出Web2.0风格的网页图标。Web2.0网站现在正如火如荼,所以虫虫决定从这期开始,全面转向Web2.0风格的网页设计。图标作为一个网站的点睛之笔,在网页中占有十分重要的位置,所以今天我们就从网页图标的设计说起。
如图1所示,是不是惊讶于Web2.0网站图标之美?下面的方法,能让你在Photoshop中轻松套用这些网站的图标风格,并加上一些创意,快速构建出自己的Web2.0图标出来。

1256140.jpg (104.93 KB)
2007-8-12 08:21

第1步:首先下载一个现有的样式文件: web20.asl (23.12 KB) web20.asl (23.12 KB)
下载次数: 15
2007-8-12 08:22。如果你使用的是Photoshop CS2简体中文版,可将下载的样式文件保存到Photoshop安装目录下的“.\Adobe Photoshop CS2\预置\样式\”文件夹中。
第2步:启动Photoshop,点击菜单“窗口→样式”调出样式面板,再单击面板右上角的箭头按钮,从弹出菜单中选择“载入样式”命令,从对话框中选择打开上面下载的web20.asl文件加入新的样式。再单击箭头按钮,从弹出菜单中选择“大列表”项。现在样式面板将如图2所示。

1256141.jpg (41.18 KB)
2007-8-12 08:21

第3步:如图3所示,输入文字“CFan”,画一个圆角的黑色方框作为背景,右下角再添加两个装饰性的小圆点。每个元素都占独立的一个图层。

1256142.jpg (67.01 KB)
2007-8-12 08:21

第4步:从样式面板中,将“mixd-label”样式依次拖放到背景、红色圆点、蓝色圆点图层上,这几个图层就被添加上一层好看的特效。再找到“mixd-font”样式,把它拖到“CFan”文字层上。现在整个图标的效果如图4所示。怎么样,好看吧!

1256143.jpg (18.77 KB)
2007-8-12 08:21

上面是一个混合型风格的实便,接下来乘热打铁再制作一个Skype风格的图标:新建一个图像文件,用文字工具(快捷键为T)输入“CFanBlog”,字体设置为lucida Handwrit,大小为48点;选中这个文字图层,然后单击样式面板上的“skype”样式,文字立即变成如图5所示的效果,非常漂亮。

1256144.jpg (23.15 KB)
2007-8-12 08:21

其他风格的图标,借鉴上面的操作步骤即可完成,这里就不一一介绍了。制作上面两个的图标,我前前后后用了不到5分钟时间,没骗你吧,是不是够快!

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
自由幻影2009-04-05 05:18
顶哦<阴险> <阴险>
小宝贝10272009-04-01 12:57
郁闷 没零用钱下
5061585472009-03-26 09:03
我看下,效果好像不错
鬼面骑士2009-03-21 09:07
呵呵,真的很简单啊,谢谢
鬼面骑士2009-03-21 09:06
呵呵,真的很简单啊,谢谢
火山光军2008-07-24 08:09
我来看看 谢谢了 ~
34343432008-07-23 06:20
好东西,正需要。谢谢
才能登录2008-03-06 03:30
好,下载来实施好,下载来实施好,下载来实施好,下载来实施
太阳起床2007-08-29 05:19
<困> ps:<偷笑
果酱2007-08-20 10:25
不错不错~ 谢谢lz~~~~
尤里格2007-08-20 12:22
哎呀啊~很諟謝謝樓主辣~嘎嘎~ps:鼓掌
维尔2007-08-19 07:13
let me see<威武>
梦想的弹簧2007-08-14 11:50
不错啊```看看能不能下``嘿嘿
多情善感2007-08-12 09:39
应该是个好东东,先收了,谢谢!
路宝宝2007-08-12 12:43
不错吖,西西顶顶哦

关注大神微博加入>>

网友求助,请回答!