¿Alguna vez te has planteado cambiar la forma de tus imágenes, o la quieres poner en algún sitio pero las dimensiones no cuadran? Hoy te traemos la solución.
Te vamos a explicar cómo tratar las ilustraciones en Figma para facilitar su manipulación.
Ya verás que editar las imágenes y hacer máscaras de recorte es muy fácil y útil. Cuando lo domines lo utilizarás para todo.
En este post primero aprenderás a recortar y editar las imágenes y después a hacer máscaras de recorte y aplicarles efectos.
Ahora es el momento de abrir Figma y empezar a trabajar ¡Vamos allá!
PASO 1: Seleccionar las imágenes que quieres editar
Lo primero que tienes que hacer es seleccionar las imágenes que quieres editar. Estas imágenes deben tener buena calidad para que lo que hagas salga bien.
Siempre dependerá de para que las quieras utilizar, pero piensa que por ejemplo para tu página web si quieres que se vea una imagen retina, es decir, a alta resolución, debes subir la imagen al doble de píxeles que se ve en el diseño web para que se muestre a la perfección.
Si quieres saber más sobre la resolución de las imágenes te lo explicamos en este post.
PASO 2: Entrar en figma y crea un archivo nuevo
Cuando ya tienes tu selección de imágenes para editar, lo que debes hacer es abrir Figma y seleccionar en “+New” → “Design file”, como explicamos en el primer post de Figma.
Cambia el nombre del archivo al que creas adecuado. Nosotros le pondremos “Máscara de recorte 01”.
PASO 3: Pasar las imágenes a figma
Si ya tienes la selección de imágenes en una carpeta y el archivo de Figma creado es el momento de pasar las imágenes a Figma.
Es muy sencillo, abres el archivo de Figma y después la carpeta donde tienes las imágenes. Las seleccionas todas, clicas encima y las mueves a Figma deslizando el cursor hasta estar encima de la mesa de trabajo. Sueltas y ya las tienes en Figma.
PASO 4: Editar las imágenes
na vez tienes todas las imágenes en Figma las puedes hacer un poco más pequeñas o más grandes si es necesario. Siempre teniendo en cuenta que no debes superar el tamaño original de la imagen para que no se vea pixelada.
Coloca el cursor sobre una de sus esquinas y clicando y manteniendo pulsado shift desliza hacia dentro o hacia fuera.
Cuando ya las tengas al tamaño que te interesa puedes editarlas, si es necesario. Si las quieres aclarar, si les quieres cambiar el tono o si les quieres modificar la saturación, lo puedes hacer desde Figma.
Seleccionas la imagen que quieres editar y en el panel de trabajo de la derecha verás que pone “image”, haces clic encima y te aparecerá el panel de edición de la imagen.
Nosotros queremos aclarar esta imagen que hemos seleccionado, y para eso subiremos la exposición y las sombras.
PASO 5: Hacer las formas para generar la máscara de recorte
Con tus imágenes listas solo te queda darles la forma deseada con la máscara de capa.
Para esto puedes hacer las formas con la pluma, o con las formas geométricas que vienen por defecto con Figma.
También puedes usar formas vectoriales que ya tengas generadas. Pero deben ser en formato svg. Si quieres crear formas irregulares te recomendamos utilizar Blobmaker , un generador de formas irregulares gratuito que agiliza mucho el trabajo.
Y esto es lo que vamos a hacer nosotros. Seleccionamos los archivos y los arrastramos a nuestro documento de Figma.
Cuando pasas vectores a Figma debes tener en cuenta que se genera un frame para cada elemento que introduces al documento.
Para que tu trabajo sea más fácil y ordenado saca los elementos de cada frame.
Para ello, selecciona todas las formas y arrástralas al frame 1. A continuación borra todos los frames, menos el 1.
PASO 6: Hacer la máscara de recorte
Selecciona la forma que quieres para tu primera imagen y ponla al tamaño que te vaya bien sobre la imagen.
Para hacer la máscara de recorte, la forma vectorial tiene que estar detrás de la imagen.
Así que selecciona la imagen y haz clic con el botón derecho. Te aparecerá el panel desplegable en el cual tienes que seleccionar la opción “Bring to front”, para traer la imagen delante.
Con la imagen ya delante de la forma, seleccionas las dos cosas, imagen y forma, y clicas en el círculo medio lleno del menú superior.
¡Y listo! Ya tienes tu máscara de capa.
Fácil y sencillo. Ahora puedes repetir el proceso con el resto de imágenes y formas.
PASO 7: Poner efectos a las imágenes.
Si quieres dar un efecto de profundidad a la imagen le puedes poner una sombra. A nosotros no nos gusta usar sombras pero te vamos a explicar cómo se hace por si te interesa.
Para esto debes seleccionar la imagen a la que le quieres aplicar la sombra. Y en el menú del lateral derecho verás un apartado que pone “Effects”. Haz clic sobre el más de su derecha.
Te aparecerá un selector en el que tienes que clicar en “Drop shadow”.
Una vez clicada la opción de “Drop shadow” debes clicar en el icono del sol que aparece en la izquierda y te aparecerá un cuadro para introducir los datos para crear tu sombra.
Puedes editar el color de la sombra, la opacidad, lo que se desplaza hacia un lado u otro y el desenfoque.
Una vez lo tengas listo a tu gusto puedes cerrar el recuadro de “Drop shadow” y ver tu resultado.
En los efectos disponibles también puedes crear una sombra interior, un desenfoque de imagen o un desenfoque de fondo.
PASO 8: Utilizar tus imágenes.
Llegados aquí, ¡solo te queda aplicar las imágenes en tu diseño!
Como ves, te dejamos un ejemplo de aplicación de las imágenes, pero tienes infinidad de posibilidades. El resultado depende mucho del estilo de imagen y forma que quieras darle.
Las máscaras de capa te van a servir para infinidad de cosas, con ellas conseguirás darle un toque más personal a tus imágenes y salir de lo standard.
Todo es cuestión de probar y dejar libre la imaginación.
¡Déjanos saber que te ha parecido este post y si quieres más del mismo estilo!
Si te interesan las máscaras de capa y quieres ir más allá también puedes ver nuestro post para diseñar tu propia lámina creando una máscara de recorte con imágenes en Photoshop.
Y si quieres que te ayudemos con tu web y aplicar tus imágenes con formas puedes comprar una de nuestras webs prediseñadas para adaptar tu diseño aquí.
