Diseño de aplicaciones para móviles de cero en Adobe Xd

1. Diseño de aplicaciones móviles en Adobe Xd 2019: miles de millones de personas en todo el mundo utilizan sus dispositivos móviles todos los días, y cada vez más clientes quieren crear abs móviles para servir a ese mercado. Por lo que conocer llamada para diseñar una APP es habilidad realmente importante. Tener como diseñador usando Adobe X'd creado te da posibilidades ilimitadas porque es gratuito Cross platform basado en Vector, y tiene actualizaciones regulares. Hola ahí. Mi nombre es Alex, y en este curso aprenderás secretos de buen diseño. Breve Cómo planear e inspirarse cómo crear tablas de humor y bocetos. Convierte esos bocetos en marcos de alambre en imágenes, iconos y sombras para crear un diseño, Luego agrega movimiento y transiciones para crear prototipos. Comparte el trabajo con tus clientes para obtener retroalimentación y finalmente llama para exportar tus activos. Para desarrolladores, este curso está dirigido a personas con poca o ninguna experiencia en diseño nuevo y UX, pues en este curso aprenderás todo lo que necesitas saber para convertirte en diseñador U Y ux . Espero que estés listo para aprender. Será X D y el Amazing World off eres diseño de UX, y te veré en clase 2. Descripción del curso: aquí allá, y bienvenidos al curso. Mi nombre es Alex. Y en este video, vamos a correr a través de lo que vamos a cubrir dentro de las partituras. Para que sepas lo que puedes esperar de ella cuando empieces a aprender. Entonces vamos a empezar con el resumen de diseño, y si acerco un poco más, vas a recibir estas dos plantillas. Por lo que este es plantilla de breves de diseño vacía, que puedes llenar para esto y cualquiera de tus proyectos futuros. Y junto a ella, tenemos el resumen de diseño lleno que vamos a utilizar para este proyecto en particular, y lo vamos a cubrir en video breve de diseño con profundo detalle para que puedas conocer cuál es el pensamiento y la lógica detrás de fuera este proyecto. A continuación, tenemos plantillas de marco de alambre imprimibles, y puedes seleccionar ya sea un tamaño de cuatro o un tamaño de letra U. S, que son el tamaño que estás usando en tu país, y puedes imprimirlas y luego simplemente dibujar sobre ellos, y te mostraré algunos ejemplos rápidos sobre qué tipo de diseño logré con estos marcos de alambre imprimibles? Y también te mostraré cómo puedes lograr algunos diseños diferentes fuera de estos marcos de alambre imprimibles . Después de eso, vamos a pasar a la sección de encuadre de alambre fuera del curso, y vamos a crear nuestras guías de estilo e incluir algunos iconos diferentes y comenzar con algunas imágenes simples, algunas formas simples. Y voy a explicar la lógica detrás de todos y cada uno de los elementos que veas dentro de esta sección de encuadre esposa. Cuando terminemos con él, vamos a pasar a la sección de diseño en la que vamos a incluir las diferentes imágenes. Diferentes tonos, diferentes fondos. Algunos colores nuevos iban de punta incluyen algunos elementos diferentes que realmente van a dar vida a nuestro diseño. Y después de eso vamos a pasar por fin a la sección de prototipos, donde vamos a incluir algunas pantallas nuevas. Vamos a incluir algunas transiciones interesantes, y te voy a mostrar cómo puedes presentar tus ideas a tu cliente para que lo entiendan de la manera fácil, y puedes acortar tu trabajo de esta manera. Debido a que la mayoría de los clientes no entiende las imágenes estáticas, es necesario mostrarles movimiento. Es necesario mostrarles transiciones. Necesitas mostrarles todo el pensamiento detrás de la app para que puedas llegar al acuerdo de la manera más rápida posible. Y por último, después de que terminemos con el prototipado, voy a mostrar cómo puedes empaquetar todo para mandar toe al cliente así como sus desarrolladores y cómo puedes comunicarte con ellos y cuáles son los mejores tipos de archivos, cuales son las mejores estrategias de organización para tus archivos, así como cómo puedes lograr el tamaño de archivo más pequeño posible que puedes enviar fácilmente después a tus clientes y a los desarrolladores de Derek. Por lo que espero verlos en el curso. Muchas gracias por tomarlo, y realmente espero que obtengan mucho valor de ello. 3. El resumen: como cualquier proyecto, vamos a empezar con el resumen de diseño, pero antes de que lo hagamos, simplemente voy rápidamente a abrir el dedo del pie. El recurso es carpeta. Y solo ten en cuenta que aquí se sumarán cada vez más recursos. Entonces, por ejemplo, podrás acceder al proyecto final cuando terminemos el diseño y prototipado para que puedas abrirlo e ir desde ahí y usarlo ahí. O bien puedes abrir la plantilla de inicio la cual creará un poco más adelante en el curso. Pero para esta lección, vamos a usar la plantilla breve de diseño y puedes hacer doble clic en el dedo del pie abrirla. Y si solo hago clic aquí para abrirlo, puedes ver cómo se ve. Entonces, si acerco un poco más, puedes ver que puedes ingresar el nombre de tu proyecto aquí mismo. ¿ Quién es tu cliente? ¿ Cuándo es tu perfil de empresa de fecha límite? Para que puedas escribir una investigación sobre la visión general del proyecto de la empresa ST Ng va en objetivos así que corrige tus metas y objetivos para este proyecto en particular. ¿ Quién es tu público objetivo y requisitos de diseño. Entonces lo que los desarrolladores requieren de ti y finalmente presupuesto y horario. Para que sepas cuál es tu presupuesto para este proyecto así como horario de espera Looks like. Entonces cuando vas a empezar cuando vas a terminar Y finalmente tu nombre aquí y tu email justo aquí. Ahora todas estas capas son capas de texto, y simplemente puedes hacer doble clic en cualquiera de ellas dedo del pie editarlas. Puedes hacer clic aquí para cambiar el color del texto. Si quieres hacer eso, puedes cambiar. Estos iconos incluyen los tuyos propios. También puedes cambiar sus colores haciendo lo mismo. Y si minimizo esto y abro nuestro resumen de diseño para este proyecto, puede ver cómo se ve una vez que se ha ingresado toda la información. Entonces si me acerco un poco más, se puede ver que tenemos a quien igualamos aplicación móvil MERS. Entonces ese es nuestro cliente. Para este curso, se puede ver que son dueños de tienda de muebles. El 12 de octubre es nuestra fecha límite y aquí mismo en el perfil de la empresa de Enter head y lo llenó . Por lo que está ubicado en Belgrado. Serbia tiene 10 empleados, por lo que realmente es una empresa pequeña. Trabajan con dónde está los diseñadores para lograr consistencia en el diseño mínimo y usar materiales respetuosos con el medio ambiente y proceso de producción de productos ecológicos. Por lo que utilizaron todas las tradiciones para hacer las piezas y capacitar a sus empleados para que sigan directrices estrictas para proteger ese proceso. Entonces a partir de esto, concluyes que son una pequeña empresa, utilizan métodos tradicionales en la producción, y utilizan diseñadores externos así como diseñadores internos, para crear muebles de diseño minimalista y para lograr el consistencia en sus procesos y su creación. Tenemos proyecto Oreo a continuación para que lo que quieran de ti. Como diseñador, quieren una aplicación móvil que debe ser mínima, limpia, muy simple y directa. Los usuarios son personas mayores porque los productos son más caros que las tiendas de muebles regulares , por lo que no pueden leer letra pequeña. Y debido a que las piezas están del precio, tu lado, no quieren también. Por lo que tienen el dinero para pagar A y no querían que la app estuviera abarrotada y fuera difícil de navegar . Quieren llegar rápidamente al grano y ver las piezas dentro de la app. En una etapa posterior necesitarán un sitio web diseñado, pero por ahora solo quieren una aplicación móvil. Queremos empezar primero con IOS y luego encender Android y crear esa versión también . Pero como dije para esta primera parte de este proyecto, solo quieren que en la app IOS se cree a continuación. Tenemos metas y objetivos. Por lo que se mezclan con la sencillez feliz para que los usuarios puedan navegar por categorías ingresen rápidamente a sus búsquedas con menos clics de quicks, búsquedas con menos clics de quicks, es posible llegar rápidamente a sus artículos deseados de diseño. También debe contener una página dedicada por cada artículo que vendan, que el usuario pueda navegar y aprender un poco más sobre el artículo antes de comprar. Entonces, por ejemplo, si navegas por una silla y ellos quieren crear páginas separadas para sillas separadas, y cuando haces clic en esa silla desde la consulta de búsqueda, quieren ser para que el usuario pueda aprender más sobre la silla, sobre el proceso, sobre los materiales que utilizaron, los colores, los tamaños de precios y demás. Por lo que quieren que creemos esa página, y justo entonces quieren copiar y pegar elementos dentro de esa página para todos los demás productos tienen en oferta a continuación, tenemos público objetivo. Entonces, como dije, usualmente las personas mayores, porque está en el precio aquí. Sitio fuera del mercado género, 60% masculino y 40% femenino. País de residencia es la ciudad de Serbia. Off residentes está Belgrado y hablé con ellos. Podrían querer apuntar a áreas particulares de Belgrado en la siguiente sección para ellos, que es el marketing, correo electrónico, marketing, marketing redes sociales. Quieren apuntar a zonas específicas de Belgrado cuando saben que viven personas que tienen suficiente dinero para comprar sus piezas. A continuación, tenemos lugar de trabajo, por lo que la gente suele ser CEO, fuera de empresas y empresarios hábitos de consumo de medios. lo que suelen usar Facebook e Instagram, pero tal vez ya que a través de un poco más de Facebook, lo cual es importante para esta empresa para que sepan enfocar más sus esfuerzos de marketing hacia los señores dentales de Instagram, Facebook. Y finalmente tenemos sus hábitos cotidianos. Por lo que el día de hoy está ejecutando su negocio corto cantidad de tiempo libre para el consumo de redes sociales, y en su mayoría están en significados y oficinas. Ahora esto es importante, como dije, para el diseño total fuera de nuestra app móvil así como sus esfuerzos de marketing un poco más tarde donde llegan a esa etapa promocionando esta app móvil y su negocio en general a través de las redes sociales. Por último a continuación, contamos con requisitos de diseño y presupuesto y horario. Ahora para los requisitos de diseño hay realmente simple. Tan ácido, dos dimensiones y resoluciones. Quieren comenzar con el iPhone 10 para este proyecto. Y cuando pasemos a Android, las dimensiones se determinarán más adelante porque quieren hacer una investigación y aprender más sobre si hay usuarios de android, qué tipo de teléfono al uso para que podamos saber qué tipo off dimensionamiento debe usarse para el diseño de Android El archivo por meses debe ser Adobe X'd para el archivo final y BMG para los activos para los desarrolladores así que quieran, o imágenes e iconos. Toby exportó S PNG, pero hablo con ellos y quieren la SPG para los iconos, y vamos a conseguir eso un poco más tarde. En el curso, cuando empecemos a exportar, nuestros activos para desarrolladores requieren paleta de colores se proporciona, y lo voy a mostrar a su muy básico. Es muy mínimo. Es muy sencillo. Activos de imagen a incluir. Quieren imágenes gratuitas por ahora, así que vamos a utilizar imágenes que son gratuitas de usar tanto para uso personal como comercial. Y te voy a mostrar esas imágenes más adelante, e incluí la mayoría de ellas en el curso, y puedes descargarlas y utilizarlas si abres tu recurso es carpeta y finalmente asociados copiar documentos para ser incluidos más adelante con imágenes y se me olvidó mencionar que las imágenes serán reemplazadas más tarde por sus propias imágenes porque están usando fuera fotógrafo profesional dedo del pie hacer imágenes de sus piezas. Por lo que quieren tener el diseño general fuera de la APP para que el fotógrafo no pueda qué tipo de ángulos fuera de las piezas deben disparar para que sepan un poco más tarde, cuándo llega el momento de incluir imágenes finales con los desarrolladores? ¿ Dónde deben poner ciertas imágenes y qué tipos fuera de ángulos deben usar? Por lo que hablé con ellos un poco más sobre cómo se verán las imágenes y qué es tipo de imágenes ¿quieren usar. Por lo que determinamos eso y me fui dirigiendo, descargué algunas imágenes solo para mostrarlas e incluirlas en las partituras. Y por último, presupuesto y horario de tiempo para completar la versión del IRS es de 30 días de desglose presupuestario. Por lo que tiene $3000.50 por ciento de descuento de frente antes del inicio del proyecto, 50% antes de las entregas de ácido. Por lo que al final del proyecto Android y precio del sitio web a determinar más adelante. Como dije, porque no sabemos por el momento cuántos dispositivos Android iban a usar y vamos a diseñar cuatro porque sin duda van a necesitar algunas dimensiones también tablets android y tal vez hasta smartwatches, y lo vamos a ver en el futuro y finalmente para el sitio web porque no sabemos el momento cuántas páginas estarán dentro de la web y no sabemos si querían ser sensibles si querían ser un sitio web diseñado de una sola página, realmente no lo sabemos por el momento. Por lo que la planificación de desglose de la línea de tiempo es de La investigación es de cinco días diseñando estándares con revisiones. La presentación es de dos días y vamos a incluir presentación también porque queremos mostrar la presentación dedo del pie a sus grupos de interés porque hay, ah CEO y también stakeholders. Por lo que quieren asegurarse de que estamos en el mismo camino y finalmente, revisiones finales cuando vean presentación. Es posible que quieran agregar algunos cambios adicionales al diseño. Y tenemos ocho días para la revisión final para que puedas ver la línea de tiempo fuera de cómo se ve todo. Y como dije, se puede cambiar todo esto dentro de la plantilla. Aquí está mi nombre. Aquí está mi correo electrónico, y eso es básicamente todo para este diseño. Breve video. A continuación te voy a mostrar cómo puedes planear este proyecto, por qué es importante planear tu proyecto. Y cuando hagamos eso, vamos a pasar a la inspiración, a tableros de humor, bocetos y finalmente a enmarcar alambre nuestro proyecto. 4. Planificación: a la hora de planear tu proyecto, es realmente importante que planees qué pantallas vas a diseñar para el proyecto en particular. Porque de esa manera puedes saber cuánto puedes cotizar a tu cliente. Si no tienen presupuesto fijo, y en la mayoría de los casos no lo tienen. Entonces puedes saber cuánto tiempo debes invertir en este proyecto en base al número fuera pantallas, y por lo tanto puedes saber cuánto tiempo va a durar el proyecto. Y por último, puedes saber qué tipo off proyecto necesitan y para qué tipo off pantallas necesitas diseñar . que puedas saber, por ejemplo, qué tipos fuera de las imágenes debes buscar. Si el cliente te solicitó encontrar imágenes como es para nuestro proyecto en esta clase, y finalmente puedes saberlo. Por ejemplo, qué tipos de fondos debe usar y el proyecto contiene paneles, por ejemplo, por ejemplo, sí contiene tienda sí contiene pantallas de medios y así sucesivamente y así sucesivamente. Por lo que es realmente importante planear tu proyecto en Avanzado, y esta no es la etapa final en el proceso de planeación. Esto es solo el principio de poner algunas cosas en el papel solo para que sepas cuánto tiempo va a durar este proyecto y cuántas pantallas vas a diseñar. Entonces para nuestro proyecto en particular, lo que tenemos es, ah, pantalla de inicio para empezar y en la pantalla de inicio, vamos a enumerar algunos fuera de las principales categorías vista de los principales productos, su historia y cómo diseñan sus piezas. A continuación, tenemos pantalla de categorías, por lo que desde la pantalla de inicio, las personas pueden entrar a pantalla de categorías y pueden buscar por categoría. Después tienen filtros de búsqueda, que pueden hacer clic, y luego pueden seleccionar diferentes tipos fuera. Por ejemplo, precios, colores, materiales. ¿ Entra el coágulo, lavable o no, y así sucesivamente y demás. A continuación tenemos la combinación de habitaciones, que podemos acceder desde el menú así como desde la pantalla de inicio. Por lo que dentro de la combinación de habitación. Tenemos la imagen de fondo principal, y tenemos las piezas que se utilizan dentro de esa habitación para que la gente pueda saber cómo hace pieza es una mirada dentro de la habitación, y pueden comprar esas piezas directamente desde ahí. A continuación, tenemos artículos seleccionados. Por lo que cuando seleccionen un elemento de aquí desde la categoría o desde la pantalla de inicio, les llevará seleccionarlo elemento. Y eso es ítem seleccionado es de lo que hablé en el proyecto Breve. Entonces, básicamente, es una pantalla separada, mostrando la mayoría de usuarios fuera de la información sobre ese producto en particular, por lo que esa pantalla se verá básicamente igual para todos sus productos. Pero vamos a usar, por ejemplo, una silla o algo así para presentar ese elemento seleccionado. Entonces si quieren ajustarlo y agregarlo a un carrito siguiente arriba, pasamos al artículo seleccionado ajustado, y puedes cambiar estos nombres de estas pantallas a medida que avanzas. Realmente no importa. Pero para este proyecto, elegí estos nombres así que dentro de elemento seleccionado ajustado tomado, por ejemplo, cambió el color del producto. Pueden cambiar el tamaño del producto, y finalmente pueden agregarlo al carrito, y cuando lo hagan, avanzamos en los detalles del pedido donde pueden revisar los detalles de su pedido y ver cuántos artículos agregan al carrito. Pueden sacarlos del carrito si quieren, o si no quieren. Pueden proceder con el pago del dedo, pantalla dentro de la pantalla de pago. Serán opciones para tarjeta de crédito PayPal, y pueden sumar eso esas opciones a partir de ahí. Y por último, cuando hacen clic, confirman el pago, después pueden moverse hasta, por ejemplo, lasubicaciones de las tiendas, ubicaciones de las tiendas, que pueden acceder desde el menú y dentro de la pantalla de ubicación de la tienda. Habrá solo mapa, y podrás acceder a la información básica sobre sus ubicaciones de tiendas. Entonces, por ejemplo, en qué calle se encuentran, número de teléfono fuera de esa tienda. Y también puedes usar la navegación si quieres conducir o caminar allí hasta ese lugar en particular , para navegar en persona todas sus piezas y probarlas, por ejemplo. Entonces básicamente, eso es todo para este proceso de planeación fuera de nuestro proyecto. Y puedes cambiar ese Aziz tanto como quieras. Pero esta es solo la primera parte, y el mismo inicio de nuestro proyecto solo para nosotros para que podamos saber cuántas pantallas necesitan diseñadas. Y solo ten en cuenta que todo esto puede cambiar. Entonces déjame solo darte un ejemplo rápido. Entonces, por ejemplo, desde el pago no vamos a diseñar sección de Adit, pero tiene que ser una sección de edición dentro del pago. Pero para esta primera parte del proyecto, sólo nos estamos yendo del dedo del pie pantalla de pago de diseño porque si en edit, que puede parecer básicamente aplicación de iOS predeterminada, realmente como cuestión. Pero solo queremos diseñar esta pantalla de pago por ahora, también desde combinación de habitaciones, filtros de búsqueda y así sucesivamente. Cada una de estas pantallas puede ramificarse en cinco o 10 pantallas diferentes. Realmente depende de ti y hasta cliente determinar cuántas funciones quieren incluir dentro de esta aplicación en particular. En el siguiente video, te voy a mostrar inspiración donde puedes encontrar piezas de inspiración e inspiración que elegí para este proyecto y cómo puedes usar esa inspiración en tu trabajo. Entonces te veré allí 5. Inspiración: cuando se trata de inspiración sobre tu proyecto de diseño, me gusta dedo del pie encontrar mi inspiración en varios lugares diferentes. En primer lugar, siempre debes investigar a tus clientes competidores solo para ver qué están haciendo y cómo ven sus sitios web y aplicaciones móviles. Si tienes la oportunidad, también debes instalar la aplicación móvil fuera de sus competidores solo para ver la funcionalidad y ver cómo se ve en tu teléfono y ver las opciones y características que podría tener. Pero una vez que has hecho deudas y quieres algo de inspiración visual, puedes saltar a un regate o estar de ahí, o puedes encontrar sitios de inspiración en línea. Hay tantos para elegir para este proyecto en particular, encontré a esta persona en regate así sucesivamente. Julia ayuda de verdad. Así es como se pronuncia, y me gustan mucho estas tarjetas. Entonces, como puedes ver, es realmente bastante sencillo. Es fácil a la vista, y una cosa que tengo que notar es que no vamos a usar estos colores. No vamos a usar estas imágenes. Esto es sólo para que podamos envolver nuestra cabeza alrededor de cómo van a quedar estas formas una vez que las diseñemos. Entonces son realmente como estas tarjetas ¿De verdad como este espacio vacío o este espacio en blanco? Me gustan algunas de estas etiquetas y cómo funcionan estos iconos y parecen que son muy simples y limpios. Si saltas a otro ejemplo, ordena este, por ejemplo. Se puede ver justo flecha hacia atrás justo aquí sin texto en el medio, se pueden ver tarjetas grandes con solo unas pocas cantidades de texto fuera. Se pueden ver encabezados grandes y para categorías. Por lo que estos funcionan bastante bien. Y si nos metemos, por ejemplo, este que puedes ver una vez más usan estas sutiles sombras de gota detrás. Tienen estos lindos párrafos que son fáciles de leer, una fácil de entender. Entonces como pueden ver, sólo a partir de estos pocos ejemplos, realmente podemos concluir y encontrar alguna inspiración para nuestro proyecto. Este también. Así que imágenes realmente bastante simples, imágenes de fondo, texto grande legible agradable y algunos títulos grandes agradables. Por lo que realmente me gusta esta dirección de diseño. A continuación, lo que debes hacer es encontrar otros sitios web u otros laboratorios móviles, que estén en el mismo nicho que el proyecto para el que estás trabajando. Entonces, por ejemplo, estamos trabajando en este proyecto, que es para tienda de muebles. Por lo que tienen todo tipo de sillas, camas y sofás y demás. Entonces eso es lo que debes buscar y encontrar inspiración de solo para ver cómo lo están haciendo otras personas . Entonces, como se puede ver en este sencillo ejemplo, me encontré en comienza, tenemos un fondo de color, y básicamente tenemos para colorear texto aquí mismo. Es realmente fácil de leer. Es realmente fácil de navegar. Tenemos una bonita imagen grande aquí mismo a la derecha. Si me desplaza hacia abajo, se pueden ver algunos de estos otros ejemplos. Entonces para esta silla, por ejemplo, es agradable y fácil de leer. Agradable y fácil de entender, porque si recuerdas, pues de nuestro resumen de diseño, nuestra audiencia es generalmente un público mayor que no tiene mucho tiempo para leer. Y si quieren leer, el texto debe ser agradable y grande y legible sólo para que contrasta bien en estos antecedentes. Entonces, como puedes ver botones muy claros realmente fáciles, realmente simples, no hay mucho pasando aquí mismo. Aquí. Pueden desplazarse rápidamente por las imágenes, y eso me gusta mucho Así que todas estas imágenes tienen fondo recortado para que puedan acomodar estos colores de fondo y hacerlos uniformes y parecer coherentes. Por último, se puede ver que los botones son realmente claros. Las flechas son realmente claras. Y todos estos están usando este fondo, que es realmente agradable, simple, fácil a la vista una vez más porque tenemos audiencia mayor para nuestra app. Entonces me gusta mucho esta dirección de diseño y finalmente a ti. Se puede buscar AP MERS iguales en comienza y en dribble, solo para entender cómo funciona el e-commerce APS. Por lo que tal vez puedas obtener la inspiración sobre la página de facturación sobre las páginas donde consortes en tarjetas de crédito sobre ese tipo de cosas. Solo para asegurarte de entender cómo funciona en el auto para funcionar en algunas de estas aplicaciones móviles . Tan solo para que puedas saber dónde puedes, por ejemplo, colocar fondos para que la gente pueda agregar al carrito. Y tal vez puedas entender cómo funcionan algunos de los deslizadores y así sucesivamente, hasta el momento puedes simplemente escribir e commerce en tu búsqueda, ya sea on begins o dribble, y puedes ver varios ejemplos diferentes sobre cómo cualquiera de esto puede ser logrado. Y como pueden ver, me estoy desplazando hacia abajo y realmente hay muchas opciones diferentes para elegir. Y por último, querer te quiero mostrar es porque este proyecto es mínimo. Siempre puedes ir de pie Yo, Kia y Yeske y porque soy de Serbia, estaban cargando nuestro sitio web local serbio. Pero mostrará tu sitio web más cercano o del país del que eres, y esto es importante solo para que puedas entender si el proyecto lo requiere. Entonces, por ejemplo, tenemos un diseño mínimo aquí y básicamente es como un año o estilo de riesgo. Por lo que al estilo del norte de Europa y puedes ver cómo ponen texto en su página web y puedes descargar e instalar sus APS solo para que puedas entender cómo funciona el comercio e parte de esas app y puedes ver en este tembloroso a un lado, para ejemplo, tienen este íconos mínimos y tienen el mismo texto en color a la derecha. Es realmente fácil de leer. Es realmente fácil de entender, así que eso es algo que queremos. Lo mismo para Yeske. Se puede ver aquí mismo. A mí me gusta esto. Las tarjetas tienen su real Son realmente simples así que tienen una línea de texto justo aquí y solo la imagen de fondo. Entonces nada más. Puedes tener chapoteo de color si eso depende de tu cliente. Si les gusta y se pueden ver algunos de estos marcos, me gusta mucho cómo se integran. Entonces como puedes ver en todo este video, no estamos usando ninguna parte en particular fuera de ninguna off. Estas piezas de inspiración simplemente nos inspiraron sobre cómo se verán algunos de los elementos en la página house, um, colores, contraste y cómo algunas imágenes funcionan indiferencia en áreas. Entonces eso es realmente lo que quieres averiguar en tu parte de inspiración y no solo quitarte el diseño general de cualquiera de estos y solo úsalo de esa manera recta. Debido a que algunos diseños funcionan en diferentes casos, es posible que no funcionen para tu caso, así que solo sigue explorando, sigue encontrando inspiración, inspirarte y luego usa las mejores prácticas en tu diseño final. 6. Junta de inspiración: Vamos a crear rápidamente nuestro tablero de humor. Entonces desde su pantalla de inicio, simplemente haga clic en esta arma 1920 solo para abrir un nuevo archivo, agrandarlo, controlar cero para que pueda golpear en posición. Y puedes escribir en tablero de humor si quieres. Y este tablero de humor es solo para inspirarte solo para que puedas entender algunas combinaciones de colores diferentes . Algunas variaciones de texto diferentes que puedes explorar con los clientes. Logotipo. Si el logotipo es realmente un estilo particular dentro de tu nicho, realmente depende de ti, y puedes incluir tantos elementos como quieras dentro de tu móvil. Después puedes mostrárselo a tu cliente si quieres terminar si el cliente quiere mirarlo y esto es básicamente solo para que te inspire para que puedas entender mejor dentro de tu cabeza cómo funcionarán las diferentes combinaciones de colores y combinaciones de fondos este proyecto. Entonces para empezar, simplemente voy a elegir herramienta de rectángulo y simplemente dibujar simplemente dirigiendo así . Por ejemplo, hit repeat grid make to like this y tal vez incluso hacer tres como este. Voy a ir en grupo genial Usa este electoral click en una de las esquinas mantenga turno y luego simplemente agrandarlo para que pueda tener un poco más de espacio para nuestras imágenes a continuación. Después puedes arrastrar y soltar imágenes dentro, pero lo que quiero hacer primero las seleccionan todas y quitan el borde desde aquí. Y entonces puedo seguir adelante y simplemente arrastrar y soltar algunas imágenes dentro. Ya he descargado algunas imágenes, y si quieres unas bonitas imágenes gratis, puedes usar hormigas blesh dot com Simplemente escribiendo una habitación, por ejemplo, y te dará todo tipo de diferentes, mínimos colecciones. Y como se puede ver, inspiración es interminable sólo a partir de estos ejemplos particulares. Pero seguí adelante y simplemente descargarla unas imágenes para darme una ventaja. No te sacarás estas imágenes por dentro de la espalda sólo porque son demasiado grandes. Pero como te expliqué hace apenas unos segundos, puedes saltar en splash dot com y puedes hacer click en la imagen puedes hacer click derecho sobre ella, copiar, luego saltar de nuevo en remolque. X 'd controlar o comando V, y va a ritmo que dentro fuera de tu documento. Después puedes usarlo e incluido en cualquiera fuera de estos soportes de lugar de imagen. Pero como dije, esto es solo para que podamos entender mejor algunos de estos colores y para reposicionar algunas de estas imágenes, doble clic sobre ellas. Mantén el turno, y puedes posicionarlos mejor como quieras. Entonces simplemente saltaré aquí mismo y saltaré justo en algunas de estas imágenes y tal vez las moveré por ahí solo un poco más. Sólo para que quede más claro qué es la perspicacia ahora. Una vez más, estas imágenes pueden ser la que quieras. Una vez más, puedes saltar a remolque sobre Splash y, por ejemplo, si tu proyecto tiene unos colores cálidos, puedes usar estos. Pero debido a que la nuestra no y usa estas piedras, tal vez esta imagen sea perfecta porque muestra muebles dentro fuera del espacio y puedes usar cualquiera de estas. Por ejemplo, tener una bonita lámpara y una bonita mesa de centro o noche. Párate aquí mismo, y puedes, por ejemplo, probar algunos colores de esas imágenes. Pero una vez más, soy yo opté por usar estos, y puedes elegir los que quieras excepto usar dirigir poco una vez más golpeó grilla de repetición y simplemente agrandarla herramienta alrededor. Digamos, Sí, algo así está bien. Incluso puedes aumentar el espaciado haciendo esto. Y soy grupo genial porque vamos a elegir y probar algunos colores diferentes para nuestro proyecto. Ahora no vamos a usar estos colores porque el cliente ya tiene colores. Pero en algunos casos, tal vez quieras mostrarles diferentes colores y cómo funcionan con imágenes o formas particulares . Y en la mayoría de los casos, los clientes buscarán tu consejo y escucharán lo que tengas que decir. Entonces en esos casos, puedes y luego implementar esos colores en el proyecto, y los clientes te encantarán por ello porque les diste y consejos y les mostraste cómo funcionan algunos colores con otros colores. Entonces en este caso, vamos de la oscuridad hasta la más ligera, y puedes usar este color de pic para pinchar cómo queremos y elegir el rayo stark, por ejemplo, y tal vez puedas encontrar algunos otros tonos que utilicemos. A lo mejor éste aún se ve bien, y luego puedes seleccionarlo y saltar aquí mismo y tal vez usar un tono más claro, por ejemplo, así. A lo mejor quieres elegir este color, y es realmente oscuro, tal vez tú para ir allá y tal vez puedas elegir, Por ejemplo, esto no colorearía. Y tal vez esta de aquí solo para que puedas tener una variación. Y como me pareció molesto estas fronteras, puedes seleccionarlas todas. Simplemente haz clic aquí para quitar los bordes de tus colores. Ahora, como dije varias veces a lo largo de este video, esto es solo por tu inspiración, y puedes usar las imágenes y colores que quieras. Entonces, por ejemplo, tal vez quieras ir al revés y elegir este color y tal vez seleccionar el color descarado porque nos gusta para el texto. A lo mejor. A lo mejor quieres elegir este color más claro porque tal vez queremos añadir alguna sombra de gota o algo así. Utilizado este color más claro, tal vez quieras explorar con algunos marcos dentro de tu diseño usó este color y así sucesivamente y así sucesivamente, así que realmente depende de ti determinar qué colores quieres elegir. Y esto es solo un ejemplo rápido de cómo puedes crear un mortero bonito y sencillo. Nopara darnos área desde el texto puedes hacer doble clic en tu puerto y simplemente agrandarlo dedo del pie por aquí. Entonces lo que puedes hacer es Presti para el título, Haga clic dentro y haga mecanografiar. Este es nuestro control titular. Encomiar A y clientes. Un cliente quiere usar sentido abierto, así que instálelo. Está libre de formularios de Google y tal vez queremos usar Bolt. Y esto es para nuestros titulares. Entonces tal vez podamos aumentarlo a 48 solo para que podamos verlo un poco mejor. Puedes posicionarlo así control de duplicarlo. Colóquelo aquí mismo. Mantén pulsada la flecha abajo, por ejemplo, cuatro veces para que podamos tener 40 píxeles espaciados entre nuestro titular y nuestro texto. Ahora, para convertir este dedo del pie del texto puntual del área del dedo del pie, simplemente puedes hacer clic aquí y tal vez queremos reducir el tamaño. Entonces, por ejemplo, esto es 48. A lo mejor podemos usar 24 puedes aumentar el tamaño de este párrafo con solo arrastrar estas asas. Y una última cosa que queremos hacer es saltar aquí mismo al enchufe en Spano y encontrar a una Laura Ipsum. Es gratis de instalar y puedes saltar de nuevo a la pantalla de inicio y puedes ir a Beddoes. Puedes ir a enchufes, y desde aquí simplemente puedes escribir Florham ipsum, y aparecerá aquí mismo y simplemente haz clic en instalar, y tendrás esta extensión exacta. Me refiero al blogging, como tengo algunos una vez más, un montón de clic de yeso falló con texto de marcador de posición. Asegúrese de que el texto esté seleccionado. Haga clic allí y podrá elegir el texto que desee desde aquí. Simplemente haga clic en insertar texto. Y ahí tienes. Tenemos nuestro párrafo completo ahora cambiarlo de negrita a regular y tal vez ir con esto un poco más oscuro. O tal vez podamos incluso cambiar el color a este color que ya seleccionamos de aquí. Y por último, tal vez podamos explorar y elegir una justicia extra audaz. Ve un poco mejor la distinción entre el titular y el párrafo para que finalmente puedas hacer doble clic aquí. Posición justo aquí. Puedes colocar tu logo aquí mismo, incluir poco más imágenes, tal vez incluir algunos otros sitios web. Entonces eso es básicamente un tablero de humor. Puedes incluir tantos elementos o tan pocos elementos como quieras para inspirarte para el proyecto en la mano, y luego podrás imprimir el Show Sur a tu cliente o enviarlos por correo electrónico. Puedes guardarlo como Jay de vuelta. Simplemente haga clic aquí mismo en el nombre fuera de su control de golpe de puerto. Comentario. E. Elige ya sea PNG o J pack desde aquí. Elige el destino hit export como una sola imagen, la cual condonas. Muéstrale a tu cliente en el siguiente video. Vamos a pasar a hacer bocetos, y te voy a mostrar una plantilla que creé para ti, que puedes usar para esbozar tus marcos de alambre y luego utilizarlos como inspiración y como pautas en tu proyecto, Entonces te veré ahí. 7. cómo hacer bocetos;: Si vas a tu recurso es carpeta, haz doble clic en él y puedes encontrar un marco de alambre plantillas imprimibles. Se puede abrir ese archivo, y así es como se ve así dentro de él. Puedes encontrar un cuatro plantillas de papel, plantillas papel de carta de Isabella de Estados Unidos y puedes usar estas plantillas dedo del pie imprimirlas y simplemente dibujar cuál nuestro lápiz de panel sobre ellas y puedes ver si acercas un poco más. Aquí puedes tener solo la información superior del iPhone, así como el indicador de inicio justo aquí en la parte inferior. Y puedes usar en estos rectángulos solo para que puedas dibujar, Ah, mejores marcos de alambre dentro de ellos solo para que sepas cuánto espacio puedes tener y así sucesivamente . Y una vez más, estos son solo para dibujar a mano, y puedes usarlos también si quieres y crear marcos de alambre aquí mismo dentro si quieres . Pero prefiero el dedo del pie. Simplemente imprime estos y úsalos con mi mano. Es ah, mucho mejor proceso que encontré a lo largo de los años, Entonces para empezar con los amigos de alambre directamente dentro de su software. Por lo que una vez más, puedes usar estos. Si estás usando un cuatro o si nos estás usando una plantilla de papel carta, simplemente selecciona una de las tablas de arte, que quieras. Golpear control. Encomiar E a exportar activos, y desde aquí puedes elegir Pdf y puedes exportarlo. Ábrelo e imprime todas las veces que quieras. Y porque sé que tenemos 10 pantallas. Por eso elegí 10. Pero puedes usar thes para So, por ejemplo, quieres estos tres. Puedes elegir este panel de capas justo aquí, y puedes ocultar todos estos otros y luego tal vez posicionar esto libre en el medio. Puedes imprimir esos tres si Onley. Si solo requieres que se impriman tres pantallas, puedes en muchas de estas pantallas a las que quizá puedas acostumbrarte, pues realmente depende de ti y de tu proyecto. Ahora esta plantilla puede acomodar 10 como se puede ver aquí mismo. Y si necesitas más de 10 simplemente puedes imprimir más papeles de estos marcos de alambre en particular . Y ahora estamos una vez te muestro eso me deja mostrarte rápidamente lo que se me ocurrió con estas plantillas. Entonces aquí mismo tengo imagen de marco de alambre J pic, y puedes usarlo solo para que veas de lo que estoy hablando. A lo mejor podemos agrandar esto y oponerlo aquí mismo. Entonces estos son los que dibujé, y simplemente después los escaneé en mi computadora. Y si acerco un poco más, puedes ver que uso nombres de pantalla aquí abajo. Y de esto era de lo que estaba hablando. Entonces esto es básicamente sólo una mano libre. Esto es solo para ti. Por lo que tal vez puedas entender cómo colocar algunos elementos dentro de cada pantalla. A lo mejor se puede ver qué elementos funcionan qué elementos no. Y debido a mi escáner, realmente no se puede ver este color de fondo. Pero tal vez tu escáner es mejor, y lo puedes ver. Pero cuando lo imprimes, es realmente bonito. Y puedes ver de nuevo este color de fondo así como estos animales rectángulos blancos, simplemente puedes duplicar el condón y cambiar el color al color que quieras. Si eso es algo que quieres y tu impresora puede acomodar eso así que si acercamos un poco más, puedes ver en la pantalla de inicio. Por ejemplo, tenemos varios elementos diferentes posición a través, y esto va a ser mucho más largo abajo porque queremos acomodar estas combinaciones de habitaciones también en esta pantalla de inicio. A continuación, tenemos la búsqueda de la categoría aquí mismo y puedes ver que por ejemplo, elegí SOFA Cuántos resultados hay ordenar por fin. Los usuarios pueden hacer clic en esta flecha tomada ordenar por cualquiera de estos filtros y pensamiento. Haga clic en aplicar, y los llevará de vuelta a la búsqueda de categoría con esos filtros aplicados a continuación, tenemos combinación de habitaciones. Como dije, se puede acceder desde aquí, y también se puede acceder desde el menú porque dentro de combinación de habitación, esa es la pantalla que vende los muebles. Y los usuarios pueden ver cómo algunas piezas encajan por dentro, por ejemplo, sala o dormitorio o cocina y así sucesivamente, y pueden elegir diferentes opciones a partir de aquí. Pueden ver cuánto cuestan, y pueden ver todos los productos utilizados dentro de esa habitación en particular. Por lo que hemos seleccionado el artículo y el elemento seleccionado puede ser artículo desde aquí o desde aquí y sobre el artículo, pueden ver el nombre del producto justo aquí para arriba una línea de texto. A lo mejor puedes incluir ah titular están en el sub titular solo para que los usuarios puedan saber, por ejemplo, qué es de lado de esas tres o cuatro palabras. Pueden ver el precio qué colores Pueden elegir tamaños fuera del producto y sobre el producto, como puedes ver, abajo de 3 a 4 secciones a continuación para que puedan desplazarse hacia abajo y conocer más sobre ese producto . Y cuando terminen con el ítem seleccionado seleccionado ítem ajustado. Entonces tal vez eligieron, por ejemplo, un color en particular. A lo mejor eligieron talla, y este botón de agregar al carrito aparecerá y lo pueden agregar a la cancha a continuación. Cuando lo hagan, pueden golpear el ícono de la tarjeta y pueden ir a los detalles del pedido. Y dentro de la pantalla, pueden ver todas las piezas que ordenaron nombre del precio de paz de la paz y cuántos artículos fuera en esa pieza en particular. Entonces esto es importante. Si estás ordenando sofá, tal vez quieras pedir solo uno. Pero si estás ordenando sillas, tal vez quieras pedir cuatro o seis o algo así, tal vez abajo ciego para tener algunos artículos más pequeños fuera de ejemplo ceniceros o vasos o plantas de maceta o algo así. Y tal vez quieran incluir un número diferente fuera de estos conocimientos para que los usuarios puedan dar un paso. Dallas va a aparecer. Simplemente pueden usar su dedo del teclado. Introduce cuatro, por ejemplo, o seis o algo así, y el precio fuera de curso se ajustará en consecuencia. Por último, han procedido al pago, y los llevará a esta pantalla. Y como puedes ver por el ejemplo de inspiración que te mostré, solo uso una simple flecha hacia atrás, que los llevará de vuelta a esta pantalla. Si hay algo que quieren cambiar, y en esta pantalla pueden elegir pagos para que tengan opciones de tarjeta de crédito, y también tengan opciones de PayPal. A lo mejor podemos incluir múltiples tarjetas de crédito, y pueden deslizarse por estos grandes autos para elegir el correcto. O si solo tienen uno, será solo uno aquí mismo. Y finalmente información de PayPal abajo. Cuando están contentos, golpean hacer pago y si quieren hacer algunos cambios finales, pueden hacer clic en editar en cualquiera de estos, y lo llevará a la edición de tarjeta de crédito o para la cuenta de personas. Siguiente arriba. Tenemos ubicaciones de tiendas, por lo que tenemos una gran barra de búsqueda aquí mismo con la siguiente, y pueden golpear la búsqueda en cualquier pantalla que contenga el ícono de búsqueda. Entonces cuando lo hagan, los llevará del pie de la barra de búsqueda justo aquí, y podrán elegir estos diferentes filtros, y podrán elegir diferentes piezas de artículo que quieran ser incluidas dentro de la búsqueda. Pero si quieren elegir la ubicación, también pueden golpear la barra de búsqueda y escribir en la ubicación, y esta pantalla aparecerá y, por ejemplo, por ejemplo, tipo Daikin en Belgrado, que es una Serbia capital, y sabemos que tienen las tiendas ahí mismo, y podemos ver la calle justo aquí, más detalles, que luego los mostrarán. Por ejemplo, si viajan en autobús o en taxi, qué calles golpearon el dedo del pie, y pedirá la ubicación del dispositivo solo para que pueda mostrarles la distancia entre ellos y la tienda si quieren navegar. Pueden presionar este botón. Se los llevará del pie la aplicación de navegación preferida que utilicen. Entonces si usaron mapas de Google, les tomará dedo del pie los mapas de Google si lo usan aquí. Mapas. Si usan formas en que Apple mapea, realmente no importa. Se los llevará, remolcará sus mapas preferidos, e iniciará una navegación desde ahí hasta el lugar en cuestión. Y por último, tenemos nuestro menú. Por lo que dondequiera que tengan el menú Icahn. Entonces, por ejemplo, aquí o aquí, lo pueden golpear, y les llevará a sólo este menú básico, sencillo, que luego pueden elegir diferentes opciones de So, como puedes ver, es realmente bastante simple. Le falta mucho fuera de las pantallas, pero para esta primera parte fuera de nuestro proceso de diseño, y esto es lo que acordamos con el cliente son las primeras pantallas que quieren. Les indiqué que esta app requerirá al menos 15 o 20 pantallas más. Dicen que están bien con ello, pero sólo quieren ver esta primera parte. Y si les gusta el diseño, si les gusta la funcionalidad y quieren probarla en algunos de los usuarios solo para que puedan entender si a los usuarios les gusta si a los usuarios les resulta confuso o no, Y a partir de entonces, cuando recopilen todos los datos, entonces podemos seguir adelante y diseñar algunas de estas otras pantallas. Y es mucho sencillo cuando tienes un producto completo que luego puedes agregarlo e incluir más pantallas e incluir más algunos de estos diferentes elementos porque es mucho más rápido cuando tienes algo en lugar de partir de pantalla en blanco. Entonces esos son el marco de alambre, plantillas imprimibles. Y como dije, puedes usarlos e imprimirlos. Puedes dibujar en ellos, y si quieres, incluso puedes crear de I frames aquí mismo en la siguiente sección fuera del discurso. Vamos a saltar en remolque,enmarcado de alambre, enmarcado de alambre, y vamos a empezar a diseñar nuestros marcos de alambre a partir de esta información que acabo de mostrarles . Y voy a explicar algunas técnicas diferentes y cómo se puede llegar al encuadre de alambre por qué es importante y cómo va a acelerar su proceso más adelante. Cuando llegue el momento de las revisiones, así que te veré ahí 8. Preparación de archivos: en esta parte del curso, vamos a empezar a crear nuestros marcos de alambre. Y para hacerlo desde la pantalla de inicio, simplemente haz clic en iPhone enviado y tenis para crear un nuevo puerto de arte. Puedes agrandar tu pantalla así, y vamos a seguir adelante rápidamente y crear nuestras pantallas. Entonces, como dije, tenemos 10 pantalla, tan aburrida. Haga clic aquí. Voy a escribir a casa y hacer control o comando D para duplicar este nuestro puerto dock, como aquí mismo y mecanografiando categoría pantalla control de una vez más para duplicar este un doble clic y escribir en filtros de búsqueda. Y solo voy a pausar rápidamente este video y duplicarlos todos y crear 10 pantallas para luego volver. Y ahora que estoy de vuelta donde golpeó el control cero y se puede ver cómo se ven todos Y como se ve aquí mismo en la parte superior, los nombres son los nombres que mencioné al dibujar a mi esposa amigas en el periódico, y siempre se puede incluyen aquí tus propios nombres si estás creando ah, poco de un proyecto diferente. A continuación, voy a dar el dedo del pie en otro ex defile que ya se han creado previamente y copiar algunos iconos. Entonces voy a golpear el control V aquí mismo para desbaratarlos. Y obviamente vas a conseguir estos íconos porque estos son los iconos que vamos a utilizar en nuestros proyectos. Yo los voy a colocar por aquí, y también tengo un logo que me envió el cliente. Y este no es el logo final. Pero me enviaron este logo por ahora. Y porque no hago diseños de logotipos simplemente no me gusta. Y no es para mí. Algún otro diseñador creará un mejor logotipo. Este es sólo su local por el momento. Entonces tenemos todas las cosas básicas configuradas y en yo sólo voy a ahorrarlo rápidamente. Y para ello, puedes venir justo aquí a la parte superior para salvarnos o control de turno o comando de turno s. Se abrirá y puedes localizar tu carpeta aquí haciendo click sobre ella. Y puedes nombrar tu proyecto aquí mismo mientras yo ya lo hice. Y lo nombré nuestro proyecto. Y si espero dentro del con nuestro recurso es, se puede ver que aquí está, y se puede abrir este archivo en cualquier momento, se terminará, y se puede utilizar como referencia Cuando empiece a trabajar en este proyecto y por supuesto, también puedes copiar y pegar diferentes elementos de este archivo y escabullirse en tu nuevo archivo si lo quisieras, y también puedes usarlo como guía de referencia. Por ejemplo, si te perdiste algunas tallas o colocación de Mr Image, o si lo hacemos , por ejemplo, en la Ciudad del Reino Unido, y solo querías comprobar rápidamente si hiciste el trabajo correcto, también puedes abre este archivo y simplemente míralo y ve si lo cortas bien. Entonces en el siguiente video, vamos a empezar a crear nuestra pantalla de inicio y nos vemos ahí. 9. Crear trazos de alambre 1: Antes de empezar con el trabajo de diseño, hagamos rápidamente algunas cosas básicas. Por lo que quiero incluir barra de estado así como indicador de inicio en la parte inferior. Si recuerdas, eso es lo que hicimos cuando creó nuestras plantillas imprimibles de marco de alambre. Entonces sólo que podamos saber dónde están los límites r n desde qué áreas podemos diseñar. Entonces saltaré a otro archivo y los copiaré porque ya los creé en ese archivo y simplemente hago comando de control v toe, basarlos dentro y si acercamos un poco más, se puede ver cómo se ven. Entonces aquí está nuestra barra de estado Cualquier transferido más como componente, también puedes hacer clic derecho en él y hacer en enlace componente porque eso creará un componente aquí mismo en este archivo. También puedes hacer clic derecho aquí y escribir delete, lo que eliminará el enlace al componente original en el archivo que creé, que no es este archivo. Entonces lo que podemos hacer ahora con este seleccionado es golpear control Comando K, que lo creará aquí mismo. Ahora, lo que esto significa es que este es el componente original dentro de este documento en lugar del componente copiado y pegado de otro documento externo. Entonces lo que eso significa es que todos los cambios que hagas al interior de este documento, que se llama nuestro proyecto desde este diamante hacia adelante hacia el futuro, se mantendrán dentro de este documento y no en el documento original desde el que yo copió esto. Podemos hacer lo mismo con el indicador de inicio si quieres, pero simplemente vamos a copiarlo y pegarlo dentro de cada archivo. Entonces lo que vamos a hacer a continuación es seleccionar ambos para que solo puedas hacer una selección rápida como así hit control o comando. ¿ Ver? Aleja un poco, selecciona todas las otras tablas de arte y simplemente golpea el control V. pegará dentro de todos estos aeropuertos en el mismo lugar exacto que este 1er 1 Y esta es una gran adición a otras B, X, D y gran futuro que tener, porque si tienes múltiples objetos repetitivos por dentro, cualquiera es pobre, simplemente puedes copiarlos y pegarlos, simplemente puedes copiarlos y pegarlos, y los colocará exactamente en la misma ubicación que en la primera. Nuestro puerto. Entonces a continuación vamos a crear una barra superior. Y para ello, vamos a seleccionar rápidamente algunos iconos. Entonces lo que vamos a necesitar en este caso es el menú despertar icono de búsqueda así como el icono de atrás . Por eso los creé, y puedes seleccionarlos rápidamente. Entonces el control. A ver, les dijimos. Seleccionado hit Control V en esta primera pantalla de la pantalla de inicio. Sostenga turno. Lo movió hasta la alineación, como así y se colocó en 20 píxeles hacia abajo. Así que turno y flecha inferior siguiente arriba, seleccionó esta. Colóquelo hasta el borde, o simplemente puede hacer clic aquí. Cualquier cosa. Pieza del dedo del pie el borde izquierdo. Haga lo mismo para una barra de búsqueda en el borde derecho y para la búsqueda Sostenga el turno y la flecha izquierda . Por lo que 12 para moverlo. A 20 píxeles de este borde y para el menú. Mierda. Quieres flecha derecha dedo del pie Este borde hacen lo mismo que para esta bolsas de compras. Todo el turno se coloca así hasta que el turno de carne dejó Flecha 12 Y por eso creamos estos iconos porque hace que nuestro trabajo sea mucho más fácil al principio. A continuación, vamos a copiar nuestro logotipo. Tan seleccionado el control, Ver Haga clic en blanco aquí, control V. Haga clic aquí para posicionarlo en el medio y luego simplemente muévelo hasta que esté en el medio. Al igual que así. Si no puedes, puedes seleccionar estos dos y simplemente hacer clic aquí y los moverá todos adentro fuera la misma línea. Por lo que a continuación, voy a seleccionarlos todos, golpear control o comando g para agruparlos, clic aquí y opaco click y nombrarlos. Nunca bar centro, y voy a pedirlos un poco mejor. Por lo que ahora la barra viene justo debajo de la barra de estado y no puedo controlar. Ver. Da click aquí, Control V. Y de esto estaba hablando. Los basará en la misma ubicación exactamente como estaba en la primera pantalla. Por lo que hará que tu trabajo sea mucho más fácil más adelante por el camino. Ahora, antes de hacer cualquier otro trabajo, seleccionemos rápidamente los colores para el proyecto. Entonces simplemente voy a crear algunos rectángulos aleatorios eliminados borde y vamos a necesitar cinco colores. Por lo que el control efectivamente. Sostenga el control de selección D mantenga el cambio. Tan solo para moverlo abajo control D mantenga el turno y moverlo. Y por último, una vez más, controla D Ahora para su 1er 1 click aquí mismo. Vamos a teclear en cero B cero B cero b Presentador. Va a ser un color oscuro para este siguiente vamos a usar 858585 percenter para este siguiente vamos a usar 717171 percenter para el que está debajo. Vamos a usar centro de prensa E B E B E B Y finalmente, para este, vamos a usar F f f f f f f f f, que es el blanco puro. Y ahora que hicimos eso, tenemos que crearlos como activos. Sirkin, haz click aquí. Haga clic en este color y haga clic aquí. Haga clic en este color haga clic aquí, justo aquí en el plus y finalmente en el plus. Y lo que me gusta hacer es elegir el lugar colores más oscuros en la parte superior y colores más claros en la parte inferior para que puedas revertir el proceso. Puedes seleccionar primero el blanco y luego pasar a la parte superior y luego tenemos nuestros colores creados a continuación. Vamos a crear nuestro frente, así que voy a seleccionar Esto son malos mecanografiar T click justo aquí escribiendo, por ejemplo, Start e share control A select open sense from here. Si no lo tienes, también puedes instalarlo. Es un frente de Google gratuito, y si estás usando teléfonos adobe, también lo puedes encontrar ahí. Simplemente instálalo y estarás listo para salir. Nuestro deja un enlace en el pdf, y también puedes acceder a todos estos enlaces dedo del pie del teléfono enviado a las imágenes, y también puedes encontrar algunos adicionales. Un recurso es que voy a enlazar dentro de ese archivo. Entonces primero lo primero. Seleccionemos 18 de aquí. Percenter. Va a ser semi audaz, así que selecciona semi bowl desde aquí mismo, y va a ser de este color. Ahora. Lo vamos a utilizar para nuestros encabezados para que puedas hacer click aquí mismo para hacer un nuevo estilo de personaje . A continuación, voy a duplicar tan controlado moverlo profundo justo abajo, y voy a usar uno normal, y voy a seleccionar este color, que va a ser nuestra edad para todo el texto. Y por último, vamos a reducir su tamaño. Por lo que selecciona justo aquí al 14% y nos vamos de dedo a usar este color por así decirlo. Haga clic aquí para crear otros estilos de personaje. Y eso es todo para este proyecto porque sólo vamos a usar estas herramientas estilos de personajes . En la mayoría de los proyectos, lo vas a usar al menos tres. Y en la mayoría de los casos, vas a usar varios teléfonos diferentes. Pero este cliente prefirió la simple mirada fuera de esto y quería ir con él. Entonces lo que puedo decir es, OK, entonces lo que vamos a hacer ahora es crear una guía que nos ayude para que puedas seleccionar esto y desde este borde, simplemente mueve la guía hasta que se encuentre justo aquí, para que podamos siempre sabes que son 20 píxeles de este borde y haz lo mismo para este ícono aquí mismo. Para que podamos saber que son 20 píxeles de esta búsqueda, y hará que nuestro trabajo sea mucho más fácil Hecho deleite para que puedas seleccionarlos para moverlos aquí mismo, y puedes alinearlo así y simplemente sostener tu flecha inferior los movió, por ejemplo, a cinco píxeles. Y lo que es doble clic aquí y escribir, por ejemplo, son mejor compartir vela. Digamos algo así, y vamos a crear una imagen para ir atrás. Por lo tanto, simplemente usa erigir un poco y selecciona de borde a borde. Quitar la frontera. Lo que vamos a usar es este un B E V E B, y vamos a usar 375 que a 16% y saltaríamos a nuestras capas, locales bastante aquí, siendo centro de imagen y moverlo justo abajo para escuchar. Y ordenemos rápidamente algunas de estas capas. Entonces, como dije, esto va a las imágenes superiores aquí mismo, y lo que vamos a hacer es alinearnos para que sea 20 píxeles así. Así que mueve la flecha inferior dos veces y queremos que hagas lo mismo por esto. Entonces alineándose como así turno 12 Y así es como creamos nuestra imagen. A continuación, vamos a usar algo de paginación aquí mismo en el así que vamos a crear rápidamente en los labios. Por lo que a los hombres les gusta así que puedes crear, por ejemplo, 10 con 10 percenter hacen un círculo perfecto y puedes duplicarlo. Entonces el control de moverlo como, por ejemplo, 10 pixeles controlan D con 10 pixeles, igual que el control D y tienen cuatro, por ejemplo. Puedes seleccionarlos manteniendo presionado el turno. Muévelos hasta que se reúnan aquí mismo. Sostenga el turno y colóquelos en el medio así. Y también puedes agruparlo y luego posicionarlo en el medio si quieres. Pero me parece que esto funciona bien. Y si quieres, puedes quitar Borders de todos ellos. Entonces hagámoslo así así simplemente genial ahí. Y entonces lo que vamos a hacer es usar uno seleccionado. Entonces haz click en él, luego salta a nuestros activos y pulsa aquí para que podamos hacer de éste uno seleccionado. Si no te gusta cómo se ve esto, también puedes hacer la frontera en algunos de ellos. Pero creo que esto se ve bien. Lo que vamos a hacer ahora se les renombra. Entonces tal vez puedas usar circa uno en lugar de labios uno y un círculo, también. Después giró en círculo tres. Y finalmente quirúrgico para justo aquí. Y luego me gusta el dedo del pie ordenarlos para ir de arriba a abajo. Simplemente tiene más sentido para mí. Pero algunas personas lo prefieren al revés. De verdad conozco mi tan simplemente tomando imaginación y puedes moverte con justo debajo del texto aquí. A continuación, vamos a crear un texto abajo para que puedas seleccionar ambos de estos controles d los movió hacia abajo así hasta que se reúnan con este cambio de imagen en flecha abajo dos veces porque lo hicimos con todos ellos. Entonces aquí mismo, lo que vas a escribir es más popular así y aquí mismo vamos a escribir sello porque esto va a ser un enlace y la gente podrá dar click en este enlace y ver todo desde esta categoría en particular. Puedes seleccionarlos a ambos, golpear justo aquí, remolcar alinearlos perfectamente. Y lo que vamos a hacer ahora es seleccionar este control de imagen D hold shift. A mí sí me gusta así, y lo que vamos a hacer es crear una fila de tres imágenes. Entonces vamos a seleccionar rápidamente el radio de esquina, escribiendo cinco para que podamos hacer alrededor de las esquinas y vamos a escribir para los tamaños. Digamos 35 con 160 como así. Así que asegúrate de alinearte así que asegúrate de que sean 20 píxeles así, así que asegúrate de que sea 20 pasos Controla profundo, duplicado una vez más, alinearlo, asegúrate de que esté a 20 píxeles a la derecha y finalmente controló el Asegúrate de que sean 20 piezas de la derecha también, y lo que queremos lograr aquí mismo son disparadores de arrastre para que la gente pueda arrastrar y mirar las zonas, que están fuera de la pantalla en este momento. Y vamos a crear eso un poco más adelante, o lo que puedes hacer es simplemente crear uno y luego agruparlo y duplicarlo. Entonces voy a duplicar este texto. Dell Creek aquí mismo, controlando tipo en un nombre, Control A. Asegúrate de que esté en el centro así, y puedes seleccionarlo e imagen y asegurarte de que todos estén alineados perfectamente controlados el una vez más. Y a lo que vamos a ir abajo, es decir, vamos a introducir un precio. Entonces, por ejemplo, 24 y finalmente asegúrate de que todos estén en el medio así y ahí lo tenemos. Nuestro grupo está listo. Y asegúrate de estar, por ejemplo, 10 píxeles de abajo. Vamos a crear eso Like so así que todos son de 10 píxeles. Entonces de aquí a aquí, 10 de aquí a aquí. 10. Y por último, lo que vas a hacer es agruparlos a todos. Por lo tanto, seleccione los tres sosteniendo el control G para agruparlos. OK, bastante aquí y teclea en imagen Uno tal vez. Y ahora vamos a usar control de para duplicarlo y colocarlo, así así 20 piezas para escribir control D y mover este 1 20 píxeles también. Entonces esta es nuestra imagen. Tres. Esta es nuestra imagen a y finalmente esta es nuestra imagen uno. Por lo que sólo queremos pedirlos un poco mejor. Por lo que tienen más sentido en el camino. Así que selecciónalos todos, muévalos justo abajo. Aquí. También más popular y ver todos los movió justo por encima de estos, para que todo esto tenga mucho más sentido. También puedes agruparlos a todos, y lo vamos a hacer ahora. Tan seleccionado, como así el control. Tan solo asegúrate de seleccionarlos todos. Silla tan robusta, nuestra silla más vendida y el sello debe estar abajo como así Así Así que mantenga el control de turno. G. No escuches del todo tal vez héroe mecanografiado, porque esta es una imagen de héroe o son slider. Y para estos, tal vez podamos controlar G y nombrarlos, por ejemplo. más popular Y lo que queremos hacer ahora es crear otra sección a la que vamos a nombrar una combinación de habitaciones. Por lo que simplemente controla D en este y mueve éste hacia abajo. Tan seleccionado y por alguna razón, no se moverá. Sí, tenemos que moverlo así. Así que desplaza la flecha inferior dos veces y ahora muévelo. Tan solo sopla y van a patear aquí mismo y mecanografiar combinaciones de habitaciones. Y para este, lo que queremos hacer es quitar los precios, así que quitar el precio, quitar el precio. Y finalmente, de este, puedes entrar así y quitar el precio y puedes seleccionar los nombres. Por lo que primer control de agujero todo el control lo movió abajo hasta que se encuentran al final, como así y desplaza y arriba nuestro para que los hagas 10 píxeles arriba. Ahora estos serán los nombres de nuestras habitaciones, y estos son los productos más populares. Ahora, por último, quiero crear rápidamente una sección más, y para ello tengo que extender la altura de esta obra de arte. Y para ello, simplemente puedes seleccionar tu puerto y extenderlo hacia abajo por todo lo que necesites. Hagámoslo así por ahora. Y vamos a mover rápidamente el indicador de inicio hacia abajo. Y lo que queremos hacer es duplicar esto una vez más. Por lo que el control d mantenga el turno con este hasta que se encuentren en la parte superior como así controlar, el tipo de turno y flecha inferior dos veces. Y lo que queremos escribir aquí mismo es nuestro proceso. Y aquí mismo queremos hacer campaña leer más porque la gente podría estar interesada en el proceso fuera de esta empresa y cómo hacen sus piezas y pueden leer más. Pero aquí mismo vamos a crear un video y a hacer eso. Entonces vamos a renombrar rápidamente estos. Entonces estas son las combinaciones de Roma, y esta última es nuestro proceso, y vamos a eliminarlas para dejar solo una en grupo, como tan rápido para nombrar porque ya no lo necesitamos. Y para éste, lo que necesitamos es 335 con centro 178. Y lo que queremos hacer es posicionarlo justo a mediados de los ochenta. En el medio. Como puedes ver, toca la guía izquierda reemplazada así como la guía derecha colocada. Sólo asegúrate de que sea gracioso. Fotos del texto así y lo que queremos hacer es incluir otro icono, por lo que queremos incluir Display Icon So control. Ver saltar a la vista Control v Cualquiera para renombrar esto de imagen a video y solía jugar. No puedo moverme. Está justo abajo, y puedes seleccionarlos a ambos y simplemente hacer así, y colocará para jugar. No puedo justo en medio. Y por último, lo que queremos hacer es mover esto a la parte superior y moverlo 20 píxeles hacia abajo. Así que pasen mañana y luego finalmente, 10 pixeles más y luego den click por nuestra parte. Puedes acercarte mucho más para que puedas estar seguro y que se enganche en el lugar correcto así. Así que desplaza la flecha hacia arriba, y esa es nuestra pantalla creada. Como puedes ver, es realmente fácil porque muchos de los elementos se están repitiendo y vas a ver en los próximos videos cómo todo esto va a ser mucho más rápido ahora que tenemos al menos algunos elementos colocados en nuestra página . Y vamos a usar mucho más a estos chicos porque me pareció que son realmente útiles porque puedes colocar diferentes guías y pantallas diferentes si quisieras. Pero lo que es aún más importante es que puedes copiar la colocación de estas guías y pegarlas donde quieras en cualquiera de estas pantallas. Entonces en el siguiente video, vamos a empezar con pantalla de categoría, y ya voy a ver. 10. Crear trazos de alambre 2: Entonces, empecemos con la pantalla de categoría. Y antes de hacerlo, dar click en home click derecho, localizar guías y luego simplemente copiar guías. Haga clic aquí, haga clic derecho en guías y guías basadas y el mal basaron las guías en exactamente la misma posición que en la primera pantalla. Lo que vamos a hacer a continuación es seleccionar estos dos textos para que puedas mantener presionada tu tecla de control para saltar dentro de la carpeta Tecla de control. Una vez más, Control. Ver, click justo aquí, Control V y lo que vamos del dedo del pie justo aquí está tan lejos. Y aquí mismo, vamos a escribir en 129 artículos porque esta va a ser una pantalla de categoría. Y una vez que localicen la categoría, les será fácil navegar porque verán cuántos artículos hay dentro cada categoría. Y tal vez podamos mover estos 40 píxeles hacia abajo solo para que podamos tener un poco más de espacio entre nuestro nab nuestro y nuestros artículos y una vez más movidos en un bar y barra declarada en la parte superior. A continuación, vamos a copiar esto, Jodi, moverlo así Y fuimos puntera escribiendo control de precios de una vez más y moverlo hacia arriba 10 píxeles. Entonces lo vamos a alinear perfectamente como celular y luego movimos 10 píxeles. Haga doble clic aquí y escriba en ordenar por porque esto es lo que van a usar para ordenar estos artículos. Y lo que vamos a hacer es seleccionar el control de flecha hacia abajo. Ver, muévete aquí mismo, Control V. Y vamos a la posición del dedo del pie que hacia abajo Arrow Toby alineado con nuestro precio así. Y lo vamos a mover hasta que se reúna con nuestros guías. Mueve el precio y mantén el turno y muévelo 10 píxeles a la izquierda, luego elige ordenar por. Alinearlo con el precio así y una vez más, sí tienden porque. O incluso puedes alinearlo con el borde superior de este texto si así te gusta. Pero encontré que funciona exactamente de la misma manera al revés. Por lo que es 10 pixel stand pixel stand pixels, tam pixels en todas partes, el mismo espaciado. Y eso facilitará a los desarrolladores el trabajo posterior del dedo del pie en tu diseño. A continuación, vamos a seleccionar esta imagen para que una vez más puedas mantener el control. Salta a la vista. Usa la imagen y también puedes usar en estos dos textos. Entonces, control, ver saltar aquí mismo, Control V y nos vamos de pie. Alinearlo así. Y tal vez ahora podamos moverlo 20 píxeles hacia abajo de este texto. Así que desplazar la flecha inferior dos veces. Y ahora vamos a saltar. Muévanse, Toby, A izquierda, alineados. Y lo que vamos a hacer ahora es posicionar así. Por lo que a la parte superior y mantenga el turno los movió 10 píxeles a la izquierda, comenzó a derecha y abajo y hacer exactamente lo mismo por este precio. Tan simplemente, Nate, muévelo así y colóquelo 10 píxeles hacia abajo. O si comer es un poco demasiado, simplemente sostén tu flecha superior y con cinco píxeles hacia abajo y lo vas a probar un poco más tarde, ahora la vamos a agrandar. Entonces va a ser, uh, uh, 1 57 con 1 80 como así. Y lo que vamos a hacer ahora es agruparlos a todos. Así que asegúrate de que esto en la parte superior. Esto está en la parte inferior. Sostenga el control de turno G y escriba, por ejemplo, el elemento uno. Y lo que vamos a hacer ahora es ordenar algunas de estas capas porque sigue poniendo capa en la parte superior. De verdad me molesta, pero por lo que yo sepa, no se puede hacer nada al respecto. Por lo que puedes sostener este control G y tal vez escribiendo ordenar por centro derecho. Y vamos a colocar esto aquí mismo. Entonces tomé uno. Y lo que vamos a hacer ahora es poblarlos todos y crear seis,por ejemplo, por ejemplo, tan controlados d moverlo aquí mismo y seleccionarlos todos y controlarlos y d Así que 20 pixeles, así controlan D 20 pixeles así Y creamos un gran off seis rubros. Ahora vamos a ordenarlo. Por lo que artículo un artículo a y esta es la broca aburrida. Pero si quieres ser preciso para tus desarrolladores un poco más tarde y acortar tu trabajo porque no te vas a meter y salir saltando y comunicarte con desarrollador en artículos innecesarios, Entonces realmente te recomendé que nombraras a todos tus capas, todos tus grupos o tus activos, porque eso va a ser mucho más fácil para ti que trabajar y para que tus desarrolladores lo entiendan. Y al diablo no te molestarán porque les será realmente sencillo navegar porque todo se llama correctamente. Todo se nombra en orden y más tarde por el camino, cuando el código que van a recubrir como lees, básicamente así de arriba a abajo de izquierda, derecha. Por lo que es realmente fácil optimizarlos de antemano y luego solo darles los archivos finales . Y te va a encantar por ello porque acortará un día de trabajo también. A continuación, vamos a crear filtros de búsqueda y nos vemos en el siguiente video. 11. Crear trazos de alambre 3: Por lo tanto, empecemos con nuestra pantalla de filtros de búsqueda. Y lo primero que voy a hacer es seleccionar el snack bar Control D control. Nosotros justo aquí. Perdón. Debería usar control, ¿ Ves? Y luego el control profundo y lo que voy a la siguiente es seleccionar, arrendado para controlar C Control D justo aquí. Y voy a usar sofá una vez más. Entonces el control D y lo voy a mover aquí mismo. A continuación, voy a seleccionar el icono X o la ropa que pueda desde aquí. Control. Ver saltar a esta pantalla Control V y voy a posicionarlo así. Entonces en medio este es un bar de aire. Hazlo la ropa a la vista y, por ejemplo, selecciona ropa y menú y asegúrate de alinearlo perfectamente. Dejar cerrar. Elimina nab nuestro porque ya no lo necesitamos. Y lo que vamos a hacer a continuación es correcto. Haga clic aquí. Utilizar guías. Y tal vez simplemente podamos hacer clic derecho aquí mismo. No. Entonces tenemos que seleccionar nombre, ¿verdad? Haga clic en guías. Copiar guías. Haga clic aquí. Guías basados chicos para que podamos usar las mismas guías y asegurarnos de que muevas la ropa aquí justo hasta ahora está alineada correctamente. Pero vamos a duplicar bastante aquí y mecanografiar filtros porque estos van a ser nuestros filtros. Y los usuarios condenan filtrar lo que quieren que los artículos muestren. Entonces primero en fila va a ser color, y voy a mover esto un poco hacia abajo. No lo necesitamos por el momento. Entonces lo que queremos es moverlo así y todo el turno. 1234 Para que puedas moverte con 40 píxeles hacia abajo así. Y vamos a utilizar estas dos flechas para que puedas seleccionar un perno de ellas al mismo tiempo. Control. Ver control V para que no saltes en todo el tiempo. Usa este alineamiento árabe en el medio para que aún puedas gustarte a ambos alineados así . Y lo que queremos es más con en medio de la X porque la X es un Eichel más grande. Entonces colóquelo así y luego mueva este ícono justo debajo. Al igual que hasta que se alinee perfectamente controlado el en el color mantenga el turno y 12 vamos dedo del pie filtrar por precio como así y ahora puedes mover este y seleccionar ambos y alinear la flecha. Y a continuación voy a usar esto. Entonces digamos, por ejemplo, 349 control de una vez más y en este, digamos 1239 por ejemplo, para que puedas espaciarlos uniformemente y puedas, tal vez incluso así, y vamos para moverlos desde aquí. 40 píxeles abajo, como así sólo para tener un poco más de espacio. Entonces cuando están cerrados, sus 20 píxeles separados y cuando están abiertos, están para ello porque aparte solo para que podamos tener un poco más de espacio para respirar a continuación, vamos a crear un círculo. Así que crea un bonito círculo grande. A lo mejor 16 con 16 por ejemplo, fue a quitar el borde y por el color Vamos a usar en este. Sí, y vamos a alinearlo con este texto, o puedes seleccionarlos a los dos y te ves así que vamos a saltar a nuestro hechizo de capa una vez más, han sido rodeados, como, así controlado profundamente, y asegúrate de que estás en el medio con éste tan así y vamos a poner una especie de ah línea de tiempo detrás de ella. Entonces cómo vamos a hacer eso se usa un rectángulo y crecer van desde borde del dedo del pie como así quitar el borde para el radio de esquina. Vamos a usar cinco. Y por el color. Usemos éste, por ejemplo. Y creo que se ve bien. Sólo tenemos que moverlo abajo. Entonces llamémoslo una línea de tiempo. Por ejemplo, moviéndose por debajo del control G en todos ellos. Y hasta puedes filtrar de mis precios. Entonces así y mover este precio hacia arriba encantador lloró aquí y vamos a teclear, por ejemplo, slider todo el rango, quieras llamarlo. Y dentro tenemos dos círculos y nuestra línea de tiempo. O quizá podamos, por ejemplo, por ejemplo, mecanografiar. Organizar Bijie. Digamos así y los vamos a agrupar a todos. Así que selecciona el precio, selecciona esta flecha y selecciona todos estos controles G y los vamos a agrupar por precio . A continuación, queremos moverlo todo el camino hacia abajo y ordenar un poco algunas de estas capas hacia arriba. Por lo que etapas bar justo aquí fuimos a elegir filtros y cerrar subiendo así. Entonces flecha arriba y color, vamos a posicionarlos así controlar G. Así que este es nuestro color. Y vamos a usar, por ejemplo, por ejemplo, control D en este y moverlo hacia abajo. Sólo un toque. Por lo tanto, mantenga turno hasta que se alineen con el fondo fuera de nuestros círculos así. Entonces turno 1234 Y fuimos a usar materiales como este. Y necesitamos una flecha abajo justo aquí para que puedas hacer clic dentro de control, ver y saltar dentro de los materiales golpeados control V y luego vamos a mover esta flecha así hasta que se alinee con nuestra flecha arriba. Entonces, así Exactamente. Y vamos con el dedo del pie. Colocarlo como así borrar arriba, flecha como así Y lo que queremos crear insight es algo así como una selección rápida. que puedan seleccionar, por ejemplo, coágulo de letras, algunos otros materiales , por ejemplo, Sky o cualquier material que haya en oferta, y vamos a necesitar las pilas. Así que controla profundamente, muévalo fuera de la carpeta. Y una vez más para que les gusten estos materiales, ves por qué es importante nombrar todas tus capas y grupos, así que déjalo a la vista y posiciónalo. Es así y en verdad es un asunto porque queremos crear un marco. Así que haga doble clic aquí escribiendo una letra y haga el control D y muévelo así. Y tal vez queremos crear un coágulo como este. Entonces lo que queremos es crear nuestro rectángulo alrededor para que la gente pueda seleccionarlo, y cuando lo hagan, creará rectángulo básico alrededor de él. Entonces tal vez queremos crear un rectángulo como este y tal vez escribiendo. Por ejemplo, 80 mi pavo. Digamos que vamos a quitar el color de relleno y para el borde, vamos a usar este mismo color. Y ahora vamos a posicionar la perspicacia de la letra así y así. Entonces está en el medio en todos fuera de los sitios, y ahora vamos a usar estos dos. Entonces llamémoslo un marco de marco y una letra y la tela para beat justo debajo. Por lo que estos dos lo seleccionan, muévalos hasta que se reúnan con nuestro texto, como así para los pixeles hacia abajo y usan el coágulo y posicionarlo en el medio y tal vez incluso lo muevan. Veamos así 1234 piezas a la derecha y a continuación, necesitamos dos secciones más. Entonces usemos el color tan controlado en profundidad y no tenemos que crear otra instancia del , que podamos usar exactamente la misma instancia. Entonces usa el color. Pero por alguna razón seleccionó el texto. Déjame arreglarlo rápidamente. Entonces, dentro del color, tenemos un control Barroso profundo. Fui a moverlo hacia abajo hasta que se encuentren con luz aquí. 1234 Y este va a ser nuestro lavable. Entonces, ¿el producto es lavable o no? Significado más La capital al frente así Y necesitamos una instancia más. Entonces controla D y quiere mover este. Entonces hasta que se reúnan, como así una herramienta, si recuerdas porque está cerrada, no abierta. Y este no será mecanismo. Entonces, por ejemplo, porque elegimos sofá aquí mismo, ¿va a ser mecanismo? Entonces, ¿puedes retractarte? Están colapsándolo o algo así, o es solo sofá fijo y obtienes lo que pagaste. Eso es todo. No se puede mover. No se puede extender ni colocarlo de otra manera. Entonces eso es básicamente lo que es el mecanismo es que he estado rápidamente Verifica si estos en línea. Sí, lo son. Y una última cosa es que ordenemos días y creemos el fondo. Entonces empecemos desde arriba con filtros de aire, hemos cerrado. color es el primer precio es el segundo materiales es el TERT y esto debe ser lavable, como así Y finalmente, este es un mecanismo como ese y una cosa final. Queremos crear un botón aquí mismo. Entonces vamos a usar todo fuera del ingenio como Así nos vamos de pie. Elige este color porque es bonito y perno, vamos a escribir Bt N, que es abreviatura de botón, y lo vamos a posicionar, por ejemplo, para los píxeles. Pero primero usemos las dimensiones ¿qué se utiliza? 335 con 50 y voy a usar cinco para el radio de esquina. Y luego lo voy a mover 40 piezas arriba de en este indicador de casa, y finalmente voy a necesitar sólo un texto. Entonces usemos filtros texto tan controlado profundo, más escrito hasta abajo y tal vez, por ejemplo, por ejemplo, tratar así más a la vista, estos filtros se quedarán en la parte superior. Esto se quedará en la parte inferior así, y esto va a ser blancos. No hay una visión rápida y vamos a escribir, Aplicar la alegría de selección. Asegúrate de que esté en el centro y asegúrate de posicionarlo así y así así así está perfectamente en el centro y también puedes agrupar. Es tan control D fondo, y eso es todo para nuestra pantalla. Como puedes ver, es realmente bastante simple porque todas estas selecciones se repiten la más unción sobre No solo eso, obviamente, obviamente, sino cualquier software es que pone todas las capas en la parte superior. Realmente no sé si puedes arreglar algo de eso y si puedes pedirlos desde abajo. Pero en todo caso, aunque puedas, en la mayoría de los casos tienes remolque, pídalos tú mismo, pídalos tú mismo, por lo que esa es la parte que más tiempo consume. Si quieres mantenerte limpio n ordenado. Si no lo haces, realmente depende de ti. Entonces, por ejemplo, si está haciendo algunos archivos de práctica o estás enviando a archivos a un cliente y quieres pasar más tiempo al final antes de la entrega final al cliente. Entonces está bien. No tienes que nombrar todas tus capas y posicionarlas como hice a lo largo de este proyecto . Pero es realmente preferible si lo haces porque los desarrolladores o te aman y te acortará tu trabajo más adelante cuando se trate de cuando llegue el momento de entregar archivos finales de tipo final a tu cliente y a sus desarrolladores en el siguiente video, vamos a diseñar pantalla combinada de habitación, así que nos vemos ahí. 12. Crear trazos de alambre 4: para la pantalla de combinación incorrecta. Todo va a ser un realmente simple Así que haga clic en filtros de concierto. Clic derecho. Youse chicos copian guías, ¿verdad? Guías basadas en clics. Porque vamos a usar las mismas guías. Haga clic aquí en el icono de la ropa Control C control aquí mismo. Y luego vamos a usar esta espalda. Control de flecha. ¿ Ver? Saltando por dentro. Haga clic aquí. Control V. Y fuimos a moverlo así. Soto, este borde izquierdo y esta cometa izquierda y queremos alinearla con nuestro ícono de ropa. Entonces no lo haga así. Asegúrate de que sean 20 picks es de la parte superior, y por fin vamos con el dedo del pie borrar nuestro icono de ropa. Entonces es realmente simple. Simplemente mueves estos elementos y los usas como están. Entonces vamos a hacer lo mismo por los filtros. Entonces controla, mira, controla la derecha aquí, asegúrate de que esté 40 píxeles abajo. Por lo que 1234 adultos como aquí mismo, vamos a hablar siendo sala de estar porque esta habitación va a ser nuestro control de sala D y hacer otra copia. Y aquí mismo vamos a escribir en productos use like so porque ahora vamos a crear una tarjeta la cual vamos a mostrar nuestros productos los cuales se utilizan dentro de esta combinación de sala . Entonces ahora vamos a crear un fondo. Entonces usa un rectángulo. Quité el borde y por el color de vamos a usar este E b e p color, y vamos a usar cinco para el radio de esquina y para las dimensiones te deja calle 10 con 1 80 por ejemplo lo vamos a poner Así por ejemplo, 40 píxeles hacia abajo como así. 1234 Y vamos a usar 20 piezas arriba para este texto. Por lo que 12 a continuación, necesitamos algún texto. Entonces vamos a saltar rápidamente aquí. Selecciona estos textos o controla, Ver saltar aquí mismo. Control V y puedes colocarlos aquí mismo. Lo que queremos es crear un nombre para el producto, así que nombre y público aquí mismo, y va a ser un precio. Entonces, por ejemplo, se acaba de usar 24 por ahora. A continuación, podemos usar estos círculos. Entonces el control, ver cerrar todo esto arriba control V y simplemente posicionado círculo justo aquí y lo que queremos es Sí, Vamos a usar este para el 1er 1 controlado el y tal vez 20 pixels controlado el tal vez 26 punto esto y simplemente quiero crear algunos colores diferentes. Por lo que se utiliza algún color pardo, como tal tal vez. Y por último, para este, usemos algún color rojizo. Entonces tal vez así? Sí, creo que se ve bien. Y lo que queremos es espaciarlos uniformemente. Entonces posicionándose como este turno 12 y hacer lo mismo por el precio. Así que cambia 12 hacia abajo, y luego puedes seleccionarlos todos para que pueda seleccionar todos los círculos, controlar G, seleccionar el fondo y simplemente hacer así para que puedas colocarlos justo en el medio . Ahora, puedes hacer doble clic aquí y escribir cuatro, por ejemplo, porque esa es la información básica sobre nuestros productos. Entonces vamos a teclear en color tres, moverlo hacia abajo. Esta va a ser una persona que llama. Esto también va a ser color. Y finalmente fuimos a poner en nombre aquí mismo. Precio abajo abajo. Como puedes ver, justo cómo se ordena. Esto va a ser BG o puedes llamarlo tarjeta BG si quieres Quizás poniendo no línea así. Y por último, vamos a colocar toda esta barra de estado abajo en la parte superior. Entonces flecha hacia atrás va a estar justo debajo de la barra de estado uso de productos va a estar justo aquí y sala de estar justo aquí. Entonces ahora que tenemos eso, sólo necesitamos un orden de lugar para nuestra imagen y para hacer dejar que simplemente se puede duplicar esto por lo público aidc RPG decir bastante escuchar esa imagen y se puede elegir cuello blanco como así y para las dimensiones. Usemos 1 40 con 1 62% y vamos a ir a la posición del dedo en medio así y tal vez moverlo . 10 píxeles como este. Entonces ahora que tenemos nuestra tarjeta, podemos agrupar todo esto. Por lo que controla G escribiendo la tarjeta uno y arriba el control D y puedes moverte, descartar si quieres, así que muévelo así asegúrate de que se alineen y hacen turno de flecha derecha dos veces para que tengas 20 píxeles son parte. Ahora esta va a ser tarjeta también, y esta pantalla está terminada así que ahora vamos a usar Cuando empecemos a diseñar esta pantalla, vamos a usar una dimensión de fondo para rellenar la totalidad fuera de la pantalla, y vamos a usar separar los productos dentro de estas imágenes. Estos van a ser nombres fuera de los productos dentro de las imágenes y los precios así como los colores. Y la gente puede hacer clic aquí, y los llevará al elemento seleccionado si así lo desean. Y a partir de ahí, lo pueden tener el dedo del pie carro si así lo eligen. Entonces en el siguiente video vamos a diseñar pantallas ajustadas de elemento seleccionado y elemento seleccionado porque básicamente son dos fuera de la misma pantalla exactamente y solo tienen unos cuantos elementos diferentes entre ellos, así que ven ahí. 13. Crear trazos de alambre 5: Por lo tanto, empecemos con los elementos seleccionados Pantalla. Por lo que a la derecha, dar click en este. Guías, copiar guías, Elemento seleccionado, clic derecho guías basadas en guías. Y lo que queremos es seleccionar esta flecha. Entonces controla C control V porque va a estar exactamente en la misma ubicación. Y luego puedes seleccionar todo este control. Ver, Control V y luego estoy agruparlos y simplemente dejar en el icono de órdenes en su lugar, Realmente todos los demás, y simplemente muévelo hasta que se reúna con nuestro guía. Pídala un poco mejor. Al igual que mueva Cities bar en la parte superior. Y lo que queremos hacer ahora es seleccionar algún texto para que puedas seleccionar estos dos. Por ejemplo, Control, ver saltar aquí mismo. Control V. Y podemos dejarlos así por ahora. Esa semana, aquí mismo. Se escribiendo nombre del producto aquí mismo. Vamos a escribir en una línea de texto por no, y podemos moverlo. Entonces, por ejemplo, 10 píxeles hacia abajo controlados a profundidad. Haz otra copia así 10 píxeles hacia abajo. Y este va a ser nuestro precio. Entonces en 24 por ejemplo, y tal vez podamos ordenarlos un poco mejor, como así lo movió hasta aquí. Y lo que queremos hacer ahora es crear una imagen, y podemos crear una imagen usando un rectángulo y simplemente posicionarla un poco mejor, así, así, asegurarnos de que sea 375 que es el peso de nuestra pantalla quitado. Saltar fronterizo aquí mismo a los activos va a ser el color CB diciendo, para todas nuestras imágenes, Belka bastante aquí mecanografiando imagen. O puedes escribir en imagen de héroe, por ejemplo, y B. G porque esto sólo va a ser un fondo y vamos a colocar una imagen PNG sobre ella, que es la imagen sin ningún fondo, y vas a ver cómo se ve eso. Una vez que lleguemos a la parte de diseño fuera de este curso, asegúrate de que sea 468 y altura igual, y asegúrate de moverlo 20 píxeles de estos iconos como este y asegúrate de hacer lo mismo con estos textos. Entonces tal vez con 20 piezas como así ahora vamos a necesitar extender esto nuestro puerto todo el camino hacia abajo, y se puede hacer por ejemplo, 1706 Va a ser suficiente y movió indicador de casa hacia abajo como así Siguiente arriba. Lo que queremos crear es un color de un tamaño y tal vez escribir algo como sobre el producto aquí mismo para que puedas usar exactamente este mismo texto tan controlado D y posicionarlo a 40 píxeles desde aquí. Doble clic dentro y tecleando color, y queremos copiar estos colores para que puedas saltar dentro de la tarjeta. Una info. Y tal vez deberíamos agrupar estos y lo nombraron para colorear y hacer lo mismo por la otra tarjeta. Por lo que saltar dentro controlado G no rápido. Y por eso sigo diciendo que es realmente importante nombrar a todas tus capas y grupos porque va a ser muy fácil para ti navegar un poco más tarde cuando realmente tengas muchos de ellos, así que selecciónalos todos, los agruparon y los movió como así siguiente arriba queremos crear un tamaño así controlar d moverlo, y justo por debajo así 1234 La semana insight. Tengo tamaño de frijol y hagamos una más y 1234 lo que vamos a escribir aquí mismo es sobre el producto y abajo. Vamos a escribir en alguna información sobre el producto. Pero antes de hacerlo, vamos a seleccionar rápidamente esto para controlar. Ver control. Nosotros justo aquí y tal vez podamos crear algo así como 49 centímetros porque eso va a ser para la silla. Y tal vez podamos escribir por ejemplo, 59 centímetros y vamos a crear un marco a su alrededor. Entonces vamos a usar algo así como, vamos a crear un marco primero y luego usar algo así como 64 semanas 30. Creo que eso funciona bastante bien. Y para el color del marco, vamos a elegir este color como lo hicimos antes de saltar a la capa. Pasar todo y escribir enmarcar tu composición, el texto dentro del marco un poco mejor para que puedas seleccionar texto y asegurarte de colocarlo en el centro así y así, Entonces asegúrate de mover esto hasta aquí y asegúrate de que todo esto es una línea en el centro con nuestro tamaño. Entonces con tal vez 12 y asegúrate de que todos estén en la misma línea exacta como esta. Y una vez más, asegúrate de que Son 40 píxeles de arriba ahora con marco seleccionado, así que asegúrate de que sea así. Por lo que 1234 y hacer lo mismo por el sobre el producto. Porque ahora los tamaños aumentan porque creamos este marco. Entonces 12 y son 40 píxeles de aquí. A continuación, vamos a crear una imagen que irá justo debajo de aquí para que o bien pueda copiar esta imagen. Por lo que las víctimas se mueven con todo el camino abajo y para las dimensiones utilizadas 375 y tal vez a 16. Y sólo asegúrate de que esté 40 píxeles abajo del texto. Por lo que 1234 como esta. Y ahora lo que necesitamos es otro fuera de estos. Por lo que otro título te controlaba. Colóquelo así y tal vez escribiendo, por ejemplo, cómodo y con estilo, y vamos a mover esto hacia abajo para los píxeles. Por lo que 1234 y necesitamos un texto como este tan controlado d colocarlo aquí mismo, así. 12 tal vez, y crear un texto de área. Asegúrate de que tu área esté todo el camino de guía a guía y muévala justo abajo así , y vamos a usar el tapón Así que una vez más, mucho yeso, Philip Place o un texto insertar texto. A lo mejor podemos tener seis filas fuera de texto. Por lo que 1234 cinco y seis y tal vez conducir fuga justo aquí y terminó justo aquí. Y tal vez podamos incluir una imagen más tan controlada en profundidad y posicionarla 40 píxeles por igual . Entonces y para este, usemos diferentes dimensiones. Entonces 335 con 2 16 digamos que sí, y asegurémonos de que esté 40 pixeles abajo es, y para estos iban a usar 0550 Entonces lo que hicimos ahí es que a su alrededor, estas dos esquinas y estas dos se mantuvieron igual. Por lo que finalmente, selecciona este control D y con 40 piezas hacia abajo Así 1234 como esta. Y, por último, tipografía de visión rápida aburrida diseñada con el usuario en mente algo así. Y Derek, hemos creado nuestra pantalla de artículos seleccionados. Una última cosa que quiero hacer es agruparlos a todos y ordenarlos un poco mejor. Entonces vamos a usar esto esto y este Control G. He sido imagen de héroe porque esa una vez más va a ser nuestra imagen principal y podemos mover barra de estado y estos dos iconos todo el camino hacia fuera en la imagen de héroe superior justo debajo. Vamos a seleccionar colores tan color y eso va a ir justo por debajo de nuestra imagen de héroe. A continuación, tenemos talla y puedes seleccionarlas así si quieres. Por lo que controlar el tamaño de escritura G. Muévalos aquí mismo sobre el producto. Lugares como este. Entonces esta es nuestra imagen. El ejemplar rápido Una copia. Y vamos a colocar esta imagen justo debajo de aquí, cómoda y con estilo así. Y el control G. Cole C y presentador con estilo. Y también puedes agrupar estos dos, así que solo mueva la imagen en la parte superior Control G. Y finalmente, esto está diseñado con usuarios en mi y esta pantalla está terminada. Ahora, lo que podemos hacer es hacer doble clic aquí mismo. Alcance esto hacia abajo. Elimine este derecho. Guías de clic, Copiar guías, clic derecho. Yo me gustaría guías espaciales. Y ahora vamos a seleccionar todo excepto la barra de estado y el indicador de inicio o porque borramos indicador de inicio. Podemos usarlo también. Por lo tanto, mantenga turno. Seleccionar todo, controlar. Ves, saltando dentro del Control V y vas a colocar todo exactamente en la misma posición que estaba justo aquí. Ahora lo que vamos a hacer es cuando los usuarios seleccionen cualquiera de estos. Entonces saltemos rápidamente por dentro y nos vamos de pie. Simplemente esconde este marco porque no lo necesitamos. Por ahora, va a aparecer en esta pantalla para que puedan, por ejemplo, elegir este color y va a aparecer justo aquí, y esta imagen se va a encoger hasta la parte superior y se introducirá un botón derecho aquí. Entonces, empecemos con la imagen. Entonces vamos a reducir su tamaño 2435 percenter. Pero asegúrate de seleccionar solo imagen para que por 35 para que no afecte nada más que a la imagen en sí. Entonces lo que queremos hacer ahora es seleccionar este color para controlar D y tal vez aumentar su tamaño manteniendo pulsado shift old y left click. Y simplemente vamos a quitar y Phil incluir el borde y tal vez hacerlo un poco más grande , como así alejar y se puede ver cómo se ve eso. El tamaño siempre está seleccionado, por lo que tal vez podamos moverlos a la parte superior. Y y organizó esto un poco mejor. Entonces 1234 Y lo que necesitamos incluir ahora es el fondo. Entonces es como este Control. Ve saltar aquí mismo, controla V y simplemente muévelo para los píxeles hacia abajo. Entonces 1234 Y lo que queremos es escondernos del texto del producto. No se puede ver de todos modos, sino sólo para asegurarse de que esté oculto a la vista. 1234 Como puedes ver, tenemos 43 píxeles ahora, pero está bien porque no queremos sesgar ninguno de estos más adelante porque solo quieres mantenerlos como están. Este botón aparecerá en cuanto golpeen algo desde aquí. Y una última cosa que quiero hacer es solo asegurarme de que este sea el control de color seleccionado, Ver, porque quiero usar exactamente la misma capa en esta pantalla. Entonces controla v y asegúrate de que estás en el medio aquí en el medio aquí, por encima del color, también. Y simplemente escóndelo porque más adelante, cuando iniciemos nuestra animación, vamos a usar adobe ecstasies, función auto animate, y para que funcione correctamente, hay que tener todo fuera de las capas en exactamente el mismo lugar y nombrarlos correctamente porque no funcionará como debería de otra manera. Entonces eso es básicamente todo para esta pantalla. En el siguiente video, vamos a empezar con los detalles del pedido, y como puedes ver, cuanto tengas algunos ítems orden del pie alrededor, todo funciona mucho más rápido. Todo se movió un poco más rápido, y puedes pedirlos como quieras. Y te hará un trabajo mucho más fácil al final de la línea, así que te veré en los próximos. 14. Crear trazos de alambre 6: Pasemos ahora a la siguiente pantalla, que son los detalles del pedido. Y lo que queremos hacer es seleccionar esta perilla nuestro control. Ver para sobrellevarlo. Control, tenemos justo aquí. Guías de clic derecho, copiar guías y guías basadas en guías de clic derecho. Mismo líquido lo en todas las demás pantallas. A continuación, lo que queremos es algo de texto y dejar encontrar rápidamente el texto que quiero. O tal vez podamos simplemente seleccionar este. Entonces nombre del producto y una línea de control de texto Ver basted aquí mismo. Y lo que queremos hacer es posicionarlo así y aquí mismo vamos a escribir en total. Y para aquí, vamos a escribir detalles de orden como así. Y voy a posicionar total justo aquí o los detalles como es y colocarlos. 123 40 pixels Abajo. A continuación, vamos a crear tres tarjetas diferentes y un botón abajo porque queremos mostrar el dedo del pie lo que se agrega dentro de nuestro carrito. Y estos son los detalles de nuestros pedidos. Entonces lo primero es lo primero, vamos a crear la tarjeta. Por lo que voy a dibujar rápidamente un rectángulo quitado la frontera. Era del mismo color para todos estos. Entonces es éste. Y vamos a darle según Radius Five y usé 3351 47 para esto y voy a ir de pie alrededor él hacia arriba. Entonces muévete aquí mismo. 1234 y dados 40 pixeles. Tan bonito Big gap justo aquí. A continuación, lo que queremos es crear una imagen en su interior. Por lo que voy a golpear el control en D para duplicar este. Yo lo voy a hacer blanco. Simplemente bájalo un poco y tal vez usó dimensiones fuera de 1 40 que, digamos del 1 al 2, algo así como deuda. Y lo vamos a hacer así en el medio y posicionarlo puede ser, Sí, 10 píxeles de la izquierda. Ahora, lo que necesitamos crear aquí mismo es el nombre, el precio y la cantidad. Entonces simplemente voy a seleccionar estos, controlar en profundidad para duplicarlos, y luego moverlos justo debajo, saltar a mi ortografía de capa sólo para poder ver lo que estoy haciendo. Voy a mover estos dos hacia abajo, y vamos a empezar ordenados estos en tan solo un segundo, pero su primero crea rápidamente un nombre que sería nombre de nuestros productos. Este va a ser el precio Sula. Elige 24 por ejemplo, Y finalmente justo aquí abajo. Vamos a crear un marco simple con el número dentro así como la flecha. Entonces voy a usar uno. Y lo que necesitamos es una flecha abajo para poder saltar aquí mismo. Seleccione el control de flecha abajo, Ver, Saltar de nuevo en el control, retomó, bastó y podemos posicionarlos en la misma altura. Entonces, así y lo que necesitamos crear en este momento es este marco. Y para hacer eso, realmente va a ser un marco simple. Entonces usemos un rectángulo para y creemos un marco simple sin sentir solo color de borde y para color de borde. Podemos usar este color aquí mismo. Ahora para el marco podemos usar, ejemplo, pavo por 30 algo así. Tan bonito, grande. Y vamos a hacer dos amigos. Entonces controla D y asegúrate de que se superpongan aquí mismo. Entonces no como este lado a lado, pero así se superponen y no vemos esta línea aquí mismo. Entonces voy a posicionar a estos dos en el medio así posicionar la flecha justo aquí y posicionar el número justo aquí en el medio. Entonces lo que tenemos aquí mismo es que tenemos el nombre del producto. Tenemos el precio del producto y tenemos la cantidad para que puedan dar click aquí mismo y elegir. Entonces esto es bueno. Por ejemplo, como se explica en el video de marcos de alambre imprimibles. Si quieren elegir cuatro sillas, por ejemplo, pueden hacerlo desde aquí. Si quieren, por ejemplo, comprar jarrones. A lo mejor quieren seis. Si quieren ceniceros y artículos más pequeños, pueden recoger, que son cantidad que quieren. Por lo que cuando hagan clic en esta flecha pop up, Della aparecerá, y luego podrán seleccionar tantos elementos como quieran. Entonces ordenemos rápidamente estos. Entonces vamos a elegir el marco justo aquí mismo. Y ordenemos rápidamente estos. Entonces necesitamos que estos estén justo aquí, uno por encima de éste, y necesitamos nuestra flecha abajo por encima de ésta. Entonces patrulla g para agruparlos y tal vez podamos escribir en cantidad a continuación, necesitamos precio que vaya arriba, y necesitamos el nombre, que irá arriba, los vamos a mover todo el camino hacia abajo. Entonces lo que tenemos aquí mismo es imagen y finalmente tarjeta VG para que podamos saber qué capa es cuál. A continuación, podemos seleccionar estos, hacerlos una línea a la izquierda, y tal vez podamos jugar con tan espaciado. Entonces posicionémoslo así hasta que se encuentren aquí mismo, 10 píxeles y hagan lo mismo para esta parte inferior. Entonces, como aquí, 10 píxeles también. Selecciona viejo y controla G y selecciona BG y selecciona y simplemente colócala en el medio sobre groupies y lo que queremos es remolcar. Alinearlos con el borde derecho de la imagen y simplemente golpear 123 cuatro o tal vez incluso dos. Ya es suficiente por ahora. Entonces, como expliqué en los videos anteriores, esto es solo un marco de alambre, por lo que puedes agregarle todos estos elementos a medida que avanzas como tus imágenes. En ocasiones si somos sombras caídas, hay que aumentar los espaciamientos y luego volver atrás y aumentar los otros. Pero debido a que creamos estructura de espaciado constante, por lo que generalmente tenemos 10 20 o tal vez cuatro píxeles entre elementos. Es realmente fácil para ti luego saltar hacia atrás y reposicionarlos si es necesario. Entonces agrupemos rápidamente todos estos hasta Control G y lo llamemos tarjeta uno, por ejemplo. A continuación, quiero pedir algunos de estos. Por lo que tenemos escaleras estaban en la parte superior, nunca justo por debajo o los detalles totales. Tenemos tarjeta uno. Controlar el y controlar efectivamente, una vez más. Entonces voy a mover a estos dos un poco hacia abajo hasta que se encuentren aquí mismo. Shift 1 a 20 pixels llamado a esta tarjeta a y finalmente para perturbado uno hacer lo mismo 12 Y lo que necesitamos, finalmente, es un botón. Entonces vamos a usar este control de botón. Ver Control V aquí mismo. Y lo que vamos a escribir aquí mismo es proceder al pago porque si los usuarios están contentos con su selección, van a proceder al pago, y luego en la siguiente pantalla van a elegir sus opciones de pago. Entonces es ya sea tarjeta de crédito o PayPal, y esa es la pantalla que vamos a diseñar a continuación. Entonces ya veré allí 15. Crear trazos de alambre 7: Entonces, a continuación, vamos a crear una pantalla de pago. Así que me voy del dedo del pie a la derecha Da clic en este uno Guías Copiar guía. Tan mismo que todos los demás. Puedes golpear guías basadas y lo que necesitamos en la parte superior es solo una flecha hacia atrás para que podamos seleccionar esta desde aquí mismo. Puedes acercarte un poco más si puedes golpearlo para controlar el control del mar. Nosotros aquí mismo, que va a ser la única opción para volver a esta pantalla, y puedes abortar yendo al menú desde esta pantalla y yendo a casa o a cualquier otra pantalla que se ofrezca. Voy a copiar estos dos para controlar el control C. Nosotros justo aquí, justo aquí. Voy a escribir en pagos y en este, simplemente voy a escribir tarjeta de crédito, y voy a moverla abajo, así que va a estar en esta misma línea, y van a ser 40 píxeles y abajo. Por lo que 1234 y en la línea correcta vamos a escribir. Añádalo. Por lo que el control D en ello. Y debido a que nuestra tarjeta de crédito simplemente iría por debajo de esto aquí mismo si hacen clic en editar, tendrán la opción de cambiar en la tarjeta de crédito y de moverse por alguna información . Y si la tarjeta de crédito ha caducado, pueden agregar una nueva. O pueden cambiar el código CBC y algo así. Entonces esa va a ser nuestra opción. Y ahora vamos a diseñar la tarjeta de crédito justo por debajo de eso y la opción de PayPal por debajo de la deuda . Entonces es genial rectángulo, y va a ser 335 Igual que todos los demás, pero con 1 80 y vamos a cambiar el color a algo más oscuro usa esquina, radio o cinco. Igual que hicimos por todos los demás. Saltemos en capa de remolque especial y voy a nombrar a este carrito BG como Así fumo Salto así y voy a moverlo. Digamos que 20 píxeles hacia abajo. Entonces 12 y vamos a seleccionar esto para controlar la película de control C y lo colocamos aquí mismo, saltar atrás y usar blanco porque todo fuera de nuestro texto va a ser blanco a la vista. Entonces lo voy a posicionar así, y está bien, vamos a saltar, seleccionar su control del logotipo de Visa. Ver, salta a la derecha y golpea el control V en el carro saltando. Y tal vez podamos dejarlo tal como está. Entonces desplaza 12 abajo, uno a la derecha, y lo que queremos hacer es reposicionar algunas de estas. Entonces para éste, vamos a usar algunas estrellas. Entonces lo que esto va a hacer es crear una simulación de que hay números detrás de estas estrellas. Lo mismo que haces en todas las demás tarjetas cuando estás comprando cosas por internet. Entonces voy a crear cuatro cartas para estrellas y luego simplemente golpear el espacio, por ejemplo, cuatro veces. Entonces 1234 tal vez cinco. Y entonces puedo hacer la selección aquí mismo. Control. Ver derecha Flecha Control V Control V. Y por último, para este último. Usemos por ejemplo, 1234 Digamos que sí. Esto va a simular el número de nuestro carrito. Siguiente arriba Control D duplicar el mismo texto de click y tipo en nombre del titular de la tarjeta como así, imaginemos que el nombre es John dope. Digamos que es realmente fácil y sencillo de recordar. Vamos a seleccionar todos estos y hacerlos una línea a la izquierda y una vez más. Entonces cambia 12 y no te preocupes por las posiciones. A lo mejor podemos cambiarlo ahora mismo. Por lo que 10 píxeles y 20 píxeles de abajo, así que quieren. Y podrías posicionar esto, por ejemplo, aquí mismo para que puedas ver algo por aquí va a estar en medio. Puedes ser preciso si quieres, pero no nos empantanemos con detalles. Así que selectos para controlar D y los voy a colocar aquí mismo. Por lo que esto se va a escribir en fecha de caducidad. Amble Odette. Vamos a escribir en fecha. Entonces digamos segundos meses de descanso, 2025. Digamos que algo así lo hace espaciar, haciendo agradable y claro 20 píxeles de la derecha y eso es todo. Hemos creado nuestra tarjeta de crédito Visa. Si quieres. Por supuesto, puedes cambiar el color de esta tarjeta. Puedes añadir una sombra de gota para que sea un poco más atractivo. Pero para esta etapa fuera de nuestro proceso, dejémoslo ya que es realmente feliz cómo resultó esto, y ahora vamos a organizar rápidamente algunos de estos detalles para que estos irán justo debajo del nombre llamado nombre Holden subiría fecha de caducidad me gusta so, Card BG y Control G. Esto va a ser o tarjeta de crédito como Así que a continuación, tenemos que crear lo mismo pero para la gente. Entonces elegamos estos dos controles profundo y posicionados justo aquí. Por lo que de 1 a 20 píxeles controlan de en las tarjetas duplicadas. Asegúrate de tener 20 píxeles. Entonces exactamente lo mismo aquí. No necesitamos fecha de caducidad porque PayPal no la tiene. Entonces vamos a eliminar estos dos. Y en lugar de que ocurriera la visa, vamos a sustituir por el logotipo de la gente. Por lo que se encuentra el logotipo de papel justo aquí. Control seleccionado. Ver? Salta aquí mismo. Haga clic cuando la visa elimine Control V y asegúrese de que su posiciónelo en exactamente la misma ubicación que hizo con el logotipo de la visa. Entonces cambia a la derecha 22 el 20 de abajo y eso es todo. Básicamente, has completado tu ponencia. Mira, cambiemos rápidamente el color para diferenciarlos un poco. Y usemos tal vez esto para la gente un logotipo, y me gusta cómo se ve eso, Así que vamos a escribir en papal aquí mismo. Al igual que así. Y a continuación, vamos a duplicar este control de botón C. Nosotros justo aquí y mecanografiando. Hacer un pago. Entonces vamos a dejar esto adentro, hacer un pago, y eso es básicamente todo. Hemos creado nuestra pantalla. Vamos a mover rápidamente algunas de estas capas alrededor. Entonces status pedir prestado. Ve en la parte superior. Tenemos flecha hacia atrás. Justo debajo. Contamos con pagos. Aquí está. Contamos con tarjeta de crédito y editar, que irá justo por debajo de registro de pago arriba así que aquí, crackers. Y entonces tenemos este texto el cual debe escribir en personas como así y en él. Justo debajo tenemos PayPal y finalmente tenemos el botón. En el siguiente video, vamos a diseñar, almacenar, ubicación, pantalla, donde vamos a incluir un mapa y algunas funciones básicas a continuación. Entonces te veré allí 16. Crear trazos de alambre 8: Ahora sigamos adelante rápidamente y terminemos este proceso de encuadre de alambre con ubicaciones de tiendas y luego finalmente un menú. Entonces, empecemos con las ubicaciones de las tiendas. Tan mismo cosa, grandes guías de copia. Y tal vez puedas seleccionar ambas de estas guías de clic derecho y guías basadas. Ahora bien, podría hacer esto al principio, pero a veces nunca se sabe si se quiere cambiar algunas de estas. Por lo que es realmente manera más fácil de ir uno por uno. Y luego no tener que perder tiempo y volver y hacer algunos cambios que no querías en primer lugar. Entonces empecemos cuál nuestra ropa tan seleccionada a partir de aquí. Control. Ver, Salta aquí mismo. Control V. A continuación, tenemos el icono de búsqueda, que necesitamos control. ¿ Ver? Salta aquí mismo. Control V. Y lo voy a posicionar aquí mismo a este filo. Asegúrese de su posición como le gustaría así. Y lo que necesitamos son algunos textos básicos o utilizar este. Controla C controla V y asegúrate de que esté en medio de estos como este y asegúrate de que todos ellos nuestra posición como deberían. Así que asegúrate de estar 20 píxeles abajo, igual que lo hicimos nosotros. Y asegúrate de que se trata de 20 piezas a la derecha desde los íconos fuera de la basura 12 y escribe en las ubicaciones de las tiendas o incluso sus ubicaciones de búsqueda, lo cual tiene mucho más sentido como este. Y por último, lo que necesitamos es una línea abajo, para que puedas crear un uso de línea en vital. Pero me gusta crearlo usando capas de forma que siempre me pueden traer de vuelta. Y siempre puedo ajustarlos y cambiarlos después si quiero. Puede seleccionar esto o simplemente puede hacer clic aquí. A ver. Y tal vez por la altura podemos tomar ser uno. Y como puedes ver, tenemos una línea así que los alineamos al fondo estos iconos desplazan 12 Asegúrate de tener el mismo espaciado que antes, y hemos terminado con esto, así que tal vez podamos crear algún orden. Entonces línea moverlo todo el camino abajo. Entonces tenemos, así, cerrado esta búsqueda y agruparlos todos juntos, y tal vez podamos escribir en Search Bar Realty solo para que podamos tener una pantalla un poco más organizada a continuación, podemos crear el parte inferior fuera de la pantalla. Entonces vamos a seleccionar un rectángulo así, usar cinco como, así eliminado borde y usar singular como lo hicimos para todos estos otros. Lo que queremos a continuación es elegir algún texto para que puedas elegir esto en este control. C controlamos y asegúrate de colocarlos aquí mismo dentro, así que localmente lloró aquí y escribiendo. Por ejemplo, tienda Bell Great. Esta va a ser una calle, Así que vamos a llamarla así. Por supuesto, puedes escribir en cualquier calle cualquier ciudad que quieras pero angustia porque es en Belgrado, Control de y finalmente aquí mismo para tener el mismo espaciado, doble tipo rápido en. Más detalles controlan un y hit subyacente porque este va a ser un enlace sencillo. Podría ser un mensaje pop up, pop literal desde abajo o desde arriba. Realmente no importa ni nada. Él lo puede llevar a la pantalla completamente diferente. De verdad depende de ti y de tu cliente decidir. Pero en más detalles, las personas pueden aprender sobre cuatro números sobre la dirección de correo electrónico sobre sitio web específico sobre cosas como esas para que puedan acceder directamente desde aquí. A continuación, lo que necesitamos es un ícono para la navegación, porque cuando encuentren ubicación aquí, va a aparecer justo aquí y pueden ver aplacarse justo aquí. Y los llevará a la aplicación preferida, el uso. Por lo que Google maps, caminos, mapas de manzana y así sucesivamente. Entonces elegamos rápidamente ese ícono. Es este un control Ver salto aquí mismo, Control V Y lo que quieres es crear un círculo simple. Entonces tal vez podamos crear uno. Por ejemplo, 50 por 50. Qué hoz que parece. Por lo que 50 por 50. Quitar la frontera. Asegúrate de que sea blanco. Salta a las capas. Panel saltando justo aquí. Tipo de DoubleClick en círculos. Y queremos seleccionar estos dos posicionamiento así. Y lo que queremos es posicionar esto en el medio así y quizá movido 40 píxeles. Entonces 1234 Y tal vez podamos pedir estos un poco mejor así. Seleccione el fondo, seleccione el grupo que lo posicionó en el medio. A lo mejor puedes llamar a este texto. Definitivamente lo criterios. Me han arreglado así, y esto va a ser una tarjeta, BG. Igual que en todos los demás. Y tal vez podamos agruparlos a todos como así que solo asegúrate de mover estos aquí mismo, controlar G. E incluso puedes agrupar esas direcciones vendidas como ese grupo, todas ellas. Entonces controla G. Este va a ser nuestro carrito, y puedes moverlo abajo y tal vez usar 1234 pixels o 20 pixels. Vamos a comprobar rápidamente lo que hicimos en los otros. Entonces en este 11234 Así son 40 pixeles y lo hicimos correctamente. Como puedes ver, está en el medio. Se ve exactamente igual que todos los demás, y lo que necesitamos finalmente es crear algunas direcciones. Ahora puedes hacerlo aquí mismo, o puedes esperar un poco más tarde cuando tengas tu diseño terminado. Pero hagámoslo de todos modos. Por lo que voy a seleccionar este icono de ubicación, saltar a nuestro mapa control v pegarlo en posición simple. Está en algún lugar por aquí, Digamos que entonces use un clic mental justo debajo de él. Entonces, así. A lo mejor así, quieres usar alguna información de calle como así entonces para que podamos crear una parte así, y lo que necesitamos es un círculo, y podemos usar algunos de estos círculos que ya creamos. Entonces para los colores, color selectivo y el control de decoloración, nos vemos coyuntura aquí mismo en esta pantalla Control V para pegarlo. Puedes colocarlo así, y ese va a ser tu destino final. Entonces usar este color y llenarse con este color así y ese va a ser tu destino final. Ahora, qué es genial de esta palmadita en Adobe X'd principalmente doble clic en él y puedes mover los puntos que obtienes. Sostenga turno. Si quieres hacer una parte recta de puntos así, tal vez quiero posicionarlo así y tal vez incluso así, y lo que es genial también es que luego podemos moverlo una vez que incluimos nuestro mapa solo para que podamos convertirlo en un poco más realista. Si no te gusta cómo se ve esto, puedes hacer click en una mascota y puedes crear alrededor guardado, que, si acercamos, puedes ver que se ve mucho mejor que sin alrededor guardado porque se va a simplemente hazlo como si utilizas pero Gap. Va a ser una simple erección, realmente, como se ve esta gorra redonda. Y debido a que todos nuestros iconos tienen estos bordes redondeados, puedes colocarlo y colocarlo mucho mejor que con el tapón de botella, como lo llaman. Entonces eso es básicamente todo para la ubicación de la tienda. Y vamos de forma rápida y finalmente solo hacer una pantalla de menú. Entonces lo que necesitamos es este ícono cercano Copiarlo, bastado en la misma posición exactamente. También necesitamos un logotipo, así que lo vamos a seleccionar desde aquí. Salta, remolca nuestro control de pantalla V. Asegúrate de que esté en medio y lo que necesitamos es un fondo. Entonces vamos a crear un bonito rectángulo grande alrededor de toda nuestra pantalla, quitado el borde. Llámalo BG Move. Está todo el camino abajo. Más todo esto arriba por lo que más tiempo se movió Mamula y por qué creamos esto y fondo es porque queremos crear esta pantalla como una superposición. Por lo que cuando creas un fondo, puedes usar todo tipo de diferentes animaciones. Por ejemplo, se puede utilizar la diferente obedecer ciudad. Entonces, por ejemplo, puedes reducir tu ciudad de pago si quieres, y luego superponer toda esta pantalla sobre las otras pantallas. Ahora, finalmente, lo que necesitamos es mucho texto fuera, Así que elige este. Patrulla C control V. Asegúrate de que sea desde el centro y asegúrate de que esté en el centro. Asegúrate de que vaya así por ejemplo, 1234 Igual que hicimos con todos los demás. Por lo que se llama a este 1er perfil 1 y se puede golpear, entrar y luego bajar unas líneas. Pero me gusta mantener mi texto separado porque realmente me da mucha más flexibilidad para que puedas moverlo abajo, como así 1234 Y tal vez podamos llamar a éste mis órdenes así. Control D Entonces mueve este abajo. No sé por qué sigue haciendo esto, pero como puedes ver, sigue seleccionando a todos los demás. Pero en el caso, simplemente seleccione el top quiere o 1234 y luego posicionarlo justo debajo de éste. De verdad no sé qué es lo que hace, pero tal vez porque estoy sosteniendo turno? No lo sé. No hacía eso antes. Por lo que mis pagos va a ser en este. Y por último, porque necesitamos dos más, podemos copiar estos dos. Entonces mis órdenes y mis pagos, Vamos a mover estos dos hacia abajo. Y como puedes ver, sigue haciendo esto incluso si solo seleccionas dos o tres capas diferentes. Pero tal vez podamos hacerlo así. Entonces solo muévelo solo un toque. Selecciona estos dos para que todos los turnos y los movió así Así 1234 Esto va a ser ajustes como esa. Y finalmente tenemos sesión y ahí tienes. Hemos terminado nuestra pantalla. Asegúrate de que todos estén en el mismo orden. Y si no te gusta cómo se ve esto puedes posicionar este texto hacia abajo. Por lo que permítanme seleccionar rápidamente todos así. Control G. Y lo que quiero hacer es crear un rectángulo sencillo desde la parte inferior de la X hasta la parte superior de nuestro logo . Entonces, como estos dos, y luego simplemente golpear justo aquí. Se va dedo del pie. Alinearlo en medio de este espacio porque el rectángulo está llenando el espacio finalmente delis, rectángulo y luego mover algunos de estos hacia abajo. Entonces aquí mismo en grupo y aquí vamos. Hemos creado nuestra pantalla de menú la cual iban de pie excesivamente en el proceso de diseño. Reiniciamos el prototipo de nuestras pantallas y eso es todo. Hemos terminado nuestros marcos de alambre una cosa final y realmente importante. Si no lo tienes en auto safe, asegúrate de presionar control o comando s y se va a guardar tu proyecto. Por lo que no vas a perder ningún detalle cuando vuelvas a ello un poco más tarde. Pero adobe es estos realmente inteligentes y está haciendo auto seguro. Entonces si no lo tienes habilitado, asegúrate de que dedo del pie lo encuentre en la configuración o si no lo quieres y te gusto yo, me gusta guardar tu propio trabajo de vez en cuando, así que simplemente pulsa control o comando s, y va a guardarlo en la ubicación deseada. Entonces eso es todo para la parte de encuadre blanco de este curso. A continuación en la siguiente sección, vamos a empezar con el diseño. Te voy a mostrar cómo se configura la estructura fuera de las imágenes en tu carpeta de caballos de carreras y cómo puedes usar esas imágenes para crear Ah, diseño de alta Fidelidad, que vas a presentar a tu cliente así que te veré en el siguiente parte del curso . 17. Estructura de imagen: en esta parte del curso, vamos a empezar a trabajar en nuestro diseño, pero antes de hacerlo, solo quiero correr rápidamente por las imágenes que están disponibles para ti así como cómo están estructuradas. Entonces si entras, tu recurso es más lleno y dentro de tu carpeta de imágenes, estas imágenes de aquí mismo entrarán en diferentes pantallas. Entonces, por ejemplo, esta es nuestra pantalla de ubicaciones de tiendas. Esto es para nuestra pantalla de inicio. Estas tres son para nuestras imágenes combinadas de sala, y esto es para la imagen superior de la pantalla de inicio, y vas a ver en los próximos años una vez que empecemos a incluir estas imágenes y hacer algunos cambios y así tienes estas tres carpetas. Por lo que todas estas carpetas contienen diferentes imágenes excepto la silla principal y ellos R P y G's. Entonces si voy dentro del sofá, todas estas imágenes tienen los fondos retirados. Entonces están PNG en, tal y como ves aquí mismo, lo que significa que no tienen antecedentes, y también significa que puedes incluirlos en diferentes fondos y superponerlos en parte superior, lo cual soy te va a mostrar en los próximos videos ST Ng para estas lámparas y para esta silla principal. Esta es nuestra imagen principal de héroe para la pantalla de elementos seleccionados, y es un PNG sin ningún fondo, mientras que estos dos tienen fondos porque solo son imágenes explicadoras, que van a ir por debajo de esta imagen principal. Entonces esto es básicamente estructura de imagen. Es muy fácil, realmente simple. Y en el siguiente video, vamos a empezar con pantalla de inicio, y te voy a mostrar cómo puedes incluir algunas de estas imágenes, así que ya veré ahí. 18. Crear diseño 1: Ahora empecemos a diseñar nuestras pantallas e incluyendo algunas imágenes y algunos efectos diferentes . Entonces antes de que hagamos algo, lo que me gusta hacer es simplemente duplicar todos estos son puertos y arrastrarlos y soltarlos debajo este marco de alambre, nuestra sección de puerto. Entonces para hacer eso, simplemente selecciónelos todos, presione control o comando D para duplicarlos. A continuación, basta con hacer clic en uno de ellos y alinearlos en la parte inferior. Y lo que también me gusta hacer por los clientes porque ya sabes lo que es. Básicamente, también me gusta hacer una selección de texto tan rápida, en algún lugar por aquí, escribiendo marcos de alambre o marco de alambre, cualquiera que quieras, hazlo algo bonito y grande. Entonces, por ejemplo, 100 y tal vez hasta Barba y que tal vez 200. Eso es bueno. Y simplemente colocarlo en el medio fuera de estas pantallas. Así que aproximadamente por aquí, tal vez , sí, y también puedes hacer que sea tan principalmente 400. Mantengámoslo así, y podrías golpear el control D y hacerlo 400 desde aquí. Entonces, así , y luego simplemente mueva estas pantallas y hacia abajo y muévalas. Hazlos 400 a partir de esto, creo que aquí es buen control. Cero para chasquear en posición. Dull rapido aquí mismo. Diseño de mecanografía y eso es todo. Ahora lo que tenemos que hacer es hacer algunos cambios antes de incluir imágenes, y quiero incluir algunas sombras de gota a algunas de estas secciones, y también quiero incluir un nuevo color porque hablé con el cliente y dicen que necesitamos salpican color para estos botones porque se ven un poco raros. Por lo que el color que eligieron me dejó seleccionar rápidamente este fondo. El color que eligieron es F C siete, un centro de prensa 00, y como puedes ver, es una especie de color naranja, lo que significa que va del dedo del pie. Destacan de estos colores y vas a simplemente seleccionarlo y dar click aquí mismo, Toe añadió dedo del pie nuestros colores. Puedes golpear el control en cuanto a decir de tu proyecto, porque ya le hicimos algunos grandes cambios, y ahora vamos a ir a seleccionar estos botones. Simplemente haz click en tu dedo del pie de color, aplica este nuevo color a tus botones, y lo que queremos hacer también es incluir alguna sombra de gota, así que quiero ir justo aquí a este 1er 1 y dejarme saltar de nuevo a mi panel de capas. Entonces sé cuál fue seleccionada? Lo que quiero hacer es incluir Shadow Click justo aquí, cinco para el eje X, volar para el Eje Y y 10 40 b acceso para un centro. Y lo que quiero hacer es hacer clic en la sombra, click aquí mismo en el seleccionador de colores, pero pasa a tu panel de activos para que puedas seleccionar mejor tu color. Entonces haga clic en el selector de color y haga clic en este color. Entonces es 717171 y haga clic aquí y escriba 25 percenter, porque eso va a bajar la opacidad de esa sombra al 25% ahora. Lo que puedes hacer es hacer clic derecho en copiar, y puedes hacer comando de control. Haga clic para seleccionar este directamente porque está dentro de la carpeta. Como puedes ver aquí mismo, click derecho basado en Control de Padres. Da click en este aspecto basado en clic derecho, y eso va a hacer que todos se vean igual. Ahora haz lo mismo por la combinación equivocada, así que simplemente sigue adelante y selecciona todos ellos apariencia basada y finalmente haz lo mismo para el video en esta pantalla padres basados en. Ahora adelante y cierra todas estas carpetas, y me gusta hacer todo esto antes. Incluyo imágenes, porque cuando incluyes imágenes en estos marcador de posición, adobe SD las tratará como un solo objeto. Por lo que no puedes quitar esa imagen si no eliminas de ese lugar titular o golpeas y haces un par de veces. Entonces voy a saltar y hacerlo. Lo mismo para estos. Entonces simplemente controlar o mandar. Haga clic y luego simplemente presione clic derecho y pegue apariencia Oregon Masa Control o comando Ault y nosotros. Pero me resulta más fácil así. Lo que también quiero hacer es aplicar la misma sombra a los botones, pero vamos a ir a pegar la apariencia en estos objetos porque es mucho más sencillo hacerlo por ellos porque todos son del mismo color. Y si pegas desaparición, apagará el color estos botones a color gris, y eso no queremos. También queremos incluir las mismas sombras para estas, pero vamos a terminar rápidamente con esta para pegar apariencia. Ahora lo podemos hacer por las cartas, así que simplemente golpea. Toe la tarjeta BG golpeó sombra saltar de nuevo a su panel de activos. Por lo que pegó 55 y 10. Salta a la sombra. Haga clic aquí. Selecciona este 71 color en todo tu 25% básico y haz lo mismo para este final. Asegúrate de estar en la tarjeta, BG. Y si lo eres, salta de nuevo al panel de activos. Seleccione la sombra. Por lo que una vez más, 55 10 click en la sombra. Da click en el seleccionador de color seleccionado a partir de aquí 25% por ciento er Y ahora lo que nos queda hacer es seleccionar exactamente la misma sombra pero para estos botones. Entonces voy a seleccionar este 1er 1 a una sombra. Por lo que 55 10 Haga clic aquí. Haga clic aquí. Asegúrate de estar en este color. 7171 Asegurarse 25%. Y ahora lo que puedes hacer es correcto. Haga clic en copiar, y luego vaya a todos los botones y presione la apariencia basada. Ahora, no te preocupes por cerrar todas las carpetas porque ahora vamos a ir e incluir imágenes en nuestra pantalla de inicio por ejemplo, Pero antes de que lo hagamos, necesito hacer un cambio más para que puedas hacer clic aquí, tell click en el nombre fuera del aeropuerto y simplemente borra estas extensiones porque realmente no me gusta cómo se ve. Se ve un poco desordenado, pero simplemente adelante y también puedes hacer eso rápido dentro y justo aquí. Se puede escribir en diseño, por ejemplo, si se quiere. Pero me pareció mucho más sencillo de esta manera porque si envías este archivo a tu desarrollador, que tienes que hacer al final del proyecto, ellos podrán entender si es, ah, ah, marco de alambre o un diseño, porque número uno tiene imágenes. Tiene algunas sombras que ya agregamos. Tiene algunos cambios aplicados a la misma y así tiene la escritura de diseño justo arriba. Entonces si me alejo un poco, se puede ver aquí mismo para que puedan decir si se trata de un diseño o de un marco de alambre. Entonces ahora que hicimos esos cambios, puedes golpear el control como decir este proyecto. Sigamos ahora e incluimos imágenes para la pantalla de inicio, así que estaba acercando un poco más. Sostenga el control. Da click dentro de esta imagen de héroe. Puedes cerrar esta carpeta porque está abierta y yo puedo saltar dentro. Nuestra imagen es carpeta y localizaré la silla de cuento arrastrarla y soltarla dentro y realizas un click y agrandar esta imagen así, y puedes posicionar la silla como así da click en cualquier parte exterior y para que sea un poco más atractiva para el ojo. Simplemente pulsa aquí y selecciona desde tu panel de activos el color blanco para este texto inferior , porque eso hará que se levante un poco más. Una cosa más que me gustaría hacer es seleccionar el círculo de paginación de inicio y quitar el color de campo incluido el borde y para el color de borde Simple seleccionar blanco porque eso hará que destaque un poco más de estos elementos en su interior. A continuación, tenemos que crear la sección más popular y poblada con imágenes. Entonces lo que me gusta hacer es hacer doble clic dentro de este nombre y escribir en Milano para este. Escribiré en general y finalmente para el de popa, pero tendré que moverlo aquí mismo. Entonces déjame moverlo todo. Así que selecciona la imagen tres y muévala. Todo bien en Palermo. Ahora por ello. El precio va a estar en 96 para géneros va a ser 96. Y para el Milano va a ser 98 ahora. Cambiemos los colores para todos ellos. Salta en su panel de trasero Haz clic aquí. Así que selecciona el precio. Haga clic aquí. Seleccione el precio para el giro un clic justo aquí y ahora vamos a incluir imágenes. Así que selecciona este 1er 1 salto en capas Panel ahora saltando a imágenes y lo que quieres localizar estas lámparas Así que tenemos que seleccionar esta lámpara una arrastrarla y soltarla, pero no aquí porque va a poblar toda esta sección y reemplazarla y enmascararla con daños. Pero en algún lugar afuera, como aquí. Ahora mantenga pulsado shift old y left Click, porque eso va a habilidad, su imagen de manera uniforme y se puede alejar y simplemente llamar shift y click izquierdo. Si es para ti, simplemente arrástrelo a su posición. Asegúrate de que esté en el medio y ahora puedes espaciarlo. Entonces, por ejemplo, desde el texto de la parte superior del texto que usted, coronel desplazar presione la flecha arriba dos veces para posicionarse en 20 píxeles hacia la parte superior y luego simplemente reduzca el tamaño hasta que se encuentre así. A lo mejor puedes incluso colocarlo 10 si crees que es demasiado así porque queremos así que haz imagen un poco más grande y puedes sostenerla así y presionar en medio porque eso lo va a posicionar en medio de este soporte de lugar. Ahora que el 1er 1 está hecho, vamos rápidamente adelante y seleccionar el 2do 1 Así que salta carpeta de imágenes privilegiada, Selecciona lámpara para arrastrarla y soltarla aquí y luego lo mismo que hicimos con el 1er 1 turno de retención y reducido su tamaño Simple drag y dejarlo dentro de esta carpeta. Lo mismo que hicimos con el 1er 1 Así que posiciónelo así 10 píxeles arriba y luego simplemente redujo su tamaño desde la parte superior así. Asegúrate de que esté en el medio, y también puedes hacer esto o seleccionar pieza para asegurarte de que esté en el medio, y puedes cerrar este soporte y luego puedes mover un poco más la carpeta agitada y tal vez esconder la segunda carpeta para que estés dedo del pie capaz. Incluya la Tercera Imagen aquí mismo. Salta dentro de tu carpeta, arrástrala y suéltala aquí y luego simplemente reduce su tamaño así, muévete un poco hacia abajo, zoom un poco más cerca, así que colócala así hasta que se encuentre en el turno superior y 10 píxeles. Sostenga turno. Asegúrate de que sea así y luego posiciónalos a ambos en el medio. Al igual que así. Ahora me voy con el dedo del pie. Incluir la imagen número dos. Sostenga el turno y colóquelo como. Por lo que hasta los cumple, un turno 12 el cual se moverá con 20 piezas a la derecha. Y hemos poblado la sección más popular con nuestras imágenes y porque son PNG. Si en algún momento quieres cambiar de opinión, puedes mantener el control. Haga clic dentro de la imagen, y luego podrá cambiar su color fallido. Entonces saltemos adelante. Se puede cambiar a, por ejemplo, cualquiera de estos colores. Puedes ver cómo se ve eso, o puedes seguir adelante y elegir cualquiera de tus propios colores, así que simplemente se ve como aquí para que pueda estar seguro de qué color es. Entonces es e b Selecciona esta y selecciona de nuevo la E B. Así que como decían, puedes cambiarla a tus propios colores. O puedes incluir una imagen de fondo aquí justo debajo de esta imagen PNG. Entonces si quieres que destaque aún más de lo que es en este momento, continuación para las combinaciones de habitaciones haz lo mismo. Así que da click aquí. Y si un salto fuera de esta carpeta, puedes ver tenemos tres imágenes de combinación crecidas para que puedas dar click en esto. 1er 1 es simplemente arrastrarlo y soltarlo dentro porque queríamos poblar toda esta sección y puedes hacer doble clic aquí si quieres. Y tal vez pueda moverlo así él, uh, algunos hasta que det y lo que quiero escribir aquí mismo es sala de estar. Entonces haga doble clic en el texto y escribiendo poco, y como no lo podemos ver, tal vez podamos hacerlo blanco. Así que salta aquí mismo y ya lo puedes ver un poco mejor. Ahora lo que necesitamos para el 2do 1 es el número de combinación de habitación para arrastrarlo y soltarlo dentro, viviendo como es. Haga doble clic aquí y escriba en dormitorio como así que asegúrese de que sea blanco. Y por último, por perturbado uno que está seleccionado, salta a nuestra combinación de sala de carpetas. Tres. Selecciona arrastrar y soltar a la vista. Y como antes, necesitarás moverlo un poco para que puedas cambiar el look de estos textos y vamos a escribir en cocina para éste. Asegúrate de ponerlo de nuevo en su posición así cambia de 1 a 20 píxeles de esta manera, y si un salto un poco más cerca, no cambió el color del texto por alguna razón. Pero puedes cambiarlo así o cuando lo seleccionó simplemente aplicarle blanco y luego saltó hacia atrás. Y quiero posicionar en 20 pixels un turno 12 y cerró esta sección porque está terminada. Y por último, lo que queremos incluir es nuestro proceso. Por lo que queremos incluir una imagen de fondo aquí mismo dedo del pie actúa como un placeholder para el video, y esa es esta imagen para simplemente arrastrarla y soltarla dentro, y puedes hacer doble clic dentro y mantener pulsado shift, reposicionarla un poco mejor. Voy a colocarlo en algún lugar por aquí. Da click afuera y van a poder dar click dentro y ver que eso es un video. Pueden hacer clic aquí mismo del pie, reproducir el video en pantalla completa o hacer clic en leer más, lo que los llevará a sobre US Page, que explicará su proceso con mucho más detalles si quieren leer. Entonces básicamente, eso es todo para la pantalla de inicio tú. Por lo que incluimos un nuevo color. Incluimos algunas sombras diferentes. Incluimos imágenes, y te mostré cómo puedes incluir tanto Jay Pek como imágenes PNG, y cambiamos algunos colores del texto alrededor, y hacemos todo bonito y claro, y ahora todo se ve mucho mejor. Entonces lo haces todavía cuando solo era un marco de alambre con algunos rectángulos vacíos. En el siguiente video, vamos a pasar a la pantalla de categorías, y les voy a mostrar cómo pueden incluir sofás aquí mismo, y vamos a cambiar los nombres de los sofás aquí mismo en la parte superior. Entonces ya veré allí 19. Crear diseño 2: Ahora está más dentro de la pantalla de categorías. Vamos a acercarnos un poco más a este 1er 1 Llamémoslo Lisboa y cambiamos el precio 2 a 4 a nueve porque va a pasar de lo más caro a lo más barato abajo. En este 2do 1 lo llamemos Roma, y van a ser dos por 10. Este va a ser París y sobre el precio va a ser 13 68 Siguiente arriba, tenemos un Leone tan Leone, y por un precio va a ser 12 19. A continuación, vamos con el dedo del pie. Incluya el nombre fuera de Moscú y por el precio, quiero 187 y finalmente, por este perdido. Vamos a incluir Praga y el precio será 1090 A continuación, sigamos adelante e incluimos nuestras imágenes en el interior. Así que salta de nuevo a tu carpeta de imágenes, entra dentro de sofás. Entonces, para un hasta ahora, número uno, salta dentro y arrastra. Déjalo caer como lo hicimos con las imágenes anteriores. Entonces lo que quieres es incluirlo y reducir su tamaño y localizar el elemento número uno arrastrarlo y soltarlo dentro de esta carpeta y colocarlo justo encima del fondo de la imagen, puedes acercarte un poco más. Se puede reducir el tamaño a más o menos por aquí. Asegúrate de que esté en el medio, y puedes seleccionar estos dos y colocarlo en medio si quieres. Pero también puedes moverlo al fondo de tu imagen, Marcador de posición como Así que presiona 1234 y ponlo a 40 píxeles desde el borde inferior, tal vez hasta 50 porque eso se ve mucho mejor. A continuación, vamos a incluir el 2do 1 para que puedas dar click aquí mismo. Entra dentro de tu carpeta salta y basado en el 2do 1 mantén el turno hasta producir su tamaño y también puedes hacer esto. Se puede hacer un ejemplo de prueba. Y si estás haciendo esto en cuatro tienda como lo hice quitando estos um fuera de las líneas y quitando el fondo de tus imágenes, y puedes hacer esto en cuatro tienda, y puedes asegurarte de que ambos estén del mismo tamaño. Por lo que una vez que estés dentro de adobe XY y comiences a cambiar cosas, y quieres incluir estas imágenes dentro de estos placeholders, ya estarán en el mismo tamaño exacto que necesitan, por lo que reducirá tu tiempo de espera. Y mejorará mucho más tu velocidad para que puedas trabajar mucho más rápido cuando tengas estas dimensiones exactas fuera de estos sofás en nuestro ejemplo. Pero me gusta trabajar de esta manera porque, como vas a ver y puedes ver aquí mismo, no todas son exactamente del mismo tamaño. Entonces ese es un gran factor. Porque si fueran exactamente del mismo aspecto y tamaño, Así que por ejemplo, todos ellos son así. Entonces ese método se va a trabajar mucho mejor porque, uh, cuando todos son del mismo tamaño, puedes aplicar esa técnica. Pero cuando no son como si no estuvieran en nuestro caso, entonces simplemente te van a quedar con. Algunos fueron resultados raros, pero si son del mismo tamaño, entonces estás todo listo. Y puedes trabajar de esa manera si quieres. Entonces si por alguna razón, lo pega, dos de ellos y vas a ver estos bugs en Adobe X'd de vez en cuando. Pero simplemente no les pongas atención y asegúrate de saber lo que estás haciendo porque Cuando cometes un error, puedes corregirlo fácilmente porque sabes dónde cometiste ese error y puedes saltar nuevo en cualquier momento y simplemente corregir ella. Por lo que es saltar e incluir nuestro sofá número cuatro. Entonces como mencioné antes, como se puede ver, todas son dimensiones diferentes. Todas ellas son formas diferentes, así que por eso me gusta trabajar de esta manera. Es mucho más tiempo, obviamente, obviamente, como se puede ver. Pero de esta manera puedes asegurarte de que todas ellas estén posicionadas donde deberían y en exactamente la misma ubicación. Y debido a que algunos de ellos son toller, algunos de ellos son más anchos que el resto de ellos. Entonces, para el posicionamiento, solo asegúrate de que tu globo ocular lo haga y hagas una posición rugosa de acuerdo a las anteriores, porque para el 1er 1 si recuerdas, lo ponemos a 50 píxeles de abajo. Y debido a que era un poco estrecha, esta imagen y estas otras son un poco más altas, por lo que solo hay que compensar y hacerlas 12345 por ejemplo. Como puedes ver, es mucho más alto que éste y así como éste. Entonces tal vez ponlo 40 píxeles abajo solo para que puedas hacerlos más o menos iguales exactos que mencionan de aquí a aquí en todos ellos. Y por último, vamos a incluir la sexta imagen. Así que saltando aquí mismo en zoom un poco e incluyen sofá número seis. Entonces lo voy a posicionar más o menos por aquí y solo asegurarme de que reduzcas su tamaño igual que hicimos con todo fuera de los otros. Colóquelo más o menos por aquí y acaba de reducir el tamaño aún más. Y de esto era de lo que estaba hablando. Como puedes ver, este es mucho más alto que éste, pero solo asegúrate de colocarlo o en el más o menos el mismo espacio que éste, y eso es todo para esta pantalla. Ahora vamos rápidamente más y hagamos filtros de búsqueda porque sólo hay un cambio que queremos hacer porque incluimos estos fondos sombras. Queremos hacer lo mismo por estos materiales y estos círculos. Entonces primero para los materiales, vamos a cambiar el color del marco e incluir este color. Ahora incluyamos el color de la sensación para ser blanco y finalmente incluimos una sombra, misma manera que lo hicimos para todos fuera de ellos antes. Entonces haga clic en la sombra, seleccione el color. Es éste y simplemente reducir el ritmo Ciudad a 25%. Y ahora tenemos una mirada mucho más coherente que antes, y tenemos la misma sombra en todos ellos. Y por último, puedes hacer lo mismo por estos puntos. Entonces vamos a saltar a una capa espinal. Entonces para estos círculos, hagamos el mismo lugar. Incluir la sombra. Por lo que 55 10. Y si crees que está un poco lejos, puedes reducirlo a, a y tal vez cinco. Y ahora está mucho más cerca, y se ve mucho más bonito. Salta dentro de la sombra y vuelve a tu panel de activos para que puedas seleccionar el mismo color que para el resto de ellos. Entonces, así , asegúrate de que esté en 25% y lo que podemos hacer ahora es esperarlo seleccionado click derecho copiar, Selecciona este clic derecho pegar padres, y eso hará que se vean exactamente igual que el resto apagado. Nuestro diseño es, puedes ver que se ve mucho más bonito y lo más importante, se ve mucho más coherente con el resto fuera de nuestro deseo. En el siguiente video, vamos a saltar y diseñar una pantalla combinada de habitación, así que nos vemos ahí. 20. Crear diseño 3: Entonces saltemos y diseñemos una combinación de habitación. Pero antes de hacerlo, siempre podemos golpear el control en cuanto a decir de nuestro proyecto, solo para asegurarnos de que no nos perdimos ninguno de los cambios anteriores. Entonces lo que no está bien aquí es la imagen para la combinación equivocada. Así que vamos a incluir el 1er 1 Arrastra y soltarlo dentro de este puerto de arte, y saltaré y cerraré todos estos y simplemente lo moveré todo el camino hacia atrás así y luego aumentar su tamaño hasta que se encuentre con los bordes exteriores así. E incluso puedes aumentarlo mucho más para que puedas acercarte al interior de la imagen así. Por ejemplo, algo por aquí es bueno, y ahora la gente puede decir que es Theis Room. Si quieres hacer eso, está bien. Pero si no, siempre se puede reducir el tamaño a más o menos por aquí. Digamos, y creo que se ve mucho mejor así. Ahora bien, este texto que encontré, no es fácilmente legible, así que vamos a cambiarlo dedo blanco. Esto puede ser como está, y ahora, porque queremos que el fondo de la imagen sea el mismo que aquí. Cambiemos eso. Entonces, vamos a dar click aquí mismo. Seleccionado. Estar ahora porque no podemos distinguir el fondo de la imagen. Vamos a dar click en el fondo y vamos a seleccionar blanco. Y ahora es mucho mejor. Ahora necesitamos este sofá, así que salta dentro de sofás. Es éste, así que para el número tres, salta dentro de un hechizo de capa. Una vez más, asegúrate de que has encontrado imagen. Arrastra y suelta tu sofá dentro. A lo mejor puedes colocarlo justo aquí, y vamos a reducir su tamaño hasta que encaje justo aquí. Entonces saltemos y asegurémonos de que esté en el medio, así. Para que puedas seleccionar sofá e imagen, y puedes posicionarte así también. Es así. Ahora localicemos el nombre por lo que las disparidades París. Y por el precio , son 13 68. Así que asegúrate de cambiar eso, y un cambio final que quiero hacer es por el color. Entonces yo estaba como este primer color. Seleccione esto para el color, por ejemplo, asegúrese de incluir una sombra, así que usemos 22 y cinco. Y por la sombra. Saltemos al interior de su panel de activos una vez más. Mismo trato. Así que selecciona este color y más debido básicamente al 25%. Ahora esto indicará que se selecciona este color para este sofá en particular, pero la gente condona saltar por dentro e ir a la página del producto y luego juguetear con él e incluir algunos otros colores a la vista. Ahora salta atrás dedo del pie son capas. Panel cierra todo esto arriba tarjeta uno, y ella lo hizo. Y asegúrate de que puedes mover la segunda carta aquí mismo y ahora vamos a incluir algunos otros artículos dentro. Y para este, usemos una lámpara, por ejemplo, así mismo trato que hacíamos antes. Selecciona la tarjeta BG y para el color de relleno, asegúrate de que sea blanco y para la imagen, asegúrate de que sea E. B para que luzca exactamente igual para todos fuera de los demás. Y usemos no conozco esta Génova una lámpara, por ejemplo. Por lo tanto, haga doble clic en el texto. Cámbialo y el precio fue de 96. Entonces cuando la gente se mueva con los dedos hacia la derecha usando el disparador de pista, que vamos a incluir en el modo prototipado, podrán localizar esta lámpara y ver que está incluida a la vista. Salta en imágenes, localiza la lámpara para que sea este 2do 1 arrástrela y tírela aquí y simplemente asegúrate de reducir su tamaño así y lo condonas el globo ocular. Asegúrate de que esté en el medio así, y si quieres moverte, es un poco más a la cima. También lo puedes hacer. Entonces es una lámpara. Muévelo fuera de esta carpeta. Asegúrate de que esté en la carpeta de imágenes así y asegúrate de que se encuentre en la parte superior. Entonces, cuando hayas completado eso, también puedes moverlo donde se volvió a encender. La tarjeta número uno, selecciona este 2do 1 y simplemente muévete con 20 píxeles a la derecha. Lo mismo líquido con todos los demás. Y ahora esta pantalla de sala está terminada, y en el siguiente video, vamos a pasar al elemento seleccionado y al elemento seleccionado ajustado, y vamos a hacer los mismos cambios para ambos, y voy a te muestran cómo puedes incluir algunas sombras de gota a algunas de estas una vez cuando las personas seleccionan estos elementos. Entonces voy a decir ahí 21. Crear diseño 4: Ahora saltemos por dentro y diseñemos pantallas de artículos seleccionados. Entonces primero lo primero. Voy a cambiar el color de este fondo de imagen héroe cada ella el color seleccionado y es de cuatro b c A. Ocho centro de prensa. Es de color ligeramente parduzco. A continuación, voy a teclear dedo también house share y cuál la única línea de texto me permite escribir rápidamente y seleccionarlo todo. Salta aquí y cámbialo dedo del pie blanco y se ve bien y salta empacado en nuestros activos. Perdón, capa espinal. Y por el precio, que sea 1 24 Pero para ello usemos este color también para que complemente el color fuera nuestra silla de casa en la parte superior. Así que doble clic aquí mismo, Control. A ver, voy a dar click aquí mismo. Control. Veto basado en Haga clic aquí. Control. Ver No click justo aquí. Controla V y asegúrate de que sea blanco. Y por último para éste. Muévelo a este color. ¿ Por qué no vamos a seleccionar este control de color? Ver y saltar a la vista y golpear el control V y no, sigamos adelante y, por ejemplo, tal vez podamos cambiar estos colores un poco más tarde, pero quiero incluir estas dos imágenes porque ese es el bit simple. Por lo que en nuestras carpetas de imágenes, localicemos la silla principal. Por lo que tenemos la silla principal número uno, que es esta imagen tan seleccionada a partir de aquí. Siempre puedes revisar tu panel de capas y asegurarte de que estás en la ubicación correcta. Arrástrelo y suéltelo dentro y muévete. Selecciona esta carpeta 2da 1 de imágenes y arrastra y suelta esta a la vista, y puedes hacer lo mismo por estas dos para que puedas abrirla. Selecciona silla principal número uno. Da clic aquí y selecciona el número de silla principal para arrastrarla y soltarla dentro para que tengamos mucho más coherente Look. Ahora, a continuación, vamos a incluir nuestra imagen principal. Así que selecciona un fondo de imagen de héroe. Se pueden cerrar las zonas, y dentro de la misma carpeta, se tiene la imagen compartida principal. Arrástrelo y suéltelo dentro y ST ng. Líquelo con todos los demás, simplemente arrastre y reduzca sus ojos mirando cambio. Puedes acercarte un poco más, y tal vez podamos reducirlo tamaño dos en algún lugar por aquí, y seleccionarlos para asegurarnos de que estén ahí en el medio, luego selecciona Control de pesebre. Ver click justo aquí, controla V para pegarlo exactamente en la misma ubicación. Y porque así es como lo diseñamos, se puede ver que la silla destaca un poco de este fondo, que es con propósito, porque así es como queremos que se vea la animación. Por lo que va a parecer que empujó un poco este fondo y el estado de la silla en la misma ubicación exacta. Incluso puedes reducir un poco los sitios fuera de la silla si quieres, solo para acomodar estos enlaces. O simplemente puedes moverlo hacia arriba como cinco píxeles algo así, para que esta longitud esté dentro de este fondo. Ahora, finalmente, pinchemos aquí y para el color seleccionado, moviéndonos justo debajo del color principal para la película. Tan solo asegúrate de que estás en blanco y, para la sombra, haz lo mismo. Líquelo con todos los demás. Entonces 22 y fuego porque es círculo más pequeño. Asegúrese de que ha seleccionado panel de activos. Haga clic aquí, luego seleccione este color. Misma liquidada, les dijimos a los otros. Claro, está en 25 ahora para el color seleccionado. Voy a elegir algún lugar cerca dedo del pie blanco. Entonces algo como esto. Y sólo asegúrate de copiar ese mismo color para esta primera pantalla porque ese es el color fuera del asiento de la silla. Y ese es el color que seleccionamos. Ahora. Haz lo mismo para este marco tan seleccionado y para el borde. Vamos Judíos de este color y para la sombra, vamos a jugo 55 10 como hicimos por todos los demás. Haga clic aquí y luego asegúrese de seleccionar este color. Asegúrate de tener el fallo en blanco y para la sombra, asegúrate de estar en el 25% y esas son las pantallas hechas. Por lo que verás esta animación con mucho más detalle cuando lleguemos a la parte de prototipado fuera este curso. Y ahora vamos a pasar por los detalles del pedido, que es nuestra siguiente pantalla, y vamos a diseñar en el siguiente video, así que nos vemos allí 22. Crear diseño 5: Vamos ahora a diseñar detalles del pedido Pantalla. Por lo que un zoom en un poco más cerca ahora para este 1er 1 ya lo tienen anotado. Por lo que queremos todo sillón anfitrión lento como este y por el precio 81 24 Para este 2do 1 siempre hemos sido sofá como así Y para perturbado uno, tenemos Milan. Un sofá de lámpara cuesta de 24 a 9 y una lámpara cuesta 98. A continuación para cambiar en esto a esto, esto para decolorar. Y finalmente esto a este fondo de color debería ser blanco, Igual que éste y igual que éste para que se vea mucho más coherente con todos fuera estos otros ahora, porque este fondo principal es blanco, tal vez esta no es una buena opción. Entonces tal vez podamos incluir algún color de fondo aquí mismo, o imagen de fondo o algo así. Entonces tal vez podamos experimentar para que puedas seleccionar los detalles del pedido y tal vez hacer clic en algo como esto para que puedas ver mucho mejor ahora. A lo mejor podemos incluso incluir algún color más claro si quieres, pero creo que por ahora se ve bien. Y tal vez podamos reducirlo un poco. Entonces solo ve por encima de unas paradas a algún lugar por aquí. Entonces en algún lugar entre esos colores para que se vea mucho más ligero, y creo que eso se ve bien por ahora. Por lo que ahora saltemos por dentro e incluamos nuestras imágenes. Por lo que tenemos también House Chair para que puedas seleccionar esta tarjeta para localizar la imagen, saltar dentro de su carpeta de imágenes arrastrarla y soltarla sitio y lo mismo que hicimos con todo fuera de nuestras otras imágenes. Simplemente redujo su tamaño hasta que encaje dentro de su imagen, posicionador. Así que así y acercar un poco más. Y puedes posicionarlo así en algún lugar por aquí? Creo que es bueno. Sí, puedes cerrar esto cuando termines e ir a la tarjeta número dos. Entonces lo que necesitamos son sofás y sofá de Lisboa. ¿ Este es el 1er 1? Así que simplemente ponlo aquí y reduzca su tamaño. Tan mismo cosa. Liquidarlo para todas nuestras otras imágenes. Ahora estos procesos pueden ser un poco repetitivos, pero como puedes ver exactamente todavía tienen algunos errores y va a suceder de vez , sobre todo cuando instalas una nueva actualización así que solo asegúrate de tenerlo en cuenta mientras esté gratis. Todavía hay alguna caja de vez en cuando, pero siempre se puede reportar a su voz de usuario porque les gusta escuchar esas cosas. Y son capaces entonces de squash cualquier bicho en la próxima actualización. No Milán. Una lámpara es esta cojera aquí mismo, arrástrela a la vista y reduzca su tamaño Así encaja dentro de nuestro positor así Y luego muévala solo un poco más. Se lo bajó a alguien por aquí. Veamos y luego hagamos lo mismo por ello como hicimos con el resto fuera de nuestras imágenes. Y eso es todo. Nuestra pantalla está hecha. Lo único que nos queda es remolcar el amor, el costo. Y si escribo aquí mismo, pon dos puntos en el lugar o incluso puedes moverlo mejor aquí mismo, luego doble rápido. Acude al final de teclear 2651 porque ese es el costo total de descuento. Todos estos artículos agregados al carrito, y si la gente quiere quitarlos de la corriente, pueden deslizar hacia la izquierda, y quitará este artículo en particular del carrito si quieren agregar más piezas. Entonces, por ejemplo, para sillas, pueden dar clic aquí y después gracias. Selecciona cuatro o el número que quieran. Y aumentará el costo total de la misma. Si quieren reducirlo y cambiar de opinión, por ejemplo, solo quieren una silla. Ellos pueden hacer el proceso una vez más, y se reducirá el precio total de descuento de todos sus artículos dentro del carrito. Entonces en el siguiente video, vamos a saltar al pago. Y porque no me gusta cómo se ven los colores de esta tarjeta, uh, estos guardias como si los vamos a cambiar e incluir algunos colores más bonitos por dentro, así que te veré ahí. 23. Crear diseño 6: vamos ahora diseñados pagos verdes. Pero antes de que lo hagamos, puedes hacer click en los detalles del pedido y en el color de tu campo. Haga clic aquí, Control. ¿ Ver? Para que puedas copiar el color de fondo de esto. Nuestro puerto da click justo aquí en el campo Control V presentador. Y incluirá el mismo color que estaba en esto. Nuestro puerto ahora. Aquí mismo. Lo que necesito es el pago. Por lo que voy a copiar esto. Control total. ¿ Ver? Salta a la derecha. Su control V y lo basó en ubicado el pago. Está justo aquí. Posicionarlo un poco mejor ahora porque ya creado. Y estos ingredientes, los voy a copiar. Entonces déjame mostrarte rápidamente cómo se hace para que puedas seleccionar la tarjeta BG y ubicar el color de campo justo aquí. Pero déjame saltar rápidamente dentro de mi otro archivo y simplemente copiaré este color. Por lo que para el campo, puedes elegir un ingrediente lineal y asegurarte de que estás al revés. Por lo que el color claro está en la parte superior. El color más oscuro está en la parte inferior porque nuestra sombra está en la parte inferior. Entonces para el color más oscuro o lo que queremos es este color le bastó. Y para el color más claro, Lo que queremos es dejarme seleccionar rápidamente a partir de aquí. Entonces elige este control V basado en y así es como se ve. Y también puedes cambiar el look de la visa y elegir el blanco. Y eso va dedo del pie lucir mucho más bonito de lo que era antes. No saltar dentro de tu capa Espinal una vez más entra, gente selecciona auto BG y luego elige un ingrediente lineal. Ahora haz lo mismo. Y porque lo hicimos el 1ero 1 se acordó. Y ahora estás más oscuro. El color está en la parte inferior y tu color más claro está en la parte superior. Entonces para este 2do 1 para el color más claro, vamos a elegir este color, así que simplemente lo basamos en y para el color oscuro. Vamos a elegir este color, y lo voy a pegar. Entonces es una especie de bonito color azul, y es una reminiscencia de la tarjeta de la gente. Entonces, como se puede ver aquí mismo, ya tenemos un bonito diseño, que simplemente se ve mucho mejor que antes. Y para terminarlo, se acaba de cambiar el logo de la gente dedo del pie blanco para que puedas seleccionarlo y dar click aquí mismo dedo blanco. Por lo que es mucho más legible que antes. Eso es todo para esta pantalla. Y en el siguiente video, vamos a empezar a diseñar localizaciones de tiendas y tal vez incluso un menú, luego terminar el proceso de diseño, así que nos vemos ahí. 24. Crear diseño 7: lo que ahora está diseñado. Almacenar ubicaciones, pantalla y lo primero. Cambiemos algunas cosas, así que esto va a ser blanco. Este círculo va a ser naranja. No puedo dentro del círculo, así que reanudar un poco más cerca para que pueda seleccionarlo va a ser blanco también. Y fuimos a incluir la sombra de gota. Tan mismo como leerlo con todos los demás. 55 10. Y simplemente seleccionemos este color y asegurémonos de que esté en 25% de descuento en la base, por lo que corresponde un poco mejor con todos los demás. A continuación, simplemente creemos un rectángulo para la parte superior. Así que saltar a una capa hechizo escaleras eran barra de búsqueda, las movió en la parte superior, y voy a crear un rectángulo justo debajo. Entonces, así, así, muévelo a la parte superior y moviéndose justo debajo de la barra de búsqueda. Entonces veo lo que estamos haciendo. Al igual que así que que sea blanco, quitamos la frontera, y estamos haciendo esto porque vamos a poner el mapa justo aquí atrás. Y si ponemos el mapa justo debajo de este texto y del campo de búsqueda, no va a leer. Ahora que creamos este Bijie, así que no mires aquí mismo escribiendo Simplemente sé James yendo el dedo del pie trabajo. Simplemente bien. Haga clic aquí y luego localice el mapa. Arrástrelo y suéltelo dentro. Puedes utilizar cualquier mapa que quieras. Simplemente uso, um ubicación aleatoria en el mapa así. Y puedes posicionarlo un poco mejor si quieres, así que tal vez puedas ponerlo en algún lugar por aquí. Creo que funciona bien y aumentó hasta que las esquinas se encuentran en la parte superior en la parte inferior, moviéndose justo debajo del indicador de inicio porque queremos mapear a Toby la capa inferior. Entonces todo el camino al fondo. Y por último, queremos aumentar el tamaño fuera de esta línea. Entonces, como puedes ver, el ingenio aburrido del arte es 375 por lo que podemos saltar en la barra de búsqueda, localiza la línea y solo teclear 375 y asegurarte de moverla hasta que se encuentre con extremo fuera tablero de arte. Al igual Ahora que hemos hecho eso, necesitamos hacer algunos cambios aquí mismo. Por lo que fuimos a seleccionar a la persona que llama y seleccionamos el color, moverlas en algún lugar alrededor de la ubicación curativa para que puedas mover el dolor por aquí. A lo mejor, y luego hay que agregarla a la palmadita. Entonces va de aquí a aquí. Pero primero cambiemos el color del camino para decolorar. Simplemente asegúrate de seleccionar borde y luego cambiar en el color. Así que así. Entonces es naranja y un poco más agradable y claro. Incluso puedes aumentar el tamaño para hacerlo. Y entonces lo que puedes hacer es saltar de nuevo a una capa, deletrear doble clic en la palmadita y luego simplemente mover estos puntos de pat para que siga la palmadita del mapa. Entonces algo como esto no simplemente mueva el dedo del pie aquí, mueva este punto palmadita un poco más así en algún lugar por aquí, así y luego simplemente vaya a su inicio una ubicación justo aquí. También puedes jugar. Puedes duplicar rápido para hacerlos alrededor si quieres. Entonces puedes incluso moverlo así y hacer una buena forma de arco si quieres, realizas criterios probables y y puedes cambiar su posición como quieras para que puedas bajar o hacerlos así. Puedes hacer doble click justo aquí porque esta es la esquina y puedes hacer doble clic aquí también, si crees que eso es necesario. Pero dejémoslo tal como está. Y no reserve abajo con los detalles sobre esta parte en particular. Entonces cuando termines eso, solo quiero asegurarme de que hago doble clic aquí de todos modos, para que pueda crear una bonita esquina, algo así. mejor, Y entonces simplemente puedo cambiar este ángulo, como así para hacerlo un poco más recto. Entonces mueve esto sólo un toque, también aquí como así y luego simplemente se movió en el dolor. No podía solo un poco por encima Así que muévalo así Y se ve mucho más bonito y luego simplemente muévete en estos dos hasta que se encuentren aquí mismo. Y tal vez podamos colorear el círculo interior con este color para que sepamos que ese es nuestro punto de llegada. Y esta pantalla está terminada. Y ahora lo que nos queda por hacer es simplemente editar un elemento más dentro de nuestro menú. Sugerir a continuación ajustes aquí mismo, Saltar dentro del panel de capas. Puedes duplicar esta configuración, uh, texto y simplemente tecleando ubicaciones de tiendas porque esa es la parte importante que la gente necesitará buscar dedo del pie para asegurarte de que todos estén espaciados uniformemente, e incluso puedes seleccionar todo ellos y hacer como hacíamos antes. Así que selecciona un rectángulo. Asegúrate de estar en el punto superior de la X. Selecciona un rectángulo. Seleccione este grupo. Posicionarlo como así realmente el rectángulo. Y se puede en grupo este grupo. Si así lo quieres o puedes creerlo como es. Simplemente llámalo artículos porque la ubicación de las tiendas es realmente importante y la gente puede llegar a las ubicaciones de las tiendas . Yo este grito del menú. Ahora una última cosa que debemos hacer es hacer clic en la capa playera y simplemente golpear nueve, porque eso bajará tu base de 80 a 90%. Y debido a que esta pantalla de menú va a ser una pantalla de superposición porque son los biggies en el 90% va excesivamente encima cualquiera de las pantallas donde se encuentra, y solo mostrará un poco por debajo de la pantalla y solo un poco por debajo de esta Bijie. Entonces eso es todo por la parte de diseño de nuestra app en los próximos videos de Siri's Off. Vamos a empezar con el prototipado y te voy a mostrar cómo puedes cablear algunas de estas pantallas y cómo puedes elegir las transiciones perfectas y cómo puedes presentárselo a un cliente un poco mejor de lo que es ahora, así que ya veré tú ahí. 25. Organización: en esta sección del curso, vamos a empezar con el prototipado, y antes de hacer todo lo dedo organizo mis archivos. Ahora puedes hacer lo mismo es leerlo para el diseño para que puedas copiar y pegar estos son puertos y hacer otra copia abajo. Simplemente coloque prototipado. Eso es lo que vamos a hacer ahora. Pero también es También hay otro método que puedes usar, que es solo usar estas pantallas como lo son ahora. A mí me gusta usar barco fuera de los métodos, dependiendo del tamaño del proyecto. Si el proyecto es más pequeño, como este, me gusta simplemente duplicar todas estas son partes y simplemente colocarlas abajo, porque en hace que nuestro trabajo sea mucho más fácil. Hace que el trabajo de los desarrolladores sea mucho más fácil, y luego los clientes trabajan mucho más fácil cuando ven esto. Los huevos de Adobe desfilan si eliges educarlos sobre cómo usar Adobe X D, que en realidad es bastante simple. Si lo piensas. Si tienes un proyecto grande, entonces tal vez quieras considerar incluir todo por dentro fuera de esto y diseñar parte fuera del proyecto. Entonces, por ejemplo, solo imagina que tienes 200 puertos nuestros o algo así, entonces podría llevar mucho tiempo y hacer, y podría hacer que tu archivo sea mucho más grande de lo que necesita ser. Si simplemente duplicas estos son tableros, por ejemplo, tienes 200 para los marcos de alambre, 200 para el diseño, 200 para el prototipado. Y te puedes imaginar que ese archivo puede ser bastante grande, bastante rápido, y podría llevar mucho tiempo a tu cliente ing. Los desarrolladores solo abren el dedo del pie y navegan por ese archivo. Pero debido a que tenemos 10 pantallas dentro de este proyecto y dentro fuera de la fase de prototipado , vamos a hacer algunas más porque necesitamos hacer algunas animaciones y algunos ajustes . Y entonces podría ser una manera obvia de ir por el grifo de prototipado a continuación. Así que simplemente elijamos este diseño y elijamos. Estos son tableros simplemente control crítico o comando D para duplicarlos y luego simplemente moverlos justo debajo y posicionarlos para estar en línea, que estos en la parte superior puedes usar viejo y simplemente arrastrar abajo con este diseño y doble dar click aquí y mecanografiar prototipos para prototipo. No obstante, quiere, y luego simplemente posicionarlo un globo ocular y también se puede hacer la misma distancia que es de aquí a aquí. Por lo que simplemente puedes ir, por ejemplo, a 400. Creo que eso es algo que hicimos por el diseño. Entonces simplemente hazlo 400 y luego muévete. Todos estos son puertos hasta un poco para que puedas acomodar ese espacio que acabamos de crear . Entonces algo como esto y eso es todo para la preparación del archivo. En el siguiente video, voy a mostrar cómo puedes lidiar con las pantallas que faltan y los elementos que faltan porque a propósito hice que faltaran algunos elementos del marco de alambre y de la parte de diseño, así que te veré ahí. 26. Cómo abordar las pantes de faldas: en este video, vamos a tratar con algunas pantallas faltantes y algunos elementos faltantes. Entonces en cuanto a la pantalla faltante va, hablé de ello en las lecciones anteriores. Entonces, por ejemplo, todas y cada una de estas pantallas pueden tener otra pantalla adicional o tal vez pocas pantallas adicionales en la parte superior. Entonces, por ejemplo, tenemos una pantalla, y es posible que desee considerar incluir esto Leer más, que va a ir sobre nosotros página, por ejemplo, nuestras propias combinaciones. A lo mejor quieres incluir otra pantalla separada, que luego les mostrará las posibilidades de combinación equivocadas. ¿ Cuáles son las combinaciones de habitaciones? A lo mejor quieres contar la historia detrás de las combinaciones de habitaciones y explicarles cómo surgió cómo tratas con los fotógrafos, alto trato con los diseñadores de interiores para crear estas salas en primer lugar, y luego cómo podrías quieren lanzar estos productos a los consumidores. También, aquí en la parte superior podría que quieras considerar, porque creamos para puntos para la paginación off creando para diferentes elementos. Por lo que cuatro imágenes diferentes las cuales irán por dentro de este slider por lo que quizá quieras considerar todas estas pantallas o no porque esta es solo la primera parte de este proyecto, y eso es lo que le explicamos al cliente. Simplemente quieren ver los huesos desnudos de este proyecto antes de que sigamos adelante, porque eso es realmente importante. Queremos clavar algunos pedacitos más importantes en el frente y tuvimos que empezar. Y luego una vez que desciframos los colores, tipografía, las imágenes , la dirección general, tal vez no les gustan estas sombras de fondo. A lo mejor queremos quitar el dedo del pie, incluir algunos marcos dentro y algunos fuera de esos cambios cuando conseguimos todo eso juntos, entonces podemos avanzar e incluir algunas de estas pantallas adicionales. Además, es mucho más fácil cuando tienes todos estos elementos en su lugar para crear esas pantallas adicionales y luego para empezar en lugar de 10 pantallas como es que este proyecto inicie con 200 pantallas, entonces hace que tu cambia mucho más complicado, mucho más tiempo consumiendo tanto para ti como para tus clientes. Porque en lugar de proporcionar retroalimentación para 10 pantallas, tienen que proporcionar retroalimentación para 200 pantallas. Hará que su trabajo sea mucho más difícil, mucho más lento, y eso significa que tienen que poner su trabajo en el sitio y luego simplemente trabajar con su tiempo completo en este proyecto. Y déjame decirte, muchos de los clientes no tienen ese lujo fuera simplemente dejando atrás su trabajo y su vida y simplemente enfocándose a tiempo completo en ti para que puedas crear este proyecto para ellos. Por eso empezamos con 10 pantallas. Sabemos que el cliente sabe, y tienes que decirle a tu cliente, Mira, estas no son todas las pantallas que vas a necesitar. Pero estas son apenas pantallas de inicio que vas a necesitar para que iniciemos este proyecto que podamos avanzar y crear algunas pantallas adicionales incluyen algunas nuevas. Y lo vamos a hacer en las partes posteriores de este proyecto. Entonces sin más preámbulos, déjame rápidamente mostrarte cuáles son algunos elementos que faltan, Estos elementos que dejé fuera a propósito solo para mostrarte lo que pasa porque mucha del tiempo cuando estás diseñando, simplemente no puedes predecir todo. No importa cuánto tiempo estés en este negocio, no importa cuántos proyectos tengas detrás de ti, muchos de los Times, podrías pasar por alto algunas cosas. Entonces, por ejemplo, podría perderse un icono. Es posible que te pierdas algunos botones podrías perderte algunas características de la experiencia del usuario. Entonces en nuestro caso, dejé fuera un ícono. Entonces si acerco un poco más y, por ejemplo, voy a esta pantalla de categoría, puedes ver el icono del carrito aquí mismo. Pero si un salto a la página del producto tan seleccionado la página del artículo, no se puede ver el icono de agregar al carrito. Entonces cuando la gente aplique selección o vamos a cambiar esto para agregar al carrito o por ejemplo , por ahora y cuando hagan clic por ahora, se sumará al carrito. Pero como puedes ver, no hay icono de añadir al carrito. Entonces, ¿cómo vamos a lidiar con ello? Bueno, es sencillo. Zoom dentro de este ícono de orden. Vamos a crear un círculo. Entonces tal vez algo como esto. Se ve bien. Colóquelo justo aquí, tal vez justo aquí en algún lugar así. Y vamos a crear rápidamente el número uno. Y como puedes ver , son 14. Bajémoslo a 10 a ver cómo se ve eso. A lo mejor podemos posicionarlo en el centro fuera de este círculo. Creo que eso se ve bien pero hay que probarlo. Entonces, por ejemplo, si agregaron 10 acciones para que puedas teclear 10. Y como se puede ver, esto es demasiado grande porque no puede acomodar este círculo. Entonces tenemos que bajarlo aún más. A lo mejor 28 Y creo que ocho lucen bien. Entonces lo que quiero hacer es simplemente crear uno para este caso y hacerlo ir desde el centro y ahora posicionarlo en el centro fuera de tu círculo. Así que así. Pero porque el texto tiene el área segura alrededor en la parte superior y en la parte inferior. Y si acerco mucho más, se puede ver esta zona en la parte superior es mucho más grande que esta área en la parte inferior. Entonces lo que me gusta hacer es en lugar de aquí, es el medio. Pero como puedes ver, hay mucho más espacio vacío en la parte superior. A mí me gusta simplemente balazo a algún lugar por aquí, así que si alejas un poco, puedes ver que está justo en el medio. Ahora lo que queremos hacer a continuación es quizá queremos probar en frontera creativa, que es el grosor de este ícono sólo para ver cómo se ve. Pero no creo que se vea tan bien. Entonces tres, como puedes ver, es más o menos por ahí, pero no se ve tan bien. Entonces, simplemente creemos uno. Y queremos quitar el borde y para el color de campo. Simplemente elijamos este color. Y creo que eso se ve bien. Acaba de usar el blanco para el número y creo que se ve bien. Es legible y la gente puede leer, Leerlo fácilmente y ver qué hay dentro. Entonces lo que queremos hacer ahora es saltar de nuevo al panel de capas. No mires aquí mismo. Tipo en círculos. Yo solo quiero que circulen, vayan a las órdenes y seleccionados así Control G. Y tal vez no lo llamen. Carrito Icahn. Algo así, Control. ¿ Ver? Y lo que queremos hacer es saltar aquí mismo. Dónde están los iconos Y quizá queramos mover esto un poco, Así que haga doble clic aquí. Muévete a algún lugar por aquí. Y tal vez quieras seleccionar todos estos para que hasta aquí, sacarlos del camino. Por lo que una vez más, a aquí acercando mucho más el control V para que podamos basarlo. Alinearlo con el borde inferior porque tiene un círculo en la parte superior y puedes moverlo a la derecha y ver el espaciado entre. Por lo que está en 60 y ahora puedes seleccionar todos una vez más, como así acercar un poco más y hacerlo 60 también. Al igual que así. Y también se puede hacer doble clic tal vez puede hacer algo como esto. Entonces ahora tenemos este ícono y esto es exactamente de lo que estaba hablando. Entonces muchas de las veces, podrías encontrarte con estos temas, pero solo quieres lidiar con ellos a medida que vienen. Entonces por ejemplo, ahora que tenemos ah icono de carro lleno, podemos incluirlo en algunos otros lugares. Entonces tal vez agregaron un artículo al carrito desde aquí para que pudieran hacer clic aquí, saltaron a esta página para este sofá agregaron carro del dedo del pie y luego volver a casa o simplemente hicieron clic aquí para proceder con el pago. Y tal vez cambien de opinión. Dijeron: De acuerdo, De acuerdo, quiero ir a la pantalla de inicio. Hacían clic en el logotipo. A lo mejor los lleve a casa o simplemente haga clic aquí en el menú, tal vez eligió ubicaciones de tiendas, perfilar mis pedidos o ir a cualquier otro lugar. Pero este carrito Icahn se mantendrá lleno y pueden dar click en él y saltar de nuevo aquí en cualquier momento. Entonces así es lo importante que es hacer frente a las pantallas faltantes para hacer frente a los elementos que faltan. Y sucederá en básicamente cada proyecto en el que estés trabajando. Por lo que sólo tienes que lidiar con ello ya que viene y explicaron a tus clientes que a veces estas cosas podrían pasar desapercibidas. En ocasiones cambiarán tu breve. Te dirán que incluyas algunas cosas un poco más tarde en el proyecto, así que solo sepas cuando ocurrieron esas cosas, solo tratarlas como vienen en el siguiente video, vamos a empezar con nuestros prototipos, y te voy a mostrar cómo puedes duplicar algunas de estas pantallas para crear unas animaciones increíbles. Entonces ya veré allí 27. Prototipo 1: empecemos ahora con la cara de prototipado de este proyecto y antes de que empecemos, sólo quiero dejar algo claro. Seguí adelante y le quité la extensión unica de los nombres ST Ng como con ella para la parte de diseño , si recuerdas, solo para cortar, a veces corto para el discurso. Entonces lo que quiero hacer ahora es seleccionar el hogar y hacer dos copias del mismo. Así que simplemente sostenga mi vieja tecla y arrástrela abajo y háganoslo en la misma una vez más. ¿ Al igual que? Entonces, ¿por qué hice eso? Porque quiero hacer un gatillo de arrastre para esta sección así como atraer gatillo para esta sección para que la gente pueda arrastrar y ver un elementos diferentes dentro de esta sección. Entonces cómo podemos hacer eso es todavía estaban dentro de nuestro grifo de diseño. Entonces ahí es donde haces todo tu diseño. Y cuando estés listo para empezar a crear prototipos, entonces simplemente haz clic por pestaña de envoltura y luego pasa a ella y siempre puedes cambiar de ida y vuelta entre las dos. Entonces para empezar, estamos en la segunda pantalla. Así que en casa segundo, y tal vez incluso puedas nombrarlos así es un hogar para y luego saltando aquí mismo y luego seleccionar casa tres solo para que pudieran Saber lo que estás haciendo y dónde estás. Por lo que hogar para debilitarse, Selecciona esta sección más popular y haz clic en imagen 123 mantenga presionado turno y luego simplemente muévalos aquí mismo hasta que se reúnan con nuestra guía a la derecha. Y una vez más, aquí es donde nuestros guías son tan poderosos y tan importantes para que podamos saltar atrás e ir a casa tres y luego hacer lo mismo por las combinaciones de habitaciones. Así que las combinaciones localizadoras seleccionadas imagen 123 y luego simplemente muévalas a todos para escuchar. Y ahora podemos empezar a crear prototipos para que puedas dar click en el home número uno salto dentro del prototipo, y lo que queremos hacer es dar click en este primer objeto así Milán, una lámpara en nuestro caso, y luego simplemente arrástrela aquí abajo y para la interacción puedes usar drag puedes usar auto animate home to es el destino y para la flexibilización. A lo mejor podemos usar estos fuera y vamos a dar click en el nombre del Our Port Click Play justo aquí solo para probarlo y ver cómo se ve. Por lo que se puede ver que es el disparador de arrastre. Y ahora para volver atrás, simplemente haz clic aquí en este 1er 1 dragón de vuelta. Se verá exactamente la misma interacción. Y si hago clic aquí, entonces reproduzca y use el disparador de pista una vez más, Como pueden ver ahora podemos volver a él. Por lo que es una animación muy cool con la flexibilización hacia fuera. Entonces cuando te sueltas, como que fluye hacia su lugar. Ahora, como pueden ver, debido a que este nuestro puerto se extiende hacia abajo, también se puede desplazar hacia abajo y localizar nuestro proceso. Pero lo que queremos es pasar a la segunda sección. Entonces para el hogar tres, queremos hacer lo mismo. Lea las combinaciones de habitaciones. Por lo que saltó de regreso a casa. Uno. Selecciona Este 1er 1 puedes acercar un poco y luego simplemente arrastra este estrecho hacia abajo, usa exactamente la misma configuración que antes y haz lo mismo que antes. Entonces, ¿por qué el 1er 1? ¿ Por qué no el 2do 1? Bueno, porque en el 2do 1 se puede ver que tenemos este estado. Por lo que se mueve justo aquí para la sección más popular, y el primero 1 están todos en su estado original, Así que eso es lo que queremos crear. Entonces si salto aquí mismo, golpeo, juego y hago esto, puedes ver que funciona bien. Y también puedo hacer esto y funciona muy bien. A continuación, saltemos rápidamente y hagamos esto. Haz lo mismo para algunos de estos iconos. Por lo que para el ícono del menú, podemos saltar atrás y dar click aquí mismo. Entonces en cambio, fuera del gatillo, queremos usar el grifo. Entonces en lugar del arrastre, quieres usar paso en lugar de acción o dedo del pie animar. Quieres elegir excesivamente porque quieres esta superposición de dedo de la pantalla en la parte superior de esta pantalla, y ahora quizá quieras volver atrás. Entonces cuando haces clic en este icono X justo aquí, arrástrelo dedo del pie aquí, Step only home se disuelve por lo que va a volver y vamos a probarlo rápidamente para que juegue hit justo aquí, y como puedes ver, se superpondrá en la parte superior de la pantalla, y al hacer clic en actos, lo va a volver a cerrar. Por lo que rápidamente puedes hacer eso para todas estas pantallas si quieres, pero vamos a saltar del dedo del pie por dentro. Eso es parte de ello. Posteriormente. Y ahora animemos rápidamente las zonas para que puedas dar click en la búsqueda y te llevará a la búsqueda aquí mismo o aquí mismo. Puedes elegir, sin embargo quieras organizarlos. Entonces vayamos rápidamente a los filtros porque quiero buscar por filtros. Ahora esto es un grifo. No es demasiado, es una transición, y tal vez quieras elegir a esta nación. Es este y animación que puedes elegir, disolver o puedes elegir ligera diapositiva izquierda. A lo mejor podemos levemente para este, así que vamos a probarlo. A ver cómo se ve. Jugar. Haga clic aquí y se deslice desde arriba. Y me gusta cómo se ve esto así que simplemente puedes dar clic aquí cerrar y te va a sacar de nuevo, dedo del pie algunos de estos otros. Entonces usemos ese deslizamiento de casa de transición hacia arriba o tal vez levemente hacia abajo. Así que da click justo aquí, golpea , juega, pulsa aquí, y cuando haga clic justo aquí, hará lo mismo y saltará de nuevo hacia abajo. Por lo que se acercó y salta de nuevo hacia abajo. Y una última cosa que nos queda hacer para esta pantalla es dar click aquí mismo en el icono del carrito. A lo mejor puedes acercarte un poco más así y luego simplemente y arrastrarlo hacia fuera a tu carrito. Entonces para pedir detalles, paso, transición o los detalles. Y en lugar de este ligero descenso, tal vez puedas ligeramente a la derecha, por ejemplo, solo para ver cómo se ve eso. Por lo que en un clic justo ahí, se levante a la derecha. Y me gusta cómo se ve eso y una última cosa que hacer. Puedes elegir tan popular y tal vez puedas hacer click en para ver viejo. Y te llevará a esta sección. Entonces, Tep y en lugar de deslizarse picaduras derecha judíos se disuelven y finalmente enrutan combinaciones de habitaciones. A lo mejor podemos elegir este 1er 1 porque es nuestro 1er 1 Y como no podemos ir a partir de ahí , tal vez puedas elegir Seal porque lo usamos para esta parte fuera de la animación, solo podemos ver todos click aquí. Nos llevará a la sala de estar grifo combinación de sala de transición Y tal vez podamos elegir ligera izquierda en este caso. Entonces vamos a probarlo rápidamente para que todo esto funcione correctamente. Y si hago clic en sello, puedes ver que nos lleva a la sala. Y cuando haga clic atrás en este ciclo tan seleccionado, nos puede llevar del pie esta pantalla una vez más. Entonces en lugar de la ligera izquierda, elijamos leve, ¿ verdad? Entonces una vez más, casa, haga clic aquí, combinaciones de Roma. Entonces ver todo Ok, me gusta esto y puedo volver a la pantalla de inicio y eso es todo para este primer video. En el siguiente video, vamos a pasar a los filtros de búsqueda de pantalla de categoría y así sucesivamente, así que ya voy a ver. 28. Prototipo 2: Vamos ahora adelante y enemigos a estas otras pantallas. Por lo que para la pantalla de categoría, si saltas aquí mismo, nos llevará a la pantalla de búsqueda. Y quizá podamos ir aquí mismo, por ejemplo, porque eso es lo que queremos. Y en lugar de la diapositiva derecha, puedes elegir disolver cuando hago clic en insight y seleccionar este icono jabón para los pedidos. Puedo ir a los detalles de pedido usados. Estos viejos tal vez, y siempre puedes saltar atrás y hacer clic en algunos de estos iconos y ver lo que hiciste. Para que puedas saltar. Ve dónde está justo aquí, y puedes ver que es luz derecha para que puedas usar exactamente la misma animación para ello, así puedes hacer click sobre ella acercando un poco más, ver si está seleccionada. Es, Y como puedes ver, es justo aquí, en lugar del resultado, deslízate a en lugar del resultado, la derecha para que puedas usar exactamente la misma animación en cada pantalla. Ahora, finalmente, usemos el menú, así que haz clic aquí, salta al menú así que toca en lugar de la transición, puedes elegir excesivamente, y puedes ir a la ligera hacia abajo. Lo mismo ubicado para la pantalla de inicio, y siempre puedes comprobarlo y ver si hiciste justamente eso. Entonces en lugar de disolverse como está aquí mismo. A lo mejor podemos elegir ligeramente hacia abajo solo para tener esa consistencia en nuestra pantalla. Entonces si hago click justo aquí, click en el menú. Será ligero hacia abajo, y si hago clic en algún lugar alrededor, nos llevará aquí. Pero en lugar de la X aquí mismo, porque siempre nos lleva a la pantalla de inicio, queremos quitarla. Entonces cuando hacemos clic en cualquiera fuera de estas bajo pantallas quiere llevarnos de vuelta a casa. Pero quédate en esta pantalla en particular por lo que encontrarás esto de vez en cuando. Entonces, cuando estés animando, haz clic justo aquí que en algún lugar por aquí. Simplemente lo cerrará y no volverá a la pantalla anterior que ibas a conocer finalmente para esta pantalla. Vamos a dar click en ordenar por, y te llevará a esta pantalla y en lugar de la excesivamente vamos a elegir transición y lo que yo quiero, por ejemplo, por ejemplo, es que elijamos leve a la derecha y veamos cómo se ve eso. Da clic aquí, así que ordena por diapositiva, ¿verdad? Creo que se ve bien y ST Ng como lo hicimos antes. Por lo que queremos quitar este icono X e intentarlo de nuevo. Así que da click aquí. Así que desliza a la derecha. Y como puedes ver ahora, queremos dedo del pie Agrega algunas pantallas adicionales aquí mismo para que podamos aplicar la selección. Y de esa manera nos traerá de vuelta a esta pantalla en particular. Entonces ahora que animamos todo esto, tal vez quieras hacer click en el logo que nos llevará a la pantalla de inicio. Así que toca, tal vez puedas usar auto animate. Pero solo hagamos la transición y tal vez puedas elegir diesel, así que lo que sea que tengas el logotipo, te llevará a la pantalla de inicio. Entonces ahora vamos a elegir estos filtros de búsqueda y vamos a animar. Pero antes sí golpeamos control o comando s para que podamos decir nuestro proyecto y nuestros cambios. Entonces lo que queremos para esta pantalla es simplemente saltar de nuevo a la parte de diseño. Sostén tu viejo u opción, sigue saltando abajo y lo que queremos es tenerlos cerrados y tenerlos abiertos y finalmente tenerlos aplicados. Entonces será éste. Ahora bien, este botón debería estar genial fuera para esta primera parte. Entonces elige este color o tal vez incluso en este color, Vamos a ver. Sí, Y para el texto seleccionado Color más oscuro. Entonces algo como esto elige los mismos ajustes para este porque va a ser genial fuera. Y luego cuando apliques, cuando realices tus selecciones, te mostrará aplicar botón de selección, que te llevará de vuelta a esta pantalla. Entonces lo que queremos para lo personal es cambiar algo de esto y agregarlo, algo de ello. Entonces lo que quieras por la flecha hacia abajo del precio, puedes voltearla hacia arriba, así que porque se cerrará y todo esto se va a esconder. Entonces en lugar del precio y el rango, todo será materiales ocultos, mismo Piensa así localizar la flecha abajo y voltearla para que todos los materiales vayan justo aquí para que podamos tener el mismo espaciado y tú esconderás todo lo que es ubicado dentro esta sección de materiales y finalmente lavable y mecanismo Meghan. Puedes mover esas dos secciones hacia arriba y tener el mismo espaciado que era para todos fuera de estas otras, así Así Así, como puedes ver, todas ellas están cerradas, y ahora cuando haces clic en algunas de ellas, por lo que necesitamos hacer click en el precio y en materiales para abrir esas secciones al alza para que se abran precio y las joyas. Pero quitemos este marco y solo creamos el texto. Por lo que cuando la gente haga clic en este marco, los mostrará y se abrirá, y podrás hacer algunos cambios más. Entonces, por ejemplo, tal vez podamos tenerlo cerrado en esta pantalla y luego hacer una pantalla más. Entonces, así. Entonces hasta, como aquí, sí y no, esta va a ser nuestra pantalla final. Y para este, usemos la misma configuración que antes. Entonces así, y te voy a mostrar a qué me refiero. Entonces en este 1er 1 todos ellos están cerrados en este 2do 1 Solo este 1er 1 está abierto, así que vamos a saltar y cerrar los materiales. Por lo que una vez más, Down Arrow debería estar arriba, y esta letra y coágulo se van a ocultar, y puedes mover todo esto un poco hacia arriba y hacerlos 20 píxeles de ellos. tan aparte, 20 píxeles en todos ellos. Entonces este va a ser nuestro 1er 1 en nuestro 2do 1 Va a estar abierto, pero solo el marco estará escondido y finalmente justo aquí. Cuando lo selecciones, va a aparecer y te va a mostrar este marco. Entonces ahora sigamos adelante y animemos todo esto. Entonces lo que puedes hacer es cuando hagas clic en Ordenar por, te llevará a esta pantalla. Entonces vamos a saltar hacia atrás prototipo del dedo del pie, así que ordena por esta pantalla y vamos a probarlo rápidamente. A ver si funciona. Sí, y ahora lo que podemos hacer es dar click en el precio en la Flecha y te mostrará esta pantalla Así que tap transition sería auto animates porque queremos esa bonita animación. Y una vez más cuando haces clic en estos materiales, por ejemplo, y puedes acercarte un poco más si no puedes seleccionar el ícono directamente y usar el mismo auto enemigo para facilitar los filtros de búsqueda aquí mismo. Y finalmente al hacer clic en la escalera, mismas animaciones aquí mismo, te llevará aquí, y finalmente, al hacer clic, aplicar selección. Te llevará de vuelta a esta pantalla, y para ello escogeremos transición y para la transición puedes elegir disolver. Entonces vamos a probar todo aquí para jugar. Por lo que cuando haga clic en ordenar por, nos llevará a esta pantalla Click price. Se abrirá este elemento de precio. Haga clic en los materiales. Abrirá este griego en la carta. Te lo mostrará como selección y finalmente aplicarás selección, y te llevará de vuelta a esta pantalla. Entonces eso es básicamente todo para este video es que puedes ver a veces tienes que hacer algunas pantallas adicionales y algunos cambios adicionales. Pero es bastante divertido porque puedes hacer estas animaciones. Y por último, si quieres cerrar todos ellos de nuevo, solo puedes dar la vuelta al revés y dar click en estas flechas y retroceder e invertirla para volver a esta pantalla. Pero me pareció mucho más fácil solo hacer click. Aplicar selecciones, porque eso es lo que harán los usuarios en lo siguiente. Vamos a saltar y hacer algunas animaciones en la combinación de habitaciones, y les voy a mostrar cómo se puede hacer alguna animación agradable a la imagen de fondo también . Entonces te veré allí 29. Prototipo 3: fue saltar dentro y crear animación para la pantalla de combinación equivocada. Por lo que una vez más salta a la parte de diseño, sostén viejo y obligado abajo. Entonces colóquelo aquí y lo que queremos aquí mismo es mover esto a la derecha. Así que salta dentro, localiza la tarjeta uno y tarjeta para simplemente seleccionarlos a ambos y moverlos aquí mismo. Y lo que también queremos es mover un poco esta imagen de fondo así en algún lugar como aquí, tal vez. Y lo que vas a ver aquí mismo es una ligera animación. Cuando saltas atrás y adelante, Así que salta al aumento del prototipo y lo que quieres es hacer clic aquí, arrastra abajo. El gatillo es un drag, auto animate y la facilidad que puedes usar está fuera. Entonces cómo eso parece probable que llorara aquí. Entonces antes de que lo hagamos, solo localicemos de vuelta a aquí. Así que drag auto animator en combinación está fuera y ahora podemos golpear la vista previa. Entonces cuando se abrió la pantalla anterior, es como se ve eso. Para que puedas ver tenemos esta bonita animación de fondo fuera de esta imagen. Por lo que te puedes imaginar si tienes más cartas aquí mismo. Entonces si tienes tres o cuatro, por ejemplo, entonces puedes mover la imagen un poco menos a la izquierda, y entonces toda esta animación se verá mucho más bonita y mucho más limpia de lo que es ahora. Entonces solo imagina que tienes tres o cuatro tarjetas más y las imágenes mucho más blancas, y entonces puedes mostrar muchos más detalles ahora porque estas imágenes libres de aire que tomé de un chapoteo que vienen antes de que el cliente ya tenga sus propias imágenes. Simplemente imagina todos estos artículos para posicionarse a la perfección. Entonces en esta primera tarjeta, digamos que están vendiendo esta lámpara. Y cuando sigas adelante con esta segunda tarjeta, digamos que están vendiendo este marco en la tercera tarjeta. Digamos que están vendiendo alguna lámpara o algo así. Entonces, dondequiera que el usuario se mueva , estos carros, esos artículos aparecerán y luego simplemente podrán golpear algunos de estos artículos y luego abrir las páginas dedicadas para esos productos en particular. Entonces es realmente un arma poderosa que tienes aquí mismo dentro de los huevos de adobe D que puedes explorar y luego moverte. Y por último, lo que queremos para esta pantalla es elegir esta imagen, digamos o dar click en el París, tal vez y luego arrástrela a esta pantalla. De lo que queremos un paso. No queremos Auto enemigo dedo del pie en transición y queremos que estos viejos está fuera. Entonces, una vez más, cómo eso se ve como hit play y puedes mover estos por ahí. Y cuando quieras seleccionar este hit en el nombre y te llevará aquí Ahora, solo imagina que esta era la silla y no el sofá, porque una vez más estamos usando imágenes gratuitas, y el cliente aún no ha proporcionado sus propias imágenes. Pero una vez que lo hagan, y una vez que entremos a las etapas de acabado de este proyecto, todo funcionará mucho más a la perfección y se verá mucho más bonito de lo que es ahora. Entonces los veré en el siguiente video, donde vamos a empezar con pantallas de elementos seleccionados, y vamos a añadir algo de animación sutil a este fondo y a esta silla, así que ya veré ahí 30. Prototipo 4: vamos a animar ahora estas pantallas de artículos seleccionados. Pero antes de que lo hagamos, porque éste es bastante largo. No queremos dedo del pie hacer copia aquí abajo, sino más bien a la derecha. Entonces lo que puedes hacer es mover algunas de estas pantallas, simplemente saltar a la parte de diseño de la misma, moverlas aquí mismo, y luego simplemente hacer control de para éste y luego simplemente arrastrarlas de nuevo a su posición así. Entonces por qué hicimos esto es que queremos hacer éste. Por lo que este es nuestro 1er 1 sin ninguna selección en él. Entonces queremos hacer el 2do 1 para el color y luego el 3er 1 para el tamaño. Entonces deja este como si fuera éste. Simplemente deja el color y nos vamos a esconder por la talla. Vamos a ocultar el marco, así Y en lugar de aplicar selección Si recuerdas, lo cambiamos para comprar ahora. Entonces vamos a hacer eso para ambos botones. Entonces ya vamos a mecanografiar, Control. ¿ Ver? No, genial aquí, Control V solo para ahorrar un poco más de tiempo, puedes cerrarlos todos y Ahora podemos hacer nuestra animación, así que por favor consulta ese ítem. Salta al foso prototipado y lo que podemos hacer es por esta flecha. Si seleccioné y lo arrastré hacia atrás, podemos volver a la pantalla de combinación de habitación, y va a ser transición escalonada en lugar de la disolución. Dejemos la luz a la izquierda y veamos cómo se ve eso. Para que tocara. Y cuando haga clic justo aquí, se levante a la izquierda. O tal vez podamos cambiarlo a ligero a la derecha, porque va a tener un poco más de sentido tan rápido. Aquí mismo. Click, play y hit slide, ¿verdad? Como se puede ver, sí. Entonces ahora lo que podemos hacer es cuando hagas click en este color aquí mismo, te llevará a esta pantalla y en su lugar fuera de transición. Queremos elegir o dedo del pie animate está fuera. Tres segundos. Se ve bien. Entonces ahora si hago clic aquí, golpeo, juego y selecciono el color. Como puedes ver, se movió apenas un poco e introdujo este botón buy now. Entonces ahora lo que queremos es golpeado aquí mismo para que podamos hacer una selección para el tamaño. Deja todo como está porque queremos exactamente la misma animación así que hit en el 1er 1 Y cuando un hit aquí, puedes ver la animación apenas se mueve ligeramente Este color hacia arriba Haz clic aquí. Como puedes ver Ahora tenemos esta selección y finalmente, lo que necesitamos es un botón comprar ahora. Entonces cuando haces click justo ahí, tal vez queremos incluir una pantalla más justo aquí para que podamos animar esto. Pero vamos a moverlo desde aquí. Detalles del pedido del dedo del pie. Así que haz click justo aquí y luego justo aquí, Tap. No queremos autonomía a en transición. Nosotros queremos disolver se agotan tres segundos. Tasa cíclica aquí hit play. Y cuando haga clic ya, le llevará esta pantalla. Pero queremos hacer lo mismo desde aquí. Al igual porque tal vez la gente no quiere dedo del pie hacer una selección para este hielo. A lo mejor quieren ir por el tamaño predeterminado fuera de la talla que sea. Entonces tal vez puedan hacer click ya desde aquí en lugar de desde aquí. Pero la mayoría de la gente saltará aquí mismo Ahora si eran 59 centímetros en este caso, este precio aquí mismo se actualizará, y luego se actualizará aquí también. Pero porque lo mantuvimos simple con 1 24 por el precio. Como puedes ver, aquí es lo mismo. Total es éste de aquí. Por lo que queremos mantenerlo lo más sencillo posible para este proceso. Entonces creo que se ve bien. Por lo que una vez más, haga clic aquí. Jugaría solo para que podamos ver cómo se ve. Y puedes ver también puedes desplazarte hacia abajo y leer más sobre este producto. Se ve bonito. Por lo que cuando hago clic aquí, se produce una ligera animación. Puedes golpear tamaño, así que aquí mismo y ya puedes hacer click. Te llevará a esta pantalla. Ahora, finalmente, queremos animar estos tres iconos, así que haz click en ellos por separado como así te llevará a esta pantalla así disuelta se ve bien aquí y finalmente justo aquí. Por lo que cuando haga clic en cualquiera de ellos y luego haga clic en el icono, me llevará a esta pantalla. Entonces creo que se ve bien. Se ve sencillo porque eso es lo que el cliente quería en primer lugar. Y creo que hicimos un buen trabajo por estas pantallas. Ahora, en el siguiente video, vamos a saltar en remolque, ordenar detalles y crear alguna bonita animación para el deslizar y quitar algunos de estos artículos del carrito, así que te veré ahí. 31. Prototipo 5: No saltemos y creemos algunas animaciones para la pantalla de detalles del pedido antes de que sí nos controle solo para que pueda guardar nuestro proyecto. Entonces lo que quiero es saltar a la pestaña de diseño, sostener mi voluminoso y hacer dos copias. Entonces así, y tal vez puedas localizar dónde estaba éste. Si puedes alinearlo como es, así y así crea una copia más abajo, como así asegúrate de que sean de la misma altura. Y para este, lo que queremos es seleccionar carta a Auto tres y alinearlos a la parte superior con la tarjeta uno, como así y la carta uno, vamos a ocultar, así que no va a ser visible, y nosotros quieren actualizar el detalle del pedido porque lo retiramos del CARRITO. Entonces lo que quiero es localizar mi calculadora y es 2429 más 98 va a ser a 5 a 7 ahora. Entonces, así a 5 a 7, porque el precio actualizado porque quitamos un artículo del carrito. Entonces lo que queremos aquí mismo es sacar de aquí esta hostil silla de casa. Por lo que simplemente quiero quitarlo así y hacer doble clic en cero en mi teclado para bajar la capacidad a cero. Y lo que quiero ahora mismo es tratar de conocerlo. Entonces iré al prototipo. Voy a dar click en esta tarjeta, arrástrela y abajo hasta aquí y lo que quiero es arrastrar Auto. Cualquier flexibilización de carne está fuera. Y veamos cómo se ve eso. Por lo que tocaba Arrástrelo así. Y como puedes ver, lo quitó de esta pantalla. Ahora lo que quieres de esta pantalla a abajo es que queremos animar toda la pantalla. Así que basta con hacer click en el nombre fuera de tableros oscuros, haga clic aquí, arrástrelo hacia abajo. Lo que queremos es tiempo. Porque cuando lo arrastramos justo aquí, no vamos a esperar un poco. Y luego ve aquí mismo a esta pantalla. Entonces retraso, Lo que queremos es tal vez un segundo auto anima la acción está fuera. Es la duración de flexibilización es de 0.3 segundos y finalmente lo que queremos es dar click aquí mismo. Proceder. Tomó el pago. Acude a esta pantalla así que toca, porque el fondo es el mismo. Queremos usar el tap auto animate, tal vez y el pago y solo vamos a ver cómo se ve eso. Por lo que da click en este 1er 1 click play. Entonces cuando lo quité soltó. Esperará un segundo y luego moverá a estos dos hacia arriba a su posición. Y como puedes ver, Total también ha actualizado. Así que acaba de golpear. Juega una vez más, mira cómo se ve eso. Por lo que presta atención al total. Es 2651 Y cuando hago justo aquí y como pueden ver, total actualizado justo aquí y ahora tenemos justo estos dos artículos en el carrito. Una cosa más podríamos diseñar esta función. Entonces cuando hagas click en la flecha y puedes elegir así, por ejemplo, a piezas por piezas, cinco piezas, algo así, el precio se actualizará aquí mismo en el total. Pero no vamos a hacer esto porque al cliente le interesaba más cómo va a funcionar esto . Por lo que una vez más, haga clic aquí, golpee play y, como puede ver arrastrar, quítelos. Total actualizado. Proceder al pago. Y como puedes ver, ahora estamos en la pantalla de pago y vamos a hacer rápidamente los ajustes en la pantalla de pago Pasa bien, así que haz clic aquí y tal vez queremos saltar a la pestaña de diseño y hacer una copia rápida. Entonces muévete con abajo, así Porque lo que queremos es eliminar estas sombras de caída de la primera pantalla. Por lo que en la tarjeta de crédito, puedes elegir BG y simplificar la sombra a la misma para el auto de PayPal. BG quitó la sombra y justo aquí en el 2do 1 queremos quitarle la sombra a la gente porque el cliente quiere pagar con la tarjeta. Entonces así es como eso parece prototipo. Una vez que estés aquí, puedes seleccionar la flecha y volver aquí. Así que toca en lugar de auto animate, elegirás transición en su lugar con resultados leves. Correcto, porque quieres volver a esta pantalla y lo que queremos. Por lo que queremos actualizar el total. Pero tal vez queremos que se vayan o les den la opción de ir desde esta pantalla o de ir desde esta tercera pantalla. Entonces, en caso o si optas por ir desde esta tercera pantalla y solo tienes dos artículos, quieres actualizar el precio. Pero yo sólo quiero hacerlo así. Entonces tal vez pueda dar clic aquí, arrastrarlo desde aquí, tocar o a cualquier carne Él está fuera. Entonces eso está bien. Y por último, queremos elegir la carta y luego saltó de vuelta a aquí y descartar a los seleccionados. Hacer un pago, y lo que queremos es que vuelvan a la pantalla de inicio, por ejemplo. Entonces va a ser transición. Disolver está fuera, y la duración va a ser de un segundo porque queremos esperar un poco antes de hacer eso. Y por último, un cambio final es a este fondo porque no pueden seleccionarlo antes de seleccionar su método de pago. Entonces va a verse igual que estos otros botones que diseñamos antes. Entonces, finalmente, veamos cómo se ve nuestra animación, Así que está saltando de orden. Detalles. Haga clic aquí para hit play, proceda al pago. Estamos aquí, así que el precio es el mismo Como puedes ver. No pueden hacer clic, hacer un pago antes de hacer una selección. Entonces cuando haga clic aquí mismo, aparecerá esta sombra de fondo, y ahora pueden hacer un pago. Pueden hacer clic aquí mismo, y cuando pagaron puede llevarlos de vuelta a la pantalla de inicio. Ahora, una última cosa que queremos hacer es dar click aquí mismo. Puedes proponer un disparador de tiempo entre esto y esto para que puedas crear otra copia fuera esta pantalla haciendo ir de aquí a aquí usando disparador de tiempo y luego de ella de vuelta a la pantalla de inicio , uh, usando indecente disolver selección. Y tal vez queremos hacerlo un poco más grande. Entonces dos segundos. A ver cómo se ve eso. Entonces cuando estés aquí, puedo jugar hit, hacer un pago. Y, como pueden ver, dos segundos en juego para que vuelva a esta pantalla. Entonces es realmente fácil. Es realmente simple. Como puedes ver, solo haz esos cambios y solo quieres comprobar esto rápidamente. Así es la duración fuera. A lo mejor es un segundo y solo echa un vistazo a eso, a ver cómo se ve eso. Por lo que cuando hacen clic en la tarjeta, toma un segundo para que aparezca este fondo sombra dedo del pie. Quizás incluso puedas crear un marco alrededor de esta tarjeta solo para indicar un poco mejor de lo que seleccionó. Pero creo que esta sombra de fondo funciona bastante bien con nuestro diseño Orel. Entonces en el video final, vamos a saltar a las localizaciones de las tiendas y al menú, y te voy a mostrar esos hoyos también, así que te veré ahí. 32. Prototipo 6: ahora, finalmente, animemos ubicaciones de tiendas y pantallas de menús. Pero antes de que lo hagamos, me acabo de dar cuenta de algo, y esto va a pasar mucho cuando estás diseñando. En ocasiones incluyes cosas que no son necesarias para algunas pantallas o algunas páginas si estás haciendo diseño de sitios web, y en nuestro caso, es este ícono. Entonces son las órdenes. No puedo dentro de los detalles del pedido, porque ¿por qué necesitarías ícono de pedido dentro de los detalles del pedido? Porque estás en esa pantalla para que el Seiken no haga nada. Entonces saltemos al golpe de la parte de diseño, eliminemos, y vamos a hacer lo mismo con todas estas otras pantallas, y voy a saltar dentro y borrarlo para la parte de diseño también. Así que haga clic aquí, borrado de aquí y finalmente saltó dentro de los detalles del pedido en nuestro cableado y borrado de ahí también. Entonces como puedes ver, es bastante simple dedo del pie hacer estos cambios simplemente saltar dentro de algunas de estas pantallas y hacer los cambios. Pero estas cosas van a suceder de vez en cuando porque estás trabajando en este proyecto a tiempo completo, y le dedicaste tu tiempo y tu energía. pero a veces cometes algunos de esos pequeños errores. Entonces ahora por fin, hagamos animaciones para las ubicaciones de las tiendas. Entonces digamos que vas a ella desde esta pantalla o desde cualquier otra pantalla donde tengas este ícono de búsqueda. Te llevará a esta pantalla en particular y saltemos dentro de un diseño porque queremos hacer tres pantallas. Entonces usemos nuestra vieja clave una vez más y hagamos un duplicado de ella y hagamos un duplicado er una vez más. Entonces lo que queremos hacer con el 1er 1 es quitar algunos de estos artículos. Entonces vamos a quitar el color selectivo del color. Nos vamos a quitar la palmadita y nos vamos de dedo hacer desaparecer esta tarjeta para poder esconderla así. Y en el 2do 1 en lugar de buscar ubicaciones, podemos escribir en Bel Great, y vamos a hacer lo mismo. Por lo que vamos a eliminar el color seleccionado pat y descartar aquí mismo para que podamos moverlo de la vista. Y por último, vamos a mostrar todo en la pantalla de inicio, así que simplemente haga doble clic aquí y escriba en Belgrado y asegúrese de comprobar Si lo ingresaste en todas partes, así podemos saltar al prototipo. Ahora da click justo aquí en esta primera pantalla. Y una de las necesidades es cuando la gente haga clic justo aquí dentro de esta barra de búsqueda en el texto aparecerá Belgrado. Esperará sólo un poco. Y luego te mostrará a todos estos toda esta información aquí mismo. Entonces, al hacer clic en él, puedes arrastrarlo aquí mismo. Así que toque o puntera cualquier carne y luego seleccione esta entera nuestros puertos, tal vez espere un poco. Por lo que el retardo de tiempo va a ser un segundo auto animate a esta pantalla aquí mismo, y te va a mostrar toda esta información. Entonces saltemos rápidamente por dentro y veamos qué hicimos. Por lo que cuando hagas click en este 1er 1 puedes hacer clic en ubicación se va a cebar un segundo, y te va a mostrar esta tienda y tienda de Belgrado justo aquí. Ahora puedes hacer que este auto aparezca. Entonces, por ejemplo, quizá debilite saltar a esta pantalla y saltar para diseñar localizar nuestra tarjeta. Entonces aquí está, aquí mismo, y tal vez podamos moverlo. Por ejemplo, abajo como así y va a ser cero pacenti y vamos a ver cómo se ve eso ahora para que puedas saltar. Haga clic aquí. Espera un segundo. Y como puedes ver, Card apareció desde aquí. Ahora incluso puedes crear una pantalla adicional y luego animar este spot. Por lo que en la tercera pantalla aparecerá la tarjeta y aparecerá desde abajo, como no lo es ahora mismo, pero esta parte va a aparecer entonces en la cuarta pantalla. Puedes hacer eso si quieres, pero creo que por ahora se ve bien. Y entonces el usuario puede hacer clic aquí y navegar a esta ubicación desde su propia ubicación o golpear más detalles y conocer más sobre este proyecto de ley. Gran tienda. Y tal vez eso pueda ser como una ventana emergente y con el fondo negro, por ejemplo, para que puedas desmayar toda esta otra información, y podrías tener tal vez otro icono ex para que lo cierren si quieren cerrarlo desde ahí. Esa tarjeta puede contener, por ejemplo, um, um, un poco más de información, tal vez imágenes sobre este lugar, tal vez un número de teléfono, número correo electrónico, fax. Si están usando fax, correo electrónico, direcciones como esas, y pueden contactarlos directamente desde su. O pueden cerrar y navegar a la tienda usando este botón aquí mismo. Y por último, lo que nos queda hacer es simplemente hacer click en el menú, usar prototipo y luego simplemente enemigos. Algo de esto arriba. Por lo que al hacer clic en el logotipo, los llevará a la pantalla de inicio. Así que toque transición, disuelva. Está fuera. Eso me gusta. Y por último, tal vez podamos elegir también mis pedidos, y los llevará al paso de detalles del pedido. Misma configuración de aquí las ubicaciones de las tiendas. A lo mejor podría llevárselos. Remolque esta primera pantalla, así que usa de todos modos, y creo que eso es todo. Entonces tal vez puedan usar mis pagos e ir a esta pantalla. Pero debería ser una pantalla dedicada a mis pagos donde puedan ver todo de sus pagos. Por lo que cuando hago clic aquí mismo, él jugaba e iba a localizaciones de tiendas. Se puede ver donde hay y cuando seleccioné una vez más, tal vez haga clic en el logo. Nos puede llevar aquí, Así que cuando hagas clic en el menú, puedo desde aquí dar click justo aquí te llevará a la pantalla de inicio. Pero por ejemplo, si estás en esta pantalla hit play, entonces pulsa menú. Pero no nos animamos desde aquí, así que hagámoslo ahora mismo. Haga clic aquí, luego justo aquí. Tep y se disuelven excesivamente. Creo que se ve bien, pero debe levemente arriba no levemente hacia abajo porque eso es lo que usamos para todos estos urbanos . Entonces cuando haces clic ahí hit, play hit menu, se desliza hacia abajo como puedes ver muy bien cuando haces clic aquí, te va a llevar a la pantalla de inicio. El control es salvar nuestro proyecto, y eso es todo para la animación. Como viste, puedes incluir diferentes tipos fuera de animaciones Puedes ir con más fácil una vez como con él. Con estas flechas, que se están abriendo hacia arriba y hacia abajo, puedes ir por animaciones tipo off un poco más avanzadas como lo hacemos con la combinación de habitaciones , donde todo se desliza de izquierda de derecha de arriba a abajo. Incluso puedes hacer que la imagen se acerque mucho más. Se puede crear un disparador de tiempo como lo hicimos nosotros. Por ejemplo, para este mapa, puedes animar tarjetas para ir de izquierda a derecha de arriba a abajo como hicimos con esta ubicación de tienda. Y por último, incluso puedes incluirlo todo junto y armar todo para crear animaciones como lo hicimos para las órdenes cuando arrastran sobre este primer auto a la izquierda, luego esperan un poco y todo se llena como debería y luego actualiza el precio y actualiza los botones también. Entonces eso es básicamente todo para la cara de prototipado en la siguiente parte. Fuera de este curso, vamos a hablar de exportar tus diseños y cómo puedes enviar todo lo que hiciste hasta ahora a tu cliente y a sus desarrolladores para que se detengan. Empieza a desarrollar, y tu cliente puede entender todo tu proceso que pones en su lugar y cómo va el diseño del dedo del trabajo. Una vez que hace frío, él y una vez que es vida en los dispositivos de los usuarios. Entonces te veré allí 33. Crear la guía de estilo: en esta parte del curso, vamos a empezar con exportar nuestros activos porque necesitamos enviar estos archivos en los que estábamos trabajando a nuestros clientes así como a su desarrollador. Pero antes de que lo hagamos, tenemos que hacer algunos cambios, y tenemos que prepararlos para que los enviemos. Entonces, empecemos con la creación de una guía de estilo. Entonces si acerco un poco más a aquí ahora, este archivo se llamaba iconos. Pero simplemente puedo aburrir clic aquí y crear una guía de estilo como esa, y esta guía de estilo va a contener iconos que se usaron así como colores y fuentes. Entonces para hacer eso, simplemente puedo ampliar esta obra de arte hacia abajo y quitar esto para poder incluir el logotipo aquí mismo , así que tal vez incluso pueda hacer un duplicado de la misma y tal vez hacer un local más grande. Ese no es el requisito, pero tú conduces eso si quieres, y ahora simplemente posiciona esto en el medio para que sea un poco más atractivo. Y movámoslo, Toby, en algún lugar alrededor de 100 digamos Solo danos un poco más de espacio, y también puedes hacerlo con estos iconos. Simplemente cambiará, y tal vez puedas hacer así. Por lo que 456789 10 y crear un espaciado desigual. Ahora usemos colores, y lo que vamos a hacer es usar una barra de herramientas de rectángulo. Da click en Sí, es panel y tenemos que por $6 en total, que puedas crear un buen direccionamiento como este. Colócala, Toby, exactamente la misma distancia que estos dos eran antes. Entonces 100 como así y luego hacer seis copias para que puedas usar una cuadrícula de repetición y hacer así, por ejemplo, y puedes dejar el espaciado como es si quieres. Oregon simplemente en agruparlo, quitó las fronteras y luego simplemente ir uno por uno y elegir estos colores. Entonces ve así. Al igual que esto, así E. B. Y finalmente, esta es F F como era y simplemente crear una linda frontera para ello. Ahora vamos a incluir un texto tan prístino. Da click aquí, y este 1er 1 es F C 7800 como así, y puedes incluirlo aquí mismo. Asegúrate de que esté en el medio y simplemente aumenta el tamaño a 10 o tal vez incluso a 16. Por lo que es fácilmente legible. Hazlo blanco porque todos nuestros colores, excepto el color blanco, son blancos y puedes posicionarlo así doble clic aquí y tecleando cero B cero b cero b para éste y mantén presionado Old Key para duplicarlo de nuevo. Selecciona todo esto. Entonces este es 858585 Así que estos colores son bastante simples, así que nada importante realmente. Haga doble clic aquí. Y para esta siguiente, tenemos 717171 Tenemos E B E B B B para ésta, entonces es E B B e B. Me gusta. Y por último, porque este es blanco, usemos este color y simplemente escribiendo f f f f f f f f Así que eso es todo para nuestros colores. Y también puedes agrupar todo este hit control G salto en capas, panel y colores de escritura. Puedes organizarlo un poco mejor, por lo que estos dos logotipos irán todo el camino hacia abajo y finalmente estos colores irán todo el camino hacia abajo para que puedas agrupar todos tus iconos. Entonces vamos a encontrar el icono del carrito. Es éste. Entonces es orden. Agruparlo como así seleccionarlos todos así. Control G El filtrado me refiero a iconos cuando esto solo para los desarrolladores para que puedan copiar fácilmente valores desde aquí y no ir dentro de tu diseño todo el tiempo solo para que puedan usar colores. Ahora, vamos a incluir algunos fondos, para que pueda Presti y saltar libras interes para que pueda ver qué fondos necesita incluir. Entonces este es de sentido abierto, y creo que es semi perno como este simplemente seleccionado de aquí. Tan semi perno. Esta es una palabra como esta y puedes usar esta. Tan solo hazlo 18 como si estuviera aquí. Colóquelo así y asegúrate de que sus 100 mismos como estos otros fueran así y puedes hacer una copia del mismo. Así que simplemente controlar D y posicionar tal vez 23456 Tal vez crear así. Hacer que todos estén alineados a la izquierda. Y esto va a ser 14 y su regular, y puedes usar este sentido abierto 14 irregular para crear párrafo de texto si quieres asegurar el control de golpe D y luego simplemente moverlo 60 abajo, así, creando texto de área como esto, tal vez hasta aquí, luego simplemente baje hacia abajo como así Saltar en sus enchufes, Lauren Ipsum lleno de texto de inserción de lugar o texto y eso es todo para esto. lo mejor porque es lo mismo, tal vez podamos hacerlo 40 píxeles abajo como así Saltar a una capa espinal seleccionar todo fuera del texto y simplemente ordenarlo de la manera correcta como tan controlado G Muévelo hacia abajo. Y este es nuestro texto, como So siguiente arriba. ¿ Qué? Yo quiero crear nuestras sombras porque usamos algunas sombras Si recuerdas por todos estos ítems Entonces lo que podemos hacer es simplemente seleccionar uno de estos control C control. Nosotros justo aquí, Posicionarlo como así asegúrate de que sus 100 tan así Y lo que quiero hacer es incluir algunas sombras para que puedas usar shadow Jump justo aquí. Y si recuerdas, es 55 10. Presiona entrar saltando a su sombra. Localice esto. Selecciona este color. Es 25% y también puedes seleccionarlo. Golpea el control D salto justo aquí y tal vez lo hagan 60 por ejemplo. Y puedes usar a dos y cinco porque esa era nuestra sombra más baja. Para que puedas crear esos dos puedes saltar al panel de capas. Entonces, como ambos controlan g frío, estas sombras ¿Y finalmente qué? Yo quiero incluir nuestro resplandor. Entonces lo que puedes hacer es duplicar estos dos así que el control d lo movió así. Y estos van a ser resplandor así y tal vez hacer la distancia 100 para que podamos mantener todo bonito y suave luciendo bonito como debería. Se puede bajar esto porque no teníamos ninguna ilustración de animaciones, Así que vamos a terminar con nuestras sombras. Entonces lo que puedes hacer por este 1er 1 es simplemente localizar este golpe de copia de un golpe basado en éste y hacer lo mismo para éste. Entonces copia este de un clic derecho basado en París, y lo que podemos hacer es creer las sombras como son, porque ahí usamos las sombras. Pero si quieres, puedes hacer una copia alterna de esas y crear una sin sombras. Y mientras estamos en ello, podemos hacer eso tan bien controlado el Y tal vez puedas usar estas para gustarlas y usarlas estas otras dos simplemente hacerlas 60 así o 40 Posicionar este 40 y puedes mover las tres así. Entonces son 40 píxeles en todo el camino, y tal vez podamos hacer lo mismo por esto. Por lo que 12 40. Y ahora podemos mover los INTs Grady para que sean 100 así. Entonces me gusta pedir mis archivos así sólo para que los desarrolladores puedan entonces no, y tener una vista mayor y bonita de todo lo que utilicé dentro de este diseño. Entonces para estos dos, vamos a quitar las sombras. Y en estos dos, vamos a dejar las sombras adentro. ¿ Por qué así? Porque eso es lo que usamos dentro de nuestra fase de prototipado, si recuerdas. Entonces para estos dos, no tenemos sombras. Y para estos dos, lo hacemos. Entonces eso es todo. Para nuestra guía de estilo, puedes golpear el control. E localiza tu carpeta de REFILES engañada si quieres, y simplemente puedes seleccionar esto como un Pdf J peg PNG. De todas formas que quieras y golpea la exportación, y también puedes dejarla ya que es una guía de estilo, y ellos pueden acceder a ella. Y por último, cuando golpees share un poco más tarde, y te voy a mostrar cómo los desarrolladores y clientes podrán acceder a toda esta información dentro de Adobe X'd en el archivo compartido. Pero siempre es agradable tener una segunda copia impresa si quieres, si quieres, que puedan acceder a ella en cualquier momento. A lo mejor están en su teléfono. No tienen conexión a Internet, pero sólo quieren revisar rápidamente algunos de estos archivos, y podrán hacerlo porque lo exportaste como otro archivo. Por lo que ya sea Jay Peak, PNG o pdf en el siguiente video. Te voy a mostrar rápidamente estructura de empaque y cómo puedes empaquetar tu archivo al para la entrega del cliente. Entonces te veré allí 34. Estructura de empaque: en este video. Yo solo quiero mostrarles mi estructura de empaques. Podrías tener tu propia estructura. Realmente no importa. Lo importante es que necesita ser fácil para el dedo del desarrollador. ¿ Entiendes? Porque dentro de esa estructura que creaste, desarrollador tiene toe acceda a ella y aprende instantáneamente dónde está todo solo para que acelere su proceso también. Por lo tanto, antes de crear su estructura de empaquetado, puede acercar un poco más. Nuestro caso es que puedes ver tenemos 10 pantallas diferentes y necesitamos crear 10 carpetas diferentes para cada pantalla. No importa si solo tiene un artículo dentro que necesita ser exportado. Todavía tienes que crearlos como están dentro de tu adobe x D. Así que así es como se ve. Entonces, como pueden ver, tenemos 10 carpetas diferentes aquí mismo, así como nuestra guía de estilo. Lo que también me gusta hacer es crear otra carpeta y llamarla facetas. Presiona enter porque dentro de esa carpeta vamos a exportar iconos de nuestra guía de estilo , y así es como lo vamos a hacer para que puedas ir pantalla por pantalla y luego exportar todas estas imágenes. Y para estas imágenes PNG, lo que puedes hacer es exportar un fondo para que no tengas que exportar cada fondo. Porque si recuerdas, estos tres son exactamente iguales. Por lo que puedes exportar solo un fondo y luego exportar estas tres imágenes s PNG's. Se puede exportar esta imagen. Se pueden exportar estas tres imágenes así como esta imagen final, que es para video. Pero vamos a conseguir que el dedo exporte en un video posterior. Eso es todo para esta estructura de archivos. Solo quería mostrarte cómo puedes organizarlo antes de enviarlo al desarrollador y al cliente en el siguiente video. Te voy a mostrar rápidamente cómo puedes compartir este prototipo con tu cliente, cómo puedes obtener retroalimentación, cómo puedes trabajar con ellos y cómo puedes hacer algunos cambios rápidos y actualizar ese proyecto y ese prototipo antes de enviar de nuevo a reclinado para revisiones adicionales. Entonces te veré allí 35. Comparte con el cliente: Entonces vamos a compartir nuestro prototipo con nuestro cliente, y puedes acercar aquí mismo. Dice Prototipo. Haga clic en la casa, que es su primer salto de pantalla dentro de su prototipo y solo haga clic en este botón de compartir justo aquí. Puedes invitar a la edición de dedo, lo que significa que puedes invitar a otro dedo del diseñador. Edita este archivo, lo que significa que los vas a enviar al archivo, lo cual no te recomiendo si no eres parte del equipo o si el cliente aún no te ha pagado , así que si lo hicieron, puedes enviarles este archivo, obviamente. Pero si no lo hicieron, realmente te recomiendo que no les envíes ningún archivo antes del pago que puedas compartir para su revisión, que es lo que vas a hacer. Puedes compartir para un desarrollo, que es que puedes compartir para que tus desarrolladores vean todo, qué es la perspicacia y vas a hacer clic en compartir para el desarrollo al final de este proyecto . Entonces cuando el cliente está de acuerdo con todo, no tienen más cambios. Revisiones, y necesitas enviarles el archivo para que sean desarrolladores puedan acceder a él. Entonces puedes hacer clic en compartir para el desarrollo. Poco genera un enlace de la misma manera como compartir para revisión, y luego desarrollador puede acceder a él en línea en cualquier lugar y desde cualquier dispositivo. Simplemente necesitan la conexión a Internet, obviamente, para poder ver cuáles usar, qué colores usaste. ¿ Qué imagen emite espaciado entre cada uno fuera de los elementos izquierda derecha? Detener fondo en el medio. Todo está ahí para ellos, todo está disponible y pueden,por supuesto, por supuesto, utilizar este archivo de adobe xz final para acceder a él y comprobar manualmente si se alinea con este recurso compartido para pantalla de desarrollo. Por último, contamos con enlaces gestionados, los cuales podrás gestionar tus propios enlaces. Entonces si estás usando versión gratuita fuera de Adobe X'd, solo tienes un enlace activo que puedes compartir con tus clientes o, si estás usando versión de pago, ofreciste obesidad. Entonces si tienes suscripción a Adobe Creative Cloud, tienes un número ilimitado de enlaces fuera, y ahí obviamente puedes seguir adelante y eliminar enlaces innecesarios. Puedes editarlos y así uno. Por último, tienes un video de grabación si quieres grabar un video, cual luego podrás compartir con tu cliente para que puedan ver el proceso antes de que obtengan el prototipo, en el que pueden hacer click obviamente, o si cuando reciban los expedientes finales. Entonces hagamos clic en compartir para revisión y no te pueden encantar los comentarios. Puedes nombrar el proyecto aquí mismo. No vamos a hacer eso y molestar con ello, pero puedes tenerlo e incluir tu nombre de cliente aquí mismo y el nombre del proyecto muestra pistas Hot spot. Te recomiendo dejar esto propio porque entonces la gente sabrá dónde hacer clic dentro de tu prototipo mostrar controles de navegación, que serán los controles en la parte inferior de tu pantalla. Por lo que te recomiendo dejar el sol también, abriendo pantalla completa. No lo recomiendo porque la gente a veces se confunde con él porque no saben qué hacer y finalmente requieren contraseña. Puedes crear un posible para este prototipo si no quieres que alguien acceda a él sin ninguna contraseña. Y cualquiera con el Lincoln View o solo personas invitadas puede ver si haces clic ahí mismo . Después puedes enviar a algunas personas e correos y acaba de introducir direcciones de correo electrónico y enviarlas a esas personas. Cuando termines con todo lo que puedas golpear, crea un enlace y empezará a crear tu enlace y dependiendo de lo grande que sea tu proyecto y fuera de tu conexión a Internet. Así de rápido va a generar este enlace para ti. Entonces cuando generó el enlace, si realizas algún cambio, puedes golpear justo aquí donde dice actualización, y se va a actualizar el enlace. Se puede copiar, enlazar o copiar en mal código. Si quieres ponerlo dentro de tu sitio web, por ejemplo, y para verlo, simplemente puedes hacer clic aquí. Si un salto atrás rápidamente, puedes presionar link copy y obviamente compartió ese enlace con tu cliente. Pero cuando hagas clic ahí, solo ten en cuenta que tardará algún tiempo en cargarse, sobre todo si tienes ah, mucho fuera de las pantallas. Ahora tenemos 22 pantallas porque siempre digo que creamos algunas pantallas adicionales para este proyecto. Pero si solo has tendido, por ejemplo, se cargará mucho más rápido. Y también depende mucho de tu velocidad de conexión a Internet, por lo que obviamente puedes hacer clic aquí y ver todo lo que hicimos. Todo funciona bien y puedes hacer clic aquí en la parte inferior, por lo que estos son controles inferiores, y cambiará entre todas y cada una de las pantallas que creaste, y los clientes también podrían hacer eso. Entonces digamos que están en esta pantalla, por ejemplo, y quieren dejar tu comentario. Simplemente pueden colocarse en lo que quieran para dejar tus comentarios. Entonces, por ejemplo, en esta tarjeta de crédito y dan, escribe algo como Cambiar color, Grady Int o Changed Radiant de esta tarjeta. Eso es correcto. Eso y cuando estén terminados, simplemente pueden hacer clic en enviar. Y, como se puede ver en el pago una pantalla, cuál es esta pantalla? Tenemos este comentario para que siempre salten de nuevo a la primera pantalla y dejaron tu comentario. Se puede ver aquí mismo. Está bien, está en la pantalla de pago uno. Pero, ¿cómo puedo acceder a ella? ¿ Cuál es esa pantalla? Simplemente haz clic aquí, y te llevará directamente a esa pantalla. Y si tienen muchos, qué es lo que van a hacer, sobre todo al principio, Fuera de cada proyecto y luego los puntos calientes se hacen cada vez más pequeños a medida que avanzas. Simplemente puedes hacer click justo aquí, y te mostrará o haz click justo aquí, y te mostrará justo aquí. Entonces eso es todo. Básicamente, pueden hacer click a través. Pueden ver todo, cómo se ve y puedes ver todos los comentarios aquí mismo. Puedes ocultar comentarios si quieres ver un modo de pantalla completa, y también pueden acceder al modo de pantalla completa ellos mismos. Si los dejas una vez más, puedes invitarlos a editar dedo del pie. Puedes enviar correos electrónicos a las personas que quieras ver tu prototipo. Y como dije, todo funciona como debería. Como se puede ver aquí mismo, pesa un segundo. Se actualiza el precio. Se puede proceder al pago. Puedo seleccionar este. Se puede ver sombras sueltas aquí mismo, hacer un pago. Esperará y luego volverá aquí. Entonces todo es como pretendíamos que fuera. Todo funciona correctamente, y eso es Adobe X, el share a bowl características. Y me gusta mucho esto porque puedes llamar a un comunicarte con tus clientes directamente a través de esto para que no necesites ningún sitio externo. Entonces, por ejemplo, 99 diseños, por lo que tienes que pagarlos para cobrar solo para poder comunicarse con tus clientes. Además, es mucho más agradable a la vista. Es mucho más sencillo que comunicarse a través de Gmail y simplemente enviarles imágenes. Entonces, como se puede ver aquí mismo tenemos 22 imágenes. Entonces solo imagina lo grande del ajetreo que es enviar 22 imágenes a tus clientes. ¿ Cuánto tiempo necesitan para hacerlo lo encuentran organizado o desorganizado? ¿ Sabes a qué me refiero? Entonces básicamente, esta es una adición fantástica. Toe adobe una ciudad solo porque puedes hacer todo lo que necesites al revés, uno arriba y dentro de esta pantalla. Por lo que cuando te dejan comentarios y los comentarios, puedes seguir esos comentarios. Trabajo de vuelta a Adobe X'd. Puedes saltar de nuevo al diseño, hacer cambios rápidos, saltar de nuevo al prototipo click share una vez más, y puedes compartir para revisión y simplemente actualizar el enlace y luego copiar enlace y enviarles ese nuevo enlace. Entonces si salto de esto y hago clic en compartir una vez más, puedes compartir para desarrollo y puedes exportar para compradores Incluir activos para descargar por lo que todos estos activos serán incluidos. Todos los activos son imágenes, iconos, iconos, estos antecedentes, por lo que cada cosa que puedes requerir una contraseña y puedes hacer clic en crear un enlace. Ahora los desarrolladores podrán acceder a él exactamente de la misma manera que los clientes votan, por lo que sólo podrán medir. Por ejemplo, distancia entre este logo y este ícono de menú distancia entre aquí y aquí por lo que podrán hacer eso todo en línea, y podrán generar cada cosa que necesiten para descargar directamente de ahí. Pero seguimos yendo a los activos de exportación para ellos. Por lo que tienes desarrolladores que están confundidos con este proceso. Tienes desarrolladores que nunca se enteraron de los huevos de adobe, D o sketch o algunas de estas otras herramientas que trabajan, generalmente con para callar o simplemente básicamente con algunas imágenes básicas en el pasado. Por lo que tienes todo tipo de desarrolladores, lo mismo como tener todo tipo de diseñadores, así que tienes que aprender a trabajar con todo el mundo. Entonces si no saben cómo hacer esto, comparte para la función de desarrollo en el D. de Adobe No te preocupes. En el siguiente video, vamos a empezar a exportar nuestros activos, empaquetarlos y prepararlos para desarrolladores. Entonces, no importa quién sea tu desarrollador, vas a poder trabajar con ellos porque tienes la estructura de empaques en su lugar. Entonces te veré allí 36. Exportación de recursos: Empecemos ahora a exportar nuestros activos. Y eso es lo que me gusta esta guía de estilo porque creamos todo lo que necesitamos aquí mismo, y simplemente podemos seleccionarlo todo. Pero haga clic en el toque de diseño primero, así que selecciónelos todos. Hit control E y para el archivo usado SPG styling presentation en qué o CSS interno conjeturas con tu desarrollador lo que quieren, Pero suelen usar atributos de presentación para que todo como se presentó, puedes consultar a la derecha aquí si quieres que tu talla optimice pero antes porque este SVG ya está optimizado puntera. Se puede escuchar el cambio aquí mismo, y quiero seleccionarnos. Es carpeta, seleccionar carpeta hit, Exportar y listo. Y si un salto de nuevo a mi carpeta saltando activos del dedo del pie, se pueden ver iconos aquí mismo, y se va a seleccionar todos estos iconos, que están dentro de esta carpeta, y crearlos como uno. Y si no lo quieres, puedes golpear a la élite, y puedes ONU agrupar esto y luego con ellos seleccionados así puedes golpear control E S V. G y golpear exportación una vez más. Y si un salto de nuevo a nuestra carpeta. Ahora se puede ver que todos son activos separados como así, por lo que no se puede tener de ninguna manera. Pueden copiar el código directamente del archivo SPG si así lo desean. Pero si quieres, puedes hacerlo así también. Así que solo habla con ellos y aprende qué es más fácil de usar para ellos. Entonces, ¿es un archivo, o es archivos separados ahora porque los extrajo todos y los exportó a esta carpeta separada? Porque no tenemos otros iconos adicionales que no exportamos? Simplemente puedes usar este activo fuller y no exporte ningún otro ícono de cualquiera estuviera en tu diseño. Entonces básicamente, has terminado con tus iconos con solo crear esta guía de estilo, y creo que es una adición fantástica y solo mejora tu velocidad masivamente mientras estás trabajando. A continuación, usemos la pantalla de inicio para que puedas seleccionar esta imagen. Por ejemplo, hit control Comando E Judíos Jay Pek desde aquí localizan la carpeta de inicio. Entonces aquí está, aquí mismo. Selecciona la carpeta hit export, y lo que queremos es abrir esto y puedes seleccionarlo como EMP social, una lámpara para aterrizar tres hit control ser y lo que queremos sp lesiones Debido a que estos eran originalmente hit export y puedes cerrar todas estas carpetas arriba si quieres. Solo quieres exportar un fondo para que él lo controlara Y puedes exportar esto como un JPEG así que golpeó exportación y lo va a reemplazar porque este 1er 1 es nuestra imagen. Entonces vamos a cambiar que Esta va a ser nuestra imagen de héroe como tanto lo siento hizo un typo como este control e j pic export y puedo saltar a nuestra carpeta, localizar el hogar Aquí está, y simplemente eliminar este porque necesitamos esta imagen así . Así que da click justo aquí hit control E J Peg Export Y ahora se va a exportar esto porque necesitamos este gran fondo incluido también, siguiente arriba combinaciones de habitaciones. Por lo que tienes sala, recámara, cocina, selecciona los tres y no necesitas dedo del pie seleccionar imagen porque ya la seleccionamos. Por lo que tenemos imagen, imagen e imagen. Ahora puedes seleccionar así y escabullirte así basado en así, y enfrentarlo porque reemplazó el nombre de la imagen una vez que fue Mezquita con esta imagen. Por lo que simplemente selecciónalos. Kid Control E J Peg exportación. Y por último, vamos a seleccionar este último, que es un control de video e hit export. Y ahí estás. Entonces, como se puede ver, es realmente fácil exportar dedo del pie todas estas imágenes. Ahora, lo que tenemos justo aquí son estos sofás, por lo que siempre puedes abrirlos todos. Entonces así para uno, así para dos. Y también puedes seleccionar una de estas imágenes de fondo. Entonces para tres, y simplemente mantenga presionada la tecla de comando de control. Seleccionarlos todos como para que hubiera controlado E y luego cambiar justo aquí. Y a esto se le llama pantalla de categoría. Tan ubicado justo aquí. Select folder hit X y no J Peg, sino PNG porque todos ellos ver PNG hit export va a exportar todas esas imágenes. Y como puedes ver, es bastante fácil moverse entre estas pantallas para que puedas seleccionar ambos de estos círculos o solo uno porque son exactamente iguales. Puedes elegir materiales y elegir el marco circle hit control E, y puedes exportarlos como PNG, por ejemplo, por ejemplo, pero está en la pantalla de filtro de búsqueda, así que solo asegúrate de que toe exporta todo correctamente. Por lo que los filtros de búsqueda seleccionan carpeta exportar y se puede exportar. ¿ Eso qué? Ahora, cuanto a los botones, puedes exportarlo de dos maneras para que puedas exportar el fondo como lo es ahora. Entonces Controla e y puedes exportarlo como un PNG así, O puedes exportar la parte inferior sin ningún texto sobre ella. Por lo que realmente depende de ti y de desarrollador decidir cómo quieren toe incluir todo esto Siguiente arriba tenemos combinaciones de habitaciones, por lo que controlaría E para exportar esta imagen y podemos usar J pack para ello. Por lo que nuestra propia pantalla de combinación ubicada aquí mismo de combinaciones seleccionar y exportar. Lo que necesitamos aquí mismo es este sofá así que controla e, podemos usar P y G export. Lo que también necesitamos son estos colores, así que selecciona los tres colores. El control E P y G está bien. Se puede exportar esta tarjeta BG por lo que controlar e exportado PNG y también se puede exportar esta lámpara si quiere tan ubicado aquí mismo controlar e p y G export. Y ahí tienes, Has terminado porque copiamos y usamos estos colores en ambos casos. Entonces pasemos a la pantalla de artículos seleccionados y lo que queremos aquí mismo es exportar fondo de barco así como imagen, para poder exportarlos a ambos. Este PNG Control E y se puede cambiar este elemento para ser seleccionado como esta carpeta selecta PNG exportar. ¿ Qué? También queremos nuestros estos colores. Así que selecciona tus colores así, que seguramente s PNG. Eso está bien. Y por último, lo que queremos son estas dos imágenes. Por lo que esta imagen así como esta imagen esta va a ser imagen número uno. Imagen número dos, seleccione ambos controlan E BMG Export. Y no los necesitamos dentro de la otra carpeta. Simplemente puedes copiar todo hacia abajo y basarlo hacia fuera. Pero quiero hacerlo sin embargo. Entonces usemos la imagen de héroe. Por lo que héroe silla principal, control de imagen E S B y G acaba de cambiar una carpeta porque este es el elemento seleccionado ajustado. Aquí está. Selecciona la carpeta de exportación y lo que queremos son estos colores. Así que abre la carpeta de color y ahora puedes ver las ventajas fuera de estas carpetas y organizando todo correctamente porque puedes ver cómo funciona esto Bueno. Y como pueden ver, estamos apenas ocho minutos y cuánto terminamos hasta ahora. Por lo que realmente puedes trabajar con él mucho más fácilmente. Entonces controlando para el botón. Y por último, porque lo hicimos antes de la imagen uno y la imagen a para que puedan acceder fácilmente a ella dentro de esta carpeta también. Y vamos rápido adelante y terminemos con todo lo demás. Entonces aquí mismo puedes seleccionar un fondo, por lo que controlar y cambiar la ubicación. Por lo que estos son los detalles del pedido como así haz clic en seleccionar carpeta exportar y puedes localizar estas imágenes. Entonces abre tus carpetas, así silla principal. Por lo que para una lámpara un control E PNG exportación, necesitamos exportar a este fondo también. Control e como así Y finalmente necesitamos exportar este marco. Entonces, ¿cómo podemos hacer eso? puede localizar el marco, Así que aquí está, aquí mismo, y se puede exportar y simplemente golpear control E s B y G exportación. Y lo colocarán como lo hicimos ahora. Pero en el código al lado del otro, y tienen estos iconos en el texto del panel de activos que no exportamos. También puede exportar el texto si lo desea. Pero me pareció que no es necesario porque es una pérdida de tiempo y de todos modos usarán el texto en el abrigo. Posteriormente. Para esta pantalla, saltemos dentro de los pagos de cambio de Control E P y G ubicados donde está justo aquí. Seleccione la carpeta y exporte. Por lo que cometí un ligero error. Vamos a ubicar el pago y exportamos toda la pantalla, cual puedes hacer si quieres. Y te voy a mostrar al final cómo puedes hacer eso también. Pero por ahora, queremos seleccionar al Craker, queremos seleccionar personas y quiere, como el control de fondo E BMG pago exportación. Y rápidamente solo verifiquemos dos veces si es como debería ser. Entonces si abro esta gran tarjeta, se va a abrir el dedo del pie en mi visor de imágenes aquí mismo. Y si lo arrastro a la pantalla, lo puedes ver. Guárdalo como PNG con ah, fondo transparente y una sombra. Pasemos a las ubicaciones de inicio. Controlar e cambiar entrega archivos ubicaciones de la tienda Seleccione la carpeta Hit export va a exportar toda la pantalla. Así que las ubicaciones de las tiendas con creen que realmente rápido Y lo que queremos de aquí es el mapa. Por lo que controlar e exportación PNG. Y por último, lo que queremos es este fondo ya que está tan ubicado justo aquí. Por lo que direcciones como así controlan e como ser G porque podrían querer usarlo también, así como esta tarjeta BeeGees y controlar la exportación E y este fondo stop. Por lo que controlar e exportación PNG. Y ahí tienes. Hemos creado todo excepto esta pantalla de menú y dentro de ella. Por lo que solo puedes localizar el control de fondo de BG Cambio de E. Encuentra la carpeta de menús aquí mismo. Aquí está. Selecciona la carpeta hit export Porque solo queremos que este fondo se exporte desde aquí . Ha explicado antes ya tenemos preparado el ícono del sexo. Entonces eso es todo para los activos exportadores, parte fuera del discurso. Y una última cosa que quiero mostrarte es cómo puedes simplemente seleccionar todo su control de hit . Una vez más. Puedes usar PNG, pero voy a usar Jay Peak, cambiar los archivos de entrega de carpetas y simplemente entregarlos para escuchar hit export, porque de esta manera va a ser más fácil para tus clientes como lastre tus desarrolladores tomar un miren las pantallas tal como están. Y también puedes saltar dentro de todas y cada una de las carpetas y extraer este diseño en esa carpeta en particular. Ahora bien, si tienes más de una talla, así que este es para el iPhone 10 y 10 s. Pero si tienes, por ejemplo, para tenis Max o para cualquier otro dispositivo para incluir en el futuro, entonces puedes crear una carpeta. Entonces déjame saltar rápidamente. Asegúrese de que así dentro de esta carpeta de ubicaciones de la tienda, por ejemplo, pueda tener estos activos en diferentes carpetas, que cada carpeta pueda tener subcarpetas, por lo que las ubicaciones de las tiendas tendrán subcarpetas para el iPhone 10 y tenis, luego otra carpeta para iPhone. Tenis en tenis, Max y así sucesivamente y así sucesivamente para que puedas tener tu organización No me gusta eso. Por lo que una vez más, tienen los activos, que contiene todos los iconos. Tienen 10 carpetas diferentes para 10 pantallas diferentes, y tienen los activos dentro, y finalmente tienen pantallas de Jay Peak aquí mismo. Entonces si hacen doble clic en alguno de ellos. Simplemente pueden abrirlos y simplemente mirarlos como están aquí mismo. Entonces eso es todo para la parte de activos exportadores. Y en el video final fuera de este Siri. Yo quiero mostrarles cómo condensan un paquete, todo, y se lo entregan a un cliente, así que los veré ahí. 37. Entrega al cliente: Entonces, cuando hayas terminado todo, recibiste tus comentarios. Hiciste tus cambios. Empaquetaste todo como debieras. Todo está en el orden correcto. Ahora ha llegado el momento, Tofino, finalizar este proyecto y enviarlo al cliente. Por último. Entonces, ¿cómo puedes hacer eso? Simplemente minimice esto. Voy a cerrar esta carpeta. Aquí están, nuestros archivos de entrega. Por lo que dentro debes tener todas las carpetas que acabamos de crear en video anterior. Y también debes tener tus huevos de adobe desfilados dentro. Lo que también debes tener es algún tipo de archivo de texto fuera. Por lo que es o simplemente un archivo básico basado en texto en el que compartirás el enlace con tu cliente. Por lo que compartirás el enlace, por ejemplo, al único prototipo. Si quieres dedo del pie, créanlos, acceda a él un poco más de tiempo para que su desarrollador tenga el tiempo de crear todo correctamente. O si no quieres hacer eso porque solo tienes un enlace y tienes una versión gratuita fuera de Adobe X'd. No necesitas hacer eso porque ya vieron y confirmaron todo lo que puedes enviarles video walk. Si quieres. Pero si tienen Adobe X'd archivado y simplemente haga clic en vista previa y luego previsualice ese prototipo ellos mismos. Entonces realmente depende de ti cómo quieres estructurar eso. También dentro del archivo de texto, debes dejar los enlaces dedo del pie las fuentes. Por lo que usamos frente de sentido abierto y deberías dejarlo. Deberías dejar un enlace en el interior. Muy lo conseguí. Entonces si lo conseguiste de los teléfonos de Google, deberías enviarles ese enlace. Si lo dona de adobe forms, debes enviarles ese enlace. Además, cualquier imagen que solías haber usado muchas imágenes dentro de este proyecto, por lo que debes enviarles enlaces a esas imágenes solo para que puedas liberar tu espacio tow empaqueta todo y enviaste todo vía correo electrónico porque esa es la forma más fácil. Si es demasiado grande para el correo electrónico, puedes usar Dropbox. Puedes usar Google drive toe, subirlo ahí, y siempre te recomiendo empaquetarlos dentro del archivo zip. Por lo que dentro de las ventanas simplemente puedo hacer clic derecho en WinZip y agregar a los archivos de entrega. Al hacer clic derecho se va a empezar a empaquetar los archivos. Se va a empezar a preparar los archivos y se va del dedo Lo más importante fuera de todo el tamaño de esta carpeta, y va a ser fácilmente compartible para mí. Entonces si rápidamente arrastro esto hacia abajo, original era de 308 megabytes. Ahora es 294 Eso no suena como mucho, pero confía en mí cuando tienes dos o tres o 500 pantallas y las tienes en diversas resoluciones diferentes. Esto puede destrozar fácilmente hasta un gigabytes de tamaño, especialmente si estás enviando imágenes o algunas ilustraciones a nuestro cliente. Y esos realmente pueden acumular y aumentar drásticamente el tamaño del archivo. Por lo que siempre te recomiendo paquete de archivos dentro del archivo zip y haga clic en Aceptar, Y si lo arrastro aquí mismo, así es como se ve. Para que no envíes a este cliente valter. Envía este archivo a reclinado y condenaron descomprimirlo y utiliza todos los activos dentro tanto de su cliente como de su desarrollador. Entonces eso es todo para esta parte del curso. Muchas gracias por tomarse su tiempo, su dinero y su recurso es e invertido en el discurso dentro fuera. De verdad lo aprecio, Y de verdad espero que hayas aprendido mucho del discurso. Y en el siguiente video, vamos a saltar rápidamente o algunas conclusiones, una visión general de todo lo que hemos hecho en este marcador hasta ahora, y una vez más, muchas gracias. 38. Enlaces y recursos: y por último, quiero cubrir enlaces y recurso es así que aquí es un archivo pdf. Simplemente ábrela, y una vez que se cargue en tu pantalla, aquí está. Se puede ver cómo se ve todo, y aquí se puede descargar todo el recurso es el que se mencionó en el curso. Entonces, por ejemplo, aquí está el fondo abierto de ciencia. Puedes muñecas Oh, eso ya sea desde los teléfonos de Google o desde Adobe Fonts. Como mencioné en el curso, Simplemente haga clic aquí. Te mostrará este talek pop up click permitir para que puedas acceder a él en tu navegador de Internet . Cualquiera que sea el navegador que estés usando. Imágenes gratis que tienes vírgenes porque todas las imágenes son usadas son de un chapoteo. Pero también te proporcioné el sitio web de stocks, que es el sitio web básicamente para imágenes gratuitas. Iconos gratis gratis gratis simulan arriba, Así que todo lo que necesitas de forma gratuita está dentro de este el sitio de stocks. Y por último, si quieres, puedes acceder a mis otras clases y cursos ya sea en cuota de habilidad o en ya sabes, yo. Tengo más sobre ellos en cuota de habilidad porque fuera de los lados estructura, pero en un futuro voy a sumar más sobre ellos sobre ti, a mí también. Entonces gracias. Una vez más, verdad espero que disfruten de esta clase. Y realmente espero que disfruten de estos recursos es y que apliquen los conocimientos que ganaron en esta clase en su trabajo futuro. Cuídate. 39. Conclusión: felicitaciones. Has llegado al final de esta clase. De verdad espero que lo hayas disfrutado tanto como yo. De verdad espero que te salgas mucho violento de ello. Y tan realmente importantes consejos que te ayudarán en tu carrera de diseño y en tus futuros proyectos. Entonces este es nuestro proyecto final. Así es como se ve el archivo que vas a recibir. Entonces vamos a correr rápidamente a través de él y recordarnos lo que cubrimos en este curso. Entonces empezamos con el resumen de diseño y obviamente ya viste esto y recibiste estas plantillas. Puedes llenarlo para tus futuros proyectos. También cubrimos marcos de alambre imprimibles, que se pueden imprimir. Te mostré cómo puedes ordenarlos del dedo del pie, conseguir pocos, o para conseguir más pantallas para tus futuros proyectos y tus futuros dibujos de encuadre de alambre imprimibles . Y viste cómo algunos pequeños detalles realmente pueden mejorar tu velocidad y mejorar tu proceso. A continuación, cubrimos marco de alambre y te explicamos cómo puedes pedir algunos elementos simples reales como cajas y rectángulos, y realmente creamos algo que te ayudará a impulsar tu proceso de diseño hacia adelante cuando llegues a la etapa de diseño. Y hablando de etapa de diseño, en la que incluimos las diferentes imágenes, te mostré la diferencia entre las clavijas J de P y G. Cómo puedes incluir algunas sombras de gota diferentes, cómo puedes incluir colores en el último minuto. Entonces este tipo de procesos y este tipo de cosas van a suceder cuando empieces diseñar tus propios proyectos y en tus proyectos futuros, sobre todo con clientes más grandes, porque cambian de opinión todo el tiempo. Y, por ejemplo, les gustan los colores de estas tarjetas de crédito y cuentas PayPal. No importa. Puedes cambiarlos fácilmente. Y lo que es realmente importante es que viste cómo usar tu panel de activos aquí dentro de ti fuera de Adobe X'd. Realmente puedes cortar tu camisa de trabajo y aplicar esos colores y esos estilos a través de diferentes elementos en tus puertos. Y por último, al final, llegamos a una etapa de prototipado, y te mostré cómo puedes usar algunas transiciones simples y animaciones simples todo el camino hasta algunas realmente complejas y bonitas. Y te di algunos consejos y trucos sobre cómo puedes mejorar eso aún más adelante con tu propio proyecto y finalmente recuperé cómo puedes compartir tu trabajo con el cliente Heiken recibir feedback por ello, cómo puedes compartirlo con ellos en las etapas finales, así como cómo puedes compartir ese trabajo con los desarrolladores y cómo puedes hablar con ellos sobre tipos de archivos perfectos que necesitan para que acortes tu trabajo y puedas terminar el trabajo lo más rápido posible mientras proporcionando la más alta calidad posible según lo necesiten. Entonces de verdad, eso es todo. Muchísimas gracias. Una vez más por tomar esta clase, realmente espero que aprendas algo nuevo. De verdad espero que recojas algunos consejos y trucos aquí y allá. Y realmente espero que aplique al menos parte de ella en su trabajo futuro. Entonces gracias una vez más y te veo en el futuro curso. Cuídate 40. Canal de YouTube para obtener más contenido: Oye, aquí el diseñador Alex. Y yo sólo quería decir un rápido agradecimiento. Gracias por tomar el discurso, y de verdad espero que te haya sacado tanto valor como sea posible si quieres consultar más contenido. Hace poco lanzé mi canal de YouTube, donde exploré algunos temas que podrían interesar a diseñadores de freelancers toe técnicas de ingresos pasivos de diseño Web, diseño APP. Diseñas diseño UX. Entonces si te interesa alguno de esos temas, dirígete a mi canal de YouTube, vincula hacia abajo en el pdf, y simplemente puedes hacer clic ahí y te llevará a mi canal de YouTube. Si te gusta ese contenido, asegúrate de suscribirte y asegúrate de seguir, porque voy a tratar de ser realmente regular con ese canal de YouTube y subir tanto contenido como sea posible. Entonces gracias una vez más por tomar mi curso, y de verdad espero verte en mi canal Digger 41. Join a mi grupo de Facebook gratuito: Oye, diseñadora, realmente espero que hayas disfrutado del curso, y que sacaras tanto valor como sea posible de él. Si quieres recibir aún más valor de mi parte y de la comunidad del diseño, empecé un grupo de Facebook. Donde puedes unirte es solo un grupo de Facebook para mis alumnos solo para que puedas unirte haciendo clic en el enlace abajo orden. Nate fuera de curso es una cuenta de Facebook, y es un grupo gratuito al que unirse. El grupo se forma con el fin de brindarte retroalimentación adicional para que puedas adjuntar tus diseños siguiendo este curso y usando ejemplos de este curso o de cualquier otro fuera de mis cursos. O si tienes tus propios ejemplos. Off diseño funciona desde el pasado desde el presente. Puedes subir esos trabajos a Facebook Group y luego recibir comentarios ya sea para mí o de otros miembros del diseño. También te animo si tienes puestos de trabajo disponibles para compartirlos en ese grupo para que todos puedan beneficiarse de ese grupo. Una vez más, el grupo es libre. Es fácil unirse. Simplemente haga clic en el enlace en el pdf, y realmente espero ver a tantos de ustedes como sea posible en ese grupo solo para compartir nuestras experiencias como diseñadores, e intentaré publicar algún video adicional, algunos consejos adicionales y técnicas en ese grupo de Facebook. Pero por ahora, apenas estamos empezando. Simplemente vamos a formar su, y realmente los animo a que se unan y compartan allí su mejor trabajo. Para inspirar a otros diseñadores o dedo del pie pedir retroalimentación adicional. Tan solo asegúrate de que por favor, cuando estés pidiendo retroalimentación, pide cosas específicas. No sólo preguntes. ¿ Qué opinas de este diseño? Porque nadie va a responder a eso. O si lo hacen, están en lo de Lee. Te van a decir ¿Se ve bien o no se ve bien. Asegúrate de pedir comentarios específicos sobre tus diseños. Por ejemplo, haz como esta combinación de colores. ¿ Crees que debería usar un frente diferente? ¿ Crees que estas imágenes corresponden bien con el color de fondo, por ejemplo, cosas así, Así que asegúrate de pedir retroalimentación específica cuando tus diseños, porque va a ser mucho más fácil para mí y para otros diseñadores de ese grupo para darte son retroalimentación específica que puedes mejorar mucho más rápido, entonces solo preguntando qué? Todo fuera de este diseño. Entonces gracias una vez más por tomar mi curso, y de verdad espero verte a la vista fuera de mi grupo de Facebook Digger.