Artigos com o marcador textura

Photoshop: Criando uma textura de background para seu site

20/04/10

Escrito por ed1nh0 em Photoshop

8 comentários

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

Mais >

, , ,

Radial shadow background

26/03/10

Escrito por ed1nh0 em CSS

4 comentários

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.

Mais >

, ,