Crear una Plantilla para la Portada y el Perfil de Facebook 2015

11 octubre 2015 § Deja un comentario

BubbleObjetivo: Para obtener las imágenes de la Portada y del Perfil de Facebook 2015 con las dimensiones correctas, vamos a crear una plantilla que nos simplifique este trabajo cada vez que tengamos que actualizar nuestra Página de Seguidores (FanPage).

Cuando queremos cambiar las imágenes de la portada o del perfil de Facebook, resulta un trabajo un poco engorroso sobre todo si tenemos claro la intención para seleccionar las imágenes y lo que queremos proyectar en la red.

Para que se obtengan resultados más precisos y rápidos … tenemos que trabajar! Vamos a construir una plantilla que podamos utilizarla para estos menesteres. He querido hacer la plantilla en formato .PSD (Adobe Photoshop), pero bien se puede hacer en cualquier otra aplicación de edición de imágenes (requisito: trabajar con capas). Estoy usando la versión CS6, pero el procedimiento será similar en otras versiones, aunque haya cambios en las órdenes.

Antes revisaremos las condiciones en Facebook. En Ayuda de Facebook, se muestran las condiciones para la portada y el perfil. Indico el enlace:

Ayuda de Facebook: ¿Cuáles son las dimensiones de la foto del perfil y la foto de portada de mi página?

Además, indican la posición y distancias entre una y otra (ver ejemplo de visualización en ordenadores). Aunque la posición y tamaño variará de acuerdo al dispositivo del usuario, vamos a trabajar con las dimensiones del ordenador.

Destacaremos puntos importantes de las indicaciones de Facebook:
Tamaño de la portada: 851 píxeles (ancho) por 315 píxeles (alto)
Tamaño del perfil: 160px por 160px. Esta medida corresponde a su visualización en ordenadores, pero Facebook exige que la imagen del perfil sea de por lo menos 180px por 180px para que pueda ser subida a la red. Si tiene menos de esta dimensión, simplemente no se podrá subir.
El perfil está a 16px del lado izquierdo de la portada y a 176px del lado superior de la portada.

Paso a paso

Hay varios caminos para llegar a Roma, pero os voy a mostrar uno que funciona.

Paso 1: Creamos un nuevo documento en Photoshop de 851px por 336px. Para el alto hemos sumado los 176px distancia del borde superior y 160px del alto del perfil.

Crear archivo nuevo en Photoshop

Completamos en el cuadro que se muestra al pulsar Archivo > Nuevo de tal manera que nuestra nueva imagen tendrá 851px (ancho) por 336px (alto), 72 píxeles por pulgada son suficientes para imágenes en pantalla del ordenador y agregamos el nombre de la plantilla. Desde Archivo > Guardar como, guardamos el fichero en nuestro disco duro.

Paso 2: Desde Vista > Guía nueva, creamos las guías que nos permitirán la ubicación del perfil con respecto a la portada a fin de posicionar correctamente estas imágenes.

Guía 1: Horizontal con una posición de 315px (recordar que el alto de la portada es de 315px):

Crear guía horizontal 315px

Esta guía se convertirá en el límite inferior de nuestra portada.

Guía 2: Horizontal con una posición de 176px (distancia superior del perfil con respecto a la portada):

Crear guía horizontal 176px

Guía 3: Vertical con una posición de 16px (distancia del perfil al borde izquierdo de la portada):

Crear guia vertical 16px

 

Guía 4: Vertical con una posición de 176px (16px distancia al borde izquierdo más 160px del ancho del perfil):

Crear guía vertical 176px

 

Paso 3: Posicionamos rectángulos en el lugar que ocupará la portada y el perfil:

Nuestras guías han quedado de la siguiente manera:

Guías de la imagen

Desde Vista > Bloquear guías, activamos esta propiedad para no moverla por error.

Colocamos en una capa un rectángulo que ocupará el espacio para la portada y en otra capa un rectángulo para el espacio que ocupará el perfil:

Espacio para portada y perfil

 

Vemos ahora mejor el espacio que ocupará la portada (rectángulo azul claro) y además el espacio que ocupará el perfil (rectángulo azul oscuro).

Las capas quedan ordenadas de la siguiente manera:

Capas para portada y perfil

 

Paso 4: Seleccionamos nuestras imágenes para la portada y el perfil, tomando en cuenta que sus dimensiones sean suficientes para los criterios de Facebook.

Desde National Geographic.Com he descargado una imagen que me gusta:
http://theplate.nationalgeographic.com/2015/09/28/your-shot-who-runs-the-harvest-girls/

La foto relata una mujer trabajadora de Taiwan (derechos de autor del fotógrafo Catman C.).

Compruebo que las dimensiones de la foto son suficientes:

Ver propiedades de una foto

 

