¡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 I el Jue Ene 12, 2012 12:45 am

Razor

avatar
Tutorial: Diseñando Interfaces I
[Dificultad Media/Avanzada...]


Después de 3 horas de realizar un tutorial para U. Maker vengo y os lo presento, no sin antes contarles de que va todo esto, este es el primer tutorial de una serie de tutoriales denominados "Diseñando Interfaces" en los cuales os enseñaré a diseñar interfaces para el RPG Maker en photoshop, por ejemplo, un menú, el diseño de un engine, u otro tipo de interfaz, este primer tutorial tiene dificultad avanzada puesto que necesitaran conocimiento general y buen manejo de las herramientas del photoshop, así que espero que os guste.
Outcome/Resultado:
Como el diseño tiene un estilo "old paper" daremos tonalidades cafés y de papel de mapa antiguo. Pero recordad que siempre podéis modificar los colores para hacer un estilo propio.
Sin mas que decir, comenzamos el tutorial:
  1. Creamos nuestro archivo de 640x480 pixeles en photoshop [Resolución RPG Maker XP, sí queréis otra pues acomodarla] con 72 pixeles por pulgada de resolución, fondo transparente, y damos "aceptar", listo tenemos nuestro documento creado con las respectivas proporciones y parámetros adecuados para el diseño.
  2. Vamos a capa>nueva capa de relleno>motivo, elegimos un motivo cuadriculado, luego seleccionamos la capa de relleno y damos clic derecho>rasterizar capa, acto seguido vamos a imagen>ajustes>mapa de degradado y ponemos uno que vaya de café oscuro a claro, recuerden lo más importante, utilizar solo una placa de colores, es decir solo un color en distintas tonalidades pero no diferentes colores.
    Imagen 1:

    El degradado que pondrán es el que pueden ver en la esquina inferior derecha de la imagen.
  3. Ya tenemos nuestra capa de relleno con motivo en formato de imagen, listo para trabajar, ahora marcamos un cuadrado con la herramienta de selección rectangular en la esquina inferior izquierda, nos aseguramos que sea grande, después elegimos la herramienta de lazo poligonal y trozamos el panel derecho que nos a quedado, luego borramos; acto seguido damos clic derecho a la capa y opciones de fusión, rellenamos con los otros dos parámetros que vimos en la imagen 1 (La de arriba), hasta el momento debería de ir quedando algo así:
    Spoiler:
  4. Con la herramienta de cuadrado dibujamos una forma en la parte superior derecha, y cortamos tres paneles de la misma manera que anteriormente (trozando con el lazo poligonal), aplicamos el mismo estilo del los otros apartados a estos nuevos, a manera de que quede algo así:
    Spoiler:
  5. Este paso es opcional, si quieren no lo hagan pero si lo van a hacer tienen que hacerlo justo ahora (por el orden de las capas), ocuparemos esta imagen:
    Efecto Reflejo by José:
    Ahora con la herramienta de lazo magnético seleccionamos todos los cuadros anteriormente hechos, marcando de los bordes, esto llevara tiempo (lo mas tardado del diseño), pero con esta selección podremos poner el anterior efecto con facilidad, nos debería de quedar algo así:
    Spoiler:
  6. Estamos listos para poner las ilustraciones, iconos, o lo que quieras agregar, asegurate de colocar en un lugar donde queden bien:
    Spoiler:

    No se nota el efecto de reflejo porque oculte esa capa para trabajar más eficientemente.
  7. Agregamos todos los textos que ocupemos con la letra que queramos, quedará algo así:
    Spoiler:
    Para darle ese estilo a las letras, hacemos lo siguiente, en cada capa de texto damos clic derecho>opciones de fusión y llenamos con los siguientes parámetros:
    Opciones de Fusión para texto de opciones:
    Opciones de Fusión para texto de titulo:


    Luego duplicamos la capa y añadimos estas opciones de fusión a la copia:

    Recordad que ambas capas deberán estar a 70% de opacidad
  8. Casi listo, añadimos un fondo que combine con lo demás, acomodando el orden de las capas para que sea visible, también añadí unos vectores de decoración que realice previamente (Es decir, ya los había hecho hace tiempo pero no explico como hacerlos en este tutorial), igual pueden copiar estos vectores del PSD que dejaré al final del post:
    Spoiler:
  9. En la parte inferior pondré comandos de ayuda, para hacerlos ocuparemos la herramienta de circulo y cuadrado, hacemos las formas y aplicamos estos efectos de fusión a todas las formas que indiquen botones:
    Opciones de Fusión para botones:

    Agregan texto que quieran y listo están los botones inferiores.
    Y listo terminamos, debió de quedarnos algo como esto:
    Spoiler:


