下载文档原格式
四种风格包括：常规扁平化、长投影、投影式、渐变式。
一、常规扁平化步骤1:宽度: 500px, 高度: 400px. 背景色#e8d59b.步骤2:参考线设置：垂直：157px,177px,250px,323px, 343px, 378px水平：72px, 107px, 127px, 200px, 273px, 293px, 328px最终结果：步骤3:前景色#d14242,，圆角矩形工具，半径40，如下步骤4:椭圆工具，颜色#ffffff, 在中心创建圆状物体。
依然在圆形图层，选择减去顶层形状，画出圆环形状如下图。
自定义形状工具，前景色#ffffff, 中心创建三角箭头基本扁平化图标告成步骤1:矩形工具，前景色#000000, 在三角箭头图层以及圆环图层下方画出形状如下图自由变换，选择45度为矩形形状添加图层蒙版在图层蒙版位置按住CMD+左键单击圆角矩形形状图层，然后选择>反向使用油漆桶工具，前景色设置为#000000,抹去超出圆角矩形的阴影如下图使用钢笔工具不透明度设置为20%步骤2:步骤1是三角箭头的阴影，步骤2是圆环的阴影，类似同上，不再赘述。
三、渐变式步骤1:复制圆角矩形图层，然后移动到图层最顶端，填充设置为0%步骤2:使用钢笔工具，删除一些锚点，然后拖移一些锚点到中心，如下图。
为复制后的图层添加图层样式，如下（正片叠底不透明度20% 缩放100%）步骤3:原圆角矩形图层也如下设置（正片叠底不透明度10% 缩放100%）四、投影式这个超级简单，给所有图层添加如下图层样式即可（正片叠底不透明度20% 距离10）恭喜，完工群：what‘s PPT 233371422本教程利用PS讲述了几种扁平化风格的实现，希望你能学以致用，多多实验，开创自己的风格。
实例讲解｜扁平化设计的步骤和要点自从苹果放弃拟物化设计，采用扁平化设计以来，扁平化设计的龙卷风就全面席卷了整个UI设计界。
自此之后，无论是网页还是APP的设计，首要考虑的就是采用扁平化的设计。
扁平化的设计似乎成为了有别于拟物化设计的一种全新的设计思维方式，完全颠覆了拟物化的设计风格，开创了一个UI设计的新时代。
扁平化设计风格带给受众的是一种干净、简洁的设计情绪。
这样的一种设计风格在扁平化风格出现之前其实已经被大量应用，只是在设计手法上没有扁平化的设计更加极致。
例如下面这个案例，是一个典型的扁平化时代之前的设计，但整体的设计风格与扁平化的风格类似，都是简洁、干净的设计风格。
其实，如果我们将这个设计中导航条、搜索框等元素中的高光、阴影去除掉，将其中的图标元素更换为非拟物化的图标的话，在版式上再变化一下的话，这个设计马上就可以变为扁平化的设计。
在我看来，扁平化的设计之所以如此的流行，是因为它更加适应于移动终端设备的小尺寸屏幕。
扁平化的设计风格更加适合在手机、平板电脑等小屏幕上进行操作。
但把扁平化的这种优势放大到能够颠覆整个设计思维方式的话，无疑是夸大了它的影响。
扁平化的设计也有它自身的缺陷，如果将其用在稍微复杂一点的界面中，扁平化设计会带来很多困扰。
因此，无论它应用的再广泛，扁平化也仅仅只是一种风格而已，在大尺寸的屏幕上，例如网页方面的设计，没有必要都采用扁平化的设计。
当然，这篇文章并非要对于扁平化与拟物化的设计孰优孰劣辩个是非，相反，作为一种设计风格，身为UI设计师，扁平化的设计风格如此流行，我们更加应该掌握这种设计风格的特点及表现手法。
这篇文章我们就用上面HTC设计案例的改版来详细分析一下扁平化设计风格的设计要素，掌握扁平化设计风格的设计方法。
那么扁平化的设计有哪些设计特点，我们又该如何动手将这个设计改版为流行的扁平化风格呢？我大概梳理了一下，基本的步骤应该包括以下几个方面：一、梳理网站信息，剔除非重要的信息根据网站目的和诉求梳理网站信息，这是无论做哪种风格的网站设计都要做的第一步工作。
40个扁平化设计风格的网站作品之前有为大家展示了黑色配色方案的网站作品，今天我们将整理使用流行的扁平化设计的网页设计给大家欣赏，国外很多网站为了增加更好的用户体验，多数网站使用响应式设计来兼容平板电脑、手机多平台浏览，而使用扁平化网页会更容易实现这些技术。
如果你是网页设计师，又想获得更多的设计灵感，那么最好最快速的方式就能参考高质量的网页设计了。
下面为大家整理40个使用扁平化设计风格的网页设计作品，这些网站制作使用HTML5,css3,响应式设计技术，我想你就看看就能受益非浅哦！Human Hubris人类的狂妄自大–介绍可能即将灭绝于地球的动物。
动物使用扁平化的多边形绘制，很好看。
Human HubrisA Guide to Making ThingsA Guide to Making Things Teamgeek一个伟呼机服务类的机构网站设计。
TeamgeekPoolhousePoolhouseFixed Digital Agency一个设计服务网站，网站使用视差滚动设计，十分有特色。
Fixed Digital AgencyMoonCampMooncamp 是一个和Basecamp 相关的应用，具体怎样没体验过……MoonCampRobby Leonardi这个网站的设计看起来让我想去超级马里奥。
Robby LeonardiNBAllstats一个展示NBA球队的数据，数据从1970年就开始整理。
NBAllstatsBrooklynBrooklyn 是一个强大的wordprssed主题，功能十分完整，无论你用来做企业网站、博客、作品集展示、设计工作室网站都很适合。
Brooklyn一个单页面网页设计作品。
Dr WoeTribal创意品牌策划机构网站，致力帮助企业找出关键影响因素。
网站每个栏目页面的头部使用不同扁平化设计配色，设计风格很统一。
TribalFlamingo 是一个适用于投资组合机构的网页模板，如果你是自由职业者、平面设计师、网页设计师、UI设计师、插画家或摄影师，我想这个主题你可以购买使用，用于品牌或个人宣传也是非常棒的。
如何利用Photoshop完成扁平化图标设计扁平化设计风格近年来越来越受到人们的喜爱，它通过简化图标的细节和使用鲜明的颜色来创造出现代感和清晰度。
本文将介绍一些使用Photoshop软件完成扁平化图标设计的技巧和步骤。
首先，我们需要明确图标的主题和用途。
扁平化图标通常被用于网站、移动应用和电子产品中，因此在设计之前要考虑图标的功能和适用场景。
接下来，在Photoshop中创建一个新的文档。
选择适合你需求的大小和分辨率。
一般来说，图标的尺寸应该在32x32到512x512之间。
在新的文档中，选择一个适当的背景颜色。
扁平化设计风格强调鲜明的颜色和简化的形状。
你可以选择一个明亮的颜色，以便增加图标的吸引力。
然后，选择图标的形状工具。
在Photoshop的工具栏中，你可以找到矩形、圆形、多边形等形状。
根据你的需求选择合适的形状工具。
使用所选的形状工具，在文档中创建基本的图标形状。
你可以使用画笔工具或直接绘制形状，也可以使用复制和旋转工具来创建多个相似的形状。
记住，扁平化设计强调简化和几何形状，避免添加过多的细节。
一旦你创建了基本图标形状，现在可以选择适当的颜色了。
选择一个鲜艳而简洁的颜色来填充图标形状。
你可以使用Photoshop的取色器工具来选择颜色，或者使用预设的颜色库。
在选择适当的颜色之后，考虑图标的阴影和高光效果。
扁平化设计通常使用简单的阴影和高光来增强立体感。
使用Photoshop的图层样式工具，你可以轻松地添加投影、内阴影和外发光等效果。
除了颜色、形状和阴影之外，你还可以考虑在图标中添加一些简单的图案或纹理。
这些图案和纹理可以增加图标的细节和趣味性。
你可以在Photoshop中使用图案填充或纹理工具来实现这一点。
当你完成图标的设计之后，不要忘记保存你的工作。
将图标导出为合适的文件格式，如PNG或SVG，以便在不同的平台和设备上使用。
扁平化图标设计是一种简单而现代的设计风格，可以帮助你创造出独特而吸引人的图标。
