7 Herramientas gráficas para Diseño Web

---

Cuando se trata de diseño web, así como para otras áreas del diseño, el creativo recurre a diversas herramientas que facilitan, magnifican, ahorran tiempo y esfuerzo, además que permiten que se puedan llevar a cabo diseños limitados sólo por la imaginación.

El extraordinario desarrollo de lenguajes de programación y Apps en línea ha hecho posible fantásticas herramientas de diseño que nos motivan a llevar nuestras habilidades de diseño más allá de los límites y nos abren nuevas posibilidades que hasta hace poco no considerábamos siquiera.

Es así que compartimos en este artículo 6 herramientas que nos han resultado muy útiles a la hora de realizar nuestros diseños de sitios web.

Estas herramientas tienen la plusvalía de motivar la exploración y la curiosidad en el diseño, empujando tus límites y llevándote a mejorar tus cualidades de diseño, aunque creas que no las posees. Clic para tuitear

Canva

Canva es la plataforma de diseño gráfico online de mayor crecimiento en los últimos años.

Ha venido a convertirse en el “Photoshop del hombre pobre”, aunque esta definición resulte engañosa.

Y digo «engañosa» porque puede parecer que Canva es un pobre sustituto o un «wanna be» de Photoshop. Nada más lejos de la verdad, ya que en realidad la audiencia de ambas herramientas es distinta.

El excelente Photoshop con décadas de desarrollo se ha convertido en una herramienta tan robusta y completa como compleja, cuya curva de aprendizaje es larga. No es una herramienta intuitiva. menos aún para quienes no sean diseñadores profesionales.

Con Canva, incluso en su versión libre, la meta y audiencia son los usuarios que necesitan diseñar pero realmente no son diseñadores. Canva tiene una cantidad de herramientas intuitivas que permiten realizar increíbles diseños incluso a aquellos sin conocimientos previos de diseño.

La versión pro extiende las posibilidades, dando acceso, entre otras cosas, a:

• Repositorios con millones de imágenes premium (Canva adquirió Pixabay)
• Removedor de fondos
• Carga y uso de una enorme variedad de fuentes tipográficas
• Más espacio de almacenamiento de tus diseños (100 Gb frente a 1 Gb de la versión libre)
• Posibilidad de cambiar tamaños de un diseño para adaptarlo a determinada red social o hacerlo de más resolución
• Permitir el desarrollo de tu “kit de marca”, con logo, paleta de colores y tipografía
• Y muchas otras cosas útiles.

Con una interfaz amigable, con Canva puedes hacer desde los diseños de las imágenes destacadas para tu blog, infografías, presentaciones, hasta mockups (maquetas) de diseños webs y gráficos, maquetación de libros, diseños para publicación en redes sociales y todo lo que necesites y que involucre diseño.

Nosotros la consideramos Canva una herramienta esencial para nuestros diseños gráficos para webs, así como maquetación y diseño en redes sociales.

EDIT.org

Otra excelente alternativa a Photoshop y que hemos descubierto hace poco es EDIT.org. Al igual que Canva, Edit está dirigido a emprendedores, freelancers y dueños de negocios que realmente no son diseñadores y no tienen el tiempo o las ganas para someterse a la curva de aprendizaje para serlo.

Con EDIT.org muy rápidamente puedes crear tarjetas de vistas, banners, flyiers, logotios, diseño gráfico para redes sociales, portadas para libros, curricula, infografías y un lartgo etcétera con su intuitiva interfaz.

Con la versión gratuita ya tienes a tu disposición robustas herramientas que te permitirán realizar diseños de cualquier cosa para tu empresa. Sin embargo, te recomendamos suscribirte a la versión Pro, actualmente por sólo 59 US$ al año y con la cual podrás obtener:

Con EDIT.org tendrás a tu disposición miles de plantillas que puedes editar y descargar en el fommato y calidad que desees, según tus necesidades. De igual manera, EDIT.org cuenta con una enorme biblioteca de imágenes gratuitas y premium de alta calidad.

CSS Box Shadow Generator

CSS Box Shadow Generator es una herramienta que permite generar desde una interfaz visual, elementos con apariencia tridimensional a través de la gestión de sombras que puedes insertar fácilmente en el diseño de tu web. Puedes controlar la extensión, difuminado, color de esta sombra.

Una vez que estés satisfecho con el resultado que ves en la interfaz, sencillamente copia el código CSS y pégalo en la sección de “CSS adicional” de tu WordPress, asignándole la «clase» del elemento correspondiente al que deseas aplicar la sombra.

Permite también crear también “gradientes”, que es una transición en degradé de un color a otro o de una variación a otra del mismo color. Con esta herramienta, puedes controlar la dirección, colores involucrados, linealidad o circunferencia del gradiente, etc.

Finalmente, con “Border-radius” puedes crear cuadros con aristas redondeadas y crear bordes con el color, diseño y ancho deseado.

Hay otras características interesantes como el generador de texturas, con el cual puedes dar a tu diseño una apariencia de “arenosa” o de ruido blanco.

Esta es una herramienta que usamos principalmente para generar sombras para efectos 3D, pero que debe ser explorada en toda sus posibilidades.

Generador Neumórfico

