Al crear tu web es importante que esta muestre la esencia de tu marca, que mantenga el mismo estilo, colores, tipo de letra, etc. A esto se le llama Branding, puede ser un concepto nuevo para los que no están en el mundo del diseño o la publicidad.
Cree este post para los que están desarrollando su propio blog o apenas van por la creación de su marca y pudieron haberse trabado en algunos puntos, como lo es la elección de la paleta de colores.
Es muy sencillo para las personas que manejan las herramientas de Adobe como Photoshop, Illustrator o Color CC, pero quise orientar este tutorial a los que no, y usé herramientas básicas que seguro tienes en tu pc como algún explorador, por ejemplo, Google Chrome y Power Point.
Sin más que añadir, comencemos con el paso a paso:
1. Elige una imagen que te encante
Lo primero que haremos será elegir una imagen que te inspire, que te guste y sientas que sus colores van en juego con lo que tu marca quiere reflejar. Puede ser una foto (te dejo mi post con 25 sitios webs de imágenes gratis), algo que te ha gustado en Instagram, un banner publicitario o mi favorito Pinterest.
2. Abrirla en Adobe Color CC
Este es un website para crear paletas de colores muy simple, puedes incluso usarlo sin la imagen, eligiendo color por color y es muy simple, pero me gusta recomendar la imagen porque ya sabes cómo se verá en la aplicación.
Entonces, al abrir esta web le damos clic a la camarita arriba a la derecha y seleccionamos la imagen que escogimos y ¡Se creará automáticamente la paleta de colores con los mejores colores! ¿Increíble no?
Hay un cuadro a la izquierda que dice “Color Mood” que te deja elegir entre las distintas opciones que te genera para la misma imagen.
3. Perfecciona tu paleta
Ahora que tienes tu paleta de colores has un screenshot (Captura la pantalla) y abre Power Point, luego, presionando la tecla ctrl y seguidamente v sin soltar (Ctrl + V) se pegará tu pantalla, lo único que tienes que hacer es cortarla de tal manera que solo se vea la franja. Luego le das clic derecho con tu mouse y seleccionas “Guardar como”.
4. Descubre los códigos
Saber el código de cada color es muy fácil con Photoshop, pero, como estamos trabajando sin ellas puedes ir a ImageColorPicker, subir tu imagen y ver el código de cada uno.
Es importante tenerlo porque es la forma en la que las webs toman los colores y debes asegurarte de siempre usar las mismas tonalidades. Te dejo mi hoja de código HTML y CSS para que veas como puedes personalizar tu sitio y veas ejemplos de cómo usarlos.
Yo recomiendo agregar colores básicos como blanco y gris oscuro para completar en caso de no tener. Y una buena idea para no olvidar los códigos de colores es escribirlos sobre cada uno de ellos y guardar la imagen.
