Banners, Avatars y Firmas [Tutorial]

Aqui les dejo un manual realizado por mi, sobre como experimentar con GIMP y tener resultados sorprendentes =)

no te asustes si alguna vez bajaste GIMP y te parecio inentendible, a mi también me pasó, pero con estos screenshots te darás cuenta que al final tendrás un buen trabajo para usuario básico/intermedio

harás avatars, firmas, banners, y hasta fondos de pantalla como el caso que les presento...

primero hay que descargarse el GIMP desde:

http://ufpr.dl.sourceforge.net/sourc...i686-setup.exe

si ya lo tienes no hay problema

-Paso1:

Abrir el GIMP

http://i290.photobucket.com/albums/l...dias/gimp1.jpg


-Paso2:

Creas un nuevo documento

http://i290.photobucket.com/albums/l...dias/gimp2.jpg


-Paso3:

Establece la resolución (tamaño) de tu documento

http://i290.photobucket.com/albums/l...dias/gimp3.jpg


-Paso4:

Rellena el area con un degradado de gris hacia blanco, con la herramienta de mezcla, la orientacion o direccion ya depende de tu criterio

http://i290.photobucket.com/albums/l...ias/_gimp4.jpg
original: http://i290.photobucket.com/albums/l...dias/gimp4.jpg



-Paso5:

Crea una nueva Capa encima de la que acabas de trabajar

http://i290.photobucket.com/albums/l...dias/gimp5.jpg


-Paso6:

A esta nueva Capa configurale transparencia, no le toques el tamaño

http://i290.photobucket.com/albums/l...dias/gimp6.jpg


-Paso7:

Aplicale el Filtro 'LLAMA' desde la barra de herramientas/filtros/renderizado/naturaleza/llama

http://i290.photobucket.com/albums/l...ias/_gimp8.jpg
original: http://i290.photobucket.com/albums/l...dias/gimp8.jpg


-Paso8:

En la ventana de configuración que se abre anda a 'editar'

http://i290.photobucket.com/albums/l...dias/gimp9.jpg


-Paso9:

Configura los valores a tu criterio, a tu gusto, esferico, lineal, etc

http://i290.photobucket.com/albums/l...ias/gimp10.jpg


-Paso10:

Puedes editar el acercamiento del elemento hacia la cámara, moverlo hacia la derecha/izquierda ó arriba/abajo

http://i290.photobucket.com/albums/l...ias/gimp11.jpg


-Paso11:

Ahora tienes las dos capas listas pero en grises, ahora necesitas color, por lo que haremos...

http://i290.photobucket.com/albums/l...as/_gimp12.jpg
original: http://i290.photobucket.com/albums/l...ias/gimp12.jpg

-Paso12:

Situarnos en la primera Capa (fondo)

http://i290.photobucket.com/albums/l...ias/gimp13.jpg


-Paso13:

Ir a Balance del Color

http://i290.photobucket.com/albums/l...as/_gimp14.jpg
original: http://i290.photobucket.com/albums/l...ias/gimp14.jpg


-Paso14:

Y configuramos el color de nuestra preferencia =)

http://i290.photobucket.com/albums/l...as/_gimp15.jpg
original: http://i290.photobucket.com/albums/l...ias/gimp15.jpg

-Paso15:

Y lo mismo haremos con la segunda Capa (capa nueva)

http://i290.photobucket.com/albums/l...as/_gimp16.jpg
original: http://i290.photobucket.com/albums/l...ias/gimp16.jpg

-Paso16:

Y... Bingo, el resultado de 3 minutos de click's es este:

http://i290.photobucket.com/albums/l...gimp_final.jpg
original: http://i290.photobucket.com/albums/l...gimp_final.jpg (en 1024x768)


Ojala les sirva para ya no estar contratando gente que les haga los banners o firmas =)

oye que paja, lo usare de wallpaper por el momento... incluso hasta podríamos hacer una galeria de fondos de escritorio con el tema de BZ, no?
Solamente recuerda que tenemos una regla de tamaño de imágenes, así que te pido que edites y pongas thumbnails o cambiar las dimensiones de tus pics, aunque la calidad bajaría creo...
Suerte.

Te felicito, Peloudias, un gran aporte en verdad.

Me muero por empezar a hacer mis experimentos xP

Por cierto, estoy usando el fondo que hiciste como wallpaper en estos momentos.

De nuevo, buen trabajo.

Wow, el resultado es super!
Nunca antes habia usado este programa, creo que lo empezare a usar desde ahora. =D

PD: Edita el tamaño de la imágenes para que no malogre la estética del foro. =)

mmm la idea es que todos aprendan a utilizar el GIMP para sus creaciones, se puede usar como complemento de otros programas como CS, DW, FW, etc

sobre la resolucion' la verdad me olvide de modificar mi escritorio pq yo trabajo sobre 1440x900 sorry a todos en unos momentos edito las imagenes.

y gracias por el reconocimiento :D

//

imagenes editadas a 650 de ancho máximo

gran aporte, puesto como sticky!

Oe man recontra xvr acabo de probarlo y puedo hacer cualquier firma. pero para poner su UserName en ella, como es?.

no entiendo cuando dices UserName, me dices por el ejemplo que puse del logo de Bloodzone? es simplemente un texto tiene todas las herramientas del photoshop, o casi todas, lo de los Usernames ponlo con la herramienta texto, el de BZ yo lo situé del mismo logo de este Foro, lo baje troquelé y situé.

Aquí un ejemplo cuando se complementa CS+GIMP

http://i290.photobucket.com/albums/l...ias/cvitae.jpg

en una chamba me solicitaron un CV en jpg y bueno lo hice no?

Está pajita. Me siento hodidamente envidioso D;

Dónde estudiaste?


Pdta. tan bembón 0_0

Cita:

---

Iniciado por LyNuS

Está pajita. Me siento hodidamente envidioso D;

Dónde estudiaste?


Pdta. tan bembón 0_0

---

IPAD y LEo dSIGN

pero man simplemente es práctica =) y harto google!

Tantooo.. enverda ese aporte me servira demasiado :), ahora jugare counter y seguire diseñando :) I love u Martin chavés
Alias : Timidon'

Un exelente aporte, ahora podre intentar hacer mis propios banners, felicitaciones peloudias.

demasiado bueno..... nada complicado :)
gracias Peloudias!!

Complemento 3d para Banners, Avatar y Firmas

Bueno ahora les pongo un complemento 3d, ojo no es necesario saber 3d studio, maya o etc, ahora todo será mas practico, y no es solo de marcianos saber 3D. (disculpas a los q saben 3d)

Ok para comenzar necesitamos algunas herramientas:

-Corel 12 o superior
-Swift 3D
http://www.erain.com/downloads/Trials/
desde aqui pueden bajar la version trial Swift 3D V5, si lo encuentran por 'otros' medios tambien valdria muchisimo =)

ahora comencemos:

vamos a esta direccion:

Paso1:
abrimos Corel Draw
http://i290.photobucket.com/albums/l...as/swift_0.jpg

Paso2:
ahora bajamos alguna imagen, por ejemplo yo tome' prestada la de Bloodzone
http://img471.imageshack.us/my.php?i...oodzonehg9.gif hacemos clic derecho en la imagen y copiamos
http://i290.photobucket.com/albums/l...as/swift_1.jpg

Paso3:
dentro del corel en documento nuevo pegamos (pegar) la imagen de bloodzone que hemos copiado de la web, ahora le damos click derecho sobre esta imagen y seleccionamos 'vectorizacion rapida'
http://i290.photobucket.com/albums/l...as/swift_2.jpg

Paso4:
tendremos que
nodear (editar los elementos de corel) un poco para darle detalle y arreglar los grumos en los filos de la imagen, te quedara algo asi como esto, separalos por color, verde y negro
http://i290.photobucket.com/albums/l...as/swift_3.jpg

Paso5:
CADA UNO de estos elementos los situas en documentos nuevos, y los exportas CADA UNO como EPS (vectores)
http://i290.photobucket.com/albums/l...as/swift_4.jpg
http://i290.photobucket.com/albums/l...as/swift_5.jpg

Paso6:
cierras el Corel
http://i290.photobucket.com/albums/l...as/swift_6.jpg

y abres el Swift 3d
http://i290.photobucket.com/albums/l...as/swift_7.jpg

Paso7:
en Swift3d le das a importar y ubicas los archivos que guardaste en EPS
http://i290.photobucket.com/albums/l...as/swift_8.jpg
http://i290.photobucket.com/albums/l...as/swift_9.jpg

Paso8:
los acomodas pues al importarlos cada uno seran como dos elementos individuales, acomodalos para que esten como el logo isotipo entero de bloodzone, esto lo harasen las dos ventanas que te da el swift, el 'front' y el 'left'
http://i290.photobucket.com/albums/l...s/swift_10.jpg

Paso9:
en la ventana Front/active a cada uno de los elementos les aplicaras bevels, para darle detalle y acabado, beveled / depth=20 (primero al elemento verde y luego al elemento negro)
http://i290.photobucket.com/albums/l...s/swift_11.jpg

Paso10:
ahora aplicaremos sizing que es darle profundidad a los elementos =) yo aplique' 500
http://i290.photobucket.com/albums/l...s/swift_12.jpg

Paso11:
ahora la parte divertida, aplicar materiales, esto es a tu gusto o medida, siempre aplica materiales y luego renderiza con la opcion de arriba para que veas como sale, y no te olvides de aplicar en los 3 materiales de un elemento que son face, edge y bevels, siempre a los 3, esto aplicale tanto al elemento verde como al elemento negro
http://i290.photobucket.com/albums/l...s/swift_13.jpg

Paso12:
cuando ya tengas listos cada uno de tus elementos con ubicacion tamaño y material, procedes a agruparlos , seleccionalos con shift y agrupa dsd la pestaña Arrange/Group
http://i290.photobucket.com/albums/l...s/swift_14.jpg

Paso13:
reducimos un poco los elementos con est herramienta de tamaño, es facil solo das clic en la herramienta y haces un drag sobre los elementos
http://i290.photobucket.com/albums/l...s/swift_15.jpg

Paso14:
ahora hay que agregar una 'target camara', y en la escena de la isquierda (left/active) subimos el focus de la camara tal como lo dice la flechita roja =)
http://i290.photobucket.com/albums/l...s/swift_16.jpg

Paso15:
en nuestra escena front, cambiamos la vista, buscamos 'target camara' y le damos ahi, ahora en la escena de left/active comenzamos a mover el focus de la camara y veremos como en la otra escena nuestro logo va cambiando de angulos
http://i290.photobucket.com/albums/l...s/swift_17.jpg
http://i290.photobucket.com/albums/l.../_swift_18.jpg

Paso16:
podemos editar las vistas de nuestra pestaña (front,left,right,top,etc) para poder mover mejor el focus de la camara y asi conseguir un buen angulo, y si no hay espacio para tomar el focus, simplemente aleja la camara 'general' que esta en el menu debajo de layout, le das ahi y modulas abajo, como lo señala la flecha roja =) (busca el angulo que te gusta mas)
http://i290.photobucket.com/albums/l...s/swift_19.jpg

Paso17:
ya conseguido el angulo de tu gusto, vamos a la pestaña preview and export
http://i290.photobucket.com/albums/l...s/swift_20.jpg

Paso18:
configuras el modo de salida de tu 3d, raster/png/high quality (1)(2) como las flechas, y luego le das a 'generated selected frames' (3) como la flecha verde
http://i290.photobucket.com/albums/l...s/swift_21.jpg

Paso19:
eliges donde guardarlo desde el boton 'export selected frames' y listo
http://i290.photobucket.com/albums/l...s/swift_22.jpg

Paso20:
ya complmentando con GIMP y Photoshop sale algo asi', para cambiar de color la letra B del iso, del verde al azul, aclaro que use el comando ctrol+U en photoshop y de ahi regule hasta llegar al color deseado
http://i290.photobucket.com/albums/l...wift_FINAL.jpg


//

perdon' si sale algo informal pero lo hice al toque y no me dio mas tiempo de arreglar detalles =) ojala les sirva :)

Cita:

---

Iniciado por peloudias

no entiendo cuando dices UserName, me dices por el ejemplo que puse del logo de Bloodzone? es simplemente un texto tiene todas las herramientas del photoshop, o casi todas, lo de los Usernames ponlo con la herramienta texto, el de BZ yo lo situé del mismo logo de este Foro, lo baje troquelé y situé.

Aquí un ejemplo cuando se complementa CS+GIMP

http://i290.photobucket.com/albums/l...ias/cvitae.jpg

en una chamba me solicitaron un CV en jpg y bueno lo hice no?

---

Oe Manuel te felicito por lo que haces es algo increible en verdad a pesar que eso en la mayoria de publicidad se pide mucho. Pero como eh visto que haces estrategias publicitarias como dijistes, me podrias ayudar en un negocio que tengo?. Que te parece?.

wooowww...
Lindos Avisos :)
Esres u ncrack para esto xDD
No de erda mui lindos :)
Ami me costara unos Mese Aprender a
usar el Program...
Muii buenos aportes :)

muy bueno el programa =) lastima ke con photoshop se logran efectos mas bonitos (claro que para el que no lo sabe usar este le resultara mil veces mejor) :)

Cita:

---

Iniciado por ViXoZuDo

muy bueno el programa =) lastima ke con photoshop se logran efectos mas bonitos (claro que para el que no lo sabe usar este le resultara mil veces mejor) :)

---

=D clarooo! de eso se trata de ayudar ó hacerle la vida mas fácil y práctica a la people!

pd: por ahí estoy proyectando otras cosas pero en CS

gracias aun en practica de pc ... :P

Peloudias como se podria hacer para que al primer ejemplo del primer post las letras las que dicen bloodzone por ejemplo den la impresion de un parpadeo o aparescan un momento y desaparescan y asi se puede??.