帮你快速搞定网页配色的方法(附配色神器)

   完全零基础的新手如何做好网页配色?今天@喪心病狂十六夜貓 这篇好文,从网页基色、强调色、深色到应用整个配色方案 都有详细的流程与教学,每个步骤几乎都不用思考,用文章提供的配色神器就可以搞定了,你只要决定整个风格就行了。好东西千万別错过,来收!

  目录

  决定基色

  决定强调色

  决定深色

  让我们应用配色方案

  01. 首先决定基色

  首先,来决定网站的基色吧!虽然说你可以使用任何你喜欢的颜色,但为了让别人理解你的设计意图和理念,尽量还是需要注意以下几点。

  善于使用手边的资料

  客户端的标志上常用的颜色,往往是成功的。

  避免使用竞争对手的颜色

  品牌颜色的差异性是非常重要的。

  了解你的用户层所喜欢的颜色

  不管面对的是怎样的用户,你都要知道他们适合什么样的颜色。

  不要使用千篇一律的颜色

  少女向的设计并不意味着就是粉红色,要将你的创意展现出来。

  决定一个关键字

  为了展现出品牌和项目的氛围、将关键字涂上颜色,在配色遇到困难时是非常便利的方法。

  为你的作品设计一个良好的配色方案,参考别人的优秀的设计是非常有必要的!通过在下列网站上点击【color】按钮,你可以根据你的直觉来选择一个颜色。

  Dribbble

  Designspiration

  选择喜欢的颜色之后点击Update、与之相关联的就以设计列表的形式表现出来了。这个时候你再来创建一个配色版,再选取颜色时我想应该会更加顺利。


  在 Designspiration 这可以选择五种颜色相互组合、在形象更相符的作品中选择合适的配色作为参考。举个例子,在这里选择淡蓝色和粉红色。


  点击Search按钮、与之相关联的作品就显示出来了。


  在调色板中选择颜色作为参考时、调色板的上段显示的作品是最新的,设计思维最活跃的作品。而下面的,则是更值得信赖的,给企业的配色作为参考的作品。


  如果你找到了喜欢的作品、可以用Chrome的拓展程序将颜色抽出、你也可以也可以用Photoshop直接将颜色选取出来(在吸管工具的状态下,先按住鼠标左键,然后按住键盘上的Option键,就可以将【如果是Windows请按ALT键CS5以上版本可以使用】将鼠标拖动到屏幕外面选取颜色了。)


  02. 接下来决定强调色

  强调色就是让观众特别的引起注意的,但是使用的机会不多,起到强调效果的颜色。Paletton这个网站,使用色彩的基本原理,可以很轻松的创建一个美丽的配色方案。

  Paletton

  基色在前面已经决定好了,「 淡蓝色(#57CBEC)」输入到左下角的 Base RGB中、下面的设计案例用来参考,让我们来点击「AddComplementary(追加上辅色)」按钮。另外、通过点击左上角的图标,有大量的可供你决定的配色方案。


  在这一次,我们的强调色、就选择显眼的红色(#FF6F59)吧。

  03. 然后决定深色

  在WEB项目中,你可能需要灵活运用同种颜色的不同深浅来进行配色。一个是深灰色的文字文本,而另一个,则是用来作为背景设计时布置不同的内容时所运用的较浅的灰色。

  通过执行下面的步骤,选择配色进行调和,你可以创建一个最初的灰色。

  打开Photoshop、创建一个新文件,创建两个矩形,填充色分别为#424242和#fafafa

  然后创建一个新图层,在上面填充基本色(#57CBEC)。

  在图层上右键选择混合模式,设置为「叠加」、不透明度在「4-40%」的范围内调整。

  然后用吸管工具将颜色选取出来就完成了。


  这是基本颜色适用之前的样子。不管怎样的配色都可以用这个点来对应。


  然后这个基本颜色适用之后。只有一点点蓝色,我们创建出了#404d51和#fafbfb 这两种颜色。


  最后在这里添加上白色(#ffffff),全部5种颜色配色的配色版就顺利的做成了。


  04. 让我们来使用已经弄好的配色吧

  那么让我们将已经做成的配色板上的配色,运用到你的网页中吧!这一次的设计案例,我们在这个简单的网站线框上练习使用配色吧,、在这里你可以利用免费的PSD文件 One PageWebsite Wireframes :http://pan.baidu.com/s/1eR3WMDs


  然后这就是应用了我们之前配置好的配色版之后的样子。这是只需要五分钟左右就能完成的工作,一个拥有你个人风格的网页设计 就完成了。


  我们再尝试着做一些别的调色版,然后再相同的模版上使用。这是用橘黄色和蓝色组合出来的配色。


  如果你想表现出更平静的氛围时可以使用这样的配色。


  就算是相同颜色的配色版,应用的设计要素不同,给人的印象也就不同。如果你想突出的重点没有被凸显出来,那就回到上色时的那一步好好想想吧。


  如果你还需要更多的丰富多彩的配色方案,通过重复上面的步骤,你可以将你的调色板无限的延长。


  那么,全文到这里就结束了,步骤总结起来还是很简单的,大家不妨也去试一试,一起来感受设计的乐趣吧~

时间: 2024-12-27 08:20:22

帮你快速搞定网页配色的方法(附配色神器)的相关文章

大数据的设计师帮你快速搞定一个极简风格网站

  如何快速做出一个极简风格网站?国外某个网站统计分析了112个明显带有极简风格的网站后,发布了这篇超级干货.全程都是以数据来说话,从占比最大的设计要素开始说起,有案例有分析,把极简风格的设计彻底发挥到了术的地步. 最小化设计的目标是移除界面当中不必要的元素或内容,减少干扰,使界面最大程度的支持用户的任务流程. 要将界面以恰当的方式简化到只保留必要元素的程度,设计师需要对一系列与最小化策略高度相关的设计模式有所了解.界面设计,就像人类的语言一样,最终是由人们的使用方式所定义的.如今,虽然"最小化

4个流程帮你快速搞定运营设计!

  请同学们留出3--5分钟,看完这条微博要用.前两天<我是歌手>失控,汪涵超强的救场能力让大家都看到他背后几十年的沉淀.同理,设计师想适应运营短且快的特点,持续高产,有一套可执行的流程非常重要.微博之后,更加精彩 >>> 在现如今的社会中,每天都在进行着一场场没有硝烟的商战.运营设计则是至关重要的一部分.那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的. 设计的目的是什么? 设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到

三板斧帮你快速搞定移动缺省页设计

  饭饭妥妥的:缺省页面,是出现在用户没有提交任何资料或者网络连接不通畅的情况下所展现的页面.通常设计师们习惯用丰富的数据内容把页面设计得美观实用,考虑的都是界面展现的"理想状态",往往会忽视没有内容的"缺省状态".未经过精心设计的缺省页面降低了用户的使用体验,并可能给用户带来困扰,如下图iOS系统邮件App,无邮件时界面上没有任何有效反馈信息,用户不能明确得知到底是网络问题还是账号同步出错亦或者是收件箱内确实一封邮件都没有.同样的情况也出现在Pinterest和出

如何快速搞定一份看起来还不错的PPT?

  纸面功夫30%.素材收集30%.软件制作20%,今天这篇是阿里巴巴的资深交互设计师@Heidixie 在内部分享的干货,重在帮你摆脱工具,直击PPT「沟通传达」的本质. 新年除了做工作规划,还做了一些个人2016年学习和提升计划,其中,"聚焦"又是工作中项目的关键词,也是个人提升这块的关键词. 所谓厚积而薄发,在我理解,反而是之前要做大量的积累(所谓厚积),而之后更多的是垂直向下深挖打透,在这个基础上,才能够薄发一些可给别人以启迪的东西. 那么我的2016,想要聚焦于[可视化]话题

几行代码轻松搞定网页的简繁转换

简繁转换|网页 对网页进行简繁字体转换的方法一般有两种:一是使用<简繁通>这样的专业软件,另外一种是制作两套版本的网页.显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间.笔者在这里给大家提供一个非常简单的方法,只须在页面上添加几行代码就可以轻松搞定网页的简繁转换了.首先在http://www.knowsky.com/download/transform.js处下载用于简繁转换的js文件transform.js,复制到网站目录下,然后使用网页制作工具打开需要进行简繁转换的网页,

经典算法(6) 快速排序 快速搞定

快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序 思想----分治法也确实实用,因此很多软件公司的笔试面试,包括像腾讯,微软等知名IT公司都喜欢考这个 ,还有大大小的程序方面的考试如软考,考研中也常常出现快速排序的身影. 总的说来,要直接默写 出快速排序还是有一定难度的,因为本人就自己的理解对快速排序作了下白话解释,希望对大家理解有帮助 ,达到快速排序,快速搞定. 快速排序是C.R.A.Hoare于1962年提出的一种划分交换排序.它采用了 一

怎么用SmartArt快速搞定PPT图片排版

  怎么用SmartArt快速搞定PPT图片排版         SmartArt是PowerPoint自带的一款插件,或许你没有听过,或许你听过了,但是不会用,本文讲述了使用SmartArt快速搞定PPT图片排版. 首先我们了解一下,这款神器在PPT中的位置,只要点击插入菜单就能在弹出的工具栏中找到SmartArt.打开之后,你会发现他有很多选项,有列表,流程,循环,关系,层次结构,矩阵,凌锥,图片等. 用法一:图片快速排版 这款神器的其中一个作用是,能对图片进行快速排版,只需要几秒钟就能排出

如何快速搞定APP关键词优化

  近年来,依靠超强关键词设置能力冲入大家视野的APP屡见不鲜,前有喜马拉雅"搜什么都有它"的传奇,后有牛股王"搞定热度10000的股票关键词"的佳话,搞得运营小伙伴们一时心猿意马,苦心钻研捷径,希望有朝一日能在关键词上大放异彩.文公子要提醒大家,夯实关键词优化的基础才有可能成就佳话.与其钻研捷径,不如花点时间审查自己的关键词设置是否符合规则.下面我们就来说一说如何用8小时快速搞定一款APP的关键词优化. 一.六大基本原则 1.关键词权重排序:APP Title &

Word2007文档中快速搞定毕业论文方法

平时积攒的一些office技巧在写论文时可以用上了.但是由于时间已久,很多技巧和方法的来源已经忘记出处了,故未写明原作者的地址和申明转载.见谅. ·1.论文参考文献的添加 以word2007为例,6步搞定: [第一步] 文档中快速搞定毕业论文方法-快速搞定小姨子攻略"> [第二步] 若需要重复引用文献,则进入第三步: [第三步] 插入参考文献之后会发现没有 [ ] , 尾注不用管它,文中我也没有找到好方法,只能一个接一个加!并且会发现尾注中序号是上标,网上我找到2种方法:1.选中序号按快捷