¡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 III el Vie Feb 28, 2014 8:27 pm

Reputación del mensaje :100% (1 voto)

Razor

avatar
DISEÑANDO INTERFACES III
DIFICULTAD: AVANZADA/EXPERTO
INTRODUCCIÓN
Bien, antes de iniciar déjenme decirles que no se tienen que asustar tanto porque este será mi primer tutorial de categoría “avanzada”, lo es nada más porque no pondré muchas capturas de pantalla y la explicación será un poco más orientada a quienes ya sepan alterar configuraciones de estilos en Photoshop, que es lo que más vamos a hacer en este tutorial.

Hace tiempos no seguía estos tutoriales, ¿no? Pues bueno, ¡regresan! Espero que os sea de ayuda esta tercera edición de “Diseñando Interfaces”

Recuerden, en estos tutoriales no explico cómo adaptar el menú al RPG Maker, eso vosotros lo tenéis que hacer a propia cuenta, pero un consejo, siempre quedan bien utilizando scripts que utilicen gráficos como base, luego solo es de perderle el miedo a editar y jugar con valores.

Sin embargo eso no le quita la gran experiencia que recibirán siguiendo este tutorial, sin duda os servirá de mucho para poder manejar de mejor forma el Photoshop. Además os dejaré el PSD al final para que toméis referencia. Pero os pido que si lo vais a usar así como lo dejo me deis créditos, ha sido difícil crearlo, confio en vuestra honestidad. :')

Ahora lo que todos esperan previo a un tutorial, ver cómo quedará al final, así que aquí les dejo la preview:
Preview:

Por cierto, ocuparemos algunas texturas para seguir el tutorial, las he subido aparte y las podéis descargar de aquí, son tan fáciles de aplicar como darles doble clic y ¡buala!:
1 PASO: BACKGROUND
Para comenzar crea tu documento con las medidas que prefieras yo utilizaré las medidas por defecto del RMXP; 640x480, ¡bien!

Te recomiendo que vayas organizando todo por grupos para que no te quede el desorden que usualmente me queda a mí por no hacerlo. Jajaja

► Prosigamos a crear el background/fondo, que será lo primero en ser diseñado. Haz una capa de relleno de color solido con el que prefieras.

► Luego creas una nueva capa y con un Soft Brush/Pincel Suave (los que parecen una bola con bordes difuminados) de alrededor de 350-420 PX de magnitud empieza a dar pinceladas asegurándote de alterar el color del pincel entre tonos ligeramente más brillantes y oscuros que el de la capa de color anterior, yo pincelé los más brillantes en el centro y contorneé los bordes con colores ligeramente más oscuros.
Tip: alterna colores frecuentemente y que no sean muy distintos para que luego con los efectos posteriores se mire un mejor trabajo de fondo, además no es necesario que llenes toda la capa, deja espacios también para que se mire el color principal de la anterior capa.

► Ahora crea una capa de relleno de motivo/pattern, y utiliza uno de los que descargaste; preferentemente alguno de los de color café si utilizaste un color azul como fondo o uno de los claros si utilizaste otro color, en fin prueba el que mejor resultados dé, asegúrate de poner esta capa en modo de fusión “Luz Suave/Soft Light”.

► Agrega una capa de ajuste de filtro de fotografía para ajustar los tonos y que quede uno más homogéneo, utiliza un filtro adecuado parecido al color que utilizaste en un principio. Ajusta la densidad a gusto.

► Para finalizar con los ajustes de color crea una capa de relleno de degradado con un con un ángulo diagonal y que el degradado sea de tonos con variaciones de tono con respecto al principal (el color que usaste en la primera capa de relleno) Ajusta la opacidad a gusto y pon esta capa en modo de fusión “superponer/overlay”.

► Haz una nueva capa y finaliza con unos pincelazos gigantes con un Soft Brush de color que haga alto contraste de luminosidad (entiéndase por esto que si, por ejemplo, usaste un color azul oscuro como base, usarás un color azul celeste muy claro para lograr este contraste) y pon esta capa en modo de fusión “superponer/overlay”

¡Listo, terminamos nuestro fondo! debería haberte quedado algo asi:
Muestra:
2 PASO: CAJAS
Ahora comenzaremos a crear las “cajas” donde podrás meter el contenido que desees y hacerlas del tamaño que prefieras, es realmente sencillo hacerlas, pero tendrás que aprender a manejar un poco las formas.

