Edson S. Júnior
Internet, CSS e Photoshop
Pixels (vídeo YouTube)
09/04/10
Pixel tem tudo a ver com meu trabalho. Tem a ver com foto, com arte… Tudo na internet, visualmente, é feito de pixels. E o que esse cara fez é de admirar.
Uma TV é abandonada e seus pixels se “revoltam”, saindo do tubo pra dominar o mundo. Muito bom!
PIXELS
Invasão de criaturas de 8 bits em Nova York!
Escrito e dirigido por Patrick Jean
Direção de Fotografia de Matias Boucard
GIF, PNG ou JPG? Você sabe salvar imagens para web?
02/04/10
O Photoshop vem melhorando constantemente seu algoritmo de compressão para imagens web. E desde que a Adobe adquiriu a Macromedia (e seu Fireworks) o processo de salvar imagens mais leves e de melhor qualidade ficou ainda melhor. A opção “save for web” é repleta de opções e, por assim dizer, armadilhas para quem não é familiarizado com a ferramenta.
Com a imagem aberta no Photoshop selecione o menu File > Save for Web ou pressione Alt+Shift+Ctrl+S.
Da janela que se abre, o que interessa pra nós são as opções da coluna direita, apresentada abaixo:
Bitmap e interpolação vs. Vetor
01/04/10
Não são necessárias muitas palavras: Bitmap é pixel e vetor é cálculo matemático. Pronto.
Enquanto o primeiro sofre perdas distintas de qualidade quanto ao tipo de compressão, formato de arquivo e também com ampliações e às vezes até reduções*, o outro não se “deteriora” com compressão, ampliação e redução. Claro, estamos falando de formatos nativos de programas gráficos, não de formatos para web.
* Costuma-se dizer que uma imagem bitmap ganha em qualidade quando reduzida. Na verdade esse ganho é puramente visual, pois com a redução parte da informação da imagem é perdida – pixels descartados.
Bitmap (ou raster image)
Com exceção do Flash e o ainda não tão suportado formato SVG (scalable vector graphic), tudo visto na web são imagens bitmap. São compostas de pixels (o menor ponto de uma imagem digital), cada um com sua informação de cor.
CSS Sprites
27/03/10
Você já leu o artigo sobre CSS Sprites da Smashingmagazine? Veja bem, levando em conta que você tem conhecimento desse assunto, gostaria só de basear minha crítica em cima de dois pontos desse artigo:
- Cache de imagens
- Acessibilidade
Mas antes, vamos ser francos, usar sprites é uma mão na roda no desenvolvimento de sites, e sei q o pessoal da Smashingmagazine também pensa assim. Eles só colocaram o assunto em xeque devido ao mau uso ou o uso exagerado.
Radial shadow background
26/03/10
Há algum tempo atrás precisei criar uma textura de fundo pra um site que fosse bem elaborada, com sombras nos quatro cantos e que fosse leve. Um background típico de sites em Flash. De cara percebi que se fizesse isso usando uma única imagem (um JPEG gigante) não ficaria leve o suficiente.
O resultado você confere no final. A vantagem é a de usar apenas duas pequenas imagens, um GIF e um PNG transparente (que continua transparente no IE6!), num total de apenas 2Kb (!). O GIF é a textura que se repete nos eixos X e Y (baixei do site Squidfingers.com) e o PNG com degradé circular é a sombra, criado no Photoshop, e mede só 64×64 pixels. A desvantagem, se é que podemos chamar isso de desvantagem, é o uso de dois hacks pro IE. Vou explicar todo o processo.
Alê Mazzariolli
Barril de Ideias
Cozinha Travessa
Diego Franco
Flávio "Japs" Kaminisse
Leonardo Ota
Revolução etc.
Tiago Lemos