5 herramientas online a utilizar en diseño web
Por: Wakkos
En Cool Village tenemos siempre unas pestañas abiertas en nuestro Chrome (planteando pasarnos a Firefox4) que nos facilitan el proceso de diseño web: Fuentes, Diagramación, Colores, Efectos CSS y más… SOn servicios gratuitos que se encuentran en internet y a los cuales nos hemos acostumbrado hasta casi no trabajar sin ellos.
Esta herramienta nos facilita elegir colores. Cuando un cliente quiere un determinado color, tenemos que saber con qué colores se puede complementar la web: colores de links, fondos y demás elementos. Andrea como buena Licenciada, se sabe de memoria que colores son complementarios, opuestos, cálidos, etc… pero yo tengo memoria de pez y esta herramienta es genial para decirme que colores combinan y cuales no, antes hacía webs verdes con azul! (tengo que listarla en el post anterior).
Si eres de los que le gusta el Copy&Paste y odias escribir todo ese código, recargar la web, ver como queda, volver a guardar, recargar, etc. aquí tienes un generador de código CSS3, ajustas los valores y el generador te va dando el resultado en el área de previsualización.Te permite crear código CSS3 para:
- Sombras a cajas
- Sombras a texto
- Bordes redondeados
- RGBA (Colores con transparencia)
- @font-face (fuentes predeterminadas)
- Múltiples columnas dentro de una caja
- Box Resize y Box Sizing
- Outline (borde exterior)
- Transiciones
- Transformar (distorsión, cambiar de ángulo, tamaño, etc…)
Fontspring te permite bajar fuentes gratuitas o de pago y te genera el código crossbrowser @font-face para tu web, muchas opciones entre las fuentes y puedes comprar fuentes sin necesidad de una suscripción.
Es quizás la herramienta que más utilizamos: le decimos un color en hexadecimal y nos pone toda la gama de negro a blanco para poder hacer links del mismo color pero más oscuros, o fondos sobre contenedores de la misma gama de colores. Un simple click y ya tienes el código hexadecimal copiado al portapapeles.
Font Testes es un generador de estilos de fuentes en CSS, tienes 3 áreas para editarlas por separados y editar los estilos. Puedes copiar el código listo para pegar en tu elemento CSS. Además tiene el lujo de mostrarte un previsualizador de web safe fonts (algunas no tan ‘safe’) para que elijas que fuentes quieras testear. una herramienta muy completa.
Y de regalo, nuestra herramienta estrella:
¿Alguna vez te ha llegado un cliente con “quiero esa fuente”? o “me lo hizo un chico pero no se que fuente es”? en esos casos suele ser Comic Sans, pero si alguna ves no es Comic Sans aquí tenéis una herramienta con la que con solo subir una imagen de la fuente, te dice (la mayoría de las veces) que fuente es. Eso si, intenta hacer caso a sus consejos para subir la imagen, debe tener buena resolución y que se vean los detalles.
A nosotros estas 5+1 herramientas nos vienen de perla mínimo una vez al día cada una. Y vosotros cuales usais?
