Criando Caixas 3D – Parte 2

• Tweet
• Sharebar

• Tweet

Salve, comunidade do MXStudio

Retomando a série de tutoriais sobre a criação de caixas tridimensionais, veremos hoje como criarmos outro “box” para software, porém, com cantos arredondados. Assim como as caixas do Windows Vista. Haverá um pouco mais de trabalho que no tutorial anterior, contudo, os efeitos serão bem mais satisfatórios.

Pré-Requisitos

• Facilidade no manuseio do Fireworks CS3
• Destreza quanto à utilização do Pen Tool

Objetivo

• Criar uma caixa 3D com contornos arredondados, estilo Windows Vista

Conteúdo

1º Passo: Preparação do ambiente

Como de praxe, vamos preparar nosso ambiente afim de passarmos um sensação tridimensional para o nosso objeto. Assim como fizemos no tutorial anterior (Como Criar Caixas 3D: Parte 1), em uma área de 665 x 530 pixel, façamos dois retângulos como mostrado na imagem abaixo.

Fig.01: Criação do ambiente

2º Passo: Criação do “molde” da caixa

O passo seguinte requer um pouco de habilidade quanto ao manuseio do Penn Tool. Quem sentir alguma dificuldade, recomendo lerem Atalhos da Pen Tool só para terem uma noção maior.

Com apenas 7 pontos, devemos criar o molde da caixa como a imagem abaixo:

Fig. 02: Criação do molde com Pen Tool

3º Passo: Aplicando efeito metálico

Em seguida, segurando a tecla ALT, clicando e arrantando para o lado nosso molde, faremos uma duplicação do mesmo. Neste, aplicaremos um preenchimento gradiante linear ‘Silver’ com as seguintes características:

Fig. 03: Preenchimento metálico

4º Passo: Efeito de capa

Vamos colocar o molde metálico atrás da imagem original (amarelo) e fazer pequenos deslocamentos para cima e para direita como mostra a imagem:

Fig. 04: Ajuste do molde

Agora, aplicaremos outro gradiente linear no molde amarelo (#FFCC00) e suas variações (até #FEF9D8), de acordo com a imagem abaixo:

Fig.05: Efeito gradiente linear

5º Passo: Contorno gradiente

Para darmos um toque de sofisticação, vamos utilizar um recurso que tem origem do Photoshop, mas que veio disponibilizado no Fireworks. É óbvio que seus atributos são simplórios, todavia, o resultado é bacana.

A intenção é darmos um contorno ao molde amarelo com efeito gradiente.

Para isso, selecionaremos o molde e clicaremos em Filters > Photoshop Live Effects e em seguida marcaremos a opção Stroke e configuremos de acordo com a imagem a seguir:

Fig. 06: Aplicação do filtro Photoshop Live Effects > Stroke

O resultado obtido é este:

Fig. 07: Aplicação do Stroke

6º Passo: Criando profundidade

Se olharmos bem, do jeito que está, nosso desenho parece duas “chapas” sem profundidade, oco. Vamos utilizar um simples artifício para sanar este problema. Criaremos, com o peen tool, um objeto como mostra a sequência de imagens a seguir:

Fig. 08: Inserção de objeto para profundidade

7º Passo: Transparências

Para o “trem” (como dizem a galera de Goiás e Minas Gerais) fica “bão”, vamos criar aquielas sobras transparentes que ficam em volta da caixa. Para isso, dupliquemos o molde amarelo e deixemos ele na cor sólida #858585 e com opacidade em 17%.

Fig. 09: Aplicação de opacidade

Com esta transparência selecionada, façamos uma nova cópia, alterando o valor da opacidade para 30% e suas dimensões de acordo com a imagem abaixo:

Fig. 10: Nova opacidade

8º Passo: Detalhamento

E enfim, chegamos ao oitavo e último passo que trata especificadamente, dos detalhes que comporão a caixa. Aí fica a critério de cada um. Vejamos o resultado que empreguei logo abaixo:

Bom pessoal, terminamos aqui mais um tutorial.

Um grande abraço.

CarlosHPS Webdesigner
As dúvidas devem ser postadas no fórum do MX Studio ou no meu blog ok?

Um abraço.

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO

Não deixem de me fazer uma visita no meu blog – www.carloshps.com.br/blog e ao meu portfólio – www.carloshps.com.br/portfolio
Fonte: Talk Mania | Adaptação: CarlosHPS Webdesigner

Escrito por CarlosHPS Webdesigner on outubro 15, 2008. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo