Automatizar e manipular a mídia é algo que me fascina, em parte porque não entendo a mágica por trás disso e em parte porque a ideia de transformar uma coisa em outra é divertida e útil. A mais recente ferramenta de mídia que despertou meu interesse é uma ferramenta JavaScript chamada psd.js.
O psd.js é um projeto que permite que o senhor leia arquivos PSD, incluindo:
- Estrutura e tamanho do documento
- Tamanho da camada/pasta + posicionamento, nomes, visibilidade e opacidade
- Dados da fonte (via psd-enginedata)
- Conteúdo da área de texto
- Nomes, tamanhos e cores das fontes
- Modo de cor e profundidade de bits
- Dados da máscara vetorial
- Dados de imagem achatados
- Comparações de camadas
O que o conversor de mídia e o amante de JavaScript em mim acharam mais incrível foi um recurso básico: converter um PSD em PNG com JavaScript!
var PSD = require('psd'); PSD.open('homepage.psd').then(function (psd) { return psd.image.saveAsPng('homepage.png'); }).then(function () { console.log('Finished!'); });
Essa é uma API boa e organizada, e eu adoro o fato de ela não exigir nada além de JavaScript (muitas outras bibliotecas de imagens do Node.js exigem o ImageMagick na máquina). É claro que a conversão de PSD para PNG é fácil com o ImageMagick também, mas poder usar o Node.js abre uma série de oportunidades!
Filtros CSS
O suporte a filtros CSS foi lançado recentemente nos nightlies do WebKit. Filtros CSS fornecem um método para modificar a renderização de um elemento DOM básico, imagem ou vídeo. Os filtros CSS permitem desfocar, distorcer e modificar a intensidade da cor dos elementos. Vamos lá…
Imagens responsivas: The Ultimate Guide
É provável que qualquer web designer que use nosso aplicativo de teste de navegador Ghostlab, que permite testes contínuos em todos os dispositivos simultaneamente, já tenha trabalhado com design responsivo de alguma forma. E, à medida que os sites e dispositivos atuais se tornam cada vez mais variados, uma infinidade de imagens responsivas…
Enviar notificações por e-mail para imagens quebradas usando o MooTools AJAX
Um dos eventos JavaScript pouco conhecidos é o evento onError da imagem. Esse evento é acionado quando uma imagem é eliminada por não existir. Imagens quebradas podem fazer com que seu site pareça pouco profissional e é importante corrigir imagens quebradas o mais rápido possível.