Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)
¿Quieres una apariencia fresca para tu perfil de Facebook? En este tutorial, diseñaremos una plantilla para crear una foto de portada y perfil personalizadas de Facebook que interactúen unidas una con otra. Vamos a lograr esto haciendo que tus fotos de perfil y portada se empalmen para que parezcan una sola imagen. Muchos han intentado lograr esta apariencia pulida, pero no siempre tienen éxito debido a problemas de tamaño. Bueno, veamos si podemos hacer esto bien.
¿Tienes flojera? ¡Revisa mi complemento para Photoshop para obtener un resultado asombroso en segundos! "Acción de Identidad Unida para Facebook" es un complemento de Photoshop que te permite crear una portada y foto de perfil atractivas para tu página de Facebook.
Recursos del Tutorial
El siguiente recurso ha sido usado durante la producción de este tutorial:
1. Cómo Crear una Plantilla de Facebook
Paso 1
Crea un nuevo documento especificando las siguientes opciones para el ajuste seleccionado:
- Anchura y Altura: Especifica el tamaño del documento. Teclea 1630 px para ancho y 734 px para alto.
- Orientación: Especifica una orientación de página para el documento. Selecciona Horizontal.
- Modo de Color: Especifica un modo de color para el documento. Selecciona RGB.
- Resolución: Especifica la fineza de detalle en una imagen de mapa de bits medida en pixeles/pulgada o pixeles/centimetro. Ya que estamos usando esta plantilla para imágenes web, la resolución es irrelevante. Mantén la resolución por defecto 72 Pixel/Pulgada.
- Contenidos de fondo: Especifica un color de fondo para el documento. Selecciona Blanco.
Paso 2
Con la Herramienta Rectángulo (U), da clic en algún lugar sobre el lienzo para crear un nuevo rectángulo de 1630 x 605 px.
Abre el panel Propiedades seleccionando en el menú superior Ventana > Propiedades, y establece la posición del rectángulo a 0 para los ejes X y Y, y después establece el Trazo y Relleno a Sin Color.
En el panel Capas, renombra la capa que se acaba de crear dando doble clic sobre el nombre de la capa y tecleando "Cover Photo".
Paso 3
Con la Herramienta Rectángulo (U), da clic en algún lugar sobre el lienzo para crear un nuevo rectángulo de 307 x 307 px. En el panel Propiedades, establece su posición a 38 para X y 341 para Y y después establece el Trazo y el Relleno a Sin Color.
En el panel Capas, renombra la capa recién creada dando doble clic sobre el nombre de la capa y tecleando "Profile Picture".
Paso 4
Clic derecho sobre la capa "Profile Picture" y elige Duplicar Capa y después presiona OK. Renombra esta nueva capa "Frame".
Paso 5
Agrega un nuevo Estilo de Capa a la capa "Frame" dando doble clic sobre la capa, fuera del nombre o la miniatura de la capa.
Agrega un nuevo efecto Trazo. Esto contornea el objeto sobre la capa actual usando color, un degradado, o un patrón.
Establece Tamaño a 8 px, Posición a Exterior, y Tipo de Relleno a Color Blanco. Mantén la Opacidad a 100% y Modo de Fusión en Normal.
Ahora agrega una nueva Sombra Paralela. Esto agrega una sombra que cae detrás de los contenidos en la capa. Establece Modo de Fusión a Normal, Color Negro, Opacidad 22 px, Distancia 0, Expansión 100%, Tamaño 10 px. Mantén las otras opciones como la imagen de abajo:
Paso 6
Selecciona la capa "Profile Picture" y después con la Herramienta Rectángulo (U) da clic en algún lugar sobre el lienzo para crear un nuevo rectángulo de 1630 x 129 px. En el panel Propiedades, establece su posición a 0 para X y 605 para Y y después establece la el Relleno de forma a Blanco y el Trazo a Sin Color.
Renombra esta nueva capa a "Base".
Paso 7
Selecciona la capa "Profile Picture" y elige en el menú superior Capa > Nueva Capa de Relleno > Color Solido. Presiona OK y elige cualquier color. Renombra esta capa a "Fill".
Paso 8
Ahora vamos a agregar algunos puntos de anclaje nuevos para modificar el trazo.
En el panel Capas, Selecciona la capa "Base" y después, para seleccionar el trazo, elige la herramienta Selección de Trazo, y después da clic en cualquier lugar dentro del componente de trazo.
Seleccionar un componente de trazo o segmento de trazo muestra todos los puntos de anclaje en la porción seleccionada. Los puntos de anclaje seleccionados aparecen como cuadrados rellenos y los puntos de anclaje no seleccionados como cuadrados vacíos.
Selecciona la Herramienta Agregar Punto de Anclaje.
Para agregar un punto de anclaje, posiciona el puntero sobre el segmento de trazo y da clic. Agrega cuatro puntos de anclaje como la imagen de abajo:
Paso 9
Selecciona la Herramienta Convertir Punto y da clic en cada uno de los cuatro puntos que acabamos de crear para convertirlos.
Paso 10
Selecciona la Herramienta Selección Directa.
Da clic en el punto 2 y arrastra el segmento a su nueva posición detrás del cuadro. Haz lo mismo con el punto 3. Ahora el trazo de la capa "Base" debería ser similar a esto:
Paso 11
Doble clic sobre la capa "Base", afuera del nombre o miniatura de la capa, y agrega un nuevo Estilo de Capa. Agrega una nueva Sombra Paralela, estableciendo el Modo de Fusión a Normal, Opacidad 35%, Color a Negro, Ángulo a 90°, Distancia a 0 px, Expansión a 40%, y Tamaño a 200 px.
Paso 12
Ahora necesitamos editar el efecto de "Base" de manera separada de la capa. Para hacer esto, podemos pedir a Photoshop que ponga el estilo de capa en su propia capa separada (o capas si es necesario). Da clic en la capa "Base", y después mueve hacia abajo el ratón en el efecto "Sombra Paralela", abre el menú contextual dando clic derecho sobre este, y elige Crear Capas. Tu efecto ahora aparecerá en su propia capa debajo de la capa "Base".
Un mensaje podría alertarte que: "Algunos aspectos de los Efectos no pueden ser reproducidos con capas". Si es así, presiona OK.
Paso 13
En el panel Capas, selecciona la capa que acabamos de crear. Para una versión Inglesa de Photoshop, su nombre debería ser "Base's Drop Shadow". Con la capa seleccionada, presiona Command-Clic (Mac) en la miniatura de la capa "Frame" para seleccionar la forma.
Paso 14
Nuestro propósito ahora es borrar la sombra dentro del marco de la foto de perfil. Elige Edición > Cortar (Command-X) y deselecciona eligiendo Seleccionar > Deseleccionar.
Paso 15
Selecciona las capas "Base's Drop Shadow", "Base", y "Frame". Para seleccionar varias capas contiguas, da clic a la capa "Frame" y después Shift-clic a la capa "Base's Drop Shadow".
Da clic derecho sobre una de las capas y selecciona "Fusionar Capas" para combinarlas en una sola.
Paso 16
Es tiempo de guardar nuestro progreso. Elige Archivo > Guardar Como. Elige el formato PSD del menú Formato. Especifica un nombre de archivo (Facebook-Frame.psd) y ubicación y da clic en Guardar.
¡Tu marco Facebook está listo! Continua y descubre cómo agregar una foto al marco Facebook, ¡y guarda una nueva foto de perfil y de portada listas para subir!
2. Cómo Agregar una Foto a la Plantilla
Paso 1
Ubica el panel Capas en el costado derecho de tu espacio de trabajo y nota que hicimos cuatro capas:
- "Frame": Esta capa es la vista previa para la página real de Facebook y te ayudará a posicionar correctamente tu foto y ver cómo lucirá tu perfil una vez que se suba a Facebook.
- "Fill": Esta capa contiene un relleno de contenedor. Posiciona tu foto sobre este.
- "Profile picture": Esta capa será usada para cortar y exportar tu foto de perfil.
- "Cover Photo": Esta capa será usada para cortar y exportar tu foto de portada.
Paso 2
Selecciona una foto que quieras usar como tu foto de perfil y portada. Si estás siguiendo junto con la foto de muestra, descarga esta. Ábrela con Photoshop.
Intenta usar una foto que tenga al menos 2,000 pixeles de ancho para que puedas colocarla fácilmente en la plantilla.
Aprender a elegir la mejor foto para este propósito. La foto de perfil estará en la equina inferior izquierda de la foto. En la foto que estoy usando para este tutorial, el sujeto está en la equina inferior izquierda de la composición para que sea más fácil de reposicionar. Un buena foto tendrá al sujeto pequeño o a la distancia. Las fotos con un paisaje detrás del sujeto son perfectas para este propósito.
Paso 3
Ubica las pestañas de archivo en la parte superior del área de trabajo y da clic sobre el archivo de la foto. Ve a Seleccionar > Todo. Presiona Command-C (Mac) sobre en tu teclado para copiar la foto.
Regresa a la plantilla dando clic en "Facebook-Frame.psd" de las pestañas de archivo en la parte superior del área de trabajo. Da clic en "Relleno" de capa del panel Capas para hacerla activa, y presiona Command-V (Mac) en tu teclado. Esto pegará la foto sobre la capa de marco de Facebook.
Paso 4
Da clic sobre la capa con la foto recién importada en el panel Capas para hacerla activa.
Ve a Edición > Transformación Libre, o presiona Command-T (Mac) en tu teclado. Una caja aparecerá alrededor de los bordes de la foto.
Para Escalar, arrastra una manija de la caja. Presiona Shift mientras arrastrar una manija de la esquina para escalar proporcionalmente. Cuando se posiciona sobre una manija, el puntero se vuelve una flecha doble.
Para Reposicionar, da clic y arrastra en cualquier lugar dentro de la caja.
Para Rotar, mueve el puntero fuera del borde (se vuelve una flecha curva de dos lados), y después arrastra. Presiona Shift para limitar la rotación a incrementos de 15°.
También puedes voltear tu foto eligiendo Edición > Transformar > Voltear Horizontal.
Cuando transformas una imagen de mapa de bits (a diferencia de una forma o trazo), la imagen se vuelve ligeramente menos nítida cada vez que realizas una transformación; así pues, realizar múltiples acciones antes de aplicar la transformación acumulativa es preferible que aplicar cada transformación por separado.
Asegúrate de posicionar la foto para que llene tanto la imagen de portada como de perfil. Cuando termines, presiona Enter en tu teclado.
Paso 5
Una vez que has posicionado la foto, da clic en el ojo pequeño a la izquierda de la capa "Frame" en el panel Capas para ocultar la capa.
3. Cómo Guardar las Imágenes de Perfil y Portada
Paso 1
En el panel Capas, ubica la miniatura de capa "Profile picture". Sostén Command (Mac) en tu teclado y da clic sobre la miniatura de la capa. Esto seleccionará el área de la foto de perfil, una imagen cuadrada de 307 x 307 px.
Ve a Imagen > Cortar para cortar la imagen al área de foto de perfil.
Paso 2
Ve a Archivo > Exportar > Guardar para Web (Photoshop CC 2015) o Archivo > Guardar para Web y Dispositivo (antes de Photoshop CC 2015).
Del menú desplegable Formato, elige JPEG. Del menú desplegable Calidad, elige Muy Alta.
Cuando termines, da clic en Guardar. Elige un nombre para la foto de perfil y da clic en OK.
Paso 3
Da clic en el panel Historial del lado derecho de tu espacio de trabajo. Si no puedes verlo, ve a Ventana > Historial.
Da clic en el paso previo en el panel Historial. Esto recargará la imagen sin recortar.
Paso 4
En el panel Capas, localiza la miniatura de capa "Cover Photo". Sostén Command (Mac) en tu teclado y da clic en la miniatura de capa. Esto seleccionará el área de la Foto de Portada, una imagen rectangular de 1630 x 605 px. Ve a Imagen > Cortar para cortar la imagen al área de la foto de portada.
Paso 5
Después de cortar, ve a Archivo > Exportar > Guardar para Web (Photoshop CC 2015) o Archivo > Guardar para Web y Dispositivo (antes de Photoshop CC 2015).
Desde el menú desplegable Formato, elige JPEG. Desde el menú desplegable Calidad, elige Muy Alta.
Cuando termines, da clic en Guardar. Elige un nombre para la foto de portada y da clic en OK.
4. Cómo Subir Tus Fotos a Facebook
Paso 1
Para agregar una foto de perfil o cambiar tu foto de perfil actual:
Ve a tu perfil y desliza sobre tu foto de perfil. Da clic en Actualizar Foto de Perfil. Ahora puedes:
- Subir una foto desde tu computadora.
- Tomar una nueva foto.
- Seleccionar una foto que ya hayas subido o una en la que estés etiquetado.
Elige "Subir una foto desde tu computadora". Selecciona la Foto de Perfil recién creada. ¡No cortes tu foto! Da clic en Omitir Cortado en la parte inferior izquierda, y da clic en Guardar.
Paso 2
Para agregar o cambiar tu foto de portada:
- Ve a tu perfil.
- Desliza sobre Actualizar Foto de Portada en la parte superior izquierda de tu foto de portada actual.
- Da clic en Actualizar Foto de Portada. Si actualmente no tienes una foto de portada, da clic en Agregar Foto de Portada.
- Selecciona Elegir de mis fotos y navega a la foto de portada recién creada.
- Una vez que eliges la foto, podrías reposicionarla dando clic a la imagen y arrastrándola arriba o abajo. No reposiciones la foto, ¡no arrastres la foto en este paso!
- Da clic en Guardar Cambios.
Recuerda que las imágenes creadas con este tutorial están dimensionadas en proporción a las dimensiones en Facebook, así que no necesitas reposicionar o cortar las imágenes cuando las subes.
5. Páginas de Facebook y Diseño Móvil
Desafortunadamente, Facebook hizo cambios al diseño para páginas, y las imágenes creadas con este tutorial no funcionarán con las páginas de Facebook. Facebook ha removido la imagen de perfil del territorio de la imagen de portada. Ahora la foto de perfil se ha movido a la columna a mano izquierda del diseño. De momento, es posible crear una imagen de perfil y portada unidas solo para perfiles personales.
El mismo problema existe para el diseño móvil. Si has visitado cualquier página de Facebook en tu iPhone, podrías haber notado que la foto de portada no es mostrada de la misma forma que en el escritorio----solo la sección media aparecerá en el móvil, mientras que la foto de perfil se moverá significativamente hacia el centro.
De cualquier modo, podemos optimizar nuestras imágenes para lucir bien en dispositivos móviles.
Para evitar feas discrepancias, no coloques información importante en la derecha de la foto de perfil, especialmente si sabes que la mayoría de tus usuarios de la página son usuarios móviles.
¡Felicidades, Ahora Has Terminado!
¡Buen trabajo! Nuestra imagen de perfil y portada unidas están terminadas. Puedes usar tu imaginación y continuar jugando y agregar detalles hasta que este completamente satisfecho con el resultado. Espero que hayas descubierto algunos nuevos consejos y trucos que puedas usar para crear maravillosos proyectos en el futuro. ¡Siéntete libre de compartir tus resultados en los comentarios de abajo!
Si necesitas más control sobre tus imágenes, mi consejo es descargar la "Acción de Identidad Unida para Facebook", un complemento de Photoshop que te permite crear una foto de perfil y portada atractivas para tu perfil de Facebook con algunas opciones premium tales como imágenes de perfil más grandes, actualizaciones paralelas con los cambios de diseño de Facebook, y más.
By
