Vectores y operaciones booleanas

Mis notas de clase:

• Mapas de bits mas usados: GIF, JPG y PNG. El tamaño debe estar optimizado para las pantallas.
• Vectores: calculados matemáticamente de acuerdo al zoom deseado.
• SVG: formato más común para uso de vectores
• Operaciones boleadas son combinaciones de formas más simples para hacer otras complejas.
• Frames Vs. Grupos: frame es semejante a un artboard. Los grupos son un conjunto de formas.

Vectores y operaciones Booleanas

Mapas de bits: Los mapas de bits almacenan información sobre las dimensiones y el color de cada pixel

1. GIF: Se usa para animar tiene un rango de 256 colores (Máximo) y puede ser transparente
2. JPG: Acepta millones de colores
3. PNG: Acepta millones de colores y admite imagenes transparentes

Vectores: La información se almacena en expresiones matemáticas que deben representarse para el nivel de zoom dado.

• SVG (Scalable vector Graphic)

Nodos: Los vectores estan formados por Nodos, los nodos definen cómo se debe dibujar la forma. Los Nodos se pueden manipular para cambiar su posición. Entonces la forma será redibujada

Tambien permiten modificar las formas para darles (por ejemplo) bordes redondeados

Podemos añadir o eliminar Nodos para simplificar las formas, las formas pueden tener un relleno solido o degradado, pero si la forma esta “abierta” (es decir, los Nodos no están cerrados) no podremos añadir ningún relleno

Operaciones Booleanas

Una forma de combinar Formas, añadiendolas, restándolas o interseleccionándolas

• Unir
• Substraer
• Interseccionar
• Excluir

Frames vs Groups

Los grupos solían utilizarse hace mucho tiempo, trata de evitarlos

Frame

• Capa espacial que tiene las mismas propiedas que un rectángulo, pero puede contener otras capas
• Utíl para organizar el diseño y tener un cuadro delimitador para imitar pantallas

Grupo

• Permite agrupar cosa, no puede aplicarse ninguna propiedad
• El tamaño del grupo se calcula en función del contenido

Operaciones booleanas

