Cómo configurar macOS para el diseño web

1. ¡Hola!: En esta clase, te voy a mostrar cómo configurar tu Mac para el diseño web. Empecemos. Oigan, todos. Bienvenido. Mi nombre es Adi Purdila, y soy diseñadora y desarrolladora web. Ahora bien, si apenas estás empezando en el diseño web, esta clase te mostrará todas las herramientas que necesitas para ser rápido y eficiente. Si eres un diseñador con más experiencia, entonces podrías encontrar algunas apps que en realidad son muy útiles pero no tenías ni idea. En esta clase, te voy a mostrar las apps que uso casi a diario. Han hecho una diferencia significativa para mí y creo que será lo mismo para ti. Te mostraré qué software de diseño uso y también algunas alternativas, así como pros y contras cortos para cada uno. Verás algunas apps increíbles para elegir colores, crear paletas de colores, y también comprobar el contraste entre colores para que puedas asegurarte de que tus diseños sean accesibles. También te mostraré cómo organizar, marcar y previsualizar tus fuentes mucho más fácil; esto es tan útil para los diseñadores porque es un enorme ahorro de tiempo. También aprenderás a gestionar y organizar tus iconos para que siempre puedas encontrar rápidamente los que necesites. En las dos últimas lecciones, te mostraré cómo medir cualquier distancia o dimensión en la pantalla y también cómo tomar grandes capturas de pantalla y compartirlas con tu equipo o clientes. Ahora, esta clase está dirigida principalmente a usuarios de Mac, pero creo que aún debes verla aunque estés usando Windows porque podrías encontrar algunas razones convincentes para cambiar a macOS para el diseño web. La lección número 2 está dedicada a ti, al usuario de Windows, y ahí es donde repaso mi razonamiento para elegir macOS sobre Windows para este tipo de trabajo. Si eres usuario de Mac, puedes saltar directamente a la lección número 3 donde te mostraré qué software de diseño uso para crear todos mis diseños hoy en día. ¿ Estás listo? Empecemos. 2. Una palabra rápida para usuarios de Windows: Hey, bienvenidos a la primera lección de esta clase. Antes de entrar en el contenido principal, quería dirigir este video rápido a todos los usuarios de Windows que nos están viendo. Como probablemente te darás cuenta a estas alturas, esta clase trata de configurar macOS para diseño web. Eso no significa que no me guste Windows o no me gustas, eso no es cierto. Crecí con Windows y PC y tengo dos PC en casa ejecutando Windows y Linux, y en general, me encanta. No obstante, creo que para este tipo de trabajo, para el diseño web, macOS es mejor que Windows. Eso no significa que no puedas usar Windows para ello, absolutamente puedes. Puedes diseñar cualquier interfaz, cualquier interfaz de usuario que quieras en ambas plataformas. Pero creo que vas a tener un tiempo más fácil y agradable haciendo eso en macOS. Eso es todo lo que hay a ello. En realidad tengo algunas muy buenas razones para creer eso. El motivo principal es la multitud de apps que puedes descargar y usar, la mayoría de las cuales son gratuitas. Todas estas aplicaciones son increíblemente útiles y la mayoría de ellas son únicas, lo que significa que no tienen una contraparte de Windows, o si lo hacen, generalmente no es tan buena. Con las aplicaciones de macOS que estoy usando, todo solo funciona como se esperaba y eso es algo que valoro mucho. Otra gran razón para usar macOS es la aplicación Sketch que es sólo para Mac. Esta sigue siendo la aplicación de diseño digital favorita para mucha gente, y todavía me encuentro alcanzando para ella de vez pesar de que hoy en día soy principalmente usuario de Figma. Hablaré más de Sketch en la siguiente lección. También me encanta la confiabilidad de las computadoras macOS y Mac en general. Creo que la gente debería prestar más atención a esto porque es muy importante que tengas una pieza de equipo en la que puedas confiar, sobre todo si es para tu negocio. Rara vez consigo bloqueos en macOS. Como decía anteriormente, todo sólo funciona como se esperaba tanto desde el punto de vista del hardware como del software. Hablando de hardware, creo que Apple actualmente tiene las mejores pantallas de consumo del mercado. Aquí, estoy hablando de sus famosas pantallas Retina. Actualmente, tengo dos Macs con pantallas Retina, y esta es una de ellas. Déjame decirte una cosa. Una vez que llegues a trabajar en una pantalla Retina, nunca querrás volver a usar otra pantalla, te lo prometo. Esto es especialmente cierto para el diseño. Estas pantallas son muy brillantes, y también son de muy alta resolución, por lo que el texto y todo lo demás en ellas realmente es increíblemente nítido. Ahora bien, si estás pensando en cambiar a macOS, en realidad no hay tiempo mejor que el presente. Estoy grabando esta clase en enero de 2021. Hace unos meses, Apple acaba de anunciar su nuevo chip M1 y tres computadoras que lo utilizan. Uno de estos es un Mac Mini con un precio de alrededor de 700 dólares. Considerando la relación precio a rendimiento, esto en realidad es una ganga y esto es lo que te recomendaría que obtengas si quieres empezar a usar la plataforma Mac. Ahora, si eres usuario de Windows, y no quieres cambiar, hablemos de ello. Publica un comentario en el área de discusión y tal vez te pueda ayudar de alguna manera. A lo mejor puedo recomendar una herramienta para Windows que te va a hacer la vida un poco más fácil. Si hay suficientes intereses, incluso consideraré hacer una clase separada sobre cómo configurar Windows para el diseño web. Con eso dicho, entremos a la carne y patatas de esta clase. El primer paso que deberás dar es instalar tu software de diseño. Esa es la app que vas a usar para crear tus diseños. Pero, ¿cuál deberías conseguir? Porque hay un par de opciones dignas. Bueno, vamos a averiguarlo en la siguiente lección. 3. Software de diseño: Hey, bienvenido de nuevo a la clase. Esta lección es sobre software de diseño y vamos a echar un vistazo a algunas opciones disponibles. Voy a pasar rápidamente por los pros y los contras para cada uno. Te voy a decir qué evitar. Y también lo que recomiendo. Suena bien. Vámonos. Voy a empezar diciéndote qué evitar, ¿de acuerdo? Cuando se trata de diseño de interfaz de usuario o diseño de interfaz, debes mantenerte alejado de Adobe Photoshop y Adobe Illustrator. Y hay unos cuantos más por ahí, pero estos son los principales. Y no me malinterpreten. Photoshop e Illustrator. Fantásticas apps para lo que fueron diseñadas para hacer, no para este tipo de trabajos. Por lo que para crear o diseñar sitios web y aplicaciones móviles y esas cosas, no son muy buenos para hacer eso. Sé que mucha gente empezó a diseñar sitios web en Photoshop. un par de años. Yo mismo incluido. Pero lo hicimos porque no había alternativa real ahí fuera. Está bien. Pero hoy, vamos. Hay tantas apps que puedes elegir. Y les voy a mostrar tres de ellos sólo en esta lección. Creo que técnicamente por supuesto, puedes diseñar cualquier interfaz que quieras tanto en Photoshop como en Illustrator, pero te vas a costar hacer eso. Entonces por eso te recomendaría que te vayas. O bien utilizas Photoshop Illustrator para lo que se diseñaron originalmente, que es la edición de imágenes y la creación de ilustraciones. Porque queremos trabajar eficientemente. Queremos utilizar herramientas que fueron diseñadas específicamente para este tipo de trabajo para el diseño de UI. Y vamos a empezar con boceto. Ahora el boceto es bastante impresionante. Esta es en realidad la herramienta que empecé a usar o justo después de cambiar de Photoshop. Creo que en aquel entonces era boceto versión tres. Ahora es boceto versión cinco algo. Bueno, boceto versión 50 algo porque tipo de multiplican su número de versión hace un tiempo. Pero normalmente sería un sketch versión cinco era como esta versión súper ligera a Photoshop donde podría diseñar un sitio web o una interfaz mucho más fácil, ayudó a muchos controles que están específicamente diseñados para eso. Obviamente esta app ha evolucionado con el tiempo adentro, se puso mejor y mejor. Ahora tiene un montón de características que puedes usar para agilizar tu flujo de trabajo en términos de la interfaz de usuario, Esto es bastante sencillo. Tienes una barra de herramientas superior que también puedes personalizar para sostener tus más importantes. Herramientas. Aquí tienes una sección para cambiar a las diferentes páginas. Se trata de una capa de paneles para que pueda crear cualquier forma que quiera. Va a aparecer aquí mismo. Y en el lado derecho tienes un panel inspector que te dará acceso a las diversas propiedades de los objetos que has seleccionado en este lienzo. Cuando se trata de pros y contras, creo que la más grande es que bosqueja una aplicación nativa de Mac. Por lo que es muy rápido que funciona increíblemente bien en macOS. E incluso tiene soporte para macOS, Big Sur, que es el último sistema operativo de Apple al momento de esta grabación en este equipo, estoy usando Catalina, que es la versión anterior. Por lo que parece la interfaz de boceto estándar. Pero en Big Sur, realidad tiene una interfaz ligeramente actualizada y en mi opinión, luce brillante. También me encanta el hecho de que tenga un modo oscuro. Y puedo cambiar fácilmente entre el modo oscuro y el modo de luz desde la apariencia aquí. Y así es como se ve en modo lite. Y esta es en realidad la única app que soporta un modo oscuro de todas las apps que te voy a mostrar hoy. Sketch también tiene una enorme comunidad detrás de él. Tienes una gran cantidad de sitios web con diversos recursos hechos para sketch. Muchos plugins desarrollados por miembros de la comunidad. Y básicamente tiene todo lo que necesitas. En una aplicación de diseño. Con sketch, puedes crear cualquier cosa, desde iconos hasta app diseñada hasta diseño de sitios web. Y en realidad es un kit de herramientas muy completo. Ahora, cuando se trata de los contras, creo que el más grande es el hecho de que no es gratis. Actualmente Sketch tiene un precio de $99. Entonces si quieres usarlo, tienes que pagar esto por delante. Y luego si quieres seguir recibiendo la versión actualizada de la app, tendrías que gastar otros 79 dólares al año. Entonces básicamente, pagas 99 dólares en el primer año. Tienes las actualizaciones incluidas en la app. Pero después de que haya pasado ese año, si quieres las versiones actualizadas, tendrías que seguir renovando básicamente tu suscripción por 79 dólares anuales. Entonces eso es estafa, número uno. columna número dos es que está el hecho de que esto es sólo Mac. Obviamente no hay problema para esta clase porque se trata de configurar macOS para diseño web. Pero si más abajo de la línea, tal vez estás pensando en cambiar a Windows o poder acceder a tus archivos de diseño desde otro sistema operativo. Usar Sketch no es para ti porque esto solo se ejecuta en macOS. Y si te interesa, puedes conseguir la app en sketch.com. Ahora la siguiente herramienta de la lista es Adobe XD. Esta es otra aplicación poderosa y una que en realidad es increíblemente popular en cuanto a la interfaz. Es bastante similar al boceto. Tienes una barra de herramientas aquí en el lado izquierdo. También se puede ver el panel de capas aquí y el panel inspector justo aquí en el lado derecho. Y cuando se trata de Adobe XD, hay muchos pros. En primer lugar, es absolutamente gratuito. También hay una versión de pago, pero si apenas estás empezando o no necesitas como todas las herramientas de colaboración. Esta es una herramienta gratuita. Otra ventaja es que funciona tanto en Mac OS como en Windows. Entonces si tienes quizá dos computadoras, una en la oficina, otra en tu casa, puedes empezar a trabajar en un proyecto en la oficina y puedes terminarlo en casa en otro sistema operativo, sin problema alguno. Y también puedes optar por guardar tus documentos en la Nube para que sean accesibles desde cualquier lugar. Adobe X D también tiene una enorme comunidad detrás, con muchos activos disponibles para su descarga como kits de interfaz de usuario y otras cosas. Hay una gran cantidad de plugins disponibles. Y al igual que el sketch, tiene todo lo que necesitarías de un AP de diseño, además en realidad algunas características únicas como la cuadrícula de repetición. Entonces, por ejemplo, si tengo como un rectángulo aquí, puedo crear una cuadrícula haciendo clic en un botón simple y arrastrando así, y va en múltiples direcciones y puedo ajustar fácilmente el espaciado entre los elementos de la cuadrícula. Entonces esta es una característica que no he visto en ningún otro lugar. También cuenta con un panel de activos muy cool que permite guardar colores, estilos de caracteres, y componentes para reutilizar tus proyectos. O por ejemplo, puedo seleccionar este elemento x D sabe que hay dos colores aplicados a él y leer para un relleno, acordar por un borde. Y automáticamente crea esos dos colores para mí. Nuevamente, si tengo un elemento de texto, puedo guardar esos estilos de carácter muy fácilmente. Entonces permítanme que rápidamente les dé un ejemplo aquí. Puedo hacer clic en este botón y se va a guardar como helvetica nueva irregular 20 pixels. Obtiene su información de aquí. Y más abajo de la línea, puedo hacer clic con el botón derecho en esto, puedo editar eso. Y puedo cambiar esas propiedades y cualquier texto en uno que tenga este estilo de personaje para aplicarlo se actualizará también, lo cual es bastante impresionante. Y por supuesto, como dice su nombre, es, es un producto de Adobe. Por lo que sabemos que es un producto de calidad que en realidad se actualiza muy a menudo. Lo que realmente me gusta de XD es el hecho de que es muy rápido y tiene una interfaz de usuario muy limpia. También dato divertido, puedes importar archivos de boceto y Photoshop en Adobe XD. Entonces si tal vez estás cambiando de una de estas aplicaciones para tus necesidades de diseño web. Después podrás importar todos tus archivos antiguos a XD. No hay problema en absoluto. Ahora cuando se trata de los contras de usar Adobe XD, Para ser honesto, no se me ocurre ninguna. Creo que esta es una aplicación realmente, realmente buena para cualquiera que esté tratando de meterse. Diseño web. Puede ser el hecho de que no tenga un nodo oscuro, aunque eso es bastante subjetivo, no a todo el mundo le gusta un modo oscuro. O tal vez el hecho de que su interfaz no sea tan personalizable como la interfaz de usuario del boceto, por ejemplo. A lo mejor podemos considerar que eso es una estafa. No lo sé. En mi opinión. No veo ningún contras reales ni ningún auto que valga la pena mencionar para Adobe XD. Ahora, si quieres conseguir Adobe XD, puedes obtenerlo en la app de Creative Cloud. Si tienes eso. O si no lo haces, simplemente puedes ir a Adobe.com productos slash slash XD. Y aquí solo puedes hacer clic en el botón de inicio gratis y puedes descargarlo desde ahí. Ahora, para sigma, Bueno, éste es el que uso diariamente. Y realmente me encanta esta app en cuanto a la interfaz de usuario. Nada especial realmente. Es muy similar a todas las demás aplicaciones de diseño que hay por ahí. Tenemos una barra de herramientas aquí en la parte superior, capas y activos a la izquierda, inspector a la derecha, y el lienzo y el medio. Ahora lo que realmente me encanta de descifrar es el hecho de que es gratis. Funciona en Windows, Mac OS y Linux. Y también funciona en el navegador. Entonces aquí estoy en realidad en Safari. Y tengo un FISMA archivado abierto. Pero también tengo instalada la aplicación de escritorio y cualquier cambio que hagas en tus archivos se guarda automáticamente en la nube. Entonces, por ejemplo, puedo dibujar un rectángulo en mi aplicación de escritorio. Y cuando cambie a la aplicación web o a la basada en el navegador, verás que ese cambio aparece aquí al instante. Y me encanta el hecho de que todos mis archivos estén en línea y sean accesibles desde cualquier lugar que quiera. Ahora, al igual que los otros dos, sigma tiene todo lo que necesitas en una API de diseño puede crear cualquier interfaz con ella. Pero también puedes diseñar iconos, vectores, ilustraciones, incluso es muy, muy potente. Ahora, aparte de las cosas habituales que encontrarías en un software de este tipo, sigma también tiene algunas características únicas, por ejemplo, el diseño automático. Entonces, por ejemplo, puedo agregar diseño automático a un objeto específico. Y entonces puedo. Empieza a mover ese objeto alrededor, así. Al igual que esto. Puedo seleccionar mi marco principal, puedo elegir una orientación diferente. Puedo cambiar el espaciado entre artículos. Y también puedo cambiar el relleno del contenedor principal. Y también algo que no he visto en ninguna otra app. Y esta es en realidad una de mis características favoritas en sigma es colores de selección. Por lo que si seleccionas un grupo de elementos y esos elementos tienen diferentes colores aplicados a ellos, los encontrarás todos bajo un solo grupo en el inspector. Y se puede ver el código hexadecimal. Se pueden cambiar realmente fácilmente sin seleccionar realmente ese elemento. Apenas desde esta interfaz. También puedes cambiar la opacidad de ese color y también puede crearle un estilo de color. Y si no estás seguro de qué elementos utilizaron ese color, tienes aquí un pequeño botón que te permite seleccionar el elemento con ese color. Una característica fantástica. Lo uso todo el tiempo. Y desearía que algún otro software de diseño implementara algo como esto. Sigma es realmente rápido. Tiene una interfaz de usuario muy limpia. Y mencioné que es gratis. Sí, es gratis. También tiene un plan de pago, pero eso es para equipos. Entonces si quieres crear más equipos, pagarías extra por esos. Pero si no lo haces, entonces es totalmente gratis. Y cualquiera en cualquier plataforma, en cualquier navegador puede usar sigma, lo cual es fantástico en cuanto a contras. El único que me encontré hasta ahora es que a veces se desconecta al importar SVG. Pero aparte de eso, no tengo nada malo que decir sobre falsificar mi mano. De hecho, esta es mi recomendación personal para un software de diseño independientemente de tu nivel de habilidad. Entonces si apenas estás empezando, recomiendo usar Fatma. Si tal vez eres un veterano, te recomiendo que cambies a sigma. Tengo esa confianza de que este es un buen producto. De acuerdo, ahora, estas tres aplicaciones son lo que podríamos llamar mainstream, es decir. Todo el mundo sabe de ellos. Ellos son los más completos en cuanto a características. Y todos tienen comunidades realmente grandes detrás de ellos. Con eso dicho, hay una app más que podría interesarte y que se llama Studio. Esto lo hace una empresa japonesa llamada Studio Inc., con sede en Tokio. Esta app es bastante diferente a lo que estás acostumbrado porque puedes crear cualquier tipo de diseño de interfaz. Pero la experiencia es la de un constructor visual. Generalmente se apilan los elementos, por lo que cambiar uno afectará a los demás. Se pueden agregar márgenes y remaches a los elementos y es casi como trabajar en una página en vivo. El genial de Studio es que puede crear una versión codificada de ese diseño, que luego puedes subir a tu propio servidor. Con él. Básicamente puedes diseñar y codificar todo tu sitio web sin realmente escribir una sola línea de código tú mismo. Un inconveniente podría ser el hecho de que el estudio solo funciona en el navegador Chrome por ahora, y no tiene todas las campanas y silbatos de estos otros, como los llamo aplicaciones de diseño mainstream. No entraré en mucho detalle sobre esta app. Pero si te interesa ver una clase sobre Studio, avísame bajo pestaña de discusión, me encantaría darte una mirada más profunda a esta aplicación. Está bien, así que ahora es el momento de estar ocupados. Tu tarea ahora mismo es averiguar qué software de diseño quieres usar. Si ya tienes uno preferido. Eso es genial. Podemos seguir adelante. Si no, sigue adelante y descarga uno de estos e instálalo en tu sistema, juega con él, ve si te gusta. No importa cuál. Lo que importa es que te guste y te sientas cómodo trabajando con él. Si no sabes cuál conseguir, entonces sólo tienes que ir con mi recomendación y elegir sigma. Crea una cuenta gratuita y estás listo para ir. Ni siquiera tienes que descargar nada que puedas empezar en el navegador, o simplemente descargarlos todos y jugar hasta que encuentres el que te gusta. Ahora, pasemos a la siguiente categoría de herramientas que es la gestión de cuatro colores. Y en la siguiente lección les voy a mostrar tres aplicaciones muy útiles. Entonces te veré ahí. 4. Gestión de color: Hey, bienvenido de nuevo a la clase. Esta lección es sobre el manejo del color, y les voy a mostrar las aplicaciones que se utilizan para escoger colores desde cualquier parte de la pantalla para comprobar el contraste de color y también para crear paletas de colores. Ahora, estoy realmente entusiasmado con esto porque el color es uno de los aspectos fundamentales del diseño, y tener herramientas que me empoderen para hacer esto es simplemente fantástico. Empecemos mirando una aplicación llamada ColorSnapper. Puedes obtener la app desde colorsnapper.com. Esto es sólo un Mac. Puedes probarlo de forma gratuita y también puedes comprarlo por unos 12€. No estoy seguro de qué es eso en dólares, probablemente alrededor de $15 o algo así. Ahora, esta es una aplicación que se sienta muy bien en tu barra de menús en macOS, y puedes asignarle una tecla de acceso directo, mía es la opción de comando C, y con ella, obtienes este gran selector de color el cual puedes hacer más pequeño o más grande usando su rueda de desplazamiento del ratón. Es como una lupa. Puedes ir a cualquier parte de la pantalla y puedes probar cualquier color. ¿ Ves cómo cambia el valor hexadecimal ahí? Una vez que encuentres el color que quieres obtener, simplemente haz clic, y eso se guardará automáticamente en el historial de la app aquí, y también en tu portapapeles para que puedas saltar rápidamente a una app y puedes aplicar ese color aquí mismo. Es así de fácil, y como dije, funciona en cualquier parte de la pantalla. Ahora, también puedes cambiar el formato del color que estás escogiendo, así que si vas a Colors & Formatos, ahora mismo está configurado en CSS Hex, pero puedes obtener un Hex Genérico sin el signo hash delante o tal vez quieras un formato RGB con valores rojos, verdes, azules, o RGBA con un canal alfa, HSL, y algunos otros formatos. En realidad la lista aquí es bastante grande. También se puede acceder a la ventana Colores y Formatos a través de un atajo de teclado, mía es Shift Command C, y también puedes ver un historial del color que escogiste aquí mismo. Puedes desplazarte por esto usando la rueda de desplazamiento de tu ratón. Si tienes un color que quieres guardarlo como favorito, simplemente puedes hacer clic en ese pequeño ícono, y ahora puedes hacer clic en este y cambiar entre el modo de historial y el modo de favoritos. Eso es muy útil. Ahora, si quieres cambiar un color que escogiste, puedes ir a Colores y Formatos, puedes seleccionar el color que quieres cambiar, por ejemplo este, y puedes hacer clic en este pequeño ícono aquí que dice Editar Color. Eso va a abrir este editor donde se puede cambiar la Opacidad, cambiar la saturación, o en realidad la ligereza del color, o bien puede cambiar el tono del color por completo. También tienes algunas opciones adicionales aquí, puedes elegir entre la rueda de color o un deslizador RGB en escala de grises, HSB. También puedes elegir entre algunos colores predefinidos en el sistema, o puedes elegir entre este espectro. En cuanto a las preferencias para la app, esto es bastante sencillo, puedes decidir sobre los atajos de teclado que desees para escoger el color, y también mostrar colores y formatos. También hay un modo de precisión, que no te he mostrado. Si abres el selector de color y presionas la tecla Control, esto te permite moverte con mucha más precisión. Esto es sin el modo de precisión activado, esto es con el modo de precisión activado. Realmente puedes acercar ahí y elegir el color exacto que quieras. También puedes modificar su apariencia como el nivel de ampliación del bucle, el área de captura, puedes elegir usar un tema oscuro o no, y también puedes modificar algunos de los formatos que puedes usar para guardar el color, como usar mayúscula al elegir el Hex o el CSS Hex, y así sucesivamente y así sucesivamente. Si buscas un buen recolector de color, esta es en realidad mi recomendación. Tenemos otra de la que voy a hablar en un poquito, eso se llama Sip. Eso también es un gran recolector de color, pero es un poco complicado para escoger colores. En cambio, ColorSnapper es una app que llevo usando desde hace mucho tiempo y te la puedo recomendar de todo corazón. La siguiente app que quiero mostrarte se llama Contraste, y esto se usa para comprobar el contraste entre dos colores y asegurarte de que sean accesibles, y para determinar que están usando las relaciones de contraste de color WCAG. Ahora bien, ¿cómo funciona esto? Bueno, digamos que quieres crear un botón, y le estás dando un, digamos un color de relleno, algo así, y luego seleccionas el texto y le das un color de texto. Digamos algo como esto. Ahora bien, si vas a comprobar el contraste entre el color del texto y el color de fondo, en este caso en particular, vas a encontrar que no es accesible, por lo que las personas con problemas de visión tendrán dificultades leyendo este texto. Para ello, Contrast es una app que otra vez, se sienta en tu barra de menús, y simplemente haces clic en esa pequeña herramienta cuentagotas, selecciona un color, haz clic en eso y selecciona el otro color. Esto determina la relación de contraste entre los dos colores, en mi caso es 2.04, y es un fracaso. Ahora bien, si voy a aumentar el brillo de este color, y lo vuelvo a intentar verás que ahora tengo una relación de contraste mucho mayor, 9.26, y esto es un éxito en cuanto a accesibilidad. Las personas con problemas de visión podrán leer este texto. Es realmente así de simple de una app. En cualquier momento, puedes intercambiar colores haciendo clic en este botón, y también puedes ver una vista previa en vivo de esos colores justo en la app, lo cual es una gran adición. En cuanto a preferencias, aquí no hay mucho que elegir. Se trata de una aplicación muy sencilla, pero se pueden definir ciertas claves globales para escoger los colores y demás. Pero no he configurado ninguna de ellas porque no es una operación que hago muy a menudo; y hacer clic en el icono de la barra de menús y simplemente muestrear los colores así es en realidad muy sencillo. Por lo que usualmente solo hago eso. Puedes obtener la app en usecontrast.com, y puedes leer más sobre eso. También explican lo que es WCAG, como puedes ver, es el contenido web y las pautas de accesibilidad. Para descargarlo, simplemente tienes que ir a la Mac App Store donde verás que tiene un precio de $6 y 99, que creo que es un precio muy justo para esta app siendo que es tan útil. A la app final que quiero mostrarte gestión de cuatro colores se le llama Sip, y se le nombra como un mejor selector de color para tu Mac. Ahora esto es de muchas maneras muy similar al primer recolector de color que te mostré, ColorSnapper. Pero al mismo tiempo es mucho más complejo. Con Sip, básicamente puedes hacer lo mismo, conseguir nuestro seleccionador de color en la pantalla, puedes usar la rueda del ratón para hacer esto más grande o más pequeño, y puedes probar cualquier color. Ahora, justo al bate, podemos ver una diferencia. En realidad se nombran los colores aquí. Ves ahí, morado eléctrico, y si vamos al azul, se llama azul crayón. Subamos aquí, cielo profundo, azul. Creo que eso es genial porque da esos nombres. También puedes ver el código Hex y una vista previa de ese color ahí mismo. Nuevamente, una vez que haces clic en un color específico, lo copia automáticamente tu portapapeles y también en tu historial de color aquí mismo. Una vez que se copia el color, puedes por supuesto ir a tu software de diseño y puedes pegarlo ahí. También puedes hacer clic en un color específico para copiarlo en el portapapeles. puede copiar eso y se puede seleccionar esto y se puede cambiar el color así. También puede hacer clic en este pequeño botón para editar ese color y de nuevo, tienes acceso a un deslizador para el tono, uno para la opacidad. También tienes este recolector aquí mismo a un costado. También puede introducir manualmente los valores de RGBA. Una vez que hayas terminado, pulsa el signo Ok, y ese nuevo color automáticamente se va a copiar en tu portapapeles. También tienes acceso a formatos de color. En este momento está configurado como CSS Hex, pero aquí están todos los formatos que puedes elegir. Ahora bien, si prestaste atención antes, dije que esta app, Sip, es mucho más que solo un recolector de color. Eso lo podemos ver de inmediato porque podemos crear paletas de colores. De hecho, esta es la forma en que uso para crear paletas de colores cuando estoy trabajando en un Mac. Crear una paleta es muy simple, solo tienes que hacer clic en este pequeño icono de menú y seleccionar Nueva Paleta, luego empezar a tomar muestras de varios colores. A lo mejor voy a probar un color de mi doc de macOS aquí mismo, tal vez otro de aquí. Entonces con esos colores, simplemente puedo hacer clic y arrastrar a mi paleta de colores. Es así de fácil, y puedo por supuesto, hacer que esta ventana sea un poco más grande para poder ver todas mis paletas. Ahora, Sip también tiene incorporado un comprobador de contraste. Puedes hacer clic en este botón, ir a Comprobar contraste, y puedes probar dos colores. Te va a dar el contraste exacto, muy similar a la app de contraste que te mostré anteriormente. Si eliges dos colores que te den un fallo, también puedes hacer click en “Fix”, y eso va a modificar los colores de tal manera que te den un buen contraste. Realmente no me encuentro usando esta característica, pero si la quieres, está ahí. Ahora una de las características que realmente me gusta de Sip es este dock de color, que te da el historial de colores y algunas de las paletas de colores que creaste. Esto se puede mover a ambos lados de tu pantalla dependiendo de dónde lo desees. Funciona casi igual que la aplicación de la barra de menús, excepto que es un poco más fácil ver de qué colores puedes elegir. A lo mejor busco un color azul. Sé de inmediato que, oye, lo puedo encontrar aquí o lo puedo encontrar aquí. ¿ Busco un rosa claro? Bueno, lo puedo encontrar aquí mismo y puedo hacer clic en ese color para copiarlo a mi portapapeles, y luego puedo pegarlo en mi app de diseño muy rápido. Ese es Sip. Puedes conseguirlo en sipapp.io No es gratis, desafortunadamente, sí cuesta alrededor de 10 Euros por dispositivo. No obstante, también está incluido en Setapp. Setapp es un servicio de suscripción para tu Mac que te da acceso a muchas apps. Básicamente pagas una cuota plana mensual o anual, y tienes acceso de forma gratuita a un montón de apps, y una de las cuales es Sip. De hecho, así es como lo uso en mi suscripción Setapp. Ahí lo tienes, tres fantásticas apps que puedes usar para trabajar más fácilmente con colores. Ahora es tu turno de escoger la que crees que sería más útil si quieres, por supuesto, o si lo necesitas. Todas las apps que te estoy mostrando en esta clase son apps que uso. No quiere decir que necesites usarlos también. Pero creo que te podrían ayudar, y deberías probarlos. Ahora, otro aspecto importante del diseño es la tipografía. Como diseñadores, pasamos por decenas de fuentes hasta encontrar justo la adecuada para nuestro proyecto. Pero, ¿cómo podemos gestionar todas estas fuentes que se instalan en nuestro sistema? ¿ Cómo podemos previsualizar fácilmente y elegir la fase de tipo adecuada para nuestro diseño? Bueno, quiero mostrarles dos apps que nos van a ayudar a hacer eso muy fácilmente. Eso se acerca en la siguiente lección. Te veré ahí. 5. Gestión de fuentes: Hey, bienvenido de nuevo a la clase. Esta lección es sobre el manejo de fuentes. Te voy a mostrar la app que utilizo para gestionar todas las fuentes instaladas en mi sistema. Ahora, macOS ya tiene una app para esto, se llama Font Book. Puedes usarlo para ver qué fuentes tienes instaladas, ver cómo se ven y también crear colecciones. Pero podemos hacerlo mejor que eso. Encontré una mejor alternativa llamada tipografía. Si bien es muy similar a la aplicación predeterminada que te mostré antes, tiene algunas características extra que lo hacen realmente útil. Vamos a comprobarlo. Así es como se ve la app. A la izquierda tenemos esta barra lateral que nos permite filtrar las fuentes que se muestran en el lado derecho. Para cada fuente podemos ver una vista previa. Por cierto, este texto es totalmente personalizable. Aquí podemos ver el nombre de la fuente, y también este punto azul nos permite saber que esa fuente está activada. Si por alguna razón quiero desactivar una fuente, simplemente puedo hacer clic aquí y desactivar esa fuente. Actualmente, se trata de una fuente del sistema que no se puede desactivar. Pero si estoy instalando algunas fuentes yo mismo, entonces puedo usar esta función para activar o desactivar. En cualquier momento, puedo abrir una fuente en una ventana más grande haciendo clic en ella, y me va a mostrar una vista previa más grande de todos los personajes. También puedo ver alguna información sobre esa fuente en particular. Además, puedo elegir aumentar el tamaño de esos cuadros de vista previa o disminuirlo así. Desde aquí, puedo elegir ocultar esa barra lateral, y desde aquí, puedo activar y desactivar la colección rápida. Con la recolección rápida, simplemente puedo hacer clic con el botón derecho en una fuente y seleccionar Recopilación rápida. Digamos que estás trabajando en un proyecto, estás navegando por tu lista de fuentes, dices, ésta funciona muy bien, así que voy a recogerlo rápido. A lo mejor este funciona muy bien y yo voy a recoger eso también, y tal vez éste también. Después de hacer todo eso, simplemente puedes hacer clic en eso y te va a dar esa colección de fuentes. Ahora básicamente estás estrechando a solo las fuentes que seleccionaste. Esto te ayudará a tomar tu decisión mucho más rápido. Ahora, del lado izquierdo, tenemos un par de criterios para filtrar estas fuentes. Si busco Monospaced, puedo hacer click en eso y me va a mostrar todas las fuentes que coincidan con ese criterio, o tal vez quiero unas Script o Sans, Ornamental y cosas así. En cualquier momento, puedes hacer clic en este pequeño botón y puedes crear una nueva etiqueta, o puedes importar fuentes. Digamos que quiero crear una nueva etiqueta que se llama tema de WordPress. Digamos que estoy trabajando en un tema de WordPress y quiero seleccionar ciertas fuentes que funcionarían bien para mi tema de WordPress. A ver, tal vez voy a elegir esta para que pueda botón derecho en las etiquetas y pueda seleccionar tema de WordPress. ¿ Qué más? Puede ser éste. Ahora si elijo tema de WordPress, me muestra qué fuentes marqué con esa etiqueta. Esto es muy útil para organizar tu biblioteca de fuentes porque podemos usar estas etiquetas para marcar las fuentes para diferentes usos. Digamos que marcas ciertas fuentes con sans-serif, u otras con, digamos, muy legibles o algo por el estilo, los criterios o las etiquetas o las categorías que utilizas depende enteramente de ti, pero puedes usar el para categorizar tus fuentes, y eso va a hacer mucho más fácil para ti encontrarlas más adelante. Ahora, con tipografía, con esta app, también tienes acceso a Google Fonts. Básicamente, si abres las Preferencias y vas a.Biblioteca, puedes importar Google Fonts aquí mismo. Esto descargará en realidad toda la biblioteca de fuentes de Google, por lo que no tienes que ir manualmente al sitio web de Google Fonts y descargar ciertas fuentes desde allí. Puedes hacerlo desde la app directamente. También puedes importar Adobe Fonts. Si tienes alguna fuente de Adobe que quieras importar a la app, esta es la forma de hacerlo. Otra gran característica de tipografía es la comparación de glifo. Digamos que tienes estas dos fuentes. Puede hacer clic derecho en cualquiera de las dos y seleccionar comparar. Eso se superpondrá en realidad en la otra vista previa de la fuente, y se pueden ver las diferencias entre cada glifo. También puedes hacer esto mucho más grande, para que veas cómo Avenir Heavy se compara con Apple SD Gothic Neo Light en este caso. Esta es una característica muy útil. Ahora, puedes obtener la app, tipografía, en typefaceapp.com. Esto no es gratis, pero puedes obtener una prueba gratuita. Cuesta 2,199 euros en el Mac App Store, o si estás usando Setapp, ese es el servicio de suscripción del que te hablé, eso está incluido, por lo que realmente no tienes que pagar nada excepto la suscripción para Setapp que si recuerdo correctamente, es alrededor de $10 o 10€ al mes. En realidad no es tan grande de un trato. Además, la app también tiene un modo oscuro, por lo que puedes desactivar el Modo Oscuro o el Modo Nocturno como se llama aquí mediante el uso de este atajo de teclado o yendo a Ver, Modo Nocturno. Bastante cool. Si por alguna razón no te gusta esta app, tengo otra sugerencia para ti. Se trata de una aplicación llamada RightFont, y es mucho más compleja que tipografía, pero también es mucho más cara. Déjame mostrarte rápidamente de qué se trata y luego puedes decidir por ti mismo si alguno de estos te va a ser de utilidad. Puedes obtener la app en rightfontapp.com. También es una App para Mac. cuanto a los precios, cuesta 49 dólares por una sola licencia, pero también obtienes una prueba gratuita. El app de muchas maneras es similar a la tipografía. Tienes la lista de todas las fuentes instaladas en tu sistema aquí mismo. Puedes cambiar el tamaño anterior, puedes cambiar el texto de vista previa aquí mismo. También puedes ver esto como una lista, una tarjeta, o una cuadrícula. También puedes agrupar fuentes por familia, que es algo que no he visto en la otra App, y también puedes elegir entre cuatro temas disponibles. Como decía, esto es un poco más complejo. Aquí tienes acceso a las fuentes del sistema en una categoría separada, y también tienes acceso a algunas fuentes de iconos. En realidad hay muchos de ellos que incluyen algunas fuentes de iconos muy populares como Font Awesome e Ironicons, Foundation, Enypo. Puedes usar esto para obtener una vista previa de estos iconos y utilizarlos en tus proyectos. También tienes acceso a Google Fonts. Puedes sincronizar con Google Fonts, por lo que no tienes que descargar manualmente. También tienes acceso a las Fuentes de Adobe que actualmente están instaladas en tu sistema. También se puede sincronizar con SkyFonts, que es otro servicio para administrar fuentes. Este es un servicio en línea. Entonces puedes elegir crear varias listas como todas las fuentes activadas o desactivadas y así sucesivamente y así sucesivamente. Pero como estaba diciendo, esta es una alternativa. Mi recomendación sería usar tipografía porque esa es la que uso. Creo que es bastante simple, pero al mismo tiempo , me permite manejar mucho mejor mis fuentes. Si alguna de estas apps despertó tu interés, entonces adelante y descarga la que sientas más útil o la que más te guste. No son los únicos gestores de fuentes por ahí. Si haces una búsqueda en Google, estoy seguro que encontrarás mucho más. Estas son las que te mostré porque estas son las con las que trabajé, sobre todo tipografía. Yo lo sé, sé que es bueno, y te lo puedo recomendar. Hasta el momento, cubrimos herramientas para software de diseño, administración de color y administración de fuentes. Pero, ¿qué más usan los diseñadores de manera regular? Iconos. Recuerdo cuando necesitaba un ícono, me pondría en línea cada vez y lo descargaría desde ahí, o colaba a través de un montón de carpetas en mi computadora tratando de encontrar la correcta. Por suerte, hoy en día las cosas son mucho más sencillas, gracias a ciertas aplicaciones de administración de iconos que quiero mostrarles. Eso lo voy a hacer en la siguiente lección. Te veré ahí. 6. Gestión de íconos: Bienvenido de nuevo a la clase. Esta lección es sobre Administración de iconos y déjame decirte esto; tener una app que pueda almacenar todos tus iconos y categorizarlos es fantástico, fantástico, increíble. Antes de empezar a usar una app, me pondría en línea, buscaba un icono, lo descargaría y lo utilizaba, o buscaba en mis carpetas [inaudibles] de mi computadora hasta que encontrara la correcta. Pero no más, gracias a una app llamada Iconset. Ahora puedo encontrar cualquier icono en segundos y arrástrelo en mi aplicación de diseño. Déjame mostrarte cómo. Esta es la app que quiero mostrarte. En el lado izquierdo se pueden ver los conjuntos de iconos que están disponibles. Aquí, puedes ver la lista de iconos de ese conjunto y aquí básicamente tienes un panel de inspector y eso te va a decir el nombre del icono, algunas etiquetas y algunos detalles. En cualquier momento se puede, por ejemplo, copiar ese icono como icono o como SVG en realidad. Puedes copiar el código SVG o tienes algunas opciones adicionales aquí. Si solo lo copias, puedes simplemente pegarlo en, o simplemente puedes hacer clic y arrastrar y va a crear una copia de ese ícono en tu software de diseño. Este es un vector, por lo que puedes hacerlo tan grande o como pequeño y va a preservar su calidad. Ahora puedes agregar muy fácilmente un conjunto de iconos. Puedes haciendo clic en este botón y seleccionando “Nuevo Conjunto” y eso te va a permitir darle un nombre y buscar los iconos. Esto solo funciona en archivos SVG, por lo que necesitas descargar esos iconos primero a tu computadora y luego importarlos a Iconset, y van a estar disponibles aquí mismo para que no siempre tengas que ir online y encontrar el icono de la derecha. También puedes buscar iconos, por lo que si buscas una flecha, puedes escribir eso, te va a mostrar todos los iconos que coincidan con esos criterios de búsqueda. Esa búsqueda también se basa en lo que has seleccionado aquí en la barra lateral. Ahora en cualquier momento, puedes exportar un conjunto de iconos usando esta opción aquí mismo. Eso lo va a guardar en tu computadora como un archivo de conjunto de puntos, que luego podrás compartir con otras personas que tengan el Iconset activado y pueden importar ese conjunto en su propia aplicación. Pero la característica que más me gusta es el hecho de que puedo sincronizar toda mi biblioteca de iconos. Aquí, esto se llama biblioteca de conjuntos de iconos. Actualmente es local porque este equipo no es mi conductor diario, así que no lo uso para el trabajo. Pero si lo hiciera, guardaría esta biblioteca en un lugar compartido, en una ubicación compartida como Dropbox por ejemplo. Entonces si instalo la app en otra computadora, solo puedo abrir esta biblioteca y todos mis iconos se sincronizarán entre dispositivos. Muy cool. En cuanto a las preferencias, también tienes un modo oscuro que puedes activar. Puedes optar por ocultar o mostrar el nombre del icono y también una cuadrícula de iconos. Ahora la razón por la que tanto me gusta esta app es que es gratuita y funciona tanto en macOS como en Windows. Puedes conseguirlo en iconset.io y aquí es donde puedes descargar las versiones para Mac y Windows, y como decía, es totalmente gratis. En mi caso, esto es muy útil porque en el trabajo tengo una computadora Mac, en casa tengo un PC, así que si estoy trabajando desde casa y necesito acceso a mi biblioteca de iconos, puedo descargar la versión de Windows y debido a que la biblioteca está sincronizada, todos mis iconos están disponibles y puedo usar cualquiera de ellos en cualquier momento que me guste. También tengo algunas alternativas que quiero mostrarte en caso de que no te guste Iconset. Pero tengo que decirles que no sé lo buenos que son porque no he trabajado con ellos, excepto uno de ellos que probé brevemente. De las reseñas que leo en línea, parecen estar haciendo un gran trabajo, pero vas a tener que descargarlas y probarlas tú mismo para determinar si eso es cierto o no. Echemos un vistazo a las cuatro alternativas. El primero se llama IconJar, y lo puedes encontrar en geticonjar.com. Esto es sólo para Mac y no es gratis. Esto en realidad es un 20 o 30€ anuales o 60€ por vida. Como puedes ver en esta vista previa aquí, es bastante similar a Iconset. A lo mejor tiene unas campanas y silbatos más aquí y allá, pero no creo que para mí personalmente al menos no valiera la pena conseguir esto por encima de Iconset. El otro se llama Nucleo app. En nucleoapp.com. Se trata de un organizador de iconos y una biblioteca de iconos con más de 30.000 iconos. Básicamente descargas la app y también tienes acceso a la biblioteca Nucleo, pero también puedes agregar tus propios iconos. Esto funciona en Mac y Windows, y además cuenta con una app gratuita. El tercero se llama Proyecto Noun. Aquí puedes buscar iconos, y también hay una app para Mac que puedes descargar. Esto también tiene algunos complementos de Adobe para Illustrator, Photoshop e InDesign. Por último, está Iconscout que hace algo parecido. Ahora es tu turno de organizar tus iconos. ¿ Por qué? Porque te va a hacer la vida más fácil y te va a ahorrar un montón de tiempo y eso siempre es algo bueno. Te recomiendo usar Iconset porque ese es el que uso y sé que es bueno, además es gratis, funciona en ambas plataformas, pero siéntete libre de usar lo que creas que funciona mejor para ti. Esperemos que las cuatro alternativas que te mostré te pongan en el camino correcto. Ahora pregunta; ¿qué debes hacer siempre como diseñador? Mida, raramente encontrarás un diseñador que vaya, hagamos que 23 píxeles. No, diseñadoresson siempre miden cosas. personal, si hago dos botones y uno de ellos es como un píxel más alto, sólo me vuelve loco, no lo soporto. La medición es muy importante porque necesitamos ser consistentes en términos de espaciado y dimensionamiento. En la siguiente lección, quiero mostrarles una app que uso casi a diario, o al menos cuando estoy diseñando para medir cualquier cosa que quiera en la pantalla. Eso se acerca a continuación. 7. Medición: Hey, bienvenido de nuevo a la clase. Esta lección se trata de medir. Te voy a mostrar una app que uso mucho para medir cualquier distancia o dimensión en cualquier parte de la pantalla. También puedes usar esta app para crear guías verticales u horizontales y también tomar capturas de pantalla de tus mediciones. Ahora, la mayoría del software de diseño que usas tiene incorporado algún sistema de medición, pero normalmente, solo funciona dentro de ese software de diseño. Si quieres medir algo de, digamos, una imagen o un sitio web, o tendrías que importar esa imagen o tomar una captura de pantalla de ese sitio web importado a tu software de diseño y realizar tus mediciones. Bueno, lo que estoy a punto de mostrarte ahora funciona a nivel de sistema, lo que significa que puedes medir en cualquier parte la pantalla independientemente de qué app esté activa actualmente. Me gusta mucho esta herramienta, así que déjame mostrarte lo que puede hacer. El app en cuestión se llama PixelSnap y puedes obtenerla en getpixelsnap.com. ¿ Cómo funciona? Permítanme mostrarles un ejemplo rápido. Este vive aquí mismo en tu barra de menús, y puedes configurar un atajo de teclado para activarlo. El mío es Shift Command F. Cuando presiono “Shift Command F”, obtengo estas frías líneas rojas en mi pantalla. Digamos que quiero encontrar las dimensiones de este botón Comprar. Te darás cuenta de que en cuanto me mueva dentro del botón, los bordes de esas líneas se ajustarán a los bordes del botón y justo al lado de él, me da las dimensiones, 122 por 52. Puedo entrar aquí y va a decir que es 211 por 48. También puedo medir la distancia entre estos botones. Entonces el que busco, es por supuesto, el más pequeño. Como puedes ver, es muy, muy útil. Ahora mientras mides esta distancia, puedes mantener presionada la H para mantener esa distancia en la pantalla. Como pueden ver, aunque suelte H, esa distancia sigue ahí. Incluso puedo mover el cursor por dentro y puedo presionar “H” aquí, o puedo presionar “V”, me va a dar mi distancia vertical donde en este caso dimensión. ¿ Qué tan guay es eso? También puedo obtener una medición precisa de un objeto arrastrando un rectángulo alrededor de ellos y que se ajustará automáticamente a los bordes. Aquí me dice: “Oye, esto es 95 por 35”. Viste que cuando pasé por encima de esa medida, me da un ícono de cámara y si lo presiono, eso me da una captura de pantalla la cual puedo copiar o guardar como archivo. Incluso puedo editar esa captura de pantalla, que es bastante genial. Ahora, mientras esta herramienta está activa, puedo pulsar “Shift V” o “Shift H” para añadir una guía que se puede ajustar. Se puede ver el azul ahora es una guía, y puedo usar el cursor de mi ratón para ajustar esa guía a cualquier elemento de la pantalla. Digamos que voy a chasquear uno ahí y Shift V otra vez para chasquear otra aquí, y eso me da una medida aquí, 122 entre estas dos guías. Entonces de esto hasta el borde de la pantalla, tengo 534 y 783 para esta porción aquí mismo. También puedo mantener presionada la tecla Shift H para agregar una guía horizontal, que puedo chasquear exactamente de la misma manera así. Ahora, en cualquier momento, puedo hacer clic derecho para acceder a algunas opciones contextuales, así puedo agregar las guías aquí, puedo sostener las distancias como te mostré anteriormente. También puedo abrir la herramienta de captura de pantalla, o puedo entrar al modo de fondo. El modo de fondo, básicamente, mantiene esas mediciones en la pantalla mientras puedo seguir trabajando. Si quiero salir de eso, simplemente puedo golpear “Comando Shift F” otra vez y luego “Escapar” y salí de ello. Otra opción genial; cuando la herramienta está activa, puedo mantener presionada la tecla Shift, y eso me va a dar un modo de cruz. Sin las dimensiones, simplemente puedo usar esto para comprobar visualmente la alineación de ciertas opciones así como esa. Entonces si tomo algunas medidas, por ejemplo, voy a hacer H aquí y luego una V, y tal vez voy a guardar esta distancia aquí mismo. Puedo presionar “Command S” y eso va a tomar una captura de pantalla, y lo va a guardar en el archivo. Esa captura de pantalla contiene, y se puede ver una vista previa aquí mismo, contiene mis medidas y mis distancias, bastante impresionante. Recomiendo muy bien esta herramienta. Es súper útil independientemente de dónde trabajes. Si tienes abierto Figma, tal vez estás buceando en un diseño y quieres encontrar la distancia entre dos objetos sin seleccionar los ítems individualmente y medir dentro de esa app, simplemente puedes abrir la herramienta de medición y puedes encontrar la distancia entre los objetos muy fácilmente, o simplemente puedes hacer clic y arrastrar y encontrar las dimensiones. Esto a veces puede ser complicado porque aquí, por ejemplo, también recorté una parte de esa línea, pero probémoslo en este logotipo. Ya ves que hace un trabajo mucho mejor. Al hacer esto, hay que asegurarse de que el fondo alrededor del elemento sea aproximadamente del mismo color y no tenga otros elementos a su alrededor. Por cierto, si tienes curiosidad por este diseño, esta es una página de aterrizaje que diseñé para mi primera clase de Skillshare. Si abres mi perfil aquí en Skillshare, encontrarás la clase que te va a guiar a través del diseño de esta página completa en Figma. Ahora, como decía, puedes conseguir la app en getpixelsnap.com. Esto es para Mac, y desafortunadamente, no es gratis. Son 39 dólares por una computadora. Si ya estás usando la app CleanShot X, que es hecha por la misma empresa, obtienes un descuento. Pero también este PixelSnap, esta aplicación está disponible en Setapp. Mencioné mucho a Setapp en este curso, y voy a volver a explicar de qué se trata. Setapp es una aplicación basada en suscripciones que te da acceso a mucho software, muchas apps por un precio fijo mensual o anual, y PixelSnap está incluido en tu suscripción. Eso es PixelSnap, una aplicación fantástica para medir todo lo que quieras en tu pantalla. Es un poco de cara cara, pero si estás usando Setapp, entonces bien podrías instalarlo porque te va a ayudar mucho al diseñar o incluso al escribir código porque te va a permitir tomar esas mediciones críticas realmente rápidas y traducirlas en código CSS. Ahora, para nuestra herramienta final, vamos a echar un vistazo a una que crea capturas de pantalla o que toma capturas de pantalla. Creo que para el diseño web, esto también es muy importante porque te puede ayudar a comunicarte mejor con clientes potenciales o tus compañeros al tomar grandes capturas de pantalla. O puede ayudarte permitiéndote tomar capturas de pantalla rápidas de las cosas que te gustan. Revisaremos esa app con más detalle en la siguiente lección. Te veré ahí. 8. Capturas de pantalla: Oye. Bienvenidos todos a la clase. Esta lección es sobre la captura de pantalla. Te voy a mostrar la app que uso todo el tiempo para tomar capturas de pantalla, anotarlas, y compartirlas. Esto en realidad reemplaza la herramienta de captura de pantalla predeterminada en macOS, y aunque puede hacer todas las mismas cosas, tiene algunas características adicionales que podrían resultar muy atractivas. Déjame mostrarte la app llamada CleanShot X. Puedes encontrar la app en cleanshot.com. Es sólo para Mac. No es gratis. Cuesta 29 dólares. Está hecha por la misma empresa que creó PixelSnap, la app que te mostré en la lección anterior. Por supuesto, obtienes un descuento si también tienes esa app, o si tienes Setapp, puedes descargarla de forma gratuita porque está incluida en tu suscripción. Pero con CleanShot, básicamente puede establecer un atajo de teclado para activar. En mi caso, es Comando-Mayús-4. Te dije que esto reemplaza la herramienta de captura de pantalla predeterminada de macOS. Esto te da un punto de mira con las coordenadas x e y de tu cursor en la pantalla, y simplemente puedes hacer clic y arrastrar cualquier área de la pantalla y tomar una captura de pantalla. Esto se abre aquí mismo, y puedes copiarlo en tu portapapeles. Puedes guardarlo como archivo, o bien puedes abrir la herramienta Anotar. Aquí puedes agregar, por ejemplo, flechas, círculos. Puedes dibujar gratis eligiendo la herramienta Dibujar. Se puede hacer algo así. Puedes elegir varios colores. Entonces una vez que hayas terminado, puedes guardarlo como archivo o puedes pulsar “Done”, y eso ya está actualizado. Puedes copiarlo o guardarlo, al igual que antes. También puedes hacer clic en este pequeño botón que dice pin it en la pantalla, y puedes moverlo a cualquier parte. Se va a quedar al tanto de todas las demás aplicaciones, e incluso puedes cambiar su tamaño. Si estás trabajando en algo necesitas capturar parte de la pantalla y tenerlo ahí como referencia, para uso posterior, puedes hacerlo muy, muy fácilmente. Ahora con CleanShot, tienes un par de opciones. Puedes abrir la app haciendo clic en el icono de la barra de menús, y también puede capturar pantalla completa. Se puede capturar una sola ventana. Puedes hacer clic en esto, y eso va a hacer una captura de pantalla de toda tu ventana. También puedes capturar o hacer captura de desplazamiento. Si desea capturar el contenido de un área mientras se desplaza, puede hacerlo muy fácilmente. Digamos que quiero capturar esta zona aquí mismo. Puedo hacer clic en “Iniciar captura”, y luego puedo desplazarme. Fui un poco demasiado rápido allí. Intentemos eso otra vez. Yo puedo desplazarme. Como se puede ver en el lado derecho , captura el contenido de la página. Una vez que haya terminado, solo toca “Done”, y ahora eso salvó toda la página, lo cual es bastante genial. Con CleanShots, también puedes hacer un temporizador, y va a activar la captura de pantalla después de una cantidad de tiempo establecida. También puede grabar la pantalla, y también tienes una opción muy práctica de ocultar los iconos del escritorio. A lo mejor quieres capturar todo tu escritorio, pero no quieres que la gente vea tus iconos, puedes hacer clic en esta opción, y desaparecen. Ahora, la característica que creo que más me gusta es CleanShot Cloud. Permítanme darles un ejemplo. Digamos que quiero capturar esta parte aquí mismo. Puedo hacer clic en este botón que dice subir a CleanShot Cloud, y eso es subir. Se copia el enlace a mi portapapeles. Ahora puedo abrir ese enlace, y aquí está mi captura de pantalla. Esta es una forma muy fácil de compartir una captura de pantalla. A lo mejor estás enviando un correo electrónico a alguien y en lugar de adjuntar esa captura de pantalla al correo, solo puedes enviarle un enlace. Es así como puedes tomar mejores capturas de pantalla en macOS. Como decía, esta es una aplicación de reemplazo para la herramienta de captura de pantalla predeterminada en macOS, y si bien está un poco en el lado caro, también está incluida en Setapps. Entonces si tienes eso, entonces podrías igual que aún así porque es un muy, muy útil. Esta fue la última herramienta que quería mostrarles. Entonces para terminar esta clase, por favor únete a mí en la siguiente lección para el proyecto de clase y conclusión. Te veré ahí. 9. El proyecto de clase y conclusión: Oye, engratos por terminar esta clase. De verdad espero que haya estado a la altura de tus expectativas y que hayas aprendido algo útil. Si no lo ha hecho o no lo ha hecho, por favor házmelo saber en los comentarios. Hazme saber cómo puedo mejorar porque tu opinión me importa mucho. Además, si quieres que cubra un tema específico en una de las clases de Skillshare, por favor no dudes en avisarme. Escribe un comentario en el área de discusión diciéndome lo que te gustaría ver de mí en futuras clases. Tengo un tonelada de ideas para nuevas clases, pero lo que quieres aprender también es muy importante, así que otra vez, por favor avísame. Ahora, por favor tómese un momento y anote las claves para llevar de esta clase. Ahora por el tema de esta clase, el proyecto de clase es un poco diferente. Para ello, me gustaría que describieran su kit de herramientas de diseño web. Significa cuáles son las aplicaciones que usas para el diseño web, y cómo las usas. Haz eso con tus propias palabras, no hay plantilla para rellenar. Simplemente puedes apuntar una lista o darnos una pequeña historia para que podamos entender un poco mejor el contexto, y creo que esto servirá de inspiración y ayudará a todas las demás personas que están viendo esta clase. Porque, quién sabe, podríamos encontrar una app de la que no hemos oído hablar, y eso es súper útil. Háganos saber cómo le ayudan esas aplicaciones. Además, si tienes alguna otra pregunta o comentario, por favor ponlos en el área de discusión, tabulador, como quieras llamarlo. A mí me encantaría saber de ti. Con eso dicho, muchas gracias por ver esta clase. Espero volver a verte en la siguiente. Cuídate.