Aquí lo dividiremos en 3 pasos para obtener el resultado final: la creación de la forma base, el adorno y por último la modificación posterior a la primera forma base.
2.1 PASO: FORMA BASE
► Para iniciar crea la forma base, un rectángulo largo nos sirve, por ahora lo dejaremos con esa forma simple, pero luego lo modificaremos en base al “adorno” que creemos encima, el color principal de la forma podrá ser CUALQUIERA.
Tip: Cuando termines de aplicar todos los estilos juega con ese color y verás cómo varia nuestro “rectángulo”. Ópalo Sonriente

► Démosle estilo a ese rectángulo, para ello ponle opciones de fusión y empezemos configurando el contorno, con uno de 1px, del color que prefieras (te recomiendo blanco para mantener un aspecto uniforme con cualquier color de base que hayas elegido en el fondo) y en una opacidad moderada de alrededor de 30-50% según lo creas conveniente.
Motivo: Ahora superpón un motivo de los que descargaste al principio, con opacidad en 70%, esto lo hacemos para darle la textura base a nuestro rectángulo.
Degradado: Ahora superpón un gradiente, con colores oscuros que hagan contraste con el fondo (lo puedes hacer de rojo oscuro - 0d0200 - a un rojo más claro - 290201 - si quieres, puesto que la siguiente capa ajustará el color), en modo de fusión Luz Fuerte/Hard Light, deja la opacidad al máximo y un ángulo vertical (90°), así tendremos colores adecuados en nuestra textura.
Color: Ahora superpón un color en modo de fusión Color/Color (que valga la redundancia, Español/Ingles), asegúrate de que sea un color que aporte el tono adecuado con respecto al resto del diseño.
Resplandor Interno: Ahora activa el Resplandor Interno/Inner Glow en un color de ALTO contraste, como explicaba anteriormente con el ejemplo del azul celeste. Asegúrate de dejar el modo de fusión en luz suave para que mantenga el tono en una buena variación y la opacidad en 70%, el tamaño lo puedes ajustar al gusto, entre 15-25 preferiblemente.
2.2 PASO: ADORNO
► Ahora haz un adorno, lastimosamente no me detendré a explicarte como hacer uno desde cero, ya que es un proceso muy complicado, pero más que complicado es que tienes que tener experiencia por ti mismo con la herramienta pluma del Photoshop, me sería imposible explicarte como hacer los adornos puesto que es algo que ya recae en tu destreza particular, pero te dejaré los que yo hice por si quieres usarlos, ya los rastericé así que te los paso como imagen:


► Ahora a darles estilo, si quieres lograr un resultado estilo dorado o de “oro” como el que me quedó a mí tendrás que seguir a pie de letra las siguientes opciones:
Degradado: Superpón un degradado que vaya de “#c4753a > #73492f”, puedes alterar ligeramente estos valores para obtener un resultado más “brillante”.
Color: Ahora superpón un color, preferible que sea el mismo que usaste de fondo en modo de fusión Luz Suave/Soft Light a 40% de opacidad, esto solo para ajustar un poco el color.
Bisel y Relieve: Ahora la parte más importante del efecto, este aspecto por lo general es difícil de configurar, así que presta atención, te tratare de ilustrar sobre para qué sirve cada opción; la técnica definirá que tipo de bisel se aplicará, nosotros usaremos uno suave puesto que el cincelado fuerte queda mejor en figuras más anchas y el suave también; Profundidad/Depth entre mayor sea, más al centro irán los bordes del bisel, nosotros ajustaremos este valor en 600; y el tamaño de la profundidad lo dejaremos entre 6-8 según quieras. Los colores del sombreado déjalos en blanco y negro, pero asegúrate de que el blanco tenga el modo de fusión “Color Dodge/Sobreexposición de Color”, este es el principal truco para lograr el tono adecuado.
Tip: Puedes alternar el estilo del bisel a “Relieve Acumulado/Pillow Emboss” para obtener un resultado distinto.
Resplandor Externo : Activa el Resplandor Externo/Outer Glow, lo usaremos para crear sombra (no usaremos la opción de sombra porque es muy mainstream, okey no, no es por eso; sino porque permitirá que la sombra se proyecte más fácilmente en todo el entorno de la figura), pon el modo de fusión Multiplicar (que es para que se noten colores oscuros/vivaces) a 100% de opacidad, y el color en negro puro (#000000).

¡Ahora ya tenemos nuestro adorno de oro!
2.3 PASO: FORMA BASE-2
El siguiente paso sería volver a la forma del rectángulo y modificarla en base al adorno que pusimos encima, para que no se note como un simple adorno sobre un rectángulo pues. Jajaja Esto consistirá simplemente en sustraer las partes externas del rectángulo que salgan del adorno, para eso utilizaremos la herramienta de elipse, seleccionaremos la enlazada capa de trazos de nuestra forma (la miniatura de fondo gris, a la par del color de nuestra figura) y mantendremos apretado alt mientras hacemos una forma que abarque la parte que queremos eliminar. ¡Y buala! Opcionalmente en vez de presionar alt mira en la parte superior de Photoshop que salen 4 iconos de cuadrados, el tercero en orden de izquierda a derecha es el que sirve para substraer de la forma.

¿Y si mi rectángulo no abarca todo el adorno? Pues puedes crear un círculo que se adapte a tu adorno, para eso en vez de substraer, adjuntarás, para ello en vez de alt, mantén shift apretado; o selecciona el segundo icono en la parte superior de Photoshop.

Si no me explique bien en esto porque era algo difícil de definir, pues mira la screenshot que dejo más abajo y veras donde “sustraje” (a los lados) y donde “adherí” (al centro).

Para dar el retazo final, crea una selección que abarque el largo de lo que antes era nuestro rectángulo y una altura proporcional al título que quieres poner, creas nueva capa y rellenas la selección color blanco a 10% de opacidad. Luego pon tu título, selecciona cuidadosamente la tipografía que usarás, te recomiendo Cambria, Times New Roman o la Copperplate Gothic.

Figura ilustrativa de esta explicacion:
3 PASO: SEPARADORES
Este más bien es opcional, pero igual lo pongo para que no digas que no te explique cómo hacerlo. Es lo más sencillo de todo. Crea una nueva capa, marca una selección rectangular que abarque una cantidad de espacio considerable del lado izquierdo de tu lienzo y luego dale clic derecho>Pluma/Feather, ponle un radio de 10-20, aceptas y luego rellenas eso con el bote de pintura de color negro puro (#000000) y para el retoque final, le pones opacidad a 40% a esa capa.

Luego solo cree adornos de la misma manera que en el paso 2.2 copiando y pegando estilo (clic derecho a la capa y veras esas opciones). Por cierto, para crear los adornos inversos solo los dupliqué y  transformé con la altura invertida (ctrl+t y ponle un "-" donde dice H: 100%, quedaria en -100%).

Todo debería ir así por el momento (PD: El adorno de en medio solo consta de una linea y una figura predefinida del photoshop, con los mismos estilos del paso 2.2):
Muestra:
4 PASO: CONTENEDORES/OPCIONES
Ahora nos acercamos al final, ya queda poco, crearemos los contenedores de opciones del menú de la izquierda. Sigue estos pasos:
4.1 PASO: FORMA BASE
► Crea un rectángulo con un color que combine con el resto del diseño.
► Ahora pasemos a ponerle estilo:
Motivo: Tan solo pon uno de los motivos que descargaste el que más te guste, con una opacidad de 70%.
Gradiente: Ahora elige un degradado que combine, ya sabes, siempre procurando de que vaya de una tonalidad oscura a una tonalidad más clara del color base que elegiste. Ponlo en modo de fusión “Superponer/Overlay”
Color: Si el gradiente no fue suficiente para terminar de ajustar el color, pues ponle esta opción en modo de fusión “Color” con tu color base, a 35% de opacidad. Cielos mucha cacofonía pero es indispensable. jajajaja
► Para terminar de ajustar nuestra forma base le daremos algunos efectos con pinceles en capas superiores, haz una selección de tu forma manteniendo ctrl presionado y dándole clic a la capa enlazada de trazos de nuestro rectángulo. Automáticamente se hará una selección. Crea nueva capa y con un pincel suave/soft brush de unos 100px, de color blanco, empieza a pincelar en ciertas partes, luego pon el modo de fusión de esa capa en “Superponer/Overlay” y tendrás un efecto poco notable, pero que puede hacer la diferencia.
► Ahora vuelve a hacer una selección automática y crea nueva capa, con el pincel suave en color blanco ve deslizándolo por el borde inferior manteniendo shift apretado y cuando llegues a los bordes quita shift y desplázate hasta abajo a manera de crear un semi-elipse. Luego puedes hacer marcar una línea de gradiente encima, que termine en transparente en ambos lados, pon esta capa en modo de fusión “Sobreexposición de Color/Color Dodge” y tendrás un bonito efecto de resplandor vivaz.
Tip: Si lo haces en un color diferente de blanco igual obtendras un color vivaz, te recomiendo uno que proporcione alto contraste.
► Para la línea superior solo hace falta, eso, hacer una línea de 1 o 2 px de grosor poniéndole un color de alto contraste y resplandor externo de alto contraste en modo de fusión superponer a 100% de opacidad.

Listo, ya tenemos nuestra base, ahora pasemos al marco…
4.2 PASO: MARCO
► Para crear el marco solo hará falta duplicar nuestra forma base (ctrl+j), pasarla hasta arriba y jugar con la capa enlazada de trazos, selecciona la herramienta de selección de trazos, haz click en el rectángulo, cópialo y pégalo (ctrl+c, ctrl+v) ahí mismo y dale ctrl+t para transformarlo, hazlo un poco maas grande a manera de que quede contorneando el principal. Luego dale ctrl+enter cuando hayas acabado de agrandarlo y vuelve a seleccionar el pequeño, ahora simplemente substrae esa forma (apretando el 3 icono en forma de cuadrado que sale en la parte superior del Ps)
► Ahora a darle estilo:
Contorno: Uno de 1px, color blanco y modo de fusión en superponer/overlay.
Degradado: Un degradado simple con colores oscuros, el principal color muy oscuro y el otro tan solo un pelín más claro. Recuerda que tenga un ángulo vertical de (90°)
Color: Superpón un gris claro en modo de fusión Luz Lineal/Linear Light, a 100% de opacidad.
Bisel y Relieve: Profundidad máxima (1000), tamaño de 5 px, y color blanco en modo de fusión de Sobreexposición de Color/Color Dodge.
Resplandor Externo: A modo de sombra, como habíamos hecho en el punto 2.2 con el adorno.

Deberiamos de ir asi:
Muestra:
5 PASO: TITULO Y TEXTOS
Me parece que para este punto ya sabrás como crear la forma de título así que no te diré más sobre este punto, ¡experimenta con lo aprendido!

Los textos si veo necesario decirte el truquito, solo les puse estilo, un degradado a blanco y negro ajustando la opacidad a 20% y poniéndole un resplandor externo a modo de sombra con 75 de opacidad y 4 de tamaño. That is. Ópalo Contento

FINAL

¡Eso ha sido todo! Espero que os sea de ayuda este gran tuto que me he pasado preparando un buen rato, es exclusivo para Universo Maker, así que no, no hay permiso para postearlo en otras partes, en vez de eso puedes compartir el link al post. :)Saludos gente. Ópalo Contento





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 III el Dom Mar 02, 2014 5:47 am

~thekiller

avatar
Hola Razor (José XD). Me llamó mucho la atención este tutorial y me sorprende que aun nadie haya intentado hacerlo, el resultado es bastante bueno, pero en fin, para que no te sientas tan mal yo "seguí" el tutorial. Bueno en realidad ví el resultado final y me puse a hacerlo, al final lo dejé como se me antojara, pero ya que es basado en tu tutorial te dejo la imagen para que lo veas...

Mi acabado final del tutorial...:

Mi version no es tán buena pero la idea es intentarlo ¿no? XD

-Se despide The Killer-

#3 Re: [Tutorial] Diseñando Interfaces III el Dom Mar 02, 2014 4:55 pm

tormunds

avatar
Soy nuv y no entiendo el paso 4.1 en la parte de autoselección :c
El resto está casi terminado xD

Edito: ya entendí xDDDD ¡Buen tutorial!

#4 Re: [Tutorial] Diseñando Interfaces III el Dom Mar 02, 2014 5:39 pm

Razor

avatar
TheKiller: Hubieras seguido el tutorial. :yaoming: Pero la verdad te quedó aceptable para haberlo hecho a “ojo de halcón”. ¡xD!

Tormunds: ¡qué bueno que le pudiste entender! Deberías de mostrarnos tu outcome. Ópalo Contento

Saludos.





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.

#5 Re: [Tutorial] Diseñando Interfaces III el Dom Mar 02, 2014 8:09 pm

tormunds

avatar
Razor escribió:TheKiller: Hubieras seguido el tutorial. :yaoming: Pero la verdad te quedó aceptable para haberlo hecho a “ojo de halcón”. ¡xD!

Tormunds: ¡qué bueno que le pudiste entender! Deberías de mostrarnos tu outcome. Ópalo Contento

Saludos.

Algunos pasos si no los pude seguir (como el mini brillo en los botones o los marcos), quedo peor de lo que esperaba, pero de todas formas estoy conforme xD
Aquí mi outcome:

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.