Tags: 3d, efecto, photoshop, texto
Que tal amigos, aqui nuestro primer tutorial para que vean como seran los proximos, quizá han visto muchos tipos de efecto de texto, pero el tutorial que les mostrare cambiara sus expectativas sobre diseño. Antes que nada, este tutorial ya ha sido hecho por Nik Ainley que admiro mucho, por sus grandes obras que hace con el programa photoshop.
Ultimadamente gracias al nuevo avance que esta dando el Adobe Photoshop podemos hacer muchos tipos de diseño de texto, logos, identidades corporativas entre un etc. largo de diseños. Esto es solo un paréntesis.
La explicación de este tutorial es de cómo entendí como se hace el efecto, si desean (para los que saben o hablan ingles) leer el tuto en ingles dejo el link: 3D typographic effects in Photoshop
Lo que deseamos lograr en este tuto, es obtener algo como esto:

Ahora lo que utilizaremos para lograr este efecto a la perfección completa es:
1.- Lo primero que necesitáremos y más importante en este tutorial es el programa Xara 3D, te lo puedes descargar desde aquí: Descargar programa
2.- Packs de brushes, por recomendación unos de tipo floral o tipo artístico, que sean llamativos, aquí unos lugares para descargárselos:
My Photoshop Brushes
Descargarbrushes.com
Psbrushes.net
Fly Brush
Photoshop Brushes
Brusheezy
Aunque tambien pueden usar vectores [vector], shapes, ósea todo lo que te gustaría que lleve. Unos sitios que te recomendaría para buscar recursos serian:
PSDcreativo.com
Photoshoperos.com
Creativos Online.org
Xyberneticos.com
DiegoMattei.com.ar
Photoshop-Design.com
WebIntenta.com
MuchoGrafico.com
Harcoval.net
Si aun no sabes instalar los brushes te recomiendo que te leas este tutorial: Tutorial Brushes
Entre otros muchos más que existe, pero en lo personal son los que mas recomiendo por su calidad y demás.
3.-Degrades, serán útiles para las letras, más adelante se e explicara, como será, pero si necesitas puedes descargártelos aquí: Degradado para Photoshop.
Y creo que es todo, en fin ya es hora de comenzar con el tutorial.
Te comenzare diciendo desde el principio, paso por paso, para que se te haga más fácil:
1.- Creamos un nuevo archivo de tamaño 1024 x 768, aunque si tu deseas otra medida, es a tu gusto, aunque te recomiendo utilizar medidas grandes es mejor
, para crear el archivo nuevo tenemos que hacer lo siguiente: Archivo/ Nuevo o con que solo aprietes Ctrl. + N, en sus opciones pondrás de anchura: 1024 y altura: 768 los dos en píxeles. Tendrás algo como esto:

2.- Lo siguiente ahora será trabajar en tu fondo o background, aquí tambien creo que sea necesario un degrade, lo que harás será esto: con la herramienta bote de pintura (G) rellenaras tu archivo en color Blanco lo siguiente será dar doble click izquierdo a la capa donde lo rellenaste esto servirá para que te abra las opciones de fusión de la capa, y de ahí escogemos en Superposición de Degradado y de los que te descargaste escoge alguno que te paresca elegante o te guste, te ha de salir una ventana así:

3.-Luego donde dice la etiqueta amarilla “Haga click aquí para abrir el selector de degradado”, das click y te abrirá una lista de los degradados que te instalaste, de preferencia, que el estilo o style del degrade sea radial o reflejado, en este caso yo utilizare los colores azules porque son mis favoritos pero tu escoge los que quieras, con estilo radial, una escala de 100, modo normal. Que quede así:

4.- Ya que tengamos el fondo listo vamos con el texto, el texto se hizo con el programa anteriormente mencionado Xara 3D si aun no sabes usarlo te recomiendo que te leas esto:
Tutorial Xara 3D después de leerlo, antes de todo practica, entiendo el programa y míralo bien, el chiste de este siguiente tutorial será crear letra por letra con el programa Xara 3D, luego en el programa xara a cada letra le damos en exportar o Ctrl. + Mayús. + E en modo .PNG y le ponemos el nombre que quiera o para ser mas organizado le ponemos en este caso yo utilizare la palabra LOVE, así que cada letra la guardare en modo .PNG así: L.png O.png V.png E.png después desde nuestra carpeta donde guardamos las letras las arrastramos al photoshop tendrán un fondo blanco el cual recortaras con la herramienta varita mágica y acomodamos como gustes, yo por ejemplo lo hice así:

5.- Lo que nos toca ahora es crear las sombras y demás de las letras, para ello se tendrán que crear 2 capas por cada letra, una encima de ella y una debajo de, esto es para crear la sombra de atrás y adelante, para hacerlo tendrás que hacer lo siguiente, presta mucha atención, apretaremos ctrl. + click izquierdo en la capa de la letra con la que comenzaran, en caso mió es la L luego de dar el click se nos seleccionara la letra damos click en la capa de arriba y listo, solo tendrás que agarrar un pincel difuso de tamaño, en mi caso 17px pero ve viendo tu el tamaño exacto o necesario que debería llevar el tuyo, la sombra debe ir, no a tu imaginación, pero si a tu vista, de cómo veas donde debería ir y eso. Para las sombras de abajo, solo necesitas seleccionar la capa de abajo y a tu visión o vista de cómo crees que quedaría mejor los pones, escoges un pincel difuso más grande como entre 20 a 40, estos serán como que más sombras pero por detrás de las letras, te debe quedar algo así:

6.- Lo que se necesitara ahora es una sombra de fondo, para ello necesitaremos crear una capa debajo de todas las letras y sombras, ósea después de la capa background o fondo, luego seleccionaremos todas las letras, para hacerlo debemos dar ctrl. + Click sobre una letra, la que gustes, luego de eso ctrl. + Alt. + Click sobre las demás letras, que te quede así:

Si te das cuenta he seleccionado todas las letras, después de haber seleccionado todas las letras damos click en la capa que habíamos creado después del fondo y debajo de todas las letras y sombras, y con la herramienta bote de pintura (G)llenamos lo seleccionado ósea las letras seleccionadas de Color Negro, después de haberlo llenado, a esa capa creada le ponemos Filtro/ Desenfocar/ Desenfoque Gaussiano por ejemplo en el mió le puse un Radio de 10 px pero en su caso, tienen que ver que no quede tan sombreado, ósea que no salga tanto por los lados, después de eso con la herramienta Mover o transformar (V) tiramos o jalamos [observa JALAR no MOVER agarras un extremo y jalas] esa sombra hacia abajo, solo un poco que no te pases demasiado, una ves mas blur o desenfoque y cambia la opacidad si las sombras parecen demasiado duras que te quede mas o menos así, si deseas puedes crear mas sombra creando una nueva capa encima de la que utilizamos ahora y con un pincel suave de 50px pasarlo ponerlo en la base de las letras para que paresca que están en forma vertical:

7.- Ahora ya empezaremos a trabajar con las letras, el primer paso con el que comenzaremos será creando una nueva capa encima de la letra con la que comenzara, yo de nuevo con la L después de eso damos click en la capa de la letra [en el mió L] y con la varita mágica o cualquier otro cortador seleccionamos solo el frente, en mi caso utilizare la varita mágica es mas fácil, como lo haremos damos click en el frente de la letra que quede así:

Que quede así la selección, recuerda solo el frente de la letra, después de la selección damos click en la capa nueva que creamos y rellenamos con la herramienta degradado (G) del color que quieras, yo utilizare los azules, haciendo un trazo, si no sabes puedes tambien usar los degradados, como hicimos el fondo de este archivo, que quede mas o menos así:

8.- Ahora utilizaremos los estilos de capa o las opciones de fusión, pónselos a tu gusto, yo por ejemplo puse estas:

Utilice los 3 que están seleccionados, en el de satido, solo le cambie el color a blanco, en el de superposición de degradado, cambie el modo a Luz suave y le baje un poco de opacidad a 64. Y la sombra paralela que le baje la opacidad a 40. Bueno has así con todas las letras hasta que obtengas algo con lo que estés satisfecho:

9.- Ahora trabajaremos con los lados de las letras, lo que haremos será apretar doble click en la capa donde comenzaremos, yo comenzare con la L de nuevo, el doble click te abrirá las opciones de fusión o los estilos de capa, ponemos tambien al gusto tuyo, yo utilice estos:

Los 3 que están seleccionados, en la sombra interior lo único que hice fue bajarle la opacidad a 26 poner distancia 5px y tamaño 5px tambien, en el bisel y relieve le puse en suavizar 16px, en la superposición de dregadado le puse un degrade rojo, utilicen el que ustedes gusten y en modo Luz suave. A cada letra le pondré un filtro artístico que es el plastilizado. Así con todas las letras, lo que obtuve fue esto:

10.- Ya casi acabamos, lo siguiente ahora es añadir capas de ajustes y demás, estas irán por encima de todas las que hemos utilizado, las que yo utilizare son las de niveles, brillo, ósea la verdad casi todas, o dependiendo de cómo a ti te guste, son diferentes gustos, en el mió use mas bien para darle un color azul bajo, fuerte y limpio. Pero te recomiendo que uses niveles, brillo, tonalidades, capas de relleno, degrades, etc.
Por ultimo viene la decoración, para ello como te mencione al principio utiliza vectores, pinceles, fondos, motivos, a tu gusto, yo utilizare pinceles, un buen motivo para el fondo, eso lo puede hacer agregando una capa de relleno tipo Motivo [Capa/Capa de relleno/Motivo, los motivos puedes encontrarlos en DinPattern ahí están los mejores, a las letras tambien puedes agregarles motivos desde las opciones de fusión o estilo de capa en superposición de motivo, te recomiendo que leas mas tutoriales antes de hacer este por si eres nuevo, aquí el resultado final:

Aquí te muestro otro resultado que puedes conseguir:

Este ha sido el fin de este largo tutorial, muchas gracias por la atención que le han puesto, espero que este tuto te sirva mucho para aprender cosas nuevas que nos depara el diseño, como muestra te dejo:
PSD del archivo: Rapidshare - Mediafire
Pack de brushes utilizados: Descargar46mb
Motivos utilizados: DinPattern
Degradados utilizados: Descargar
[IMPORTAMTE]Sobre como guardar en xara:
1.- Abres el Xara 3D desde donde lo hayas instalado.
2.- Ahora lo primero qeu haras despues de crear tus palabras o letras es en el panel Izquierdo del Xara hay uno que dice Color Options, da click ahi y te deslizara unas opciones. En donde dice Text, da click para deslizar el menu, y le das en Background despues al background le pondras un color Blanco.
Luego escojes el Shadow del mismo menu y tambien blanco.
2.- Despues de haber hecho tu palabra o letras, lo que haras seral o siguiente.
Te doy dos opciones:
1.- La primera seria que te vayas a:
File/ Export…
2.- Que solo apretes Ctrl + Mayus + E
Despues de hacer eso, te debe de salir una ventana que dice “Export Image”
Primero escojes donde lo quieres guardar, en la carpeta que quieras, luego:
En la parte de abajo dice:
Nombre:[Aqui pones el nombre que desees para la imagen]
Tipo:[Aqui escojeras este: PNG(*.png) ]
Ejemplo:
Nombre:PX
Tipo:PNG(*.png)
Le das en Guardar.
Luego te saldra una ventana de opciones, ahi solo le daras en “Save”.
Despues de hacer eso vas a abrir la carpeta donde guardaste o exportaste la imagen.
Abrete el photoshop ahora.
Despues, le daras click Izq a la imagen que exportaste, y luego dejaras presionado y arrastraras esa imagen que exportaste al photoshop.
Despues de eso ya que te aparesca la imagen con la herramienta marco rectangular (M), luego al archivo le apretas Ctrl + A, esto hara que lo selecione todo o con que te vayas a Seleccion/Todo de tu panel de arriba.
Despues apretas Ctrl + C a lo selecionado y luego te vas a Archivo/Nuevo
para crear un nuevo archivo.
Luego en el nuevo archivo apretas Ctrl + V para pegarlo. y Listo¡¡¡
Lo explico como lo hize.
Para un mejor resultado descarga la font usada: Font Valken Tuto 3D – Mediafire
Dudas y sugerencias comenten.
Hola y gracias nuevamente ¡¡¡
se aprende mucho con los tutos.
Lo unico que no supe es como adornar las letras internamente con motivos o tal vez con mascara?
Saludos desde argentina¡
dejo el trabajo terminado a ver que les parece.
http://pirataleg.webcindario.com/photoshop2.jpg
Un gran resultado, ahora para hacer lo que quieres solo nesesitas crear una capa encima de cada letra luego a cada capa apreta Ctrl + alt + g y luego poner lo que quieras.
Saludos
Darío, hola, lo que sucede es que el texto es el logotipo y está hecho en vectores de Ps, y deseo pasar este diseño al Xara por medio de su opción de exportar (me da las opciones de exportar archivos Xara y Windows Metafile). Para ello lo he pasado a ilustrator, que me permite exportar a windows metafile para de ahí pasarlo a Xara. Pero, a pesar de hacerlo de este modo, el Xara igual y no me exporta nada! Pero tampoco me muestra un mensaje de error o que me diga que no logró exportarlo.
Un detalle más, quizá sirva a alguien. El Xara sí permite exportar en PNG con fondo transparente y no sería necesario ya utilizar la barita para borrar el background. Se hace marcando una casilla al momento que te muestra las opciones de exportación en PNG. Una colaboración!
[...] diseño con la palabra Dexigns, pero esta vez en 3D. Hace tiempo encontré un tutorial en psdcreativo.com, un completísimo blog de diseño, sobre cómo hacer diseños tipográficos en [...]
Men puedes poner el tipo de letras que estas usando porfavor me gusta tu diseño xD
Si te das cuenta en la parte final del tutorial pongo un enlace hacia donde se descarga la font.
me gusto mucho men. yo he creado algunos parecidos pero no me gusta copiar. agregame rikr2_7_new@hotmail.com
agregame para q cambiemos ideas o opiniones
hola mira tengo un problema que me esta haciendo renegar, ya por momentos me da gana de rebolear la notebook por la ventana, cuando quiero tratar de seleccionar cada letra no puedo, si sabes cual es el motivo hacemelo saber gracias, ah me olvidaba yo tengo el photoshop cs4, nose si tendra q ver eso
hiciste el texto en 3D letra por letra?
Para asi poder seleccionar letra por letra.
Qiero descargarlo pero nose como
http://img503.imageshack.us/i/sinttulo1wv.jpg/
Hay mi resultado , llevo una semana usando photoshop y no me a quedado mal, gracias por el tuto.
Agregame por favor.
el linck no sirve mandamelo x email
mandeme el linck