Page 2 of 2

Photoshop: Criando uma textura de background para seu site

Você encontrou “aquela” textura pela internet e deseja usá-la como background no seu site. Mas a imagem não é grande o suficiente para cobrir a tela toda. Ao perceber que quando a textura se multiplica pela página (formando um pattern), as bordas dessa imagem ficam visíveis “quebrando” a homogeneidade da textura.

Tomemos o exemplo abaixo (clique na imagem para ampliar).

textura original com vigas de madeira horizontais

Continue reading

Salvando favicons direto do Photoshop

Existem algumas dezenas de serviços online que podem tanto gerar quanto salvar uma imagem criada por você como favicon para seu site (alguns até hospedam o arquivo).

Cito alguns que gosto de testar:

exemplo de favicon

Continue reading

GIF, PNG ou JPG? Você sabe salvar imagens para web?

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:

a tela de opções da ferramenta save for web do Photoshop repleta de parâmatros e filtros

Continue reading

Bitmap e interpolação vs. Vetor

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)

imagem de uma ave com detalhe em zoom de 3200% para exibir seus pixelsCom 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.

Continue reading

CSS Sprites

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:

  1. Cache de imagens
  2. 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.

Continue reading

Radial shadow background

exemplo de background criado com um degradé radial (circular)

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.

Continue reading

@font-face e a conversão de fontes .TTF para .EOT sem mistério

exemplo de uma fonte gótica, que não é uma fonte segura, ou seja, existe o risco de não ser exibida no computador do usuário caso não seja usado @font-face Se você chegou até aqui pensando em ler algo sobre o tal Microsoft WEFT (Web Embedding Fonts Tool), esqueça. Nunca consegui usar esse programa.

O propósito aqui é tão somente explicar que, além do WEFT, você pode baixar este executável e começar a gerar suas fontes EOT. Tem também versão para Linux (tar.gz).

Continue reading

Recorte rápido de imagens simples no Photoshop

Ideal para logomarcas e figuras, preparei este tutorial relâmpago para a seguinte situação: Você está desenvolvendo um layout e precisa aplicar a marca do seu cliente. Como muitas vezes acontece, você não tem — ou não te passaram — o arquivo em vetor (Corel ou Illustrator). Esse arquivo então pode ser um GIF ou PNG (ambos sem fundo transparente, claro), mas na maioria das vezes é um JPEG.

Se o fundo for branco, preto, vermelho (R), verde (G) ou azul (B) chapados, relaxe! E esqueça a varinha mágica ou outra ferramenta similar. Você vai usar a opção de mescla do estilo do layer. Vamos lá?

Continue reading

© 2017 Edson S. Júnior

Theme by Anders NorénUp ↑