Introducción

Hola a todos, hoy vamos a ver cómo crear y usar una maqueta/plantilla para visualizar el ícono/imagen de su perfil en diferentes tamaños. Seguir principios o guías para optimizar el perfil durante el proceso de diseño. Y finalmente, cómo exportar las imágenes para que podamos usarlas en varias plataformas como: redes sociales, foros, chats, aplicaciones de mensajería y más. Vamos a empezar.

 

...

 

 

NOTA: Las imágenes utilizadas en este tutorial fueron diseñadas, creadas o producidas por el autor del tutorial. Los logos de Clip Studio Paint, Clip Studio y CELSYS pertenecen a sus propietarios.

 

 

1. Explorando plataformas y tamaños

El primer paso es explorar las diferentes plataformas o las plataformas donde vas a subir la imagen de perfil. Estos pueden ser redes sociales, chats, aplicaciones de mensajería o lo que sea que planee usar.

 

Tome una captura de pantalla del dispositivo que está utilizando. Puede usar accesos directos u otros métodos para capturar el diseño de las diferentes plataformas.

 

VENTANAS.

Presiona Windows+Shift+S o Imprimir pantalla (tecla)

 

MAC.

Presione Mayús+Comando+3 o Mayús+Comando+4 (para áreas de captura)

 

iPad.

Presiona el botón superior + volumen o botón de inicio. También puede deslizar hacia arriba desde la esquina inferior izquierda con el Apple Pencil.

 

TABLETA SAMSUNG.

Presione el botón de encendido + bajar volumen o el botón de inicio (simultáneamente). También puede usar Palm Swipe en la pantalla. O Air Command Menu con el S pen.

 

Abra sus capturas de pantalla en Clip Studio Paint y use la Herramienta de selección de rectángulos y la Paleta de información para revisar los tamaños utilizados para los perfiles. Si no ve la paleta de información, vaya a Ventana > Información. Puede verificar el ancho y la altura representados por una H para horizontal y una V para vertical.

 

Toma nota de todos los tamaños donde se usa el perfil, comentarios, login-logout, nombre de usuario, etc. Podemos revisar los números de tamaño más tarde para crear una maqueta/plantilla para visualizar la imagen/icono de perfil.

 

Aquí está mi lista con los números de tamaño:

 

Iniciar sesión / Iniciar sesión 32x32 px

Perfil grande 220x220 px

Nombre de usuario 120x120 píxeles

Comentarios 50x50 px

Icono 24x24 píxeles

 

 

Para este tutorial, usaré tamaños personalizados basados en capturas de pantalla tomadas en una PC con Windows. Estos están cerca o entre los tamaños de perfil más comunes utilizados en diferentes plataformas como Twitter, Instagram, YouTube, Facebook y más. Sin embargo, ten en cuenta que estos tamaños no son absolutos y pueden cambiar para adaptarse a la pantalla del dispositivo que estés utilizando.

 

 

2. Tipos de Perfiles

Puedes encontrar diferentes tipos de imágenes de perfil como: logos o símbolos, nombres personales o comerciales, fotos desde paisajes hasta mascotas, ilustraciones digitales y tradicionales, pixel-art y más.

 

Más adelante en este tutorial veremos 3 ejemplos y explicaremos las decisiones tomadas durante el proceso de diseño. Vamos a ver (a) uno para pixel-art, otro con fotos (b) pero puedes usar los mismos consejos con ilustraciones planas o escaneadas. Y uno para (c) logotipos de nombres.

 

NOTA: Ten en cuenta que con estos ejemplos nos vamos a centrar en el proceso y no profundizar en detalles de las herramientas, ni explicar paso a paso cómo crear las imágenes de perfil sino en cómo optimizarlas para que se vean mejor en círculos pequeños y cuadrados siguiendo 5 principios o guías.

 

 

3. Los 5 principios o guías de diseño para imágenes/iconos de perfil

Trato de usar 5 principios o guías a través de mi proceso cuando estoy diseñando una imagen o ícono de perfil. Estos son: Simplicidad, Contraste, Reconocible, Escalabilidad y Forma de recorte. Hagamos una revisión rápida de ellos.

 

SIMPLICIDAD

 

Evite demasiados detalles. Los detalles pueden verse muy bien en tamaños grandes, pero pueden ser difíciles de ver y comprender en tamaños más pequeños.

 

 

CONTRASTE

 

Facilita la percepción de la imagen de perfil. Puede usar valores claros versus oscuros o colores complementarios/opuestos. También puede utilizar el fondo de la plataforma a su favor.

 

 

ESCALABILIDAD

 

Comprueba si la imagen de perfil se puede adaptar a diferentes tamaños. La simplicidad y el contraste de la imagen harán que este proceso sea mucho más fácil.

 

 

RECONOCIBLE

 

Puede usar formas o siluetas para que su imagen sea reconocible en diferentes escalas. También puedes usar colores o asociar un color con tu foto/icono de perfil.

 

 

FORMA DE CULTIVO

 

Haga su composición y alinee la imagen sabiendo que va a ser recortada por la forma (círculo, cuadrado) del diseño de la plataforma. Evite los cultivos no intencionales. También puedes usar o incorporar la forma del cultivo en tu diseño.

 

 

SIGUIENTE: En los próximos capítulos, veremos cómo crear y usar una maqueta/plantilla para verificar fácilmente estos 5 principios al diseñar perfiles. Después de eso, vamos a revisar el proceso de diseño que trato de seguir y luego revisaré algunos ejemplos.

 

 

4. Maqueta/plantilla de perfil (paso a paso + descarga gratuita)

En este capítulo vamos a ver los pasos básicos para crear una maqueta usando Objetos de archivo en Clip Studio Paint.

 

Sin embargo, puede descargar las maquetas listas para usar desde los enlaces a continuación junto con un PDF de cómo usarlas y las cosas que puede y no puede hacer. En resumen, puede usarlos, pero no los autorice, distribuya ni venda como propios. Luego puede continuar o pasar al siguiente capítulo: Actualización de objetos de archivo en la configuración de varias ventanas.

 

NOTA: Incluso si llamo a estas maquetas/plantillas. Estos son documentos de archivo .clip y no las Plantillas que aparecen cuando crea un nuevo documento en Clip Studio Paint.

 

 

ENLACES PARA DESCARGAR MOCKUPS/PLANTILLAS GRATIS:

 

Descargue Mockup/Plantilla para perfiles usando un lienzo de 1000x1000px.

 

Descarga Mockup/Plantilla para Pixel Art Profiles usando un lienzo de 56x56 px.

 

4.1 Creación de un documento de perfil 1:1

Ya sea que esté creando un nuevo perfil desde cero o adaptando uno. Vamos a trabajar con una relación de aspecto de 1 por 1, que es el estándar en todas las plataformas.

 

1. Para Perfiles usando Ilustraciones, Fotos o Logos de Nombre. Cree un nuevo documento y, desde Preestablecido, seleccione 'Cuadrado (1000 x 1000px)'. Asigne un nombre a su documento de perfil y guárdelo como un archivo .clip de Clip Studio Paint. Esto nos permitirá usarlo como objeto de archivo. Pero si lo prefiere, también puede usar archivos .psd para crear objetos de archivos.

 

2. Para los perfiles de Pixel Art, puede usar tamaños de lienzo pequeños para que los cuadrados sean visibles. Voy a crear un tamaño mediano de 56x56px. Pero también puede probar tamaños más pequeños como 16x16, 24x24 para píxeles más grandes. O un lienzo más grande de 64x64px y superior para agregar más detalles. Luego guarde el archivo como un archivo de Clip Studio Paint (.clip) para que podamos usarlo como un objeto de archivo más tarde.

 

4.2 Maqueta/Plantilla con Objetos de Archivo

 

CREAR Y GUARDAR UN DOCUMENTO

 

Vamos a crear un nuevo documento de 720x1080 px para visualizar las imágenes/iconos de perfil en diferentes tamaños de manera similar a cuando usamos redes sociales, chats, aplicaciones de mensajería u otras plataformas. Para simular un tema oscuro, puede cambiar el color del papel a gris oscuro o negro.

 

Luego guarde el documento en la misma ubicación con el archivo de imagen/icono de perfil que creamos antes.

 

 

IMPORTAR PERFIL COMO OBJETO DE ARCHIVO

 

Ahora importemos el archivo .clip de la imagen/icono de perfil o Pixel Art en el documento que acabamos de crear.

 

(1) Desde Archivo > Importar > Crear objeto de archivo... Seleccione el archivo que va a utilizar como Objeto de archivo y haga clic en Abrir (2).

 

Verá un mensaje (3) sobre el objeto de archivo que acabamos de crear. Y el objeto de archivo aparecerá en la paleta de capas con un icono de un archivo vinculado al lado (4).

 

 

CAMBIAR EL TAMAÑO UTILIZANDO LA CUADRÍCULA

 

