.:: Criando vinheta para o site ::.

Neste tutorial iremos construir alguns elementos visuais que chamaremos de “vinhetas ilustrativas”. Elas servirão para chamar a atenção e guiar o usuário durante a sua navegação nas páginas da web site.

Janela do documento:

O Fireworks não abre automaticamente um novo documento, ou seja, não existe uma área de trabalho fixa. Isso ocorre para que você possa determinar as características (largura, altura, cor e resolução) do objeto a ser criado. Antes de abrir o novo documento é importante que sejam definidas estas características.

W = 20 pixels de largura
H = 140 pixels de altura
Custom = #C1C1A4

Para iniciar nossa vinheta iremos criar os quadrados que compõe graficamente, utilizaremos a ferramenta Rectangle (retângulo) presente na seção Vector (Vetor) do painel Tools (Ferramentas).

Crie apenas um os demais serão duplicados e mudados suas configurações.

1º Retângulo
W = 9
H = 9
Fill color (cor de preenchimento) = #000000
Stroke color (cor do traço, borda) = #000000
2º Retângulo
W = 9
H = 9
Fill color (cor de preenchimento) = #000000
Stroke color (cor do traço, borda) = #000000
3º Retângulo
W = 9
H = 9
Sem cor de preenchimento
Stroke color (cor do traço, borda) = #666666

Próximo passo utilizaremos a ferramenta Line (linha)

Desenhe a linha que compõe a vinheta. Na barra Tools (Ferramentas) selecione a Line (Linha).

Na janela do documento clique e arraste para desenhar uma linha reta, deixe-a com 1 pixel de largura e 115 pixels de altura no sentido vertical.



Configuração do traço / contorno

Vamos alterar a configuração da linha que acabou de ser desenhada. Usando a ferramenta Pointer (ponteiro) selecione a linha.
No inspetor Properties clique na lista Stroke Category (categorias do traço), em seguida escolha a opção Stroke Options (opções de traço).

Veja a imagem seguinte mostrará a localização da Stroke Options (opções de traço). no inspetor Properties (propriedades)


A caixa stroke Options (Opções do traço) será aberta. Nela vamos alterar as características da linha.

Nossa linha terá as seguintes configurações:

1.Stroke category (categoria de traço) = escolha a opção Pencil
2.Stroke color (cor de traço)= altere para a cor #666666
3.Tip Size (Tamanho da ponta)= escolha o tamanho
4.Texture (textura)= escolha a opção Burlap (Tecido Grosseiro)


Usando a ferrramenta Text (Texto), iremos fazer a identificação da vinheta.

Mantendo a caixa de texto selecionada, altere as características da palavra Lojas para: fonte do tipo Arial Narrow, tamanho 14 negrito, alinhamento à esquerda e com anti-alias do tipo Crisp.
Em seguida no menu MODIFY >> Transform >> Rotate 90º CCW
Veja o resultado final:


Pratique o que vimos até o momento e desenvolva outras vinhetas mudando a cor de preenchimento dos retângulos.
Veja o resultado final:



Espero que tenham gostado desse tutorial e com as ferramentas utilizadas produzam suas vinhetas


Obs: material aplicado no curso de web designer na SOS Ed. Profissional.

“A criatividade faz parte da vida de um Web Designer”
Joelson Alves