当前位置:首页 > 技术文档 > 正文

如何绘制ICON小图标

作者:不详 来源:varhi.com 【 】 浏览: 添加日期:2010-04-12 我要评论(4)     

有很多人问我如何设计我的受大家喜欢的像素小图标,事实上,设计你需要的icon图标相对来说是比较容易的。它仅仅需要基本的photoshop技巧。本文我将介绍如何用铅笔工具来设计像素图标。然后通过组合这些图标来创建不同的图标库。通过此方法我曾经一天设计过320个图标。

loading

1、创建新文档

在photoshop里创建一个14px X 14px大小且背景透明的新文档。

mini-icon-1

 

2、绘制外轮廓

使用铅笔工具,在铅笔面板里选择1px粗细的笔刷,选择深灰色颜色,然后开始绘制页面icon图标的外轮廓。绘制直线,首先在开始位置点击鼠标左键,然后按住shift在结束位置再点击鼠标左键就可以了。

mini-icon-2

 

技巧:无论什么时候,如果你想修改这些像素的话,就使用橡皮擦工具,选择铅笔模式和1px笔刷大小。

3、使用渐变

使用“魔棒工具”选择空白位置,然后新创建一个图层,设置你的前景色为亮灰色背景色为白色。使用渐变工具从左上角往右下角拉拽。

mini-icon-3

4、高光与投影

新建一个新的图层。绘制1px的内、顶部白边来实现高光效果,然后绘制适当的内、底部灰色边。

mini-icon-4

 

5、所有图层存放在图层组

在图层面板里面,选择所有的图层然后按Ctrl+G将所有的图层存放在同一个图层组。

mini-icon-5

 

6、绘制铅笔

与前面讲的一样,首先绘制出外轮廓,然后填充内部区域颜色或渐变,当你弄好之后,将它的所有图层合并到同一个图层组。

mini-icon-6

技巧:如果你想在绘制icon图标的时候保持颜色的统一,那就将你使用过的颜色储存在颜色面板里面

7、组合它们

下面展示了我如何组合这些图层组来进行组合的。

mini-icon-7

 

8、输出web格式

当你完成全部绘制后,切换层组(隐藏、显示)然后保存它们为web格式(Ctrl+Alt+Shift+S)

mini-icon-8

如果你懒的自己绘制这些图标的话,你可以到我的免费icon图标网站上下载

英文原文:How to Design Mini Icons

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖技术文档〗Tags: icon icon图标 png图标 水晶图标

更多评论(4)..会员评论

seven1207(121.61.*.*) 发表于:2011-05-19 17:29:22
站长大人 请问你的网站的地址栏图标和收藏夹图标是如何在代码里实现的?就是那个绿色的“A”字图标 好像没有关于这个的教程。希望加上
管理员回复:favicon.ico,把一个这样命名的ico文件放到根目录就可以实现了
tyfdesign(116.7.*.*) 发表于:2010-05-20 12:01:27
绘制铅笔那个效果怎么做的还有颜色的搭配~谢谢!
管理员回复:做法和上边一样,至于颜色搭配得看你的色感了
tyfdesign(219.133.*.*) 发表于:2010-05-19 11:10:49
好像技术的关键点没描述出来哦~可不可以再说细点~谢谢了
管理员回复:还不清楚呀,你所说的关键点指什么?
akaayy(61.50.*.*) 发表于:2010-05-02 08:50:31
也可以用网上的工具啊

出差旅游免费预订酒店

【视频教程】新手常见问题