首页 > web前端 > PS教程 > 正文

Photoshop制作透明GIF小图标教程

PHP中文网
发布: 2016-06-01 14:35:46
原创
2167人浏览过

最终效果
photoshop制作透明gif小图标教程
1. 首先建一个14*14像素的透明画布,我们的是小icon嘛,一般网页中小的icon都是这么大,记得背景要选透明,这样以后它才能任意放在任何不同颜色的背景上面
photoshop制作透明gif小图标教程
2. 把画布放大到最大,然后再用铅笔,随便选一个黑一点的灰色,在上面“点”出一个页面的边框样式,左上角折了一个小角,简单的用铅笔点出个三角就行了。这种小icon都是这样一点一点地点出来的 ^_^
photoshop制作透明gif小图标教程
3. 接着在我们画出的这个页面的里面加一个渐变,让它看出来不那么死,像有层次的样子。记得每画一步都建立一个图层,以后改颜色方便 :)
photoshop制作透明gif小图标教程
4. 在页面的左边和上边以及那个小的折角里用白色的铅笔,画出高光的线,这样会让这个页面更有立体感。
photoshop制作透明gif小图标教程
5. 在页面的右边和下边用灰色的铅笔,画出暗调的线,这样它就更有立体感了
photoshop制作透明gif小图标教程

6. 然后把刚才画图层组成一个组,再隐藏掉。(这个组主要是为了以后可以把它再次利用,改成别的图标。)
photoshop制作透明gif小图标教程
7. 接着我们来画一个铅笔,大概地在右边用铅笔点出一个笔的形状
photoshop制作透明gif小图标教程
8. 然后用不同的颜色标出大概的位置,上面上橡皮擦,中间铅笔主体,再下面是笔尖。(可以用别的颜色,但是注意笔尖那里的色彩明暗,高光一定要体现出来)
photoshop制作透明gif小图标教程
9. 然后给铅笔上色,在我们这个icon里面,光是从左上角打下来的,所以它们的左上部得有淡一些的高光,大家可以尝试别的颜色,画出绚烂的铅笔来。注意分出橡皮和主体的范围来
photoshop制作透明gif小图标教程
10. 然后就ok啦,把隐藏的组打开,最终效果就是这样。
photoshop制作透明gif小图标教程
11. 最后保存成为透明的gif,我们在网页中才能很好地利用它
photoshop制作透明gif小图标教程

百度虚拟主播
百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

百度虚拟主播 126
查看详情 百度虚拟主播

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号