¡Colabora!
0

Tutorial para la creación de portadas y cabeceras de los temas oficiales

Tutorial para la creación de portadas y cabeceras de los temas oficiales

18694 aportaciones - 381359 VJs
PSN: Alley_Viper
Como hace tiempo que varios me pedís cabeceras y portadas para temas oficiales y yo ya empiezo a estar un poco saturado, creo que va siendo hora de hacer un tutorial para extender mis conocimientos de Photoshop y que cada uno decore sus temas oficiales como más le guste. Para ello son necesarias tres cosas:

1. Paciencia.
2. Tiempo libre.
3. Un editor de imágenes.

Paciencia porque las cosas no salen la primera y porque a menudo el resultado no es tan bueno como podíamos imaginar al principio. Tiempo libre porque encontrar las imágenes, logos y fuentes de texto necesarias para el tema oficial a menudo requiere bastantes búsquedas en google y porque la edición de las cabeceras mediante el editor de imágenes en ocasiones es un constante "trial & error".

En cuanto al editor, yo uso Adobe Photoshop CS6 aunque para todos los anteriores encargos usé el CS3. Si no podéis conseguirlo, tengo entendido que GIMP es gratuito y tiene un funcionamiento e interfaz bastante similar al Photoshop. Dicho esto, vayamos con el tutorial:

1. Búsqueda de imágenes.

Consiste en buscar imágenes del juego del que queremos hacer el tema oficial. Vamos pues a nuestro navegador y ponemos en el buscador de imágenes de google alguno de los siguientes términos:

- "Nombre del juego"
- "Nombre del juego artwork"
- "Nombre del juego wallpaper"
- "Nombre del juego banner"
- "Nombre del juego cover"

Por ejemplo, en el caso del tema de Splinter Cell Blacklist de Miqui haríamos lo siguiente:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Hecho esto toca seleccionar aquellas imágenes que nos gusten y que puedan servirnos tanto para la confección de portadas y cabeceras. Para la portada no suele haber problema porque casi siempre usaremos imágenes que apenas retocamos o modificamos. La imagen seleccionada ha sido la siguiente:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Para las cabeceras en cambio hay que tener en cuenta varias cosas (porción de la imagen seleccionada que usaremos, anchura de la imagen, amplitud máxima de las aportaciones de VJ, color de fondo, etc.). Para la cabecera de Splinter Cell Blacklist he escogido la siguiente:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Como podéis ver la imagen es de una dimensiones considerables (1920x1080) lo que me permitirá recortar la porción que me interese sin tener que preocuparme por la amplitud máxima de las aportaciones de VJ que es de 830 pixels. En cuanto al color de fondo (gris claro) quizás me da problemas si no encuentro el logo del juego en un color oscuro.

2. Búsqueda del logo:

Consiste en buscar el logo del juego del que queremos hacer el tema oficial. Su uso es opcional pero nos servirá tanto para la portada (en el caso de que no aparezca en la imagen seleccionada) como para las cabeceras. Para efectuar la búsqueda vamos a nuestro navegador y ponemos en el buscador de imágenes de google alguno de los siguientes términos:

- "Nombre del juego logo"
- "Nombre del juego logo png"
- "Nombre del juego white logo"
- "Nombre del juego black logo"

En el caso del tema de Splinter Cell Blacklist haríamos lo siguiente:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


El término de búsqueda que suele dar mejores resultados es el segundo pues nos permite encontrar el logo del juego con un fondo transparente de tal manera que podremos incrustarlo en otras imágenes (como las usadas para la portada y cabecera) sin tener que editar el logo. Si no encontráis el logo con fondo transparente intentad al menos que el fondo sobre el que está situado sea de un único color para eliminar el fondo fácilmente (no indico como proceder a la eliminación de fondos porque en internet hay muchísimos tutoriales al respecto).

El tercer y cuarto término de búsqueda se pueden usar en aquellas ocasiones que nos interese encontrar el logo en un color determinado. En el caso de Splinter Cell Blacklist nos interesa un logo oscuro porque el fondo de la cabecera es claro pero como no ha habido suerte en su búsqueda tendré que utilizar el siguiente:

...

3. Búsqueda de la fuente de texto:

Igual que en el caso del logo del juego, la fuente de texto es opcional. Si ya disponemos de fuentes de texto que nos gusten o queden bien con la portada o las cabeceras diseñadas, podemos saltarnos este paso. Si no es así, siempre podemos echar mano de la red y buscar alguna fuente de texto que sea similar o exactamente igual a la utilizada en el logo del juego. Como en anteriores ocasiones vamos a nuestro navegador y utilizamos alguno de los siguientes términos en el motor de búsqueda:

- "Nombre del juego font"
- "Nombre del juego font text"
- "Nombre del juego font text logo"

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Como podéis ver aparecen varios resultados. En este caso parece que los resultados propuestos por devianart como los de datafont son acertados. Descargo ambos archivos, voy al "Panel de control" de mi ordenador y busco la carpeta "Fuentes" dentro del apartado "Apariencia y personalización". Arrastro ambas fuentes al interior de la carpeta citada anteriormente y las instalo para poder usarlas posteriormente con mis editores de texto e imágenes.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Hecho esto ya tenemos todo el material necesario para la creación de la portada y las cabeceras del tema oficial.

4. Portada

La portada normalmente no lleva mucho trabajo. Como en la mayoría de ocasiones escogemos una imagen con el logo del juego los únicos retoques que hacemos son la inclusión de texto ("Tema oficial"), la reducción de las dimensiones de la imagen y si se considera conveniente, la corrección de brillo o la aplicación de algún filtro. En el caso de la portada de Splinter Cell Blacklist solo incluiremos el texto y reduciremos el tamaño de la imagen.

Abrimos la imagen con el editor:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y seleccionamos la herramienta de texto y la fuente que queremos utilizar (Splinter) en la lista desplegable de fuentes:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pinchamos encima de la imagen y escribimos el texto (Tema oficial) que queremos incluir en la imagen:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Ahora seleccionamos la herramienta de mover y arrastro el texto hasta el lugar de la imagen que me parezca más conveniente:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Si queremos modificar el texto, abrimos la ventana (Window) de caracteres (Character) y usamos cualquiera de las opciones (Bold/negrita, Italic/cursiva, Colour/color, Size/tamaño etc.) que consideremos convenientes:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


También podemos cambiar otros parámetros del texto escrito mediante la ventana de capas (Window / Layers). Por un lado están las opciones de opacidad (Opacity) y relleno (Fill) con las que hacer menos visible el texto.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pulsando encima de "Normal" abriremos una lista desplegable con diferentes efectos (Dissolve/disolver, Lighten/aclarar, Darken/oscurecer, etc.).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y si pinchamos encima de la capa de texto con el botón derecho del ratóny seleccionamos las opciones de fusión (Blending Options) abriremos una ventana desde donde podemos crear efectos vistosos de sombreado, resaltado, brillo, etc.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Una vez modificado el texto a nuestro gusto, reducimos el tamaño de la imagen asegurándonos que la opción de restringir proporciones (Constrain Proportions) está activada:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Tras reducir las proporciones de la imagen (o antes si queréis), se pueden realizar otros ajustes genéricos en la imagen como pueden ser el aumento o reducción del brillo y el contraste o la corrección de color desde el menú imagen (Image):

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Ejemplo de "Auto Color". Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


En cuanto a la aplicación de filtros (Filters), solo soy partidario de usarlos de forma muy sutil pues por defecto los cambios producidos en la imagen son muy notorios:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Finalmente guardamos la imagen en nuestro ordenador mediante la opción "Guardar para web" (Save for Web...):

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


En una calidad alta, muy alta o máxima:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y en la carpeta que queramos:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


5. Cabeceras

A diferencia de las portadas, las cabeceras sí conllevan bastante faena y a veces, algún que otro dolor de cabeza. En la mayoría de ocasiones será necesario editar la imagen seleccionada para el fondo y retocar el logo del juego y la fuente de texto para que todo encaje a la perfección y el resultado sea de nuestro agrado.

