• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Photoshop绘制蓝色立体效果的软件图标

Photoshop绘制蓝色立体效果的软件图标

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了等相关知识,希望对您有所帮助

图片虽然简单,不过制作起来并不容易。图标边缘有金属边框,中间为水晶效果,顶部还有图形。每一部分都要求做到非常细致,这样整体效果才更精致。


最终效果

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

1、首先,新建一个512×512的画布,设置如下。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

2、设置参考线,上下左右各留出20px的边距,也就是说,这个图标的实际大小是472×472。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

3、紧贴参考线,用形状工具画一个正圆,颜色随便,大小应该是472×472,给此图层起名叫"outside"。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

4、设置此图层的图层样式,如下图。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

5、用圆形形状工具创建一个452×452的圆,起名为middle,与outside圆水平垂直居中对齐,也就是说,这个圆比外圈的圆半径小了20像素。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

6、设置middle的图层样式如下。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

7、画一个442×442的圆,还是和其他两个圆水平垂直居中对齐,这样就有了3个同心圆。我们命名此图层为inner,设置图层样式项"渐变叠加"如下。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

8、接下来,开始画里面的造型部分了。首先还是得画一个圆,422×422,命名为ball-outside,和其他3个圆水平垂直对齐,形成4个同心圆。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

9、接下来,就要开始音符的造型了,音符由5个部分组成,两个倾斜的椭圆,两个竖着的矩形,和一个斜切的矩形,我们用钢笔形状工具来画,最终将5个矩形合并,就形成了音符的造型,步骤如下。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

10、画好分别的5个部分,将所有路径剪切到同一个图层后,合并所有路径即可。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

11、给音符增加图层样式,如下图。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

12、最后,将音符和圆合并,图标基本完成,效果如下图。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

13、增加质感。首先,新建一个图层,命名为noise,用黑色填充,接着在顶部菜单栏依次选择滤镜->杂色->添加杂色,设置如下。完成后,将这个图层 移动到outside图层上面,按ctrl+alt+G,将此图层和outside层做遮罩。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

14、将noise图层的图层模式改为"滤色",这样,外圈的质感就完成了。

15、将noise图层复制一层,移动到音符图层的上面,按ctrl+alt+G,将此图层和音符层做遮罩。同样将noise图层的图层模式改为"滤色",这样,音符的质感也就完成了,结果如下图。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

16、最后还有蓝色球面的高光效果。先添加顶部的高光。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

17、再添加底部的反光。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

18、将此图层透明度改为50%,图层模式改为"柔光",最后结果如下。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库

最后再润色一下,大功告成。

Photoshop绘制蓝色立体效果的软件图标,PS教程,站长图库


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2022-04-29如何解决swarm docker 端口不通问题
  • 2022-04-29PhotoShop打造五彩抽象透明的圆球形图标制作教程
  • 2022-04-29Photoshop制作超酷的树藤装饰立体字教程
  • 2022-04-29Dedecms怎么实现键盘翻页的功能
  • 2022-04-29Photoshop绘制透明效果的五角星
  • 2022-04-29一文浅析Angular中的响应式表单
  • 2022-04-29nginx隐藏index.php的设置方法
  • 2022-04-29Photoshop设计绚丽效果的星光视频教程
  • 2022-04-29CSS3怎么实现动画结束不消失效果
  • 2022-04-29介绍PHP + MySQL 实现数据分页显示

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 如何优化jQuery性能?优化方法汇总
    • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解
    • 利用IF判断自定义Phpcms V9列表的图文并茂
    • Photoshop设计大气的淘宝年终促销海报
    • nodeJS把json数据转成excel(xlsx文件)输出
    • 浅谈小程序中实现下拉刷新与加载更多效果的方法
    • php base64如何进行URL字符串编码和解码?
    • 介绍Laravel8路由模块新增missing方法
    • 做seo排名时你的侧重点是什么
    • Uniapp发布为H5版本时如何隐藏访问路径的#符号

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有