Tutorial: Personalizar canal de youtube

Como ya algunos saben, me gusta personalizarlo todo!, hace un tiempo le di estilo (intente) de dibujo a mi home www.crystian.net, ahora se me ocurrió de hacer lo mismo con twitter y con youtube. Empecé por youtube a ver si podía hacer algo, y si se puede medio rebuscado, seguramente lo hicieron intencional para que cualquiera (y no solo los partners) puedan cambiar la apariencia del canal.

Básicamente es poner una imagen de fondo, y luego poner los elementos visuales de html (bordes, etc) transparentes :)

Así quedo mi canal:

http://www.youtube.com/crystian77

canal crystian77 youtube personalizado customize

Una aclaración importante es que no se puede cambiar la “estructura” general, esto se aplicaría como un skin. Mas que una modificación, eso no quita que puedas hacer algo interesante, simplemente tenes que ser más creativo.

Lo que propone youtube es personalizar colores, fuentes, con temas preestablecidos, pero también tenemos un modo avanzado en el cual podemos customizar (personalizar en spanglish) los colores y también agregar una imagen de fondo a modo repetitivo, tipo mosaico o bien sin repetir (en este modo se centra la imagen al canal), y también tiene una opción mas que interesante de transparencia, de la cual nos vamos a aprovechar. Comencemos:

ESTRUCTURA:

Lo primero es definir los paneles y los módulos que va a tener el canal

estructura modulos

Luego ubica y ordenalo como quieras (usando las flechitas) en los paneles moviles.

En mi caso lo organice de la siguiente forma:

estructura canal crystian77 youtube customize

Ahora, necesitamos extraer el esqueleto de esta estructura para comenzar a diseñar, para esto creamos un nuevo tema desplegamos “temas y colores” luego “nuevo tema”, le ponemos un nombre como “maqueta” y modificamos los colores para resaltar la estructura del sitio y que sepamos puntualmente que estamos viendo, por ejemplo asi:

youtube estructura

Podemos apreciar claramente la estructura, si, es muy feo gráficamente pero pensemos que es el esqueleto, le falta la “piel” que vamos a construir.

Paso siguiente, screenshot completo de todo el canal y lo llevamos a photoshop (o tu editor de imágenes favorito)

Desde firefox podes usar fireshot o algún plugin similar, si no, con alt+print screen (es la primer tecla de esas tres teclas que jamás usaste llenas de polvo que están arriba del teclado numérico a la izquierda)

Ahora en tu editor de imágenes cortas la imagen dejando centrada a la estructura, prestando mucha atención a este punto, si después la subís y no está centrada solo deberías agregar más pixeles a uno de los lados para centrarla.

ARTE:

Creas una capa nueva y luego en esta, “pintas” encima tu nuevo skin, por ejemplo en este caso vamos a simular dibujo a mano alzada. Claro está que en este punto uno puede hacerlo como quiera (sería interesante uno con metales), en este punto libera tu creatividad al máximo!

Explicare como hice el mío. Básicamente pinte con un pincel similar al trazo de una birome, haciendo las imperfecciones del trazo a mano para que quede más realista.

Es una buena práctica una vez que tengas la estructura mínima la subas para ver cómo queda, ajustar y resolver cualquier problema antes de continuar.

Luego le puse un fondo de papel tipo periódico, debajo y encima de este agregue cosas que están en mi escritorio actualmente, “links” a proyectos personales, cosas que me gustan, o incluso me definen, simplemente para mantener mi estilo y ser coherente conmigo a veces lo soy

Para dar apariencia “real”, casi todo tiene sombra, eso le da profundidad a la imagen y por ende queda más realista. Algunas cosas, como los billetes y los textos fueron escaneados.

Una vez terminado te queda algo así:

maqueta youtube estructura final crystian77

Vamos a youtube y creamos un nuevo tema, configuramos los colores de acuerdo al estilo que le dimos, y lo importante, ponemos transparente a la estructura:

Y con esto ya tenemos nuestro canal personalizado, si bien no cambiamos la estructura básica, si cambiamos la manera en la que mostramos nuestro canal.

TAMAÑO MAXIMO:

Para la imagen del fondo parece no tener un tamaño máximo de subida en cuanto a resolución, pero si en “peso”, no debe superar a los 256k, como el tamaño en resolución suele ser grande, es necesario comprimir a cambio de sacrificar calidad, usando el formato jpg, estoy usando más o menos calidad al 45% según el “save for web & devices” de photoshop.

.

Si te gusto este post, retwitealo, pásalo a tus amigos, y regálaselo a tu mama en su cumpleaños para mejorar su canal :P, je posta, si te gusto reenvíalo 😉

Si lo usaste o no, comenta en este post y pone tu canal para que todos lo veamos :)

Enjoy


NOTA: Si tiene un tema, cuando pulsas sobre listas de reproduccion tiene el mismo fondo, casi no se nota, pero bueh.

16 pensamientos en “Tutorial: Personalizar canal de youtube

  1. Muy buenooooo!, la verdad que no habia visto el tuto, lo hize con una plantilla que baje de internet.. pero este tuto, esta muy bien y sencillo!!

    I wanna see more art!

  2. @Gerard, también puedes hacer así como hice yo (no tengo fireshot, trabajo en mac y para lo rápido que se puede hacer “a mano” no me merecía la pena ponerme a buscar un software -tampoco suelo hacer screenshots tan grandes-): Capturas el screen del youtube en tres veces (arriba, en medio, abajo) y los montas en photoshop (cada shot en una capa y usando la transparencia las ajustas y después combinas capas y recortas). A mí me llevó bastante menos de lo que habría tardado en descargarme e instalar un software.
    @Crystian: me ha gustado mucho el tuto y estoy en ello. De hecho el rollo ese de boceto a mano me gusta mucho. Lo que estoy haciendo es imprimir el esqueleto y con papel semitrasparente dibujar a mano la estructura, sombras y detalles (anotaciones, quizá pegar alguna cosa, etc.), luego escanear y ajustar en photoshop. Ya comunicaré el resultado a ver. Muchas gracias!

    • @gabriel, cc @gerard, exacto, no es necesario el plug, podes hacerlo manualmente si conoces un poquito de photoshop

      @gabriel dale, quiero ver como te queda 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *