Diseño de íconos para aplicaciones de lanzadores para dispositivos IOS (iPhone) y Android

1. ¿Qué cubriremos en este curso?: En este curso, vas a aprender a crear aplicaciones impresionantes y de aspecto fresco e iconos de aplicaciones de lanzador para dispositivos Android e iOS. Ahora vamos a crear todos los diferentes tamaños de iconos de aplicaciones desde dispositivos pequeños y dispositivos grandes y dispositivos tetra, 3x, 2x y 1x. Esto va a ser automáticamente. Necesitas solo aprender a usar las plantillas que te voy a mostrar. Necesitas algo de la experiencia con el uso de Photoshop e Illustrator. Veamos qué vamos a cubrir en este curso. Ahora déjame mostrarte lo que realmente estaremos haciendo en este curso. En primer lugar, vamos a diseñar el icono de la aplicación iOS, que será nuestro icono de buzón y vamos a generar todos sus diferentes tamaños requeridos para diferentes dispositivos iOS. Entonces vamos a pasar a los iconos de la aplicación Android y vamos a generar un icono de aplicación de hidratación muy bonito y de aspecto fresco. En realidad estaremos diseñando a diferentes temas para ello. Uno es este corazón uno y el segundo es este icono de la app de cristal. Durante este curso también te voy a mostrar cómo se me ocurrió bocetos tempranos de esta app de hidratación y cómo vas a usar la misma técnica para conseguir que algunas ideas corran y que fluyan jugos creativos. Entonces al final, también vamos a diseñar algunos maquetas móviles para mostrar a nuestros clientes porque a los clientes no les van a gustar simples iconos llanos. Entonces les vamos a mostrar algo fresco. Ahora la pregunta es, ¿por qué necesito aprender esta habilidad? ¿ Cuál es la demanda del mercado de esta habilidad? La demanda del mercado es, déjame mostrarte solo dos webs y esta es 99designs sitio web del concurso. Se pueden ver allí diferentes concursos para el diseño de iconos de la aplicación que van desde $200 hasta $999. En el medio hay 600 dólares por solo un ícono de la aplicación. Se puede ver por aquí, son iconos simples y el precio es, se puede ver por aquí $999. Entonces tenemos este Envato Studio y están ofreciendo diferentes diseños de iconos de app con diferentes rangos de precios. Se puede ver por aquí en $150, $65, $200, $300, $390. Por lo que el promedio es casi por encima de los $100. Puedes ganar fácilmente $100 en tan solo una o dos horas. No es muy difícil. Sé que ya estás convencido y realmente necesitas iniciar este curso, así que empecemos y diseñemos algunos iconos de aplicaciones de aspecto impresionante. 2. Por qué necesitamos íconos de App: Entonces hablemos de por qué realmente necesitamos un icono de aplicación. icono de la aplicación es lo primero que va a mirar tu usuario de la app. Por lo que si quieres un buen impacto inicial en tus usuarios, debes tener un ícono de aplicación muy bonito y elegante. Ahora, los malos iconos es una de las tres grandes razones para los rechazos de aplicaciones. Por lo que realmente necesitamos un buen icono de aplicación para evitar cualquier rechazo. Ahora, desde el punto de vista de la venta, un buen icono de la aplicación es un imperdible. Si realmente quieres vender tu app, nadie se molestará en descargar tu app o incluso mirarla si el ícono de tu app es cojo y patético. Entonces todo se trataba de por qué realmente necesitamos un icono de aplicación guapo. Pasemos a la siguiente conferencia. 3. Qualities de íconos de aplicaciones: Ahora, hablemos de pocas cualidades de buenos iconos de aplicaciones. Ahora, lo primero es lo primero, tus iconos, los iconos de las aplicaciones deben ser fácilmente reconocibles. Cualquiera puede distinguirlo fácilmente de cualquier otro icono al instante y fácilmente. Conoce tus iconos deben ser fácilmente memorables, y si alguien te juega un juego o te descarga una app, al instante ven y dicen: “Oh sí, he usado esta app una vez, es una aplicación muy bonita”. Deben ser estéticamente atrayentes. Si se ven horribles y feos, no creo que nadie vaya a mirarlos ni siquiera a descargarlos. Tu icono de aplicación debe sobresalir de la multitud. Por lo que la gente navegando, la tienda de aplicaciones o tratando de descargar tu app, usa y descarga tu app en lugar de las otras apps similares. Este es un punto muy importante, que es el icono de tu app debe ser simple y debe usar una formas y colores muy simples. Eso se trata de cualidades de un buen icono de la app. Ahora, debemos pasar a la siguiente conferencia. 4. Dontos de diseño de íconos de la aplicación: Hablemos de algunas de las que no se hacen del diseño de App Icon. He enumerado algunas cosas aquí de las pautas del IOS por Apple, así que hablemos de ellas. Regla Número 1; nunca intentes poner texto en tus Iconos, porque como tus iconos se van a hacer más pequeños, los textos seremos ilegibles. Por lo que no tiene sentido poner muchos textos sobre los iconos de tus aplicaciones. Si intentas usar muchos objetos en una sola pieza de icono de aplicación pequeña, estás regalando muchos puntos de enfoque en un diseño. Solo distraerá los ojos de tus usuarios, y esta no es una muy buena práctica de diseño, así que intenta evitar eso. No utilices colores aburridos en el diseño de iconos de tu app. Nuestros ojos descuidarán esos colores apagados así que trata de evitarlos. No diseñes los iconos de tus apps solo para las pantallas grandes, o los últimos dispositivos IOS. Al diseñar iconos de aplicaciones, siempre tenga en cuenta todos los demás dispositivos más pequeños también. Nunca intentes usar la foto de tu propia mascota como icono de aplicación, ni alguna foto que tomaste hace unos años. Podrían desorientar a tu usuario, y es posible que no retraten lo que realmente hace tu aplicación. Evita hacer iconos que tengan un aspecto similar a los iconos de aplicaciones predeterminadas de IOS. Esto creará mucha confusión en la mente de tu usuario. Este es un poco técnico; evita la transparencia en cualquier icono de aplicación IOS que diseñes, luego intentas subir tus iconos de aplicación a la tienda de aplicaciones. No hay soporte para PNG, ni archivos transparentes. Si quieres leer más al respecto, incluiré el enlace en los recursos para lineamientos de diseño del IOS. Trata de leer a fondo esa directriz de Apple IOS sobre los iconos de las aplicaciones, para que puedas diseñar algunos iconos de aplicaciones de aspecto impresionante, y no repitas los errores que muchos diseñadores cometen en estos días. 5. Diseñar Icon de la aplicación: Hablemos de lo que realmente necesitas hacer mientras diseñas iconos de aplicaciones. Colores vibrantes y nítidos agarra el ojo del usuario y capta su atención. Es un must have. Usa colores vibrantes y nítidos tanto como puedas. Usa un solo objeto dominante en el medio para enfocar a tus espectadores hacia él. Todas las aplicaciones populares comparten esta misma calidad, así que úsalo sabiamente. También puedes usar un símbolo de letra si no puedes pensar en otra cosa. A veces sucede con todos los diseñadores. Funciona muy bien si eres una marca grande. Tu cerebro puede entender formas simples más fácilmente que las complejas. Úsalos en los iconos de tus aplicaciones. No intentes ser Picasso. Es un punto un poco técnico. Los vectores son formas que pueden expandirse o contraerse sin perder ninguna calidad. Trata de usarlos mientras diseñas en Photoshop. Solo estaremos usando formas vectoriales en Photoshop a la hora de diseñar iconos de aplicaciones. Estos son los puntos clave que debes tener en cuenta mientras diseñas iconos de aplicaciones geniales e impresionantes. 6. IOS (Iphone) especificar en tamaño de los colores de los íconos: Hablemos de algunas especificaciones de tamaño de icono. Estas son algunas de las pocas guías sobre tamaños de iconos de aplicaciones iOS y me gustaría compartirlas contigo. Este es uno de ellos de este tipo Ivo; no sé su nombre completo. También incluiré los enlaces en la Sección de Recursos, así que asegúrate de revisarlos. Ahora no te preocupes que necesitas memorizar estos tamaños de iconos, solo tienes que mirarlos para que sepas qué tamaños de icono se usan normalmente. Entonces esta es una guía entonces ésta es otra. Hay pocos tamaños de iconos para iPhone. No te preocupes por los puntos y pt y esto a razón de 2x y a razón de 3x. Solo estaremos usando estos tamaños de píxel y estaremos usando una plantilla para renderizar automáticamente todos los diferentes tamaños de iconos. No te preocupes por ellos. Basta con echarles un vistazo para que sepas qué tamaños son comunes. Entonces si quieres entrar en muchos detalles, puedes leer esta Guía de Interfaz Humana de Apple iOS sobre todos los tamaños de icono y de imagen. Esta es una lista muy grande. Esto todo sobre tamaños de iconos. Ahora, pasemos a la siguiente conferencia. 7. Diseño de siempre en el cuadrado para IOS: Siempre que diseñe iconos de una aplicación iOS, siempre piense en la plaza. Entonces, lo que significa es que nunca intentes usar esta forma como tu base de iconos porque los iconos de la aplicación iOS no admiten transparencia ni PNG. Este recorte lo aplican automáticamente los sistemas operativos iOS o iOS. Entonces no te preocupes por esta redondez de tus iconos. Simplemente diseña en cuadrado y tu redondez se aplicará automáticamente. Esta es una cinta muy importante porque la mayor parte de la grandeza que intentan diseñar en esta forma, cual termina muy fea al mostrar pantalla negra detrás del icono de tu app. Entonces, solo ten esto en mente y pasemos a la siguiente conferencia. 8. Uso de el espacio y el punto de acción de ícono: Déjame compartir otro consejo contigo, mientras estás diseñando icono de la aplicación IOS. Asegúrate de que estás usando todo el espacio que puedas en este lienzo. Cuando estés diseñando, si tienes un objeto principal como cualquier cosa por aquí, intenta usar todo lo que puedas, porque cuando tratemos de ir a los tamaños más pequeños, se verá bien. Si tu objeto es muy pequeño, como algo en el medio, tal vez como este círculo, así. Déjame simplemente moverlo en el medio. Cuando tratamos de llegar a tamaños muy pequeños, el objeto principal de nuestro diseño se hará cada vez más pequeño. Por lo que este es un consejo muy importante, siempre trata de usar tanto espacio como puedas. También siempre piensa en tallas más pequeñas también. Así que no diseñes solo para 1024 píxeles por lienzo de 1024 píxeles, siempre intenta ver también los tamaños más pequeños o alejar y acercar una y otra vez para ver que tu diseño se ve perfecto en casi todos los tamaños. Estos son algunos consejos sobre el diseño de los iconos de tu aplicación IOS en Photoshop. Ahora pasemos a la siguiente conferencia. 9. Uso de herramientas y formas de vectores para iconos de App de aplicación: Siempre intenta usar formas vectoriales en Photoshop cuando estás diseñando iconos de aplicaciones iOS o cualquier otro íconos de aplicaciones. Ahora, a lo que me refiero con formas vectoriales, estaremos usando principalmente estas herramientas, estas herramientas de forma. Entonces, estaremos usando esta selección de barras y tal vez esta herramienta de pluma. Estas son las herramientas que estaremos utilizando la mayor parte del tiempo. Si no estás haciendo una ilustración o un objeto 3D o algo así, sólo estaremos necesitando estas herramientas. Pasemos a la siguiente conferencia. 10. Tamaño de ícono y cuadrícula de aplicación: Ahora la pregunta es : “¿Con qué talla comenzar tu diseño?” La respuesta es que hay que diseñar en el tamaño más grande, que es éste, 1024 píxeles por 1024 píxeles, que es un requisito para el icono de la tienda de aplicaciones, y déjame mostrarte cómo lo he configurado en Photoshop. Ahora, he usado este tablero cuadrado de 1024 por 1024 pixels, y así es como configuré esta cuadrícula. Déjame mostrarte. Vaya a editar, preferencias y luego guías de calificación y rodajas, y vaya a esta porción. Lo que he usado es que he usado esta línea de creación después cada 64 píxeles y subdivisiones a dos subdivisiones para eso. Cada caja pequeña es de 32 píxeles y cada caja grande es de 64 píxeles. Esta es mi configuracion para el diseño de iconos de app, y ya sea que utilices Illustrator o Photoshop, usa siempre este lienzo de 1024 pixel por 1024 pixel para tus diseños de íconos de app. Ahora sabemos del tamaño que estaremos utilizando para el diseño. Pasemos a la siguiente conferencia. 11. Configuración de documentos para diseño de íconos de la App de IOS: Quería mostrarte mi configuración de archivo para un icono de aplicación, que es de 1024 por 1024 píxeles y la resolución establecida en 72 píxeles, modo de color a RGB, y el fondo debe ser transparente. Asegúrate de que tu perfil de color esté configurado en “No colorear Gestionar este documento”. Este es un punto muy importante. Esta es mi configuración de documentos para el icono de la aplicación. Podría estar preguntándose qué usé en resolución o perfil de color, así que esta es la respuesta. Pasemos a algunas de las próximas conferencias. 12. Cómo usar la plantilla de iconos de aplicación gratuita: Veamos qué hay dentro de esta plantilla de icono de la aplicación. Ábrelo en Photoshop. Lo tengo abierto en Photoshop por aquí. De acuerdo, ahora este es el archivo principal, pero vamos a estar usando esto. Edígame y Guardar Photoshop Smart Object, haga doble clic en él y se puede ver aquí es nuestro icono cuadrado. Básicamente, estas son pocas máscaras para la redondez. Los estaremos usando para ayudar a nuestra redondez. Esta es la redondez que se aplicará una vez que el icono de la aplicación sea subido a la página web de iOS. Esta es máscara interior y esta es máscara externa. Tenemos que esconder éste al final. Estos son pocos gradientes y colores de iOS para los fondos. Si quieres utilizar un color liso, puedes utilizar estos, cualquiera de estos colores o si quieres utilizar un degradado, puedes usar un degradado por aquí así. Todo esto se trata de esta plantilla de aplicación de icono, por lo que estaremos utilizando esta para cumplir con nuestra tarea de diseñar icono de ISFP en Photoshop. Pasemos a la siguiente conferencia. 13. Actualiza las plantillas de íconos de la App: Hola, todos los diseñadores de iconos de la app. A partir de los últimos meses, muchos estudiantes se quejan de que no podemos descargar plantillas de iconos de la aplicación. Ahora el problema es que este tipo que posee la plantilla de icono de la aplicación la ha convertido a algún sitio de pago. Se puede ver por aquí ir a aplicar píxeles. Si vas a ese sitio, puedes ver estas son todas las plantillas de iconos de la app y necesitas pagar al menos $9 mensuales o anualmente, $60 para conseguir estas. Ya que mi curso era gratuito, así que tiendo a usar plantillas gratuitas. Ya tengo una plantilla gratis. Lo he subido en mi Dropbox y voy a compartir un enlace contigo pero su versión 5, no sé si este diseñador tiene plantillas más actualizadas. Pero para este curso puedes usar este o puedes ir a estos sitios web, iosicontemplate.com. Puedes ver por aquí, te he mostrado el método así que no te preocupes, todas estas plantillas de iconos de app, tienen casi la estructura similar de trabajar como puedes ver por aquí hay diferentes tamaños de una misma app. Entonces tenemos esto, otro de everyinteraction.com. iOS 9 App Icon Template y ha sido actualizado en 12ª, Octubre 2015 última actualización y este es el archivo. Se puede descargar este archivo y estos son todos los tamaños de iconos que puede generar. También tiene una maqueta con ella. Creo que todas las instrucciones estarán dentro de estos PSD así que no te preocupes. El tercero que quiero mostrarles es este Bjango. Estos son, creo, chicos muy geeky desde la perspectiva del diseño de la interfaz de usuario. Tienen muchas acciones y diferentes recursos. Tienen esta plantilla de icono de la app en Illustrator, Sketch Affinity Designer y Photoshop. Android, iOS, macOS, Apple TV, Apple Watch, iMessage, un montón de plantillas diferentes. Puedes descargar estos por aquí e intentar usar estos. Podrían tener las acciones con ella porque tienen muchas acciones. Podrás ver estas a continuación son las acciones de Bjango. Esta es la actualización que he querido transmitirle. Voy a subir este link app icon template version 5 vinculada a mi Dropbox y voy a compartir este link. Ten en cuenta todas las opciones. Puedes, si quieres pagar y conseguir estos geniales actualizados, puedes ir a este sitio, si quieres quedarte con fuentes gratuitas, puedes usar estos tres sitios y la plantilla antigua que voy a subir en este momento. Esta es la actualización que quería darles chicos así que sigan diseñando. Muéstrame tu trabajo. Subirlo a esta URL, bit.ly/uistudents. Sube tus iconos por aquí, subirlos en esta página y revisaré tus iconos de app. Puedes ver por aquí, esta es mi foto, siempre recuerda poner tu nombre al final de tu archivo, como icono de aplicación subrayado nombre del estudiante. Tu nombre, navega y sube tu archivo. Estas son las cosas que puedes hacer por aquí. Esperaré ver tus diseños creativos e impresionantes. Mantente atentos y avísame si necesitas algo de mí o cualquier pregunta que quieras hacer. Pasemos a la siguiente lección. 14. Diseño de base elevada en 3D del icono de aplicación de IOS: En esta lección, vamos a crear primero esta base de este ícono. Esta es básicamente esta forma rectangular y su elevación y sombras y todo. Empecemos y hagamos un nuevo archivo de 1124 pixels por 1124 pixels. Deja el resto de los ajustes así, resolución 72, no colores administrar este documento. Siempre ten en cuenta que cuando estés diseñando para aplicaciones móviles o diseño web, no uses nunca ningún perfil de color, solo usa esto. No Colorear Gestionar este documento. ¿ De acuerdo? Presiona “Ok”. Esta es nuestra capa de fondo, hagámosla una capa de fondo, Nueva capa, Fondo de capa. Esta capa se convierte en fondo ahora. Cambiemos el color presionando “Alt Del”. Esto va a cambiar a este color de primer plano, que es blanco, y luego vamos a crear un rectángulo redondeado. Seleccione el “Rectángulo redondeado” haga clic en cualquier lugar, un solo clic, y elija la altura y el ancho a 1024 por 1024 píxeles y la redondez, que estará utilizando serán estos 232 píxeles. Casi y 32, 32, y 32. Presione “Ok” y cambiemos su color a E, C, F0, F1. Está bien. Este es un poco de color azul grisáceo. Selecciona “Ok” y luego vamos a seleccionarlos a ambos y centrarlo en la línea. Entonces vamos a crear rápidamente guías alrededor de nuestra forma, así. Esto es, estoy usando un plug-in Guía rápida. Ahora hemos establecido nuestra forma y guías. Añadamos algunos estilos a esta capa. Por estilo vamos a estar sumando va a ser Bevel y Emboss. Ahora déjame mostrarte los ajustes que estoy usando. Usa el estilo como Bisel Interior, Técnicas, profundidad suave, mueve la profundidad al 100 por ciento. Usa una dirección hacia arriba. El tamaño debe ser de 16 por 16 píxeles. Usa siempre números pares porque estaremos escalando nuestros iconos, lo que incluso los números funcionan mejor. Por lo que siempre usa números pares en tus estilos. Entonces estaremos usando este ángulo al 90 y esta altitud al 21 por ciento o grado. De acuerdo, este modo de resaltado debe configurarse en pantalla y el color debe ser blanco, y mover su control deslizante al 55 por ciento. De acuerdo, ahora para el color de sombra estoy usando este color B, D, C, 3C, 7. Establecer este color como modo de sombra para el modo de bisel interno y sombra debe ser normal no multiplicar y deslizar su opacidad 200 por ciento. De acuerdo, eso es todo. Ahora agreguemos algo de sombra interior a esta capa. Ir a Capa. El paso 2 es Sombra Interior. interior, sombra interior y sombra interior. Sombra Interior, el color será el mismo que esta sombra biselada y relieve. Entonces estoy usando el mismo color B, D, C, tres, C, siete. Presiona “Ok”. La opacidad debe ser un 100 por ciento y el ángulo será menos 90. Siempre ten en cuenta que estamos produciendo sombra de abajo a arriba. Por lo que este ángulo es menos 90 grados, viene de abajo. luz está en la parte inferior, así que la sombra debe estar aquí Vale, entonces la distancia debe ser de 32 píxeles, que también es un número par. Siempre ten en cuenta por qué estoy usando números pares porque nuestros iconos se producirán en tamaños más pequeños, por lo que no queremos ningún problema en nuestros cálculos. Por lo tanto, usa números pares. Presiona “Ok”. Intentemos agregar algo de superposición de gradiente a esta capa. Ir a Estilo de capa, Superposición de degradado. Se puede ver en cuanto he activado esto Superposición de degradado, tenemos algunas sombras por aquí, sombras internas son muy sutiles. Entonces esta es la razón por la que estoy usando este estilo de capa de Superposición de gradiente. Déjame mostrarte la configuración de este estilo de capa. El modo de mezcla debe ser normal, opacidad debe ser del 60 por ciento, y este gradiente es básicamente, déjame mostrarte el color que estoy usando para este gradiente. El color es B, cuatro, B, D, C, seis. Está en el lapso izquierdo de este color es casi 19 por ciento o 18 por ciento. Estamos usando este color blanco más y este color azul grisáceo y menos. Esto es básicamente de color blanco y es opacidad es de un 100 por ciento. Haga clic en “Ok” y asegúrese de haber presionado este reverso. Estamos usando este reverso por aquí. Entonces el estilo que estamos usando Estilo radial, nuestro ángulo de este gradientes radiales es 140 y la escala se establece en 121 por ciento. Estos son los ajustes para este estilo de capa de superposición de gradiente y ese fue el último paso de nuestro ejercicio de creación base. Todo esto se trata de base para este ícono de la aplicación. Pasemos a la siguiente conferencia. 15. Diseño de la base plana del icono de aplicación de IOS: También crearemos otro fondo para este ícono el cual será de fondo plano. Entonces duplicar este sonó rectángulo y ocultar éste y vamos a usar cero píxeles para la redondez. No vamos a usar ninguna redondez. Oculta este efecto biselado y también esta sombra interior. Por lo que estaremos utilizando sólo esta forma de plano para el gradiente y el aspecto del icono. Voy a explicar esta técnica en el entorno cuando vamos a exportar todos los iconos porque iOS no utiliza ni aplica ningún PNG. Necesitamos un icono cuadrado básicamente. Por lo que estaremos usando ambos para crear nuestros iconos. Esto será para el efecto redondeado y también crearemos, usa este para un simple icono. Entonces todo esto se trata de esta base creadora de este ícono. Creamos dos bases en esta conferencia, ésta y ésta. También podemos desplazar el ángulo de esto en este fondo cuadrado. A lo mejor así. Podemos cambiarlo a modo lineal tal vez, y cambiar el ángulo al 90 por ciento y hacerlo normal así. Está bien, ahora está mejor. Entonces para la forma cuadrada estamos usando diferente gradiente, que es éste. Gradiente lineal con eliminar este reverso, será de blanco a oscuro. Entonces escala, si quieres cambiar la escala, supongo que el 130 por ciento es bueno. No queremos mucho color por aquí porque nuestra forma principal estará aquí. Presiona 'Ok ', y esto es todo para esta conferencia. Pasemos a la siguiente conferencia. 16. Diseño de formas de ende en Photoshop: En la última conferencia, hemos creado nuestra forma base. Vamos a crear nuestra forma de icono principal ahora mismo. Voy a empezar con el rectángulo redondeado. Ir a presionar “U” para seleccionar la herramienta de forma y el rectángulo redondeado. Ahora voy a establecer el radio a 24 pixel y hacer clic una vez en este lienzo. Ahora el tamaño para esto es de 736 píxeles de ancho y la altura es de 444 píxeles. Así que establece este tamaño y haz clic bien y su color es este. El valor es 242d36, o 242d36. Establece el color. Déjame que lo suba para que lo veas. Yo lo voy a alinear en el medio. Estoy usando teclas de acceso directo personalizadas. Puedes usar este desde aquí. Presiona la herramienta Mover y puedes usar estas alineaciones para bajar aquí. Lo he alineado en el medio y para la parte superior del sobre no estaré usando Photoshop porque no es una herramienta precisa para crear tal forma de triángulo, triángulo redondeado. Estaremos usando Illustrator para eso. Pero para el resto de las formas y las formas inferiores, usaremos Photoshop. Dibujemos algunas otras formas como 2 barras por aquí, así. Voy a usar este color, que es 3498db para el color azul. Creo que primero uno era más oscuro y replicarlo, “Control J”. Voy a usar el encendedor y los vamos a separar 1020 píxeles. Simplemente lo muevo a 20 píxeles del primero. Ahora los vamos a seleccionar a ambos y los vamos a agrupar en bares. Entonces lo vamos a alinear en la parte inferior de esta forma así. Ahora hagamos otra forma que era básicamente la forma del sello. Usa tu herramienta de forma personalizada de Photoshop default. Si no ves todas las formas, pulsa aquí y haz click en este “todo”. Podrás ver todas las formas por aquí. Para el sello, si quieres el sello redondo, puedes usar el sello redondo aquí así y colorearlo. Este, su color es 34495e. Si quieres usar este, puedes usar éste. O puede seleccionar la otra que era de forma un poco rectangular. Creo que está por aquí. Sí. Este. Puedes seleccionar este y ocultar éste. casi terminamos con nuestras formas para nuestro ícono principal, estamos casi completamente hechos en Photoshop en este momento. Para la siguiente forma del sobre, vamos a usar Illustrator para eso. Veamos en la próxima conferencia cómo vamos a utilizar Illustrator para diseñar la parte superior de nuestro sobre. 17. Uso de Illustrator para la forma de Envelop: De acuerdo, ahora, antes de comenzar nuestro diseño en Illustrator, necesitamos hacer algunos cambios. Vaya a Editar preferencias y luego vaya a guías y calificaciones. He establecido mi línea de cuadrícula después de cada 24 píxeles y subdivisión en 12. Es básicamente cada caja pequeña dos píxeles, y cada caja grande 24 píxeles. También vamos a configurar nuestras unidades en píxeles, trazo, general y tipo. tipo debe estar en puntos y no importa porque no vamos a usar ninguna fuente en este momento, ni texto en este momento. Estas son dos unidades de configuración. Convierte tus unidades en píxeles porque estamos diseñando en píxeles, luego tu cuadrícula luego guía, configuración, alguna guía en números pares. Haga clic en Ok. Voy a abrir un nuevo archivo, nuevo y luego vamos a usar pixeles en las unidades 1024 por 1024. El modo de color es RGB. Alinear nuevos objetos a la cuadrícula de píxeles, bien y este es nuestro lienzo. Voy a encender mi cuadrícula ahora mismo haciendo clic en control y comillas en mi teclado. Ahora vamos a diseñar nuestra forma principal y nos gustaría dar forma por aquí. Para que coincidan perfectamente primero vamos a dibujar un rectángulo redondeado solo por alinearlo mejor, lo que 736 fue el ancho y la altura fue 444 píxeles y la redondez fue de 24 píxeles. Nuestra forma, forma principal se hace por aquí. Elimina este contorno de aquí. Este es básicamente el contorno del trazo. Yo lo he quitado y le doy algo de color, tal vez el blanco está bien, supongo. Ahora, esta es nuestra forma principal y mi arte de laptop para eso, vamos a usar herramienta poligonal. Haga clic en la herramienta de polígono y haga clic en las de aquí. Introduzca tres lados en el polígono, y haga clic en OK. Nuestro triángulo está aquí, vamos a rotarlo. Presione turno, por lo que se gira en algunos ángulos específicos. Ocultemos ahora mismo la guía, y coloreemos otra cosa para que podamos verla correctamente y también esta. Ahora vamos a transformar este triángulo, click en él e ir a este panel Transformar. Vamos a utilizar 736 píxeles para el ancho y 224 píxeles para la altura. Ponlo así y muévelo por aquí. Ahora, lo que vamos a usar son básicamente rincones en vivo. Para acceder a ellos vamos a utilizar esta Herramienta de Selección de Trek. Ya puedes ver estos rincones en vivo están activos por aquí. Se pueden ver pequeños círculos dentro de este triángulo. Puedes hacer doble clic en cualquiera de ellas e introducir el valor de píxel para tu esquina a nuestro alrededor. He ingresado este 24 pixeles y presiona bien. En cuanto presionas bien, esto básicamente se reduce a algún otro tamaño. primer paso es que vamos a hacer una ventaja para este rincón. Para hacer eso vamos a seleccionar cualquier punto de anclaje por aquí para que esto esté activo, luego haga clic y arrastre esto en esta esquina. Una vez que veamos el píxel cero, libéralo. Ahora para dimensionarlo, vamos a usar nuestra herramienta Move y luego transformarnos. Vamos a usar 736 píxeles. Asegúrate de alinear con la escala de cuadrícula de píxeles y todas estas están desactivadas. Ahora presiona Enter y tenemos nuestra forma. Alinémoslo de acuerdo a nuestra forma de fondo. Muévete un poco así y está casi a la perfección puesta en eso. He presionado control vía para venir esto en este modo de esquema, así que ten en cuenta presionar control vía otra vez. Ahora voy a copiar esta forma. Copiar y lo vamos a pegar en Photo shop. Vamos a usar Shape Layer. Presiona Ok y tenemos nuestra capa Shape por aquí, así. Se puede ver que encaja perfectamente. Vamos a crear algún cobertizo de gotas por aquí. Ahora para la sombra de gota, vamos a usar algunos valores que son un poco como la distancia es 42, tamaño es algo así como 764 tal vez. El ángulo es 90 y el modo de mezcla es multiplicar Opacidad. Puedes usar la opacidad, lo que quieras. Si quieres una sombra dura, puedes ponerla en 55 o tal vez más que eso. Este es el tamaño de desenfoque, cuánto va a desdibujarse alrededor esta sombra y esta es básicamente la distancia desde la parte superior. Mantenlos un poco más cerca para que tus sombras no se filtren de esta zona. Las sombras deberían estar por aquí. Presiona Ok y nuestra forma de icono principal está hecha. Hemos utilizado Photo shop e Illustrator para crear esta forma. Ahora los vamos a agrupar en un solo grupo para manejarlos fácilmente. Tenemos esta forma y luego tenemos esto y aquí están las barras. Selecciónelos todos presionando control y control G para agruparlos. Voy a nombrarlo icono de correo y luego también necesitamos alinearlo un poco en el medio, control haga clic en ambos. Alinearlos en el medio. Está casi en el medio ahora mismo por lo que no está alineado ni movido cuando presioné mis herramientas de alineación. Esto es perfecto. Hemos completado nuestro diseño para este ícono. Pasemos a la sección donde estaremos exportando nuestros iconos a diferentes tamaños y a qué problemas se enfrentan la mayoría de los diseñadores y nuevos diseñadores al tiempo que exportan sus iconos. 18. Toques de diseño final: Ahora, vamos a usar app de plantilla de icono. Lo descargamos en nuestras últimas conferencias, y lo vamos a utilizar para exportar icono de aplicación a diferentes tamaños para iPhone y iPad. He abierto mi plantilla de icono de app, archivo psd. Acude a este “Edítame” y ahorra. Haga clic en “Ok” si es el desajuste del perfil de color. No te preocupes por eso. Ahora, voy a ir a esta ventana, a arreglar, y azulejar todo verticalmente. Ahora para esto, mi forma de icono, ve a esto. Voy a agruparlos a todos, y los voy a arrastrar por aquí en este archivo Icon 1.psd. Ahora, voy a cerrar este, y vamos a volver a azulejarlos a pestañas. Ahora, en primer lugar, vamos a eliminar este icono de aplicación superior Template Glyph, y luego vamos a convertir este icono de correo de la aplicación a Smart Object, alt F5, o puedes hacer clic derecho y convertir a Smart Object así. Convertir a Objeto Inteligente, y luego vamos a hacer algunos cambios más, ocultar estos gradientes ahora mismo, y activar este fondo, y alinearlos todos en el medio, así. Ctrl D para anular la selección. Ahora, permítanme mostrarles cómo vamos a usar esto. En primer lugar, vamos a guardarlo Ctrl S y ver qué está pasando en nuestro icono de la app mientras nuestro icono de la app está aquí. Se puede ver cómo funcionan nuestras esquinas redondeadas por aquí. Pero solo para arreglarlos, déjame mostrarte el truco. Ocultemos nuestro fondo degradado, fondo escala completa, y vayamos a esta máscara Exterior. Máscara exterior se ve perfecta. Agarra esta capa de máscara Interior y muévala hacia abajo desde tu Rectángulo redondeado, que es tu fondo. Esta una base elevada 3d. Mueve esta Máscara Interior debajo de eso. Máscara interna es básicamente esta forma para este ícono, así que lo que vamos a hacer es, vamos a recortar nuestra forma en esta Máscara Interior. Haga clic en esto. Ahora, nuestra forma se está mostrando en la parte superior del arte de la máscara Interior, y vamos a recortar estos dos así. Este va a ser un icono de aplicación perfectamente redondeado porque lo hemos recortado en la forma interna ya que sabemos que esta forma de icono de la app de iOS no es básicamente una forma redondeada simple, así que tenemos que recortarla así. Ctrl S, y casi terminamos con ello. Ahora, si quieres la otra versión del icono de tu app, puedes ocultar fácilmente estos dos, y tienes este fondo por aquí. También puedes cambiar el gradiente de Radial a Lineal así y eliminar este Reverso y usar este deslizador a un valor un poco más alto, como 145. Si lo guardamos ahora mismo así, se puede ver todavía nuestro icono de la aplicación está en forma redondeada, y se ve realmente impresionante. Es por eso que creé este sencillo fondo de gradiente en primer lugar porque creo que es más, puede ver, a lo largo de la línea de esta diferencia, y es más de aspecto modernista que el otro, el elevado. Todavía nuestro icono de la aplicación se ve muy impresionante. Pasemos a la siguiente conferencia donde estaremos usando la acción para exportar todos estos íconos a diferentes tamaños. 19. Exportar íconos de App de IOS de todos los tamaños: Exportemos nuestro icono a diferentes tamaños de iconos de la aplicación. Para ello, vamos a utilizar nuestro archivo de acción de plantilla de icono de la aplicación. Si no ves acciones por aquí, este botón de estilo de lugar, puedes ir a “Windows” y dar click en esta “Acciones” y aparecerá por aquí. Entonces lo que vamos a hacer es; ya he cargado mis acciones por aquí. Si no las ves por aquí, pulsa [inaudible] y ve a “Cargar Acciones” y vamos a navegar a esas acciones de plantilla de icono de la app y dar click en “Cargar”. Así. Se puede ver el segundo cargado por aquí en este momento. Lo que vamos a hacer ahora es que vamos a utilizar esta plantilla de icono de la aplicación, archivo de acción, y dar clic en este icono de “Exportar Square” porque, vamos a exportar iconos cuadrados porque iOS no soporta transparencia. En primer lugar, vamos a exportar los iconos cuadrados, clic en él, reproducirlo, así. Te mostrará el cuadro de diálogo guardado para web. Espéralo y haz clic en el botón “Guardar”. Lo voy a guardar en el escritorio ahora mismo. Haga clic en “Guardar” así. Se creará una nueva carpeta para guardar todos estos tamaños. Déjame ir a esta carpeta. Podrás ver todos nuestros iconos de diferentes tamaños se generan y nuestro icono de la aplicación de correo incluso se ve bien en tamaños pequeños también. Puedes reconocer instantáneamente este símbolo. Por lo que esta es la calidad de un buen icono de la app. Nuestros todos los tamaños cuadrados se han generado. Generemos los redondeados. De acuerdo, da click en este “Rounded” y juega esta acción. Espere a que el cuadro de diálogo complete la acción. Está bien, se está llevando algún tiempo. Una cosa más, solo apaga este conversor a SRGB. Es mejor cuando se está exportando. Acabo de recibir este muy buen consejo. De lo contrario, será un problema cuando intentes verlo en otros dispositivos. Ahora, veamos cómo se ven nuestros iconos redondeados. De acuerdo, estos son nuestros iconos redondeados. Estos son básicamente iconos cuando estamos usando superposición de gradiente o fondo de gradiente. Este sencillo trasfondo. Si quieres ver cómo se ven tus iconos en este fondo, fondo 3D elevado, oculta éste, o si alguno de ustedes quiere mostrarlo, muéstralo así y “Guardar”. Ahora vamos a exportar nuestros iconos en este estilo 3D. Ahora da click en este “Redondeado” y da clic en este botón “Exportar”. Juega esta acción y la vamos a guardar en nuestro look 3D elevado. Vamos a usar la transparencia, aunque iOS no la soporta. Pero queremos mostrárselo a nuestros clientes. Por lo que se impresionan con nuestros diseños. Entonces este es el truco, sólo para mostrarles los elevados. Ahora déjame ver cómo se ven estos elevados. Se ven impresionantes. Por lo que este es el proceso de generación de iconos de la app que uso. Si realmente quieres usar esto [inaudible] o elevado en tu diseño final, solo asegúrate de girar también este otro fondo y generar tus iconos en este icono cuadrado. No intentes ejecutar tu acción cuando estés en este archivo o icono de PSP. Primero pasa a esta plantilla de icono de la aplicación y luego intenta presionarla. No lo presiones dentro de eso. Voy a desmarcar esto; convertir a SRGB. Ahora, estoy usando una máscara para mostrar estas esquinas redondeadas, así que creo que estas serán perfectas, no te preocupes por ellas. Haga clic en “Guardar”, “Reemplazar”. Déjame ver cómo van a quedar nuestros iconos. Nuestros iconos se verán igual así porque iOS aplicará la redondez en su propio lado y en su sistema operativo. Entonces vamos a ver los iconos al cuadrado. Para la salida final, si quieres este efecto elevado, usa siempre la salida cuadrada. Para subir tus iconos, siempre debes usar la extracción al cuadrado. Por lo que utilizar la acción de exportación que es iconos de aplicaciones cuadradas. No uses redondeados. Todo esto se trata de mi curso. Si quieres un fondo plano detrás de él, puedes ocultar éste y puedes utilizar cualquier otro degradado. También trata de ocultar esta cuadrícula. No necesitamos esta grilla. Los colores de iOS van a “colores de iOS”. Creo que si quieres este elevado, puedes ocultar todos estos colores y solo dejar que el gris y haga clic en él para moverlo a color blanco, así y generar, exportar tus iconos. Entonces en esta lección, lo que aprendemos, exportamos nuestros iconos con redondez y en cuadrados. Al final estaremos utilizando sólo los iconos exportados cuadrados. Esta conferencia concluye mi curso para este diseño de iconos de la aplicación. Espero que hayan disfrutado de esta lección y de este curso. No olvides revisar este curso. O si quieres agregarle algo para tratar de usar discusiones. Siempre puedes mandarme un mensaje directamente. Yo estoy aquí para ayudarte de todo tipo de formas. Así que cuídate y adiós. 20. Introducción a el diseño de Icon de lanzador de Android: Bienvenido a la nueva sección de este curso, que va a ser Android Launcher App Design, y vamos a crear muchas opciones de diseño diferentes para el mismo ícono de la app, que básicamente es Hidratación App, o revisando tu niveles de agua corporal. Entonces déjame mostrarte y presentarte lo que voy a cubrir en todo este apartado. Entonces veamos qué hay dentro. Aquí puedes ver la pantalla principal de Google Nexus y puedes ver por aquí hemos creado tres iconos, este Liquimeter, y los otros dos son esta Hidratación y Dropify. Estos son el mismo icono de la aplicación, ideas diferentes. Todos se ven geniales. Me encanta el corazón. También puedes usar este Liquimeter, que es un icono de cristal, y creo que todos encajan bien. Entonces déjame mostrarte lo que vamos a cubrir en todo este apartado. Ya puedes ver por aquí vamos a usar esta plantilla la cual va a generar diferentes tamaños, que son básicamente seis tamaños para todos los requisitos de la App Android y diferentes dispositivos, y vamos a crear tres temas diferentes . Uno es este vaso, y luego tenemos este corazón, y luego tenemos este icono de gota. En el proceso de creación de estos tres iconos, creé muchos iconos flop como se puede decir, que no somos muy buenos. Entonces esta es una de ellas. Este es uno de los fracasados. No me gustó. Tenía algunas barras para medir el nivel del agua pero parecía, no sé, tal vez no se veía muy bien. Entonces se me cayó. Déjame mostrarte algunas de las opciones más tempranas que probé. Estas son algunas opciones más. Se puede ver por aquí dibujé esta forma de vidrio en Illustrator, pero al final, los bordes estaban muy agachados cuando el ícono era muy pequeño, así que lo dejé ir y no lo usé. Esta es una idea más y acabo de rechazarla. Para que puedas ver si vas a diseñar un ícono de aplicación muy bonito o algo genial, necesitas pasar por todo un proceso. Dibujar, mejorar, generar nuevas ideas, tratar de ver cuál está mejorando o elegir la final. Entonces vamos a cubrir todo esto en estas siete u ocho próximas lecciones, así que déjame mostrarte cómo vamos a crear estos tres iconos geniales para Hidratación App. Entonces empecemos y pasemos a la siguiente lección. 21. Especias y tamaños de íconos de App Iconos de Android: Ahora, en esta lección vamos a discutir las especificaciones de iconos de la aplicación, como cuáles son los diferentes tamaños de estos iconos de la aplicación de lanzador para la plataforma Android. Entonces vamos a discutir qué tamaño necesitamos enviar a App Store o Google App Store. Entonces vamos a ver si podemos usar canales de transparencia y alfa en estos iconos. Al igual que podemos usar solo dos o tres formas o podemos usar cualquier transparencia o fondo transparente en estos iconos. Empecemos. Básicamente, cada aplicación para Android necesita seis tamaños de iconos diferentes, 512 píxeles, que es la más grande que puedes ver por aquí. Es básicamente para Google App Store. Los otros son para otras resoluciones de Google Android. Si quieres saber más sobre estas densidades, resoluciones de pantalla, necesitas tomar mi curso Tipográfico. Hay una sección completa en todas estas cosas para Android e iOS y son diferentes tamaños de pantalla y cómo diseñarlas para ellos. En este curso no necesitas preocuparte mucho por ellos si solo te estás enfocando en diseñar iconos. Estos son seis tamaños. Déjame mostrarte pocos recursos en línea como este. Voy a compartir estos enlaces con ustedes. Estos son los tamaños de icono de la aplicación, 48 por 48 píxeles y todos estarán en formato PNG, formato transparente. Esto es para hdpi 72 pixels por 72 pixels. Estos son todos tamaños cuadrados y 144 por 144, 192, 512 para la tienda Google Play. ¿ De acuerdo? Estos son todos los tamaños de iconos. Algo que debes recordar es que estos se llaman iconos de lanzador. ¿ De acuerdo? Estos no son otros iconos como puedes ver lo que el diálogo de la barra de acción y nuestros iconos de pestañas. Estos se llaman iconos de lanzador o iconos de aplicaciones. Ten en cuenta que necesitamos seis tamaños diferentes para ellos. También voy a compartir este documento y tiene todos los tamaños para todos los diferentes iconos de la aplicación, iOS, Android, BlackBerry, incluso OS web, Windows phone. Necesitas mantener esto en tus URL y guardar este documento. Ahora, lo más cool de estos iconos de la aplicación para Android es que te dan plena autoridad para que puedas usar la transparencia alrededor del ícono. Puedes crear cualquier forma de icono como puedes ver por aquí. Acabo de crear este icono de cristal y no hay nada a su alrededor. Somos libres de usar canales alfa, PNG. En el caso de los diseños de iOS, sabes que no podemos usar esos trucos por ahí. Se puede ver por aquí en el icono del corazón, se ve realmente genial porque es transparente desde los lados y estamos usando esta forma. Se puede ver por aquí en la esquina izquierda este ícono del teléfono, ícono del teléfono Android realmente se ve genial porque tiene transparencia a su alrededor y solo podemos ver el icono configurando en este fondo. Estas son pocas diferencias con el icono de la aplicación iOS. Estos son diferentes tamaños, podemos usar la transparencia y puedes ver por aquí somos libres de usar la transparencia a su alrededor. Esto es lo más cool de estos iconos de la aplicación para Android. Creo que eso es todo. Deberíamos pasar ahora a la siguiente lección. 22. Íconos de App con Android: Ahora en esta lección, voy a discutir algunas de las cosas que hacer y no hacer del icono de la aplicación Android. Son casi los mismos que discutimos en los iconos de la app de iOS, pero algunos de ellos son diferentes. Google Material Design y sus pautas de diseño son realmente crear y el elaborado todo en detalle. Veamos cuáles son las pautas y hacer y no hacer de estos iconos de la app. Ahora primero vamos a leer sobre estos iconos de lanzador y hay una guía API en el foro de desarrolladores de Google, Android.com. Te va a mostrar algunas de las mejores prácticas. Ahora puedes ver a la derecha vas a ver las escuelas del icono del lanzador, hacer y no hacer, tamaño y formatos. Tamaño y formato ya hemos discutido es PNG y hay seis tamaños diferentes. Vamos a las escuelas del ícono de la aplicación lanzador. Es lo mismo que el icono de tu app va a contar la historia de tu app. Asegúrate de diseñarlo en un sentido que sea como la portada de un libro. Si coges una portada final de libro es muy bonita y cuando te abres, hay una historia diferente a la que te va a disgustar. Igual es el problema con estos iconos de lanzador. Asegúrate de que tu icono de la aplicación de Google Play o icono de la aplicación Android va a contar la historia de qué se trata la app. En su mayoría también acercamos el esquema de color a la aplicación. Si el ícono de la app tiene colores muy extraños y cuando abres la app y es muy diferente, o es 3D y el ícono de la app es plano, o la app es plana y el ícono de la app es 3D. Es un poco de desajuste. Pocas cosas que debes tener en cuenta es que vas a alinear el icono de tu app con tu marca. Debería estar muy cerca de tus pautas de diseño de marca o de los colores de marca. Entonces debería ser fácilmente descubierto por diferentes usuarios en Google Play. Es lo mismo que te mostré en lecciones anteriores, que debe notarse entre diferentes iconos. Las mismas cosas que están repitiendo por aquí puedes ver promocionar la historia de la marca, crear un icono que sea único y memorable. Se aplica a todos los iconos de la aplicación, es hecho universal. También el esquema de color que está alineado con tu marca. Entonces no hemos intentado comunicarnos demasiado con el ícono. Significa que no lo hacen demasiado complejo. Muchas formas diferentes no intentan usar demasiadas formas. Icono simple será más impactante y más respeto y más memorable. Ten en cuenta, por eso uso formas muy simples, como hemos usado gota y un corazón y un vaso. Esto es muy sencillo, sencillez va a ganar al final. Entonces lo mismo que han repetido aquí, no intentes usar el nombre de la aplicación o el texto en tu Pycon, esto es lo mismo que discutimos antes. Pocas cosas más ya hemos discutido bien esta función en la ranura en el lanzador, intentamos leer esto. Ahora, comuníquese [inaudible] a tamaños pequeños. Este es el principal problema, mayor parte del tiempo que tenemos. Descarté muchos iconos cuando estaba diseñando los iconos de la app Glass porque estaban dentados en tamaños pequeños. Por eso fui por formas enteras como vidrio relleno o corazón o tal vez una gotita. Aquí un muy buen punto, trabajar en amplia variedad de fondos. Ten en cuenta que tus usuarios van a crear muchos tipos diferentes de fondos y sus papeles de papel tapiz móviles serán diferentes. Ten en cuenta que tus colores son tan vibrantes y que se pueden utilizar en cualquier fondo. Este es el consejo principal. Aquí hay una cosa más, reflejar el modelo de iluminación implícito del lanzador. Es básicamente que la luz en el icono de la aplicación va a ser desde arriba, por lo que debería generar sombra en la parte inferior. Esta línea significa que, la luz vendrá en el ángulo de 90 grados desde la parte superior. Si el icono es 3D use perspectiva. No intentes usar demasiado prospectivo, lo contrario no será reconocible. Se puede ver por aquí este ícono del teléfono está un poco en perspectiva y este icono de la aplicación de la película. Normalmente voy con los iconos simples. No soy muy bueno en perspectiva. Traté de diseñar iconos simples, creo que si estás limitado con como yo, deberías tratar de diseñar así. Ahora el último punto es que, trató de pesar tu ícono y utilizar todo el espacio. Ahora sobre eso vamos a cubrir en la siguiente lección, que se trata de pautas de diseño de materiales de estos iconos de aplicaciones para Android. Discutiremos su cuadrícula, para que puedan ver a la derecha, este es el genial, lo vamos a discutir a detalle en la siguiente lección. Estos son todo lo que hacer y lo que no. Se puede ver por aquí te han mostrado algunas de las cosas. Al igual que si creas detalles demasiado pequeños, como puedes ver aquí en tamaños pequeños, no serán visibles. Se puede ver aquí acaban de crear tres, estas barras y son fácilmente visibles. También puedes ver probado no intentes ocultar tu forma de icono principal. Solo usa esa y deja el resto. No necesitamos eso. No intentes usar para adelgazar las líneas. Se puede ver por aquí, línea muy delgada no va a mostrar muy bien. Este es el problema que estaba teniendo con el icono de cristal. Se dibuja con líneas a los lados, tuve que hacer las líneas muy gruesas. También lo que pasa es que si puedes usar algún efecto de papel o efecto curvo con canales alfa, puedes ver por aquí trató de obtener el beneficio completo de tus canales alfa y transparencia. Pasemos a la siguiente lección donde vamos a discutir el diseño de materiales. 23. Directrices de diseño de materiales: Ahora veamos qué están diciendo los diseñadores de Google sobre sus pautas de diseño y cómo podemos seguirlas para mejorar nuestro proceso de diseño de iconos de aplicaciones, empecemos. Ahora si vamos a este material.io/lineamientos, lo llaman iconos de producto. Ahora, lo principal es que se puede ver en el lado derecho hay una cuadrícula completa sobre cómo diseñar este ícono de la aplicación, así que vamos a ver qué tienen. Ahora, primero les voy a decir cuál es su enfoque de diseño. Enfoque de diseño significa, cuál es el pensamiento o pensamiento diseño o directriz detrás de su Diseño de Materiales de Google. El diseño del material es básicamente papel encima de otro papel. Todo su diseño se basa en papeles apilados, un papel está echando sombra sobre el otro papel como se puede ver aquí en el estudio de iluminación, que este papel elevado está echando sombra por aquí. También, hay luz en esta zona por aquí. Se puede ver que esta zona es un poco más brillante e iluminada por la luz. Además, tienen dos ángulos de luz de 90 grados y 45 grados, así que ten eso en cuenta también. Se puede ver por aquí está el prototipo de material luego le han agregado colores. Es así como su filosofía o enfoque diseñado está funcionando específicamente. Para mí, creo que su enfoque de diseño es similar al arte del origami del japonés. Crean muchas formas diferentes a partir del papel. Ahora, viniendo a la grilla, cómo vamos a usar esa grilla. Esa rejilla es básicamente se dividen en cuatro patas. Creo que ahora lo principal que hay que tener en cuenta son estas líneas clave. Ya puedes ver, no tengas miedo de todo este diseño o de toda esta cuadrícula. Básicamente, lo que dice es que, si vas a permanecer en alguna de estas formas. Ahora si estás diseñando un icono de aplicación redondeado, necesitas permanecer en esta área. Si estás diseñando un rectángulo uno, necesitas seguir estas formas que son rectángulo, este rectángulo superior, tal vez puedas diseñar una aplicación de documento, o icono de aplicación de documento, estarás usando este rectángulo. Además, hay una cuadrada en el interior, por lo que esto no es demasiado de una preocupación. Este medio es básicamente punto focal si estás usando algo puedes usar esta zona por aquí. Estos se llaman keylines, mantén tu diseño de acuerdo a estos keylines. Se puede ver por aquí que están mostrando sus formas de claves por separado. Esto es cuadrado, esto es círculo, esto es rectángulo, este es otro lado del rectángulo. Entonces están mostrando que su grado de unidad DP, no te preocupes por los DPs, básicamente es todo en números pares multiplicado mayormente por cuatro o dos, divisible por cuatro o dos. Entonces aquí está su estudio de geometría, puede ver que hay diferentes iconos ahí mostrando que, como este es el icono de Chrome, Se construye sobre esta geometría. Similares son estas geometrías, están usando formas rectangulares. Ahora, vamos a discutir algún icono de producto anatomía, anatomía básicamente hay diferentes porciones que han dado que necesitas usarlas de esta manera y el número uno es básicamente el brillo que puedes ver por aquí. El brillo del acabado, que es básicamente tu icono de aplicación brilla o tal vez alguna luz, o tal vez algunas sombras en la parte superior, o tal vez algún acabado brillante. Algunos brillan sobre tu ícono, luego dos y tres es fondo material y primer plano. No necesitas preocuparte por ellos, esto es de fondo, esto es de primer plano. Cuatro es básicamente tu área focal o tu color principal que estás usando para el objeto principal, cinco es básicamente tu sombra. No te preocupes por estos, Es muy sencillo, están mostrando todo, su directriz de diseño de materiales es muy elaboradora, muy detallada., hay que leerla con cuidado. Pero creo que para el diseño de iconos, las únicas preocupaciones principales son el mando de estas sombras, y cómo vamos a utilizar todo el área de forma, esta cuadrícula de manera efectiva. Si quieres leer todo esto, puedes leer toda esta pauta, creo que es mejor si la lees a fondo y tienen muchas pautas de diseño de materiales diferentes. Una cosa más que quiero mostrarte es Drop shadow metrics. Ahora, las sombras Drop son muy calculadas, puedes ver aquí están mostrando opacidad 20 por ciento. El desplazamiento X es básicamente del eje x, por lo que no se va a mover a la derecha ni a la izquierda. Será de arriba a abajo, por lo que se moverá en el eje y 4dp, y el desenfoque va a ser 4dp. Si estás diseñando en 512 por 512 píxeles, entonces este 4dp significa 16 píxeles u ocho píxeles. Déjame mostrarte con un ejemplo en Photo shop. Se puede ver por aquí, en este ejemplo, estoy usando la misma técnica. Ahora, si seleccionas este círculo, puedes ver que voy a aplicar una nueva sombra de gota por aquí, así que eliminemos este efecto y aplicamos una nueva sombra de gota. Ahora puedes ver estoy usando sólo 20 por ciento de opacidad, ocho distancia y ocho pixeles tamaño, por lo que puedes aumentar el tamaño en ochos así, 16, puedes ver que está costando una sombra sutil muy agradable, como una sombra de gota de diseño de materiales. Además, hay más estudios de diseño de materiales que puedes ver por aquí. Hay diferentes estilos, voy a compartir los enlaces para estos recursos. Simplemente puedes agarrar estos, puedes ver por aquí, hay diferentes capas de sombras. Si un elemento está más elevado o más arriba en la pila, va a costar más sombra así. Es así como básicamente funciona este diseño de materiales, Es básicamente sombras y luces y papeles apilados uno encima del otro. Creo que todo esto se trata de este ícono de la app, Si quieres leer un todo este documento, puedes leerlo a fondo. También puedes ver que han dado algunos colores, también podemos escoger los colores de aquí, pero yo lo escogí de otro lugar, te voy a mostrar eso también. Todo esto se trata de pautas de diseño de materiales, voy a compartir contigo esta sombra de diseño de materiales, estudiar y puedes descargar el PST de este tipo y aplicar diferentes sombras. Pasemos a la siguiente lección. 24. Ideo y bocetos Initial de la etiqueta: Primera parte de cualquier diseño, ya sea una ilustración o icono de aplicación o diseño web es bosquejar. Así que ponte con un poco de papel y lápiz y prueba algunos bocetos. Entonces te voy a mostrar mis bocetos por aquí. Entonces vamos a verlos. Aquí están mis bocetos iniciales, usé pocas cosas relacionadas con la hidratación, que era vidrio o agua, gota de agua, una hoja llena de olas de agua y un vaso de precipitados con algunos, puede ver por aquí, he usado algunos marcadores o marcas en él para medir los niveles de agua. Estas son las pocas ideas iniciales que tenía en mi mente, acabo de conseguirlas en papel. Entonces si no tienes ninguna idea o tu mente está vacía, entonces hay otra técnica que es buscar en Google y obtener inspiración o ideas relacionadas con este concepto. Entonces lo que vamos a hacer es ir a Google y buscar diferentes ondas de agua y apps de agua, apps similares. Ahora puedes ver aquí tenemos en Google, he buscado app de agua y puedes ver que hay muchas apps de agua diferentes. También están apareciendo sus iconos, también cómo se ven y su tablero de humor. Se puede preparar un tablero de humor para eso. Entonces tenemos gotas de agua, unas botellas por aquí, un vaso, y si bajamos abajo, hay más gotitas de agua, y hay una divertida gota de agua por aquí. Esta es otra idea que la ilustración de un hombre o de una mujer o de una persona se está llenando de agua. Pero creo que para un icono de aplicación que es imagen muy pequeña, no se puede usar algo como esto. Tenía esa idea pero la descarté porque necesitamos ideas muy simples y básicas, así que con sólo mirar el icono, el usuario debería poder adivinar qué va a ser. Estas son pocas ideas. Me gusta mucho este hidrato y su nivel de agua, así que esta es una nueva buena ola. Otra cosa ahora sobre el esquema de color. Si quieres diseñar en solo un color o dos colores, eso depende de ti. Pero me gustan los buenos colores, buenos colores vibrantes para atraer al usuario hacia el icono, así que puedes ver por aquí solo tienen usar un color por aquí. También en este icono de la aplicación, se puede ver casi un gradiente de color, y luego tenemos otro que blanco y azul, solo un color básicamente. Fui y busqué en Google Play algunas apps de agua para ideas puedes ver que estamos aquí recordatorio de bebida de agua y luego tenemos al lado derecho un montón de otras apps similares, así que la mayoría de ellas están usando algún vaso quizá temporizador, no me gusta la idea de timer, creo que debe estar relacionada con la salud. Por eso mi idea inicial tenía este corazón en ella, porque está relacionada con la salud. Entonces el agua es buena para tu salud por eso uso el símbolo del corazón. Ahora si vas a este iTunes, Hay muchas apps en Apple y puedes ver por aquí todavía tienen la botella, creo que es la misma, entonces tenemos gotas, gotas botella. Por lo que los conceptos principales son alrededor de los niveles de agua y las gotas de agua, vasos y algunas botellas. Entonces creo que la botella necesita mucho detalle. Se puede ver por aquí unas curvas otra cosa y ya tienen esto y creo que les va a gustar mejor porque su app también está mostrando una botella. Por lo que para los colores, necesitas buscar ondas de agua. Cuando vas a buscar vectores de ondas de agua, vas a ver muchos colores geniales como puedes ver por aquí. Algunas aguas de sombra púrpura y tenemos muchas salpicaduras entonces tenemos otras ideas como puedes ver por aquí unos gradientes de oscuro a azul, así que un poco de color púrpura con azul, se ven geniales. Por lo que traté de escoger colores de estas imágenes. Seleccioné tal vez uno, dos o tres colores de aquí, y un color de tal vez este color púrpura, y los utilizo como mis cuatro colores, vale, para el ícono de la aplicación. Para las olas, vas a conseguir algunos colores e ideas desde aquí, ya que puedes ver esto también es una onda muy buena, ola oceánica. Esto muy único, creo, no creo que sea muy fácilmente reconocible. Entonces puedes ver que hay más ideas sobre ondas, tipos de ondas, una, dos, tres, y cuatro tipos diferentes y entonces también tenemos esta idea, ondas encima de [inaudibles]. Este es el que utilicé en el icono de mi app, por lo que para la ideación y el bosquejo, necesitas ver las ideas de otras apps y otros diseñadores, así es como funciona el mundo, miras el auto de otra persona y diseñas el tuyo propio, o tal vez lo diseñó mejor que ellos, así es como vamos a conseguir nuestro esquema de color y nuestros símbolos principales. Ahora en la siguiente lección vamos a diseñar nuestros símbolos principales en Illustrator. Entonces pasemos a la siguiente lección. 25. Cómo usar recursos y plantillas de íconos de la aplicación: En esta lección, te voy a compartir y mostrarte los recursos que vamos a utilizar en este curso y esta plantilla de icono de producto Android que vamos a utilizar. Apenas son pocos. Encontré datos realmente profesionales y te ayuda a generar iconos de aplicaciones fácilmente y te ahorra tiempo. Si quieres ahorrar tiempo, necesitas usar esas plantillas. También puedes crear todos estos tamaños, incluso desde Adobe Illustrator e incluso desde Photoshop. Simplemente crea uno de ellos y exporta a diferentes tamaños. Pero creo que es mejor que uses este tipo de plantillas. Pueden generar estos iconos en poco tiempo. Además, te pueden mostrar esta vista previa la cual es muy útil. Dos de ellos, me gusta mucho, voy a compartir las URL de estas plantillas de iconos de la app. Vamos a nuestro navegador. Nota el primero, el mejor profesional es este applypixels.com. Anteriormente era una plantilla pasada, antes era gratis, ahora se paga. Necesitas pagar $9 al mes para obtener estas impresionantes plantillas de iconos de la aplicación. Soy fan de herramientas gratuitas como esa, así que tengo la versión 2 para este ícono de producto Android. En este momento la versión actual es de tres y hay algunos cambios en la misma. Al igual que una edición de tamaño más que es de 114 píxeles, que es para Amazon se puede ver por aquí. También lo puedes ver en el registro de cambios agregó un nuevo tamaño. Esta es una de ellas si vas a ganar usando estas plantillas y necesitas diseñar iconos de app para ganar y es tu profesión, entonces creo que deberías comprar la licencia para ello. Voy a compartir la versión gratuita con ustedes chicos, así que no se olvide de descargarla, es la versión 2.0. El segundo es de este tipo. Estos son múltiples dueños es de Behance y este también es realmente buena plantilla, muy fácil de usar. Tiene algunos defectos, así que voy a discutir eso en un minuto. Aquí está, puedes ver por aquí diferentes tamaños. Muchas vistas previas geniales, incluso Google App Store. Entonces está en estas aplicaciones y está en el escritorio o como lo llames pantalla de escritorio móvil. El tercero que te voy a mostrar es de este Android developer.android.com. Si vas a esta zona por aquí, el lado derecho, puedes ver por aquí en las descargas “Android Icon Template Pack”. Si haces click aquí, se va a descargar la plantilla. Es básicamente de chicos Bjango, supongo. No me gusta mucho pero si quieres descargarlo de los gastos generales, puedes usar eso. Todas estas plantillas de iconos, tienen personalidades similares. Sus técnicas son casi las mismas. Simplemente diseñas una talla y ellos van a extraer todos los demás. No te confundas que si descargas alguna otra plantilla no vas a trabajar con ella. Ahora voy a cambiar a mi Photoshop y vamos a ver qué tenemos en estas plantillas. Se puede ver qué aquí, se trata de una plantilla de icono de producto Android de la plantilla de icono de la aplicación Pixelresort. El sitio que te mostré, es la versión 2 la cual es gratis, y se puede ver por aquí hay diferentes tamaños, una vista previa, y muy claramente se muestra por aquí tamaño 512 y “Edímelo y guardar”. Básicamente, vas a hacer doble clic en esto y editar todo por aquí. Tiene cuadrícula de iconos, icono de círculo, y rectángulo vertical, rectángulo horizontal. Es solo un simple icono de aplicación en este momento. Entonces si quieres usar alguno de ellos y puedes encender y apagar la rejilla muy agradable. Creo que este tipo lo ha hecho muy profesional. Tenemos sombra superior por aquí, que es si se hace clic aquí, puede ver esto es “Edge Indigo 900", por lo que es el borde. Si quieres cambiar el color del borde, puedes ir a gris o algo así. Siempre que utilices cualquiera de esta opción como cuadrado o círculo, necesitas editar todo por aquí. Si quieres llevar tu diseño a un icono de aplicación basado en círculos, necesitas arrastrar tus diseños hasta aquí. Si quieres ocultar esto, puedes ocultarlo y empezar a hacer icono de aplicación por aquí, o normalmente te sugiero que dibuje tu forma de icono de aplicación principal en Illustrator y luego traerlo aquí. Esto es básicamente una atomía de estas plantillas de iconos de la aplicación. Hay diferentes tipos y se puede ver por aquí, hay sombras y también se puede activar la versión alfa y las versiones beta, estas son etiquetas diferentes. Todo esto se trata de estos. Déjame ir al otro. El otro que me gusta es éste. Tiene este tamaño 1080, por lo que si haces doble clic es básicamente en 1080. También tiene, se puede ver por aquí, esta es máscara de cuadrícula, por lo que esta es básicamente la cuadrícula de iconos. Entonces tenemos este ícono por aquí. Acabo de arrastrar este icono de la aplicación que hice en Illustrator por aquí, es básicamente formas ilustradoras. Este es uno que probé antes, es feo, fue uno de los rechazados. Ahora mismo estoy usando este círculo, hay un defecto con esto, que es básicamente, que si trato de darle la vuelta a la “Sombra Drop” por aquí, así que si la guardo con una sombra de gota, se puede ver en el, deja me acerque, se puede ver para los tamaños muy pequeños como este, 96 y 72 píxeles por 72 píxeles, hay una línea dentada alrededor de mi diseño. No está mostrando correctamente mi sombra de gota. Si quieres usar esta plantilla de icono de la aplicación, te sugiero que nunca uses drop shadow sobre esta forma por aquí. Si quieres usar ictus, eso depende de ti. Realmente va a funcionar muy bien. Se puede ver por aquí, todavía tiene algunos bordes dentados. Creo que solo debes quedarte con esta y no uses ninguna forma o sombra alrededor de esta forma más grande. Si forma el icono de tu app, y si la guardo, puedes ver la vista previa por aquí. Déjame mostrarte la vista previa. Aquí está. Déjame alejar al 100 por ciento. Así es como se va a ver tu icono de aplicación. Tiene previsualizaciones muy bonitas pero la extracción, cuando extraigas los iconos de tu app, se van a quedar feos si estás usando alguna sombra por aquí. No intentes usar sombras por aquí. Estas son las dos plantillas que recomiendo. Una es esta plantilla de icono de producto Android del sitio supongo applypixel, este es el chico Michael Flarup, supongo. Este es el tipo que creó estos, y creo que estos son mejores que cualquiera de ellos. Se puede ver que hay pocos errores y defectos en esto como sombras de gota no salen muy bien, así que eso es todo. Si quieres usar solo la gratuita vas a esta plantilla de icono de Diseño de Material y usa esta. Si quieres usar la pagada, la versión 3.0 más actualizada para ésta, entonces vas a pagarla. Voy a compartir este 2.0. y todas estas plantillas contigo, así que no te preocupes por ello. Yo sólo voy a hacer este curso con recursos gratuitos. En la siguiente lección vamos a crear las formas básicas de nuestro icono de aplicación en Illustrator. Pasemos a la siguiente lección. 26. Diseño de forma de vidrio en Adobe Illustrator: Empecemos a diseñar nuestro icono de aplicación. En primer lugar, vamos a diseñar esta forma de gota. Esta forma de gotita ya está disponible en las formas básicas de Photoshop. Puedes hacer click aquí. Puedes ver en el panel Formas, si vas adelante y seleccionas las Todas las formas que vas a ver. Aquí hay una gotita. Déjame mostrarte. Aquí está. Además, tenemos este corazón por aquí. Para estas dos formas, no las vamos a dibujar en Illustrator porque creo que si ya tienes una carta, no deberías volver a construirla. Entonces tenemos estas olas. Nos quedan con estas olas y este ícono de vidrio o contenedor. Esta forma de vidrio y esta forma de onda, estas ondas de agua, las vamos a diseñar en Illustrator. Vamos al Illustrator, y voy a configurar Illustrator algunas configuraciones de acuerdo con estas pautas de diseño y nuestro sistema de cuadrícula. Entonces lo vamos a diseñar. Pasemos a Illustrator. Ahora, he abierto Illustrator. Si vas a una Edición y Preferencias, ve a General. Lo que hice aquí es en las Preferencias, he establecido este incremento en dos píxeles y Radio de esquina en 16 píxeles. Todo está en números pares, o puedes ver esta cuadrícula está construida en 16 píxeles. Es realmente bueno porque tu icono principal se va a convertir en muchos tamaños más pequeños. 16 es divisible por 2 muchas veces. Esto es una cosa. Después ve a Guías y cuadrícula, y cuadrícula cada 32 píxeles y subdivisiones cuatro. Es así como he establecido mis cuadrículas y los incrementos de píxeles de mi teclado. Estos son los ajustes que debes hacer para tu Illustrator. Presionaré “Ok”. Ahora, vamos a abrir un nuevo archivo, “Nuevo”. El tamaño será de 512 píxeles, porque es el tamaño principal. Es del tamaño más grande, y usa el Modo RGB. Vamos a diseñar para dispositivos digitales RGB. El modo de vista previa debe estar en píxeles, Efectos ráster debe ser una pantalla. Alinear Nuevos Objetos a Pixel Grid es mejor si revisas este porque tus artículos o tus elementos de diseño se van a pegar a las líneas de la cuadrícula. Entonces esto es mejor para una mejor alineación. También, vamos a cambiar a Pixeles, porque estamos diseñando todo en píxeles. Presiona “Ok”. Aquí tenemos nuestro lienzo. Vamos a acercar y alejar. Como puedes ver por aquí tenemos nuestra cuadrícula dispuesta, es más fácil diseñar de esta manera. Ahora, vamos a dibujar nuestra forma de vidrio. Vamos a agarrar nuestra Herramienta Pluma. En primer lugar, vamos a dibujar sólo una forma simple, líneas rectas. Entonces lo vamos a ampliar por aquí. Líneas rectas, así. Haga clic por aquí, y haga clic por aquí, y luego haga clic por allí. Tenemos sólo un cuadrado, o como se puede ver un rectángulo. Vamos a presionar la tecla “A” de tu teclado para seleccionar esta Herramienta de Selección Directa. Vamos a seleccionar primero este. Voy a moverlo 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Entonces 10 veces por aquí. Creo que se movió 20 píxeles, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Así. Si quieres moverlo más, puedes moverlo más. 1, 2, 3, 4, 5, 6, 7, y 1, 2, 3, 4, 5, 6, 7. Casi tenemos una forma muy bonita de este vaso por aquí. Lo que vamos a hacer es que vamos a dar la vuelta a estas dos esquinas. Si quieres rodearlos, puedes redondearlos. Tan solo una forma simple de vidrio recto, puedes dejarlo así. Lo que voy a hacer es volver a presionar “A”, y voy a seleccionar esta esquina por aquí. Se puede ver por aquí, hay un pequeño icono por aquí que es éste. Siempre que pase el cursor sobre este punto, puedo arrastrarlo así o hacer clic en él. Si haces doble clic en él, puedes ver aquí está el radio. Voy a ponerlo en 32. También este, voy a hacer doble clic y ponerlo en 32. Todo está en números pares. Hay una cosa más. Ve al Stroke y hazlo por lo menos 32 píxeles. Así, muy grueso. O si lo deseas puedes ir a los 24 píxeles, pero no menos de 20 píxeles. También mantén esto en números pares. Esta es nuestra forma principal. Si lo deseas, solo puedes quitar este color interior por aquí y mantener este trazo por aquí. Tenemos este derrame cerebral. Si quieres mover el trazo por dentro o por fuera, puedes moverlo por aquí así. Se ve bien. Si quieres hacer algo como esto, alinea el trazo en la posición exterior, en el medio o en la que quieras. Yo lo dibujé aquí así, así que voy a mantenerlo así. Nuestra forma principal de cristal está hecha. ¿ Por qué lo hice en lienzo de 512 y 512 píxeles? Porque nuestro icono principal va a ser 512 por 512. Necesito ver cuánto espacio va a tomar. Si necesito puedo ampliarlo pulsando “Shift” y “Alt” o “Tecla de opción”, y ver dónde puedo hacerlo cuanto más grande. Además, puedo quitar el trazo si quiero, así. Es para ver cuánto espacio va a ocupar. Esta es realmente buena forma. hace una sola forma. Nosotros hemos creado esta forma por aquí. Voy a guardarlo en el Escritorio. Ya lo he construido, así que no te preocupes por ello. Forma de vidrio. ¿ Por qué construí estas formas en Illustrator? Porque el Illustrator es básicamente la herramienta real para todos estos objetos vectoriales y rincones agradables, nítidos, y realmente buenos. Photoshop es un software de ráster, por lo que va a mostrar algunos problemas. Como bordes dentados o algo así. Además, se puede ver por aquí el trazo es un poco ni siquiera así que voy a hacer que sea un número par, tal vez 32. Ten en cuenta que todo es siempre diseño en números pares por lo que es un ajuste perfecto. Pasemos a la siguiente lección. Vamos a diseñar nuestras formas u ondas de agua. 27. Diseño de ondas de agua en Illustrator: En esta lección vamos a crear estas hermosas olas de agua en Illustrator. Entonces entrémonos en el ilustrador y empecemos a construir esta forma. Ahora, de nuevo, voy a crear un nuevo archivo con las mismas dimensiones, 512 píxeles por 512, RGB, 72 píxeles de pantalla y modo de vista previa de píxeles y pulsar “Ok”. Voy a encender mi grilla por aquí. No importa mucho de la cuadrícula, pero te ayuda a usar la herramienta de plegado con mucha facilidad. Es muy fácil usar herramienta de plegado como esta. Voy a arrastrar mi esquema de color por aquí. Voy a abrir y se puede ver qué aquí, Olas de Agua Deformadas. Tengo este esquema de color. Si vas a este “Muestres”, puedes ver por ahí lo he cargado por aquí. Si no lo tienes por aquí, puedes cargarlo por aquí. Presionas “Otra biblioteca” y vas a “Escritorio” o donde hayas guardado este archivo, y Waves de agua y “Abrir” y se cargará por aquí así. Puedes arrastrarlo por aquí así. Todo listo lo tengo por aquí, así que voy a usar estos cuatro colores. He cargado estos cuatro colores en mis muestras. Si no sabes cargar, he mostrado todo listo que necesitas cargar estos. Se puede ver por aquí Olas de Agua Deformadas. Si hago click aquí puedes ver, se va a cargar mi biblioteca. Voy a compartir este archivo de esquema de colores contigo, así que no te preocupes por ello. Aquí están mis colores dispuestos y este es mi archivo o lienzo principal. Voy a agarrar mi herramienta de bolígrafo. Solo piensa que este es tu icono principal de la app. Voy a empezar a dibujar por aquí, tal vez desde este punto o desde este punto. Si quieres ser muy preciso, puedes dibujar desde aquí y dar click aquí así. Arrastra y asegúrate de que tu arrastre hasta los extremos de estas pequeñas cajas. puede ver que ambos son iguales a ambos lados y se van y luego voy a dar click una vez por aquí o por aquí. Por aquí tiene sentido. Es realmente simétrico, así que voy a dar click aquí. Voy a repetir esto una y otra vez. Perdón. “Control Z” o “Comando Z” para volver atrás. Entonces lo voy a volver a hacer y voy a dar click aquí. Ahora, vamos a dar clic fuera de este lienzo así sólo para llenarlo porque vamos a recortar esta forma en otra forma, que es nuestro icono principal, o tal vez vidrio o algo así o incluso corazón. No necesitamos precisión por aquí. Voy a dar click en esto. Vamos a quitar el trazo. No necesitamos ningún derrame cerebral por aquí, así que asegúrate de no tener ningún derrame cerebral. Ahora selecciona esta capa y vamos a ir a Muestres, y vamos a usar este color. En realidad se ha seleccionado el trazo, así que me voy a desplazar a éste. Es nuestro color de primer plano y remueve el trazo de nuevo y vamos a usar este color por aquí. Voy a presionar mi tecla “Opción” o “Alt” para duplicarla así. Simplemente arrástrelo por aquí, arrástrelo hacia abajo. También puedes pulsar “Shift” para que se alinee en la misma línea. Aquí tenemos el segundo. Pasar al segundo color y luego repetir esto una y otra vez. Vamos a seleccionar el tercer color, que es este color nítido. Vamos a crear otra copia, que es la última, y vamos a seleccionar este color más oscuro. Se puede ver que hemos creado nuestras olas. Son un poco puntiagudos. Si quieres algún cambio en ella o algún drama agregado a esta forma, lo vas a distorsionar. Para la distorsión, hay muchos efectos. Al igual que puedes ir a “Distort & Transform” y puedes usar este zigzag. Habilita la vista previa y hazla suave y reduce las crestas de tamaño por segmento cero, porque todos listos tenemos crestas. Se puede ver por aquí, estas son ondas totalmente diferentes. Se puede jugar con el tamaño. Cualquiera que sea el tamaño que te guste, puedes seguir adelante con él. Puedo ir con dos o tal vez un punto. Depende de ti. Estas son ondas totalmente diferentes. Hay un efecto más que usé es ir a “Transformar” y ir a “Cizalla”. Usé cizalla porque los voy a deformar. Voy a demostrar que estos se están moviendo. Yo uso este ángulo. Yo uso este ángulo junto con, supongo, 60 para este eje. Veamos la vista previa. Mis olas se han esquilado o se han movido, deformado. Este es el propósito principal, mientras estás creando tus elementos de icono, puedes deformarlos o utilizarlos. Crea algún interés en ello. Haga clic aquí así. Intenta experimentar con él, si te gusta algún ángulo por aquí, puedes usar eso. También podemos moverlo en el lugar así. Ver el efecto qué efecto básicamente viene. Hay pocas cosas más como si quieres esquinas redondeadas o algo así, puedes ir a este “Stylize”, y puedes redondear las esquinas. Vista previa. Entonces diez puntos o tal vez 20 puntos o lo que puedas ver por aquí. Ahora las esquinas son redondeadas y se ven muy lisas y muy bonitas. Hay muchas formas de utilizar estas ondas de agua y tratar de redondearlas o tratar de crear variación con deformarlas o usar algunos otros efectos como este. Te mostré este zigzag. También puedes usar estos otros efectos como esta “Onda”. Si voy a esta ola, lo siento, no he seleccionado ninguna capa ni ningún objeto. Voy a ir a esta “Wave”. Veamos qué nos va a mostrar. Ahora se puede ver que hay más drama dentro. Pocas olas son altas y pocas son muy bajas. Puedes usarlos así. También puede seleccionar capas individuales. Si quieres meter alguna variación en esta o ésta, puedes seleccionar ésta e ir a este efecto de onda e intentar doblarla por aquí. A lo mejor puedes usar algo como esto. Ahora puedes ver aquí tenemos una diferencia mucho más como esta. También puedes seleccionar este y usar el mismo aplicar. Tenemos algunos afectos diferentes aplicados sobre por aquí. Puedes guardar la forma de esta ola y podemos usarla en nuestro ícono final de la app. Vamos a recortar estas cuatro ondas en forma de corazón y gotitas o incluso en nuestro vaso. Esto termina nuestra creación de formas principales, nuestra principal parte Illustrator de este ejercicio. Yo lo voy a guardar y vamos a pasar a la siguiente lección. Veamos qué podemos hacer en Photoshop finalmente, para convertir estos y recortar estos en bonitos iconos de la aplicación. Mantente atentos y si tienes alguna pregunta, no dudes en preguntarme. Siempre estoy aquí. Te voy a ayudar en todo. Si no sabes mucho de Illustrator, te puedo guiar por dónde conseguir tutoriales o tal vez buenos cursos sobre lo básico de ilustrador. Pasemos a la siguiente lección. 28. Diseño de ícono de corazón: Ahora vamos a entrar en acción y vamos a agarrar estas olas y vamos a traerlas a Photoshop. Vamos a crear primero el icono del corazón y luego el de la gotita. Ambos son básicamente iguales. Voy a crear el corazón uno luego te voy a dar el uno de gotita, icono de gota, icono de aplicación para el ejercicio. Lo que vamos a hacer es que vamos a seleccionar todo. Control A y lo vamos a copiar y luego vamos a cambiar a Photoshop. Aquí tenemos esta plantilla de icono de producto Android. Estoy usando este 2.0 el cual es libre uno de apply pixels. Anteriormente era appicontemplate.com. del lado derecho se puede ver por aquí tenemos 512 y editarme y guardar. Haga doble clic en esto. Es capa inteligente. Si no sabes lo que es un objeto inteligente o una capa inteligente, entonces necesitas ver mi otro curso. En primer lugar vamos a ir a esta plaza. Enciende la rejilla y vamos a esconder todo esta glifia y además voy a ocultar este fondo, y con estos bordes, y este también. Lo que voy a hacer es que voy a seleccionar esta herramienta, esta herramienta de forma personalizada, y voy a seleccionar mi corazón por aquí. No es mi corazón, pero es del tipo de algún Photoshop. Lo dejó por aquí. Vamos a hacerlo, si no ves este corazón por aquí, puedes seleccionar todos estos y van a mostrar todas las formas. Estas son las formas por defecto con Photoshop. Voy a dar clic a este corazón y lo vamos a utilizar por aquí. Presiona “Shift” mientras lo arrastras por aquí. Si quieres un poco más, creo que también puedo dejarlo si quiero ampliarlo o hacerlo fuera de proporción. Así. Esto se ve bien. Ahora voy a usar esta rejilla. Voy a dimensionarlo, Control t o Comando t, y voy a dimensionarlo hasta las esquinas de estos círculos. Se ve realmente bien, buenas proporciones. Estas cuadrículas básicamente nos van a ayudar a construir un icono proporcional. Se ve muy bien equilibrado y agradable. Voy a centrar alinearlo. Este es nuestro icono o forma principal del corazón. Entonces lo vamos a mover al blanco, color blanco. Ahora el siguiente paso es que lo vamos a anular la selección y vamos a pegar nuestra capa copiamos nuestro objeto, copiamos de Illustrator. Cuando presionamos “Pegar” o “Control v” o “Comando v”, vamos a utilizar este objeto inteligente. Así, y lo vamos a alinear aquí, así. Ahora se puede ver en el lado derecho el icono del corazón está por aquí, y el objeto inteligente, nuestro vector inteligente objeto transportado desde Illustrator está por aquí. El truco simple es que vamos a presionar “Opción” o “tecla Alt” y meternos entre estas dos capas y hacer clic una vez, y se va a recortar dentro de esto. Ahora es así como vamos a recortar ocultar esta cuadrícula. Ya puedes ver nuestro icono del corazón está casi listo. Pocas cosas más que podemos hacer. Ahora está recortado. Podemos moverlo, como tal vez necesitemos, lo siento, Control t y podemos rotarlo así. A lo mejor así. También podemos redimensionarlo así. Se ve realmente bien, tal vez algo así. Estas olas se ven realmente geniales. La parte divertida es que dejan todo por aquí. Ahora bien, si veo algún problema, como si quiero, conseguir más distancia entre estas capas, voy a hacer doble clic en él y se va a abrir en Illustrator. Yo sólo puedo arreglarlo así. Voy a moverlo así, mover éste un poco abajo así y Control s, cerrar y se va a actualizar en Photoshop al instante. Esto es realmente genial que puedas trabajar tanto con Illustrator como con Photoshop al mismo tiempo. Voy a volver a hacer doble clic y voy a conseguir esa distancia mejor. A mí me parece un poco raro. Vamos a Photoshop. Es realmente genial. Si quieres moverlo más hacia abajo, puedes usar algo como esto. Además, puedes reducir el tamaño, tamaño de las olas, así. Ahora creo que nuestro icono principal está casi completo. Ciérralo y haz clic en “Sí” para guardar. Si vuelves a este Illustrator, lo siento, plantilla de icono de producto Android, puedes ver tu icono de aplicación por aquí. Realmente se ve genial en todos los tamaños. Muy crujiente, muy agradable. Se puede ver aquí algo dentro de esta cosa, lo vamos a quitar. Creo que es alguna capa terminada. Estas son capas terminadas y brilla. Si quieres usarlos, necesitas arrastrar tu diseño. Voy a agruparlo. Este es mi diseño, y lo voy a agarrar y quitarlo hacia abajo por aquí, donde teníamos esto. Voy a darle click y así. A lo mejor por encima de esto o por debajo de esto, así. Yo lo voy a quitar, no sé que está viniendo dentro de esta glifia. Yo lo voy a mover por aquí. No sé por qué está usando algún tipo de cuadrado por aquí. A lo mejor necesito moverlo fuera de esta atención. No estamos usando este cuidado, pero estamos usando básicamente el círculo por aquí. Si quieres, puedes moverlo al área del círculo por aquí así. Voy a usar el círculo en lugar de esta plaza. Me he movido por diseño por aquí y necesito que mi diseño se mueva aquí así, y voy a esconder la base. Es perfecto, y voy a esconder la rejilla. Esto se ve genial. No sé por qué estaba mostrando algo de fondo. Había algunas capas, muchas capas. Asegúrate de que todo sea perfecto. Si quieres el alfa y la beta por aquí, puedes usarlo. Si abre esta carpeta, puede usar versiones beta o alfa si lo desea. Entonces tu icono de aplicación será así. Yo lo prefiero sin nada. Este es nuestro icono principal. Hemos diseñado nuestro icono principal. Ahora por extraer todos estos iconos, te voy a mostrar todo en la última lección. Mantente atentos. En la siguiente lección vamos a crear el icono de la app de ese vaso con el agua, y estaremos usando otra plantilla. Pasemos a la siguiente lección. 29. Finalización de ícono en plantilla de Photoshop: Ahora en esta lección vamos a utilizar nuestro icono de forma de vidrio que creamos en Illustrator, y vamos a traerlo en Photoshop y vamos a utilizar otra plantilla de icono de aplicación, que es Material Design Icon Template y es totalmente gratis. Son muy pocos los problemas con él, pero aun así creo que es uno de los mejores y es gratis. Entonces vamos a empezar con este icono en blanco y ahora si abres el panel de capas laterales derecho y vas a estos iconos en la parte inferior, vas a ver este 1080 y dice, edita. Vamos a hacer todo en esta área haciendo doble clic en este “Editar” y básicamente es un objeto inteligente. Ahora vamos a crear éste. Vamos a ir a Illustrator y vamos a agarrar esta capa, diseñamos esta forma de vidrio y la copiamos. Lo vamos a pegar por aquí en Photoshop como objeto inteligente “Control A” y también podemos usar esta cuadrícula con precisión así. Por lo que realmente me gusta esta grilla. Puedes ver todo aquí utilizo estas líneas interiores para alinear este icono de la app y este cristal. Voy a esconder esta grilla. Si tengo razón, voy a usar mi pequeño eclipse, lo siento. Voy a usar mi gran eclipse y si es color es otra cosa, haz doble clic en él y usa el color blanco. Elimina todos los afectos sobre ella. Entonces si tiene trazo o la superposición de color o sombra de gota, solo quítalos. Además, si ves por aquí los colores no están funcionando, asegúrate de que tanto estas opacidad como relleno estén ajustadas al 100 por ciento. Entonces eso es todo y ya hemos usado este. Ahora vamos a ir de nuevo a este Illustrator, y vamos a abrir nuestras olas de agua, copiar estas. También los vamos a importar en Photoshop, pegarlos por aquí y ya los hemos pegado todos aquí así. Lo que vamos a hacer es que se van a poner detrás de esta forma vectorial, así. Ahora selecciona este objeto inteligente vectorial y pulsa “W” para seleccionar la fuente mágica en Photoshop y selecciona esta sección interna de este objeto inteligente vectorial. Vaya a seleccionar, modificar y expandir la selección en un píxel. Voy a crear otra capa por aquí como esta capa uno. Presiona “G” y vamos a conseguir algo de color por aquí, que va a ser blanco. Entonces así, tenemos color blanco dentro de esto y lo que básicamente, estoy tratando de hacer es que voy a recortar esto dentro de esta capa interior. Entonces voy a recortar esto con la tecla de opción Alt y así es como se ha recortado. De verdad que se ve genial. Entonces si quieres usar algunas olas de agua, puedes contraerla y expandirla lo que quieras. Se puede ver por aquí, ahora estoy usando algo como esto. Además, si ves en mi diseño original del icono, eliminé el cuarto color por aquí. Entonces lo que hice es hacer doble clic en esto y quitar esta cuarta capa y “Control S” o “Comando S” y voy a volver. Se puede ver que sólo tenemos tres colores. Si quieres moverlos más, puedes moverlos así. Haz que la distancia sea un poco más grande, así. Porque es un vaso se verá realmente genial si tenemos más distancia. Además, puedes rotarlo tal vez para crear alguna atracción o algo así. Entonces tal vez algo más cercano a esto, muévelo así o algo así aquí. Por lo que estas afinaciones finas, van a tomar más tiempo. Para mí, al menos eso toma más veces hasta el momento en que no estoy satisfecho. Por lo que solo sigo moviendo estos por ahí. Entonces así es como va a ser nuestro ícono de la aplicación. Ahora también puedes usar la transparencia en este gran eclipse. Entonces voy a poner esta opacidad al 50 por ciento, así. Entonces una cosa más creo que está un poco arriba, así que lo voy a mover un poco hacia abajo. Ahí están mis tres capas. Por lo que sólo trataré de agruparlos. Es mejor que tu diseño esté en un grupo y puedas moverlo hacia abajo así y “Control S” intenta usar la cuadrícula, mira dónde está en la cuadrícula. A lo mejor, podemos ampliarlo un poco más. Usa más área a su alrededor. Ocultemos esta cosa “Control S” y veamos cómo se ve. Así que vamos a acercar y se ve realmente genial en todos los tamaños. Se puede ver por aquí, este es el icono de nuestra aplicación. Tenemos esto en este punto de vista. Entonces tenemos como este en nuestra MyApp Store en Google App Store y se ve realmente genial en nuestra pantalla principal y creo que eso es todo. Ahora, para ustedes chicos, les voy a dar el reto de crear el icono de gota usando la misma técnica. Puedes subir esos diseños en la URL que voy a compartir contigo. Entonces sube tu trabajo por aquí. Voy a evaluar tu trabajo y veamos cómo te vas a llevar a cabo. Entonces que empiece el reto. 30. Exposición de todos los tamaños de iconos para dispositivos de Android: De acuerdo, ahora en esta última lección, voy a mostrar cómo extraer todos estos iconos, de ambas plantillas. Por lo que he utilizado esta plantilla de icono de Diseño de Material y plantilla de icono de la aplicación Android 2.0. También puedes descargar la versión 3.0., pero el método será el mismo, para este tipo, Michael Flarup, ha diseñado archivo de acción. Si vas a estas acciones, si no ves acciones por aquí, puedes ir a Ventana y activar estas acciones. En las acciones, he copiado esas acciones por aquí. Si no ves estas acciones, puedes hacer clic en esto y puedes cargar acciones. Acude a estas acciones de carga y navega por ese archivo. Tengo esta plantilla de icono de producto Android 2.0. Archivo ATN. Los archivos de acción tienen esta extensión ATN. Necesitas cargarlo y será así. Una vez que hayas cargado esto, asegúrate de tener tu icono. No hay nada a su alrededor ni nada extra a su alrededor como este crear apagarlo o cualquier sombra o problema. Asegúrate de que esté bien. Entonces lo vamos a usar en este archivo. Entonces ve a este archivo y solo tienes que hacer click en esto y, ve a esto. En primer lugar es exportar todos los tamaños, esta es la acción básica. Esta es la carpeta de acción, si haces clic aquí, puedes ver que la carpeta se está cerrando y abriendo. Ahora haz click en él y pulsa play y vamos a ver este diálogo y lo vamos a guardar así. Voy a guardarlo en el escritorio. A ver, tengo muchas carpetas abiertas. Estos son los tamaños que ha generado 512, 192, 144, 96, 72, 48. Ahora falta una talla, que es 114. Si quieres generarlo. No te preocupes por ello. Voy a usar este 512 y voy a importarlo aquí así y voy a exportar el tamaño, que va a ser 114, así y ahorrar. Es así como vas a crear el tamaño 114, que falta en esta plantilla. Ahora lo voy a arrastrar dentro de esto y tengo un conjunto completo, 114, 512, 192, 144, 96. Entonces este es 114. Entonces así es como vas a crear el tamaño que falta por aquí. Es solo un poco de dolor de cabeza, pero creo que vale la pena si no necesitas gastar $10 al mes. Ahora llegando a esta plantilla de icono de Material Design, está construida sobre la misma tecnología. Entonces lo que vamos a hacer es que sólo vamos a usar File Export, Save para web y se va a cargar de la misma manera que vamos a guardarlo así, guardar y estos son todos los archivos. Voy a reemplazarlos y veamos las imágenes. Entonces tenemos este ícono 512, creo que acabo de seleccionar la plaza. No lo sé. Déjame ir a esto. Entonces lo que dice es que esconden este fondo. Así que intenta ocultar este fondo antes de exportar, así. Esto es realmente bueno si sabes hacerlo. Guardar y guardar y reemplazar. Por lo que ahora puedes ver que tengo estos iconos y son transparentes por los lados. Entonces si lo arrastro en Photoshop, va a ser transparente desde todos los lados. Realmente me encanta esta zona transparente alrededor de esta zona blanca. Se ve realmente genial incluso en la captura de pantalla por aquí. Creo que si lo hice por uno de mis clientes, podría haberle cobrado al menos $200 por estos iconos de la app o tal vez más. Ahora esta es la última lección para este curso. Tu reto es crear icono de aplicación similar con una gota usando la forma de gotita. Si tienes algún problema, avísame. Esta es una escala realmente sólida. Creo que normalmente, cantidad mínima para un ícono de app debes cobrar al menos 100 dólares por crear un icono de app, porque vamos a crear como cinco o seis tamaños para todas las diferentes plataformas o resoluciones para Android o incluso para iOS, vas a crear para tres o cuatro tamaños. Entonces voy a tratar de actualizarlos chicos o si tengo algo nuevo, lo voy a agregar a este curso. Esta es la última lección. Tengo ganas de ver tus diseños y estaré esperando. Pasemos a algunas nuevas habilidades impresionantes. No echa un vistazo a mis otros cursos y adiós, cuídate y que tengas un buen día.