热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

网站设计之网页的配色总感觉怪怪的?要怎么调整?

配色里的注意事项和最基础的配色原则。下面用一个案例来帮助大家理解下配色。大家看下这张海报,有没有感觉怪怪的?挺土气~ 原因是什么?抛开排版等其他元素不谈。下面我们一起分析下这张海报

配色里的注意事项和最基础的配色原则。

下面用一个案例来帮助大家理解下配色。

网站设计之网页的配色总感觉怪怪的?要怎么调整?

大家看下这张海报,有没有感觉怪怪的?挺土气~  原因是什么?抛开排版等其他元素不谈。下面我们一起分析下这张海报的配色问题。

网站设计之网页的配色总感觉怪怪的?要怎么调整?

海报中出现的3种颜色,无论是色相还是饱和度明度,全部都不一致。而且颜色对比不够,看起来比较浑浊。

之前学美术,老师最经常说的一句话就是暗的更暗,亮的更亮!目的是为了增强对比!

一般让人感觉比较舒服的配色,不管使用什么色相,只要明度和饱和度保持统一,色彩看起来就是井然有序非常舒服的,这就是配色最基本原则。

要是明度或者纯度不统一,看起来就会很不和谐感觉怪怪的。

下面我修改一下

网站设计之网页的配色总感觉怪怪的?要怎么调整?

去掉多余的点缀元素,更改下配色。大家在看颜色是不是就舒服了一些?

我是怎么改的颜色?

首先把紫色调整偏蓝一些,与红色对比拉开,不然会看起来很浑浊。然后将红色的饱和度的值与蓝色的饱和度值调整为相近值。(具体要以人眼实际感受为主,不能单一追求数值。)

网站设计之网页的配色总感觉怪怪的?要怎么调整?

然后重新调整下排版,底色直接改成白色。是不是好很多。

网站设计之网页的配色总感觉怪怪的?要怎么调整?

上图中的颜色搭配虽然和谐,但是并不能体现出模特的干练、优雅、熟女的气质。

所以想表现成熟,一定要压低饱和度,我这边直接把蓝色的饱和度明度改成0,就是黑色。 这也就是为什么黑白是永不过时的百搭色原因,因为黑白本身无饱和度!所以当你不知道怎么穿衣的时候不妨穿个黑色的,不知怎么配色的时候不妨用下黑色。

然后红色改成了很适合成熟女性的品红。 看下效果是不是比刚才的更符合人物产品气质?

网站设计之网页的配色总感觉怪怪的?要怎么调整?

除此之外我们工作中还会经常涉及到促销海报以及运营口中的高端大气有档次海报,下面我们继续进行调整…

假如想表现促销感可以使用大面积的高纯度颜色,面积越大刺激性越强。淘宝官方的很多banner基本都是各种纯色拼接。

但是几种高纯度颜色混合的话容易显得花哨,所以既想有高逼格又要有促销性的海报最好只用一种高纯度颜色,然后配其他低纯度色彩,我这里直接搭配了无纯度的黑和白。下面大家看下效果。

网站设计之网页的配色总感觉怪怪的?要怎么调整?

最后若想单一的只表现轻奢感,高端大气有档次,可以直接采用高级配色(黑+棕)之前文章也讲过,这里不多赘述。一定要注意留白,下面看下效果。

网站设计之网页的配色总感觉怪怪的?要怎么调整?


推荐阅读
  • Linuxchmod目录权限命令图文详解在Linux文件系统模型中,每个文件都有一组9个权限位用来控制谁能够读写和执行该文件的内容。对于目录来说,执行位的作用是控制能否进入或者通过 ... [详细]
  • Skywalking系列博客1安装单机版 Skywalking的快速安装方法
    本文介绍了如何快速安装单机版的Skywalking,包括下载、环境需求和端口检查等步骤。同时提供了百度盘下载地址和查询端口是否被占用的命令。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Microsoft Office for Mac最新版本安装教程,亲测可用!
    本文介绍了Microsoft Office for Mac最新版本的安装教程,经过亲测可用。Office工具是办公必备的工具,它为用户和企业设计,可以利用功能强大的Outlook处理电子邮件、日历和通讯录事宜。安装包包括Word、Excel、PPT、OneNote和Outlook。阅读本文可以了解如何下载并安装Office,以及安装过程中的注意事项。安装完毕后,可以正常使用Office中的Word等功能。 ... [详细]
  • 电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • 本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ... [详细]
  • 学习笔记(34):第三阶段4.2.6:SpringCloud Config配置中心的应用与原理第三阶段4.2.6SpringCloud Config配置中心的应用与原理
    立即学习:https:edu.csdn.netcourseplay29983432482?utm_sourceblogtoedu配置中心得核心逻辑springcloudconfi ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 大连微软技术社区举办《.net core始于足下》活动,获得微软赛百味和易迪斯的赞助
    九月十五日,大连微软技术社区举办了《.net core始于足下》活动,共有51人报名参加,实际到场人数为43人,还有一位专程从北京赶来的同学。活动得到了微软赛百味和易迪斯的赞助,场地也由易迪斯提供。活动中大家积极交流,取得了非常成功的效果。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
author-avatar
潙沵悈煙卻悈鋽孒沵
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有