Siendo que el Neumorfismo es una tendencia en boga para el 2021, este Generador Neumórfico te permitirá hacer con facilidad increíbles diseños con una fantasmagórica sensación de tridimensionalidad que se produce con el uso sabio de las “dobles sombras” que permite el CSS3 y los colores de fondo.

El diseño neumórfico parte del principio de crear una ilusión en la que los elementos parecen surgir desde debajo del background.

Sencillamente, determina, el tamaño, radio (redondeado de aristas) y la distancia, intensidad y difuminado (blur) de las sombras y listo. También puedes determinar si deseas un efecto cóncavo, convexo o plano para el elemento que estás diseñando.

Una vez conforme con tu diseño, sólo tienes que copiar el código CSS y llevarlo a  “CSS adicional” de tu WordPress, indicándole la “clase” (elemento) que deseas afectar con esta característica.

Esta herramienta fue usada en el diseño de nuestra web Presencia Digital, cuya historia puedes leer aquí.

Haikei

Haikei es un generador de diseños SVG que nos permite crear elementos de diseños como fondos a través de la tecnología SVG: Scalable Vector Graphics o gráficos vectoriales escalables.

La gran ventaja de este formato es que es “dimensionable”, es decir, se adapta al tamaño de la pantalla donde se muestra sin perder calidad de imagen y pesa bastante menos que otros formatos de imagen (PNG, JPNG).

Este formato nos permite crear diseños abstractos y coloridos, pero cuyo código resulta especialmente difícil. Es aquí donde viene la utilidad de este generador de imágenes SVG de Haikei.

Desde su interfaz, escogemos el diseño general (barra lateral izquiera) y los ajustes que deseemos para refinarlo (barra lateral derecha).

Una vez satisfechos, descargamos el archivo en el botón inferior que dice “SVG”. Te lo descargará como un archivo .svg. Este tipo de archivo se abre con varios programas como Illustrator, CorelDraw, Inkscape o Google Drive, pero a nosotros lo que nos interesa es el código, por lo que yo lo abro con Visual Studio Code, un excelente editor de código gratuito.

 El código es una «cosa» que luce así:

<svg id="visual" viewBox="0 0 2500 150" width="2500" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 34L52.2 37C104.3 40 208.7 46 312.8 55C417 64 521 76 625.2 73.3C729.3 70.7 833.7 53.3 937.8 43C1042 32.7 1146 29.3 1250.2 38.8C1354.3 48.3 1458.7 70.7 1562.8 80.8C1667 91 1771 89 1875.2 80.7C1979.3 72.3 2083.7 57.7 2187.8 55.2C2292 52.7 2396 62.3 2448 67.2L2500 72L2500 0L2448 0C2396 0 2292 0 2187.8 0C2083.7 0 1979.3 0 1875.2 0C1771 0 1667 0 1562.8 0C1458.7 0 1354.3 0 1250.2 0C1146 0 1042 0 937.8 0C833.7 0 729.3 0 625.2 0C521 0 417 0 312.8 0C208.7 0 104.3 0 52.2 0L0 0Z" fill="#2defc6" stroke-linecap="round" stroke-linejoin="miter"></path></svg>

¿Entiendes ahora por qué es tan útil un generador de código para SVG?

Lo que haremos ahora es copiar este código y pegarlo en un bloque HTML en nuestro sitio web (si usas el editor Gutenberg). Si usas el editor clásico de WordPress, ve a la pestaña que dice «texto».

Y, al ver el resultado, vemos que ese código se traduce en:

Icons8

Aunque Icons8 tiene varias funciones, como eliminación de fondos en imágenes (no muy eficaz) y otras, esta herramienta la usamos exclusivamente para descargar íconos para nuestros diseños.

Icons8 tiene una biblioteca de 170.000 íconos y vectores gratuitos, clasificados en 33 “estilos”.

Ten cuidado a la hora de realizar una web de escoger para todo el sitio íconos del mismo “estilo”, para mantener la uniformidad.

Icons8 te permite escoger el tamaño de tu ícono o vector y su color y descargarlo como un archivo PNG de fondo transparente.

Eye Dropper

Eye Dropper es una extensión de código abierto para Google Chrome y Chromium que te permite determinar qué colores se están usando en una web, así como guardar un historial de color personal.

¿No te has preguntado qué color o colores está usando esa asombrosa web? Con Eye Dropper simplemente señala con el cursor el color, y descubrirás exactamente cuál es en varios códigos (hex, rgb, hsl).

Es una de las herramientas que más usamos en nuestro arsenal de diseño web.

Palabras finales

Estas son algunas de las herramientas online que más usamos a la hora de realizar nuestros diseños webs.

Todas ellas son gratuitas (aunque algunas extienden sus funcionalidades con versiones pro) y te ahorrarán horas de trabajo.

Además, impulsarán tu creatividad llevándola más allá de los límites que creías posible, especialmente si no eres diseñador profesional o si estás aprendiendo diseño por tu cuenta.

Cada una de estas herramientas presentan más posibilidades de las que hemos enumerado en este artículo. por eso te sugerimos que las explores y veas todo lo que pueden hacer por tus diseños y, en última instancia, por tu empresa.