Alternativas a Adobe Creative Cloud para diseñadores web

por Natalia Ventre el 13/05/2013 ・ podés leerlo en 6 minutos ・

Adobe en la conferencia Max del 06/05/2013 anunció el fin de Creative Suite y una nueva familia de aplicaciones y servicios Creative Cloud por suscripción y la muerte de Adobe Fireworks. Fireworks es una aplicación híbrida vectorial-pixelar y la más indicada de Creative Suite para diseño web. Si estás considerando otras opciones, Espresso, Pixelmator y Sketch son alternativas de desarrolladores independientes a Dreamweaver, Photoshop e Illustrator respectivamente, tienen un excelente rendimiento, funcionalidades específicas para diseño web y además cuestan una fracción del precio.

Espresso

Espresso es un IDE (entorno de desarrollo integrado), amigable para diseñadores1, desarrollado por MacRabbit y es una excelente alternativa a Dreamweaver. Si te animás a un cambio más radical, te recomiendo Sublime Text.

captura de pantalla de Espresso

Algunas funciones de Espresso

  • Herramientas de edición de código: CodeSense (autocompletado y resaltado de sintaxis), buscar y reemplazar (inclusive por proyecto), plegado, snippets, Zen coding, navegador de código, etc.
  • Sync y publicación: tiene incorporado un cliente de FTP para publicar rápidamente, sincronizar y navegar el servidor web.
  • Soporte CSS3: además de que obviamente auto-completa las propiedades y valores, tiene un panel para crear o modificar estilos, sin necesidad de acordarse la sintaxis de memoria, que especialmente es útil para los degradés y sombras CSS3.
  • Personalización: se puede extender las funcionalidades instalando sugars y personalizar el aspecto con temas.
  • Vista previa con rayos X: es una función similar a las herramientas para desarrolladores de Chrome o Firebug.

Qué le falta a Espresso

En comparación con Dreamweaver, Espresso no tiene un editor WYSIWYG. Personalmente no lo considero una carencia, pero hay otra app, Flux que sí tiene un editor visual.

Pixelmator

Pixelmator, la Mac app del año 2011, es un completo editor de imágenes y una buena alternativa a Adobe Photoshop para editar imágenes y a partir de la versión Blueberry que incorpora más herramientas vectoriales, es inclusive una alternativa a Adobe Fireworks. Soporta el auto guardado, versiones, modo a pantalla completa y almacenamiento en iCloud. La interface es agradable e intuitiva y la barra de herramientas es totalmente personalizable.

captura de pantalla de Pixelmator

Algunas funciones de Pixelmator

  • Selección: Pixelmator cuenta con la varita mágica, la herramienta recuadro y recuadro oval y el lazo común y poligonal. También se puede entrar al modo máscara rápida y pintar con pinceles. Específicamente para eliminar fondos está la goma de borrar mágica.
  • Pintura: se pueden usar archivos de pinceles de Photoshop o crear pinceles con distinto tamaño, forma, dureza, modos de fusión, etc. Tiene también un pincel para pintar pixeles duros.
  • Retoque fotográfico: las herramientas para retoque son el dedo, el sello de clonar, la curita, la esponja (saturar/desaturar), enfocar, desenfocar, aclarar, oscurecer y corrección de ojos rojos. Con la herramienta curita es bastante fácil no sólo corregir pequeñas imperfecciones, sino también remover elementos no deseados. Pixelmator también cuenta con varias herramientas de corrección de color.
  • Compatibilidad: Pixelmator abre archivos .psd y puede exportar como .psd y todos los formatos de imagen populares y tiene una herramienta trincheta para exportar para web.
  • Efectos especiales: alrededor de 150 filtros.
  • Dibujo: si bien no es una aplicación específica para dibujo vectorial, tiene la pluma y formas básicas (cuadrado, círculo, etc.) y formas personalizadas. Las formas tienen ajustes de forma (relleno, trazo, sombra, sombra interna) similares a los estilos de capa de Photoshop.

Qué le falta a Pixelmator

Las herramientas de selección son buenas, pero extraño al lazo magnético. Photoshop tiene herramientas como los estilos de capa y las capas de ajuste que permiten un flujo de trabajo no destructivo, en Pixelmator podés volver a una versión anterior, podés duplicar capas, etc. pero no hay un método sencillo de re-ajustar una modificación más tarde.

Dónde aprender Pixelmator

  • Sitio oficial: En el sitio web de Pixelmator hay tutoriales disponibles en video y texto con capturas de pantalla creados por el equipo de Pixelmator y por terceros.
  • Abduzeedo: Fabio Sasso de Abduzeedo publica periódicamente tutoriales de Pixelmator, donde hace un uso creativo de los filtros.

Sketch

Sketch, la Mac app del año 2012, es una aplicación de dibujo vectorial desarrollada por Bohemian Coding para diseñadores web, de interfaces e iconos. Es una alternativa a Adobe Illustrator y a Adobe Fireworks. Al igual que Pixelmator, tiene soporte completo para todas las características de OS X

captura de pantalla de Sketch

Algunas funciones de Sketch

  • Vectores definidos: permite dibujar vectores con la herramienta lápiz o a partir de primitivas y ajustarlos a una grilla de pixeles.
  • Estilos: cada capa puede tener hasta 4 rellenos (por ej. un color sólido + un degradé), opacidad, borde, sombra, desenfoque, etc. y muchos de estos estilos son fácilmente re-creables vía CSS e inclusive se pueden copiar al portapapeles como tal. También se pueden crear estilos de texto. En comparación con Photoshop, es mucho más sencillo y rápido crear un fondo de color sólido con ruido.
  • Grillas y guías: Sketch tiene una grilla tradicional (cuadriculado) y una grilla para maquetación (ancho total, número de columnas, espacio entre columnas, ancho de columna, retícula base). Las guías son inteligentes y además miden el espacio entre objetos.
  • Formas: las operaciones booleanas (adición, sustracción, etc.) son totalmente no-destructivas, así que trabajar con formas complejas es más sencillo porque cada parte mantiene su editabilidad.
  • Divisiones: Sketch tiene un campo de trabajo infinito, pero permite exportar divisiones y además la versión 2 incopora las mesas de trabajo. Un archivo puede tener múltiples mesas de trabajo, que tienen un comportamiento similar a las páginas de Fireworks, es decir, cada mesa de trabajo tiene dimensiones definidas. También se puede trabajar en páginas.

Qué le falta a Sketch

  • En comparación con Illustrator, el bézier no tiene tantas opciones.
  • En comparación con Fireworks no tiene símbolos (grupos de elementos instanciables).

Dónde aprender Sketch

Conclusiones

Espresso, Pixelmator y Sketch son todas las herramientas necesarias para diseñar y desarrollar sitios web, carecen de algunas características presentes en Adobe Creative Cloud, porque no son tan multi-propósito, pero si solamente te dedicás al diseño web, no tiene sentido pagar por características que nunca vas a usar.

Pixelmator y Sketch tienen actualizaciones frecuentes, sin costo extra han agregado funcionalidades importantes y el futuro luce prometedor3.


  1. Espresso muestra una pre-visualización de archivos de imágenes, es un detalle, pero la mayoría de los editores de código no lo hacen.

  2. Lectura recomendada: Photoshop Users: How To Switch To Sketch.

  3. Fuente: Cloudines y The future of Sketch