企业及高校合作：010-59833514 ‬咨询电话：400-810-1418 服务与监督电话：400-810-1418转接2
北京
b

北京

g

广州

h

杭州

s

上海

w

武汉

火星网校
课程导航
元宇宙设计
虚幻引擎视效表现大师班 虚幻引擎交互开发工程师班
游戏设计
原画概念设计大师班 游戏UI设计师班 3D模型大师班 游戏动作设计师班 游戏特效大师班 VR视效与交互大师班
剪辑包装
影视剪辑包装广告大师班 影视剪辑大师班
影视后期
影视原画与模型渲染大师班 3D角色动画大师班 影视特效与合成大师班
游戏程序
Unity3D游戏开发工程师班 虚幻引擎交互开发工程师班
U I 设计
AI+UX设计大师班
商业插画
商业插画高级设计师班 艺术设计基础班
IT 学院
WEB前端+全栈工程师班 人工智能+Python开发工程师班
室内设计
室内设计表现大师班 室内高级设计师班 室内高级设计研修班 BIM全科班 VR建筑与室内表现设计师班
当前位置：首页 >教程首页 > Photoshop >用PS教你创建炫酷的彩色格子图标 适合新手练习

用PS教你创建炫酷的彩色格子图标 适合新手练习

发布时间：2018-11-17 19:57:24

今天的教程特别适合UI新手练手用，效果好看，作者对图层样式和渐变的理解也特别到位，同学们临摹过程多加揣摩，进步会很快。操作界面全中文，不怕看不懂，小编已跟着练习了一遍，现在该你啦。

第1步：

打开Photoshop，Ctrl+N新建一个文档，文档尺寸可自定义。


第2步：

按住Alt键双击背景图层，使其转换为普通图层。然后再次双击，打开图层样式面板，为其添加颜色叠加样式，颜色为#262523。


继续为其添加渐变叠加，数值如下：


再利用内发光中的杂色功能来给背景添加一些杂色，当然你也可以使用滤镜中的添加杂色功能。


此时的背景：


第3步：

新建一层，用白色大号柔边画笔在画布中心点击出白色亮光。


Ctrl+T将其拉宽压扁，如下图所示。


将图层不透明度调整为10-30%，这里可以根据自己的感觉来调整。


第4步：

接下来我们创建icon主体。利用圆角矩形工具在画布中心点击，在弹出的对话框中设置数值如下：


第5步：

在圆角矩形上方随意绘制一个比其尺寸大一些的形状，因为我们后面会将其转换为剪贴蒙版，因此形状可随意绘制。


为创建的形状添加角度渐变。


然后按住Alt键在角度渐变与圆角矩形中间点击鼠标左键，将其转换为剪贴蒙版。然后在图层名称上点击右键，将其转换为智能对象。


第6步：

利用马赛克滤镜（滤镜>像素化>马赛克）对其进行分块处理。


第7步：

将执行了马赛克滤镜的图层Ctrl+J复制一层，同样转换为剪贴蒙版。然后点击滤镜>风格化>照亮边缘。


将其图层混合模式设置为线性减淡（添加），图层不透明度设置为30%。此时每个格子间都被细线分割开了。


第8步：

将上一步创建的图层Ctrl+J再次进行复制。将图层混合模式设置为减去，图层不透明度设置为20%。

选择移动工具，利用键盘上的方向键将其位置向下方与右方分别移动1像素。这样格子的间隔部分便形成了凹槽的效果。


第9步：

利用椭圆工具在icon中心绘制出一个正圆形。


然后为其添加角度渐变。


继续添加内阴影。


为了表现立体感还要为其添加投影。


我们来看一下此时的圆形样式。


第10步：

利用椭圆工具在icon中心再次创建一个较小的正圆形。


为其添加颜色叠加样式。此处颜色选择接近黑色的深灰色。


继续添加内发光。与第2步相同，我们这里利用内发光来添加杂色。


然后为其添加内阴影。


再来个内部描边以使其轮廓更加明显。


来看看我们处理后的结果。


第11步：

下面我们来添加文字。


然后为文字添加渐变。这里我就不给出具体数值了，你可以根据自己的感觉来。当然你也可以使用其他色系的颜色。


添加内阴影以模拟边缘的高光。


当然了，要表现立体感，阴影还是不能缺少的。


第12步：

做到这里，总觉得icon平平淡淡，缺少点感觉。好吧，使出我们的杀手锏，添加发光！你立刻就会感受的奇迹发生了。

把第4步创建的圆角矩形图层按住Alt键向上拖动复制一份，把填充调为0，这样我们就可以不受这个图层本身颜色的控制了，而可以对图层样式进行为所欲为的调整，嘿嘿。


来吧，给它添加内发光！


还有内阴影。


来看看效果，怎样？是不是好看了很多。


你是不是正要庆祝终于完工了？等等，icon右上角那一片白是怎么回事？木有细节了，亲。

第13步：

好吧，苦逼的设计师，继续调整。

双击图层，打开图层样式面板。在混合选项中，将“图层蒙版隐藏效果”勾选上。


然后为图层添加蒙版，用黑色画笔将细节擦出来。


第14步：

最后添加上倒影。Oh，my god！终于完了！

上一篇 专业解读！2015—2016视觉设计流行趋势预测

下一篇 画面更给力！打造banner空间感层次感跟聚焦点

返回列表
学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

热门课程

专业讲师指导 快速摆脱技能困惑

相关文章

多种教程 总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

火星资讯

链接合作QQ : 1336151628
室内设计 游戏培训 ui设计培训 影视特效培训 插画培训 原画培训 动画培训 平面设计培训 建筑设计 动漫培训 火星问答 web前端培训 技校 学技术 中专 动漫绘画教程 通用培训
关于火星
关于我们 人才合作 建议和意见
内容分类
频道专区 热门标签
火星优势
师资团队 教学模式 课程研发 学员成果 图书出版 资质认证
帮助中心
专业选择 考察学校 学习方式 如何就业 如何退费
联系我们
课程咨询：400-810-1418 人力资源：010-59833585 总机电话：010-59833333 监督电话：400-810-1418转接2 就业部：010-59833202 企业及高校合作：010-59833514 市场合作：010-59833359
©2021, www.hxsd.com 北京火星时代网络技术有限公司 电信与信息服务业务经营许可证070738号 京ICP备09083002号-6  京ICP证061064号  京公网安备11010502025474
获取验证码

×

确定