[Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Ver el tema anterior Ver el tema siguiente Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Mar 14 Jun 2011 - 10:20

CLASES para la EDICION DE SKINS "Capitulo 1º"
Editando botones de la DSTT
Edicion más avanzada; usando capas.
Válido para cualquier otra imagen en la que queraís usar este sistema:

Click para Ver:

Primero vamos a abrir la imagen que hemos creado previamente (con la plantilla de DSTT si queremos) y la imagen del skin por defecto del boton "BACK" (por ejemplo, este proceso sirve para cualquier botón, "CANCEL","START"o"SAVE".
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Seleccionamos la imagenen del fondo de pantalla y Copiar / Pegar sobre la imagen del botón.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Ahora vamos a "Editar" y "Transformacion libre", moviendo el cuadro para ajustarlo en la parte inferior. Este pequeño truco hará que lo que pongamos ahora sobre el botón se vea sobre el fondo de pantalla y el botón en si mismo, sea invisible y sólo aparezca el texto o la imagenen que hayamos puesto.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Por ejemplo voy a poner la palabra "BACK" que es exactamente la misma que el original.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Lo amplio un poco más para que veais mejor el resultado.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Editando iconos de la DSTT
Edicion de imagenes nivel avanzado, usando varias capas y añadiendo efectos de imagen.
Válido para cualquier otra imagen en la que queraís usar este sistema:

Click para Ver:


Abrimos la imagen que corresponde al icono del skin por defecto "NEXT".
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Creamos dos nuevas capas sobre el fondo, la inferior negra y la superior naranja (por ejemplo). Ocultamos la negra desmarcandola y dejamos sólo la naranja visible. Le ponemos transparencia al 70% y abrimos el estilo de capa:
Primero marcamos en Bisel y relive y dejamos los valores como veis en la imagen, aunque podeis probar a cambiarlos para ver lo que ocurre.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Luego vamos a superposicion decolores, degradado y motivo y hacemos los siguientes cambios.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Pues este es el resultado final volviendo a poner todas las capas visibles. Es un boton de Cristal Naranja, que podemos usar con cualquier icono principal de la DSTT, "NEXT" o "RESET" o "CHEATS" , etc... que sean del mismo tamaño que este.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Ahora podemos dejarlo así o añadir una imagen, por ejemplo un logo de Bleach y luego reducirlo hasta ajustarlo al icono.
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Como a veces doy por echo de que todo el mundo maneja los editores a la perfección me he podido saltar algún paso o explicarlo un poco mal, así que si hay algo que no entendeis o como llegar a alguno de los pasos PREGUNTADMELO!! no os reprimais. Very Happy


Extraer imagenes de otras imagenes:
Edicion avanzada; usando herramientas con varias capas.
Válido para cualquier otra imagen en la que queraís usar este sistema:

Click para Ver:

Empazamos por seleccionar la imagen que vamos a recortar para extraer. En mi caso selecciono este pictograma de Mario & Luigi. Y voy a extraer la imagen de Mario del pictograma:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

1º)El primer paso es seleccionar la herramienta más adecuada, a mi me gusta trabajar con la "PLUMA" o Punto de ANCLA:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

2º)Ahora creamos una segunda capa, podemos llamarla como queramos, esta segunda capa es sobre la que trabajaremos, para no cambiar nada (sin querer) en la capa original:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

3º)Ampliar la zona sobre la que trabajemos hará que sea más facil el trabajo de recorte y también quedará mejor cuantos más puntos de ancla pongamos.
Intentaremos ser lo más precisos posible, para obtener una imagenen recortada de gran calidad. El proceso será hacer la silueta de la imagen a base de puntos de ancla, si nos equivocamos en un punto siempre lo podremos corregir:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

4º)Cuando llegemos al final de la silueta unimos el ultimo punto de ancla, con el primero y cerramos la imagen, lo veremos parecido a esto:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

5º)Ahora vamos a recortar la imagen, seleccionamos dentro de la silueta con el boton derecho del ratón, nos aparece una situeta de puntos. Creamos una nueva capa. Ahora vamos a edicion copiar / y pegar en la nueva capa o en photoshop todo este proceso se hace de forma automática con CTRL+C:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

