Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Color
Webdesign

Empezando un diseño web utilizando una imagen como base

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este breve tutorial, voy a enseñarte uno de mis atajos favoritos para iniciar un diseño web. Este es un método que he utilizado mucho en el diseño independiente, y realmente te ayudará a superar ese obstáculo inicial en el que necesitas determinar cuál será el esquema de color y la "percepción" general.

Esta técnica es simple, pero no es necesariamente obvia hasta que hayas pasado por el proceso un par de veces. Todo empieza seleccionando la imagen perfecta. Así que con eso dicho, ¡vamos a comenzar!

Mira el Screencast

Seleccionando una imagen

Como se mencionó, todo inicia con una imagen. Algo que está relacionado al sitio web que estás diseñando. A menudo utilizaré Unsplash porque es genial, pero el volumen de fotos inspiradoras ahora disponibles en Envato Elements también es excelente.

Escoge algo relevante, pero algo que también contenga colores que imagines que se adaptarán bien a tu proyecto. Si estás diseñando algo para un negocio establecido, es posible que necesites mantenerse dentro de los requisitos de la marca, en cuyo caso todo este proceso funcionará igual utilizando un logotipo como punto de partida.

Aquí está la imagen con la que iniciaré, por Kyler Trautner (es hermosa, y nos da un rango de colores equilibrados):

Iceland
Islandia

Puedes ver el negro azulado del asfalto, además de lo que será un tono naranja de la tundra si aumentamos la saturación, y lo que parece ser gris, en realidad es un tono azul de la nube baja.

Importando una imagen a Adobe XD

Tengo la imagen descargada y guardada, así que ahora voy a abrir Adobe XD (que simplemente es mi herramienta de elección en este ejemplo, puedes utilizar algo que sea más familiar para ti si lo prefieres).

Ve a Archivo> Importar y selecciona la imagen para llevarla a tu lienzo. Redimensiona el tamaño como mejor te parezca.

Seleccionado los colores

Al situar objetos de UI en el lienzo, podemos tomar el selector de color y llenar cada uno con tonos de nuestra imagen.

picking colors from an image in Adobe XD

Por ejemplo:

  • Coloca un rectángulo para que sirva de fondo, luego dale una sombra "media" desde el asfalto.
  • Crea otro rectángulo para el elemento de envoltura principal, luego dale un color más oscuro de la carretera.
  • Añade una sombra al mismo elemento de envoltura y dale un tono azul / gris oscuro que combine adecuadamente.
  • Un color de cielo pálido se ajustará a un elemento de la página debajo de la imagen.
  • Lo mismo aplica al texto, algunos de los cuales deberán ser oscuros con respecto a la luz, y viceversa.

Esto es lo que tengo hasta el momento:

color palette so far

Contrastado elementos UI

Ahora usemos tonalidades anaranjadas contrastantes para algunos botones. Coloca algunos rectángulos de botón en la página y eecoge un tono beige / naranja del matorral al lado de la carretera.

El efecto inicial es casi "opaco", así que con la herramienta de selección de Relleno arrastra el selector hacia arriba y hacia la derecha para incrementar la saturación.

Increasing saturation

Intenta lo mismo con un color azul que contraste, para un botón secundario.

Conclusión

Con una imagen apropiada puedes empezar todo un esquema de color y la base de un diseño web completo.

El ejemplo que has seguido está tomado de un próximo curso que se titula "Code-Friendly Design With Adobe XD", así que ¡estemos atentos!

XD final design

Si estás interesado en la teoría del color, también puedes consultar estos recursos de aprendizaje:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.