Adobe Project Comet, lo que está por venir…

adobe-project-comet

Se que llego tarde a comentar uno de los últimos movimientos más interesantes que han tenido lugar en fechas cercanas. Me refiero a ese en el que Adobe ha enseñado un poco la patita de lo que está por venir: Project Comet. ¡Dentro vídeo!

Lo he recordado durante estos días que me he peleado más de la cuenta con Sketch (preparando un par de artículos para Tuts+) y no negaré que espero el lanzamiento con cierta emoción.

Aunque siempre que puedo intento contar las bondades que puede ofrecer Photoshop para diseño web, lo cierto es que el día a día sigo acompañado de Fireworks y Sketch mayoritariamente. Pero es por pura cuestión práctica, por el tipo de trabajo que desempeño y por mantener cierta agilidad en el horario laboral, no porque le tenga manía a Photoshop. Y eso que desde Adobe también se empeñan mucho en mostrar lo eficiente que puede ser trabajar con él. Sirva de ejemplo el uso combinado de las composiciones de capas y objetos inteligentes.

Lo cierto es que ya desde las últimas actualizaciones de Photosop se ven ciertos detallitos de calidad pensados específicamente para el profesional de la web: la exportación rápida como JPG/PNG al hacer clic derecho sobre una capa (he gastado la opción de tantas veces que la he usado), la (muy mejorable) presencia de áreas de trabajo, la opción extract que nos permite inspeccionar archivos psd que tengamos alojados en nuestro espacio en Creative Cloud, etc.

extract-creative-cloud

Project Comet parece ser el siguiente paso lógico en la evolución que en Adobe quieren para Photoshop (o que se han visto obligados a ofrecer dada la grandísima cantidad de usuarios que emplean Photoshop para diseño de interfaces y páginas web). Tiene muy buena pinta y deseo realmente que sea un buen producto porque la competencia le está comiendo parte de la tostada. Eso sí, si algo le pido es que funcione de manera ágil y se note esa soltura que Photoshop siempre ha tenido a la hora de abrir y manejar archivos, algo que siempre he echado de menos en Fireworks para considerarlo un producto redondo y que casualmente también es algo que brilla por su ausencia en la versión actual de Photoshop a la hora de trabajar con áreas de trabajo (un rendimiento infumable).

Me vuelvo por donde he venido pero antes, un par de links: Investigando un poco sobre Project Comet llegué hasta The Toast Report, una parada muy recomendable con un puñado de artículos disponibles que permiten ampliar datos e ideas sobre Photoshop para diseño web y lo que está por venir con Project Comet. Que aproveche.

Bola extra: Parte del catálogo de revistas mensuales de Ztory están dedicadas a Photoshop, retoque y fotografía. Y a un euro 😛

Lo que no te puede faltar si usas Photoshop para diseño web

photoshop-diseno-web

Actualización Febrero 2016: Añadido Duplicator

Cuando hablaba de Project Parfait dejaba claro que a día de hoy y para un nutrido grupo de profesionales, Photoshop sigue siendo una herramienta imprescindible a la hora de plantear un diseño web.

Llevo unos cuantos años en el mundillo y por mis “manos” han pasado archivos PSD que daban miedo. Y en algunas ocasiones puedo entender que la falta de organización o la realización de algunas “trampas” sean consecuencia de la falta de tiempo disponible. No obstante no deberíamos dejarnos llevar por el caos porque tampoco es tan costoso marcar una serie de pautas a la hora de preparar contenido web con Photoshop con el que luego terminas recibiendo felicitaciones (literalmente).

Con ese objetivo en mente, he preparado un curso llamado Buenas prácticas y ayudas al diseño web con Photoshop. Es un curso cortito, de nivel básico y muy sencillo de seguir, donde hablo de aspectos básicos que no cuesta nada tener en cuenta y que ayudan mucho en el trabajo de equipo. Creedme que es algo que agradecen los que tienen que coger tus archivos y luego continuar el diseño o extraer assets para su exportación. Aquí hablo en detalle sobre mis cursos y doy acceso a ellos.

Dentro del curso, menciono algunas características como Adobe Generator [en] (joyaza!) y otros “añadidos” imprescindibles si estamos usando Photoshop para diseño web. Me he propuesto ampliar la lista de añadidos y dejaros justo aquí, esos extras que considero MUY recomendables que os pueden ahorrar muchísimo tiempo en determinadas tareas. Y recordad que cuando hablamos de tiempo…hablamos de dinero 🙂

guideguide

GuideGuide [en] es un plugin gratuito para crear sistemas de rejilla / retículas personalizadas. Realmente es de los que no pueden faltar si queréis que equilibrar pesos visuales y acomodar vuestros diseños a una estructura sea coser y cantar. Ojito a Griddify [en] que es una alternativa gratuita también bastante destacable o Gridulator [en] en forma de herramienta online y no de plugin.

renamy

Renamy [en] es un extra para hacer renombrados múltiples sin esfuerzo. Una joyita con una versión pro sin límites [en]. Pensad en combinarlo con Adobe Generator para añadir extensiones y crear imágenes al vuelo para exportar. Ideaca 😀

png-hat

De hecho hablando sobre exportación automática o semi-automatizada hay unas cuantas opciones bien buenas. Por ejemplo PNG Hat [en] es de las que más me gusta y los chicos de Source están muy activos en el desarrollo de este tipo de extras como Avocode [en], iOS Hat [en], Social Kit [en], …

Además de PNG Hat, tenemos Cut&Slice me [en], PNG Express [en], Render.ly [en] o Slicy [en] (sólo para Mac). La idea es que la exportación de gráficos sea un proceso donde podamos ahorrar mucho más tiempo con alguno de estos añadidos.

Personalmente no veo que la comunidad se termine de poner de acuerdo sobre cuál es el mejor método para optimizar el flujo de exportación de archivos. Lo que más he probado ha sido usar directamente las opciones incluídas dentro de Photoshop (Generator) y no funcionan nada mal. Todo dependerá del uso que le demos al programa. Mi consejo es probar alguna de las alternativas.

ditto-photoshop

Con Ditto [en] podemos ir un paso más allá y emplear variables dentro de Photoshop con las que poder, por ejemplo, modificar rápidamente contenidos de capas de texto o colores. Merece la pena echarle un ojo.

flaticon

Ahorrar tiempo buscando material también sería posible con extras como Flaticon [en] y BlendMe.in [en] que nos permiten encontrar iconos fácilmente directamente desde Photoshop. En 40 de Fiebre nos recomiendan instalar los dos. Yo personalmente sólo he recurrido a Flaticon en alguna ocasión. Ya he comentado más de una vez que teniendo 2 o 3 kits premium de iconos, tengo más que suficiente. Véase Icons Solid [en], Webalys [en] o Streamline icons [en] por ejemplo.

glyfo

Glifo [en] para mí concretamente no es un imprescindible aunque puedo entender que a más de uno le venga bien un añadido que permita crear webfonts de forma directa dentro de Photoshop. Tiene pinta de ser bastante cómodo. Yo particularmente he usado un servicio llamado Fontastic [en] hasta ahora y no me ha ido mal.

velositey

Velositey [en] (gratuito) y WebZap [en] (de pago) sirven para que no partamos de cero en la fase de prototipado y sketching inicial ofreciéndonos una serie de elementos y bloques prediseñados. Reconozco que dentro de los “imprescindibles” son de los más prescindibles. Por lo menos bajo mi punto de vista.

ink

Ink [en] es un plugin que ayuda a documentar nuestros contenidos, extrayendo propiedades de tipo de letra, tamaños, color, distancias, etc… ¿Alternativas? Pues tenemos SpecKing [en] que hemos usado en el estudio en más de una ocasión o Specctr [en] que también compré y he terminado usando muy poco la verdad.

psd-cleaner