El resultado final será este:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

6º) Ahora podríamos usar y/o poner esta imagen donde queramos, en un fondo de pantalla, una plantilla, como icono, o todo en uno!! las combinaciones no tienen limite!!

Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Suerte con la edición de imagen. Esto es todo por ahora. Un saludo Wink



Creando fondos de pantalla personalizados:
Edicion semiprofesional; usando herramientas, varias capas, efectos y más.
Válido para cualquier otra imagen en la que queraís usar este sistema:

Click para Ver:

1º)Primero vamos a seleccionar las imagenes que utilizaremos: Yo personalmente usaré las que vereís a continuación, se trata de unos adornos vectorizados, un fondo de pantalla estilo mapa de navegación y algún personaje de un videojuego (Chrono Trigger en este caso), estas imagenes han sido extraidas de otras imagenes con los pasos de ediciones anteriores. Os muestro los pasos para montar las imagenes como fondo de pantalla (en este ejemplo será la pantalla de iconos del menu de una R4 / R4i).

Estas son las imagenes vectoriales (Adornos):


2º)Las voy a ir montando alrededor del fondo (un cuadro negro de 1024x768) de esta forma, para crear un marco en la pantalla:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

3º)Ahora os muestro la imagen que he seleccionado como fondo de pantalla y sobre la que voy a hacer el montaje del marco:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

El montaje de las capas de los adornos quedará de esta forma, además les añadiré unos efectos para que parezcan metálicos:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

4º)Lo siguiente es completar el marco, uso como referencia la plantilla que ya he creado con anterioridad para R4DS, la podeis encontrar más arriba en la seccion, Creando una Plantilla para R4DS. En este paso tendré que crear capas por cada uno de los adornos que añada, luego girar, recortar y ajustar para que quede como veís en la imagen de abajo, (es menos complicado de lo que parece, un poco de práctica es lo único que necesitamos):

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

5º)Vamos a añadir los iconos del menu, son unas imagenes de personajes que he editado previamente, las superpongo como nuevas capas:
Las imagenes que añadiré son como esta, por supuesto las ajustaré al marco y con la plantilla de R4DS. Pero que se vean grandes.


Y ahora la pongo en el fondo de pantalla:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Ahora repito los pasos con otros dos iconos más y entendereís porqué le he dado esta forma tan especial al marco: Para que las imagenes se vean por encima o por debajo del marco es sólo una cuestión de la posición de las capas del marco por encima o por debajo de la capa de cada personaje ( iconos ). Si os fijais bien, vereís que el sapo tiene la parte inferior del cuerpo por detrás del marco, pero la espada está por delante, este es el efecto de la posicion de las capas una sobre otra.

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

6º)Ahora voy terminar el fondo añadiendo unos detalles, imagenes extra y unos cuadros para los textos, todo "aderezado" con efectos de sombras y luces para dar más profundidad a la imagen:

Un reloj en la parte central, otro abajo a la derecha y una rueda dentada extra abajo a la izquierda:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Los cuadros de texto en la parte inferior:

Tamaño reducido (Edicion en PS), Click para ver a tamaño real

La imagen definitiva a tamaño real de la NDS 256x192 deberá quedar así:


Y con esto he terminado mi fondo de pantalla del menu, de Chrono Trigger para R4. Podeis usar estas sencillas técnicas con cualquier imagen que creeis y añadirlas a cualquier tipo de cartucho. Sólo teneís que poner un poco de imaginación a la hora de componer la imagen final. Hacer un boceto o una imagen mental de lo que quereis hacer y luego ir innovando según tengaís más práctica.

Espero que os sea útil, un saludo. Wink


Última edición por DvdFantasy el Sáb 16 Jul 2011 - 10:20, editado 18 veces (Razón : Realizando mejoras en las entradas)
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Mar 14 Jun 2011 - 10:20

CLASES PARA LA EDICION DE SKINS "Capitulo 2º"