Mi cara de payasin cuando veo esta clase y luego reviso mis prototipos, para darme cuenta que tengo más grupos que frames :) Solo uso frames para representar pantallas y lograr animaciones de movimiento dentro de estas. Lo malo de ir construyendo a medida del aprendizaje :(

Para los que trabajamos con la suite de Adobe, entiendo que en figma los frames se comportan de una forma similar a una mesa de trabajo en Illustrator (aunque agrupando los elementos). Considero que el profesor se refiere a que no recomienda hacer grupos **cuando estamos trabajando por fuera de un frame**, pero es creo importante no demonizar el uso de grupos, porque es una práctica y herramienta muy común en diseño cuando uno sabe bien cómo utilizarla.

* Mapa de bits: Los mapas de bits almacenan información sobre las dimensiones y el color de cada pixel en ella. * GIF, JPG, PNG: Formatos más usados, todo depende de el tipo de pantalla que vallamos a utilizar. Pantalla retina versus pantalla normal.  * Vectores: La información se almacena como expresiones matemáticas que deben representarse o calcularse para nivel de zoom dado. * FIGMA trae variedad de formas vectoriales. * SVG (Formato más usado en vectores): Scalable Vector Graphics * Frames vs. grupos: Cuando usar un frame y cuando usar un grupo?, * Los grupos: vienen como herencia de las antiguas herramientas de diseño, y encima están muy limitados y funcionan de una manera peculiar. Agrupamos cosas pero no se le puede dar ninguna propiedad. * Vectores estan formados por nodos que nos permite modificarlos a nuestro gusto, * Operaciones booleanas: Una forma de combinar formas, añadiendolas, restándolas o interseccionándolas, se pueden combinar. * Unir * Substraer * Interseccionar * Excluir * Frame: Tiene las mismas propiedades que tiene un rectángulo pero puede tener más capas, es el espacio de trabajo. * Delimita el área de nuestra página. * Capa especial que tiene las mismas propiedades que un rectángulo, pero puede contener otras capas. * Útil para organizar el diseño y tener un cuadro delimitador para limitar pantallas.

Notas: Mapa de bits Son la suma de los pixeles, almacena la información de la dimensión de la imagen y el color de cada píxel. **Formatos en imágenes** * **GIF:** Se usa para animaciones, tiene un rango màx de 256 colores. * **JPG:** Admite millones de colores. * **PNG:** Es la mezcla entre los dos. Admite transparencia y millones de colores. **Vectores** La información se almacena no en pixeles si no como expresiones matemáticas que deben calcularse para el nivel de zoom o uso dado. **SVG:** Scalable Vector Graphics Los vectores están formados por nodos que nos permiten manipular su posición, pueden tener borde redondeado, se puede añadir o eliminar nodos. Pueden tener rellenos ya sea sólido o degradado solo para formas cerradas. Para facilitar la creación de vectores existen las operaciones booleanas, con dos o tres formas se pueden combinar y generar una sola ya sea añadiendo, restando o interseccionándolas. * Unir - Se unen las dos formas. * Substraer - Se resta la forma del fondo a la que está encima de ella. * Interseccionar - Se toma la forma que está entre ellas. * Excluir - Lo que está entre las dos lo elimina.

### Mapa de Bits 👾 Los mapas de bits almacenan información sobre las dimensiones y el color de cada pixel. Hay diferentes tipos de formatos en las imágenes, pero los más usados van a ser: * El GIF se usa para animaciones y tiene un rango máximo de 256 colores, con la ventaja de que pueden ser trasparentes * JPG admite millones de colores, pero a la hora de comprimir definimos un porcentaje y decidimos cuál es el rango de comprensión que tiene (Básicamente identifica los pixels que se parecen entre sí y los agrupa con un mismo color) * PNG admite millones de colores y también admite fondos trasparentes. \<aside> 💡 **El mayor problema que tenemos al usar mapa de bits:** El tamaño tiene que estar ya optimizado para la pantalla que vamos a utilizar (Resoluciones, tamaño, etc) \</aside> Cuando estamos utilizando mapa de bits tenemos que tener 2 tipos de imágenes. Una con resolución normal y otra con el doble de tamaño para pantalla de retina ### Vectores La información se almacena como expresiones matemáticas que deben calcularse para el nivel de zoom dado * **SVG (Scalable Vector Graphics)** : El formato más común en los vectores ### Nodos 🧶 * Definen cómo se debe dibujar la forma. * Los nodos se pueden manipular para cambiar su posición. Entonces la forma será redibujada * Los nodos también pueden tener borde redondeado. * Podemos añadir o eliminar nodos para simplificar o cambiar la forma que tenemos dibujada * Las formas pueden tener un relleno solido o degradado, pero siempre y cuando la forma no esté abierta \<aside> 💡 A veces dibujar formas vectoriales no es sencillo porque no podemos hacerlo con todas las herramientas que Figma nos proporciona. Asi que para facilitar el trabajo tenemos una serie de operaciones booleanas \</aside> ### Operaciones Booleanas Una forma de combinar formas, añadiéndolas, restándolas o interseccionándolas * Unir * Substraer * Interseccionar * Excluir

VECTORES Y OPERACIONES BOOLEANAS Mapa de bits: Herramientas para almacenar imágenes por su dimensión y color de cada pixel. Existen diferentes formatos en mapas de bits, pero las más usadas son: GIF JPG PNG GIF: Se utiliza para animaciones la ventaja es que los bits pueden ser transparentes JPG: Admite millones de colores y a la hora de imprimir podemos definir cuál es el porcentaje para evitar demasiado peso en las imágenes PNG: Puede decirse que es la mezcla de los dos ya que admite millones de colores y también admite fondos transparentes, la diferencia es que tenemos que tener en cuenta la cantidad de bits, dependiendo de la proyección en las pantallas, si es para una pantalla normal o el doble de bits para una pantalla de retina Los vectores a diferencia de los bits es una representación matemática que deben calcularse para el nivel de zoom o para el recurso dado. Los vectores: Están conformados por nudos, con los cuales podemos alterar su escala o su dirección Operaciones booleanas: Son formas que al combinarlas podemos interpretar una nueva forma, ejemplos: unión, sustracción, intersección y exclusión Frames versus grupos Los grupos vienen como referencia de las antiguas herramientas de Diseño, podemos agrupar cosas pero no podemos agregar propiedades. Los Frames, El frame puede tener como referencia de trabajo el área de la pantalla del dispositivo, podemos delimitar la página de nuestro trabajo.

Me gusta que Figma maneja los mismos comandos de teclado que Ilustrator para evitar buscar pestañas. Ctrl + G = Agrupar Alt sostenido más clic = Copiar Ctrl + D = Repetir Acción

![]()

Los vectores son representaciones gráficas que almacenan información en expresiones matemáticas, no en píxeles. Esto permite escalarlos sin pérdida de calidad, a diferencia de los mapas de bits. Los vectores son ideales para logotipos e iconos, donde la precisión y la escalabilidad son cruciales. El formato más común de vectores es SVG (Scalable Vector Graphics), que permite manipular formas mediante nodos, facilitando su edición y adaptación a diferentes resoluciones.

re lindas mis tareas :) ¡poco a poco! :) 

