Campo de busca
Guilherme Luchesi

Guilherme Luchesi

Desenvolvedor Front-End

{age: 21, nacionality: BR, quality: ["Nerd", "Ex Dubliner", "Coffee Lover"]}

4 Posts

Como reduzir imagens em massa no Photoshop

Como reduzir imagens em massa no Photoshop

Por Guilherme Luchesi | 16 de dezembro, 2016 | 1 comentários

 

Reduzir imagens no Photoshop é uma prática muito comum na internet, seja para criar um série de thumbs manualmente como para reduzir uma galeria de fotos de alta qualidade para os padrões web como citado no nosso artigo sobre “Boas práticas para otimização de conteúdo”.

Contudo, este pode ser um processo muito penoso se você dispõe de uma quantidade muito grande de imagens, podendo assim custar horas de trabalho para uma tarefa relativamente simples.

Por sorte, podemos contar com as famosas actions do Photoshop.Essas belezinhas juntamente com uma outra ferramenta nativa chamada ‘Batch’ nos possibilitam fazer isso de forma automática, reduzindo nossa carga de trabalho inútil e aumentando a produtividade.

Então vamos por a mão na massa!

Criando sua action de redimensionar imagem

O primeiro passo é criar a ação que será repetida por todas as imagens da sua pasta, para isso, verifique se a janela de actions já está aberta indo em Window > Actions ou simplesmente apertando Alt + F9.

Com o painel de actions aberto, já podemos criar nossa action apertando no botão nova action (ícone igual ao de nova layer) e damos um nome para action. Ao apertar enter ou Record, as próximas ações serão gravadas para serem reproduzidas novamente depois.

Agora precisamos fazer todo o processo que precisa ser feito com as outras imagens, então abra qualquer imagem da sua pasta e faça os redimensionamentos desejados, ou o que quer que seja que você precise que seja feito com todas as outras imagens.

Aqui, apenas para exemplo, vou redimensionar todas as imagens da minha pasta para ficarem com 800px de largura, então farei o seguinte processo.

  • Abrir uma imagem da pasta;
  • Reduzir o tamanho da imagem em Image > Image Size e definir Resolution para 72 e Width para 800px;
  • Salvar para web clicando em File > Save for Web e defindo o tipo de arquivo como jpg de qualidade 70;
  • Escolher a pasta de destino, seja e ela a mesma pasta, para substituir os arquivos originais ou em uma pasta nova como, por exemplo, thumbs;
  • Fechar a imagem sem salvar alterações.

Pronto, agora podemos parar de gravar clicando no botão de stop que vai estar bem ao lado do círculo vermelho indicando que está gravando. Com isso temos nossa action pronta para ser reproduzida.

Configurando o Batch

Aqui que entra o pulo do gato, o batch! Para fazermos aquele action ser repetido por todas as imagens da nossa pasta, precisamos fazer os seguintes passos.

Vá em File > Automate > Batch, aqui aparecerá um painel onde vamos poder configurar nossa ferramenta de repetição. Vou passar brevemente sobre os itens que vão ser importante para o nosso caso de redimensionamento de imagem.

Play

     Set: Nome dos grupos de action disponíveis

     Action: Nome da action que deseja que rode nas imagens da pasta

Source: Pasta de origem das imagens

O resto das configurações pode deixar tudo como padrão que para o nosso objetivo agora, já resolve.

Pronto, agora é só dar um okay e deixar o Photoshop fazer todo o trabalho pesado para você.

Ficou com alguma dúvida? Deixe aqui nos comentários ;)

Continue lendo
Boas práticas para otimização de conteúdo

Boas práticas para otimização de conteúdo

Por Guilherme Luchesi | 30 de agosto, 2016 | 0 comentários

 

Uma parte muito importante da experiência do usuário é o tempo de carregamento da página. Mas além de todo o trabalho feito no código para diminuir ao máximo esse tempo, é de muita importância que o conteúdo seja otimizado também, isto é, sem imagens e arquivos pesados. Vamos passar aqui por alguns itens que costumam ser um problema e explicaremos corrigí-los.

Continue lendo
CSS
Pseudo classes

Pseudo classes

Por Guilherme Luchesi | 08 de agosto, 2013 | 0 comentários

 

Sem dúvida os seletores fazem parte dos assuntos fundamentais do CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. As pseudo classes são bem pouco exploradas pelos desenvolvedores Front-End, seja por falta de conhecimento destas funções do CSS ou incompatibilidade com o IE.

Continue lendo
CSS
Breakpoints e Lógica em Media Queries

Breakpoints e Lógica em Media Queries

Por Guilherme Luchesi | 04 de junho, 2013 | 2 comentários

 

Breakpoints

Apesar de existir mais de uma dezena de parâmetros para Media Queries, a verdade é que somente alguns poucos são usados. Isso ocorre não pela falta de cuidado ou competência no desenvolvimento, mas principalmente devido ao fato de que as necessidades atuais da maioria dos sites não requerem o uso de muitos dos parâmetros.

E, como foi visto anteriormente, no post da Eliane, O que é Design Responsivo? é possível declarar regras CSS específicas conforme o tamanho do dispositivo ou browser, através dos parâmetros device-width e width(e seus prefixos). Essa abordagem, gera a maior discussão do desenvolvimento responsivo: Quais os Breakpoints mais eficientes??

Continue lendo