content top
Tutorial – Wireframes en tus diseños

Tutorial – Wireframes en tus diseños

Tags: , , , , , , , ,

Anteriormente habia mostrado una recopilacion de programas que pueden ir de la mano del photoshop, en esta ocasion y por primera vez, usaremos uno de esos programas para crear sorprendentes objetos para nuestros diseños.

En este tutorial usaremos el programa Cinema 4D, uno de los programas mas usados por diseñadores profesionales y no profesionales para crear diferentes objetos ya sea 3d u otros.

Para comenzar explicare que es un wireframe:

“Un Wireframe es la  renderización del que resulta una imagen semitransparente, de la cual sólo se dibujan las aristas de la malla que constituye al objeto. De ahí su nombre.” (Wikipedia)

En esta grata ocasion cuento con la colaboracion del artista Factorxyz (Jairo Arturo) quien realizo este video tutorial para crear los wireframes especialmente para PSDcreativo, aqui pongo el video tutorial:

Imagen de previsualización de YouTube

Este es el resultado del wireframe ya hecho y guardado como imagen:

http://fc01.deviantart.com/fs42/i/2009/144/b/c/Wireframe_tutorial_by_factorxyz.png

En su Deviant podras encontrar mas wireframes, aparte de otros recursos, para descargar y usarlos en tus diseños.

Ahora sigue este pequeño paso para insertarlo en tu diseño, para comenzar despues de guardar el archivo en psd, lo buscamos donde lo guardamos y lo abrimos en el photoshop, despues crearemos un nuevo archivo del tamaño que desees y lo llenaremos de un color cualquiera, (de preferencia en fondos claros), despues pondremos nuestro wireframe, y luego a la capa del wireframe la pondremos en modo Multiplicar y listo podras ver que el fondo blanco se elimina.

Ahora bastara que pongas todo lo que desees a tu diseño, aqui te pongo 2 ejemplo de como quedarian tus diseños con los wireframes, y tambien los psd`s de lso diseños para que veas mas como los use y te des ideas:

wireframe art por ti.

Wireframe Art -1º Resultado

font wireframe por ti.

Font Wireframe Art - 2º Resultado

descargarpack1

Descargar PSD 1º

descargarpack1

Descargar PSD 2º

En el psd del primer ejemplo podras encontrar una nota donde te digo como crear el efecto de los circulo, solo tendras que:

1º Darle vision a la carpeta Circulo del psd.

2º Darle dobre click al icono que tiene forma de nota que esta en la parte izquierda del diseño para abrir la nota.

Espero que este tuto les sirva, ire tratando de crear tutoriales de este tipo para darle mas potencia a nuestros diseños y no solo estancarnos con el photoshop. De nuevo gracias a Factorxyz por su colaboracion especial.

Articulos Interesantes

Compartelo
Twit This Post

Subscripcion RSS Feed 

6 Comentarios a “Tutorial – Wireframes en tus diseños”

  1. chillyweed dice:

    dale muy buen tut gracias ese Cinema 4D es una bestia :P

  2. davis dice:

    estuve buscando esto desde hace tiempo, seria genial que publiques mas trucos fusionando Ps y cinema, una saludo dario aunque no comento mucho, siempre visito tu blog, tiene muy buena estetica.

  3. [...] listo para psdcreativo, seguramente pocos saben que desde que se posteo el tutorial de Wireframes en tus diseños en psd creativo, me puse a conversar con mi amigo Dario el cual al ver los comentarios de ese [...]

  4. MaxeelleR dice:

    Muy bueno lo practicare gracias factorxzyz

  5. xesuojx dice:

    Que bien no saben cuanto agradesco todo esto, me ha encantado. Y por encima de esto la web está de lujo.

Dejar un comentario