Foro especializado en Warcraft III y su editor
 
BuscarEntrar al ChatboxPortal del foroÍndiceSpellsRegistrarseConectarseGrupos de Usuarios
Eventos Actuales
¡ Bienvenido Invitado !

Editar Perfil

Tus temas
Tus Mensajes ()

Enlaces rápidos








Comparte
 

 Tutorial - Como crear iconos para Wc3 ( Photoshop )

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
faceless
Capitán
faceless


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 151
Reputación Reputación : 44
Monedas de oro : 2091
Monedas de Platino : 0 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Dom Feb 16, 2014 3:26 pm

ICONOS PERSONALIZADOS USANDO UN EDITOR DE IMAGENES


Este tutorial puede ser un complemento de los siguientes tutoriales:

Como personalizar iconos del wc3 y sus rutas de importación

Como crear iconos e importarlos

En este tutorial vamos a aprender a hacer iconos apartir de una imagen cualquiera utilizando Photoshop, Gimp o similares. También aplica a modelos ya que solo es necesario tomarle una foto al modelo.

El resultado va a ser un icono que encaje en la estetica del juego junto a los iconos originales. Y la ventaja es que contamos con todo el poder de un editor grafico para hacerle lo que se nos ocurra a la imagen. Cosas que no podemos hacer en un programa donde todo esta prefijado.

Lo mas recomendable es partir de un modelo que utilice la paleta de colores y el trazo de las texturas del juego para un encaje perfecto. Ademas de que el icono debe ir acorde al portrait del modelo.

Pero es posible llegar a algo aceptable incluso partiendo de una foto cualquiera.

Ejemplo de foto (Emma Stone):

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Fzcx


Ejemplo de modelo personalizado (gnomsub):

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Aonq



Herramientas utilizadas:

Adobe Photoshop: lo usamos para editar las imagenes y guardar el resultado en .tga
War3 Model Editor: lo usamos para fotografiar el modelo .mdx
Warcraft 3 Viewer: lo usamos para convertir .blp a .tga y viceversa


Vamos a por la foto del modelo. Esto es puro instinto, sobretodo si se trata de rostros, la expresion final del icono va a depender de esta foto. Yo utilizo la animacion "talk" del portrait cuando hago rostros.

Ejemplo:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tz5q



En este caso elegi un modelo de una maquina, el submarino gnomo. Le tomamos la foto.

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Q3cg




Ahora necesitamos un icono de base, es solo para el marco y tal vez el fondo. En este ejemplo el fondo lo vamos a crear de cero, asi que no interesa:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Lyxq



Pegamos la foto del modelo dentro del icono de base:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) 2xcg



Escalamos el layer de la foto que pegamos para que encaje dentro del marco del icono:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Hh00



Tenemos que tener en cuenta la ambientacion que le pensamos dar, cuanto queremos que se vea del modelo, etc:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Idrj



Ahora recortamos los bordes para poder ver el marco del icono:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Gtu1


Casi lo tenemos, ahora hay que tener en cuenta que se trata de una unidad en una situacion determinada, con lo cual tenemos que ambientarla, crearle un entorno, en este caso, agua y sombras:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) R6gz



Ahora pasamos un filtro que sirve para definir los pixels, es el opuesto de hacer borroso (blur), se llama Sharpen y logra el efecto de que el trazo parezca dibujado:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Dmt6



Noten que en los pasos anteriores siempre trabajamos sobre el layer del modelo, dejando intacto el layer del marco.
Ahora que lo ambientamos, solo falta el toque final. Teniendo en cuenta que es una maquina, buscamos una maquina original, como por ejemplo la maquina voladora o un barco, para ajustar los brillos y las saturaciones de los colores al estilo del juego:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) 4r1c



Lo guardamos como .tga, y damos OK, el editor se va a encanrgar de mezclar los layers. Si queremos conservar los layers para futuras ediciones debemos guardarlo en el formato del editor:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) 11ey



Y acá esta el icono terminado, con practica es un proceso que no lleva más de 5 minutos:

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Q9me

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Q9me


Cuando lo conviertan a .BLP haganlo al 50%, es una buena relacion calidad peso. Estamos hablando de no mas de 6k para un icono activo, y 4k para una pasiva. La diferencia de peso la da la relacion entre pixels negros (que no pesan) y pixels encendidos (colores que si pesan), con lo cual cuanto mas negro contenga el icono menos va a pesar.





Espero que lo hayan encontrado útil e instructivo. Saludos.


