Diseño de interfaz de usuario y web con Adobe Illustrator CC

1. Introducción: Hola ahí. Mi nombre es Dan y soy instructor certificado por Adobe para Illustrator. En esta serie de videos, vamos a utilizar Adobe Illustrator para construir juntos un proyecto de diseño Web y UI. Usaremos unos proyectos del mundo real. Empezaremos con nuestro portafolio. Ya conoces el portafolio, el que has estado planeando construir para siempre, pero no has llegado hasta ahí. Vamos tú y yo a construir eso ahora juntos. He hecho este curso para principiantes. Realmente no necesitas ningún conocimiento previo de Illustrator ni ninguna otra experiencia de diseño. Empezaremos con los súper básicos. No importa si quieres usar Illustrator para el diseño de aplicaciones o web, las técnicas son las mismas. Pasaremos por el proceso completo de la interfaz de usuario. Te mostraré cómo usar Illustrator para construir sitemap y luego crear tus primeros wireframes. Después comenzaremos a diseñar nuestro sitio de tablet móvil y escritorio utilizando fuentes de sitios web, colores e imágenes receptivas. Crearemos nuestros propios iconos y logotipos personalizados, aprendiendo a usar la herramienta Pluma y la increíble herramienta Shape Builder. cuando terminemos, sabrás exactamente lo que se espera de ti como diseñador de UI, entregando imágenes de retina receptivas y código CSS para que tu maravilloso diseño web se reproduzca perfectamente como sitio web. Al final de esta serie tutorial, hay un proyecto. Tiene tarea establecida que debes hacer para un cliente en forma, y puedes usar esto como parte de tu cartera para ayudar a construir eso. Es como la tarea, excepto que lo voy a llamar desarrollo portador. Es hora de actualizar tus habilidades, conseguir ese mejor trabajo e impresionar a tus clientes. No lo sé, simplemente empiezan a saludar cuando empiezo a hablar, como si estuviera en un musical. 2. ¿Soy un diseñador UI UX ahora?: Ahora la pregunta es, después de este curso, ¿voy a ser un diseñador UX slash de UI? Se ve por todas partes, van de la mano. Son cosas muy diferentes. Después de este curso, se puede decir: “Sí, soy diseñador de UI”. Puedo construir interfaces de usuario, como sitios web que iban a estar haciendo, y diseño de aplicaciones que es interfaz de usuario. Sí. Utilizamos herramientas como Illustrator, entre otras que potencialmente podrías usar para ser diseñador de UI. Ahora en cuanto a la UX, experiencia del usuario, eso es un hervidor de pescado totalmente más grande o algo diferente. Usarás el diseño de la interfaz de usuario como parte de ser un diseñador de UX, pero hay muchas otras cosas que hacen de un diseñador de UX. Hay mucho más alrededor como establecer objetivos, hay investigación, hay pruebas, y luego está pasando por toda la fase de construcción de un proyecto también. Ahora no vamos a cubrir el diseño de UX en este curso. Tengo un completo otro curso sobre ser diseñador de UX, así que ve a ver eso. Esto se está centrando más en la interfaz de usuario, que es parte de UX, pero no todo el asunto. 3. Diseño de interfaz de usuario, Photoshop vs. Illustrator vs. Sketch vs. InDesign vs. Adobe XP: En este video, vamos a hablar de qué productos hacen qué, porque Adobe tiene muchos de ellos. También hay algunos otros competidores sobre la web en el diseño de la interfaz de usuario. Hablemos de los principales productos de Adobe. Hablaremos de InDesign versus Photoshop versus Illustrator, cuál deberías estar usando. El que debes estar usando es Photoshop o Illustrator. Photoshop tiene un poco de ventaja sobre Illustrator, principalmente para mí es algo llamado vista previa del dispositivo. Si tienes habilidades de Photoshop, tengo un curso completo de Photoshop, es exactamente como este Illustrator 1 haciendo diseño web de UI, así que ve a ver eso. Pero estamos aquí para aprender Illustrator. Photoshop tiene la ligera ventaja para el diseño especialmente web sobre Illustrator, pero no lo suficiente para decir que no uses ninguno de ellos, ambos son bastante impresionantes. Illustrator lo vamos a ver este curso completo, y es perfecto para web y UI, pero también te da habilidades en cuanto a diseñar logotipos y símbolos. Mucha gente aprenderá Illustrator porque tiene doble propósito. Se llega a usarlo para un montón de cosas diferentes, así como impresión, así como web. Hablemos de InDesign. InDesign sería un no-go para mí. Puedes hacer diseñador web, hay un archivo, un nuevo documento, y puedes escoger algunas características web, pero le falta tanto de las golosinas que te ayudan a desarrollar UI para web y apps que lo usaría si eres alguien que solo tuviera InDesign habilidades, el problema con él es que no podías conseguir un trabajo como diseñador web usando InDesign. Entonces sí, InDesign le falta demasiado las características. Es sólo para documentos. Es más como una versión grande de Word. El siguiente grupo de ellos es algo llamado XD, Experience Design de Adobe , es nuevo, sigue en vista previa, es realmente genial, pero sigue en vista previa y le falta muchas características. Lo he usado un par de veces y es realmente bueno, pero aún no es como un producto de producción completa. Sigo usando cosas como Illustrator y Photoshop, mientras que XD eventualmente, siento que será el producto a estar usando para diseño web tal vez. Eso definitivamente es uno que se enfoca mucho más en el desarrollo de aplicaciones que en la web. Creo que ese será su hogar. Será para desarrolladores de aplicaciones o diseñadores de aplicaciones. Cosas como Illustrator y Photoshop se quedarán para la comunidad de diseño web. El último producto del que hablar es algo llamado Sketch. Está fuera del reino de Adobe. Es otro producto que compite. El producto con el que más compite es Experience Design Adobe XD, porque se trata más de un diseño de app. Si ahora fuera a ser un propietario completo de Adobe haciendo aplicaciones, estaría asegurándome de que mis habilidades de Sketch también fueran bastante buenas. Puedes hacer todo en Illustrator, está totalmente bien, tus desarrolladores de apps no lo van a odiar, pero Sketch está bastante en este momento en cuanto a buscar empleo. Por lo que Sketch es un producto bastante genial para usar, pero es específicamente para app. Puedes usarlo para web, no es problema con eso, pero siento que Photoshop e Illustrator son mejores en hacer esas cosas web. Hay muchos productos más maduros y tienen un montón de otro margen para hacer otras cosas. Sketch es simplemente realmente específicamente para el diseño de aplicaciones y web, mientras que estos otros dos productos tienen mucho más alcance en cuanto a otras cosas que puedes hacer con esas habilidades. 4. ¿Cuál es el papel de Illustrator en el diseño de un sitio web?: Entonces, ¿cuál es el papel de Illustrators en todo este negocio? De acuerdo, así que como diseñador web, podrías decidir terminar en los límites de donde se detiene Illustrator, y lo que se esperaría que hicieras, digamos que eres el diseñador, tendrías que trabajar con el desarrollador o diseñador web, o diseñador web front-end, alguien que hace el HTML y CSS porque propio ilustrador no hace realmente un sitio web. Lo diseña, el look and feel, consigue todo en la posición correcta, los colores, las fuentes, y lo usamos como plantilla para construirlo en código. De acuerdo, ahora, ahí es donde podrías terminar. Podrías simplemente entregar al final aquí. Si fuera tu diseñador web, estaría esperando un montón de JPEG, PNG, y SVG, así que solo imágenes. Yo estaría queriendo que me dijeras qué fuentes son, qué colores son, cuáles son los tamaños, cuáles son las cajas de colores, qué tan lejos están el uno del otro. Estaré queriendo esa cosa y eso viene de ti a mí como CSS, y vamos a ver en este curso cómo se hace eso. De acuerdo, así que podrías decidir ir un poco más allá y quieres hacer todo el proceso de diseño web. Lo que haré es darle vuelta a este diseño en particular que estamos haciendo aquí en Illustrator y en realidad lo construiremos también en Dreamweaver, solo para que sea una bonita serie completa. Entonces si estás más basado en la impresión y si solo quieres quedarte de ese lado, ilustradores donde terminas. Pero si quieres seguir un poco más y tal vez conseguir un poco de introducción al código, tal vez no sea tan aterrador como piensas, espero, lo muevas a algo como Dreamweaver y construyes el sitio completo en eso. Entonces ese es el papel de Illustrator. 5. Descarga los archivos de los ejercicios, los archivos completados y la hoja de trucos: Está bien. Lo primero que tenemos que hacer es conseguir los archivos de ejercicios. Habrá un enlace en la descripción o en los sitios aquí en alguna parte. Podemos salir y conseguir los archivos de ejercicios, y son solo las imágenes que vamos a usar, cualquier texto que utilicemos, cualquier recurso de que hable. Entonces descarga esas, y la otra cosa que va a estar ahí en cada video específico, habrá un enlace a algo llamado el archivo completado, y solo significa que cuando estamos haciendo algo en un curso, cuando llegue al final, voy a golpear” Guardar”, y lo pondré en una carpeta especial, y le pondré el mismo nombre que ese video para que si lo estás haciendo y el tuyo no se vea igual, puedas descargar mi versión, comprobarla, abrir Illustrator y ir, “ Ah, así es como lo ha hecho”. Entonces solo comparas esos dos, se llaman archivos completados y solo están en videos donde realmente hago algo. El último es la hoja de tramposos. El chuleta es algo que hago y habrá un enlace en la pantalla sobre aquí, Taylor, ve, y puedes ir ahí y es un PDF descargable, imprímalo. También hay una versión de video, compártala y es solo esa cosa. Una vez que termines este curso, estarás como: “Ahora estoy bien. Yo quiero ir más rápido, cuáles son todos los atajos”. eso es esa pequeña hoja de tramposos. Ve y descarga todo eso y luego nos pondremos al siguiente video. 6. Cómo preparar tu espacio de trabajo y las preferencias de Illustrator para el trabajo de interfaz de usuario: Hola. En este curso, lo que vamos a hacer es mirar a configurar nuestro Illustrator para trabajar con diseño web y de aplicaciones. Hay un par de cosas que necesitamos cambiar causa el momento por defecto, cuando lo instalas y mientras lo usas, es asumiendo que estás tratando con cosas basadas en la impresión. Por lo que está usando mediciones físicas y como milímetros, centímetros o pulgadas. Entonces tenemos que irnos y cambiar algunas cosas. Lo primero que vamos a hacer es abrir un nuevo documento. vamos a Archivo Nuevo y hay mucho a lo largo la parte superior aquí vamos a la Web y vamos a empezar con Common y sólo tienes que hacer clic en “Crear”. Enfriar y lo que va a pasar es que va a pasar por defecto a unas cuantas cosas que necesitamos cambiar. Entonces para hacerlo, vamos a Illustrator CC y vamos a Preferencias y vamos a entrar primero en Unidades. Si estás en un PC, está bajo Editar preferencias, por lo que su Editar y todo el camino abajo aquí dirá Preferencias. Entonces bajo Mac, está aquí y vamos a ir a Unidades. Esto es lo primero que hay que cambiar, es General, tuyo probablemente se va a establecer en Pulgadas si estás en América y si estás cualquier lugar que no use pulgadas se va a establecer en Milímetros o Centímetros. Tenemos que cambiarlo a píxeles. Esa es la medición que usamos cuando estamos tratando con el diseño de la interfaz de usuario, Vamos a elegir Pixeles. Igual con el trazo, se ocupa de los puntos tradicionalmente pero necesitamos lidiar con los píxeles y lo mismo con el Tipo. Las fuentes están diseñadas para usar tamaños de píxeles en lugar de, no están lejos, los píxeles y los puntos no están tan lejos en cuanto a las mediciones, sino que usan píxeles. Está bien y vamos a dar click en “Ok”. Otra cosa que tenemos que hacer es que nuestros documentos sean configurados de la misma manera en cuanto a nuestro espacio de trabajo. Se puede ver aquí el mío está todo mezclado porque he estado metiendo con él. Lo que tienes que hacer es ir arriba aquí, ir a la ventana, ir al espacio de trabajo y el tuyo probablemente esté configurado en Essentials y se ve algo así, pero vamos a ir a Ventana, ir a Workspace y vamos a configurarlo en Web como era de sorprender, no como era de sorprender. Se puede ver si el tuyo sigue mezclado como el mío, lo que podemos hacer es volver a la Web, y veo esto es Web pero vamos a decir Reset Web por favor. Lo que hace es que lo restablece, un espacio web, esta cosa siempre aparece y es un poco molesto, desaparece. Esa es la interfaz para asegurarnos de que la tuya se parezca a la mía, para que podamos seguir adelante. 7. Mapa de sitio vs. Wireframe: Oye, en este video, vamos a hablar rápidamente de lo que es un sitemap versus un wireframe. Esos dos se pueden mezclar cuando estoy hablando con la gente, así que es realmente fácil sólo mostrarte. Esto, amigos míos, es un mapa del sitio. Es como un diagrama de flujo de mostrarte qué páginas van a donde en tu sitio web. Un wireframe es una maqueta de tu página pero simplemente usando gráficos realmente básicos, por lo que los posicionadores para imágenes, los posicionadores para texto, y en realidad no estamos incluyendo el logotipo, solo escribiéndolo allí. Es solo para sacar ideas en algún tipo de orden sobre dónde podrían ir las cosas en lugar de trabajar en diseños y colores y fuentes de manera rápida. Esto es lo que se llama un wireframe, y esto es lo que se llama un sitemap. Vayamos al siguiente video. 8. Creación de un mapa de sitio en Illustrator: Oye. En este video, vamos a ver hacer un mapa del sitio. Ahora, podemos hacer esto en un par de programas. Te voy a mostrar cómo hacerlo en Illustrator porque es una clase de Illustrator, pero luego te voy a mostrar por qué no lo hago en Illustrator principalmente porque lleva tanto tiempo. Vamos a cerrar la sesión rápidamente. En primer lugar, hablemos de cómo lo hago tradicionalmente. Haré un Sitemap solo a mano en mi cuaderno. Ahora bien, si estoy lidiando con mi propio sitio, es solo a mano; eso es, se acabó el juego. Yo lo elaboro. Ahora bien, si lo estoy haciendo por un cliente, están esperando un mayor nivel de presentación así que lo haré ya sea en Illustrator o lo haré en algo llamado Muse, que te mostraré rápidamente en un segundo. Pero no hay una herramienta real específicamente para ello. Vamos a usar Illustrator para empezar. Vamos a ir a Archivo, Nuevo, y vamos a hacer, probablemente porque se va a imprimir y enviar al cliente, va a ser A4 y yo lo haré paisajista. Voy a crear, si tu en EU, ir a la letra. Todo lo que haces, no es particularmente emocionante, es herramienta de rectángulo agarrar. Voy a dar mi relleno ya sea blanco o un no relleno, y voy a poner una línea negra por el exterior. En cuanto al trazo voy a ponerlo en un píxel. El tuyo podría estar listo para apuntar quieto. No te preocupes, solo usa un punto por el momento. Vamos a cambiar eso en un poquito. Mapa del sitio es mostrar al cliente el flujo de la página web de dónde van a ir las cosas, cómo se va a estructurar. Entonces lo que puedes hacer es dibujar una caja y agarrar una herramienta tipo y dices que esta es tu página de inicio. Voy a centrar a estos dos juntos seleccionándolos a ambos, y arriba en la parte superior aquí tengo algunas opciones y ahí está esa ahí que dice centro. Ahora voy a dibujar mi siguiente página. Probablemente voy a mover eso un poco y voy a copiarlos y pegarlos. Entonces edita copiar, editar, pegar, voy a alinearlo. Este de aquí va a ser mi página de producto. Genial. Escribiré eso sobre usando mi teclado. Página siguiente, y se puede ver que es un poco monótono. No está tan mal, depende de lo grande que tenga que ser la estructura. Voy a entrar aquí y esta va a ser mi página Acerca de Nosotros. Probablemente debería centrar este texto para que sea más fácil, pero se te ocurre la idea. Ahora, necesito unirme a estos, y aquí hay una herramienta de segmento de línea. Ahora el tuyo podría estar escondido debajo de algunos de estos. Así que haz clic y mantén pulsado y agarra el segmento de línea. Voy a hacer clic en mantener y arrastrar. puede ver que se une a esos dos arriba. Este de aquí, es bastante bueno para alinear las cosas. Si lo tuyo no se está alineando, puedes ver el mío, tiene este precioso cruzado, todo esto como, ver estas líneas rosadas saltando por todas partes. Eso se puede activar y desactivar bajo vista, y hay uno llamado guías inteligentes. Entonces tengo eso encendido en este momento, se puede ver la mía aquí no es realmente dibujar una línea, se ve que queda ahí atrás. Es porque cuando empecé a dibujar, puedes ver que no tengo trazo, ni relleno, y eso te puede cortar. Entonces voy a conseguir mi flecha negra. Todavía los tengo seleccionados, y voy a decir, tú mi amigo necesita un trazo negro. Se puede ver que el trazo es el liner en el exterior. Este primero de aquí es el relleno, y debido a que esto es una línea, no tiene relleno. Este tipo de aquí todavía existe, pero no tiene derrame cerebral, ni relleno, así que no imprime por lo que no es muy útil. Voy a encender a este tipo. Eso está bien. Ahora queremos construir esto fuera. Por lo que queremos agarrar la herramienta de segmento de línea y empezar a dibujar ésta. Eso es todo. Solo hay un montón de cajas, mucha copia y pega, mucha unión de líneas a ellas, asegurándose de que se rompan. Por lo que no es super tenido. Pero si voy a hacer una alambrada, probablemente no voy a construirla de esta manera. Voy a saltar a algo llamado Muse porque es súper fácil y es parte de la licencia de Creative Cloud. Entonces si tienes esta última versión aquí, tendrás Muse, y si la usas, totalmente puedes usar Illustrator. Sigue adelante con Illustrator, sigue construyendo esta cosa hacia fuera. Entonces probablemente donde viene el mayor problema no es tanto construir, es cuando necesitamos cambiar las cosas, necesitamos mover esto por aquí. Esto tiene que venir también así que estamos seleccionando todos estos, y estos ajustes se vuelven un poco más difíciles. Entonces vamos a saltar a Muse y por qué me encanta por sólo hacer el wireframing. Entonces descarga e instala Muse, no tienes que hacerlo. Voy a hacer un nuevo sitio. En cuanto al ancho de página, no estamos preocupados por esto por el momento. Yo sólo voy a dar click Ok, y sólo nos vamos a quedar aquí en realidad. En Muse, solo para que lo sepas, es un programa de Diseño Web sin usar ningún código. Es realmente genial y tengo un curso sobre eso si quieres ir y hacerlo. Pero lo vamos a usar sólo en este caso. Es parte del proceso de Illustrator y el diseño de la interfaz de usuario debido a esta hermosa vista de plano. Así que solo asegúrate de estar en plan. Puedes ver aquí ya tengo una página de inicio lo cual es útil. Entonces puedo hacer clic en este pequeño botón Plus y ya puedes ver, hey, puedo poner en mi página de producto. Cuando digo página de producto, es como si estuviéramos construyendo un sitio para widgets, ahí es donde los widgets irían allí. Ahora, lo voy a poner en mi página Acerca de Nosotros y puedes ver lo rápido que es este flujo de trabajo. Contáctanos. Entonces cuando vamos a los productos, podemos decir, me gustaría, decir producto, y deletrear producto A. Puedes hacerlo producto A, y ver esto. Aquí es donde es agradable. Se puede ver que se hace esto, se unió a esas líneas, se puso un pequeño diagrama de flujo fresco en marcha. Simplemente se vuelve muy fácil construir un mapa del sitio. Puedes seguir construyendo esto hacia fuera. Puedes seguir agregando bits, puedes moverlos. Así que mira, la página decir Acerca de Nosotros tiene que estar ahí. Se puede ver que este interruptor es redondo y por eso probablemente me gusta más. Ahora, dependiendo del tipo de diagrama de flujo o mapa del sitio que estés haciendo, puedes hacerlo aquí arriba. Puedes ir horizontal o vertical, lo que sea que lo muestre más claramente para tu cliente o para ti mismo. Entonces voy a volver a esto, del tamaño. Puedes hacerlo grande o pequeño para caber en muchas piezas diferentes, y eso es todo. Ya están etiquetadas. Tienen lindas líneas y diagramas de flujo. Ahora, la pregunta podría ser, ¿qué hago ahora con ella? No hay PDF de Exportación del Mapa del Sitio, que debería ser una función realmente genial en Muse, no lo es. Todo lo que hago es tomar una captura de pantalla y luego editar también en diseño o Illustrator justo como una imagen. Entonces ese es mi flujo de trabajo. Puede que no te guste este negro de aquí. Puedes hacer algunas cosas básicas. Puedes pasar por instalar las fuentes y todo, pero puedes hacer algunas cosas. Diga que quiero poner esto, voy a ir a Adobe Muse en la parte superior e ir a Preferencias. Si estás en una PC, esas preferencias se esconden bajo editar abajo en la parte inferior aquí. Entonces voy a ir a preferencias. Lo que puedes hacer es cambiar el telón de fondo para este color más claro aquí. Entonces puedes hacer una captura de pantalla en un PC. En realidad había un botón llamado captura de pantalla. Es alrededor de donde están tus botones Inicio y End Page Up. En un Mac, va a ser Command Shift 4, y luego solo tienes que hacer clic en Hold y arrastrarlo hacia fuera. Voy a hacer una captura de pantalla. Entonces lo que hago es abrir Illustrator. Desháganse de ustedes porque tardan demasiado. Entonces voy a ir a Archivo, Lugar, y desde mis capturas de pantalla, aquí tienes, ponlas ahí dentro. Entonces diseño alrededor de él. Podría poner cosas como el nombre del trabajo, el nombre del cliente, esta versión del Sitemap. Es bastante importante. Entonces hay uno que hice, casi preparándome, asignación de la UI ahí. Por lo que tomé una captura de pantalla de la versión negra. Acabo de agregar mi nombre de cliente, mi nombre de agencia de diseño. Yo le di una versión, y me puse mi logo, solo para marcarlo y darle un poco, supongo, buscar y sentir por tu cliente al que se lo estás entregando. Entonces recuerda a mano está perfectamente bien cuando estás tratando con tus amigos, y tus amigos, y tus padres. Encuentro que no voy más allá que eso, pero cuando hay un cliente pagador, muchas veces se esperaría esta expectativa o este nivel en una reunión. Puedes usar Illustrator, arrastrar cajas, unirte a ellas. No hay nada de malo en eso, o puedes saltar a Muse y simplemente usar esa pequeña herramienta genial, tomar una captura de pantalla, tirarla aquí. Entonces eso es configurar un sitemap para el diseño de tu sitio web. 9. Qué tamaños de pantalla utilizar para el diseño web de computadoras de escritorio, tabletas y teléfonos móviles: Hola ahí. En este tutorial vamos a hacer estas mesas de trabajo en Illustrator. Este va a ser nuestro tamaño de escritorio, este va a ser nuestro tamaño de tablet, y este va a ser nuestro tamaño móvil. Vamos a resolver qué tamaños necesitamos para hacer estos primero, y luego iremos a construirlos en Illustrator. Tenemos que averiguar qué tamaños usar y eso puede ser un poco duro porque cambia con el tiempo y hay tantos tamaños de dispositivo, pero tengo algunos conceptos básicos para que uses eso lo que la mayoría de la gente usa, y si quieres estar más informado sobre lo que está saliendo, o qué dispositivos hay, hay sitio realmente genial llamado mydevice.io/devices. Entonces ve a toda esa URL ahí de una sola vez. Simplemente te da cosas interesantes sobre qué tamaños. Ahora ignora estas alturas y anchuras físicas, usa los anchos CSS. Esto es lo que usamos como nuestros diseñadores, esto tiene píxeles de ancho, y podemos ver que el nuevo iPhone 7 tiene 375 píxeles de ancho. Eso te da un buen indicador de tal vez mi móvil necesita ser sobre eso o al menos incluirlo porque es uno de los teléfonos más populares. Se puede ver el 6 plus, el gran teléfono gigante es aún más grande y yo ignoro ese uno, le dejé lidiar con el tamaño de la tableta porque es un teléfono tan grande, es esa gran cosa favorita. Cubre iPhone 6 y se puede ver todas las anteriores así no se ponen por encima de 375 ni siquiera. Por lo que a menudo solo escojo mi tamaño de móvil para ser 400 para incluir todos esos, pero estarás excluyendo a una pareja. El gran gigante favorito, creo que hay alguien aquí abajo como Nixes 6. Era un poco más grande, es un teléfono grande. Cubre la mayoría de ellos. Blackberry Passport, es masivo. Entonces eso es para móvil. Se puede ver aquí abajo para tablet justo debajo. Se puede empezar a mirar a estos. Ignoré el iPad Pro. ¿ Por qué? Porque es tan grande como un escritorio. Si alguna vez has ido a una tienda Apple y viendo el MacBook, iPad Pro son masivos. No diseño para esos para tablet. Dejo esos para usar el tamaño de escritorio, pero sí cubro este. Entonces ese es el tamaño que uso para tablet 768. Ahora no hay razón por la que no puedas escoger específicamente otras tallas. Si estás trabajando con un desarrollador o diseñador web después de este proyecto, pregúntale. Di, oye, estoy diseñando el sitio qué tamaños necesitas, y podrían darte unos que los diferentes que te estoy dando aquí, pero estos serán realmente típicos. Así que 400 para el móvil, 768 para la tableta, y luego te levantas al escritorio. El escritorio es un poco diferente, es para lo que quieres diseñar, y te daré lo que hago. Vamos a hacer Archivo, Nuevo. Empezaremos con el escritorio es nuestro primer diseño, y puedes ver si conseguimos una web. Tenemos un montón de tamaños diferentes aquí. Hay web, mínimo, tamaño grande, común, puedes escoger cualquiera de estos, realmente no importa. De lo que me gusta empezar es de 1200 de ancho, principalmente porque es divisible por nuestras rejillas de las que vamos a aprender un poco más adelante. Sigue siendo un tamaño común. El alto va a cambiar mucho cuando estamos trabajando, así que vamos a dejarlo a la altura que por defecto tenga, y lo vamos a cambiar después porque depende del contenido. La orientación va a ser horizontal, y no vamos a añadir ninguna hoja ni nada, y vamos a asegurarnos de que su RGB. Hagamos clic en “Crear”. Genial. Entonces esta es la página 1, voy a alejarme un poco sosteniendo Comando menos, se aleja. Ahora voy a moverme sosteniendo la tecla de la barra espaciadora, haciendo clic y arrastrando. Entonces, si mantienes presionada la tecla de la barra espaciadora de tu teclado haz clic y arrastra, o puedes usar estos pequeños deslizadores alrededor. Tengo este primero y se les llama mesa de trabajo en lugar de páginas. Lo que necesito hacer ahora es crear otra mesa de trabajo para el tamaño de mi tablet. Lo que voy a hacer es que hay un par de maneras, la forma más fácil es llegar aquí arriba. Ahí hay una llamada herramienta de mesa de trabajo, dale click sobre él. Eso me permite cambiar el tamaño de esto si quiero. Pero lo que voy a hacer es que voy a dar clic a esta pequeña opción aquí, dice nueva mesa de trabajo. Se puede ver que mi cursor se carga con un duplicado de este tipo. Puedes hacer click en cualquier lugar. Te va a decir, vete ahí. Voy a deslizarme a través usando mi barra espaciadora. Ahora, ¿qué tan grande debe ser la tableta? Vamos a estar haciendo la anchura y la altura, no la coordenada x e y, en este caso estamos en el ancho y alto. Ahora ya hablamos de ello antes. ¿ A qué ancho va a ser? Va a ser 768. ¿ A qué altura va a ser? Va a ser dependiendo del contenido. Vamos a diseñarlo probablemente un poco más, pero no nos preocupa eso por el momento, así que no estes lo alto que es esto. Voy a moverlo un poco. Entonces está al lado de mi escritorio, y ahora voy a hacer mi versión móvil. Ahora no puedo volver a conseguir una nueva, pero eso es fácil, tú lo has hecho. Si mantienes presionada la tecla Opción en tu Mac, o la tecla Alt en tu PC, y puedes ver el cursor cambiar a esa pequeña flecha doble, significa que va a duplicarla, y me parece que esa es la forma más fácil de arrastrar hacia fuera otra versión. Puedes seguir sosteniendo Alt y arrastrar un montón de versiones. Yo sólo quiero tres en este momento. Entonces voy a tener mi escritorio, mi tablet, y ahora mi móvil. Mi versión móvil, ya lo hablamos antes. Estamos usando ancho. El ancho en este caso va a ser de 400. Abarca todas las nuevas versiones de iPhone que hay hasta siete ahora, pero ¿quién sabe qué va a ser? Nos da un poco de espacio de juegos. Si termina siendo algo estúpido como el 380, no tenemos que volver atrás y rediseñar nuestro sitio para móviles. De nuevo la altura, va a cambiar dependiendo del contenido. Entonces es mucho más delgado. Qué haremos antes de alejarnos de esto. Hemos creado nuestras páginas, tenemos una versión de tablet móvil y escritorio, vamos a nombrarlas, y necesitamos encontrarte pestaña de mesas de trabajo. Si no lo encuentras, ve a Ventana y vamos a bajar a las mesas de trabajo. Mi primera, Artboard 1, voy a hacer doble clic en él, y a ésta se le va a llamar mi escritorio, y le voy a dar un nombre, para que todos sepan que estoy usando 1200 píxeles. No cambia nada, es sólo una etiqueta. Mesa de trabajo 2 es mi tablet, y 768 píxeles de ancho, y mi móvil va a ser de 400 píxeles. Genial. Voy a alejarme. Recuerda Comando menos o Control menos en un PC, barra espaciadora para moverse. Estamos llegando ahí. Vamos a guardarlo, Archivo, Guardar. Ahora para este curso voy a poner todo en mi escritorio, voy a hacer una carpeta nueva, y esta va a ser mi Portafolio de Dan, y voy a darle V1. En realidad te das cuenta del nombre de la carpeta, así que solo lo vamos a llamar Cartera de Dan para crear, y ahora el nombre real de esto, así que esto se va a llamar Portafolio de Dan. Dale tu nombre porque te construiremos uno mientras vamos y le daremos V1. Necesita algún número de versión, puede ser números o letras, nunca llamarlo final. Final es el beso de la muerte. Probablemente te dieron archivos llamados final 2, final revisitado, final nuevo, así que solo V1 y terminarás con un montón de versiones diferentes. Hagamos clic en “Guardar”. Deja todo por defecto aquí, y vamos a hacer clic en “Ok”. Que mis amigos es cómo escoger las tallas y crear tus primeras mesas de trabajo para nuestro diseño. 10. Qué es un sistema de cuadrícula y un diseño responsivo para teléfonos y tabletas: Hola ahí. En este video, lo que vamos a hacer es hablar de sistemas de cuadrícula y diseño web responsive. Entonces cuando la gente habla de responsive, todo lo que significa es que voy a diseñar un sitio que responda al diferente dispositivo que estoy usando. Entonces podría ser que si estoy viendo, digamos este sitio aquí, mi sitio, bringyourownlaptop.com en un escritorio, se ve así. Pero cuando se reduce a un tamaño de móvil, digamos algo como esto, se puede ver que el sitio cambia para usar mejor la pantalla inmobiliaria o el tamaño de pantalla para esta vista. Se puede ver que estos tipos están un poco cambiados. Estos van de lado a lado, pero cuando están en el escritorio, hay cuatro seguidas en lugar de dos seguidas. Cuando se pone al móvil, cambia aún de nuevo. El gran cambio está en el móvil. He decidido que esa gran imagen en la parte superior, ese hombre guapo sonriente de aquí desaparece. No es útil en el móvil. Estoy corriendo en una pantalla inmobiliaria. Entonces solo me estoy acertando a lo básico y usando unas uñas aquí. Entonces eso está apilado uno encima del otro en una columna, pero tablet, está a las dos y cuando está fuera en el escritorio, son cuatro. Por lo que esos ajustes pueden usar mejor el tamaño de la pantalla, es lo que se llama diseño web responsive. Entonces lo que estamos haciendo cuando usamos el Illustrator es que necesitamos diseñar para esas tres vistas. Para que cuando el sitio web se esté construyendo ya sea por ti mismo o por desarrollador, sepan lo que necesitan para ajustar el tamaño a todo su sitio web para que se vea como esos diferentes tamaños de pantalla. Ahora lo siguiente a mirar es lo que es un sistema de cuadrícula. Porque esa es la forma más común de romper este sitio es, lo que pasa es que hay una cuadrícula subyacente de 12 columnas que corre a lo largo de todas las páginas web, y así es como divides el contenido. Entonces lo que pasa es que es muy similar si estás en diseño de revistas parentales, una cuadrícula de 12 columnas en un periódico se acostumbra para ayudarte a conseguir consistencia a través de muchas páginas. Es lo mismo aquí en diseño web. La forma más fácil de verlo es en nuestra versión final. Entonces este es nuestro diseño final. Ahí está la versión de escritorio, la televisión, y el móvil. Lo que termina pasando es ver esto, si enciendo las rejillas que tengo, puedes ver que he dividido el escritorio incluso asegurándome de tener en cuenta estas 12 columnas. No lo tendría a mitad de camino por aquí ni a mitad de camino por esta columna, todos abarcan a igual a 12. Entonces este tipo de aquí son cuatro de ellos. Entonces 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3 , 4, todos suman 12 espero. Mis matemáticas son malas. Pero significa que este tipo de arriba aquí, esta línea en realidad está abarcando los 12, y eso está bien. Estos chicos de aquí arriba necesitan ser ajustados un poco. Mi diseño, están abarcando estas dos columnas aquí. Necesito alinearlos un poco mejor, y este tipo de aquí, abarca todo porque aquí no hay nada. Entonces veamos lo que hemos hecho y rediseñemos para la tableta. Ahora lo que hacemos es que podría poner 12 columnas aquí, pero te imaginas si comprimo 12 de estas columnas hasta aquí, a pesar de que técnicamente todo lo que hay se vuelve un poco más difícil de diseñar con cientos de líneas a través, se pone aún peor cuando se pone al móvil. Se puede ver lo que he hecho y lo que vas a hacer como diseñador es, no necesito los 12. Ese ajuste finito es demasiado para mí. Te podría gustar y puedes quedarte con tus 12 columnas. Acabo de poner seis aquí, así que 1, 2, 3, 4, 5, 6 y los he dividido uniformemente. Entonces está éste abarca tres, ese uno abarca tres. Por lo que sigue siendo divisible por 12. Se puede ver esto se extiende como la mitad, que serían seis y que serían seis. Por lo que seguimos usando la cuadrícula de 12 columnas. Pero sólo visualmente, es demasiado difícil ver a tantos de ellos. Lo que hemos decidido aquí es que voy a apagar las rejillas, es así como quiero que se vea cuando está en un dispositivo tablet. Cuando se haga en un móvil, quiero cambiarlo de nuevo. Entonces lo hemos cambiado bastante en este, la navegación ha cambiado aquí abajo, y hemos usado más o menos todo el camino hacia abajo. Hemos utilizado el ancho completo, que es el conjunto de las 12 columnas. Yo quiero volver a encender las rejillas. Cuando estoy trabajando desde el móvil, a menudo me ocupo de dos columnas. Entonces son seis de ese lado, seis de ese lado. Yo sólo usé dos sólo para hacerlo un poco más fácil. Se puede poner 12 ahí pero se convierte en un verdadero dolor de cabeza alinear las cosas. Entonces ese es el sistema de grid y así es como los diseñadores web del otro lado, dividen tu contenido. No se puede hacer 13 porque es realmente difícil dividir el medio porque es un número impar. Por lo que incluso los números, la mayoría de las veces son 12 columnas. Entonces vamos en el siguiente video, mira cómo hacer estas columnas para que puedas diseñarlas. 11. Cómo hacer una cuadrícula responsiva de 12 columnas en Illustrator: Hola gente maravillosa. Lo que vamos a hacer en este es que realmente vamos a agregar estas guías a nuestras vistas para que podamos usar esa encantadora cuadrícula de 12 columnas y empezar con nuestro diseño. Vamos a hacerlo. Ahora vamos a hacer nuestras rejillas, antes de que lo hagas, si mueves el app board, las rejillas no vienen para el paseo con facilidad. Simplemente consigue que se disparen como quieras. Realmente no importa cómo tengas tus tableros de aplicaciones, pero voy a alinear los míos de esta manera, tal vez un poco más cerca. Ahora lo estoy moviendo con el app board también. Es este tipo por abajo mueve tus páginas por ahí. Lo primero que tenemos que hacer es agarrar nuestra herramienta de rectángulo, dar click a este tipo de aquí. Podrías estar atascado en la herramienta de círculo o Redondeado Rectángulo Herramienta debajo agarrar la Herramienta Rectángulo para mí. En cuanto a los tamaños, quiero ya sea un relleno blanco o ninguno lleno. Ese es el centro de la caja y esta es la línea alrededor del exterior y quiero que esto sea cualquier cosa menos algo que podamos ver sobre un fondo blanco, así que el negro me funciona. Voy a dar clic en “Hold and Drag ”, y puedes ver el mío está tratando de chasquear. puede ver que está claro que pequeña palabra es su Intersect. Si el tuyo no se está ajustando a él, ve a Ver y enciende esta cosa llamada guías inteligentes o manda U en un Mac o Control U en un PC. Es una muy útil de usar, sobre todo en esta etapa. Voy a acercar un poco, recordar comando menos o Control menos y voy a dibujar una caja a través de todo el asunto. Es un poco faff, un poco. Tenemos una caja grande, y ahora lo que vamos a hacer es que la vamos a dividir en columnas. Nos encontramos con eso bajo Object y luego abajo bajo Path, y luego hay uno que dice dividida en cuadrícula, y esta divertida caja , no queremos filas, queremos columnas, los altibajos. Vamos a ponerlo hasta 12 y en cuanto a los anchos, no nos preocupa, lo que nos preocupa es la canaleta. Las columnas que viste al principio ahí, hay huecos entre ellas, y hay un tamaño realmente común para ellas. Es posible que tengas que consultar con el desarrollador o con el CMS que estás usando. La mayoría de las veces la canaleta entre ellos está a cada lado de la columna es de 15 píxeles. Eso es de cualquier lado, cuando están uno al lado del otro, suman 30. Ahí está tu canalón configurado en 30 píxeles y vamos a hacer clic en “12" y asegurarnos de activar Agregar guías. Voy a mostrar en vista previa para que veas de qué estamos hablando. Eso hubiera sido más fácil. Se puede ver que tengo 15 píxeles y luego 15 píxeles a ambos lados de estas columnas, juntos hacen 30. Hagamos click en “Ok”. Ahora lo que quiero hacer es, lo que realmente quiero es agarrar mi flecha negra, mi Herramienta de Selección, y hago clic en estas guías que se hicieron, entonces voy a hacer clic derecho en ellas e ir a Desagrupar. No quiero esta horizontal, solo quiero que la columna no es estas filas aquí. Lo que podemos hacer ahora es que podemos pasar, en realidad voy a seleccionar a estos tipos aquí. Si has usado Illustrator antes de pensar, genial son guías. Son igual que las líneas físicas que están en la cosa usan estas guías. Lo que necesito hacer ahora es, voy a bajar hacia abajo, sólo para que se chasquen hasta la parte superior ahí. Aquí se meten por el fondo y lo que haré es extenderlos por el fondo. tengo todos seleccionados. La forma más fácil de seleccionarlos a todos, si eres nuevo, Black Arrow, selecciona todas solo las tapas de punta de ellas porque las hemos desagrupado, se deja atrás a estos tipos. Voy a arrastrarlos para medir arriba en la parte superior Entonces abajo aquí, voy a desplazarme hacia abajo, y voy a arrastrar esto hacia abajo bastante lejos. No tengo idea de cuánto tiempo va a ser esta página y es más fácil hacerlo aquí cuando la arrastre hacia abajo. Tengo todos esos hechos, los tengo todavía seleccionados. No te preocupes que uno sea más oscuro que los demás. Hice clic en él por accidente, todavía va a trabajar y vamos a bajar a ver. Vamos a ir a guías. Aquí hay uno que dice Hacer guías. Sé que sentimos que ya lo hemos hecho, no te preocupes. Esos son guías propiamente reales ahora. Ahora lo que puedo hacer es ir a Mi vista y puedo ir a Guías. El tuyo podría estar por defecto ya bloqueado. Si dice desbloquear guías aquí, no haga clic en él. Pero el tuyo probablemente sea como el mío y dice Lock Guides eso significa que no puedo moverlos ahora. Pude moverlos, pero ahora no puedo. Ahora, toda esta chatarra esta se queda atrás, hay un poco de ella. Se ha ido. Es así como lo conviertes en una cuadrícula de 12 columnas. Podrías rebobinar y jugar esta cosa a través de un par de veces, lo hizo por mí cuando empecé a hacerlo por primera vez, así que no lo sudes. Es así como configuraste tus columnas. Ahora lo que también vamos a hacer es, porque odio diseñar justo a este filo aquí. Lo que hago es agarrar mi pizarra mientras la extiendo un poco, solo para que tenga alguna área de juegos. Simplemente significa que es más difícil diseñar dentro de esa cajita y se quiere decir que culpe todo hasta esta edad y simplemente no se ve bien. Te mostraré cómo se ve aquí. Puedes ver aquí tengo esta zona aquí y es espacio en blanco. Sé que no siempre está ahí, pero a menudo está ahí. Lo amplié como diseñador solo para poder ver algunos bits extra. Sé que el ancho entre estas dos guías es 1200, lo cual es perfecto y un pequeño consejo rápido para ti es si arrastras esto hacia fuera, di este tipo de la izquierda aquí mismo, si mantienes presionada mi tecla Option en Mac, bueno, el Tecla Alt en un PC, puedes ver que hay ambos lados, solo me da un poco de espacio de movimiento. Ahora, a pesar de que dije que no los muevan, los vamos a mover. No hay guías por aquí, así que estamos bien. Está rígido y repite para el resto de ellos. Vamos a hacer el siguiente para tablet y vamos a hacer esto juntos. Yo lo voy a arrastrar, lo haremos un poco más rápido, vamos a ir a Object. Vamos a conseguir el Camino, vamos a ir a Split Into Grids y voy a decir, hagamos 12 de estos tipos. Hablé de ello antes, 12 es simplemente demasiados, así que lo bajé a seis porque es divisible por 12. Se puede poner 12 ahí, me gustan seis para cortarlo. El desagüe entre estos tipos todavía va a ser de 30 y yo voy a dar click en “Ok”. No, voy a decir Make Guides. Voy a dar click en “Ok”, y tengo esto. Saber lo que vamos a hacer es que los voy a seleccionar. Voy a hacer clic con el botón derecho en ellos y decir Ungroup, y voy a dar click sólo a los tops de punta a estos tipos, y voy a cargarlos y luego voy a decir View, voy a ir a guías, voy a decir Hacer Guías, y no tengo que ir y volver a cerrarlos, todos están bloqueados por defecto. Es como en general no encierran chicos particulares, bloquean las guías todas en todas las páginas. Si voy ahora a guías, ya puedes ver que los puedo desbloquear pero no los puedo bloquear porque ya están bloqueados. Puedo seleccionar todas estas cosas adiós. Agarra la herramienta app board, mantén presionada la tecla Alt en PC, o la tecla Opción en el Mac arrastra los lados hacia afuera solo dame un poco de sala de juegos y vamos a hacer la siguiente. Ahora, quiero que te vayas y hagas la siguiente sola. Puedes pausar el video y ver que puedes darle una grieta. Yo lo voy a hacer aquí y puedes adelantar rápidamente a la siguiente película si tienes la idea. Tengo este seleccionado, realmente no necesita ir al fondo. Ese es mi OCD y recuerda, vamos a ir a objetar y vamos a bajar a camino, y vamos a bajar a dividirnos a la grilla. En este caso sólo vamos a usar dos. Podría poner cuatro si lo prefieres, si vas a hacer algunas cosas geniales aquí en móvil, no lo estoy. Voy a poner la canaleta en 30. Sigo pensando, bien, tú también lo vas a hacer. Asegúrate de hacer clic en “Agregar guías”. Olvídate de eso cada vez, haz clic en “Ok”. Tenemos nuestras 10 guías, vamos a seleccionarlas, hacer clic con el botón derecho en ellas. Estoy usando mi flecha negra. Ir a Desagrupar. Voy a seleccionar sólo las tapas de punta para ellos, agarrar una de ellas, y arrastrarla hacia abajo. Se alina en la parte superior. Genial. Ahora los voy a hacer un poco más. Tengo que hacer por estos tipos, voy a pagar por eso más tarde. Está bien. Arrastre esto hacia abajo. Ahora vamos a Ver, vamos a Guías, y vamos a Make Guides y luego ya está bloqueado, así que podemos agarrar toda esta basura que queda, golpear “Eliminar” y ahora tenemos una cuadrícula de 12 columnas a través de todos ellos, que acabamos de bajar de seis y dos en estos de aquí. Voy a usar la herramienta app board en esto, y solo salgo un poco. Voy a pegarle a “Guardar”. ¿Todo bien chicos? Y así es como hacer una cuadrícula de 12 columnas en Illustrator. Si eres perezoso como yo, descargarías una plantilla y será esta aquí mismo. Eso dejaré en los expedientes de ejercicios. Lo llamaré cuadrícula de 12 columnas en Illustrator, plantilla o algo así. Estará ahí dentro. Simplemente puedes abrir eso y salir con ésa. 12. Creación de un wireframe de baja fidelidad dibujado a mano: En este video, vamos a ver hacer alambres, pero vamos a hacer algunos dibujados a mano de baja fidelidad. Siempre empiezo con esto, lo dibujo en mi libro y empiezo a trabajar de esa manera. A menudo si es mi propio trabajo, no llego más allá de este. No me mareo de los bellos en Illustrator porque no tiene sentido, no hay nadie para impresionar sino a mí mismo, y es un poco de ideación es wireframing, y trabajo desde esos. Pero si lo vas a estar enviando a los clientes, sería raro salir con solo dibujados a mano. Quieres acostarlo un poco usando Illustrator para que tus wireframes se vean realmente bien. Déjame ir a mostrarte cómo lo hago con mis apenas dibujados a mano primero y luego el siguiente video haremos Illustrator. En cuanto a los wireframes, este es el nivel que estamos viendo. Eso es una alambrada. Echemos un vistazo a algunos otros wireframes y algunas otras cosas. Pero se puede ver el nivel de ellos, es solo para bajar las ideas. A veces les pongo un poco más de cuidado, pero no mucho. Hay unos que me gustan, es a este nivel ahora. Entregaría esto al cliente? Digamos que estoy buscando en un proceso donde me han contratado como este consultor de UX y voy con wireframing, le pondría un poco más de esfuerzo, no una cantidad enorme, porque lo que no quiero hacer es, he tenido discusiones donde Board en Photoshop maquetas, y es el momento de hablar de características básicas y maquetación donde gente ha empezado a escoger colores y escoger fuentes o lo que no me gusta. No podemos llamarlo así, así que mantén el lenguaje fuera, usa Lorem ipsum, usa garrapatas valine, vamos a tener un sentido realmente bueno de ello, pero sin entrar en demasiados detalles. Si eres súper especial, tal vez te pongas un poco de color. Pues mira, destacando, pero eso es todo. Esos son mis wireframes, y eso realmente funciona para mí en términos de ideas. La otra cosa es que no solo hacen una alambrada, vas a tu lista de características, y empiezas a añadirlas aquí, no solo hagas una alambrada, me parece que necesito hacer cinco. Incluso si tu primero, haces éste, eso estuvo genial, luego el segundo, luego el tercero, y el cuarto, y no es hasta que te metes unos pocos a través de ellos que realmente te arreglas unos bichos porque tú podría llegar aquí, eso es genial. Te obligas a hacer una segunda, sabes que es basura porque esa era la buena. Después haces la tercera, y dices : “Estoy pasando por el proceso”. Pero sé a menudo cuando hago los cinco y me obligo a, Número 3 es el ganador. Si te hubieras detenido en el Número 2, nunca habrías conseguido ese asombroso diseño para el Número 3, así que forzarte a pasar y hacer algo más que un solo diseño. 13. Creación de un wireframe de alta fidelidad en Illustrator: En este video, vamos a hacer de esto un alambrón. Es una alambrada. También es solo cajas grises y algún tipo. Agradable y sencillo. Vamos a llegar a ella. Empecemos a construir una alambrada. Es como nuestro mapa del sitio, sólo tenemos muchos rectángulos y algún tipo. Va a haber algunos trucos y consejos por venir. Pero si ya tienes bastante confianza con ilustrado, tal vez quieras saltar a lo largo de éste, pero está bien, así que antes que nada, voy a agarrar una herramienta de rectángulo. Y voy a empezar con, sólo podríamos usar cajas blancas, de acuerdo. Me gusta usar solo un poco de gris en la caja bien, y un trazo negro están en el exterior con un píxel. Y sólo significa que voy a dibujar la caja que va a representar mi, mi logo va por ahí. Me gusta ese tipo de blanquecino solo para especie de que sea fácil y claro con los diferentes elementos. De acuerdo, ahora en cuanto a elementos para impresionar a la gente cuando estás en tu reunión, llámalo “muebles de página” y mantén la cara recta. Está bien. Es una especie de nombre para este tipo de cosas. Ok. Que el [inaudible] en la página. Está bien. Tipo de robado de la impresión pero impresiona a la gente. Suenas como si estuvieras en el negocio. De acuerdo, lo otro que hay que hacer es, tratar de no diseñar tan lejos. Voy a alejarme al 50%, vale, solo para poder ver los diferentes fuerbordas, pero tú quieres estar diseñando esta cosa o al menos burlándote a tamaño real, vale. Entonces cómo se va a ver en un sitio web real no tipo de zoom o zoom demasiado lejos porque vas a tomar algunas malas decisiones en términos de diseño. Para hacerlo, golpeas “Comando Uno”, o “Control Uno” en una PC, o el largo camino, “Ver”, y hay uno en aquí dice “Tamaño real”. Eso es lo que se va a ver en un sitio web real. Entonces siento que ese logotipo es ahora un poco demasiado alto. Está bien. Y tienes que asegurarte cuando estás arrastrando estas cajas que lo haces dentro de las columnas. No intentes hacer eso. Está bien. Donde tipo de varillas a uno de estos canaletas. Está bien. Tiene que alinearse con el borde de una de estas columnas y no puede atravesar una de las canaletas. De acuerdo, entonces columna a columna, y voy a añadir un poco de tipo solo para indicar que esto, voy a dar clic una vez aquí abajo y escribir logo. De acuerdo, tamaños de fuente. Realmente no importa. Dieciséis píxeles es de unos 12 puntos en la vida real. Entonces si tienes que imprimir esto, está bien, es agradable y elegible. Y sí, voy a empezar a sacar esto. Voy a copiar y pegar a este tipo seleccionando a ambos sosteniendo “Shift” y luego ir “Copiar” y “Pegar”. Eso es todo, copia y pega o “Control V”, “Control C”. Y yo voy a, hacer de esto mi navegación, bien, pero no varado dentro de las columnas. Está bien. Y en términos del texto aquí. Yo sólo lo voy a arrastrar. Puede ser un poco difícil arrastrar este texto, sobre todo cuando te alejas un poco, mira esto, acabas de terminar algo así como arrastrando los bordes del mismo. Entonces, cuanto más acerques, más fácil es mover las cosas. O simplemente puedes usar tus teclas de flecha en tu teclado si mantienes pulsado “Shift” mientras dibujas, estoy usando las teclas de flecha del teclado, algo así como lo hace en trozos grandes. Entonces voy a meter uno en el medio ahí. Y en realidad déjame cambiar el texto. Y lo voy a chocar un poco. Volver a “Command One” en mi Mac o “Control One” en tu PC, “Tamaño real”. Ahora, a veces es realmente difícil de ver con todas estas columnas puestas también. Por lo que hay un atajo realmente bonito para encender y apagar las columnas. El largo camino está bajo la “Ver”. Y este es uno de aquí y “Guías”, está bien, y “Guías Altas”. Está bien, pero puedes ver aquí este es el comando de atajo y el punto y coma o punto y coma de control en una PC. Yo sólo estoy abordando, estoy sosteniendo el mando y sólo escribiendo el punto y coma. Yo uso esto todo el tiempo cuando estoy diseñando causa como necesidad de alinearlo, necesito verlo y lo alineas limpio para verlo. Bien. Siguiente parte va a ser una bonita grande, lo que se llama caja de héroes. De acuerdo, así que voy a agarrar mi herramienta de rectángulo aquí, recoger todos mis colores y cosas, vale, tan negro blanco roto en el exterior un píxel. Y voy a sacar lo que se llama cajas de héroes, ese tipo de losa grande en el medio. A veces gira. Está bien. Pero es el tipo grande de como, “Hey esto somos nosotros, esto es lo que hacemos y damos la bienvenida”. De acuerdo, así que esa es la caja y le voy a añadir un poco de tipo. Y este caso, lo que he hecho anteriormente es de click una vez y tecleado, “OK” y tipea on para siempre. De acuerdo, lo que quiero es lo que se llama una caja de ancho fijo. Por lo que voy a borrar eso usando el “Eliminar” en mi teclado. Está bien. Y lo que voy a hacer es agarrar de nuevo mi herramienta tipo, que es este tipo de aquí, vale, la T. mayúscula Y voy a asegurarme de que empiece por este lado de mi columna. Y voy a dar click y arrastrar. Y si arrastras una caja hacia fuera, significa que va a tener como un ancho fijo solo significa, como ver que va a tipo de bang hasta el borde y luego dar vuelta alrededor. Ahora este texto es demasiado pequeño. Yo quiero esto como grande, como inspirador ven a trabajar con nosotros cosa y vamos a poner ahí. Y sólo voy a subir el tamaño del archivo, lo siento, el tamaño de la fuente a algo bastante grande. De acuerdo, un pequeño atajo fresco es con él todo seleccionado como está aquí. Presiona la tecla “Comando Shift” y toca la tecla de parada completa. De acuerdo, entonces “Control Shift” en un PC y escribe la tecla de parada completa en el teclado. Está bien y solo lo hace bonito y grande. Y colon, perdón, coma lo hace más pequeño. Por lo que arriba, están como al lado de cada uno, arriba y abajo. Algo que se ve así. Si odias guiones como yo, como todos lo hacen. Está bien. Se puede hacer es seleccionarlo todo. Por lo que triplicé y lo seleccionó todo. Y puedes ir a tu pestaña de párrafo aquí y sintonizar el guión. Desaparece la división de guiones. Y, probablemente voy a tener que hacer un triple click de nuevo y hacer mi fuente un poco más pequeña, así que se sienta ahí dentro. Y agarro mi flecha negra, levanto esta caja sólo para especie de, eso es lo que quiero. Entonces lo siguiente que quiero es que aquí abajo hay un botón de llamada a la acción. Por qué va ahí solo, no lo sé. Se ha convertido en estilo que necesitas grandes citas inspiradoras que te definan. Y luego necesitas un botón debajo, Vale, esa es tu llamada a la acción como, “Ven a comprar esta cosa o ponte en contacto conmigo o algo así como [inaudible]”. Entonces ahí está mi botón y se puede ver el mío tipo de venir en mora al centro negro, pero sin azúcar en el exterior. Yo quería ser como el resto de los botones. Entonces lo que puedes hacer es empezar a usar la “Herramienta Cuentagotas”. Por lo que he dibujado este con la “Herramienta Cuentagotas”. Está bien, porque está seleccionado y le doy clic a este tipo y tú dices que le robará el estilo a este tipo. De acuerdo, esta navegación en la parte superior. Por lo que voy a dar clic en esto, agarrar mi logo, copiarlo y pegarlo. Y tú vas a ser mi revista llamada Acción. Probablemente no le pondría una revista si se la estás enviando a un cliente. Soy muy profesional al respecto de todo. Entonces lo siguiente que quiero hacer es que quiero poner unas miniaturas debajo de aquí. Voy a poner tres de ellos, vale, y van a cubrir cuatro columnas cada una, vale, para conformar las 12. Pero el fondo de las páginas atascado aquí abajo. Entonces voy a agarrar el rectángulo, lo siento, la herramienta de mesa de trabajo. De acuerdo, y voy a alejarme un poco para poder verlo todo, bastante lejos. Y voy a hacerlo un poco más grande. Entonces sólo voy a agarrar el fondo. Puedes hacerlo todo el tiempo que sepas, a menudo solo lo hago realmente largo. Y luego cuando hayas terminado, arrástralo hacia arriba en lugar de seguir teniendo que moverlo hacia abajo las cargas. De acuerdo, de vuelta al mando uno para llegar al tamaño correcto, ese eres tú ahí. Por lo que herramienta rectángulo, voy a tener un relleno de mi blanquecino. Voy a tener. Tengo eso seleccionado. ¿ Se puede ver mi tick seleccionado cuando estaba cambiando eso? Está bien. Y significa que ha cambiado mis garrapatas para tener ese color blanquecino, así que está ahí pero es del color equivocado. Entonces no hagas eso. Tenía “Deshacer”. De acuerdo, no voy a tener nada seleccionado. Flecha negra click sobre el fondo, hecho. De acuerdo, agarra mi herramienta de rectángulo. Y voy a sacar algo más o menos sobre ese tamaño. Se va a gastar columnas completas. De acuerdo, [inaudible] perfecto. Ahora para indicar que no es como, eso es un botón, como para indicar que es una imagen. La gente le metió una cruz. O usan estos tamaños especiales de imagen. Se lo puede ver por ahí, ese tipo de paisaje te ves cosa. Entonces lo que vamos a hacer es agarrar la herramienta de segmento de línea y vamos a dibujar eso. Ahora podría empezar a arrastrar éste, pero no voy a conseguir el ángulo correcto, así que es más fácil agarrar la flecha negra, hacer click off, asegurarme de que acaba de conseguir seleccionado a este tipo. Voy a ir a editarlo, copiarlo, pegar, y arriba arriba aquí podemos ir a “Objeto”, “Transformar” este que llamaron “Reflect”. Voy a usar horizontal, haga clic en “OK”, y sólo se le ha dado la vuelta ahora, sólo voy a atascarlo cerca de ella. No se preocupe demasiado porque voy a seleccionar a los tres. Y hay uno aquí arriba que dice alinear horizontal y verticalmente. Alinear mi respaldo de rectángulo. Voy a agruparlos y luego ir a “Objeto” del grupo de cabeza superior. Y voy a mantener presionada la tecla “Alt” y hacer clic y arrastrar una hacia fuera. Y como que hace que se duplique mientras estamos arrastrando. Así que mantenga presionada “Alt” y notarás que al sostener “Alt” simplemente se mueve a través y a menudo se alinea. Puedes forzarlo mientras arrastras. Entonces estoy sosteniendo “Alt”. También puedes sostener “Shift”. Y sólo hace que todo esté alineado, recto arriba y abajo. Genial. Y así que mucha del tiempo que acabo de hacer estas cruces, la gente se la gana. Se puede ver este gráfico aquí con la luz, eso es algo así como una imagen universal, “Soy una imagen”. De acuerdo, puedes agregarle esa complejidad extra. No hay drama real para ello. Tal vez, tal vez te guste y solo usas la herramienta de segmento de línea y empiezas a dibujar montañas, ¿de acuerdo? Podría aumentar el ancho del trazo para que coincida con eso. Y si estás buscando la herramienta de elipse, está justo debajo de la herramienta de rectángulo aquí. Y puedes burlarte de tu propia versión de eso. De acuerdo, así que tengo mis imágenes. Lo que quiero hacer ahora es que quiero terminar un par de cosas. Aquí es donde podrías saltarte porque sólo va a ser un poco repetitivo. Y lo que en realidad haré es que probablemente detenga este video ahora mismo. Y el siguiente video te puedes saltar porque, soy yo solo llenando esto y voy a alinear la versión de tablet también. Sí, no va a ser súper emocionante, pero luego te veré en el siguiente video o el video después de eso. 14. Creación de los wireframes para tabletas y teléfonos móviles en Illustrator: Gente encantadora, esto es lo que vamos a estar construyendo en este tutorial. Vamos a rematar a este top, construir la tableta, y las versiones móviles de nuestro wireframe. No me ofenderé si solo saltas al siguiente video porque literalmente solo está haciendo lo mismo, pero trabajando a una cuadrícula diferente. ¿ Aprendemos más montones? Aprendemos a hacer una línea de rayas por aquí. Si quieres quedarte por ahí para la línea de rayas, vamos a meternos en ello. Tenemos que terminar nuestra vista de escritorio, así que sólo vamos a añadir otra fila de imágenes. Voy a seleccionar a los tres de estos tipos. Sostén mi tecla Alt, arrástralos hacia abajo, bonito. Vamos a agregar algunos iconos sociales en la parte inferior, así que mi herramienta de rectángulo, ahí está. Va a tener fuera ningún relleno, [inaudible] relleno de blanco apagado, y un trazo negro, y mis iconos sociales van a llegar a través, no exactamente seguro. Pero esos van a ser mis iconos sociales. Agarrando esta copia sólo para que las fuentes sean exactamente las mismas. Como dije, cómo agarrar cuando estás en algunos niveles ciertos, tienes que agarrar eso justo en el medio. Este va a ser mi ícono social. Social, no puedo deletrear bien social. Iconos sociales y lo pusieron en el medio, mi medio estaba aquí. Copia y pega eso, y este va a ser mi copyright. Lo que podría hacer solo para ahorrar tiempo, puedo teclear y conseguir que escriba una línea para que vaya copyright, copyright 2017. Algo interesante está bajo “Tipo”, el símbolo de copyright está bajo algo llamado “Glifos”. Para usarlo, haz doble clic en él, verás que aparece ahí dentro, cierra Glifos. Panel útil que fue. Voy a poner en empresa de muestra. Genial. Flecha negra, muévala a lo largo para que se sienta en esa columna de ahí. Agradable. Ese es mi acabado de escritorio. Lo que voy a hacer es que voy a alejarme un poco y voy a agarrar mi mesa de trabajo también. Te voy a agarrar de abajo aquí, arrastrarlo hacia arriba, y quiero dividirlo para relleno en la parte inferior ahí, genial. Volver a mi herramienta de selección, y vamos a empezar con la versión de tablet. La forma más fácil que encuentro para empezar es simplemente copiar y pegar el curso. En mi caso, podría agarrar a estos tipos. Puedes copiar y pegar y arrastrar o sostengo Alt a menudo cuando estoy arrastrando, alinearlos ahí arriba. Mi caja de pelo necesita entrar como la primera. Genial, y esta caja de logotipo probablemente va a ser exactamente del mismo tamaño de este lado y mi navegación; sé que mi navegación es razonablemente pequeña. Encajará aquí. Es posible que tengas que ajustar el tamaño de tu logo en tablet. Es solo cuestión de averiguar qué se ve bien en tamaño de tableta, el diferente diseño que planeas usar. Voy a pasar, el gran cambio para mí es que me gustaría sólo hacer dos de estos tipos así que los voy a traer a través. En realidad, lo que podría hacer es traer uno través porque van a tener que ser redimensionados. Yo sólo voy a hacer uno de ellos y luego duplicarlos. Esto se está alineando con todo, acercar un poco, Comando 1 solo para asegurarme de que esté perfectamente alineado, y solo los voy a arrastrar en un rato, y voy a sostener Alt, y voy a hacer dos de estos tipos. Voy a hacer mi mesa de trabajo más grande. Aleja un poco, quiero más grande. He perdido mis rejillas aquí abajo. Es un poco molesto, pero podré arreglarlo. Voy a querer que vayan tres por tres. Ya has visto una de las cosas bonitas que pasa. ¿ Se puede ver ahí a la derecha? Aquí no puedo soltar mi ratón, pero en el lado derecho ahí dice: “¿Te gustaría que los huecos sean los mismos”. Algunas de las cosas geniales que puedes hacer con Illustrator. Enfriar, así que lo siguiente que quiero a lo largo son los iconos sociales, voy a alejarme de nuevo. Eso es sólo reconstruirlo por aquí. Ahora, no puedo ver a mis guías así que voy a tener que mostrarles cómo funciona eso. Voy a alinear estos. Probablemente pueda simplemente salirme con la suya, ¿ se puede ver en realidad encaja a los chicos de la parte superior de ahí. Pero podría tener la pregunta de : “¿Cómo soluciono esto?” Lo que necesito hacer son dos cosas, es más fácil si muevo estos bits justo por aquí por un segundo. Después ve a “Ver”, ve a “Guías” aquí mismo, y ve a “Desbloquear guías”. Ahora, puedo seleccionar a todos estos tipos. Con la flecha negra, no es tan útil como la flecha blanca. El flecha blanca, y los selecciono todos. Agarro estos pequeños puntos de anclaje final, cuales vas a aprender más adelante. Ya puedes ver que los puedo arrastrar a todos hacia abajo ahora. Se quiere arrastrarlos hacia abajo directamente. A lo mejor puedes sostener Shift para arrastrarlos directamente. Perfecto. Voy a volver a encerrar a nuestros guías. Guías de bloqueo, por favor. Voy a agarrar la pila de vuelta. Guías de vuelta a la posición, que obtengo la misma brecha. Agradable. Mi mesa de trabajo va a tener que hacerse un poco más pequeña. Lo que probablemente haré es que mis iconos sociales se van a hacer más pequeños cuando llegue a la tableta, y tal vez compartan el espacio aquí dentro. Podría tener que cambiarlo un poco cuando tengo los iconos reales en la escena, dependiendo de cuánto tenga el cliente. Ahora, tengo un poco de trabajo. Último bit es la versión móvil. Podría llegar temprano, y conseguir que esta guía sea mucho más alta. Lo que voy a hacer en este caso es, he empezado con el escritorio y me mudé a la tableta y luego al móvil. Encuentro que así es como trabajo lo mejor. Es muy común y fresco, siento, empezar el móvil primero. Es el más difícil de diseñar y estoy de acuerdo, pero encuentro a la gente que viene a mi sitio, escritorio es una gran mayoría, así que paso más de mi tiempo en el escritorio y me parejo para el móvil. Hay montones de personas que argumentan que esa es la forma equivocada de hacerlo. Si estás haciendo diseño de aplicaciones, no tiene sentido hacer una versión de escritorio, así que empezarás con esta pantalla más pequeña, y es la más difícil de diseñar por lo que depende de ti. Voy a agarrar unos pedacitos que necesito, y probablemente agarraré a todos estos tipos. Voy a sostener Alt, arrastrarlos a través. Puedes hacer el tuyo uno por uno, y lo que definitivamente voy a tener que hacer es, las navegaciones no encajan así que vamos a moverlo hacia abajo, básicamente se llama sándwich de navegación. Voy a agarrar mi logo y moverlo al otro lado. En esta parte superior, a lo largo de la parte superior aquí, vamos a dibujarnos un menú de hamburguesas o un sandwich de navegación, así que esas tres líneas de rayas, y sólo vamos a usar tres líneas de rayas. Voy a dibujar uno, voy a dibujar dos, voy a dibujar tres, podría no tener lucha aplicada a ellos. Antes de empezar a dibujar, probablemente deberías comprobar que tienes una línea negra seleccionada. Voy a hacer el mío por separado. Todavía están ahí. Te voy a agarrar chicos, tu negro y voy a hacer el trazo más grande. Estar a la vista real para que puedas tener una sensación de qué tamaño deben ser, no hay talla definida para ellos. Voy a asegurarme de que estén separados correctamente. Arriba aquí, hay uno que dice “distribuir centros” y sólo los alinea a todos. Eso es lo que voy a hacer por mi sandwich de nav. Rejillas apagadas, rejillas encendidas, es sobre el tamaño correcto, tal vez un poco grande, pero eso está bien. Lo que va a pasar aquí es que esto va a bajar hacia mis rejillas de vuelta. Mi imagen de gran héroe va a ser mucho más pequeña y el texto aquí, aunque no cambié el tamaño de fuente por aquí porque permití un poco más de espacio. Cuando llegue al móvil, definitivamente voy a tener que cambiar el tamaño de la fuente a algo más pequeño. Lo que podría hacer es en realidad sólo asegurarme de que tengo, así que termina en este “diam”. Yo lo voy a hacer un poco más pequeño, y te darás cuenta de que aquí no me voy a alinear con la grilla. Hay un par de trucos que podemos hacer para forzar que eso suceda. ¿Dónde está? Diam, así que voy a borrar, ver [inaudible], así que eso se ha ido todo y tal vez alinearlo bien. Otra cosa que voy a hacer es seleccionarlo todo, y aquí voy a cambiar el formato. Hay cosas que puedes hacer fácilmente, como cuando pasa de tablet a móvil, voy a asegurarme de que se alinee al centro, y eso va a estar bien. Es una cosa agradable, fácil de hacer. Lo mismo con este tipo, va a estar centrado aquí como un botón grande. Está ahí, bonito, y el tamaño de la fuente se hace un poco más pequeño. Lo siguiente que quiero hacer es asegurarme de que esto esté alineado, no hice eso. Lo que voy a hacer es que estos sólo se van a apilar uno encima del otro así que voy a copiar y pegar uno, moverlo al otro lado y conseguir que salgas a encontrarse con los lados ahí. En realidad va a ser más grande en el móvil que en cualquier otra vista. Puedo ver desde esta vista aquí, tengo que asegurarme de que estas cosas se alineen perfectamente. Entra ahí, lindo. Volver al Comando 1. Lo que también voy a hacer es en lugar de tener seis, lo voy a cortar para que en realidad sólo tengamos cuatro de estos. ¿ Por qué? Principalmente porque quiero mostrarles cómo se ve, cómo apagarlos cuando lleguemos a construir nuestra página web. Podemos apagarlos en código por lo que sólo tenemos cuatro de ellos yendo, y sólo para que no sea tan épicamente largo. Puedes ver aquí ya tengo cuatro de ellos y las páginas también ya son mucho más largas que la versión de tablet, es mucho desplazamiento. Lo que voy a hacer abajo aquí es agarraré este ícono social y voy a apilar a estos tipos de manera diferente, así que los voy a tener encima el uno del otro porque simplemente no podían ir uno al lado del otro aquí y eso es algo que puedes hacer en código también. Suficientemente fácil. Asegúrate de copiarlos cuando los estés arrastrando. Golpéalo un poco, agarra este, y van a estar centrados uno encima del otro. El espaciado es bueno, herramienta de mesa de trabajo. Está bien, y ese va a ser nuestro marco. Este podría ser el más grande, más largo, aburrido de todos los tutoriales aquí en Illustrator. Te prometo que nos vamos a meter en algunos súper fantásticos, divertidos diseñando color usando la imagen mente-soplado a continuación, te lo prometo. Muy bien, siguiente video. 15. Inspiración para el diseño de tu web: Ahora, estamos entrando en la fase de diseño. Hemos hecho algunos sitemaps y wireframes, y no se ven muy sexy. Ahora, es hora sexy. Vamos a pasar por ahí y ver dónde consigo mi inspiración. Podrían tener tus manchas. Esto, me parece probablemente el mejor de todos los sitios. Se llama Awwwards pero con dub, dub, dub ahí dentro. Buena mordaza. Tiene Sitios del Día. Si haces un sitio brillante, mándelo a ellos, podría que te presentaran, conduzcas un poco de tráfico y obtuvieras dulces felicitaciones de diseñador. Simplemente consiguió cosas realmente bonitas, montones y montones de cosas bonitas. Tan solo pasa algún tiempo mirando por aquí. Es posible que tengas un look específico que estás buscando. Podrías ser ilustrador, ve y echa un vistazo a las ilustraciones de otras personas. Tienes que usar ese pequeño ícono de ahí, ¿verdad? Sí. En todas partes si haces clic, simplemente abre una página en Awwwards, lo cual está bien. Da los rankings de las personas y esas cosas, pero en realidad quieres mirar la página en sí. Es un sitio bastante cool, Mitchlana. Perdón, Michelle Lana. Awwards.com es un gran sitio. Yo uso behance.com es otro brillante. Simplemente paso mi tiempo pasando y yendo, “me gusta eso”, y empiezo a apropiarme de ideas para construir algo o tener una sensación de lo que quiero trabajar. Esa es la inspiración para tu diseño web. 16. Cómo empezar a diseñar tu web con plantillas de Illustrator: En este tutorial, vamos a ver cómo empezar desde plantillas. Podrías ser realmente nuevo en el diseño en general, podrías ser estudiante, podrías ser joven, podrías ser mayor y nunca lo habías hecho antes, cualquiera que sea la razón podrías estar un poco más desalentado por todo el diseño proceso, ¿cómo se va a ver? Es bueno empezar con una plantilla, y hay un montón de plantillas alrededor. Algunas de las más fáciles están integradas en la nueva versión de Illustrator, estamos en 2017 por el momento. Si vamos a Nuevo o Archivo Nuevo, hay esta pequeña ventana Nuevo Documento, si vas a Web, verás que debajo de aquí hay un montón de plantillas, puedes ver si me desplaza hacia abajo. Son para todo tipo de cosas. Eso es una página de aterrizaje uno, es decir algunos gráficos de presentación, algunos iconos de redes sociales, hay todo tipo de diferentes. Pero en cuanto a un diseño de página web, se puede ver esto en wireframes, mira eso. Por diseños de página, podrías empezar con uno de estos y simplemente empezar a cambiar, están aquí para ser utilizados, se usan comercialmente. Podrías decidir, voy a empezar con este de aquí porque coincide con lo que quiero hacer. Haces doble clic en él y simplemente comienzas a pasar y a jugar con los colores, las fuentes, lo descarga eventualmente y lo cambias con tus imágenes. Digamos que no estás vendiendo una app, estás vendiendo cookies, podrías cambiarla con tu imagen aquí y esa es una buena manera empezar y solo tiene los bits en los que tal vez no hayas pensado, así que podrías simplemente usar esta página de inicio y luego todo el resto de éstos. Esta es una gran manera. Ahí hay algunas otras plantillas. Otro lugar genial al que puedes acudir es, bajo este de aquí, bajo tu licencia de Creative Cloud, tu aplicación de Creative Cloud. Ahí hay uno, Activos, y aquí hay uno llamado Mercado. Si haces clic en “Mercado” y aquí la opción de búsqueda, podrías decir UI web. Aquí hay un montón de cosas prefabricadas que se permiten usar comercialmente, por lo que puedes empezar con estas, es una gran manera de lucir pro realmente rápido. Aquí hay un montón de cosas de aplicaciones y un montón de cosas de la web también. Algunos de ellos son realmente grandes, algunos de ellos sólo componentes pequeños, pero esta línea parece seguir para siempre. Para usarlos, di que te gusta esta cosa de la UI web aquí, como el aspecto y la sensación de esto para tu sitio, puedes hacer clic en esto y decir descargar a, a menudo la gente simplemente lo descargará a su biblioteca, se llama Mi Biblioteca, lo que voy a hacer es que voy a dar click en esto y descargarlo a uno que he hecho llamado, puedes ver aquí, Crear Biblioteca, he creado este llamado Portafolio de Dan. Lo que sucederá es que esperemos, se pueda ver que sucede por aquí debajo de Ventana, Bibliotecas, eso está ahí. Es descargar a este tipo que podría empezar a usar, tarda un poco en descargarlo con la red, y luego arrástrelo. Aquí puedes ver, esa es una interfaz de usuario que puedes empezar a usar y cambiar y agregar a tu diseño, cambiar tus fuentes, usar tus colores, es una buena manera de empezar a partir de una plantilla. Eso es todo para nuestra partida de plantillas. Vamos a hacer nuestra propia y va a ser impresionante. 17. Introduce tu logotipo vectorial en el diseño: Hola ahí. En este video, vamos a traer nuestro adorable sexy logo vectorial y lo dejaremos caer en la barra de navegación, jugaremos con la opacidad, y agregaremos un poco de tipo para nuestra navegación. Está bien, vamos a entrar en ello. Se puede empezar obviamente reemplazando cosas por las que a menudo sólo paso. Esto es lo que he acostumbrado a hacer llegar mis ideas al cliente pero no es algo que me parezca útil para empezar. Pensé más en el producto y mantendré mis marcos y cerca, los imprimiré y los pegaré cerca, pero no me gusta sacarlos el literal, no es ese tipo de proceso de diseño. Lo que hago es que voy a parar. Voy a usarlos como guía, no me malinterpreten. Simplemente voy a dejar que el contenido empuje y se mueva y jiggle como sea necesario. Porque ahora tengo imágenes del cliente y tengo logotipos de ellos, y todo ha cambiado apenas un poco. Voy a traer mi logo. Sólo para darme mi primer bit, y probablemente va a conducir muchos de los diseños, sobre todo colores, tal vez fuentes. Entonces los vamos a traer primero. Ahora, cuando encuentres logotipos de tu cliente, asegúrate de que sea una versión vectorial. Lo que vamos a hacer es ir a “Archivo” y vamos a ir a “Place”, este de aquí. Ahora, archivos de ejercicios, tengo muchos logotipos. Se tienen cinco versiones. Entonces JPEG y un PNG son malos, SVG, EPS, o un archivo AI son buenos. Te mostraré la diferencia entre los dos. Digamos que todos estos tres son muy similares, casi igual. Estos tipos tienen un trabajo muy similar también. Vamos a traer el PNG y vamos a traer, digamos, la versión EPS, o digamos el SVG. Veamos la diferencia entre los dos. Algo llamado píxeles versus vector o mapa de bits versus rutas. Lo que voy a hacer es que voy a arrancarme los guardias y voy a acercarme. Se ven exactamente iguales. Pero mira lo que pasa cuando empiezo a escalar ambos. Si agarro a estos tipos y empiezo a escalarlos. Ahora, es grande. Se puede ver que uno empieza a pixelarse, se ve horrible, y este otro de aquí se mantiene agradable y cristalino. Si sí tienes la opción, el cliente dice: “¿Qué versión quieres?” Asegúrate de obtener la versión vectorial. El vector es SVG, EPS, o AI. En ocasiones, puede ser un PDF. Pero mantente alejado de los PNG. PNG son manejables porque tienen transparencia. Si solo tienes, digamos, un JPEG y un PNG, consigue la versión PNG, no va a escalar muy, eso no nos va a ayudar con nuestra capacidad de respuesta. No es el fin del mundo. Comparemos con la versión JPEG. JPEG es un claro perdedor porque tiene un fondo blanco. Sigue siendo los mismos píxeles, sigue pixelando, pero se puede ver, al menos, el PNG tiene un fondo transparente. A menudo, no siempre. Adiós, chicos. Voy a traer de nuevo nuestro SVG sólo porque llegó a través del tamaño correcto. SVG, genial. Este va a ser mi logo para mi diapositiva. Recuerda, estar trabajando un Comando 1 píxeles reales. Notarás que el logo L tiene un fondo blanco, es porque lo que quiero hacer es volver a encender mis guardias. Si lo has olvidado, eso es colon Comando o colon Control, voy a conseguir que se revente tal vez solo un poco más adelante porque lo que voy a hacer es que voy a agarrar mi herramienta de rectángulo y voy a poner una barra de navegación en la parte superior. Voy a hacerlo semitransparente más adelante para que puedas ver debajo de ella y hacer que todo se enfríe. Voy a moverlo a través para poder ver ambos lados. Ahí vamos. Aquí voy a dibujar un rectángulo, va a atravesar 12 columnas. Voy a darle un color de relleno de negro, y no le voy a dar trazo, así que la pequeña línea roja a través de ella significa no trazo. Un poco de la opacidad un poco. Se va un poco gris y voy a poner cosas detrás de él. En realidad, cuando construyamos nuestro sitio, lo vamos a anclar a la parte superior, por lo que significa que se va a desplazar hacia abajo cuando empecemos a desplazarnos y se va a pegar a la parte superior y siempre podremos ver el logo en el navegación. Es genial. Ahora, en el momento en que el logotipo está del lado equivocado, esta caja está en la parte superior por lo que simplemente hacemos clic derecho en ella. Si estás en un Mac, mantienes presionada la tecla Control y haz clic con cualquier botón que tengas. En una PC, es un botón derecho perezoso, y ve al que dice “Organizar”, y ve a “Enviar para atrás”. Ya puedes ver, tengo mi logo por adelantado. Enfriar. Voy a tocarlo para que se sienta ahí dentro, apague mis guías, y se vea bien. Ahora, lo que quiero hacer es ponerlo en el texto para mi navegación. Voy a agarrar la herramienta Tipo y voy a dar click una vez. Realmente no importa adónde vaya, y yo voy a ir Sobre Nosotros. Va a ser Acerca de mí porque es mi cartera. Lo que voy a hacer es copiarlo y pegarlo en la columna junto a él, y va a haber otra página llamada Contáctame. A lo mejor tengo el botón Mi Portafolio también. He decidido solo mantener esas imágenes que teníamos en la parte inferior para llegar a nuestro portafolio. Esto es igual que estos chicos de aquí. Yo los voy a hacer blancos. Entonces con esa flecha negra, los conseguimos seleccionados a ambos. Ya puedo agarrar mi herramienta Tipo. En la parte superior aquí, puedo ir y cambiar el color a blanco. En realidad, lo que voy a usar es este blanquecino todo el camino a través de él. No sabía por qué me gusta, es sólo un pequeño indicio en el blanco. Se ve blanco, básicamente. Hemos agregado nuestro tipo, vamos a ir en fuentes de estilo en una película justo después de ésta, solo usaremos Arial por el momento. Lo siguiente que quiero hacer es que quiero trabajar con un poco de color. Hagámoslo en el siguiente video. 18. Utilizando Adobe Color: En este video, vamos a hablar de agregar color a tu sitio. Vamos a empezar a usar algo llamado Adobe Color CC. Solía llamarse más cool, si lo recuerdas, pero si vas a color.adobe.com e inicias sesión con tu licencia Creative Cloud, llegarás hasta aquí. Si tienes una versión pirateada, esto no va a funcionar también, pedacitos de ella funcionarán, vale. Pero esperamos que tengas una versión legal. Lo que vamos a hacer es saltar crear e ir a uno llamado explorar. Para qué es esto realmente, es para personas que, incluso diseñadores experimentados, como me encuentro apoyado en los mismos colores cada vez que hago un diseño. Si vienes a mí y eres panadero y necesitas un sitio web, probablemente va a ser verde y gris por el momento. Si lo eres, no lo sé, alguna aerolínea internacional y necesitas trabajo hecho, probablemente lo voy a hacer verde y gris. Estoy atrapado en una trampa de usar verde y gris. Para escapar de mi trampa, utilizo esta función “Explorar” en Adobe Color. Lo que significa es que puedo entrar aquí y pasear y explorar. Creo que por defecto está encendido, no estoy muy seguro, pero ve a “Más Popular”, me gusta de todos los tiempos, tal vez este mes. Simplemente te va a dar las cosas que otras personas están descargando, los colores más populares y muchas veces cosas bastante cool llega a la cima. Vamos con “All Time” y estos de aquí, sí, montones de colores. Lo que pasa es, porque has iniciado sesión, lo que puedes hacer es decir que te gusta “Tech Office”. Puedes hacer click en el que dice es, “Guardar”, y se va a decir cómo, puedes renombrarlo si quieres. Se puede decir en realidad me gustaría que lo pusieras en mi, recuerda que hicimos esa biblioteca [inaudible] llamada cartera de Dans. Puedes hacer uno nuevo aquí, justo al fondo, “Crear Nueva Biblioteca” solo lo meterá en tu, dónde está, mi biblioteca. Pero voy a poner el mío como cartera de Dans, podrías cambiarlo. Eso está bien, pero voy a dar clic en “Guardar” y lo genial al respecto, es por arte de magia, ojalá si voy a ilustrador ahora y cartera de Dans, a veces puedes hacer clic en eso. Voy a hacer esto un poco más pequeño. Ahí está, ahí están los colores y puedo empezar a usarlos. Puedo decidir que en realidad voy a usar eso para el color. Es solo una buena manera de empezar a dibujar cosas y dices: “Vale, ahora las cosas están empezando a funcionar en cuanto a cuántos tienen color”. Porque empecé con esta adivinación de color templada. Es una buena manera de ponerte en marcha con tus colores. Lo que puedes hacer por esta clase, es que puedes ir al mismo sitio exacto, e ir a “Explorar” e ir a “Buscar” y escribir BYOL. Esperemos que encuentres algunas de las que estoy usando. El que estoy usando en esta clase se llama ilustrador de portafolio BYOL. Descarga esa y lo usaremos para este curso. Si estás trabajando en una agencia más grande, es una gran manera de dar forma a los colores de la marca. Puedes subirlos y hay un par de formas diferentes en las que puedes ir a “Crear” y puedes bajar aquí y decir en realidad, así que CMYK, puedes empezar a escribir estos y cambiarlos, y luego pulsar “Guardar” y terminan en esta explora cosa. La gente puede buscar y compartir y lo hace realmente fácil, sí compartiendo colores brillantes. Entonces vamos a descargar el Bring Your Laptop one, especie de olvidado ese cheque BYOL, y hago clic en “Save”, ponerlo en portafolio de Dans. Genial, bonito. Illustrator da clic en el pequeño icono de la nube creativa, y ahí está ahí. Voy a dar click en este tipo click derecho sobre él y decir, Eliminar, no te necesito. Genial y genial, así que tenemos nuestros colores dentro. Pasemos ahora y miremos, digamos, porque esta va a ser una marca para esta empresa falsa en particular o portafolio falso que estamos haciendo y si en realidad tienes colores específicos y un logotipo para trabajar, me voy para mostrarte cómo hacer eso en el siguiente video y sacar esos colores a través. 19. Ajustes de colores de marca con Adobe Illustrator: Oye, en este video, vamos a ver una especie de tirar de los colores de los logotipos de marca existentes para usarlos dentro de su diseño de interfaz de usuario. Digamos que estamos haciendo algún trabajo para una empresa y ustedes tienen su logotipo. Puedes traerlo y vamos a ir File Place, y en este ejemplo, sólo vamos a usar el Logo.png de Google, traerlo. Digamos que quiero dibujar algunos elementos, digamos que es nuestra caja de héroes de fondo aquí. Pero quiero que coincida con los colores de Google, finjamos que es algún color aleatorio para empezar, no lo suficientemente aleatorio. Con él seleccionado, lo que hay que hacer es agarrar la herramienta cuentagotas, el cuentagotas es herramientas como que se esconden aquí abajo. Todo lo que necesitas hacer es con cualquier cosa seleccionada, solo escoge un color de él, y puedes ver que dejará de sacar de eso los colores de la marca. ¿ Cuán preciso será? Bastante preciso. Digamos que quieres un tipo de agregarlos pero usar más tarde en lugar de haber usado la herramienta cuentagotas cada vez, lo que tienes que hacer es cambiar a tu panel de muestras. Ahora tu panel de muestras si no puedes encontrarlo, está debajo de Ventana abajo a Muestres, enciéndalo y piensa en los interruptores como colores prefabricados, premezclados listos para usar. Lo que vamos a hacer es, vamos a escoger este azul, así que aquí está entonces, lo que puedes hacer es arriba por aquí, desplegable y es una opción que dice New Swatch. Está bien, dale un nombre, voy a llamar al mío Google Blue, y haga clic. Se puede ver que ambos están en mi biblioteca, y está aquí abajo, mi biblioteca de muestras. Por lo que solo trabaja tu camino a través de los colores, agarro la herramienta cuentagotas. Rojo uno, aquí, nuevo Google Red está ahí, y es aquí abajo el panel de muestras. El motivo por el que es un poco bueno tenerlos en tus muestras, lo encontraremos un poco más adelante. Encontrarás que esta cosa de la biblioteca, es impresionante para la mayoría de las cosas. Es nuevo y aún no es perfecto para todo, así que a veces también las necesitas en tu panel de muestras. Está bien, impresionante. Es así como sacar los colores de la marca de los logotipos existentes para empezar a usar en lugar de salir en tratar de averiguar cuáles son todos esos colores. Está bien. Ahí vas. 20. Utilizando las fuentes web adecuadas de Google Fonts y Typekit: En este video, vamos a ver traer fuentes seguras web realmente específicas de Google Fonts y Typekit, como este pequeño chico sexy de aquí y estas pequeñas Plain Jane pero fuentes muy cool arriba aquí. Entonces lo que tenemos, y sólo usamos texto viejo sin formato. Podría haber usado Arial, pero por defecto Illustrator ama Myriad Pro. Lo que tenemos que hacer ahora es cambiarlo por fuente que queremos usar. Ahora, no puedes simplemente pasar por tu lista y irte, quiero escoger todas estas fuentes que tengo en mi máquina. Podrían tener cientos, podrían tener sólo unos pocos. No puedes simplemente ir a escoger a ninguno de ellos. Necesitan ser específicamente fuentes que se puedan usar en línea, esencialmente sólo tener licencia en línea, y si se les paga paga por esa licencia y si no son comercialmente utilizables vaya por y úselas. Hay dos lugares principales que vas a hacer si eres una persona de Illustrator. Hay una llamada Google Fonts o Typekit. Ahora, en mi experiencia depende de lo que estés haciendo. En Google Fonts, eso me parece más fácil. Son un poco más difíciles de implementar, pero son mejores en cuanto a licencias. Lo que pasa es que las Fuentes de Google son gratuitas para uso comercial, que son geniales. Typekit son gratuitos de usar con tu licencia de Creative Cloud, cual es perfecta para mi portafolio aquí porque no lo estoy usando para nada más. Eso significa que es para mi cartera. Pero digamos que la estoy construyendo para un cliente y no tienen licencia de Creative Cloud, su sitio web tendrá que licenciar esa fuente, o tendré que usar mi licencia de Creative Cloud para mantener su sitio usando la fuente correcta. Si decido mudarme al Himalaya y terminar toda mi vida digital, significa que su fuente dejará de funcionar porque no estoy pagando mi licencia de Creative Cloud. Los veremos a ambos. Ambos son geniales, ambos lo suficientemente fáciles de usar. En primer lugar, vamos a ver Google Fonts. En primer lugar, ve a fonts.google.com, y llegas aquí. Me gusta mucho Google Fonts. Hay montones de ellos. Un par de cosas geniales que puedes hacer con ellas está de lado aquí, por lo que necesitas una fuente de escritura a mano. Pueden ser realmente difíciles de encontrar. Solo tomemos escritura a mano y supervisen, solo te voy a dar listas para las fuentes de escritura a mano. Entonces los voy a encender a todos. Algunas de las otras cosas bonitas abajo aquí están con las que puedes jugar, digamos como el ancho. ancho puede ser realmente útil en puedes bajarlo para que puedas obtener una bonita fuente compacta, o comprimida, o condensada. Es sólo un poco más delgado. Simplemente significa, sobre todo cuando estás trabajando en línea, si consigues algunos de estos realmente delgados puedes ponerlo bajo en un título sin que se rompa en dos líneas. Puedes ver aquí puedes caber un poco de palabras en este, mientras que si buscas una unidad con unas fuentes realmente anchas, puedes ver que está mucho más alejada. todas formas, hay dos cosas que debes hacer. Una es escoger una fuente, por lo que Roboto y probablemente Open Sans. Si buscas una fuente body copy, estas son las más comunes. Open Sans es probablemente el más común. Es el nuevo Arial. Todo el mundo usa Open Sans porque está claro, es bonito, tiene montones de pesos diferentes, y funciona bien en diferentes idiomas. Lo que voy a hacer es que voy a escoger. En realidad acabo de pasar algún tiempo echando un vistazo y lo he decidido y voy a usar este llamado Playfair. De verdad me gusta. Es éste de aquí. Tiene unas buenas pesas. A veces eliges una fuente y no se ve bien. Podrías pensar que aquí se ve bien, pero luego se ve terrible en las palabras que necesitas. Ya puedes ver solo puedo escribir sobre la parte superior solo para ver cómo se ve mi nombre. En realidad, antes de pasar puedes hacer click en el nombre y simplemente te da una muestra más grande de todo y de todo el uso diferente, y una de las cosas útiles así como te da una fuente correspondiente coincidente es vamos a usar esto para nuestros títulos en nuestros grandes encabezados, pero luego necesitamos una fuente más simple para la copia corporal o nuestro texto de párrafo. Se puede ver aquí abajo me ha dado una opción que dice probar Raleway, o éste, o éste. He optado por este, Open Sans Condensed. Probablemente no las versiones ligeras, tal vez un poco demasiado difícil de leer en línea en términos de usabilidad. Pero solo te da opciones, así que si eres nuevo o eres de vieja escuela y solo necesitas ayuda para escoger una buena fuente. Lo que hacemos es escoger este y luego encontrarlo en la parte superior y decimos “Selecciona esta fuente”, o si estás de vuelta en la otra pantalla aquí haces clic en este pequeño botón “Plus”, y eso solo agrega este fondo aquí llamado colecciones, y puedes agregarle las fuentes. Ahora bien, ¿cuántos agregas? De verdad, solo necesitas dos. Se reduce a más. Es una mezcla de solo reglas de fuentes. Si tienes 10 fuentes en tu sitio, se va a quedar terrible. Por lo tanto, manténgalo al mínimo. Solo se necesitan dos, una fuente de encabezado y una fuente de copia de cuerpo. Puedes tener tres si lo necesitas. Voy a añadir éste y luego voy a encontrar aquí Open Sans, y aquí está Condensed, y le pegué a “Plus”. Ambos están juntos. Voy a abrir esto. Ahora, hay un par de cosas que tengo que hacer. Voy a dar click en “Personalizar” porque tengo que decidir de estas fuentes, cuáles quiero. Lo que en realidad quiero es que quiero el audaz y no voy a usar el normal en mi diseño. Lo que podrías hacer es que en realidad podrías simplemente encenderlos a todos porque ahora estamos en la etapa conceptual. No mostramos cuál vamos a usar, solo los descargamos todos. No quieres usarlos todos aunque en tu diseño acabado real, solo escoge uno o dos porque puedes ver cuanto más tiempo se necesita para cargar tu página, y una página de carga lenta es mala por un par de razones, es tu usuario lo hará pasar siglos tratando de descargar fuentes mientras tu página no se está cargando, sin importarte tu increíble selección de fuentes, y a Google no le gusta, por lo que te penalizan en cuanto a tus búsquedas. Trata de no recoger demasiadas fuentes. Pero en mi caso, los estoy descargando todos porque por el momento sólo estoy en mi etapa de diseño. Escogeré sólo uno o dos. Pero por aquí, esto es como oscura flecha pequeña, esta cosa que dice descargar esta selección. El genial de esto es que se descargará, y lo voy a poner en mis archivos de ejercicios. Eso estará listo para que lo utilices por tu cuenta para que no tengas que pasar por este proceso. Puedes empezar a usarlos. Pero los descargamos. Ahí están. Abre el zip, y tanto en realidad Mac como en PC ahora, estos son bastante fáciles de implementar. Voy a abrir Open Sans, y voy a hacer doble clic en todas estas. Se va a abrir y puedo dar click en “Instalar”. Ya los he instalado en la mía antes. Hazlo por ambos. Selecciona todos estos, haz doble clic, que se instalará, y podrás empezar a usarlos en Illustrator. Illustrator no necesita ser reiniciado. Simplemente descubrirás que aparecen de manera asombrosa. Abre Sans Condensed y voy a usar el audaz. Creo que estoy usando Condensed Bold. Enfriar. Lo que hemos hecho ahí es que los hemos descargado para usarlos en nuestra computadora, y lo genial astutivo es que puedes usarlos para todo tipo de cosas. No tiene que ser diseño web. Acabas de tener un montón de fuentes geniales ahora para usar. Google te permitirá usar comercialmente. Ahora, lo que se supone que debes hacer es escoger estas y cuando más tarde des tus archivos a un diseñador, o a un diseñador web, o a un desarrollador web, o lo estás haciendo tú mismo usarás esas fuentes de una manera especial cuando se construye el sitio web. Llaman a Google y dicen: “Estamos usando estas fuentes, por favor”, y Google dice, “No te preocupes”, y hace que funcionen en tu sitio web. Por lo que acabamos de descargarlas en este momento para usarlas en nuestro escritorio. Perfecto. Ve a typekit.com, y aquí da click en “Fuentes”. Tienes que iniciar sesión con tu licencia de Creative Cloud, puedes ver mi carita ahí arriba, y puedes escribir un poco de texto de muestra. lo único que necesitas para asegurarte es que Typekit tiene algunos que son solo uso de escritorio, y algunos que también son de uso web. No quieres asegurarte de que esto sea tick de decir. Yo quiero unos que se puedan usar en un sitio web, porque no tiene sentido diseñar uno, no pueden ser. Por aquí, las mismas cosas como Google. Se puede hacer clic en, decir quiero sólo fuentes de scripty, y los separa hacia abajo sólo a las fuentes de script. Yo quiero encontrar tal vez un serif de losa. Se puede hacer lo mismo con lo anchos que son, lo pesados que son, todo tipo de cosas geniales. Sí, se pone un poco más fácil empezar a implementar. Digamos que me encanta esta fuente aquí, este Sutro, y hago clic en ella. Yo decido cuál quiero usar. Quiero usar este relleno de lujo, me encanta. Haga clic en “Sincronizar”. Lo que pasa es en segundo plano, realidad se está instalando en tu máquina, lo cual es bastante loco. Se puede ver que acaba de instalarse ahí, así que Sutro. Es un poco más fácil que las Fuentes de Google. Genial. Puedo empezar a usarlos. Recuerda, el único problema con Typekit es que es una licencia de pago. Lo obtienes gratis para tu Creative Cloud. Por lo que para tu propio personal, es perfecto. Pero al salir con un cliente, vas a tener que explicar que estas fuentes tienen licencia. Es un costo por año, y lo agregarás a tu diseño web solo para asegurarte de que sabrán que hay costos extra para esas fuentes. A menudo, sólo voy a Google Fonts porque no hay costos adicionales. Las bibliotecas de fuentes son diferentes. Si hay una fuente que les encanta y está en Typekit, puedes decirles, sí, puedes usarla pero tiene que ser licenciada. me estoy desmoronando. Por lo que hay otros sitios a los que acudir. Otra es Font Ardilla. Es bastante como ambos, pero en el medio me gusta Google Fonts aunque. Enfriar. Esa fue una explicación particularmente larga de cómo usar fuentes. 21. Video de producción finalizando la navegación, la caja principal y las fuentes: Hola ahí. En este video de producción, video de producción sólo significa que realmente no estoy haciendo nada nuevo, solo voy a estar llenando los agujeros para nuestro diseño. Puedes ver o puedes saltarte a lo largo, está bien. Esto es a lo que vamos a llegar al final de este video, vamos a estar poniendo algunas garrapatas y algunas cajas de colores, pero sabemos poner garrapatas y cajas de colores, y así que vamos a hacerlo ahora. Enfriar. En primer lugar es dibujar aquí nuestros pequeños botones en la parte superior. Podrías simplemente dejarlos como texto, pero lo que quiero hacer es agarrar mi herramienta Rectángulo y sacar una cosa de botón que encaje ahí dentro. Ahora voy a usar mis colores que descargamos, colores del portafolio BYOL. ¿ De qué color quiero que sea? El verde está fresco. Voy a hacer clic derecho en. Ahora, antes de que incluso arreglemos lo que hay en la parte de atrás, los enviamos a la parte de atrás. Adiós. Está detrás de la navegación, sólo lo veo ahí. Entonces lo he deshecho. Por lo que va a deshacer. Lo que voy a hacer es, hay una opción aquí dentro que dice Organizar y enviar, en lugar de enviar para atrás, que es todo el camino por atrás, enviar hacia atrás, justo atrás atrás como el tipo que está frente a él. ¿ Qué está pasando aquí? Sí, tengo el tamaño correcto. Voy a hacer una copia de este tipo y mantenerlos golpeados juntos, pero voy a usar ese color rojo para ello. Hago clic derecho, “Organizar”, “Enviar hacia atrás”. A veces hay un par de chicos en el medio y Retrocesos no funciona. Tienes que seguir adelante, “Enviar hacia atrás”. Se puede ver que hay un atajo, Enviar hacia atrás. Voy a hacer eso hasta que lo resuelva todo. Genial. Ese tipo necesita estar en el centro. Enfriar. Vamos a alejar un poco, "Command-1", para que sea de tamaño real. En realidad voy a alejarme una vez más. Lo voy a poner en mi gran caja de héroe en la parte superior aquí. Voy a volver a encender mis guías, voy a agarrar la herramienta Rectángulo, y vamos a ver imágenes en un video separado, pero traigo mi imagen ahora, pero sólo vamos a poner en una caja grande de color, enviarlo a la parte de atrás, y mira poner en el resto de mi tipo. Entonces, construyámoslo a cabo. Voy a agarrar mi herramienta Tipo. Voy a arrastrar mi caja, va a cubrir, no exactamente seguro cuántos todavía, pero definitivamente sé que tiene mi texto, mi inspirador, increíble, me contrata como entrenador. Por supuesto que es desigual. Diseñador UX. Genial. Tamaño de fuente, me gusta. Se ve bien. Va a ser blanco porque voy a poner una imagen razonablemente oscura detrás de ella. En realidad, va a ser ese blanquecino que he estado usando. Ese blanquecino también está aquí. Está en el color, por lo que puedes usar cualquiera de ellos. Genial. Lo que quiero hacer es probablemente querer insertarlo por una de estas columnas. Eso se puede hacer en el diseño web bastante fácil. Se puede decir dejar ese vacío y luego iniciar este cuadro de texto un poco más adelante. Voy a tener algún poquito de tipo por encima de eso, voy a dejar eso más adelante en el tutorial. Este tipo necesita bajar un poco. Estoy usando mi flecha negra solo para arrastrarla un poco hacia abajo. Voy a poner una línea blanca debajo de ella. ¿ Por qué? Sólo porque me gusta la idea de ello. Por lo que voy a conseguir mi herramienta Segmento de Línea. Por el momento, realmente no importa qué relleno tenga, pero definitivamente importa qué trazo de color tengamos. Vuelvo a usar ese blanquecino. Voy a hacer clic en él al otro lado. Se va a ir a través de estos. Voy a sostener “Shift” para asegurarme de que vaya recto. ¿Cuántos pixeles? Probablemente sólo un píxel se va a quedar bien. Si apago y enciendo las rejillas solo para tener una idea de todo. Sí, me gusta ahí. Ahora voy a hacer un botón debajo. Se va a ver exactamente igual que esto, así que voy a robarlo, copiarlo y pegarlo. Va a ser mi llamado a la acción. Contrátame, por favor. Voy a acercarme un poco. Probablemente voy a usar el mismo tamaño de fuente. Éste va a decir: “Hablemos”. Creo que todos escriben cosas como : “Vamos a tomar un café”, “Déjame ayudarte”. Se puede pensar en su propia versión coloquial de desarme. Algo que he notado cuando estoy aquí, ¿ puedes ver que esto es un stroker por fuera? He hecho clic en esto. En realidad hay ese blanquecino alrededor del exterior de esto. Tiene el relleno verde, pero voy a convertir el blanco roto a una línea roja, lo que significa que no tiene trazo y se alinea. Todavía no se alinea a la perfección, ¿verdad? A veces arrástrelo, arrastrándolo hacia atrás. Eso se ve perfecto ahora. Encantador. ¿Algo más que quiera hacer? No, eso tiene mucho de las cosas centrales que quiero ahí dentro. En realidad, una última cosa mientras pasamos siglos haciendo esto es que voy a copiar y pegar ese texto. Yo lo voy a poner aquí arriba y hay una mejor copia que quiero entrar ahí. Voy a tener esta cosita que dice: “Actualmente estoy disponible para trabajar”. Voy a estar usando ese color amarillento y lo voy a mover. Voy a poner aquí una elipse, como un pequeño círculo. Voy a poner una garrapata. Guardaremos la garrapata para más adelante porque te voy a mostrar cómo hacer eso en la parte de símbolos de la serie de videos. Pero para el círculo, mantenga presionada la herramienta Rectángulo, agarra la herramienta Elipse, y si solo arrastras una al azar, va a estar bien. Seguramente lo harás ala. Pero si mantienes pulsado Shift mientras lo arrastras hacia fuera, lo convertirá en un círculo perfecto mientras conduces. Si estuvieras conduciendo. Ha sido un día largo. Entonces va a ser un círculo aquí dentro. Vamos a llenarlo con este verde más claro. Va a tener más sentido cuando cambiemos esta imagen de fondo. “ Comando-1". Todo es del tamaño correcto, creo. Siento que podría ser que el círculo es grande, pero lo cambiaremos más adelante. Eso es suficiente para el video de producción. Salgamos y empecemos a hacer el siguiente bit. 22. Imágenes gratuitas vs. libres de derechos: Hola ahí. En este video, vamos a ver de dónde obtener imágenes gratuitas y cuáles son las imágenes libres de regalías. Empezaremos con las imágenes gratuitas. Buenos sitios a los que ir. El mejor lugar es probablemente éste llamado freeimages.com. Aquí hay muchas cosas, y solo necesitas un login y puedes usarlas comercialmente, lo cual es bastante genial. Si necesitaba una foto de una rosa, lo que necesitas hacer es ignorar estas premium por aquí. Así es como, supongo que el sitio hace su dinero, es que te muestra algunas cosas que son medio decentes y luego va, ¿qué pasa con estas? Estos son los que vas a terminar pagando, y no hay problema con eso. Pero si estás buscando gratis, mi gran consejo para usar cualquiera de los sitios gratuitos es obvio. Del lado aquí, dicen relevancia. La mayoría de ellos empezarán con eso. Se quiere ir al que dice Más Descargado. Encuentro que traerá la crema del cultivo a la cima. Las que más se habían descargado. Se puede ver que son todos de tamaños variados. Algunos de ellos son realmente grandes y algunos de ellos son bastante pequeños, como este de aquí es bastante bonito, es un anillo de bodas que se cortan en blanco, y aquí freeimages.com. Ahora otro sitio fresco al que ir, esto es en realidad igual que un directorio para muchas otras de las imágenes más pequeñas, gratuitas, y sé que este es un gran enlace largo hasta la parte superior aquí, dejaré un enlace en la descripción en algún lugar, pero si solo Google “Shopify 22 sitios web impresionantes para impresionantes imágenes de stock gratis”, terminarás aquí. Lo que realmente es genial es que bastante nicho como algunos de los sitios van a poner una imagen gratis al día, pero algunos de ellos son realmente hermosos. He estado mirando a estos chicos de aquí, Gratisografía. Este tipo, es fotógrafo, Ryan McGuire. Hace algunas cosas realmente geniales y permite que se usen comercialmente. Bien hecho, Ryan. Sí, puedes pasar. Aquí hay más cosas comerciales con modelos, mientras que, digamos, freeimages.com a menudo es simplemente una biblioteca de valores estandarizada real. Echa un vistazo a esa lista y aquí hay muchas cosas diferentes, pero Free Images es el lugar principal. En cuanto a lo libre de regalías, libre de regalías no significa libre, solo significa que pagas por ello una vez y llegas a usarlo una y otra vez. Van a oscilar entre $20 y $40 US para comprar y luego llegas a reutilizarlos. Son tres jugadores principales: iStock, Shutterstock, y este de aquí llamado Adobe Stock. Todos tienen una biblioteca muy similar haciendo algo similar. Estoy usando Adobe Stock principalmente a la ligera porque se vincula tan bien con la Creative Cloud, y eso es probable que sea su mayor ventaja sobre los demás. Todos tienen interfaces impresionantes ligeramente diferentes y así que usa la que más te guste. Estoy usando Adobe Stock para ahorrar para afuera. Yo quiero poner en algunas imágenes de diseñadores. Por lo que acabo de escribir en diseñador. En realidad, pongamos en diseñador gráfico, y así surge. Bastante similar. Entonces lo que voy a hacer es agarrar cosas de diseño de aspecto inspirador, y lo que voy a hacer es, recuerda, antes en este tutorial, he hecho esta biblioteca llamada, o está ahí Illustrator? No sé, el portafolio de Dan es como lo llamo yo. Por lo que he guardado un adelanto a las carteras de Dan. Si me meto en Illustrator ahora mismo, está bien. Tenemos a Illustrator, y le doy a este pequeño botón Actualizar, ahí está. El bonito de esto es que aún no lo he pagado, se puede ver que tiene la marca de agua, pero es una linda copia grande y puedo empezar presentarle estos a mi cliente y decir estas son las imágenes, esto es lo que soy pensando y darles un costo por esas imágenes también. Lo que es realmente bonito es que si empiezo a diseñar esto, y empiezo a ajustarlo y recortarlo y cambiar los colores, lo que puedo hacer es aquí puedo hacer clic derecho en él y simplemente decir License Image, y si tengo, digamos, un suscripción a Adobe Stock y puedo obtener 10 imágenes al mes por algo así como $20 US, algo alrededor de eso, y simplemente lo licenciaría y actualizaría esta cosa. No tengo que leerlo ni volver a vincularlo o reimportarlo o cualquiera de ese jazz, así que es bastante genial. Lo que voy a hacer por esto es, es que voy a pasar y agarrar algunas imágenes de diseñador. Voy a teclear ux, mi palabra favorita. Voy a decir que sí, quiero que esa sea parte de ella, y se puede ver que hay un buy one, pero también hay sólo una vista previa de guardado. Voy a guardar esa vista previa y voy a guardar esa vista previa. Yo voy a salvar a esa. Te voy a salvar, y te salvaré. Estoy fingiendo que este es mi portafolio. Totalmente no he hecho estas cosas, solo las estoy descargando. Ya verás aquí, esperemos, deberíamos conseguir un montón de pequeñas imágenes para que podamos empezar a trabajar con. Está bien. Entonces, ya sea usando Adobe Stock, aquí habrá un enlace en la pantalla para ir a Adobe Stock. Si nunca lo has usado antes y quieres registrarte, usa mi pequeño enlace. ¿ Por qué? Porque me sale un corte de Adobe. No te cuesta nada más, pero me dan un poco de un recorte de tu suscripción. Es s ganar-ganar, ganar para mí principalmente. Pero sí, prueba Adobe Stock o iStock es realmente bueno y Shutterstock es otro. A lo mejor ir y comparar esos y ver cuál quieres usar. Imágenes gratis llegaron a freeimages.com, y si quieres conseguir unas libres de regalías que puedes comprar y usar una y otra vez para muchos proyectos diferentes, ve a stock.adobe.com. 23. Añadir enlaces Recortar y enmascarar imágenes en Illustrator: En este video, lo que vamos a hacer es, vamos a traer algunas imágenes y vamos a ver cómo recortarlas en estas miniaturas aquí. Miraremos tanto las plazas como los círculos. Vámonos. En primer lugar, vamos a encender nuestras guías, recuerda que es Comando, punto y coma o si estás en una PC, es Control, punto y coma. Voy a desplazarme un poco hacia abajo, voy a alejarme un poco. Lo que quiero hacer es añadir mis miniaturas como lo hicimos en nuestro wireframe. Voy a agarrar la Herramienta Rectángulo y voy a sacar mi puño uno hacia fuera. Ahí está mi primera miniatura, va a cubrir 1, 2, 3, 4 columnas y ahora quiero poner una imagen dentro de ella. En realidad, lo que podría hacer es, podría darle un color de relleno, no necesita un color de relleno solo lo estoy haciendo, así que es útil que lo veas. Voy a duplicar a estos tipos por aquí. Voy a tener 1, 2, 3. Agradable. Estoy sosteniendo Shift seleccionar todo esto. Tengo mi flecha negra. Tengo presionada mi tecla Alt, recuerda, para arrastrar y copiar al mismo tiempo, o simplemente puedes ir Control C, Control V. Lo que quiero hacer es que ahora quiero poner en estas imágenes. Para importar una imagen a Illustrator, subimos a File y bajamos a algo llamado Place. Utilizan lugar en lugar de importar solo para confundir a todos. Ve a Archivar, Colocar, y luego tus archivos de ejercicio. Tengo algunas imágenes. he descargado en el tutorial anterior y otras versiones con marca de agua, obviamente. Si quieres usar estos, tienes que irte y pagarlos en Adobe Stock, pero aquí tienes unos de marca de agua. Lo que voy a hacer es que puedas traerlos uno por uno. Puedo traer en miniatura 1, Colocar, click unos, va a salir a través ya que es de tamaño completo. Eso está bien para estas versiones de miniaturas o estas versiones de marca de agua, pero a veces pueden ser bastante grandes. Lo que puedes hacer es ir a File, Place y lo que prefiero hacer es escoger el primero y simplemente arrastrarlo hacia fuera. Estará limitando la altura y el ancho. Para llegar a un tamaño áspero que quieras que sea primero. Puedes traer lotes a la vez Archivo, Lugar, y puedes agarrar a todos estos chicos, todas nuestras miniaturas y puedes ir a hacer click, puedes hacer clic en ti, puedes hacer clic en ti, puedes hacer clic en ti, tú, tú, tú, te consigues la idea. Puedes traerlos, todos uno tras otro o si has hecho lo que he hecho y tienes algunas miniaturas de tu biblioteca, solo puedes arrastrarlas desde aquí. De cualquier manera así es como traer tus imágenes. Voy a arrastrar en mi biblioteca de valores imágenes desde aquí y vamos a ver recortarlas a este rectángulo. Arrástrelos, alinearlos y redimensionarlos como quiero ponerlos en la caja. Porque ahora lo que vamos a hacer es recortarlos hasta esa miniatura. Voy a sostener la tecla Mayús y eso la hace escalar manera responsiva para que venga la altura y el ancho y lo voy a conseguir más o menos. Puedo ajustar esto después. Entonces lo que necesito hacer, es que necesito seleccionarlo y la caja detrás de él. La forma más fácil de hacer es, porque no hay nada por aquí puedo hacer clic en mantener y arrastrar. Ya ves que solo puedo arrastrar por encima de estos dos y los consigo a los dos. El atajo es Comando 7 o Control 7 y aprenderás ese para recortar. El largo camino está bajo Objeto y está bajo Máscara de recorte y Make. Eso es que se pone un poco duro, tú crees que lo voy a recortar o lo voy a enmascarar. Se llama máscara de recorte en Illustrator. se puede ver, hay un atajo Comando 7. Lo que va a pasar es; no va a funcionar. Porque en realidad esto necesita estar detrás de nuestra forma que queremos recortar. Voy a hacer clic con el botón derecho en él e ir a Organizar y Enviar a Atrás. Voy a fingir que lo hice a propósito, pero no lo olvidé. Ahora Comando 7. Mira eso, suave. Hagamos una más. Vamos a arrastrarlo dentro. Sostén pulsado Shift, bácalo para que sea más o menos del tamaño correcto. Llévenlo ahí. A mí me parece bien algún cultivo ligero interesante así que no me importa que no sea perfecto ahí dentro, y recuerda, no te olvides, tiene que estar en la parte de atrás. Seleccione ambos y, a continuación, Comando 7 o Control 7 en un PC. Digamos que no te gusta esta cosecha estás como, sí, pensé que iba a estar bien pero solo parece que está apagado. Lo que puedes hacer es no tener nada seleccionado con la flecha negra, haciendo clic en el fondo y dar click en él una vez y obtienes la plaza. Si haces doble clic en él, lo que pasa es que entras en esta cosa llamada Modo Aislamiento, y solo significa que estoy dentro. Piensa en la Capa 1 es casa-base, eso está aquí atrás, pero cuando hago doble clic en algo, voy dentro de este grupo. Se llama grupo de clips. Significa que puedo empezar a trabajar en esto separado de la plaza del exterior. Es bueno tener cuidado con cómo lo arrastras. Ya puedes ver puedo arrastrar la imagen por el exterior o puedo arrastrar el centro de esto o puedo arrastrar el borde del rectángulo. Puedes arrastrar ambos bits en esta vista, lo cual es un poco confuso. Simplemente recuerda si agarras el centro, arrastras la imagen y si agarras el borde, arrastras esta plaza por fuera. Entonces depende de ti lo que quieras hacer. Voy a arrastrar esto aquí. Puedes redimensionarlo aún desde aquí. Déjame ir por un clip grande. Esta va a ser una imagen vectorial, va a ser. De todos modos, para moverte a la parte de atrás a casa-base es puedes hacer clic en esta flecha un par de veces o simplemente hacer doble clic en este no hay espacio por aquí, esta zona blanca. Genial. Vamos a pasar y hacer esto. Te vamos a agarrar. Voy a hacer zoom a través de él ahora. No vamos a hacer círculos para este en particular, pero lo haré en el segundo. Pongamos a este tipo el de atrás, clip tal vez por aquí, Comando 7. Agradable. Digamos que quiero hacer uno para círculo o círculo redondeado o polígono o una estrella, no importa. Solo finjamos que voy a hacer una versión circular. Estoy dibujando en mi lindo círculo. Yo le estoy dando un color de relleno. No necesita uno. Simplemente hace que sea más fácil para nosotros verlo. Voy a arrastrar esta imagen, ponerla encima. Flecha negra, ponlo arriba, asegúrate de que esté debajo, selecciona ambos, Comando 7, puedes ver que obtienes exactamente el mismo efecto. Si ya eres útil con una Herramienta Pluma, más adelante vamos a ver la Herramienta Pluma. Pero puedes dibujar cualquier forma y hacer exactamente lo mismo, usa eso como caja de recorte. Pero si necesitas que te enseñen no te preocupes, lo vamos a hacer en otro episodio, bueno otro video al menos. Hagamos las últimas partes. Cuales que utilizo. Ya no me gusta este tipo. Lo tenemos. Comando 7. Se puede ver, se puede poner un poco de flujo después de un rato. Eres un poco grande, agáchate. Vuelves, tú, tú. Comando 7 par. El último fue ese tipo de ahí. Queremos ser un poco más grandes. ¿ Qué atajo estoy usando ahí? Tan solo para poner las cosas detrás de la otra, y lo miramos antes es el, si selecciono algo no quiero pegarlo atrás, Organizar, Enviar a Atrás ¿lo puedes ver ahí? Es Comando, Turno, Corchete Cuadrado, Enviar a Atrás. Se puede ver ese corchete cuadrado. En un PC será Shift and Control, Square Bracket. Algunos de los atajos que aprendes de memoria y otros no. Lo último que hago es que quiero agregar un poco de trazo fuera solo para darles una mejor consistencia. He seleccionado mi flecha negra las seleccioné todas. Te darás cuenta de que el trazo no ha aparecido aquí arriba porque ahora se les está llamando grupo Clip en lugar de nuestras cajas regulares. Podemos abrir Ventana y bajar a Stroke. Ahí está y le voy a dar un Stroke de tal vez, tiene que ser un píxel o superior, no puede ser nada más bajo que eso, no puede imprimir porque estamos lidiando con píxeles aquí. Genial. ¿De qué color debe ser? Voy a hacer, ¿dónde está mi color de trazo? Voy a abrir Ventana y voy a Color. Aquí está abajo de abajo aquí. Mi color de trazo es negro. Probablemente sólo voy a escoger, no quiero escoger un color gris. Probablemente te encuentres con este problema si eres un usuario experimentado de Illustrator, es RGB es difícil de recoger gris si tienes que igualarlos a todos. La forma más fácil de elegir un gris es cambiar tus colores de RGB a este código Saturación y Brillo de tono. Esto es realmente fácil. Significa que simplemente el brillo se desliza hacia arriba y hacia abajo. Voy a usar un poco de gris. Agradable. A mis guías fuera, ¿cómo se ve? Se ve hermoso excepto que el tablero de arte necesita ser extendido y voy a extender la mente dejar de fumar un poco porque tengo mi pie de página y las cosas para pegarme ahí. Eso es todo por nuestro recorte en enmascaramiento de imágenes. Repasemos el siguiente video. 24. Lavado de imágenes en Illustrator con fondo de color: Oye, ahí. En este video, vamos a hacer esta pequeña imagen en el fondo aquí donde es un fondo completamente elástico, y está lavado, y tiene un tono verde. Veremos cómo hacer eso en Illustrator. Muy bien, primero arriba, vamos a traer nuestra imagen. Ahora hay dos formas de traerlo, podemos arrastrarlo desde nuestra biblioteca si tenemos dentro, o podemos ir a File, Place. Ahora esto alterará cómo lo hacemos, digamos, en blanco y negro. Yo estoy trayendo la imagen, estoy arrastrando bonita y grande, genial. Si lo hago de esta manera, se vuelve muy fácil convertir a blanco y negro. Te mostraré que de vez en cuando veremos algunas de estas otras imágenes que están ligadas a decir, tu biblioteca, y no se vuelven más difíciles, son sólo un paso extra. Lo que vamos a hacer es que lo vamos a recortar en donde lo necesitemos. En realidad, hagámoslo en blanco y negro primero antes de ir y recortarlo en ese cuadrado de fondo. Para ello, es bastante fácil, tenlo seleccionado y vaya a “Editar”, “Editar colores” y “Convertir a escala de grises”. Ahora no hay mucho control en Illustrator cómo conviertes a escala de grises, simplemente va, tu escala de grises, y esperar lo mejor. Si quieres ser un poco más controlando sobre lo que va, diferentes colores van diferentes grises, puedes hacer esto en Photoshop. Ahora este no es un curso de Photoshop, así que vamos a dejar eso fuera. Pero si realmente necesitas ese control, recurre a Photoshop y haz una capa de ajuste, está debajo de capa, capas de ajuste y se llama blanco y negro. Obtienes mucho control sobre cómo convertirlo en blanco y negro, guárdelo luego traerlo a Illustrator. Eso es bastante fácil aunque en Illustrator y estoy bastante contento con los resultados. Si quiero hacer exactamente lo mismo, te voy a sacar ahí arriba. Yo quiero hacer exactamente lo mismo a, digamos, esta gráfica de aquí. Porque está atado a mi biblioteca, no me deja hacer tanto. Entonces si hago doble clic en él, vuelve a hacer doble clic en él, tengo mi imagen. Si voy a exactamente lo mismo, “Editar” y voy a “Editar colores”, notarás que está gris. Es solo una de las cosas que sucede si estás usando cosas de tu biblioteca porque está conectada. Si actualizas tu elemento de biblioteca, se actualiza aquí, por lo que no quiere que te metas con él. Para meterse con ello, es, solo tienes que hacer clic en “Emblar”. Sigue haciendo doble clic en él hasta que tengas tu imagen. Después ve a “Incrustar” y luego notarás que puedes “Editar”, “Editar colores” y “Convertir a escala de grises”. Voy a deshacer porque no quiero convertirlo a escala de grises. Yo solo quiero que sepas si tienes ese problema, podría ser un logo por el que estás tratando de hacerlo, cualquier cosa que hayas importado. Entonces tenemos en escala de grises. Voy a ponerlo más o menos donde lo quiero, y recuerda que tiene que estar atrás. Entonces seleccionaré ambos y voy a usar mi atajo, Command, siete en un Mac, y Control, siete en un PC. Es lo que quiero. Pero lo que quiero hacer es darle ese aspecto verdoso y oscuro, y hay dos etapas para ello. Agarras tu herramienta de rectángulo. Voy a dibujar un rectángulo que cubre todo el documento ahí, y le voy a dar un relleno de negro, y le voy a dar un trazo de ninguno, que ya es, genial, y vamos a bajar la opacidad . Puedes bajar la opacidad de algunas maneras diferentes en Illustrator, vamos a usar esta a lo largo de la parte superior aquí. Simplemente vamos a bajar hasta que estemos contentos con los antecedentes, depende de lo que quieras. Ahora obviamente, esto está por encima de todo, así que lo que voy a hacer es ir a hacer clic derecho y voy a ir a “Organizar”, en lugar de ir todo el camino hacia atrás, puedo ir todo el camino hacia atrás. Ahora está detrás de esta imagen. Entonces voy a dar click en esta imagen y decir, estás en la parte de atrás. Ahí vamos. Está bien, así que se ve mejor. Yo quiero agregarle ese tinte verde. Entonces podrías dejarlo aquí y decidir en realidad, voy a subir la opacidad. Voy a tener este fondo lavado, mirada negra, y eso está bien. Lo siguiente que quiero hacer sin embargo, es dejar de jugar con los colores, Dan, es que voy a crear un nuevo rectángulo encima de todo esto. Voy a desseleccionar primero en segundo plano. Así flecha negra haga clic en el fondo luego agarrar mi herramienta de rectángulo, lo hace más fácil. Dibuja un rectángulo en la parte superior. Voy a hacer de esto mi verde. Ahora necesito dejarlo atrás, vale, sándwiched. Yo lo quiero frente a la caja negra y la imagen pero detrás de todo el texto. Ahí hay un par de las diferentes formas. Diferentes entrenadores te mostrarán diferentes maneras. Lo que encuentro más fácil de hacer es simplemente moverlo porque es más fácil volver a juntarse, es, en realidad, voy a mandar a este tipo a la parte de atrás. Entonces tú, la caja verde, vas a la parte de atrás. Entonces estos chicos, quería traerlo por encima de estos dos. Entonces te voy a agarrar. Acabo de deshacerlas todas para poder verlas todas, así puedo hacer clic en ti, mantener “Shift” agarrar la caja negra, hacer clic con el botón derecho en ambos y enviarla de vuelta. El cuadro verde está en la parte de atrás ahora. Estos tipos están detrás de esa caja verde, pero frente a este texto. De acuerdo, así es como lo hago yo. Hay diferentes maneras. Estoy usando el panel de capas. Esa es mi manera. Ahora lo que quiero hacer es, obviamente, esto no funciona del todo. Yo sólo estoy cubriendo todo. Vamos a usar algo llamado modo capa, y eso nos permite, solo podrías bajar la opacidad, y eso funciona. Pero no me da la mirada que quiero. De verdad quiero este negro fuerte con relleno verde en los bordes. De acuerdo, así que eso funcionaría. Pero lo que voy a hacer es algo llamado modo capa. Lo haces haciendo haciendo clic en la palabra “Opacidad” en la parte superior de ahí. Tan flecha negra, haga clic en cuadro verde, haga clic en “Opacidad”, y aquí arriba donde dice Normal, eso hace exactamente lo que crees que fue. Se puede jugar con estos, para que se pueda ver. Es una forma de que la caja verde interactúe con las cosas detrás de ella. En lugar de simplemente usar la opacidad, puedes usar estos otros modos. Todos son ligeramente diferentes, y si tienes una imagen diferente con diferentes colores, vas a encontrar un modo de capa diferente que va a funcionar. Voy a usar Soft Light principalmente porque ya he jugado con esto y me gusta. Pero la luz suave es un poco fuerte, así que lo que voy a hacer es que sólo voy a bajar la opacidad de la misma. Entonces estoy usando el modo capa y la opacidad y se ve, me gusta mucho mejor que simplemente bajar la opacidad. Se puede ver que aún tiene a los vívidos negros en el fondo, pero también está tintado, así que todavía puedo meter ese verde ahí dentro, llenar los agujeros con verde. Muy bien, amigos míos, así es como lavan un fondo y le agregan un poco de color también al mismo tiempo. Muy bien, al siguiente video. 25. Cómo usar capas en Illustrator 2017: ¿ Cómo te va campus? En este video, vamos a ver las capas en Illustrator y lo que vamos a hacer es terminar luciendo así donde tenemos una capa con todas nuestras ilustraciones, vale, y una capa con la capa de fondo. Lo genial de la capa de fondo es que está bloqueada. Aquí hay un icono de bloqueo, así que no podemos moverlo. Entonces vamos a hacer eso ahora. Está bien. Entonces lo primero que quiero hacer es no voy a usar el blanco del fondo aquí, ese es un blanco puro de Illustrator. Lo que quiero hacer es en realidad que quiero ponerlo como mi blanquecino que estaría usando aquí. Está bien. Entonces voy a agarrar la herramienta de rectángulo y puedes actualizar el color de art-board. Está bien. Entonces tenemos que realmente dibujar manualmente una caja y darle ese relleno, entonces voy a usar mi flecha negra, hacer clic derecho en ella, arreglarla, enviarla de vuelta y solo asegurarme de que no tiene trazo en el exterior, solo estoy usando este gris aquí. Está bien. Entonces ese va a ser mi color de fondo. Podrías pegarlo detrás de todo solo para asegurarte de que cubra todo. ¿ De acuerdo? Sí. No hay forma de volver a colorear este tablero de arte. Entonces lo que quiero hacer ahora es jugar con las capas. Porque me resulta realmente difícil ahora empezar a mover cosas y accidentalmente agarré los fondos. Está bien. Entonces es más fácil porque nunca quiero que estas cosas se muevan. Entonces quiero que estos vidrios se peguen donde están y no se muevan y la forma más fácil de hacerlo es pegarlos en su propia capa, bien y bloquear esa capa. Está bien. Entonces en su panel Capas, vaya a Ventana, vaya a Capas, ¿dónde están las capas? Ahí estás. Está bien. Por defecto, dada una capa, es muy común estar trabajando en Illustrator y solo si tienen una capa. No te lo sudes si solo tienes una, todos saben por Photoshop terminarás con cientos de capas pero en Illustrator, si lo sabes me refiero a que eso sería sólo el uno, eso no está mal, ¿de acuerdo? Entonces no hay nada de malo en eso. Estamos sin embargo, vamos a hacer una nueva capa. Este pequeño apareció página aquí, ¿de acuerdo? Vamos a hacer doble clic en él y llamarlo fondo, está bien y no hay nada en el fondo. Se puede ver esa pequeña miniatura ahí, no tiene nada en ella. Lo que quiero hacer es seleccionar todo lo que quiero mover ahí y porque estoy arrastrando una caja alrededor de todos estos, está agarrado mi caja verde, la caja negra, la imagen detrás de ella y esta caja gris todos juntos en una gran go, que es impresionante. Lo que queremos hacer es arrastrarlos a esta capa de fondo, bien y de la manera más fácil, ve este pequeño punto aquí, bien, esta casita, click y arrástrelo, que mueve todo lo que había seleccionado a mi fondo capa. Enfriar. Ahora voy a cerrarlo. Ahora el icono de bloqueo está destinado a saber aleatoriamente que ese es el agujero de bloqueo, ¿de acuerdo? Da click en eso, está bien y voy a bloquear esa capa y no se pueden mover ahora, ¿de acuerdo? El único problema es este y que está arriba, ¿de acuerdo? Se pueden ver los fondos por encima de mi capa uno. Hagamos doble clic en la capa uno y llamemos a esta obra de arte o palabra de arte y luego solo arrastra a este tipo click hold, drag, así que está debajo. Ahora. ¿De acuerdo? Doy clic en la ilustración, así que esa es mi capa activa. Mi capa de fondo ahora es, vale, inseleccionable, así que puedo ir y seleccionar a todos estos tipos, moverlos sin seleccionar el fondo. Supongo que ese es el punto de usar las capas aquí. El otro bonito de esto es que puedes apagar esa capa, ves el globo ocular. Podrías encender y apagar toda tu capa de fondo, de acuerdo, con solo hacer clic en el pequeño globo ocular de ahí. Está bien. Amigos míos, así es como usar capas en Illustrator. Encendido al siguiente video. 26. Utilizando Adobe Market para íconos gratuitos: En este video, vamos a hacer trampa. Necesitamos una garrapata y vamos a simplemente robarla, robar es la palabra equivocada, vamos a apropiarla de Creative Cloud Marketplace y hay un montón de cosas buenas ahí dentro que podemos usar y se nos permite usar legalmente y todo es escalable en vectorizar esto. Simplemente nos salva de dibujarlo. Vayamos a ver eso ahora. Para llegar al Adobe Market, tenemos instalada esta aplicación de Creative Cloud, así que si no la tienes instalada ve a adobe.com/downloads y obtén la App Creative Cloud. Ese es el que buscas descargar. Probablemente ya esté instalado en tu máquina y en un Mac está arriba en este ícono superior aquí arriba. Si estás en un PC, está en la parte inferior derecha, abajo aquí. Estás buscando esta cosa indirectiva de la Nube. Se quiere ir a Activos y se quiere ir a Mercado. Miramos esto antes. El Mercado es realmente, realmente bueno para los iconos. Entonces voy a dar clic aquí, y decir que necesitamos una garrapata. “ Actualmente estoy disponible para trabajar”, podría tener una garrapata y una cruz. Entonces quiero ponerme en garrapata y pasar y solo escoger la garrapata que quiero, y aquí hay un montón de opciones. El genial de ellos es que son vectores escalables. Este de aquí me queda bien, voy a descargarlo a mi Portafolio de Dan, perfecto. Ahí está, descargando ahí. Yo lo voy a arrastrar. Voy a arrastrarlo de nuevo. El motivo por el que no está arrastrando es, podrías haberte encontrado con este problema también, es que estoy en la capa llamada Background y está bloqueado. Pretendo que puse eso ahí a propósito solo para mostrarte, pero no lo hice. Pasa a los mejores de nosotros. Más allá de tu capa de Artwork , la versión desbloqueada, la voy a arrastrar a esta yacía aquí. Lo que vamos a ver es que hemos descargado una imagen y se puede ver que no es muy buena porque está pixelando cuando me hago más grande. Entonces cuando los estés descargando, ve a Marketplace, y cuando haces clic en ellos, éste se hizo en Photoshop, no es bueno. Vamos a dar click en este de aquí, este es un SVG. Recuerda que SVG es impresionante gráficos vectoriales escalables, necesita ser AI, EPS, o SVG y va a trabajar. A pesar de que, no necesito esto, está bien. Voy a ir a Descargar y voy a descargarlo al portafolio de Dan, encantador. Aquí viene. [ inaudible] Espere a que descargue, ahí está. Está bien, ahí está. Lo genial de esto ahora es que puedes ver al instante que tiene la línea azul a su alrededor, pero puedes ver que es escalable, lo cual es realmente genial. Lo que me gustaría hacer ahora es que voy a hacer clic derecho en él, Desagrupar y hacer clic derecho, Desagrupar otra vez. Dependiendo de cómo sean de grupo, voy a borrar estos, [inaudibles] y ahora me tengo un poco de garrapata. Entonces lo he desagrupado dos veces. Voy a darle un color de relleno de mi blanquecino y lo voy a escalar hacia abajo y usarlo como mi gráfico. Voy a acercar, manteniendo pulsado Shift en las esquinas, recuerda, y ahí está mi pequeña garrapata. El genial de usar Adobe Market es que puedes encontrar cosas vectoriales ahí dentro y puedes usarlo comercialmente y podrías dibujar tu propia garrapata. Haremos esto en un poco, mostrándote cómo usar el Pinto, cosas así, lo uso para todo tipo de iconos, solo más fácil encontrarlos ahí dentro. Muy bien, así es como usar Adobe Market para pedir prestado iconos para usar para tus diseños. 27. Utilizar el buscador de iconos para los iconos sociales de la interfaz de usuario del sitio web: Hola, en este video, lo que vamos a hacer es que vamos a conseguir estas imágenes, estos iconos, estos iconos sociales, y los vamos a conseguir gratis desde un lugar llamado Iconfinder. Entonces vamos a salir y cambiar los colores para que coincida con nuestro diseño. Vámonos. Primer paso necesitamos usar Iconfinder, y para salir y encontrar nuestros iconos. Me encanta Iconfinder, y hay muchos iconos gratis en línea, pero hay tantas cosas realmente malas por ahí que es difícil tamizar y la gente en Iconfinder lo ha hecho por nosotros. Entonces vamos a teclear, digamos social. Este podría ser tu hogar, podrían ser productos, ícono que estás buscando hacer. De lo que necesitas asegurarte es que depende como tengo el mío de uso libre y comercial. No hay enlace de atrás. Eso sólo significa que tengo que pagarlo, no tengo que añadir un enlace pensando en ellos, eso depende totalmente de ti de cómo quieres trabajar. Yo quiero asegurarme de que el mío también sea Vector, porque no quiero ninguna pixelación, quiero escalar bien. Pero los precios son bastante baratos, como si miro a Cualquiera, los iconos son comprar por un dólar. Por lo que no van a romper el banco si no hay uno que puedas telefonear en la opción gratuita ir por pagarlo y que respalden el sitio también. Lo que busco es Vector, Libre, Sin enlace de vuelta. Para que me pueda ir y usarla. Lo genial de ello es que no sólo tiene muchos iconos. Al hacer clic en uno de ellos, a menudo tiene una parte de un grupo más grande y eso es lo que realmente es útil. Es conseguir que todos tengan el mismo aspecto y tener un aspecto y una sensación similar a todos ellos, así que me encanta eso de esta diapositiva de aquí. Esta es una prueba para ti. Vamos a descargar, digamos, un grupo de estos. ¿ Qué versión debo obtener el SVG, el PNG el AI, o el CSH? El DW forma. ¿Cuál quiero? O bien el SVG, AI será perfecto para nosotros. Esta versión de Photoshop también funciona, pero la PNG, no es escalable. Entonces queremos seguir esa constricción por dentro y por fuera, y estos SVG e AI uno, nos va a permitir recolorearlos. Porque esta mayor parte del color no está haciendo por mí y tampoco este azul no está coincidiendo con nuestros colores. Lo que puedes hacer es pasar y descargar todas las que quieras. Ya he descargado algunos para nosotros para alcobas, están en tus archivos de ejercicios, y vamos a ir a traerlos ahora e ir a cambiar los colores. Gracias Iconfinder, eres impresionante. Lo que voy a hacer es antes que nada, voy a decirle a mis guías en una pequeña línea que atraviesa la parte inferior aquí es solo parte de mi diseño. Estoy sosteniendo turno para que se vaya recto, y éste no tiene relleno, ni derrame cerebral y voy a usar tal vez ese verde que hemos estado usando. ¿Dónde está el verde? O tal vez un gris oscuro o un gris claro. Aquí vamos. Guías fuera. Entonces ahora en mis iconos sociales para estar aquí abajo. Traigamos todas nuestras formas. Vayamos a Archivo y vamos a Lugar. En tu escritorio, te afeitas tus archivos de ejercicio, y aquí están todos los sociales que quiero traer, y son SVG que he decidido usar, no importa. AI o SVG. Voy a ir, click, todo encima uno del otro, sólo para que cuando los seleccione todos, pueda mantener pulsado el turno y redimensionarlos todos. Ahora fresco poco atajo es si estás sosteniendo turno, limita la altura y el ancho, perfecto, ya lo sabemos. Pero si mantienes presionada la tecla Alt en una PC o la tecla Opción en una Mac, es desde el centro, con bastante frecuencia eso es bastante útil. En lugar de intentarlo, sí, podrías tener suerte, tal vez lo sepas. ¿ Qué tan grandes van a ser? No estoy seguro de eso todavía, pero eso es todo. Lo que haremos es que los escogemos a todos porque primero quiero cambiar los colores de ellos, y esta es una buena forma rápida de hacerlo. Lo que vamos a hacer es, todos estos están agrupados en este momento. Pero digamos que quiero cambiar un partido algunos de mis colores. Lo que puedo hacer es primero acercar. Primero haré este Facebook uno, y hay un par de formas de hacerlo. La forma más fácil es que podríamos desagrupar lleno de estos tipos porque al momento que estamos encerrados juntos. Yo quiero cambiar este fondo azul, pero los estaría cambiando o el escenario. Pequeño truco es que hemos estado usando bastante esa flecha negra. Vamos a usar la flecha blanca. La flecha negra mueve las cosas físicamente, y la flecha blanca se mueve alrededor de pequeñas piezas dentro de ese pequeño grupo. Entonces, mira esto. Voy a dar click en el fondo y luego hago click justo en este cursi. Ya puedes ver puedo empezar a jugar con ellos, pesar de que son grupo usando esta flecha blanca. Así que haz clic fuera del fondo, haz clic una vez en el círculo, verás que está recogido aquí. Lo que puedo hacer es que puedo hacer algo bastante cool, y esos rastrean y dicen, porque quiero que todos estos colores cambien en lugar de hacerlos todos individualmente. Por lo que puedo ir a Seleccionar, Mismo, Color de relleno. Voy a recoger todo en este documento que tenga el mismo color de relleno es él. Se puede ver que ha recogido a todos estos tipos. Significa que puedo ir rápida y fácilmente a cambiar los colores. Escoge el color de tus colores, y si este era un icono multicolor, solo puedes usar la flecha blanca y hacer clic en diferentes partes de la misma, y decidir e ir y cambiarlos todos. El problema sería decir si quisiera cambiar el color del blanco y el logotipo de Twitter aquí, si hago clic en “Blanco” y voy Seleccionar Lo mismo, se va a escoger blanco que han usado en cualquier otro lugar del documento. No creo que haya usado el blanco, he usado ese blanquecino, pero va a ir y cambiarlo todo de una sola vez. Tiene algunas limitaciones cuando comienzas a usar ese Select Same. Tenemos a estos tipos, los pediremos en el siguiente video, veremos alinear y distribuir iconos L en Illustrator. 28. Alinear y distribuir iconos en Illustrator para el diseño web: Hola diseñadores de UI. Lo que vamos a hacer ahora es conseguir que estos iconos simplemente se alineen bien y equilibren en estas columnas. Está bien, vamos a hacerlo. En primer lugar, quiero volver a encender mis guías, eso es comando punto y coma o punto y coma de control en una PC, y acercarlo un poco. Voy a ir a mandar uno o controlar uno en PC para conseguir una pantalla completa porque quiero tener una sensación de lo grande que quiero que sean estos. Creo que estos chicos son un poco demasiado grandes para los iconos sociales porque ahí es donde se va a mostrar el tamaño para un sitio web. Voy a hacer el mío un poco más pequeño. Está bien. El orden de ellos. El modo en que esto funciona es, pongamos Facebook say es mi más importante, y digamos que Twitter es el siguiente y simplemente conseguirlos en un orden áspero. No tiene que ser hermoso. Entonces tu último. Es la primera y la última que son importantes. Está bien. Voy a conseguir que estos tipos abran una columnas llenas, ¿de acuerdo? Los tenemos en algún tipo de orden uno tras otro. Voy a seleccionarlos todos, luego por aquí arriba, si no puedes ver esto, digamos que trabajas en una pantalla realmente diminuta, tal vez tengas que ir a Ventana Align, y hay todo un panel que se abre o puedes usar el uno arriba aquí arriba, depende de ti. Lo que me gustaría hacer, en primer lugar, probablemente sea conseguir que se alineen horizontalmente. Me mezclan vertical y horizontal cada vez, podrías ser el mismo. Voy a dar click en esto sólo para que todos se alineen. ¿ Ves eso? Todo alineado muy bien. Entonces está éste que se llama Distribuir horizontalmente, sólo porque lo estoy leyendo desde la barra de herramientas de ahí, pero vamos a distribuirlos horizontalmente, y vamos a hacer clic en él. Simplemente los extiende de manera uniforme. Esa es la forma de alinearlos y distribuirlos. Una última cosa antes de irte. No es relativo a lo que estamos haciendo aquí mismo pero te será útil en algún momento. Por el momento por defecto, se está alineando con la selección, lo cual es genial. Está haciendo exactamente lo que queremos que haga, pero digamos que queríamos alinearlo con la app, bueno piensa en esa alineación a la página. Diga que voy a agrupar a estos tipos, por lo que están agrupados. Ahora quiero decir alinear, pero se lo va a hacer a la Mesa de Trabajo, significa que cuando haga clic en alinear con el centro horizontalmente, se va a alinear con el centro de mi mesa de trabajo, y se puede ver que eso es bastante útil también. Se recordará lo último que hagas así voy a darle la espalda a selección, voy a conseguir un deshacer para volver a ponerlos donde estaban, y podría desagruparlos de nuevo porque no los necesitaba agrupados. Muy bien, así que eso es alinear y distribuir en Illustrator. 29. Cómo ajustar las formas vectoriales en Illustrator: Muy bien, en este video vamos a ver la edición vectores que ya existen que hemos descargado, y queremos dejar de jugar con y especie de ajustarlos un poco. Lo vamos a hacer a esta pequeña flecha simple aquí abajo, vamos a cambiar el tamaño del tallo y ajustarlo un poco junto con el color, y también vamos a meternos con ellos, hacerlos tipo de redondeados y hacer todo tipo de cosas divertidas. Está bien, así que vamos a hacer eso ahora. Entonces empecemos con editar una bonita y simple vamos a usar esta flecha que he descargado, tengo la mía aquí en la biblioteca porque la descargo del mercado, pero tengo un ejemplo en los archivos de ejercicios que puedes descargar ve a comprobarlo, se llama Icon Arrow, que no debería ser difícil de encontrar. Entonces ve a Archivo y coloca eso en, asegúrate de su vector, y hemos usado la flecha negra, recuerda mover las cosas, y hemos usado de manera limitada la flecha blanca para hacer ajustes, así que vamos a ver eso. Esta es la flecha blanca, así es como ajustas los vectores existentes. Digamos que quiero hacer este poco más corto, así que lo que hago es poder dar click en esta esquina aquí, así que primero de todo dar click en el fondo, asegurarme de que no haya seleccionado nada, dar click en este punto de anclaje Quiero mover estos pequeños puntos en las esquinas se llaman puntos de anclaje. Ahora quiero seleccionarlo y lo puedo mover por ahí, puedo ajustarlo y decir, esto es lo que quiero hacer, mi encantadora flecha. Para que puedas hacer algunos ajustes básicos con la flecha blanca. Voy a deshacer eso, y digamos que quiero meter esto en un poquito así que es un tallo más corto en esto. Entonces voy a dar click en este primero, así que voy a dar click en segundo plano, click en el primero y luego mantener presionada Mayús, y luego vamos a sumar a tus selecciones, tienes dos bits seleccionados y yo hago click y arrastro abajo y sólo voy a bajar ese tallo por lo que es mucho más corto. Tú haces lo mismo por esto, yo puedo arrastrar a este tipo, lo voy a arrastrar en un poquito, agarrar a este tipo y arrastrarlo en un poquito. Entonces estoy ajustando mi flecha y otra cosa que puedes hacer es en este momento tiene bordes afilados y creo que quiero eso, voy a dejar eso, así que voy a hacer una copia de ella, usando mi flecha negra, seleccionándola, Copiar Paste, Lo dejaré ahí arriba y notarás que estoy mirando por aquí en esta zona gris, es un lugar muy fácil agradable para trabajar sin que el tipo de ser obstaculizado por todos los gráficos y guías y cosas por aquí. Entonces con esto seleccionado, voy a volver a mi flecha blanca y lo que notarás es que puedes ver estos pequeños puntos blancos aquí, estos son cómo redondear esquinas que es, voy a acercar un poco, si agarro a este tipo hacia abajo y los arrastra hacia adentro porque tengo el todo de esquina seleccionado, todos se redondearán. Así es como redondear, no tiene que ser una flecha, podría ser un rectángulo. Dibujas un rectángulo, agarra la flecha blanca, agarra las esquinas y puedes redondear las esquinas de esa manera. Lo que también podrías hacer es decir que quieres a alguien alrededor de una de las esquinas es agarrar la flecha blanca, y hacer click en, se llama la herramienta de selección directa, sigo llamándola la flecha blanca porque eso es más fácil de descifrar, pero se llama la herramienta de selección directa pero si haces click en una de ellas, puedes ver solo tengo un punto en una de estas y puedo cortar a la vuelta de esta esquina aquí y de esta esquina, pero le encanta este tipo de cajas factoides de lágrima. Entonces así es como convertir las cosas en estas esquinas redondeadas. Otra cosa que vamos a hacer es que vamos a mirar a convertirlos porque en el momento que es algo así como es una esquina redondeada bastante única, lo que vamos a hacer es agarrar a este tipo, copiaremos y pegaré y lo que yo haría me gusta hacer es empezar tipo de ajustarlo de una manera un poco más de estilo a mano alzada. Entonces voy a agarrar mi flecha blanca, voy a dar click en esta esquina aquí y en lugar de solo hacerlo esta esquina redondeada, que es realmente simétrica, con ella pinchada aquí arriba, puedes convertirla desde el momento es una esquina, se puede decir que es una bonita esquina afilada, se puede hacer clic en esta de aquí y esto lo suavizará. Simplemente le dará a nuestro punto de anclaje estos mangos para que se pueda ver el camino todavía en realidad pasa por el punto de anclaje, estaba ahí, ahora se ha estirado por estos manecitos aquí, pienso en ellos como cosas de poca gravedad ese tipo de, la línea aún tiene que pasar por el punto de anclaje, pero estas pequeñas manijas ajustan cómo pasa y puedes empezar a jugar con ella, para darle un poco más de forma libre. También puedes romper esto porque en el momento en que sean la vera-sierra, donde hagas un lado arreglará el otro. Entonces lo que puedes hacer es que quieras chasquearlos, mantén presionada la tecla Alt en tu PC u Opción tecla en una marca y ver esto, hago clic en uno de ellos ellos ellos tipo de snap. Entonces todavía está doblando la línea, pero ya no están haciendo esa opción de ver sierra y así que hay algunas cositas que hemos aprendido aquí, una es que podemos redondear estas esquinas agarrando estos puntos, pero si queremos más de una forma de forma libre, hacemos click en la esquina, y decimos que me gustaría que fueras una suave y si quieres romperla porque por el momento es una especie de causa alisado al otro lado, pero hay una interacción entre los dos que lo mantiene suavizado pero di que no quieres eso, puedes mantener presionada la tecla Alt u Opción, romperlas y puedes dejar de jugar con estas cosas un poco más de detalle. Entonces lo siguiente que quiero hacer es colorearlo. Ahora he descargado normalmente solo tienes que hacer clic en tus colores aquí y va a funcionar, pero este ejemplo en particular, y esto es probable que lo que vas a obtener del buscador de iconos o del mercado es ver esta esquina vectorial y ir te un color. Usará estos reloj estos de aquí abajo se siente wierdly como un bug en ilustrador que nada, estoy deshaciendo para deshacerme de los colores es que puedes hacer una de dos cosas, una es que puedes seguir haciendo doble clic en él, entra esta flecha, doble clic de nuevo para ir dentro del camino y luego puedo colorearlo. Dejaríamos este tipo de combinación ligera que alguien se guarda, voy a deshacer eso, volver a salir haciendo doble clic en el fondo. Encuentro la forma más fácil son estos Temas de Color aquí, voy a hacer clic derecho en él y voy a Añadir a Muestres y te darás cuenta abajo aquí mi Panel de Muestres, mis pequeños colores prefabricados son los colores que puedes ver pequeñas versiones de eso y hago click en esto y digo abajo aquí, áreas tenían los colores, doble clic en ella hasta que te metes justo dentro de ella y luego cambias el color. Entonces asegúrate de hacer doble clic en el fondo para volver hasta aquí, y vamos a usar a este tipo. Entonces voy a copiarlo, dejaré a esos tipos por ahí, voy a acercarme y voy a usar esta flecha de aquí. Es un poco grande, mantenga pulsado Shift recuerda escalar proporcionalmente y lo que voy a hacer es que lo voy a escalar hacia abajo y lo voy a girar alrededor. Ahora, hay una herramienta de rotación y hay ahí, puedes hacer click en eso y simplemente girarlos alrededor. Lo que hace la mayoría de la gente sin embargo es solo usar la flecha negra , si acerco, si se pasa por encima de cualquiera de estos, hemos usado los lotes de edades para redimensionar pero mira esto si tengo un hover justo afuera, puedes ver esto es como la mano de nadie así que que escalar, rotación, nada más, rotación, escala, por lo que queremos la rotación con la pequeña flecha doblada, y puedes girarla alrededor y si mantienes presionada la tecla Mayús mientras la estás girando, puedes ver que la bloquea en Ángulos de 45 grados y eso va a funcionar para mi flecha, queremos ir por ahí. Está bien, ahí está mi pequeña flecha, y he personalizado eso un poco, no mucho metió el tallo, pero hemos aprendido un poco sobre personalizar gráficos vectoriales que tal vez no hemos creado, avanzaremos en el próximo episodio y veremos crear nuestros propios gráficos. Está bien, te veré el próximo video. 30. Creación de iconos y logos personalizados con la herramienta de constructor de formas en Illustrator: Hola ahí. En este video vamos a construir esta forma de logotipo aquí usando el constructor de formas. También vamos a construir todos estos pequeños divertidos. Vamos y hagamos eso y aprendamos a usar la herramienta de constructor de formas. En primer lugar, eliminemos a estos tipos. Eran de un tutorial anterior, y vamos a usar esta área de pasta del costado aquí, pero puedes usar un nuevo documento. La herramienta constructor de formas, te va a encantar. Cuando salieron con esto como entrenador, yo saltaba por los días felices porque lo siguiente que tenemos que hacer después de esto es la herramienta de bolígrafo. Si has intentado aprender Illustrator antes, y has ido a la herramienta de lápiz e intentas unir partes. Es un dolor en el culo. Ahora constructor de formas te va a hacer un pro bastante rápido. Lo que vamos a hacer es que le voy a dar un trazo en el exterior de magenta, sólo porque le voy a dar un buen trazo grueso para que lo veas. Aguanta, “Shift” para conseguir un círculo perfecto. Voy a hacer lo mismo con la herramienta de rectángulo. Herramienta de rectángulo, voy a dibujar esto. Solo estoy construyendo una forma aleatoria para mostrarte un poco de ejemplo, voy a agarrar la herramienta estrella. Se puede ver que aquí están pasando todo tipo de cosas raras. Ahora bien, si quiero llenar estas cosas, si nunca antes has usado Illustrator, puede que no estés tan impresionado, pero si has dado vueltas y tratando de enseñarte, esto va a ser alucinante. He seleccionado a los tres. Voy a agarrar esta herramienta de aspecto inocente aquí abajo. Se llama la herramienta constructor de formas. Lo que me permite hacer es un par de cosas bonitas. Me permite llenar estos vacíos. En realidad no están unidos, pero esto va a hacer que lo hagan por nosotros. Voy a escoger un color de relleno. Te voy a decir que quiero que te llenes, no lo sé. Dónde están mis muelas, estas son las que he comprado desde aquí. Voy a agarrar ese verde y ver esto. Cierra eso de nuevo. Yo puedo decir, quiero que seas verde y quizá seas verde. Pero me gustaría que el resto de ustedes, digan que este pedacito sea naranja, o el color rojo-y. Se puede ver lo rápido y fácil que es empezar a colorear estas cosas. Lo que también puedes empezar a hacer es empezar a unirte a ellos. Diga que quiero que estos tipos sean de la misma forma, no dos colores separados con un trazo a su alrededor. Lo que puedes hacer es, he escogido ese color aquí. Voy a arrastrar a través. Puedes ver dibujé una línea haciendo clic y sosteniendo mi ratón a través de estos dos, y mira, hace que lo fusione. Por lo tanto, si alguna vez te has metido con la herramienta Pathfinder, dile adiós a la herramienta Pathfinder también. Lo bonito también es que puedes recortar las cosas, decir que no quieres esta caja aquí arriba. Puedes mantener presionada la tecla Alt en un PC o la tecla Opción en el Mac, ver esto, y hacer clic en esto, y oye, recortarlo, bonito. Entonces puedo decir en realidad que no quiero eso, no quiero eso. Puedes recortar un par de cosas, no quiero ninguna de esas dos. Puedes dejar de construir formas, mientras usas formas prefabricadas existentes. Sí, hace que sea realmente fácil empezar a crear cosas. Se puede ver que todos están separados. Tengo un poco cool, no sé qué es eso. Pero ese es el empezar con él. No estoy seguro de dónde lo dejaron. Echemos un vistazo a una de las cosas que puedes hacer con ella. Digamos que usemos la herramienta de línea y dibujemos un pequeño icono de casa, como un botón de inicio. Lo estoy dibujando mano libre. Todo lo que tienes que hacer es asegurarte de que se superpongan. Se puede ver mi casita de palo aquí. Pequeña casa abajo por aquí, asegurándose de que todo se superponga. Si no lo hacen, agarra tu flecha blanca, haz clic en uno de los puntos, pulsa sobre el fondo, haz clic en uno de los puntos y puedes moverlos. Tan solo asegúrate de que todos se superpongan. Selecciónelo todo, agarra mi constructor de formas. Escoge un color con el que voy a llenarlo. En realidad pongamos un techo a esta cosa. Pongámosle un techo. Agarra mi constructor de formas. En realidad, selecciónalos a todos primero. Agarra constructor de forma, escoge un color de relleno. Uno de mis colores ahí, he recogido verde para el techo. Genial, oye, sólo puedes llenarlo y luego puedo ir a, ¿qué más tengo aquí, elegir un color diferente, naranja. Llena la casa y la puerta va a ser amarilla. Simplemente es realmente fácil crear formas personalizadas aquí. Ahora podrías estar pensando : “¿Qué pasa con todos los focos feos?”. Hay un par de cosas que podríamos hacer. usar mi flecha negra. Haga clic en off en segundo plano. Al hacer clic en usted Shift, seleccione los tres de estos. me vendría bien. Todavía tengo el derrame cerebral por fuera. Podría seleccionarlos a todos y decir, “No Stroke”. Ahí puedes ver que he hecho todas estas formas o puedes empezar a hacer cosas como esta. Diga que solo quiero pedacitos de los trazos, pero quiero recortar estos bordes usando de nuevo la herramienta constructor de formas, manteniendo presionada Alt. Recuerda por defecto es agregar formas. Puedo hacer clic y agregar, pero si quiero quitar formas, mantengo pulsada la tecla Alt en una PC o tecla Opción en la Mac, mira esto, puedo arrastrar a través de estos tipos. Adiós. ¿Qué tan guay es eso? Me encanta esta herramienta. Puedes deshacerte de los que quieras. Guarda las que no. Eso es un poco más de la herramienta constructor de formas. También puedes hacer cosas como esta. Se puede agarrar decir, “Tipo”, y yo voy a hacer, “Dan”. No, no quiero un dictado. Haga clic y escriba la palabra “Dan”. Voy a hacerlo bonito y grande. ¿ Dónde está mi tamaño de fuente. Incluso más grande. Sostén pulsado Shift, usa mi flecha negra, hazlo bonito y grande. Escoge una fuente que no sea súper coja. Museo Losa especie de hombre. Ahora constructor de formas no va a funcionar así mientras es de tipo editable. Lo que tenemos que hacer es ir a Type y éste, y aquí está crear contornos. De acuerdo, ahora ya no es de tipo editable. No puedo cambiar la ortografía ni la fuente. Es posible que desee duplicarlo antes de hacer esto. Pero ahora es una forma como estas otras formas aquí, y podemos empezar a jugar con ellas. Por defecto, todos están agrupados. Voy a hacer clic con el botón derecho en ellos, Desagrupar. Esperemos que ahora pueda empezar a hacer algo cool. Cuando digo cool, va a ser bastante cojo, ya lo puedo decir. Ese es un buen ejemplo. Selecciona a todos estos chicos, voy a agarrar mi herramienta constructor de formas. Retrocede, constructor de formas. Lo que voy a hacer es tal vez sólo borrar los bits que cruzan para hacer algún tipo de, ni siquiera sé lo que estoy haciendo. Elige un color de relleno. Escogeremos un color aquí arriba de mis muelas. Tú y tú. Ah, sí, terrible. En realidad, podría agarrar la herramienta constructor de formas y simplemente eliminar esa de ahí. Yo no lo quiero. Ah sí, somos funky. Herramienta constructor de formas, mejorando. Echemos un vistazo a reconstruir nuestro logo porque eso es realmente lo que quería hacer, es hacer algo así y podrías parar. Probablemente vas a poder ver que va a ser bastante fácil, ¿verdad? Lo es. Para hacer esa forma ahí, vamos a agarrar mi herramienta de elipse. He aguantado, “Shift” para asegurarme de que salga perfectamente esférico. En realidad podría hacer que tenga un derrame cerebral por fuera, no hay razón para hacer esto, solo para que sea fácil para que ustedes entiendan. Solo hay un trazo negro alrededor del exterior, estoy de vuelta en mi flecha negra ahora. Yo quiero dos de estas probabilidades, así que voy a copiarlo. Si lo pego, Illustrator solo péguelo en medio de tu pantalla. Si vas a, “Editar” y vas a, “Pegar delante” nada parece que pase, pero hay otra copia exactamente frente a la que teníamos antes. Si agarro una de las esquinas, puedo hacerla más pequeña. Si sostengo, “Shift” mientras lo estoy agarrando, lo hará perfectamente más pequeño, como en la altura y el ancho. Recuerda ese atajo que aprendimos hace unos videos, si también mantenemos presionada la opción. Entonces turno y opción o si estás en un PC, es Shift y Alt, y lo hará desde el centro. Tenemos dos pequeños círculos. Podrías simplemente dibujarlos por separado, seleccionarlos ambos y alinearlos. Lo siguiente que quiero hacer es que quiero agarrar mi herramienta de línea y porque tengo guías inteligentes encendidas. Si no lo haces, asegúrate de que eso esté marcado, puedo ir desde el centro aquí. Si trato de dibujar otra línea desde el centro, empieza a ajustar la que tengo. Entonces lo que puedes hacer es volver a la flecha negra, clic en el fondo, luego agarrar tu herramienta de línea, iniciar una nueva. Volver a la flecha negra. Haga clic en off en segundo plano. Poco doloroso. Solo estoy haciendo esto como lo de segment-y de linea para que nuestra marca sea algún tipo de poco de aspecto infográfico-y. Se puede ver lo fácil que va a ser llenar. Flecha negra, selecciónalos todos y voy a hacer algo como esto. Recuerda, [inaudible] versión gigante. A lo mejor consiguió uno demasiados segmentos. No estoy seguro de cómo voy a hacer eso. Colorear ellos, lo arreglaremos. Con esa seleccionada, herramienta constructor de formas. Lo que voy a hacer es aquí abajo, voy a escoger una muestra. No importa si lo coges aquí arriba o aquí abajo. Sí importa si haces click en estos, solo llena todo el asunto. Se siente como un pequeño bicho con esto. Las bibliotecas son impresionantes, pero hay algunas cositas. Entonces recuerda, si estás saltando por ti mismo a este tutorial, es posible que tengas que hacer clic con el botón derecho en este tipo y decir, “Añadir las Muestras” para que las tengas aquí abajo. Ese color va a ser ese, ese va a ser ese. Ese va a ser ése. Va contra un fondo oscuro, así que por eso llego a usar ese blanco. me parece bien. Impresionante. Lo que quiero hacer es que pueda borrar a estos tipos. Hay un par de maneras. Pero lo que podría hacer es simplemente hacer clic en esto, mantener, “Shift” para seleccionar todas estas piezas y simplemente moverlas. Selecciónalos todos. Todavía les dan un golpe negro a su alrededor. Di: “Ninguno por favor”. Ahora me tengo una cosita fresca y forma-y para mi logo. Lo que podría hacer es, porque están todos separados, lo cual es genial, selecciónalos todos, haga clic derecho en ellos y vaya a, “Grupo”. Si estás en un Mac y estás tratando de hacer clic derecho y no va a hacer clic derecho, ve a, “Objeto” y hay, “Grupo” aquí dentro. Te encontrarás usando los lotes de herramientas de constructor de formas. Es mi go-to para construir todo tipo de formas interesantes sin tener que ir a la herramienta de bolígrafo. Pero la herramienta de pluma es una necesidad y vamos a aprender eso en el siguiente video. Entonces vamos a hacer eso. 31. Dibujar iconos y logotipos en Illustrator con la herramienta pluma: Está bien. En este ejercicio, vamos a dibujar este pequeño kiwi y este trébol por aquí abajo, y vamos a dibujar una corona. Todos son vectores. Son agradables en camas de victoria, y te vamos a mostrar cómo usar esta preciosa, preciosa herramienta de pluma que hay ahí. Vamos a hacer eso. Primer paso, lo que haremos es dibujar estos en su propio documento y copiarlos y pegarlos más adelante, solo para no confundirnos demasiado con este documento. Vamos a Archivo, vamos a Nuevo. Realmente no importa, estaremos en Print. Usemos A4 o Carta. No estoy demasiado preocupado por el tamaño. Vamos a traer algunas cosas para dibujar. Ahora, la mayoría de las veces, si es una forma razonablemente compleja, dibujaré a mano en mi cuaderno y luego tomaré una foto de eso y la traeré, porque soy mucho mejor dibujando con mis manos que con la Herramienta Pluma. Si es una forma simple como un corazón o una estrella o algo así o una flecha, solo intentaré hacerlo a mano alzada con la Herramienta Pluma. Pero veamos traer algunas de las cosas que hemos dibujado. Entonces Archivo, Lugar. En tus archivos de ejercicio, descarga los archivos de ejercicios de Pen Tool. Si no tienes estos archivos de ejercicios, hay un enlace en la página en algún lugar para descargarlos. Voy a dar clic y arrastrarlo hacia fuera para que encaje dentro de aquí. Esta es la cosa que vamos a estar dibujando. Son bonitas, pequeñas cosas progresivas para dibujar. Por lo que he dibujado a mano estos. Si te preguntas qué es eso, eso es un kiwi. Es un pajarito nativo. Es un kiwi terrible, y me tomó años dibujar ese también. kiwis son difíciles de dibujar. Son como balones de balones con piernas. En fin, así que has dibujado a mano tu cosita que quieres. Ahora, lo que queremos hacer es dibujar por encima de eso, y queremos bloquear esta capa de fondo para que no se mueva a mitad del dibujo. la forma más fácil, ya lo hemos hecho antes en Layers. Pero ver capa 1, vamos a bloquearla. Este pequeño ícono aparece aquí en esta pequeña caja vacía. Vamos a llamar a este fondo. Genial. Vamos a hacer una nueva capa. Sólo voy a asegurarme de que tenemos esta capa seleccionada y esta va a ser nuestra capa de dibujo. Tan solo asegúrate de que estamos en esta capa, vamos a agarrar la Herramienta Pluma. ¿ Dónde está nuestra Pen Tool? Ahí está. Queremos a éste que se llama la Herramienta Pluma. Entonces lo básico son, vamos a acercar. Si empiezo a dibujar ahora, mira justo lo que pasa. Terminas con esta caja blanca llenándola. Eso sucede a menudo cuando la gente está empezando. Vamos a darle nada de relleno. Entonces ese es el primero aquí, sin relleno, y el trazo en el exterior, algo que contrasta este fondo. No importa de qué color sea porque lo vamos a cambiar más adelante. Voy a usar un verde brillante. El trazo va a ser de un píxel. Dibujar formas como esta, como flechas y coronas, son realmente fáciles porque cuando estamos usando la Herramienta Pluma, solo tienes que hacer clic una vez para una esquina. Haremos curvas en un segundo. Todo lo que vas a hacer es trabajar tu camino. Así que haz click una vez. Se puede ver que esta cosa está apegada a ella. Oye, no te preocupes por eso, solo previendo a dónde va a ir la línea. Voy a dar clic una vez más aquí, haga clic una vez más aquí. Se puede ver que esa línea verde empieza a aparecer. Haga clic una vez más aquí, una vez más aquí. Una vez más ahí, ahí, ahí. Tenemos una terrible corona irregular. Pero es como un ejercicio de dibujo, así que no nos preocupemos demasiado por ello. Vamos a darle un relleno. Por lo que agarraremos nuestra flecha negra con esa seleccionada. Haga clic en el fondo, haga clic en él. Puedo darle un color de relleno o mi taco. Dale cualquier color a todo y dale un trazo de tal vez ninguno. Impresionante. Tenemos una corona. Para verlo por sí mismo, puedes apagar el globo ocular en esta capa de fondo y esa es nuestra corona realmente bonita. Echemos un vistazo a nuestro trébol. Es como si ahora estuviera viviendo en Irlanda, soy kiwi, lo pillas. Vamos a dibujar esto, y los vamos a dibujar como tres partes separadas luego combinarlas porque un trébol obviamente no tiene estos huecos dentro. Pero lo estamos convirtiendo en un ejercicio de dibujo. Lo que vamos a aprender ahora es que hemos arreglado las esquinas, haces click una vez. Para obtener una curva, haces clic y arrastras. Es mejor empezar por una esquina porque eso lo hace fácil. Por lo que voy a dar click una vez. ¿Ves esa línea todavía pegada? Pero en lugar de volver a hacer clic, que nos va a dar una esquina, lo que quiero hacer es que me he deshecho entonces. Por lo que he hecho clic una vez aquí abajo. Lo que queremos hacer es encontrar a mitad de camino a través de esta curva. Esta curva va desde aquí todo el camino, y literalmente, a mitad de camino está por ahí. Pero lo que quieres encontrar es el ápice, donde más cambia. puede ver por ahí es así, punto de la esquina o el ápice. Mira esto, si hago clic y arrastre, obtienes este pequeño mango que sale. Los vimos antes. Estoy haciendo clic y sosteniendo y arrastrando, y podemos moverlo por ahí. Entonces no tengas miedo de arrastrarlo. Que esto, puedo arrastrarlo para que sea muy apretado y muy afilado esquina o puedo arrastrarlo y puede ser una esquina muy larga, exagerada. Entonces entra y sale y gira alrededor para conseguir que vaya el ángulo que quieras. Ahora, lo que encontrarás es que nunca lo harás bien la primera vez. Te mueves por ahí, tu spin envejece. No te preocupes, esta es la fase 1. Podemos arreglarlo después usando la flecha blanca. Voy a arrastrarlo hasta encontrarlo ahí. Entonces, ¿esto es una esquina o curva? Eso es un rincón. La gente tiene tendencia a hacer clic y arrastrar este también, que no es lo que quiero. Voy a ir aquí y solo dar click una vez porque eso es una esquina, es un gran cambio de dirección. ¿ Puedes ver el gran aro de la parte superior aquí sin embargo? Están como, oh no, erigidos. Eso es solo parte de dibujar con la Herramienta Pluma. Podemos arreglar esto más adelante con la suficiente facilidad. Voy a deshacer. Había una esquina, haga clic una vez. Esta cosa de aquí es una curva, haga clic y arrastre. Aquí abajo, ¿esto es una esquina o una curva? Es una esquina, así que vas a dar click una vez. Voy a llegar ahí, ¿verdad? Sí, eso es lo que hemos dibujado. Una vez que tienes las esquinas ahí y los puntos más o menos en el punto correcto, entonces puedes arreglarlo con la flecha blanca. Siempre hay un poco de retoque al final, y haces click en este punto de anclaje aquí. Este es el tipo que necesita arreglarlo, y mira esto, puedo moverlo por ahí, sí. Entonces lo arreglo. Pero entonces, este tipo no está del todo bien, así que agarro este mango y le doy un movimiento. Ahora, puedo moverlo arriba y abajo, pero ¿ves esto? Yo también lo puedo mover más apretado. ¿ Se ve que se está poniendo un poco mejor? Puedo empezar a menear esto. Lo que encontrarás es que conseguirás esto bastante perfecto, pero destrozarás este otro lado. Definitivamente hay mucho toing y froing. Es como un balancín. Tienen que equilibrarse para lucir bien y suave. Pero vas a descifrar una pareja entre los dos. Este tipo es el mismo. Este tipo de aquí, sin embargo, quizá no esté lo suficientemente lejos. Voy a acercar. ¿Puedes ver? Es igual que no hay cuestión de doblar estos mangos para conseguir que salgan. Entonces físicamente, necesito sacar a este tipo de aquí. Entonces puedo sacarlo un poco ahí. Este tipo de aquí, trato de arreglar. Siempre hay un poco de toing y froing entre los dos. Voy a alejarme. Sí, se ve bien para mi primera. Vamos a pasar, y es sólo este paso en repetición. Por lo que voy a agarrar la Herramienta Pluma, haga clic una vez para una esquina. Aquí afuera, haga clic y arrastre para una curva, haga clic una vez para esquina, haga clic y arrastre para una curva, haga clic una vez para esquina. Después de un rato puedes ver que no destrocé este tanto como el último, pero aún queda un poco de retoque por hacer. Encantador. Ahora, probemos el tercero. Esperemos que a medida que avanzas, tu primero se vea terrible. Imagino que será esta gran cosa. Eso está bien. Sólo olvídate de él, tuviste una grieta. Prueba el siguiente, y para el tercero, probablemente aún sea mal recientemente. Depende de tus habilidades hacia el dibujo con una Herramienta Pluma, algunas personas lo agarran. Ahora, he enseñado a miles de personas con una Pen Tool y te prometo, todos son terribles desde hace mucho tiempo. Se necesita mucha práctica con la Herramienta Pluma para conseguir el ahorcamiento de la misma. Aquí vamos. Puedes ajustarlos. Ahora, tal vez encuentres que es más fácil. Entonces si hago clic fuera y vuelvo a hacer clic en él, y decir en realidad, quiero que no tenga relleno. Tengo ese trazo verde en el exterior justo mientras estoy trabajando para que sea un poco más fácil ver la cosa que hay debajo. No tengas miedo de mover también los puntos de anclaje si no estás encontrando que están trabajando. Ahora, veamos esta última parte, el pequeño tallo. Voy a agarrar de nuevo a mi Herramienta Pluma, ven aquí Herramienta Pluma. Mira esto, voy a dar click una vez. Si lo estás encontrando realmente difícil, ¿ puedes ver que está tratando de saltar y unirte y enlazar y hacer todas esas cosas? Eso puede ser útil, pero en términos de la Herramienta Pluma, a menudo no lo es. Entonces voy a deshacer para deshacerme de ese punto, y voy a apagar mis Smart Guides. ¿ Dónde estás Smart Guides? No te veo en ninguna parte. Ahí están, guías inteligentes. Herramienta Pluma. Haga clic una vez para una esquina. Se puede ver aquí, esto es sólo una curva realmente lenta, así que lo que tengo que hacer es a mitad de camino a través de ella, por ahí, voy a dar clic y arrastrar. Aquí es donde se pone un poco raro. Ya puedes ver aquí, sólo voy a traerlo. Da click una vez ahí, voy a hacer de este un extremo plano. Entonces sólo hay una ligera curva aquí. Voy a esperar a mitad de camino, click y arrastrar. ¿De qué manera arrastras? La gente hace esto todo el tiempo, lo arrastran de esta manera, y estoy tratando de que no esté funcionando. Este tipo tiene que ir por ahí. Si sale horriblemente mal, si haces eso, y vamos a este, y vas por aquí, y estás como, únete a ello y estás como, eso no se ve bien. Lo que puedes hacer es agarrar flecha blanca. Voy a acercar un poco. Voy a decir que este tipo de aquí, necesitas que te cambien. Puedes empezar a ajustarlo. Voy a seleccionar a este tipo, darles el mismo color de relleno, y usas herramienta cuentagotas, lo aprendimos en el ejercicio temprano, herramienta cuentagotas. Bonito. Está bien. Ese tipo es bastante terrible. Podrías hacer trampa. No lo voy a saber. Voy a copiarlos y pegarlos. Si consigues uno de ellos, bien. Sólo tienes que ir y repetirlas. Lo que haremos ahora es antes de pasar al kiwi, vamos a unirnos a estos tipos. Entonces solo consíguelos para que se superpongan. Este tipo de aquí, quiero que sobresalga pero tal vez no así. Aquí vamos, así. Todos se superponen y recuerdan nuestra increíble herramienta que une las cosas. Ahora pégalos a todos. Todas son formas separadas. Podrías dejarlo así, no hay problema real con eso. Pero di que quieres unirte a todos ellos, usemos la herramienta Shape Builder, y puedes dibujar a través de todos estos. ¿ Se puede arrastrar en segundo lugar para unirte a esos dos? Únete a esos tipos. Únete a esos tipos. Podría tener que hacer zoom un poco. Yo quiero que todos estos tipos sean parte de la misma pandilla junto con el tallo de aquí. Ya puedes ver que son de una forma completa. Encantadores, ¿qué tan impresionantes somos? Ahora el feo pájaro futbolístico. Amo a este pájaro, pero no mi dibujo de él. Tiene un raro [inaudible]. De todos modos. Este tipo va a ser más complicado. Es más o menos una versión larga de esto. Vamos a hacer eso. Agarra la herramienta Pluma y empecemos con la esquina. Voy a empezar con este de aquí. Haga clic una vez. ¿A qué camino voy a ir? Ahora voy a ir por aquí. Ahora este tipo tiene algunos, no es sólo un círculo completo por aquí. Si tratara de hacerlo solo, éste, llegaría allí mayormente. Pero porque tiene como un arco ahí y un arco diferente en la parte de atrás. Lo que podríamos encontrar es que vamos a usar dos manecitas para que se dé la vuelta. No lo seas, lo que mucha gente hace es ir así y van a sumar muchas de ellas para conseguir la curva. Eso está bien, y funciona. Pero terminarás con una forma. Déjame apagar la capa de fondo. Terminarás con una forma que nunca es tan suave. Ahí hay todos estos como pequeños chupitos en ella. Voy a volver a encender la capa de fondo. Siempre es mejor usar la menor cantidad de puntos de anclaje posible, pero cuando eres nuevo, es difícil saber lo menos que puedes hacer. Pero en este caso, probablemente va a necesitar dos, así que voy a ir uno, sólo para esquina, haga clic una vez. Entonces por aquí, voy a ir tal vez por ahí, haga clic y arrastre. Lo estoy alineando, empuja. Voy a bajar aquí y tal vez otra curva alrededor de su trasero. No necesito mucho ahí. Se puede ver que estaba funcionando y tienes la inclinación solo de ir dar click una vez. Pero entonces porque es un punto de esquina, va a ser muy difícil conseguir que eso se vea suave por ahí. ¿ Puedes ver ese pequeño jink? No te preocupes si llegas hasta aquí, solo necesitas un poquito de las asas. Podemos arreglar esto después metiéndolo de nuevo dentro, pero al menos va sin problemas a través de la curva. Puedes hacer click aquí una vez. Serás como, que se ve aquí terminaría. Eso está bien, recuerda esa flecha blanca después, podemos arreglarla. Ahora estos pies terribles, no sé qué estaba haciendo con estos. Son terribles. ¿ Se puede ver [inaudible] adivinar qué hay ahí dentro? Lo que podría hacer es que lo voy a cambiar para que no tenga relleno y tenga un derrame cerebral, estoy llevando el trazo al frente. Yo estoy usando este por aquí porque mientras estás usando la herramienta Pluma, esa cosa que amamos desaparece, así que estoy usando el panel Muestres. Voy a usar verde para mi trazo y sigue con la herramienta Pluma. Al hacer clic aquí, ese es mi terrible pie. Ahora a mitad de camino por esta curva, [inaudible] haga clic y arrastre y aquí está mi esquina. Haga clic una vez, haga clic y arrastre. Haga clic una vez, me refiero a los pies. Ni siquiera sé cuántos dedos tiene mi pájaro, soy un kiwi terrible. Muchas esquinas. Ahora éste está fresco. Esto va por ahí, luego va por ahí, luego va por ahí, así que van a haber tres. Va a ser éste, va a ser éste y va a ser éste. Si el tuyo no se parece nada a eso, no te preocupes, ponlos en las posiciones correctas y podemos usar la flecha blanca después. Aquí abajo hay una esquina, pero en el medio aquí sobre el medio. Genial, bien. Haga clic una vez. Curva de pico, haga clic una vez, curva, haga clic una vez. Vamos a arreglar esto. Está bien. Mi dibujo no es bueno, por lo que el dibujo encima de él no puede ser mucho peor. Voy a pincharlo con mi flecha negra. Ahí vas y no les voy a dar ningún golpe. Yo le voy a dar un color de relleno. No tengo mis muelas del último ejercicio, así que lo que voy a hacer probablemente sea solo color en color aleatorio y luego cambiarlo cuando lo arrastre a mi otro documento porque ahí existirán esos colores. Pero lo que voy a hacer ahora es ir a mi flecha blanca, click en cualquiera de estos puntos de anclaje y empezar a jugar con lo que hay que probar, algo de dignidad mi pajarito. En cambio, intentaré arreglarle la cabeza mientras estamos ahí. Siempre encuentro que es más fácil simplemente dibujar sobre la parte superior, dibujarlo primero a mano y luego dibujar sobre la parte superior y arreglarlo después. Podrías ser diferente, podrías simplemente dibujarlo a mano. Pero sí, así que la herramienta Pluma, una última cosa que me gustaría compartir contigo con la herramienta Pluma es decir que hay una curva donde debería haber una esquina y esquina donde debería haber una curva. Hicimos esto un poco antes cuando empezamos a ajustar los vectores existentes, echa un vistazo a ese video. Pero digamos que ahora quiero que esto sea un rincón, es algún pájaro trasero rígido. He puesto accidentalmente una esquina donde quería, lo siento, una curva donde quería una esquina. Lo que voy a hacer es dar click en esto. Se puede ver que ahora tiene un buen puntito. Es como una cosa de pájaro de camello. Si quiero darle la vuelta a tener una curva, hago clic en “Curva”. Lo volveré a poner exactamente, así que voy a tener que arrastrarlo. Agradable, impresionante. Digamos que hay un punto que no quieres, di que quiero hacer todo esto en un punto, hay este extra que no quiero. Puedes agarrar la Pluma o puedes, lo siento, seleccionar en cualquiera de los puntos de anclaje. Se puede ver aquí arriba dice Ancla y hay uno que dice Eliminar punto de anclaje seleccionado y él desaparecerá. Podrías simplemente tratar de mover este alrededor y tratar de conseguirlo un gran go porque es más suave. Se puede ver que funciona. En realidad se ve mejor. Yo lo dejaré así. No me gusta, voy a volver. Eso si quieres agregar un punto de anclaje. Lo que puedes hacer es volver a la herramienta Pluma y si decides que necesitas otro punto de anclaje por aquí, ver con solo con la herramienta Pluma seleccionada, solo puedo dar click ahí y me dieron uno extra. Me da un poco de control extra para dejar de moverse y dejar de jugar con estos tipos. Lo voy a deshacer porque no lo quiero. Ahora lo vamos a mover a nuestro otro documento, así que voy a alejarme. No necesito la corona. Sólo necesito a estos dos. Yo los voy a lijar a ambos. Voy a conseguir una copia. Entonces Editar, Copiar. Salta a Illustrator y lo que voy a hacer es tirar a estos tipos. Por encantadoras que fueran, ya no los necesito. En realidad he dibujado mi logo. Puedes reutilizar el tuyo. Podrías eliminar el logotipo. Elimina el logo al final, usa tu nuevo que has hecho. Pero sólo voy a pegar a estos tipos. Cosa interesante. ¿Ves alguna parte de ella vino? Es porque creo que sólo tenía la flecha blanca y él tenía ese pedacito seleccionado. Agarra con tu flecha negra. Haga click off, seleccione ambos de estos tíos, Copiar. Selecciona a estos chicos y pégalo ahí, ambos. Ahora puedo entrar en mis Muestres y recoger mi color de relleno. Voy a recoger el verde. Lo que voy a hacer es que los voy a alinear abajo. Es como si ni siquiera supiera por qué están aquí, son más un ejercicio de herramienta Pen. ¿ Los amo? Yo estoy amando más el kiwi. Es mi kiwi. Yo soy un trébol. Aquí no va a entrar abajo. Esto es como una cosita gráfica genial. El kiwi es un poco grande. Eso es todo para la herramienta Pluma por el momento. Es posible que tengas que volver a ver este un par de veces. La herramienta de pluma puede ser dura, no te desanimes, es duro te lo prometo. Pregúntale a cualquier diseñador gráfico que conozca la herramienta Pluma, odiarán durante mucho tiempo hasta que hayan tenido que usarla por un rato y luego van a cerrar esa brecha y empezar a poder usarla y entonces eso se convierte en su mejor amigo. Me encanta. Probablemente lo odies en esta etapa. Entonces solo usa la herramienta Shape a little and Pen cuando tengas que hacerlo. Eso es todo para este video. 32. Creación de una versión para tabletas de nuestro diseño web de interfaz de usuario en Illustrator: En este tutorial, vamos a crear nuestra visión de tablet. Se va a ver muy similar. Vamos a jugar con algo del relleno de los lados aquí, no es tan divertido abollado. Vamos a reorganizar el orden de apilamiento de estas miniaturas y sí, pedacitos y piezas, pero nos prepararemos tableta completa. Empecemos. Ahora ya planeo a través de lo que quería hacer en mi marco de alambre. Va a ser fácil seguir eso. Lo que también encuentro es, los marcos de alambre cercanos a lo que quiero, pero en realidad termino cambiando bastante ya que estoy trabajando con la copia real y las imágenes reales. Primero vamos a conocer a mis guías. Estoy usando el punto y coma de comando, o Control de punto y coma en un PC. Ya puedes ver que he decidido, recuerda usar tres columnas en lugar de 12. Se supone que haya 12, pero visualmente demasiado duro para trabajar. Lo que vamos a hacer es usar nuestros 12 aquí. En primer lugar, vamos moviendo el fondo a lo largo. Lo que podríamos hacer, es ver aquí abajo mi panel Capas. Es posible que tengas que ir a Ventana, Capas para ver esto. Bloqueo la Capa de ilustraciones y desbloqueo la Capa de fondo. Lo que quería hacer es quizá seleccionar a los tres de estos tipos. Lo que voy a hacer es mantener presionada la tecla Alt mientras la arrastra, hace una copia. Simplemente lo mueves por aquí, y va a terminar en esta pizarra de Arte. Lo que voy a hacer es, ¿cómo voy a dimensionar esto? Probablemente voy a tener que ajustar esto de nuevo después, probablemente. Lo que voy a hacer es, voy a agarrar a los tres de estos tipos, meterlo en la esquina superior para empezar y me va a seguir adelante. Entonces los voy a ajustar de uno a la vez. Te voy a agarrar, recortarte hasta el borde. Ahora se puede ver el mío no está chasqueando solo fudging aquí un segundo como, ventana no está chasqueando. Por último funcionó. Anteriormente en el tutorial anterior, desactivé las Guías Inteligentes. Las Guías Inteligentes son realmente útiles y significa que cuando puedo alinear estas cosas, ver chasquear un doodle. Sí, dije chasquear un garabato. Vamos a arrastrar esa de esta caja verde, arrastrando la caja negra, y vamos a arrastrar en ésta. Ahora si arrastro este dentro, notarás que solo se comprime. Eso no es lo que quiero. Voy a hacer doble clic en él, para entrar, agarrar el borde de esto, esta es mi caja de cosecha. Ya me he metido dentro de ella. Yo lo he hecho doble clic, entra dentro de este grupo donde lo recorté antes, he hecho una máscara. Puedo decidir cómo quiero que esto funcione. Probablemente voy a conseguir esta imagen de medio a centro. Así es como lo voy a hacer en código al menos. Necesito que sea más pequeño probablemente. Se va a redimensionar un poco, hasta este pequeño tamaño que hay, y bonito. Haga doble clic en el fondo para volver a salir y volvemos a ello, cuadrado uno. Una cosa que no hizo, es lo que podría hacer es simplemente ordenar esto. Aquí vamos. Hoy es mi gráfico de fondo. Probablemente voy a tener que cambiar eso un poco. Voy a agarrar esta gran caja grisa.Arrástralo a través también. Agarra esa esquina, enciérralos. El alto de esto va a cambiar bastante. Eso ya ha sido demasiado tiempo. Voy a bloquear a esos tipos, desbloquear obras de arte, y dejar de mover esta parte superior a través. Voy a agarrar tal vez estos, eso no es agarrarlo todo, sólo para hacer la vida más fácil. Lo que estoy haciendo por tablet, es que en realidad voy a dejar ahí la navegación. Voy a agarrar a estos tres tipos. Asegúrate de sostener Alt y arrastraré todo el asunto como acabo de hacerlo. Voy a agarrar eso y copiarlo. Entonces voy a deshacer, ponerlo ahí atrás. Voy a venir aquí, y voy a Editar, Pegar al frente. Sostener Alt mientras arrastras es no solo lo mueves a través. Bonito, voy a agarrar estos tres. he agarrado a todos incluyendo el fondo. Si mantengo pulsado Shift y hago clic en éste, como no quiero seleccionados, me acaban de quedar estos tipos, copio y los pego, se cruzan y todavía quedan bien ahí. Voy a seguir con eso. Todo esto se va a encontrar, sosteniendo Alt, alineándolo, agradable. Todo se ve bien. No cambiar mucho para la tableta se puede ver. Yo sólo voy a hacer esto, encenderte y apagarte. Ves la diferencia que estoy haciendo sin embargo, es que hay relleno en este porque tengo un poco de libertad de espacio. Tengo esta perspicacia sobre las tabletas va a hacer que se alinee, todo el camino hasta aquí. Para mí funciona la altura. La diferencia va a ser este tipo. Voy a agarrar a los seis de estos, sostener todos sólo arrastrarlos a través. La diferencia de estos, es que los voy a apilar dos por dos. Necesitan redimensionar un poco. Entonces este tipo de aquí va a subir. Notarás chasquear a un montón de cosas, mover las cosas de esta otra manera porque mis guías son útiles. Se puede ver que no está emparejando porque es un tamaño diferente, voy a tener que mantener pulsado Shift y arrastrarlo hacia abajo. Si encuentras un chasquido a demasiadas cosas, me parece que siempre es más fácil. Sólo para entrar agradable y apretado, y se olvidará de muchas de las otras cosas que está tratando de chasquear también y enfocarse. A mí me gusta ese tipo, pero ¿cómo igualo todos estos al mismo tiempo? Es fácil como con él seleccionado, se puede ver que es un ancho de esto. Es 369.5. pixels. Voy a agarrar eso. Agarrarte. Deja ir al pequeño, no puedo. Te voy a hacer, lo voy a seleccionar. Voy a asegurarme de que esté ligado. Cuando cambio el ancho, cambia la altura. Entra, puedes verlo escalado hacia abajo. A ti amigo mío, van a ser lo mismo, ancho y alto. Se puede ver que sólo dar proporcionalmente más pequeño. Tú, tú, y tú. Se vuelve un poco difícil si quieres barajar la orden. Obviamente es fácil hacer un ilustrador, pero cuando se llega al diseño web, se vuelve difícil. Trata de mantenerlo con los mismos flujos de color, dentro de éste. Entonces este tipo, luego este tipo, simpático. Tengo mi línea abajo aquí, en realidad sobre la caja gris. Es [inaudible], vaya masivo, y después podemos ajustar esta gran cosa. Voy a traer, te lo traeré todo. Puedes entrar ahí. Esta línea tiene que ser mucho más corta. Sabe que es difícil agarrar esta línea y traerla. Es posible que necesites acercar. Encuentro que es más fácil cuando estás tratando de agarrar algunos de esos puntos. Yo te agarro. Una cosa que no puse en el último bit, es que quería agregar el pequeño aviso de copyright al escritorio y también. Simplemente se va a decir Copyright 2017. Vamos a poner adentro. Nosotros sí hicimos esto. Sentí como si hiciéramos lo de los derechos de autor antes. ¿ Lo hacemos? Vámonos. Debemos haberlos borrado. Tipo, Glifos lo hicimos. Recuerdo esta debacle. Copyright it, mi primera vez, esta vez. Haga doble clic en él, y si ha hecho el fondo, lo han borrado masivamente. Se trata de Dans Portfolio. Pones a nombre de tu empresa, si tienes uno, limitado. Voy a usar una fuente que estamos usando, que es Open Sans Condensed, estoy usando negrita creo. Genial. Voy a agarrarlos chicos, no sólo la cuerda, copiarlos, pegarlos. Muévete al otro lado, y vas ahí. Lo que podríamos tener que hacer es, el ordenamiento de esto. Estos dos van a extenderse. ¿ Qué más se va a ampliar? Bueno, ¿ya seis? Selecciónalos todos, mete ese en. Vamos a recorrer seis y vamos a distribuir los centros, horizontal o verticalmente, puedo recordar. Eso es lo que se va a ver por aquí. Eso es todo para mi visión de tableta. Simplemente arreglaré la Mesa de Arte antes de que terminemos y pasemos al móvil. Eso es acerca de lo correcto. Voy a desbloquear el fondo para que esta cosa gris se deslice hacia abajo. En realidad hay un gran hueco aquí que quiero imitar. Cierro el fondo. A lo mejor baja un poco. Encantadora, esa es nuestra visión de tableta. Pasemos al móvil. 33. Creación de un diseño de sitio web de interfaz de usuario con capacidad de respuesta para teléfonos móviles en Illustrator 2017: Hola gente hermosa. En este tutorial, vamos a hacer nuestra versión móvil. puede ver que es un poco diferente. Hemos hecho mucho alineamiento de izquierda y columnas. En el móvil, lo vamos a descomponer. Vamos a quitar algunas cajas. Se puede ver que nos faltan algunas líneas y vamos por algunos bits centrados y probablemente el bit principal sea un menú móvil encantador o un sandwich Nav o nuestro menú Hamburger. Vamos a construir esas cosas. Proceso similar al de la tableta. Voy a bloquear la obra de arte y desbloquear el fondo para poder mover esto a través. Voy a seleccionar todas estas piezas, sostener 'Alt', copiarlas a través, tratar de conseguir que se chasquen, no lo hacen, tengo que arreglarlo después. Seleccionaré los tres de estos, uniéndome, y me romperé en la esquina. Todavía no queriendo chasquear. Yo estaba bien si acercas zoom , quiere chasquear mucho mejor. Mi problema es que un par de estos no están del todo alineados. Ahora el que se ve bien. Muy bien, lo que probablemente va a ser, va a ser mucho más corto. Yo lo sé porque ya estoy todo listo me burlé para este tutorial. Probablemente vas a hacer esto sobre la marcha mientras estás trabajando. Yo sólo lo voy a hacer un poco más pequeño porque lo sé. Ahora recuerda redimensionar este es un poco raro. Si solo agarro la esquina, realidad va a funcionar en este caso, puedes ver que lo cambia de tamaño, pero si hago algunas cosas raras como esa, lo hace largo y flaco. Lo que podría hacer es, mantener 'Shift' hasta llegar a por ahí. Quiero que se vuelva a dimensionar, ahora hago doble clic, haga clic en el exterior, que es el marco de recorte. Yo lo voy a arrastrar para que coincida con eso y luego voy a agarrar el interior de esto y simplemente moverlo a lo largo para que encaje. Voy a reducirlo un poco. Muy bien, haga doble clic en el fondo para salir, y tenemos nuestro bonito fondo descolorido. Este tipo necesita ser ajustado. Este va a ser mucho más largo, supongo. Tendremos que ajustar eso cuando bajemos al fondo ahí. Enfriar, bloquear el fondo, desbloquear la obra de arte y luego empezar a barajarlo. Probablemente el mayor cambio en este caso va a ser cómo va a funcionar el menú. Sólo tenemos dos botones, así que probablemente nos salgamos con la suya sólo con los botones. Pero no mucha gente tendría sólo dos botones. Vamos a usar un menú de hamburguesas o un sándwich de Nav. Encenderemos mis guías. Ahora recuerda que usamos sólo dos de las columnas en lugar de todo el 12, solo para que no se vuelva loco cuando lo intentamos, no tenemos columnas por todas partes. Lo que voy a hacer es, un par de cosas. El logo va a tener que encogerse. Se mantuvo igual en tablet pero estoy tomando la decisión de encogerlo esto en el móvil. Se va a tener que hacer más pequeño, ¿cómo más pequeño? Sólo para que pueda caber mi sándwich de Nav aquí para que no se ponga tan mal. Se puede cambiar logotipos a diferentes formatos, eso es totalmente posible en HTML, se puede ocultar un tipo de logotipo y podría tener una pila diferente tal vez algo apilado en la parte superior para móvil pero para el momento en que esté mi pequeño Nav y vamos a dibujar un sándwich de Nav. Ahora, el sándwich de Nav es estas tres líneas de tiras, se ha convertido en lo universal para hacer sándwiches de Nav o menús móviles. Son solo tres líneas de tirantes en este caso y tu desarrollador o tú como diseñador cuando lo estás construyendo en digamos, Dreamweaver o algo más, puede manipular esto con bastante facilidad. Para dibujar la línea voy a asegurarme, voy a usar mi blanco apagado y voy a asegurarme de que sea bonito y grueso. ¿Qué tan grueso? Recuerda ir, 'Comando 1' para mirarlo a tamaño real en lugar de tratar de zoom zippy. Pensé que era un tamaño bien, a ese tamaño cuando acerqué, pero obviamente eso es demasiado ancho. Voy a ser de 3 píxeles. Probablemente lo voy a apretar y de nuevo, es realmente difícil hacer eso desde aquí. Vamos a acercar de nuevo y voy a apretar esta línea. Sostenido 'Shift' mientras lo estoy apretando y solo asegúrate de que se quede en línea recta. Con ella seleccionada, voy a sostener 'Alt', arrastrarlo hacia abajo, arrastrarlo hacia abajo. ¿Cómo se ve eso? ¿ Pantalla completa? Se trata de lo correcto. Lo que podría hacer mientras estoy aquí es solo para asegurarme de que todos estén a igual distancia. Es el Distribuir Vertical', y todos están bien. Bonito, ponlo ahí dentro. Tal vez te guste este, quizá te gusten las esquinas redondeadas al final. Este tiene extremos planos y eso es lo que quiero porque se ajusta a todo lo demás que he hecho con los bordes cuadrados. Vemos a una persona redondeada, aterciopelada. Lo que puedes hacer es seleccionar en estos trazos aquí. Abre tu panel 'Stroke'. ¿ Dónde están mis trazos? No está abierto. Ahí está el mío, pero si no puedes encontrar eso consiguió una 'Ventana' y baja a 'Strokes' y lo que buscas es esta 'gorras' de aquí. Por el momento está en la desgraciadamente llamada 'culta' pero puedes cambiar a gorra redonda. Te darás cuenta de que los hace menú de hamburguesas redondeadas. Depende de ti. Aleja el zoom, genial. Probablemente pueda salirme con la suya siendo un poco más grande. En el móvil no quiero que sea demasiado pequeño. Tamaño real, guías fuera, excelente. A continuación, voy a hacer algo bastante diferente en cuanto al diseño. Voy a agarrar primero a este grupo. Voy a copiarlo al otro lado. Lo que voy a hacer es que los voy a agrupar y quiero que se centre en esta mesa de trabajo. Eso lo miramos un poco antes. Vamos a ir a nuestra 'Ventana', vamos a abrir 'alinear', movernos aquí abajo y quiero que vaya a centro, pero lo que quiero hacer es que te quiero, amigo mío, muestres Opciones y quiero que se alinee a la mesa de trabajo. Yo quiero que se centre en el tablero de arte. Si no los hubiera agrupado primero, mira lo que pasa. Yo los agrupo, todos van centrados pero eso no es lo que quiero. Los agrupo juntos, 'Command G' o 'Control G' en un PC, o haga clic derecho en 'Grupo' y solo asegúrate de que lo voy a alinear con la mesa de trabajo, centro. Genial, se va a ir a la cima ahí. Voy a mantener el mismo tamaño de fuente, creo que sí. Este trozo de aquí, lo voy a copiar al otro lado y lo voy a culpar hasta los bordes. Pero lo que voy a hacer es que me voy a asegurar que el tamaño de la fuente baje. Es muy fácil cambiar el tamaño de fuente cuando eres diseñador web. Yo voy a hacer eso. Voy a hacerlo centrado y voy a agarrar mi flecha negra, alinear herramienta. No es necesario alinear esto porque he usado alineado con el texto aquí arriba. Ahí va a estar centrado. ¿Qué tan pequeño? A lo mejor sólo un poquito más pequeño, ahí vamos bien. Siguiente mordió la línea. Traeré a toda esta pandilla de inmediato. Sostenga 'Alt', arrástrelo a través. Podemos copiarlo y pegarlo y lo que haré es, en realidad lo que podría hacer es apagar esta línea para móvil. Es una de esas cosas extravagantes débiles donde he jugado con ella antes y no me gustó la línea. Voy a agrupar todo esto, los tres están agrupados y luego me voy a asegurar que esté alineado a mesa de trabajo, centrarlo, apagar mis columnas. Siento que esto es tal vez un poco demasiado grande una fuente. Voy a seleccionarlo todo y tal vez mover el tamaño de la fuente hacia abajo a algo un poco más pequeño. Pequeños cambios como ese el desarrollador web, o tú mismo podrás comprobarlo pero si no se ve visualmente diferente, probablemente no irían a revisar por lo que quizás tengas que hacerte una nota para asegurarte de indicar a ellos que en realidad es sólo un tamaño de fuente más pequeño. No hay denuncia. Es posible que tengas que escribir en CSS solo para uno que somos tamaño de fuente pero por eso tu diseñador. Se llega a tomar las decisiones de fuentes grandes o diminutas. Muy bien genial, probablemente subo esto un poco al fondo, principalmente porque no está alineando. Voy a desbloquear el fondo, agárralo, ahí tienes, lindo. Muy bien, lo siguiente que quiero hacer es guardarlo. Veamos cómo vamos a hacer con estas miniaturas. Ahora hasta ahora lo hemos hecho, hicimos pilas de, hicimos 3 columnas, luego hicimos 2 columnas y esta vamos a hacer 1 columna según una alambrada. Ahora, tengo mi alámbrico e impreso a mi lado y solo estoy copiando eso a medida que voy. Lo que voy a hacer es agarrar a uno de estos tipos, moverlo al otro lado, encender mis guías, alinearlo, estirarlo. Lo raro es que en realidad es el más grande que ha estado en el móvil raro. Al igual que el escritorio en realidad es el más pequeño, es un poco más grande en tablet y es el más grande en móvil. Ahora puedes ver que se toman muchas decisiones en el móvil, mucha gente diseñará primero para el móvil. No es mi, siendo mi experiencia que es mejor trabajar con la pantalla más usada, que en este caso es de escritorio. Nosotros lo hemos arreglado y él es lo ancho? 399. Voy a agarrarlo y en realidad voy a traer a todos estos tipos a través. Yo estoy Shift haciendo clic en ellos todos, todos vienen a través. Los atascaré por aquí en la mesa de trabajo y agarro estos dos, porque eso ligó 399.5, impresionante. Sé que los hicimos por separado antes, pero cuando están alineados uno encima del otro, se puede cambiar el ancho porque están alineados uno al lado del otro. Está bien, ahora es cuestión de apilar. Vamos a copiar esa pila de tablet, bonito. Tú siguiente, ¿quién es el siguiente? Tú eres el siguiente. Nos estamos quedando totalmente sin espacio. De lo que vamos a hacer, sólo porque me voy a dar vuelta hasta el tutorial de diseño web también, vamos a usar Dreamweaver, eso hace esto, lugar de solo diseñarlo, es que en realidad vamos a dar vuelta estos dos fuera solo para que la página no sea como esta épica versión móvil de desplazamiento, masiva para que se cargue agradable y rápido en el móvil en caso de que la gente no esté en el rango de Wi-Fi. Lo hago principalmente para que pueda hacerlo en un tutorial web para mostrarte cómo encender y apagar las cosas. Encenderemos y apagaremos esa línea, y encenderemos y apagaremos a estos tipos usando CSS. Tenemos estos ajustados y traeremos un pie de página por aquí. Podríamos haber alargado un poco esto hacia abajo. ¿ A qué distancia? No estoy seguro. Mi fondo, el fondo no estaba bloqueado. Un poco más bajo. Se bloqueó el fondo. Agarra a los tres, tráelos a través. Lo que voy a hacer es, voy a conseguir las sociales también. Voy a agruparlos. 'Comando G' o 'Control G' en un PC. Está alineado a mesa de trabajo, los voy a centrar, así que los he centrado ahí. Voy a apilar estos. Es algo que puedo hacer fácilmente en HTML también, es que voy a reagrupar a estos tipos. Los he agrupado para que pueda enviarlos a la mesa de trabajo y lo voy a arrastrar hacia abajo. Estoy usando mis atajos de teclado solo para bajarlo en este caso. No eran grupos. Todos se están solapando entre sí. Deshacer, atrás, atrás, atrás, deshacer, deshacer, deshacer. Ahí están. Ahora haz click derecho sobre ellos y 'agruparlos'. Ahora si los centras, no deberían tropezar uno encima del otro. Agradable. Ordene el tablero de arte y ahí mis amigos está nuestra versión móvil. Desbloquearlo. Cuando estás haciendo esto, probablemente no te vaya a gustar esto es algo que he diseñado previamente para este tutorial. Pasarás como yo hago una cantidad increíble de tiempo metiendo esto arriba, moviendo esto a través, cambiando esos colores, jugando con su fuente, para que todo se vea como tú lo quieres. No tengas miedo si tienes tres o cuatro versiones de tu móvil porque es la más difícil de hacer pero que mis amigos es nuestro pequeño diseño web responsive. Muy bien, pasemos al siguiente video. 34. Exporta tus maquetas de interfaz de usuario web de página completa desde Illustrator 2017: En este tutorial, vamos a explorar nuestras diferentes pantallas o nuestras diferentes mesas de trabajo para que podamos ponerlas en un PDF para que podamos enviarlas al cliente a ver o para que nuestro diseñador web nos dé un costo en. Sí, solo una buena manera de hacer un PDF directamente desde ilustrador. Vamos a hacer eso ahora. Por lo que hemos hecho nuestros increíbles diseños súper estupendos. Ahora tenemos que sacarlos a nuestros clientes para mostrarlos o tal vez a nuestros diseñadores web para mostrarles la maqueta que estamos buscando hacer. Nosotros solo vamos a exportar las pantallas o las mesas primero en lugar de esos pequeños elementos adb. Es realmente fácil de hacer en la nueva versión de illustrator. Si estás usando una versión anterior, no es demasiado difícil. Puedes ir a “Archivo” “Guardar como” y pasar y guardar todas las diferentes mesas de trabajo, pero hay esta nueva versión, vas a “Exportar” y ahí está esta cosa llamada “Exportar para pantallas” que es realmente genial. Si está en “Activos” esto no es lo que quiero, quiero “mesas de trabajo”. Simplemente va a exportar estas tres páginas diferentes por separado. También puedes exportarlos juntos y lo que puedes decidir es qué archivo quieres. Entonces los quiero todos juntos o en realidad, quiero un documento completo, bueno, tal vez una página que sólo les envío o quiero páginas separadas en un PDF. De lo que quiero que sean, este es formato, puedes bajar a PDF. Ese es probablemente el más fácil compartible que podemos enviar por correo electrónico a alguien. ¿A dónde se va a ir? Arriba en, la mía en los archivos de ejercicio, se puede ver, y voy a dar clic en “Exportar”. Retrocede, relájate, y ojalá, hay ahí. Tengo en un escritorio, una versión móvil y una tablet. Ábrelos. Es aunar los nombres de las mesas de trabajo que les di. Impresionante. Encantador. Si quieres unirlos y estás en algo como Acrobat Pro aquí, puedes ir a, esto es “Organizar páginas” y puedes decir “Insertar” “Desde archivo” y encontrar esas otras dos páginas. Tú archivos de ejercicios de escritorio y los metes aquí, reordenarlos y yo guardaré este y eso puede ser sólo un documento de una página. Ahora cuando la gente lo abra, pueden pasar por el móvil, tableta y simplemente tocar todo de una sola vez. Entonces eso es exportar todo el look y la sensación. Este no es el fin de ello. Esto es bueno para que el cliente firme o para que el diseñador web se haga una idea de lo que estás haciendo, pero a continuación necesitamos explorar todas las pequeñas piezas diferentes por separado para que podamos utilizarlas en nuestra página web. 35. ¿Debería utilizar la exportación de SVG en Illustrator 2017 para el diseño web?: De acuerdo, en este tutorial, vamos a hablar de SVG y debería estar usándolos o no debería? SVGs un formato de archivo razonablemente nuevo. Es como un JPEG o un PNG, y es realmente bueno para su uso en línea porque es escalable. SVG es un gráfico vectorial, lo que significa que se puede escalar hacia arriba y hacia abajo sin pérdida de resolución. tanto que JPEG si lo estiras realmente grande, se pone todo pixelado y yucky. Lo primero es, ¿es genial? Sí, es genial para cosas como iconos y logotipos, cosas que tienen colores realmente simples. Echemos un vistazo a ilustrador aquí. De acuerdo, entonces cosas que funcionarían realmente bien como SVG es este logo y este pequeño ícono. Aquí hay una pequeña flecha que hemos hecho, estos pequeños chicos de abajo aquí, los iconos sociales, estos van a funcionar muy bien como SVG. Las cosas que no funcionan bien como SVG es cualquier cosa que tenga más que unos pocos colores. De acuerdo, así que al igual que esta imagen de aquí, esto es lo que se llama una imagen de mapa de bits o una imagen ráster, y viene tradicionalmente de Photoshop. tanto que estos chicos, se puede decir cuando se acercan a ellos, que todos son vectores y vainas y todo este encantador SVG, bondad. En tanto que esto es sólo un montón de píxeles. Estos tipos todavía tienen que ser típicamente un JPEG. Estos tipos se exportan como uno u otro como PNG o SVG. Ahora, ¿seguro que estás usando SVG? Sí. Si me hubieras preguntado hace un año, hubiera dicho tal vez y un año antes eso hubiera dicho que no, por el soporte de navegador. Pero lo que me gusta hacer es mantener un ojo en el sitio llamado caniuse.com. Escribes SVG y te da alguna información útil, el momento tiene un enorme soporte de navegador, a menos que estés apoyando IE 8. Ahora, podrías estar trabajando para una empresa realmente grande y están apoyando versiones realmente antiguas de este navegador. Ya tiene casi diez años, IE 8, y no conozco a mucha gente apoyando a ocho a menos que estés trabajando en IBM o grandes empresas que tienen que lidiar con computadoras viejas realmente asqueras todavía. Si estás haciendo tu propio portafolio, definitivamente omitalo, ve directo a SVG, es impresionante. Si estás trabajando con una empresa, solo tienes que revisar dos veces con el desarrollador. O si estás un poco inseguro y no estás muy seguro de SVG, solo apégate a PNG, no va a matar a tu sitio, pero hace que sea más fácil la capacidad de respuesta si estamos usando SVG. Así que solo revisa aquí puedes ver a nivel mundial que se usa 97 por ciento. Hay algunas personas a las que no les gusta usarlo. Hay algunos trucos que puedes hacer para apagarte a SVG y algunas otras cosas si eres un poco más hardcore en tu desarrollo web. En fin, ¿cómo sabes si otras personas están usando SVG? Te mostré estos dos antes, eran Shutterstock e iStock y puedes ver que ambos se ven geniales. Son logotipos por lo menos. Lo que pasa es que si hago zoom, así que solo estoy sosteniendo comando plus en mi teclado, si estás en un PC, es control plus, ves eventualmente empieza a lucir pixelado. Entonces eso es un PNG y está bien. Se ve bien por aquí. Pero si tuviera que escalarlo bien y grande, tendría que hacer un tamaño de archivo realmente grande en un PNG para que se viera bien a este tamaño. Si miro a iStock y acerco esto, se puede ver el logotipo, cuanto más cerca me acerco, más nítido es. Esto se vuelve realmente útil cuando se trata de pantallas escritas en pantallas o realmente de alta resolución, pantallas 4K, 5K. Porque aunque esto se ve bien aquí, alejado, podría verse terrible en un iMac realmente de alta resolución o en mi mac escrito aquí, o en un iPhone o un iPad. Por lo que los PDF los usan, están bien, funcionan en todas partes, son a prueba de balas. Podrías estar asustando a tu desarrollador enviándoles un SVG. Esa es una cosa que podrías hacer es si estás tratando con SVG y realmente quieres ir por ese camino, porque entiendes vector y no es tan difícil. Es posible que tengas que educar a la persona con la que estás trabajando. O simplemente pregúntales al principio : “¿Puedo enviarte SVG?” Si ellos si se asustan, simplemente envíales PNG, si no están muy seguros de ellos y quieren un poco más de consejos, hay un artículo realmente genial sobre CSS-tricks. ¿ Cuál es su nombre? Olvidó su nombre. Tu nombre es Chris Coyer. Eso es todo. CSS- tricks es un sitio realmente genial para cualquier cosa con SVG. De acuerdo, y este de aquí es más o menos como llegué a acelerar. CSS- tricks.com, SVG grande. Este tipo es un genio. Realmente bien explicado. Te he dado la única explicación en video. Ahí hay 32 videos. Esto se está metiendo en la nitty arenosa de SVG, si quieres llegar tan lejos. Está bien, así que eso va a ser si por SVG. Si no estás muy seguro, haz PNG y SVG y envíalos a ambos, es realmente fácil hacer ambas cosas. Si estás haciendo tus propias cosas y estás usando Dreamweaver, usa SVG. Es impresionante y los navegadores se mantienen al día con ello. Si estás trabajando con cosas de la vieja escuela con CMS de la vieja escuela, tal vez tengas que apegarte a los PNG. Pero solo pregúntale a un desarrollador web qué quiere primero. 36. Exportación de imágenes y fotografías de Illustrator 2017 para la web: De acuerdo, en este video vamos a ver exportar nuestras imágenes, cosas como fotografías. De acuerdo, y aquí hay gráfico de fondo, se puede ver que vamos a terminar en este panel de exportación, y luego vamos a terminar con este encantador grupo de asombro exportado. Muy bien, empecemos. De acuerdo, primero arriba, lo que tenemos que hacer es, ¿necesitamos explorar las tres? No lo hacemos, porque lo que va a pasar en la fase de diseño web es que, vas a importar esta imagen, esta imagen de fondo aquí y la vas a reutilizar en los tres tamaños escalándola en lugar de cambiarla. Hay una forma de cambiarlo por cada imagen diferente, pero hace que tu página se cargue mucho tiempo y significa que tienes muchos archivos y activos CSS diferentes en marcha. Normalmente lo que sucede es que importas este único archivo y como hicimos en Illustrator, en web, lo escalamos hacia abajo para los diferentes tamaños, para estos diferentes puntos de ruptura, o los diferentes tamaños de pantalla. Lo que haces es elegir la más grande, porque quieres, por grande que se vaya a conseguir, quieres exportar esa versión, porque eso va a ser cierto de esta imagen de fondo en el escritorio. Eso es tan grande como siempre va a ser y cuando te bajas a decir estos tipos sin embargo, nos dimos cuenta a través de este tutorial aunque, en realidad, el tipo en el móvil está en realidad escalado un poco más grande que este tipo. Es un pequeño porcentaje más grande. Vamos a exportar esta imagen de fondo desde el escritorio. Exportaremos a estos chicos desde el móvil, y luego veremos los iconos en el siguiente, porque hay un proceso ligeramente diferente para hacer iconos y logotipos. En primer lugar, necesitamos desbloquear nuestra capa de fondo y necesitamos abrir este panel de exportación de activos. Puedes hacerlo desde Ventana y puedes ir a Exportación de Activos. Lo que vamos a hacer es que vamos a acercar un poco, voy a seleccionar los tres de estos. No quiero conseguir esto, pero sólo quiero a estos tres tipos. Todo lo que necesito hacer es, seleccionarlos todos y mantenerlos y arrástralos a esta ventana aquí, solo hacemos clic, sostén, arrastramos. Eso me va a exportar esa imagen. Voy a darle un nombre, porque lo va a llamar Activo 4 por el momento. Vamos a darle un buen nombre de motor de búsqueda. Siempre que estés nombrando archivos, dale algunos buenos nombres de motores de búsqueda. Este es Daniel Scott. Estoy usando guiones y no espacios. Cuando vengas a construir esto más adelante como desarrollador de sitios web o te molestará este uso de espacios en entonces, porque a los navegadores no les gustan, les gusta un camino completo. Portafolio de Daniel Scott. ¿ Qué tipo de formato? En este caso, va a ser un JPEG. Ahora, cómo saber cuál escoger. Cuando se trata de imágenes, sólo se llega a recoger JPEG y PNG. No puedes usar este SVG a pesar de que acabamos de terminar de hablar de ello. Eso es bueno para iconos y colores y logotipos sencillos, pero no bueno para estas imágenes. ¿ Cuándo debo usar un PNG y JPEG? Bastante JPEG todo el tiempo, si se trata de una imagen de rectángulo plano. Si necesitas transparencia, di que has estado en Photoshop y has enmascarado cosas y quieres que tenga un transparente detrás, entonces vas a tener que pasar a PNG. El problema con los PNG sin embargo, es que incluyen transparencia, lo cual es impresionante, pero hacen que el tamaño del archivo sea mucho más grande. Haremos un poco de comparación. Vamos a exportar esta cosa como PNG, y vamos a añadir otra, vamos a añadir otra escala y en lugar de escalarla, sólo vamos a volver al mismo tamaño. Va a ser exactamente veces uno, pero vamos a hacer una versión JPEG. ¿ Qué tan alto en este JPEG? Depende de ti. La mayoría de las veces puedes salirte con la tuya con un JPEG 50, pero no puedes ajustarlo aquí para que sea del tamaño que quieras, y piensa en esto como el deslizador de calidad. Si lo mueves hasta un 100, va a ser súper perfecto, pero probablemente un tamaño de archivo realmente grande. Lo que tenemos que hacer es encontrar un poco de equilibrio de calidad versus tamaño, y encontrarás JPEG, sobre todo esta imagen de fondo, todos modos no está muy clara, porque está algo lavada en el fondo. Si fuera una foto de la cosa que estaba vendiendo, digamos que estaba tratando de vender un Bentley, lo tendría probablemente bastante alto, alrededor de 80, solo porque quiero que esa sea una imagen hermosa, tan cristalina como pueda ser probablemente por encima de lo que probablemente lo necesite. Se puede ir por debajo de 50, no hay problema. Lo que vamos a hacer es exportar ambos y vamos a golpear la exportación. Me va a preguntar a dónde va a ir y yo lo voy a poner en archivo central de ejercicio para que puedan revisar estos. Voy a hacer un archivo ahí llamado, exportar imágenes. Voy a ponerlos ahí dentro. Una vez que haya hecho eso, me voy a ir a revisarlos. Explora imágenes, y verás la diferencia entre estos dos. Este es el PNG, y son 450 kilobytes y este de aquí es un 120, por lo que mucho más pequeño. Echemos un vistazo a la calidad frente a los dos. No te preocupes por ese cambio de gris en el fondo, estamos más preocupados por la imagen real en sí y no hay diferencia. Es posible que notes que es difícil de decir, porque estás viendo un video probablemente y, definitivamente estás viendo un video, pero la calidad de puede no ser HD donde lo estás viendo. Estamos usando are low res-image con una marca de agua en él solo para que no me meto en problemas dándote imágenes que he pagado. El cualidad no es perfecto, porque he escalado eso porque es versión con marca de agua. Se puede ver la diferencia es porque no necesito y no necesito transparencia, no necesito un PNG. Ya que esa imagen está hecha. Lo que realmente es genial es que los puedes ver ahí dentro, su tipo de atados. Yo decido que esta imagen superior, y tal vez los seleccionamos en la parte superior y escogemos ese verde. Digamos que decides más tarde que al cliente le gusta más uno naranja, puedes ver que ya está ahí. Puedo volver a hacer clic en Exportar y se apaga y los actualiza. Elegir, reemplazar. Se hace agradable una vez que lo has hecho una vez y el cliente regresa o el desarrollador web desert regresa y dice, ¿ puedes cambiar o ajustar o puedes darme otra versión? No tienes que pasar por ahí y nombrarlos de nuevo. Se puede ver que todos han sido exportados de nuevo. Voy a volver a mi precioso color. ¿ Tienes que hacerlas todas por separado? De ninguna manera. Voy a bin esta versión PNG, porque sé que no la necesito, y voy a pasar y decir que quiero a este tipo. Flecha negra, agarra a este tipo. ¿ Puedes hacerlas todas de una sola vez? Probablemente. Eso es un diez. Voy a pasar por ahí y nombrarlos a todos. A lo mejor Taylor, puedes acelerar esto para mí, amigo. Está bien. Ahora vamos a dar clic en Exportar , Elegir, apagado va y Esperemos que ahora, todo ha funcionado. El motivo por el que no los exporté todos es, porque tenía este seleccionado, porque estaba resaltado, solo lo exporté. Voy a seleccionarlos a todos. Bueno, tal vez solo seleccione Ninguno de ellos. No tengo nada seleccionado ahí y no, necesito seleccionarlos todos. Voy a mantener turno y seleccionar a todos estos tipos, y asegurarme de que estén todos seleccionados y ahora ir a exportar. Hit Choose, hit Reemplazar, y agradable. Ahí está este tipo del que me voy a deshacer, que es mi PNG. No lo quiero, pero todos estos tipos han sido exportados. Han sido anexados con el menos 50, que solo dice que esa es la calidad. Probablemente no haría eso, probablemente pueda apoderarme de su sufijo. Eso no me gusta, voy a entrar aquí y borrar a todos estos tipos, y luego entrar en esta cosa. Es como el primero, mantenga el turno, agarra el último para que estén todos seleccionados, y vaya a Exportar y elija, Se va a ir exportarlos todos sin ese sufijo al final. Aquí están mis gráficos, todos se están poniendo lo suficientemente pequeños. De acuerdo, así es como exploras imágenes. De lo que acabo de darme cuenta es que recuerdo hablar al principio, asegurándome de exportar la más grande. lo descarto totalmente. No te preocupes, puedes exportar estos. Mi único problema con eso, es que eliminé al menos cuatro de estas imágenes, lugar de las seis enteras. No gran drama, yo pasaría por y los haría un poco más grandes y tal vez pegarlos al borde aquí justo como marcador de posición para poder utilizarlos en esta ventana de exportación. Está bien. Eso se acaba de hacer, ahora. Pasemos a exportar SVG, iconos y logotipos. 37. Exportación de logotipos e iconos desde Illustrator 2017 para la interfaz de usuario: Hola. En este tutorial, vamos a ver cómo exportar logotipos e iconos de Illustrator para uso web o app. Cuando estamos tratando con SVG, lo hablamos en un video anterior, es súper fácil. Abre tu panel de Exportación de activos. Agarras las cosas que quieres ser SVG, como estos algunos de estos iconos sociales aquí. Haga clic en ellos, arrástrelos, haga doble clic en ellos, déles nombres. Se va a llamar Facebook social. Asegúrate de que diga SVG abajo por aquí porque quiero que sea un bonito gráfico de SVG nítido. Este de aquí, y tú pasas y sigues agregando todos sus nombres. Eso es todo por exportar esos. Haz clic en Exportar y tendrás un montón de SVG. Digamos aunque que estas exportando estos y estás usando PNG, porque necesitas la transparencia. No quieres un JPEG. Se quiere transparencia para que este ícono aquí, se pueda ver alrededor del borde del círculo allá. PNG es la forma en que vas. Ahora bien, esto es algo llamado pixel perfecto. Ahora bien, no funciona en cada objeto, pero lo que hace es, porque un PNG no es vector, por lo que no es este borde crujiente. En realidad está conformado por estos pequeños pixeles, igual que esta imagen de aquí. Si acerco lo suficiente, se puede ver que esta imagen está hecha en realidad de todos estos cubos pequeños, y así es como se renderiza PNG. Lo que tenemos que hacer es asegurarnos de que cuando se está renderizando, se está renderizando lo mejor que puede en esos pequeños pixeles. Tengo este pequeño ejemplo de gráficos por aquí. Lo que son es, en primer lugar, tenemos que ir a View, y en Illustrator, se pueden falsificar píxeles. En realidad no está cambiando la forma en que funciona tu documento. Es solo mostrarte una visión de vista previa de los píxeles. Si me acerco ahora, puedes empezar a ver, cuando estoy a la vista normal, es bonito y nítido y vectorial. Pero si va a ser un PNG, va a verse algo así. Lo que pasa es que, si tengo alguno de estos, digamos, esta línea, solo tiene un píxel de ancho, pero lo he posicionado así que se traslada a dos píxeles. ¿Puedes ver? Va a cualquiera de los lados, así que no sabe de qué manera ponerlo, así que nos da turbia borrosa, lo mismo con este L aquí, mismo con este tipo de aquí. Lo que pasa es que, cuando lo exporte , va a estar un poco borroso. Eso pasa bastante de Illustrator. Lo que vamos a hacer es seleccionarlos e ir con el botón derecho, y decir Make Pixel Perfect. lo que hace, en realidad mueve las líneas, así que ten cuidado. Está hecho que calienta la crujiencia. Como en realidad los he movido físicamente, moveámoslos un poco a la derecha, o medio píxel a la derecha, fácilmente puedo decir si va a ser pixel perfecto. Ver en la parte superior aquí, el ancho es de 92.5 píxeles. No se puede tener un 0.5. Tienen que ser números enteros. Se puede hacer manualmente pixel perfecto haciendo eso. puedes ver ahora los lados son bonitos, y si hago la parte superior, 26, si en realidad lo encogí un poco, pero ahora no está tratando de varar nuestro píxel. Definitivamente está por debajo de la línea ahora. ¿ A dónde se fue? Aquí tienes. Esta L aquí es la misma. Las fuentes son un poco raras. Este no va a ser tan malo. Mira esto, si hago clic con el botón derecho en ellos, Make Pixel Perfect, en realidad se ve mejor. En realidad está recortado un poco el fondo de la misma. ¿ Puedes ver? Antes era un poco más gordo por el fondo. Así que ten cuidado al usar Pixel Perfect. Ahora, Pixel Perfect funciona muy bien para líneas horizontales y verticales, o la mayoría de las cosas [inaudibles] de todos modos. Pero cuando llegas a cosas como este tipo de formas, no tiene sentido meterte con Pixel Perfect. Con estos tipos, mira esto. Si voy a Pixel Perfect, no puedo hacerlo. Demasiadas curvas, no puedo arreglarlo. Algunas de estas tienen algunas líneas rectas. Si hago clic en él y voy Make Pixel Perfect, creo que lo ha empeorado. Los ha empujado por todas partes. Simplemente hay demasiadas formas pasando. Pixel Perfect, ideal para realmente cubo, líneas rectas, y fuentes. Así que asegúrate de que sean Pixel Perfect antes de arrastrarlos a tu Panel de activos para exportarlos como PNG. Lo que vamos a hacer es, sólo para rematar, es que vamos a sumar a todos estos tipos, así que agarro los tres de estos, ahí tienes. En realidad los agrupa a todos juntos. Eso no es lo que quiero. Eres una F. Eres una F. Eres una F. Iré y los nombraré en un segundo. ¿ A qué más se necesita ir? Eso va a ser mecanografiado. Estos dos tienen que irse. ¿ A qué más se necesita ir? Tiene que ir la flecha. Asegúrate de que cuando hayas terminado con Pixel Preview para desactivarlo. No lo necesitas encenderlo después. A veces es difícil agarrar a estos tipos. Te vas a acercar. Aquí tienes. ¿Qué más? Este tipo de aquí. Aquí hay otra forma de hacerlo. En lugar de intentar arrastrarlos, solo tienes que seleccionar a la vez, y aquí hay uno que dice “Añadir lo seleccionado”. Se puede ver que apenas se cruza. Impresionante. Los tenemos a todos ahí dentro. Ahora, quiero seleccionarlos fuera. Estoy sosteniendo Shift y haciendo clic en ellos todos. Porque lo que voy a hacer es asegurarme de que estoy bien para ambas opciones. Voy a tener SVG más un PNG. Vamos a escalarlos a todos. Vamos a ir a los tiempos uno, PNG, así que vamos a tener ambos. Ahora, lo que debo hacer es pasar y nombrarlos, antes de exportarlos. Voy a ir a hacer eso ahora. Taylor va a acelerar esto con su edición mágica. Vamos Taylor. Hecho. Ahora voy a golpear a Export y ojalá todos vayan a exportar. Así que echa un vistazo. Ve. Tengo una flecha, dos versiones. Tengo un SVG y un PNG. Se pueden ver los tamaños de archivo. El SVG es en realidad sólo un poquito más grande, pero el PNG aquí es sólo un poco más pequeño. Pero este de aquí es de ese tamaño, diminuto, sólo lo ves ahí dentro. El SVG aunque es escalable, masivo. Lo mismo con el logo aquí. El logo es mucho más grande como un JPEG. En realidad esos son los equivocados. Lo que quiero es, donde un logo, SVG, dos kilobytes, tres. Entonces no hay gran diferencia real, excepto que esta de aquí es masiva. Genial. Es así como pasas y exportas tus PNG y tus SVG si exportabas iconos y logotipos. 38. Exportación de imágenes Retina HiDPI y responsivas desde Illustrator 2017: Hola ahí. En este video vamos a hablar de lo que hacemos con la retina, o con alto DPI, o con las imágenes responsivas, quieras llamarlo, todo se trata de la calidad de las imágenes. Ahora la mayoría de las veces, estamos en un punto en el que no hay reglas claras sobre lo que debes hacer, hay un par de formas de hacerlo, y algunas personas lo hacen y otras no. La mayoría de las veces la gente no, lo que hacen es simplemente darte una imagen y la escalan hacia arriba y hacia abajo para las diferentes resoluciones y simplemente convivir con ella. Debido a que las pantallas retina como mi MacBook Pro delante de mí y algunas de las tabletas Windows y algunos de los nuevos iPads, tienen el doble de píxeles, tienen alguna calidad increíble abarrotada en ellos. Lo que pasa mayormente es que la gente lo ignora. Es triste, pero cierto. La gente simplemente se olvida de esos tipos, porque son un porcentaje tan pequeño, y hay un poco de trabajo en el lado del diseño web para tratar de acomodarlos a todos. Ahora diciendo eso, si yo fuera un sitio grande, claro, los voy a acomodar. Pero muy a menudo cuando trato con personas con sitios web pequeños a medianos, gente simplemente no se preocupa por ello. No te puedes preocupar por ello y tendrás que meterte en ello. Ya vamos a hablar de ello, pero sepan que si quieren para su primer sitio web, está bien, obtienen un post completo. Se te permite simplemente usar imágenes de definición estándar para esta primera. Pero después de que has hecho una pareja y tus habilidades web están mejorando, totalmente quieres meterte en esto. Especialmente si estás tratando con clientes. Al igual que para mí, estoy enseñando cosas a diseñadores web y creativos, así y podrías argumentar que debería estar haciendo cosas de alta resolución porque mucha gente que está haciendo mis cursos tienen algunas laptops kick-ass, así que podría estar usando MacBook Pros con las últimas pantallas y todas esas cosas. Hablemos de lo que normalmente hace la gente. Simplemente exportan una visión como lo hacemos aquí. Voy a fijar todos estos. Bueno, nuestro trabajo encantador. Voy a anclar más sólo para que podamos empezar de nuevo. Digamos que estoy exportando esto para mi sitio web, voy a desbloquear mi capa de fondo, recortar solo esta parte y la voy a arrastrar. Lo que en su mayoría hace la gente es que va a ser un JPEG, y le voy a dar el sufijo. Eso no me gusta ahí y va a ser una escala de uno. Sólo convivir con ello. Cuando llega a una pantalla que es realmente grande o tiene una resolución realmente alta, como una pantalla de retina para Mac, simplemente escala y la píxel. Simplemente lo hace. No se ve muy mal, pero puedo decir que cerca del 90 por ciento de la población no puede decir que no se está escalando. A menudo lo que hago es, decir por algo como esto, este gran gráfico aquí, es que lo haré más grande de lo que necesita ser, así que bajaré aquí e iré a este 1.5. Lo he hecho como si no fuera el doble del tamaño. Podría hacer un doble, así que en realidad es el doble del tamaño de aquí para que signifique cuando se ve en una retina que está realmente claro. El problema con eso es que las personas que no lo están, o dicen que alguien en un teléfono móvil no lidia con esta imagen realmente grande siendo escalada justo hacia abajo porque están bien, pero les están teniendo que gustar cargar este tamaño de archivo realmente grande. Tan a menudo lo que hago como lo corté en el medio, digo que lo voy a hacer 1.5. Ahora, esa es la forma barata, cursi, fácil y la forma en que lo hago la mayor parte del tiempo. Entonces digamos que lo estás haciendo bien, y finjamos que somos adecuados. Lo que haré es crear una visión, esa escala uno. Entonces para las pantallas de retina, crearé una visión diferente. Entonces agrega una báscula y voy a hacer una más gruesa que es por dos. Simplemente significa que voy a ir a JPEG. ¿ Lo voy a anexar? Sí, voy a tener que anexarlo. Podrías usar el a veces 2X. Eso funciona bien y eso es realmente bueno cuando estás haciendo especialmente desarrollo de iOS, que cubriremos en el siguiente. Pero normalmente cuando lo hago, solo hago veces dos. Tengo otra versión y depende de lo alto que te vayas a ir. Yo solo de ponerme serio, realmente apoyo la retina, que es el doble de la resolución. Se pueden encontrar muchos dispositivos en estos días los cuales tienen cuatro veces la resolución. Este cuatro va a ser enorme. Entonces bien, puedes apoyar esos archivos grandes. Lo que puedes hacer es cuando estás construyendo tu sitio, es que puedes cambiar las cosas con consultas de medios. Simplemente significa que puede comprobar de qué tamaño es la pantalla y luego mostrar la imagen correcta para ella. Eso es perfecto y funciona muy bien. Es mucho trabajo extra para un porcentaje bastante pequeño de tus lectores o de tus usuarios. Entonces esa es una forma de hacerlo y ahora tengo tres versiones. Si golpeo exportación ahora, golpeo exportación. ¿Cómo se llama este tipo? Consíguele un nombre propio. Entonces le voy a dar un nuevo nombre. Yo lo voy a llamar fondo, eso es excitante exportación. Vamos a meterlo, echemos un vistazo, fondo. Tengo esta primera versión y hay otra versión y luego hay visión gigante. Aquí puedes ver las tallas. Una vez está en 1.1 megabytes, 1.2, y luego uno salta hasta 0.7. Tan bastante grande, tan grande, lío de aún más grande. Lo que pasa es que cuando estás construyendo tu sitio web en el otro lado, lo que quiero decir por el otro lado es codificar, no es súper difícil de pasar y crear consultas de medios para activarlas en diferentes tamaños de pantalla. Simplemente dice con mi navegador está mirando esto en una pantalla super retina comprueba si lo es, luego descarga esta imagen para cargar esta imagen. Es un dolor en el culo, pero así es como la gente se mueve alrededor de él. Así es como lidias con la retina. A menudo no necesitas hacer dos versiones. Harás una versión normal y luego en los momentos dos, y simplemente lo apagarás en código. Ahora al decir que no lo hago, todo lo que hago es agarrar a este tipo, hacerlo 1.5 justo en medio y obligo a todos a mirar la versión 1.5. Eso significa que las personas que usan pantallas que no son retina están atrapadas teniendo que cargar un tamaño de archivo un poco más grande. A las personas que están en retina se les da un poco de imagen. Nadie gana o todos ganan, depende cómo lo mires. Para que puedas pasar por todas estas imágenes y simplemente subirlas, arrastrarlas hasta aquí y tengo dos versiones. Ojalá eso te ayude. Otra cosa es que las personas a veces lo llaman alto DPI en retina que lo mismo. Alto DPI es lo que ninguna gente de Apple tiene que llamarlo. Retina es que una melodía de marca de Apple. Entonces si lo estás llamando retina, estás en problemas. Tiene que ser alto DPI, porque eso es lo que llaman a esas imágenes de alta resolución. Ahora otra cosa mis pequeños extractos al final aquí es que, su 2017, un cuadro en un par de años. Si estás mirando esto en 2019, probablemente [inaudible] contigo mismo metiéndote en estas Dan, malas cosas malas malas. Las cosas podrían haber progresado de lo que podrían haber sido o gran adopción de la a veces dos, o podría haber alguna otra forma de hacerlo. Entonces éste es el que va a revisar todo lo demás sólido. Este de aquí, solo consulta con tu desarrollador lo que quieren. Está bien, si no recuerdas nada de este video, me he revolcado un poco aquí y es solo dejarlo a veces uno, eso es lo que hacen todos y no te van a pegar. Si haces eso, simplemente podría no verse tan bien en algunas pantallas. Entonces solo haz una escala en este momento. Muy bien, diarrea verbal, cambio. Volver a tus videos. 39. Exporta tu interfaz de usuario para diseñar aplicaciones con Illustrator 2017: Este video va a ser más sobre exportar para app. Finjamos que no estamos construyendo una versión de escritorio y tablet, solo estamos construyendo una aplicación móvil así que hemos construido algunos iconos para ser utilizados aquí. Es muy fácil, digamos que quiero exportar a estos dos tipos juntos, tal vez por separado. Yo los voy a desagrupar y tú entras, arrastra el Kiwi. En realidad solo usaremos el Kiwi en este momento, podrías arrastrar todos estos de una sola vez. Nosotros sólo vamos a hacer este tipo, así que este tipo va a ser llamado el Kiwi y lo que van a necesitar es, vamos a deshacernos de todo esto, es todo lo que tienes que hacer es este iOS y Android. Probablemente estés desarrollando para ambos o tal vez solo para iOS o simplemente para Android pero digamos que lo estamos haciendo por un producto Apple y estábamos trabajando con un Desarrollador de Apple y él necesita gráficos para iOS. Haga clic en iOS y lo que hacen es que necesitan una escala de uno, dos y tres. Por lo que este tamaño, el doble del tamaño y tres veces el tamaño para trabajar con todos los diferentes tamaños que tienen en cuanto a sus pantallas. Son muy estrictos en las convenciones de nomenclatura, tenemos que dejar el sufijo ahí dentro luego vamos a dar clic en Exportar. Nosotros lo vamos a exportar a éste de aquí y deberíamos encontrar aquí a Kiwi. Tenemos las tres versiones que van a necesitar, ahí está el png estándar que es ese un tamaño entonces hay un png aquí a una escala luego a los tiempos dos y luego a tres y esos son los archivos que van a necesitar. Para que cada gráfico que hagas te vaya a necesitar versiones completas que probablemente sólo van a usar estos tres pero les den el SVG también. Si vas a hacer lo mismo para Android, es muy similar. Deshazte de estos chicos, haz click en Android, solo tienen una convención de nomenclatura diferente y tienen un montón de tamaños diferentes para sus apps. Se puede ver que incluso hay un ppp bajo más pequeño, dpi medio, dpi alto, extra grande alto. Va derecho hasta xxx dpi de alto. Por lo que hay hasta cuatro escalas, algunos de los teléfonos LG tienen algunas enormes pantallas escritas grandes. Click Export, lo mismo, vamos a tener Kiwi. Ya hay kiwi svg, pero les estarás dando estas versiones. Estas son las versiones que irán para Android. Podría estar haciendo ambas cosas o podría estar haciendo sólo una u otra pero eso es lo que van a esperar. Todo gráfico va a tener todo esto y va a tener esta convención de nomenclatura explícita aquí y sé que Android, creo que funciona un poco diferente, terminan en carpetas diferentes, así que eso es algo que tú podría tener que hablar con tu desarrollador sobre cómo los quieren y probablemente solo puedas darles de esta manera y los dividirán en las carpetas en las que necesitan entrar. Eso es explotar para el desarrollo de aplicaciones y lo único en que pensar, como hicimos en el tutorial anterior es mirar el pixel perfecto especialmente si tienes alguna de esas líneas horizontales y verticales. Principalmente porque estamos usando estos pngs, estas versiones de píxel. Está bien, eso es todo para ese video, nos vemos en el siguiente. 40. Exportación de CSS para desarrolladores con Adobe Illustrator 2017: Hola ahí. En este video vamos a ver explotar parte del código de Illustrator. Código. Si nunca has usado código antes, esto es algo que sería realmente útil para la persona que construye tu sitio. Si vas a estar construyendo tu sitio, esto va a ser súper útil para ti. Lo que haremos es mirar los diferentes elementos. Haremos un par de ellos pero las reglas son las mismas para mucho. Lo que vamos a hacer es empezar con este rubro porque es el más grande y más fácil. Con ella seleccionada, ve a Ventana y vamos a CSS Properties. Lo genial de esto es que nos va a contar muchos de los personajes CSS. Voy a arrastrar este panel de propiedades hacia fuera. Ves aquí, acabo de agarrar la parte superior de la pestaña, la palabra ahí, para poder verlo todo. Lo que me va a decir es que me va a contar cosas interesantes sobre estas fuentes. Me va a decir qué familia de fuentes es, si es negrita, de qué tamaño es, el color que es. Este es el tipo de cosas que le encantaría a un diseñador web. Porque en lugar de que sólo les des ese PDF que hicimos antes y diciendo: “Adivina la fuente. Adivina el tamaño. Adivina el color”. Volverán a decir que construyen tu sitio para ti y tú estás como, “Caray, ¿qué fuente es esa? ¿ Quiénes usan Comic Sans?” Han usado regular en lugar de negrita y todas esas cosas que has pasado la edad tratando de hacer ejercicio. Va a ser de 80 píxeles o 81 píxeles. En realidad se les puede decir. Lo que puedes hacer es agarrarlos, copiarlos y empezar a construir una hoja de especificaciones. Se puede decir escritorio, y este de aquí va a ser mi, sé que se llama h1, pero podrías llamarlo algo así como un encabezado. Elimina cualquier cosa que no te guste ahí adentro o ajústalo, pero este va a ser mi rubro principal. Si eres diseñador web, conocerás algunos. Podrías darle cosas como nombres de clase o nombres de etiqueta, pero en realidad depende de ti. El cool al respecto es que tendré una versión de escritorio, y lo que haré es tener una versión móvil también de la misma cosa exacta. Pero por aquí, cuando lo selecciono, ¿ puedes ver que es los diferentes tamaños de fuente lo tienen todo aquí? El móvil va a ser esto. Es exactamente lo mismo. Sabe que este es mi rubro uno, nuestro rubro principal. La diferencia es, Playfair, sigue siendo audaz pero ahora es de este tamaño. Algo a tener en cuenta es que genial, me ha dado mucha información pero en Illustrator aquí, puedes ver, no me está dando la sintaxis text-align. Hay mordidas algunas piezas que hace, no te da. Es genial. También es, le falta un par de cositas, molestas, pero está bien. Ahorra el día por mucho tener que pasar cosas a desarrollador o simplemente por ti mismo. Yo uso esto todo el tiempo. Voy a juguetear con las fuentes aquí dentro y sólo entra y comprueba. Probablemente no construiré un documento como este para mí. Probablemente solo trabajaré paso a paso ya que estoy construyendo el sitio para entrar en ilustrador y simplemente sacarlo. Pero si estás enviando a alguien más, y una de las cosas, di esta casilla aquí abajo, no exportarías eso como gráfico. Esta caja lista de durazno aquí. No lo exportarías como un gráfico PNG. Estaría diseñado en código, en CSS, y le daría su altura y anchura y color. Se puede ver cuando se seleccionan esos es no se genera CSS. Tienes que darles nombres por alguna razón. Podrías hacer la versión larga e ir a tu panel de capas, sarga por tus capas, y lo que pasa es que solo tenemos dos capas, ¿verdad? Pero dentro de esas capas, todos esos objetos están listados. Lo que puedes hacer con él es seleccionarlo por aquí. ¿ Se puede ver este pequeño ícono de búsqueda? Se baja a esta cosa llamada rectángulo. Simplemente le damos un nombre. En lugar de rectángulo, podemos llamarlo, no sé, llamada a la acción. Tratando de usar espacios. Llamada a la acción. Lo estoy haciendo con guiones. Ahora me dará un nombre de clase llamado llamada a la acción y el color real para ello. No me gusta hacerlo de esa manera. A mí me gusta hacerlo, Porque nombrar a tus clases aquí como cool si tipo de sabes lo que estás haciendo, pero no me parece súper útil. Digamos que es esta caja de aquí. De nuevo, no me va a dar mi nombre hasta que me vaya y lo encuentre y le dé un nombre. En realidad es más fácil, solo para entrar en tu configuración en la parte inferior de Generar CSS. Esa no. Una de ellas es Export Options. Eso es todo. El primer ícono. Este de aquí dice: “Generar CSS para objetos sin nombre”. Simplemente le da frío st1 oh, st0. Voy a copiar esto, y voy a meter esto en mi documento. En escritorio, este va a ser mi, no sé cómo voy a llamarlo, porque no es nada. Caja negra. Yo lo voy a nombrar aquí. Sí. Impresionante. Le faltan algunas cosas aunque como con bastante frecuencia necesito la altura y el ancho pero he decidido aquí. Hay algunas opciones en esta primera, tipo de Opciones de exportación otra vez que me gusta incluir. Hay uno que dice: “Incluir dimensiones”. Yo voy a hacer eso. Enfriar. Ahí también se incluyen dimensiones de píxel. Simplemente dale un alto y ancho. Encuentro que eso es bastante útil. Está bien. Ahora usa la ejecución rápida de tu documento y dile a la gente lo grandes que son las cosas. Podrás agarrar esta caja verde al fondo, darle la altura y anchura y píxeles. Tengo que desbloquear esta capa aquí. Ahí va. Sé que este tipo es un ancho de fondo. Es principalmente la altura con la que quiero lidiar. Yo quiero asegurarme de que él sea o ella tiene a la altura correcta. Igual con estos botones en la parte superior, los colores correctos y la altura y el ancho que estoy usando, este logo. Podía decirles la altura y el ancho que quería. Sí, solo realmente bastante útil sacar el CSS por ti mismo si vas a ir a construirlo a continuación. Eso es lo que haremos en uno de mis próximos tutoriales después de éste. Iremos a construir esto en Dreamweaver. Pero, si estás trabajando con un desarrollador web o diseñador web, puedes simplemente entregarlos una especie de hoja de especificaciones para darles un calibre aproximado. No tienes que enumerar cada cosa y cada pedacito de margen, pero, sí, podría ser realmente útil. Está bien. Así es como exportar el CSS desde Illustrator para trabajar con tu sitio web. 41. Aprender el lenguaje del diseño de interacción de la interfaz de usuario: Está bien. Ahora que hemos creado nuestro primer proyecto para regalarlo en Illustrator, ahora puedes llamarte orgullosamente diseñador de interfaces de usuario. ¿ Eres el mejor diseñador de UI del mundo? Probablemente aún no. El siguiente paso es obtener tanta experiencia como puedas. Esto se puede hacer obviamente, haciendo sus propios proyectos y leyendo y siguiendo a otras personas que son impresionantes, un poco de experiencia prestada. Necesitas salir, averiguar quiénes son las personas increíbles, seguir su trabajo, aprender de sus experiencias. Todo el tiempo, estarás aprendiendo y escogiendo palabras y frases que podrás usar para comunicar tus proyectos de interfaz de usuario cuando estés trabajando en ellos. Hay algunos lugares realmente buenos para empezar. Este de aquí frente a nosotros en design.google.com es un recurso increíble. Este es mi go-to para UI. Se dirige específicamente a más tablet y móvil, que es el material nuevo de vanguardia. El diseño web móvil es increíble y ha existido mucho tiempo, pero mucho del nuevo lenguaje que vas a tener aprender viene de estos dispositivos. Probablemente la palabra más grande que hay que aprender es material. material es la palabra que usamos para hablar cómo el diseño interactúa con la persona de una manera más indirectiva de lo que nunca ha tenido antes. Hay tantas más características que un teléfono puede hacer que decir un sitio web. Este es el lugar para empezar. Apenas empieza a leer. este sitio hay tantos artículos bien curados y escritos. Es bastante increíble, me encanta este sitio. Por lo que solo empiezas a trabajar a través de él. Este sitio cuenta con artículos geniales. Los recursos son realmente geniales. Si hago clic en los recursos aquí, material.io es la explicación de Google de cómo funciona esta interacción. El genial al respecto, te da el lenguaje que podrías usar. Voy a saltar a material.io. Simplemente te da una manera realmente bonita de, si lo lees y comienzas a entenderlo y a trabajarlo, eso significa que cuando comiences a hablar con tus clientes y a trabajar con tus procesos, te va a dar ese lenguaje que necesitas para poder expresar lo que quieres decir y darle alguna credibilidad de por qué se debe hacer. Incluso sólo mirando los iconos y algunos de estos componentes de material, solo te da iconos y explica por qué. Incluso esto es solo un simple recurso de ícono que especialmente para cosas como apps que nos gustan, para qué diablos tipo de icono se debe usar, no sé o es un anuncio. Es sencillo cuando lo ves pero alguien es esclavizado largo y duro y ha pasado por muchas apps por lo que se está comunicando a la gente. Eso es un entender este es un lenguaje que ya existe. No estás tratando de reinventar la rueda. Igual que Componentes Uno. Hay alguna documentación realmente bonita sobre cómo funciona esto. Ve en los recursos de Google, sus artículos son increíbles. Otra que me gusta bastante es mirar a la de Facebook. Tengo una llamada Facebook.Design. Es solo sus diseñadores y llegan a publicar cosas que les interesan, artículos que han escrito, en qué están trabajando. Encuentro que este es un recurso realmente genial para aprender y seguir ideas geniales y entender cómo funcionan las cosas. Sí, es otro sitio genial. Ahora vámonos, encuentra a los mejores diseñadores de UI que te gusten. Síguelos en Twitter, síguelos en Facebook. Lee estos artículos y realmente te ayudará a obtener más confianza cuando empieces a entregar tus diseños. Podrás comunicarte esos a tus clientes. Está bien. Te veré en el siguiente video. 42. Cómo conseguir tu primer trabajo como diseñador de interfaz de usuario: ¿ Cómo obtienes tu primer trabajo como diseñador de UI? Ya has hecho el curso, y realmente llegaste a empezar, pero ¿cómo consigues trabajo? Ahí hay dos arroyos. Si eres joven, o listo para un completo cambio de carrera, vas a dejar de ser panadero, y ahora te vas a convertir en diseñador de UI, o eres joven y eres estudiante y estás buscando meterte en ello es que la dirección apenas empieza como diseñador de UI junior. Encuentra trabajo, cualquier trabajo. Porque es realmente difícil entrar, así que, solo construye un buen portafolio, usa el proyecto que hemos hecho en esta clase, y construye un par de otros proyectos por tu cuenta, o para amigos o colegas y simplemente consigue un trabajo. Toma cualquier paga, toma cualquier cosa, y sabe que después de alrededor de un año, vas a aprender una cantidad loca de donde estés trabajando, y sabes que cualquier trabajo que lleves aunque no sea el trabajo más fabuloso, va para darte ese tipo de experiencia que necesitas para el segundo trabajo. Ojalá que ese trabajo florezca en esta maravilla, pero encontré en mi experiencia, todos su primer trabajo, te contratan te tratan un poco mal, no tienes muy buenas habilidades, y después de un año o dos en realidad estás empezando a ponerte bastante bueno pero, el negocio nunca ve a esa persona, es por eso que los tratan como al junior, y la tasa salarial se mantiene bastante baja, y se pone un poco de trabajos asquerosos. Entonces haces eso por un rato, y luego saltas de trabajo. Es apesta pero es la manera de salir adelante. En diseño web es encontrar otra agencia, mostrarles este soy yo ahora, tengo dos años más de experiencia, esto es todo lo que he trabajado. He trabajado en una agencia, así que conoces un poco más el idioma y obtienes un mejor trabajo de esa manera. Esa es una forma de empezar. Es sólo tomar un trabajo en la industria, y empezar, pero necesitarás un portafolio para empezar, así que necesitarás algunos proyectos que hayas hecho, como este en este curso. La otra tendencia es que si eres un diseñador, o trabajando una agencia creativa, ya estás manejando tus propias cosas, o simplemente te aburres con el diseño que estás haciendo en este momento, eso va a ser un poco diferente. Vas a tener que simplemente tomar todo el trabajo de lado probablemente y podrías ser como yo si ahora cambio de carrera, tengo 36 tengo hijos, no hay hipoteca para pagar renta pero hay responsabilidad. Entonces lo que vas a tener que hacer es quemarlos dentro o fuera. Date un año o dos y di, voy a usar todos los lunes por la noche, martes por la noche, miércoles por la noche para trabajar en un proyecto. Al principio puede ser solo tu cartera, aléjate eso realmente rápido, tus propias carteras es lo peor que te lleva para siempre, pero luego enfréntate a cualquier trabajo que puedas. Podrían ser amigos o familiares solo para que esa cartera vaya, entonces puedes empezar a trabajar en otros proyectos paralelos. Una vez que tengas tu experiencia en marcha, puedes empezar a mirar cosas como estas cosas como Upwork. Te inscribes en eso o Freelancer.com o 99designs. A pesar de que eso no te va a dar ese claro salto de ruptura, porque la paga está bien, y es cosa freelance de un lado, pero es construir esa cartera para ti y construir esa experiencia, que cuando sí llegas a un punto que te gusta en realidad soy bastante bueno en esto ahora. Yo he hecho algunos trabajos, no están pagando cantidades enormes, son como colegiatura pagada. No tienes tiempo para irte y hacer un curso de año, hacer este trabajo más pequeño solo para los más pequeños paga, solo para construir sobre y está pagado y aprendiendo, y luego una vez que llegues a un punto donde te sientes como, bien me he llevado mi habilidades de diseño de otra área y en realidad lo he aplicado aquí, tengo confianza, tengo que el lenguaje, entonces puedes hacer más de un salto para otro trabajo. Necesitas comenzar a nivel web medio, necesitas estar ganando 60 mil al año sin comenzar en el mínimo de la banda. Así que te metes en ese papel como diseñador web medio, y tal vez por ahí arriba no hay un gran éxito para la familia, o podría ser solo que estás construyendo tu negocio como diseñador gráfico, todavía no eres freelance pero estás consiguiendo más y más trabajo de UI. Ese es mi consejo de todos modos. Ese es mi consejo, está bien, siguiente video. 43. Próximos pasos para convertirte en un increíble diseñador de interfaz de usuario: Siguientes pasos después del curso. Otras cosas que puedes hacer es que podrías pasar a más de un enfoque UX para el diseño. Hemos hecho todo el diseño de UI en Illustrator y para agregar un nivel de interactividad, puedes mirar algo llamado Adobe XD o diseñador de experiencias porque tenemos tipo de pisos en este momento. Puedes tomar esos pisos y hacerlos clicables para saltar a diferentes páginas, prototipo y app a través del teléfono real. Adobe XD es un gran siguiente paso para ti, así que echa un vistazo a mi curso se llama UI en diseño web usando Adobe XD. Otras herramientas o cosas que podrías usar es Photoshop. Photoshop para diseñadores web es otro curso que tengo. Es solo, otra pluma en tu gorra en cuanto a ser diseñador de UI. La otra parte que podrías bajar es que podrías bajar por todo el proceso de diseño web. No solo diseñando visuales sino realmente construyendo el sitio usando HTML y CSS. Consulta mis cursos de Dreamweaver. Hay unas cuantas diferentes. Estos que son más lado de diseño y luego hay uno que es más lados de codificación. Echa un vistazo a esos. Otra opción que podrías bajar es toda la experiencia UX. Hemos hablado de UI y brevemente lo que es UX, y la diferencia entre una interfaz de usuario y el diseño de la experiencia pero tengo un curso completamente sobre cómo convertirme en un diseñador de UX. un vistazo a esa si quieres meterte en un poco más de diseño UX o al menos entender de qué se trata. Eso va a ser. Gracias por ver. Nunca estoy seguro de qué hacer al final de estos, solo un poco de murmurar. Mumble. Mumble. Adiós ahora. 44. Próximos pasos para convertirte en un increíble diseñador de interfaz de usuario: Está bien. Ahora, es hora de los próximos pasos. ¿Qué hago ahora? Terminó el curso, estoy empezando en UI. ¿ Qué puedo hacer a continuación? Ahora, puedes quedarte como diseñador de UI y simplemente seguir practicando esas habilidades. Consigue más trabajo construye un portafolio, solo haz el lado del diseño, quedándote en el lado del ilustrador y suministrando archivos y pon el CSS a nuestro desarrollador web. Pero si quieres ir un poco más allá, el siguiente paso sería mirar a hacer esas cosas web tú mismo. Para empezar en su HTML y CSS, para ese lado de codificación, puedes hacerlo bastante visualmente. Tengo un curso en durante la palanca para Bootstrap, que lo mantiene bastante visual usando algo como Dreamweaver y no nos ponemos demasiado pesados en el código por lo que definitivamente puedes hacer eso como diseñador web. Todo lo que tal vez quieras ir aún más allá y ser un diseño web front-end totalmente en toda regla realmente necesitas entender el código y hay otro curso que tengo es como codificar para diseñadores o codificar tu primer sitio web. Eso es todo. Voy a revisar esa y eso también usa Dreamweaver. Ese puede ser el siguiente paso que lo diseñes en Illustrator, lo construyes en algo como Dreamweaver. Si no quieres usar Dreamweaver, está bien. Hay otros programas en los que puedes empezar a aprender a codificar. Komodo es uno. Wow, no puedo pensar en el resto de ellos. Sublime, K2 es probablemente la más popular en mis círculos en este momento. Es solo otro código dentro de eso, como Dreamweaver. ¿Qué más se puede hacer? Puedes acumular tus habilidades en otro programa de diseño como Photoshop, tengo un curso sobre cómo construir exactamente lo que hemos hecho aquí en Illustrator bastante pero haciendo eso en Photoshop. Tienes ambas herramientas para empezar a usar, es posible que encuentres que si buscas trabajo, podrían apoyarse en una u otra puedes ir a eso también. ¿Qué más se puede hacer? Podrás empezar a usar algo como Muse tal vez. Puedes diseñar algunas cosas y usar Muse para construir el sitio. Definitivamente no es código. Tengo un curso om Muse también. Por supuesto en todo. Otra cosa que podrías considerar es quizás tomar tus habilidades de diseño, diseñarlo e ilustrarlo, y luego tal vez construir en WordPress. WordPress es probablemente el CMS más grande en el conjunto, entero en web. Puedes diseñarlos en Illustrator y luego construir algo llamado cosas en WordPress que podría ser una dirección a la que irías. Podrías simplemente quedarte como diseñador web. Mucha gente lo hace y eso está totalmente bien. A mí me gusta tanto hacer el diseño como la construcción, pero podrías simplemente quedarte el lado del diseño. Podrías tener otras cosas en las que trabajas y solo haces algunas cosas de diseño como parte de eso. Probablemente la gloria coronaria, al menos en mi opinión en este momento, es llevarte el trabajo de UI y agregarle un nivel de investigación y pruebas, convirtiéndote esencialmente en un diseñador de UX. Ve a ver cómo convertirte en diseñador de UX y ese es otro curso que tengo. Pero agrega un nivel de lo que me encanta en términos de comprensión empresarial y su diseño de interfaz de usuario es bastante buscado a menudo ahora en el diseño de UX en este momento. Utiliza tus habilidades de la interfaz de usuario, pero se construye a partir de eso con otras herramientas y otras técnicas y eso está en una demanda alocada en este momento. La mayoría de la gente dice, quiero un diseñador UX-UI. Hay algunos un poco diferentes, pero UX podría ser una progresión para las unidades y está pagando muy bien en este momento. Eso podría ser en lo que te metes. 45. Tu primer proyecto: Es tiempo de proyecto, tiempo de tarea, tiempo de desarrollo profesional, como quieras llamarlo, este bit es súper importante. Te prometo la gente que enseño, enseño a mucha gente. Es la gente que hace esto como paso extra porque me has estado siguiendo paso a paso a través este curso lo cual es increíble y vas a conseguir las ideas pero no es hasta que las pones en tu propia práctica, tenemos que piensa por ti mismo tropezar con tus propios problemas. Entonces este pequeño proyecto te lo voy a guardar. Las personas que hacen esto son las que lo van a recordar. Si eres serio, haz este pequeño proyecto, siembra en mí. Me encantaría ver qué haces, veamos algunas pequeñas tareas que hacer. Los hemos anotado. Vas a estar haciendo cosas para un cliente. Es un pequeño café que se abre en tu barrio. Se llama Craft Espresso. Lo que me gustaría que hicieras es ir a algo así como premios, awwwards.com. Por inspiración, quiero que hagas un escritorio, una tableta, y una versión móvil para ellos y quiero que hagas el logo, quiero que uses la herramienta de lápiz o la forma construyas una herramienta para construir algún logo de victor y pongas su nombre al lado. Me gustaría que utilizaran colores para el logo y para el sitio. Quiero que escojas algunas cosas de Adobe color, color.adobe.com. Ve a ver que escoge una muestra de color que vas a usar, puedes usar las tuyas propias pero podrías ser nuevo en el picking de colores, así que elige eso. Lo siguiente que tienes que hacer es, quiero que uses dos fuentes y no más de dos. Tienes que ser preciso y estás recogiendo y quiero que las escojas de fuentes de Google. Por lo que quiero que puedas descargarlos e instalarlos en tu máquina y poder utilizarlos. Otras cosas que quiero que hagas es quiero que uses imágenes, cafés, cafeterías y cafeterías y esas cosas. Debe haber alguna buena calidad, uso comercial libre. Todavía estarás solo estudiando así, realidad no importa pero los chicos consiguieron freeimages.com. Obtén imágenes onduladas como llévalas tú mismo, ve a partir de ahí si quieres, llévala para tu sitio. Yo quiero que se haga eso. Quiero ver que creas al menos un icono personalizado usando la herramienta constructor de formas y pin también. Algún icono en el sitio y quiero que explotes todas las cosas en el interior. Pasar por ese proceso de exportar todo lo que es esa forma de vencedor, bien pausa o escalable, quiero que eso sea un SVG. Cualquier tipo de fotografías que estés usando, quiero que esas sean jpegs y quiero que exportes parte del CSS también, principalmente la calefacción, cualquier texto de párrafo y tal vez tengas un botón de llamada a la acción. Cosas así, me gustaría documento de texto. Entonces me gustaría que los cierre todos y me los puedes mandar. Hay un par de maneras diferentes y puedes publicar capturas de pantalla. Tener todo es probablemente todo lo que es necesario. Especialmente quiero ver tus diseños. Yo quiero verlos, ver cómo te va, ofreciéndome consejos y simplemente mantenerme en el bucle de lo que estás tramando. Ese es tu proyecto, quiero que pases por esas listas y asegúrate de incluir todo eso y construirte una cosita que puedas usar para tu portafolio. Te veré en el siguiente video. 46. Hoja de ruta: Está bien, esta es nuestra hoja de trucos. Vamos a pasar por algunos de los bits que hemos cubierto en muy rápidos, pequeños puntitos de bala y añadir algunos consejos y trucos súper extravagantes. Vamos a hacerlo. Entonces estás tratando de exportar tus gráficos web, algunos PNG de Illustrator, pero están saliendo un poco lechosos, un poco crujientes alrededor de los bordes. Esta punta de hoja de trucos te mostrará cómo arreglarlo. Vayamos a Ver y vamos a este que dice Vista previa de Pixel. Esto va a previsualizar cómo se va a ver como un PNG en píxeles, y se puede ver, borroso. Entonces vamos a seleccionar a todos estos chicos y arreglarlo haciendo clic derecho en cualquiera de ellos, e yendo a uno que diga Hacer pixel perfecto. Oh Dios mío, mira qué crujientes son esos. Es así como arreglarlos antes de exportarlos como PNG. Los alineará a la cuadrícula de píxeles y obtendrás exportaciones perfectamente nítidas. Por lo que antes de empezar a trabajar en cualquier proyecto web o proyecto de diseño de interfaz de usuario, vas a tener que cambiar tus preferencias a píxeles porque no podemos usar nada más en línea. Entonces sin nada seleccionado, puedo subir hasta aquí donde diga Preferencias, o puedo bajar a Editar preferencias en un PC o en caso de mi Mac aquí, está bajo las unidades de preferencias de Illustrator. Lo que queremos hacer es asegurarnos de que general esté configurado en píxeles, y el trazo esté configurado en píxeles, y el tipo se establezca en píxeles. De nuevo, es todo lo que tienes entrenamiento de por vida. Todo se trata de píxeles. Haga clic en “Ok”, días felices. Por lo que necesitas 12 columnas para tu cuadrícula de diseño web responsive. Para hacerlo en Illustrator, agarra la herramienta de rectángulo, dibuja una caja que gira todo el ancho y luego ve a Object, sube a Path y vamos a Dividir en cuadrícula. Se ha cambiado el número de columnas a 12. Las canaletas aquí que voy a usar son 30 para igualar bootstrap, voy a dar clic en “Guías Ed”, haga clic en “Ok”. Estamos ahí. Puedes parar ahí si eso te funciona. Ahora si haces clic con el botón derecho en alguno de ellos, y vas a Desagrupar y seleccionas solo estas primeras aquí, solo son líneas no guías reales. Entonces voy a cortar esos, borrar toda la basura que queda. Ahí hay un poco de basura y vamos a Editar, pegar en su lugar o pegar al frente, ponerlo de vuelta donde lo conseguimos luego ir a Ver, luego bajar a Guías y ir a Hacer guías. Ahora los guías adecuados. Por lo que solo estás usando dos fuentes para todo tu sitio, pero tienes que desplazarte por toda esta lista para intentar encontrar la fuente que estabas usando una y otra vez. Pero, ¿dónde está? Ahí está. Estoy usando playfair. Voy a golpear este botón de estrella de aquí, y eso significa ahora cuando entre aquí y digo, “Qué fuentes estoy usando”, haz clic en esta pequeña estrella de aquí, y sólo me va a mostrar mis favoritos. Ahí está mi feria de juegos. Hace que sea súper fácil de usar. Voy a ir por aquí, haga clic en esto, solo playfair, días felices. Por lo que estoy listo para exportar mis gráficos para construir un sitio web. Ahora voy a subir a Archivo, voy a ir a Exportar, y luego voy a ir a no hacerlo. Ahorra para web, no utilices más. Vamos a usar a este tipo de aquí, ventana, y va a ser el panel de exportación de activos, y todo lo que tenemos que hacer es seleccionar el gráfico que desea exportar, hacer clic en mantener y simplemente arrastrarlo en el medio aquí, darle un nombre, y decidir el formato. ¿ Necesitas una retina deportiva? Fácil. Haga clic en “Añadir escala”, ahora tengo una opción el doble del tamaño. Tengo estos pequeños iconos en la parte inferior. Voy a arrastrar estos, y voy a usar, en lugar de PNG y JPEG, voy a escoger el encantador, voy a escoger el encantador, famoso SVG para Scalable Vector Graphic, haga clic en “Exportar” y ya estás lejos. Por lo que le suministras gráficos a un desarrollador y pasas mucho tiempo en Illustrator planeando y diseñando, y se los das y ellos regresan y nada se ve igual. Lo que puedes hacer para asegurarte de que este proceso sea más agilizado, es darles algo de CSS. Para hacerlo en Illustrator, seleccionas en el objeto del que deseas obtener algún código CSS, ve a ventana y luego baja a propiedades CSS ahí mismo. Puedes copiar esto y pegarlo en un correo electrónico y decir: “Estimado desarrollador, asegúrate de que sea playfair, y sea audaz y el tamaño sea correcto, y el color es exactamente el modo en que lo elegí, nada más”. O de lo contrario, digamos algo más como esta caja naranja aquí, y se podía ver no se generó código CSS. Entonces para redondear eso, hay una primera pequeña opción abajo en la parte inferior aquí, opciones de exportación que dicen, “Generar CSS para objetos sin nombre”, y lo otro que me gusta encender es incluir dimensiones y voila, me va a dar mi talla y altura y color para mi encantador botón de llamada a la acción. No debe haber excusas ahora que todo no se alinea. Mira bien exactamente cómo lo has diseñado en Illustrator. Necesitas compartir este proyecto con alguien más de tu equipo u otro diseñador o simplemente archivarlo. El problema es, es que has usado imágenes que provienen de tu biblioteca y fuera de una unidad de red, hay fuentes que la otra persona no tiene. No te preocupes, puedes arreglarlo todo yendo a File, bajando a Package, asegúrate de que esté guardado, dile un lugar al que ir, y voy a golpear “Package”. Haga clic en “Ok”, retrocede, relájese y en su escritorio en un segundo, seguro, paquete tengo un poco de texto inútil, he llamado a mi archivo Illustrator, tengo todas las fuentes que se están utilizando y luego las imágenes que se están vinculando. Ahora puedo comprimir este lote y enviarlo al siguiente diseñador. Días Felices. Gracias Illustrator.