Como fazer com que o fatiamento seja menor: dicas e truques para fatiar um PSD
Eu tenho um pequeno segredo sujo, odeio cortar arquivos do Photoshop. Por isso, não quero dizer que odeio transformar composições PSD em sites, quero dizer que odeio as ferramentas de corte do Photoshop. Todo o processo faz com que meu PSD pareça ocupado, desordenado e excessivamente complicado, por isso geralmente pulo-o completamente e, em vez disso, opto por cortar manualmente e salvar imagens individualmente, conforme necessário.
Para combater essa tendência e tentar ver a verdadeira utilidade das ferramentas de fatia do Photoshop, embarquei em uma missão para aprender todos os meandros de como a fatia funciona. Abaixo está uma coleção de dicas e truques resultantes dessa jornada. Felizmente, você aprenderá uma coisa ou duas que você nunca soube!
Existem três tipos de fatias no Photoshop
Três tipos de fatias !? Essa foi uma das coisas mais interessantes e surpreendentes que aprendi. Não tendo realmente experimentado muito os recursos de fatiamento, imaginei que havia apenas uma maneira de fazer isso. Eu estava errado.
Os três tipos diferentes de fatias são Fatias de usuário, Fatias automáticas e Fatias baseadas em camadas. Para começar, vamos falar sobre os dois com os quais você provavelmente está familiarizado: Fatias de usuário e Fatias automáticas. Estes estão intimamente relacionados, de fato, um cria o outro.
Como você sabe, para cortar um PSD, comece agarrando a Slice Tool (C) e desenhando uma caixa ao redor da área que deseja exportar como uma imagem independente. Ao adicionar fatias a todas as áreas da sua composição que você deseja fazer, você pode otimizar e exportar várias imagens de uma só vez, com rapidez e facilidade.
Ao executar uma fatia, você deve obter algo como o resultado visto abaixo.
O que eu fiz aqui é desenhar uma caixa ao redor do logotipo na parte superior da página. Essa ação criou uma fatia do usuário e várias fatias automáticas. Quando você cria uma fatia, o Photoshop assume que seu objetivo final é transformar todo o PSD em uma série de fatias. Pessoalmente, acho que essa suposição é bastante irritante e discutiremos mais adiante como contornar isso. Por enquanto, saiba que, por causa dessa suposição, o Photoshop estende as bordas da sua fatia por todo o PSD, criando várias outras seções automaticamente. Isso é ilustrado na imagem acima.
Truques para trabalhar com fatias de usuário e automáticas
Enquanto falamos sobre o usuário e as fatias automáticas, vamos examinar alguns dos recursos óbvios e não tão óbvios para que você possa realmente ter uma idéia de quais ferramentas e opções você tem à sua disposição.
Movendo e editando fatias
Depois de fazer uma fatia, você verá controles semelhantes aos de uma Transformação livre que permitirá movê-la e editá-la. Você também pode usar a Ferramenta de seleção de fatia para garantir que você esteja editando apenas as fatias atuais e não criando novas. Essa ferramenta é encontrada na ferramenta Fatia no menu suspenso.
Convertendo fatias automáticas em fatias de usuário
Durante todo o processo de fatiamento, as Fatias automáticas são criadas e atualizadas continuamente e permanecem distintas das fatias do usuário. Mais tarde, veremos como exportá-los como arquivos ou ignorá-los ao exportar, mas, por enquanto, vejamos como transformar uma fatia automática em uma fatia do usuário.
O processo é extremamente simples. Primeiro, você deve selecionar o Slice automático usando a ferramenta Slice Select. Em seguida, selecione a fatia automática que deseja converter e pressione o botão "Promover" na parte superior.
É isso aí! Agora a fatia automática deve mudar de cor, indicando que agora é uma fatia do usuário. Agora você terá maior controle sobre seu tamanho e como ele exporta.
Dividir fatias automaticamente
Quando você tem uma série de objetos distribuídos horizontalmente, verticalmente ou mesmo em uma grade, não precisa de tempo para fazer uma fatia em torno de cada unidade individual. Em vez disso, você pode fazer uma fatia que cubra todos os objetos e solicitar ao Photoshop que faça o resto.
Para fazer isso, primeiro faça sua grande fatia desenhando uma caixa em torno de todos os objetos. Em seguida, com a Ferramenta de seleção de fatia ativada, clique no botão "Dividir" na parte superior da página.
Isso deve abrir a caixa de diálogo “Divide Slice” mostrada acima. Usando esta janela, você pode inserir rapidamente fatias verticais e horizontais extras. Se eles não estiverem alinhados corretamente, você poderá ajustá-los manualmente depois de pressionar o botão "OK".
Fatias dos Guias
Muitos de vocês provavelmente estão muito mais confortáveis trabalhando com guias do que com fatias no Photoshop. A realidade é que os dois trabalham de maneira muito semelhante, mas o sistema de guias parece um pouco mais suave.
Se é assim que você rola, isso se encaixa perfeitamente em um fluxo de trabalho fácil para criar fatias. Basta arrastar as guias para dividir seu PSD e ignorar completamente as ferramentas de fatia. Depois que terminar, selecione a Ferramenta Fatia e clique no botão "Fatias das guias" na parte superior.
Nomeando Fatias
Uma das coisas irritantes que o incomodam na primeira vez em que você trabalha com fatias é que, ao exportá-las, os arquivos resultantes apresentam nomes grandes e feios que não são de todo significativos. Para corrigir isso, verifique se você inseriu e nomeou cada fatia adequadamente. Qualquer nome que você atribuir será transferido para o nome do arquivo na exportação.
Para nomear uma fatia, basta clicar duas vezes em seu conteúdo com a ferramenta Fatia selecionada. Isso exibirá a caixa de diálogo abaixo.
Observe que você tem várias opções aqui, incluindo definir a cor da fatia, inserir manualmente as dimensões e atribuir um nome. Há também um monte de coisas em HTML, como URL, Target, etc. Acontece que o Photoshop pode pegar seu PSD fatiado e produzi-lo como uma página da web. Alguns criticam essa funcionalidade porque as configurações padrão criam um layout baseado em tabela; no entanto, você pode alterná-las para utilizar CSS.
Agora, não fique muito animado. Mesmo com as opções de CSS selecionadas, o Photoshop ainda está podre em criar um site para você. É muito melhor fazê-lo manualmente ou pelo menos transferi-lo para o Dreamweaver, o que significa que você deve ignorar todas essas outras opções completamente.
Fatias baseadas em camadas e por que são melhores
Um dos principais recursos que fizeram com que o fatiamento sugiras muito menos para mim é o Slices baseados em camadas. Essa é uma marca específica de User Slices que é superior de várias maneiras.
Como o nome indica, essas fatias não são baseadas em uma caixa que você desenha manualmente, mas aderem automaticamente aos limites de uma camada. Para criar uma fatia com base em camada, selecione uma camada na Paleta de camadas, vá para o menu e selecione Camada> Nova fatia com base em camada. Observe que isso funciona mesmo se você tiver várias camadas selecionadas, cada camada será simplesmente transformada em sua própria fatia!
Obviamente, para que isso funcione corretamente, você precisa ser realmente bom em como estruturar suas camadas. Você deve criar seus modelos como arquivos totalmente organizados e em camadas de qualquer maneira, para que isso não seja um problema.
A vantagem
Uma das principais razões pelas quais as fatias normais são tão ruins é que cria muito trabalho extra se você quiser voltar e ajustar seus projetos. Depois de embaralhar o trabalho artístico, você deve voltar e mover todas as suas fatias para alinhar com o novo layout. Esse aborrecimento é o motivo pelo qual eu sempre salvo manualmente as peças individuais através do corte.
No entanto, as fatias baseadas em camada são realmente bastante inteligentes. Quando você se move pelas camadas, suas fatias seguem automaticamente. Se você adicionar um efeito que altere os limites, como um brilho externo, a fatia será expandida para incluí-la. Se você transformar a camada em 30% do tamanho original, a fatia será atualizada automaticamente!
Obviamente, há um argumento claro aqui para usar fatias baseadas em camada sempre que possível, pois economiza uma quantidade incrível de tempo no inevitável estágio de reprojeto.
Matando a desordem
Outro dos meus maiores incômodos com o fatiamento é que ele pode criar um PSD com aparência realmente confusa. Isso se deve principalmente ao efeito colateral do corte automático.
Como exemplo, dê uma olhada na imagem abaixo (é um pouco simplificada aqui, mas você entendeu). Aqui, eu realmente só queria criar três fatias, mas o Photoshop entrou automaticamente e transformou em doze fatias !
Não conheço você, mas não construo páginas da Web como uma grande coleção de imagens, todas amontoadas. Então, eu simplesmente não quero todas essas fatias extras! Não vou exportar essas áreas para imagens, então tudo o que estão fazendo é adicionar ruído à minha interface. Quando vejo um documento como este, as fatias deixam de ser uma ferramenta significativa para mim.
Para corrigir isso, podemos pegar a ferramenta Slice Select e clicar no botão "Hide Auto Slices" na parte superior da tela. Isso faz exatamente o que o nome indica, afasta todas as Auto Slices desagradáveis da visualização.
Veja como nosso documento se torna mais simples! As poucas fatias que usamos são claramente identificáveis e, portanto, mantêm sua utilidade. Na minha opinião, esse método de visualização de suas fatias é bastante preferido. Esse é um daqueles casos em que o Photoshop simplesmente se esforça demais para prever meu fluxo de trabalho preferido e acaba exagerando nos recursos.
Exportando fatias
É aqui que a utilidade da fatia realmente entra em jogo. Sem fatiar, você deve salvar cada parte do seu comp, uma de cada vez. O fluxo de trabalho seria algo como o seguinte: faça uma seleção, corte, otimize em Salvar para a Web, salve, desfaça o corte e repita. São muitas etapas desnecessárias! Vamos ver como isso funciona com o fatiamento.
Depois que você finalmente descobrir todos os detalhes da fatia e ter seu PSD pronto, é hora de ir para o menu Arquivo e selecionar "Salvar para a Web e dispositivos". Você provavelmente já conhece esse diálogo, mas é um pouco diferente quando você tem fatias no documento.
Se você tiver fatias, a visualização do documento nesta janela mostra todas elas (infelizmente, isso inclui aquelas fatias automáticas irritantes). A partir daqui, você pode simplesmente clicar para selecionar cada fatia e otimizar as configurações de cada uma individualmente. Isso inclui o tipo de arquivo, a qualidade etc. Assim, em uma sessão, você pode configurar uma exportação de três JPGs e um PNG, cada um com a qualidade que considerar apropriada.
Depois de ajustar tudo ao seu gosto, clique no botão "Salvar". Uma caixa de diálogo deve aparecer, permitindo que você escolha uma pasta para colocar todas as imagens. Lembre-se de que já configuramos a convenção de nomenclatura, então deixe como está. A chave aqui é garantir que você esteja exportando apenas “Todas as fatias de usuário” ou “Fatias selecionadas”.
Dependendo do fluxo de trabalho desejado, qualquer uma dessas opções funciona muito bem. A opção padrão é simplesmente "Todas as fatias", que incluirá não apenas suas fatias com base em usuário e camada, mas também as fatias automáticas completamente inúteis que você terá que jogar fora de qualquer maneira. Salve-se do problema e descarte-os aqui antes que o salvamento real ocorra.
Conclusão
Analisamos muitas coisas técnicas do Photoshop hoje, então vou tentar resumir bem. Primeiro, fatiar um PSD pode realmente parecer um processo desajeitado, se você não sabe o que está fazendo. Verifique realmente o Photoshop e experimente as dicas acima para garantir que você aproveite ao máximo as ferramentas disponíveis.
Em segundo lugar, lembre-se de que existem três tipos de fatias: fatias automáticas, fatias de usuário e fatias baseadas em camadas. As fatias automáticas são muito ruins e são mais um efeito colateral lamentável do que um recurso útil. Você não precisa concordar comigo, mas se o fizer, esconda-as para que não sejam tão perturbadoras. Fatias de usuário são simplesmente aquelas que você intencionalmente cria. Você pode ajustá-los com a Slice Select Tool e nomeá-los clicando duas vezes no conteúdo. As fatias baseadas em camadas são como as fatias de usuário, mas são muito mais inteligentes porque aderem automaticamente aos limites de uma determinada camada. Você pode mover, redimensionar e adicionar efeitos a uma camada e a fatia será atualizada continuamente por conta própria.
Por fim, ao exportar um documento com fatias, escolha o comando Salvar para a Web e otimize cada fatia como seu próprio arquivo. Além disso, certifique-se de exportar apenas as fatias do usuário ou as fatias selecionadas, caso contrário, todas as fatias automáticas criadas pelo Photoshop preencherão a pasta de imagens.
Provavelmente, é muito mais do que você gostaria de saber sobre o fatiamento no Photoshop, mas espero que isso tenha ajudado a identificar as ineficiências no sistema, para que você possa ajustar e ainda tirar proveito desse conjunto útil de ferramentas sem ser prejudicado por seu constrangimento.
Deixe um comentário abaixo e conte-nos como você divide um PSD. O fluxo de trabalho que configurei aqui é apenas uma das muitas soluções possíveis e estou ansioso para ouvir e aprender com as suas!
