Cuando está revisando su News Feed, ¿qué tiende a llamar su atención? Es más probable que no, son videos de YouTube, imágenes, GIF animados y otro contenido visual, ¿verdad?

Si bien el contenido basado en texto siempre es importante cuando se buscan respuestas a una pregunta, se crean elementos visuales como infografías, cuadros, gráficos, animaciones. Los GIF y otras imágenes que se pueden compartir pueden hacer maravillas para captar la atención de sus lectores y mejorar su artículo o informe.

Sé lo que podría estar pensando: "No sé cómo diseñar imágenes impresionantes. Yo ' No soy creativo ".

Hola. Soy Bethany, y seré la primera en decirte que no soy naturalmente artística. Y, sin embargo, encontré un punto fuerte en la visualización de datos en HubSpot, donde pasé la mayor parte de mis días creando infografías y otros elementos visuales para publicaciones de blog.

Entonces, aunque no diría que soy naturalmente artístico, he aprendido a crear contenido visual convincente. También puedes.

 Descarga más de 195 plantillas de diseño de marketing visual para usar en publicaciones de redes sociales, infografías y más.

Si bien hay muchas herramientas para ayudar a los más no artísticos a crear imágenes atractivas, algunas partes del diseño gráfico requieren un poco más de conocimiento de fondo.

Elija los colores adecuados por ejemplo. Es algo que puede parecer fácil al principio, pero cuando estés mirando una rueda de color, desearás tener algo de información sobre lo que estás viendo.

Considera esto como tu curso introductorio a la teoría del color. Sigue leyendo para aprender sobre los términos, herramientas y consejos que debes saber para elegir los mejores colores para tus diseños.

Teoría del color 101

Primero volvamos a la clase de arte de la escuela secundaria para hablar sobre los conceptos básicos del color. 19659002] ¿Recuerda haber oído acerca de los colores primario, secundario y terciario? Son muy importantes si quieres entender, bueno, todo lo demás sobre el color.

 Modelo de teoría de color circular con etiquetas para colores primarios, colores secundarios y colores terciarios

Colores primarios

Colores primarios son aquellos que no puedes crear combinando dos o más colores juntos. Son muy parecidos a los números primos, que no pueden crearse multiplicando otros dos números juntos.

