En este tutorial vamos a utilizar Illustrator para dar un pequeño efecto 3D. No os preocupéis si no lo habéis utilizado nunca, ya que son pasos muy fáciles y simples. Necesitamos Photoshop e Illustrator CS3 mínimo.
Empezaremos creando un nuevo documento con Photoshop, seleccionaremos Archivo > Nuevo desde el menú, o bien con las teclas Ctrl + N. Voy a utilizar el tamaño que necesito para hacer un banner que estoy preparando, por lo que escogeré 450 x 150 píxels. y un fondo transparente para que se adapte a la web. Ahora cambiamos a herramienta de texto, podemos escogerlo en la barra o pulsando la tecla T. Ahora escribimos el texto que necesitamos. Escogemos la fuente Ballpark, de color negro y el tamaño que utilizo es de 60. Si no disonéis de esta fuente la podéis conseguir gratuitamente en http://daFont.com
Con la herramienta de Texto activa todavía, pulsaremos el botón derecho del ratón y seleccionaremos la opción Crear trazado de trabajo. Si nos fijamos, se han marcado todos los puntos alrededor el texto.
Vamos a cambiar a la herramienta Selección de Trazado pulsando la tecla A, luego hacemos clic desde una esquina y arrastramos el cursor sin soltar el botón hasta seleccionar todo el texto. De esta manera se seleccionan todos los puntos.
Ahora tenemos que asegurarnos que no se deselecciona nada y se quede alguna parte del texto atrás. Con todo seleccionado vamos a la barra superior de nuestra pantalla y hacemos clic al botón Combinar (Si no ves el botón combinar es porque no tendrás seleccionada la herramienta Selección de tramo activo). Con los trazos seleccionados ya podemos copiar con las teclas Ctrl + C. Una vez copiado al porta papeles, sin cerrar el Photoshop, ya podemos abrir el Illustrator.
Creamos un nuevo documento con Ctrl + N y le damos los mismos valores que le dimos al crear el documento de Photoshop.
Una vez creado ya podemos pegar el texto que teníamos al porta papeles con las teclas Ctrl + V. Nos dará dos opciones de pegado, debemos seleccionar Forma Compuesta tal y como muestro en la imagen:
Lo más seguro es que al pegar los trazos no tengan color, eso puede ser un problema si se anula la selección, por lo que vamos a utilizar la paleta de color para darle un relleno gris (# E5E5E5). Si no ves la paleta, selecciona Ventana > Color en el menu principal. Vamos a la ventana de la paleta y en Relleno, hacemos doble clic y se abre el selector de color, donde pegaremos el código de color anterior.
El resultado debe ser parecido a este. Si os fijáis hay un tono gris claro como relleno:
Con las trazas seleccionadas todavía, vamos al menú y elegimos: Efecto > 3D > Extursión y biselado… En la nueva ventana que se abre damos al botón Más opciones para expandir y ver el cuadro de diálogo completo. Cambiad los valores y poned los que muestro en la imagen inferior. Fijaros en la fuente de luz que le doy a la esfera, estando situada en la parte inferior derecha. Si tienes la vista previa activada verás los cambios al instante:
Tal y como tenemos los bordes en 3D en estos momentos, el Photoshop no los interpretaría correctamente. Vamos a solucionar esto para poder pasar de nuevo al Photoshop. Desde el menú principal elegimos Objeto > Expandir Apariencia. Ahora ya es compatible con nuestro Photoshop!
Cambiamos de nuevo al Photoshop, pero no cerramos el Illustrator que lo necesitaremos una vez más.
Con el texto seleccionado en el Illustrator, pulsamos las teclas Ctrl + C para seleccionar el texto.
Vamos al Photoshop. Antes de pegar podemos borrar el texto que teníamos anteriormente, pero debemos conservar la capa. Hacemos Ctrl + V para pegar. Cuando nos pregunta como lo pegamos le respondemos Objeto Inteligente.
Ahora la capa que teníamos la renombramos como Fondo, de esta forma iremos identificando las capas y nos será más fácil, y a la nueva capa que se ha creado ahora con la nueva imagen pegada le llamaremos Texto3D.
Ahora debemos volver a Illustrator para obtener otro trazo. Esta vez necesitamos el texto plano de la parte superior de nuestra figura 3D.
Hacemos clic fuera de la imagen para asegurarnos de no tener nada seleccionado. Cuando hayamos deseleccionado, con la tecla Shift presionada seleccionamos la capa superior del texto. Solo debe quedar seleccionada la parte de texto más oscura sin el relieve, tal y como muestro en la imagen:
Una vez seleccionado copiamos con Ctrl + C y volvemos a Photoshop para pegar con Ctrl + V.
Volvemos a escoger como Objeto Inteligente.
Para diferenciar las capas, le vamos a cambiar el color de relleno mediante una capa de estilo. Primero la renombramos para identificarla. A esta le ponemos Texto 2D #1. Luego, en la paleta de capas, le damos al botón derecho del ratón sobre esa misma capa y escogemos la opción: Opciones de Fusión. En estilos de la izquierda escogemos Superposición de Colores y le damos a cambiar el color poniendo 323232 y le damos a aceptar. En la imagen inferior se aprecian los nombres de las capas, y la selección de estilo y el color que le doy al texto de esta capa:
Ahora el siguiente paso es situar la capa 2D en la posición correcta. Esta debe ajustarse de forma que se vea como si fuera la parte superior de las letras 3D. Puedes ayudarte con el zoom para acercar la imagen y verlo con más exactitud. El resultado debe ser como el siguiente:
Ahora vamos a modificar un poco la capa superior para darle un mayor realismo 3D. Empezamos duplicando la capa Texto 2d #1, para ello la seleccionamos en la paleta de capas y pulsamos las teclas Ctrl + J. La renombramos poniéndole Texto 2D #2. Con la capa nueva seleccionada, pulsamos la tecla V para activar la herramienta Mover y con las flechas (cursores), pulsamos una ver la de Arriba y una vez la de Izquierda. De esta forma la desplazamos un poco de la capa inferior.
En este paso vamos a editar el estilo de la capa Superposición de Colores del texto 2D #1. Vamos a la paleta de capas y le damos doble clic a la capa que hemos mencionado y se abre el cuadro de diálogo Estilos de Capa. En la columna izquierda seleccionamos Superposición de Colores y le damos color Blanco (FFFFFF). Aceptamos para confirmar el cambio.
Como podéis apreciar, ya se empieza a ver el resultado, aunque todavía faltan algunos detalles:
Si necesitamos redimensionar la imagen, este es el momento, pero no olvides que debes tener todas las capas seleccionadas para hacer este paso.
Recuerda que si haces algún paso en falso tienes la opción Deshacer con las teclas Ctrl + Z.[/nota]A continuación vamos a crear una pequeña sombra debajo de nuestro texto 3D. Hacemos clic con la tecla Ctrl pulsada sobre el icono de la capa Texto 2D #1 y luego pulsamos la tecla D para resetear los colores. Esto hace que en opciones de relleno pase a primer plano el color Negro. Ahora debemos crear una capa nueva debajo de la capa Texto 3D con el botón que tenemos en la paleta de capas. Aseguraros de crearla debajo de la capa que digo. Observad mi imagen como está creada, y como tengo la selección del texto. Una vez creada la capa, pulsamos las teclas Alt + Ctrl para copiar el texto que seleccionamos antes de la capa Texto 2D #1 pero en color negro, que por eso reseteamos los colores de la paleta. A simple vista tu no verás los efectos de la nueva capa, pero si has seguido los pasos al pie de la letra está creada en su lugar. Ahora renombramos la capa nueva como Sombra #1.
Imagen de ejemplo:
En este paso vamos a retocar un poco los bordes de nuestra sombra, por lo que en el menú principal vamos a Filtro > Desenfocar > Desenfoque Gaussiano y le damos un valor de 0,5 de Radio y le damos a Aceptar. (No olvides que debes tener la capa Sombra seleccionada). Ahora con la flecha cursor hacia abajo la pulsamos hasta que veamos que nos aparece la sombra. Máximo la bajamos que se muestre 1 o 2 píxels por debajo del texto 3D. Tan solo es para dar un pequeño efecto de sombra. Si le damos más de 2 queda bastante feo. Yo recomiendo tan solo 1.
Con la primera sombra creada, la segunda será mucho más fácil. Vamos a duplicar la sombra #1. Con la sombra #1 seleccionada pulsamos las teclas Ctrl + J y con esto ya hemos duplicado la capa. Renombramos la segunda como Sombra #2. Volvemos a Desenfoque Gaussiano Filtro > Desenfocar > Desenfoque Gaussiano y esta vez le damos un radio de 2px.
Debido a que le dimos la fuente de luz a nuestro objeto 3D desde la esquina inferior derecha, vamos a hacer una pequeña modificación para hacer un efecto un poco más convincente. Con la capa Sombra #2 seleccionada pulsamos Ctrl + T para seleccionar la herramienta de Transformación Libre, para mover un poco los puntos de arriba y la izquierda un poco para tirar de la sombra. No lo hagas demasiado, tan solo un poco para que se intuya un poco la sombra. Fíjate en mi imagen:
En la Capa Sombra #2 le doy una opacidad (Paleta de capas) de 70% para aumentar un poco más el realismo.
Puedes darle muchos efectos diferentes y utilizar este manual para crear diferentes textos u objetos. Este es solo un pequeño ejemplo de cómo puedes utilizarlo.
Este es mi logo de la web ya finalizado!
Espero que les haya gustado esta guía.