Criando Caixas 3D – Parte 1

• Tweet
• Sharebar

• Tweet

Ola, pessoal.

Inicio hoje outra série de tutoriais destinada, exclusivamente, à criação de caixas tridimensionais para softwares, presentes, pacotes, etc. Utilizarei diversas técnicas e formas de fazer objetos com esta finalidade.

Vamos começar pelo jeito mais simples que conheço.

Introdução

Vez por outra eu me via desenhando numa folha de papel, meio entediado, um dado, uma “casinha”, um retângulo em 3D. E, sem ter uma técnica aparente, até que ficava legal. Contudo, nada como um Fireworks CS3 da vida para nos dá uma força maior neste processo. Então, fui à busca de tutoriais para este fim, mas, por incrível que pareça, achei pouquíssimos que utilizassem o Fireworks. Então, para provar mais uma vez a eficiência deste “guerreiro”, lá vamos nós.

Pré-Requisitos

Facilidade no manuseio do Fireworks CS3.

Objetivo

Criar uma caixa (box) em 3D, simulando uma embalagem para software.

Conteúdo

1 – Preparando o Ambiente

Criar uma caixa tridimensional sem antes prepararmos um ambiente para ela, passa uma sensação que a caixa está “voando” no vazio, e isso, no mínimo, é um tanto estranho, não acham!?

Então, vamos preparar um fundo legal para comportar nossa caixa.

Fig.01: Criação do ambiente

2 – Criando a Capa e o Dorso

Para quem não sabe, eu trabalhei alguns anos na Universidade Estadual de Goiás como auxiliar de biblioteca e aprendi muito sobre catalogação, arquivamento e o significado de dorso. Vocês sabem o que é?

Simples. O dorso nada mais é do que a “lateral” de um livro, revista, caixa de dvd… e serve para identificarmos determinado exemplar dentre vários outros. E é o que faremos agora. Vejam:

Fig. 02: Capa e dorso da caixa

Vamos dar uma geral na caixa, criando uma tarja branca para ela.

E em seguida, desenvolver uma arte simples onde o conceito “pouco é muito” foi utilizado…rsrs

Fig. 04: Arte final da caixa

3 – Montando a Caixa

Vamos, agora, unir as duas partes, clicando no dorso (agrupe seus elementos antes) e arrastando-o horizontalmente para a direita até encostar na capa.

Em seguida, para nos orientar melhor, vamos inserir linhas-guia que serão nossa referência no momento de redimensionarmos o dorso e a capa. Para quem não lembra ou nunca utilizou as linhas-guia (guides), basta clicar em uma das réguas (rules) horizontal ou vertical, segurar e arrastar para a área de desenho. Em seguida, dando dois cliques sobre a linha, podemos posicionar exatamente onde queremos, digitando seu respectivo local.

Fig. 06: Linhas-guia

Agora vem a deformação dos retângulos. Para isso, vamos utilizar a ferramenta Distort tool (Q):

Fig. 07: Ferramenta Distort tool

Com o dorso selecionado, arrastaremos às extremidades da lateral esquerda até os pontos de intercessão mais próximos como mostram a figura:

Fig. 08: Aplicando distorção no “dorso”

O mesmo procedimento deve ser aplicado para distorcermos a capa. Vejamos:

Fig. 09: Aplicando distorção na “capa”

E o resultado é este:

Fig. 10: Resultado final

4 – Criando Efeito “Reflexo”

Para ficar um pouco mais realista, pessoal, vamos criar um efeito de reflexo.

1º vamos selecionar as tarjas brancas da capa e do dorso e rotacioná-los em 180º. O Flip vertical não é uma boa opção. Em seguida, aplicaremos o efeito Fade (Commands > Creative > Fade Image).

Fig. 11: Utilizando o “Fade Image

Fazendo os devidos ajustes, teremos este resultado:

Fig. 12: Resultado final

Bem, pessoal, espero que tenham gostado.

Na próxima matéria desta série, criaremos outra caixa estilo Windows Vista.

Até lá!

CarlosHPS Webdesigner

As dúvidas devem ser postadas no fórum do MX Studio, no meu blog ou enviadas para o e-mail carloshps@mxstudio.com.br, ok?

Um abraço.

Autor: CarlosHPS Webdesigner – Colunista Fireworks do Portal MXSTUDIO
Não deixem de me fazer uma visita em meu Blog – www.carloshps.com.br/blog e ao meu portfólio – www.carloshps.com.br/portfolio

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