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, 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 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 , 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 🙂

  • RoninRojo

    ¿Y en el estudio que usáis ahora? Fireworks? Photoshop? Sketch?
    Yo sigo usando Fireworks, no encuentro nada igual en Windows.

    Saludos!

    • Skeku

      Pero mira quién se ha dejado caer por aquí! Todo un honor!

      Al tema: Nosotros seguimos igual. Fireworks sigue siendo la base porque sigue siendo lo más cómodo para la manera que tenemos de trabajar donde actualmente hay personal que se dedica a la maquetación y yo sólo me centro en la fase de diseño. Evidentemente Photoshop juega un papel importante a la hora del retoque fotográfico o material visual que exija más chicha que la que ofrece FW.

      Fireworks puedo proveer rápidamente de material a diferentes entornos que permiten su integración de forma rápida como Flash por ejemplo. Aunque no lo creas aún se hacen muchas cosas en Flash y la integración FW/Flash es muy buena en la versión CS6 🙂

      Eso sí, si todos usáramos Mac es probable que ya hubiésemos probado a cambiar a Sketch sólo por la facilidad que tiene de exportar elementos.

      Photoshop me ha sorprendido los últimos meses por añadidos como los que comento aquí. Sin duda creo que donde más se puede optimizar el flujo de trabajo es a la hora de exportar archivos y generar “assets”. Pero dado que yo no maqueto actualmente, quizá a la hora de generar los archivos, no esté pensando en la misma estructura que el maquetador y eso es tiempo perdido.

      Ahora mismo creo que Fireworks se ha quedado por detrás en ese aspecto. Linus Lim lo intenta con Project Phoenix (http://quick.as/rbotdwz) pero tenemos los días contados si esperamos que FW mejore.

      Le sigo la pista a cosillas como Macaw (muy verde dicen) y hay rumores que dicen que Adobe tiene algo “secreto” pero no sé nada más.

      Le has llegado a hincar el diente a Sketch? No está nada mal.

  • Está muy bien, pero yo también sigo aguantando con Fireworks hasta que adobe se digne a aportar una alternativa viable y a la par o mejor en cuanto a fluidez y comodidad de trabajo.

    Es que me niego a usar photoshop. Ya no solo por la lentitud a la hora de hacer cualquier cosa que en FW es un click y arrastrar, si no, por lo pesado y poco versátil de los archivos .ps para el mundillo web, donde constantemente debes estar enviando archivos compartiéndolos, enseñándolos, etc…
    Una página en FW completita te ocupa entre pocos Kb y pocos megas… una puñetera página en photoshop te puede superar tranquilamente los 50 / 100 mb.

    Es que veo que diseñar webs en photoshop es como querer hacer retoque fotográfico en Fireworks… Fireworks tiene muchas herramientas para retoque fotográfico (tampón de clonar, recorte, filtros, etc…) pero nunca se me ocurriría usarlo para algo serio. Por eso uso FW para diseño web y photoshop para retocar las fotos que voy a meter en FW.

    No se, es un tema que nunca llegaré a comprender, pero bueno, solamente espero que Adobe se ponga las pilas… por que he probado alternativas (Macaw, Sketch y alguno más de estos online) y no, no ofrecen la potencia de fireworks, están aún muy verdes…

    • Skeku

      @syntectyc No sabéis lo que me alegra que sigáis pululando por aquí :_____)

      Yo tengo que decir que con Sketch he hecho webs completas de complejidad intermedia y pinta MUY bien. Lo único es que el motor de pintado petardea un poco y sí que es cierto que he leído comentarios que afirman que con demasiadas páginas, se vuelve inestable…lo que lo hace más parecido a Fireworks xD

      Photoshop tiene una ventaja interesante y es la estabilidad. Y usándolo en un sistema que tenga un disco duro SSD se convierte todo en un mundo lleno de arco iris y felicidad.

      Que Fireworks se cierre o se cuelgue es algo bastante más habitual aunque intentes ser organizado. En el momento en que metas unos cuantos bitmaps y máscaras, empieza a arrastrarse cosa mala. Con SSD, sin SSD, con R2D2 y C3PO. Y ojito si te da por andar jugando a activar y desactivar fuentes que en esa situación la probabilidad de pete aumenta enormemente.

      Aún así sigo siendo algo masoca y como ya le decía a Ronin, Fireworks sigue siendo imprescindible por aquí. Y no me veo diseñando webs en Photoshop. Pero tampoco me veo haciéndolo en Illustrator y hay gente muy buena por ahí que lo usa.

      En el fondo creo que lo más importante a la hora de escoger un programa u otro es la versatilidad y la capacidad de generar “archivos amistosos” para el trabajo en equipo 🙂

      • Syntetyc

        Criterion nunca ha desaparecido de mis RSS 😉

        Y en cuanto a lo comentado… no hace mucho estuve planteándome el pasarme seriamente a illustrator (pese a que tampoco me siento cómodo con él, pero sigue siendo más rápido que PS). Pero visto que últimamente hay muchos rumores de que Adobe tiene algo entre manos, decidí aguantar con FW un poco más y pasar directamente a lo que sea que saquen… espero que no se alargue mucho más la espera v_v

        Y bueno, a mi FW no me da tantos problemas de inestabilidad, en versiones anteriores sí, pero con CS6, que es el que uso, no tengo queja en este sentido.

  • RoninRojo

    Hombre señor, mientras este chiringuito siga en pie (y bien bonito que lo tienes últimamente) tendrás a “los de siempre” por aquí rondando 😉

    Ya que lo mencionas, yo lo he intentado con Illustrator siguiendo unos cuantos enlaces bien majos, donde te lo venden muy bien, pero en la práctica… uff…

    http://www.designsprint.net/
    http://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/
    http://webalys.ghost.io/dynamic-buttons-with-illustrator/

    Macaw lo tengo fichado, veo que ha salido la trial, asi que hoy mismo le echo un ojo 😛

    Me guardo estos recursos bien majos que has puesto aquí de Photoshop, pero sinceramente, no me veo volviendo a diseñar webs con él después de probar las bondades de Fireworks, pete lo que pete

    ¡Interesante tema! a ver como evoluciona la cosa, y seguiremos comentándolo por aquí, ¿o lo dudas? 😉

    • Buenos días! excelentes enlaces, Gracias!

      T

      😉

  • Buenos días! qué grandes aportes habéis presentado en este site. Muchas gracias de antemano, ya me he descargado un “pack” de extensiones de Ps que seguramente harán mis delicias, aunque alguno ya lo tenía instalado.

    He olvidado presentarme, disculpad, me llamo Tirso y soy disañador gráfico y web.

    Sobre el debate que se ha abierto sobre qué sofwtare para la creación de Mockups, yo hace tiempo usaba fireworks, también Ps, pero ya llevo tiempo con Illustrator, ahora me toca probar Sketch, ya lo tengo descargado y a ver qué tal.

    Sobre Illustrator, bueno sólo decir que estoy encantado, ya que cumple una función no sólo de diseño sino de maquetación. Sus puntos fuertes? la flexibilidad a la hora de crear tantos artboards sobre la marcha como deseeemos y del tamaño que nos convenga…esto con la irrupción del responsive design y el mobile first es sin duda una gran ventaja. Además la opción “object – path – splite into grid” nos abre un mundo de grandes posibilidades a la hora de crear retículas y mockups.

    Bueno, lo dicho, os invito a probar Illustrator, muchos seguro ya lo usáis habitualmente, otros no, otros a veces … claro que lo mejor es combinar Illustrator con Ps, pero yo al menos el trabajo final lo presento y lo monto en Illustrator.

    Un saludo a tod@s!

    T

    • Skeku

      Realmente el problema no es el programa si no el usuario. Un ejemplo:

      – Si Illustrator lo usas para una web y empleas unidades en cm para medir el padding está claro que el problema no es del programa sino del usuario. Lo mismo si está en un perfil de color CMYK. En Photoshop pasa exactamente lo mismo.

      FW y por extensión Sketch son programas orientados de manera casi exclusiva para los diseñadores digitales, los que hacemos cositas para verse en pantallas. Y ahí el margen de error es mucho menor ya que el programa no te ofrece como predeterminadas medidas en cm, tipografías en puntos o modos de color que no vas a necesitar. Para un “novato” darle un entorno más cerrado es evitarle errores. Cuando coja soltura, que use lo que quiera, pero que aprenda qué se ha de hacer y qué no.

      De todas formas casi paso por alto las capacidades multipágina que ofrecen TODOS menos Photoshop. Y eso es muy, pero que MUY valioso.

      Pero la de veces que he visto meteduras de pata por usar el programa mal y que luego se han tenido que arreglar con la consecuente inversión en tiempo (y por tanto dinero) no han sido pocas precisamente. Y eso viniendo de gente que supuestamente ya tiene sus tablas.

  • me lo pido!!!

  • Skeku

    Ojo que ahora con la nueva versión que han sacado de la Creative Cloud, se han cargado las extensiones de terceros hechas tal y como se venían desarrollando hasta ahora.

    Esperemos que todos los mencionados hagan un update!

  • Skeku

    Bueno, me acabo de encontrar “Resonator”, no tengo muy clara su utilidad y aún hay que esperar pero dejo el linkito por si acaso:

    http://resonator.cc/

  • Gracias por la guía y los consejos para aplicar este programa al diseño web, en verdad es uno de mis favoritos aunque al principio me resultó bastante complejo. Pero ahora, después de varios años dedicados al diseño web y servicios web, ya es coser y cantar.

  • Pingback: Aprendiendo a usar Photoshop correctamente - Artysmedia()