Tutorial: Creando Texto 3D Usando Adobe Illustrator y Adobe Photoshop CS4.

Publicado por Samuel | 12.25.2008
Featured . Headline . Tutoriales

Este es un efecto que he estado observando mucho últimamente, en 1stwebdesigner.com hay un buen tutorial que me sirvió de inspiración para escribir este, el único inconveniente es que el tutorial esta en inglés y además usa el programa Xara 3D que no es muy amistoso que digamos, en este tutorial muestro mi propia forma de lograr este efecto pero apoyándonos ligeramente en Adobe Illustrator.

Parte de Adobe Illustrator.

Paso 1

Empezaremos por crear el área de trabajo, crea uno como el de la imagen de abajo, estoy utilizando Adobe Illustrator CS4.
paso1

Paso 2

Luego escribiremos el texto que deseamos crear,pero crea cada letra individualmente no todo el texto de una vez.
paso2

Paso 3

Ahora selecciona la Herramienta Selección y para cada letra haz esto: ve a Efecto | 3D | Extrusión y biselado.. clic sobre Previsualizar en la opción Bisel escoge Complejo 2, ahora lo único que debe variar en cada letra es la orientación del efecto, para eso basta con que muevas el cubo y tendrás diferentes orientaciones.
paso3

Este es el ultimo paso con Illustrator pero aun no lo cierres, en vez de eso inicia Photoshop, cuando termine de aplicar el efecto a cada letra mi texto tenia este aspecto:
paso3

Parte de Adobe Photoshop.

Paso 4

Iniciamos Photoshop con un documento nuevo con estas características:
paso4

Paso 5

Ajusta el Color Frontal a #172983 y el Color de Fondo a #006f9f, luego toma la Herramienta Degradado y haz un degradado de abajo hacia arriba.
paso5

Paso 6

Regresa a Illustrator y empieza a copiar cada una de las letras, toma la Herramienta Selección y da clic sobre cada letra luego presiona Ctrl+C para copiarla, pasa a Photoshop y presiona Ctrl+V para pegarla aparecerá un pequeño cuadro de dialogo el cual muestro mas abajo con los ajustes a usar.
paso6

Paso 7

Ajusta el tamaño de cada letra y presiona Enter.
paso7

Después de copiar las letras puedes cerrar Illustrator, te recomiendo que guardes el archivo, si lo deseas puedes modificar la orientación de las letras ya en Photoshop mediante Ctrl+T, cuando termine de copiar y ajustar el tamaño de las letras mi espacio de trabajo en Photoshop lucia así:
paso7

Paso 8

Vamos aplicar estilos de capa, da clic derecho sobre la miniatura de la primera capa a modificar y selecciona la opción Opciones de Fusión, y haz los siguientes ajustes, haz esto para cada letra y solo cambia el color del degradado para cada letra .

paso8
El ángulo de la Sombra Paralela debe ser de acuerdo a la orientación de la letra, desactiva la casilla Usar Luz Global para modificar la orientación de la sombra de forma independiente para cada letra.

paso8
En el Resplandor interior no hay variaciones aplica el mismo ajuste a todas la letras.

paso8
El ajuste Superposición de Degradado debe ser ajustado de forma independiente para cada letra, deja el color oscuro al principio y el suave a final y ajusta el ángulo de acuerdo a la orientación de cada letra.

Al final de aplicar las Opciones de Fusión mi texto lucia así:
paso8

PASO 9

A cada letra aplica el siguiente ajuste, ve a Filtro | Interpretar | Añadir Ruido.. para repetir el efecto en cada letra solo selecciona la siguiente capa y presiona Ctrl+F.
paso9

Paso 10

Luego selecciona la Herramienta Pincel y luego ve a la Paleta Pincel, si no la tienes a la vista puedes ir a Ventana | Pinceles.. ya en la paleta pinceles haz estos ajustes.
paso10
paso10
paso10
paso10

Paso 11