Verifique los tamaños usados para los perfiles de las capturas de pantalla de las plataformas y sitios que va a usar o revise la lista de tamaños personalizados usados para este tutorial.

 

 

Iniciar sesión / Iniciar sesión 32x32 px

Perfil grande 220x220 px

Nombre de usuario 120x120 píxeles

Comentarios 50x50 px

Icono 24x24 píxeles

 

 

Luego vaya a Ver > Configuración de la barra de cuadrícula/regla y cambie el Número de divisiones a 1 y haga coincidir la Brecha con uno de los tamaños utilizados para el Perfil, por ejemplo, 100 px. Y haga que la cuadrícula sea visible desde Ver> Cuadrícula.

 

Ahora, con la herramienta Objeto (acceso directo O), cambie el tamaño del objeto del archivo arrastrándolo desde las esquinas (1) y alinéelo con uno de los cuadrados de la cuadrícula (2).

 

Puede comprobar el tamaño en la paleta de información (3). Haga clic en la miniatura (4) manteniendo presionada la tecla CTRL en la paleta de capas o haga clic con el botón derecho > Selección de capa > Crear selección.

 

 

IMPORTANTE:

Cambie el [Método de interpolación] a Alta precisión (colores promedio) en la paleta de propiedades de la herramienta (1). Este método funcionará con perfiles de 1000x1000px y con pixel-art. Si no ve la opción, haga clic en el icono de llave inglesa y haga que la opción sea visible desde la paleta Detalle de la subherramienta haciendo clic en el ojo (2) junto a ella.

 

 

 

FORMA DE CULTIVO

 

 

Ahora en una capa vacía debajo y con Snap to Grid activo (CTRL+3). Dibuja un círculo de 1 por 1 con la herramienta Elipse.

 

 

Alinee el objeto de archivo sobre el círculo (1) y en la paleta de capas, seleccione el objeto de archivo y haga clic en el icono [Recortar a la capa inferior] (2). Esto emulará el cultivo elíptico utilizado en diferentes plataformas.

 

Luego, cambie el tamaño de la cuadrícula nuevamente para que coincida con los otros tamaños de perfil. Repita el proceso con cada uno hasta completar todos los tamaños utilizados para iniciar sesión (1), perfil grande (2), nombre de usuario (3), comentarios (4) e iconos (5).

 

 

Puede crear temas claros y oscuros. Y haga recortes de rectángulos elípticos y redondeados para obtener una vista previa de cómo se vería su perfil en diferentes sitios y plataformas.

 

 

5. Actualización de objetos de archivo en la configuración de varias ventanas

ABRIR Y REORDENAR DOCUMENTOS EN VENTANA

 

 

Si descargó las maquetas anteriores. Abra o arrastre el archivo Imagen de perfil (o Arte de píxeles de perfil) y una de las maquetas/plantillas (Perfil - Círculos o Perfil - Cuadrados) a Clip Studio Paint.

 

O abra los archivos que ha creado y guardado en la misma carpeta de ubicación.

 

Luego haga clic en (1) y arrastre la pestaña de uno de los lienzos y acóplelo hacia la izquierda o hacia la derecha, suéltelo cuando vea que aparece la superposición roja (2).

 

Ahora podemos ver ambos documentos al mismo tiempo. Puede usar Ajustar al navegador para el lienzo Perfil 1 por 1, en la paleta Navegador. Esta característica puede ser realmente útil, especialmente con pixel-art.

 

GUARDAR Y ACTUALIZAR OBJETOS DE ARCHIVO

 

 

Ahora dibuje, pinte o escriba cualquier cosa en el archivo de perfil y guarde su trabajo. Debería actualizarse automáticamente en el archivo de maqueta.

 

Si está en el lienzo Maqueta/Plantilla. También puede ir a Capa > Objetos de archivo > Actualizar todos los objetos de archivo.

 

Con esta configuración, podemos trabajar en las imágenes/íconos de los perfiles y verificar 'Los 5 principios de diseño o guías para perfiles' en el proceso. Puedes guardar múltiples pasos visualizando los diferentes tamaños al mismo tiempo, en un diseño similar a las plataformas donde vas a utilizar tu imagen de perfil.

 

 

6. Proceso de diseño (icono de perfil/imagen)

En este capítulo vamos a utilizar 'Los 5 principios o guías' de perfiles para explicar las decisiones tomadas durante el proceso de diseño. Solo un recordatorio rápido, estos son: simplicidad, contraste, escalabilidad, reconocible, forma de recorte.

 

 

6.1 Pasos del proceso

Los pasos del proceso de diseño que vamos a seguir son Enfocar, Identificar, Mejorar, Verificar dos veces y Repetir.

 

1. Centrarse en un principio (de los 5 mencionados anteriormente).

2. Identifique cuestiones o problemas en la imagen de perfil.

3. Mejora, prueba diferentes enfoques y soluciones. Revise y siga mejorando si lo necesita.

4. Vuelva a verificar la escalabilidad de la imagen usando la maqueta y exporte, o...

5. Repita. Concéntrese en otro principio y repita el proceso.

 

 

6.2 Ejemplos de perfiles

Ahora vamos a ver tres ejemplos diferentes siguiendo los pasos mencionados anteriormente. Nos vamos a centrar en el proceso sin profundizar en los detalles de las herramientas como hicimos en capítulos anteriores. Si desea tutoriales o consejos con más detalles sobre las herramientas y técnicas utilizadas para cada ejemplo, hágamelo saber en los comentarios.

 

a) Ejemplo de arte de píxeles

Para empezar hice una silueta sin antialiasing basada en un modelo 3D. Y verifique si la forma era (1) reconocible como una cabeza. Luego pintó sin antialiasing usando una paleta de grises reducida de seis valores para (2) Simplicidad.

 

Después de eso, agregué color con Gradient Maps usando colores opuestos en el círculo cromático para mejorar y obtener más (3) Contraste en la cara del sujeto. En los tamaños de perfil más pequeños, la cabeza parecía demasiado grande y un poco desproporcionada. Entonces, agregué un degradado difuminado en la parte posterior para evitar o disminuir esa percepción visual y mejorar la (4) Escalabilidad.

 

 

 

NOTA: Puede mejorar la Simplicidad en pixel art usando lienzos más pequeños y menos colores o valores. Pero disminuyendo detalles y estilizando más la imagen. Luego puede verificar dos veces y explorar diferentes soluciones para mejorar la imagen si la necesita y exportarla.

 

 

b) Ejemplo de foto/ilustración

A simple vista noté que la imagen necesitaba más (1) Contraste para ser utilizada como perfil. Entonces, hice una selección y eliminé el sujeto (halcón) del fondo. Péguelo en el lienzo Perfil de 1000x1000px y colóquelo en el centro para evitar (2) recortar la cabeza del sujeto (pájaro).

 

Luego agregué una capa de degradado en el fondo para crear más (3) contraste. Para mejorar el (4) contraste utilicé capas de Ajuste, Brillo/Contraste, Curva de Tono y Mapa de Degradado. Intentar utilizar colores opuestos o complementarios entre el sujeto (halcón) y el fondo.

 

Después de eso, decidí agregar un círculo (5) para incorporar la forma del cultivo más usado en las plataformas. Esto también ayudó a crear diferentes planos y sensación de profundidad. Separar el sujeto (halcón) del círculo y del fondo, tratando de conservar la silueta (6) Reconocible. Agregué una sombra sutil en el medio. Finalmente, compruebo dos veces los tamaños más pequeños del perfil (7) Escalabilidad.

 

 

 

NOTA: Puede adaptar estos consejos y usarlos con Fotos de personas, mascotas, objetos, etc. También puede adaptarlos a ilustraciones planas o escaneadas. Solo asegúrese de crear una copia primero y no trabaje directamente sobre el archivo original o de origen.

 

 

c) Ejemplo de logotipo de nombre

En este nombre de logotipo personal ficticio. Podemos notar que el nombre parece un poco largo para ser leído en tamaños pequeños (1) Escalabilidad. Entonces, en este caso, decidí usar solo la 'a' para (2) Simplicidad.

 

Luego noté que la 'a' se veía un poco pequeña para los comentarios y el tamaño de los íconos. Entonces, hice la 'a' más grande para mejorar su adaptación a tamaños más pequeños (3) Escalabilidad. Finalmente, elijo un color verde para asociarlo al logo en ambas versiones el ícono y el nombre completo del logo para hacerlo (4) reconocible.

 

 

NOTA: No siempre necesita usar solo una letra o un color plano. Puede probar diferentes enfoques o soluciones y ver qué funciona mejor para usted y el perfil. Solo verifique si la imagen puede ser reconocible en tamaños pequeños. Por ejemplo, si su fuente es demasiado clara o delgada, puede probar una opción en negrita de la misma fuente familiar o agregar un efecto de borde del mismo color.

 

 

...

 

 

7. Exportación de perfiles para plataformas

Antes de exportar la imagen/icono de perfil, hablemos de cuándo es necesario cambiar el tamaño de la imagen y los formatos admitidos por las plataformas.

 

 

 

CAMBIAR EL TAMAÑO DE LA IMAGEN

 

El tamaño de imagen de 1000x1000px debería ser suficiente para cualquier red social, aplicación de mensajería o foro. Pero cada plataforma puede recomendarte tamaños mínimos o máximos para las imágenes de perfil. Si su imagen es más grande como 2048 píxeles cuando solo se necesitan 400 píxeles. O más pequeños en el caso del pixel art. Intente siempre cambiar el tamaño de la imagen primero por su cuenta y no confíe en el método de la plataforma para cambiar el tamaño de la imagen.

 

NOTA IMPORTANTE: En ambos casos, siempre haga una copia primero y cambie el tamaño de la copia, no del archivo original o de origen.

 

 

 

Para imágenes grandes por encima de 2048, le recomendaría que vaya a Editar > Cambiar resolución de imagen. Y seleccione Alta precisión (colores promedio) como método de Interpolación. Luego puede ingresar el tamaño exacto en píxeles y presionar OK.

 

 

Para imágenes de pixel art, le recomendaría que vaya a Editar> Cambiar resolución de imagen. Y seleccione el método Bordes duros (vecino más cercano). Puede cambiar el número de escala hasta que obtenga un tamaño cercano al recomendado. O introduzca el tamaño exacto y compruebe si los cuadrados tienen el mismo aspecto en el original y en la copia.

 

 

FORMATOS

 

Los formatos más comunes para las imágenes de perfiles son PNG (Portable Network Graphics) y JPEG o JPG (Joint Photographic Experts Group).

 

 

Los archivos PNG se utilizan principalmente con logotipos, pixel art, íconos, ilustraciones gráficas y colores y gráficos planos o simples. O si necesitas una imagen con transparencia. Los archivos PNG tienden a tener una mejor calidad, pero pueden producir archivos de mayor tamaño.

 

 

Los archivos JPEG se usan mucho con fotografías y pueden comprimir mucho el tamaño del archivo. Sin embargo, demasiada compresión podría disminuir la calidad de la imagen. Puede utilizar este formato con imágenes, ilustraciones y otros gráficos. Pero no se recomienda usarlo con pixel-art, logotipos e íconos limpios. Además, los archivos JPG no admiten transparencia.

 

 

Te recomendaría usar PNG siempre que puedas o un JPEG con una calidad superior al 80%. Ten en cuenta que algunas plataformas como Facebook pueden comprimir aún más la calidad de las imágenes una vez que las subes.

 

 

EXPORTACIÓN (UNA CAPA)

 

Para exportar su imagen, vaya a Archivo > Exportar (capa única) y seleccione el formato que desee.

 

Ahora, para el color de expresión, seleccione el color RGB (1). Y mantenga la (2) relación de escala al 100%. Deje el resto por defecto y presione OK. Compruebe la vista previa (3) y haga clic en Aceptar de nuevo.

 

Para los archivos JPEG, intente mantener la calidad por encima de 80 e incruste el perfil ICC. Luego presione Aceptar.

 

Si cambia el tamaño del perfil, recuerde guardar una copia antes de cambiar el tamaño de la imagen. Y no cambie el tamaño en el documento original o de origen. También puede agregar las dimensiones al nombre del archivo para reconocer fácilmente el tamaño del documento.

 

 

INFORMACIÓN ADICIONAL: algunas plataformas como Facebook o Telegram pueden admitir archivos gif animados o archivos de películas MP4 cuando se cargan desde un dispositivo móvil en Android o iOS. Incluso si no vimos un ejemplo para este tipo de archivos, siempre puedes adaptar los consejos, el proceso y los principios que vimos para diseñar un perfil animado.

 

 

Resumen

Para recapitular, vimos cómo crear y usar una maqueta/plantilla para visualizar la imagen de perfil o el ícono en diferentes tamaños al mismo tiempo. También vimos principios o guías que te pueden ayudar a realizar y optimizar el perfil durante el proceso de diseño. Y finalmente, cuándo y cómo cambiar el tamaño de las imágenes, exportar los perfiles para plataformas sociales, aplicaciones de mensajería, foros de chat y más.

 

Entonces, espero que haya encontrado algo útil que pueda usar en su propio flujo de trabajo. Gracias a todos por leer el artículo. Este es Ed diciendo "Nos vemos".