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

Photoshop设计金属立体效果的APP图标

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

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

今天为大家带来一篇非常简单的iCloud图标的PS教程。这篇教程虽然简单,但是有很多细节,大家从中还可以学到非常常用的角度渐变和渐变描边的用法。


先看看效果图

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第1步:

打开Photoshop,Ctrl+N新建文档,根据自己的情况来定义尺寸。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第2步:

选择圆角矩形工具,按住Shift键在画布上绘制出一个方形的圆角矩形,这里我将圆角半径设置为50像素。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第3步:

双击圆角矩形图层,为其添加渐变图层样式。渐变样式选择角度渐变。渐变颜色使用深灰与浅灰相互交替,具体设置如下图。这是做金属样式的常用手法。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

再添加描边样式,此处填充类型选择渐变。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库


Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第4步:

选择钢笔工具,工具模式选择形状,在圆角矩形中心绘制出云形。这里我并没有严格按照iCloud的曲线来绘制,只是教大家一种方法。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第5步:

双击云图层,为其添加内阴影样式。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

继续添加描边样式,这里依然选择渐变描边,将默认的黑白渐变反向即可。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第6步:

将云图层Ctrl+J复制一层,清除其图层样式,并将颜色改变为浅灰色。Ctrl+T将其缩小,缩小时按住Alt键可以进行中心缩放。缩小完毕,你可以利用直接选择工具微调锚点,使边缘看上去均匀即可。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

第7步:

复制圆角矩形的图层样式,粘贴到内部的云形图层。(小技巧:按住Alt键拖动图层样式的fx图标到另外图层上,可以快速复制图层样式。)

将描边大小修改为2像素,我们就完成了非常简单的icloud图标的制作。

Photoshop设计金属立体效果的APP图标,PS教程,站长图库

来看看最终效果图吧:

Photoshop设计金属立体效果的APP图标,PS教程,站长图库


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

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

相关文章

  • 2022-04-29PS制作超酷黑白像素文字效果
  • 2022-04-29Phpcms V9栏目循环调用采用IF判断自定义不显示指定
  • 2022-04-29一起来聊聊JavaScript函数柯里化
  • 2022-04-29改用Server酱Turbo版推送WordPress评论
  • 2022-04-29用HeheCloud快速搞个Wordpress应用!
  • 2022-04-29聊聊在Angular项目中怎么实现权限控制?
  • 2022-04-29zblog php 忘记密码怎么办
  • 2022-04-29UEditor新增自定义按钮/UEditor增加自定义插件
  • 2022-04-29PHP如何设置过期时间的session
  • 2022-04-29PHP中如何利用define定义常量

文章分类

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

最近更新的内容

    • Photoshop制作立体效果的金色艺术字
    • Photoshop绘制水晶质感的放大镜效果
    • PHP简短而安全的数组遍历
    • Alexa优化技巧大全
    • PS制作立体3D烫金艺术文字效果的教程
    • uni-app中怎么开发一个全局弹层组件(代码示例)
    • 利用CSS如何实现全兼容的毛玻璃效果?
    • CDR绘制木纹质感APP图标
    • Seo职场新人要怎样才能把seo做好呢
    • 浅析网页与小程序间怎么进行通信

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

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