Hay tres colores primarios:

  • Rojo
  • Amarillo
  • Azul [19659020] Piense en los colores primarios como los colores principales, anclando su diseño en una combinación de colores general. Cualquiera o una combinación de estos colores puede dar a tu marca barandillas cuando te muevas para explorar otros tonos, tonos y tintes (hablaremos de ellos en solo un minuto).

    Al diseñar o incluso pintar con colores primarios, no No se sienta restringido solo a los tres colores primarios mencionados anteriormente. El naranja no es un color primario, por ejemplo, pero las marcas pueden usar el naranja como su color dominante (como lo sabemos en HubSpot).

    Saber qué colores primarios crea es tu boleto para identificar colores que puedan ir bien con el naranja, dado el tono, tono o tinte correcto. Esto nos lleva a nuestro siguiente tipo de color …

    Colores secundarios

    Los colores secundarios son los colores que se forman mediante la combinación de dos de los tres colores primarios enumerados anteriormente. Verifique el modelo de la teoría del color anterior: ¿ve cómo cada color secundario es compatible con dos de los tres colores primarios?

    Hay tres colores secundarios: naranja púrpura y verde . Puedes crear cada uno usando dos de los tres colores primarios. Estas son las reglas generales de la creación de colores secundarios:

    • Rojo + Amarillo = Naranja
    • Azul + Rojo = Púrpura
    • Amarillo + Azul = Verde

    Mantener Tenga en cuenta que las mezclas de colores anteriores solo funcionan si utiliza la forma más pura de cada color primario. Esta forma pura se conoce como tono de un color, y verá cómo estos tonos se comparan con las variantes debajo de cada color en la rueda de colores a continuación.

    Colores terciarios

    Los colores terciarios se crean cuando se mezcla un color primario con un color secundario.

    A partir de aquí, el color se vuelve un poco más complicado. Y si quiere saber cómo los expertos eligen el color en su diseño, primero debe entender todos los demás componentes del color.

    El componente más importante de los colores terciarios es que no todos los colores primarios pueden coincidir con un color secundario. Color para crear un color terciario. Por ejemplo, el rojo no se puede mezclar en armonía con el verde, y el azul no se puede mezclar en armonía con el naranja: ambas mezclas producirían un color ligeramente marrón (a menos que, por supuesto, eso sea lo que estás buscando).

    En su lugar, los colores terciarios se crean cuando un color primario se mezcla con un color secundario que viene junto a él en la rueda de color de abajo. Hay seis colores terciarios que cumplen con este requisito:

    • Rojo + Púrpura = Rojo Púrpura (magenta)
    • Rojo + Naranja = Rojo-Naranja (bermellón) [19659036] Azul + Púrpura = Azul-Púrpura (violeta)
    • Azul + Verde = Azul-Verde (verde azulado)
    • Amarillo + Naranja = Amarillo-Naranja (ámbar)
    • Amarillo + Verde = Amarillo-Verde (chartreuse)

    La rueda de la teoría del color

    Está bien, genial. Así que ya sabes cuáles son los colores "principales", pero ambos sabemos que elegir color, especialmente en una computadora, tiene un rango mucho más amplio que 12 colores básicos.

    Este es el ímpetu detrás de la rueda de colores, un círculo gráfico que representa cada color primario, secundario y terciario, así como sus respectivos tonos, matices, tonos y matices. Visualizar los colores de esta manera lo ayuda a elegir combinaciones de colores al mostrarle cómo se relaciona cada color con el color que viene junto a él en una escala de colores del arco iris. (Como probablemente sepa, los colores de un arco iris, en orden, son rojo naranja amarillo verde azul índigo y violeta .)

     Rueda de la teoría del color con etiquetas para cada tono de color, tinte, tono y tono "ancho =" 450 "altura =" 342

    Al elegir colores para una combinación de colores, la rueda de colores le brinda la oportunidad de crear colores más brillantes, más claros, más suaves y más oscuros mezclando blanco, negro y gris con los colores originales. Estas mezclas crean las variantes de color que se describen a continuación:

    Tono

    Tono es más o menos lo que realmente queremos decir cuando decimos la palabra "color". Todos los colores primarios y secundarios, por ejemplo, son "tonos".

    Los tonos son importantes para recordar cuando se combinan dos colores primarios para crear un color secundario. Si no usa los tonos de los dos colores primarios que están mezclando, no generará el tono del color secundario. Esto se debe a que un tono tiene el menor número de otros colores en su interior. Al mezclar dos colores primarios que llevan otros tonos, tonos y matices dentro de ellos, técnicamente está agregando más de dos colores a la mezcla, haciendo que su color final dependa de la compatibilidad de más de dos colores.

    Si Si mezclamos los tonos de rojo y azul, por ejemplo, obtendríamos el púrpura, ¿no? Pero mezcle un tinte de rojo con el tono de azul, y obtendrá un púrpura ligeramente teñido a cambio.

    Sombra

    Es posible que reconozca el término "sombra" porque se usa con bastante frecuencia Para referirse a versiones claras y oscuras del mismo tono. Pero en realidad, un tono es técnicamente el color que obtienes cuando agregas negro a cualquier tono dado. Los diversos "tonos" solo se refieren a la cantidad de negro que se está agregando.

    Tinte

    Un tinte es lo opuesto a un tono, pero la gente no suele distinguir entre el tono de un color y el tinte de un color. Obtienes un tinte diferente cuando agregas blanco a un color. Por lo tanto, un color puede tener un rango de tonos y matices.

    Tono (o saturación)

    También puede agregar blanco y negro a un color para crear un tono. El tono y la saturación esencialmente significan lo mismo, pero la mayoría de las personas usarán la saturación si están hablando de los colores que se crean para las imágenes digitales. El tono se usará con mayor frecuencia para pintar.

    Cómo agregar y restar colores

    Si alguna vez has jugado con colores en cualquier programa de computadora, probablemente hayas visto un módulo que enumera colores RGB o CMYK con algunos números a continuación. a las letras.

    ¿Alguna vez te has preguntado qué significan esas letras?

    CMYK

    CMYK significa Cian, Magenta, Amarillo, Clave (Negro). Esos también son los colores que figuran en sus cartuchos de tinta para su impresora. Eso no es una coincidencia.

    CMYK es el modelo de color sustractivo . Se llama así porque tienes que restar colores para llegar al blanco. Eso significa que lo contrario es cierto: cuantos más colores agregue, más se acercará al negro. Confuso, ¿verdad?

     Diagrama de color sustractivo con CMYK en el centro

    Piensa en imprimir una hoja de papel. La primera vez que coloca una hoja en la impresora, normalmente está imprimiendo en una hoja blanca de papel. Al agregar color, se bloquea el paso de las longitudes de onda blancas.

    Entonces, digamos que tenía que volver a colocar ese papel impreso en la impresora e imprimir algo en él nuevamente. Notará que las áreas que se han impreso dos veces tienden a los colores más cercanos al negro.

    Me resulta más fácil pensar en CMYK en términos de sus números correspondientes. CMYK funciona en una escala de 0 a 100. Si C = 100, M = 100, Y = 100 y K = 100, terminas con un color negro. Pero, si los cuatro colores son iguales a 0, terminas con blanco verdadero.

    RGB

    Los modelos de color RGB, por otro lado, están diseñados para pantallas electrónicas, incluidas las computadoras.

    RGB significa rojo, verde , Azul, y se basa en el modelo de color aditivo de las ondas de luz. Esto significa que, cuanto más color agregue más se acercará al blanco. Para las computadoras, RGB se crea utilizando escalas de 0 a 255. Entonces, el negro sería R = 0, G = 0 y B = 0. El blanco sería R = 255, G = 255 y B = 255.

     Modelo de color aditivo con RGB en el centro

    Cuando esté creando color en una computadora, su módulo de color por lo general, enumerar los números RGB y CMYK. En la práctica, puede usar cualquiera de los dos para encontrar colores, y el otro modelo de color se ajustará en consecuencia.

    Sin embargo, muchos programas web solo le darán los valores RGB o un código HEX (el código asignado a color para CSS y HTML) . Entonces, si está diseñando imágenes digitales, RGB es probablemente su mejor opción para elegir colores.

    Ahora que hemos analizado todos los aspectos básicos de la teoría del color, hablemos de cómo utilizar este nuevo conocimiento para crear diseños que perfeccionen su marca y resuenen con tu audiencia.

    Probablemente hayas notado que algunos colores se ven muy bien juntos y otros, bueno, simplemente no lo hagas. Los colores que elegimos pueden ayudar a mejorar un diseño, o pueden quitarle un diseño.

    Cuando descubres cómo diseñar un gráfico, es importante recordar que la forma en que percibimos los colores depende del contexto en el que Véalo.

    1. Considere el contexto de su color.

    El contexto de color se refiere a cómo percibimos los colores cuando contrastan con otro color. Mire los pares de círculos en el siguiente ejemplo para ver a qué me refiero.

    El centro de cada uno de los círculos es del mismo tamaño, forma y color. Lo único que cambia es el color de fondo. Sin embargo, los círculos medios aparecen más suaves o más brillantes según el color de contraste detrás de ellos. Incluso puede notar cambios en el movimiento o en la profundidad solo por un cambio de color.

     Cuatro pares de círculos de colores que muestran un contexto de color diferente

    Esto se debe a que la forma en que usamos dos colores cambia la forma en que Lo percibimos. Por lo tanto, cuando elija colores para sus diseños gráficos, piense cuánto contraste desea en todo el diseño.

    Por ejemplo, si estuviera creando un gráfico de barras simple, ¿desearía un fondo oscuro con barras oscuras? Probablemente no. Lo más probable es que desee crear un contraste entre sus barras y el fondo mismo, ya que desea que sus espectadores se centren en las barras, no en el fondo.

    Sin embargo, la elección de colores con alto contraste no siempre es tan difícil como Elegir colores que se ven bien juntos.

    Para mí, aquí es donde elegir el color es más complicado. Podría pasar horas eligiendo colores para una infografía simplemente porque me toma un tiempo entender qué se ve mejor juntos.

    Sin embargo, en realidad, generalmente no tengo horas para elegir colores. (Y eso probablemente sería una pérdida de tiempo incluso si tuviera unas pocas horas).

    Afortunadamente, hay reglas lógicas sobre cómo crear esquemas de colores que funcionen juntos.

    2. Consulte una rueda de colores para identificar colores análogos.

    Los esquemas de colores análogos se forman al vincular un color principal con los dos colores directamente al lado de la rueda de colores. También puede agregar dos colores adicionales (que se encuentran al lado de los dos colores exteriores) si desea utilizar un esquema de cinco colores en lugar de solo tres colores.  Rueda de color con cinco colores análogos trazados entre azul y amarillo

    Las estructuras análogas no crean temas con colores de alto contraste, por lo que generalmente se usan para crear un diseño más suave y menos contrastante. Por ejemplo, podría usar una estructura análoga para crear un esquema de color con colores de otoño o primavera.

    Me gusta usar este esquema de color para crear colores más cálidos (rojo, naranja y amarillo) o más frío (violeta, azul y verde) ) paletas de colores como la de abajo. No hay un alto contraste entre estos colores, pero ¿no se ven bien juntos?

    Probablemente usaría esta paleta para diseñar una imagen en lugar de una infografía o un gráfico de barras, como me gustaría que todos los elementos en la imagen para mezclar bien juntos.

    3. Consulte una rueda de colores para identificar colores complementarios.

    Puede que lo haya adivinado, pero una combinación de colores complementaria se basa en el uso de dos colores directamente uno frente al otro en la rueda de colores y los matices relevantes de esos colores. [19659002] El esquema de color complementario proporciona la mayor cantidad de contraste de color. Debido a esto, debe tener cuidado con la forma en que usa los colores complementarios en un esquema. Es mejor usar un color predominantemente y usar el segundo color como acentos en tu diseño.

    El esquema de color complementario también es ideal para tablas y gráficos. El alto contraste lo ayuda a resaltar los puntos importantes y las revelaciones.

    Sin embargo, si tuviera que usar estos colores en una infografía, probablemente necesitaría usar un color mucho más claro para el fondo real. ¿Te imaginas elegir una de las naranjas como fondo con azules como acentos y texto? Probablemente sería demasiado abrumador y difícil de leer.

    4. Concéntrese en colores monocromáticos en el mismo tono.

     Rueda de color con dos colores monocromáticos trazados a lo largo del tono rojo

    El uso de esquemas monocromáticos le permite crear un esquema de color basado en varios tonos y tonos de uno matiz. Aunque carece de contraste de color, a menudo se ve muy limpio y pulido. También le permite cambiar fácilmente la oscuridad y la claridad de sus colores.

    Me gusta usar esquemas de color monocromáticos para cuadros y gráficos, pero solo cuando se crea un alto contraste no es necesario. Sin embargo, los esquemas monocromáticos no tienden a "estallar", por lo que si buscas un esquema de colores que sea brillante y que llame la atención, esta no es tu mejor opción.

    Mira todos los colores monocromáticos que caen debajo el tono rojo, un color primario.

     Barra de color rojo con tono, tinte, tono y sombra rojos

    5. Use un esquema de color triádico para crear un alto contraste.

    Los esquemas de color triádico ofrecen esquemas de color de alto contraste mientras mantienen el mismo tono. Los esquemas de colores triádicos se crean al elegir tres colores que se colocan igualmente en líneas alrededor de la rueda de colores.

     Rueda de colores con tres colores triádicos trazados entre púrpura, verde y naranja

    Los esquemas de colores de la tríada son útiles para crear un alto contraste entre cada color en un diseño, pero también pueden parecer abrumadores si todos sus colores se eligen en el mismo punto en una línea alrededor de la rueda de colores.

    Para atenuar algunos de sus colores en un esquema triádico , puede elegir un color dominante y usar los otros con moderación, o simplemente someter los otros dos colores eligiendo un tinte más suave.

    El esquema de color triádico se ve muy bien en gráficos como gráficos de barras o circulares porque ofrece el contraste que necesita crear comparaciones.

    Sin embargo, si utilizara esta combinación de colores para crear una infografía, es más probable que elija un color como el color de fondo, como el amarillo o el verde claro, y un color de contraste más oscuro como el dominan t color Entonces podría usar los otros tres colores como acentos en todo. Al cambiar la intensidad de los colores en el diseño, puedo resaltar puntos importantes y conclusiones.

     Barra de color con colores triádicos de color púrpura, verde y naranja

    6. Cree un esquema de color complementario dividido.

    Un esquema complementario de división incluye un color dominante y los dos colores directamente adyacentes al complemento del color dominante. Esto crea una paleta de colores más matizados que un esquema de color complementario, al tiempo que conserva los beneficios de los colores de contraste.

    El esquema de color complementario dividido puede ser difícil de equilibrar bien porque, a diferencia de los esquemas de color análogos o monocromáticos, todos los colores utilizados proporcionan contraste (similar al esquema complementario).

    Me puedo imaginar usando el siguiente esquema de color complementario dividido en una variedad de formas. Podría usar esto en una tabla o gráfico porque me da el contraste que necesito y los colores siguen siendo visualmente atractivos.

    También podría imaginar usar estos colores en una infografía, aunque jugaría un poco más con los colores. para ver qué pares se ven mejor juntos.

    El aspecto positivo y negativo del modelo de color complementario dividido es que puede usar cualquiera de los dos colores en el esquema y obtener un gran contraste … pero eso también significa que también puede ser difícil Encuentra el equilibrio adecuado entre los colores. Como resultado, puede terminar jugando con este un poco más para encontrar la combinación correcta de contraste.

    No importa qué combinación de colores elija, intente y tenga en cuenta lo que necesita su gráfico. . Si necesita crear contraste, elija un esquema de color que le dé eso. Por otro lado, si solo necesitas encontrar las mejores "versiones" de ciertos colores, entonces juega con el esquema de color monocromático para encontrar los tonos y tonos perfectos.

    Descubrí que simplemente entendiendo cómo son los esquemas de color. construido va un largo camino para ayudarme a elegir el esquema de color correcto. Si solo pienso: "¿Cuál es el objetivo de este gráfico?" Puedo comenzar a determinar cuánto contraste (o cuán poco) necesito.

    Recuerda, si construyes un esquema de color con cinco colores, eso no significa que tengas que usar los cinco. A veces, elegir dos colores de una combinación de colores se ve mucho mejor que agrupar los cinco colores en un solo gráfico.

    7. Piense más allá de los ajustes preestablecidos, pero comience con un solo color.

    Antes de enviarlo a crear imágenes asombrosas para mejorar su blog y publicaciones sociales, permítame darle algunos consejos adicionales para elegir colores:

    • No te quedes con los ajustes preestablecidos. Casi todos los programas que uses te darán colores predefinidos automáticamente. Supera los ajustes preestablecidos y explora el color por tu cuenta. No dejes que el programa decida cómo usar el color en tu diseño.
    • Comienza con un color que te guste. Cada vez que diseño algo, comienzo con un color y construyo la combinación de colores a partir de ahí. Si intentas comenzar con más de un color, te será más difícil encontrar armonía entre tus colores.
    • Guarda tus combinaciones de colores. Si encuentra un color (o combinación de colores) que le guste, probablemente le sea útil más adelante. No sugeriría usar el mismo esquema de color para cada gráfico o gráfico que creas, pero siempre puedes usar diferentes esquemas de diferentes maneras más adelante.
    • La práctica hace la perfección. Cuanto más juegues con el color y el diseño de la práctica, mejor serás. Nadie crea su obra maestra la primera vez.

    Herramientas de color

    Ha habido mucha teoría e información práctica para entender realmente qué colores combinan mejor y por qué. Pero cuando se trata de la tarea real de elegir colores mientras diseñas, siempre es una buena idea tener herramientas que te ayuden a hacer el trabajo de manera rápida y fácil.

    Por suerte, hay una serie de herramientas para ayudarte

    Adobe Color

    Una de mis herramientas de color favoritas para usar mientras estoy diseñando cualquier cosa, ya sea una infografía o solo un gráfico circular, es Adobe Color (anteriormente Adobe Kuler).

    Esta herramienta gratuita en línea le permite crear rápidamente esquemas de color basados ​​en las estructuras de color que se explicaron anteriormente en esta publicación. Una vez que haya elegido los colores en el esquema que desea, puede copiar y pegar los códigos HEX o RGB en cualquier programa que esté usando.

    También cuenta con cientos de esquemas de colores prefabricados para que los explore y use en tus propios diseños. Si es un usuario de Adobe, puede guardar fácilmente sus temas en su cuenta.

     Rueda de color en el tablero de control de Adobe Color

    Guía de color de Illustrator

    Pasé mucho tiempo en Adobe Illustrator, y una de mis características más utilizadas es la guía de colores. La guía de colores le permite elegir un color, y generará automáticamente un esquema de cinco colores para usted. También le proporcionará una gama de tonos y sombras para cada color en el esquema.

    Si cambia su color principal, la guía de colores cambiará los colores correspondientes en ese esquema. Entonces, si eligió un esquema de color complementario con el color principal de azul, una vez que cambie su color principal a rojo, el color complementario también cambiará de naranja a verde.

    Al igual que Adobe Color, la guía de color tiene una serie de colores. modos preestablecidos para elegir el tipo de esquema de color que desee. Esto le ayuda a elegir el estilo de combinación de colores correcto dentro del programa que ya está utilizando.

    Después de haber creado la combinación de colores que desea, puede guardar esa combinación en el módulo "Temas de colores" para que la use en todo su proyecto o en el futuro.

     Opciones de color en la herramienta de guía de color de Illustrator

    Guías de color preestablecidas

    Si no es un usuario de Adobe, probablemente haya usado productos de Microsoft Office al menos una vez. Todos los productos de Office tienen colores preestablecidos que puede usar y jugar para crear esquemas de color. PowerPoint también tiene varios ajustes preestablecidos de combinación de colores que puede usar para inspirarse en sus diseños.

    La ubicación de las combinaciones de colores en PowerPoint dependerá de la versión que use, pero una vez que encuentre el color "temas" de su documento , puede abrir las preferencias y ubicar los códigos RGB y HEX para los colores utilizados.

    A continuación, puede copiar y pegar esos códigos para usarlos en el programa que esté usando para hacer su trabajo de diseño.

     Muestras de color y medidores en PowerPoint

    Hay mucha teoría en este post, lo sé. Pero cuando se trata de elegir colores, entender la teoría detrás del color puede hacer maravillas sobre cómo usar el color.

     descargue más de 195 plantillas de diseño gratuitas "src =" https: // no-cache. hubspot.com/cta/default/53/9bda8699-e0ac-428c-a987-bdc898b44747.png



    Source link