Luego crea una nueva capa mediante Ctrl+Shift+N y da doble clic sobre la miniatura para hacer aparecer las Opciones de Fusión y haz los siguientes ajustes.
paso11

Luego da algunas pinceladas aleatorias alrededor y sobre el texto que creamos, mi resultado fue este:
paso11

Paso 12

Es hora de usar el set de pinceles >>Floral<< descargalos y cárgalos en Photoshop, luego crea una capa por debajo de todas las capas excepto de la del fondo claro, esta parte es variante pues puedes usar los pinceles como tu quieras, con color blanco empieza a decorar el fondo de las letras así:
paso12

Paso 13

Ve a Capa | Nueva Capa de Ajuste | Curvas.. aparecerá un cuadro de dialogo donde cambiarás el Modo de la capa de Normal a Luminosidad y haz un ajuste en la curva como se muestra en la imagen inferior.
paso13

Resultado

Ya esta nuestro texto 3D, como comentario final debo decir que cada letra a quedado como un Objeto Inteligente dentro de Photoshop, esto quiere decir que podemos modificar la letra a la hora que queramos y poner otra claro que al modificar este objeto inteligente Illustrator saldrá a flote nuevamente para poder hacer los cambios en el, cliquea la imagen de abajo para verlo en su tamaño final.
final

Acerca del Autor

Samuel Bran es estudiande de Diseño Gráfico, tiene una gran pasión por el diseño gráfico y web, fan de Adobe y la edición de video. Originario de El Salvador, autor y creador de Photodesigner.Net un blog dedicado a publicar Tutoriales en Español para Adobe Photoshop, Recursos e Inspiración.

