`
zzc1684
  • 浏览: 1222557 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

扁平化设计

阅读更多



1.我随意的建了一个图层

 


2.背景填充一个颜色,先建一个空白图层,选择矩形选框工具,按住shift画出正方形,然后在填充另一个颜色,这两个颜色我选择的是一组明度较低的间色,显得比较柔和而不那么刺眼,一般扁平在配色上很少直接用三原色

 


3.打字,字的颜色选的白色,作为图标的话也比较显眼点,字体较胖,为后面做长投影不显得太单薄,图我都截好了,字还没配,如果有哪里字打错了,你TM来打我啊,哈哈!开个玩笑

 



4.接着上面的那个图,全选了图层,怎么全选,用鼠标点击最上面的那个PH图层,然后按住shift,点击最下面的那个图层,这样就全选了,于是到这部选择移动工具,按照1、2、3箭头将图标居中

 


5.准备做长投影,在背景图层上先建一个图层填充黑色

 


6.ctrl+t,在角度那填的45度,为了美观长投影的投线角度一般为45或135度,斜右斜左

 



7.还是接着ctrl+t那部,按住alt右上到左下居中缩小到与中间正方形的对角线宽度,然后向右下拖到如图位置,按照自己的方法能达到效果也行,

 



8.把刚才做的长投影填充度为0,双击图层,添加图层样式-渐变叠加,不透明度在10%-20%都差不多,很多人在填充度和不透明度上纠结,你记着改该图层填充度不影响图层样式,改不透明度,图层样式也会跟着改变

 



9.由于PS的辅助线不能旋转,为了准确点我只有先建的图层做了两条辅助线,辅助线先垂直画然后选择45度调整位置就行了,线夹在字两者距离最宽的地方。不画也行,你下面能通过自己的眼力画精确就好

 



10.开始第一种方法做图标上面的长投影,复制文字图层,移到如图位置,右下的文字也要对其两边的辅助线

 


11.在图标上方先建一个空白图层。

 



12.用多边形套索工具,上面两个角点和下面角点相连形成四边形然后填充,依次这样完成投影,只需连接文字上部分的那些角点就行了

 


13,ctrl+alt+g创建剪贴蒙版,填充度改为0,按住alt,然后按着鼠标左键把下面的图层样式往图层3拖,这样就复制了一个相同图层样式

 


14.把其他不要的图层删掉或掩藏都行,完成,然后保存

 

 

 

下面说另一种方法

 



15.在图标方块上先建一个空白图层,选择钢笔工具,记住箭头3处是形状不是路径,用钢笔工具勾出大体形状,这里不是胡乱钩的,记住每个角度都是锚点,在用钢笔钩的时候遇到角点就点击一下鼠标左键,比如P有3个 锚点了,H有上方有四个锚点。

 



16.看到上面的锚点吗,你用钢笔钩的时候按住shift让线垂直或平行

 



17.选择直接选择工具,对相应的描点向下拖,使得投影看起来是45度角。

 

 



18.接下来的步骤跟上面方法一的一样,然后保存,我讲的很细很细,应该不熟悉工具的都会了做

 

 

 

 

分享到:
评论

相关推荐

    Awesome Kit分享(PSD手机APP扁平化设计源文件)

    "Awesome Kit分享(PSD手机APP扁平化设计源文件)" 这个标题揭示了我们正在处理的是一套用于手机应用程序设计的资源包,它以扁平化设计风格为主。扁平化设计是现代UI设计中的一个重要趋势,其特点是去除多余的装饰...

    APP界面设计中扁平化设计的运用——以《武汉军运会》APP设计.pdf

    【扁平化设计的核心理念】 扁平化设计是一种现代且简洁的设计风格,源自北欧风格和极简主义,强调以“信息”为核心,去除多余的装饰元素,减少视觉复杂性,提升用户体验。这一设计理念符合当前数字世界的需求,适应...

    精品-扁平化设计手册.ppt

    【扁平化设计手册】是关于现代设计趋势中的一种重要风格——扁平化设计的详细指导。扁平化设计强调简洁、清晰和易用性,它抛弃了过度的装饰效果和立体感,转而采用基本的形状、色彩和字体来构建界面。 在扁平化设计...

    扁平化设计ui

    扁平化设计UI,全称为“Flat Design UI”,是一种现代且流行的设计风格,它强调简洁、清晰和直接的视觉表达,去除多余的装饰性元素,使用户界面更加直观易用。这种设计方法在移动应用、网站设计以及操作系统界面中...

    extjs4扁平化设计

    在本话题中,我们关注的是ExtJS 4中的扁平化设计,这是一项流行的设计趋势,旨在使用户界面更为简洁、直观和现代化。 扁平化设计的核心理念是去除冗余的装饰性元素,如阴影、渐变和纹理,以呈现出清晰、简洁的视觉...

    扁平化设计ios风格ppt模板.rar

    【扁平化设计】 扁平化设计是一种现代的、简洁的设计理念,它摒弃了过多的装饰元素,如阴影、渐变、纹理等,强调界面的清晰度和易用性。这种设计风格起源于微软的Windows 8操作系统,后来在iOS系统中被广泛采用,...

    按钮扁平化设计代码。。

    按钮扁平化设计是现代用户界面设计中的一种流行趋势,它摒弃了传统的3D效果,转而采用简洁、平面的元素,使界面看起来更为清爽、直观。在本压缩包中,我们很可能会找到实现这一设计风格的代码示例。 扁平化设计的...

    常用扁平化设计模板图标和按钮

    在IT行业中,扁平化设计已经成为现代网页和应用程序界面设计的主流趋势。扁平化设计摒弃了过多的装饰效果,如阴影、渐变和纹理,以简洁、清晰的元素来提升用户体验。在这个主题中,“常用扁平化设计模板图标和按钮”...

    扁平化设计的色彩选择

    扁平化设计是现代设计中的一种流行趋势,它主张简化设计元素,摒弃传统的立体视觉效果如阴影、渐变和浮雕,转而使用简单的形状、鲜艳的颜色和高对比度来表达设计。这种设计理念强调的是信息的清晰传达和视觉上的简洁...

    ios风格扁平化设计商务实用报告PPT

    ios风格扁平化设计商务实用报告

    简约扁平化设计论文答辩ppt模板.rar

    简约扁平化设计是近年来在视觉传达领域广受欢迎的一种设计理念,尤其在数字产品设计中,如用户界面(UI)和用户经验(UX)设计中占据了主导地位。这种设计风格强调简洁、清晰和直接的视觉表达,减少多余的装饰元素,...

    e语言-易语言扁平化设计登录界面

    在本例程中,我们关注的是“易语言扁平化设计登录界面”,这是一个利用易语言模块HTMLayout界面类.ec实现的登录界面设计。 扁平化设计是现代用户界面设计中的一个重要趋势,它摒弃了过多的装饰元素,强调简洁、直观...

    扁平化设计素材

    扁平化设计素材 扁平化随着社会的发展越来越得到重视,而且ios7也采用这种形式。

    扁平化设计素材psd

    扁平化设计是一种在UI(用户界面)设计中广泛应用的设计理念,它强调简洁、清晰和无装饰的视觉表现。这种风格起源于2010年代初,由微软的Windows 8操作系统引入,随后被Apple的iOS 7所采用,成为全球范围内设计趋势...

    扁平化设计摄影企业模板

    【扁平化设计摄影企业模板】是一种现代且流行的网页设计风格,它强调简洁、清晰的视觉元素,去除多余的装饰效果,如阴影、渐变和纹理,以实现更高效的信息传递和用户界面。这种设计趋势在网页和应用设计中广泛采用,...

    蓝色扁平化设计html5模板

    扁平化设计是一种设计理念,它摒弃了过度装饰和立体感,强调简洁、直观和易用性,使得用户界面更加清晰,减少视觉干扰,提高用户体验。 HTML5是超文本标记语言的最新版本,它引入了许多新的标签和功能,如语义化...

    零基础html5+div+css+js网页开发教程第082期 扁平化设计 博客网站 第十九节

    零基础html5+div+css+js网页开发教程第082期_扁平化设计_博客网站_第十九节

    扁平化设计在网页设计中的运用研究.pdf

    【扁平化设计概念解析】 扁平化设计(Flat Design)是一种追求简约的设计理念,摒弃了传统的立体效果和复杂装饰,强调清晰、直观和高效。这种设计风格舍弃了阴影、渐变、纹理等视觉层次感的元素,使得界面更加简洁,...

    扁平化设计Bootstrap3后台管理模板

    扁平化设计Bootstrap3后台管理模板是现代网页设计中一种广泛应用的框架,旨在提供简洁、直观和高效的用户体验。Bootstrap3是Twitter开发的开源前端框架,它包含了一系列预先设计的CSS和JavaScript组件,使得开发者...

    扁平化设计的配色方案.doc

    扁平化设计是一种设计理念,强调简洁、直观,去除过度装饰,着重于功能性和用户体验。在配色方案上,扁平化设计展现出了多种创新和流行趋势。 首先,扁平化设计并不局限于特定的颜色搭配,设计师通常会选择大胆、...

Global site tag (gtag.js) - Google Analytics