Evolução do design: 13 tutoriais lendários de Photoshop (antes e agora)

Em 2008, quando este post foi criado pela primeira vez, aprender design era completamente diferente. Não havia YouTube cheio de tutoriais em 4K, não havia Canva, e o termo “Prompt Engineering” soaria a ficção científica. Mas havia blogs como Noupe, Nettuts+ ou Abduzeedo, e nós, designers principiantes, passávamos noites a recriar meticulosamente efeitos de luz e texturas passo a passo.

A lista original “13 Most Advanced Tutorials” é hoje uma cápsula do tempo. Vale a pena revisitá-la não pelas técnicas (que estão desatualizadas), mas para entender quão longe chegámos. O texto abaixo assenta em datas da Adobe, da Figma, do Computer History Museum e de publicações da época, e cada data pode ser verificada na ligação indicada.

#Lista de 13 tutoriais de Photoshop da Noupe em 2008

A equipa editorial da Noupe publicou a compilação a 26 de novembro de 2008 com o título “Pushing Photoshop To The Limit: 13 Most Advanced Tutorials”. Ao reler a página nota-se algo fácil de esquecer passados tantos anos: a lista só em parte era sobre o Photoshop. Três dos treze tutoriais ensinavam a transformar um ficheiro PSD num site funcional, e vários combinavam o Photoshop com Flash, After Effects ou Cinema 4D.

Os títulos ficam no original, porque é assim que os encontra no arquivo. A composição descreve bem o ano de 2008. O Photoshop era o centro do trabalho, mas o resultado raramente terminava num ficheiro de imagem. Seguia para o Flash, para vídeo ou para HTML e CSS.

#Que efeitos estavam na moda nos tutoriais de Photoshop em 2008

1. Skeuomorfismo: Tudo tinha de parecer real. A madeira precisava de veios, o metal tinha de brilhar, e os botões tinham tantas sombras (Drop Shadow) e brilhos (Inner Glow) que pareciam gomas.
2. Efeitos de luz e tipografia 3D: Riscos de luz abstratos, néons, fundos “cósmicos”, letras puxadas para a terceira dimensão. Os tutoriais ensinavam-nos a usar Pincéis e Modos de Mistura ao limite, e o volume das letras era muitas vezes construído no Cinema 4D e montado no Photoshop.
3. Manipulação de fotos: Juntar várias fotografias numa só cena. Naquela altura isso significava horas de máscara com a Pen Tool. Hoje parte desse trabalho é feita pela seleção baseada em IA.

#De onde veio o Photoshop e quem o escreveu

A história está mais bem documentada pelo Computer History Museum, que em 2013 publicou o código-fonte do Photoshop 1.0.1. Segundo o museu, em 1987 Thomas Knoll, doutorando em visão computacional na University of Michigan, escreveu um programa para mostrar e modificar imagens digitais. O irmão, John Knoll, que trabalhava na Industrial Light & Magic, achou a ferramenta útil para editar fotografias. O programa chamava-se então Display.

No verão de 1988 os irmãos concluíram que podia ser um produto comercial e mudaram-lhe o nome para Photoshop. Cerca de 200 cópias da versão 0.87 foram distribuídas com os scanners da Barneyscan, com o nome Barneyscan XP. Em abril de 1989 a Adobe fechou a licença para distribuir uma versão melhorada, e a versão 1.0 para Apple Macintosh chegou às lojas a 19 de fevereiro de 1990, como a Adobe refere no artigo sobre os 25 anos do programa.

Os detalhes técnicos desse código mostram a escala de um projeto de uma só pessoa. A versão 1.0.1 tem 179 ficheiros e cerca de 128 mil linhas, cerca de 75 por cento em Pascal e cerca de 15 por cento em assembler 68000. Thomas Knoll disse ao museu: “Na versão 1 eu era o único engenheiro, e na versão 2 éramos dois” (Thomas Knoll, Computer History Museum, tradução própria). Numa entrevista à Adobe em 2015 acrescentou que foi ele quem inventou a caixa de diálogo Níveis (Levels) como a primeira grande função de ajuste, e que as primeiras versões se destinavam sobretudo à edição gráfica e aos artistas gráficos, não aos fotógrafos (Thomas Knoll, Adobe Blog, tradução própria).

#Quando surgiram as camadas no Photoshop

As camadas entraram no programa com a versão 3.0, em 1994. O Computer History Museum descreve-as como a possibilidade de dividir uma imagem em várias camadas. Para os tutoriais da lista da Noupe esta mudança era a base de tudo: cada passo do tipo “duplica a camada, muda o modo para Screen, baixa a opacidade” pressupõe que a imagem é feita de fatias independentes. Antes da versão 3.0 um tutorial destes teria de ser escrito de forma totalmente diferente, porque cada alteração sobrescrevia logo os píxeis.