## Tipos de imágenes para web ### Lossless (sin pérdida): * Capturan todos los datos del archivo original. * No se pierde nada del archivo original. * Puede comprimirse, pero podrá reconstruir su imagen al estado original ### Lossy (con pérdida): * Se aproximan a su imagen original. * Podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de datos innecesarios. * Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la página, pero pierde su calidad. * Los archivos tipo lossy son mucho más livianos que los archivos tipo lossless, por lo que son ideales para usar en sitios en donde el tamaño del archivo y la velocidad de descarga son importantes.  ## Formatos de imagen para web * **GIF** (Graphics Interchange Format): Formato de imagen sin pérdida, no se puede comprimir * **PNG 8** (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores de 256, se utiliza para logotipos e iconos para la página. * **PNG 24** (Portable Network Graphics): Formato de imagen sin pérdida, utilización de colores ilimitados, alta calidad, si intentamos comprimir no ayudará demasiado por la gran cantidad de colores. * **JPG / JPEG** (Photographic Experts Group): Formato de imagen con pérdida, perdemos calidad a la hora de comprimirlas, pero llegan a ser óptimas para la carga en la página web. * **SVG - Vector** (Scalable Vector Graphics): Formato de imagen muy ligero sin pérdida, con svg no perdemos calidad, ya que está compuesta por vectores. * **WebP**: Es un formato gráfico en forma de contenedor que sustenta tanto compresión con pérdida como sin ella. ​​Fue desarrollado por Google.


### **Puntos Importantes de la Clase** 1. **Formatos de Imagen**: * JPG, GIF, PNG y SVG. * GIF: animaciones, 256 colores, permite transparencia. * JPG: millones de colores, compresión de píxeles similares. * PNG: mezcla de JPG y GIF, admite millones de colores y transparencia. 2. **Mapas de Bits**: * Almacena dimensión y color de cada píxel. * Necesidad de imágenes en diferentes resoluciones (normal y Retina). 3. **Vectores**: * Información almacenada en expresiones matemáticas. * Formas vectoriales: rectángulo, línea, flecha, elipse, polígono, estrella. * Formato común: SVG (Scalable Vector Graphics). * Formas pueden tener relleno (sólido o degradado). 4. **Operaciones Booleanas**: * Unir, sustraer, interseccionar, excluir. * Facilitan la creación de formas complejas a partir de formas simples. 5. **Frames vs. Grupos en Figma**: * Frames: delimitan áreas de trabajo, permiten aplicar propiedades como colores de fondo. * Grupos: permiten agrupar elementos, pero limitados en propiedades y deforman elementos al cambiar su tamaño.

* Vectores 



***<u>Recordatorio : </u>*** * Las imágenes estan compuestas por mapas de bits , es por eso que cuando se le hace mucho zoom a una imagen se pueden ver los pixeles * Las ilustraciones están compuestas por vectores y al hacerle zoom no pierden su calidad

