Criando userboxes no fireworks

Criando Userboxes no Fireworks

Pré-Requisitos

Macromedia Fireworks 8

Conteúdo

Primeiramente o que são userboxes:
São imagens que se utilizam nas assinaturas dos foruns para mostrar os gostos do utilizador, parecidas com userbars, mas com o tamanho: 50×125px.

Agora que temos a definição de userboxes, vamos ver uma amostra de nosso resultado final.

Material que será usado no artigo

Desenvolvimento:

1º Passo:
Vamos criar um novo arquivo(CTRL+N) com 50x125px com fundo branco.

Neste arquivo, importe uma imagem de sua preferência, aqui estou usando uma da Lara Croft (do Game Tomb Raider), para importar a imagem utilize o comando (CTRL+R) ou através do menu File-Import. Ajuste a posição como prefirir a minha ficou assim:

2º Passo:
Para dar um toque a mais em nossa userboxe, vamos criar umas scan lines, para isso crie um retangulo com a ferramenta Rectangle Tool(U), com 50x125px posicione no centro da imagem X=0 e Y=0, coloque o preenchimento Solid #000000 e vamos escolher no painel de propiedades a opção Line-Diag 1, definindo a opacidade em 30% e Blend Mode como Screen, as imagens dizem tudo, acompanhem abaixo:

Veja como ficou:

3ºPasso:
Agora vamos fazer as bordas, vamos criar dois retangulos com a medida do arquivo 50x125px e retirar o preenchimento, no primeiro retangulo definiremos um contorno branco de 3px. No segundo retangulo definiremos um contorno preto de 1px. Acompanhem abaixo.

4º Passo:
Vamos fazer um efeito de glass no canto superior esquerdo da userbox, para fins estéticos. Primeiro criaremos um retangulo com 50x70px e com a ferramenta Subselection Tool(A), definiremos este retangulo como mostra a figura abaixo:

Imagem do retangulo criado:

Resultado:

5º Passo:
Bem, temos a nossa userboxe pronta, agora vamos adicionar a tipografia, por padrão o tamanho da fonte utilizado nesse tipo de trabalho é 10px, com contorno preto, mas vocês podem fazer modificações a gosto.

Resultado Final:

Considerações Finais:
A criatividade é por conta de vocês, espero que tenham gostado do artigo, em breve estarei escrevendo muito mais.

Autor: Fábio Costa de Souza – Colunista Fireworks do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

Escrito por Fabiocosta on outubro 8, 2007. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

1 resposta a Criando userboxes no fireworks

  1. po cara muito bom o seu artigo,
    eu ja tinha feito curso de Web Desingn e não sabia que o Fire fazia isso, valeu mesmo em.
    Parabéns.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>