Trabajar con imágenes en proyectos de diseño UI

1. Introducción a la clase: Hey diseñador y mi nombre es Alex y bienvenido a esta clase de Skillshare sobre trabajar con imágenes en tus proyectos de diseño de UI. Soy fundador de donuts web, donde creé o 500 productos de diseño. También soy profesor y hasta el momento he creado más de 20 cursos y medio, más de 40000 alumnos inscritos en esos cursos. En esta clase, vamos a hablar de cuáles son algunas de las mejores formas para que usted como diseñador de UI use imágenes en su proyecto. Vamos a hablar de por qué las imágenes son importantes y qué debes prestar atención a la hora de elegir qué imágenes vas a usar en tus proyectos. También vamos a discutir cuáles son algunas formas para que encuentres imágenes como diseñador de UI y cómo puedes integrarlas en tus proyectos. Vamos a discutir cómo algunas imágenes pueden ser tomadas por un fotógrafo externo y cómo el cliente puede entregarte esas imágenes. Y luego vamos a comparar hallazgos adicionales como imágenes gratuitas y premium. Cuáles son las diferencias entre ellos y cuáles son algunas diferencias en la concesión de licencias de los libres en imágenes premium. También vamos a discutir la importancia de los conjuntos de imágenes, cómo elegir conjuntos de imágenes y cómo trabajar con ellos. Y luego vamos a discutir lo fácil que es para ti encontrar imágenes en diferentes nichos. Por qué son importantes diferentes nichos para encontrar tus imágenes para tus proyectos de diseño de UI y cómo puedes proceder a encontrar estas imágenes e integrarlas en tus proyectos de diseño. Entonces vamos a hablar de optimización de imágenes tanto en Mac como en Windows, por qué es importante y cómo puedes seguir adelante y proceder con estas optimizaciones de imagen. Cómo te van a ayudar en tu trabajo y cómo te van a ayudar con el trabajo con desarrolladores y cómo van a mejorar tu velocidad al trabajar con desarrolladores y sobre todo trabajar en estas herramientas de diseño como Adobe XD . Por último, vamos a discutir la estructura de nombres, por qué es importante, y cómo puedes elegir trabajar con estructuras de nomenclatura que funcionen para ti y tus desarrolladores. Tu proyecto de clase para esta clase es elegir imágenes de diferentes nichos. Te dejaré que elijas las imágenes que quieras. Estas imágenes pueden ser gratuitas o premium. Todo depende de ti. Y solo para poner estas imágenes combinadas en un solo documento, y puedes elegir un equipo y explicarlo más a fondo en el video del proyecto de clase Skillshare. Y realmente me gustará que guardes eso como JPEG y lo subas a proyecto de clase para que yo y otros alumnos los vean. Y estoy muy emocionado de ver qué se les puede llegar a ustedes. Estoy muy emocionado de compartir estos consejos y trucos contigo. Y espero verte en clase. 2. Por Por qué son importantes las imágenes: Ya sabes lo que dicen, esa imagen dice mil palabras. Bueno, es la misma historia en pinturas que en diseño, sobre todo en diseño gráfico, pero lo mismo se puede decir en diseño web y diseño AB. Por lo que elegir las imágenes correctas realmente puede determinar el ritmo que los espectadores están mirando a tu proyecto, ya sea un proyecto de app o nuestro proyecto de diseño de sitio web. También puede determinar el tono en el que está hablando con sus visitantes. Para que eso pueda ser serio o divertido, lúdico. También puede determinar el ritmo en que tus espectadores pueden mirar tu proyecto. Entonces lo que eso significa es, van a usar imágenes más pequeñas, van a usar imágenes más grandes. ¿ Vas a usar imágenes de pantalla completa para imágenes de ancho y mucho más? También van a determinar qué tan juguetón o serio es el sitio web. Y también van a determinar los colores que lo vas a usar tu diseño, porque el tono de tus imágenes va a determinar realmente eso. Porque si estás usando, por ejemplo, imágenes realmente oscuras, entonces vas a usar algunos colores, que va a contrastar mucho mejor con esas imágenes oscuras. O si estás usando imágenes realmente claras y aireadas, Dan, vas a contrastar eso usando algo mucho más oscuro. Por ejemplo, ya sea un negro oscuro o gris oscuro o verde oscuro o algo así. Por lo que las imágenes son realmente el factor clave para crear tus diseños y elegir las imágenes adecuadas para tus diseños va a hacer o romper tu diseño. 3. 3 tipos de imágenes de proyectos: Cuando se trata de imágenes de proyecto, realmente hay tres tipos principales. El número uno son imágenes apostadas por el fotógrafo. Entonces estas son imágenes que tu cliente ya tiene alguna ha llevado a nuestro fotógrafo premium que ha tomado esas imágenes en sets y creado realmente toda la historia para tu cliente, después entregar esas imágenes a tu cliente. Y entonces tu cliente te va a entregar esas imágenes y tú a su vez las vas a utilizar en tus diseños. Dos son imágenes gratis. Entonces esas son las imágenes que normalmente vas a encontrar en sitios web como Unsplash o Pixabay. Y estas imágenes aquí realmente un gran defecto y esa variedad. Entonces lo que eso significa es que puedes encontrar una gran imagen de un gran fotógrafo. Y eso es básicamente todo. lo que no se puede encontrar otra imagen, por ejemplo, modelo en una pose diferente o una puesta de sol desde un punto de vista diferente, o una calle de pueblo desde un punto de vista diferente también. Por lo que no puedes encontrar esos. Y por lo general esas imágenes no son realmente de tan gran calidad. Por lo general hay algo así como 1920 por 1080, tan full HD o al menos 2k de tamaño. Y por último, el número 3, nuestros sets premium. Ahora estos son los sitios web que puedes encontrar en línea. Por lo general, me gusta utilizar los elementos de Envato y su propia página web 2020, lo que significa que tienen más de 50 millones de imágenes para elegir. Y lo que eso significa es que estos fotógrafos premium están creando escenas. Entonces solo imagínense, por ejemplo, visto en la oficina y luego están colocando esa escena. Están colocando esa oficina. Están pagando los modelos. Y están tomando cientos de imágenes diferentes desde todos los ángulos diferentes de con diferentes modelos haciendo cosas diferentes. Y el beneficio clave de esas imágenes es que todas las toman en un ambiente controlado por un solo fotógrafo bajo una sola fuente de iluminación con los mismos modelos, con el mismo equipo en la misma sala. Entonces se te ocurre la idea. Estas imágenes se pueden utilizar fácilmente en tus proyectos. Y por ejemplo, si tienes que hacer un ligero cambio con, por ejemplo, el brillo, entonces puedes hacerlo en algo como Adobe Lightroom. Y luego puedes tomar todas esas imágenes que descargues el proyecto de cuatro años, puedes hacer un solo tweet, por ejemplo, al brillo o a la obesidad, o al viñetado o lo que sea que estés haciendo con esa primera imagen. Y quieres aplicar ese mismo cambio a todas tus imágenes. Por ejemplo, has descargado el conjunto de 50 imágenes diferentes. Entonces simplemente puedes aplicar ese primer cambio a la primera imagen y luego aplicarlo a través son muchas de tus otras imágenes de la misma colección. Simplemente puedes sincronizar esos cambios. Y por ejemplo, adobe Lightroom va a aplicar esos cambios. No tienes que usar Lightroom. Me gusta mucho usarlo porque soy usuario de Adobe. Utilizo Adobe XD, uso Adobe Photoshop, uso Premier, y por supuesto utilizo Lightroom para todas mis imágenes. Y me gustó mucho esa función, pero no es sólo en Lightroom. Lo puedes encontrar en otras herramientas y software como están ahí. Sólo asegúrate de buscarlo, pero te va a ahorrar un montón de tiempo. Entonces, ya sea que estés usando imágenes de clientes, tal vez vas a tener que retocar algunas cosas aquí y allá. Porque normalmente estos fotógrafos están tomando imágenes fantásticas, pero tal vez si estás creando diseño de sitio web para nuestro tono ligeramente más oscuro, digamos, entonces vas a aplicar algunos de esos cambios adicionalmente a esas imágenes. Por lo general a los fotógrafos les gusta dejar esas imágenes bastante crudas. Entonces, por lo tanto, los diseñadores van a hacer a su vez esos cambios. Entonces por ejemplo, Saturación, Brillo, contraste y cosas como deuda con esas imágenes. Una vez más, si estás usando imágenes gratuitas, las muertes son geniales, sobre todo para clientes de bajo presupuesto, porque realmente no les importa cómo se vea su blog. Pero si estás trabajando con clientes que tienen presupuestos razonables, entonces puedes integrar fácilmente estos conjuntos premium de imágenes en tu trabajo desde sitios como Envato Elements por ejemplo. Y yo realmente recomendaría porque se pueden encontrar millones de estas diferentes imágenes. Y a su vez, van a hacer que tu trabajo se vea mucho más profesional, mucho más pulido que si solo estás usando estas tres imágenes. 4. Cómo elegir las imágenes de nodos: Hay muchas maneras diferentes para que elijas imágenes de nicho, pero solo te voy a dar algunos consejos y técnicas sobre cómo lo hago y cómo lo he hecho en los últimos casi 20 años. Entonces dependiendo del nicho en el que estés trabajando, hay cierto tono. Entonces, por ejemplo, si estás creando un sitio web para trajes de hombre, por ejemplo, hay una buena posibilidad de que, ese es un sitio web de aspecto premium. Y están tratando de retratar un tono de profesionalismo, de un diseño limpio, de cierto estilo de vida que esos trajes van a retratar. Entonces obviamente no vas a usar algo como amarillo brillante o unas puertas rojas brillantes y deleite que sin duda vas a usar. Estos color gris claro son colores gris oscuro, posiblemente un toque de azul, tal vez incluso dorado pocos lugares si estás trabajando contra el color negro. Por lo que te va a permitir destacar, obviamente colores blancos. Entonces, cuando elijas tus imágenes, asegúrate de tener esas cosas en mente porque no vas a elegir tus modelos contra este fondo amarillo y contra el fondo, lo que va a arruinar el look de tu traje. Obviamente, te vas a ajustar al tono. Entonces lo que eso significa es que vas a buscar modelos que estén en estas posiciones sobre, por ejemplo, fondos blancos adecuadamente expuestos porque va a ser mucho más fácil para ti integrar esas imágenes en tu trabajo. También modela contra el fondo negro porque puedes usar algo así como una obesidad de pantalla y luego puedes reducir ese fondo negro contra tu diseño. Por lo tanto, puedes extraer fácilmente tu modelo de tu fondo y adaptarlo fácilmente a tu diseño. Entonces este es obviamente sólo uno de los ejemplos. Asegúrate de establecer el tono y ver qué tono es tu nicho. Entonces, por tanto, vas a buscar imágenes que estén en ese nicho y en ese pueblo, lo cual es realmente importante porque tus visitantes se van a alinear mucho más fácilmente si ven cosas que entienden, bien el cosas que no hacen. Entonces, por ejemplo, volvamos a ese ejemplo de traje. Imagínate que eres este caballero que busca un traje para tu boda, por ejemplo, o para la boda de tu amigo o algo así. Y estás buscando realmente de clase alta, algo realmente de lujo, algo realmente caro, porque quieres aparecer para ese día y quieres lucir bien. Después visitas este sitio web, que es todo gritando colores y todo, no sé, rojo, verde, azul. No te da ese sentimiento. No te da esa toallita ni la página web que está vendiendo estos costosos trajes. Entonces algo no se va a sentir bien. ¿ Algo va a quedar bien? Quizás a primera vista no lo vas a pensar demasiado. Pero a medida que comienzas a navegar, obviamente vas a notar que algo no es bueno aquí. No te va a dar esa confianza para comprar ese traje, porque no te está dando esa vibra que normalmente esperas de la página web del suit. Después vas a la página web de los competidores, que tiene todas estas cosas de las que hablamos para este ejemplo en particular, te vas a sentir mucho más como en casa ahí. Te vas a sentir mucho más cómodo con tu decisión de compra y te vas a sentir mucho más como en casa, por así decirlo, porque tus expectativas las cumple este sitio web en lugar de este sitio web anterior con todos esos gritando colores. Entonces es por eso que es realmente importante cuando estás eligiendo imágenes, asegúrate de elegir imágenes de nicho, que tu público se va a relacionar fácilmente. Por lo tanto, tu sitio web a cambio va a ser mucho más relacionable con tus usuarios y aplicaciones móviles así para el caso, porque tus usuarios van a reconocer estas pistas, estas imágenes, estos colores, estos estilos, porque están acostumbrados a ellos. Entonces, no intentes experimentar demasiado e ir salvajemente con tus imágenes. Asegúrate de atenerte a lo que sabes y asegúrate de atenerte a lo que funciona, que es lo más importante. Después de todo, asegúrate de que tus usuarios se sientan cómodos cuando visitan tu sitio web o una aplicación móvil. Porque a cambio, eso va a traer más conversiones. 5. VS Premium gratuito: En este video, te voy a mostrar algunas diferencias principales cuando estás buscando imágenes tú mismo. Por lo que estos son los ejemplos cuando tu cliente no tiene ninguna imagen. Por lo que hay que buscar imágenes para ese proyecto en particular. Y te voy a mostrar algunas diferencias clave entre las imágenes gratuitas y premium y lo que se supone que debes buscar cuando estás navegando por imágenes. Entonces aquí tenemos nuestra página web llamada Unsplash.com, que suele ser lo que estos diseñadores están usando hoy en día. Y también hay pixabay.com y muchos de estos otros sitios web. Pero por lo general Unsplash y Pixabay son los sitios web que típicamente van a buscar. Entonces si escribimos un traje, por ejemplo, como te mostré en ejemplos anteriores, y como hablamos en el video anterior, solo te voy a mostrar y comparar diferencias entre sitio web gratuito y premium. Entonces como dije, tenemos un traje aquí mismo y voy a copiar este texto y voy a venir a este sitio web que está en elementos vitales, que es una página web premium. Y simplemente lo voy a pegar aquí mismo. Busca las fotos, pero puedes buscar todas estas cosas diferentes. Entonces video stock, plantillas de video, música, efectos de sonido, plantillas gráficas como placas de impresión y UI, UX kids, presentación gráfica, dopantes, fotos, fuentes y plantillas web de respuesta, 3D y mucho, mucho más. Por lo que nos adaptamos en traje. Y también hay este sitio web llamado 2020 ancho, 50 millones de imágenes adicionales. Sí, eso son 50 millones de imágenes adicionales. Y todas esas imágenes son realmente de alta calidad subidas por todos estos fotógrafos independientes. Entonces si vamos a esa página web que es 2020 stock y tipo de traje aquí mismo. Por lo que tenemos exactamente la misma consulta de búsqueda en todos estos sitios web. Y lo que tenemos justo aquí en Unsplash es cuando flotamos, tenemos esta carrera de cazadores. Tenemos otro fotógrafo, no somos ni fotógrafo, otro fotógrafo. Por lo que todos estos son fotógrafos diferentes. Entonces vamos con, vamos a ver, este es Benjamin Roscoe así como este tipo. Visitemos su perfil. Como puedes ver, están tomando imágenes o skylines, bares, ríos, detalles. Aquí mismo tenemos algunas imágenes de esta persona en traje. Pero eso es básicamente lo es. Se puede ver que sólo tenemos tres o cuatro imágenes diferentes. Y una vez más, estas imágenes de barras todo el camino hacia abajo. Una vez más, si hago click en esta imagen, por ejemplo, lo que tengo aquí mismo es que puedo dar click, Read More para ver todos estos diferentes detalles. Y puedo teclear la info y podemos ver que la cámara es Sony, ISO 400. Y estas son las dimensiones. Por lo que estos en realidad son bastante buenos en esta etapa. Y puedes ver cuántas descargas y vistas tuvo esta imagen. Pero si volvemos atrás y hacemos click en esta imagen, por ejemplo, entonces ve a info. Se puede ver que son cinco K. Pero una vez más, tenemos el mismo problema. Entonces cuando hago clic en este perfil, por ejemplo, se puede ver que sí tenemos estas muchas imágenes diferentes, pero Solo hay una imagen de un traje. Entonces imaginemos que quieres usar este color particular del traje, por ejemplo, y quieres usarlo en este entorno. Entonces digamos que en el interior contra estas escaleras y cosas así. Por lo que solo puedes imaginar que tu modelo va a ser fotografiado en interiores. Por ejemplo, digamos dentro del centro comercial, haciendo un viaje de compras o el domingo yacen muerto. Por lo que hay que encontrar imágenes de esa naturaleza. Bueno, esto es solo una imagen y básicamente estás atascado. No tienes ninguna otra opción. Entonces si volvemos y echamos un vistazo a todas estas otras imágenes de un traje. Como se puede ver, no hay mucho más. mejor hay éste, lomejor hay éste, pero tiene dentro un árbol de Navidad. Entonces no va a funcionar para todas tus ocasiones. Y como puedes ver, aquí no hay mucha opción para tu proyecto en particular. Por lo que podemos ir a algunos de estos sitios web y podemos encontrar algo que nos va a funcionar. Entonces digamos que este es el centro comercial y esta es la tienda dentro del centro comercial. Entonces vamos a abrir eso dentro de una nueva pestaña. Notemos rápidamente que esto es de ocho K de tamaño, por ejemplo. Y puedes leer más esta información. Podrás aprender más al respecto. Y podemos ver que son cuatro, requiere taller de diseñador de sastrería. Pero si me desplazo aquí, se puede ver que todo es de la misma serie. Para que se pueda ver este mismo modelo, mismo tipo de fondos, misma iluminación, mismo fotógrafo. Por lo que se puede ver sobre las imágenes es un fotógrafo. Entonces todos ellos, y lo que es genial de ello es que si hago clic, Ver más y abro en nueva pestaña, se puede ver cuántas de estas diferentes imágenes tenemos. Por lo que claramente puedes elaborar una historia a partir de todas estas imágenes. que puedas empezar en tu página, por ejemplo, dando la bienvenida a tu usuario a tu tienda, después explicándoles la calidad de tus trajes y cómo se hacen, cuánto tiempo tarda cada persona en ver un botón en particular, por ejemplo, y cosas así. Por lo que realmente puedes acercar los detalles con estas imágenes porque son de calidad 8 K y son realmente enormes. Después puedes contarles cómo va a funcionar el ajuste cuando trataron de adaptarse, cómo los hace sentir. Cuándo fueron los materiales para el traje son de origen y mucho más. Para que puedas hacer eso con estas imágenes premium. Realmente puedes contar una historia en lugar de solo mostrar una imagen singular. Lo que eso va a hacer es que va a hacer que tu sitio web se vea mucho más profesional, mucho más pulido. Porque una vez más, puedes sumergir a tu espectador en esa experiencia porque tienes todas estas diferentes imágenes del mismo conjunto. Entonces echémosles un vistazo una vez más. Se puede ver que están bebiendo café. Tenemos ajuste justo aquí. Tenemos pruebas del material. Tenemos ajuste justo aquí. Tenemos, por ejemplo, acuerdo aquí tenemos algunos materiales diferentes. Tenemos cómo va a encajar el ti. Por lo que se puede ver claramente sólo de un ejemplo solo para este traje, cuántas de estas diferentes imágenes tenemos. Por lo que solo puedes imaginar acercando estos detalles y cuánto puedes hacer realmente con todas estas diferentes imágenes en lugar de solo con una sola imagen. Por último, aquí podemos hacer lo mismo. Entonces si escribo en traje y lo abro, tienes estas diferentes colecciones y dentro de estas colecciones. Entonces si los abro, pueden encontrar diferentes fotógrafos. Entonces, por ejemplo, me gusta mucho este traje. A lo mejor puedo entrar y buscarlo, o tal vez incluso pueda echarle un vistazo a este. Entonces estas son las colecciones. Podrás abrir estas colecciones de estos diferentes fotógrafos y luego podrás explorar imágenes adicionales. Entonces aquí tenemos esta imagen y este modelo. Entonces si hago clic aquí y abro sus colecciones, tenemos estas diferentes fotos, tenemos diferentes lóbulos, tenemos todas estas cosas diferentes aquí mismo. Para que podamos explorar y ver todas las imágenes de este fotógrafo. Se puede ver claramente que tenemos un montón de estas diferentes imágenes. Pero una vez más, si no te apetece 2020 y todas estas imágenes diferentes, siempre puedes volver a los elementos de Envato porque estos dos son parte de la misma colección. Entonces cuando consigas esta suscripción a Envato Elements, que es una suscripción anual, esto se va a incluir. Entonces si no puedes encontrar una imagen aquí, entonces tal vez puedas probar el 2020. puede ver lo dice por Envato. Por lo que esas son solo algunas comparaciones diferentes entre imágenes gratuitas y pagadas. Tan solo asegúrate de entender que no puedes hacer trabajo profesional de alto pulido con imágenes libres por estas limitaciones que acabo de mencionar, tienes que usar activos profesionales como imágenes de, para ejemplo, Envato Elements. No tienes que usar elementos de Envato. Son un montón de sitios web diferentes por ahí. Pero porque como te mostré lo que está incluido dentro de tu suscripción, me gustan mucho y los uso todos los días para mis proyectos. Esto a cambio va a hacer que sus proyectos vean mucho más pulidos, mucho más profesionales. Y si estás tratando de venderte tu diseñado a tu cliente, por ejemplo, si estás tratando de lanzarlos, son diseñar una DEA, un cambio de diseño, un rediseño completo, o el domingo mentira muerta. Hacer eso con estas imágenes profesionales y pulidas va a ser mucho más sencillo que simplemente abofetear algunas imágenes diferentes de diferentes fotógrafos con diferentes exposiciones, con diferentes modelos en una página y luego tratando de venderlos muertos. 6. Optimización de imagen: Una parte clave más cuando estás creando proyectos usando estas imágenes, especialmente estas enormes imágenes, es la optimización de imágenes. Lo que eso significa es que el software de su elección va a reducir el tamaño de la imagen, que a su vez va a subir mucho más rápido al servidor, por ejemplo. que a su vez vaya a cargar su sitio web mucho más rápido y dándole un mejor ranking de Google, lo que significa mejor SEO. Entonces básicamente esta optimización SEO es extremadamente importante, sobre todo en proyectos de diseño de un sitio web, en proyectos de diseño móvil, Es realmente importante también, sobre todo si estás sacando de la misma base de datos. Por lo que optimizar tus imágenes va a dar a tus usuarios mucha mejor experiencia sin perder ninguna calidad de estas imágenes originales. Entonces si te llevo otra vez aquí mismo a Envato Elements. Y luego se puede ver, por ejemplo, esta imagen que estábamos mirando previamente. Entonces como puedes ver, casi 8 K de tamaño. Entonces cuando golpee descarga, va a sacar todos estos proyectos de clase diferentes. Entonces por ejemplo, voy a llamarlo Proyecto de imagen, o nuestro proyecto de imagen, por ejemplo. Y simplemente puedo crear este proyecto. Ahora lo que esto significa en Envato Elements es que puedo sumar todos estos diferentes elementos a este proyecto en particular. Por lo que te puedes imaginar que voy a usar todas estas diferentes imágenes. Voy a usar diferentes iconos, tal vez incluso un tema de WordPress. A lo mejor necesito algo de música de mis videos. Por lo que todos esos diferentes artículos que descargaste de Envato Elements simplemente puedes poner en este proyecto que creamos. Justo ahora, lo que esto significa es que va a ser mucho más sencillo para tus clientes licenciar todos estos artículos en caso de que tal cosa sea necesaria. Entonces, por ejemplo, puedes usar una suscripción para número ilimitado de clientes en cada cliente puede tener sus propios proyectos, lo que significa que las licencias pueden ser tan simples como simplemente copiar una licencia y luego enviarlas a tus clientes y peligro y van a contener esta licencia y se la van a quedar. Por lo que no es necesario que actualices estas licencias cada año. Básicamente, una vez que lo pagues, una vez que lo descargues, Eso es todo. Por lo que puedes licenciar fácilmente todos estos diferentes elementos, incluyendo imágenes en Envato Elements para tus proyectos. Entonces si volvemos a aquí, simplemente puedo hacer clic en nuestro proyecto de imagen para crear este proyecto. Entonces simplemente puedo agregar y descargar. Y se va a empezar a descargar aquí mismo. Ahora se puede ver que esta imagen es bastante enorme. En realidad tiene casi 18 megabytes de tamaño. Por lo que una vez descargada, ahora es el momento de optimizar nuestras imágenes. Ahora, la optimización de imágenes no es nada realmente nuevo. Lo hacen los desarrolladores desde hace décadas y los diseñadores desde hace algunas décadas también. Básicamente lo que es, es que simplemente va a reducir el número de píxeles dentro de tu imagen. Va a contener el tamaño de tu imagen va a contener nitidez, va a contener calidad. Pero a su vez, te va a dar un tamaño de archivo mucho más pequeño porque todas estas diferentes cámaras simplemente están agregando el tamaño del archivo, especialmente dependiendo de la lente que estés usando y del modelo de cámara que estés usando. Entonces, para no aburrirte con demasiados detalles, te voy a mostrar eso en la práctica. Entonces porque estoy en Windows, estoy usando algo llamado motín. Y si estás en un Mac, puedes usar algo llamado imagen óptima de un archivo vivido un PDF. Y simplemente puedes hacer clic en el enlace para descargar el que necesites anual quieras. Y hay muchas herramientas diferentes por ahí para ambos sistemas operativos, tanto Windows como Mac. De verdad todo depende de ti decidir cuál quieres elegir. Yo elijo, ¿verdad? Y lo uso desde hace años y funcionó bien para mí. Entonces si te llevo de vuelta, simplemente puedes ver cómo se ve el motín. Y ahí está. Es realmente una herramienta básica y realmente quieres que puedas aprender fácilmente a usar y básicamente lo que hace. Se, tiene estas dos Windows y si arrastro y suelto mi imagen dentro, así que esta es la imagen que hemos elegido. Puedes ver que puedes abrir imagen, puedes importar imágenes por lotes, lo cual una vez más es realmente importante, sobre todo si estás trabajando con estas colecciones. Por lo que no perder tiempo. Imagínate que tienes, por ejemplo, 50 imágenes diferentes que lo descargues. Y esa es la gran ola. Por ejemplo, de Envato Elements. Es posible que ni siquiera uses todas estas imágenes, pero es genial porque están ahí. Simplemente puedes seleccionarlos todos, descargarlos todos, ponerlos en una misma colección, y ahora optimizarlos todos usando, correcto, por ejemplo. Entonces aquí mismo simplemente voy a usar una imagen. Y lo que voy a hacer es dar click y arrastrarlo hasta aquí. Entonces una vez que se cargue, me va a sugerir esto. Por lo que este archivo contiene una imagen de alta resolución. Rad puede manejar este tipo de imágenes, pero el procesamiento puede ser bastante lento en esta situación. Quieren redimensionarlo para nosotros. Se recomienda que no se modifique la imagen original. Así que solo observa lo que iba a pasar cuando haga clic en Sí. Nos va a dar este tamaño original. Entonces lo va a escalar nuevo tamaño, 100 por 100. Por lo tanto, mantén la relación de aspecto. Esto es en porcentaje porque se puede ver aquí mismo y se puede bajar a píxeles específicos. Pero te recomendaría que te mantuvieras este porcentaje por igual. Entonces n va a simplemente pensar donde abajo básicamente al 100%. Lo que esto significa es que cuando hago clic en Aceptar, se puede ver la imagen inicial aquí mismo. Por lo que 17.5 megabytes de tamaño, y la nueva imagen es de 3.4 megabytes de tamaño. Ahora se va a cargar mucho más lento. Por lo que cuando hago clic aquí y paso el cursor, se pueden ver 17.5 megabytes. Y esta es la imagen aquí mismo. Pero cuando lo optimice, va a ser 3.4. Entonces cuando golpeo guardar aquí mismo, sí quiero reemplazarlo. Yo quiero teclear sí. Finales básicamente van a reemplazar esta imagen. Entonces cuando haga clic ahora y pase el cursor 17.5 megabytes, así que déjame refrescarlo. Y se puede ver que son 3.4 megavatios. Entonces básicamente empezamos con 17.5 megabytes. Ahora estamos en 3.4 megabytes. Y lo que es más importante de todo, si yo rondo aquí mismo, se puede ver 79, 52 con 53, 04. Y si lo llevamos de vuelta a aquí, se puede ver que estas no son exactamente las mismas dimensiones que eran con la imagen original. Simplemente reduce el tamaño de la imagen sobre todo. Entonces lo que esto significa para ti básicamente va a dar a tus desarrolladores mucho más espacio de juego porque reducirás estos tamaños de archivo, puedes ir aún más lejos. Por ejemplo, estoy usando Adobe XD a diario para diseñar todos mis proyectos. Por lo que se puede imaginar que voy a poner esta imagen AK en algo que es, Vamos por ejemplo, digamos 1920 por 1080. Y luego lo voy a exportar desde el exilio en esa resolución en particular. Por lo que 1920 para 1080, lo que va a reducir aún más el espacio requerido. N va a reducir aún más el tamaño de esta imagen. Entonces se podría decir, ¿por qué no simplemente usarlo así de inmediato? Bueno, porque estás metiendo todas estas enormes imágenes en tu software de elección. En mi caso, Adobe XD va a rezagarse masivamente porque estos son archivos enormes como viste. Por lo que sólo esta imagen en particular por sí sola es de 17.5 megabytes. La mayoría de mis archivos son alrededor de 20 megabytes. Por lo que solo puedes imaginar el archivo de diseño completo es de 20 megabytes, y esta solo una imagen es de 17.5 megabytes. Así que solo ten en cuenta esas cosas cuando estés creando, especialmente para web, porque estás tratando de hacer que Google Optimice este sitio web. Y estás tratando de hacer que tantas personas encuentren este sitio web como sea posible. Por lo que es realmente importante para ti optimizar estas imágenes. Y cuando estás trabajando con proyecto de diseño móvil, también es importante porque entonces el sistema operativo y la propia app, no va a sacar todas estas enormes imágenes de la base de datos solo va a sacar una imagen singular que es bastante pequeño en tamaño. Y todavía va a contener esta enorme deuda de calidad originalmente lo tenía ido fotógrafo, tomó esa imagen. 7. Estructura de nombres: Igual que con la optimización de tus imágenes, es realmente importante nombrar tu imagen es correctamente porque de esa forma se van a mostrar correctamente en tu sitio web o en tu aplicación móvil. Va a ser mucho más sencillo para tus desarrolladores encontrar estas imágenes, para incluirlas en código. Y va a ser mucho más sencillo que el código saque estas imágenes de las bases de datos. Entonces déjame solo mostrarte lo que quiero decir en la imagen que acabamos de descargar. Entonces si echamos un vistazo a esta imagen, seguí adelante y la descargué de nuevo en el mismo proyecto. Para que puedas ver el nombre hasta el año, dash PA a las máquinas virtuales, C4 o lo que sea. Y esta es la reducida la imagen. Entonces como puedes ver una vez más, 17.5 megabytes, tan original tamaño y puedes ver el título aquí mismo. Y si me llevo tu derecho aquí, puedes ver que tenemos un nombre como ese. Entonces qué podemos hacer con esta imagen porque se va a llevar a nuestro software de elección. En mi caso, Adobe XD. En tu caso, podría ser Sketch figma Photoshop Illustrator realmente no importa. Entonces lo que puedes hacer con esta imagen es que puedes hacer clic derecho sobre ella y renombrarla de esa manera. De esa forma, cuando lo arrastras y lo sueltas en tu software de elección, Se va a recordar ese nombre y luego cuando lo exportes, lo va a exportar así. Otra cosa que puedes hacer es ir a algo como Lightroom por ejemplo, y puedes agregarle metadatos de esta imagen en particular, cual te va a dar mucho más detalle sobre cuándo está esta imagen, se ha filmado con qué cámara con qué lente, con qué exposición y así sucesivamente. Por lo que esto podría ser requerido de ti si estás trabajando en algún tipo de proyecto de diseño gráfico, por ejemplo, para editoriales y cosas como papá, sobre todo si esa imagen va a entrar en impresión en enormes lienzos. Por lo que algunos enormes clientes de gama alta van a requerir toda esa información para él, tú. Así que solo asegúrate de entender que no importa en qué tipo de proyecto estés trabajando, hay algunos requisitos de ti, pero para la mayoría de estos proyectos web y proyectos de diseño de aplicaciones, simplemente renombrar tu archivo va a ser bueno suficiente. Entonces si te llevo otra vez aquí mismo a nuestra imagen, lo que puedes hacer es solo imaginar que esta imagen, por ejemplo, se va a ubicar en tu sección de héroes. Lo que puedes hacer es hacer clic derecho en Cambiar nombre y simplemente llamarlo héroe, IMG. O si eres un desarrollador quiere agregar guiones, entonces agrega héroe, dash, IMG, o subrayado como este. Por lo que aquí subrayamos IMG. Por lo que esto realmente depende de desarrollador a desarrollador. Entonces cuando estás iniciando tu diseño, si tienes acceso a la información de contacto de tus desarrolladores, tal vez simplemente pregúntales esto o simplemente pregúntale a tus clientes para que puedan preguntarle a tu desarrollador. Entonces esto a su vez va a ser mucho más rápido para ti cuando comiences a crear para que puedas cambiar el nombre de todas estas imágenes y activos, por ejemplo, como iconos en ilustraciones antes de empezar a trabajar, luego más tarde cuando empieces a trabajar. Y luego tienes que cambiar el nombre de todos estos archivos una vez que realmente los incluyas en tu software de elección. Sé que en Adobe XD es realmente un dolor enorme cuando incluyes imágenes como con este nombre vio hasta la flecha, 58 a lo que sea. Y luego cuando intentas exportarlos a tu escritorio y quieres enviarlos a nuestros desarrolladores, entonces tienes que cambiar manualmente el nombre de todos ellos en tu carpeta de exportación, por ejemplo. Y sobre todo si los compartes con algo como el ardiente, por ejemplo, con tus desarrolladores, entonces tienes que renombrarlos en Zeplin. Entonces es realmente un ajetreo. Si puedes cambiar el nombre de todas tus imágenes o al menos algunas de tus imágenes por adelantado, porque de esa manera va a ser mucho más simple para que diseñes y además asegúrate de preguntar a tus desarrolladores qué tipo de abreviatura a día como. Además, si tú, por ejemplo, estás usando esta imagen de héroe y solo imagínate entonces si te llevo aquí mismo, quizá esto va a ser sobre nosotros. Este va a ser producto 1, esto va a ser la sección uno del blog. Esto va a ser testimonial uno o lo que sea. Asegúrate de cambiar el nombre de todas tus imágenes correctamente. Entonces, por ejemplo, si eres un testimonial tiene cuatro imágenes, entonces pregúntale a tu desarrollador sobre la abreviatura. Entonces por ejemplo, guión testimonial uno, testimonio, guión dos, guión tres, guión cuatro y lo que sea o subrayado o sin guiones, guiones bajos y así sucesivamente. Por lo que sólo testimonial para todos ellos combinados. Asegúrate de preguntarles, ¿les gustan las tapas, Bloq Mayús activado. Pero la mayoría de los desarrolladores no. la mayoría de los desarrolladores al menos que conozco, les gusta usar imágenes con letras pequeñas y números para que no les guste que sean gorras se vean por ejemplo. Entonces estos son solo algunos consejos y técnicas que me gusta compartir con ustedes chicos porque creo que va a mejorar su tiempo con estos proyectos masivamente, y va a mejorar la calidad de su entrega a sus clientes masivamente. 8. Tu proyecto de clase: Tu proyecto de clase para esta clase es crear algún tipo de combinación de imágenes para que puedas usar ya sea imágenes gratuitas o premium. De verdad todo depende de ti. Lo que solo quiero que hagas es usar tu software favorito de elección. Para que puedas usar Photoshop, Illustrator, XD, sketch, Figma, cualquier software que estés usando, tal vez hasta Canva, si eso es lo tuyo y eres como usar Canva. Pero básicamente lo que quiero que hagas es crear un proyecto propio, usando tus propias imágenes para que esas puedan ser ya sea imágenes gratuitas de sitios web como Unsplash o Pixabay, imágenes premium de sitios web como Envato Elements y me gusta te mostró, básicamente lo que quiero que hagas es crear imágenes que se relacionen entre sí. Por lo que eso puede ser ya sea en color o en clase o en estilo, o en formato básico o cualquier otra cosa que quieras. Entonces como por ejemplo, te mostré con el ejemplo de TI, quizá puedas usar algo con esos trajes. A lo mejor puedes combinar colores de los trajes juntos solo para poner algún tipo de ánimo para ese proyecto en particular tuyo. Puedes usar imágenes de autos y puedes usar un estilo particular de auto. Entonces, por ejemplo, si quieres un lujo, entonces vas a usar limusina. Y por lo general esas limusinas son de color negro. Pero aún más lejos de eso, ¿está ese auto en la carretera, está estacionado ese auto, por ejemplo, en algún veloz en su lugar como Mónaco por ejemplo? O alguien sale de ese auto como celebridad. Así que solo asegúrate de prestar atención a esos tanques. Elige el nicho que quieras, el formato que quieras. Pero lo que quiero que hagas es juntar todas esas imágenes. No tiene que ser muchos. Puedes usar 56 imágenes, algo que hice tonta para ponerlas en un solo documento. Puedes usar tamaño A4 o carta si eres de EU. Simplemente ponlos juntos, lo salvó como un JPEG y subirlos a tus proyectos de clase Al viejo Lu le gusta ver qué se les puede llegar a ustedes chicos. Y me interesa mucho ver ¿cómo optimizan estas imágenes para sus proyectos y cómo crean estos looks y se sienten para sus propios proyectos personales? Porque una vez más, me interesa mucho ver en qué se pueden llegar ustedes chicos y puedo esperar a verlos en su clase, proyectos. 9. Outro: Entonces ahí vamos. Hemos llegado al final de la clase. De verdad espero que te haya gustado esta clase y realmente espero que vayas a escoger algunas cosas aquí y allá sobre optimizar tus imágenes, sobre elegir tus imágenes, ponerlas en estas diferentes categorías, en estas diferentes colecciones y cómo vas a seguir adelante con tus proyectos son realmente animarte a revisar el archivo léame porque voy a poner algunas cosas en ese PDF. Simplemente puede hacer clic en los enlaces. Te llevará a cualquier enlace al que quieras acudir. Y realmente espero que vayas a usar al menos estas herramientas de optimización de imagen porque realmente creo que van a transformar tu trabajo. Y básicamente van a mejorar tu relación entre tú y tus desarrolladores porque les vas a gustar mucho más. Porque optimizas todas estas imágenes y les ahorraste un montón de tiempo que perderían. De lo contrario, realmente espero que ustedes vayan a tomar nota. Y la próxima vez que empieces a seleccionar estas imágenes, ponlas en sets y asegúrate de que estén usando el mismo tono, usando los mismos colores, están usando el mismo modelo, misma iluminación. Porque solo eso va a traer mucho más profesionalismo a tu diseño y va a hacer que destaque y tus clientes simplemente te van a querer por ello. Entonces gracias una vez más por ver esta clase y realmente espero ver tu trabajo dentro del proyecto de clase y hasta la próxima vez, cuídate.