MXStudio » Fireworks » Criando userboxes no fireworks

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 50×125px 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 50×125px 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 50×125px 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 50×70px 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.


Assine o nosso Feed
1.404 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

1 Comment to Criando userboxes no fireworks

  1. HUGO's Gravatar HUGO
    Abril 19, 2008 at 11:17 pm | Permalink

    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 um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Fabiocosta

Últimos Artigos do Autor