Fundamentos de Adobe Illustrator para diseño web: los conceptos básicos (I)

1. Primeros pasos en Illustrator: Oigan, todo el mundo. Este es Ryan Clark. Bienvenido al primer proyecto de la clase Adobe Illustrator para Diseño Web. Este primer proyecto debería ser realmente sencillo. Simplemente vamos a pasar y vamos a crear un nuevo documento, editar ese documento, mirar nuestra mesa de trabajo, sólo conseguir nuestros rodamientos en el Illustrator y ver un par de herramientas que nos ayudarán con nuestro flujo de trabajo, par de cosas que puedes simplemente ignorar ya que en realidad no estamos usando más de las características centradas de Illustrator, y simplemente ponte en marcha y ponte cómodo. Entonces, empecemos realmente. Lo primero que vamos a hacer es crear un nuevo documento. Entonces, para crear un nuevo documento, básicamente vas a subir al menú Archivo y seleccionar Nuevo. Alternativamente, puedes usar el comando N para abrir esto. Este es el nuevo panel de documentos. Aquí es donde vas a configurar tu mesa de trabajo y conseguir todo configurado para tu página web. Hay una serie de presets entre los que puedes elegir. Algunos de ellos ya están configurados para web. 1280 por 800 es lo más cercano a lo que queremos llegar, no importa realmente que 80. Entonces, usualmente solo voy con 1,200 porque es un poco más fácil configurar guías, a que llegaremos más adelante. Desea asegurarse de que sus unidades estén configuradas en píxeles en lugar de pulgadas o picas o cualquiera de las unidades de medida más centradas en el diseño de impresión. En lo que respecta a la configuración avanzada, quieres asegurarte de que estás en RGB. Todo lo que necesitamos hacer es RGB porque se va a ver a través de una pantalla. Efectos de ráster, tipo de misma idea. Ya que no vamos a imprimir nada de esto en la vida real, no necesita ser calidad de impresión completa a 300 PPI. Entonces, puedes cambiar eso a pantalla y luego hasta el modo de vista previa, ponlo en pixel, para que todas nuestras formas que creamos en proyectos posteriores sean súper nítidas y alineadas. Eso lo explicaré cuando lleguemos a ello. Pero sigamos adelante y nombremos este nuevo documento. Empezaremos. Entonces, el documento aparecerá. Puedes ver básicamente en el lado izquierdo por aquí, tienes una barra de herramientas realmente básica. Estos son donde se encuentran la mayoría de las herramientas. En la parte superior de esta área, básicamente tienes un conjunto contextual de opciones. Esas opciones cambiarán en función de qué herramienta has seleccionado. Entonces, si solo tienes la herramienta de selección directa encendida como lo hice ahora mismo, vas a conseguir un conjunto de opciones. Si dices crear tipo y has elegido algún tipo, entonces vas a tener menú desplegable de caracteres, párrafo desplegable, otras cosas como esa. Esto resulta muy útil cuando realmente estás trabajando con elementos individuales en tu página. Por aquí, tenemos una serie de palets. Ya verás que en cuanto a cómo usar estos pellets, básicamente solo tienes que hacer clic en ellos para abrirlos. Puedes volver a hacer clic en ellos para cerrarlos. Si hay algunas que encuentras que usas con más frecuencia o nunca usas, puedes moverlas, sacarlas y luego deshacerte de ellas. En realidad es increíblemente fácil personalizar básicamente estas patillas para obtener solo las herramientas que realmente necesitas ahí. Entonces, esta es la configuración general. Esta es la aplicación en sí. Es bastante sencillo. Está bien. Entonces, ahora que conocimos nuestro camino, vamos a seguir adelante y agregar algunas guías a nuestro documento. Esto básicamente sólo nos va a dar un diseño realmente simple o una cuadrícula con la que podemos arreglar los elementos de nuestro sitio web. Será un poco más útil cuando empecemos a utilizar algunas de las herramientas de alineación en proyectos posteriores. Pero por ahora, vamos a empezar con sólo una línea de base realmente sólida. Entonces, vamos a usar la regla para empezar. Puedes usar una regla tocando el comando R o subiendo a Ver, Rulers, Show Rulers. Esto encenderá la regla. Esto te permite saber exactamente qué píxel o qué tamaño es tu mesa de trabajo y te permite realmente meterte en la basura de dónde se están colocando tus elementos. Entonces, vamos a seguir adelante y acercar sólo un poquito. Dado que nuestro documento está configurado para tener 1,200 píxeles de ancho, sabemos que nuestra línea central va a estar justo aquí en 600. Quiero que el diseño de mi sitio web tenga unos 800 pixeles de ancho. Eso es realmente arbitrario pero sólo una regla de pulgar realmente simple de la que me voy. Eso significa que vamos a necesitar comprometer 200 píxeles de cada uno de los lados. Entonces, voy a seguir adelante y poner uno de estos aquí en 200, y luego por aquí en 1,000. Entonces, ahora si nos alejamos, se puede ver que sólo tenemos una línea central realmente simple. Tenemos nuestro margen izquierdo, y tenemos nuestro margen derecho todo configurado. Eso es realmente todo lo que necesitas hacer en lo que respecta a los guías. Existen muchos sistemas de cuadrícula diferentes que existen. Hay una tonelada que se ha escrito sobre eso. Voy a publicar algo de eso en el extra del proyecto para que ustedes puedan ver eso y enlazar a un par de artículos. Te puedes complicar tanto como realmente quieras ser. Para algo tan simple como solo un sitio realmente rápido de una página, todo lo que realmente necesitas es una línea central realmente sólida y entonces eres margen se establece ahí fuera. Entonces, ahora que tenemos todo listo, podemos seguir adelante y podemos hacer una última cosa que es editar rápidamente nuestra mesa de trabajo. Entonces, di que estás trabajando en un proyecto y te das cuenta de que tu mesa de trabajo es en realidad demasiado pequeña. El que hemos creado es de cuatro por tres. Entonces, se va a constreñir en función de cuánto tiempo dura nuestro sitio sobre todo si se trata de un sitio de una página, como los típicos sitios de aterrizaje de una página que duran para siempre y para siempre y para siempre. Entonces, si necesitas agregar más espacio a tu mesa de trabajo, básicamente puedes bajar aquí a la herramienta Mesa de trabajo o Shift+O. adelante y haz clic en eso y te pondrá en este modo de mesa de trabajo. En este modo de mesa de trabajo, aquí arriba verás el ancho y la altura de tu mesa de trabajo. Es realmente fácil de cambiar. Entonces, digamos que queremos que en realidad sean 2,000 pixeles, vas y eliges 2,000 pixeles y de repente, ahora tienes 2,000 pixeles de alto. Digamos, una cosa a tener en cuenta sobre esta herramienta es que este ícono de aquí está básicamente determinando de dónde vienen todos tus píxeles. Entonces, si queremos que se agreguen los píxeles al fondo de la mesa de trabajo, entonces necesitamos ponerlo aquí arriba para que el punto de referencia sea la parte superior. Eso básicamente bloqueará todo a la parte superior y agregará contenido debajo de él. Lo mismo con el fondo, si estamos trabajando con el pie de página o algo así y queremos agregar espacio por encima de él, entonces nos referiríamos a esto a la parte inferior, y luego cuando agregamos nuestros píxeles serían por encima de los elementos que ya estaban en nuestra mesa de trabajo. En realidad eso es todo para el primer proyecto. Ahora que tenemos una mesa de trabajo, tenemos un documento de trabajo, vamos a seguir adelante y en el próximo proyecto empezar a trabajar con formas en Illustrator. Gracias. 2. Creación y edición de formas: Hey todos, este es Ryan Carter otra vez, y vamos a empezar nuestro proyecto sobre formas. Las formas son realmente el núcleo del ilustrador y te permiten crear tus elementos de diseño web con gran facilidad, y gestionarlos, y agruparlos, y alinearlos de manera increíblemente sencilla. Creo que realmente en su núcleo está la razón más grande para usar Illustrator para el diseño web es lo fácil que es lidiar con todos estos elementos. Entonces, lo que vamos a hacer es básicamente empezar aprendiendo cómo crear algunas formas y luego cómo editar esas formas, luego cómo moverlas, escalar, rotar, todo el tipo de cosas que puedes hacer para hacer especie de todos los diferentes pedacitos y piezas de su diseño de sitio web. Entonces, primero empecemos básicamente con el, empecemos en la herramienta Rectángulo. Notarás que por aquí tenemos la herramienta Rectángulo. Si lo mantiene presionado, puede seleccionar todos estos diferentes tipos de formas para hacer. Se pueden crear formas de dos maneras diferentes. Puede hacer clic y arrastrar para crear una forma, o puede hacer doble clic que le dará un cuadro de entrada donde puede escribir en dimensiones específicas, si sabe exactamente lo grande que debe ser la forma. Te darás cuenta de que si haces clic y arrastras para crear una forma que puedas crear cualquier tipo de proporción, es totalmente fluida, puedes hacer cualquier tipo de forma que quieras. Si mantienes pulsado el turno, lo que pasa es que los lados permanecen en perfecta proporción entre sí, que es como puedes crear cuadrados perfectos, círculos perfectos, cualquier cosa donde los lados estén todos alineados. Se pueden editar formas de una de dos formas. Puede usar el cuadro delimitador que proporciona el ilustrador para cambiar, arrastrar, mover, dar forma, tipo de movimiento alrededor de los lados, hacer clic y arrastrar, cambiarlo así, o bien puede cambiar elementos individuales de una forma utilizando la herramienta de selección directa. El instrumento de selección directa es este tipo de aquí, es el pequeño cursor blanco. Entonces, mientras que la herramienta de selección agarró toda esta forma en su conjunto, esta herramienta va a seleccionar puntos o líneas individuales. Entonces esto te va a permitir arrastrar elementos individuales de esa forma alrededor, y así es como vas a crear algunas formas complejas. Sigamos adelante y eliminemos estas formas y luego pasaremos a editarlas un poco más. Entonces, aparte de editar y crear formas, también puedes editarlas usando un par de herramientas integradas, y te voy a mostrar solo un par de las que uso con más frecuencia. Entonces, la primera es la herramienta de rotación, y la herramienta de rotación está justo aquí, también puedes pulsar R para seleccionarla. Lo que te va a permitir hacer es girar una forma alrededor, y marearte haciéndolo. Lo genial de esto es que si mantienes pulsado turno, entonces va a bloquear esto en 45 grados tipo de puntos de rotaciones para que sepas que si tienes un cuadrado perfecto y quieres que sea un diamante perfecto, entonces sabes que solo vas a querer rotarlo 45 grados. Esto viene muy útil para hacer pequeños puntos en las cosas, pequeños nubbins, flechas pequeñas, triángulos, todo eso. Para crear un triángulo así, solo gira un cuadrado, borra uno de los puntos, luego puedes usar tu herramienta de lápiz para entrar aquí y conectarlos de nuevo, luego tienes un triángulo. Por lo que seguiremos adelante y eliminaremos este tipo de pasar a escalar. Entonces, escalar es una de las otras herramientas útiles para editar formas. Es justo aquí, la herramienta de escala, suelo llegar a sólo con el uso de la tecla de acceso rápido S. Entonces lo que esto va a hacer es permitirnos aumentar o disminuir el tamaño de esta forma por magnitud de escala, y manteniendo pulsado el turno como las otras herramientas, va a bloquear las proporciones y nos permitirá asegurarnos de que aunque se está haciendo más grande, no estamos perdiendo su tipo original de proporciones shaper. Ahí, herramienta súper útil. Entonces eso nos va a ayudar a hacer las cosas más grandes o más pequeñas cuando realmente estamos retoques con diseños, algo así como hacer que el logo sea más grande, es como lo vamos a hacer. Pero nunca queremos hacer eso, quiero hacerlo más pequeño. Entonces estas son básicamente las formas centrales en las que vamos a editar formas, vamos a mover las cosas. Una de las otras cosas que es realmente útil en Illustrator es la idea de copiar formas. Entonces sigamos adelante y eliminemos esto y luego vamos a trabajar en mover las cosas y copiar y pegar. Entonces, a veces tu elemento no está en el lugar correcto. Obviamente, hay que colocarlo. Puedes arrastrar cosas por ahí usando la herramienta Seleccionar como ahora mismo lo estoy moviendo, o si quieres, puedes mantener presionada la herramienta Mayús mientras arrastras, y eso solo va a mover tu forma alrededor de un eje horizontal o vertical o un eje diagonal, y esto es realmente útil para mover las cosas alrededor cuando tal vez necesitemos ir un poco hacia un lado o simplemente un poco hacia abajo. No queremos perder donde estamos alineados vertical u horizontalmente, pero sólo necesitamos un tipo de finura algo en su lugar, súper útil. Otra herramienta realmente útil es solo usar las flechas, que pueden mover las cosas por todas partes y luego también mantener presionada la tecla Shift mientras mueve las flechas, moverá las cosas 10 píxeles a la vez, lo cual es agradable simplemente tipo de empujar las cosas cuando estás mirando algo en cuanto a cómo posicionarlo. Aparte de mover cosas, nosotros también, ya sabes de vez en cuando, vamos a querer copiar formas o repetir formas una y otra vez para elementos que son realmente similares. Entonces la forma más fácil de hacer eso es por en la edición usando copiar y pegar. Por lo que las teclas de acceso directo son sólo Comando C, Comando V, eso va a copiar un elemento y colocarlo en otro lugar del tablero de arte, generalmente bastante cerca. También podemos copiar algo y colocarlo directamente en el mismo lugar, especie de encima del otro elemento usando Command F, que también viene muy útil de vez en cuando. Uno de los otros atajos súper útiles es la capacidad de arrastrar y copiar al mismo tiempo. Entonces, como pueden ver, tengo este bonito círculo, y les mostré antes que pueden sostener el turno hacia abajo y moverlo, y lo va a mover en esta línea de base. Bueno, si mantengo presionado el turno y también presiono la tecla de opción, se puede ver que el cursor cambia al cursor de copia, y lo que eso va a hacer es copiar este elemento justo aquí o por aquí, y hacer una copia perfecta de eso en el nuevo lugar donde le he dicho que vaya. Esta es la forma más rápida absoluta de copiar elementos y lo uso todo el tiempo. Ahora, el inconveniente de copiar elementos como este es que no siempre están espaciados uniformemente, y eso es un problema, porque queremos que las cosas estén uniformemente espaciadas y súper hermosas. Por suerte, Illustrator nos ha resuelto este problema con uno de mis paneles favoritos en todo esto, y es el panel Alinear. Entonces vamos a bajar aquí a Alinear, puede que ya lo tengas en tu panel de herramientas. Lo que esto hace es que toma múltiples formas y las alinea de ciertas maneras. Se puede jugar con este tipo de un poquito solo para ver cómo funcionan. Te mostraré un par de los más útiles. Por lo general muchas veces lo que pasa es que tenemos múltiples elementos y vamos a necesitar bloquearlos o para algo así como a todos a la izquierda alinearlos a la misma línea, y eso es a esto aquí mismo. Se va horizontalmente alinearlos todos a la izquierda, lo que los va a mover. Ahora, un mejor ejemplo es usar formas que sean todas del mismo tamaño. Déjame seguir adelante y hacer algunos de estos. Impresionante. Entonces, ahora se puede ver. Tenemos estas formas, están un poco apagadas. Si quisiéramos decir: “Toma todos estos elementos y céntrelos todos juntos en una línea central, entonces podríamos usar este centro de alineación horizontal”. Lo mismo con alinearlos a la derecha y también alinearlos a la izquierda. Ahora, una herramienta aún más fría que está en este panel es la distribución. Entonces, para lo que esto es perfecto es para algo donde tengo tres elementos y quiero que tengan un espaciado perfecto entre sí. Entonces, se puede ver que tengo tres círculos. Este tiene un poco de espacio, éste tiene mucho espacio. En cuanto a mi diseño, quiero que estos sean parejos, quiero que sean perfectos. Entonces, lo que voy a hacer es, voy a agarrar los tres de estos y voy a usar los objetos de distribución. Lo que esto va a hacer es que va a distribuir esos objetos a intervalos perfectos para que sean todos exactamente el mismo espaciado aparte. Yo uso esto una tonelada absoluta. Es perfecto para cuando se tiene un diseño que tiene dicho, cuatro testimonios o para iconos que se necesitan para alinear esos de una manera donde todos se vean uniformemente espaciados. Esta es la herramienta para hacer eso y es súper útil. Entonces, eso es básicamente todo para crear, editar, alinear formas. Lo que vamos a hacer ahora es pasar a un poco más complejas que tratan con formas compuestas y con grupos. Entonces, crear formas simples y alinearlas es bastante fácil. Donde nos metemos en situaciones un poco más complejas es cuando tenemos muchas formas, muchos gráficos, muchos elementos que necesitamos para interactuar todos entre sí de ciertas maneras. Entonces, vamos a seguir adelante y crear un par de escenarios y mostrarles cómo lidiar con un montón de formas que están juntas. Entonces, una de las primeras cosas que notarás es que cuando creo una nueva forma siempre se sienta encima de la forma que creé primero. Ahora bien, esto es útil si siempre quieres que esa forma esté encima, pero a veces no lo hago. Entonces, Illustrator tiene básicamente una pequeña herramienta rápida que te permite posicionar un elemento en relación con todos los demás elementos que lo rodean. Todo eso se gestiona con el menú de arreglos. Entonces, en el menú de arreglos, tenemos traer al frente, traer hacia adelante, enviar hacia atrás, enviar hacia atrás. Lo que hacen básicamente es que esto permite cambiar dónde se asienta un elemento hasta la profundidad en relación con todos los elementos que lo rodean. También hay llaves cortas para que puedas enviarlo todo el camino a la parte trasera, enviarlo todo el camino al frente, puedes moverlo hacia abajo solo una. Esto es realmente fácil. Es así como podrás empujar elementos delante y detrás de otros elementos que están a su alrededor. Entonces, di que creé esta hermosa forma pero quería moverla por todas partes juntas. El modo fácil de mantener juntos todos esos elementos es básicamente crear un grupo. Entonces, lo que básicamente puedes hacer es subir aquí a objetar y puedes usar la herramienta Grupo, o también solo Comando G. Entonces, lo que esto va a hacer es, se va a llevar todos estos elementos, los va a combinar en un solo grupo para que cuando seleccione uno de ellos, voy a seleccionar todos. Cuando mueva uno de ellos, voy a mover a todos. Esto es realmente, realmente útil cuando tienes grupos realmente complejos de elementos que has creado o iconos, y dentro de contenedores y quieres moverlo por todas partes sin moverte alrededor de elementos individuales de algo. Aparte de agrupar elementos juntos, también podemos combinar elementos juntos en formas complejas. Entonces, di que quería crear una burbuja de charla. Puedo hacer eso usando un rectángulo y un cuadrado perfecto. Entonces, voy a tomar la plaza perfecta. Voy a rotar esto de lado. Voy a mover esto aquí abajo. Diga que lo había colocado salvajemente y quería que estuviera perfectamente centrado, realmente podría hacerlo simplemente con la herramienta de alineación que mostrábamos antes. Agarra esos y alinearlos juntos. Si quiero que esto sea un poco más pequeño, voy a mover eso allá arriba. Obviamente, esta forma general es correcta pero tenemos un problema si se trata de dos formas. Entonces, para cambiar eso, básicamente podemos ir al Pathfinder y usar el panel Modos de forma. Modos de forma es bastante útil cuando se quiere hacer formas complejas con cosas. El Pathfinder está aquí abajo. Probablemente no usarás estos una tonelada, pero definitivamente usarás esta herramienta Unite todo el tiempo. Entonces, al hacer clic en Unite básicamente toma esas dos formas y las combina en una forma compleja que luego puedo moverme, y en lugar de estar demasiado totalmente combinado y hacer que la charla burbuja que quería hacer. Entonces, eso es como una simple ejecución rápida, cuanto a cómo crear formas más complejas, cómo lidiar con muchas formas que están juntas. Entonces, tal vez te estés diciendo: —Brian, ¿cómo van todas estas cosas juntas? ¿ Por qué acabas de soplar a través de todo eso súper rápido?” Bueno, seguiré adelante y les mostraré cómo funciona todo esto conjunto para crear un sencillo diseño de página web. Entonces, sigamos adelante y eliminemos estos y volvamos a pasar a nuestro archivo de proyecto. Entonces, lo que quería hacer es básicamente guiarlos a través, cómo crearía las formas generales que conforman una página de inicio de página de aterrizaje prototípica. Entonces, pasemos por eso juntos. Entonces, vamos a empezar con un área de cabecera. No quiero ponerme súper complicado ahora mismo, solo quiero denotar ese área de cabecera haciendo un rectángulo grande. Voy a cambiar esto alrededor. Ustedes pueden ver nos meteremos en colores mucho más tarde, pero solo por ahora vamos a seguir adelante y hacer esto gris, seguir adelante. Entonces, ahora mismo voy a empujar esto en posición para que se vea realmente bonito y se alinea realmente bonito. Voy a centrarme en esta sección aquí abajo. Entonces, me gustaría hacer un área de testimonios. Como parte de ese área de testimonios, quiero crear una forma que sea una toma de pantalla del sitio web de alguien con una burbuja de charla que tenga como un avatar dentro de ella. Entonces, para hacer eso, podemos combinar un montón de la herramienta de forma diferente. Entonces, voy a empezar con el rectángulo redondeado. Voy a hacer cinturón rectángulo redondeado así. Eso es un poco demasiado grande. Entonces, vamos a pasar esto. Yo quiero que esto quepa tres de ancho. Entonces, adelante y haz algo así. Enfriar. Eso definitivamente debería funcionar. Está bien. Adelante y alinearlo aquí con mi regla así. Ahora, estos avatares. Yo quiero una especie de avatar de círculo. Creo que sería genial tener tal vez una pequeña burbuja que salga del fondo un poco, para hacer un poco más de una forma compleja. Probemos eso. Para asegurarme de que estas cosas estén totalmente alineadas, voy a usar mi herramienta de línea, herramienta de línea fuerte. Sí, esos tipos están todos alineados bastante perfectos. Mueve eso solo un poco. Mueve esto hacia arriba sólo un poco. Voy a seguir adelante y unir a estos dos. Eso es genial. Tenemos a este pequeñito pero acabo de tener uno. Entonces, voy a mover esto. Voy a agarrar estos. Voy a agruparlos para poder moverlos unos con otros, y voy a usar ese comando de movimiento y copia como les mostré antes chicos. Voy a mover uno hasta aquí a la derecha. Entonces voy a mover uno al centro. Se puede ver que estos no están espaciados uniformemente. Entonces, entonces los voy a agarrar a los tres. Vuelve a la herramienta de alineación y usa este centro de distribución horizontal. Ahora, tengo tres elementos de mi pequeño área de testimonios, y los tres de esos elementos están perfectamente arreglados entre sí. Eso es sólo tener un tutorial realmente rápido que muestre, cómo puedes usar las formas para diseñar pequeños elementos complejos y colocarlos alrededor de tu diseño realmente simplemente. 3. Tipografía y color: En esta entrega de la clase vamos a hablar de tipo y colores, y creo que en realidad voy a hacer esto en el contexto de este sitio en el que antes estábamos trabajando desde el proyecto dos. El tipo es impresionante en ilustrador. Creo que el ilustrador maneja tipo increíblemente bien. Creo que lo maneja mejor que en Photoshop. Creo que realmente es una de las fortalezas del programa, ya que tanto de un diseño web es tipo. Creo que tener una herramienta que lo maneje bien es increíblemente útil, y siempre me estaba golpeando la cabeza contra la pared tratando de que Photoshop hiciera las cosas que realmente quería que hiciese. Entonces, hablemos primero de cómo creamos tipo en Illustrator. En primer lugar, utilizamos la herramienta de tipo. Se ve aquí fuera muy rápido. Está por aquí. Puedes usar la tecla de acceso rápido T, para llegar a ella. Al hacer clic, te dará un, un área o te dará un cursor para luego escribir tu tipo. Entonces, entonces podemos, “Este es un titular”. Este titular es audaz, feo, y me gustaría cambiarlo por otra cosa. Entonces, puedes ver aquí arriba tenemos algunos presets realmente rápidos para tu personaje. Esta es la familia tipográfica. Este es el estilo de fuente específico, tamaño, párrafo. Esto es realmente todo lo que generalmente vas a necesitar a menos que estés tratando con lleno en párrafos y cosas, pero si necesitas hacer ajustes individuales puedes hacer clic aquí al panel de caracteres. Aquí es donde vas a conseguir todos los elementos de tu personaje. Hay tamaño, altura de línea, escalado, que nunca, nunca, nunca, nunca, usan el escalado de tipo porque sesgará tus fuentes, y será súper feo, y este es el kerning, si quieres kern cosas fuera. Todo eso probablemente esté cubierto en otras clases. Esto es justo aquí abajo ese es el párrafo. Aquí es donde vas a ver todas tus opciones de alineación, justificación, espacio arriba, espacio abajo, aquí es cuando realmente vas a estar lidiando con toneladas de tipo. Es posible que necesites esto para algunos proyectos, puede que no. Otra cosa de la que definitivamente tomar nota es el guión. Entonces, la división automática de guiones es impresionante cuando estás trabajando en un libro o algo que vas a imprimir, pero no es impresionante cuando estás trabajando con sitios web porque los sitios web no escriben palabras. La mayoría de los navegadores no tienen nada realmente incorporado, mayoría de los sitios web no escriben automáticamente las cosas cuando llegan demasiado tiempo. Entonces, para poder ver el verdadero trapo de tu tipo, y tener una representación realmente precisa de lo que va a ver un visitante. Quieres asegurarte de que ese guión esté apagado. Entonces, en primer lugar sí quiero hacer un titular para nuestra página web solo mi sitio web general. Está bien. Entonces, en primer lugar voy a ocuparme de mi titular. Voy a cambiar la fuente aquí arriba a museo sans, que es lo que usamos. Adelante y cambia esto como los nueve cientos, bonito y grande. Este es un titular. Un gran título impresionante. Notarás que puedes usar las mismas herramientas de escalado, y herramientas de edición, y herramientas de selección que pasamos en el tutorial de formas. En su mayor parte, tu línea de texto se trata como una forma. Quieres asegurarte de que cuando lo estés escalando, que no lo estés escalando con solo hacer clic y arrastrando, porque eso va a sesgar realmente tu tipo. Quieres asegurarte de que siempre estás sosteniendo turno hacia abajo para asegurarte de que la proporción del tipo se mantenga igual. Entonces. Voy a seguir adelante, y construir un titular un poco centrado. A ver. De acuerdo, entonces ahora que tenemos nuestro titular, sigamos adelante y quizá nos hagamos algún subtexto. Entonces, hagámoslo. Entonces, vamos a usar la herramienta de tipo. Si hago clic en la herramienta de tipo igual que antes y copio en digamos todo un montón de lorem ipsum, va a ser un problema, porque la herramienta de tipo normal por sí misma no tiene ningún contenedor. Entonces, vamos a seguir adelante, y borrar eso. Lo que queremos hacer es usar la herramienta de tipo y hacer clic y arrastrar para definir un cuadro delimitador para nuestro tipo. Entonces, una vez que hayamos definido ese cuadro delimitador haciendo clic dentro de él va a mantener ahí todo el tipo. Entonces, voy a golpear el comando A para agarrar todo. Obviamente, no quiero que toda esta copia tenga 48 puntos de altura, ni tampoco quiero que sea súper audaz. Entonces, lo vamos a mover a 500. Entonces, que sea agradable y legible. Nadie en su sano juicio quiere leer tanto justo en la parte superior de una webs, primero va a fingir que sea sobre esto grande. Notarás que puedes cambiar el cuadro delimitador. Si algo no cabe dentro de la caja delimitadora vas a ver este pequeño plus rojo, para denotar que hay más tipo que no cabe. Entonces, básicamente puedes cambiar esto y moverlo. Esto nos va a dar sólo un titular y sub-copia súper sencillos. Ahora, digamos que nuestras líneas tal vez estaban un poco juntas, tal vez queremos empujarlas un poco más lejos. Ahí es donde algo así como la altura de la línea va a ser útil. regla general me gusta mantener las cosas alrededor de un punto cinco veces el tamaño del tamaño de la fuente, pero para algo donde, donde es un poco más grande tal vez sea sub-copia, copia titular. A mí me gusta mantenerlo apretado, así que tal vez 30. 30 es un poco mejor que 28. Sólo dale un poco de espacio para respirar. Entonces, se puede ver si nos alejamos. Ahora tenemos un titular realmente agradable. Allá arriba, mantén nuestro subtipo, allá arriba. Bajemos a estos testimonios. Entonces, quiero crear solo un estilo tipo realmente bonito para estos testimonios. Diga que quiero hacer un par de cosas, lo que dijo la persona, tal vez de dónde eran, quiénes son. Eso suena como un gran testimonio. Entonces, vamos a tomar todos estos, que sea solo normal tamaño de copia corporal digamos 12, tal vez baje hasta el tamaño 300. Obviamente, este es el dejar aquí es demasiado. Nosotros queremos bajar eso a 18, tomar todos estos. Obviamente, en realidad tampoco los queremos centrados, se sienta un poco gracioso ahí abajo, así que vamos a tomar esto. Sube aquí a la alineación. Alinearlo a la izquierda, creo que tal vez un poco más grande, eso parece pequeño. 14, 21. Bot-a-cosa-bot-a-boom, aquí vamos. Entonces, vamos a cortar esto para que no sean increíblemente largos. Ahora, lo que podemos hacer es bajar aquí y decir que estos fueron hechos por algún tipo. Quieres que el tipo algún destaque un poquito. Voy a seguir adelante y hacer este 900, y tal vez él sea como yo. Es de Dayton Ohio. Yo tampoco quiero que eso sea súper audaz, así que voy a empujar eso de nuevo a 500, y tal vez bajarlo de tamaño solo para que no sea un super en tu cara. También puedes hacer algunas, algunas cosas geniales aquí arriba. Si miras en la herramienta desplegable. Puedes hacer las cosas todo gorras, lo cual es genial, si vas a querer que algo siempre esté en todas las gorras. También puedes hacer algunas otras opciones. Un poco de un más complicado, superscriptos, subíndice, quizá quieras gorras pequeñas. Por lo general, todas las gorras es la que uso con más frecuencia. Entonces, eso está ahí arriba. Está bien. Entonces, ahora que tenemos esto vamos a querer tal vez cambiarlo un poco. Realmente no quiero que fluya todo el camino tan lejos. Por el bien de tal vez hacer las cosas no tan feas, solo voy a cortar un poco esa palabra, pero tanto como nuestras formas que creamos antes puedes usar las mismas herramientas para básicamente asegurarte de que eso estos están espaciados uniformemente con el resto del tipo. Entonces, queremos que estos a la izquierda se alineen con los bloques de gráficos por encima de él. Entonces, voy a tomar todos estos elementos, y voy a usar mis herramientas alineadas de seguro aquí arriba, y luego moverme, y alinearlos un poco, y esto va a crear un área testimonial realmente agradable aquí abajo. Entonces, ahora que tenemos algún contenido rellenado, ¿cómo hacemos que se vea genial, porque me gustaría que mi sitio web realmente use algunos colores. Los colores son importantes y los colores también lo son, son realmente impresionantes en Illustrator, y una de las razones por las que me encanta usar este programa. Entonces, la paleta de colores es realmente donde vas a estar haciendo la mayor parte de tu trabajo. Cambiando tus colores, retoques con ellos, para asegurarte de que sean absolutamente perfectos. Lo único que sí quiero señalar que va a ser súper útil para más adelante es esta herramienta hexagonal aquí mismo. Ahora, esta herramienta, RGB colores típicos cualquier cosa en una pantalla es un valor RGB. Entonces, esa va a ser la forma más fácil de averiguar qué colores quieres usar, pero cuando tomas ese color normalmente no puedes darle un color RGB a un desarrollador, a menos que estén usando algunos valores extra complicados de RGBA CSS 3. Entonces, en lo que vas a querer confiar es en el valor hexadecimal. El valor hexadecimal es lo que utiliza el navegador para averiguar cuál es ese color. Entonces, en realidad empecemos a colorear algunos de estos. Entonces, y si quiero que esta zona top sea azul. Adelante y escojamos un azul realmente bonito. Usaré el azul que está más cerca de mi corazón, 0093da. Eso es muy azul. Entonces, tenemos un área grande y bonita cabecera azul. A lo mejor quiero que el titular se desprenda y sea blanco en su lugar. A lo mejor quiero que esto sea más un trineo en lugar de que sea negro clásico. Entonces, puedes mover y arrastrar estos elementos para cambiar de color para encontrar los que más te gusten. Ahora, el verdadero problema es ¿y si quiero usar esos colores y otra vez, y otra vez? Bueno, la respuesta es bastante simple. Puede hacer clic en cualquier forma, y agarrar su color, y hacer clic y arrastrar, y agregarla a las muestra. Ahora, lo que esto va a hacer, es que esto va a salvar ese color, que podamos referirlo, y usarlo y otra vez, y otra vez. Entonces, quiero salvar este trineo, y también quiero guardar este azul. Ahora, te diste cuenta la última vez que lo agarré desde aquí. También puedes agarrarlo desde aquí, y jalarlo por allá también. Entonces, eso va a ser realmente útil para crear una paleta que uses y otra vez, una y otra vez para asegurarte de que los colores que estás usando sean todos exactamente iguales. Si esto se pone un poco demasiado desordenado por aquí, que a veces lo hace puedes bajar aquí y simplemente seleccionar todo sin usar. Eso va a agarrar cada muestra que no estás usando. Y luego puedes arrastrar las muestreas hasta el basurero para eliminarlas. Entonces, esto básicamente sólo nos va a dar blanco y negro y los dos colores que hemos definido como nuestros colores para nuestro diseño. Entonces, me voy a mudar aquí abajo y voy a hacer lo mismo con estos. Voy a agarrar a estos tipos. Voy a hacerlos de este color sobrio. Ahora cuando agarro un bloque entero de texto en realidad va a colorear todo dentro de él. Si hay un elemento específico del texto que quieres que sea un color determinado, entonces puedes entrar con tu herramienta de tipo, y seleccionar justo eso, y luego subir y denotar de qué color crees que debería ser en su lugar. Entonces, voy a seguir adelante y hacer estos azules, tal vez no quiero que eso destaque tanto, así que tal vez lo voy a hacer un poco más claro gris. Entonces, ojalá todo eso te dé un control sobre cómo usar colores y tipos para agregar mucha personalidad y obtener algún contenido real en los diseños de tu sitio. 4. Agregado de estilos y efectos: Hola otra vez, y bienvenidos al cuarto proyecto de esta clase. Este proyecto es todo sobre estilo y agregar estilo a los diversos elementos de tu página web. Entonces, con el fin de ilustrar todos estos puntos, vamos a empezar por solo hacer un botón realmente bonito en la parte superior de nuestra página web para dar a todos un llamado general a la acción. Entonces voy a seguir adelante y empezar sólo con una plaza básica. Voy a crearlo aquí arriba, moverlo al centro para que se sienta realmente bien. Entonces creo que voy a escoger algo, vamos a seguir adelante con nuestra pizarra. Sólo para que sea agradable y pesado. Daremos a este botón una etiqueta que solo diga: “Haz algo impresionante”, Hagámoslo blanco para que se quede y solo centraremos alineaciones también. Impresionante. Entonces ahora tenemos nuestro botón sentado aquí pero no se ve tan genial. Entonces, empecemos dándole una frontera. Entonces, los internados están justo aquí, técnicamente se llama un derrame cerebral. Puedes colorear tu trazo igual que lo harías cualquier forma normal usando esta paleta de colores aquí arriba. Entonces, voy a seguir adelante y sólo hacerlo blanco por ahora. Para cambiar realmente la forma en que se ve el trazo, para agregar cualquier tipo de elementos extra, puedes subir aquí, la parte más importante de esto es básicamente el peso donde puedes especie de cambiar la forma en que tu frontera funciona, qué tan grueso es, y cómo rodea al objeto en el que está. Por lo que puedes alinear ese borde con el medio, puedes alinearlo con el interior, o puedes alinearlo con el exterior. Pero se puede ver porque tengo forma cuadrada, los puntos de todas mis fronteras son cuadrados. Algo que puedo hacer es básicamente elegir esta herramienta de esquina para entrar y decirle al ilustrador que no quiero que estos elementos tengan un punto de esquina súper afilado, quiero que sean un poco redondeados. Eso funciona realmente bien, y solo le da a algunos de tus elementos más cuadrados una sensación un poco más suave. De verdad no quiero que esto sea blanco porque se pare un poco demasiado. Entonces, voy a ir tal vez seleccionar un color personalizado. Sigamos adelante y elijamos el color de fondo y luego, tal vez quiero que sea un poco más oscuro que el fondo. Sí, eso es lindo. Entonces sigamos adelante y agregamos un gradiente a nuestros botones solo para que se pare un poco. Vamos a ir a la barra de herramientas de gradiente, vamos a seleccionar el botón al que queremos darle un poco de profundidad. Vamos a seleccionar el tipo de gradiente que queremos, vamos a usar un gradiente lineal, que sea un 90 negativo, así que eso es bonito y sube y baja. Básicamente puedes tomar estos colores y arrastrarlos hacia abajo tu elemento para cambiar los diferentes colores que componen tu gradiente, qué color está transitando. Puedes crear varios pasos intermedios haciendo clic en otros puntos a lo largo de este gradiente, y puedes hacer clic en ellos y arrastrarlos hacia fuera para eliminarlos, eso se ve bien. Es solo un gradiente realmente simple para darle un poco de profundidad a ese botón para que las personas que visitan tu sitio definitivamente van a querer hacer clic en esa cosa. Ahora, aparte de agregar degradados a las cosas, también puedes usar un conjunto de estilos y efectos de capas que te ayudarán a editar tus formas y darles un poco de estilo añadido. Entonces, exploremos un par de esos. Uno de los que uso más a menudo es en realidad radio de frontera. Para que veas que tenemos un simple botón cuadrado. Pero, personalmente me encanta un bonito botón de esquina redondeada. Entonces, voy a subir aquí para afectar esquinas redondeadas estilizadas. Ahora esto me va a dar un pequeño cuadro de diálogo que me pregunte, qué redondeados quiero que sean esos. Puedes seguir adelante y previsualizar esos solo hacer clic en este pequeño botón de vista previa aquí mismo. Normalmente hago en algún lugar alrededor de cinco píxeles, eso es lo que normalmente me siento bien. Entonces ahora tenemos algunas esquinas redondeadas en nuestro botón, vamos a explorar algunos de los otros efectos que nos ayudarán a agregar algo de profundidad. Vamos a bajar aquí al área de testimonios para probar realmente esto. Entonces, voy a tomar todas estas formas, vamos adelante y hacerlas blancas. Yo quiero que se queden un poco fuera de la página. Entonces, para hacer eso, voy a usarlos todos. Voy a usar el resplandor exterior. Ahora, prefiero el resplandor externo para soltar sombras solo porque es un poco más fácil de manejar, y porque con los brillos exteriores el resplandor es parejo y comienza en el centro de una forma en lugar de parecer que tiene luz direccional. Entonces, para mí esta es la forma preferible de agregar un poco de resplandor al exterior. Entonces, quiero seguir adelante y cambiar el modo para multiplicar, eso nos va a dar un bonito resplandor en todo el camino. A mí no me gusta que sea súper oscuro, así que suelo bajar a algún lugar alrededor de 25 o 15, tal vez apretar un poco el borroso. De verdad quiero que sea sutil, así que voy a seguir adelante y hacer eso, luego quitarme eso. Entonces puedes ver que con solo agregar ese poco de resplandor al exterior de estos elementos, realmente empiezan a estallar un poco de la página, y esa es una forma súper fácil de dar una profundidad mínima sin soplar las cosas demasiado lejos. Si agregas estos efectos a las cosas, siempre puedes editarlos súper fácilmente más adelante usando el panel de apariencias por aquí. Entonces lo que hace el panel de apariencia es, te dice todo sobre una forma y lo que se le está aplicando. Por lo que puedes ver que no hay trazo, tiene un relleno blanco, tiene un resplandor exterior, tiene opacidad por defecto. Puedes especie de previsualización de estas cosas desactivándolas y encendidas, también puedes hacer doble clic en un efecto para editarlas rápidamente y cambiarlas. A lo mejor esto era un poco más ligero y quería que fuera más oscuro, para poder entrar y ajustar eso de inmediato. También puedes tomar todos los efectos y simplemente eliminarlos por completo agarrándolos y moviéndolos aquí abajo a la basura. Eso volverá las cosas a lo que eran antes de que se les aplicara algún estilo. Entonces esa es la rápida ejecución de estilos de capa, gradientes, bordes, y justo cómo puedes embellecer tus elementos para que luzcan más interactivos y darles un poco más de profundidad. 5. Agregado de imágenes: Entonces, con los últimos cuatro proyectos que hemos repasado, cómo configurar tu documento, cómo crear formas, y cómo crear los elementos del diseño de tu sitio web, pero esto deja fuera una de las piezas más grandes de diseño web y eso es imágenes. Entonces, este proyecto va a ser sobre cómo importar imágenes a tu documento, administrar imágenes, y simplemente usarlas en general. Lo primero que vamos a repasar es cómo realmente meter imágenes en tu documento. Por lo tanto, la forma más fácil de agarrar imágenes y meterlas en tu documento es en realidad solo arrastrarlas a tu documento. Eso lo he hecho con un par de imágenes por aquí que vamos a usar en el tutorial y esto también debería estar en el archivo ilustrador que proporciono más adelante, pero esa es realmente la forma más fácil de tirar cosas aquí. La otra forma en que lo puedes hacer es subir aquí al comando Place, y podrás agarrar, y seleccionar una imagen desde cualquier otro lugar de tu computadora, y esto simplemente la colocará dentro de tu documento. Entonces, una vez que tengas una imagen que quieras usar como voy a usar esta cafetería gris como solo un fondo general para mi área de cabecera. Entonces, voy a escalarlo un poco, para que quepa. Voy a usar el comando para empujarlo hacia atrás. Entonces, eso es todo el camino por atrás y luego voy a usar una herramienta súper cool llamada máscara de recorte. Lo que hace básicamente una máscara de recorte es, se necesita una imagen de ilustración grande, cualquier cosa que sea realmente grande, y usa otra forma para básicamente fijarla en esa forma maestra. Entonces, la forma más sencilla de hacerlo es básicamente solo tener dos cajas. Voy a seguir adelante y hacer esto con el encabezado. Entonces, básicamente haces esto agarrando las dos formas. Asegúrate de que la forma que quieres recortar esté detrás de la forma que deseas ser realmente la máscara. Vamos a subir aquí a Object, Clipping Mask, y Make. Ahora, se puede ver lo que hizo esto. Tomó toda esa imagen grande, recortó al tamaño de esa forma de encabezado que había creado antes. Entonces, lo que puedes hacer para editar realmente es que puedes usar la herramienta de selección directa, que te permitirá agarrar el elemento en sí, y puedes hacer cosas como colorearlo. Pero ahora mismo, tiene esa imagen sentada dentro de ella. Entonces, quiero un poquito de ese azul para mostrar a través. Entonces, en realidad voy a usar la herramienta de selección directa, para seleccionar esta imagen, y luego voy a subir aquí, y tal vez cambiar la opacidad hacia abajo. Vamos con tal vez algo así como 30, que se ve un poco mejor. Pueden verlo fantasmal allá atrás un poco, solo darle un poco de personalidad. Entonces, puedes ver máscaras de recorte en algo tal vez un poco más complicado aquí abajo. Entonces, voy a llevar a algunos de mis compañeros de trabajo favoritos y convertirlos en los avatares. Entonces primero, al igual que antes, alguien adelante y manda esto a la parte de atrás. Voy a tomar esta forma ya que forma parte de un grupo. Voy a seguir adelante y desagruparlo, para que pueda ser todo por sí mismo. Entonces, la voy a usar como máscara, y se puede ver que se necesita eso, e incluso se puede usar para formas compuestas también, lo cual creo que es realmente genial. Entonces quiero hacer eso con, con todo el resto de estos tipos. Pégale, manda a atrás, grupo que lo vamos a [inaudible]. Ahora se puede ver que estoy usando la herramienta de selección directa, y en realidad puedo mover esta imagen alrededor a solo una especie de lugar todo donde lo quiera, puedo escalar esa imagen ahí atrás, usar las herramientas de flecha para realmente posicionar eso, donde creo que debería ir y a donde realmente se ve lo mejor. No tienes que hacer toda la edición antes de meter las cosas en las máscaras de recorte. Entonces, ahora tenemos tres tipos geniales, escalofriantes en nuestra sección de testimonios. Todos son unos tíos, y dijeron algunas cosas de las que está bien, cualquiera que sea mi pequeño sitio web falso. Voy a seguir adelante y en realidad ilustrar otra cosa genial sobre la máscara de recorte, y eso es que en realidad puedes recortar máscaras dentro de unas máscaras. Puedes hacer todo el recorte que quieras, puedes ver que esto en realidad también es una máscara de recorte. Es sólo una interfaz que se ha recortado dentro de este, muy bonito pequeño cuadrado redondeado. Lo que voy a hacer es en realidad, usar este mismo contenedor aquí arriba para realmente poner eso en el encabezado también. Entonces, ya ves voy a agarrar esta caja limitadora, de la imagen de mi cafetería. Voy a copiar eso, y luego realmente pegarlo en su lugar, y se puede ver que lo pega justo donde estaba antes. Entonces voy a usar esta forma como la máscara de recorte para mi interfaz. Ahora en realidad puedo tomar esto y puedo moverlo en lo que a la profundidad también se refiere. Entonces si quiero, puedo hacer otras cosas como, entrar aquí para subir un poco esto. Tiene un bonito borde en la parte inferior, voy a tal vez, puedo hacer doble click aquí para editar realmente lo que hay dentro de una máscara de recorte. Esto sólo me dejará lidiar con lo que hay dentro de esa máscara de recorte, y puedo tomar esto tal vez, no quiero que esté tan alto para realmente meterme en la basura. Entonces, voy a bajar eso, o tal vez hacer que mi botón sea un poco menos enorme porque es bastante grande. Tomemos eso aquí, a lo largo del diseño de tu sitio web, vas a terminar con muchas imágenes aquí dentro, y es fácil perderlas. Las cosas realmente bonitas que el ilustrador ha incorporado en él es un panel Links. Se puede ver aquí mismo, sólo voy a arrastrarlo por aquí. Esto te dice todas las imágenes, que están vinculadas dentro de tu documento. Ahora, hay dos tipos de imágenes dentro de un documento ilustrador. Ahí hay imágenes incrustadas y hay imágenes enlazadas. Las imágenes incrustadas son geniales porque en realidad están incrustadas en tu documento. Pero eso también es una especie de caída, porque cuantas más imágenes incrustadas en lugar de un documento, mayor será el tamaño del archivo de documento. Si desea mantener el tamaño de su archivo pequeño, entonces sólo puede enlazar a imágenes externas como lo hicimos con nuestra imagen de cafetería usando la herramienta de lugar. Eso mostrará justo como una imagen, mientras que las imágenes incrustadas, imágenes que se colocan directamente en nuestro documento, muestran con esta pequeña herramienta incrustada. Otra cosita genial de este panel, es que tiene un botón de enlace real y también un botón ir a enlace. El botón ir a enlace, en realidad te permitirá seleccionar una imagen y te llevará directamente a donde está esa imagen dentro de tu documento, y seleccionarla por ti. Realmente útil si tienes toneladas de imágenes, y estás tratando de cambiar di una de ellas y solo quieres encontrar donde es realmente rápido. Esa es realmente la esencia de cómo funcionan las imágenes en ilustrador, y cómo puedes agregarlas a tu documento, para que las cosas sean un poco más personales. Entonces, ahora que tenemos una especie de esas imágenes ahí dentro, vamos rápidamente a purgar el resto de este diseño de Website y les voy a enseñar como hago las cosas a medida que voy. Por lo tanto, nuestra área titular está bastante establecida. Tenemos un bonito titular grande, algún tipo de subtipo, y en general, vas a tener algunas cosas explicativas allá arriba cuando, llamada a la acción, gráficos geniales, tienes un poco de área testimonial. Voy a seguir adelante y crear una pequeña regla para básicamente apartar esto del resto de ella. En lugar de ser blanco, me gustaría que eso probablemente hiciera ese tipo de nuestro color sleety. No, demasiado oscuro. Hagamos que este gris realmente claro. Hecho. Eso se ve impresionante. Entonces, me gustan mucho estas cajas, así que voy a usar estas cajas otra vez para tal vez un poco de área aquí abajo que llama un par de decir sus características de mi app que estoy construyendo. Iba a usar de nuevo este tipo porque es sólo lorem ipsum. Básicamente se puede, vamos a ver, difundir esto para que pase a dos conteos. Podemos volver a encender nuestras guías para que sepamos hacer eso. Adelante y hagamos esto. Agrega algunas líneas aquí. Diré que esta es una característica de algún tipo. Ahora, digamos que quiero que imite algo del otro tipo que está alrededor de mi documento. Lo que puedo hacer con la herramienta cuentagotas es básicamente ir y encontrar otro conjunto de tipo y al hacer clic en él, puedo imitar ese tipo por completo. Entonces, se puede ver que copia todo, desde la fuente hasta el espaciado hasta la alineación. Entonces, voy a seguir adelante y cambiar esto de nuevo para darle un poco de alineación. Ahora esto está aquí pero esas cosas están bastante espaciadas un poco demasiado lejos para mi gusto, así que voy a tomar esto, voy a eliminarlo, y voy a usar una función de párrafo. Aseguraos de que tengáis este tipo. Entonces, este es el espacio después de párrafos y esto realidad te permite básicamente escribir en una cantidad de espacio que quieres venir después solo una línea específica o una cantidad de texto que has seleccionado. Yo uso mucho eso para esto exacto, que es que estás tomando un título, quieres agregar un poco de espacio extra, no quieres tu gran título, y toda tu pequeña copia corporal simplemente siéntate uno al lado del otro. Entonces, básicamente, podemos usar eso. También podemos hacer otras cosas geniales como agarrar esto y venir, tal vez cambiar su color para que todas estas características se llamen con azul. A lo mejor queremos tirar de esto un poco más apretado para que encaje y luego centrar estas cosas horizontalmente solo para que no tengamos este espacio funky aquí abajo. Podemos hacer eso aquí arriba con nuestra alineación. Usa el alineado horizontalmente verticalmente y luego sabemos que todo está sentado justo al lado del otro. Ahora bien, si quería que esto dijera tal vez quieras crear un segundo conjunto de estos, podemos usar ese arrastrar y desplazar todo permitir mantener presionada la tecla de opción para básicamente crear otro conjunto de estos que sea justo los mismos espacios un poco cerca. Entonces, solo voy a dejar que aquí abajo un poco. Todos los buenos sitios web tienen un pie de página. Entonces, voy a denotar tal vez eso. Vamos a crear un poco. Vamos a crear un este un área en forma. Agarra eso con el espaciado para ser más o menos igual que lo que hay arriba por ahí así que tal vez tire esto hacia abajo. Impresionante. Eso funciona bastante bien. Voy a entrar aquí con mi tipo, y vamos a seguir adelante y sólo darle un bonito, vamos a ver, Copyright 2014, Ryan Clark, Todos los derechos reservados. No copie las cosas. Sigamos adelante y usemos a este tipo de aquí para hacer blanco el tipográfico. Entonces, recolector de color. Ahora necesitamos un copyright. Todos los derechos de autor necesitan un verdadero símbolo de derechos de autor. Entonces, les mostraré chicos cómo pueden obtener acceso a los glifos de su tipo. Básicamente, se quiere subir aquí a una ventana. Yo quiero bajar aquí tipo, abre tus glifos, y esto abre tu panel de glifos. Esto básicamente te muestra todos los personajes de toda tu fuente para que puedas cavar a menos que conozcas los atajos y encuentres exactamente lo que quieres. Entonces, ¿qué es lo que quieres? Derechos de autor. Haga doble clic ya que está justo ahí en su tipo. Súper agradable. Vamos a seguir adelante y cerrar eso. Los derechos de autor no necesitan ser de 24 puntos de altura, así que podemos seguir adelante y simplemente hacer este 11. Se va a escalar aquí en nuestra zona de pie de página. Bonito, centrado. Entonces, esto simplemente va a súper simple Website esqueleto. Si iba a seguir moviéndome en esto una hora, probablemente tirar como algunos ejemplos de sitios quizá de estas personas o de algún contexto, otro tipo de imágenes para agregar allá atrás, una cosa que les puedo mostrar chicos como si quisieran tal vez hacer que estos se salgan un poco del fondo, podrías entrar y añadir solo un pequeño borde blanco realmente bonito, tal vez dar un poco de tamaño extra para que se destaque un poco. Puedes volver a entrar, y yo agarraré a este tipo. También puedes usar el cuentagotas para copiar estilos de forma que son simplemente súper, súper útiles. Entonces, voy a agarrar estos y darles esa misma frontera. Entonces, ahora estos tipos salen un poco de esas formas de fondo para que no estén tan encima de ellas. Entonces, como dije, esto es sólo un esqueleto de sitio realmente, realmente general. De hecho incluiré esto en el archivo para la clase solo que ustedes lo tengan y puedan usarlo y meterse con él si quieren. Eso es mejor. A nadie le gustan los filtros súper brillantes de todos modos. Entonces, ojalá, ustedes disfrutaron de esta clase, sacaron algunas cosas de ella. Ojalá, no pasara demasiado mal sobre nada, pero estas realmente son las herramientas que uso cada día para construir Sitios web para Ferb y para otras personas, para mis clientes. Creo que Illustrator es una herramienta absolutamente fantástica para diseño Web solo basada en la forma en que trata las formas y con el tipo, que son realmente el núcleo de cualquier sitio web. Entonces, con suerte, estaremos desarrollando esta clase en el futuro para agregar algunas características más avanzadas y pasar por algunas cosas aún más frías que hace Illustrator. Pero este es solo un gran punto de partida. Entonces, sigan trabajando. Echadme cualquier pregunta que tengan ustedes. Siempre estoy por aquí. Estoy en Twitter en ryanvsclark. No puedo esperar a ver lo que se les ocurre en cuanto a cuáles son sus proyectos para la clase y gracias por seguir. Adiós chicos. 6. Explora más sobre diseño en Skillshare: manera.