Criando Layout – Empresa de Tecnologia: Parte 1

Boa! Ronaldo ! >:P

10/10 :D

<p>Neste tutorial, veremos como criar um <em>layout </em>para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.</p>
<h2>Pré-Requisitos</h2>
<p>Facilidade quanto ao manuseio do <em>Fireworks </em>CS3/CS4</p>
<h2>Objetivo</h2>

<p>Criar um <em>layout </em>para uma empresa de tecnologia utilizando o <em>Fireworks</em></p>
<h2>Conteúdo</h2>
<h3>1º Passo – Definindo a Estrutura do Site</h3>
<p>Como mencionei no tutorial <strong><a title="Criando um site passo-a-passo: Parte 5" href="http://www.carloshps.com.br/blog/criando-um-site-passo-a-passo-parte-5/" target="_blank">Criando um Site Passo-a-Passo: Parte 5</a></strong>, a utlização de um <em>Wireframe</em>, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:</p>
<div>
<dl>

<dt>
<div id="attachment_2559" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-wareframe.jpg"><img class="size-medium wp-image-2559" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig01-wareframe-300x181.jpg" alt="Fig. 01 - Wareframe - Estrutura do website" width="300" height="181"></a><p class="wp-caption-text">Fig. 01 - Wareframe - Estrutura do website</p></div>
</dt>
</dl>
</div>
<h3>2º Passo – Utilizando Modelo do 960 <em>Grid System</em></h3>
<p>Grande parte dos <em>layouts </em>desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 <em>Grid</em>. Portanto, façamos o <em>download </em>no site oficial – <a href="http://960.gs" target="_blank"><strong>960.gs</strong></a> e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).</p>

<p>E qual deles usar?</p>
<p>Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01″), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um <em>layout </em>com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.</p>
<p>Então, ao abrirmos o arquivo <strong>960_grid_12_col.png</strong>, teremos:</p>
<div>
<dl>
<dt>
<div id="attachment_2560" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig02-960grid-12col.jpg"><img class="size-medium wp-image-2560" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig02-960grid-12col-300x297.jpg" alt="Fig. 02: 960 Grid System - 12 Colunas" width="300" height="297"></a><p class="wp-caption-text">Fig. 02: 960 Grid System - 12 Colunas</p></div>
</dt>
</dl>

</div>
<h3>3º Passo – Criação do Topo – Tarja</h3>
<p>Com um retângulo de <strong>940 x 05 <em>pixel</em></strong>, de preenchimento<strong> #28333C</strong>, criaremos uma pequena “tarja”<img src="/DOCUME%7E1/CURSOO%7E1/CONFIG%7E1/Temp/moz-screenshot.jpg" alt="">:</p>
<div>
<dl>
<dt>
<div id="attachment_2561" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig03-tarja.jpg"><img class="size-medium wp-image-2561" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig03-tarja-300x51.jpg" alt="Fig. 03 - Criação da tarja do topo" width="300" height="51"></a><p class="wp-caption-text">Fig. 03 - Criação da tarja do topo</p></div>

</dt>
</dl>
</div>
<h3>4º Passo – Criação do Topo – Barra de Menu</h3>
<p>Criemos outro retângulo de dimensões <strong>940 x 30 <em>pixel</em></strong>, com a mesma cor da tarja e posicionamento <strong>X: 40 e Y: 70</strong>:</p>
<div>
<dl>
<dd>
<div id="attachment_2562" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig04-barra-menu.jpg"><img class="size-medium wp-image-2562" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig04-barra-menu-300x47.jpg" alt="Fig. 04: Barra de menu" width="300" height="47"></a><p class="wp-caption-text">Fig. 04: Barra de menu</p></div>

</dd>
</dl>
</div>
<h3>5º Passo – Criação do Topo – Logotipo, Feed e Twiter</h3>
<p>Realizando os <em>downloads </em>do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:</p>
<p><a href="http://www.carloshps.com.br/blog/criando-layout-empresa-de-tecnologia-parte-1/" target="_blank">LOGOTIPO </a>| <a href="http://www.carloshps.com.br/blog/criando-layout-empresa-de-tecnologia-parte-1/" target="_blank">ÍCONES</a><br>
(desenvolvedor, o <strong><a href="http://dryicons.com/" target="_blank">Dry Icons</a></strong>)</p>

<p style="text-align: center;">
</p><div>
<dl>
<dt></dt>
<dd>
<div id="attachment_2563" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig05-logotipo.jpg"><img class="size-medium wp-image-2563" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig05-logotipo-300x146.jpg" alt="Fig. 05: Posicionamento do logotipo" width="300" height="146"></a><p class="wp-caption-text">Fig. 05: Posicionamento do logotipo</p></div>
</dd>
</dl>
</div>
<div>
<dl>
<dd>
<div id="attachment_2564" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig06-icones-topo.jpg"><img class="size-medium wp-image-2564" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig06-icones-topo-300x135.jpg" alt="Fig. 06: Ícones, Feed, Twiter e links do topo" width="300" height="135"></a><p class="wp-caption-text">Fig. 06: Ícones, Feed, Twiter e links do topo</p></div>
</dd>
</dl>

