Incremente o Layout do seu site com um Stripe
Este tutorial foi escrito por Luigi Facchinetti do site de criação de sites Fast Forward.
Os stripes estão sendo largamente utilizados para deixar os sites mais bonitos. Eles podem ser utilizados como background e diversas outras formas.
O site Baixaki quando mudou o visual colocou stripe no topo da página e no rodapé:
Topo:
Rodapé:
Como fazer um stripe de forma rápida:
1. Entre no site Stripe Generator.
2. Siga as intruções abaixo para saber para o que serve cada ferramenta:
a. Tamanho das tiras do stripe:
Ajuste o tamanho para ajeitar a largura das tiras. Baseie-se nas setas pra saber qual você estará editando:
b. Cor do stripe e estilo do plano de fundo:
Mude a cor para a cor desejada, depois selecione o estilo do BG. Se for utilizar o stripe como background, recomendo que deixe o background style no padrão (não mudar nada).
c. Sombra:
Fica mais bonito sem sombra. Para deixá-lo sem sombra, não precisa alterar seu valor.
d. Cor do espaço:
Modifique a cor do background do stripe.
e. Estilo do stripe:
Selecione o sentido do stripe.
f. Salve o stripe:
Clique no botão “Download” para salvar no seu PC o stripe criado.
Formas de utilização do stripe:
Há diversas formas de se utilizar um stripe. Vou mostrar 2 formas aqui.
1. Utilizando em um editor HTML:
a. Coloque o stripe como background da página ou de uma tabela.
Nota: o arquivo salvo tem um tamanho pequeno, mas ao aplicá-lo como plano de fundo ele se distribui corretamente.
2. Utilizando no Photoshop:
O stripe pode ser utilizado de forma simples no Photoshop bastando apenas salvá-lo como padrão.
a. Abra o stripe com o Photoshop
b. Vá em Edit (Editar) – Define Pattern (Definir Padrão); e de um nome ao padrão:
c. Utilizando o padrão:
Selecione a camada que deseja aplicar o padrão, depois clique no botão de Layer Style (Estilo de Camada):
Depois clique em Pattern Overlay (Sobreposição de Padrão):
Então, selecione o padrão:
Clique na imagem para ampliar
Veja o resultado final:
Agora é só você soltar a imaginação e fazer os seus ajustes.
Outro stripe também pode ser visto em uma webpage que estou fazendo: http://www.tenaneoliveira.com.br/index.php
Visite o site Fast Forward e prestigie o autor deste tutorial.
Nenhum comentário:
Postar um comentário