¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 [Tutorial] Diseñando Interfaces II el Jue Ene 12, 2012 7:10 pm

Razor

avatar
Tutorial: Diseñando Interfaces II
[Dificultad Avanzada...]


Aquí esta la segunda toma del tutorial cadena "Diseñando Interfaces" esta vez os enseñaré a hacer un menú más complejo, más elaborado, y más estilizado con tonos monótonos, este tutorial viene en dificultad avanzada puesto que lleva mucho trabajo sin mencionar lo tardado que es para realizar (más o menos 1 hora y media), claro que ustedes tardaran menos porque no tendrán que pensar el estilo que darán ni los vectores; sin duda con este tutorial aprenderá algunos tips, y que la paciencia rinde frutos.
Outcome/Resultado:

Comenzamos:
  1. Creamos nuestro documento con las medidas de preferencia, yo como hago el menú para el RMXP, pondre 640x480, 72 pixeles de resolución y fondo transparente.
  2. Hacemos nuestro fondo, mi fondo fue creado con un motivo que me detuve a hacer, sí quieren aprender a hacerlo abran el spoiler:
    Spoiler:
    Tomar la herramienta de cuadrado, hacer un cuadrado, rasterizar capa, degradado solido, de colores que gusten, en escala de 1 más o menos, luego diseñen unas lineas que vayan en dirección con el degradado, traten que las lineas sean finas, luego tomen el lazo poligonal, y hagan exactamente eso, un polígono con la selección, y listo tendrán un polígono como el de mi fondo, ahora simplemente duplican la capa y van encajando cada polígono en sus limites, opcional: si quieren que el fondo se les haga una sola capa combinen capas, nueva capa>imagen>aplicar imagen.
    Quedaría algo así:
    Spoiler:
  3. Ahora haremos las barras que serán las cajas seleccionables en el menú, para eso, utilizaremos la herramienta de selección rectangular y la de degradado, marcamos un rectángulo con la herramienta de selección, luego con la herramienta de degradado modificamos todo como sale en esta imagen:
    Spoiler:
    Hacemos varias de estos gradientes hasta quedarnos algo como esto:
    Spoiler:
  4. A crear las formas solidas del menú, estas no tienen gradiente por lo tanto se crean con la herramienta de forma cuadrado, hacemos los rectángulos que deseemos, pueden mezclar entre cuadrado con esquina recta o ondulada como hice yo, luego aplican este estilo a cada capa de forma:
    Spoiler:
    Deberíamos de llevar algo así:
    Spoiler:
  5. Ahora pasamos a poner todos los iconos de ilustración que queramos, para que combinen con el diseño les aplicamos un degradado [imagen>ajustes>mapa de degradado, blanco y negro]
    Quedaría de esta manera:
    Spoiler:
  6. Ya empezamos con los textos, adjunten los textos que deseen, luego ponen este estilo a cada capa de texto:
    Spoiler:
    Con este paso vamos así:
    Spoiler:
  7. Ahora podemos llenar las cajas de estado, para hacerlo vamos a la herramienta de cuadrado de esquinas onduladas, y hacemos un rectángulo pequeño, seguimos las siguientes instrucciones:
    Spoiler:
  8. Para las barras de vida, magia o cualquier otra cosa hacemos otro rectángulo y aplicamos estos estilos:
    Spoiler:
  9. Listo, deberíamos de tener algo como esto:
    Spoiler:

Spoiler:



PD: Cuando digo aplicar estilo me refiero a que den clic derecho a la capa objetivo y luego a opciones de fusión.

Para mejorar la calidad de aprendizaje [No Rip] les dejo el PSD con el cual hice ese menú, este les podrá solventar cualquier duda que puedan tener sobre las opciones de fusión, orden de capas, imágenes etc. etc.

Nota: Se me había olvidado avisaros que este menú puede ser fácilmente adaptado al script MOG Main Menu, aunque seguramente lo notaron.

Eso es todo, esperen por el tercer tutorial.

¡Un Saludo!
Out~



Última edición por Jσѕє я.K el Vie Ene 13, 2012 2:02 am, editado 2 veces





Todos mis aportes por Mediafire tienen contraseña, esa es: www.universomaker.net
Esto es para evitar plagio, asegúrense de copiar y pegar la contraseña.

#2 Re: [Tutorial] Diseñando Interfaces II el Jue Ene 12, 2012 9:08 pm

Cuervoso

avatar
¿Otro más? xD. Maldición, cuando pueda dominar como lo haces tu el PhotoShop, estoy seguro que el Internet no exista y U.Maker sera un mundo de realidad virtual (?).

En fin, me gusto mucho el resultado final, tiene un resultado bonito y original, con eso se le da un toque especial a cualquier proyecto.

Espero algún día poder seguir el tutorial y terminar con algo decente. Por mientras... Creo que el aspecto gráfico... te lo dejaré a ti xD.

Seguro le dolerá a Kululu ver esto (pero... ¿Ese no es el plan?) : ¡+30 Makeadas!

Saludos!






Cuervoso! No te pases ¬_¬

#3 Re: [Tutorial] Diseñando Interfaces II el Vie Ene 13, 2012 1:28 am

~thekiller

avatar
DarkRaven escribió:¿Otro más? xD. Maldición, cuando pueda dominar como lo haces tu el PhotoShop, estoy seguro que el Internet no exista y U.Maker sera un mundo de realidad virtual (?).

Wooo seria genial que U.Maker fuera un mundo de realidad virtual o.O jajaja pero no creo, eres inteligente, se que si le pones empeño puedes aprender rapidamente. =D

DarkRaven escribió:Seguro le dolerá a Kululu ver esto (pero... ¿Ese no es el plan?) : ¡+30 Makeadas!

Oh... Pobre Kululu, espero que no le duela mucho. D:

Bueno a lo que vinimos... José una pregunta, este dice que es dificultad avanzada, pero creo que si puedo hacerlo =D, en fin, amo estos tutoriales que estas subiendo, estan ¡excelentes! Se te agradece el aporte.

¡¡¡Un saludo!!!

Contenido patrocinado


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

Permisos de este foro:
No puedes responder a temas en este foro.