**Tip:** Presionando Alt mientras mueves un objeto se crea una copia sin necesidad de usar comandos

También se puede crear frames con A (artboard) ✌️

Diferencias entre imágenes de mapa de bits y vectoriales: **Mapa de bits**: son la opción perfecta para fotografías o imágenes que tengan buena resolución pero con las que no es necesario aumentar su tamaño o hacer zoom. Imágenes **vectoriales**: suelen utilizarse para logotipos, iconos, ilustraciones, infografías y otros elementos para páginas web.

**Clase 13 - Vectores y operaciones booleanas** * **¿Qué obtenemos al sumar todos los píxeles de una imagen?** * Un mapa de bits. * **¿Para qué sirve un mapa de bits?** * Para almacenar las dimensiones y el color de cada píxel. * **¿Cuáles son los formatos de mapas de bits más usados?** * GIF. * JPG. * PNG. * **¿Cuáles son las características de un GIF?** * Se usa en animaciones * Tiene un rango de 256 colores como máximo. * Posee transparencia. * **¿Cuáles son las características de un JPG?** * Admite millones de colores. * Se puede elegir el rango de compresión de esta imagen. Esto afecta al rango de colores que se pueden percibir, ya que une los que tienen un color parecido entre ellos. * **¿Cuáles son las características de un PNG?** * Admite millones de colores. * Tiene transparencia. * **¿Cuál es el mayor problema que tenemos a la hora de trabajar con mapas de bits?** * El tamaño de estos debe estar optimizado para la pantalla en la que se vaya a ver la imagen. * **¿Qué debemos de hacer cuando sabemos que nuestras imágenes se van a visualizar en dispositivos con pantalla retina?** * Se debe usar una imagen con el doble de tamaño para estos dispositivos. Lo cual hace que debamos de tener dos imágenes diferentes, una para las pantallas normales y otra para las pantallas de retina. * **¿Qué podemos usar cuando queremos usar iconos y logotipos?** * Vectores. * **¿Qué son los vectores?** * Son imágenes que almacenan su información usando expresiones matemáticas y son capaces de escalarse ellas mismas sin importar el tipo de pantalla y resolución de esta misma. * **¿Cuál es el formato de imagen que usan las imágenes hechas con vectores?** * SVG (Scalable Vector Graphics) * **¿Qué información podemos encontrar almacenada en imágenes hechas con vectores?** * Tipo (forma). * Relleno (color). * Tamaño * Posición X. * Posición Y. * **¿Por qué elemento está compuesto un vector?** * Por nodos. * **¿Cuáles son las características de los Nodos?** * Son los encargados de definir la forma de la imagen que se está dibujando. Debido a que los nodos se pueden manipular podemos cambiar la forma de la imagen las veces que queramos. * Tiene bordes redondeados. * Se pueden añadir o eliminar los nodos que queramos de la imagen. * Pueden tener un relleno, ya sea, sólido (un color) o degradado (dos o más colores), esto siempre y cuando la forma esté cerrada. * **¿Cuáles son las formas vectoriales que podemos crear con Figma por defecto?** * Línea. * Flecha. * Elipse. * Rectángulo. * Polígono. * Estrella. * **¿Podemos dibujar en Figma cualquier figura que queramos usando únicamente con las propiedades de dibujo?** * No. * **¿Qué podemos usar para dibujar figuras complejas en Figma?** * Las operaciones booleanas. * **¿De qué formas podemos crear imágenes complejas usando las operaciones booleanas?** * Uniendo, sustrayendo, interseccionado y excluyendo formas o partes de una imagen. * **¿Cómo podemos crear un círculo perfecto en Figma?** * Lo primero que debemos hacer es buscar en la barra de herramientas la opción de “Shape tools” y darle click. * Una vez dado el click se nos despliega un menú y en él debemos buscar la opción de “Elipse”. * Una vez seleccionada la opción debemos pulsar la tecla Shift y dibujar el círculo con un clic sostenido y arrastrando el mouse para dibujarlo. * **¿Cómo se llama la opción de operaciones booleanas en Figma?** * Boolean Groups. * **¿La opción de Boolean Groups está a la vista por defecto?** * No. * **¿Cuándo podemos ver habilitada la opción de Boolean Groups de Figma?** * Seleccionado dos o más formas dibujadas en el Canva de Figma. * **¿Para qué nos sirven los grupos en Figma?** * Para agrupar cosas, pero no nos permite agregarle ninguna propiedad. * **¿Cómo se calcula el tamaño de un grupo en Figma?** * En función a su contenido. * **¿De dónde vienen los grupos que usamos en Figma?** * De herramientas de diseño antiguas. * **¿Debemos de evitar el uso de grupos en Figma?** * Sí. * **¿Qué es un Frame?** * Es una especie de rectángulo especial que puede contener otras capas. * **¿Para qué podemos usar los Frames en Figma?** * Para organizar el diseño y tener un cuadro delimitado que sirve para imitar plantillas pantallas. * **¿Con cuáles símbolos podemos diferenciar un Frame de un grupo en Figma?** * Frame: Un símbolo de numeral. * Grupo: Un cuadrado con líneas punteadas.

