En 2008, cuando se publicó este artículo por primera vez, aprender diseño era completamente distinto. No había un YouTube lleno de tutoriales en 4K, no había Canva, y el término “prompt engineering” habría sonado a ciencia ficción. Pero había blogs como Noupe, Nettuts+ o Abduzeedo, y los diseñadores principiantes pasaban noches recreando efectos de luz y texturas paso a paso.
La lista original “13 Most Advanced Tutorials” es hoy una cápsula del tiempo. Merece la pena revisitarla no por las técnicas (que están desfasadas), sino para ver cuánto se ha avanzado. El texto que sigue se basa en fechas de Adobe, Figma, el Computer History Museum y publicaciones de la época, y cada fecha puede comprobarse en el enlace indicado.
Lista de 13 tutoriales de Photoshop de Noupe en 2008
El equipo editorial de Noupe publicó la recopilación el 26 de noviembre de 2008 con el título “Pushing Photoshop To The Limit: 13 Most Advanced Tutorials”. Al releer la página se nota algo fácil de olvidar después de tantos años: la lista solo trataba en parte de Photoshop. Tres de los trece tutoriales enseñaban a convertir un archivo PSD en un sitio web funcional, y varios combinaban Photoshop con Flash, After Effects o Cinema 4D.
| N.º | Tutorial | Sitio |
|---|---|---|
| 1 | Creepy Ghost in Photoshop & Cinema 4D | Abduzeedo |
| 2 | How to Create Explosive Typographic Effects in Cinema 4D | GoMediaZine |
| 3 | Parallax Gallery | Web Designer Wall |
| 4 | Importing Photoshop Files Into Flash | Layers Magazine |
| 5 | Animated Zoom Blur in Flash CS3 | Layers Magazine |
| 6 | Create a Dream Design with 3D Typography | GoMediaZine |
| 7 | Trendy Geometric Lines Design Tutorial | Spoon Graphics |
| 8 | Pseudo-Sugar Skull: From Start to Finish | GoMediaZine |
| 9 | Ink Bleeding Effect in After Effects (Like Gnarls) | GoMediaZine |
| 10 | Animate the Splash Using Photoshop and After Effects | Layers Magazine |
| 11 | How to Convert a PSD to XHTML | Nettuts+ |
| 12 | Converting a Photoshop Mockup | CSS-Tricks |
| 13 | Build a Sleek Portfolio Site from Scratch | Nettuts+ |
Los títulos se mantienen en el original, porque así aparecen en el archivo. La composición describe bien el año 2008. Photoshop era el centro del trabajo, pero el resultado rara vez terminaba en un archivo de imagen. Pasaba a Flash, a vídeo o a HTML y CSS.
Qué efectos estaban de moda en los tutoriales de Photoshop en 2008
- Esqueuomorfismo: todo tenía que parecer real. La madera necesitaba vetas, el metal tenía que brillar, y los botones llevaban tantas sombras (Drop Shadow) y resplandores (Inner Glow) que parecían gominolas.
- Efectos de luz y tipografía 3D: trazos de luz abstractos, neones, fondos “cósmicos”, letras llevadas a la tercera dimensión. Los tutoriales enseñaban a exprimir los Pinceles y los Modos de fusión al límite, y el volumen de las letras se construía a menudo en Cinema 4D y se montaba en Photoshop.
- Manipulación fotográfica: unir varias fotografías en una sola escena. En aquella época eso significaba horas de máscaras con la herramienta Pluma. Hoy parte de ese trabajo lo hace la selección basada en IA.
De dónde salió Photoshop y quién lo escribió
La historia está mejor documentada por el Computer History Museum, que en 2013 publicó el código fuente de Photoshop 1.0.1. Según el museo, en 1987 Thomas Knoll, doctorando en visión por computador en la University of Michigan, escribió un programa para mostrar y modificar imágenes digitales. Su hermano, John Knoll, que trabajaba en Industrial Light & Magic, encontró útil la herramienta para editar fotografías. El programa se llamaba entonces Display.
En el verano de 1988 los hermanos concluyeron que podía ser un producto comercial y lo rebautizaron como Photoshop. Unas 200 copias de la versión 0.87 se distribuyeron con los escáneres de Barneyscan con el nombre Barneyscan XP. En abril de 1989 Adobe cerró la licencia para distribuir una versión mejorada, y la versión 1.0 para Apple Macintosh llegó a las tiendas el 19 de febrero de 1990, como recuerda Adobe en su artículo sobre los 25 años del programa.
Los detalles técnicos de ese código muestran la escala de un proyecto de una sola persona. La versión 1.0.1 tiene 179 archivos y unas 128.000 líneas, cerca del 75 por ciento en Pascal y cerca del 15 por ciento en ensamblador 68000. Thomas Knoll dijo al museo: “En la versión 1 yo era el único ingeniero, y en la versión 2 éramos dos” (Thomas Knoll, Computer History Museum, traducción propia). En una entrevista con Adobe en 2015 añadió que fue él quien inventó el cuadro de diálogo Niveles (Levels) como la primera gran función de ajuste, y que las primeras versiones se dirigían sobre todo al mercado editorial y a los artistas gráficos, no a los fotógrafos (Adobe Blog).
Cuándo llegaron las capas a Photoshop
Las capas entraron en el programa con la versión 3.0, en 1994. El Computer History Museum las describe como la posibilidad de dividir una imagen en varias capas. Para los tutoriales de la lista de Noupe este cambio era la base de todo: cada paso del tipo “duplica la capa, cambia el modo a Trama, baja la opacidad” presupone que la imagen está hecha de láminas independientes. Antes de la versión 3.0 un tutorial así habría tenido que escribirse de forma totalmente distinta, porque cada cambio sobrescribía los píxeles al instante.
Por la misma razón, las capas son hoy el núcleo de las nuevas funciones de IA. Adobe describe los resultados del Relleno generativo como contenido creado en capas generativas propias, que pueden revertirse sin destruir el original. El modelo de trabajo de 1994 ha sobrevivido así a todos los cambios de interfaz que vinieron después.
De Photoshop 7 a Creative Suite y Creative Cloud
La numeración de versiones terminó con Photoshop 7. En un comunicado del 27 de octubre de 2003, reproducido por Imaging Resource, Adobe anunció el envío de Creative Suite, que reunía nuevas versiones de Photoshop, Illustrator, InDesign y GoLive, y presentó Photoshop CS como sucesor de Photoshop 7. A partir de entonces las versiones se llamaron CS, CS2 y siguientes, hasta CS6.
El siguiente cambio afectó al modelo de venta. El 6 de mayo de 2013, en la conferencia MAX, Adobe anunció que no tenía planes de lanzar nuevas versiones de los productos de Creative Suite y que su software creativo llegaría a través de Creative Cloud. La empresa prometió mantener el soporte de CS6. Según MacTrast, que informó del anuncio el mismo día, el nuevo Creative Cloud, disponible solo por suscripción, se desplegaría en junio de 2013.
Para quien aprendía con tutoriales, esto tuvo un efecto práctico. Un tutorial de 2008 presuponía una versión concreta (Flash CS3 aparece en el propio título del n.º 5). Tras el paso a la suscripción todos los usuarios recibían actualizaciones al mismo ritmo, así que los tutoriales dejaron de indicar el número de versión como requisito y pasaron a referirse al programa en su estado actual.
Dónde se aprendía Photoshop antes de YouTube
La formación de pago en software gráfico existía mucho antes que los blogs. Lynda.com fue lanzada en 1995 por Lynda Weinman y Bruce Heavin. El 9 de abril de 2015 LinkedIn anunció la compra del servicio por 1.500 millones de dólares en efectivo y acciones, como informó PCWorld. Los cursos en vídeo con un programa estructurado eran, por tanto, un mercado aparte, junto a los artículos gratuitos de los blogs.
YouTube arrancó en 2005, y su primer vídeo, “Me at the zoo”, se subió el 23 de abril de 2005. En 2008 el vídeo ya existía, pero el tutorial en texto con capturas de pantalla seguía dominando recopilaciones como la lista de Noupe. Las trece entradas son artículos de blogs.
El ejemplo más conocido de esta ola es la red Tuts+ de Envato. Según la serie “10 Years of Envato Tuts+”, el primer tutorial se publicó el 14 de septiembre de 2007, escrito por el cofundador y CEO de Envato, Collis Ta’eed. De ahí creció una red de blogs temáticos, entre ellos Nettuts+, de donde proceden dos entradas de la lista.
Qué pasó con los tutoriales de Flash
Tres entradas de la lista de Noupe (n.º 4, 5 y 10) trataban de Flash o del paso de archivos de Photoshop a una animación. Hoy ese camino no puede repetirse en el navegador. Adobe anunció en julio de 2017 el fin de Flash Player, terminó el soporte el 31 de diciembre de 2020 y, desde el 12 de enero de 2021, bloquea la ejecución de contenido Flash en el reproductor y recomienda desinstalarlo de inmediato (Adobe, Flash Player EOL).
Es un buen ejemplo de por qué los tutoriales antiguos deben leerse de forma selectiva. La parte sobre preparar los gráficos en Photoshop (capas, máscaras, exportación) sigue teniendo sentido. La parte sobre colocar el efecto en una página describe una plataforma que ya no existe. Las animaciones que en 2008 se hacían en Flash se construyen hoy con CSS, SVG o JavaScript.
Cómo era la conversión de PSD a HTML en 2008
Las tres últimas entradas de la lista de Noupe describen un proceso que en 2008 era el estándar en el trabajo con sitios web. El diseñador dibujaba la página entera en Photoshop como un único archivo PSD con capas. El desarrollador lo cortaba, exportaba fondos y botones como imágenes separadas y después reconstruía la estructura en XHTML y CSS. Los tutoriales de Nettuts+ y CSS-Tricks enseñaban exactamente esta secuencia, de la maqueta al código, paso a paso.
Este modelo tenía un problema de origen. El archivo PSD era la imagen de un único estado de la página, en un único ancho. No decía nada sobre el comportamiento en el móvil, sobre el estado hover ni sobre lo que ocurre cuando el texto se alarga. Pasar el diseño a código significaba medir espaciados y colores a mano en Photoshop. Fue precisamente esta etapa la que más tarde sustituyeron las herramientas de diseño en el navegador.
Cómo Figma sustituyó a Photoshop en el diseño de interfaces
Figma fue fundada en 2012 por Dylan Field y Evan Wallace. En el comunicado sobre la adquisición prevista, Adobe la describió como una plataforma de diseño colaborativo “pensada primero para la web”, pionera del diseño de producto en el navegador (Adobe, 15 de septiembre de 2022, traducción propia). En diciembre de 2015 Figma abrió las inscripciones con lista de espera, como informó, entre otros, TechCabal. A finales de septiembre de 2016, según el sitio alemán t3n, Figma salió de la fase beta y lanzó su primera versión pública, gratuita hasta finales de 2016.
La diferencia con el proceso basado en PSD era de fondo. El diseño vivía en el navegador, varias personas podían trabajar en él a la vez, y el desarrollador abría el mismo archivo y leía medidas, colores y estilos sin cortar imágenes. Los componentes y las bibliotecas sustituyeron la copia de grupos de capas entre archivos.
El 15 de septiembre de 2022 Adobe anunció su intención de comprar Figma por unos 20.000 millones de dólares, aproximadamente la mitad en efectivo y la mitad en acciones. La operación no llegó a cerrarse. El 18 de diciembre de 2023 las dos empresas anunciaron que rescindían el acuerdo de mutuo acuerdo. Afirmaron no ver un camino claro para obtener la aprobación de la Comisión Europea y de la autoridad británica de la competencia (CMA), y Adobe pagó a Figma la indemnización por rescisión pactada. Dylan Field escribió en el blog de Figma: “Figma y Adobe ya no ven un camino hacia la aprobación regulatoria de nuestra adquisición propuesta” (Dylan Field, Figma Blog, traducción propia). Figma siguió como empresa independiente, y el 31 de julio de 2025 su primer inversor, Index Ventures, escribió sobre su salida a bolsa.
Qué herramientas de IA de Photoshop sustituyen el trabajo manual
Al mirar aquellos tutoriales, destaca una cosa: el oficio. Exigían precisión manual. Hoy las herramientas de Adobe (Firefly, Neural Filters) hacen el “trabajo sucio”.
- En lugar de la herramienta Pluma: Seleccionar sujeto, con IA.
- En lugar del sombreado manual: el Relleno generativo añade sombras coherentes con la iluminación de la escena.
- En lugar de buscar texturas: texturas generadas a partir de un prompt.
Cuándo llegó el Relleno generativo a Photoshop
Adobe anunció el Relleno generativo (Generative Fill) el 23 de mayo de 2023. Según el comunicado de Adobe, la función permite añadir, ampliar y eliminar partes de una imagen con una instrucción de texto, y el resultado se crea en capas generativas propias, que pueden revertirse. El día del anuncio estaba disponible en la app beta de Photoshop y como módulo en la beta de Firefly, con disponibilidad general prevista para la segunda mitad de 2023. Adobe indicó también que el modelo Firefly se entrenó, entre otras cosas, con imágenes con licencia de Adobe Stock.
La versión estable llegó el 13 de septiembre de 2023. Terry White, de Adobe, escribió ese día que el Relleno generativo y la Expansión generativa funcionan en la versión normal de Photoshop, sin beta, y están listos para uso comercial (Terry White). Del anuncio a la versión estable pasaron menos de cuatro meses.
Las competencias que enseñaban los tutoriales de 2008 (entender la luz, las máscaras, el orden de las capas) deciden hoy si un resultado del Relleno generativo puede corregirse y usarse en un proyecto o hay que descartarlo. Una capa generativa es una capa normal: puede enmascararse, moverse y combinarse con otras igual que en 1994.
Cronología desde el programa Display hasta el Relleno generativo
| Fecha | Acontecimiento | Fuente |
|---|---|---|
| 1987 | Thomas Knoll escribe el programa Display | Computer History Museum |
| 1988 | Versión 0.87 como Barneyscan XP, unas 200 copias | Computer History Museum |
| abril de 1989 | Licencia para Adobe | Computer History Museum |
| 19 de febrero de 1990 | Photoshop 1.0 para Macintosh en las tiendas | Adobe Blog |
| 1994 | Photoshop 3.0 introduce las capas | Computer History Museum |
| 1995 | Lanzamiento de Lynda.com | PCWorld |
| 27 de octubre de 2003 | Envío de Creative Suite con Photoshop CS | Imaging Resource |
| 23 de abril de 2005 | Primer vídeo en YouTube | YouTube |
| 14 de septiembre de 2007 | Primer tutorial de la red Tuts+ | Envato Tuts+ |
| 26 de noviembre de 2008 | Lista de 13 tutoriales en Noupe | Noupe |
| 6 de mayo de 2013 | Adobe pone fin a Creative Suite | MacTrast |
| diciembre de 2015 | Figma abre las inscripciones con lista de espera | TechCabal |
| septiembre de 2016 | Figma sale de la fase beta | t3n |
| 31 de diciembre de 2020 | Fin del soporte de Flash Player | Adobe |
| 15 de septiembre de 2022 | Adobe anuncia la compra de Figma | Adobe |
| 23 de mayo de 2023 | Relleno generativo en Photoshop beta | Adobe |
| 13 de septiembre de 2023 | Relleno generativo en la versión estable | Terry White, Adobe |
| 18 de diciembre de 2023 | Fin del acuerdo entre Adobe y Figma | Adobe, Figma |
Merece la pena volver a los tutoriales clásicos de Photoshop
A pesar de la revolución de la IA, hacer al menos un tutorial de la vieja escuela es un ejercicio excelente. Enseña respeto por las capas y a entender cómo la luz construye la forma.
El enlace a la recopilación original sigue funcionando, pero conviene tratarlo como un museo. Hoy el diseño es más limpio (Flat, Material), más funcional y más rápido. Si tiene el mismo carácter que los gráficos hechos a mano en 2008 es algo que cada lector debe juzgar.
Los tutoriales antiguos enseñan a mirar la luz y la forma, aunque el resultado final ya no se use en un sitio web. Lo que hacemos hoy con esa mirada se describe en la página de desarrollo de sitios en WordPress.
En la parte de entrega tratamos este tema en desarrollador WooCommerce.