Pela mesma razão, as camadas são hoje o núcleo das novas funções de IA. A Adobe descreve os resultados do Generative Fill como conteúdo criado em camadas generativas próprias, que podem ser revertidas sem destruir o original. O modelo de trabalho de 1994 sobreviveu assim a todas as mudanças de interface que vieram depois.

#Do Photoshop 7 ao Creative Suite e ao Creative Cloud

A numeração das versões terminou no Photoshop 7. No fim de setembro de 2003 a Adobe anunciou o pacote Creative Suite, que juntava novas versões do Photoshop, Illustrator, InDesign e GoLive, e num comunicado de 27 de outubro de 2003, reproduzido pela Imaging Resource, anunciou o envio do pacote e apresentou o Photoshop CS como sucessor do Photoshop 7. A partir daí as versões chamaram-se CS, CS2 e seguintes, até à CS6.

A mudança seguinte foi no modelo de venda. A 6 de maio de 2013, na conferência MAX, a Adobe anunciou no comunicado “Adobe Accelerates Shift to the Cloud” que não tinha planos para novas edições do Creative Suite e que concentraria o desenvolvimento de software criativo no Creative Cloud. A empresa prometeu manter o suporte ao CS6. Segundo o MacTrast, que noticiou o anúncio no mesmo dia, as novas versões CC, disponíveis apenas por subscrição, chegariam aos utilizadores em junho de 2013.

Para quem aprendia com tutoriais, isto teve um efeito prático. Um tutorial de 2008 pressupunha uma versão concreta (o Flash CS3 aparece no próprio título do n.º 5). Depois da passagem à subscrição todos os utilizadores recebiam atualizações ao mesmo ritmo, por isso os tutoriais deixaram de indicar o número da versão como requisito e passaram a referir-se ao programa no seu estado atual.

#Onde se aprendia Photoshop antes do YouTube

A formação paga em software gráfico existia muito antes dos blogs. A Lynda.com foi fundada em 1995 por Lynda Weinman e Bruce Heavin. A 9 de abril de 2015 o LinkedIn anunciou a compra do serviço por cerca de 1,5 mil milhões de dólares, como noticiou a PCWorld. Os cursos em vídeo com programa estruturado eram, portanto, um mercado à parte, ao lado dos artigos gratuitos em blogs.

O YouTube arrancou em 2005, e o primeiro vídeo, “Me at the zoo”, foi carregado a 23 de abril de 2005. Em 2008 o vídeo já existia, mas o tutorial em texto com capturas de ecrã ainda dominava compilações como a lista da Noupe. As treze entradas são todas artigos em blogs.

O exemplo mais conhecido desta vaga é a rede Tuts+ da empresa australiana Envato. Segundo a série “10 Years of Envato Tuts+”, o primeiro tutorial saiu a 14 de setembro de 2007, escrito pelo cofundador da Envato, Collis Ta’eed. A partir do site sobre Photoshop (Psdtuts+) cresceu uma rede de blogs temáticos, entre eles o Nettuts+, de onde vêm duas entradas da lista. Em 2014 a Envato juntou todos esses sites num só, o Envato Tuts+.

#O que aconteceu aos tutoriais de Flash

Três entradas da lista da Noupe (n.º 4, 5 e 10) tratavam do Flash ou da passagem de ficheiros do Photoshop para animação. Hoje esse caminho não se pode repetir no navegador. A Adobe anunciou em julho de 2017 o fim do Flash Player, terminou o suporte a 31 de dezembro de 2020 e, desde 12 de janeiro de 2021, bloqueia a execução de conteúdo Flash no leitor, recomendando que seja desinstalado de imediato (Adobe, Flash Player EOL).

É um bom exemplo de porque os tutoriais antigos devem ser lidos de forma seletiva. A parte sobre preparar o grafismo no Photoshop (camadas, máscaras, exportação) continua a fazer sentido. A parte sobre colocar o efeito numa página descreve uma plataforma que deixou de existir. As animações que em 2008 se faziam em Flash constroem-se hoje com CSS, SVG ou JavaScript.

#Como era a conversão de PSD para HTML em 2008

As três últimas entradas da lista da Noupe descrevem um processo que em 2008 era o padrão no trabalho com sites. O designer desenhava a página inteira no Photoshop como um único ficheiro PSD com camadas. O programador cortava-o, exportava fundos e botões como imagens separadas e depois reconstruía a estrutura em XHTML e CSS. Os tutoriais do Nettuts+ e do CSS-Tricks ensinavam exatamente esta sequência, da maqueta ao código, passo a passo.

