viernes, 15 de abril de 2011

Tutorial : Añade Scanlines a tus imágenes

Algo que se ha perdido al pasar a nuestros monitores TFT, es el efecto 'rayado' de las antiguas pantallas conocido concretamente como Scanline.

Para algunos (en los que me me incluyo) el jugar a juegos antiguos sin ese efecto es un lujo pero bien es cierto que la mejor manera de recrear la sensación de jugar a los clásicos es con la opción de Scanline activada (que muchos emuladores traen consigo)

Hoy modificaremos una imagen cualquiera para añadirle ese efecto tan auténtico.

La imagen elegida es de Monkey Island (como no...). Este es el resultado:


Este es el resultado del proceso.

Para verlo con mayor claridad, lo mejor es ver la comparativa con algo de zoom:


Pincha encima para verla en su tamaño real

En sencillos pasos y usando Photoshop, se puede simular el efecto en la imagen que queramos.

Tutorial paso a paso en el interior:


Antes de nada, tengo el Photoshop en inglés, pondré la traducción de los comandos pero no tiene confusión.

Lo primero que haremos es crear un nuevo documento en el que marcaremos las medidas de un píxel de ancho por dos de alto. El fondo transparente:



Debería quedarnos algo así:



Lo siguiente será seleccionar el píxel de arriba con la herramienta de selección:



Y lo pintaremos de color negro:



Lo siguiente será convertir la imagen creada como un pattern (o motivo).  Para ello iremos al menú Editar y seleccionaremos Define Pattern (Definir Motivo)




Le ponemos un nombre, en mi caso le pondré 'Scanline'




Ya tenemos más de la mitad del trabajo hecho. Ahora abriremos la imagen que queremos utilizar para el ejercicio. En mi caso como comenté, una de Monkey Island:




Posiblemente esté guardada con extensión Gif o Png por lo que no nos dejará crear capas nuevas, para solucionarlo cambiaremos el Modo de color a RGB, como se muestra en la imagen.



Ahora ya podemos seguir con el siguiente paso. Crear una nueva capa:



Ahora rellenaremos la capa con el motivo que hemos creado antes. En el menú editar seleccionamos Fill (Rellenar)



Buscamos en la lista de motivos y buscamos el nuestro:



Pulsamos aceptar y veremos algo como esto:




El efecto está crudo y necesitamos suavizarlo para conseguir un efecto realista. Para ello cambiaremos el Blending Mode ( Modo de fusión) a luz suave:


Listo, ya tenemos un mejor acabado:



Si acercamos la imagen veremos el efecto con más claridad:



Y listo. Niveles de nostalgia al máximo de nuevo.

Aún así vuelvo a decir que no lo hecho de menos. Donde haya una imagen clarita... 

Espero que os haya gustado!















8 comentarios:

  1. Buen tutorial compañero, como todos los tuyos.
    Y lo mejor de todo, es que aún tenemos muchísimo que aprender de Pixels Mil!
    Un saludo!
    Por cierto, te apuntas mañana al salón del comic?
    Con un poco de suerte te conozco por alli :)

    ResponderEliminar
  2. Es un efecto muy retro. Me gusta.

    Aunque, al igual que tú, hoy por hoy no lo hecho de menos, aunque es un buen aporte. Quizá algún día apetezca recordar viejos tiempos ^^

    ResponderEliminar
  3. @Oldschool

    Gracias por los ánimos! El año pasado estuve en el salón pero este me ha cogido mal para repetir. Cualquier día organizamos una quedada por Mataró y charlamos un rato ;)

    @Zervio
    Es un efecto sencillo que sólo sirve para eso, para dotar a una imagen de ese efecto del que en su momento no podíamos escapar. Bueno y que a mi me trae buenos recuerdo.

    Oye, estamos de acuerdo! jaja

    ResponderEliminar
  4. ¿Una quedada de pixelsmaniaticos? Suena bién y todo xD

    ResponderEliminar
  5. OOOOOH esta fantastico tu tutoriaaaaal! oye disculpa la molestia pero sera que este tutorial me sirvira con el Cs5!? es que trato y trato y no me sale nada T-T! Espero tu respuesta! Gracias Por el tutorial!

    ResponderEliminar
    Respuestas
    1. Hola! Pues no tengo CS5 pero estoy seguro de que se puede hacer igual aunque lo mismo cambie algún menú de sitio. Lo importante es que puedas crear tu pattern de un pixel negro y otro debajo transparente. Una vez lo uses ya estará.

      Siento no poder detallarte más pero como te digo, no dispongo de esa versión. Saludos!

      Eliminar
  6. Maldita Castilla tiene unos scanlines muy chulos, no sabía que se hacían así, gracias por el tutorial

    ResponderEliminar
    Respuestas
    1. Supongo que habrá distintas formas de hacerlo pero en este caso, para una imagen estática, creo que es una forma sencilla de hacerlo. Saludos!

      Eliminar

Gracias por comentar!