En primer lugar empezaremos con el fondo y la forma de la cabecera. Abrimos la imagen con el editor:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y seleccionamos la herramienta para recortar (Crop) la imagen:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pinchamos encima de la imagen y sin soltar el botón izquierdo extendemos el rectángulo de líneas discontinuas:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Dejamos del pulsar el botón izquierdo una vez seleccionada la porción de imagen que nos interesa obtener para el fondo:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y pulsamos intro (Enter) para recortar la imagen:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Si os fijáis bien, veréis que la porción recortada no es muy alargada por lo que el banner sería un tanto corto. Esto es debido a que en este caso he considerado mejor recortar la mitad que formará parte del lado izquierdo del banner para posteriormente crear la mitad izquierda como veremos más adelante. Antes sin embargo, reduciremos las dimensiones de la imagen recortada para que tenga un tamaño más adecuado al de la página:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Veamos ahora cómo crear la segunda mitad. Abrimos el menú imagen (Image) y seleccionamos la opción de duplicar (Duplicate...):

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pulsamos aceptar (Ok) en la ventana que acaba de aparecer:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Y obtenemos nuestra copia:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


A continuación seleccionamos con el ratón la copia de la imagen, volvemos a abrir el menú imagen (Image), desplegamos el submenú de rotación (Image Rotation) y pulsamos en la opción de voltear la imagen horizontalmente (Flip Canvas Horizontal).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Con las dos mitades en nuestro poder, vamos al menú de archivo (File) y creamos una nueva imagen (New) con el doble de anchura (Width) que las mitades y la misma altura (Height). En este caso las dimensiones serían 900 pixels de largo y 143 pixels de alto.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Una vez creada la imagen, seleccionamos la herramienta de mover (Move Tool) y arrastramos cada una de las mitades al lugar que le corresponde:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Cerramos entonces cada una de las mitades para que no molesten mientras trabajamos con la cabecera y hacemos un último ajuste que consiste en fusionar las dos mitades que forman el fondo de la cabecera. Abrimos la ventana de capas (Layers) y mientras mantenemos pulsada la tecla Control, clickamos con el botón izquierdo del ratón encima en las dos capas (Layer 1 y Layer 2) para seleccionarlas.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Hecho esto, pulsamos encima de cualquiera de las dos con el botón derecho del ratón y seleccionamos la opción de fusionar capas (Merge Layers):

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Ahora que ya tenemos listo el fondo de la cabecera añadiremos el logo del juego a la cabecera. Abrimos el logo, seleccionamos la herramienta de mover (Move Tool) y arrastramos el logo encima de la cabecera:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Como el logo del juego es demasiado grande para incluirlo tal cual en la cabecera será necesario hacerlo más pequeño. Cerramos la imagen del logo que nos sobra para que no moleste, abrimos el menú de editar (Edit), desplegamos el submenú de transformar (Transform) y seleccionamos la opción de escala (Scale).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Para modificar las dimensiones del logo sin deformarlo mantenemos pulsada la tecla Shift y reducimos el tamaño del rectángulo que acaba de aparecer en pantalla arrastrando la esquina superior derecha con el botón izquierdo del ratón. Cuando el rectángulo tenga el tamaño deseado pulsamos intro (Enter) para llevar a cabo la transformación y luego lo colocamos en el centro de la cabecera mediante la herramienta de mover (Move).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Ahora el logo ya tiene un tamaño más adecuado pero su fondo verde y gris oscuro es un tanto chillón por lo que vamos a hacerlo desaparecer mediante las opciones de fusión (Blending Options) que comenté más atrás en punto 4 (Portada). Seleccionamos en la ventana de capas (Windows / Layers) la capa del logo (Layer 3), pulsamos botón derecho del ratón y seleccionamos las opciones de fusión (Blending Options).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Una vez abierta la ventana de opciones, seleccionamos el efecto que más nos guste. En este caso he trasteado un poco con la opción de resplandor interior (Inner Glow) para hacer desaparecer el fondo verde y gris oscuro que me molestaba.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Preparado el logo, es turno para incluir el texto que irá en la cabecera. Seleccionamos la herramienta de texto y la fuente que queremos utilizar (Splinter) en la lista desplegable de fuentes:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pinchamos encima de la imagen, escribimos el texto (Ficha Técnica) que queremos incluir en la imagen y mediante la herramienta mover (Move) situamos el texto debajo del logo del juego,

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Si queremos modificar el texto, abrimos la ventana (Window) de caracteres (Character) y usamos cualquiera de las opciones (Bold/negrita, Italic/cursiva, Color/color, Size/tamaño etc.) que consideremos adecuadas:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


