<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MXStudio &#187; Fabiocosta</title>
	<atom:link href="http://www.mxstudio.com.br/author/fabiocosta/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mxstudio.com.br</link>
	<description>Macromedia e Adobe - Artigos, colunas, tutorias e muito mais...</description>
	<lastBuildDate>Sun, 29 Jan 2012 11:31:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Criando userboxes no fireworks</title>
		<link>http://www.mxstudio.com.br/design/fireworks/criando_userboxes_no_fireworks/</link>
		<comments>http://www.mxstudio.com.br/design/fireworks/criando_userboxes_no_fireworks/#comments</comments>
		<pubDate>Mon, 08 Oct 2007 00:00:00 +0000</pubDate>
		<dc:creator>Fabiocosta</dc:creator>
				<category><![CDATA[Fireworks]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[Vamos ver mais um efeito legal utilizando o Fireworks.]]></description>
			<content:encoded><![CDATA[<p><script src="http://www.mxstudio.com.br/js/ColorCode.js"></script></p>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td id="colunaTexto" valign="top">
<h1>Criando Userboxes no Fireworks</h1>
<h3>Pré-Requisitos</h3>
<p align="justify">Macromedia Fireworks 8</p>
<h3><strong>Conteúdo</strong></h3>
<p><strong>Primeiramente o que são userboxes:</strong><br />
São imagens que se utilizam nas assinaturas dos foruns para mostrar os gostos do utilizador, parecidas com userbars, mas com o tamanho: <strong>50×125px</strong>.</p>
<p>Agora que temos a definição de userboxes, vamos ver uma amostra de nosso resultado final.</p>
<p><img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/resultado_final.jpg" alt="" width="50" height="125" /></p>
<p><strong><a href="http://www.mxstudio.com.br/apoio/upload/fabiooutubro07.rar">Material que será usado no artigo</a></strong></p>
<p><strong>Desenvolvimento:</strong></p>
<p><strong>1º Passo:<br />
</strong>Vamos criar um novo arquivo(CTRL+N) com <strong>50x125px</strong> com fundo branco.<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_1.gif" alt="" width="50" height="125" /><br />
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 <strong>(CTRL+R)</strong> ou através do menu <strong>File-Import. </strong>Ajuste a posição como prefirir a minha ficou assim:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_1_lara.gif" alt="" width="50" height="125" /></p>
<p><strong>2º Passo:</strong><br />
Para dar um toque a mais em nossa userboxe, vamos criar umas scan lines, para isso crie um retangulo com a ferramenta <strong>Rectangle Tool(U)</strong><img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/retangle_tool.gif" alt="" width="20" height="21" />, com <strong>50x125px</strong> posicione no centro da imagem <strong>X=0 e Y=0</strong>, coloque o preenchimento <strong>Solid #000000</strong> e vamos escolher no painel de propiedades a opção <strong>Line-Diag 1</strong>, definindo a opacidade em <strong>30%</strong> e Blend Mode como <strong>Screen</strong>, as imagens dizem tudo, acompanhem abaixo:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_2.gif" alt="" width="500" height="122" /><br />
Veja como ficou:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_2_lara.gif" alt="" width="50" height="125" /></p>
<p><strong>3ºPasso:<br />
</strong>Agora vamos fazer as bordas, vamos criar dois retangulos com a medida do arquivo <strong>50x125px</strong> e retirar o preenchimento, no primeiro retangulo definiremos um contorno branco de <strong>3px</strong>. No segundo retangulo definiremos um contorno preto de <strong>1px. </strong>Acompanhem abaixo.<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_3_borda.jpg" alt="" width="50" height="125" /></p>
<p><strong>4º Passo:</strong><br />
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)<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/subselection.gif" alt="" width="19" height="18" />, definiremos este retangulo como mostra a figura abaixo:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/patch.gif" alt="" width="500" height="122" /><br />
Imagem do retangulo criado:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/glass.gif" alt="" width="59" height="135" /><br />
Resultado:<br />
<img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/passo_4_result.jpg" alt="" width="50" height="125" /></p>
<p><strong>5º Passo:<br />
</strong>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.</p>
<p><strong>Resultado Final:<br />
</strong><img src="http://www.mxstudio.com.br/imagens_artigos/fabiocosta_box_outubro07_imagens/resultado_final.jpg" alt="" width="50" height="125" /></p>
<p><strong>Considerações Finais:<br />
</strong>A criatividade é por conta de vocês, espero que tenham gostado do artigo, em breve estarei escrevendo muito mais.</p>
<p class="style1"><strong>Autor: Fábio Costa de Souza &#8211; Colunista Fireworks do Portal MXSTUDIO</strong></p>
<p>Qualquer dúvida  acesse o nosso <a href="http://forum.mxstudio.com.br" target="forum">fórum</a>.</td>
</tr>
</tbody>
</table>
<p><script type="text/javascript"><!--
&nbsp;FormatAS(new Array(\\\'codigo\\\',\\\'codigo1\\\',\\\'codigo2\\\',\\\'codigo3\\\',\\\'codigo4\\\',\\\'codigo5\\\'));
// --></script> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.mxstudio.com.br/design/fireworks/criando_userboxes_no_fireworks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