PSD-Cleaner [en] es una ayuda semiautomatizada para “limpiar” y organizar mejor el contenido de nuestros archivos PSD siguiendo algunas pautas marcadas en el excelente sitio web Photoshopetiquette [en]. Nos informa de capas que estén vacías, con nombres estandarizados y poco descriptivos, etc… Tiene buena pinta sin duda. Yo estas cosas las hago manualmente peeeeero si son un problema para vosotros, dadle una oportunidad 🙂

duplllicator

Duplllicator es la última extensión o añadido que he encontrado para Photoshop y que me ha parecido realmente destacable. Facilita enormemente el trabajo de copiado y duplicación de elementos 🙂

A partir de aquí, cada uno puede seguir personalizando su instalación de Photoshop al gusto. No hay que perder de vista Photoshoplr [en] ni Pspanels [en] porque revisando de vez en cuando ambas webs, estaréis bien nutridos de novedades con las que “supervitaminar” Photoshop. Son dos sitios excelentes y muy específicos sobre este tema. Sólo por estos links, ya merece la pena que hayas llegado hasta aquí 🙂

Os recuerdo que actualmente hay un buen puñado de cursos disponibles hechos por mí en video2brain, una de las formas con las que me gano el pan. En mi página sobre cursos y formación online hablo un poco más sobre video2brain. Así uno puede seguir formándose encajándolo de la mejor forma en su día a día. Yo me he visto ya un buen surtido de cursos también y es la mejor forma de poder compaginar el trabajo y las ganas de seguir aprendiendo. Además se pueden probar gratis 🙂

Project Parfait ¿Adobe enseña la patita del próximo Photoshop?

project-parfait

Bajo el nombre en clave Project Parfait, Adobe se está poniendo las pilas y ya nos está enseñando alguna de las próximas mejoras que tienen toda la pinta de acabar en futuras versiones de Photoshop y/o en ese supuesto sucesor de Adobe Fireworks que puede que aparezca el día menos pensado. Aunque teniendo en cuenta que podemos juguetear con el experimento usando archivos PSD, la cosa deja poco márgen a la imaginación

Estaba cantado que algo tenían que hacer. Sea o no sea la mejor elección, Adobe Photoshop es un entorno que a día de hoy se usa enormemente como herramienta de diseño web. Y no hay discusión ante esto. Son quizás los pequeños detalles los que hasta hace no demasiado conseguían que más de uno se tirase de los pelos al meterle mano a un PSD. Otros sin embargo se las ingeniaban para lanzar añadidos tan útiles como CSS Hat o specKing [en] por citar un par.

Total, que es ahora Adobe la que nos deja ver algunas de las mejoras “obvias” y “necesarias” en un programa de retoque y edición de imágenes (nótese el sarcasmo): medición de distancias entre objetos, extracción y mejor copia de propiedades CSS, etc… En el apartado de preguntas frecuentes indican además que el objetivo es ir mejorándolo junto a una mejor integración con Adobe Generator (que un servidor piensa que es un puntazo).

¿El objetivo? Que la obtención de imágenes y recursos y que en general el flujo de trabajo entre diseño y desarrollo sea cada vez menos “duro”. Siendo así, sólo puede ser algo bueno.

Project Parfait [en]

Bye bye Fireworks?

Pues sí, Adobe ha tenido los cojonazos decidido no continuar con el desarrollo de Adobe Fireworks (aunque me pregunto a qué le llaman desarrollo viendo las últimas versiones).

El anuncio oficial lo hicieron durante el reciente Adobe MAX y aquí está la esquela [en] seguida de casi 1.000 comentarios en los que se puede leer un poquito de todo: desde los que nos apenamos por la decisión, los haters, los que proponen que lo liberen en un movimiento muy similar a la caída de Freehand… El revuelo que suele montarse cuando se dan este tipo de situaciones vaya.