O desde la ventana de capas (Window / Layers) modificando las opciones de opacidad (Opacity) y relleno (Fill) o pulsando encima de "Normal" abriremos una lista desplegable con diferentes efectos (Dissolve/disolver, Lighten/aclarar, Darken/oscurecer, etc.).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Sin embargo, como hemos hecho antes con el logo, vamos a cambiar el texto mediante las opciones de fusión (Blending Options). Seleccionamos en la ventana de capas (Windows / Layers) la capa del texto (ficha TECNICA), pulsamos botón derecho del ratón y seleccionamos las opciones de fusión (Blending Options).

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Luego trasteamos con algunas de las opciones (Stroke, Outer Glow, Drop Shadow) hasta obtener el siguiente resultado:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Una vez finalizada la cabecera (¡aleluya! ) guardamos la imagen en nuestro ordenador mediante la opción "Guardar como" (Save as...) en formato .psd y le damos a aceptar (Ok) cuando aparezca el aviso de maximizar compatibilidad (Maximize Compatibility). Mediante este formato conservaremos las distintas capas de la imagen (fondo, logo y texto) de tal manera que podrán ser modificadas posteriormente tantas veces como queramos.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Después de guardar la imagen en formato .psd, la guardamos en formato .jpg mediante la opción "Guardar para web" (Save for Web...) en una calidad alta, muy alta o máxima:

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Para hacer las cabeceras de los demás apartados del tema oficial bastará con seleccionar la herramienta de texto, modificar la capa de texto con el nombre del apartado que queramos y volver a guardar imagen en formato .jpg y con otro nombre.

...
Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Pincha encima de la imagen para verla a tamaño completo en una pestaña nueva.


Espero que el tutorial sirva de ayuda y que disfrutéis más leyéndolo que yo escribiéndolo Avisadme si surge alguna duda o si detectáis cualquier error

Saludos a todos
Regístrate o inicia sesión para responder a esta aportación.
Última edición: Akira, 19/08/13 23:01 Ver todas Akira, 19/08/13 22:52 

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
17104 aportaciones - 51583 VJs
@Ender_Okada

Coño, me parece una idea cojonuda. No lo he leído aún, pero lo que he visto por encima me gusta. Buen trabajo Aki
Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
18694 aportaciones - 381359 VJs
PSN: Alley_Viper

Citando a Ender_Chief:
Coño, me parece una idea cojonuda. No lo he leído aún, pero lo que he visto por encima me gusta. Buen trabajo Aki
Tómatelo con calma y ya me comentarás si te sirve de ayuda
Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
17361 aportaciones - 19444 VJs
Frodorick Fronkonsteen

Ala, que currele de tutorial, le he echado un vistazo rápido, pero me va a venir de perlas para futuros temas.

Quizás yo cree uno de "como descuadrar temas oficial en cuestión de segundos"
Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
5922 aportaciones - 51644 VJs
Uno que pasa por aquí

Citando a Bradbury:
Quizás yo cree uno de "como descuadrar temas oficial en cuestión de segundos"



Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
5515 aportaciones - 6576 VJs
Apasionado de la Estrategia y un Nostálgico de las 2D

Joder muy currado Akira.

Yo nunca puse uno porque no controlaba el tema. Pero con este tutorial parece más sencillo de lo que creía.

Saludetes.
Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
1771 aportaciones
Slayer of Demons.

Aki, que versión de Photoshop usaste en este tutorial ? Gracias.
Regístrate o inicia sesión para responder a esta aportación.

Re: Tutorial para la creación de portadas y cabeceras de los temas oficiales
18694 aportaciones - 381359 VJs
PSN: Alley_Viper

Citando a CProctor:
Aki, que versión de Photoshop usaste en este tutorial ? Gracias.

Yo uso Adobe Photoshop CS6. Lo pongo más arriba
Regístrate o inicia sesión para responder a esta aportación.
Para poder aportar cualquier tipo de contenido a uVeJuegos.com necesitas estar registrado y además haber iniciado sesión.

Elige lo que quieres hacer:

Moderadores: .
×