Editando imagenes para Skins de Acekard2, WoodR4, R4itt, Akaio, y clones
Edicion profesional. Creando nuestras propias imagenes.
Click para Ver:

Voy a explicar lo más breve posible como editar una imagen en concreto de los skins de Ak2, Wood, etc. Esta imagen será la de la barra de progreso y el fondo de la barra de progreso, esa que sale cuando cargamos una Rom o cambiamos las opciones del cartucho.

En el ejemplo usaré una imagen sencilla para que se vea claro:

Como veis es una imagen con un cuadro verde, en el que aparece la barra de progreso en la parte superior y debajo, en inglés, pone que está "procesando...."
Bien pues vamos a cambiar la posición de la barra de arriba, a abajo, y esto se hace así:

1º Con un editor de imagenes, por ejemplo PS, abrimos el archivo de imagen que vamos a editar:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real
Como veis yo he abierto dos, el de la barra de progreso y el de la ventana de la barra de progreso, es porque luego explicaré algo más.

2ºComprobamos que el tamaño original de la barra de progreso es de 216 x 15, así que vamos a crear una nueva imagen, será un cuadro de color negro, que mida 216 x 45 (Por ejemplo) de esta forma debería quedar:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

3ºAhora copiamos y pegamos la barra de progreso original dentro de la nueva imagen con el fondo negro:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

4ºY despues desplazamos la capa de la barra de progreso hacia la parte inferior, así:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

5ºVamos a comprobar como quedaría ahora en la DS:
VAYA!! la barra a cambiado su posición verdad?? esto es debido a que todo lo que sea de color negro la Ak2 o clones lo interpretará como transparente y como la imagen es más grande, aunque está en el mismo sitio da la impresion de estar más abajo. Curioso verdad? Pues esto se puede hacer con casi todas las imagenes de estos skins.

6ºVamos a cambiar algo más, el fondo de la barra de progreso o ventana de progreso:
Vamos ha hacer lo mismo que con la imagen de la barra de progreso, veamos, sus dimensiones son 226 x 60, pues crearemos un nuevo cuadro de color negro de 226 x 90 (por ejemplo)
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

7ºCopiamos y pegamos la ventana original en el nuevo cuadro negro así:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

Y lo bajamos a la parte inferior del cuadro:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

8ºVoy a poner una imagen extra para cambiar el aspecto general:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

La traslado de la misma forma que otras imagenes, copio y pego, y luego la redimensiono si es necesario, quedará así:
Tamaño reducido (Edicion en PS), Click para ver a tamaño real

9ºY el resultado final en la DS será este:

Lo principal a tener en cuenta, es que podeís modificar el tamaño de las imagenes pero con cuidado de no exceder los límites de la pantalla, o tendreís fallos en el skin. Además también teneís que tener en cuenta que la posicion de estas imagenes no se puede variar, así que tendreís que ir calculando poco a poco el tamaño que quereís usar para cada imagen.
Teniendo esto conceptos claros, podeís hacer un montón de efectos increíbles con estos skins.Espero que les guste y les sea útil.

Un saludo. Wink


Última edición por DvdFantasy el Sáb 16 Jul 2011 - 10:20, editado 11 veces (Razón : Añadidos nuevos tutoriales de edicion de imagen)
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Mar 14 Jun 2011 - 10:20

RESERVADO. Por falta de espacio.
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Mar 14 Jun 2011 - 10:20

RESERVADO. Por falta de espacio.
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Mar 14 Jun 2011 - 10:21

RESERVADO. Por falta de espacio.
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por DvdFantasy el Vie 15 Jul 2011 - 23:38

Este mensaje es para avisar a los usuarios de que se han añadido nuevos tutoriales sobre la edicion de skins
avatar
DvdFantasy
NDS-Mayor

Masculino
Cantidad de envíos : 221
Localización : Madrid / España
Opinión sobre NDS-Extra : Me Encanta
Inscripción : 03/10/2010
Reputación : 85
Puntos : 455

http://ndsskins.blogspot.com

Volver arriba Ir abajo

Re: [Skins][Taller] Taller de Tutoria . Crea tus propios Skins [Tutor][Creacion][ 2 ]

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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