Generación de un Boton 3D

A continuacion se te presentan una serie de pasos para realizar un boton utilizando 3DStudio Max y Photoshop.

Obtener el color del fondo

Lo primero que haremos sera cargar en Photoshop el archivo que contiene la imagen de fondo de nuestra pagina web, con el cursor me situo en la parte mas clara de la imagen, para poder obtener las componentes RGB, en este caso son R=78, V=147 y A=163, este va a ser el color de fondo del render del boton que voy a modelar con 3D Studio Max.

Modelado del Boton en 3D Studio Max

La Esfera

Primero vamos a la paleta Create, selecionamos Geometry y luego a la opcion Sphere entonces creamos una esfera de Radius=100 y Segments=36.

A continuacion vamos a modificar la esfera hasta darle la forma que uno desea para ello utilizamos el modificador FFD 2x2x2, este se encuentra en la paleta Modify para ello accionaremos la opcion More..., que esta situada en la parte superior izquierda del panel de botones de esta paleta , la cual nos activara el modificador escogido en ese momento y lo aplicara al objeto seleccionado, en este caso nuestra esfera.

Una ves activado este modificador, primero seleccionamos los puntos de control (se ponenen amarillo) que queremos desplazar y lo vamos moviendo con el cursor hasta obtener la forma deseada para nuestra esfera.

El Texto

Volvemos a la paleta Create, esta ves utilizamos Shapes, esto nos permite crear formas 2D, elegimos la opcion Text, la fuente la dejo tal como esta, Arial, utilizo Size=80 (tamaño del texto), los demas parametros los dejo igual, en Text ingreso el texto que deseo crear Fuente.

Como el texto que acabo de crear es un objeto plano. le voy a dar profundidad y ademas lo voy a biselar, para ello utilizo el modificador Bevel, este lo activo, seleccionando el texto, luego voy al panel Modify, a la opcion More... y de alli selecciono el modificador Bevel y le doy OK.

En este modificador utilizo los siguientes parametros :

• Level 1 : Height= 5.0 Outline= 1.0
• Level 2 : Height= 5.0 Outline= 0.0
• level 3 : Height= 5.0 Outline= -1.0

el resto lo dejo tal como esta, los materiales que tengo asignado a mi modelo son los que por defecto me asigna el programa, con esto doy por terminado el modelado de mi Bonton, ahora me resta asignarle los materiales, una camara y las luces :-).

Asignacion de los materiales

Vamos al menu, Tool, luego a Material Editor..., una vez abierto muestra seis materiales por defecto, alrededor de estos aparecen unos iconos que permiten realizar diversas funciones con los materiales mostrados en el editor, las opciones de este editor son muchisimas por ahora solo voy a utilizar las mas basicas, como ser definir un nuevo material.
Selecciono el primer material, en la ventana de dialogo inferior escribo "mimaterial" le asigno un tipo de sombreado Phong, a continuacion, seleccionando con el mouse sobre cada uno de los rectangulos de color , introdusco los siguientes valores, todos ellos en RGB :

• Ambient : (0, 42, 41)
• Diffuse : (0, 113, 109)
• Specular : (253, 254, 254)
• Filter : (0, 113, 109)

los valores de Shininess=50 (brillo), Shin.Strength=95 (intensidad del brillo) Self-Illumination=0 (autoiluminacion) y Opacity=100 (transparencia), listo , ahora asignamos este nuevo material a nuestra esfera para ello la seleccionamos y hacemos clikc sobre el icono que dice Assign Material to Selection (es el tercer icono de la parte inferior el que tiene una esfera y un cubo).

Ahora vamos a asignarle un material al texto, para ello utilizamos uno de la libreria de materiales de 3D Stuio Max en lugar de crearlo nosotros para cargar un nuevo material hacemos click sobre el primer icono de la parte inferior, el que dice Get Material, se nos abre entonces el Map Browser que es algo haci como un explorador de materiales, elegimos la opcion Mt Library ya que vamos a utilizar uno de los materiales de la libreria de 3D Stuio Max, seleccionamos de la lista el que dice Chrome Blue Sky y hacemos doble click, y ya lo tenemos en nuestro Material Editor..., listo para usarlo!!!, para aplicarlo solo nos resta seleccionar el texto y listo.

Nuestro primer Render !!!

Listo podemos realizar nuestro primer Render de prueba, utilizando para ello las luces que por defecto nos asigno el programa, nos situamos en la ventana Perspective, vamos al menu Rendering, de alli a Render y elegimos el tamaño de la imagen de salida en Output Size la opcion 320x240.

Asignamos una camara

Si queremos una vista particular de nuestro medelo lo mas conveniente es crear una camara, para ello vamos a la paleta Create luego a Cameras y elegimos la opcion Target, y luego con el mouse ubicamos la camara en nuestra escena de manera tal de obtener la vista que deseamos, para ello es necesario cambiar la vista de la ventana Perspective a Camera01, esto se hace situando el cursos del mouse sobre la ventana Perspective, una ves sobre el rotulo que dice Perspective presionamos el boton derecho del mouse y se abre un menu de alli nos vamos a Views y elegimos la vista Camera01, haci tenemos una vista de camara del modelo.

Creando luces

Nos quedaria asignar nuestras propia luces, eso es muy facil, volvemos a la paleta Create, hacemos click en Lights, y elegimos una Target Spot (es algo asi como un reflector que genera uno cono de luz) y dos del tipo Omni (puntuales, es decir iluminan en todas las direcciones) las ubicamos en la escena y podemos modificar todas sus propiedades, tales como su intensidad, color, atenuacion etc.

El Render Final

Para finalizar nos restaria cambiar el color del fondo de la ventana de render para ello utilzamos el color RGB que obtuvimos al principio con el Photoshop, bueno nos vamos al menu Rendering, luego a Environment..., se abre un ventana donde dice Background, Color, le asignamos al Red=78, Green=147 y al Blue=163, con esto cambiamos el color de fondo.
ahora realizamos el Render final, vamos a Rendering, luego a Render, se abre la ventana principal de render y alli fijamos el tamaño de nuestra imagen, yo elegi Width=200 y Height=150, ojo si no queremos que se deforme nuestra imagen tenemos que cuidar que la relacion de aspecto sea 1.33333.
Una ves generada la imagen la guardamos en formato .tga, esto nos permite tener lo que se dice una canal Alfa, de nuestra imagen donde el blanco indica las sonas opacas y el negro las transparentes ahora solo nos resta convertir esta imagen en formato .tga, a un formato .gif donde el fondo sea transparente.

El ultimo paso!!!

Lo podemos realizar con el Photoshop o cualquier programa de este tipo que permita manejar archivos de diferente formato.
En el Photoshop, vamos al menu Archivo, Abrir y selecionamos nuestro archivo .tga, luego vamos al menu Imagen, Modo y elegimos el modo Color Indexado, y le damos OK. listo ahora podemos guardar nuestro archivo en formato .gif, con el fondo transparente, por fin!!!, para ello vamos al menu Archivos, luego en Guardar como... y selecionamos .gif .
El resultado final seria este, donde se puede ver como es transparente la imagen del boton, permitiendome ver el fondo de la imagen y el ajuste en los bordes es perfecto.

Conclución

Se que hay formas mucho mas facil de crear este tipo de botones, pero es bueno hacerlo de la forma mas dificil posible no? :-), se podria hacer incluso que proyecte su sombra sobre el fonto, las opciones son ilimitadas. ah el botono es grande solo para que se viera mejor el tamaño puede ser cualquiera.

Archivo de esta escena en formato 3D Studio Max 2.0 tutorial.zip, (15 kb)