A ver. Adobe como empresa privada que es puede hacer lo que le salga del orto. Es su programa y se lo f***a cuando quiere. Además la legión de usuarios (entre la que me incluyo) que hacíamos uso intensivo de la herramienta lo veíamos venir. Estaba cantado que antes o después caería. Pero no negaré que tenía un mínimo resquicio de esperanza por un resurgimiento a lo ave fénix. Al fin y al cabo la proliferación del diseño multi-dispositivo encajaba a la perfección con un montón de características que Fireworks ponía a nuestra disposición (librería de simbolos, prototipado con interactividades simples y no tan simples [en], jerarquización de contenidos y una estructura brutal mediante el uso de páginas y estados).

Lo que me ha tocado la fibra en realidad es que me vendan la moto del:

[…] overlap in the functionality between Fireworks and both existing and new programs like Photoshop, Illustrator, and Edge Reflow.

No te jode. Si le vamos metiendo funcionalidades a, por ejemplo, Photoshop que YA están en Fireworks pues normal que se solapen funcionalidades, ¿no? También está lo de:

Designing for the screen in 2013 is incredibly different to designing for the screen in 1998. As we considered adding new capabilities to Fireworks, we came to the conclusion that creating new, task-focused tools would better enable us to meet the future needs of web designers and developers.

Que viene a ser “es que después de pensar en añadirle cosas, hemos caído que es mejor hacer herramientas más específicas”. Ah claro. Por eso Photoshop también tiene 3D y vídeo y le siguen añadiendo cositas para el trabajo vectorial “a lo Fireworks”. Va a ser eso, sí.

Para mi Fireworks no es una religión ni la herramienta sagrada ante la que ha de postrarse hasta el Rey León. Es, simplemente, una solución óptima para resolver problemas de manera eficaz en lo que a prototipado y diseño web se refiere. Una solución que permite establecer un workflow bastante decente ya sea en el modo “hombre-orquesta” o en un equipo (diseñadores, maquetadores y desarrolladores). Y no me estoy inventando nada, es que es un hecho. Demostrable.

Sigo sin entender muy bien la decisión y por qué ha sido Fireworks el señalado con el dedo. ¿Qué recursos estaba Adobe realmente dedicando al desarrollo de un programa como Adobe Fireworks? ¿Hay planes de seguir incorporando características de Fireworks en Photoshop y/o Illustrator? De ser así, ¿por qué entonces se ha dado carpetazo al proyecto? ¿Es más sencillo portar características a otros programas?

A mí me pagan por hacer mi trabajo bien. Pero hacerlo bien y además en tiempos razonables. Señores, que mucho jijí y mucho jaja pero aquí estamos hablando de trabajar. Y el tiempo fue de los primeros puntos que traté en el análisis definitivo de Fireworks. ¿No es entonces lógico plantear como errónea la decisión de acabar con una herramienta que agiliza el proceso productivo en planteamientos web frente a otras soluciones que aporta la misma compañía? ¿Por qué he de quedarme con alternativas que a día de hoy aún no están a la altura? Está claro que el camino lo está marcando Sketch [en] pero para plataformas Windows, ¿qué me ofrece Adobe? ¿Que vaya saltando de flor en flor? ¿Que me pelee con Photoshop? Pero si lo fantástico de Adobe Fireworks es que tenía un poquito de todo!

Recientemente he tenido que trabajar con Photoshop en un proyecto web y para mí sigue siendo un hándicap. Tiene detalles excelentes pero el mero hecho de no poder estructurar por páginas… sólo por eso es que ya merece la pena decantarse por FW. ¿Y qué me decís de la selección directa? ¿O el inspector de propiedades?

Ojo, que Adobe está sacando cositas que están muy bien. Lo de Reflow [en] tiene buena pinta, Edge [en] también… Evidentemente es decisión de cada uno si se sube al carro e invierte horas en el aprendizaje de nuevos programas o campos en los que meter la pezuña.

No me quiero extender demasiado porque no hay vuelta atrás. Adobe ha tomado la decisión como se tomó con Freehand en su momento y como tomará las que están por venir. Porque Fireworks no será el último en caer, eso está claro.

No estoy enfadado, no estoy triste. Me adapto bastante bien a los cambios y de hecho siempre me gusta probar cosillas nuevas. Sin embargo sí que me apena el hecho de no poder contar con tanta ilusión como antes, los beneficios de una herramienta como Fireworks en el flujo de trabajo orientado a diseño de interface o web. ¿Le veis mucha salida a montar talleres o workshops de Fireworks? Yo tampoco.

Aún así lo seguiré recomendando. Y creo que le queda cuerda para un par de añitos al menos. Fijaos si no en la de años que Trochut siguió usando Freehand para hacer sus increíbles proyectos xD

En el estudio ni siquiera nos planteamos el cambio a corto plazo. ¿Por qué habría de hacerse? ¿Por arte de magia ahora Fireworks es peor? Pues eso. Este muerto está muy vivo. Pero con un ojo me fijo en Fireworks y con el otro en lo que viene. Pero así he sido siempre y así lo hago saber creando cursos de diferentes temáticas 🙂

Bola extra: Adios, Fireworks por Tecnorama + ¿Quién se ha llevado mi Fireworks? por Antonio Lirio + Now what [en] por Ale Muñoz

Links de recursos para Adobe Fireworks

Aunque hay que reconocer que a Photoshop CS6 le han añadido un par de cosas bastante majas en cuanto a organización y filtrado de capas o uso de estilos, sigo viendo superior Fireworks en capacidades de prototipado, diseño e interacción digital.

Organizando un poco los favoritos de los exploradores instalados, me he dado cuenta que tenía en la recámara un listado bastante majo de vínculos a webs de interés que se centran en este programa que Adobe se empeña en tenerlo (apreciación subjetiva) en segundo plano.

Son 30 links en total en los que hay entrevistas a usuarios, tutoriales, recursos gratuitos, etc…

Recursos para Adobe Fireworks [en]

El nuevo iPad y publicaciones digitales con Adobe DPS

Con la llegada de un nuevo iPad con Retina Display (una resolución de 2048×1536 pero manteniendo la superficie de pantalla igual) aquellos que estéis jugueteando con plataformas de publicación digital quizá tengáis que tener en cuenta algunos nuevos puntos si queréis crear contenido que se adapte bien a este nuevo dispositivo.

Usar metodologías de trabajo basadas directamente en HTML (léase Baker framework [en] por ejemplo) es algo que en teoría nos permite saltarnos algunos pasos extra si usamos plataformas como Adobe DPS, pero me centraré en esta última por ser la elección que escogimos nosotros (me encantaría saber si tenéis experiencia con otros sistemas y qué tal van).

Y es que ya os he hablado alguna vez de Secrets & Happiness of Digital Publishing [en] pues su autor suele contar truquitos y experiencias (a falta de que servidor saque un hueco para hablar sobre qué tal fue nuestra primera vez :P). Os recomiendo que si estáis metidos en el asunto y se os plantee la creación de contenido para el nuevo iPad con estas herramientas, os leáis New iPad, the big questions (and answers) [en]. Lo deja todo bien clarito.

Los foros oficiales de Adobe DPS [en] son un punto de encuentro super recomendable para buscar este tipo de información.

Por último sabed que también hay un grupo de usuarios Digital Publishing en español bastante majo donde además hay un excelente artículo: Guía para diseñar Folios para el nuevo iPad.

Ale, lectura para rato.

Fireworks Wishlist y Fireworks Wireframing Kit

Fireworks wireframe kit

El 2011 parece haber sido un buen año para la comunidad de usuarios de Fireworks. Poco a poco vamos haciendo más ruido en la red y grandes webs se hacen eco de las virtudes del programa. Yo sigo encantado con el programa a pesar de algunos fallos que todavía mantiene. Además la próxima suite está a la vuelta de la esquina y hasta ahí puedo llegar.

Lo último que ha visto la luz son dos proyectos de Hanna Milan para que por un lado podamos escribir nuestras sugerencias para mejorar el programa en forma de “cartas de los deseos” y por el otro, podamos descargarnos algunos freebies que nos ayuden a prototipar en Fireworks.

Evidentemente el tema de los deseos es algo más complejo que escribirlos ahí y esperar. Os recomiendo una vez más que estéis atentos al blog de Sarthak [en] que para eso es parte del equipo de Adobe encargado del programa 🙂

Fireworks Wireframing Kit [en] + Fireworks Wishlist [en]

Recursos para Fireworks

Hasta el día de hoy creo que no he mencionado ni dos veces la palabra Fireworks en Criterion. No por nada en especial, simplemente es un programa que hasta el día de hoy no ha pasado por ninguno de los Pc’s que he tenido. Razones? Tampoco ninguna en especial. Con los programas que uso (Photoshop, Freehand, Illustrator, etc…) creo que tenía suficiente.

Es por eso que finalmente he terminado creando una sección específica dedicada a este programa de Adobe. Y recordad que hay un par de artículos que creé para explicaros por qué deberíais usar Fireworks.

Os recuerdo que como formador especializado he creado para vosotros un curso completo de Fireworks con el que aprenderéis el manejo del programa y que está disponible entre todos los cursos de video2brain. También ofrezco la posibilidad de dar cursos y seminarios online sobre el programa. Si estás interesado amplía información.

Recursos Fireworks + cursos formativos de diseño

Adobe DPS Single Edition

Un post rapidito para poneros al día sobre un asunto que me interesa bastante, Adobe DPS.

Si estáis al tanto de este tema de las publicaciones digitales, sabréis que la solución de Adobe ofrece un muy buen sistema con una curva de aprendizaje realmente notable (para bien) pero con un lastre también notable: su coste. Publicar con Adobe DPS implicaba un desembolso que no lo hace apetecible en los casos de publicaciones individuales (supongamos que queremos sacar un sólo libro).

Si bien hay otras alternativas como Aquafadas [en] o PadMan [en], servidor elige de momento la oferta de Adobe después de haber hecho bastantes pruebas.

La noticia es que Adobe ha anunciado por fin una Single Edition que nos permitirá no tener que rascarnos tanto el bolsillo en caso de querer emplear sus herramientas para crear publicaciones digitales. La nota oficial [en] lo deja bien clarito todo. Por mi parte sólo puedo estar contento 🙂

Adobe Edge, el asistente de Adobe para hacer animaciones HTML5 y CSS3

Adobe EDGE

Hace no mucho Adobe lanzaba Wallaby [en] un mejunje especial en el que por un lado metías contenido en formato flash y por el otro te lo servía transformado en html5. Evidentemente hay que ser muy creyente para esperar que de esta utilidad saliese algo decente, más aún cuando se trata de algo totalmente experimental. Pero bueno, al menos ahí queda el detalle.

Ahora por fin ya está disponible una versión (preliminar) de Adobe EDGE, su particular programa para la creación y edición de formato animado empleando para ello características HTML5, CSS3 y javascript.

Su interfaz os recordará a la que Adobe emplea en otros programas en los que la línea de tiempo juega un papel esencial: Premiere o After Effects por ejemplo. De este modo se intenta facilitar al usuario la adaptabilidad a un nuevo programa. La realidad es que es bien sencillo ponerse a trabajar con el programa y ofrecen ejemplos con los que trastear. Está claro que si ya existían aplicaciones de este tipo (véase Sencha o Ceaser) Adobe no podía quedarse atrás en este aspecto.

Y bueno, con la llegada de Adobe EDGE ha vuelto a salir el tema de siempre: que si Flash se muere, que si Adobe se ha bajado los pantalones y bla bla bla… Hay muchos artículos y muchos tests sobre el asunto y no le veo interés sacarlos nuevamente. Pero Flash sigue teniendo cuerda para rato y estoy cansado de repetirlo. Está claro que no se puede hacer cambiar de opinión a gente que NO sabe de lo que habla. Flash NO son banners cutres. Flash NO son intros cutres. Flash NO es youtube…

Adobe EDGE [en]