Hoy en d a, la capacidad de trabajar con editores gr ficos se ha convertido en una parte integral del trabajo de un dise ador web o dise ador gr fico. Una de esas herramientas populares es Figma. Este Editor en l nea tiene amplias caracter sticas y una interfaz simple. En este art culo, le mostraremos c mo cortar una imagen a lo largo del contorno en Figma para crear dise os nicos y llamativos.
Paso 1: importar imagen
Antes de comenzar a cortar la imagen a lo largo del contorno, debe importarla a Figma. Para ello, seleccione la pesta a "Archivo "y haga clic en"Importar". A continuaci n, seleccione la imagen deseada del sistema de archivos y haga clic en "Abrir". Despu s de eso, la imagen aparecer en su rea de trabajo.
Paso 2: crear un contorno
Para cortar una imagen a lo largo de un contorno en Figma, debe crear un contorno vectorial. Para hacerlo, seleccione la herramienta "pluma "(o presione la tecla" P " en el teclado) y comience a crear puntos en la imagen. Dibuja l neas entre los puntos para crear un contorno de la forma deseada.
Paso 3: resaltar el rea
Despu s de crear el contorno, seleccione la herramienta "rect ngulo" (o presione la tecla "R" en el teclado) y dibuje un rect ngulo alrededor del contorno. Despu s de eso, debe copiar el contorno y el rect ngulo presionando la combinaci n de teclas "Ctrl+C "(o" Cmd+C " para Mac).
Paso 4: cortar la imagen
Haga clic con el bot n derecho en la imagen y seleccione Copiar estilo. A continuaci n, pase el cursor sobre el rect ngulo, haga clic con el bot n derecho del rat n y seleccione "Insertar estilo". Despu s de eso, la imagen recortada a lo largo del contorno solo ser visible dentro del rect ngulo creado.
- Herramientas para trabajar con im genes en Figma
- Medida 1: Seleccionar una imagen y crear una m scara
- Paso 2: Crear un contorno para cortar la imagen
- Paso 3: Aplicar contorno a la imagen
Herramientas para trabajar con im genes en Figma
Figma ofrece varias herramientas de manipulaci n de im genes para ayudarlo a manipular im genes, ajustar sus par metros y agregar efectos. Estas son algunas de las herramientas m s tiles:
Marcos | Cree un rect ngulo, c rculo u otra forma para usarlo como contenedor de im genes. Puede estirar y cambiar el Tama o del marco para acomodar la imagen correctamente. |
Relleno | Use la herramienta de relleno para agregar color o degradado a sus im genes. Puede ajustar la saturaci n, la transparencia y otras opciones de relleno. |
Cortar | Use la herramienta de recorte para resaltar una parte espec fica de la imagen. Despu s del recorte, puede mover y cambiar el Tama o de la parte seleccionada de la imagen. |
Sombra | Agregue sombra a su imagen para crear volumen o agregar efectos. Puede ajustar las opciones de sombra como color, saturaci n, transparencia y desenfoque. |
Filtros | Aplica diferentes filtros a tus im genes para cambiar su apariencia. Algunos filtros disponibles incluyen saturaci n de color, contraste, brillo y desenfoque. |
Estas son solo algunas de las herramientas que puede usar para trabajar con im genes en Figma. Pruebe diferentes combinaciones de estas herramientas para obtener el resultado deseado y hacer que sus im genes sean m s atractivas y profesionales.
Paso 1: Seleccionar una imagen y crear una m scara
Pasos para realizar este paso:
- Abra Figma y cree un nuevo archivo o abra uno existente.
- Importe la imagen que desea cortar. Para hacerlo, haga clic en el bot n "Insertar" en la barra de herramientas superior o simplemente arrastre una imagen desde su computadora a la ventana Figma.
- Seleccione la imagen que acaba de importar y vaya al panel "dise o" a la derecha.
- En el panel dise o, seleccione la herramienta marco. Con l podr s crear una m scara para tu imagen.
- En el rea de trabajo de Figma, cree un marco alrededor de su imagen que cubra solo el rea que desea dejar atr s. Para hacer esto, simplemente dibuje un rect ngulo alrededor del rea deseada.
- Aseg rese de que su imagen est dentro del marco creado.
- Ahora necesitas aplicar una m scara a la imagen. Para hacer esto, seleccione otra forma u objeto en su rea de trabajo y arr strelo al marco de imagen creado.
Felicidades! Acaba de seleccionar una imagen y crear una m scara para ella en Figma. Ahora puede pasar al siguiente paso: cortar la imagen a lo largo del contorno.
Paso 2: Crear un contorno para cortar la imagen
Una vez que haya importado la imagen a Figma y la haya colocado en el lienzo, debe crear un contorno para un corte preciso.
Para hacerlo, seleccione la herramienta rect ngulo en la barra de herramientas de la izquierda o use el m todo abreviado de teclado "R".
Dibuja un rect ngulo alrededor de la imagen para cubrir toda el rea que deseas.
A continuaci n, seleccione el contorno del rect ngulo haciendo clic en l con el bot n izquierdo del rat n.
En la barra de herramientas superior, se abrir un men con opciones para editar el contorno. Aqu puede cambiar la forma del contorno con puntos y curvas, agregar o eliminar puntos.
Para que el contorno sea m s preciso y se ajuste a la forma de la imagen, puede agregar m s puntos y ajustar su posici n y forma.
Una vez que haya creado y configurado el contorno del rect ngulo, est listo para pasar a los pasos posteriores para cortar la imagen en Figma.
Paso 3: Aplicar contorno a la imagen
Para aplicar el contorno creado a una imagen en Figma, siga estos pasos:
- Seleccione la herramienta Selecci n en la barra de herramientas de la izquierda. Puede ser un bot n con un icono de marco o rect ngulo.
- Seleccione la imagen en la que desea aplicar el contorno. El Tama o de la selecci n puede ser cualquiera y depende de su caso espec fico.
- En la parte inferior derecha de la pantalla, aparecer un panel de Estilos con todos los estilos disponibles. Haga clic en el bot n "Nuevo estilo" en este panel.
- En la ventana que aparece, seleccione el contorno creado anteriormente de la lista de estilos. Puede usar la b squeda o desplazarse por la lista para encontrar el estilo que desea.
- Despu s de seleccionar un estilo de contorno, se aplicar a su imagen. Puede editar el contorno cambiando su color, grosor u otras propiedades en el panel Estilos.
Nota: Despu s de aplicar el contorno a la imagen, puede continuar edit ndolo moviendo, redimensionando o girando. El contorno permanecer vinculado a la imagen y se actualizar autom ticamente cuando se realicen cambios.
Ahora que ha aplicado el contorno a la imagen, puede exportar la imagen terminada en una variedad de formatos para referencia futura.