Diseño de aplicaciones móviles desde cero con Sketch 3 - Part 3 (Diseño de la interfaz avanzada)

1. Bienvenido a la parte 3: Está bien. Bienvenido de nuevo. Esta es la tercera parte de este curso de diseño de aplicaciones móviles, Así que asegúrate de haber tomado parte una y segunda parte antes de comenzar esta en esta sección. Tercera parte. Trabajamos en la identidad visual y el diseño personalizado de nuestra app que nos permitirá profundizar en las funcionalidades de boceto avanzadas de diseño de mejores prácticas. No puedo diseñar en muchas otras cosas. Si no lo has hecho No sé eso desafía para el curso en la primera parte o en parte para asegurarte de que lo hagas. Es tu grifo en el proyecto de clase. Y ahora te voy a dejar otra vez con Adrianne. Así que diviértanse, chicos. 2. Inspiración y tendencias: Hey, bienvenidos a la segunda parte del curso. No es que él nunca arriba corriendo con diseño estándar. Es hora de empezar a pensar en su identidad visual. Cómo se verá sentirá como qué colores y teléfonos iban a usar. Este es un concepto visual de la app. Una gran parte de este proceso es encontrar inspiración. La inspiración no es un regalo de los dioses que te viene de la nada. El mejor modo de inspirarse es mirar otros trabajos. Y si sientes que esto es robar a otras personas, yo D. Bueno, es como el punto. Como oradores que dijeron Los buenos artistas copian grandes artistas roban. Y si, porque dicen que creo que estamos bien para ir, hay mucho camino fuera para recolectar informaciones en Internet. Una buena y fácil es tener un tablero e interés donde te remitan referencias que te gustan. También te recomendamos tomar capturas de pantalla de verte como cuando estás navegando app en tu teléfono. Crear tu propia colección es un refrán continuo. Mantén siempre los ojos abiertos. Hay muchos lugares donde puedes encontrar inspiración en Internet. Echemos un vistazo a algunos de los mejores uno Dribble Dribble es el show hasta la página web. Para los diseñadores, una gran cantidad de diseñadores increíbles diseñadores de aplicaciones móviles diseñadores gráficos Illustrators están muy activos en esta plataforma y suben su trabajo en marcha todos los días. Puedes ambos para las tomas populares, buscaré temas específicos. Ahí hay un gran collar herramientas que te muestran el color principal utilizado en el tiro. Si encuentras un diseñador cuyo, donde quieras, puedes explorar sus tomas e incluso seguirlas si están creando una cuenta, cualquiera cree una cuenta, pero debes ser invitado para poder empujar. Quieres diseños. También puedes checar ser de ahí dot net, que también es un gran escaparate de diseño sitios web. Ya que estamos trabajando en aplicación móvil, hay algunos sitios web que muestran capturas de pantalla fuera más por como ustedes chicos y patrones de flujos , P t T R y s dot com. Por lo general puedes bro capturas de pantalla por tareas o tú yo patrones. Entonces digamos que estamos trabajando en el perfil en nuestra app. Podemos echar un vistazo a cómo otros APS muestran los perfiles de usuario. El menos sitio web quisiera compartir contigo es poco grandes detalles que vienen. Es una sangre que reúnefelón inteligente, detallado, felón inteligente, detallado diferentes sitios web, APS y uso Fluye. No siempre se trata de diseño, pero es realmente impresionante ver hasta dónde pueden llegar los diseñadores. También te recomiendo que te inscribas en el lado Bardet Io Sidebar fue creado por el tal acuerdo, si un muy cool a tiempo para diseñador. Se trata de una lista de los cinco mejores enlaces de diseño del día que se te envían cada mañana por correo electrónico. Te mantiene al día con nuevos productos, nuevos artículos y todo tipo de cosas relacionadas con el diseño. Entonces vamos a compartir con ustedes lo que hemos notado de las tendencias de hoy. Signo inapto en la U Exida Vemos cada vez más gestos. Los gestos son interacción que haces con los dedos solo debes esperar siendo tarjetas, por ejemplo, En el lado estadounidense, diseño plano ahora es obligatorio, pero también verás muchos AP para intentar ser pantalla completa con el contenido. Snapchat, por ejemplo, tiene una UX realmente extraña, pero una vez que te gusta el contenido, siempre es swing completo. Entonces te metes totalmente en ello, poniendo algunos difuminando tu fondo. Una de las grandes características del sketch se encuentra ahora en la alternativa a un diseño de sprint de doctrina en el fondo. Por último, verás cada vez más iconos de contorno en lugar de pictogramas en negrita. Un gran ejemplo de eso es urbano ser el último rebranding total. Ahora que sabemos dónde encontrar inspiración, aprendamos a dominar boceto para poder sobrellevar. Él las cosas que te gustan e incluso crea tus propias ideas. Esto va a ser en la siguiente lección. 3. Colores y recolector de colores: Bienvenido de nuevo en este video, hablaremos de colores. Un buen diseño debe funcionar sin ningún color. Esta es la razón por la que utilizamos las licitaciones del IRS en nuestra primera versión. No obstante, color es uno de los primeros elementos del diseño que será percibido por el usuario, y por lo tanto juega un papel importante en la percepción estética de su diseño. Pero antes de tratar nuestro color en paletas de colores, quiero mostrarles cómo funciona el selector de color. En boceto, abre un nuevo archivo y dibujó un cuadrado. Ahora da click en el botón de campo y dale el color que más te guste. Mientras mueves el recolector de color en la boleta, verás los números a continuación moviéndose. Esos son los perímetros que definieron el color. El viejo dice lo mismo, pero de diferentes maneras. Es como decir la misma palabra en diferentes idiomas. Boceto sobre la U tres. Hex es un código único de seis dígitos y letras que definen tu color. RGB es una forma de componer color equilibrando los son que significa rojo G para un verde y ser para el valor azul puede estar entre cero y 235. Entonces si tienes Oportunidad, Faisal, Fred y cero de verde y azul. Te levantas, lees. Si tenías 235 de azul, te pones morado y así sucesivamente. Si haces clic en el botón RGB, convertirás RGB en HSB. H significa quién? El Quién es un color en su forma pura. Cuando nos referimos a colores como rojo, azul, amarillo naranja, donde usualmente se habla de quién es quien se renta de 0 a 3 60 se puede ver dónde están aquí en la escala de color s stand de saturación. Se refiere a la pureza del rango de valores de saturación de la OMS desde 0 200 que corresponde al porcentaje de saturación del color. Cuanto más color esté saturado, más cerca estará de lo puro que menos esté saturado, más cerca está del blanco. Por último ser sinónimo de brillo. Es básicamente cómo como u oscuro quién es como brillo de saturación Rango de valores desde 0 200%. Es posible que a veces también tenga que lidiar con colores que están definidos por C. M. Y que. Este perfil de color está dedicado al diseño de impresión. Si una marca te da pareces una referencia por su branding o una muestra de pontón ir a color que tenía que ser que vienen a convertir en el idioma que quieras. Última sensación que puedes editar es la A que significa Alfa. Es la opacidad. El valor puede estar entre cero y 100% Así que si creamos otro cuadrado frente a horas y cambiamos de capacidad se podrá ver el 1er 1 a través del nuevo. Tenga en cuenta que el cambio de capacidad no modifica el valor de su ex o RGB. Se trata de una información adicional. Entonces si quieres darle información clara a, al desarrollador del diseño, equipo debería darles el hex o su RGB y la transparencia si no es 100% el punto de esta escucha era hacerte entender cómo funciona el selector de color. He intentado hacerlo lo más sencillo que pude, pero si lo encuentras a técnico, no te preocupes. Este le impide usarlo y entender lo que sigue acerca de cómo a los eruditos. Tu tarea para esta lección es jugar este juego por medio de facción. Crean juegos increíbles y divertidos. Basta con dar click en este enlace en la siguiente lección verá cómo elegir. El color estará usando app indie 4. Buena práctica: Paletas de colores: Oye, ahora que sabemos cómo funciona el recolector de color en boceto, deja pasar el color voluntad. El uso de nuestra aplicación en esta lección creará un esquema de color. Collar brillo es básicamente la elección de colores que estará utilizando en nuestros diseños. Estos son tres ejemplo de esquemas de color. Veremos dos formas de llegar a la escena universitaria. El primero es elegir un color base y completar la vergüenza con tintes de este color y tonos de gris. Es la más fácil y a menudo la más eficiente. Sólo un poco de notas al margen aquí para definir el término que acabo de usar. Si el color se hace más claro ocultando blanco, el resultado se llama carpa. Si se agrega negro, la versión más oscura se llama sombra, y si se agrega gris, el resultado es un tono diferente. Un segundo marco que puedes usar para llegar a una coalición Reacher podría ser primero, seleccionar una persona que llama base, luego seleccionar el color secundario usando principios de armonía y finalmente creído avergonzar y solo tonos y tonos intensos. Hablaremos de este método en el siguiente video. En ambos casos, el primer paso es demasiado grande. El color principal. Normalmente es el color de tu marca. Si aún no tienes una marca o galería en mente, no hay una fórmula mágica o herramienta que la elija por ti. Pero no te molestes demasiado con eso. Basta con echar un vistazo a otros abs Brooks que diseñan en regate y escogen un color que te guste. Si realmente estás atascado, abre en archivo de boceto llamado Colors en esta carpeta de lección y elige uno de estos colores que hemos seleccionado para ti. Usemos el primer medio para crear una vergüenza simple y efectiva para la aplicación. Abre tu archivo principal. Todo el de esta carpeta de lecciones. Lo haremos en una nueva página en el mismo archivo. Haga clic en este pequeño ícono junto a la Página uno y luego haga clic en el signo más. Nuestro archivo tiene ahora dos páginas creando nuestro tablero y nombrelo colores. Crea un cuadrado y dale el color que seleccionaste. Para nosotros, será el código hexadecimal. 125688 Este es nuestro color principal. El color de la marca Instagram. Ahora duplicar el cuadrado cuatro veces y poner este cinco cuadrado al lado del otro se mantendrá el mismo que, pero al jugar con la saturación y el brillo obtendrá cinco tintes diferentes. Empezaremos con un poco de azul, que usará para elementos activos dentro de ti, dije. El saturación en 87 y el brillo en 53 luego un gris claro para elementos inactivos. Situación a tres rectitud. 67 que una saturación de gris más oscuro a cero y brillo a 33. Y por último, una situación negra o gris muy oscuro. A 12 y brillo a las 10 ya que vamos a usar este collar a menudo. Una buena práctica es agregarlas. Para usar panel de reloj. Seleccione un color, abrió la pestaña de color de campo y haga clic en más para cada conmutador. De esta manera, tendrás todo el color al alcance. Eso es todo. Hace lo mismo para tu proyecto. Crea tu propio esquema de colores y agrégalos a tu pestaña de colores. Serás mucho más producto de esa manera. El siguiente video es opcional. Se ocupa del color como principio maney y agregando diferentes colores a la vergüenza. Siéntete libre de guardarlo y volver cuando quieras. Si quieres diseñar Europa lo más rápido posible, pero si quieres agregar otros colores a tu obsceno y no sabes cómo elegirlos. Después sigue y mira el siguiente video. Te explicaremos cómo y te mostraremos cómo usar una herramienta muy útil. 5. Armonía del color (opcional): hola otra vez En el video prefacio, te hemos mostrado cómo crear un rasheem de carbón simple y eficiente. Si estás contento con eso, puedes entrar al siguiente video Si quieres más de un solo color en tu equipo y quieres saber un poco más sobre la armonía de color, no vi el resto de este video. También partimos de un color base, pero esta vez usaremos principio de armonía para escoger colores secundarios. El color rueda es partícula es útil en la creación de tipo hecho de color de nevera. Parece que el color tradicional parece que los patrones son combinación de colores basados en su relación entre sí. Las máquinas tradicionales pueden ayudarte a llegar rápidamente con armonías y palets interesantes . color monocromático parece estar conformado por diferentes tonos, tonos intensos. ¿ Quién está en un específico quién? Estos son el esquema de color más simple para crear ya que el viejo tomado del mismo aro color monocromático parece tenderse a ser unificado y armonioso. Esto los hace bastante efectivos en el establecimiento en estado de ánimo general. El inconveniente es que pueden volverse monótonas debido a la falta de diversidad de colores complementarios de quién . Parece que se basan en el color opuesto el uno al otro. en la rueda de color, por ejemplo, rojo y verde o azul y naranja. Los esquemas de color de cortesía son difíciles de usar en grandes dosis, pero funcionan bien cuando quieres algo que destaque. El color del cumplido es mejor usar más que el color de acento. No hay contracción naranja en la página. Despreciar comprar un azul será bastante efectivo. Por ejemplo, como se juega complementario se avergüenza. Mayor es uno que, además de otros dos igualmente espacio desde su complemento. Este esquema de color tiene el mismo contraste visual fuerte que un brillo de color complementario pero tiene menos tensión. Las colisiones análogas se basan en ajustes de color. uno del otro está en la rueda de color. Esquemas de color análogos se encuentran a menudo en la naturaleza. Son bastante armoniosos y agradables a la vista. No obstante, no aportan muchos contrastes. Elige un color para dominar el color medio, un segundo para soportar el color principal y el color 30 para acentos. Se puede, por supuesto, yo sólo apestas, tonalidades y tonos dicho. Ahí estás clave entre colores, cuales hablaremos de esto en segundo árbol. color del ático parece usar colores que están espaciados uniformemente alrededor de la rueda de color. Ofrecen tanto contraste como armonía. Fue uno de los colores es color dominante y los otros dos por acentos. Dos colores trágicos o dobles complementarios. Utiliza cuatro colores dispuestos en dos pares complementarios. El color rico parece fuera de sus abundantes posibilidades de variaciones, pero puede ser un poco difícil de equilibrar. Entonces, pero la mejor manera de usar una vergüenza como esta es usar un color como color primario y el otro igual como acentos. Muy bien, ahora tratemos de tomar uno de estos parecidos tradicionales y ver cómo podemos jugar con él y, aunque para hacerlo, trabajaremos con adobe color. Acude a color ese adobe que vienen. El app está hecho de una rueda de color que puedes hacer más grande o más pequeño haciendo clic en ella. Cinco colores a. exhibidos por aquí. Analistas en la rueda cinco es un buen número para empezar a trabajar en tu brillo de cuello, pero podrías terminar con más de cinco colores. Más adelante por el camino, se puede seleccionar tradicional parece análogo, monocromático y así sucesivamente y mover el color alrededor mientras se mantiene la geometría de la máquina. Y también puedes usar brillo personalizado donde puedes hacer lo que quieras, puedes elegir qué modelo de color quieres usar. Usaremos HSB porque sabemos que lo hará. Ahora veamos si podemos trabajar en Lagos Shihm. Nuestro color base es éste en el medio. Tiene una flecha blanca aquí y aquí, y podemos cambiarla haciendo clic aquí, por ejemplo, o moviéndola alrededor de la rueda en color. Podemos ajustar la saturación y el brillo para jugar con stints, tonalidades y tonos y agregar contraste a nuestros paladares. No olvides ir a conseguir algunas inspiraciones en la Web. Dribble tiene una gran característica que muestra el color utilizado en el diseño, y si hacemos click en el color, verás otros diseños que usan este color. Esto es genial si quieres ver qué colores están usando el diseñador con este color base . Si quieres ir con él a elegir por ti, elige dos colores en la paleta de material dot com y deja que suceda la magia. También puedes divertirte jugando con coolers dot Co. Se trata de una herramienta adjetiva para generar cinco sudadera vista solo tocando tu barra espacial. El mejor modo de mejorar en esto es practicar, tratar de explorar lo que hemos aprendido y llegar a un esquema de color que te guste sólo por el bien de ello. No tiene que ser para ningún proyecto específico. Simplemente disfruta jugando, diviértete. 6. Tipografía: Hola otra vez y este video tomará sobre la tipografía. Esto no es algo en lo que deberías dedicar demasiado tiempo. este momento, el proceso de tratar los textos y elegir tipografías o fuentes es realmente iterado, ya que es muy difícil elegir un teléfono sin decirlo en el contexto. Y lo mejor que puedes hacer es por lo general empezar con Helvetica y luego experimentar cuando tus diseños son un poco más avanzados. Qué es importante entender que la tipografía es tanto verbal como visual, Esto significa que la forma en que se ve el texto influye en el lector para leer o no e influye en la forma va a leer el contenido, la tipografía, el tamaño. Por lo tanto, la posición de los tecnicos puede auto o dañar su contenido. Por eso es importante tener una comprensión general de cómo funcionan estas cosas. Lo primero es lo primero. Tipografías. tipografías suelen ser a lo que se refiere la gente cuando hablas de fondos, y por favor no hagas nunca tipos de letra como lo hice en este título. El tipo de letra es un diseño para un conjunto de caracteres tienen un señuelo y los tiempos New Roman son dos letra diferentes. Por ejemplo, también veremos en un minuto que pertenecen a dos familias diferentes de tipos de letra. Entonces si esto es una tipografía, ¿qué es un fondo? Bueno, está bien usar el fondo como un nuevo tipo de cara senatorial, pero sólo para que lo sepas, telefoneé es un tamaño, peso y estilo específico de una tipografía. Existen tres familias principales de tipos de letra. Serif San, Serif y guión. Empecemos con Sheriff. Un serif es una pequeña línea adjunta al final de un trazo en la letra o símbolo, una tipografía con serif como los tiempos, New Roman pertenece a la familia estéreo. Las tipografías serias también usan una combinación de pecado y piense trazos. Las tipografías Serif parecen un poco conservadoras pero son fáciles de leer para piezas más largas. Ahora hablemos de algunos serios en francés. La palabra hijos significa sin. Es por ello que los tipos de letra resultan. Serif se llaman sans serif, a diferencia de las tipografías serif, Sunseri. Si te tienen en trazos, se ven más madre son geniales para titulares y botón. También suelen ser fáciles de leer. A diferencia de la cierta familia de tipografías llamada script, los fondos de script imitan y escriben los logotipos o titulados a menudo útiles, que no se utilizan para el texto corporal. Hay decenas de subcategorías que no necesitas conocer sobre ellas para producir un gran diseño. Pero si te interesa, echa un vistazo a este sitio web. El enlace no es descripción. Entonces, ¿cómo combinar tipos de letra? Por qué siempre es más fácil trabajar con un solo tipo de letra mezclando dos tipos de letra diferentes a veces puede dar resultados hermosos. Si quieres darle una oportunidad, evito usar dos teléfonos de la misma familia. El motivo principal por el que querrías usar otro tipo de letra es para agregar algo de contraste. Por lo tanto, utiliza segunda tipografía que no es demasiado similar a partir del 1er 1 y cambiar el tamaño, peso o color. Esto es lo que estoy haciendo con esta luz. Por ejemplo, para mi app, recomiendo encarecidamente que uses solo un tipo de cara en toda la APP. Al hacer esto, te asegurarás de mantener la consistencia y evitar lucir descuidado. Volvamos a revisar para echar un vistazo al editor de teselas de texto. El alineamiento a es algo que debes haber visto antes en palabra o en cualquier editor de texto Wits se refería al ingenio de los libros de texto. Dijo Oto. Por defecto, significa que la caja se expandirá para ajustarse al texto. Si lo dijiste para arreglar, el ingenio de la caja es fijo y el texto se expande a continuación antes de concluir este video, una palabra sobre espaciado. Se refiere al espacio entre los caracteres, la línea de texto y los párrafos. Una buena práctica es tener un espaciado entre letras 1.2 a 1.5 veces el tamaño del teléfono para texto corporal , usar una cantidad más pequeña fuera que sea, basándolo en un título que en el cuerpo un punto Y saber qué punto para eso es todo para esta lección . En el siguiente, te mostraré una gran herramienta en sauces para trabajar de manera más eficiente con pilas en tu diseño. 7. Buena práctica: estilos de texto: Bienvenido de nuevo en esta lección mejorará nuestra productividad al sentarse diferentes textiles para que pueda darle un texto. Bloquear las propiedades correctas en un solo clic. Volvamos a su archivo de jaula. Abre la de esta carpeta de clases para asegurarte de que estás al día. Bueno, detente con el nombre del perfil de usuario. Seleccione el texto en el panel derecho. Se ve que se trata de un medio Helvetica Neue 16 en azul, por encima de las propiedades del texto. deberías ver ningún textil. Haga clic en él y mayor estilo de cubierta. Nómbralo Nombre de usuario. Ahora selecciona el bloque de texto común que ves a la derecha que está en Helvetica Neue Regular en 16 y perro Gray. Haga clic en no textil y cree uno nuevo. Nómbralo. Comentario. Por último, haz lo mismo por el texto que muestra cuánto tiempo atrás se publicó la foto. Un tiempo de imagen, y eso es todo. Para mostrarte cómo podríamos usarlo. Vamos a crear una versión extendida del home feed, seleccionar el home outborda y podría ser basted. Toma el mango en la parte inferior y tira de ella abajo. Arrastra tu barra de tina en la parte inferior. Inserta el libro de texto y pon el nombre a un usuario. Digamos Claudia Schiffer, entonces la selección toma bloque. Haga clic en el panel textil y colóquelo como perfil de usuario y boom magic. El gran dicho que fue su característica es que si hiciste el textil, todos los elementos que lo use se actualizarán al instante. Si cambias el color sobre el tamaño del teléfono, por ejemplo, un buen hábito es crear un inventario de tus diferentes textiles, así que hagámoslo. Lo haremos en la segunda página de nuestro archivo, así que ve a la página dos, crea un tablero de perillas y nombra textiles. A continuación, escribe el nombre de tu diferente textil en tomas separadas bloques, derecho perfil de usuario comentario. Otra por el tiempo, les dijo con las dietas de toma apropiadas, ahora tendrás todo tu textil en un solo lugar. El desarrollador realmente apreciará. En cuanto a las tipografías, no deberías tener toneladas de textiles. Y recuerda mantener tu rocoso entre ellos. Jugar con eruditos, teléfonos y tamaño dos metros toma importancia. El mayor ejemplo en tipografía en iraquí de contenido es el medio que entra en los diferentes artículos de Bro y ve cómo se relacionan los textos entre comillas blancas, párrafos densos y subtitulado discreto. Está cerca de la perfección en esta lección. Nosotros Entonces ¿cómo configurar textiles? No es obligatorio ya que se puede basar cada bloque de texto, pero realmente te ayudará a trabajar eficientemente. Ninguno de ustedes tiene colores y texto. Vamos a través de nuestros propios iconos. 8. Dibujar iconos de dibujo: en esta sección profundizará en las posibilidades de dibujo de boceto rediseñando los conos de la barra de pestañas I. Diseñar esos iconos nos hará pasar por mucha funcionalidad, así que mantente enfocado y todo va a estar bien. En primer lugar, vamos a la página Guía de estilo del archivo Horror. Aquí es donde pondremos cada elemento usando nuestros diseños. Ya hemos puesto colores y texto. Vamos a añadir ahora son iconos. En el siguiente video, veremos cómo convertir este icono en símbolos para que cada vez que los modificas, también se modifiquen en tu página de diseño. Empezaremos con el Aegis. El icono de la cámara Instagrams icono de la cámara es un poco abstracto pero no forma parte de su identidad. Es un círculo dentro de un cuadrado, condujo cuadrado fuera 31 píxeles dijo el color a algo que se puede ver. Digamos naranja, dijo el registro de color. Cuatro. Ahora pulsa oh para dibujar un círculo, dibuja un círculo de 22 píxeles de ancho. No olvides mantener turno. Por qué crecer lento un cuadrado y el círculo haga clic una vez en, alinear horizontalmente y una vez en alinear verticalmente cuando seguro que son dos elementos están alineados por el centro vamos a hacer nuestra primera operación booleana. Las operaciones booleanas se utilizan para combinar formas juntas. más utilizados son adiciones y restas, pero casi estamos acostumbrados. Imo Selecciona tu círculo y la plaza. Ahora da click en el botón de suscripción. Esto extraerá el círculo de la plaza. Ahora tienes un cuadrado con el agujero en el medio y en la lista de capas. Los dos objetos dos surgieron en uno ahora, dibujando que un círculo de 15 píxeles de ancho. Colócala en el centro de tu plaza y aquí tienes. Tenemos el ícono de la cámara. Pongámoslo todo o en por el momento, seleccionados a formas y haga clic en Grupo. Esto creará una carpeta en The Loyalist para renombrar una carpeta. Se puede hacer doble clic más fácil en su nombre o seleccionado y pulsar. Vamos nuestro llamado la carpeta Icahn y esta cámara de la corte. Ahora es genial. Otro ícono. Vamos con la actividad y notificación. Eichel. Este icono es una combinación de una burbuja de conversación y corazón. Empezaremos con el corazón, condujo un clic de nueve por nueve círculo y arrastraremos mientras presionamos hacia fuera para competir un círculo. Un sitio colocó un segundo círculo junto al 1er 1 Deberían superponerse por dos píxeles. Seleccione los dos círculos y fusionarlos en una sola forma haciendo clic en el icono de unión. Ahora los dos círculos son elogiados a una forma, pero si hago doble clic en la forma a ella, bosquejo con sólo un yo bajo para editar uno fuera de la forma con el fin de que lo hiciera. La nueva forma en su conjunto tendrá que inundar en ella. Selecciona los dos círculos Convento y Quicken Aplanar. Ahora bien, si doble rápido en el boceto de forma considerará la forma como un elemento que podré editar. Ahora lo ha convertido en un corazón encantador. Selecciona el punto en la parte inferior del círculo izquierdo y dilatado presionando borrar en tu teclado. Haz lo mismo para el punto en la parte inferior del círculo derecho. Seleccione los dos puntos en el medio y suprimido. Descubrirás que en realidad había dos de ellos. Ahora selecciona el punto en el medio en su posición Y en el lado derecho tipo más 10. Esto hará que nuestro punto baje 10 píxeles. Ahora vamos a jugar con curvas ocupadas. Chicas ocupadas. Solía dibujar unas formas redondeadas que no son estándares geométricos. Son bastante difíciles de dominar, pero te acostumbrarás en curvas ocupadas. Cada punto está definido por uno o dos manejadores. Mover esas asas modificará toda tu forma. Tomemos un pequeño descanso de nuestro corazón y dibujemos una plaza para ver cómo dibujó esta peculiaridad la carrera y hacer doble clic en ella. Para que aparezcan los puntos de dibujo, haga clic en uno de los puntos del panel derecho. Se puede ver que ahí se selecciona la esquina de la calle. Otros tres tipos de esquinas. Merode. Tienes dos asas que son simétricas, desconectadas. Dos asas se pueden mover de forma independiente. Un S simétrico. Se trata de una mezcla entre los dos anteriores para manejar rancia forrada pero se puede mover de forma independiente lo largo del acceso. Ahora hagámoslo la plaza y volvamos al corazón. El fondo de nuestro corazón será una punta tan bien dicho para manejar recta. Significa que ahora no hay mango. Daremos mejor forma a nuestra casa. Seleccione el punto de la izquierda, la dos línea que aparece en el mango que define la forma de las curvas, la anterior curva superior definida sólo modificará la forma a continuación. Por lo tanto, seleccione un simétrico en el panel derecho. Ahora arrastró el punto del comercio de asas a continuación. Hasta que tu corazón se vea como su lleno de amor lleva a lo mismo al lado derecho. Haga clic en el punto que un simétrico y drenar arrastró el mango abajo como el otro. ¿ No es ese un corazón maravilloso lleno de amor? Puedes crear tu forma como acabamos de hacer usando el ratón, pero también puedes usar las coordenadas para manejar en el punto. Si quieres ser más preciso ahora, cuidemos las puertas de burbujas tan frescas de 29 píxeles de ancho. Da click en el casillero para desbloquearlo y dijo el odio un 28 para comprimirlo un poco. Ahora, haga clic en insertar forma y triángulo. Haga clic y arrastre por el triángulo, dijo el odio en el ingenio a las nueve. Gire los triángulos hasta el punto de punta hasta la esquina inferior derecha seleccionada para las formas y los fusionó en uno con función de unión. click en aplanar para convertirlo en una nueva forma. Ahora coloca el corazón en medio de la burbuja. Seleccione el corazón y la burbuja y haga clic en Restar. Eso es todo. Rápido en la forma en la lista de capas y nombra Icon actividad de subrayado. Ahora hagamos el perfil. Icon Tap. El icono del perfil está hecho de dos rectángulos modificados. Dibuja primer rectángulo de 25 píxeles de ancho y 11 píxeles de alto doble rápido en la forma para editarlo . Cuando sobrepases el borde del rectángulo, verás un bolígrafo con un poco de plus. Esto te permitirá agregar puntos en tu forma. Queremos otro punto en medio de la frontera superior. Para ello, mantenga el comentario mientras pasa el ratón sobre el segmento y haga clic. Esto colocará tu punto exactamente en el medio. Ahora selecciona estos nuevos puntos y utiliza el IRA en tu niño Boyd para colocarlo unas cuantas silabas de picos . Asegúrate de que las asas de tu punto estén fijadas como comida y droga uno o usaste la flecha en tu teclado del mango hasta que alcanzaron la extremidad del rectángulo. Ahora vamos a hacer la cara. Empezaremos dibujando un rectángulo, dijo el ingenio a las 11 y odian a los 14 dijo la esquina Rogers al máximo. Ahora haz clic en el botón de transformación, selecciona una de la esquina inferior y arrástrala o utiliza la flecha de tu teclado para moverla un poco hacia el centro. Juega toda la forma de la cara por encima del pecho, Alinearlos y agruparlos. Nombra este icono de carpeta. Perfil de subrayado. A modo de ejercicio, tendrás que dibujar el hogar y buscar icono por ti mismo archivo de existencia abierto En esta carpeta de lección, encontrarás los iconos bloqueados en segundo plano. Una buena idea será comenzar con un cuadrado para el ícono de casa en un círculo para el ícono de búsqueda . Pero puedes ser más creativo una vez que hayas terminado. Compitió a iconos en el archivo principal junto a los otros iconos. Si quieres omitir este paso, toma los iconos que ya hemos dibujado para ti en existencia. Archivo de caso. Ahora que tenemos, todos esos iconos los convertirán en símbolos en la siguiente lección. 9. Buenas prácticas: símbolos: hi de nuevo en esta sección usará una función de símbolo tan pronto como utilizarías un elemento muchas veces en tu app, te recomendamos que lo conviertas en un símbolo. Si lo haces, solo tienes que editar tu elemento una vez, y cada instancia del elemento en tu fichero se actualizará. También lo alentamos a los directivos. Símbolo en otra página, abra el archivo principal y vaya a la Página dos. Si hiciste seis bien, deberías tener todos los iconos retirados en puentes. Lección. Si no abres esta jaula, los archivos en esta lección de carpeta y empieza desde ahí. En Instagram, la barra de pestañas no es un fondo de perro, y todos los iconos son blancos excepto la pestaña de la cámara cuyo fondo siempre es azul. Empecemos con la cámara creció con 75 píxeles de ancho y 50 píxeles de alto, Rectangle dijo el color a Instagram Azul Coloque el ícono de la cámara en el medio. Alinearlo horizontalmente fue botón dis y verticalmente con ese. Ahora vamos a cuidar de los otros iconos se establecerán en estados para cada conos de ojos activos e inactivos, y comenzaremos con el activo crear en nuestro tablero y el nombre activo dibujó un rectángulo negro de 75 píxeles de ancho y 50 píxeles de alto duplicado de lado a lado cuatro veces. Ahora coloque los iconos en los enredos ITRI y alinéelos tanto a limones vertical horizontalmente. Perfecto. Ahora vamos a crear el estado inactivo. Duplicar todo a bordo y nombrarlo inactivo. Establece todo el fondo negro en gris oscuro con código hexadecimal en cinco 272 A. Con el fin de diferenciar instantáneamente un toque entre activo e inactivo, pondrá algo de transparencia en los iconos. Cuando están inactivos. Selecciona todos los iconos directamente en DeLay una lista del tablero Odd inactivo y dijo la transparencia al 60%. Ahora empezaremos a jugar con símbolos. Seleccione el rectángulo y el icono de inicio en el activo se aburren. Haga clic en crear símbolo. Esto convertirá tus capas de azul a un grupo morado claro en tu lista de reproducción. Significa que esta carpeta es un símbolo, así que ten cuidado cuando lo hiciste alguna vez instancia, se actualizará. Si por algunas razones específicas desea desprenderse y limitar de ser símbolo derecho, haga clic o control, haga clic en su nombre y haga clic hizo toque de símbolo. Nombra tu pestaña de símbolos en disco quienes subrayan en hacen lo mismo para el ícono de búsqueda y nombrelo pestaña subrayado de búsqueda subrayado en la pestaña de actividad pestaña subrayado actividad subrayado en y la pestaña de perfil Perfil en Hagamos lo mismo para el inactivo a bordo. Nombrar cada icono suelo Esta pestaña de regla subrayaba el nombre del icono y la puntuación fuera. Por fin hecho el icono de la cámara en sintonía símbolo y nombrelo tab subrayado cámara no en absoluto o ensambla ya bien creada tina son para dejarlo muy claro, realmente genial, y estás aburrido. Crea un nuevo a bordo y renombralo barra de tina. Podríamos copiar el símbolo del cannabis, pero todo el símbolo también están ahora en la biblioteca de símbolos. Haga clic en insertar símbolos y seleccione un símbolo de inicio. Ya sea encendido hacer lo mismo y juega una búsqueda junto a ella juega una cámara que la actividad. Y por último, la pestaña de perfil Seleccione Símbolos Olo y agruparlos denominó Barra de pestañas de navegación de grupos. Podría ser todo el grupo es común. A ver, y volvamos a la Página uno. Haga clic en la pantalla de inicio a bordo basado en un grupo con Ven envidia colocarlo en la posición correcta en el fueraborda y en listas DeLay. Deshazte de la carpeta de navegación anterior como trabajo en la pestaña de inicio en Lee. El icono de la casa tiene que ser configurado como activo. Comprueba que los demás nos desprenden. Copia este grupo y colócalo en la pizarra explorada. Cambia a casa Apagado así y la búsqueda se enciende así. Eso es genial, ¿verdad? Para terminar esta lección. Basta con seguir adelante destacando la pestaña derecha en las pantallas correctas. Eso es todo. Nuestros APS que realmente se ven como el auténtico, y sabemos cómo hacerlo ahora. El mejor modo de usar símbolo en la siguiente lección descubrirá el dióxido de catch que contiene cantos increíbles e incluso unas pocas palabras. Hablo de enchufes 10. Ahorra tiempo con complementos: volveremos. Ya hemos pasado por muchas características que se construyen en boceto. Echemos ahora un vistazo a lo que se ha construido en él. Se dice plug ins plug ins que no han sido creados por el equipo de sketch, sino por la increíble comunidad alrededor de atrapar en algún momento. El compensar y las características faltantes te ayudan a ser más productivo, organizado o simplemente divertido. A decir verdad, no he distanciado todos los enchufes que se han creado para sketch, pero entre la comunidad hay un chico inteligente y los demás que ha creado un enchufe en cuatro enchufes. Es caja de herramientas de boceto frío. Se trata de una gran app que reúne todos los enchufes, los hace fáciles de instalar y mantenerlos actualizados, ya que los fregaderos se rue se van a conseguir y vamos a empezar instalando sketch dos dólares van a sketch a buck que vienen a descargar el sketch caja de herramientas. Mejor ahora, abre el sí, instalará unos enchufes. Como puedes ver, hay muchos enchufes disponibles. Siéntete libre de hermanarlos y leer descripciones. Si no entiendes lo que hacen todos, no te preocupes, nosotros tampoco. Empezaremos instalando tres enchufes. Buscar un generador de contenido nombrado. Haga clic en la instalación. Esta nos permitirá sentir múltiples formas. Se les ejecutó imágenes en un solo clic. Bastante increíble. También busca especificaciones tecnológicas. Este generará un bloque de texto que mostrará todas las propiedades, a menudo objetos como su cuello lateral, peso de trazo, etcétera. Estás desarrollando, realmente aprecio, Finalmente entregado plug in llamado E. I Aiken Isar e instalarlo bien, tú éste más adelante en el curso. Ahora vamos a jugar con este plug in. Volvamos a bosquejar. Una buena manera de probar el generador de contenido. Se duplica la pantalla de exploración. Ahora selecciona imágenes más antiguas. ¿ Recuerdas todo el tiempo que pasamos en las fotos importadoras en esas plazas? Bueno, haga clic en enchufes y fotos de generador de contenido y haga clic en Naturaleza y Urbano y Boom en una sola toma. Tenemos fechado todo el grado con nuevas imágenes. Ahora veamos otro ejemplo. Copia el ascendente y eneldo. Todo lo que hay en él hará que una lista de personas dibuje un círculo y colocará una calumniación de texto a la derecha seleccionada a los elementos y los duplicará a continuación. Como lo harás para una lista. Hagamos cinco filas ahora. Selectivo cinco cuadros. Marcadores de posición hacen clic en enchufe en Clinton generador persona fotos y seleccionan boom femenino de nuevo 11 que sucedió. Ahora selecciona las cinco etiquetas de texto, enchufes, generadores de contenido, persigue sin nombres y selecciona hembra. Tenemos ahora un nombre aleatorio de usuarias femeninas. ¿ No es eso muy guay? Bueno, ¿lo harás? Los otros enchufes en las próximas lecciones? Pero si te sientes como un aventurero, vuelve a la caja de herramientas de boceto e instala otro plug ins en las próximas lecciones creará la guía de estilo y también practica un poco. 11. Styleguide y práctica: Bienvenido de nuevo en esta lección, vamos a ver cómo saludar a una guía de estilo. The star Guide reúne en un solo lugar toda la información de diseño fuera de tu app. A stock. Debería incluir colores, teléfonos, teléfonos, cama, márgenes y todos los elementos con su diferencia Terrazas. Debería parecerse a algo así. Se trata de un documento que siempre debes estar al día y compartir con tu equipo. También puedes imprimirlo y colgarlo en algún lugar de la oficina que ya empezamos. Fui blanco en la página dos de nuestro documento. Entonces vamos a seguir ahí. Empezaremos importando los últimos iconos personalizados necesitarán abrir el archivo llamado I conos Acciones Instagram en esta carpeta de lecciones Los dibujamos para ti. Pero si quieres desafiar tus habilidades, siéntete libre de dibujarlas por sí mismo. Podrían ser los fueraborda y les paga en la playa. Dos de tu archivo principal Ahora tenemos nuestras yemas de los dedos, todos los elementos que necesitamos para diseñar una versión actualizada de la APP. Empezaremos por el flujo de trabajo de la cámara. Regresar a la Página uno convertirá esto en esto. Y comenzó con el primer clic verde en el nombre de Abu y dijo el color de fondo en gris oscuro código hexadecimal 333333 Para traer una experiencia más inmersiva a nuestro usuario ocultará la barra de estado y todos los elementos en la barra de navegación también traerán a nuevos nuestro usuario. La capacidad de disparar videos y la capacidad de escoger fotos directamente de su biblioteca para eso crearán tres nuevas pestañas en la parte inferior del fueraborda en lugar de iconos. Usará niveles de texto, ya que esta pantalla será a la pantalla de fotos. Gire el título a foto dro capa de texto y la Biblioteca de Derechos en capital podría ser el bloque de texto a un lado y los colocó h dos bordes. Haz lo mismo con el tercer bloque de texto foto derecha en segundo bloque X y video en uno determinado. Ahora selecciona los bloques de Calle X y arrastró el mango derecho del grupo hasta su posición en el borde de los fueraborda. Ahora estamos seguros de que nuestros tres bloques de texto tienen el mismo texto establecido de tamaño centrado en la foto Tabas, por lo que los activaremos en el azul claro de nuestra combinación de colores. Ahora actualicemos el segundo inicio de pantalla sentando el fondo del codo. Hacer el mismo perro gris. Ocultar la barra de estado, pero mantener la espalda y la siguiente. Ya que forman parte de nuestra navegación. Eliminar los campistas. Relojes guardan el texto pero dijeron sus colores al blanco. Crearemos algo mucho más elegante yendo tu guía de estilo para escoger las herramientas de edición, copiarlas y basarlas a continuación. El cuadro ahora dibujado en rectángulo de 130 píxeles de altura dijo el color a negro y colocarlo en la parte inferior de tu pantalla. Colocar constructor toma capa en la lista de capas. Seleccione la imagen principal y duplicado redimensionarla para que se convierta en un 70 por 70. Pixel Square dijo que el color rojo utilizado para cuatro agradables a algunos que van por encima del primer nombre del filtro en el rectángulo negro para aplacar el mismo clavo en los diferentes nombres. Si bien para diferenciar los diferentes filtros alterará la imagen en las diferentes hembras. Selecciona todo lo demás. Agregaremos un segundo color click en el icono más en la sección de campo dijo el nuevo color a un blanco transparente de 50 personas. Ahora selecciona sólo la segunda miniatura rápida aquí y selecciona luz suave selecciona desiertos y macho y selecciona saturación para el 4º 1 Selecciona quemar color y así sucesivamente en la última pantalla solo mejorará la selección de redes sociales. Vuelve a tu guía de estilo o el elemento de iconos en esta carpeta de lecciones podría ser todo el grupo de iconos sociales y reemplazar al que dibujamos profusamente. Ya que es el final de nuestra cámara Flo, dibujaremos un botón más grande para compartir la imagen, escondernos el siguiente en la barra naff y dibujamos un rectángulo de 55 píxeles de altura dijo el color a nuestra activa Lou y derechos comparten en inconformes. Eso es todo. A modo de ejercicio para esta lección, tendrás que reemplazar todos los elementos que se importaron en este tipo de corbata en las pantallas correctas . De esa forma tendrás que lidiar con casi todas las pantallas de la app. Entonces ve por ello en la siguiente lección, verá tuvo que exportar elementos. Y también utilizamos una marca nueva para escribir especificaciones y tener una charla amistosa con los desarrolladores . 12. Exportación y especificaciones: Oye, ya casi terminamos. En la primera parte del curso, vimos cómo exportar hacia afuera para poder compartir las diferentes pantallas de la app que diseñamos . Desde entonces, hemos creado elementos personalizados, así que ahora veremos cómo exportarlos. Empecemos con la parte fácil. Abre tu archivo instagram o el de esta carpeta Lecciones. Si quieres estar seguro de que estás al día mercancía de debates, ¿extendemos nuestra guía de estilo? Seleccione un elemento. El icono de la casa, por ejemplo, No incluya el rectángulo del perro en el fondo. El desarrollador lo necesitará. Ahora da click en Hacer Exportable. El elemento no está listo para ser exportado. Cuando exporta elementos, siempre debe elegir el formato PNG. Es un formato muy versátil, y es el único que mantiene la transparencia. Ahora veamos algo un poco más complicado. Resolución IOS APS puede ejecutarse en varios tamaños de pantalla. Mira una deuda. Este documento muestra cuáles son el tamaño de todos los tamaños reales de iPhone. Las dimensiones están en puntos y en píxeles haría una nota al margen aquí para explicar la diferencia entre resoluciones y puntos y píxeles. Un píxel es la unidad de medida más pequeña en una pantalla. Los píxeles son cuadrados diminutos que forman parte de la pantalla, y si miras muy de cerca la pantalla, podrás verlos y los huecos entre ellos. El punto es una medida independiente de Revolución. El punto se puede hacer a partir de uno o varios píxeles en la pantalla no retina. Cada punto está hecho de un píxel. En el caso de la pantalla retina, cada punto como un odio de dos píxeles Inuits de dos píxeles, por lo que hizo de pixel puerto. Por lo que hay el mismo punto de apagado número en la retina y en una pantalla no retina bajo el mismo tamaño, pero no el mismo número de píxeles. Pero cuando diseñamos, tenemos que tomar esto en consideración en nuestra computadora. Las dimensiones están en píxeles del mismo tamaño, no fuera de tamaño variable. Por lo que uno levantando un punto será cuatro veces más grande que una monja, Regina Point. Es por ello que, si diseñas un bucks con el ingenio apagado 40 píxeles y la altura de 30 píxeles para el iPhone tres, necesitará escalar los vientos a través de 80 píxeles y el alto a 60 píxeles. Si querías aparecer como grande en el iPhone cuatro o cinco y a 120 por 90 para los últimos dispositivos. Eso es una x dos x y tres X es Lo genial que puedes notar es que aunque haya diferentes tamaños, todo el iPhone X del iPhone para tienen la misma relación y el iPhone 41 se use mucho más tiempo, así que no te preocupes por ellos por ahora, Diseñar a una X, como lo hemos estado haciendo con todos nosotros, para escalar fácilmente nuestros elementos una resolución diferente cuando los exportamos, es un buen hábito mantener si un día te unes a una gran empresa haciendo ABS, hay alto posibilidades de que todos los abs estén diseñando una X. Ahora haga clic en el plus junto al botón de exportación. Esto creará otra versión del mismo mi cono. En otra resolución para iPhone six plus, necesitas establecer el tamaño en tres x Mira cómo se actualiza automáticamente el sufijo. Si estás diseñando para teléfonos Android, encontrarás toda la convención de nomenclatura en esta página. Desafortunadamente, tienes que establecer esto para cada elemento ya que kitsch no te ofrece la configuración cuando seleccionas otro icono, pero no tarda tanto en hacerlo. Y no tenemos tantos iconos personalizados. De verdad te recomendamos dos supieron exportar elementos por tu cuenta, pero la nueva app se levantó recientemente, y es bastante impresionante Se llama Zeppelin que debo. Tiene como objetivo facilitar la discusión entre desarrolladores y diseñadores, y lo hace muy bien. Zeppelin genera una guía de estilo sin líneas y la mantiene actualizada para que todos trabajen sobre la misma base. Si trabajas en un solo proyecto, es gratis. Por lo tanto, descarguemos rápidamente esta aplicación en el botón de inicio y creemos una cuenta. Ahora descarga la APP, colócala en tu carpeta de aplicaciones abierta. Sí, y haga clic en Crear primer proyecto Seleccione IOS y haga clic en Crear. Ahora volvamos a nuestro archivo de escape. Seleccione el Home Art Board, haga clic en Enchufe Zeppelin y exporte fuerbordas. Como ves el atajo es venir en cachorros de tirolina E y dar click en importaciones para tu primera grúa . Zeppelin te preguntará en qué dimensiones haces. Nuestro signo. Selecciona una X ya que ahora se está convirtiendo en un nuevo estándar. Tu pantalla es importante, y vino con mucha información en su equipaje es, Vamos a echar un vistazo. Empezaremos por crear esta biblioteca Oeste. Basta con hacer click en este ícono a otra Swatch. Eres el desarrollador puede hacer clic en cualquier elemento para ver dimensiones, y los márgenes pueden ir al activo. Toca para exportar elemento en cada resolución a la vez. Y si quieres agregar una nota, solo tienes que dar click donde presionando. Comenta donde quieras en la pantalla, por ejemplo, para el botón de opciones. Una vez que se detiene, puedo compartir o reponer una imagen. Todas esas anotaciones son tu voz en el archivo. Previene por malentendidos entre tú y los demás miembros de tu equipo como hermanos. Una gran herramienta de colaboración. Realmente te animamos a invitar a tus compañeros de equipo, volver al tablero y dar click en invitar como nuestro up realmente mejoró en la primera parte del curso. También es momento de actualizar nuestro icono de APP con algo más acorde con estas tendencias, y eso es lo que haremos en la siguiente lección. 13. Icon de aplicación v2 y práctica de diseño gráfico: Oye, ahora que nuestra app se ve bien, actualicemos nuestro ícono también. Instagram fue lanzado inicialmente en 2010. En ese momento el tren era yo era cinco y más viejo que Murphy, um, efectos. Todo el mundo tenía que lucir brillante y brillante y se suponía que los iconos arriba eran un poco como si estuvieran hechos de menos. Recuerda, esa es la razón por la que Instagram terminó con este ícono. Desde entonces, se convirtió en una parte real de la identidad de Instagram, por lo que realmente me sorprendería si el rediseño su Pero nunca lo sabemos. Vamos a fingir que estamos latiendo instagram hoy y tomemos un poco más como lo que luce bygones hoy va a convertir esto en esto. Abrió la pelea con la primera versión de nuestra app. Lo puedes encontrar en esta lección Carpeta creará un bonito y un poco más complejo icono plano para nuestra app. Duplica el Kabul a la derecha, cambia el nombre de los a bordo a pies de icono arriba, también. Deshazte de ambas capas de texto pero también cambia el color de fondo. Para salir de Cote D B C 682 en alto degradar Cráter círculo el tamaño del círculo medio en la cuadrícula comprobar. Debe tener un diámetro de 544 píxeles. Centro se tendió bien a colorear a E. Ocho d C. C. Siete. Ahora escuchemos otro círculo con diámetro de 424 píxeles siglo también y cambia de color a 413 F 51 Crear 1/3 y aún más pequeño círculo para presentar lente de la lente. Su necesita un truco. Dale el diámetro de 98 píxeles cambiará su collar a blanco semi transparente con una capacidad de 30%. Ahora agrupemos los tres círculos y cambiemos el nombre de la lente de grupo. Coloca este nuevo grupo debajo de la carpeta de avaricia y ajusta la posición del círculo más pequeño. Colóquelo aquí, asegúrate de que toque el borde del círculo interior. Ese es otro efecto sencillo para hacerlo. El ícono, un poco más bonito condujo un cuadrado del tamaño de círculo más grande, lo que 544 por 844 lo centran y cambian su color a blanco con una capacidad de 10%. Ponga al mentiroso adentro. El grupo de lentes entró en modo víctima haciendo doble clic en la forma o golpeando. Introduzca dónde está seleccionada la forma. Selecciona la esquina inferior derecha y pulsa volver para eliminarla. Ahora tenemos un triángulo recto. Por último, seleccione el círculo más grande en las listas de laicos, haga clic derecho y usa máscara. De acuerdo, vamos a cuidar el cinturón marrón. Ahora. Crea un rectángulo con el ingenio como más grande sea el lado del icono. Por lo que 1024 pixels y le darán la altura de la búsqueda de su costado. Por lo que 1034 dividido por tres, y lo redondearemos. Cambia el color a marrón. 935 b. tres b. Colóquelo en la parte superior y asegúrate de que esté detrás de la lente. Siguiente arriba son los cuatro colores que dibujaremos. rectángulo tenía un ancho de 60 píxeles. Aliant fue la línea de la izquierda en la cuadrícula. Duplicar o un cosquilleo cuatro veces y ponerlos al lado del otro. Cambia sus colores a los siguientes códigos X F f 003 C F f d. cinco dobles Ooh doble o e 190 uno para un Grupo O. E. A. E. A. Estos cuatro rectángulos con el marrón y llamados los colores de grupo finalmente usaron el rectángulo marrón como máscara. Asegúrate de que su grupo sea Bill del Grupo de Lentes en el panel izquierdo. Ahora podemos pasar al visor. El cuadrado bruto fue de lado de 180 píxeles. Dale un collar, regístrate 14 y usa el mismo color que su círculo interior desde la lente. Después poner en el grupo de colores y luego no alinear verticalmente con el rectángulo marrón. Ahora comprueba el margen en la parte superior y muévelo a la derecha hasta que tenga el mismo margen en la parte superior. Y a menos que se cree un círculo con un diámetro de uno rojo, 50 píxeles cambiaron el campo a blanco con una capacidad de 30%. Ponlo en el grupo de colores y centrarlo con cuadrado. Simplemente habitación cambiamos el nombre del grupo por arriba y agrupamos los cuatro colores en un grupo. Tendrás colores fríos dibujaron otro círculo con un diámetro de 40 pixeles, dijo que el color es 30% Transparencia blanco y colocarlo más o menos ahí. Ponlo en el grupo de tina y Grupo tres formas. Acabamos de arruinar un grupo llamado visor finalmente agregará una sombra a la lente. Comience por crear un rectángulo con un lado ancho del diámetro de la lente, que es de 544 píxeles girados mantenga el cambio a la rotación correspondiente a incrementos de 15 grados y alinearlo con la lente así, ¿lo hará? El gradiente seleccionará el campo de gradiente y cambiará una revisión del gradiente poniendo aquí este punto de collar y éste del lado opuesto cambiará el color de los dos primeros. Capacidad negra. 10% y tuvimos los dos inferiores de capacidad blanca. 0%. Por fin realmente en Mentiroso a la sombra y colocarlo por debajo de la cabeza de grupo menos Zoom hacia fuera. Está bien, no está mal. Como puedes ver, puedes crear casi cualquier cosa usando formas simples y básicas. Transfiérdeme y combinarlas si quieres probar cosas diferentes y compararlas. Simplemente duplicar el fueraborda con el ícono y experimentar. Por ejemplo, Vamos a ver cómo se vería si fuéramos m presumir. Duplica el Abu con el icono. Acabamos de rediseñar en el nuevo todo a bordo difícil fondo. No podía envejecer poner las capas duplicadas en un grupo y renombrarlo M Bus Hide. El grupo gin scholar del fondo original al agregar una sensación negra semitransparente fue una necesidad del 10% y ocultar el grupo del MBA y cambiar el tamaño del borde del icono. Entonces se veía así. Pon la sombra en el grupo de brasas Fácil, ¿verdad? De acuerdo, entonces vamos a renombrar este tablero impar. Ahora que tenemos un I. de fantasía Cohn, vamos a exportarlo primero, vamos a duplicar nuestro ícono. Póngalo a la izquierda y deshazte del que pudiera filmar. ¿ Por qué estamos haciendo esto? Porque hay que subir iconos de nuestras plazas, no alrededor de ella plazas. Apple aplicará a la máscara con las esquinas redondeadas para ti. Ahora crearemos un nuevo archivo con todos los tamaños de iconos. Necesitará. Cos son ambos del archivo anterior en tu nuevo archivo en Let's Use a little of plug in Magic. ¿ Te acuerdas del enchufe en un como un Naser? No lo dejamos antes en este curso. Se va a usar de verdad para ahora mismo. Ya te dije antes que Apple solicita una increíble cantidad de tamaños de iconos. Bueno, selecciona tu cartón click en enchufe en A Yo puedo, ya sea. Y aquí están, formatos más antiguos. Ahora solo tienes que hacer clic en el botón de exportación y tienes todos tus iconos. Eso es todo. Ahora tenemos una Nikon que incluso el equipo de diseño detrás de Instagram podría ser. El trato está apagado. De acuerdo, ahora tu turno de experimentar, Recrea las tres versiones y también trató de trabajar en una o dos ideas propias. Puede ser pequeños ajustes, tamaños de limón o colores o diseño completo. A quien le encanta ver con qué vienes en el siguiente video crearía capturas de pantalla de APP store tan elegante como nuestro ícono. 14. Capturas de pantalla de App Store v2: Oye, ya casi terminamos. Ahora que hemos terminado el diseño de nuestra app, vamos a mostrárselo al mundo adecuadamente. Antes de descargar tu app, un usuario potencial tendrá que lidiar con diferentes elementos de marketing. El nombre de su AB, el título, el I Cono dos revisiones potenciales descripción y las Captas de pantalla. principio, unprincipio,solo fueron creados para mostrar algunas capturas de pantalla de la app, por lo que tendrías una idea de cómo se ve el up. Pero con tantos vacíos en la historia, gente comenzó a usar la pantalla como poderosas herramientas de marketing. Se convirtió en un lugar para explicar cuando te levantas, ¿se puede mostrar gran leyenda fue mucho espectáculo de impacto cómo usar la app así que qué tan grande es tu diseñador mediante el uso de efectos de fantasía y así sucesivamente. Hemos dejado caer algunos ejemplos en esta carpeta de lecciones, pero para construir un mensaje impactante, tienes que ponerte en tus zapatos de usuario. Y el buen punto es que ya lo hicimos con nuestras historias de usuarios. En lugar de solo mostrar, Screenshots de la APP incrustarán la pantalla escalofriante dispositivo y pondrán una leyenda encima de ella para contar lo que es la APP para algo así tenemos unos años sus historias para contar cuáles serán los cinco principios . Y hay cinco pestañas. Recuerda en esta carpeta de clases, encontrarás las pantallas de cada paso. Podríamos diseñar la captura de pantalla absoluta desde cero, pero una vez más, comunidad de bocetos nos dio la espalda en Manto. Se creó un archivo realmente genial que te ayuda a crear una captura de pantalla fresca en unos minutos. Gracias a él, abre el archivo generador de capturas de pantalla de la tienda APP en esta carpeta de lecciones en la parte superior Hay un tutorial sobre cómo usar este archivo, pero vamos a repasarlo juntos. En este expediente. Todo está ligado entre sí, por lo que hay que trabajar con cuidado en otros y para que funcione. En primer lugar, importa cada una de tu pantalla en la primera fila de tableros de ought. Empecemos con la cámara. En cuanto a nosotros, es la característica central de instagram. Haga clic en la pestaña color del campo y reemplace la imagen con la captura de pantalla de la cámara. Echa un vistazo a continuación. Se han reducido las capturas de pantalla. Haz lo mismo para que la pantalla de inicio tomara la búsqueda, la actividad y finalmente al perfil. Hice el fondo hacia arriba y dije el color de relleno al look azul instagram abajo. Está empezando a verse bien. Ahora editemos los subtextos abiertos. El archivo de historias de usuario en esta carpeta de lecciones. Las historias de usuarios son los pilares de nuestra app. También dicen exactamente con la abstinencia, para ser más impactante, comenzaremos cada subtítulo con el verbo. Se tomará el 1er 1, comparte bellas fotos, después ve fotos y momentos a tus amigos. Vamos a adaptarnos. Quiero ver el cuadro de otras personas en descubrir el cuadro de otras personas y se convertirá. Yo quiero saber sobre la actividad de las personas en el AB para ver la actividad de las personas. El título de perfil será de acceso. Lo que la gente ve de ti. Copia basada cada subtítulo en los tres bloques de texto X con el fin de que funcione en el iPhone six plus caps pequeños, ahora deshabilitados para soltar sombra que lucen un poco anticuada. Eso es todo. Si prefieres usar otro color del iPhone, podemos elegir fácilmente entre plata, oro y negro en el menú de símbolos. Ahora que todo está configurado, clic en Exportar Icono y crea una carpeta para exportar todas tus capturas de pantalla eficientes derecha están arriba ahora puede brillar en la tienda APP. En el siguiente video, veremos cómo podemos hacerlo brillar por toda la Web 15. showcase de productos: Oye, nuestra app ahora es preciosa. Veamos cómo podemos mostrárselo al mundo en otro. Para ello, colocaremos nuestra app en fotos reales para darle un poco de contexto y obtener imágenes geniales. Podrías tener core straight tus propias imágenes, pero hay algunas herramientas geniales para hacerlo de manera eficiente. Acude a Deng que vienen con tres final en esta página web. Podrás integrar tus pantallas en diferentes contextos. También hay lugar hit esa red, pero sus imágenes son un poco aburridas con esencialmente personas en trajes. Entonces busquemos algo amistoso hipster. Este va a estar bien. Rápido en ello. Tira una captura de pantalla de tu app. Si no tienes uno, hay si quieres en esta carpeta de clases y aquí tienes. Puedes guardar la imagen en tu escritorio y empezar a construir tus kits de prensa. También. Ahora es posible que necesites un sitio web. No pasaremos demasiado tiempo en esto ya que no es el propósito del discurso. Pero si hay algo que debes recordar es que el único objetivo de un sitio web de siesta es hacer que la gente descargue la app. Hay muchas herramientas para hacer sitios web magníficos, pero encontrarás plantillas geniales sobre sorprendentemente, por ejemplo, sobre la gripe. Por último, digamos unas palabras sobre un iniciado que hacen un producto realmente buen trabajo mano que vienen un protectante que puedes descubrir todos los días en los nuevos abs y core productos seleccionados por gran comunidad. En cuanto a los diseñadores, hay una gran colección para reunir las mejores herramientas para usar. Reconoces algunos que alguna vez usamos en esta dirección como frontrunner. Es una gran manera de llegar a Dale. El mundo que existes podría ser el primer lugar para estar y ver las reacciones de la gente. Por ejemplo, los envíos están restringidos por usuarios seleccionados, pero se nos permite publicar. Por lo tanto, siéntase libre de contactarnos cuando su aplicación esté terminada y esté disponible y estará encantado de ayudarle . Gracias. lo que siguiendo estos curso en el siguiente video, haremos un verano, pero todo por lo que hemos pasado y también una pequeña sorpresa 16. Conclusión: Oye, eso es todo. Enhorabuena. Ya lo has conseguido. Has pasado por todas las lecciones en el discurso Realmente esperamos que hayas disfrutado. Tu proyecto final es crear una personalizada diseñada para tres pantallas de hombres de tu flujo de funciones clave para usar la plantilla de gráfico de pantalla de la tienda de aplicaciones para mostrar las pantallas. También queremos que diseñes una V dos aversión al icono de tu APP utilizando las técnicas más avanzadas que hayas aprendido. No dudes en probar cosas nuevas para dar rienda suelta a tu creatividad. Así que sube tus capturas de pantalla absolutas en estas hermosas vistas de icona. Estaban impacientes por ver cómo ha dado sus frutos su arduo trabajo. Entonces eso es todo, amigos, muchas gracias por seguir este curso realmente agradecería que nos pudiesen dar una opinión en la que nos diga cuánto les gusta eso. El filme es una muy importante para nosotros en realmente útil para que los estudiantes hagan ese show. Así que por favor dile al mundo lo que piensas los pequeños regalos que encontrarás en esta carpeta de lecciones de hallazgo con la app instagram enteramente diseño um on. Hemos reconstruido cada pantalla e iconos, y estamos bastante seguros de que está bastante cerca del incendio en el que está trabajando el equipo de Instagram um en Menlo Park, California. Siéntete libre de bro y compartir este archivo tanto como quieras. Esperamos que ahora sigas practicando por tu cuenta. Um, a trabajar en tu proyecto en. Estamos aquí por ti. Si quieres compartir cosas con nosotros, realmente, realmente, te mantendremos informado con actualizaciones sobre cosas geniales que encontremos. Por lo que no olvides revisar las clases y tu bandeja de entrada de vez en cuando. Gracias de nuevo y diviértete.