me gusto trabajar con grupos para tener los elementos ordenados y poder duplicarlos facilmente, sin que se desordenen, lo malo es que pierden demasiadas propiedades para trabajar con diseño responsive.

Mis notas:

Vectores y operaciones booleanas Mapas de bits: Es la suma de los pixels, existen diferentes formatos, los más usados son GIF, JPG y PNG. Vectores: Un vector no se representa con pixels. El formato más común es el SVG, están formado por nodos que se pueden modificar, estás formas pueden tener relleno. Operaciones booleanas: Permite combinar formas Frames vs grupos: Frame: Contienen más capas, puedes delimitar en base al dispositivo. Grupo: Permite agrupar cosas pero no se puede añadir propiedades.


# **Vectores y operaciones booleanas** ### **Mapas de bits** * GIF (Graphics Interchange Format): Formato de imagen que admite animaciones y una paleta de colores limitada, ideal para gráficos simples o animaciones pequeñas. * JPG (Joint Photographic Experts Group): Formato de imagen comprimido que es excelente para fotografías y gráficos complejos, pero puede perder calidad con múltiples ediciones y compresiones. * PNG (Portable Network Graphics): Formato de imagen sin pérdida de calidad que admite transparencia, ideal para gráficos con detalles precisos o que requieren fondos transparentes. ### **Vectores** * Nodos: Puntos de control que definen las formas y trayectorias en un objeto vectorial. Los nodos permiten editar y manipular la forma de los vectores de manera precisa. ### **Operaciones Booleanas** * Unión: Combina dos o más formas vectoriales para crear una forma compuesta que incluye todas las áreas de las formas originales. * Substraer: Elimina la intersección entre dos formas vectoriales, dejando solo la parte de una forma que no se superpone con la otra. * Interseccionar: Crea una forma vectorial que solo incluye la parte de las formas originales que se superponen entre sí. * Excluir: Elimina la parte de una forma que se superpone con otra forma, manteniendo solo las áreas no superpuestas. ### **Frames vs Grupos en Figma** * Frame: Un contenedor en Figma que permite organizar y diseñar elementos dentro de un espacio definido. Los frames son útiles para diseñar pantallas o secciones completas de una interfaz. * Grupo: Una agrupación de elementos dentro de un frame en Figma. Los grupos permiten organizar y manipular múltiples elementos como una unidad, facilitando la edición y la estructuración del diseño.

ENSAYO EN FIGMA DE OPERACIONES BOOLEANAS 


.png)![]()![]()


![]()file:///C:/Users/Administrator/Downloads/Dise%C3%B1o%20sin%20t%C3%ADtulo%20(9).png

.png)

informaciióm de los vectores

Aqui mi aporte sobre el USIE (Unir, Substraer, Intersectar y Extraer) adicional una imagen de un frame y un grupo.