Al acercar el puntero a la foto puedo ver las propiedades de la imagen. Fue capturada el 22-12-2007 y pesa 480MB. Tiene 1125px (ancho) por 753px (alto).

Utilizo la aplicación de Adobe Bridget para arrastrar la foto hasta una nueva capa que ubico sobre la capa de la portada.

Arrastrar foto con Adobe Bridge a una nueva capa

La nueva foto queda entre las capas portada y perfil de la siguiente manera:

Capa de la foto incrustada

Nos ubicamos en la capa del perfil y rasterizamos la capa (botón derecho sobre la capa):

Rasterizar capa de la imagen

Con la varita mágica de selección hago clic sobre el rectángulo rasterizado y queda seleccionado ese espacio para el perfil (rectángulo azul oscuro).

Selección del espacio para el perfil

 

Desde Selección > Guardar selección doy nombre de “perfil” a la selección establecida:

Guardar la selección del perfil

 

Paso 5: Crear la imagen para el perfil.

Ocultamos la capa del perfil y posicionamos el puntero en la capa de la foto:

Selección perfil sobre la foto

 

Ahora tenemos seleccionado el área del perfil sobre la foto. Si se ha ocultado esta selección del perfil, ir a Selección “Cargar selección” y en el desplegable elegimos “perfil”, que fue la selección que guardamos en pasos anteriores.

Con la selección a la vista y sobre la capa de la foto, vamos a Edición > Copiar. En el portapapeles está ahora la porción de la foto. En Archivo > Nuevo creamos un nuevo fichero que ya tiene las dimensiones de la porción seleccionada y copiada. Ingresamos los datos y una vez creado el fichero pegamos del portapapeles desde Edición > Pegar.

Perfil de Facebook

 

La imagen del perfil creada tiene por lado 160 píxeles pero Facebook requiere de una imagen de por lo menos 180 píxeles.  Es una incongruencia de Facebook? No, es que la imagen se muestra 160px por 160px en la pantalla del ordenador pero necesita mayor tamaño para adaptarla a los diferentes dispositivos del usuario.

Desde Imagen > Tamaño de la imagen, le damos el tamaño mínimo que exige Facebook (180px por 180px).

Dimensiones del perfil

 

Ahora tenemos el perfil adecuado y la guardamos para Web desde Archivo > Guardar para web . Podemos elegir formato .JPG a la máxima calidad o PNG-24 (voy a elegir este último).

Paso 6: Crear la imagen para la portada.

Volvemos a nuestra plantilla y quitamos la selección del perfil (ir a Selección > Deseleccionar, o Control + D).

Para crear la imagen de la portada podemos seguir pasos similares a la creación del perfil, pero voy a hacerlo por otro camino, mediante capa de recorte, así practicamos este método también.

Nos ubicamos en la capa de portada (rectángulo azul claro) y la seleccionamos. Sobre ella está ubicada la foto. Ubicamos el puntero entre estas dos capas y pulsamos Alt. Aparecerá el icono de capa de recorte que indica que la capa de la foto sólo se vincula a la capa de la portada (respeta el espacio del rectángulo azul claro y funciona como una máscara).

Capa de recorte

 

Para seleccionar sólo la porción de foto que corresponde a la portada, pulsamos la tecla Control y al mismo tiempo hacemos clic en el icono de la capa portada que está al lado del nombre que dimos a la capa (aparecerá un icono de selección cuadrada).

Selección de la portada

 

Ahora se ha seleccionado correctamente la porción de la foto para la portada.

Copiamos al portapapeles la selección (ir a Edición > Copiar combinado), creamos un nuevo fichero que tendrá las dimensiones correctas de la portada (851px por 315px), le damos nombre y guardamos la portada sin olvidar el formato para web.

Copiar combinado capa del fichero

Vamos a subir a Facebook nuestras imágenes a ver cómo quedan.

Portada y perfil de Facebook

Comprobamos que ambas imágenes se funden en una sola. Ya tenemos la portada y el perfil para la página de Facebook. Cada vez que necesitemos actualizar estos ficheros, basta con pulsar botón derecho sobre la capa de la imagen y pulsar en “Reemplazar el contenido”. Esto siempre se podrá hacer cuando la imagen se ha incorporado a la capa como objeto inteligente.

La plantilla .PSD elaborada la podéis descargar desde
https://drive.google.com/file/d/0BzTyUbKvlw49clptbmxDazkwYVU/view?usp=sharing

La próxima vez que necesitemos cambiar las imágenes de la portada o el perfil … será más fácil con esta plantilla.

 

Anuncios

Etiquetado:,

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

¿Qué es esto?

Actualmente estás leyendo Crear una Plantilla para la Portada y el Perfil de Facebook 2015 en Instalar en el PC. Tutoriales paso a paso..

Meta