Tutorial - Como crear iconos para Wc3 ( Photoshop ) Kj81

EL mundo de Wacraft 3 - Mapa - Tenedor libre.


Última edición por faceless el Lun Feb 24, 2014 3:05 pm, editado 2 veces
Volver arriba Ir abajo
ILoGy
Caballero
ILoGy


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 405
Reputación Reputación : 73
Monedas de oro : 2434
Monedas de Platino : 2 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Dom Feb 23, 2014 2:16 pm

Emm bueno, es un buen tutorial, bastante básico pero útil, se que dirán, pero se puede hacer eso facil con Button manager, pero esta es otra forma simple, y APRUEBO por una simple razón, siempre es bueno tener opciones. gracias por tu aporte face Wink
Volver arriba Ir abajo
faceless
Capitán
faceless


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 151
Reputación Reputación : 44
Monedas de oro : 2091
Monedas de Platino : 0 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Dom Feb 23, 2014 4:12 pm

Lo puedo ir mejorando con algunos agregados en el medio (spoilers), explicando de forma mas extensa los procesos que le pueden hacer a la imagen si te parece que hace falta. Es el primero que hago y no sabia si era mucho o poco, pesado, confuso o que... asi que lo resumi un poco.


Pd: Las posibilidades que ofrece un editor grafico completo no las puede ofrecer nunca un programa prefijado, son cosas distintas en mi opinion  e.e 


Tutorial - Como crear iconos para Wc3 ( Photoshop ) Kj81

EL mundo de Wacraft 3 - Mapa - Tenedor libre.
Volver arriba Ir abajo
ILoGy
Caballero
ILoGy


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 405
Reputación Reputación : 73
Monedas de oro : 2434
Monedas de Platino : 2 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Dom Feb 23, 2014 5:38 pm

si face, quedaría muy bueno, que explique como modificar tonos de color, brillos, intencidad, etc. y demás aspectos que logren diferencien a los iconos normales de los que edita con este tuto Wink
Volver arriba Ir abajo
faceless
Capitán
faceless


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 151
Reputación Reputación : 44
Monedas de oro : 2091
Monedas de Platino : 0 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Lun Feb 24, 2014 3:03 pm

Ahi agregue el link del tuto de edusx, en cuanto pueda hago mas amplio el contenido este tuto.

El buscador deberia dar siempre algun resultado.

Gracias  :hand: 


Tutorial - Como crear iconos para Wc3 ( Photoshop ) Kj81

EL mundo de Wacraft 3 - Mapa - Tenedor libre.
Volver arriba Ir abajo
Fenixjuanx
Capitán
Fenixjuanx


Barra de Salud : Su salud está al 100% - Este usuario no ha recibido infracciones

Mensajes Mensajes : 171
Reputación Reputación : 10
Monedas de oro : 115
Monedas de Platino : 0 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty

Inventario :
Hacha Simple Escudo redondo de madera Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10 Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empysl10

Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10Dom Mar 23, 2014 9:03 pm

+Rep Piola man


Balanar is Coming For You
Tutorial - Como crear iconos para Wc3 ( Photoshop ) Egqudj
Synchros Is The Future
Tutorial - Como crear iconos para Wc3 ( Photoshop ) 2myqh3c
Pedidos de Models Del MU por MP
Post/Comentario By Fenixjuanx , Luchando por la medalla de modeler experto desde tiempo inmemorables..
Volver arriba Ir abajo
http://www.loshackersviven.es.tl
Contenido patrocinado




Tutorial - Como crear iconos para Wc3 ( Photoshop ) Empty
Mensaje(#) Tema: Re: Tutorial - Como crear iconos para Wc3 ( Photoshop ) Tutorial - Como crear iconos para Wc3 ( Photoshop ) Clock10

Volver arriba Ir abajo
 

Tutorial - Como crear iconos para Wc3 ( Photoshop )

Ver el tema anterior Ver el tema siguiente Volver arriba 
Página 1 de 1.

 Temas similares

-
» [Tutorial] - Como hacer un ''GIF''.
» COMO PUEDO VOLVER DE HOENN A KANTO? mil gracias ^^
» Campaña DESCENT. Rastro de Fuego
» Debate sobre Proxies y Préstamos de cartas
» Unidad militar del estado

Permisos de este foro:No puedes responder a temas en este foro.
Warcraft III - WorldEditor :: Academia :: Modelaje y Arte 2D :: Tutoriales de Arte (2D)-