设计灵感(二)——渐变的运用

最近小白搜索一些网站,发现渐变在一些网站首页的制作中很常见。

看那那么多渐变的首页,小白也开始手痒痒,准备发一篇关于渐变的推文。

先给大家奉上一些简单案例,之后也顺便教大家如何制作简单的渐变风格封面。

1

纯渐变

(某国外网站)

分析思考:通过青色与蓝色45°线性渐变作为背景,中间通过矢量图形及相应文本框突出主题,下半部分箭头引导视线。

通过拆分之后,借鉴原来的背景可以做出如下效果:

小白就用视频的方式简单告诉大家如何制作这张简单的封面页。

有兴趣的童鞋可以下载末尾分享的文件,跟着小白一起操作。

另外还有几个类似的,大家有兴趣也可以模仿一下:

原型:

模仿后:

2

图片及渐变

分析思考:紫色和红色搭配渐变,底层山峰图片若隐若现。对图片小部分透明遮罩,也足够吸引人眼球。

通过拆分之后,借鉴主要元素可以做出同样的模式,但是考虑到如果仅仅是文字无法平衡整个页面,所以特意增加了圆形重复以达到平衡的效果。

还有很多相同原理的渐变小白就不一一给大家呈现了,直接奉上案例。

原型:

模仿后:

3

多形状渐变

分析思考:这种渐变模式也是很常见的,通过色块的阴影达到层级的关系,进而营造出一种层级感。同时运用色彩原理凸显位面关系。

原型:

模仿后:

当然渐变风格还有很多,小白列举的只是小小的一部分。更多的渐变方法及风格需要大家自己去采集模仿啦!

另外给大家安利一个炒鸡好用的渐变网站:

https://webgradients.com/

咳咳,渐变颜色太多,放不下去,就暂时放一张截图给大家咯。

关注公众号“小白学个P”,后台回复“渐变封面”即可获得推文的原素材。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,557评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,255评论 4 61
  • 小时候的回忆是,我坐在摩托车上,爷爷奶奶保护着我,风吹乱头发,吹乱了我的心
    术印阅读 190评论 0 0
  • 前因后果不必再提,大概所有人都知道了顾眠一,阿祀都是去年那个行骗的,大名叫陈明佳,我视频里的窜天猴,本来不想...
    橦讷讷阅读 208评论 0 0
  • 那个在我很小的时候会蹲下来给我系鞋带的男生,那向老师告状让我罚站一下午的女生。那个当了我两年小跟班说我是永远的班长...
    爱吃水果的冷二爷阅读 188评论 0 0