47 Comentarios en “Tutorial: Creando Texto 3D Usando Adobe Illustrator y Adobe Photoshop CS4.”

  1. Wirwin Dijo:

    12.30.2008

    barbaro!! sos grande viejo

  2. tct Dijo:

    12.31.2008

    Haven’t been able to get on your website recently. Am here now. Nice tutorial, again.

    Happy New year from Spain.

    Toby

  3. tct Dijo:

    12.31.2008

    Forgot to say. Like the redesigned site. I liked the old one but change is as good as a rest. New design for a new year.

    T.

  4. Samuel Dijo:

    01.2.2009

    I really appreciate every comment you leave in my blog Toby, thanks and you’re welcome.

  5. Edwin Alvarado Dijo:

    01.3.2009

    Muy buen tutorial!

    P.d Tambien estoy probando Gravatar!!!

  6. Texto en 3D con Illustrator y Photoshop | Diego Mattei Blog Dijo:

    01.5.2009

    [...] Enlace | Texto 3D Artístico [...]

  7. Wirwin Dijo:

    01.5.2009

    Samuel solo pasaba para desearte feliz año Dios te bendiga mucho este año

  8. TheBrian Dijo:

    01.5.2009

    Es la primera vez que paso por aca, buen tutorial yo uso Xara 3d pero voy a intentar ahora usar Illustrator. Faltaria la letra I en el PSD y ya tendria las letras para mi nombre Brian jeje. Saludos

  9. Wirwin Dijo:

    01.5.2009

    hey Samuel te deje un premio en mi blog espero lo aceptes

  10. Dario Dijo:

    01.6.2009

    Muy buen tutorial, me ha gustado este sitio, y el resultado es interesante.

    Un saludo, espero que sigas asi ^^

  11. Tutorial creando texto 3d con Illustrator y Photoshop | Tanya's Blog Dijo:

    01.7.2009

    [...] Enlace | Tutorial 3d [...]

  12. Dhamer Dijo:

    01.8.2009

    esta muy bueno este tuto, te felicito de verdad y ¡FELIZ AÑO A TODOS! y pregunto donde puedo conseguir illustrator cs4?

  13. Samuel Dijo:

    01.9.2009

    Muchas gracias a todos por sus comentarios.

  14. Jose Antonio Dijo:

    01.17.2009

    Muy bueno los tutoriales que hay expuestos.

  15. J_UP Dijo:

    01.18.2009

    Brother felicidades, invertí todo mi domingo, en hacer la tarea de tu blog, super contento !
    gracias mil.

  16. Area Photoshop » Creando Texto 3D Usando Adobe Illustrator y Adobe Photoshop CS3 Dijo:

    01.24.2009

    [...] Tutorial Original [...]

  17. Adrian Dijo:

    02.12.2009

    oigaaan esta re buenoo el tutoriial pero quisiera que me pazaraan un link o algoo para descargar el programaa porq no lo tengoo y hace un buen tiempo que quiero hacer este tutorial.. y buscoo buscoo y buscoo y no encuentroo nunka el programa =C

  18. Miquel Dijo:

    02.18.2009

    De verdad me gusta mucho hacer 3d’s pero no tengo el Illustrator
    saveis donde me lo podría descargar, lo necesito…
    por favor contesten a: vilah_petit@hotmail.com

    Gracias de antemano
    y MUY MUY buen trabajo.

  19. Area Photoshop Dijo:

    02.27.2009

    Creando Texto 3D Usando Adobe Illustrator y Adobe Photoshop CS3…

    Buenos Dias, en este tutorial aprenderan a hacer lo que dice el titulo.
    Este tutorial no encontr en la web de Samuel Bran, yo solo lo pase a 1 sola imagen, y cambie algunas cosas.

    Basta de hablar y pasemos al tutorial:

    Tutorial Original
    ……

  20. Leudy Dijo:

    03.28.2009

    holaa!! me encato este diseño!! gracias!!

  21. Samuel Dijo:

    03.30.2009

    De nada Leudy, gracias a ti por comentar.

  22. Fury Dijo:

    04.30.2009

    Valdría aclarar, que al crear las letras en Illustrator, hay que elegir un color claro, si se deja en el negro automático (como hice yo la 1ra vez) no se pueden ver bien los efectos 3D. Muy bueno! Saludos!!

  23. Samuel Dijo:

    04.30.2009

    Fury: Tienes razón amigo, gracias por comentar, actualizaré el tutorial haciendo esa advertencia.

    Gracias!.-

  24. Danny Dijo:

    05.28.2009

    Hola Samuel, muy buen tutorial, necesito hacerte una consulta, en Illustrator (tengo el cs3) utilicé para las letras un negro al 40%, y no tienen la luz que muestran en tu trabajo, al llevarlas a Photoshop, cuando les aplico el degradado, se ven planas, es decir, sin efecto 3D, y podría decirte solo el contorno exterior y dentro el degradado, como dije antes una figura, no un cuerpo degradado, espero puedas ayudarme a solucionar este inconveniente, saludos.

  25. Samuel Dijo:

    05.28.2009

    Danny: Hola!!, te recomiendo usar un tono de blanco claro como #eeeeee ó #e5e5e5, en cuanto a la ausencia del efecto 3D seguramente esta en la forma que copias el texto, te recomendaría que al momento de transferir el texto lo hagas de programa a programa sin copiar simplemente arrastrar y soltar desde la ventana de Illustrator hacia la ventana de Photoshop.

    Si tienes más complicaciones contactame a través de el formulario de contacto.

    Saludos!. :D

  26. Ivaan Dijo:

    06.21.2009

    Muy bueno! gracias por el brush y por la idea, tienes mas tutoriales?

  27. javier Dijo:

    07.19.2009

    Hola maestro!! buenisimo el tutorial… me encanto ya probe las técnicas y le aplique nuevas..

    felicidades Samuel!!

    chapitas!!!!

  28. Ramon Dijo:

    07.26.2009

    Gracias Samuel, sos un fenomeno..!!! he aprendido muchisimo con tus tips.
    Te saluda un Uruguayo en Atlanta GA.

  29. Ramon Dijo:

    07.27.2009

    Samuel , le voy a agregar una i a tu apellido.
    BRAIN, porque sos un cerebro. gracias papá..!!

  30. Samuel Dijo:

    07.27.2009

    Gracias por tus comentarios Ramon!! :D me alegra que valores mi trabajo, muchas gracias de verdad, un saludo Grande!!.

    Gracias a todos por comentar, es un gran estimulo a escribir más tutoriales.

  31. FANTOMAS Dijo:

    08.8.2009

    PODRIAS MANDARME EL FORMATO PSD A MI CORREO?, POR FAVOR.
    EL LINK NO SIRVE MARCA ERROR.

  32. christian eduardo Dijo:

    09.14.2009

    Esta locaso si puedes mandame el programa para bajarlo a mi pc.

  33. DubiWeb.Tk » Blog Archive » Texto en 3D con Illustrator y Photoshop Dijo:

    10.11.2009

    [...] Enlace del Manual [...]

  34. elmer fernandez muñoz Dijo:

    11.11.2009

    bueno mi nombre es Elmer y tambien soy estudiante de diseño gráfico aquí en el país de Perú y dejeme contarles que esta carrera es una pasión que llevamos en la sangre y es por eso que elegimos nuestras carreras, estoy en el IV ciclo de mi carrera y espero poder recibir o encontrar más tutoriales.. bueno muchachos me despido deseandoles a todos mis colegas que logren todos sus metas.. bye

  35. andelson Dijo:

    11.26.2009

    hola mi nombre es andelson de santo domingo REPUBLICA DOMINICANA esta tambien soy estudiante de diseño grafico se ve interesante tu blog te felicito por eso buen trabajo es lo k necesitamos en la web personas k suban contenidos educativos sigue trabajando.

  36. Juan Pablo Dijo:

    12.8.2009

    Excelente tutorial muchas gracias, primera vez en tu página y esta muy buena,
    se agradece mucho el esfuerzo que haces.
    Saludos

  37. eduardo Dijo:

    12.16.2009

    Estupendo los tutoriales y el trabajo que haces, desde españa un saludo.

  38. Diego Dijo:

    01.11.2010

    Muy Bueno el tutto..Gracias por el aporte! :D

  39. vladcain Dijo:

    01.14.2010

    hey esta increible este tutorial soloq tengo una pregunta q tipo de letra usaste en illustrator porq cuadno yo las hice alli y las pase a photoshop no me kedo como a vs porq las lineas q kedan en las letras lo q le da la forma 3D no me kedaron como deberian noc si me equivoke en el tipo de letra o q ondas…. pero gracias por este tremendo turorial y lo q mas me llega q eres salvadoreño y q ayuda a los tuyos a aprender a usar estos programas muchas gracias

  40. Giovanni Dijo:

    01.19.2010

    Gracias por el tutorial me gusto mucho saludos de Colombia

  41. Ivan (Bolivia) Dijo:

    01.22.2010

    GENIAL ,AVER ECHATE OTRO POR FA……

  42. Cinty Dijo:

    02.4.2010

    Samuel muchas gracias por est tutorial… estuv viendolo mucho en internet y como estaba en inglés no podía hacerlo… recién lo terminé y m encanta! =P muchas gracias d nuevo!!!

  43. marcelo Dijo:

    02.4.2010

    hola como aGo para bajar el adobe Illustrator xq no lo tengo y el poto shop cs4 q tengo no tiene 3d al menos el mio o no lo encuentro donde esta? contestam gracias

  44. juan Dijo:

    02.7.2010

    esta muy bueno pero me pasas el linck para bajar el adobe illustrator?
    graciass

  45. Gio2kc Dijo:

    02.21.2010

    Exelente.. me ah gustado mucho el resultado te flicito

  46. MATIAS Dijo:

    02.21.2010

    HOLA QUIERO APRENDER COMO SE HACE LETRAS EN 3D
    POR FAVOR
    NO ME SALE PARA SER UN BANNER PARA MI :)
    AVISEMEN :@
    SI CHAU UN BESOS

  47. MATIAS Dijo:

    02.21.2010

    QUIERO LA LINK PARA BAJAR EL ILUSTRADOR ;)

    ¬¬

Deja un Comentario