</div>
<p>Vejamos o resultado até aqui:</p>
<div>
<dl>
<dt>
<div id="attachment_2565" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig07-resultado-parcial1.jpg"><img class="size-medium wp-image-2565" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig07-resultado-parcial1-300x85.jpg" alt="Fig. 07: Resultado até aqui" width="300" height="85"></a><p class="wp-caption-text">Fig. 07: Resultado até aqui</p></div>
</dt>
</dl>
</div>
<h3>6º Passo – Criação do Topo – Barra de Menu</h3>
<p>E concluindo o topo, utilizando a fonte <strong>Arial Narrow, tamanho 13 e cor #D7E1E8</strong>, posicionemos os itens como na imagem a seguir:</p>

<div>
<dl>
<dt></dt>
<dd>
<div id="attachment_2566" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig08-menu.jpg"><img class="size-medium wp-image-2566" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig08-menu-300x109.jpg" alt="Fig. 08: Barra de menu - links" width="300" height="109"></a><p class="wp-caption-text">Fig. 08: Barra de menu - links</p></div>
</dd>
</dl>
</div>
<h3>7º Passo – Criação do <em>Background</em></h3>
<p>Passemos agora para a criação do <em>background</em> do site. Façamos um retângulo com as dimensões <strong>940 x 350 pixel</strong>. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:</p>

<div>
<dl>
<dd>
<div id="attachment_2567" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig09-background.jpg"><img class="size-medium wp-image-2567" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig09-background-300x180.jpg" alt="Fig. 09: Criação do background" width="300" height="180"></a><p class="wp-caption-text">Fig. 09: Criação do background</p></div>
</dd>
</dl>
</div>
<h3>8º Passo – Inserindo Imagem dos Computadores</h3>
<p>De acordo com a imagem abaixo, após realizarmos o <em>download </em>dos computadores, posicionemos nas coordenadas – <strong>X: 379 | Y: 71</strong>. E Complementemos com o <em>slogan</em> da empresa: “<strong>Empresa Especializada em Tecnologia WEB</strong>”</p>

<p><a href="http://www.carloshps.com.br/blog/criando-layout-empresa-de-tecnologia-parte-1/" target="_blank">COMPUTADORES</a></p>
<div>
<dl>
<dd>
<div id="attachment_2568" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig11-lista-servicos.jpg"><img class="size-medium wp-image-2568" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig11-lista-servicos-300x219.jpg" alt="Fig. 10: Inserção do slogan da empresa e imagem ilustrativa" width="300" height="219"></a><p class="wp-caption-text">Fig. 10: Inserção do slogan da empresa e imagem ilustrativa</p></div>
</dd>
</dl>
</div>
<h3>9º Passo – Lista de Serviços – Textos</h3>
<p>Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.</p>
<p>Posicionemos os textos conforme a imagem abaixo:</p>
<div>

<dl>
<dt>
<div id="attachment_2569" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig11-lista-servicos1.jpg"><img class="size-medium wp-image-2569" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig11-lista-servicos1-300x219.jpg" alt="Fig. 11: Lista de serviços da empresa" width="300" height="219"></a><p class="wp-caption-text">Fig. 11: Lista de serviços da empresa</p></div>
</dt>
<dd>
</dd>
</dl>
</div>
<h3>10º Passo – Lista de Serviços – Ícone</h3>
<p>Agora, criaremos os ícones para cada item da lista.</p>
<p>Primeiramente, façamos um círculo na cor branca e com as dimensões <strong>14 x 14 px</strong>. Depois uma estrela que se transformará num <strong>triângulo de 7 x 6 px</strong>.</p>

<div>
<dl>
<dd>
<div id="attachment_2570" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig12-icone.jpg"><img class="size-medium wp-image-2570" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig12-icone-300x185.jpg" alt="Fig. 12: Criação do ícone" width="300" height="185"></a><p class="wp-caption-text">Fig. 12: Criação do ícone</p></div>
</dd>
</dl>
</div>
<h3>11º Passo – Lista de Serviços – Botões</h3>
<p>E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”</p>
<div>
<dl>
<dt>
<div id="attachment_2571" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig13-botao.jpg"><img class="size-medium wp-image-2571" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig13-botao-300x224.jpg" alt="Fig. 13: Criação do botão" width="300" height="224"></a><p class="wp-caption-text">Fig. 13: Criação do botão</p></div>

</dt>
</dl>
</div>
<p>O mesmo processo deverá ser aplicada para a criação do outro botão.</p>
<p>Vejamos o resultado até aqui:</p>
<div>
<dl>
<dt>
<div id="attachment_2572" class="wp-caption aligncenter" style="width: 310px;"><a href="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig14-resultado.jpg"><img class="size-medium wp-image-2572" src="http://www.mxstudio.com.br/wp-content/uploads/2009/07/fig14-resultado-300x172.jpg" alt="Fig. 14: Resultado parcial da primeira parte do tutorial" width="300" height="172"></a><p class="wp-caption-text">Fig. 14: Resultado parcial da primeira parte do tutorial</p></div>
</dt>
<dd>
</dd>
</dl>
</div>

<p>Bom, pessoal</p>
<p>No próximo tutorial, concluiremos o <em>layout</em>.</p>
<p>Até lá.</p>
<p>CarlosHPS Webdesigner <img src="http://www.mxstudio.com.br/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley">