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.

Fotos Trucadas

[singlepic=269,65,,,left]Apenas comencé a utilizar Photoshop (8 años facil), intente trucar fotos :)

Había retocado muchas, pero lamentablemente en algún momento se me rompió un disco donde tenia muchisimos laburos (Que obviamente no había hecho su correspondiente backup) y perdí todo, solo me quedaron estas:

 

(Fijate las descripciones :) )

En algún momento escribiré como hacer la de los clones 😉

Tutorial: Texturas a partir de fotografias (para juegos y otros usos)

La idea de este tutorial es mostrar los pasos para a partir de una foto mostrar como lograr usarla como textura para mapas de juegos y otros usos (escrito hace dos años o mas, cuando iba a crear un mapa con la plaza de mayo para counter strike 2).

Requerimientos: Photoshop 7 o superior.

Fotografias

Primero debemos tener las fotografias del edificio en cuestion, por ejemplo yo elegi el banco nacion (el que esta en frente de la casa rosada en plaza de mayo) (para bajar las imagenes pulsa aqui)

Encuadre

El primer paso va a ser obtener la textura de la pared desde el piso hasta unos 1.6, (es granito y concreto)
 
 

Como el objetivo de la camara no es ortogonal sino que es a partir de un punto de vision, tenemos que ajustar la perspectiva manualmente, en este caso vamos a cambiar la perspectiva basandonos en la ventana.
 
 

Para esto lo tenemos que hacer OjO, es complicado pero tenemos herramientas que nos facilitan la cosa (por mas que siga siendo a OjO), tenemos que mostrar las guias, ya que tenemos que “encuadrar” la imagen (si no se entiende, no se pongan mal con los ejemplos se va a entender mejor), vallamos al menu vista/mostrar/cuadricula, con eso nos va a mostrar una grilla sobre la imagen, tambien no estaria mal mostrar la regla en pixeles 😉 (para ajustar la cuadricula y regla ir a archivo Edicion/Preferencias)

Ahora viene lo lindo, una vez cargada la imagen en el photoshop, esta tiene que ser una capa y no el fondo, si es asi, sobre la capa “fondo”, con el boton derecho del mouse (de ahora en adelante “el otro boton”)”duplicar capa”, luego posicionarse sobre la capa nueva), ir al menu edicion/transformacion libre (o ctrl+t) con transformacion libre escalas y giras la imagen, mas o menos deberia quedar la ventana del medio lo mas cuadrada posible, o sea el marco derecho deberia ser

totalmente vertical esto lo podemos ver facilmente con las guias que mostramos ;), apretamos enter para aceptar el cambio, volvemos a transformacion libre y ahora le damos con el otro boton y seleccionamos”perspectiva” y nos posicionamos sobre la esquina inferior derecha estiramos hacia abajo y vemos como se “estira” la imagen tanto para abajo como para arriba y a su vez para adentro :o, ahora nos aprovechamos de la info que nos da la imagen, que son las “lineas rectas” que las vamos a asimilar contra las guias (como ser los bordes de la ventana y el cambio de granito a concreto) (ver imagen) , ahi tenemos alineado el marmol y la ventana :), o sea esta “aplanada”, ahora podremos dejar de mostrar esas guias (ctrl+h) para que no estorben la vision.

Limpieza

Fue sencillo esta imagen porque esta a la altura de la camara, el tema se complica cuando no esta a esa altura o estas apuntando con la camara torcida :P, ese tema lo tocamos despues, sigamos ahora con esta textura. Como se puede apreciar hay un cable, una seña de transito, un cartel la ventana, vamos a eliminarlas :)

La herramienta “tampon de clonar”, vendria a ser como pintar calcando con otra area de la imagen, veamoslo en accion, elegimos el tamaño apropiado, en este caso elegi 45, luego en el area que queremos que sea la matris a pintar pulsamos ALT y click del mouse luego sobre el area que queremos suplantar, pintando libremente y asi hasta eliminar
por completo la señal, (nota: para volver a cambiar la matris de copia solo hay que volver a marcar otra zona, con ALT)
 
 
 
 


La imagen queda asi, sacando el cable, y los carteles

Mosaico

Bueno ya tenemos la textura encuadrada y limpia, ahora tenemos que ver el tema de balance de blancos (normalizar la imagen) ya que esta va a ser una imagen mosaico (una imagen al lado de otra repetida veces), en este caso solo mosaico horizontal, veamos como quedaria para dar una idea

Para corregir esto hay varias alternativas, veamos esta (que no es la mejor, pero es rapida), dupliquemos la capa y mobamosla hacia la derecha hasta la mitad del lienzo, luego ala capa duplicada la movemos para el lado opuesto, tendria que quedar asi:


Ahora seleccionamos la capa mas oscura (derecha) y nos ponemos en modo “mascara rapida” (Q), seleccionamos “degradado” (verificar que el degradado sea de negro a blanco y sea recto), y ahora arrastramos desde la derecha hacia la izquierda manteniendo shift apretado (para que sea en angulo llano), hacia la mitad de la imagen de la capa, quedaria algo asi, esto nos permite controlar cuanto y donde afectamos con las modificaciones (lo rojo no altera), volvemos a modo estandar (Q) y veremos como esta seleccionado el resto, ahora modificamos el brillo y contraste desde el menu imagen/ajustes/brillo y contraste (tambien tenemos “Niveles”, que seria el mas apropiado pero es mas complejo, con brillo y contraste nos alcanza) (para ocultar la seleccion ctrl+h) y lo aproximamos lo mas posible a la capa inferior.
 
 
 
 
 
Deberia querar algo asi:
 

 
 
 
 
 
 
 
 
 
 

una vez terminado con los niveles mas proximos acoplamos la imagen (ctrl + e)
Ahora lo que resta es terminar la union, usando el “clonador” (como lo usamos antes) y el “dedo”! (esta herramienta permite manipular la imagen como si fuese que tenes el dedo mojado con pintura, es especial para esto, invito a que jueguen con esta herramienta, da resultados muy interesantes)
 

Quedaria asi:

Este paso no es necesario, pero es implemente para que se entienda que es la textura, estara interesante volver a dejarla donde estaba la ventana, de la misma manera que hicimos antes para emparejar los bordes, pero ahora ya encajaria perfectamete.

Espero que les haya servido este mini tutorial!