Spoiler:

Ese fue el tutorial, pero por sí no entendieron algo, o les cuesta trabajo hacer algún punto, me doy la libertad de adjuntarles el PSD con el cual creé esto:

Espero que os haya servido el tutorial, sí aún os queda algún problema por ahí no duden en comentar y trataré de ayudar en la medida de lo posible, nos leemos en el siguiente "Diseñando Interfaces".

¡Un Saludo!
Out~





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 I el Jue Ene 12, 2012 6:21 am

Kululu

avatar
Aunque no me guste contibuir en tu soberanía de Makedas, no me queda otra que decir que el tutorial está muy bien explicado y el resultado es fenomenal.

¡+30 Makedas!

Sigue posteando tutoriales de esta calidad.

Salut!



     

¡Visita mis galerías de Tumblr y DeviantArt!

#3 Re: [Tutorial] Diseñando Interfaces I el Jue Ene 12, 2012 7:45 am

Cuervoso

avatar
Esta vez de verdad has hecho un gran tutorial. Me gustó muchísimo el resultado, y quizás, cuando tenga tiempo intente hacer algo asi. Por ahora, me conformo con el guionismo xD.

Por cierto, yo te hubiese dado +35, pero kululu me ganó xD.

Saludos!






Cuervoso! No te pases ¬_¬

#4 Re: [Tutorial] Diseñando Interfaces I el Vie Ene 13, 2012 1:09 am

~thekiller

avatar
Gran tutorial, completamente digno de ti XD (aunque algo me dice que no lo hizo con muchas ganas XD (broma)) en fin, deberian darte mas makedas =D realmente muy bueno, (y esto me ayuda con mi tarea XD) José sigue asi, sigue posteando tutoriales como estos, que estan excelentes =D y bueno, me despido.

¡¡Un saludo!!

#5 Re: [Tutorial] Diseñando Interfaces I el Vie Mayo 10, 2013 5:55 pm

AngeloVoland

avatar
Increible, felicitaciones por lograr tan buenos resultados! Aún así, no entiendo como haces para que el juego te la reconozca. :o ¿no habría que poner un script o algo? Si alguien puede solucionarme esto, lo voy a apreciar mucho. ¡Gracias!

#6 Re: [Tutorial] Diseñando Interfaces I el Jue Mayo 30, 2013 7:05 pm

Razor

avatar
Buenas Angelo, lamento la tardía respuesta, pero mas vale tarde que nunca.

Para hacerlo funcional en el juego basta con armar un set de imágenes acorde a un script existente y montarlo en el mismo, el script de menú MOG es una buena opción.

Otra manera de incorporarlo a un juego es armándolo por medio de eventos, aunque complicado, puede resultar. Como es algo difícil de explicar, creo que haré un tutorial sobre esto ultimo, hasta entonces.
Out.-





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.

#7 Re: [Tutorial] Diseñando Interfaces I el Lun Jul 01, 2013 10:07 pm

Aegrotus

avatar
@Razor escribió:... Como es algo difícil de explicar, creo que haré un tutorial sobre esto ultimo, hasta entonces.
Out.-

Sólo espero con ansias el tutorial de eventos o el análisis del script de MOG para usar este sensacional método para implementar gráficos personalizados a nuestro proyecto.

Gracias, por cierto si supiera como dar Makedas o al menos tuviese algunas cuantas, te daría muchas. : )

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.