Este modelo tinha um problema de origem. O ficheiro PSD era a imagem de um único estado da página, numa só largura. Não dizia nada sobre o comportamento no telemóvel, sobre o estado de hover, nem sobre o que acontece quando o texto fica mais longo. Passar o design para código significava medir espaçamentos e cores à mão no Photoshop. Foi precisamente esta etapa que as ferramentas de design no navegador vieram mais tarde substituir.

#Como a Figma substituiu o Photoshop no design de interfaces

A Figma foi fundada em 2012 por Dylan Field e Evan Wallace. No comunicado sobre a aquisição planeada, a Adobe descreveu-a como uma ferramenta “nascida na web”, pioneira do design de produto no navegador (Adobe, 15 de setembro de 2022, tradução própria). Uma pré-visualização gratuita por convite arrancou em dezembro de 2015, como noticiou, entre outros, o TechCabal. No fim de setembro de 2016, como informou o site alemão t3n, a Figma saiu da fase beta e lançou a primeira versão pública, gratuita até ao fim de 2016.

A diferença em relação ao processo com PSD era de fundo. O design vivia no navegador, várias pessoas podiam trabalhar nele ao mesmo tempo, e o programador abria o mesmo ficheiro e lia medidas, cores e estilos sem cortar imagens. Componentes e bibliotecas substituíram a cópia de grupos de camadas entre ficheiros.

A 15 de setembro de 2022 a Adobe anunciou a intenção de comprar a Figma por cerca de 20 mil milhões de dólares, mais ou menos metade em dinheiro e metade em ações. O negócio não se concretizou. A 18 de dezembro de 2023 as duas empresas anunciaram que punham fim ao acordo de comum acordo. Afirmaram não ver um caminho claro para obter a aprovação da Comissão Europeia e da autoridade britânica da concorrência (CMA), e a Adobe pagou à Figma a taxa de rescisão acordada. Dylan Field escreveu no blog da Figma: “já não vemos um caminho para a aprovação regulatória do negócio” (Dylan Field, Figma Blog, tradução própria). A Figma continuou como empresa independente, e a 31 de julho de 2025 o seu primeiro investidor, a Index Ventures, escreveu sobre a entrada em bolsa.

#Que ferramentas de IA do Photoshop substituem o trabalho manual

Olhando para esses tutoriais, uma coisa destaca-se: artesanato. Exigiam precisão manual. Hoje as ferramentas Adobe (Firefly, Neural Filters) fazem o “trabalho sujo” por nós.

• Em vez de Pen Tool: Temos “Selecionar Sujeito” a funcionar com IA.
• Em vez de sombreamento manual: Generative Fill adiciona sombras consistentes com a iluminação da cena.
• Em vez de procurar texturas: Geramos texturas com um prompt.

#Quando chegou o Generative Fill ao Photoshop

A Adobe anunciou o Generative Fill a 23 de maio de 2023. Segundo o comunicado da Adobe, a função permite acrescentar, expandir e remover partes de uma imagem com uma instrução de texto, e o resultado é criado em camadas generativas próprias, que podem ser revertidas. No dia do anúncio estava disponível na app beta do Photoshop e como módulo no Firefly beta, com disponibilidade geral prevista para a segunda metade de 2023. A Adobe indicou também que o modelo Firefly foi treinado, entre outros, com imagens licenciadas do Adobe Stock.

A versão de produção chegou a 13 de setembro de 2023. Terry White, da Adobe, escreveu nesse dia que o Generative Fill e o Generative Expand funcionam na versão normal do Photoshop, sem beta, e estão autorizados para uso comercial (Terry White). Do anúncio à versão de produção passaram menos de quatro meses.

As competências que os tutoriais de 2008 ensinavam (perceber a luz, as máscaras, a ordem das camadas) decidem hoje se um resultado do Generative Fill pode ser corrigido e usado num projeto ou tem de ser descartado. Uma camada generativa é uma camada normal: pode ser mascarada, movida e combinada com outras tal como em 1994.

#Cronologia do programa Display ao Generative Fill

#Vale a pena voltar aos tutoriais clássicos de Photoshop

Apesar da revolução da IA, acredito que trabalhar em pelo menos um tutorial “old school” é um ótimo exercício. Ensina humildade em relação a camadas e compreensão de como a luz constrói a forma.

O link para a compilação original ainda funciona, mas trata-o como um museu. Hoje o design é mais limpo (Flat/Material), mais funcional e… mais rápido. Mas terá a mesma “alma” que gráficos feitos à mão de 2008? Isto fica ao seu critério.

Os tutoriais antigos ensinam a olhar para a luz e para a forma, mesmo quando o resultado final já não se usa num site. O que fazemos hoje com esse olhar está descrito na página de desenvolvimento de sites em WordPress.

Do lado da entrega mantemos este tema sob programador WooCommerce.