Te gusto? Únete a nosotros!

miércoles, 18 de abril de 2012

Portada del Facebook Timeline con Photoshop

Desde que vi por primera vez la nueva apariencia de la página persona (timeline) en Facebook, pude ver las oportunidades creativas que teníamos como usuarios de Facebook.
timeline1

Desde luego no todos somo diseñadores…hoy les diré como hacerlo de una manera fácil...

Cuáles son las Medidas recomendadas.

Lo primero que debemos saber son las medidas, porque es el punto de partida para poder crear los elementos y que al final se vean como lo imaginamos. Facebook nos permite cambiar dos elementos:
  • La imagen del perfil que mide 125 x 125 pixeles.
  • La portada que mide 851 x 315 pixeles.
Esto no quiere decir que debamos usar imágenes de perfil de 125 x 125, por que Facebook la va a hacer más pequeña.

Con respecto a la imagen de portada sucede algo curioso, podemos ajustarla hacia arriba o hacia abajo, pero no hacia los lados.

Esto quiere decir que podemos subir una fotografía con 850 de ancho y más de 315 para el alto.
 

Plantilla

Para simplificarles todo el proceso, he decidido compartir con ustedes una plantilla que he elaborado en Photoshop y que pueden descargar de este link.

La idea es que puedan hacer pruebas antes de hacer el cambio real, de esta manera pueden estar seguros que obtendrán lo que querían.

Cuando la abran se encontraran con algo como esto:
timeline2
 

Como usar la plantilla.

En realidad es muy sencillo de hacer, pero deben seguir las instrucciones con cuidado si no tienen experiencia con photoshop.

Si observan el área de las capas, podrán ver que algunas capas están de color rojo, esas no se deben modificar, no eliminen el candado de protección ni la camben de lugar.

Las únicas dos capas que podrán mover serán las de color verde.

Para sustituir el banner o la fotografía del perfil, hagan lo siguiente:

1.- Hacer clic sobre la capa que se encuentra por debajo de la imagen de perfil y agregar una nueva capa:
timeline3

2.- Como pueden ver se ha agregado una capa que tiene una pequeña flecha que apunta hacia abajo, esta es la señal que podrán usar apropiadamente esta sección, si no ven la flecha deben repetirlo.

3.- Para agregar una imagen en esa capa pueden arrastrarla desde la ventana del explorador de Windows, hacia photoshop, teniendo seleccionada la capa nueva:
timeline4

4.- También pueden abrirla y copiarla y pegarla en la capa correspondiente.

5.- Una vez que la han colocado donde corresponde, solo deben ocultar la capa original.
timeline5

6.- Para el banner deben repetir los pasos, pero esta vez con la capa por debajo del banner.
timeline6
Observaciones:
Al hacerlo podemos ver cuál será el resultado una vez que lo hagamos en Facebook, por ejemplo en esta ocasión, podemos ver la palabra ROCK que quedo parcialmente cubierta por la imagen de perfil.
timeline7

Si cambiamos la imagen por esta otra podemos ver que el resultado es mejor.
timeline8
 

Y si son flojos?

Si les da flojera todo lo que hay que hacer para estar seguro que el resultado se verá como nosotros nos imaginamos, entonces les invito a usar portadas para el timeline, que ya fueron probadas, de este link.
timeline9
 

Por último.

Por último vamos a salvar la imagen que usamos con la medida recomendada, que es de 851 pixeles de ancho y 315 de alto.

1.- Abrimos la imagen original en PS.

2.- Seleccionan la herramienta de recorte:
timeline10

3.- En la barra de opciones de la herramienta establecemos las medidas recomendadas:
timeline11

4.- Trazan el recuadro de recorte sobre la imagen y pueden moverlo hasta donde mejor les parezca antes de pulsar la tecla ENTER para aplicar el recorte.
timeline12

5.- Si quieren confirmar lo que acaban de hacer entren al menú Image opción Image Size:
timeline13

6.- Incluso es posible optimizar la imagen para su empleo en internet:
timeline14

timeline15
 

Comentario final.

Este artículo les da la oportunidad de usar sus fotografías para experimentar con la plantilla, antes de hacer el cambio real en Facebook, sin que aparezcan todas las pruebas que hagamos como mensajes a nuestros contactos.

Espero que les sea de mucha utilidad y que lo disfruten.

Suerte.

No hay comentarios: