Diseño web en Affinity Designer para principiantes y un poco más avanzados

1. Diseño de Affinity Designer Video: Si estás pensando en empezar como freelancer diseñador web, probablemente hayas intentado aprovechar la tienda de fotos en algún momento del pasado, y conozco el dolor que tengo cena. Recuerdo pasar días tras días, incluso semanas tras semanas, tratando sólo de recordar ciertas herramientas y efectos. Pero por suerte vivimos en tiempos en los que si quieres empezar como freelancer diseñador Web. Pero puedes simplemente dejar a un lado la tienda de fotos. Hola, mi nombre es David Tyminski, y en este curso aprenderás a usar una aleta en diseñador para diseñar sitios web de la A a la Z. Este curso está repleto de valiosa información. Cualquier novato de diseñadores Web debe saber, como cómo elegir los mejores colores y fondos para tus sitios web. ¿ Qué hace un sitio web diseñado profesionalmente? ¿ Cuáles son las tendencias modernas de diseño Web que debes conocer? Y eso es sólo la introducción, porque el verdadero pan y mantequilla del discurso está dentro de sus partes prácticas. Nos ensuciaremos las manos y exploraremos todas las herramientas y técnicas armas profesionales y nos negaremos a diseñar un sitio web dentro de diseñador afinidad Eso incluye construir marcos de alambre y srenas, que son los bloques de construcción de cada utilizando activos para hacer que el proceso de diseño sea ultrafino, creando estilos de texto que te permita cambiar fondos en un abrir y cerrar de ojos. Y, por supuesto, diseñando un sitio web, aprenderás a diseñarlo desde abrir el archivo a través del lugar y las imágenes, agregando texto y fondos justo hasta exportar en el diseño que finalmente repartirías a un cliente. Tenemos mucho de lo bueno que cubrir en este curso, y realmente creo que te ayudará tremendamente en el diseño de sitios web increíbles dentro un ajuste al diseñador, así que me encantaría verte dentro. 2. 1Introducción al curso: este curso se trata de usar un ajuste en el diseñador para el diseño Web. Si primero no estás demasiado familiarizado con el software, aprenderás rápidamente de qué se trata y cómo configurarlo para el diseño Web. Antes de empezar a diseñar algo en Afinitor, Designer echará un vistazo a los conceptos de diseño web y las buenas prácticas. Aprenderás a elegir colores para tu diseño y dónde encontrar el color, inspiración y los temas de color listos para hacer. También aprenderás armas básicas y topografía, lo cual es extremadamente importante no solo para un buen diseño Web sino para un buen diseño en general para aprender todo sobre los encabezados gravados corporales y cómo los pares del dedo del pie para una gran experiencia de usuario. Entonces echaremos un vistazo a una estructura típica de sitios web. Diseño sabio, por supuesto. Hablaremos de logotipos, guerras laterales de navegación y todos los demás sitios web bloques de construcción. Después de eso, hablaremos de lo que está dentro y lo que no está en las armas en el mundo ahora mismo. También buscaremos alguna inspiración de diseño Web en torno a la Web. Con todos esos conocimientos y habilidades pasarán a la parte de diseño del curso cuando los diseños realizados echen un vistazo a finalizar tu trabajo, aprenderás a guardar y exportar adecuadamente para diversos formatos de archivo. Hay bastantes cosas buenas que cubrir, y realmente creo que una vez que hayas completado el curso y practicado por tu cuenta, comenzarás a crear increíbles diseños de sitios web en un ajuste en el diseñador en poco tiempo. Entonces saltemos justo al curso y empecemos con los fundamentos. 3. 2.1de Affinity Designer y cómo configurarlo para el diseño web: Si eres completamente nuevo en ofender al diseñador, aquí te presentamos algunos datos al respecto. En primer lugar, ofender al diseñador es ante todo una aplicación de diseño gráfico factorial. Pero eso no quiere decir que no sea adecuado para el diseño de Scream y dispositivos. De hecho, es una gran combinación de herramientas y habilidades pensadas para el trabajo dentro y fuera de la pantalla. Al principio solo estaba disponible para Mac OS, pero desde finales de 2016 también puedes instalarlo solo Máquina Windows. En este curso, estaré usando una versión para PC fuera del software. No obstante, si tienes un diseñador instalado en un Mac, no deberías tener problemas para seguir solo. Sólo recuerda que cada vez que voy a estar usando el modificador de control keep, tendrías que usar la tecla modificadora de comando. Y siempre que voy a estar usando el modificador Olt keep, tendrías que usar la tecla modificadora de opciones en tu teclado. La tecla de turno es la misma para ambos sistemas operativos. Lo que es genial del diseñador en términos de interoperabilidad es que permite trabajar y exportar a diversos formatos de archivo que van desde vector estándar, una vez como V G y E. P s hasta un archivo ráster estándar como J. P, G, P y G y Regalo. Permite abrir archivos PSD estándar y A. I, y hace el trabajo muy bien. También puede exportar tus ilustraciones a formatos de archivo que pueden ser leídos por otras piezas fuera de software de diseño como Dobie Photo Shop y Adobe Illustrator. Entonces si necesitas guardar tu trabajo como tiff en PDF o incluso PSD, puedes hacerlo en afinidad Designer. Entonces, si eventualmente vas a estar enviando tu diseñado a un desarrollador, puedes hacerlo usando un archivo PSD estándar, y no tienes que preocuparte de que el desarrollador no pueda abrir el archivo. Usted produjo soportes de diseñador de afinidad, capas, símbolos, foto tienda como efectos, guías y arenilla, y prácticamente cualquier cosa que necesitara para diseñar sitios web con él. Tengo que decirte que todo eso es sólo una punta del iceberg. Es decir, el software puede hacer tantas cosas, y hay algunos aspectos del mismo que lo hacen más bateador que ilustrador o photoshopped. Para ciertos tipos de trabajos de diseño, es realmente una ventanilla única para las necesidades de diseño. Puedes diseñar logotipos con él webs tarjetas de visita, prácticamente cualquier cosa que tu cliente pudiera querer ser diseñada. Pero este curso no se trata de aprender. Todo lo que hay que saber acerca de desmayar a un diseñador. Si necesitas eso, echa un vistazo a mi cómo empezar rápidamente con el curso de diseñador de afinidad donde puedes aprender todo lo que hay que saber. El software en este curso se enfocará en usar el programa en un escenario de diseño Web, así que creo que podemos echar un vistazo a las habilidades de diseño Web fuera de diseñador ahora mismo. 4. Las habilidades de diseño web de 2.2diseño de diseño de la: Afinitor diseñador está configurado para grande Usted. Diseño experiencia justo fuera de la caja. Realmente no hay mucho que tengas que hacer para aprovechar todas sus habilidades de diseño Web, que echarán habilidades de diseño Web, un vistazo ahora. En primer lugar, ofender. El diseñador soporta capas, lo cual es bastante importante si quieres hacer tu diseño perfectamente organizado. Siempre es una buena idea poner tus elementos separados construyendo partes separadas de un diseño de sitio web en capas distintas. Los elementos que componen el encabezado deben ir en una capa separada. Los elementos que componen la barra lateral deben ir en una capa separada y así sucesivamente. Es una buena técnica de producción para nombrar adecuadamente las capas. En lugar de dejar sus nombres genéricos, como la capa una capa a etcétera, debe renombrarlos y darles nombres más lógicamente descriptivos que se relacionarían con el contenido de las capas. Por ejemplo, Hatter Food ER artículo de barra lateral, etcétera. Incluso iría un paso más allá y creed sub capas valen nombres lógicamente descriptivos, por caso, por caso, que crea subcapas para sólo los bloques de navegación o Brandon sentados dentro de la capa sombrerero . Realmente no hay nada más indicativo de un diseño y diseñador descuidado que contenga todo su contenido en una sola capa genérica. Si eres fan de las sombras, Grady INTs y desenfocos, te alegrará escuchar que el diseñador ofrece una variedad de efectos off que puedes terminar con tu obra de arte. son destructivos, lo que significa que no modifican la obra de arte de forma permanente sino que se están agregando dinámicamente a su y se pueden cambiar en cualquier momento que quieras. Sería mucho más difícil crear diseños de sitios web sin nuestros tableros. Son la mejor manera no solo de diseñar versiones móviles del sitio Web sino también de mostrar tu trabajo. Lo más importante que necesita tener en cuenta a la hora de crear sitios web lo suficiente en diseñador es que por defecto, cuando creas un nuevo archivo, no crearás un tablero de arte. El hacia el sur te permite elegir si quieres crear una obra de arte o simplemente salir de página predeterminada. Entonces recuerda que cuando sí quieras crear en nuestro reporte, cuando estés creando tu archivo, comprueba la opción crear arte a bordo. Por supuesto, si simplemente te olvidas de ello o cambias de opinión, siempre puedes usar el arte a bordo. Todavía por crear un sitio web de tablero de arte Los diseños necesitan la perfección de píxeles, y puedes usar diseñadores, toda la familia de herramientas y opciones. Sólo por eso. Lo que es genial de esta característica es que simplemente puedes elegir un preajuste de ajuste tú yo diseño y estar seguro de que las opciones de alineación perfectas para propósitos de diseño Web están activadas . También activará la alineación de píxeles de fuerza y se moverá por opciones de píxeles de retención solo para asegurarse de que todos los objetos se estén alineando y moviendo correctamente. Cuando se tiene el chasquido. diseño activado te mostrará cuándo se están alineando los objetos, pero también indicará la distancia en píxeles entre objetos específicos. El preset de ajuste de ajuste U I I diseñé también hará que tus ilustraciones se ajusten a dos guías y se ajusten a rejilla . Entonces si hay usarlos en tu flujo de trabajo, tú diseñé el ajuste preestablecido de snapping te permitirá alinear la obra de arte perfectamente con ellos. Y si nunca has usado la cuadrícula antes porque era demasiado confusa, estarás encantado de escuchar que Designer ofrece una cuadrícula automática, que encuentra los mejores ajustes por sí solo. No necesitas contar todo por tu cuenta. La cuadrícula cambiará dependiendo del valor de Zoomer que establezca. Por supuesto, si lo desea, puede cambiar la cuadrícula a manual e introducir sus propios valores. También puedes usar el gestor de guías para poner tus guías precisamente a donde quieras que vayan . El diseñador Afinitor es principalmente un programa de diseño de factores, pero te permite imitar el entorno de píxeles en el que los diseños de tu sitio web vivirán en última instancia . Para propósitos de diseño Web, podría usar la vista de píxeles estándar y una vista retina de alta densidad de píxeles. Esto te permitirá previsualizar o diseñar como si estuviera hecho completamente a partir de píxeles. Un sitio web no puede vivir sin texto. Es tan importante que muchos diseñadores lo convierten en el centro de sus diseños, eliminando como sea posible los elementos gráficos Manny. Y es realmente fácil trabajar con el diseñador fiscal. Además de tus opciones estándar de carácter y párrafo, puedes crear estilos de texto que aceleren el proceso de desconexión de fondos. Dentro de su diseño. Puedes tener decenas y decenas de estilos de texto diferentes, y puedes cambiar prácticamente todos los aspectos de los mismos. Diseñador cuenta con la capacidad de construir tus propias bibliotecas a partir de activos que puedes usar al diseñar sitios web. Viene con bonitos hallazgo de Iowa 10 activos que puedes simplemente arrastrar sobre el tablero de pegar activos eran algo así como símbolos. Acerca de la diferencia entre activos y símbolos es que se pueden crear bibliotecas a partir de activos que se pueden exportar o incrustar en un documento específico. Y no se puede hacer eso con símbolos suficientes en diseñador. Entonces digamos que estás construyendo un marco de alambre para tu sitio web. ¿ Te gustaría sólo los elementos esquemáticos para ese derecho? Simplemente crea tus propias representaciones de un sistema de navegación de logotipos. Block presume etcétera, luego seleccionado, y del menú del panel, elegir y de selección. El elemento irá directamente a la biblioteca de activos y te estará esperando. En caso de querer volver a usarlo. Offend el diseñador viene con estos espacios de trabajo separados pensados solo para exportar elementos de tu diseño. Se llama a la persona de exportación, y es una gran manera de exportar partes en rodajas de tu diseño. Simplemente puede otorgar la herramienta de corte, crear un sector a partir de un determinado elemento de diseño y exportarlo como una defensa de archivos separada. Hay un montón de herramientas y opciones que te permiten crear magníficos diseños de sitios web en un ajuste en las herramientas de diseñador y Panelistas como las capas están hacia el chasquido. Gestor etcétera te ayudará en la creación de tus propios sitios Web. Pero créeme que acabamos de desnatar la superficie aquí. Hay mucho más en diseñar sitios web usando ofender al diseñador y lo descubrirás todo a medida que avanza el curso. Supongo que en este punto podríamos saltar directamente a crear nuestro primer diseño, pero quiero que este curso sea algo más que un escaparate de técnicas y procesos de diseño . Quería adquirir conocimientos de Thora sobre diseño Web contemporáneo. Por lo que a continuación vamos a echar un vistazo a los principios del buen diseño Web, seguido de información práctica sobre colores, tipografía y elementos utilizados para armar un sitio web. 5. 3.110 principios de buen diseño web: Si eres un diseñador web inicial, la abundancia de información que tienes que descubrir y aprender puede hacer que tus manos lo hagan girar. Es por eso que he elaborado una lista de 10 principios esenciales fuera del buen diseño Web que te ayudará a empezar. Mirar cada uno de estos principios es una especie de directriz, pero no una regla absoluta que no se puede agrupar. No obstante, seguirlos, sobre todo si apenas estás empezando, te permitirá evitar muchos errores novatos. Tan buen diseño Web siempre se preocupa por el usuario final. Después de todo, como lo dijo Steve Jobs, el diseño no es cómo se ve, sino cómo funciona. Y debe funcionar a la perfección en cuanto a servir al visitante de la mejor manera posible, debes diseñar el sitio web con su propósito en mente. Debes pensar, como pensaría el usuario cuando estaría visitando el sitio, piensa lo que los visitantes estarán esperando encontrar en el sitio web información, entretenimiento, entretenimiento, tal vez productos. ¿ A qué induce esto en términos de diseño y luego diseñó el sitio en consecuencia? Éste es sumamente importante, y tengo que admitir que tengo una especie de sesgo personal hacia un texto mal ejecutado de lado . No estoy hablando de topografía específica, sino de composición gravada. El usuario quiere encontrar y consumir la información de forma rápida y sin esfuerzo. Por eso es tan importante construir tus párrafos correctamente. El texto bien compuesto tiene encabezados, párrafos cortos y viñetas para facilitar la lectura. Creo que a la longitud fuera de los párrafos es crucial para los diseños orientados a la información. En los últimos años, copyright móvil se ha ido extendiendo por Internet, haciendo que todos los párrafos sean tan cortos como una frase. Un buen número de oraciones en párrafos suele ser de 2 a 3. En general está de acuerdo en que las tipografías de sentido serif, decir las que no tienen terminaciones decorativas en letras, son más fáciles de leer en pantallas digitales. No lo miraría como un dogma, pero recomendaría encarecidamente no usar más de dos tipos de letra diferentes dentro de su diseño . Ya sea que vayas por Sand Saref o Serif Typefaces es subsidiaria para pegarse a tu elección de fondos a lo largo de ese diseño. Si decidiste ir por encabezados de Sarah y algún cuerpo serif, solo apégate a ellos. El diseño de su sitio web debe ayudar a los visitantes a encontrar la información en lugar hacerlos buscar en frustración. Es por ello que es importante construir el diseño que permita al ojo humano navegar fácilmente el contenido de arriba a abajo e de izquierda a derecha de más importante a menos importante. En breve aprenderás más sobre la teoría del color y cómo usarla en el diseño web. Pero por ahora, solo recuerda que los colores que elijas pueden hacer o romper tu composición. Es esencial crear esquemas de color que ayuden a los usuarios a entender el mensaje de la página web y encontrar la información que buscan mientras hacen que el diseño estéticamente agradable. 6. 3.2Top 10 principios de un buen diseño web (continuado: las imágenes te pueden ayudar en nudos, simplemente haciendo que el sitio sea más bonito para mirar, pero también para contar una historia. Pueden involucrar a los usuarios en un nivel más profundo si se eligen correctamente y se emparejan bien con el esquema de color Sitios, te ayudarán tremendamente en la creación de un diseño hermoso y útil. Recientemente, se está volviendo mucho más común usar la fotografía del cliente en lugar de solo fotos cursi pegadas descargadas de la web. Solo recuerda optimizar las imágenes a la hora de entregar el diseño a un desarrollador, y optimizar los medios para comprimir las imágenes para que sean más pequeñas. tamaño ayuda al sitio web a cargarse más rápido. La mayoría de los sitios web contemporáneos se basan en cuadrículas, y el que se usa con mayor frecuencia es la cuadrícula de 12 columnas. Piénsalo como las líneas fuera invisibles de un Siri que te ayudan a estructurar el diseño de tu sitio web y a hacerlo simétrico y fácil de codificar. Esas líneas son de gran ayuda a la hora de colocar los elementos sobre el diseño. Eso son sólo los contenedores principales. Aleck off alineación es muy notable y crea una impresión descuidada. Aprendes más sobre las setas y cómo crear las tuyas más adelante en las partituras. Esto no hace falta decir que su diseño debe verse bien en los dispositivos móviles. De hecho, incluso podrías crear tus diseños principalmente para dispositivos móviles, especialmente smartphones, y luego construir diseños de escritorio encima de ellos. Se llama el primer enfoque móvil y es un diseño en respuesta al hecho de que los usuarios se conectan mucho más a menudo usando sus smartphones, no computadoras de escritorio. En cualquier caso, tu diseño tiene que estar listo para ser mostrado en cualquier pantalla. No hay nada más destructivo para un diseño y luego un traqueteo. Mantén tu diseño simple para que sean fáciles de digerir. Eso significa elegir la cantidad correcta de colores, que normalmente no es más de cinco. Significa ser consistente sobre la elección encontrada. Pero también significa hacer que la interacción entre los elementos de los sitios web sea fácil de entender el espacio adecuado y es importante por una razón importante. Hace que el consumo de contenido sea fácil y agradable. Existen diferentes tipos de espacio, y puedes usar y debes estar atento en tu diseño. Espacios entre líneas. El texto fuera no tiene que ser demasiado pequeño, por lo que las líneas de texto no se superponen, pero tampoco demasiado grandes. Para que el ojo humano no se pierda. También puedo jugar con espacios entre personajes. Pero yo dejaría para encabezamientos mayores si se quiere ir por más de un enfoque artístico en mundo del diseño y desarrollo Web, también hay tipos especiales de espacios llamados relleno y patrón de margen es el espacio entre piezas de contenido dentro de un contenedor, y los márgenes son espacios entre contenedores. Regla general es ésta. Las piezas fuera del contenido nunca deben tocarse entre sí, y siempre debes tener algún espacio entre ellas. Buen diseño Web moderno no puede vivir sin una cantidad decente de espacio en blanco. Espacio en blanco significa espacio vacío entre objetos y es necesario para una apariencia limpia y moderna. espacio en blanco puede dirigir un diseño específico de cierta manera. Úsalo profusamente si vas por una especie de lujo de un look sofisticado de tu diseño . Por lo que estos son los 10 principios esenciales del buen diseño Web. Existen, por supuesto, otros principios a considerar, como la navegación clara, el uso de la relación dorada o el tiempo de carga. Pero la idea general siempre es esta. Debes diseñar para el usuario y, al tener en mente a tus clientes objetivo, utilizaste estos principios como lineamientos para crear diseños estéticos y exitosos 7. 4.1El factor más importante a tener tener que considerar antes de elegir colores: justo en el color de piel adecuado para tu próximo sitio web. El diseño está junto con la tipografía. El más importante hacer que los colores que elijas será lo primero que llamará la atención del visitante y, si se elige correctamente, si se elige correctamente, no hará que le duelen los ojos y los dedos busquen rápidamente el botón de cierre. El motivo detrás de tu elección de color puede ser solo el hecho de que te guste. Es parte de toda la estrategia que ayuda a enviar el mensaje que su cliente quiere enviar. Esto puede sonar extraño, pero recuerda que no estás diseñando el sitio web por ti mismo. Ni siquiera lo estás diseñando para tu cliente. Lo estás diseñando para tus clientes. Y eso significa que los autos fuera de la página web deben ayudar a los visitantes a entender de qué se trata el sitio web. Navega por el sitio sin la sensación de confusión y encuentra el contenido que buscan . Entonces, ¿cómo elegir realmente los mejores colores para un trabajo específico de diseño Web? Son muy pocas las cosas que debes tomar en consideración. Esto te ayudará a entender el mensaje que se supone que el sitio web está enviando y entender lo que esperan experimentar los visitantes. En primer lugar, debes saber, qué es lo que hace tu cliente, Ya sea una empresa de alta calle, una tienda de mamá y pop, una organización benéfica, debes entender ese negocio. No irías por el mismo esquema de color para una empresa financiera como lo harías para una juguetería , ¿ verdad? Hablaremos de psicología del color un poco más tarde por ahora. Tan solo toma nota, también, que los colores transmiten y encienden emociones, y es extremadamente importante encender las correctas. ocasiones de los negocios, en cierto modo, obligan el uso de ciertos colores. Por ejemplo, si estás creando un sitio web para una tienda de esquina de comida orgánica, lo más probable es que vayas por tonos tierra, y si crearas un sitio web de jardín de infantes, irías por un color más colorido y encontrado paletas. En segundo lugar, si la empresa ya tiene un logotipo o lo está rediseñando, hay que tomar en consideración sus colores. Esto no quiere decir que todos los colores dentro de la página web tengan que ser exactamente los mismos que los utilizados en el logotipo, pero definitivamente tienen que complementarse entre sí. En tercer lugar, escucha a tu cliente, pero no sucumbas a las ideas claramente malas. Es decir, hay una razón por la que el cliente te contrató en lugar de hacerlo ellos mismos o pedirle a su sobrino que diseñe su sitio web. Pero claro, no tienes que ser demasiado esquemático si tu cliente quiere destacar de alguna manera. Y si le echas un vistazo a sus competidores Presencia web, puedes experimentar un poco con esquemas de color. Si, por ejemplo, estás diseñando un sitio web para un ambiente moderno una empresa, no tienes que ir por el azul oscuro y el gris, sino Espolvorea las cosas con el marrón claro o el verde. Mira el sitio web del cliente earth dot org. Este puede no ser el mejor diseño del mundo, pero muestra claramente que el mensaje y las emociones se arman o son importantes que la corrección del collar al decidir sobre un esquema de automóvil que desea utilizar en el diseño. Recuerda sobre el tipo de negocio que es tu cliente y sobre los usuarios que van a estar visitando en el sitio. A continuación, hablaremos de aspecto más práctico fuera de elegir colores para tus diseños. Echaremos un vistazo a preparar los colores para la mejor experiencia de usuario 8. 4.2Cómo mezclar colores para la mejor experiencia de usuario posible: Hay muchos diseñadores que dejan que sus ojos juzguen de cierto color o paleta de colores será bueno para un trabajo específico de diseño Web. Pero el problema con este enfoque es el hecho de que tantos colores pueden verse hermosos. Y así las paletas de colores maney pueden parecer apropiadas para ese diseño específico. Entonces, ¿cómo saber si tu elección de cuello es buena? ¿ Hay alguna forma de juzgar las combinaciones de colores que elegiste? Bueno, probablemente de Leary. Pero tenemos que echar un vistazo a algún aspecto fuera de la teoría del color, pero prometo que será lo más práctico posible. Básicamente, podemos hablar de cuatro tipos fuera de esquemas de color, monocromáticos, cortesía y los logotipos y para probar ático. Entonces hablemos de estos para un segundo modelo. Esquema de color cromático utiliza un color base y varios tintes tonos y situaciones fuera de él. Es la mejor opción si necesitas un diseño cohesivo, pero puedes caer en una trampa usando un esquema de color aburrido. Aquí, los esquemas de color compuestos, a veces llamados split complimentary, se basan en dos colores del tamaño opuesto fuera de la rueda de color. Cuando quieras crear tu propio esquema de color complementario, echa un vistazo a la rueda de color e imagina que estás dibujando un reloj de arena sobre ella. Esencialmente, estás tomando dos colores de extremos opuestos del espectro de colores, lo que le da a tu diseño más libertad que los esquemas cromáticos motores. Si es consistencia lo que buscas en tu diseño, ve por y logos esquema de color. Vuelve a echar un vistazo a la rueda de color y elige tres colores vecinos. Estos temas pueden crear un campo unificado sin nacer como el color monocromático askew. Para crear un esquema de color de ático try, dibuja un triángulo cuyos lados tengan la misma longitud y elija los colores en los triángulos. Endpoints. Esto crea un esquema de color diverso pero equilibrado con colores igualmente vibrantes. Aparte de estos principales tipos de esquemas de color, existen algunos factores más que debes tener en cuenta a la hora de elegir colores para tu diseño. Hablo de complementación, contraste y vitalidad. Los colores que se complementan se sientan en el extremo opuesto apunta fuera del espectro de color porque son visualmente significativamente diferentes. Es más fácil para el ojo humano distinguirlos. Es por eso que a la gente tiende a gustar la bateadora que diseños que son fáciles de ver, lo que significa que proporcionan un cierto equilibrio y no obligan al ojo a buscar ligeras diferencias entre colores. En un esquema monocromático, la complementación se utiliza en los esquemas de color triásico y compuesto. Una buena experiencia de usuario no puede vivir sin un uso adecuado del contraste. opción más importante a la hora de contrastar es, por supuesto, el gran color del suelo y del texto. Si no estás seguro de qué colores usar, la mejor práctica suele ser elegir un color muy claro para el fondo y un muy oscuro para el texto en sí, o viceversa. vitalidad es el lado emocional del esquema de color. más brillantes, Coloresmás brillantes, vivos provocan sentimientos energéticos, mientras que más oscuros, tranquilos, todos los colores relajaron a los visitantes, lo que les ayuda en el enfoque en otras cosas. Estas son las principales herramientas teóricas que deberían ayudarte a hacer más, así cuarta elección para tus esquemas de color. Por supuesto, hay muchas más herramientas e ideas para usar y para elegir en cuanto a elegir colores . Pero si te familiarizas con los que cubrimos, estarás en el camino correcto para el manejo profesional del color en el diseño gráfico. Ya que mencionamos emociones provocadas por los colores, creo que es un buen momento para hablar de la psicología del color, que es sumamente importante, no solo en el diseño Web, sino en el diseño en general. 9. 4.3Cómo elegir los colores "que de la: los colores que elijas para tu diseño, crea un estado de ánimo específico. Es necesario entender la psicología detrás de colores específicos. La psicología del color podría sonar excesivamente científica, pero simplemente describe los sentimientos y significados que las personas a menudo asocian con colores particulares . Seleccionándolos cuidadosamente, puede reforzar el mensaje general de un sitio. Echemos un vistazo a algunos de los colores base que es más probable que uses al diseñar tus sitios Web. rojo es el color más vibrante y agresivo. Es el 1er 1 en atraer los ojos de los hombres, dependiendo de qué colores que lo haga con él pueden transmitir poder y coraje, pero también amor y pasión. Dado que se utiliza en muchas señales viales, se utiliza con frecuencia en sitios web para alarmar al usuario para que informe de peligro. De ahí que sea un error usarlo para tu llamado a las acciones. Tal espartanos o enlaces naranja es uno de los colores más agradables a la vista. Es difícil de perderse, y puede evocar ambiente divertido y enérgico. amarillo es el color apagado, el algo de calidez y tiempo de verano. También es el color más visible del espectro, así que no lo uses en exceso. A mucha gente le parecerá demasiado irritante amarillo. Es especialmente llamativo cuando se combina con blanco o negro ya que emite en equipos de seguridad , autobuses escolares y taxis. Si le preguntas a la gente a punto de su color favorito, lo más probable es que digan azul. Es agradable mirar su discreto y te hace sentir cómodo. A lo mejor es porque es el color del cielo. También es el color fuera del agua, por lo que la gente conecta el azul con refresco y el azul limpiador, especialmente el azul oscuro, es el más profesional. El color, después de todo, es el color del traje presidencial. Entonces usa este color cuando sea profesionalismo lo que quieras transmitir. Con tu diseño, verde es el color de la naturaleza. Si te duelen los ojos al mirar a más larga una pantalla de computadora, mira el verde. Es una opción perfecta y más obvia para productos orgánicos, respetuosos con el medio ambiente y saludables, pesar de que es un color del dólar estadounidense. Si estás creando un sitio web para una empresa financiera, no te vayas por la borda con verde. En cambio, apégate al azul oscuro, gris oscuro, blanco y negro para transmitir confianza y profesionalismo. El púrpura está históricamente asociado con la realeza, que lo hace perfecto para marcas de lujo. También, cuando se combina con otros colores , perderá parte de su patrimonio real. Con el rojo, puede sentirse íntimo y romántico. Con blancos y rosados, se vuelve juguetón e infantil. Por qué significa pureza e inocencia. Pero también se usa para crear minimalismo y sofisticación que es más probable que asientes en los sitios. Centrarse en bodas, atención sanitaria y letreros así como en el negro del blog moderno y minimalista es sin duda el color elegante definitivo. Nunca pasa de moda. Implica fuerza, lujo, mal, muerte y evitar. Recuerda que puedes decidir qué emociones sentirán los visitantes al mirar el sitio que diseñaste, por lo que tienes un papel importante que desempeñar como diseñador. Además, los significados del color pueden variar drásticamente entre culturas y regiones, por lo que es mejor comprobar si el color Joe's es apropiado en una cultura determinada. Ahora sabes un poco de la teoría del color, y yo admite que podría sentirse abrumador. Por suerte, existen herramientas que pueden ayudarte en gran medida a elegir el esquema de color correcto. Por lo que a continuación echará un vistazo a siete herramientas fáciles para elegir esquemas de color a prueba de errores 10. 4.4-7 herramientas fáciles para elegir esquemas de color a prueba de colores: elegir colores para tu próximo diseño puede ser un proceso largo e incluso desalentador. Para mí, siempre toma demasiado tiempo encontrar la combinación correcta, pero probablemente todo su proceso pueda acelerarse con algunos generadores de esquema de color en línea. Echemos un vistazo a siete herramientas fáciles para elegir nuestros esquemas de color a prueba. Empecemos con Kohler hex a dot com. Este letrero es genial si eres un fanático del color. Todo lo que tienes que hacer aquí es escribir en cualquier color, valor o nombre de color para obtener una enorme cantidad de información propiedad de ese color más, por supuesto, diferentes esquemas de color. También obtendrás ejemplos de diferentes usos fuera de ese color en particular, junto con alternativas para ello. Y si prefieres alguna fuera de las alternativas, solo puedes hacer click en él para ver toda la información y esquemas de color necesarios. El segundo instrumento, llamado punto de color, es realmente divertido y fácil de usar. Esta herramienta le permite crear rápidamente un esquema de color usando el ratón arrastrar a izquierda y derecha para cambiar el tono, arrastrar hacia arriba o hacia abajo para cambiar la ligereza y desplazarse hacia arriba o hacia abajo para cambiar su saturación . Si estás contento con el color haz clic para guardarlo y repite el proceso con otro color. La herramienta sólo te mostrará colores que funcionan bien con el que elegiste antes de poder repetir el proceso tantas veces como quieras. Los dos siguientes, llamados Palatable, es particularmente divertido de usar. Puedes elegir tu propio color o hacer clic en el botón de aversión para que el programa elija los colores por ti. Si te gusta, haz clic en Like and Seve, el siguiente color que se supone que coincida con el anterior coincide con tu gusto. También puedes quitar un color en particular para encoger toda la paleta sobre el color. Mente. Puedes elegir tus propias muestras de color, y si te gustan, puedes mirarlas y golpear. Genera para que el programa encuentre, imagina colores a los que elegiste. Lo que tiene de especial este taburete en cuanto al diseño Web es que puedes elegir la opción de colores del sitio web y paleta de agua que se está aplicando a una página Web ficticia. Paleta de materiales fue creada para principalmente con el propósito de fusionar colores de diseño de materiales en sus diseños. Entonces, ¿qué es el diseño de materiales? Bueno, es el diseño conceptual de Google el que está orientado a la experiencia del usuario. Está específicamente diseñado para funcionar mejor en dispositivos móviles y la paleta de materiales está aquí para ayudarte a elegir colores. caso de que desees diseñar siguiendo los principios de diseño de materiales, todo lo que tienes que hacer aquí es escoger dos colores y dejar que el programa haga el levantamiento pesado por ti. No sólo creará un esquema de color para usted, sino también más grandioso. Una vista previa del esquema aplicado a una interfaz de usuario móvil de la que probablemente has oído hablar de Can Va ? Pero ¿has oído hablar de su paleta de colores para ti? Puede usarlo para crear esquemas de color fuera de imágenes importadas. Dragón imagen en la interfaz y dejar que el programa recoja los colores de esa imagen. Y por último pero no menos importante, es mi generador de esquema de color favorito. Eso es totalmente diferente en la forma en que piensa en crear palets. En lugar de escribir los nombres de los colores, subir imágenes o arrastrar el ratón para crear muestras de color, escriba el evento del tema o cualquier palabra que esté describiendo su diseño. Después de unos segundos, obtendrás esquemas de color relacionados con esa palabra clave. Bastante dulce, ¿eh? Todas estas herramientas generadoras de color son una representación humilde de un área de herramientas que puedes encontrar en línea. La mayoría de ellos funcionarán más o menos de la misma manera. Entonces si solo encuentras tu uno o dos favoritos, eso es realmente todo lo que necesitarás. A continuación, aprenderás los fundamentos de la topografía en diseño Web, así que no te vayas. 11. 5.1historia super de la tipografía de la web: cuando se compara con los más de 25 años de existencia de Internet. Verdadera tipografía Web parece un jardín de infantes. Sólo tiene unos pocos años. Por supuesto, incluso los primeros sitios web contenían texto. De hecho, el primer sitio web de la historia no fue nada de texto, pero la elección telefónica fue limitada, decir lo menos. Antes del nacimiento fuera. verdaderos diseñadores de topografía Web podían elegir entre cinco tipos de letra diferentes, pero sólo dos de ellos, verdana y Georgia, fueron creados específicamente para uso Web. Los otros fondos, a saber, Aerial, Helvetica y Times New Roman, fueron sacados del sistema operativo de la computadora y cargados en un sitio web. Por supuesto, esto no significa que los diseñadores y desarrolladores acepten cortésmente ese concepto demasiado limitado de tener sólo cinco tipos de letra disponibles. La alternativa más simple era usar imagen como deseos de texto podrían utilizar los fondos instalados en sus computadoras sin dar demasiada preocupación, licencia demasiado formada en. Pero hubo dos grandes inconvenientes de este método. primer lugar, Enprimer lugar,para convertir el diseño lleno de imágenes en un sitio web, había que rebanarlo en una cantidad ridícula de imágenes en una pieza de software como Photo Shop. Además, no olvides que este fue el tiempo libre. No tan rápida conexión a Internet. Por lo que el tiempo que tardó en cargar un lado lleno de imágenes fue significativamente más largo. Todo cambió en el 2010 cuando Google creó su propia biblioteca fuera de los fondos Web. Son gratuitos, en su mayoría bien hechos y definitivamente fáciles de usar tanto para diseñadores como para desarrolladores. Esto ha cambiado el mundo de la tipografía Web. actualidad, encontrarás fondos específicos para la Web en todas las fundiciones de tipografía más importantes, y es difícil imaginar diseñar sitios web. Sin ellos. El auge off responsive diseño Web ha hecho que su tipografía pase por un nuevo tipo de transformación. El hecho de que tu trabajo se vaya a ver en diferentes dispositivos hace imposible predecir cómo se va a ver un fondo específico en un dispositivo específico. No obstante, existen algunas reglas básicas para elegir los fondos adecuados para el tipo adecuado de empleos, y hablaremos de ellos a continuación 12. 5.2Cómo mezclar colores para la mejor experiencia de usuario posible: elegido adecuadamente. Tipografía para el proyecto significa que ayuda a enviar el mensaje fuera de la página web. También es importante recordar que las tipografías, igual que los colores, pueden provocar cierto tipo de emociones. Por eso es importante elegir a tus amigos con cuidado y con el lector en mente. Las personas que ven el sitio web pasarán la mayor parte de su tiempo leyendo el texto corporal. Por eso es una buena idea elegir primero el fondo para el texto corporal. El tipo de letra que elijas debe ser discreto repisa un ble y legible. Hay algunas formas de elegir fondos con esas características, pero prometí mantenerlo lo más amigable con el diseñador regular posible. Es decir, no todos los diseñadores están súper entusiasmados con la topografía. Entonces, ¿cuáles son las características de los fondos discretos y legibles para los diseños de tu sitio web? Un hallado legible tiene lotes fuera de altura X, que es la medida vertical de una X minúscula Cuanto más corta sea la altura X, menor aparecerá este último, lo que puede provocar que el tipo se vuelva ilegible. Por otro lado, demasiada altura X puede hacer que las letras M y H sean difíciles de distinguir. Echa un vistazo a la misma palabra escrita en Lotto e hijos abiertos para comparar sus exalturas. El segundo que hay que quitar una nota es lo abiertas que están las aperturas. Pero lo que nuestras aperturas son las huecos en letras como una C o s. Cuanto más abiertas estén, más legibles se vuelven las letras. También debes prestar atención a los A. Remitentes y centros D de los pasajeros de este último son los trazos que se extienden por encima de la línea media y los centros D son los trazos que se extienden por debajo de la línea base. Cuanto más distinguibles sean, más legible se vuelve el texto. La mayoría de las tipografías de Saref suelen ser opciones ideales para leer pasajes de texto más largos. Debido a los trazos notables en sus remitentes A y D. Su elección de tipo de letra del impuesto corporal debe contener al menos cuatro estilos diferentes. Cursiva regular. Cursiva audaz y audaz. Si el tipo de letra no contiene una fuente cursiva, los navegadores se inclinarán forzosamente. Y si no contiene una versión negrita, los navegadores duplicarán la versión regular del frente, lo que dificultará el texto en los ojos. El último que debe tomar una nota a la hora de elegir tipografías para su texto corporal es el contraste entre líneas delgadas y gruesas dentro de las letras. Al echar un vistazo a tipos de letra como Play for display, notarás un enorme contraste entre líneas gruesas y delgadas dentro de bandejas separadas. Tipografías como esa pueden verse muy bien en encabezar diseños para blogs de moda, pero no funcionarán bien como gravados corporales. Ahora ya sabes cuáles son los cinco rasgos cruciales de las tipografías que funcionarán bien como texto corporal. Esas tipografías tendrán una altura X generosa, aperturas abiertas, entros de culo distinguibles y remitentes D, al menos cuatro estilos y pesos y pequeño contraste entre líneas dentro de escaleras. No, todo está bien y bien sobre la pregunta principal aún queda sin respuesta. Y esa pregunta es: ¿Qué tan grande debe ser el texto corporal? Bueno, la respuesta corta es de 16 puntos. Es el tamaño de texto que muestran los navegadores por defecto. Es el tamaño de texto que los navegadores estaban destinados a mostrar. Generalmente, este tamaño funciona bien para portátiles, computadoras de escritorio y teléfonos. Y qué pasa con la altura de la línea, que por supuesto, significa la distancia vertical entre líneas de texto. Una buena regla de oro es agregar seis puntos al tamaño del teléfono de texto corporal, por lo que si estás usando 16 importancia como el tamaño del teléfono de texto corporal ir con 22 puntos como la altura de línea . Por supuesto, puedes experimentar con otros valores de altura de línea. De hecho, muchos diseños modernos de sangre usan alturas de línea más generosas, así que conseguimos el cuerpo. tipografía de texto está bastante bien cubierta. Si sigues todas estas reglas, harás un gran favor a los usuarios haciendo de leer tu sitio una experiencia agradable. Siempre te ahorrarás mucho tiempo y evitarás tipos de letra. No vale la pena terminar en tu diseño. A continuación, echemos un vistazo a la elaboración de captadores de atención. Hablaremos de encabezamientos. 13. 5.3Cómo elegir las fuentes adecuadas para los títulos para: buenos encabezamientos y subtítulos son aquellos elementos de un sitio web de diseño que atraen a los usuarios y fomentan una mayor lectura. Por eso es fundamental aprender a crearlos correctamente. Si no estás seguro con tipografía para usar en peligro con el fondo corporal, solo tienes que ir por la misma familia telefónica. Por ejemplo, si elegiste las arenas abiertas para ser el fondo corporal, ve por un audaz y ampliado dos o incluso una versión triple de la misma para tus encabezamientos. Esto hará que el diseño Luke sea armonioso y reducirá el tiempo necesario para cargar el sitio. Esa es la manera rápida y fácil, pero las posibilidades son que tarde o temprano tu diseñador así prevalezca y te instará a mezclar diferentes tipos de letra. Tendrás que usar un fondo para etiquetas de cuerpo y otros cuatro títulos si quieres lo mejor de ambos mundos. Es decir, si quieres quedarte en el lado seguro y aun así spruced la topografía de tu página web un poco arriba, puedes quedarte dentro de una súper familia. Por ejemplo, puedes elegir hijos droide para los encabezados y droide serif. Para texto de cuerpo. Encontrarás algunas super familias buenas entre los teléfonos de Google, por ejemplo, Roboto y Roboto Slab Merryweather y Merryweather Sands o Noto Santas y Noto Saref. La siguiente gran pregunta es, ¿qué tan grandes deben ser los encabezamientos? En primer lugar, recuerda que tu lado va a usar un número máximo de seis partidas. No todos ellos tienen que estar necesariamente incluidos en el diseño. Es decir, diseños típicos no van por debajo de rumbo, pero es una buena práctica desarrollar un conjunto de tamaños para que todos los encabezamientos los coloquen. Encabezados simples son títulos fuera de los sitios web componentes encabezamiento uno típicamente reservado para las vistas branding, por lo que técnicamente no necesita ser texto en absoluto. Puede abarcar el logotipo de la empresa, los encabezamientos que la mayoría de sus diseños van a depender de nuestra partida dos. Esos chicos son tus títulos de bloque, títulos sección principal, etcétera. Yo recomendaría hacerlos por lo menos 32 puntos grandes, que es el doble del tamaño de un tamaño de texto corporal típico. Aquí también se aplica el troll alto de la línea de agregar seis puntos al tamaño de la fuente. Todos los demás tamaños de encabezamiento variarán dependiendo del trabajo que estén haciendo dentro del diseño. Por ejemplo, encabezamiento tres suele utilizarse como título de elementos cibernéticos. Por lo que su tamaño debe funcionar bien con todo el concepto de diseño, en lugar de ser solo un porcentaje o algún tipo fuera de un derivado Fuera de los otros encabezamientos. No obstante, si tu diseño va a ir en el fondo como cabeza en seis, no recomendaría hacerlo más pequeño que el tamaño del texto del cuerpo en sí. O sea, dirigiéndose más pequeño que el cuerpo se ataca a sí mismo. Eso es hilarante, ¿no? Ahora ya sabes elegir tipos de letra tanto para el cuerpo como para los encabezados. Entonces ahora es el momento de mirar mezclarlos juntos. Hagámoslo a continuación. 14. 5.4Cómo mezclar fuentes para títulos y texto de tu cuerpo: suerte para nosotros. Hay una tonelada de recursos y en lentejas para más fácil para los padres. Echemos un vistazo a algunos de ellos ahora. El 1er 1 es una herramienta incorporada directamente en los propios fondos de Google. Cuando elijas un tipo de letra, digamos que abras arenas y haz clic en Ver Ejemplar. Verás una avería fuera del frente. En la esquina inferior izquierda, notarás una lista fuera de los populares emparejamientos delanteros. Todo lo que necesitas hacer es elegir un par frontal. ¿ Y qué se debe aplicar a la pieza de texto de la derecha? También se puede comprobar con el frente se va a ver como encabezado y como texto de cuerpo. Pero hay un inconveniente importante de esta herramienta. Sólo obtienes un modesto adelanto de los fondos en acción. Es difícil imaginar con sólo mirar estas piezas de texto cómo van a ser en diferentes escenarios. Por ejemplo, en un llamado a las tarjetas Sliders de Action etcétera para ver algunos pares delanteros más. Junto con ejemplos extendidos, ir a inicio telefónico gran punto simple io. Aquí encontrarás algunos Google poco común de París que puedes considerar al diseñar tu próximo sitio web uno fuera del principal fondo más grande y visitado, ALS, es front pair dot co. Aquí encontrarás una extensa biblioteca fuera de pares frontales dividida en categorías específicas. Te transmito cualquier combinación fuera de Saref, San Serif y fondos cursivos, y si te gusta cualquiera de los pares frontales, solo puedes descargarlo con un solo clic. Obtendrás un archivo ZIP que necesitas desempaquetar e instalar teléfonos escondidos en el interior. Pero por supuesto, el mayor repositorio de pares de Google Front es el propio Google. Es decir, si solo pares de teléfonos Google, encontrarás los artículos de Tom y Thomas off sobre la lista hecha a partir de peras para que elijas y uses. Entonces si siempre se debata contigo mismo, qué fondos usar, es una buena idea mirar las sugerencias de otros diseñadores que pasaron exitosamente por este laborioso proceso. Una palabra de precaución aquí Si nota una visualización de palabras en un nombre de tipografías, eso significa que está destinado a encabezamientos, no gravados corporales. Entonces si un par de fondos sugiere un tipo de pantalla de fondo para texto corporal, eso es sólo un mal consejo e ignorancia. Así que ten cuidado de que estas son las formas y herramientas más comunes para encontrar grandes pares de teléfonos de Google . Pueden ser una gran manera de diseñar un sitio web único, solo muy mente que no estás solo tras el efecto artístico, sino también después de la legibilidad. A continuación, resumiremos brevemente esta sección y nos centraremos en los tres aspectos más importantes fondos bien elegidos para los diseños de su sitio web. 15. 5.5La fuente perfecta para el diseño de la Interfaz de usuarios: Sepamos que algo pasa y echemos un vistazo a tres aspectos principales de cualquier fondo que estará agradecido de sus diseños Web. Creo que a estas alturas entiendes lo suficientemente bien que tus diseños deberían servir a tu audiencia de clientes . Si un usuario visita los sitios que diseñaste y lo deja después de unos segundos porque él o ella no puede leer nada, eso es señal de un mal diseño. Los mejores indicadores fuera de legibilidad son las distinciones claras entre letras que podrían parecer similares. Por ejemplo, tipografía mayúscula I y la minúscula L bien elegida se mantiene fuera de los usuarios. Espera, por así decirlo. Es decir, hace que el proceso de lectura sea más fácil. Pero leer no es solo para ver publicaciones en bloque. También es para leer descripciones de productos, leer llamadas Toe Acciones en botones sobre mí secciones de sitios web. Por lo tanto, tipografía es una media off conseguir que el usuario del punto A al punto B lo más rápido y genuino posible . Por lo que dependiente del objetivo de los sitios web, ya sea vender, suscribirse o informar topografía fácil de absorber puede ayudar en gran medida o impedir región de esos objetivos, y por último, bueno que yo tipografía funciona bien a través de diferentes tamaños de pantalla, no importa qué dispositivo o sitio web esté apareciendo en la masa tipográfica permanecen legibles. Algunas personas afirman que los fondos de Sarah son más difíciles de leer en las pantallas de los teléfonos inteligentes, luego los teléfonos sans serif. Y de hecho, las personas con trastornos de la lectura o discapacidad visual podrían encontrar más pequeño impuesto serif más difícil leer. Pero si una tipografía web serif está bien compuesta, debería ser fácil de leer, incluso en unos tornillos más pequeños, incluso para personas con trastornos de lectura que alguna vez encontraron elegir. Recuerda que el propósito fuera de cualquier texto en tu sitio web usaba para ayudar a tus usuarios a lograr sus objetivos. Considera todo el contexto, en lugar de limitarte a depender de un conjunto de reglas cuando tomes tus decisiones de diseño. Hasta ahora hemos aprendido bastante sobre los colores y la tipografía en el diseño Web. Ahora es el momento de echar un vistazo a los bloques de construcción de un sitio web típico. 16. 6.1de la marca, la navegación y las secciones de héroe: Al diseñar sitios web, debes recordar sobre ciertos bloques que lo construyen. Algunos de ellos siempre estarán presentes en el diseño, pero algunos de ellos son opcionales. Echemos un vistazo a cómo se construye un sitio web típico. Vamos a diseccionar un sitio web partiendo de arriba y moviéndose hacia abajo. El primer bloque de construcción de un sitio web sería come Sombrerero. Se trata de un contenedor que suele contener la información de Brandon como el logotipo y el tagline, algún tipo de sistema de navegación y a veces información de contacto, incluyendo alas de redes sociales. Muchos diseños de sitios web, incluyendo cuadro de búsqueda en el encabezado también. Típicamente, el Brandon se sienta a la izquierda y la navegación a la derecha. El sistema opcional de información de contacto y búsqueda también puede ir a la derecha, arriba o debajo de la navegación. Pero esta es sólo una forma de presentar al Sombrerero. En algunos diseños, especialmente los modernos diseños de sangre, los contenidos de Heller a menudo se centran, por lo que el logotipo está en el centro y la navegación va por debajo de él, y también está centrado. Creo que hace que el diseño sea aún mejor organizado y más fácil de entender. Lo que va por debajo del brezo es opcional. Es decir, puedes incluir algo que se llama sección de héroes. Entonces, ¿qué es eso? Básicamente, es un componente que muestra contenido clave de tu lado. Su principal propósito es captar rápidamente la atención del usuario y explicar de qué se trata el sitio Web . A menudo lo puedes ver en los insights del mercado donde se te pide que introduzcas tu dirección de correo electrónico para obtener un libro electrónico gratis. Ooh, un reporte o algo así. Por lo general, la sección Hero contiene una imagen de fondo completa o un video con contenido superpuesto que topografía es grande y audaz, la topografía es grande y audaz,y la mayoría de las veces también encontrarás aquí algún tipo de llamada a la acción. En ocasiones la imagen de fondo completa se comparte entre las secciones de encabezado y héroe en respuesta a versiones del diseño, especialmente en teléfonos móviles, una sección de héroes puede transformarse en algo completamente diferente. La imagen de fondo puede ser reemplazada o incluso una completamente eliminada, haciendo que el diseño sea más ligero. Otra idea para la sección de héroes es utilizar el deslizador, que es un escaparate de imágenes o una combinación de imágenes fuera y texto. Esas imágenes son interactivas y cambian automáticamente o en la interacción del usuario. No obstante, hoy en día los deslizadores están empezando a volverse redundantes. En primer lugar, no son demasiado s yo amigables. En segundo lugar, son demasiado pesados y un poco inservibles en las pantallas de los pequeños smartphones. Pero toda la sección de héroes es realmente opcional. En algunos casos, realidad puede estar obstruyendo todo el propósito del sitio web, y estoy hablando de diseños de bloques. Una rubia es mayormente sobre los artículos, por lo que el usuario que visita un sitio web se debe presentar con lo que él o ella está esperando encontrar aquí, que son exactamente los artículos. Por supuesto, los artículos se pueden presentar de una manera más interesante que solo traquetea el texto, pero hablaremos de y de otras secciones que van por debajo del héroe en el siguiente video . 17. 6.2Las secciones de centro y fondo de tu diseño de sitio web: Ahora pasemos más allá de las secciones de cabecera y héroe y detengamos de los artículos y barras laterales . Estas secciones se verán diferentes no sólo por su elección de diseño, sino principalmente por la naturaleza del sitio. Se verán diferentes para un blawg diferente sitio corporativo o personal gratuito. Variaciones C anuales dentro de esos conceptos para hacer las cosas simples. Si no es un blawg, la sección debajo de la imagen del héroe se verá como cajas horizontales, separadas por contenido y colores que pueden contener mezclas de iconos, imágenes de texto y enlaces. El motivo principal detrás de crear estas secciones de una manera específica es para hacerlas fácilmente legibles en dispositivos móviles. Aquí la clave es crear el diseño de escritorio encima del diseño móvil. Cualquier cosa que se vea bien en un smartphone también debe verse bien en una computadora de escritorio en caso de diseños de bloques. Es muy probable que estas secciones engloben los artículos, y se pueden presentar de diversas maneras. Pero un denominador común es que siempre tendrán los títulos de artículos que también pueden presentar imágenes destacadas, fragmentos de publicación en bloque, enlaces y otra información. En ocasiones, si se trata de un sitio web de comercio electrónico, los artículos pueden contener fotos de producto, descripciones precios en otro bloque de construcción de sitio web que puede sentarse junto a las secciones o artículos es una barra lateral. Una barra lateral típica contiene información que, alguna manera es complementaria al mensaje principal fuera de la página web. Podría ser la información del autor del blog. Redes sociales feed latest posts, tags call to actions, productos relacionados, etcétera. Lo interesante de las barras laterales es que pueden sentarse en el lado derecho de la página en el lado izquierdo o en ambos lados al mismo tiempo. último bloque central de un sitio web es que sus pies de página realmente han crecido a lo largo de los años a partir de simples secciones de una línea que contienen principalmente los derechos de autor en folk. Han evolucionado hasta convertirse en sofisticadas cajas con muchos datos adicionales. Los pies de página así como los encabezados son los mismos en todos y cada uno de los sitios, y contienen información que no cambia. No importa qué página esté viendo el usuario actualmente, son una ventanilla única para toda la información esencial que pueda necesitar el usuario. Por eso, en las secciones de pie de página verás bios rápidos o sobre mí enlaces a páginas más importantes o recientes presume. A las alas de redes sociales de Commons recientes o subsecciones enteras con feeds de redes sociales como fotos de instagram. Los pies de página suelen ser fácilmente distinguibles gracias al uso del contraste en colores en relación con todo el sitio web. Si se hacen correctamente, hacen que todo el sitio se vea profesional y bien diseñado. Para resumir las cosas, un sitio web típico contendrá un encabezado. A secciones de héroe con artículos, a veces barras laterales y siempre f pie de página. Ahora que ya sabes estructurar un sitio web, es hora de mirar las rejillas. Podrían parecer aterradores al principio, pero ayudan a crear un sitio web simétrico y más fácil de codificar, así que echemos un vistazo rápido a ellos a continuación. 18. 6.3¿Qué son las cuadrículas y cómo utilizarlas: Entonces, ¿qué es una grilla? Piénsalo como un serio fuera de las líneas invisibles que te ayudan a estructurar el diseño de tu sitio web y a hacerlo simétrico y más fácil de codificar. Esas líneas son de gran ayuda a la hora de colocar los elementos de tu diseño, no solo los contenedores principales. Es muy notable la falta de alineación y crea una impresión desplomada. construye una cuadrícula típica de unidades, canalones y columnas. Echemos un vistazo rápido a aquellos que usan una cuadrícula de 12 columnas como ejemplo. Las unidades son los bloques básicos de construcción de cada rejilla. Parecen columnas largas, un poco estrechas con un poco de espacio a cada lado de ellas. Las canaletas son espacios sentados, tanto en el lado izquierdo como en el derecho de cada unidad. No importa si es un centro para unidad derecha o de extrema izquierda. Siempre hay la misma cantidad de Ghadir a ambos lados de ellos. En las columnas se tiene el nombre más confuso de todos los bloques de construcción de grano. Básicamente, son clústeres de contenido similar, repartidos en una cantidad específica de unidades y consiguieron la suya. El cuadrícula más común y versátil es una cuadrícula de 12 columnas. Se trata de un gran terreno común. Tanto para diseñadores como para desarrolladores, es la mayor ventaja es que se puede dividir fácilmente en diferentes clústeres de unidades. Por ejemplo, puede tener cuatro columnas creadas a partir de tres clústeres de unidades, seis columnas creadas a partir de dos blásteres de unidades y así sucesivamente. El bello de este sistema es que se pueden mezclar columnas juntas. Por ejemplo, la izquierda, se puede tener un yeso de ocho unidades y a la derecha, un clúster de cuatro unidades y así sucesivamente. El truco aquí es dividir la cuadrícula en columnas cuyas algunas siempre van a ser 12. También se pueden hacer columnas horizontalmente, por así decirlo. Una sección se puede dividir en dos columnas, otra en cuatro, otra en tres y así sucesivamente. Aconsejaría usar la grilla todo el tiempo. Al principio podría ser un poco incómodo, pero después de un tiempo te encantan las rejillas. Te ayudarán tremendamente en la creación de diseños cohesivos, estéticamente agradables. Si es más fácil para ti, solo puedes descargar una versión PSD de una cuadrícula de 12 columnas y utilizarla fácilmente en el interior. Diseñador de afinidad. Simplemente puedes google 12 columnas grit y encontrarás montones y montones de ejemplos, pero creo que por el bien de entenderlo un poco mejor, que diseñaría nuestro propio hagámoslo en el siguiente video. 19. 6.4Cómo diseñar tu propia cuadrícula: Abrimos diseñador y creemos un nuevo documento que va a utilizar el perfil Web para el preset de página. Iré con full HD y revisaré la opción creat art a bordo. Dejaré intactas todas las demás opciones. Antes de empezar a crear algo, me aseguraré de que a la U I diseño ajuste preestablecido esté activado. Esto me ayudará a crear una gran rejilla de hechos de zapatilla. Empecemos por crear un ángulo craqueado básico que va a tener 1200 píxeles de ancho. Esto es importante porque vamos a estar creando diseños basados en una cuadrícula de 1200 píxeles con y 1200 píxeles es el más típico con de los sitios web contemporáneos. Asegurémonos de que el rectángulo esté exactamente en medio del arte a bordo, y ahora podemos pasar a sacar las primeras guías. Oprimida el control, son combinación de teclas en mi teclado y sacar dos guías que se chasquearán en ambos lados del rectángulo. Nuestra rejilla va a seguir las pautas de bootstrap. Si no sabes qué es bootstrap, déjame decirte rápidamente que es un framework de desarrollo Web que está ampliamente adaptado en el mundo W W W W. Utiliza un sistema de cuadrícula de 12 columnas donde todas las columnas tienen 15 píxeles fuera de palmaditas en ambos lados . Por eso ahora voy a divinar el rectángulo por 12 usando ese panel de transformación, y me aseguraré de que al punto de partida de transformación esté sentado a la izquierda. Después de eso, restaré 30 píxeles del resultado en rectángulo, porque 15 pixels más 15 big slips off patting en cada lado equivale a 30 pixels. El último que hay que hacer es mover la columna 15 píxeles a la derecha, y la unidad base está lista. Ahora vamos a clonar en la primera columna a la derecha presionando y manteniendo presionada la tecla de control hasta que la columna clonada encaje con el original. Después de eso, todo lo que tenemos que hacer es mover a ese tipo por 30 píxeles a la derecha. Ahora bien, si solo clonamos en la segunda columna a la derecha, diseñador nos mostrará la distancia entre las columnas y las encajará en su lugar cuando las distancias sean iguales. Todo lo que queda por hacer es presionar control más J en tu teclado. Para duplicar la última transformación, que fue la clonación y movimiento. Tenemos que hacerlo nueve veces más hasta que tengamos todas las 12 columnas. Ahora tienes tu propia cuadrícula de 12 columnas hecha a medida para un diseño de sitio web. Si lo desea, puede cambiar el color de las columnas, cambiar su transparencia y, por supuesto, su tamaño. Una vez que el diseño crece en altura, cuando pasemos a la parte de diseño real del curso, verás esta misma cuadrícula en acción. Pero antes de que hagamos eso, echemos un vistazo a lo que está en este momento en cuanto al diseño web. Descubramos las últimas inspiraciones de diseño Web. 20. 7.1 a 7 tendencias de diseño web que regulen el mundo de diseño web: En el próximo par de videos, echaremos un vistazo a las tendencias modernas del diseño Web. Esto te ayudará a entender el diseño de patrones que los diseñadores están siguiendo estos días. Empecemos con los menús que se ocultan al principio de Glenn's. Por lo general se esconden detrás de tres barras de chorizo NITEL llamadas manual de hamburguesas. Basta con hacer click sobre ellos para ver un sistema de navegación flasheado completo. Si crees que esta es una forma de imitar los menús de la APP móvil, tienes toda la razón. Dado que cada vez más personas están navegando por la Web utilizando sus smartphones, hace de Santa para transferir parte de esa experiencia al sitio web de escritorio. El diseño, uno de los beneficios de la navegación oculta, es que crea más espacio en la página principal. Permite que los contenidos principales sean destacados de manera más destacada. Otro beneficio del menú de su nombre es el hecho de que se puede combinar con un menú tradicional si ese diseño lo necesita. Si tienes muchos lugares a los que llevar al usuario, puedes ocultar algunos de ellos debajo de un menú y mostrar otros en el menú visible. Diseñar menús móviles sabios a menudo utilizados colores de fondo contrastan con el esquema de color general del sitio, haciendo que destaque del resto. El texto vincula el contraste de color con el fondo para facilitar la navegación. Parece que los usuarios han crecido acostumbrados a ver los sistemas de navegación como simples tres líneas que necesitan ser colectadas para ver lo que se esconde debajo. Es por eso que puedes experimentar libremente con la hamburguesa. Manu's en tus diseños. La experiencia de usuario contemporánea está cambiando lentamente de los visuales dos palabras. Es por eso que la tipografía está jugando un papel más importante que nunca. Pero, ¿qué significa tipografía grande y audaz? Bueno, ciertamente no significa que absolutamente debas usar solo versiones negritas de la tipografía y configurarla al tamaño más alto posible. Significa que muchos diseños tienen una cantidad decente de espacio para texto limpio y conciso justo en medio de una sección determinada. El ejemplo más obvio de eso son, por supuesto, las acciones del héroe. Con grandes imágenes de tipografía sobre fondo de carril, la UX moderna se desplaza hacia consignas que están limpias de tamaño y útiles, lo que significa que en el futuro, tipografía es papel en el diseño será más grande que nunca. Sin duda, la revolución de los teléfonos inteligentes ha cambiado. El modo en que las personas interactúan con el mundo de Internet. Pero hay un aspecto de esa revolución que con bastante frecuencia se omite, y eso es realmente importante para los diseñadores estadounidenses. Hasta hace poco, el principal sistema operativo solía conectarse con Microsoft Windows. Pero ahora es el androide de Google, y Google ha llegado con su sistema de diseño, llamado diseño de materiales y luz de diseño de materiales. Es por eso que los diseñadores que quieren crear un tú sin fisuras experimento para que los usuarios de la mano utilicen visuales de diseño de materiales. Ideas en los diseños Web. El diseño de materiales no está lejos en un diseño plano de Hanson. También se enfoca en la simplicidad pero agrega un toque de tres dimensionalidad. Si quieres usarlo en tus diseños, estarás encantado de escuchar que viene con todo un espectro fuera de ti y herramientas, colores, colores, topografía, interacciones, etcétera. Podrás revisarlos permitidos sobre el material que debo. Página web. No se puede negar que el crecimiento y desarrollo más rápidos está en el mundo de los dispositivos móviles . Tiene repercusiones significativas para Web diseñada para, con el énfasis en la palabra diseño. cambio de comunicación visual iniciado por el diseño de la APP móvil está abriendo camino al diseño Web también, y todo comenzó con el cambio de logotipo de Instagram. El diseño contemporáneo a menudo utiliza colores más y más brillantes. Juntos, tiene Grady INT están de vuelta, pero son consignas y algo sutiles. A menudo se reza con simples iconos de diseño plano y tipografía prominente. ¿ Qué es interesante? Resplandor están haciendo su camino icono del dedo del pie y el diseño del logotipo también. Pero como siempre, en el caso de Grady INTs, hay que tener mucho cuidado de no ir por la borda con ellos. Por suerte, existen herramientas en línea que pueden ayudarte en crear ingredientes de buen aspecto para tus diseños Web . El mejor ejemplo es una herramienta llamada U I Grady ints dot com. Aquí encontrarás una fantástica colección de hermosas INTs Grady, junto con los códigos de color para Easy Implementation, uno de los elementos de más rápido crecimiento en el diseño de sitios web. Oriente. El uso fuera del video de las imágenes en movimiento de pantalla completa que se utilizan a menudo como fondos en lugar de imágenes a pop ups y video incrustado de video de redes sociales es un must have cuando se trata contenido. El uso más generalizado del video es que se muestre como fondo en las secciones de héroes de los sitios web. El mejor modo de utilizar el video en este formato es hacerlo complementario al mensaje y un llamado a la acción que se están poniendo sobre el video. Pero a veces, sobre todo en los sitios web personales, los videos son despejados por cualquier visual. Ellos son amable presentación fuera del dueño del sitio web. También hay videos que de alguna manera imitan imágenes fijas. El movimiento del sitio es limitado. Imagina viento soplando en los árboles, haciéndolos perfectos como videos de fondo, pero agregó que algo extra especial al diseño sin ser distraído. Internet dice que el video es rey en estos días. Es muy posible que en algún momento de tu diseño, se le pida a carrera diseñar un sitio web que va a estar usando video en algún formato. Por eso es una muy buena idea echar un vistazo más de cerca a esta tendencia. Cada vez más diseñadores aceptan el hecho de que realmente necesitan pensar en sus diseños como que se ven con más frecuencia en las pantallas de los teléfonos inteligentes en lugar de en los portátiles. Eso conlleva un cambio total en el desarrollo de sus diseños. El escritorio versión del sitio se convierte en Onley, un derivado de su original móvil. Ese diseñador debe preguntarse a sí mismo. Una pregunta fundamental se verá bien solo smartphone. Pero la pregunta puede eventualmente cambiar en el futuro con el desarrollo fuera de los wearables. A lo mejor es hora de empezar a preguntarnos ¿Se verá bien en un smartwatch? Lo que nos lleva a la última renta de nuestra lista, que son tarjetas que diseño. El idea detrás de las tarjetas es meter el contenido en pequeños contenedores para que sea dispositivo cruzado . Desde smartwatches hasta escritorios grandes. Cada contenedor es un cúmulo de información sobre una idea específica. El interfaz es simplificado y fácilmente comprensible. Este enfoque también se utiliza en muchos blogs modernos, donde un artículo en la página de aterrizaje tiene su propio módulo. Estas son las siete tendencias más importantes en el diseño Web en la actualidad. Es una buena idea estar al tanto de ellos ya que no se trata sólo de visuales, sino que son conceptos bastante enteros fuera de la entrega efectiva de contenido a los usuarios. A continuación, echarás un vistazo a algunos lugares alrededor de la Web donde podrás encontrar alguna graninspiración de diseñoWeb inspiración de diseño 21. 7.2Donde encontrar la inspiración adecuada para tu próximo diseño: En este video, echaremos un vistazo a algunos lugares alrededor de la Web donde encontrarás gran inspiración de tu próximo proyecto de diseño Web. El primer sitio web que recomendaría se llama unas palabras dot com deletreado con un triple doble tú para www. Aquí encontrarás muchos ejemplos de diseño diferentes recopilados en categorías como ilustración, blogging corporativo, etcétera. Si te gusta un diseño en particular, puedes visitar el sitio web de la fuente y echar un vistazo a cómo se construyen. Lo que, caso, tendencias allí siguiendo y simplemente aprender del mejor segundo sitio web que recomendaría es un mercado temático de WordPress llamado theme forest dot net. Aquí encontrarás no solo temas de WordPress, sino también diseños laterales codificados en HTML. Es un enorme repositorio fuera de diferentes diseños Para tu inspiración. Puedes elegir entre muchas categorías diferentes, y también puedes previsualizar cómo funciona cierto diseño en el mundo real. También puedes visitar Web design inspiration dot com aquí, incluso también solo etiquetas y categorías específicas por las que deseas ordenar sus diseños. Es un gran recurso fuera de diversos diseños. Creo que es la variedad que es el aspecto más importante fuera de este repositorio de diseño Web vilificado lotes y mucho fuera repositorios de inspiración de diseño Web alrededor de la Web. Si estos tres no son suficientes para ti, aunque creo que para empezar les va a ir bien, solo puedes Google Diseño Web, inspiración e inmenso tú mismo en el mundo del diseño Web. Creo que a estas alturas ya no tienes suficiente lista para empezar a llegar con tus propios diseños. Conoces los principios que conoces, las tendencias y dónde buscar inspiración. La siguiente parte es comenzar a usar el diseñador de afinidad para hacer que tus ideas cobren vida. 22. 8.1Cada diseño de sitios web necesita un scaffolding: desde un punto de vista típico de diseñadores ansiosos. Crear un marco de alambre para el diseño de un sitio web es tan aburrido como redundante. Bueno, eso no es cierto. De hecho, un marco de alambre puede ayudar a acelerar tremendamente tu flujo de trabajo, y te puede ahorrar mucho tiempo. Muchas ideas que parecen geniales en tu cabeza cuando las estás imaginando tienden a verse mal cuando se ponen en una pantalla de computadora. Y confía en mí, lo sé por experiencia, pero ¿qué es un marco de alambre, y por qué estoy haciendo tanto al respecto? Los marcos de alambre son versiones esquemáticas de sitios web que te ayudan en la ización visual de los bloques de construcción de sitios web. Hay una tonelada de enchufes, herramientas en línea y recurso se paga y gratis que para ayudarte en la creación de marcos de alambre. Pero en tan solo un segundo, diseñaremos nuestra propia biblioteca de marco de alambre, o al menos los elementos esenciales de un marco de alambre, y luego los importaremos a nuestra biblioteca de activos. Pero primero, disecemos la idea del encuadre de alambre y su aplicación práctica. Para empezar, es posible que desee crear cajas simples que correspondan con los elementos de los sitios web. Es buena idea ponerlo en contra de un bien que ya estás familiarizado con esta etapa preliminar es la forma más básica de salir. Construir un andamio de sitio web Piensa en ello es un simple garabato que se supone que te mostrará si lo que hay en tu cabeza se verá bien en papel o pantalla. Las cajas más típicas serían representar una sección de héroes de navegación de Brandon Element, imagen, pancartas, pie de página, etcétera. El siguiente paso sería construir a la jerarquía de información con tipo. En esta etapa, su elección de fuente no es tan importante como lo es usar diferentes tamaños de fondos para mostrar las diferencias en importancia de los elementos de los sitios web. Por lo general, los elementos más importantes se presentarán para usarlos en un tamaño de fuente mayor, y los elementos menos importantes se presentarán utilizando un tamaño de fuente más pequeño. siguiente paso para enfatizar la importancia de los elementos de los sitios web es mediante el uso de diferentes tonos de gris. En la regla general se dice que los colores más oscuros significan mawr. Elementos importantes y colores más claros significan elementos menos importantes. Entonces así es como se ve un marco de alambre típico. Creo que es una buena idea tener tu propia biblioteca de marco de alambre para que puedas usarla siempre que estés diseñando un sitio web. El diseñador de afinidad te permite construir tus propios elementos de encuadre de alambre y ponerlos en grupos separados de activos. Echemos un vistazo al proceso de construir estos elementos en afinidad. Diseñador. 23. 8.2Construir tu propio marco de red en Designer: la hora de construir su propio sistema de marco de alambre, creo que debe comenzar con esos elementos que es más probable que esté utilizando en un escenario típico de diseño Web. Es decir, si quieres puedes un credo, todos los elementos que posiblemente puedas imaginar. Pero creo que si primero creas los elementos esenciales, tendremos una gran base para construir y expandir marcos de alambre. Pero, ¿cuáles son esos elementos esenciales? Creo que vamos a empezar con una marca en bloque una navegación, junto con un menú de hamburguesas, un héroe sección block presume, un texto horizontal y divisor de fondo. Icahn Sidebar y un pie de página. En estos días, podría ser una buena idea crear un cable de video desde elementos hasta por razones con las que ya estás familiarizado. Entonces construyamos nuestra biblioteca de marco de alambre esencial. Quiero que lo consideres como un punto de partida para construir tu propia biblioteca. Yo quiero que aprendas el proceso y la lógica detrás de él. Esto le permitirá crear sus propios marcos de alambre extensos. Tengo un sencillo documento full HD ya creado, pero honestamente, cualquier documento, letreros que me permitieran crear tu obra de arte cómodamente estará bien. Observe, sin embargo, que no he decidido crear un tablero de arte para este tipo de trabajos de bocetos. No creo que sea necesario un tablero de arte. También me aseguraré de que la U I Snap in preset Oriente se encienda. Empezaré con crear un bloque de imagen. Este se usará en muchos elementos, así que creo que es bastante lógico empezar con él. Simplemente agarraré la herramienta de rectángulo y crearé un rectángulo en el panel de transformación. Entraré 16 para con y 94 altura, y lo estoy haciendo porque la relación 16 por nueve es la relación de aspecto de pantalla más típica. Y las imágenes en un sitio Web generalmente se mostrarán de esta manera, igual que los videos. Por supuesto, es demasiado pequeño tubo utilizable, así que buscaré sus proporciones en el panel de transformación y aumentaré el tamaño fuera del rectángulo. Pero el hecho de que empezamos con los 16 por nueve píxeles hará que el nuevo oponente rectángulo ese 16 por nueve relación de aspecto. No quiero que tengamos ningún trazo, pero sí quiero tener un gris bastante más oscuro, Phil una vez que se haya creado, dibujaré dos líneas intersecantes que indicarán que a esto, en realidad es un elemento de imagen. Por lo que agarraré la pluma tal y lo pondré en el modo de dibujo de línea. Voy a alegrarme, Línea simple que va a tener un trazo blanco de un punto. Y no Phil, claro, bajaré la opacidad a alrededor del 25 al 30%. Por último, vamos a copiar la línea y basarla de nuevo en. Entonces volvamos horizontalmente, usando el panel de contexto. Todo lo que queda por hacer es traerlo a nuestra biblioteca de activos. Y por cierto, si no tienes la biblioteca de activos encendida, solo tienes que ir al View y luego estudiar y elegir activos en el panel de activos. Crearé una nueva categoría, que renombraré como marco de alambre. Ahora solo puedo seleccionar la imagen y desde el menú del panel elegir y de selección para empezar a construir su biblioteca. Y así, conseguimos el primer elemento creado, y ya empezamos a construir la biblioteca. Sigamos, sin embargo, en el siguiente video 24. 8.3Vamos a continuar construyendo la biblioteca: Empezaré por crear un elemento de anillo esposa de video. Y para eso clonaré el elemento de imagen y me desharé de las líneas interiores. Ahora vamos a crear un símbolo de botón de reproducción para eso. Agarremos su herramienta de triángulo y creamos triángulo que tendremos que rotar y volver a dimensionar un poco. Cuando eso esté hecho le dará un Phil blanco. Bajar la opacidad al 25% y alinearla con el rectángulo. Agrupemos a estos chicos para que ahora podamos agregarlos a nuestra biblioteca de marcos de alambre, igual que agregamos al elemento de imagen. Ahora vamos a crear un elemento combinado de imagen y texto. Nuevamente, reutilizaré la imagen que ya tengo, pero le añadiré un título y extraeré elementos. Para eso, agarraré la herramienta de texto marco y dibujaré un cuadro de texto que será como un Zweig como la imagen. No introduciré ningún texto, pero usaré la opción de insertar texto de relleno en su lugar. Por supuesto, es una buena idea hacer que el título parezca un título real, así que cambiaré la fuente junto con su tamaño y estilo. Lo clonaré ahora y cambiaré la familia de frente, estilo de Sonny y el líder también. Por lo que con esta parte puede parecerse más a un extracto de publicación de Blawg. El beneficio de crear este elemento de esta manera específica es que después de convertirlo en un grupo y luego en un activo y luego lo arrastre a la página, no puedo redimensionarlo y dejar que el software llene los marcos de texto con texto. Y aún así, si quiero, puedo cambiar el tamaño de los marcos de texto, hacer encoger o ampliar tanto el título como el extracto de texto, y eso es bastante útil. Siguiente elemento creará es que volverán a logotipo. Usaré el elemento de imagen, pero esta vez lo convertiré en un cuadrado. También añadiré una palabra en el lado derecho de la misma. Ahora voy a agrupar a estos tipos y los convertí en un activo. A continuación se creará un sistema de navegación. Bueno, eso es igual de fácil en una sola pieza de editor de texto, luego duplicarlo. Son divertidos de usar para el Manual Inc no deberían ser demasiado grandes ni atrevidos. También creemos un menú de hamburguesas. Y esas son esas tres líneas horizontales que cubren al hombre principal. ¿ Te acuerdas? Está bien, genial. Agarremos la pluma tal y luego asegurémonos de que esté en el modo de línea ha creado una línea simple que va a tener un dos puntos alguien a golpe oscuro y no Phil. Cuando eso esté hecho, duplicemos la línea dos veces y transformemos nuestro manual de hamburguesas en un activo. Nuestro próximo orden del día es crear una sección de héroes, y esto realmente nos dará la oportunidad de aprovechar una flexibilidad bastante grande a la hora de crear activos dentro de un diseñador. Estaba atascado con tomar prestado el activo de imagen y en grande, y bastante. A continuación, vamos a crear un encabezado grande y audaz escrito en contraste, en color claro, seguido de algún texto corporal más pequeño. El último acento aquí sería agregar un llamado a la acción. Entonces vamos a crear un botón usando la herramienta de rectángulo y la herramienta de tipo, por supuesto, que agrupará los elementos de botón y luego agrupará piezas viejas excepto el fondo pero una línea todo bien a la mitad de la imagen de fondo. Si sabemos agrupar todos estos elementos se debilitan, conviértelos en un elemento de marco de alambre de héroe, pero si los mantenemos separados, podemos ingresarlos a los activos por separado, lo que nos permite tener un activo de héroe y separar elementos como un fondo encabezando cualquier pieza fuera cuerpo gravado. Bueno, eso es bastante útil, ¿ no crees? Con todos estos elementos, ahora podemos crear un elemento de función. Se puede arrastrar el activo de imagen al tablero de pegar, luego el encabezado y su cuerpo gravados. Ahora es solo cuestión de apagar el elemento de imagen en un cuadrado y cambiar en el frente del encabezado y cuerpo gravado para hacer esto así mientras el elemento de marco funciona. - No , tenemos prácticamente todos los elementos que necesitamos para armar un marco de alambre de sitio web. Ocasionalmente, tendremos que utilizar la herramienta de rectángulo para crear un plano por concesión, y si lo desea, puede crear elementos de marco de alambre rectangulares. Pero me apegaré a los bloques esenciales y crearé fondos a medida que vaya. Entonces hagámoslo realmente. Echemos un vistazo a agregar alambre de elementos para crear una visión esquemática de nuestra página web 25. 8.4Cómo usar los activos para crear un marco de red de red: Una vez que se crean todos tus activos, están listos y esperando que los uses para construir tu marco de alambre. En este video, vamos a echar un vistazo a cómo usar prácticamente tus activos para crear un marco de alambre. El proceso es súper fácil y agradable. Te recomendaría usar una rejilla como base para tu marco de alambre. Es una buena idea simular un escenario de diseño web de la vida real al crear un marco de alambre. No obstante, si se trata de un marco de alambre muy, muy preliminar, si se quiere simplemente sacar la sensación del proyecto, no es absolutamente necesario usar la rejilla. Empecemos con la creación de la sección de encabezado. Traeré los bloques de Brandon y navegación y los posicionaré adecuadamente, dejando una cantidad bastante decente de espacio en blanco arriba y abajo. No, es crear rápidamente un fondo claro para nuestro sombrerero primero todos agrupan los elementos del encabezado e inicializaron la opción de inserción detrás de selección en la barra de herramientas. Ahora, cuando empiezo a crear un ángulo erecto que se extiende por toda la página, puede ver que se inserta detrás de los elementos más pesados. Lo último que habría que hacer sería alinear todo bien al grupo central todos los elementos y renombrarlos como Encabezado No. Entramos a la sección de héroes de la página web. Lo más probable es que este activo necesite un poco de afinación fina. Por ejemplo, tal vez quieras expandirte o contratarte. Quizás quieras cambiar la posición de los elementos y quizá el tamaño del teléfono también. El bello off para trabajar con activos en effin en diseñador es que puedes seleccionar fácilmente elementos dentro de grupos haciendo doble clic en ellos y cambiarlos en ellos como cambiarías objetos regulares. Empezaré la siguiente sección agregando otro encabezamiento y un subtítulo. Esos tipos también podrían necesitar algunos tuiteando, dependiendo de cómo los hayas creado antes. Podrían necesitar a su color de fondo para ser cambiados. Tamaño ajustado. A lo mejor vamos a querer cambiar la alineación de izquierda a centro ahí realmente flexible y en efecto. Si decides que es posible que los necesites en la biblioteca de activos de marco de tu esposa, solo puedes agruparlos y agregarlos al panel de activos. Sí, puedes crear diferentes activos fuera de los activos ya existentes. Nadie salta algunos artículos destacados. Crearé dos filas con cuatro elementos en cada uno de ellos Traeré uno de artículo destacado y lo modificaré hasta que se vea justo como yo quería. Y como quiero tener cuatro fuera de ellos en una fila, un artículo no puede exceder tres columnas de nuestra gran. Una vez creada, solo lo duplicaré intenta a la derecha y luego todos ellos una vez al fondo. Por último, seleccionaré todas las piezas, agruparé y dibujaré un fondo debajo de ellas, utilizando la misma técnica que con el fondo del encabezado. Ahora puedo cambiar el nombre de esta sección y llamarla algo así como destacados. Pero puedes nombrarlo cualquier cosa que haga que esta sección sea fácilmente reconocible. El siguiente apartado que podemos crear podría ser un de nuestro tipo blawg de sección. Entonces vamos a traer el encabezado de sección y ajustarlo para el bloque presume, podemos usar ya sea los artículos destacados, elementos o artículos blawg. Esta es sólo otra prueba de lo flexible que es este programa. Es decir, puedes agarrar el elemento destacado, hacer que la imagen vaya a la izquierda y el texto a la derecha mientras preservas int como activo. Yo quiero tener solo para bloquear presume en cada fila, por lo que una publicación no puede superar las seis columnas. También quiero tener que salirse de las jadas, así que sólo podemos clonar la esquina superior. - supuesto Por supuesto, como antes, podemos saber agrupar todas estas piezas y crear un fondo ligeramente más oscuro para la acción de bloques . Incluso podrías experimentar con poner elementos claros sobre un fondo oscuro, pero por ahora, lo mantendré simple. - La última parte que creará es el pie de página Sección. Los pies de página suelen tener un fondo distinto y son vacaciones bastante grandes. Podrán sostener el logotipo y el lema de la empresa. Algunos enlaces, entre ellos Social Media, Instagram de Ling's, feeds, extractos, etcétera. Esta vez comenzaré con crear un fondo más oscuro sobre el que colocaré los elementos del pie de página en el lado izquierdo. Añadiré el bloque de imagen que representaría el logotipo. Podría necesitar algunos ajustes de color, por lo que es fácilmente visible contra el fondo más oscuro Debajo de él. Añadiré algunos gravados que podría ser el sobre extracto de EU para alguna información adicional. decir, Esdecir,es sólo un marco de alambre, así que sólo estamos probando la colocación de ciertos elementos, no tratando de crear el diseño final. Crearé una variación de en instagram feed extract en el paseo, y lo construiré, usando el activo de imagen que puedo redimensionar ligeramente si es necesario, y crearé dos filas de imágenes aquí Debajo de él, yo agregará otra pieza de texto y algunos pequeños elementos de imagen que representan las redes sociales. Aiken. - La última etapa sería agrupar todos los elementos del pie de página y nombrar adecuadamente al grupo recién creado . Y ahí vamos. Creamos nuestro propio un marco de alambre. Quería mostrarte el proceso de construir un marco de alambre fuera de activos que puedes crear tú mismo. Solo imagina lo intrincados que pueden ser los marcos de tu esposa si solo pasas algún tiempo en diseñar activos de buen aspecto. medida que te conviertas en crear un marco de alambre, agregarás más y más elementos a tu biblioteca. Y pronto tendrás todos los elementos necesarios para crear y frames, con cero a poco ajustes necesarios. Pero si no tienes ganas de crear tus propias bibliotecas de marco de alambre, siempre puedes buscar algunas herramientas y el recurso está en línea. Tienen sus limitaciones, pero es buena idea saber cómo funcionan y comprobar. Si quieres usarlos en tu propio flujo de trabajo de diseño Web, y los exploraremos a continuación 26. 8.5Wireframing en línea: Hay muchas herramientas, y el recurso está en línea que puedes usar para construir tus propios marcos y prototipos de esposa. El problema con ellos es que la mayoría de los que tienes más probabilidades de encontrar son pagados . Tienen algunas capacidades gratuitas limitadas. Pero para descubrir su verdadero potencial, hay que pagar en la mayoría de los casos, una cuota recurrente. Ahí hay uno. Hasta que tal vez quieras echar un vistazo al que se llama wire frame dot cc, y te permite construir rápidamente prototipos fuera de sitios web. Si quieres usarlo, recomendaría empezar por cambiar algunos ajustes. En primer lugar, puedes optar por mostrar una arena de 12 Colin, que siempre es una buena idea, y en segundo lugar, te recomiendo cambiar el ancho y la altura del marco de alambre en la parte inferior de la pestaña de ajustes. El único que tienes que hacer para empezar a construir una esposa desde aquí es empezar a dibujar. En la herramienta se te mostrará una caja de opciones para elegir. Puedes convertir tu dibujado en un cuadro dext imagen lista párrafo, etcétera. Puedes agrupar los elementos que creaste e incluso arreglarlos correctamente si es necesario. Un inconveniente importante del taburete que solo parece completamente libre es que para compartir o bajar con tu esposa marco, tendrías que apuntarte a su servicio. Y si quieres hacer eso serán mis invitados. Pero hay otras formas de acelerar el marco de alambre en proceso. Si Google plantillas de marco de alambre gratis, encontrarás mucho fuera de marco de alambre libre. El recurso es descargar y utilizar en sus propias bibliotecas de marco de alambre. Es decir, si no tienes ganas de construir la tuya propia, realidad echemos un vistazo a crear una biblioteca de marco de alambre a partir de esos elementos listos antes de que empecemos. Creo que vale la pena manejarlo en que si el archivo que has descargado es un archivo PSD, te alegrará descubrir que abrirlo es un pedazo de pastel para diseñador. Aunque sea un archivo ilustrativo. Ofendido, el diseñador lo abrirá sin un segundo de vacilación. La mayoría de estos repositorios listos para hacer un marco de alambre contendrán elementos que puede usar para construir sus propias bibliotecas. Podrás grandes los que te gusten y los hace juntos para aturdidores. Agarra el panel de activos y crea una nueva categoría. Cambie el nombre a su gusto. Pero gracia nombre algo descriptivo. No. Se puede sólo un arrastrar y soltar los elementos que necesita y les gusta a la biblioteca para que pueda utilizarlos más adelante. Por supuesto, todo este proceso es opcional. Es decir, si quieres, solo puedes dejar el archivo tal cual y copiar y pegar los elementos que necesitas a tu archivo de marco de alambre. Eatherly funciona, y será tu tarea decidir cuál se adapta a tu bateador de flujo de trabajo específico. Yo, sin embargo, recomendaría sin embargo, usar el panel de activos ya que siempre puedes mantenerlos a mano en tu espacio de trabajo, y no tienes que buscar esos mientras específicos de archivos de marco de alambre. Entonces creo que tenemos el marco de alambre y la materia bastante bien cubierta. Podemos pasar a otro aspecto importante fuera de prepararnos para empezar a diseñar, que es elegir y optimizar imágenes, y yo viene 27. 8.6Hablemos de imágenes e íconos: es difícil imaginar un sitio web sin imágenes y otros elementos gráficos. Es cierto hay algunos diseños que utilizan la tipografía Onley, pero son proyectos muy, muy neech. Es probable que en tu carrera como diseñador Web, estés usando imágenes en tus proyectos y las estés usando mucho. Es esencial saber cómo manejarlos en tus diseños. Entonces, vamos a explorar el tema ahora. La forma más fácil de agregar una imagen en afinidad. Se dice que el diseñador usa el lugar. Herramienta de imagen. Una vez que lo golpees, se te pedirá que selecciones una imagen que deseas colocar. Es un, por cierto, mismo que elegir el comando de lugar desde el menú del archivo. Si estuvieras usando una versión más antigua fuera de ilustrador antes de dar a los diseñadores tiro, probablemente te hayas frustrado mucho silencio siempre que quieras que recorte una imagen porque , bueno, no había donde podrías hacerlo sin usar una máscara de recorte. Un diseñador de muebles viene con un cultivo factorial. Será que puede recortar imágenes de manera fácil y rápida. Todo lo que tienes que hacer es agarrar el cuadro delimitador por cualquiera de sus bordes y simplemente arrastrar. Pero eso no es todo lo que puedes volver a colocar libremente la imagen dentro del nuevo cuadro delimitador, y una vez que estés contento con la operación, puedes simplemente asegurar rápidamente solo esta imagen usando la función de exportación en el Aquí. Puedes elegir con qué formatos de archivo quieres ir, pero te recomendaría apegarte a los archivos. Antiguo nativo. decir, si es una selección J, solo elige J. Pick y tal vez baje la calidad a alrededor del 75%. Este será un buen límites entre un tamaño de archivo razonable y una buena calidad de imagen. Solo recuerda elegir selección sin fondo ya que el área en la que deseas exportar cuando estén listas las imágenes más antiguas, te aconsejo que las comprimas aún. Es extremadamente importante para la velocidad general de la página, lo que afecta la búsqueda y optimización en palabras simples Me gusta de Google. Cuando las imágenes en la página están muy bien optimizadas, hay muchas herramientas online fuera que pueden ayudarte a optimizar tus imágenes. Acerca del que más tiendo a usar se llama minúsculo J p g dot com para aprovechar sus capacidades de compresión. Simplemente dragón imagen en la ventana y letra esa herramienta hace su magia. Ahora hablemos brevemente de lugares de la Web donde puedes encontrar imágenes de buena calidad de forma gratuita. Yo he estado Es una situación perfecta cuando tu cliente quiere pagar por imágenes de stock. Pero por suerte hay repositorios en línea con buenas imágenes gratuitas que puedes sugerir como alternativa . Mi lugar favorito para fotos de stock gratis es el cartel llamado pixels dot com. Se trata de una gran fuente de fotos sacadas de otros repositorios de fotos de stock, por lo que no necesitas navegar por todos y cada uno de los servicios de fotos STOCK para encontrar imágenes que estás buscando. Simplemente ingresa la palabra clave que necesitas y elige entre decenas de imágenes de alta calidad. En cuanto a Aikens, Onley tienden a usar el icono plano dot com al más. Es un gran sitio web de forma gratuita para usar iconos de alta calidad para tu proyecto de diseño Web. Cuando encontraste una Nikon, te gusta. Puedes ponerlo en una colección o previsualizarlo, y si lo deseas, puedes descargarlo en este lugar por consejo. Escoger s v. G. En cuanto al tipo de archivo. Se trata de un tipo de archivo de factor estándar que funcionará muy bien en cualquier tipo de aplicación de diseño. También visito gratis pick dot com, que es un enorme repositorio fuera de todo tipo recurso de diseño es imágenes, iconos. Pia es estos vectores, etcétera. No, sin embargo, que algunos de ellos se les paga. Entonces así es como se puede trabajar con las imágenes dentro de fit in designer. Por supuesto, medida que pasemos a la parte de diseño del curso, verás algunos ejemplos de la vida real fuera del manejo de imágenes en un escenario de diseño Web. Por ahora, solo quiero que recuerden que se pueden importar con la herramienta de imagen de lugar. Los vas a recortar con la herramienta de recorte factorial, y puedes exportarlos usando el comando de exportación. Pasemos ahora a la última parte de la etapa de preparación, que es crear estilos de texto. 28. 8.7Cómo crear estilos de fuente en Affinity Designer: estilos de texto en diseñador ofendido son una gran manera de acelerar un proceso de diseño Web. Si eres un fan off, cambia los conjuntos de fuentes demasiado rápido. Vista previa de diferentes variaciones de tu diseño. Te encantarán los estilos de texto. Cómo crear un estilo de texto basado en las características de una pieza de texto que ya has escrito. Simplemente selecciona ese texto y luego dirígete al panel de estilos de texto y elige ese estilo que deseas crear. Contar con un cuadro de diálogo que aparece de inmediato permite ajustar todas las opciones de carácter y párrafo a las que se puede acceder desde los paneles de carácter y párrafo. Lo mejor es empezar por ingresar el nombre de los estilos, y sugeriría hacerlo algo descriptivo. Tu estilo de texto se mostrará en el panel Estilos de texto, por lo que dado a él un nombre fácilmente distinguible hará que el proceso de diseño sea más rápido. Una buena técnica de producción es nombrar tu estilo en base a sus características más importantes. Si, por ejemplo, desea que el estilo de texto utilice el fondo Roboto Condensed, tenga ah, sólo los caracteres verdes que tengan 32 puntos de tamaño pondrán esa información como el nombre del estilo de texto . Cuando termines tu texto, estaré listo y esperando que lo apliques a cualquier pieza de texto que desees. El proceso de creación de estilos de texto en Afinitor designer es realmente flexible. No es absolutamente necesario tener a algunos previamente creados gravados para crear un estilo de texto fuera de él. Simplemente puedes presionar cualquiera de los botones de estilo de texto nuevo saludo en el panel de estilos de texto y elegir su tipo de deseo de la lista. Y si necesitas cambiar algunas cosas sobre tu estilo de texto, pero debías conservar el original, lo mejor es simplemente duplicar y duplicar el estilo de texto, haz clic derecho sobre él y elige duplicar. Aparecerá el mismo cuadro de diálogo donde podrás ingresar los ajustes que ish sin un hecho en el estilo de texto original. Por defecto, el estilo de texto duplicado obtendrá un Suffolk numérico. Entonces de nuevo es una buena idea empezar con cambiar su nombre para eliminar un estilo de texto click derecho sobre él y elegir, eliminar o presionar la basura que consideré en la esquina inferior derecha del panel. Crear y administrar estilos de texto en Afinitor designer es un proceso sencillo, y por eso es soleado en estilos de texto a tu texto. Seguro que una vez que comiences a crear mucho fuera de diseños de sitios web, los encontrarás esenciales en tu día a día. Estilos de texto rutinarios concluyeron esa etapa de preparación del proceso de diseño Web. Ahora tienes los conocimientos sobre todas las herramientas y técnicas que son esenciales para diseñar un sitio web en afinidad Diseñador. Entonces empecemos la parte de diseño. 29. 9.1Descripción de la parte de diseño: bienvenido al diseño de parte del curso. En los próximos videos, aprenderás a diseñar esta página de aterrizaje usando afinidad, diseñadores, herramientas, técnicas y algunos trucos. Pero antes de saltar al diseño y al proceso de diseño, permítanme descomponer rápidamente este proyecto por ustedes. Entonces aquí arriba, se puede ver el encabezado, y llegamos al logo de la izquierda que básicamente son solo algunas letras, un trozo de texto con las INT de Grady agregadas a ella. Y cuando estaremos creando este solo, aprenderás a agregar ingredientes a la vida Fondo a la vida. Texto en afinidad Diseñador a la derecha. Nos dieron la navegación junto con em bateó un íconos de redes sociales. Estos chicos de aquí son todos como archivos V g, y pronto aprenderás a en mal como V g rápido, como estos iconos sociales y cómo trabajar con ellos dentro de un sentimiento al diseñador debajo del encabezado que llegamos a esta sección de héroes aquí mismo, esta gran imagen en el fondo, con algún pequeño rectángulo siendo puesto sobre su para hacer esta imagen un poco más oscura. Nosotros, por supuesto, tenemos esta gran pieza de tipografía aquí mismo. Y sacamos esta pequeña pieza de un deslizador. Navegación. Es decir, pensé que si alguna vez quieres crear un deslizador para tu para tus diseños es una buena idea alertar cómo crear una pequeña navegación para una sección de deslizador. A continuación, conseguimos otra sección con estos artículos destacados aquí mismo. Por supuesto, antes de eso, conseguimos este gran divisor con algún encabezado de sección y algún texto de subtítulos y llegamos a estos iconos de ayuda aquí mismo, divididos en dos filas. Y para columnas aquí mismo dejé el texto al mismo para todos y cada uno de estas piezas. Las piezas fuera de los artículos destacados porque pensé que, um, ya sabes, teclear todo en ah tipo en palabras nuevas frases serían simplemente redundantes. Eso acabo de copiar el texto y luego simplemente reemplazarlos thes iconos Y esos dos igual que los iconos aquí en el encabezado. Son dos. Son como elementos v g incrustados en este documento. Por lo que de nuevo aprenderás a incrustar como V g m iconos como estos en un documento de diseñador infinito . A continuación nos dieron otra sección que sería como un divisor entre los artículos destacados y bueno, la siguiente sección que viene justo aquí. Como se puede ver que una gran imagen a la izquierda y nos dieron algunos simples gravados a la derecha con un fondo oscuro. Esto es otra tal vez no toda una tendencia, sino una tendencia pieza off y eso es que está usando el diseño Web en este momento. O sea, dividiendo toda la página en dos secciones y poniendo algo bien, bueno, una imagen en un lado y alguna otra pieza. Bueno, pedazo de texto del otro lado. Bueno, esa es solo una de las tendencias del diseñador en este momento. A continuación llegamos a algo así como a de nuestra acción de bloques. Así que creé una sección más ligera aquí mismo con un fondo más claro. He agregado algunas imágenes de la izquierda y estos chicos, ya que puedes ver nuestras plazas y agregar estas imágenes nos permitirá aprender otra técnica fuera para trabajar con imágenes en el interior. Si en diseñador con estos chicos, esta imagen aquí mismo, esta gran imagen en la sección de héroes. Bueno, estos tipos iban a estar usando la herramienta de cultivo factorial. Pero con estos chicos, bueno, vamos a usar Bueno, es una técnica ligeramente diferente en la creación de imágenes perfectas para tu imagen bien destacada en bloque poste para tu bloque Publicar extractos como estos chicos aquí mismo. Entonces conseguimos algún tipo como un feed de instagram que quería. Yo quería que pareciera una fuente de instagram. Y en realidad aquí aprenderemos a agregar imágenes y a usar máscara de recorte en el interior, ofendiendo al diseñador. Y esta será otra, creo, creo, tercera vía técnica usando imágenes dentro de un diseñador de muebles. Es decir, te prometí que si bien una vez que lleguemos a la parte de diseño del curso, aprenderás a usar prácticamente imágenes dentro del diseñador de afinidad al diseñar sitios web. Y estas tres técnicas, creo que será un think va a satisfacer tu hambre de por técnicas de manejo de imágenes . A continuación, tenemos un pie de página justo aquí que, como puedes ver, tiene un color de fondo completamente diferente, completamente diferente. Yo quería hacer que realmente contrastara en. Yo quería que destaque en este diseño y conseguimos las tres secciones con algunas con algunos enlaces y algún texto aquí mismo. Y por supuesto, estas líneas divisorias, líneas horizontales y todo el diseño lo acaban con el pozo, una repetición de nuestra de nuestra cabecera, pero es mucho más pequeña. El logotipo es más pequeño, la navegación es más pequeña y todo el fondo Sombrerero también es más pequeño. Entonces supongo que podríamos empezar a diseñar. Pero antes de empezar a diseñar, tendremos que echar un vistazo a los activos que tenemos a nuestra disposición. Tendremos que crear algunos estilos de texto para facilitar nuestro trabajo. Tendremos que crear algunas muestra de color también, y tendremos que echar un vistazo a nuestras imágenes y vengo para que sepamos lo que tenemos a nuestra disposición y lo que estaremos usando dentro de este diseño. Entonces, en realidad echemos un vistazo para echar un vistazo a cómo el dedo del pie se prepara para diseñar un sitio web como este 30. 9.2crearemos los muestras de color: El documento que vamos a estar usando para nuestro diseño es exactamente el mismo documento que creamos cuando estábamos aprendiendo sobre la grit de 12 columnas. Pero no es sólo la arena que vamos a estar usando para hacer que este diseño suceda. También son algunos colores, topografía, iconos, imágenes, todo lo bueno que necesitamos para hacer de ella la página web del diseño suceda. Entonces déjame esconder la grilla por un segundo y déjame traer a estos tipos. Como pueden ver, tengo cuadrados de colores de canción justo aquí, y tengo un fondo oscuro aquí abajo. Por lo que las plazas van a ser una base para nuestras muestra de color. Y aquí abajo tengo algún fondo oscuro que en un segundo va a estar bien poblado con alguna tipografía. Y hice oscuro este fondo porque, como se puede ver en el diseño original, mayor parte de nuestra tipografía aquí mismo es un relleno con con un color off wide. Entonces creo que simplemente sería más fácil para ti ver ese color blanco apagado contra un fondo más oscuro fuera de curso, también tenemos algunas piezas de texto más oscuras una más oscuras, pero nos encargaremos de estos tipos más tarde, así que estoy va a empezar con la creación de una nueva paleta Swatch. Entonces, como se puede ver aquí en el panel de muestreos, podemos elegir anuncio será ya sea aplicación o una paleta de documentos. El diferencia entre estos dos chicos es que si agregamos una aplicación de paladar, estarán disponibles las muestra de color. Y cada vez que crees en tu documento, y si solo agregas una paleta de documentos, este grupo de muestreas de color estará disponible en Lee con este documento específico. Entonces, en realidad, voy a crear sólo una paleta de documentos así como así. Y como se puede ver por defecto es, hace frío. Bueno, en realidad, es Se llama al nombre, así que es Es para que no esté realmente frío. Entonces voy a renombrar esta paleta, y le voy a nombrar algo así como, Tal vez nos creó. Este es el nombre del sitio. Pongámoslo así ahora. El conjunto parte sobre crear los colores por dentro, si en diseñador desde plaza existente para que puedas tener, es que tienes que hacerlo uno por uno, así que no puedo simplemente agarrar a todos estos tipos y solo tal vez, como, ponlos aquí o elige algunos, elige alguna opción del menú para agregar a todos estos chicos una muestra separada. Desafortunadamente, hay formas de crear llamadas a partir de todo el documento. Pero como tenemos un Grady int te ordenar aquí mismo, bueno, gran relleno, si en el mundo del diseñador agregaría mucho diferentes los colores que están entre la izquierda , parte de la tía abuela y la parte derecha de lo grande, y nosotros realmente no quiero eso Queremos solo simples colores swat. Entonces voy a agarrar este primer relleno radiante aquí mismo. Y simplemente voy a hacer clic en este icono de la paleta que dice en Phil al paladar, igual que así voy a estar voy a añadir todos estos colores restantes a mi paleta de muestreos , así como así. Y una vez que haya terminado, tengo mis muestra de color que se llaman Creado, y puedo utilizarlas dentro de este documento. No, claro que ya no necesitaré estos rectángulos. Yo sólo puedo borrarlos. Y ahora, si solo creo un pozo es simple rectángulo. Puedo usar cualquiera fuera de mis colores igual que así Ok, entonces ahora que tenemos nuestros colores creados, ahora podemos pasar a crear los estilos de texto que vamos a estar usando para nuestro diseño . Y como puedes ver, ahí está lo que muchos colores diferentes significarán que colores pero estilos pasando aquí mismo . Pero creo que podemos empezar a crear los textiles en el siguiente video. 31. 9.3y crearemos los estilos de texto: este diseño fuera de curso se vería bastante triste si no tuviera muchas imágenes e iconos. Por lo que preparé algunas imágenes para ti. Y por supuesto, los encontrarán bien en una carpeta que vincularé a Teoh dentro de este pozo, la descripción del curso. Entonces si quieres seguir adelante solo para echar un vistazo a esa carpeta y descargar todos los elementos y todas las piezas que allí encontrarás. Por lo que hasta donde van las imágenes donde tenemos las imágenes del extracto blogger justo aquí, estas pequeñas plazas también tenemos estas imágenes de feed de instagram y también tenemos algunas imágenes más grandes para nuestra sección héroe. Entonces si quieres ir con otra imagen, no quieres ir con la que usé puedes elegir. Elígela desde aquí. Ahora estaremos agregando estas imágenes usando la herramienta de imagen de lugar y lugar aquí mismo. No obstante, cuando se trata de iconos, los vamos a estar agregando de una manera un poco diferente. Pero lo haremos Llegaremos a eso en tan solo un segundo. Entonces mis iconos están sentados en esta carpeta servicios Así que estos son todos estos iconos aquí mismo . Y también tengo iconos de redes sociales. Ahí están estos tipos aquí mismo, y no vas a estar usando el mando del lugar ni nada por el estilo. Simplemente vamos a estar arrastrando todos estos iconos a nuestro diseño. Pero como te darás cuenta en tan solo un segundo. Es y es fácil, pero habrá algunos. Tendremos que hacer algunas cosas sobre estos iconos estos incrustados. Y esa es la palabra clave aquí. Había incrustado Aiken's Vamos a un arrastre sobre el documento, pero eso va a pasar en un solo segundo. Empezaremos su proceso de diseño. Permítanme pasar al diseño principal. Empezaremos el proceso de diseño con la creación del logotipo aquí mismo. Por lo que aprenderás a agregar realmente ellos y los grandes y cayeron a tu bien pedazo de texto pedazo de impuesto vitalicio. Porque si solo agarro el textil artístico, si quieres, aún podemos cambiar algunas cosas al respecto. Podemos distanciar apóstrofe y sólo escribir e. Y aún así este ingrediente está siendo Ah se les ha aplicado al impuesto, y se está actualizando sobre la marcha. Pero voy a dejarlo salir, dejar el vivo el apóstrofe en. Y sin embargo creo que podemos pasar a crear, a crear en nuestra primera pieza de diseño, que será este logo. 32. 9.4htemos a las imágenes e íconos: este diseño fuera de curso se vería bastante triste si no tuviera muchas imágenes e iconos. Por lo que preparé algunas imágenes para ti. Y por supuesto, encontrarán bien a estos chicos en una carpeta que vincularé a Teoh dentro de este pozo, la descripción del curso. Entonces si quieres seguir adelante solo para echar un vistazo a esa carpeta y descargar todos los elementos y todas las piezas que allí encontrarás. Por lo que hasta donde van las imágenes donde tenemos las imágenes del extracto blogger justo aquí, estas pequeñas plazas también tenemos estas imágenes de feed de instagram y también tenemos algunas imágenes más grandes para nuestra sección héroe. Entonces si quieres ir con otra imagen, no quieres ir con la que usé puedes elegir. Elígela desde aquí. Ahora estaremos agregando estas imágenes usando la herramienta de imagen de lugar y lugar aquí mismo. No obstante, cuando se trata de iconos, los vamos a estar agregando de una manera un poco diferente. Pero lo haremos Llegaremos a eso en tan solo un segundo. Entonces mis iconos están sentados en esta carpeta servicios Así que estos son todos estos iconos aquí mismo . Y también tengo iconos de redes sociales. Ahí están estos tipos aquí mismo, y no vas a estar usando el mando del lugar ni nada por el estilo. Simplemente vamos a estar arrastrando todos estos iconos a nuestro diseño. Pero como te darás cuenta en tan solo un segundo. Es y es fácil, pero habrá algunos. Tendremos que hacer algunas cosas sobre estos íconos estos incrustados. Y esa es la palabra clave aquí. Había incrustado Aiken's Vamos a un arrastre sobre el documento, pero eso va a pasar en un solo segundo. Empezaremos su proceso de diseño. Permítanme pasar al diseño principal. Empezaremos el proceso de diseño con la creación del logotipo aquí mismo. Por lo que aprenderás a agregar en realidad ellos y los grandes y cayeron a tu bien pedazo de texto pedazo de impuesto vitalicio. Porque si solo agarro el textil artístico, si quieres, aún podemos cambiar algunas cosas al respecto. Podemos distanciar apóstrofe y sólo teclear e. Y aún así este ingrediente está siendo Ah se les ha aplicado al impuesto, y se está actualizando sobre la marcha. Pero voy a dejarlo salir, dejar el vivo el apóstrofe en. Y sin embargo creo que podemos pasar a crear, a crear en nuestra primera pieza de diseño, que será este logo. 33. 9.5crearemos el logotipo en primer tiempo: Entonces, empecemos ese proceso de diseño creando un logotipo de ese. Pero primero, sólo voy a esconder la arena. No lo necesitaré justo ahora, pero voy a crear una nueva capa que voy a renombrar A y lo voy a llamar, um, encabezado, así. Y voy a agarrar la herramienta de texto artístico y simplemente voy a teclear en create hizo igual So Ahora la diversión que estamos usando es, bueno, nuestra principal para seguir encabezando teléfono, que se llama pista, como ya sabemos. Pero claro, no queremos que sea esta luz. Es decir, cuando creamos, si creamos un fondo más oscuro, claro que podríamos ir con este color claro, pero quieres añadir un Grady para hacerlo. Y como tenemos esta muestra aquí mismo, esta llena esta gran info, simplemente podemos agregar a nuestro texto. obstante, si no tienes una gran y genial en la muestra aquí mismo, simplemente puedes seguir adelante y activar el filtro. Y aquí en donde puedes ver tipo, puedes usar sólido, que sería un color simple cualquier color que quisieras así. Pero también puedes elegir ingrediente lineal, ingrediente elíptico, radial, cónico o incluso podrías agregar un mapa de bits a tu local, pero eso sería extraño para un para un logo en un sitio web. Entonces simplemente voy a elegir lineal así. Y como pueden ver, ya tenemos esto. Basta con acercar un poco. Tenemos este deslizador Grady int Grady int int aquí mismo. Y si quieres cambiar los colores del genial y slider, simplemente puedes dar click en este y este cuadro aquí mismo y puedes cambiar los colores de tu Grady int off your Grady en paradas. Entonces tal vez eso es elegir algo así y aún más oscuro. Es decir, puedes jugar con él toda una tarde y solo puedes hacer clic y cambiar la dirección del deslizador así como así. No obstante, como dije, simplemente voy a usar esta muestra Grady int aquí mismo, y voy a hacerla significativamente más pequeña ahora. Voy a traer de vuelta a migrante solo para poder ver qué estoy haciendo aquí mismo. Y voy a mover mi logo aquí arriba. Voy a colocarlo en contra a mi columna de izquierda a izquierda. Pero esta primera columna de aquí y voy a aumentar el tamaño. Veamos 36 tal vez, y va a haber un poco demasiado grande. 28 debería estar bien, así como así. Por supuesto que podemos. Siempre podemos cambiarlo a más tarde si no fuera así. Ahora que tenemos nuestro logotipo, solo muéstrale rápidamente cómo se ve en este momento que tenemos nuestro logotipo que en realidad podría necesitar algún tratamiento que pudiera recibir. Podríamos querer extenderlo solo un poquito demasiado en alguna parte de aquí. ¿ Por qué no? Entonces ahora que tenemos el logotipo, podemos pasar a crear la navegación e incrustar nuestros primeros Aikens, esos iconos de redes sociales que acabamos de ver en el video anterior. De hecho dejemos realmente el logo por un segundo y luego pasemos a crear su navegación 34. 9.6lecemos los enlaces de menú: en este video, vamos a empezar a construir esa navegación fuera de nuestro sitio web. Y en realidad es tan fácil como simplemente agarrar el textil artístico, hacer clic y dragón y escribir algo así como calmar y enlazar. ¿ Por qué no? Puede ser. Ya se va a leer Manual Inc. Están al frente. Ahí van voy a estar usando está bien, es el mismo fondo que el logo. Entonces, ¿es Hinde? Por supuesto. Yo quería ser significativamente más pequeño. Tal vez 18 o tal vez 20. Ya veremos en tan solo un segundo. Por supuesto, quería tener un color diferente, y quería que me escribieran en todas las mayúsculas. Entonces voy a ir al panel de personajes y aquí puedo cambiar lo que quiera de este texto. Bueno, sobre esto Bueno, tenía el ítem de navegación de esta cosa. Entonces primero voy a cambiar el color de este Grady int. Voy a elegir mis muestras, y va a ser este color claro, así como así, y la palabra que lo puedes ver ahora mismo. lo vamos a arreglar en tan solo un segundo. De acuerdo, así que ahora voy a dar clic a este abajo todas las mayúsculas justo aquí. Entonces Ahora tenemos nuestra tinta manual escrita usando Onley, las viejas tapas, el pozo, el todo gorro CIA. Ahora construyamos a todo el sistema de navegación Bueno , por más fácil que sólo puede ser. Es decir, déjame simplemente cerrarlo. Es decir, simplemente podemos mantener presionada la tecla de control y mantener presionada la tecla de turno para constreñir la proporción y debilitar solo colonia a este tipo a la derecha. Y ahora, si solo presionas control, j debilita duplicar la última transformación de la cual estaba copilando solo estaban afrontando y ah, y moviéndose. Entonces conseguimos 12345 ings manuales igual que así. Y sé que probablemente no lo estés viendo demasiado bien para claramente. Por eso sólo voy a agrupar a estos tipos y que los voy a agrupar junto con el logo, así como. Y ahora si solo hacemos click en este inserto detrás de la opción de selección con la que ya estamos familiarizados y ahora solo agarrar la herramienta de rectángulo que simplemente alejar un poco. Y ahora si solo creamos un rectángulo, lo vamos a crear en la parte inferior. Esto debería estar bien. Podrías hacerlo más grande. Puedes hacerlo más pequeño. Te lo voy a dejar a ti. Voy a dejarlo así. Y por supuesto, quiero haber querido tener un tipo diferente de ah diferente color relleno, color este color más oscuro. Y espero que ahora mismo puedas ver todo con claridad. Pero claro que ya no quiero que estos tipos se agruparan, así que sólo voy a agruparlos. Pero también voy a agrupar a estos tipos porque ahora mismo quiero asegurarme de que las distancias entre estos enlaces estos ítems aquí mismo sean iguales. Entonces voy a comprar turno, click, y voy a seleccionar todos ellos, así como así. Y desde la pestaña de la línea A, voy a elegir a este tipo de aquí que dice espacio horizontalmente, así como así y que voy a golpear. De acuerdo, entonces ahora puedo estar seguro de que en estas distancias son iguales. De acuerdo, entonces ahora que sé que todas estas distancias aquí mismo son iguales, simplemente puedo seleccionar a todos estos tipos y agruparlos de nuevo, así como así. Por lo que nuestro próximo orden del día sería agregar los iconos de las redes sociales aquí a la derecha. Y como mencioné antes, vamos a incrustar los documentos como V G dentro de este documento. Ahora podría sonar como si fuera complicado, pero realmente no lo es, pero en realidad hay algunas cosas que 35. 9.7Letremos con íconos de redes de redes sociales: Entonces, como pueden ver, he abierto a la carpeta donde guardo mis imágenes. Por lo que estos 1234 iconos están listos y esperándome aquí mismo. Entonces la forma más fácil de simplemente agregar e incrustar un documento dentro de otro documento aquí, suficiente en diseñador, especialmente Aiken. Documentos como estos. Es el solo agarrarlo y simplemente colocarlo aquí dentro, dentro de esta ventana. Ahora puede sonar Ah, bueno, puede parecer que es un súper súper fácil, y agregar, realidad es pero cambio en este ícono cambiando su color Bueno, eso no es tan sencillo. Es decir, podrías Bueno, podrías pensar que lo único que se necesita es simplemente agarrar, agarrar este ícono y simplemente cambiar su color de relleno a algo diferente. Al igual que así. Pero como se puede ver bien, en realidad, no está pasando nada. No puedo cambiar para llenar. No puedo agregar el trazo cerca de este ícono. Como se puede ver, realidad no está pasando nada. No lo estoy haciendo más grande. No voy a cambiar el trazo. ¿ Y por qué es este hap? ¿ Por qué no puedo? ¿ Por qué no puedo cambiar nada? Cualquier cosa sobre esto puedo Bueno, eso es en realidad porque es un documento incrustado. diseñador de Afinitor está considerando a este tipo de aquí como solo una representación fuera del original. Entonces no lo eres en realidad. Bueno, estás tratando de afectar a este ícono porque podrías pensar que esto en realidad está bien, el original, pero no lo es. El original sigue sentado eso en otro lugar. Y la forma más fácil de llegar a ese original es haciendo clic en esta opción de documento agregado aquí mismo . Y en cuanto hagas eso, puedes verlo. Affinity Designer acaba de abrir este documento en una nueva ventana. Como puedes ver, dice incrustado aquí mismo. Por lo que ahora podríamos simplemente agregar el color de relleno a nuestro documento a nuestro yo vengo en este caso. Y pero como pueden ver, aquí no tenemos nuestra paleta de colores. Sólo lo tenemos en este documento porque lo creamos como paleta de documentos y no lo tenemos ni siquiera en un documento algo virtual y el dinámico aquí mismo. Pero eso definitivamente no es eso definitivamente no es algo que podamos manejar. Entonces simplemente voy a ir a mi documento original y en el panel de muestras, voy a elegir paleta de exportación. Voy a dejar el nombre como está Click Save. Y luego cuando vuelva al documento embebido, ahora puedo elegir paleta de importación, y podríamos elegirla como aplicación de palet. Por qué no que simplemente voy a elegir a este tipo. Doble clic en él. Y como pueden ver, tenemos nuestro paladar justo aquí y ahora podemos elegir ahora esta luz llena igual. Y ahora cuando volvamos, ni siquiera podemos cerrar a este tipo ahora mismo. Y ahora cuando volvamos a nuestro documento, se puede ver que tenemos a nuestro tipo nuestro Aiken creado aquí mismo. Se cambió el fondo y a pesar de que aquí en el panel en panel de tostadas así demuestra que tipo de como tiene un trazo y relleno aplicado. Y como puedes ver, la cabeza espera, Son colores diferentes a esta llamada de Phil. ¿ De verdad se llama esto? Eso se está aplicando a nuestro a nuestro y yo puedo. Entonces ahora solo podemos hacerlo más pequeño, ponerlo en algún lugar aquí contra nuestro fondo más oscuro y hacerlo aún más pequeño que este. A lo mejor no tan pequeño. Algo así debería hacer creo que debería estar bien ahora, fin de acelerar el proceso, debilitar Simplemente clone a este tipo a la derecha. Estoy sosteniendo turno y control así. Y ahora puedes usar esta opción de reemplazar documento aquí mismo. Y si elijo tal vez Instagram. Estoy cambiando este documento. No obstante, no estoy sumando lo mismo. El mismo collar lleno a mi a mi voluntad Aiken. Entonces otra vez tengo que ir a documento agregado y tengo que ir a muestras de color creadas y voy a cambiar eso igual. Y ahora si solo hacemos clic en el control J, podemos clonar a ese tipo y moverlo a la derecha. Al igual que otra vez, Reemplazar documento. Elígeme a mí. Twitter en este momento volvió a agregar el documento. Elegir el color apropiado apropiado así. Entonces como puedes ver, el tamaño sigue siendo el mismo. Pero el auto lamentablemente no está cambiando para nosotros otra vez. Podemos clonarlo a la derecha. Reemplaza el documento esta vez con el Pinterest vengo ahora podemos editarlo, cambiar el collar y simplemente podemos cerrarlo, así como así. De acuerdo, entonces ahora podemos asegurarnos de que las distancias entre estos ings manuales sean las mismas que las distancias entre ings bien manuales e iconos de redes sociales y entre estos iconos de redes sociales . Entonces simplemente voy a en grupo estos enlaces manuales y luego simplemente voy a agregar a la selección estos chicos aquí mismo, algunos turnos pinchando sobre ellos. Y ahora si elijo espacio para Izon Tole y hago clic en Aceptar, debilita hacia abajo. Ahora podemos estar seguros de que todos estos tipos están espaciados uniformemente. Entonces ahora podemos simplemente agruparlos, moverlos a la derecha si hecho debilitar tal vez incluso una línea de a nuestro a nuestra grilla y luego simplemente moverlos arriba en algún lugar aquí ahora solo podemos amigo de este logotipo abajo un poco para asegurarnos de que la línea bien. Y ahí vamos. Tenemos el encabezado creado. Podemos, por supuesto, quizá mover a este tipo un poco hacia abajo. Por supuesto, tal vez puedas hacer que las distancias entre todos estos chicos sean más grandes si quieres. Bueno, eso depende totalmente de ti. Pero el último negocio que quiero hacer aquí mismo es que quieren indicar cuál fuera de los lados es en realidad el lado activo así que quería tener un color diferente. Ahora entonces, Ahora entonces los otros enlaces algunos simplemente van a hacer doble clic en él y que esta es la forma eres un objetivo, um, un elemento dentro de un grupo que simplemente voy a agregar este Grady y llenó así. Y básicamente tenemos un donde hemos creado nuestro encabezado de pozo? Justo así creo que creo que fue bastante fácil. ¿ No crees que hay algo que hay que tener en cuenta, por ejemplo, agregando, Ah, Ah, la calificación llena al texto, especialmente Erin, que los iconos svg u otros documentos incrustarlos y luego manejarlos adecuadamente. Pero creo que todas esas técnicas están realmente bien, bastante simples. Necesitan que algunos se acostumbren, pero para una vez que los cuelgues, los usarás sin problemas y rápidamente. Por lo que nuestro próximo orden del día sería simplemente agarrar una imagen grande. Ponlo. Teoh lo hará nuestro prominente a la pieza más prominente de este mundo, la parte stop del diseño, luego poner bien alguna mesa más oscura, tipografía más ligera contra ella y crear este sistema de navegación aquí mismo. Entonces empecemos a hacer eso en el siguiente video 36. 10.1Empeemos añadiendo la imagen principal: la siguiente sección que vamos a crear es esta sección de héroes aquí mismo. Por supuesto, lo más importante de ello es que tiene esta gran imagen como fondo. También está esta tipografía audaz, y también tenemos este sistema de navegación aquí abajo en la parte inferior, y crear la sección en realidad nos dará la oportunidad de descubrir uno de los diseñadores de afinidad las técnicas y herramientas que es lo que le permite agregar imágenes. Y este método es el más sencillo. Es la más fácil, así que vamos a empezar. Pero antes de añadir una imagen, vamos a añadir una capa. Entonces voy a crear un posterior aquí mismo. Voy a nombrarlo como ah hero, así como así. Y lo voy a mover debajo de la sección Sombrerero y Heather Layer aquí mismo. Por lo que la forma más fácil de agregar una imagen dentro de un ajuste en el diseñador es simplemente usando la herramienta de imagen de lugar , que es este tipo de aquí. Lo que hace es simplemente que te permite abrir y colocar una imagen, lo cual es algo que también se puede hacer usando el comando file place. Pero este comando también te permite incrustar otros formatos de archivo, no solo imágenes donde se coloca la imagen por lo que está específicamente diseñado para agregar solo imágenes a tu voluntad. A tu documento suena simplemente va a dar clic en él y todas estas imágenes, por cierto, estamos descargando de los ejes que vienen un sitio web que descubrimos en uno de los videos anteriores . Entonces simplemente voy a elegir tal vez esta imagen, y como puedes ver bien, no está pasando nada. Supongo que no se puede ver nada porque no pasa nada más que nuestro cursor Kherson consiguiendo un compañero. Y este pequeño icono en realidad está indicando que si ahora solo hago clic en cualquier parte dentro de mi documento, me voy con el dedo del pie. Agrega esta imagen. Y como puedes ver, es grande. Es demasiado grande para nuestros propósitos, así que necesitamos hacerla más pequeña y para hacerla más pequeña, debilitarnos simplemente arrastrado por una de sus esquinas, igual que así, hasta que se ponga bien, pequeño como nosotros lo necesito. Y por cierto, no necesitas presionar y mantener presionada la tecla Mayús porque, bueno, un diseñador débil por defecto asume que quieres mantener las proporciones tal como están. No quieres distorsionar tu imagen, y eso en realidad es muy útil porque no queremos distorsionar nuestra. No quieres iniciar nuestra imagen. Entonces si quieres todo teléfono tu documento tiene lo mismo con que tu lienzo. Simplemente puedes introducirlos aquí dentro de ese panel de transformación. Pero lo que es importante aquí mismo es que queremos que nuestra sección sea jalada esta imagen de fondo sea más pequeña. O sea, queríamos ser lo más amplios que pueda durar todo. Queríamos ir del lado izquierdo del puerto View al lado derecho del puerto view, pero no queremos que sea ese peaje. Queremos hacerla más pequeña. Y, supuesto, si sólo lo agarramos por una de las asas aquí mismo, vamos a distorsionar nuestra imagen, y eso definitivamente no es lo que queremos. Entonces, ¿cómo podemos asegurarnos de que, bueno, la imagen se mantenga en proporción, pero no es tan grande como este original. Podríamos quizá usar la máscara de recorte para ello, pero creo que sería más fácil simplemente agarrar la cosecha factorial hasta que este tipo de aquí y simplemente mover un poco a este tipo hasta, no sé, tal vez en algún lugar aquí estamos va a revisarlo en tan solo un segundo. Por lo que la herramienta de cultivo vectorial simplemente nos permite recortar la imagen. A pesar de que se le llama cultivo vectorial. Nos permite recortar una imagen así como así sin afectar y la imagen en sí que incluso podemos conocer mover a este tipo por dentro de nuestro interior nuestro o recortado imagen recortada marco, igual que para asegurarnos de que está bien, se ve solo una manera como queremos que se vea. Entonces, si solo acercamos un poco más, y ahora si solo echan un vistazo al panel de capas, se puede ver que nos pusimos debajo de nuestra imagen. Tenemos este rectángulo agregado aquí mismo. Y, como puedes ver por su miniatura, y si estás familiarizado con la foto shop ella, como que parece una máscara, ¿ no crees? Bueno, eso es básicamente porque es una máscara, una máscara siendo una aplicada dinámicamente a nuestra imagen. Si acabamos de apagarlo, se puede ver que estamos recuperando toda nuestra imagen. Pero si damos la vuelta, puede ver que se recorta al igual que así, y tiene una mayor se beneficiará. O sea, agregando una máscara a nuestra imagen, pesar de que no preguntamos Adam. Es decir, un amigo a diseñador agregó esto masculino automáticamente, pero podemos simplemente ir a envolver este rectángulo y podemos ir aquí abajo a nuestro panel de transformación, asegurarnos de que nuestra transformación está sucediendo desde uno fuera de los primeros puntos. Y ahora sólo podemos cambiar esta altura de valor aquí mismo por algo como, no sé, tal vez 700 píxeles. A ver. Y como puedes ver, es nuestra máscara está siendo recortada exactamente a 700. Entonces ahora tenemos 920 por 700 píxeles, así como. Y si ahora acabamos de previsualizar en 100% y deshacernos de los paneles así podremos ver si realmente nos gusta así, esta altura, así que si quieres hacerlo más grande, podemos hacerlo más grande. Podemos hacerlo más pequeño si quieres, pero creo que voy a dejarte que tú decidas si quieres experimentar un poco más con él. Ya sabes cómo hacerlo. Es Oh, así que puedes hacerlo ahora. Puedes hacerlo tú mismo. Lo que quiero hacer, sin embargo, es que quiero oscurecer esta imagen porque no me gusta que sea así Es tan ligero , sobre todo considerando que me van a poner en alguna tipografía ligera sobre ella en tan solo un segundo. Entonces lo que quiero hacer es que quieran hacerlo un poco más oscuro. Pero, um, hay una cosa sobre la que debes ser cauteloso, pero te contaré todo al respecto en el siguiente video. 37. 10.1Empeemos añadiendo la imagen principal: ya que sigues construyendo tu sitio web, te diseñas y sigues agregando imágenes e imágenes grandes como esta. Tu documento se va a hacer más grande y más grande y va. Tu computadora se va. Teoh corre más lento, más lento y más lento. decir, Esdecir, entre más grandes imágenes tenga que procesar esto es más lento que más ram y el proceso de consumo de energía todo el proceso va a llegar así que hay un pequeño truco que puedes hacer para asegurarte de que todo se vea bien. Pero al mismo tiempo, todo lo que estoy en proceso es rápido y suave. Si sabes que vas a estar bien, dejando esta imagen como es quieres que tu imagen de héroe sea tan alta como este tipo de aquí. Y querías que te recortaran así, simplemente puedes seleccionarlo. Y ahora si solo vas a exportar archivos, solo podemos seleccionar selección sin fondo, convertirla en una clavija J, bajar la calidad a alrededor del 75% así Y ahora cuando exportamos esta imagen con estos ajustes, se va a recortar toda la imagen. Esto ya no es ser una imagen enorme. Será mucho, mucho más pequeño. Pero será, bueno, bueno, mismo que el que se te ve aquí mismo. Entonces si ahora solo sigo adelante y hago clic en Exportar y lo voy a llamar como, um, imagen recortada igual que así Y ahora simplemente puedo eliminarla. Y ahora si vas a ir al lugar imagen, herramienta y que pueda revisar donde pongo mi aquí está ahí? Aquí está Y si solo hago clic aquí, se puede ver que tengo mi imagen recortada y alineada perfectamente con mi con todo mi diseño en todo el sitio web. Y esto es en realidad lo puedes hacer con todo tu pozo, al menos esas grandes imágenes. Si tu computadora es quizás un poco más lenta si no tienes suficiente ram o tu procesador es un poco lento, siempre puedes simplemente ah decirle ofender al diseñador Teoh Inouye, optimizar las imágenes simplemente haciéndolas más pequeñas. Y una vez que los tengas recortados, una vez que los tengas bien preparados justo como tú quieres que sean. Simplemente puedes guardarlos como activos separados y luego volverlos a añadirlos. Pero serán mucho más pequeños, y la calidad será más o menos la misma, y todo correrá más suave. Por lo que ahora realmente estamos listos para empezar a agregar el collar en el a nuestra imagen. Y de nuevo, habrá algo que dejaste que tengas la mente de Teoh Barre al agregar un color a tus imágenes porque podrías estar tentado como si usualmente me tratara de hacer una cosa, pero no funcionará como su rodaje, así que hablemos de ello en el siguiente video. 38. 10.2Cómo cambiar rápidamente la imagen: ya que sigues construyendo tu sitio web, te diseñas y sigues agregando imágenes e imágenes grandes como esta. Tu documento se va a hacer más grande y más grande y va. Tu computadora se va. Teoh corre más lento, más lento y más lento. decir, Esdecir, entre más grandes imágenes tenga que procesar esto es más lento que más ram y el proceso de consumo de energía todo el proceso va a llegar así que hay un pequeño truco que puedes hacer para asegurarte de que todo se vea bien. Pero al mismo tiempo, todo lo que estoy en proceso es rápido y suave. Si sabes que vas a estar bien, dejando esta imagen como es quieres que tu imagen de héroe sea tan alta como este tipo de aquí. Y querías que te recortaran así, simplemente puedes seleccionarlo. Y ahora si solo vas a exportar archivos, solo podemos seleccionar selección sin fondo, convertirla en una clavija J, bajar la calidad a alrededor del 75% así Y ahora cuando exportamos esta imagen con estos ajustes, se va a recortar toda la imagen. Esto ya no es ser una imagen enorme. Será mucho, mucho más pequeño. Pero será, bueno, bueno, mismo que el que se te ve aquí mismo. Entonces si ahora solo sigo adelante y hago clic en Exportar y lo voy a llamar como, um, imagen recortada igual que así Y ahora simplemente puedo eliminarla. Y ahora si vas a ir al lugar imagen, herramienta y que pueda revisar donde pongo mi aquí está ahí? Aquí está Y si solo hago clic aquí, se puede ver que tengo mi imagen recortada y alineada perfectamente con mi con todo mi diseño en todo el sitio web. Y esto es en realidad lo puedes hacer con todo tu pozo, al menos esas grandes imágenes. Si tu computadora es quizás un poco más lenta si no tienes suficiente ram o tu procesador es un poco lento, siempre puedes simplemente ah decirle ofender al diseñador Teoh Inouye, optimizar las imágenes simplemente haciéndolas más pequeñas. Y una vez que los tengas recortados, una vez que los tengas bien preparados justo como tú quieres que sean. Simplemente puedes guardarlos como activos separados y luego volverlos a añadirlos. Pero serán mucho más pequeños, y la calidad será más o menos la misma, y todo correrá más suave. Por lo que ahora realmente estamos listos para empezar a agregar el collar en el a nuestra imagen. Y de nuevo, habrá algo que dejaste que tengas la mente de Teoh Barre al agregar un color a tus imágenes porque podrías estar tentado como si usualmente me tratara de hacer una cosa, pero no funcionará como su rodaje, así que hablemos de ello en el siguiente video. 39. 10.3hagamos que la imagen sea un poco oscuro: en esto, no lo hacemos Ellos van a hacer que nuestra imagen sea un poco más oscura, porque si echamos un vistazo al original, podemos ver que en realidad está bien. Es más oscuro que otra que esta imagen original porque queremos poner esta tipografía ligera contra esta imagen. Y sobre todo en el caso. En el caso de esta imagen, si pusiéramos tipografía de luces contra este fondo, apenas sería visible. Y esa no es buena experiencia de usuario. Entonces lo que queremos hacer es que queremos oscurecer por lo que una cosa que podría ser tentada a hacer. Si estás probando Teoh solo, ya sabes, beat. El sistema lo intentaba varias veces puedes quedarte tentado a usar solo la herramienta de relleno. Y para el tipo de relleno, es posible que desee elegir algún color. Por ejemplo, si simplemente vamos con sólido, se puede ver que en realidad no estamos agregando un color. Pero estamos cambiando. Estamos cambiando toda la foto, y si quieres ir por este tipo de efecto artístico, será mi conjetura. Puedes elegir muchos colores diferentes y en realidad cambiar la forma en que este auto esta que esta imagen es en realidad se verá adentro, pero eso realmente no es lo que queremos. Así que recuerda bien no usar esta opción si tú. Si solo quieres oscurecer la imagen, no vayas por el color de relleno para hacerla. Pero si quieres intentar vencer al sistema, no lo vas a vencer así. puedes No obstante, simplemente agarrar el rectángulo para crear un rectángulo pequeño y llenarlo con un color oscuro. Entonces simplemente voy a elegir. A lo mejor este color y quiero hacerlo tan grande como la imagen. Y como es 1920 por 700 eso es lo que voy a ingresar aquí mismo. 700 al igual que ahora podemos simplemente colocarlo sobre nuestra imagen y asegurarnos de que encaje igual que así. Y ahora simplemente podemos bajar la opacidad. Veamos algo así como tal vez el 40%. Creo que el 40% debería estar bien porque, como dije, la imagen subyacente es bastante ligera, así que no creo que debamos bajar la opacidad a algo como, no sé, 17% Goes dijo Eso simplemente no tendrá ningún sentido. Por supuesto, tal vez podríamos intentar agregar un más oscuro llamarlo tal vez, como, color negro y luego debilitarnos. Bajar la opacidad aún un poco más. Pero creo que sólo voy a ir con mi color original, y voy a aumentar la capacidad a algo así como, tal vez 35 40% igual. Por lo que ahora simplemente podemos agarrar tanto de la imagen como del rectángulo y debilitarnos. Simplemente agruparlas si quieres. Se puede cambiar el nombre del grupo como tal vez Imagen principal, Algo así. Sólo para que sepas qué? En realidad es justo aquí dentro de este grupo. Por lo que ahora podemos empezar a sumar de esa tipografía por la que podemos empezar en este texto principal. El texto principal aquí mismo. Recuerda, creamos un estilo de texto específico para ello, pero creo que podemos empezar a hacerlo en el siguiente video. 40. 10.4Ahora añadiremos el texto principal: Ahora podemos empezar a sumar la tipografía principal y ponerla en contra de este fondo más oscuro, este fondo de imagen. Entonces simplemente voy a agarrar la herramienta de impuestos marco y voy a crear voy a crear un marco de texto así como para que no tenga que ser todos esos grandes entumetes. Vamos a agarrar la herramienta de textos y voy a elegir insertar texto de relleno, así como y de nuestros estilos de texto, voy a elegir nuestro pensamiento lo llamó cabecera principal. Voy a alinearlo a la izquierda y ahora moverlo, moverlo a algún lugar. Aquí, déjame solo ver si broches muy bien moovit verano aquí ahora, si quieres, puedes por supuesto. Ah, bueno, escribe aquí algunas palabras reales como las tengo en el como que tengo en el en el original, pero te lo voy a dejar a ti. Yo solo quiero mostrarles cómo crear este tipo de efecto de este tipo. Ahora bien, si no te gusta la forma en que se ve esto, si no te gusta la forma en que se colocan los personajes si no te gusta el camino en la línea Hola, Tim está siendo, Ah, bien mostrado aquí. Por supuesto que puedes. Se pueden cambiar algunas cosas al respecto. Entonces, por ejemplo, podemos simplemente agarrar el panel de caracteres y, por ejemplo, podemos intentar cambiar, aumentar el liderato, tal vez a 78 así. Y por supuesto, íbamos a tener que ampliar este marco así como así. También podrías intentar aumentar la distancia entre caracteres específicos. Y ese es, por supuesto, el rastreo. Entonces vamos a ver por ti solo ingresa uno. No me iría por la borda con ella. Estamos viendo un ligero aumento más ligero, pero no tanto. Y yo no iría demasiado lejos con ello. A lo mejor vamos a apegarnos a cinco. Algo así como. Entonces esto debería estar bien. Y además, si quieres, quizá puedas probar con los otros pesos delanteros, como regular, semi calvo. Yo no iría con luz y tal vez medio. Creo que audaz sería lo mejor porque nos daría, bueno, bueno, una sensación de consistencia a lo largo de nuestro diseño. Es decir, el logotipo está escrito en cualquier versión más audaz de la fuente. El texto enlaza bien, los ing manuales están escritos en una versión negrita fuera del frente, así que simplemente me quedaría con el estado con negrita Si quieres, puedes elegir Teoh, subrayar todo este texto si echamos un vistazo a el original porque se puede ver que he subrayado a esta palabra sólo el mundo creado. Pero eso es posible en Lee. Si solo si vas a agregar una pieza real de libro de texto es si es solo que este texto de relleno automático es solo un filtro y en realidad no podrás, Teoh Ah, manipular Onley obras separadas. Así que sólo como ejemplo, si solo agarro a este tipo y si solo lo copio, voy a estar queriendo asegurarme de que estoy a la derecha aquí más tarde y me voy a deshacer de este tipo. Y si me muevo, es aquí arriba igual que así Ahora si quieres, solo puedes agarrar el marco o el textil artístico. Yo sólo estoy Tal vez voy a agarrar el textil artístico y sólo podemos seleccionar palabras específicas. Entonces, por ejemplo, vamos a agarrar fascinantes. Déjame sólo agarrarlo. Y ahora puedo subrayarlo, o incluso puedo subrayarlo doble si quiero, pero no puedo hacerlo con el justo este impuesto de relleno que se puede utilizar desde el manual de texto . Porque, como dije, es solo un filtro dinámico y en realidad no eres capaz de manipular palabras individuales. Y por supuesto, lo último que debía hacer sería simplemente agarrar el texto y el fondo Subrayado y simplemente alinear a estos tipos a inconformes, igual que tan solo para asegurarse de que todo se vea bien. Entonces si ahora solo echamos un vistazo a nuestros avances, esto es lo que tenemos hasta ahora. Tenemos la patente, la cabecera. Nos dieron el logo, nos dieron el menú, nos dieron los iconos sociales, los iconos de las redes sociales. Nos pusimos bien, casi la terminada sección de héroes. Y si no quieres crear un deslizador de navegación, podrías simplemente pasar a otra sección a la siguiente sección. Pero creo que nos vamos. Teoh definitivamente van a crear que los botones de navegación del deslizador aquí abajo, Pero hasta ahora tan bueno, tenemos lo que fácilmente podría ser básicamente terminado, parte terminada, parte superior del diseño porque conseguimos el cabecera. Tenemos al héroe. Ahora pasaríamos a la siguiente sección de ítem destacado a la siguiente Sección dos. Pero antes de que no estemos antes de hacer eso en realidad estaba creando la navegación de la navegación de Styler aquí abajo en la parte inferior, derecha, así que mantente atentos. 41. 10.5Vamos a añadir la navegación de deslizador: creando el control deslizante. La navegación es en realidad un proceso bastante sencillo. Entonces vamos a empezar a construirlo ahora mismo. En primer lugar, quiero crear una elipse que va a tener un color de trazo, y no va a tener ningún color de relleno el trazo con el dosel. Sólo un punto. Siempre podemos cambiarlo más tarde. Y simplemente voy a crear una elipse. Ah, alrededor de 25 píxeles en pozo, ambos con y altura. Déjame acercarme más para que veas lo que estoy haciendo aquí. Y lo que voy a hacer es simplemente lo voy a clonar a la derecha dos veces. Entonces es uno y dos igual. ¿ Ahora qué? Yo lo voy a hacer. Déjame tal vez mover a este tipo mordido a la izquierda y a la derecha, este tipo. Pero claro, vamos a arreglarlo, arreglar, um, el espacio. Y en tan solo un segundo, Así que el primero Bueno, el primer icono el primer círculo va a tener un Phil va a tener un gran relleno que correspondería con el logotipo de Grady en remolque. Queremos indicar que en realidad, esta diapositiva es la primera diapositiva en las pilas. Entonces por eso este primer círculo círculo va a tener un relleno. Suena simplemente va a dar clic en mi genial y llenar mis muestreos así como así. Y ahora solo podemos crear este triángulo botones a la izquierda y a la derecha. Ese sería en realidad nuestro fondo anterior y siguiente. Entonces desde el panel de herramientas que voy a crear, voy a seleccionar la herramienta de triángulo. Y simplemente voy a crear un triángulo que va a parecer algo así por supuesto que no quiero que tenga un Phil. Yo quería tener un derrame cerebral, algunos simplemente van a intercambiar estos tipos thes colores. Y yo quería ser ligero igual que así Ahora déjame simplemente girarlo. Tengo presionada la tecla Mayús, y ahora la clonaré a la derecha y desde el panel de herramientas. Simplemente voy a zumar su núcleo Philip de mando horizontalmente al igual que así. Y ahora si solo elijo a todos estos tipos, puedo volver a ir al panel de alineación y en realidad, vas a estar usando mucho este panel de línea. Por lo que te aconsejo que te aconsejo que te familiarices con este panel porque es extremadamente importante en diseños de sitios web. Suena simplemente va a elegir el espacio horizontalmente click. OK, y entonces simplemente podemos agrupar a todos estos tipos y asegurarnos de que todos permanezcan juntos así como así. Ahora sólo los moveré, sólo alinearlos a la cuadrícula más que un poco hasta algún lugar aquí y simplemente alejar un poco así. Y ahí vamos. Llegamos a la navegación que creó, Por supuesto, si quieres, siempre puedes hacerlo. Tendremos el A es, bueno, bueno, golpe más fuerte. Entonces déjame solo agarrar a todos estos tipos así y en el panel de trazos, lo voy a aumentar a tal vez dos puntos. Entonces es sólo para que sean muy visibles en nuestro fondo. Y si ahora solo me deshago de los paneles ahora podemos ver que nos dieron todo el encabezado y nos dieron la sección de héroes completa sección de héroes saludados junto con nuestra navegación deslizante deslizante. Entonces lo siguiente que haríamos es que comenzaríamos a crear esta sección destacada, esta gran sección aquí mismo. Entonces, en realidad empecemos a hacer eso en el siguiente video 42. 11.1Empeemos a crear la primera secion destacada: la siguiente sección que vamos a crear son nuestros artículos destacados de sección, Así que es Ah, realidad está dividida en dos partes separadas. Esta parte principal, como se puede ver, se pone contra un fondo rosa, y hay este gran encabezado de sección y algún texto debajo de él. Después conseguimos una parte de la sección que tiene un fondo más claro y ah, 1234 ocho artículos destacados en total, y cada elemento comprende off. Por una parte, vengo un encabezado Andy pieza fuera de texto. Podríamos agregar un botón like a read more aquí mismo o un link, pero es ah bueno, no es necesario porque toda esta sección aquí mismo puede ser un enlace. Y en realidad está bien, más fácil hacer clicker o tocar en un link como este que cuando es un gran como este todo y elemento destacado que solo un pequeño enlace aquí abajo en la parte inferior, realidad fue empezar a crearlos que esta sección desde este top de parte rosa. Entonces otra vez, permítanme volver a traer los paneles de nuevo. Empezaré con la creación en una capa separada para mi para mi sección, y lo voy a llamar algo así como uno destacado igual Y lo voy a poner debajo de otro héroe, una capa de héroe. Entonces solo voy a agarrar la herramienta de rectángulo y voy a crear y rectángulo que se va a estirar por todo nuestro lienzo. Yo lo voy a hacer más grande. Hay que encontrar algo así para que siempre podamos cambiarlo más tarde. Y por supuesto, no quiero que tenga ningún derrame cerebral. Yo quería tener un relleno y yo quería ser. Yo quería ser rosa, así como así. Por supuesto que no. Lo que tenemos que hacer es simplemente tener que sumar a esa tipografía. Entonces le voy a agarrar el texto, un amigo tal marco textil. Voy a crear un marco de texto que voy a poblar con algún texto de relleno, así como así. Y como tenemos un subencabezado, un encabezado de sección, bueno, estilo de texto, simplemente lo voy a usar ahora mismo. A pesar de que voy a cambiar es ligeramente. Voy a ah, alinearlo al centro así como así. Ahora, lo que podemos hacer es simplemente tomar prestada esta pieza de texto y clonarla hacia abajo y simplemente cambiar en el estilo del texto a la luz corporal, así como así. Y si queremos, podemos hacerlo aún más grande, así como así. Y si crees que es que es demasiado pequeño o tal vez demasiado grande, simplemente puedes ir al panel superior y tal vez hacerlo 18 si quieres. Pero es un totalmente opcional. O sea, creo que me limitaría a ir con los simples 16 puntos ya que estos son ellos. A May nah, tamaño de teléfono, el típico de talla para Old Boy Tech. Por lo que solo voy con 16 así. Y por supuesto, podemos jugar con la posición en tan solo un poco. Y una vez todo listo, podemos simplemente agarrar a ambos tipos, agruparlos y luego desplazar click sobre ellos que el fondo. Para agregarlo a la selección y debilitarse, simplemente asegúrate de que todo esté muy bien alineado con el centro. 43. 11.2Vamos a añadir los artículos destacados: ahora, Como pueden ver, estamos empezando a perder algunos algunos algunos algunos de espacio aquí mismo. Tenemos que mover a este tipo. Tenemos que ampliar nuestra voluntad, nuestra junta directiva. Pero antes de eso, creo que tal vez quisiéramos simplemente mover a estos tipos un poco más arriba y tal vez hacer a este tipo un poco más pequeño y volver a alinear todo bien al centro. Al igual que eso. Por lo que ahora sólo podemos agarrarla La pizarra de arte Aún así, haga clic en el arte del tablero. Déjame simplemente alejar un poco y simplemente extender nuestro nuestro nuestro barco y extendido aún más hacer en algún lugar Tal vez aquí, igual que así. Esto debería estar bien. Entonces, ¿la siguiente, um, parte para hacer la siguiente pieza fuera de obra de arte que necesitamos crear oriente? Por supuesto, esta parte inferior inferior de esta sección de artículos destacados. Por lo que esta vez no voy a empezar con crear ese fondo. Voy a empezar con crear solo un elemento destacado, solo éste. Entonces de nuevo, simplemente voy a navegar a la carpeta donde guardo mi donde guardo mis colores de ojos y voy a traer uno a mi documento. De acuerdo, así que tengo la carpeta justo aquí y ahora solo puedo traer tal vez este responsive entro en mi documento al igual que así. Por supuesto, es demasiado grande, así que simplemente puedo hacerlo más pequeño a algo como Así que esto debería estar bien. A tan sólo un minuto. Pero Y por supuesto, nuevo, si quieres cambiar el color fuera nuestro de nuestro no puedo no podemos usar solo este Phil y un trazo para herramientas de color de trazo. Tenemos que agregarle el documento y ahora solo podemos seleccionar todo Y tal vez podríamos deshacernos del trazo. No creo que lo vayamos a necesitar. Y de nuevo, necesitamos encontrar nuestro grupo de muestras y simplemente cambiamos el color. Y no podemos cerrar a este tipo, igual que así Ahora siguiente. Lo que tenemos que hacer es agregar ese impuesto a debajo de nuestro ícono. Entonces de nuevo, voy a agarrar el textil marco, volver a crear un marco pequeño, insertar un poco de texto de relleno, Pero esta vez voy a usar el encabezado destacado textil. Al igual que eso. Por supuesto que tenía puede tener una línea de impuesto la mano, podría tener dos líneas de texto. Te lo voy a dejar a ti, que, bueno, bueno, qué tan grande va a ser este montón de texto en tu diseño. A continuación, simplemente voy a pedir prestado a este tipo en Kelowna. Dour se extendió sólo un poco, pero voy a cambiar este textil a cuerpo oscuro igual que así. Por lo que como puedes ver, trabajar con textiles nos ahorra una tonelada de tiempo libre. Hace que todo el proceso sea fácil y agradable. De verdad, es, um es solo un asunto de agregar el texto de relleno y el derecho al estilo de texto, y básicamente estamos terminados. Pero con esto, podría debilitarme. Ahora simplemente asegúrate de que todo se esté alineando bien al centro, así como así, y simplemente podemos agruparlo ahora. Otro beneficio del trabajo de esta manera es que si ahora solo lo hacemos más pequeño, se puede ver que el impuesto de relleno también se está ajustando a nuestros dos al tamaño del nuevo tamaño fuera de nuestro Aiken, las fuentes esperan, no importa cómo pequeño lo vamos a hacer o grande, siempre va a estar bien que se muestre bien en proporción. Por supuesto, siempre podemos simplemente seleccionarlo, seleccionarlo y tal vez expandido un poco, para que se vea tan bien un poco diferente. Una cosa que necesitamos enterrar mi al crear estos tipos aquí mismo es si solo volvemos al original, se puede ver que tenemos 1234 artículos destacados aquí mismo en una fila. Y por supuesto, tenemos dos filas. Lo que significa que ya que tenemos cuatro artículos, necesitamos asegurarnos de que no sea más grande que tres columnas, cierto, Porque cuatro veces tres oriente 12a. Por lo que ahora mismo puedo ver que lo soy. Creo que voy a estar bien, porque mi icono no es no es a más grande. No es más ancho que sólo las tres columnas. Entonces realmente, todo lo que necesitamos hacer ahora mismo esa cantidad de justicia, todo lo que tenemos que hacer ahora es simplemente colonia. Todo este grupo, estos todos estos tipos a la derecha, igual que así y luego solo presiona control J Control J. Y por supuesto, tal vez quieras hacer algo de limpieza de casa. Podríamos querer hacer algo. Hay algo de alineación, igual que So solo para asegurarse de que todos estos chicos están siendo alineados para alinearse proporcionalmente Y por supuesto, puedes jugar con el tamaño de estos iconos. Te lo voy a dejar a ti. Lo que quiero hacer lo que quiero mostrarles aquí es cómo crearlo. Esta la sección fuera de los artículos destacados. Pero por supuesto, no queremos que todos estos iconos sean solo computadoras y dispositivos móviles. Nosotros queremos que sean iconos diferentes, ¿verdad? Entonces, igual que en el caso de nuestros iconos de redes sociales, simplemente podemos seleccionar y haremos 11 imagen cuando pueda aquí mismo. Y recuerda que puedes apuntarle a un subgrupo o a un objeto dentro de un grupo simplemente haciendo doble clic en él, así como así, así como así. Y ahora sólo podemos golpear, reemplazar documento y sólo encontrar la imagen que estamos buscando. Yo voy a hacer lo mismo con el resto fuera del documento. Algunos simplemente van a reemplazar el documento. Sustituir ese fue el folleto. A lo mejor esa consultoría, um tal vez allí creciendo. Por qué no el siguiente con edificios siguiente podría ser la cámara y el último podría ser la tarjeta i d. Al igual que eso. Por supuesto, todavía necesitamos cambiar sus colores, ¿verdad? O sea, queremos que estos colores estén bien, algo. Bueno, exactamente. Bueno, en correspondencia con los otros colores con nuestro con nuestro esquema de color. Por lo que yo haría estos colores también junto con estos con estas piezas de texto, les aseguraría que tengan el color correcto. Bueno, estamos bien para ir con estas piezas de texto porque recuerden que creamos estilos de texto cuando estábamos creando estos textiles, agregamos el color correcto, cual se indica aquí mismo. Pero estos iconos aún necesitan tener el color adecuado para que se les agregue. Entonces otra vez, si solo hacemos doble clic en una en un incrustado específico específico para documentar este ícono aquí mismo y doble clic en él otra vez, podemos incrustar con aislado en una en una ventana separada. Y ahora solo seleccionamos todo lo que podamos otra vez, solo asegúrate de que estamos agregando el color correcto y el proceso es el mismo que waas antes de saber que el cambio es muy leve aquí. Es decir, en realidad no se puede ver realmente la diferencia de colores. Pero confía en mí, hay una diferencia en los colores. Y por el bien de ser casi consistente acerca de tu diseño, es bueno saber que es bueno hacer. Es bueno asegurarse de que todos los colores se muestren correctamente. Entonces déjame solo revisar dos veces a este tipo y debería estar bien. Así que déjenme añadir rápidamente el pozo, los colores correctos dedo del pie todos estos chicos y volveré enseguida con ustedes. Por lo que una vez que todos los colores estén en ello y todos los colores estén bien correctos, ahora podemos simplemente seleccionar todos estos iconos y agruparlos. Ahora podemos asegurarnos de que estamos dibujando detrás de ellos. Entonces voy a activar el inserto detrás del modo de selección, al igual que así, agarrar la herramienta de rectángulo y simplemente crear direccionamientos que se estire por todo el lienzo al igual que así. Creo que esto debería estar bien. Y por supuesto voy a asegurarme de que tenga el campo correcto. Esta vez va a ser esto un poco más oscuro. Gris. Al igual que ahora lo último que habría que hacer sería sólo asegurarse de que todo esté vivo muy bien al centro, así como así. Y por supuesto, si quieres, todavía puedes tal vez hacer esto bien, todo este fondo más grande si quieres, o tal vez los iconos sólo un poco más pequeños. Pero como dije, te lo voy a dejar todo a ti. Yo quiero que experimentes con todas estas técnicas porque esta es la única forma en que te vas a poner bien en ellas. Entonces la siguiente sección que vamos a crear va a ser nuestra segunda sección de largometrajes, que es este tipo de aquí. Y por cierto, esto va a crear en esta sección nos dará otra oportunidad de oportunidad para pero para trabajar con imágenes dentro, ofendiendo al diseñador y ver y cómo también podemos manejar. Las imágenes colocarán una imágenes dentro del ajuste en diseñador, así que mantente atentos 44. 11.3Letré, añade la segunda sección de artículos destacados: en este video, vamos a descubrir otro aspecto importante off para manejar imágenes dentro del diseñador de afinidad. Vamos a crear esta característica segunda sección destacada aquí mismo y vamos a empezar. Permítanme simplemente traer de vuelta los paneles creando otras capas. Así que simplemente voy a crear uno y renombrarlo como destacado a Esto estará bien. Vamos a traerlo abajo destacado otra vez. Voy a usarla el lugar, herramienta de imagen, y voy a elegir esta imagen aquí mismo. Lo que quiero es que esta imagen esté bien estirada a través de la parte izquierda fuera del puerto de vista . Por lo que necesito asegurarme de que no esté atravesando la sexta columna de Collins en nuestra gran. Entonces es 12345 seis. Entonces voy a asegurarme de que se esté alineando bien con esta columna. Al igual que eso. Igual que eso. Y como puedes ver, la imagen se está recortando aquí a la izquierda. Por defecto, diseñador de afinidad recortará cualquier cosa que sea que esté tocando su borde o que vaya a través de su. Entonces si estás familiarizado con photoshop y Si estás familiarizado con el ilustrador, notarás que, bueno, bueno, esos dos que ya conoces que esas dos piezas fuera de software manejan imágenes en este tipo de situaciones un poco de manera diferente. En Illustrator, puedes poner una imagen fuera del tablero de arte y moverte libremente alrededor y en una tienda de fotos. Por defecto, la imagen va a conseguir colecta por el tablero de arte, así decirlo. En Afinitor Designer, obtienes lo mejor de ambos mundos porque por defecto, concedes que la imagen se está recortando a la derecha se está recortando y ángulo directo se está recortando o toda esta sección está consiguiendo un clip. Todo se está recortando. No obstante, si solo lo llevas lo suficientemente lejos, puedes desconectarlo de esto del cannabis del propio zócalo para que puedas tenerlo al lado. Se puede tener de lado, por así decirlo. Puedes hacerlo bien, puedes hacer convertida en tu horario, tus notas o algo así. Pero si quieres, puedes traerlo al diseño y puedes hacerle los zócalos recortar toda tu imagen entera, y esto es en realidad lo que quiero así que quiero ponerlo en la sexta columna. Entonces es 12345 y son seis. Déjame asegurarme de que esté muy bien alineado, igual que tal vez solo un poco arriba. Sólo voy a Nagy hasta un poco. Y, por supuesto, la siguiente obra de arte que necesitamos crear es la parte correcta de esta sección. Entonces solo voy a agarrar la herramienta de rectángulo, y voy a crear un rectángulo que se va a estirar así. Por supuesto, si quisiera, podría ir y estirar así. Pero no necesito hacerlo. Entonces simplemente lo voy a dejar así y darle un color adecuado, adecuado. Y ahora voy a asegurarme de que todo esté bien alineado así como así. Y lo último, lo último que habría que hacer aquí sería sólo añadir el texto. Entonces de nuevo, voy a agarrar la herramienta de texto de marco y crear un marco de texto. Llénalo con siguiente, y voy a asegurarme de que tenga el estilo de texto adecuado, que sería el encabezado de sección ¡Alinear! Es a la izquierda en tal vez solo hacerlo más pequeño, Así como así. Voy a asegurarme de que esté muy bien alineado con mi tal vez con esta columna, así como así. Voy a sacarlo a la luz. Brennan está abajo, clonarlo hacia abajo, en realidad, y cambió esto a estilo de texto a luz corporal. Eso puede extenderse sólo un poco, así como así. veas lo fácil que es esto una vez que tienes el impuesto de relleno y tienes los estilos de texto, lo fácil que es solo agregar algunas piezas de impuesto y manipular texto con eso con las estrellas de texto . Entonces me voy de pie, agarrar a estos tipos, agruparlos y asegurarme de que están alineados al centro, así como así. Y conseguimos esta sección creada ahora debilitar Solo espero que todos estos chicos solo para asegurarse que lo estén, están bien armados. Y ahí vamos. Lo conseguimos y el segundo largometraje futuro grupo creado. Déjenme solo conceder a dónde tiene que ir, así como así. Y ahí vamos. La siguiente parte, la siguiente sección que vamos a crear va a ser este post blawg bloqueará fragmentos de post en realidad, aquí mismo así podría ser como de nuestra sección Blawg y todos estos tipos podrían ser bloqueados post block post extractos y otra vez. Y esta creación de este apartado nos dará otra oportunidad. Teoh trabaja con imágenes de una manera aún más que bien, esto Así que de esta manera en realidad podría venir muy útil en tu voluntad cotidiana todos los días. Bueno, página web un trabajo de diseño, así que mantente atentos. 45. 12.1Empepitemos a crear la sección de blog: antes de empezar a crear desde nuestra sección de bloques, necesitamos expandir nuestro tablero de arte solo un poco más. Entonces voy a asegurarme de que este tablero de arte siga siendo seleccionado. Haga clic en el tablero del patio y se extendió aún más a algún lugar de aquí, tal vez incluso sólo un poco más. Ahora tengo que extender la propia grilla. Entonces déjame sólo encontrar la grilla. Es justo aquí que simplemente voy a bajarlo así como así. Déjame volver a cerrarla y voy a crear otra capa y llamarla Ah, bloque. Al igual que eso. Entonces empecemos con la creación de la sección cuelga. Entonces voy a agarrarle el textil marco y simplemente crear un marco de texto que se va a ver algo así. Voy a insertar algo de texto dentro, y voy a asegurarme de que el encabezado de sección esté encendido como este estilo. Y voy a asegurarme de que un centro de línea también esté encendido así. No obstante, quiero cambiar el color de este de estos encabezamientos. Simplemente voy a elegir este color más oscuro al igual que así Ahora voy a hacer tal vez sólo una línea de texto esta vez y voy a asegurarme de que se esté alineando al centro de mi tablero de arte. igual que cuando echemos un vistazo al original, notarás que las imágenes destacadas son en realidad cuadrados. Y si quieres, puedes agarrar la herramienta de recorte de factor, importar imágenes e intentar recortarlas para, ya sabes, igualar las proporciones cuadradas. Pero hay una forma más fácil de crear imágenes cuadradas dentro de un diseñador de muebles. Entonces, echémosle un vistazo ahora. Simplemente voy a crear rápidamente un nuevo documento que ni siquiera voy a guardar. Pero voy a asegurarme de que en realidad tenga las proporciones cuadradas, por así decirlo que estoy creando un lienzo cuadrado. Voy a asegurarme de que el con por ejemplo, 200 píxeles y altura sean iguales, y simplemente voy a golpear. De acuerdo, Ahora congee solo agarro la herramienta de imagen de lugar, y solo puedo navegar a la carpeta donde guardo mis imágenes y empiezo en imágenes. Entonces voy a empezar con este tipo aquí mismo, y lo voy a colocar, y por supuesto, es demasiado grande, así que necesito asegurarme de que IHS ¿qué? Eso es más pequeño. Déjame alejarme un poco y estoy manteniendo presionada la tecla de control y la estoy haciendo marcha mucho más pequeña. Al igual que eso. Justo así. Y ahora, como pueden ver, mi lona mi nuestro barco está actuando de una manera como una máscara de recorte. Entonces estoy en Lee va a estar salvando la guerra. Puedo ver dentro de mi campus. Entonces ahora mi, mi obra de arte tiene 250 píxeles de ancho y 250 píxeles de alto. Entonces ahora simplemente puedo seguir adelante y exportar todo el documento porque tiene las dimensiones correctas y proporciones correctas tiene una foto J. Simplemente bajaré la calidad a alrededor del 75% y simplemente puedo golpear la exportación. Y por supuesto, ya tengo estas imágenes creadas aquí mismo, sólo voy a nombrar recordar de manera diferente, tal vez como un justo igual y luego B c. D. Etcetera. Entonces ahora lo que podemos hacer es simplemente agarrar esta imagen y elegir reemplazar imagen, y ahora podemos elegir Tal vez este tipo de aquí Y como puedes ver, es Ah, esta imagen está sintiendo las mismas proporciones que nuestra imagen anterior. Por lo que no tenemos que cambiar el tamaño de nada que pueda ser como cambiar las proporciones. Nada de eso. Simplemente podemos reemplazar una imagen y luego simplemente tal vez utilizó el control todo más Shift Plus como un atajo para obtener la configuración de exportación. Y todos los ajustes de previsualización ya están aquí, así que simplemente podemos seguir adelante y hacer clic en Exportar. Renombrar a este tipo y hacer lo mismo repetirá el proceso una vez más. Entonces vamos a agarrar a esta imagen, como Así otra vez viejo control shift s export, ver y entrar reemplazar imagen. A lo mejor este tipo ahora mismo, viejo cambio de control como exportación Y este tipo va a ser, creo d igual que otra vez reemplazar imagen Y supongo que va a ser Tal vez esta imagen esta vez otra vez. Antiguo cambio de control como. Y va a ser y reemplazar imagen. Y vamos a agarrar pensando a este tipo demasiadas imágenes, creo. Pero demasiadas imágenes y exportar y f al igual que así. Por lo que ahora simplemente podemos cerrar este documento. Realmente no lo necesitamos, pero Ahora simplemente podemos agarrar la herramienta de imagen de lugar, y podemos empezar a colocar en imágenes. Entonces déjame solo encontrar mi imagen así como así. Y si quieres, puedes hacerlo más pequeño, simplemente puedes arrastrarlo por una de sus esquinas y hacerlo más pequeño, igual que así. Por supuesto, si hiciéramos más pequeños los documentos, no tendríamos que cambiar el tamaño de esta imagen en absoluto. Pero solo por el bien de aprender técnicas específicas aquí dentro del diseñador de muebles , hagámoslo de la manera más larga. Entonces ahora tenemos una imagen y todo lo que realmente necesitamos hacer es agregar algún texto a un costado, porque si le echamos un vistazo a este original, se puede ver que hay una imagen y hay algunas texturas, un encabezado y hay algo de texto en el derecha y en realidad tanto el yo quiero decir, el encabezamiento y el texto. Ya tienen textiles específicos en nuestra biblioteca, así que realmente solo hay que hacer es conseguir y agarrar la herramienta de texto de marco y simplemente crear un marco de texto en algún texto y de los estilos de texto elegir encabezamiento destacado hacer tal vez justicia sólo un poco más pequeño. Alinear. Está a la izquierda y tal vez sólo más pequeño, así. Y luego simplemente clonarlo al fondo así como así y extendido un poco cambiado. Ah, texto estilo a cuerpo oscuro. Al igual que eso. Y así es como podemos crear un artículo destacado, un extracto de bloque suficiente en diseñador. Podemos, por supuesto, jugar con alguna posición en tan solo un poco, ya que queremos tener ah tres artículos bien destacados en nuestra tabla de ritmo. Un elemento destacado no puede exceder las cuatro llamadas, derecho, porque tres veces cuatro equivale a 12. Entonces ahora simplemente podemos agarrar la imagen, agarrar el texto y simplemente hacerlo más pequeño así, y asegurarnos de que ese famoso diseñador esté haciendo todo el levantamiento pesado por nosotros. Es ah haciendo la imagen más pequeña, y es ah, haciéndoles que el texto de marco más pequeño también. Pero ahora simplemente podemos simplemente tal vez ponerlo aquí y extender el marco de texto como así tal vez extender este tipo también sólo un poco. Y ahí vamos. Tenemos tenemos nuestro marco. Bueno, conseguimos nuestra imagen destacada creada 46. 12.2Reemplde las imágenes: Entonces para terminar nuestra sección de publicaciones a blogger tenemos que crecer rampa nuestro artículo destacado debilita agruparlo si quieres. Y ahora simplemente tiene dedo del pie sosteniéndolos para controlar el clon de teclas y a la derecha, Así como así. Todo lo que tenemos que hacer ahora es presionar el control J para duplicar la última transformación. Ahora, si seleccionamos todos estos artículos destacados y los bajamos del dedo del pie en algún lugar aquí ahora podemos crear seis elementos destacados. Y todo lo que tenemos que hacer ahora es solo agarrar, doble clic en esta imagen para agarrarla y hacer click, Reemplazar imagen, encontrar la imagen, hacer lo mismo con este tipo. Esto será ver imagen, así como este tipo será la imagen D así. Esta será la imagen, y esta será la imagen F. Ahora solo agreguemos un enlace sencillo que diría Ver el blawg. Entonces voy a agarrar el tipo textil artístico en, Ver la rubia, esa cuadra, no necesariamente en el registro. Y ahora podemos sólo ah, tenía el encabezado destacado textil a la misma. Pero no quiero que estos personajes sean capitalizados. Entonces me voy a asegurar que en el panel de caracteres se apague la función mayúscula igual que así Y me aseguraré de que el color sea adecuado. Así como así, lo voy a poner el verano a la derecha. Uh, en algún lugar de aquí, esto estaría bien. Y por supuesto, ahora solo podemos asegurarnos de que todos estos chicos estén agrupados y todos estos chicos sean de grupo. Entonces ahora simplemente podemos agregar el fondo debajo de ellos para que podamos agarrar la herramienta de rectángulo y empezar a dibujar un fondo así como así. Y por supuesto, vamos a asegurarnos de que no sea así de oscuro, aunque podría verse bien. Y pero es que va a tener este color claro fondo Aziz. Al igual que ahora solo podemos agarrar a ambos tipos, asegurarnos de que estén alineados al centro extender adecuadamente a este tipo solo un poco para asegurarnos de que es también se pone bien, exactamente en medio de la pizarra de arte. Y ahí vamos. Nos dieron la sección de bloques creada. A continuación, crearemos esta sección de feeds de Instagram y vamos a divertirnos mucho con el enmascaramiento dentro de un ajuste en diseñador. En primer lugar, vamos a crear un montón de rectángulos, y luego los vamos a usar como máscaras de recorte para crear este feed de instagram, así que mantente atentos. 47. 13.1Empeemos a construir la galería de imágenes: nuestro sitio web está empezando a lucir bien. Ya tenemos la sección de encabezados aquí mismo, junto con los iconos de navegación y redes sociales. Obtuvimos la imagen del héroe con la imagen de fondo, tanto la tipografía como la navegación del deslizador. Entonces conseguimos esta gran sección de artículos destacados justo aquí que lo dividiría en dos subsecciones separadas. Y luego llegamos a este Second contó con un artículo destacado, la subsección que en realidad está dividiendo todo nuestro sitio web en dos mitades izquierda y derecha. Y luego nos dieron nuestro de nuestra sección blawg. Por lo que a continuación crearemos el instagram feed una sección para nuestro diseño. Entonces voy a crear una nueva capa como de costumbre y podríamos llamarla Instagram. O simplemente podríamos llamarlo galería, así como así, en el proceso fuera de crear la galería, aprenderás a usar unas máscaras de recorte dentro de diseñador de muebles, y él va a ser la última técnica fuera usando imágenes dentro de este software. Entonces lo que queremos aquí es un Siri de rectángulos y cuadrados que van a ser los contenedores para nuestras imágenes. Entonces solo voy a ir al abuelo la herramienta de rectángulo, y simplemente voy a crear. Simplemente voy a crear un rectángulo que va a ser, bueno, algo como Entonces, ¿por qué no? No, simplemente voy a clonarlo a la derecha así como así, y tal vez hacerlo sólo un poco más pequeño a algo como So Entonces lo voy a volver a clonar a la derecha y extenderlo que clon int de nuevo y extendido aún más. Y entonces simplemente voy a agarrar a este tipo, moverlo a la derecha y hacerlo significativamente más pequeño, igual que las lámparas y voy a cambiar tal vez algunos de estos colores sólo para que no se vea tan aburrido igual que así. Y lo que podemos hacer ahora es debilitar simplemente derribar a estos tipos y clonarlos abajo, así como así, convertirlos en grupo y simplemente los volteó así. Entonces ahora nuestra voluntad. Nuestra Galería de feed de Instagram no es tan repetitiva. Voy a en grupo estos chicos y todos y cada uno de estos pequeños elementos fuera de estos pequeños rectángulos y cuadrados va a ser 11 contenedor para nuestros para nuestras imágenes. Entonces lo que podemos hacer en este momento es debilitar simplemente empezar a añadir imágenes. Entonces voy a usar la herramienta de imagen de lugar, y voy a navegar a mi carpeta instagram. Específicamente hice estas imágenes solo un poco más pequeñas, solo para que no tengas que verme re dimensionándolas. Y Justin, ellos sonarán demasiado simplemente van a abrir a este tipo y colocarlo así. Entonces ahora se puede ver en mi posterior pasar todo lo que me dieron la imagen y me dieron todos estos rectángulos justo aquí. Entonces, ¿cómo dedo del pie recortar en realidad esta imagen usando uno de estos rectángulos? Bueno, es fácil y no fácil al mismo tiempo. Es fácil porque solo puedes agarrarlo y mover eso debajo del rectángulo que quieras. Teoh. The Children, también, funcionará como clip en un lío. Entonces digamos que va a ser este tipo verde aquí mismo. Pero como puedes ver, a veces solo tienes que arrastrar y encontrar el lugar adecuado para que esta técnica funcione. Pero una vez que lo encuentres, puedes ver que ahí mismo puedes convertirla en una máscara de recorte, así como así, y podemos moverla a algún lugar aquí. Esto debería estar bien. Entonces otra vez, voy a asegurarme de que estoy en el jugador correcto aquí mismo y agarrar otra imagen. mejor esto Tal vez estos lápices de colores, así Y simplemente voy a dar clic así. Y realmente me pregunto esta imagen para ser recortada por este rectángulo verde. Como puedes ver aquí, mi panel de capas, todos estos rectángulos tienen una miniatura diferente, y es Ah, creo que es una buena idea que estos chicos les den diferente color, porque ahora puedes ver que también son diferentes en el panel de capas, por lo que es más fácil simplemente distinguir qué rectángulo es cuál. Entonces voy a mover a este tipo debajo de este rectángulo, pero como puedes ver, desapareció muy bien. Eso se debe a que está cayendo fuera de nuestra máscara de recorte. Pero si lo movemos sobre nuestro rectángulo, está reapareciendo mágicamente. Al igual que eso. Entonces ahora solo podemos repetir el proceso con todas las imágenes restantes, pero creo que antes de hacer eso, quizá podamos cambiar los colores de algunos de estos rectángulos porque aquí tenemos cuatro ángulos de ping correctos, y es podría ser un poco confuso en nuestro panel de capas Así que vamos a que sólo elijamos rápidamente algunos colores arbitrarios. Tan solo para que nuestros rectángulos sean bien visibles en nuestro panel de capas. A lo mejor este negro también. Permítanme simplemente cambiar su color a algún color azulado así. Y ahora realmente podemos asegurarnos de que estamos en la capa correcta. Coloca una imagen, Tal vez este tipo Y digamos que va a ser recortado por este tipo verde aquí mismo. Entonces déjame simplemente encontrarlo en el panel de capas. Es este tipo de aquí, y simplemente lo voy a mover allá. Entonces otra vez, voy a asegurarme de que estoy en la capa correcta y tal vez esta y vamos a quizá el cerebro sobre esta roja así que otra vez aquí y muévelo hacia arriba. Entonces déjame hacer rápidamente este proceso con todas las imágenes restantes, y te volveré en tan solo un segundo. Y ahí vamos. Conseguimos la galería creada, el feed de instagram creado. Entonces solo recuerda que con el fin de crear una máscara de recorte, bueno, la forma más fácil dentro, si dentro de diseñador es solo colocar una imagen y luego simplemente ponerla la colocará dentro de un contenedor como una ah, bien, rectángulo o un cuadrado o una sílice o cualquier forma que desee. Entonces ahora que tenemos esta sección de creada, nuestro próximo orden del día será simplemente crear su pie de página. Y en nuestro caso de Footer está bien se compone de dos partes con de ésta contra el terreno greenback y la más pequeña aquí en la parte inferior. Esa es en realidad una repetición de nuestro Sombrerero. Entonces, en realidad empecemos a hacer eso en el siguiente video. 48. 13.2Creemos la primera columna del pie: en este video, vamos a empezar a crear nuestro pie de página. Y como pueden ver, ya he extendido nuestro arte, pero porque se estaba poniendo demasiado pequeño. Entonces vamos a crear ahora otra capa. Déjame sólo hacer un poco rápido de Housecleaning aquí mismo. Así que déjenme rápidamente creedy nueva capa y llamarla pie de página así que la voy a traer aquí abajo debajo de la galería, y creo que vamos a empezar con la creación del fondo porque nuestro impuesto va a ser blanco y yo solo quería ser fácilmente visible para ti. Entonces voy a agarrar la herramienta de rectángulo y simplemente crear un fondo que va a ser así de grande. Creo que debería estar bien. Por supuesto que necesita tener el color adecuado. Y tal vez sólo lo anote un poco, así. Pero lo haré ahora mismo es que voy a Gramp el marco textil y voy a crear un amigo de texto que va a ser tal vez tres columnas de ancho. Al igual que así y otra vez. Insertar relleno, texto fuera de curso, si tuvieras algún ex cliente realmente texto, te poblarías con esto. Pero ya que no lo tenemos. Simplemente estamos poblados de poblarlo con el texto de algún maniquí. Entonces voy a seguir adelante y elegir estilos de texto y elegir encabezado de sección y déjame simplemente ponerlo así Tal vez extendido sólo un poco así y ponerlo un poco arriba para tropezar aquí. Esto debería estar bien. Por supuesto, si no quieres que Teoh tenga esta voluntad marcos de texto tan grandes que simplemente puedes hacerlo más pequeño. O simplemente puedes agarrar la herramienta de texto de marco una y otra vez y crear otro marco texto e insertar algún texto de relleno porque esta vez el diseñador ofendido probablemente te dará algunas otras palabras al editor que puedes usar para simular el simulador que, bueno, encabezando cada sección específica. Déjame simplemente borrarlo. Voy a clonar a este tipo hasta algún lugar de aquí de manera bastante significativa. Voy a dejarlo sólo un segundo porque ahora quiero agarrar la pluma tal. Yo quiero asegurarme de que estoy consumiendo el trazo, pero no fuera de este tipo para que acabemos de elegir diesel. Voy a agarrar el mental otra vez. Voy a asegurarme de que tengo en Lee el trazo, que no tengo ningún Phil y quiero acariciar para ser ligero. Y voy a crear una línea que va a estar rayando de izquierda a derecha en todas estas cuatro columnas. Y lo estoy haciendo porque si dejaras justo esta palabra aquí, se vería un poco vacía. O sea, vamos a tener algunos enlaces aquí a la izquierda en tan solo un segundo. Y si simplemente lo dejamos así y luego entramos otra columna y otra columna, porque en total, vamos a tener tres columnas. Es sólo que parecería que están desperdiciando mucho espacio. Y esta línea de aquí está actuando como un bonito divisor como un agradable Philip. No hay demasiado obtrusivo, pero al mismo tiempo, realmente parece que tiene su lugar. Entonces en este momento, simplemente voy a cambiar esto de una sección encabezada a luz corporal, así como así, y voy a hacer que sólo 11 palabras así. Y lo voy a subir y clonar abajo tal vez tres veces así Y por supuesto ,de , nuevo, si quieres, simplemente puedes añadir otro ese marco de texto y cambiar el relleno de texto. O simplemente puedes escribir alguna otra. Hay algunas otras palabras bien, que tú eliges. A lo mejor algunos enlaces de verdad si quieres. 49. 13.3Terminemos el diseño y el pie y el pie y el pie y el de pies: en total. Queremos tener tres columnas. Si echamos un vistazo al original , son tres columnas. Son estos tipos de aquí. Por lo que quiero asegurarme de que cada una de estas columnas esté correctamente alineada. Teoh la adecuada una llamada de grilla. Pero este fondo está bloqueando mi visión del mismo. Por lo que me aseguraré de que este Phil esté seleccionado aquí dentro del panel de muestreos que voy a bajarlo a algo así como 25%. A lo mejor voy a traerlo de vuelta en tan solo un segundo. Así que déjame acercar un poco. Y ahora, si agarro a todos estos tipos todos estos elementos y los voy a agrupar ahora, fácilmente puedo mover a este tipo a la izquierda y luego solo presionar el control J para clonarlo a la derecha, así como así. Y ahora solo podemos agarrar nuestros antecedentes y traer de vuelta la opacidad al 100% en el original . Tenemos algo más de texto a la derecha aquí a la derecha, Así que algo así como un extracto de Estados Unidos justo aquí a la derecha, en lugar de solo enlaces aquí a la izquierda. Entonces voy a hacer click en estos tipos, eliminarlos y luego hacer doble clic en este tipo y simplemente extenderse igual. A lo mejor sólo un poco. Sólo un poco arriba y tal vez clonarlo abajo justo en algún lugar de aquí. Y si tan solo quitamos los paneles por un segundo y tal vez alejamos un poco, podemos ver que hemos creado nuestras columnas con los enlaces y algún texto aquí mismo. Tan realmente viejo. Lo que queda por hacer es simplemente asegurarse de que todo se esté alineando bien. Por lo que tenemos que solo agrupar a todos estos chicos traer de vuelta los paneles, agregó la recámara a la selección y solo una línea, todo a inconformes. Entonces, serio, lo último que tenemos que hacer aquí es sólo pedir prestado el Cabecero Paul de estos tipos, igual que se llama Pete y simplemente bajar aquí, encontrar los hallazgos correctos justo después, bastados adentro y sólo bajarlo un poco. A lo mejor vamos a subirlo. Y ahora lo que podríamos hacer es simplemente hacer más pequeños a todos estos chicos porque normalmente si estás repitiendo un pie en una cabecera, por así decirlo, generalmente estos chicos son simplemente más pequeños todos estos elementos o más pequeños. Entonces voy a hacer que pueda ser así de grande y decir va por este menú. Entonces simplemente lo voy a hacer más pequeño, así como así. Y por supuesto, solo podemos quitar nuestro tablero duro, sacar un poco arriba y ahí vamos. Creamos nuestro diseño. Entonces realmente espero que hayas aprendido que ellos también lo saben. Pero sobre todo que disfrutaste creando este sitio web junto con porque realmente espero que lo crearas junto a mí. Si algo no está bien, solo rebobinar el video, volver a verlo. Y si algo todavía no está demasiado claro, siempre se puede hacer una pregunta En nuestro panel de discusión, el diseño puede estar terminado, pero a nosotros no terminamos trabajando con todavía tenemos algunas cosas que hacer. Todavía necesitamos que Teoh lo haga. Lo prepararemos para entregarlo al cliente y entregarlo a un desarrollador Web. Si vas a estar trabajando con uno si no estás deseando desarrollar el sitio web tú mismo. Pero el diseño está hecho 50. 14.1Entrega del diseño al cliente: Cuando termines con el diseño de una página Web, es momento de entregarla al cliente en diversas etapas de comunicación con el cliente. Estarás presentando versiones diferentes, ligeramente cambiadas fuera del diseño, por lo que es bueno saber cómo ahorrar rápidamente y compartir tu trabajo. Usando una cosa al diseñador, La forma más obvia de presentar al trabajador sería guardar el diseño y enviarlo al cliente. En la mayoría de los casos, no habrán ofendido diseñador instalado debajo de las computadoras, por lo que debes enviar un archivo que será luz común, fácilmente reconocible y que preservará la calidad de tu diseño. El formato de archivo más fácil y infalible de elegir para enviar a tus clientes es, por supuesto, J. P G. Guardar tu trabajo como un archivo J pic es tan fácil como usar el comando de exportación que confinaste bajo el menú del archivo. En realidad, las únicas dos opciones que necesita para prestar atención a una esta etapa es que el deslizador de calidad y el selector de área, como imaginaba antes el mejor compromiso entre buena calidad y tamaño de archivo pequeño, es del 70 al 75%. Un inconveniente importante, aunque fuera usar un pick J como formato de archivo es que no admite transparencia. Si tu diseño tiene algunos elementos gráficos que sí contienen transparencia, batter elige P y G en cuanto al formato de archivo. PNG apoya la transparencia, pero como se puede ver, no hay forma de controlar la calidad, no hay forma de controlar la calidad, lo que básicamente significa el nivel de compresión aplicado. Su expediente. Vet significa que generalmente los archivos PNG son más grandes que los de J. P G, pero ya sabes cómo comprimir P y G's por lo que el tamaño de archivo más grande no debería ser un problema. En cuanto al área, quiere exportar a judíos documento completo o un arte específico a bordo si Europhile tiene múltiples diseños repartidos por múltiples tableros de arte, como un montón de preguntas de estudiantes que preguntan qué formatos padre deben entregar a sus clientes. Entonces déjame abordar este tema muy rápido, asumiendo que el diseño ha terminado y que el cliente está contento y ha pagado, es hora de entregar tu diseño. Los formatos de archivo que pongas dentro de su paquete de entrega deben incluir todos los más importantes, como P y G. J. Paige. Pdf PSD tiff y por último pero definitivamente no menos importante el archivo fuente, que en este caso es dot a f design. Recomendaría exportar el diseño a todos esos formatos de archivo y luego comprimir los archivos en remolque. Un archivo más pequeño pero el cliente está encendido. Lee ganó final del proceso de entrega de diseño. El otro es el desarrollador que va a estar desarrollando el sitio web. Es decir, si eres el desarrollador de lo que puedes saltarte el siguiente video. Pero si no lo estás, déjame guiarte por el proceso fuera entregando el archivo y diferentes activos al desarrollador web siguiente. 51. 14.2Eneyeytiendo el archivo al desarrollador: Si estás listo para enviar el diseñado a un desarrollador, hay algunas cosas que debes cuidar. En primer lugar, más probable es que un desarrollador al que estarás enviando el archivo tenga Photoshopped recién viejo en su tienda de fotos de computadora sea tan ubicuo que realmente deberías ser arena fina en un archivo PSD o TIFF. Exportar a cualquiera sobre esos cinco formatos es, por supuesto, hacia abajo a través del comando experto que se encuentra bajo el menú de archivos. Pero exportando a un PSD, podrías elegir entre uno de cada tres presets de los cuales solo primero debería ser tema de tu preocupación. Podrías decirle al diseñador que preserve la máxima precisión o máxima capacidad de edición. Desafortunadamente, ninguno de estos presets mantendrá texto como Aditya Ble. No importa si utilizaste el texto de relleno o escribiste algunas palabras reales. Diseñador los convertirá en píxeles. deben conservar todas las capas y la masa, pero no el texto auditable. Por lo que es sólo algo que debes tener en cuenta. Otro factor importante a considerar en este proceso específico es exportar los activos que utilizó en su diseño. No estoy hablando de nada que pongas dentro del panel de activos, sino de las imágenes, iconos y otros elementos gráficos que usaste. Básicamente hay dos maneras de alejarse de la exportación de esos activos en diseñador, así que echemos un vistazo a ambos. El 1er 1 es genial. Si solo necesita exportar uno o dos activos rápidamente, simplemente seleccione un icono de imagen o incluso una pieza de texto como nuestro logotipo y utilizó el comando de exportación . Elige el formato de archivo que necesites, y no olvides cambiar el área. Opción a selección sin fondo hit export, y puedes exportar cualquier activo que desees muy rápidamente. Pero un amigo a diseñador viene con un espacio de trabajo especial dedicado solo a exportar. Se llama la persona de exportación, y la vamos a echar un vistazo a continuación. 52. 14.3cómo usar la persona de Exportar para exportar recursos a granel: la persona de exportación es un espacio de trabajo completamente diferente y puso en marcha herramientas creadas solo para exportar tus activos. Su herramienta principal se llama a la herramienta de corte, y permite crear pequeñas piezas fuera de ilustraciones llamadas rodajas, y esas rebanadas se pueden convertir en archivos separados, gracias al panel de rodajas. Pero hay un problema importante con esta herramienta. A veces con bastante frecuencia, realmente imagina que la rebanada con el objeto real que quieres exportar puede ser extremadamente difícil. Desafortunadamente, no puedes simplemente seleccionar una imagen o cualquier otro activo y luego elegir la rebanada robó para crear una rebanada perfecta. No sé tú, pero para mí eso es realmente frustrante. Pero por suerte, hay una solución a eso. Si solo agarras la herramienta de selección y el clic derecho en una pieza de arte, puedes seleccionar la opción de crear rebanada y qué diseñador creó la rebanada para ti e incluso darle un nombre corresponsal con su nombre en el panel de capas y lo que es aún más fresco . Seleccionarás múltiples elementos a la vez y crearás múltiples rebanadas usando el mismo método . Una vez creadas todas las rodajas, puedes pasar al panel de rodajas y elegir cuáles de ellas se supone que se exportarán . Simplemente marque o antíquelas, luego o bien exporte solo un solo archivo o todos ellos al mismo tiempo. No olvides elegir el preset de exportación que se adapte a tus necesidades. Es así como puedes usar la persona de exportación para guardar activos individuales de tu diseño. Creo que es una gran manera de exportar múltiples piezas de arte cuando se quiere ahorrar tiempo. 53. Gracias por ver el curso: Por lo que felicitaciones. Ya completaste el curso. De verdad espero que lo hayas disfrutado y que hayas aprendido mucho. Es decir, espero que a estas alturas te estés sintiendo mucho más cómodo sobre usar un diseñador desmayado para diseñar sitios web. Entonces en el curso, aprendiste no solo a usar sus herramientas y técnicas para armar un sitio web, sino también tendencias e inspiraciones de diseño web. Cómo elegir los mejores fondos y colores para tus sitios web. Dónde encontrar grandes imágenes, cómo trabajar con iconos, cómo trabajar con colores, básicamente todas las herramientas esenciales, cosas, técnicas y trucos que deben iniciarte y permitirte diseñar sitios web forma independiente. Entonces si te gusta este curso, por favor dale una revisión honesta. Y espero verte en uno de mis próximos cursos tener un bonito diseño. Mi nombre es David Tyminski. 54. 1Vamos a descubrir el marco de Wireframe para el diseño: en los próximos videos, vas a aprender a crear este moderno diseño creativo de bloques, y vamos a crear tanto la primera página como una sola página de post. Pero antes de pasar al proceso de diseño real, echemos un vistazo al marco de alambre que creé específicamente para este diseño. Y en realidad empecemos con el marco de alambre sólo para el principal, el frente, una página bloqueada. Entonces como pueden ver, he empezado con el encabezado y se puede ver que hay un logotipo a la izquierda y un sistema de navegación a la derecha. Ahora el fondo está oscuro porque quiero voluntad. En última instancia, voy a crear el fondo que va a estar oscuro, y pondré algún contraste en elementos más claros como el logotipo y el sistema de navegación. Contra ese trasfondo debajo del brezo, conseguimos al héroe de sección, y a pesar de que en este marco de alambre parece que sólo vamos a crear una sola imagen , hecho, en el diseño principal, vamos a crear algo. Nos interesa. Vamos a crear un deslizador de carrusel con las múltiples imágenes, bloques de postes y por supuesto, navegación. Debajo de eso, he decidido dividir a las secciones principales en dos secciones. Por lo que a la izquierda nos dieron el bloque Extracto de presumir el principal bloque destacado presumir extracto. Y a la derecha, he decidido crear una barra lateral. Por lo que primero de la izquierda, llegamos a la imagen futura fuera del futuro para bloquear presumir. Y luego conseguimos algunas simples representaciones de marco de esposa fuera de la fecha. Por supuesto, todos estos elementos son un texto sencillo. Por lo que conseguimos el elemento de marco de alambre de fecha en el bloque Post encabezará su título. Llegamos al autor info el número de Commons aquí. Obtuvimos algunas pequeñas representaciones de los iconos de redes sociales llegamos al bloque post extracto en las etiquetas o las categorías y el botón leer más aquí a la derecha. Y todos estos chicos, todos estos elementos se están mostrando contra un contraste en fondo este contenedor como un diferente por tierra, un más ancho mientras un fondo claro. Y está en contraste con todo el fondo fuera de toda la página Web de bloqueo de sangre. Cómo, por debajo de eso podríamos continuar. Podríamos simplemente duplicar esta idea y simplemente clonar todo esto, todo este contenedor entero para un poste de bloque. Excepto Pero he decidido que podríamos condimentar las cosas que lo poco podríamos dividir este bloque aquí mismo en dos secciones separadas en dos columnas separadas. No obstante, estamos duplicando en el poste de bloque. Excepto Pero claro, lo estamos haciendo mucho, mucho más pequeño. Y estas dos columnas host será 123456 bloque post fragmentos juntos. Y debajo de eso, he decidido poner una botella o un enlace de texto que navegaría a publicaciones de bloque más antiguas dentro este sitio web y a la derecha. Tenemos la barra lateral justo aquí. Y el cibernético también se separa en Collins específicos. Entonces tal vez déjame simplemente acercarlo rápidamente, acercar un poco al igual que así. Entonces llegamos al cuadro de búsqueda justo aquí, Entonces obtenemos el primero. El primer apartado que es ah, bueno, que empieza con una pequeña etiqueta aquí mismo. Después nos dieron el texto de la imagen y algunos ciclos de redes sociales. Y toda esta sección entera, este fragmento va a ser nuestro sobre mí sección sobre mí. Después nos dieron otra etiqueta y algo de texto. Entonces conseguimos algo así como un bloque más popular o tendencia presume. Por lo que conseguimos una imagen destacada a la izquierda en la cuadra. Cuenta con título a la derecha, la fecha y el testamento, la fecha en la parte superior y la categoría o etiquetas aquí en la parte inferior. Y como se puede ver, estos pequeños contenedores están siendo separados por una línea divisoria. Pero no todos ellos. El último no tiene esta línea, porque aquí tenemos otra etiqueta. Por lo que esta línea divisora justo aquí se vería redundante. No creo que necesitáramos aquí mismo. Entonces y entonces, claro, conseguimos sólo una etiqueta sencilla y algunas imágenes la y esta sección. He decidido hacerlo como un contenedor para algunos anuncios. A lo mejor Entonces cuando todo eso se haga, podemos pasar al pie de página fuera de curso si lo quieres, tal vez podrías agregar algo de feed de instagram aquí mismo. Pero desde que creamos este feed de instagram en nuestro diseño anterior, pensé que dejaría esta decisión en tu manos. Es decir, si quieres crear este contenedor de alimentación de instagram aquí abajo, ya sabes cómo hacerlo, y puedes incluirlo en este cable desde en este diseño. Por lo que he decidido simplemente pasar por una recta al pie de página. Y como pueden ver, he separado en tres columnas con las mismas etiquetas que podemos ver como podemos ver en nuestra en nuestra barra lateral justo aquí. Y por supuesto, tenemos algunos enlaces sobre texto aquí abajo, y he repetido que repitió el encabezado. Pero por supuesto, es quien se hincha, manera más pequeña, mucho más pequeño que el heller principal en la parte superior. Y, por supuesto, en base a este marco de alambre, vamos a crear este diseño. Pero creo que lo vamos a descomponer y en el siguiente video. 55. 2Letremos a descubrir el diseño de blog: Por lo que en este video vamos a echar un vistazo a su diseño principal. Ahora sabemos cómo es el marco de alambre. Por lo que ahora es el momento de echar un vistazo al diseño principal. Cómo se verá todo el concepto a partir de ese marco de alambre. Entonces nuevamente, en la esquina superior izquierda en nuestro sombrerero, obtuvimos el local, que es un texto sencillo, sencillo a la derecha. Tenemos el sistema de navegación con los iconos de las redes sociales justo aquí. Entonces es un concepto bonito, bastante básico, pero me gusta este enfoque minimalista cuando se trata de encabezados. Después nos dieron la imagen del héroe. Y como puedes ver, creamos un carrusel. El deslizador de tipo, un deslizador de carrusel, es un deslizador que aloja no sólo una imagen, un gasto de imagen grande en todo el puerto de vista sino un apagado serio, imágenes más pequeñas que cuando? Quiero decir cuando haces clic en uno de ahí fuera, los botones de navegación simplemente se mueven hacia la izquierda o hacia la derecha, igual que un carrusel. Por lo que cada uno de estos, como contenedores para imágenes, tiene su propio título único aquí mismo. Y por supuesto, tenemos estos botones de navegación justo aquí Y si te preguntas por qué estos tipos son blancos , este título, este título y esta flecha y este título y esta flecha bien, el Bagram para esta flecha y son supongo que es como un color rosa oscuro. Bueno, eso es sólo porque estoy indicando qué aspecto me gustaría que estos enlaces vean Siempre que pases por encima de esta flecha quiero que el fondo se ponga de color rosa. Y siempre que pase el rato sobre este título, quería volverse a rosa. Lo mismo va para este hogar. Bueno, para el enlace para la página actual aquí mismo. Pero esta foto adeudada logo va a ser va a ser, bueno, rosa todo el tiempo. Entonces a continuación, conseguimos, por supuesto, nuestras secciones. Por lo que conseguimos la imagen principal la imagen destacada aquí mismo. El dato, el título de la publicación en bloque. Llegamos al autor info, comentarios, iconos, texto, algunas etiquetas y el botón leer más aquí abajo. Ya veremos en el marco de alambre parte qué? Qué deben contener todos estos contenedores. Pero ten en cuenta que algunos de estos tipos son, bueno, del mismo color. Es decir, esta fecha de dieta es del mismo color que los arcos de bloque. Esto por texto es lo mismo. Cólera. El extracto de texto es del mismo color que nuestros los colores para ellos, los iconos de las redes sociales. No obstante, todos estos enlaces aquí los comentarios, las etiquetas de viaje de estilo de vida fotográfico están escritas en un color diferente. Este es el color principal para los enlaces dentro de estos contenedores. No obstante, cuando pasas por encima de ellos, dijeron que se supone que se van a convertir en rosa al igual que estos tipos de aquí. Por eso están escritos en un color diferente, diferente. Pero cuando vas a estos thes post, excepto que consideras , has decidido solo dejar los enlaces básicos colores que son verdes, que es verde en este caso. Y por supuesto, todas estas piezas de textos se están reduciendo, por lo que son más pequeñas que el principal, el tex principal aquí arriba. Y por supuesto, conseguimos dos columnas y conseguimos fotos diferentes, y conseguimos seis elementos todos juntos. Ahora, cuanto a ellos hasta el costado de Margo, se puede ver que tenemos esta lupa simple aquí que este contenedor tiene un borde simple , simple, , y yo tengo la búsqueda de texto aquí dentro, y luego llegamos a las etiquetas. Después nos dieron el texto fotográfico que está, um, alineado al centro Redes sociales I pistolas. Y luego está el texto que acabamos de ver. Por supuesto, la etiqueta y el texto. Este texto no se está alineando al centro, sino a la izquierda. Y luego conseguimos el bloque más popular presume. Por lo que esta imagen destacada. Se extiende de arriba a abajo. Pero por supuesto, sólo se toma alrededor de 1/3 de todo el contenedor. Nos dieron la fecha en el título del poste de bloque y la categoría justo aquí, y nos dieron 1234 contenedores. Y entonces sólo podríamos conseguir un contenedor, 40 anuncios. Y por supuesto, son sólo algunas imágenes planas. Y luego, por supuesto, nos dieron la comida. O déjame simplemente alejar de ella. Tenemos el pie de página con unas piernas. Es solo un texto de marcador de posición. Y por supuesto que he estado lo va a duplicar. Pero, um, pero encogiste el encabezado de arriba abajo aquí hasta abajo. Entonces nos dieron el logo. Tenemos la navegación y algunas redes sociales que tengo. Entonces ahí vamos. Así se va a ver nuestro diseño básico. Pero, claro, todavía necesitamos T o.Echa un vistazo a lo que serán nuestros activos en los colores, los fondos, las imágenes que vamos a estar usando para hacer que este diseño suceda. Pero creo que deberíamos hacer eso en el siguiente video. 56. 3Vamos a ver nuestros activos: Entonces para que este diseño suceda, básicamente vamos a necesitar tres cosas Vamos a necesitar collares, imágenes y tipografía. Ahora, este bosque los colores van. Nos metimos en el panel de muestras todo este grupo creado aquí mismo. Entonces conseguimos 12345 colores. No vamos a necesitar más. Llegamos a este muy pálido, muy pálido, gran color que en realidad es el color fuera de nuestro fondo principal. Este es este tipo de aquí. Llegamos al acento en color blanco. Ese es el color de estos enlaces los enlaces de navegación, estos iconos de redes sociales, por supuesto, los fondos fuera de los contenedores, un oleaje. Después llegamos al color principal de la tipografía, que es este muy, muy, muy de color gris oscuro. No es negro, es muy para un oscuro. Y luego llegamos a estos dos acento principal en colores, que es este banco este rosa oscuro y este color verde. Y he creado toda esta paleta. Ellos usando refrigeradores que co esta herramienta que ya estaban bien, aprendimos uno de los videos anteriores y empecé con solo un sabía que quería crear un oscuro mentirán a gran fondo y quería poner unos contenedores blancos contra eso fondo. Entonces primero simplemente escribía el valor para este gran color, el color blanco. Y entonces acabo de añadir este muy, muy oscuro color gris. Y luego solo dejo que el algoritmo se me ocurra estos dos acentos en colores. Por supuesto, tenemos un montón de imágenes aquí mismo. Y lo son. Todos te van a suministrar en una carpeta separada s para que puedas trabajar conmigo . Y como puedes ver, hay bastante de estas imágenes y son indiferentes a los tamaños y en diferentes contenedores. Y este tipo de diseño nos permitirá volver a trabajar con las imágenes puestas dentro de contenedores específicos como contenedores cuadrados, contenedores rectangulares. Entonces creo que es central saber trabajar sin problemas con imágenes dentro de un marco. El diseñador, cuando estás diseñando sitios web y déjame solo decirte que no vamos a usar máscaras , íbamos a usar otra técnica de trabajar con imágenes dentro de un amigo a diseñador, eso podría ser un poco más fácil para ti. Ah, ya podría no cansarse. Al final del día, hay que decidir qué técnica es más fácil para ti, ya sea enmascarar o esta otra técnica aún un poco misteriosa. Y después de que estemos bien después de que conozcas ambas técnicas de enmascaramiento y la otra, podrás decidir cuál funciona mejor para ti. Entonces va esta tipografía forestal. He decidido ir con la familia Roboto Superfund. Ahora se llama Super Family porque obtienes diferentes tipos de letra dentro de esa familia y diferentes fondos con entonces esas familias, por ejemplo, por ejemplo, el logotipo aquí y allá Los títulos de los puestos de bloque se escriben usando la firma, el Roboto Condensed y su versión audaz de fondo. Pero el texto principal del cuerpo está escrito se escribe usando Roboto regular. Pero los enlaces aquí están escritos usando Roboto, cursiva y, por supuesto, el texto leer más aquí y están usando Roboto bold que condensado pero roboto bold y todos estos tipos tienen textiles de texto separados aquí mismo. No obstante, creo que en este caso no vamos a crear textiles primero. Pero creo que los vamos a crear en última instancia. Es decir, con diseños como este. ¿ Es qué? Hasta que se termine, siempre es un progreso de trabajo, ¿ verdad? Por lo que podrías cambiar de opinión de vez en cuando o con más frecuencia que de vez en cuando y en cuanto a cómo deberían ser tus fondos. Entonces hasta que estés completamente decidido, digamos, los títulos de los puestos de sangre o los enlaces, no deberías. Creo que tal vez no. No deberías. Pero es una buena idea. Puede ser esperar hasta que tengas el concepto todo resuelto y luego solo para crear el textil. Y creo que este es el enfoque que vamos a tomar en este diseño porque trabajar con textiles en un amigo a diseñador puede ser un poco complicado. Entonces tal vez usar esta manera te ayude a aprovechar lo suficiente los textiles en diseñador y te permitirá trabajar con ellos un poco más eficientemente. De acuerdo, así que nos cubrieron el marco del alambre. Tenemos descomponemos este diseño y sabemos qué activos vamos a necesitar. Además no recuerden el recuerdo No olvides que tenemos thes thes secciones puestas contra capas separadas. Entonces conseguimos la capa de encabezado. Nos dieron al héroe en capas la barra lateral de la capa de sección, pie de página. Y, por supuesto, todo este diseño se está mostrando se está poniendo contra una cuadrícula que se puede ver aquí mismo . Entonces creo que tenemos todo bastante bien cubierto. No se sorprenda si, de vez en cuando voy a estar refiriendo de nuevo ya sea al marco de alambre o preferentemente este diseño principal, porque no quiero un quiero pasar demasiado tiempo mirándome, tratando de averiguar cuál era el original. Perdóname si solo de vez en cuando, simplemente echa un vistazo al Swische original y así puedo mostrarte las técnicas necesarias para crear este diseño un poco más rápido sin tratar de averiguar el tamaño del teléfono o el color. Entonces, sin más preámbulos, vamos a sumergirnos en el proceso de diseño principal. Y empecemos con la creación del Sombrerero 57. 4Cómo crear el logotipo y la nav: Entonces como pueden ver, vamos a crear nuestro diseño y en base a la cuadrícula de 12 columnas que usamos antes. Entonces si quieres trabajar conmigo, solo puedes descargar los mismos cinco que podías descargar cuando estábamos creando nuestro diseño anterior y simplemente trabajador usando ese archivo. Pero antes de empezar a diseñar algo, voy a crear una capa para nuestro encabezado. Entonces en el panel Capas, simplemente voy a dar clic en la nueva capa. Yo vengo y voy a llamarlo. Encabezado la tiene igual que así cabeza así, y la voy a mover a debajo de la rejilla. Por lo que voy a empezar con crear la bolsa de tierra para el encabezado y déjame simplemente echar un vistazo rápidamente al original para comprobar las dimensiones de este fondo. Y como se puede ver en el panel de transformación, tiene 1920 pixeles anchos y mide 100 pixeles de alto. Y por supuesto, tiene 1920 píxeles de ancho porque este es el with off our view port fuera de nuestra página web. Entonces lo que voy a hacer es asegurarme de que, por supuesto, estoy en la capa de encabezado agarró la herramienta de rectángulo. Crear un rectángulo que va a tener, como, muy arbitrario en las dimensiones mundiales. Porque ahora mismo voy a asegurarme de que mi punto de referencia aquí está establecido en esta esquina superior izquierda para poder moverlo. Teoh la esquina superior izquierda de mi página web. Entonces simplemente voy a entrar cero para el valor X y cero para el salvaje. Por qué valor Al igual que Para que se chasqueó a esta esquina superior izquierda justo aquí. Y ahora simplemente voy a Teoh. Bueno, voy a asegurarme de que esta opción de enlace no esté marcada. Entonces voy a teclear en 1920 y voy a teclear 100 para la altura, así como así. Y ahí vamos. Conseguimos nuestros antecedentes creados. Por supuesto, todavía necesitamos darle un color de relleno adecuado. Entonces voy a dar clic en esta muestra más oscura aquí mismo y ahora podemos empezar a crear nuestro logo de pozo. Por lo que nuevamente me voy a referir a mi a mi original. Yo sólo quiero ver el tamaño de esto fuera de este frente ya que pueden ver son 42 puntos como ese , y es un por supuesto, escrito en la refutación condensada, audaz. Y por cierto, si no tienes instalado este Roboto Super Super Family en tu sistema, tendrías que ir a los fondos de Google Web y simplemente descargado y desde ahí. Pero ya discutimos cómo hacerlo. Entonces creo que no deberías tener ningún problema y solo descargan en ese frente e instalándolo. Diseñador Afinitor Insider. Entonces sólo voy a agarrar el textil artístico, igual que así por supuesto voy a asegurarme de que estoy en la capa correcta. Entonces con el textil artístico, simplemente voy a hacer clic y arrastrar para empezar a crear texto. Voy a poner el frente a Roboto condensado así como así, y voy a elegir su versión audaz. Y voy a escribir 42 por su tamaño y cambiar el color a este, uh, uh, pálido bienvenida de nuevo pago de un color rosa oscuro al igual que eso. Y voy a teclear a adío remolcado igual que así. Y simplemente voy a hacerlo y por supuesto necesito moverlo a la capa correcta, y simplemente voy a moverlo hacia arriba hasta que coincida con su mi, uh bueno, podría arenar. Y por supuesto, simplemente podemos seleccionar a estos dos tipos para asegurarnos de que este logotipo ah esté sentado exactamente en medio de nuestro fondo. Y simplemente voy a ir a la línea fuera del panel de arreglos y elegir a este tipo aquí mismo . Dice una línea de metal al igual que eso. Presionar OK Y terminamos con el logo. Por lo que a continuación, crearíamos esto esta voluntad este sistema de navegación junto con esa madera, el pozo lo hará artículos de redes sociales. Entonces otra vez, déjame solo comprobar la altura de este tipo. Es ah Roboto medio 16 puntos, como se puede ver aquí mismo. Entonces simplemente voy a agarrar de nuevo el textil artístico. Haga clic y arrastre. Voy a cambiar el color a Blanco que voy a teclear y tal vez a casa igual así Déjame simplemente moverlo contra el cuarto trasero más oscuro. Por lo que usted concede. Y así fue roboto a roboto mediano roboto medio ocho en la altura fue 16 creo. Permítanme que vuelva a comprobar eso. 16 y ah, Lo que queremos hacer es Queremos asegurarnos de que todos estos enlaces de navegación estén escritos usando letras mayúsculas Onley. Entonces voy a ir al panel de personajes y voy a elegir esta opción aquí mismo que dice todas las gorras. Y si solo hago clic en él, se puede ver que esto todas estas letras se están cambiando a fieles a sus versiones mayúsculas . Pero por lo que recuerdo, nuestro enlace de inicio fue escrito usando este color rosa, lo que indica que esta es en realidad la página activa. Entonces lo voy a cambiar por el color rosa, así así Ahora lo único que queda por hacer aquí es simplemente duplicar a este tipo a la derecha, y estoy manteniendo presionada la tecla de control y la tecla de turno para constreñir el movimiento al igual que por lo que. Y voy a cambiar el color dedo del pie blanco, y voy a teclear algo diferente, por ejemplo, tal vez galería y notar que no tenemos que presionar el bloqueo de mayúsculas ni la tecla de turno para hacerlos estas letras becerro viejo. Porque lo son, Todavía tienen asignados los viejos atributos de gorras justo aquí. Eso se dijo, apenas un segundo para ir en el panel de personajes. Entonces ahora simplemente podemos dejarme cerrarlo. Ahora simplemente podemos colonia a este tipo a la derecha otra vez y ah, teclear y tal vez mi equipo y tal vez uno más que simplemente va a ser, eh digamos tal vez contacto así. Entonces ahora tenemos la navegación. Ah, sistema de navegación que creé. Voy a mover un poco a estos tipos a un lado, así como así. A lo mejor todos ellos, pero más lejos a un lado. Entonces lo que tenemos que hacer ahora es que tenemos que hacer es añadir estos chicos aquí mismo, estos iconos de las redes sociales justo aquí. Entonces para eso, vamos a usar el mando policiaco. Y creo que creo que podríamos hacer eso en el siguiente video porque vamos a hacer algo de edición con nuestros iconos de redes sociales. Entonces creo que sería mejor que hiciéramos eso en el siguiente video 58. 5Letremos añadiremos íconos de iconos de redes de redes sociales: Entonces antes de empezar a colocar en los iconos de las redes sociales, déjame solo comprobar rápidamente qué tan grandes son. Déjame acercar un poco y déjame hacer click en este tipo de aquí. Es Ah. Bueno, digamos que son 16 píxeles aquí mismo. Entonces lo que voy a hacer es que voy a dar click en la herramienta de imagen del lugar, y voy a navegar hasta donde guardo mis iconos de redes sociales. Y voy a empezar con el ícono de Twitter y simplemente voy a golpear abierto y lo voy a colocar en algún lugar aquí. Por supuesto, es demasiado grande, así que esta vez lo voy a hacer más pequeño. Voy a asegurarme de que la opción de relación de aspecto de bloqueo esté rota. Y voy a teclear 16 para hacer de este tipo manera, mucho más pequeño. Pero por supuesto, el color de este icono es, bueno, no bueno. Se supone que es blanco, pero como ya sabemos, simplemente podemos cambiarlo en nuestro panel de herramientas. Tenemos que ir a la opción de documento agregado, y tenemos que simplemente elegir color blanco como ese y cerrar a este tipo para que ahora podamos tener Ah así que ahora podemos tener a este ícono colores inadecuados. A continuación, simplemente puedo colonia a este tipo a la derecha ir a reemplazar documento y elegir tal vez Facebook. Pero de nuevo, como puedes ver, nuevamente tenemos que tener que cambiar el color. De verdad deseo un amigo a diseñador. Bueno, supongo que no es una caja. Entonces puedo decir que realmente desearía que arreglaran este bug, pero creo que sería mejor si acabaran de agregar disfuncional que si soy colonia en este tipo este documento imbedded estoy clonando sus atributos también para que pudieran ser un clon. Al igual que en este caso, el collar podría ser clonado también al objeto clonado. Pero como no lo es, todavía tenemos que ir a agregar un documento, click en el blanco, una muestra, luego duplicar el Facebook. Vengo a la derecha duplicada déjame simplemente duplicar, igual que otra vez reemplazó el documento con el logo de Instagram, agregó documento y nuevamente clonó a este tipo seleccionado y ropa a la derecha. Sustitúyalo por un logotipo de arresto pellizco editado ed, color blanco. Y ahí vamos. Nos dieron el concierto ojo creado. Entonces lo último que hacer aquí sería alinear todo bien. Entonces lo que quiero es que quiero distancias iguales entre todos estos tipos, no sólo los enlaces de texto, sino también con los Aiken. Entonces lo que voy a hacer es que primero voy a crecer este logo de Pinterest I instagram, Facebook, Twitter y todos estos tipos. Y voy a asegurarme de que se estén alineando apropiadamente a inconformes hacia el medio , así así Ahora podría moverlos a la derecha y alinearlos con mi con mi cuadrícula. Simplemente agréguese un poco, así. Esto debería estar bien. Entonces lo que quiero hacer en este momento es que quiero asegurarme de que la distancia entre todos estos chicos se aliente igual. Entonces no sólo entre los enlaces de texto, sino también entre los lings de texto e iconos de redes sociales. Entonces lo que voy a hacer es simplemente voy a desplazar click en todos estos elementos para seleccionarlos . Pero sólo estos chicos y los iconos de las redes sociales también, igual que eso. Y voy a ir a esto. A lo mejor déjame moverlo un poco hacia abajo para que puedas ver todo mejor. Entonces voy a ir a este panel de rango y desde la opción alinear horizontalmente, voy a elegir el espacio horizontalmente. Y si quieres dejarlo, como también distribuye, bueno, puedes hacerlo. Pero si quieres asegurarte de que la distancia entre todos estos elementos es exactamente la que quieres, puedes simplemente en cheque, ordenar, distribuir y simplemente jugar con este deslizador aquí. A lo mejor. Veamos algo alrededor de 20 o 24 píxeles. Supongo que esto debería hacerlo ahora solo podemos mover a estos tipos a la derecha y asegurarnos que estén bien alineados con nuestra grilla. A lo mejor sólo un poco a la derecha. Algo así. Y podríamos simplemente agruparlos por el Presidente Control G en nuestro teclado. Entonces ahora que todos estos chicos son linajes creados, zoom hacia fuera, Todos estos tipos están creados. Podemos volver a asegurarnos de que todo está siendo está siendo muy bien alineado. Supongo que tengo que agrupar de nuevo a estos tipos igual que así, Control G. Así que sólo podemos asegurarnos de que estén alineados apropiadamente así, y que estén alineados adecuadamente en relación al fondo, solo así. Entonces ahí vamos. Tenemos tenemos este Sombrerero creado. Si solo presiono tab, podemos ver nuestra página web. Supongo que este tipo se movió un poco. Podemos ver nuestra página web en toda su belleza. Bueno, sitio web, es solo que es solo nuestro encabezado. Podemos rápidamente solo tal vez deshacernos de la grilla así como así. Para que podamos ver. Y nuestros y allí fueron guías para que podamos ver todo mejor. Entonces esto es lo que nuestro y esto es lo que luce nuestro encabezado. Creo que parece que se ve un poco minimalista, pero al mismo tiempo, este color rosa es ese en un poco. Ah, bueno, hace que todo este encabezado se vea un poco más animado. Por lo que el siguiente orden del día sería crear nuestro slider. Permítanme simplemente alejar el zoom para crear nuestro slider para crear estas fotos para crear estos bloque. Bueno, en realidad están llevando a un poste de bloque. Entonces supongo que podríamos decir bloquear títulos de post y esa navegación. Pero lo vamos a hacer en el próximo video 59. 6Vamos a añadir las primeras imágenes: por lo que como de costumbre, vamos a empezar a crear la sección de héroes creando y capa inapropiada para esa sección. Entonces de nuevo, simplemente voy a añadir una nueva capa y ah, nombrelo. Ah, héroe. Y lo voy a mover por debajo de la capa de encabezado así. Entonces lo que voy a hacer de nuevo es simplemente voy a agarrar la herramienta de rectángulo y quiero que sea tan peaje así como amplia como la propia página web. Y simplemente lo voy a posicionar correctamente, así como así. Porque lo que vamos a hacer ahora es que vamos a crear tres contenedores separados para estas imágenes. Eso para tener tres contenedores separados, necesitamos divinar este rectángulo aquí mismo. Déjame sólo así los hombres siempre tan ligeramente así así. Por lo que en esta etapa, la altura no es importante. Será en tan solo un segundo. Pero por ahora, lo importante es que nuestro rectángulo se está extendiendo a través de nuestra página web a través de nuestro puerto de vista . Entonces como queremos tener tres contenedores separados, necesitamos dividir nuestro rectángulo por tres. Entonces ahí dentro y simplemente voy a primero, voy a asegurarme de que estoy dividida desde el punto de anclaje stop izquierdo. Entonces lo que voy a hacer es simplemente voy a teclear ah slash tres, que va a dividir el este un rectángulo por tres, así como así. Y como puedes ver, es con sus 640 pixeles así. Entonces si quiero que este contenedor sea un cuadrado como aquí que tengo que simplemente conformar la altura igual a la con. Entonces en este caso, 640 al igual que ahora, otra cosa que vale la pena señalar bien es que las distancias principales entre secciones o dentro secciones y entre elementos principales fuera de secciones suelen ser de 25 píxeles o el doble de lo que es de 50 píxeles. Por lo que la distancia entre estos contenedores es esta brecha aquí mismo. Este margen es de 25 píxeles, y el margen entre este deslizador y el heller también es de 25 píxeles. Entonces ahora simplemente voy a mover a este tipo hacia arriba los snaps con el encabezado y por el valor y otra vez, voy a asegurarme de que mi punto de referencia se ponga bien en la parte superior justo aquí. Y yo simplemente voy con el dedo del pie. Agrega 25 así. Pero voy a mover a este tipo 25 píxeles hacia la izquierda porque quiero crear este tipo de carrusel afectado este thes contenedores están realmente saliendo del puerto de vista. Entonces de nuevo, voy a mover a este tipo al pozo, lo voy a mover a la izquierda por 25 píxeles. Entonces para el valor X, simplemente voy a escribir un menos 25 igual. Y entonces simplemente voy a clonar a este tipo a la derecha hasta que se enganche con el original. Y yo voy Teoh, agrega 25 así. Y luego voy a clonar a este tipo a la derecha broches con el original que voy a sumar 25 así. Entonces ahora tenemos tres contenedores separados que bueno, el contenedor izquierdo y el contenedor derecho son como salir de nuestro puerto de vista y por supuesto, ellos en el medio. Llegamos a todo este contenedor cuadrado. Por supuesto, todos estos tipos son contenedores cuadrados, pero estos podrían parecer que son más bien un rectángulo. Ya que podemos ver esta brecha de 25 píxeles justo aquí. Entonces de nuevo, si simplemente me aseguro de que estos tipos estén en la capa correcta en la capa de héroe, ahora puedo usar otra. Otro truco a hacer para hacer Estos chicos se comportarán como si fueran contenedores de imagen. Entonces si acabo de girar abierto en mi panel de capas, se puede ver que tengo todos estos rectángulos aquí mismo. De acuerdo, Así que rápidamente me aseguré de que mis rectángulos estén en el jugador correcto que las capas la derecha estén aburridas, y podría asegurarme de que se estén mostrando en la dirección correcta. Por lo tanto, déjame comprobarlo rápidamente. Entonces voy a mover a este tipo hacia abajo. Entonces ahora todos estos rectángulos viejos mientras estos cuadrados pueden funcionar como nuestros contenedores de imagen y eso es tan fácil como simplemente seleccionar uno y luego asegurarnos de que la inserción dentro opción Selección esté marcada igual y entonces si simplemente lo haremos cualquiera exprimidor el lugar imagen a o ve al menú del archivo y luego coloca navega al lugar donde mantenemos nuestras imágenes ahora debilitan simplemente, solo elige una imagen Tal vez. A lo mejor esta imagen del café. ¿ Por qué no? Y ahora, si solo hacemos click, esta imagen se va a colocar dentro de ese contenedor rojo. Ese ángulo en rascacielos se cuadrará en nuestro caso, y ahora simplemente podemos simplemente tal vez hacerlo solo un poco más pequeño. Podemos. Puedes moverlo si queremos. Al igual que eso. Entonces otra vez. Seleccione el rectángulo. Asegúrese de que esta imagen de inserción se insertará en el interior. la opción de selección. Colocar una imagen. Simplemente navega hasta la carpeta donde guardas tus imágenes. Y tal vez esta vez voy a elegir, um, algo un poco más de contraste. E. O tal vez no. A lo mejor. Vamos a mantener vamos a quedarnos dentro del bar y el tema del bar. Voy a ir con el click de pastel, así que asegúrate de que sea solo un poco más grande. Um, tal vez así, esto debería estar bien. Y la última otra vez, Selector. El rectángulo recogido en su interior. Inserta dentro opción de selección y coloca la imagen Y tal vez esta vez el sándwich. Ya que ya que estamos en un bar, sólo permanezcamos en el en el bar, el tema del bar, Uh, así. Entonces ahí lo tienes. Es así como puedes simplemente usar lo más simple. El más simple realmente dice crear contenedores de imágenes de buen aspecto. Entonces conseguimos el encabezado que tenemos. Llegamos a esta sección de héroes casi terminará. Le agregamos las imágenes. Creamos los rectángulos y luego los convertimos en portadores de lugar de imagen. Pero por supuesto, lo que aún necesitamos no es la navegación que serán las flechas de izquierda y derecha y, por supuesto, el bloque les publique títulos. Pero empecemos a hacer todo eso en el siguiente video. 60. 7de añadir el sombrea a las imágenes: Entonces voy a empezar a crear ah, las piezas restantes de nuestro slider carrusel comprobando primero la fuente que agregué al diseño original. Entonces, como puedes ver, está escrito usando la versión condensada Roboto, audaz del fondo, y está fijada en 46 puntos. Y, por supuesto, en el medio. Uno no es usar en el blanco lleno sino el agradecido porque está indicando que es que está siendo, como, como, Resaltar eso, que está en el enlace activo ahora mismo. Entonces de vuelta con nuestro diseño, simplemente voy a grap el marco textil igual que así. Por supuesto voy a asegurarme de que estoy en la capa correcta y simplemente voy a hacer clic y arrastrar así como así, y voy a poner el frente a Roboto Condensed y voy a elegir. Es por supuesto, versión audaz. Asegúrate de que se ajuste a 46. Creo que es yo creo que fueron 46. Yo lo voy a hacer blanco, y ahora simplemente voy a elegir texto insertar texto texto relleno al igual que así, y lo voy a alinear al centro. Voy a hacer este marco un poco más pequeño así que nos quedan sólo con tres líneas de texto, igual que para que solo lo mueva un poco a la derecha y lo voy a mover hacia abajo al verano. Aquí, esto sería encontrarlo. Entonces ahora voy a mover a este tipo a la derecha así como así, y este tipo a la derecha también, Al igual que ahora voy a convertir a este tipo a este pedazo de texto para pensar, y ya es un poco más visible, solo al igual que así. Pero como pueden ver, desde que clonamos este primer texto de relleno una y dos veces a la derecha, bueno, sigue siendo el mismo texto, ¿ verdad? Pero podemos cambiarlo rápidamente simplemente seleccionando primero una pieza fuera del texto de relleno, luego yendo al menú de texto, insertando relleno, texto. Basta con hacer clic en él para de seleccionarlo y luego seleccionarlo una vez más con el fin de pegar alguna otra pieza de texto. Entonces de nuevo, de seleccionar, insertar texto de relleno y luego insertar texto de relleno de nuevo. Entonces es ah, otra pieza de texto. Ahora mismo, sin embargo, las posibilidades son que de vez en cuando tu texto podría no ser demasiado visible contra cierto fondo contra cierta imagen. Banqueros como en este caso, si solo lo dejaran como blanco, se puede ver que no podemos hacerlo. Realmente no lo podemos ver en contra ahora. Esto se va a pegar aquí mismo. set de Ifit Teoh a rosa. Entonces, sí, es visible, pero sin eso, no es realmente visible. Entonces, ¿cómo podemos arreglar eso ahora? En situaciones como esta, es una buena idea tener algún tipo de tierra de bolsa de diapositivas. Agrégalo a tus contenedores de imagen de voluntad aquí mismo. Entonces lo que voy a hacer es simplemente crear un rectángulo que va a ser, bueno, bueno, lo mismo que nuestra imagen Assauer de marcador de posición. Pero se va a poner sobre la imagen, y luego le vamos a añadir un int Grady y dejar caer su opacidad hacia abajo. Sé que suena como mucho, pero es realmente, realmente fácil. Entonces confía en mí, sólo confía en mí en este. Entonces voy a entrar en un selectivo, este marcador de posición de imagen, y cuando vaya a mi panel de capas, se puede ver que me dieron este café aquí mismo. Es un rectángulo con una imagen de café en su interior para que lo que pudiéramos hacer. Y en realidad, lo que tenemos que hacer está bien, creo que sería simplemente más fácil. Teoh duplicar este contenedor de imagen que tenemos aquí. Entonces simplemente lo voy a encontrar en mi panel de capas. Este es este tipo de aquí y se puede ver que dice rectángulo y que hay este ser de imagen de café va a poner dentro de este rectángulo. Entonces lo que podríamos hacer es simplemente hacer click derecho sobre él y elegir duplicado. O siempre podrías usar el atajo de control más J. Y lo que hace es crear un duplicado de esta imagen de este pozo, objeto entero encima de él. Entonces tenemos un rectángulo y tenemos una imagen de café aquí mismo. Entonces lo que podríamos hacer es simplemente seleccionar esta imagen de café así. Y si acabamos de eliminar, se puede ver que nos acaba de quedar con un rectángulo plano. Y si vas a la herramienta de campo al igual que así, podemos cambiar el tipo de la rellena de dos lineales sólidos para crear un int Grady. Y si lo sabes, click en este ícono aquí mismo, podemos cambiar el testamento la capacidad, la posición, por supuesto, el tipo también. Pero lo que queremos aquí es que queremos cambiar este color de gris a blanco simple así como así, y dejar caer su opacidad por todo el camino a cero, así como así. Y ahora simplemente podemos seguir usando el filtro mover el Grady int hacia arriba igual que así. Justo así. Por supuesto, todavía podemos dar click en nuestro int Grady y tal vez cambiamos este collar a avión en negro así como eso. Y si quieres, solo puedes dejar caer su opacidad. Digamos que tal vez 15 así, y ya se ve mucho mejor. Entonces otra vez, como la repetición me dejó simplemente agarrar a este tipo. Este, uh, este rectángulo y voy a volver a duplicarlo. Deshazte de la imagen dentro de este tipo de aquí. Entonces usar el filtro cambiará el relleno a lineal cambiado un Grady int este Grady en color de gris dos blanco liso bajan su capacidad hasta 50 o tal vez incluso cero. Al igual que así, cambió el color de este tipo a negro, cambie su capacidad a 50 como así y luego simplemente traiga a este tipo de abajo a arriba así como así. Entonces ahora nuestros estaban bien, los títulos pueden ser visibles un poco mejor. Entonces si ahora solo cambio a este tipo de rosa a blanco, puedes ver que es que es visible mucho mejor. Entonces otra vez voy a agarrar. Este es un rectángulo sándwich. Voy a duplicarlo así como así. Y de nuevo, voy a deshacerme de esto de esta imagen, así y otra vez Ir a la herramienta de relleno, cámbiala de sólidos demasiado lineales y cambiar el int Grady. Vamos sólo con cero opacidad Esta vez, cambiemos. Cambiemos este color a negro liso, igual que otra vez, cambiemos la opacidad al 50%. Y movamos al Grady de abajo a arriba, así como así. Y ahí vamos. Nos dieron el slider el carrusel creado excepto fuera de curso para la navegación que vamos a crear en el siguiente video 61. 8Letremos añadiremos botones de guerra: Entonces antes de empezar a crear en la navegación de mientras para nuestro cuero Carrizalez, creo que deberíamos hacer alguna limpieza sencilla, sencilla. Es decir, quiero asegurarme de que todos estos elementos, todas estas piezas estén bien agrupadas y etiquetadas. Entonces lo que voy a hacer es simplemente voy a hacer clicker ambos botones del ratón y simplemente voy a seleccionar a estos tipos y presionar control. G. Y soy una celeb presionando tanto los botones izquierdo como derecho del ratón a, con el fin de seleccionar en elementos ajustar por fragmentos fuera de sus fuera de sus cajas de límites. Entonces de nuevo, simplemente voy a dar clic y seleccionar. Pero a veces no funciona correctamente, y realmente tienes que volver a hacer clic solo para asegurarte de que Zebina seleccionó correctamente. Entonces otra vez, haga clic y recoja y seleccione, igual que así, Control G. Y ahí vamos. Entonces ahora quizá podamos etiquetar a este tipo como, eh, digamos imagen uno. Ahí vamos, entonces. Este tipo como, uh, imagen a y el tercer tipo como imagen imagen tres. De acuerdo, entonces ahora vamos a crearlo de la navegación, y eso va a ser tu bastante fácil. Lo que voy a hacer es asegurarme de que mi pozo, por este momento que mi trazo esté establecido. Teoh este color oscuro y voy a agarrar el lápiz y voy a dejarlo en esto en su modo de pluma por defecto. Y simplemente voy a mantener el turno y hacer clic en uno dos veces y luego rápido una vez más. Con el fin de crear este tipo de una flecha de este tipo tenía justo así. Permítanme acercar un poco más. Entonces ahora vamos sólo un agarrador, el dedo del pie rectángulo y mantenga pulsado el turno, la clave para crear un cuadrado que se va a ver algo así. Entonces ahora lo que podemos hacer es simplemente asegurarnos de que estos tipos estén siendo alineados adecuadamente . Y si quieres, siempre puedes tal vez hacer más grande a este tipo. Si eso es eso, esa es tu elección bien diseñada. Pero creo que lo voy a dejar para dejarlo así. Ahora, claro, no queremos que Teoh seleccione ambos Estos chicos los clonan a la derecha y simplemente los reflejan para crear la segunda bestia fuera de nuestra navegación. Pero como mencioné, y si le echamos un vistazo al original, se puede ver que este tipo está Bueno, esta flecha se está poniendo contra un fondo rosa porque esto solo indica que cuando esta flecha está siendo seleccionada, cuando el usuario está haciendo clic o tocando en él, se supone que debe cambiar. Entonces en este caso, simplemente voy a Teoh, tal vez presione un turno, actúa para intercambiar para llenarse de trazo y, por supuesto, cambié un trazo a este color rosa y asegurarme de que se está poniendo debajo de la flecha así como así. Ahora que tenemos estos chicos se crean. A lo mejor antes de que los mueva hacia arriba, déjame solo tal vez convertir a este tipo de trazo a blanco. Lo mismo para este tipo. Y por supuesto, ya que son forma de hornear, rápidamente podemos hacerlos más pequeños. Haz algo así y agarra a estos tipos. A lo mejor todo grupo rápidamente los puso en algún lugar aquí así y luego agarrar a estos chicos ponerlos en algún lugar aquí y ahora podemos simplemente agruparlos así y asegurarnos de que estén alineados para disentir entraron correctamente al inconformista, así como así. Por supuesto, si quieres, puedes dejarme solo hacer que el zoom sea realmente rápido. Si quieres. Quizás puedas hacer el trazo, pero más grande. Entonces en lugar de Juan, sólo tratemos de igual manera para así lo mismo va para esta flecha en lugar de una. Hagámoslo así es sólo más visible. Y por supuesto tenemos que hacer lo mismo para esta flecha en lugar de una. Hagámoslo dos, así. Y si ahora simplemente alejamos el zoom, esto es lo que nuestro Esto es lo que luce nuestro slider Curso. A lo mejor. Agarremos a estos tipos y asegurémonos de que estén siendo alineados adecuadamente. Por supuesto, verticalmente también. Vamos a bajarlos así. Y ahora si echamos un vistazo a nuestro diseño del dólar, está empezando a lucir. Luce bien. Obtuvimos el encabezado con el logo con la navegación con los iconos de las redes sociales. Tenemos el deslizador del carrusel con ellos, las flechas encendidas, por supuesto, las diapositivas y ese texto. Entonces llegamos al brezo y a las secciones de héroes creadas. Entonces lo siguiente, lo que haríamos es pasar a las partes más complejas. Entonces nos avisaron. Ahora podemos pasar nuestro paso a tal vez este primer gran bloque presumir extracto de una sección, así que empecemos a crearlo en el siguiente video. 62. 9HVamos a crear un contenedor para la publicación de blog: Empecemos a crear un contenedor de imágenes destacadas sacando primero el grano. Yo quiero ver la grilla porque quiero saber cómo. ¿ Por qué disparaste al bloque Poste contenedor, Qué ancho debería ser. Porque cuando vas Teoh, cuando le echamos un vistazo el original y tomamos echamos un vistazo a la parrilla. Podemos ver que se está extendiendo a través de una cierta cantidad de columnas, y el cibernético también se está extendiendo a través de una cierta cantidad de columnas. Y en este caso, el poste de bloque se está extendiendo por las nueve columnas y decidir barra a través de tres goles porque nueve más a través de tres equivale a 12. Entonces en nuestro caso, tenemos que asegurarnos de que nuestro contenedor de postes A bloque Quiero decir, bueno, nuestro contenedor bueno, de imágenes destacadas se está extendiendo a través de nueve columnas. Entonces, como de costumbre, voy a empezar por crear una nueva capa así como así. Y voy a llamarlo, uh, uh, jactarse de sangre destacado. Tomemos eso no te gustó. Voy a bajarlo, así que simplemente voy a agarrar el rectángulo a, y voy a asegurarme de que tenga algún color visible adherido a él. pero tal vez a la película, y la voy a difundir a través de nueve columnas igual que lo voy a sacar para que coincida. Entonces toca a mi un héroe, una sección aquí mismo, así como así. Y déjame simplemente bajarlo un poco. Y lo que quiero hacer en este momento es que quiero moverlo hacia abajo en 25 píxeles. Entonces voy a sumar 25 al valor del eje Y, igual que eso. Y este es nuestro contenedor de imagen, Por supuesto, cuanto a su Ah, un zits. Ah, ¿qué? A lo mejor dejame solo el con también, porque puedo ver que no es demasiado. No lo es, también. Sí, este tipo que esta vez está bien. Se está extendiendo por exactamente nueve columnas, y como las faras, la altura de este contenedor va en este caso, es bastante arbitrario. decir, podrías dejarlo moral como un cuadrado si quieres, o puedes ir por la relación estándar 16 por nueve si quieres, y creo que voy a ir con esto algo así como 5 50 píxeles. Creo que se rompe eso obviamente, 16 por nueve. Es decir, es un Es un blawg fotográfico. Más bien Así no tiene que ser todo eso, como aspecto de video en términos off en cuanto a sus imágenes. Entonces ahora que tenemos este ah, este contenedor creó lo que podríamos hacer es quizás simplemente bajarlo para crear el contenedor para nuestros extractos de texto de pozo. Y este será el trasfondo de nuestros extractos de texto. Y voy a cambiar el collar de relleno a, bueno, este color blanco. Entonces voy a ir a muestras elegir Blanco, así como así. Entonces ahora tenemos Cuando eso tenemos a Teoh, déjame moverlas sólo un poco a la derecha y otra vez asegurarme de que estén muy bien alineadas con nuestra columna derecha. Como puedes ver, a veces solo Solo requiere un poco de ajuste para que todo píxel sea perfecto, igual que así. Pero es un yo creo que es importante. Por eso estoy poniendo atención a estos pequeños estos pequeños detalles. Entonces otra vez, ahora que tenemos estos chicos creados, podríamos simplemente otra vez y agarrar este rectángulo aquí y otra vez elegir insertar selección de sitio y encontrar una imagen inapropiada Tal vez esto. A ver. A lo mejor este gran Ben una foto. ¿ Por qué no? Sólo vamos a dar click. Demasiado cansado para colocarlo basado así. Extendido y ahí vamos. Conseguimos nuestra y conseguimos nuestra imagen principal creada. Por supuesto, esa fue la parte fácil. La parte más difícil es agregar todas estas piezas fuera de texto. Por supuesto, es un No es difícil agregar el texto, pero asegurarse y diseñarlos para que interactúen entre sí de la manera que deberían es a veces todo un reto. Porque échales un vistazo. Estos tipos tienen que ser un poco diferentes. Es decir, no sólo por dentro, sino también son cursiva y que estos chicos por completo, completamente no cursiva. Es un audaz, está condensado, realmente sobresale. Pero estos tíos también tienen que destacarse, pero de una manera un poco diferente. Tienen que ser informativos, visibles pero no obtrusivos. Entonces es ese tipo de equilibrio que con bastante frecuencia es difícil de lograr cuando estás creando estas elaboradas y elaboradas piezas fuera de texto. Entonces empecemos a crear nuestras piezas fuera del texto. Nuestro bloque presume de enlaces, extracto de texto y esta leer más enlace en el siguiente video 63. 10de añadir las primeros trabajos de texto: Entonces, antes de empezar a crear el texto, tenemos que arreglar un problema. Es decir, si ahora echamos un vistazo a nuestro contenedor de post extracto de bloque y miramos el fondo, podemos ver que no hay absolutamente contras entre estos tipos. No es intencional, debo admitirlo, pero en realidad nos va a dar un bien y la oportunidad de descubrir uno. Característica de afinidad. Diseñador en ofendió el diseñador se puede y colores no sólo a los objetos, sino también a toda la palabra de arte. Entonces en este caso, no tenemos que crear un rectángulo separado que posara como un rectángulo así como un fondo como tendríamos que hacerlo en otro software de diseño como Illustrator, simplemente podemos seleccionar el arte a bordo y debilitar. Basta con dar click en esta gran la muestra gris para que se vea así. Y así, llenamos todo el arte a bordo con un solo color, y ahora podemos ver que en realidad sí tenemos esto va a diferenciar este contraste entre nuestro entre el fondo y el contenedor justo aquí. Entonces vamos a iniciar el proceso de creación del texto para nuestro post de bloque excepto con la fecha Y a pesar de que es sólo una línea fuera siguiente, voy a usar su herramienta de impuesto marco para para este pedazo de impuesto porque el marco Texel lo hará tratar un cuadro delimitador que nos va a permitir alinear todo bien. Y va a hacer que el marco de datos sea reutilizable. Entonces déjame simplemente agarrar el textil marco y hacer clic y arrastrar a crear marco de texto. Ahora la diversión que vamos a estar usando es, por supuesto, Roboto. Es versión cursiva. El tamaño divertido es de 14 y por supuesto, el color es este muy, muy oscuro color negro. Ahora bien, si quieres, puedes usar algún texto de relleno. Pero voy a escribir en la fecha 2017 igual y ahora voy a hacer este marco más pequeño hasta que encaje bien con mi fecha con la fecha. Entonces no lo que tenemos que hacer es rezar en ella todo el camino hasta la parada esquina izquierda hasta que se encaje con ella muy bien, así y ahora podemos moverlo a la derecha por 50 píxeles. Recuerda que tenemos nuestro punto de transformación de origen punto original establecido en la parte superior izquierda y hacia abajo en 50. Al igual que en esta pieza de texto va a ser nuestra especie, como un ancla para crear el resto en piezas fuera de texto. Entonces ahora podemos hacer es podemos reutilizar esta pieza de texto para crear el título del post de bloque, así que simplemente lo voy a seleccionar, mantener el control en mi teclado y duplicado al igual que así Ahora voy a extender este marco de texto todo el camino a la derecha hasta que se encaje con el fondo. Y como es un texto de pozo, se convirtió es muy parecido a un objeto. Por lo que simplemente podemos restar 50 de nuestro frente del ancho para asegurarnos de que la distancia entre esto no igual que la distancia entre esta parte izquierda del amigo de texto sea la misma que la distancia entre la parte derecha del marco de texto y el fondo. Por supuesto, tenemos que cambiar el texto. Será el tamaño del texto encontrado y todo lo largo de eso. Pero primero, vamos a moverlo hacia abajo en 25 píxeles, así y ahora puede cambiar la fuente de Roberto a Roberto Condensed. Es versión audaz y déjame solo consultar con el original. Son 54 puntos. Eso perno remoto. Ah, condensado 54 Al igual que eso. Y por supuesto, todavía podemos llenarlo con alguien con algún texto ficticio. Si quieres escribir algo significativo, mi invitado, pero simplemente voy a ir a simplemente voy a insertar algún texto de relleno y extender los marcos de texto para que tengamos algo más o texto. 64. 11de añadir las piezas de texto que se componemos: Por lo que las siguientes piezas de texto son el nombre del autor, comentarios. Y por supuesto, tenemos estos iconos de las redes sociales aquí abajo. Entonces de nuevo podemos simplemente agarrar a este tipo, colonia hacia abajo hasta que encaje con el original, y simplemente podemos tal vez hacer a este tipo más pequeño. Al igual que así cambió el fondo de refutación a remoto, oh, oh, condensado de nuevo a Roboto Y esta vez, regular 14. Al igual que eso. Y en lugar de texto de relleno, sólo voy a escribir la palabra por. Pero antes de hacer eso, permítanme sólo agregar 25 así. Y voy a teclear por así como así. Y por supuesto, déjame simplemente hacerlo significativamente más pequeño, y voy a Kelowna a hacer lo correcto. Esto debería estar bien. Algo así puede ser un poco a la derecha, y voy a escribir el nombre del autor, y voy a extender este marco de texto, y en este caso, vamos a cambiar el color de este grado a verde y de regular a cursiva. Y entonces sólo tenemos que colonia a este tipo a la derecha para crear el enlace para comentarios como ese Y tal vez podamos simplemente agrupar a estos tipos. Y todo lo que queda por hacer es solo agregar los iconos de las redes sociales, estos chicos de aquí. Pero no quiero que mires, llévame dando click y haciendo todo esto todas las mismas cosas que hicimos cuando estábamos creando el encabezado. Porque de nuevo, sería sólo, ah, agregar los documentos, editarlos, reemplazarlos, cambiar el tamaño. Es decir, creo que ya conoces el simulacro. Ya sabes hacerlo. Entonces déjame solo tomar un atajo y solo copiar a estos chicos para que el proceso sea más rápido y agradable para ti. Entonces simplemente voy a copiar a estos tipos, y simplemente voy a seguir el ritmo del estado así y alinearlos adecuadamente así como así. De acuerdo, así que lo siguiente haríamos, uh bueno, lo siguiente que tendríamos que hacer es simplemente pedir prestado a este tipo, alinearlo con estos tipos de aquí abajo y dejarme comprobar rápidamente. Creo que vuelven a ser 25 pixeles. Entonces otra vez, movería a este tipo solo Justin hacia abajo, presionaría enter, y luego cambiaría el frente atrás a Roboto o regular 16. Consulta la pista y cámbiala de 16 a algo así como 22. Justo así. Déjame simplemente cerrarlo. Y entonces otra vez, sólo creo que todavía necesitamos a esto. Sí, estas Ah, estas piezas de texto aquí mismo, la fotografía, el estilo de vida y los viajes Eso simplemente voy a agarrar, sólo acercar un poco, agarrar a este tipo y volver a clonarlo así, hacer más 25 y escribir las etiquetas. Ahora vamos a extender este marco de texto así. Y la última pieza de texto que necesitamos es justo esto leer más botón aquí abajo. Entonces de nuevo, lo que podemos hacer es simplemente clonar a este tipo a la derecha y tal vez lo movamos un poco hacia abajo. Entonces es un poco más prominente, igual que así y para el personaje en el panel de personajes. Voy a cambiar, y me aseguraré de que estas letras estén escritas en todas las gorras, igual que así cámbialo de Alec derecho a yo creo que era medio, pero déjame solo comprobar rápidamente No, fue bobinado, algunos va a cambiarlo de medio demasiado audaz. Y claro que voy a teclear, leer más así. A lo mejor la alinearé a la derecha y a lo mejor cambiemos de verde a este color rosa . Por lo que sabemos que esto realmente fácil un enlace. Y ahora solo lo podemos agarrar de la hora, nuestro fondo y moverlo hacia arriba y luego solo sumar 52 lo 50 pixels. Pero no yo no quiero que se muevan. No quiero moverlo. Yo quiero sumar a su altura al igual que así. Y si ahora simplemente alejamos el zoom, podemos ver que creamos nuestro texto. Bueno, primero bloquearé a la mayoría. Excepto así conseguimos la imagen. Nos dieron el impuesto, nos dieron los iconos, nos dieron los enlaces y todo está buscando se ve realmente bonito. Si quieres, solo puedes ir tal vez agarrado este pedazo de impuesto y tal vez hacerlo un poco más pequeño. Y luego sólo tienes que añadir otro, otro párrafo para que se vea un poco. Y vamos a morder diferentes un poco más, supongo, animados. Pero solo recuerda que tendrías que asegurarte de que estas distancias vuelvan a ser iguales. Y tal vez cambiemos rápidamente las pilas por algo diferente, así como así. Por lo que sólo se ve tan un poco más dinámico. Pongámoslo así. Entonces ahí vamos. Nos dieron el primer puesto de bloque excepto creado. Nuestro siguiente orden del día sería crear las columnas con los dos y con ambos mundos, imágenes más pequeñas. Algunos retroceden con estas piezas más pequeñas piezas fuera de texto. Pero vamos a empezar a hacer eso en el siguiente video. 65. Empezemos a crear la cuadrícula de publicación de blog: en los próximos videos. Vamos a crear estos bloques de presumir extractos. Estas tarjetas aquí mismo. Ya tenemos el principal post de bloque destacado aquí mismo. Entonces ahora es el momento de agregarlas. Corte como mayor en la cuadra presume contenedor aquí abajo. Y como pueden ver, nos dieron dos columnas, la izquierda y la derecha. Y cada una tiene tarjetas postales de tres bloques. Eso supongo que se podría decir que hay tres filas y cada una aloja para bloquear carros de presumir . Ahora, lo que es importante entender aquí es que necesitamos Bueno, queremos mantener las mismas brechas entre estos elementos como nosotros como creamos el dedo aquí. Entonces lo que también es importante entender es que estas tarjetas van a ser como mucho, mucho más pequeñas que nuestro poste de bloque principal. Por lo que quizá quisiéramos considerar tal vez quitar algunos de estos elementos en lugar de agregar todas estas etiquetas, iconos de redes sociales, todos estos enlaces podríamos querer simplemente como un comercio ellos los elementos de diseño para más la sencillez y la usabilidad. Así que déjame volver a nuestro diseño principal aquí mismo, y déjame solo sacar rápidamente la cuadrícula Así que lo primero que voy a hacer es que voy a crear una capa separada para mi cuadrícula de postes de bloque. Por lo que simplemente voy a agregar una nueva capa y renombrarla para bloquear post grado. Ahora lo voy a mover por debajo de la cuadra. Post destacado así ahora. Entonces lo que queremos hacer en este momento es que queremos crear Ah, algo así como guías visuales que nos ayudarían a crear contenedores para nuestros carros. Entonces lo primero que voy a hacer es agarrar una sencilla herramienta de rectángulo. Voy a darle algo visible, fallado. A lo mejor esta sensación más oscura, así así Ahora voy a crear un crear un rectángulo que se va a estirar a través todas estas nueve columnas igual que así. Y déjame solo ver rápidamente si chico si alineé todo correctamente y creo que lo hice igual así Así que quiero tener una brecha de 25 píxeles entre este contenedor principal y mi siguiente conteniendo mi siguiente cuadrícula. Entonces, en el panel de transformación, simplemente voy a agregar 25 píxeles para el valor del eje Y aquí mismo. Pero solo recuerda fijar el punto original a uno de los puntos más altos aquí mismo. Puede ser ya sea centro izquierdo o derecho. Mientras sea un punto de arriba, estaremos bien. Entonces sólo voy a sumar 25 ahora. Para mantener brechas iguales entre nuestros elementos, tendríamos que crear una brecha de 25 entre Will 25 gap entre columnas para nuestras tarjetas, ¿ verdad? Entonces de nuevo, agarremos la herramienta de rectángulo y esta vez creemos tal vez como unos rectángulos más verticales, así como así. Y a lo mejor voy a cambiar su color a algo. A lo mejor este color rosa para que puedas ver todo mejor, y yo me aseguraré de que tenga. Que sea con es exactamente 25 píxeles, igual que eso. Y ahora solo podemos agarrarlo, moverlo hacia arriba y asegurarnos de que está siendo una sonda que este frijol y vamos a incidente en el centro fuera de nuestra principal como nuestra guía visual principal. Entonces estoy seleccionando tanto el balón, estos rectángulos, y simplemente estoy posicionado en este tipo exactamente en el punto central, así como así. Pero claro que no vamos a necesitar este rectángulo, Así que voy a seleccionarlos todos. Y aquí voy a elegir restar de nuestras operaciones de camino así como así. Y ahora puedo estar seguro de que a la distancia entre mis contenedores es exactamente 25 píxeles. Ahora bien, si no ves estos rectángulos, pero aún así quieres tener algunas guías visuales que te ayuden a establecer el tamaño de los contenedores para las tarjetas que siempre podrías simplemente llevar a sus guías. Entonces primero voy Teoh, muéstrale a los gobernantes voy a ir a ver show rulers. O simplemente podrías ir con control más nuestro atajo que sería aún más rápido. Y simplemente voy a empezar a imprimir las guías así. Entonces sé dónde estaban mis contenedores y dónde empiezan mis contenedores así como así. Y podríamos sacar una horizontal así como así y otra vertical así. Entonces ahora si no quieres a Teoh, déjame asegurarme de que estos tipos estén bien posicionados. Entonces si no quieres ver esos rectángulos, simplemente puedes jugar con los chicos. Pero definitivamente recomendaría comenzar con los rectángulos. Para que sepas dónde posicionar a sus guías. Por lo que una vez que estén hechos, puedes Simplemente eliminar estos rectángulos. Y ahora todo lo que tendrían que hacer es sólo agarrar la principal esta imagen principal. Déjame simplemente apagar la cuadrícula, este contenedor principal, clonarlo y simplemente jugar con su tamaño y el texto. Pero creo que esto es algo que vamos a hacer en el siguiente video. 66. 13creemos la primera tarjeta de correo de blog de blog: De acuerdo, entonces ahora podemos empezar a crear nuestras tarjetas para la cuadrícula. Por lo que voy a apagar la visibilidad Los gobernantes por Presidente Control. Además son igual. Y voy a seleccionar todo en este bloque post capa destacada y voy a copiarlo y pegarlo toda mi capa de cuadrícula de bloque post, igual que así y ahora agrupar todo. Entonces en este momento, todo este contenedor es solo uno es solo un grupo. Déjame asegurarme de que esté en la capa correcta, así como así. Por lo que ahora simplemente podemos moverlo usando nuestras guías. Muévelo a la esquina izquierda de parada, así como así. Déjame simplemente alejar un poco rápido. Entonces ahora si empezamos a hacer a este tipo más pequeño así, podemos o hacer que todo sea más pequeño proporcionalmente y dejar bien el texto, intacto. Pero también podemos agarrar por este Top Bob esquina inferior derecha. Tráelo adentro. Y como pueden ver, ya que creamos nuestro texto también texto de relleno en vivo, los marcos de texto están cambiando. Están tratando de ajustarse al nuevo tamaño fuera de curso. No parece que ni remotamente esté bien, pero lo vamos a arreglar en tan solo un segundo. Pero antes de empezar Krug, bueno, sólo está en el impuesto. Déjame simplemente cambiar rápidamente este Big Ben una foto, algunos van a hacer doble clic en ella para navegar a ella y revelarla en mi panel de capas. Entonces voy a deshacerme de él igual que así y luego volver a seleccionar este rectángulo. Asegúrate de que tengo que incierta opción de selección lateral activada y simplemente navega hasta ellos un lugar donde guardo mis imágenes y tal vez vayamos con esta foto de pastel. Al igual que así voy a dar click justo al tamaño y ahí vamos. Llegamos a la imagen creada. Entonces como dije antes, podríamos sacrificar y la cantidad de elementos de diseño que tenemos aquí para como, más visibilidad, mejor visibilidad, usabilidad de batalla. Y creo que esto es algo que vamos a dio ahora mismo. Entonces, antes que nada, voy Teoh, gire bien, este spink el texto Sink en un texto verde. No quiero que lo sea. Ya no quiero ser un enlace, así que sólo lo dejaré así ahora para el para la fecha. Simplemente voy a hacer doble clic en él y expandido, así como así Ahora no voy a estar usando estos iconos de redes sociales. Voy a deshacerme de ellos. No voy a estar usando los comentarios, así que voy a hacer doble clic. En ocasiones hay que hacer doble clic unas cuantas veces para poder navegar a un grupo dentro de un grupo dentro de un grupo que sí funciona. Pero a veces solo tienes que hacer clic. Podría enrollado click dos veces en tan solo una vez más. Entonces ahora me voy Teoh, tal vez agarrar esto estas etiquetas y extenderlas solo un poquito solo un poquito. Y creo que voy a tal vez sólo dejar una etiqueta de herida así, y llevar a este tipo a la izquierda siempre tan ligeramente. Por supuesto, nuestros eran. Nuestra principal preocupación es este título aquí mismo, porque va a ser lo más visible en nuestras tarjetas, por lo que necesitamos asegurarnos de que sea visible, pero no es demasiado molesto al mismo tiempo. Algunos van a hacer doble clic en él, y voy a cambiar el fondo de un 54 a Vamos a ver 22. A lo mejor creo que esta bien y tal vez vamos a aumentar ligeramente la altura de la línea de 22. Entonces vamos a ver. 26. Permítanme simplemente alejar el zoom para ver cómo se ve. Esto estaría bien. Creo que podemos dejarlo así. Siempre podemos jugar con él más tarde. Así que ahora simplemente podemos agarrar nuestras cosas de texto principal Contenedor principal para nuestro post extracto y déjame simplemente rápidamente tal vez extendido un poco a tres líneas de movimiento de texto. Es sólo un poco arriba, igual que ahora. Podríamos quizá agarrar el título y moverlo un poco hacia abajo así como así. Y veamos cómo se ve ahora mismo. Creo que se ve bien. Debilitado. Podemos dejarlo así. Por supuesto, podríamos jugar toda la tarde con todos estos elementos, tratando de encontrarles el equilibrio perfecto, pero normalmente sólo un asunto fuera. Agregando un punto Teoh al tamaño del teléfono o dos puntos. Entonces te lo dejaré a ti. Pero creo que eso se ve bien en este momento, Así que voy a ir voy a dejarlo así. Entonces todo lo que realmente tenemos que hacer ahora mismo es solo copiar o duplicar este conjunto, todo este grupo a la derecha y luego a la parte inferior, cambiar el texto, cambiar las imágenes y nuestra cuadrícula estará completa. Pero empecemos a hacer eso en el siguiente video. 67. 14de añadir las tarjetas de tiempo: Ahora podemos duplicar nuestra primera tarjeta a la derecha y luego duplicar ambas cartas dos veces para que podamos crear nuestra cuadrícula. Entonces voy a agarrar primero esta tarjeta, mantener pulsado el control y cambiar para clonar a este tipo a la derecha, así como así. Entonces voy a cambiar, debilitar ambas cartas y otra vez, controlar, cambiar, hacer clic y bajarlas. Y por supuesto, queremos a estos tipos. Quiero decir, queremos que la brecha entre estos tipos sea de 25 píxeles. Entonces de nuevo, simplemente voy a agregar 25 así Y ahora de nuevo, podemos simplemente hacer clic en ambas tarjetas, hacer clic y arrastrar, por supuesto, por supuesto, manteniendo presionada la tecla de control. Y entonces podemos volver a sumar 20 cinco. Al igual que eso. Todo lo que tenemos que hacer ahora es que sólo tenemos que cambiar ese texto. Por supuesto, tenemos que cambiar las imágenes y y lo grande será básicamente completo. Entonces otra vez, me voy. Teoh, aísla esto. Ah, esta imagen de aquí. Y como pueden ver, lo conseguí aquí en el panel de control en el panel de capas. Solo puedo saber, borrar esta imagen y otra vez asegurarme de que la inserción dentro de la selección es opción está activada colocar la imagen y agarre, tal vez la foto del gato. Por qué no solo, como así hacer lo mismo con este tipo tan aislado en mi panel de capas. Agarra la imagen, quítala y de nuevo solo para insertar dentro de la selección igual y otra vez. A lo mejor añadir esta imagen así como esa. Entonces lo que también se podría hacer es que podríamos cambiar el texto. Sólo recuerda que como se trata de un impuesto de relleno, se trata de un filtro que aplica texto de relleno debilita. Aún así, podemos ir al menú de texto en Chek insertar texto de relleno y luego hacer lo mismo. Vuelve a insertar texto de relleno. Y esta vez diseñador de afinidad se nos da un texto ficticio de set off diferente Lauren Gibson. Podemos hacer lo mismo con la ducha va a publicar, excepto para que solo pueda aislarlo sin marcar el impuesto de relleno de inserción y luego simplemente haga clic en insertar texto de relleno de nuevo solo para que se vea un poco diferente. Entonces otra vez, voy a navegar a esta imagen, encontrarla en el panel de capas, eliminar esta imagen así que asegurarme de que estoy basado en la imagen dentro de la selección. Agarra esta imagen de café. A lo mejor esta vez. Y como puedes ver, es demasiado grande, así que tenemos que hacerla más pequeña. Entonces estoy sosteniendo la tecla de control ahora mismo. Teoh lo hacen más pequeño desde su punto central. Al igual que eso. Esto debería estar bien. Quizá cambiemos al menos el título. Entonces de nuevo, vaya al menú de texto e inserte otra vez otro conjunto de texto de relleno. Esta imagen, como así DoubleClick Oona para encontrarla en el panel de capas. Quitarlo en cierta selección lateral. Corrupta la foto igual que así sobre un poco alrededor. Por lo que llena muy bien nuestro positor. Haz lo mismo con esta imagen para que puedas ver a un diseñador de muebles realmente este, flexible a la hora de agregar imágenes, crear extractos de postes de bloque, realidad crearé en cualquier tipo fuera de cualquier tipo de imagen de los placeholders. A lo mejor hagamos este tipo pero más pequeño porque, como puedes ver, es un poco demasiado grande. Y una vez que conozcas las técnicas simples, realmente puedes acelerar el proceso y crear un blogger de aspecto profesional , portada , . Entonces solo voy a cambiar este texto así que tal vez cambió esta imagen. Cambia este título así en especie de texto de relleno. Y ahí vamos. Si ahora solo retrocedemos y tal vez apaguemos la visibilidad de nuestras guías. Al igual que así ahora tenemos la imagen principal hecha bloque post. Y luego conseguimos esta grilla aquí mismo, luciendo muy bonita. Ahora, recuerda que esto es solo 11 tipo de bien que puedes crear para mostrar otros puestos de bloques de voluntad más pequeños dentro de tu diseño. Siempre pudiste simplemente crearlo, tal vez duplicar esta imagen principal esta desalentadora publicación de bloque acaba de duplicar un par de veces y tener una lista fuera de grandes, grandes imágenes y contenedores de texto. O simplemente podrías crear una lista con la imagen de la izquierda y el texto a la derecha. Pero lo crearemos en la barra lateral. Por eso no quería, como, como, duplicar este concepto aquí. Y también se podría crear algo que se llama laberinto y arrepentimiento, que básicamente parece una alimentación de arresto pellizco. Entonces en un albañil arrepentimiento solo tienes imágenes más grandes puede ser un poco más de impuestos, por lo que los contenedores se ven como bloques de diferentes de diferentes tamaños. Entonces ahora sabemos cómo crear una cuadrícula de postes de bloque que creamos para primero. Creamos algunas guías visuales, recuerden que creamos a los rectángulos, luego las guías. Y luego acabamos de copiar este contenedor principal desde arriba. Teníamos que competir en nuestra a nuestra capa que cambiará su tamaño. Y luego simplemente cambiamos el texto en imágenes y nos deshicimos de algunos de los elementos de, como ciclos de redes sociales y algunos enlaces. Por supuesto, si quieres, podrías agregar un poco más. Algunos más estafadores, algunos más contenedores aquí mismo. Pero creo que por ahora me voy a ir. Esto tiene es. Pero yo, sin embargo, voy a añadir los posts más antiguos Batalla aquí mismo, y vamos a añadir un estrecho porque queremos que los usuarios tengan la capacidad de hacer click y en este botón para ver barcos más antiguos dentro de nuestro diseño. Pero hagámoslo realmente en el siguiente video 68. 15Letvememos añadir el enlace de publicaciones más: por lo que quiero hacer las cosas simples para ti. Entonces cuando estás recreando este diseño, puedes simplemente tu recreado más rápido y ah, y ver y echar un vistazo mejor a lo que está pasando aquí. Entonces he decidido sólo nombrar un, bueno, estas tarjetas, todos estos grupos. En consecuencia, he decidido darles números. Entonces, cuando solo miras este archivo, simplemente puedes trabajar con él un poco más fácil. Entonces ahora en realidad es crear esta publicaciones más antiguas. Ah, enlace aquí abajo. Entonces sólo voy a agarrarla las imágenes de taburete de texto artístico acercan rápidamente y voy a hacer clic y arrastrar y escribir en publicaciones más antiguas. Como pueden ver, estoy usando la fuente condensada Roboto. Déjame que lo haga. Esto va a color verde oscuro y no creo que quiera que sea así de grande. Hagámoslo un poco más pequeño. Probemos 20 20 debe estar bien. Y por supuesto, queríamos que nos pusieran exactamente en el centro entre estos chicos y queríamos que nos pusieran de la manera en que queremos crear una brecha de 25 píxeles entre en esto una pieza de texto y que los contenedores así nuevo. Lo que voy a hacer es que voy a sumar 25 así para bajarlo así. Por supuesto, yo quería t estar en la capa principal, así que voy a ponerlo en este bloque, arcos, arcos, cred, capa así como así. Y tal vez lo movamos a algún lugar aquí. Ahora bien, si echamos un vistazo al original, podemos ver que hay esta pequeña flecha aquí abajo. Entonces para crearlo, podemos usarla. Las formas personalizadas dentro de un diseñador de fader. Entonces simplemente voy a agarrar el dedo del pie de flecha y crear rápidamente un angosto que se va a ver algo así. Entonces desde el menú contextual, voy a elegir conocido por la izquierda y así así y prenupcial, traerles el espesor hacia abajo. A ver, tal vez 10%. Esto debería estar bien. Permítanme que rápidamente lo haga más pequeño al verano aquí. Y en cuanto a la derecha y el fantasma, cambiémoslo de flecha a púas así como así, y cambiemos su color. Y ahora mismo, si cambiamos su tamaño, se puede ver que aún podemos manipular esta flecha así. Y por supuesto, si sostienes la tecla de turno, podemos proporcionarnos para hacerla más pequeña hasta que sea algo así. No, déjame solo traerlo hasta algún lugar aquí. Y a lo mejor extenderé eso cada vez tan ligeramente. No quiero ser demasiado grande. Y por supuesto todavía podemos cambiar el grosor. Si queremos a Thio, claro, podemos cambiar los fines. Podemos cambiar el grosor de nuestra de nuestra flecha. Vámonos, tal vez con 20%. Entonces cambiemos el grosor de esto a 20% para recordar que va a ser realmente, realmente pequeño. Entonces tal vez sea una buena idea hacerlo un poco más visible, igual que así y tal vez solo haber sido más pequeño, ¿ verdad? Entonces ahora podemos moverlo un poco a la derecha, agruparlos y asegurarnos de que estén posicionados en algún lugar del centro, igual que vamos a sumar 25 y ahí vamos. Nos dieron la grilla creada. Nuestro próximo orden del día sería crear a este lado trabajadores. Ahora mismo llegamos a la cabecera. Tenemos este slider llegamos a la imagen principal. Bueno, bloque principal, poste contenedor. Y conseguimos el de block posts Grid, junto con el mayor presume un enlace aquí en la parte inferior. Entonces ahora pasemos realmente a crear el deslizador. Y exploraremos este tipo de diseño con mayor detalle a partir del siguiente video. 69. 16Deslumbremos el proyecto de Sidebar: en los próximos videos. Vamos a crear esta barra lateral, Así que vamos a echarle un vistazo a ella ahora mismo. En primer lugar, se puede ver que es un estiramiento a través de tres columnas justo aquí, y está dividido en separado. Llamémosles ideas, y cada idea es, ah, etiqueta está etiquetada aquí mismo. Entonces primero conseguimos un sencillo cuadro de búsqueda. Entonces es solo un simple rectángulo con algún texto dentro y ellos el ícono de la lupa aquí mismo. También tenemos esta primera idea, este primer contenedor que es esto sobre mi contenedor. Entonces llegamos a esta etiqueta. Llegamos a la imagen, y como puedes ver, es una Es una imagen cuadrada, algún contenedor de texto y contenedor y redes sociales. Yo vengo aquí abajo. Entonces conseguimos un simple, simple, como un contenedor de texto con una con otra etiqueta. Y luego conseguimos el contenedor más popular. Esta es una especie de feed de post blogger, pero está mostrando en Lee el más popular, el bloque más popular presume, y estos y estos barcos de bloque pueden ser los que tienen mayor número de comentarios me gusta o que se compartieron. La mayoría de las veces. Y como puedes ver, este pequeño contenedor rectangular está dividido en dos partes. Entonces a la izquierda nos dieron una imagen cuadrada, y luego nos dieron un contenedor de texto aquí mismo con una fecha con el por supuesto, um, con el título del post y la etiqueta. Y hay una pequeña línea que divide a estos tipos aquí mismo. Y por supuesto, el último contenedor no tiene esta línea divisoria, porque debajo de eso tenemos esta etiqueta que está empezando una siguiente sección contendrá los anuncios, que, por supuesto, en este caso son imágenes simples solo para representar los anuncios dentro de nuestro diseño. Así que empecemos a crear nuestra barra lateral ahora mismo, y empecemos a crearla con una nueva capa. Entonces déjame traer de vuelta esos paneles y déjame crear una nueva capa, y voy a llamarla barra lateral. Y ahora estamos listos para crear nuestra primera una sección en nuestra barra lateral. ¿ Cuáles fuera de curso son ellos que el elemento de cuadro de búsqueda justo aquí en la parte superior? Entonces empecemos a hacer eso en el próximo video 70. 17de Crear el cuadro de búsqueda: Por lo que voy a empezar a crear la caja de este tipo primero mediante el uso de la herramienta de rectángulo. Y voy a asegurarme de que tenga el Phil blanco y que el trazo más oscuro y que el trazo no sea demasiado grande. Un punto debería ser suficiente. Déjame ahora simplemente acercar rápidamente así como así y ahora podemos crear un cuadro de búsqueda que va a ser algo así Así que no tiene que ser, no tiene que ser demasiado grande. Podemos tal vez incluso hacer más pequeños a como 50 píxeles, igual que así Ahora me voy a deshacer de la cuadrícula. Ya no lo necesito. Lo que sí necesito, sin embargo, sin embargo, es la perspicacia del texto. Entonces con la herramienta de texto artístico, voy a dar clic y arrastrar y escribir algo como Buscar Aquí. Y por supuesto, queremos cambiar la fuente de Roboto condensado a simple roboto. A lo mejor no delgada sino cursiva. Justo así. Cambia el tamaño a algo así como 16. Cambiemos el color a este color gris oscuro así como así. Y por supuesto, vamos a asegurarnos de que nosotros que en realidad es, uh, la sensación que estaban afectando, no el golpe, y vamos ahora tal vez a la capacidad de triunfo hasta, digamos, 50.50%. Y lo que tenemos que hacer ahora mismo es, por supuesto, tenemos que crear la lupa, que no debería ser un problema sólido. Simplemente agarra la Ellipse Tal, crea una elipse. Y ahora agarremos la herramienta de rectángulo y creamos un rectángulo que va a tener un relleno, más oscuro, lleno y no quiero que tenga ningún trazo, al igual que así Y hagámoslo más pequeño. Vamos con tal vez hasta un píxel. ¿ Por qué no? Y vamos a rotarlo desde su uno de sus puntos inferiores por 45 grados, así y hagámoslo un poco más pequeño. Bajemos a 10 píxeles algo así. Y ahora solo podríamos quizás traer un poco a finalista de golpiza. Y si quieres, claro, puedes hacerlo más pequeño, así que solo voy a agruparlos y hacerlos más pequeños a algo así. Y por supuesto, también podemos bajar su capacidad hacia abajo. Vamos a ver 50% como con nuestro texto, Y por supuesto, necesitamos molestar tu pasaje hacia abajo de todos los elementos por ciento otra vez, déjame simplemente alejar. Esto es lo que parece. Glutton. Simplemente tal vez mueva un poco a este tipo a la derecha. Como puedes ver, no es realmente difícil, pero solo necesita muchos ajustes. Déjame solo tal vez bajar a 12 puntos a este tipo, igual que tan bien pero un poco a la izquierda. Y ahora veamos cómo se ve. Podría ser demasiado pequeño para ti. Podría ser demasiado grande para ti. Ya se sabe, realmente una cuestión de preferencia personal de aves. OK, dejémoslo así. No pasemos demasiado tiempo haciéndolo para que se vea. Look perfecto va de mi experiencia. Te puedo decir que rara vez se ve perfecto, y estoy gastando demasiado tiempo en hacer solo, como, realmente, muy pequeños ajustes. Aún así, se ve bien, pero como sabemos hecho es mejor que perfecto. Entonces dejémoslo así. Por lo que nuestra siguiente parte sería crear este primer contenedor, que fue la sección sobre mí. Entonces tenemos que crear la etiqueta, la imagen y luego algún texto con iconos de redes sociales. Entonces empecemos a hacer eso en el próximo video 71. 18de Crear la sección de Sobre mí: Por lo que he decidido agrupar los elementos creando nuestro cuadro de búsqueda. Y yo nombré bien al grupo, cuadro de búsqueda aquí abajo. Entonces ahora podemos pasar a crear en nuestro primero sobre bien, primera insignia, primera etiqueta y luego todo sobre mí parte de la barra lateral. Entonces lo que voy a hacer primero es agarrar la herramienta de rectángulo, cambiar el color a este color rojo o rosa. Y, por supuesto, asegúrate de que la opacidad sea hacia atrás hasta Beckett 100%. Y voy a empezar a crear mi rectángulo desde esta esquina inferior izquierda del rectángulo anterior . Esto debería estar bien. Voy a dejarlo por ahora, así como así. Y ahora voy a crear otro rectángulo que se extiende desde la derecha dos izquierda, igual que así y otra vez. No quiero que sea demasiado grande. Lo que tenemos que hacer en este momento es por supuesto, tenemos que añadir algo de texto aquí dentro. Entonces voy a agarrar el textil artístico, hacer clic y arrastrar derecho sobre mí, así como para que lo vaya a cambiar de metálico demasiado audaz, así como así. Y por supuesto, vamos a cambiar el color a blanco y tal vez pongamos esto un poco abajo a, como, 14. 14 debería estar bien, y voy a mencionarlo. Y como puedes ver, quizá necesitemos ajustar un poco este rectángulo. Entonces todo se ve bien. A lo mejor sólo un poco a la derecha, así como así. Por lo que ahora podemos agarrar todos estos elementos, agruparlos y simplemente bajarlos. Partiendo del resentimiento desde el centro el punto superior los bajará en 50 píxeles. Por lo que ahora podemos empezar a crear estas thes imagen. Será esta imagen y este contenedor de texto Así que voy a volver a envolver el dedo del pie rectángulo encontrar esta parte inferior izquierda inferior, cambio de esquina izquierda, clic y arrastre. Hazlo un poco más grande para hacerla realmente cuadrada escribiéndola por 25 píxeles. Por supuesto, el color fuera de este contenedor realmente no importa en este punto, pero voy a clonarlo hacia abajo, hacerlo un poco más pequeño, así y por supuesto, convirtió esto en este rectángulo en un haciendo contenedor de imagen. Algunos van a dar click en esta opción de inserción dentro de selección y encontrar la imagen adecuada. A lo mejor esta imagen porque claro, Esto no se trata de mi sección, por lo que sería mejor mostrar algunos. Muestra la foto de la persona que es el autor fuera del blogueado. Vamos a centrarlo así. Vamos a encender el color de este fondo, también, también, ¿ verdad? Agarra el marco de texto, textil del marco del dedo del pie y crea una simple pieza de texto que se va a ver algo así . Creo que eso debería estar bien. Vamos a alinear adecuadamente es sólo un segundo. Voy a llenarlo con el con algunos con algún texto de relleno. Y, por supuesto, asegúrate de que tengo la refutación regular pero 16. Y claro que quiero cambiar, y quiero cambiar el color también. Tan solo asegúrate de que tengo todo seleccionado correctamente. 16. Cambia el color a este color gris oscuro, así como así. Y, uh, tal vez alinémoslo al centro y echemos un vistazo a la altura de la línea. Vamos a bajarlo un poco. 2 22 A lo mejor voy a imprimir solo de ello, y ahora podemos asegurarnos de que todo esté alineado con el centro en relación a nuestros antecedentes, y sólo voy a pedir prestadas rápidamente estas redes sociales. Yo vengo. Voy a copiarlos aquí y otra vez. Voy a asegurarme de que se estén alineando muy bien en el centro, en relación a este contenedor. Y ahora sólo podemos agarrar el texto y los iconos los agrupan. Y ahora una línea todo bien al centro, igual que así. Por lo que conseguimos crear nuestro contenedor contenedor. Ahora me acabo de dar cuenta de que creo que debería haber creado bien agregado brecha de 25 píxeles en lugar de una brecha de 50 píxeles. Pero ya sabes, a veces estos errores bien, que eso que cometa realmente nos va a dar un, bueno, un buen incentivo para aprender algunas cosas nuevas sobre diferentes al diseñador. Nuestro tipo de como resolver retos de diseño a los que definitivamente te encuentras principal cuando estás diseñando sitios web, porque lo más posible es que vayas a cometer errores, y eso está bien y en realidad es incluso bueno. Bueno, es bueno siempre y cuando aprendas de esos errores. Entonces voy a agarrar todos estos elementos. Déjame sólo asegurarme de que estoy agarrando todos estos elementos. Voy a agruparlos y ahora lo que podemos hacer es simplemente asegurarnos de que tenemos a este tipo poniendo este punto original en la parte superior y simplemente con el fin de subirlo en 25 píxeles. Aquí voy a hacer algunas matemáticas, así que voy a ir con menos 25. Y ahí vamos. Ya que teníamos esta brecha aquí mismo fijada en 50 píxeles, cualquiera para tenerla fijada en 25. Por lo que siempre realmente hay que hacer es sólo restar 25 píxeles de esta brecha aquí mismo. Entonces esto es lo que se ve ahora mismo. Por lo que conseguimos nuestro cuadro de búsqueda. Tenemos nuestra sección sobre mí. Nos dieron la imagen consiguió, um, este este contenedor de texto, y llegamos a la orientación. Entonces conseguimos el primero. Bueno, 1er 2 partes de nuestra barra lateral creado La siguiente parte de la barra lateral sería crear esto. Déjame volver al original, esta pequeña pieza de texto de aquí y esta pequeña etiqueta. Entonces hagámoslo en el próximo video 72. 19de crear la sección de texto del Sidebar: Por lo que ahora podemos crearlos Mi sección blawg fuera de nuestra barra lateral. Y de nuevo vamos a reutilizar los elementos que ya tenemos aquí. Entonces primero, voy a agarrar la etiqueta así y copiarla hacia abajo hasta que se encaje con este, uh, uh, este contenedor, déjame traer de vuelta los paneles y voy a ponerla abajo por 50 pixeles igual que así Y dejar que de cambiar todo rojo, luego el sobre mí texto, Vamos a cambiarlo a mi bloque. Entonces con el texto dicho al Textil Artístico, voy a seleccionar este texto y solo teclear mi blawg igual. Y por supuesto, dependiendo de lo grande o lo ancho que sea este texto para nuestra etiqueta, podríamos tener que hacerlo. Es sólo que es fondo. Entonces en este caso, voy a agarrar este rectángulo de cardo y sólo hacer que este rectángulo sea un poco más pequeño, así como así. Entonces ahora solo puedo pedir prestada esta pieza fuera de texto justo aquí y este fondo CO p y basarlo y bajarlo como así por supuesto, voy a en grupo todo. No voy a necesitar estos iconos de redes sociales Voy a deshacerme de ellos. Yo me voy. Teoh, cambia la alineación desde el centro Dos a la izquierda así. Y simplemente podemos quizás bajar este párrafo. Si cambian algún texto de relleno dentro. ¿ Por qué no? Al igual que así Y ahora extiende a este tipo hacia abajo. Creando en esta pieza off como simples gracias nos puede dar otra ocasión dedo del pie, aprender un aspecto más de trabajar con diferentes funciones y dicho, Señor, En afinidad diseñador, recuerda que tenemos en general huecos que son ya sea de 25 píxeles o 50 píxeles. Entonces si quieres, puedes mantener esto. Bueno, esta idea dentro de tus cuadros de texto. Entonces por ejemplar, aquí, si queremos asegurarnos de que en realidad los huecos, el relleno dentro de esta caja está establecido en 25 píxeles en el uso lo que ya tenemos Bueno, eso es realmente, realmente simple . Todo lo que tenemos que hacer es asegurarnos de que nuestro cuadro de texto se esté extendiendo por nuestro pozo, nuestros antecedentes en este caso. Entonces ahora lo que podemos hacer es simplemente hacer que sea más pequeño. Entonces primero lo voy a hacer más pequeño desde arriba para crear la brecha de 25 píxeles. Entonces voy a poner el punto original al fondo y voy a restar 25 de su altura, así como así. Y voy a hacer que el punto central se sienta en el centro. Y ahora voy a restar 50 del con porque quiero, y quiero crear la brecha a la derecha y a la izquierda. Y se supone que ambos son 25 25 más 25 suele ser 50 algunos van a sumar 50. Voy a restar 50 así, y ahí vamos. Ahora podemos estar seguros de que la distancia entre la parte superior y la izquierda y la derecha serán bordes de nuestro contenedor o exactamente 25. Entonces ahora solo puedo deshacerme de este tipo y puedo derribar a este tipo. Y si quieres, también puedes asegurarte de que la distancia entre estos tipos sea de 25. Pero no voy a ir tan bien. No me voy a ir. No voy a crear esa gran brecha. Voy a añadir tal vez 12 pixeles igual que así y de nuevo con este tipo debilitar hacer exactamente lo mismo. Podemos simplemente bajarlo así como así. Y asegúrate de que esto sea en realidad 20. Que la brecha aquí es de 25. Entonces podemos eso debilitarnos sencillamente. Simplemente agarrar qué? A lo mejor esta vez desde vamos a hacer la transformación desde arriba. Y de la altura plomo, restar 25 así. Y ah, claro, podemos cambiar al siguiente el texto de relleno así como así. De acuerdo, así que llegamos a esta pieza aquí mismo, creada para que la siguiente sección sería crear este gran, más popular feed blawg bloc post feed post feed justo aquí. Entonces empecemos a hacer eso en el siguiente video. 73. 20creemos el primer contenedor para las publicaciones más populares: Entonces empecemos a crear de nuevo la siguiente sección simplemente duplicando algunos elementos. Voy a agarrar esta etiqueta aquí mismo y bajarla hasta que se encaje con este contenedor superior y le voy a agregar 50 píxeles, igual que lo siguiente, voy a sólo Gramp la herramienta de rectángulo. Como puedes ver, estamos usando principalmente las herramientas más simples. Y voy a crear un contenedor al igual que así traer hacia abajo tal vez. Y simplemente voy a volver a agregarle 2025 píxeles. Y si echamos un vistazo al original, podemos ver que está dividido en dos secciones. Pero honestamente, primero se dividió en tres secciones porque quería crear algo así como un 1/3 2 3ª división justo aquí. Entonces, ¿cómo podemos hacer eso? La forma más fácil de hacer esto es simplemente copiar primero este rectángulo algunos copiar y pegar en él así, y déjame simplemente tal vez cambiar rápidamente su color para que puedas ver mejor. Por lo que ahora mismo conseguimos hacer diferentes dos contenedores diferentes a diferentes rectángulos. Entonces cómo crear dos contenedores a partir de este contenedor que y uno de esos contenedores será 1/3 de descuento del total con y el otro va a estar 2/3 de descuento del total con. Entonces primero, voy a t dividir este primer contenedor este primer rectángulo por tres. Al igual que para crear una versión 1/3 del todo este todo este contenedor. Entonces ahora tenemos este rectángulo más pequeño y este rectángulo más grande justo aquí. Entonces voy a agarrar tanto a estos tipos y de la operación de caminos voy a elegir dividir así. Entonces tenemos justo este rectángulo y este rectángulo. Pero como puedes ver habitación así, este es un rectángulo Y queríamos ser una causa cuadrada si vamos al original, este tipo es una plaza. Entonces como es ah, con es de 90 píxeles, la altura necesita ser la misma. Algunos simplemente van a escribir en 19. Así como así, Adam se metió en lo mismo con este tipo. Simplemente teclea 90 y este es nuestro primero nuestro primer contenedor. Ahora lo último a dio, claro. Bueno, contenedor sabio. Yo lo sé. Yo soy sake. Contenedor. Mucho es crear una línea. Esto dijo esta división aquí mismo. Así que simplemente voy a agarrar la herramienta de direccionamiento a rectángulo otra vez y crear un rectángulo se extiende a través de nuestras tres columnas y hacerlo difícil. Hazlo solo con un píxel de alto así como así. Y yo voy a Teoh arbusto hacia abajo por 12 pixeles. No quiero dividir píxeles por la mitad, y sé que generalmente tenemos 25 píxeles y pronto tendremos 25 píxeles entre estos contenedores. Pero quiero que esta línea se ponga exactamente en medio de esta brecha aquí mismo. Entonces ya que 25 divididos por 2 a 12.5 y podemos dividir píxeles para que podamos ir con ya sea 12 o 13 en adelante, voy a ir con el 12. Y así como así, se crea nuestro primer contenedor. Por lo que consiguió el positor de imagen a la izquierda. Siguiente Marcador de posición a la derecha. Y esta línea esta una frontera aquí abajo. Entonces en el siguiente video, vamos a empezar a agregar el contenido. Vamos a añadir la imagen vamos a añadir el texto y luego duplicar este bloque post extracto. Bueno, vamos a duplicarlo tres o cuatro veces, así que mantente atentos 74. 21de Creemos la lista de las publicaciones de blog más populares: ahora, ante nosotros Kelowna este contenedor y poblado de contenido. Cambiemos bien el texto que mi bloque a texto por el más popular. Por supuesto, puedes escribir tipo en otra cosa, como otros usuarios están leyendo o como la mayoría leída. No, el más compartido, más como lo que quieras. Yo sólo voy a ir con Standard, más popular y voy a cambiar el tamaño. Voy a hacer que el tamaño de este fondo sea un poco más grande. Entonces ahora voy a bajar. Voy a ir voy a acercar un poco el zoom. Entonces ahora solo podemos agarrar este rectángulo y convertirlo en un contenedor de imágenes usándolas que eso es lo que este sistema ya conocemos. Yo sólo voy a basarme en la imagen en así como eso. Y ahora podemos empezar a agregar texto. Entonces déjenme sólo rápidamente pedir prestado tal vez esta fecha o tal vez de nuestra de más grilla. Por lo que voy a agarrar la fecha los sopla el post titulado y esta etiqueta copiarlos y basarlos sobre basados por aquí. Y, por supuesto, sólo traerlos así. Y a lo mejor voy a hacer que esta fecha sea un dedo un poco más pequeño como 10 puntos. Esperemos que esto siga siendo visible para ti y ponlo a algún lugar aquí. Apenas algunos en como Así que ahora voy a hacer más pequeño a este tipo. Probemos 18 y cambiemos la altura de la línea para golpear 22 o tal vez hasta 20. Y hagamos mucho, mucho más pequeño todo el contenedor y veamos cómo se verá aquí. Todavía podría ser un poco demasiado grande. Es tal vez hagámoslo un poco más pequeño. Y tal vez hagamos aún más pequeño el impuesto. En realidad, bajemos como un 16 más lento. A lo mejor ahora podemos extender sólo un poco, también en algún lugar aquí y ahora sólo podemos agarrar este estilo de vida Diciembre esta etiqueta. Y ya que eso fue 10 vamos con 10 también aquí y hazlo un poco más pequeño. Y vamos a escribir la palabra correcta, así así Ahora simplemente puede agarrar a todos estos tipos y distribuirlos, así como así ahora podemos agruparlos. Y ahí vamos. Conseguimos nuestro primer contenedor creado. Si tan solo alejas el zoom. Esto es lo que parece, y creo que se ve. Creo que se ve bastante bonito. Entonces ahora lo que podemos hacer es simplemente agarrar todo este contenedor Kelowna hasta que se encaje con nuestra línea. Esto debería estar bien. Ahora vamos a sumar de nuevo. 12 o incluso un 13. Por lo que consiguió 25 así y otra vez. Podemos simplemente cambiar Cambia esta, uh, esta imagen aquí mismo. Este es este tipo de aquí. Y por supuesto, ya conoces el simulacro. Ya sabes cómo hacerlo. Entonces eso es sólo rápido. Cambiemos rápidamente en la foto. A lo mejor esta vez estas rocas hacen que sea toda la imagen más pequeña. Igual que eso. Y de nuevo, podemos cambiar. Podemos cambiar el texto así como así. Y de nuevo, vamos sólo Colonia está abajo. Añadamos 12. Y de nuevo, vamos a cambiar el inserto de imagen en el interior. Selección tal vez desapareció esta vez. Llevemos la imagen más pequeña. Como puedes ver, es mucho, demasiado grande, así como así. Y de nuevo podemos cambiar. Podemos cambiar este texto aquí Curso. También podríamos cambiar la etiqueta, pero no lo hagamos ahora mismo. Y vamos a hacer toda la rutina una vez más, así que voy a derribar a este tipo. Voy a sumar 13 píxeles porque se quiere tener 25 en total, así como. Y esta vez voy a deshacerme de esto fuera de esta línea así como así, y voy a cambiar. Voy a cambiar esto. Esta imagen, algo más. Voy a la base del dedo. A lo mejor esta Navidad, esta foto navideña en, igual que así y otra vez. Cambia así este texto. Y ahí vamos. Conseguimos nuestro alimentador de jactación de sangre más popular, más popular creado. Por lo que lo último que habría que hacer sería crear el spot para estos anuncios aquí mismo. Entonces todo lo que realmente necesitamos hacer es crear esta etiqueta y luego solo agregar las fotos, los contenedores, las Porta y las fotos por sí mismos. Entonces todos se ven así Eso es por supuesto, si quieres, puedes diseñar algunos realmente agrega algo así como 20% de descuento en cosas como esa. Pero sólo voy a ir con el con imágenes simples solo para mostrarte el proceso. Y no quiero que Teoh pases tiempo mirándome, viniendo con algunos lanzamientos de venta funky, funky en algunas zonas funky. Anuncios de ventas, cosas así. Entonces empecemos a crear nuestra última pieza fuera de la barra lateral en el siguiente video. 75. 22Lets Crear la sección de anuncios: Entonces empecemos a crear de nuevo en la sección de anuncios simplemente tomando prestada la etiqueta. Entonces lo voy a bajar y le voy a sumar 50 píxeles. Y en lugar de lo más popular, voy a teclear, vamos a escribir en anuncios cabeza. Por supuesto, tenemos que hacer a este tipo más pequeño, y tendremos que hacer de este tipo la causa mucho, mucho más grande. Como se puede ver, es demasiado pequeño. Entonces, solo empecemos a agregar, Y por cierto, podrías mantenerlos turno para agregar valores en incrementos de 10 píxeles aquí en el panel de transformación . Entonces estoy sosteniendo el turno y se puede ver que estoy cambiando el valor por tiempo. De acuerdo, entonces ahora todo lo que necesitamos hacer es simplemente crear cuadrados simples y simples que alberguen nuestras imágenes. Entonces de nuevo, voy a agarrar la herramienta de rectángulo sosteniendo turno para crear este cuadrado, así como así. Y claro que lo voy a mover hacia abajo 25 píxeles así, y lo voy a colonia hacia abajo, y voy a presionar el control J para clonarlo una vez más. Pero por supuesto, estos tipos también necesitan bajar en 25 píxeles. Entonces una y dos veces en tan sólo un segundo así. Y ahora podemos convertir estos contenedores en contenedores de imagen. Por lo que de nuevo, inserto decide selección, agarró la imagen, ponla dentro, hacerla más pequeña para que podamos ver algo apenas un poco más pequeño. Al igual que otra vez con este tipo basado, Tal vez, tal vez esta imagen dentro, como así. Y el último basó algo dentro. A lo mejor este sándwich así. Entonces ahí vamos. Nos dieron la barra lateral Said fueron creados. Por supuesto que no. Tan solo una barra lateral, porque ya tenemos. Entonces este, um, este encabezado, nos dieron el slider, y luego llegamos al poste del bloque principal justo aquí, y nos dieron la barra lateral. Nos dieron estos bien destacados que destacaban la sangre también presume, y nos dieron los anuncios. Y lo único que nos falta aquí abajo es el pie de página. Y también vamos a empezar a crear el pie de página en el siguiente video 76. 23dejemos de crear el pie: Voy a asegurarme de que tengo para este arte a bordo seleccionado aquí mismo, y voy a agarrar al arte a bordo. Todavía que voy a extender mi tablero de arte hasta algún lugar de aquí, así que voy a hacer lo mismo con las setas. Voy a volver a encender su visibilidad y voy, Teoh, Teoh, desbloquearla. Y luego lo voy a extender así como así. Entonces si echamos un vistazo al original, podemos ver que para escuchar la comida er se divide en dos partes. En primer lugar, conseguimos estas columnas con enlaces, pero también tenemos ahora el Sombrerero que se está repitiendo aquí abajo en el pie de página. decir, es el concepto para que el encabezado se repita aquí abajo en el pie de página. Entonces lo que podemos hacer es simplemente agarrar el encabezado. Es decir, todos sus elementos, igual que así y asegúrate de que tenemos la capa correcta creada algunos simplemente van a crear rápidamente un pie de página más adelante. Y lo voy a mover hacia abajo igual que así. Y tan pronto como pasé Ah, esos elementos copiados en se puede ver que se basan exactamente en su anterior lugar anterior . Pero lo que podemos hacer es simplemente establecer este 0.20 original así, y podemos dejar que Stipe entre algo así como 2600 y debilitarlo rápidamente imprimirlo. Como se puede ver, está aquí abajo. Entonces agreguemos tal vez como, 2000 píxeles a ella, y bajará aquí igual que así. Y por supuesto, este tipo tiene que ser más pequeño, así que rápidamente lo hagamos más pequeño. Entonces voy a cambiar este fondo de 42 Voy a fijar el punto original debido a este punto medio izquierdo desde 42. Vamos a ver 20 para poder pequeño 26 debe estar bien. Y ahora, ya que ese tipo está fijado en 2026 déjame simplemente bloquear rápidamente la grilla y tal vez hasta vamos a apagarla su visibilidad. Ahora que tenemos este tipo creado, tenemos que dar hacer a estos chicos más pequeños también, así que los voy a agarrar con este dedo del pie de elección, y los voy a hacer más pequeños, así que voy a bloquear la relación de aspecto y traer ellos, bajen su altura o digamos 2 12 píxeles. A lo mejor esto debería estar bien. Y ahí vamos. Esto que esto sería nuestro que este sería nuestro pozo la había repetido en el Pie de página . Podríamos incluso querer hacer de este tipo sólo pero más pequeño, así. Y asegurémonos de que todo esté muy bien alineado al centro así como así. Y déjame simplemente alejar rápidamente el zoom, apagó la visibilidad de los paneles, y este sería el primer elemento de nuestro pie de página. El siguiente elemento sería éste. Basta con volver al original, esta gran parte fuera del pie de página con estas columnas y enlaces y por cierto, note que estos thes fondos el color de los colores de estos fondos son diferentes. Este es más oscuro, y éste es más ligero, y en realidad, esto es sólo una manera de alejarse, creando como pies de página combinados. Llamémoslos así. Por supuesto, este tipo podría ser más oscuro y este tipo podría ser más ligero si quieres, o ambos de estos tipos podrían tener el mismo color, y podrían simplemente dividirse con una línea. Por ejemplo, si esa sería su elección de diseño. Por lo que hay diferentes formas de crear, como pies de página combinados. Eso Vamos a echar un vistazo rápidamente a, um a ambos. Bueno, en realidad, tres diseñadores escenarios cómo podemos crear un como un combinado un pie de página posterior , en capas, , en capas,en capas. Pero en realidad empecemos a hacer eso en el siguiente video. 77. 24Hlamos de conceptos de pelea: Entonces una forma de crear un alimento combinado sería darle a estos chicos el mismo color que ese . Cuanto mayor es la primera parte en la segunda parte. El mismo un color de fondo. Entonces hagámoslo rápidamente ahora mismo para que pudiéramos crear el mismo rectángulo de pozo con el mismo fondo. Al igual que eso. No obstante, podríamos divinar a estos tipos con algunos con algunas líneas, así que simplemente podemos pedir prestado este rectángulo y hacerlo mucho, mucho , mucho, mucho más pequeño y hacer que diga un rojo así. Pero no lo hagamos así de grueso. Vamos a mantenerlo simple. Vámonos a quizá dos píxeles. Pero claro que queríamos ser Tú querías estar bien gastado en todo el tablero de arte. Por lo tanto, desmarquemos la relación de aspecto de bloqueo. Y ahora es sólo ah, tipo en dos. Entonces ahora déjame sólo rápidamente tal vez pedir prestados a estos tipos. Sólo para que vayan a ver de qué estoy hablando, los vamos a crear en tan solo un segundo. Entonces si ahora solo estamos basando a estos tipos en algo así se puede ver que ahora mismo tenemos a estos tipos, estos tipos se pondrán contra el mismo trasfondo. Pero estas partes estaban bien separadas con esto con esta línea. Entonces este de distancia creando este tipo de pie de página, también podríamos simplemente agarrar, um, este fondo y hacerlo más oscuro. Vamos con tal vez no con negro, pero algo realmente, realmente oscuro. Algo así. Y vamos a deshacernos de esto fuera de curso. Si quieres, puedes dejarlo así, pero yo voy a deshacerme de él. Por lo que este es nuestro original diseño original. Y por supuesto, si quieres, tal vez puedas hacer que este tipo le dé a este tipo este llamador este más claro, gran color y quizá podamos hacerlo este tipo más oscuro, así como así. Entonces es realmente, realmente depende de ti hasta tu elección de diseño con el cual ah, qué esquema de color te vas o si decidiste simplemente ir con un solo color. Pero dividir estos elementos con una con una línea simple de cualquier manera funciona. Yo sólo quería mostrarte diferentes ideas diferentes sobre cómo crear este tipo off. Diseñaremos un sitio web, un elemento de sitio web. Entonces en el siguiente video, vamos a terminar con estos elementos. No te preocupes, no me iré. No lo dejaré así. Vamos a echar un vistazo a cómo crear a estos chicos, y así es en realidad empezar a crearlos en el siguiente video. 78. Terminemos el proyecto y exploraremos el siguiente: Entonces voy a empezar con el traer de vuelta de la grilla igual que así y voy a pedir prestada etiqueta 11. Entonces voy a agarrar tal vez esto mi etiqueta de sangre así como eso. Y por supuesto, voy a asegurarme de que estoy en el jugador correcto. Esto para lote de capas justo aquí en el que lo voy a pegar, vertido contra mi grilla. Voy a agregar 50 para crear la brecha, así así Ahora puedo alejar el zoom, y ahora podemos crear algunos Bueno, algunos enlaces, algún impuesto. Entonces voy a agarrar la siguiente herramienta de marco, y voy a crear rápidamente un amigo de texto que se va a extender por sólo estas tres columnas, y voy a insertar texto de relleno y voy a cambiar su color Dos blanco liso. Y por supuesto, hagámoslo más grande 16 22 para la altura de la línea. Y si quieres, solo puedes dejarlo así o solo podríamos hacer tal vez solo un poco más pequeño y notar que si solo volvemos al original, estas líneas son mucho, mucho bien, por qué son que apenas tres columnas. De hecho, se están extendiendo a través de cuatro columnas, pero el impuesto nunca supera esas cuatro columnas. De hecho, quería mantener a estos tipos un pequeño estanque corto porque, sabes, ya que dice enlaces aquí arriba de lo que quería que pareciera enlaces. Pero no tiene que ser así. O sea, como, la izquierda, puedes tener una columna con algo más de texto, que sería, digamos, como, no sé, tal vez algún mawr importante información que le gustaría compartir con los usuarios. Por lo que no tiene que ser enlaces a sólo por el bien de esto de este diseño, yo solo decidí hacerlo para hacerlo enlazar. Pero de nuevo, podemos simplemente hacer algo de texto plano, así como así. No obstante, lo que definitivamente me gustaría hacer es que me gustaría extender esta línea a través de cuatro columnas , por lo que necesita ir todo el camino a la derecha. Bueno, aquí mismo. Por lo tanto, permítanme extenderlo rápidamente. Voy a aguantar el turno y presionar la flecha arriba para que mande a esto a en esta cuarta llamada. Ahora voy a cambiar el texto. A ver, Vamos a teclear tal vez algo así como, bueno , más texto, así. Y vamos a extender este, uh, este fondo, tal vez no tanto. Esto debería estar bien y no lo que podríamos simplemente dio es Podríamos simplemente agarrar esta, uh, esta etiqueta, este texto y este texto también y simplemente colocarlo a la derecha igual que así y luego presionar el control J para clonarlo a clonarlo una vez más. Voy a deshacerme de la grilla. Voy a apagar su visibilidad. Y ahora, por supuesto, simplemente podemos tal vez, como, cambiar este texto más a enlaces y, por supuesto, cambiar el tamaño un poco así. Y como pueden ver, nuevo tenemos que hacerlo. Es solo del tamaño de esta barra, así que la voy a hacer más grande. Y por supuesto, podríamos simplemente tal vez deshacernos de este texto de fondo sobre tal vez vamos sólo para extender a este tipo, córtalo, deshacernos de este básico detrás al frente y tal vez simplemente hacer esto más pequeño. Por lo que en realidad parece algún tipo de enlaces así. Y dejémoslo como más texto aquí mismo. Estoy bastante seguro de que ya sabes a qué tipo de efecto vamos en realidad aquí mismo. Entonces como esta brecha es de 50 píxeles, queremos que esta brecha sea de 50 píxeles también, ¿ verdad? Queremos tener un diseño coherente, consistente. Entonces voy a hacer esto y hacer este fondo más pequeño, así como eso. A lo mejor sólo aún más. Y ahora voy a, desde su stop ad 50 pixels hasta su altura, así como así. Y ahora felicitamos a todos estos elementos y los movemos hacia arriba así. Y ahora podemos seleccionar todo este pie de página, capas de esta capa entera de cuatro, moverlo hasta el texto de publicaciones más antiguas, y ahora moverlo hacia abajo de nuevo por 50 así. Y por supuesto, lo último que habría que hacer sería simplemente agarrar el Article dos y hacer que este tipo significativamente más pequeño así. Y ahí vamos. No tenemos esto. Bueno, esta página web de armas esta página web del frente creado. Entonces así es como puedes crear una portada para un blawg moderno. Por lo que empezamos con la creación de un logotipo y una navegación con algunos iconos de redes sociales. Creamos el encabezado, después creamos el que mientras la sección héroe con el deslizador del carrusel, los contenedores de imágenes, navegación y los títulos de post de sangre. Y debajo de eso, agregamos al pozo la característica principal para bloquear presume eso con la imagen y el contenedor de texto debajo de él. Y luego agregamos en la cuadrícula de postes de bloque y a la derecha, agregamos , Ah, un lado bastante intrincado donde pienso con cuadro de búsqueda sobre mí sección sección de texto, sangre más popular presume y en la sección de anuncios. Y por supuesto, lo terminamos con el Footer, una sección que se dividiría en dos partes. Ahora, en los próximos videos, vamos a crear la sola publicación dentro de afinidad designer single post page porque queremos mostrar al usuario y al desarrollador lo que pensamos que el sitio web debería verse cuando un usuario quiere leer una publicación en bloque. Por lo que vamos a ir a un contenedor de imágenes. Vamos a añadir mucho texto. Vamos a añadir una navegación sencilla, permitiendo al usuario ir al siguiente y al post anterior, y luego vamos a añadir la sección Commons. Pero también vamos a reutilizar muchos de los otros fuera de los elementos que ya creamos que como el Encabezado, El pie de página y la barra lateral. Entonces si eso es algo en lo que te interesa, solo sigue mirando. 79. 26Letvemos a explorar el diseño de Post Post: en los siguientes videos, vamos a crear una sola página de post para nuestro diseño de bloques y que vamos a hacer algunas cosas diferentes. Vamos a agregar algunos elementos diferentes, y también vamos a dejar algunos elementos que ya están diseñados y ya son partes de nuestro diseño. Entonces algo suele estar en un solo cambio de post bloque, pero un solo cambio de post bloque. Y algunas cosas siguen igual. Por ejemplo, el encabezado como este, la guerra lateral, Porque esta fue mi elección de diseño. Por lo que decidió el sitio de nuestros estados igual y la er comida se mantiene igual. Pero todas las demás cosas son diferentes, empezando por la sección de héroes. Como pueden ver, aquí no tenemos el deslizador. He decidido poner aquí la imagen destacada en lugar del deslizador. Y luego, por supuesto, conseguimos un número. Bueno, todo el poste de cuadra de la izquierda. Por lo que nuestro diseño principal se divide de nuevo en dos columnas. Por lo que este alarde de bloque se está extendiendo a través de nueve columnas. Y por supuesto, la barra lateral se extiende a través de tres columnas. Y aquí mismo llegamos a los datos el título de la publicación de bloque, algunos enlaza el texto. Y entonces estamos mostrando, Ah, el desarrollador o el usuario cómo va a quedar la imagen. Y luego estuvimos mostrando cómo algún bloque cita la pieza de texto se va a quedar como Nosotros, por supuesto, conseguimos algunos. Consigue algunos enlaces aquí mismo, algunas etiquetas, redes sociales. Yo baja aquí y luego llegamos a una simple navegación para Post anterior y la siguiente presumen, junto con una imagen y un título de publicación en bloque. Después conseguimos algunas tarjetas para bloque relacionado, ambas para que estas puedan ser bloqueadas presume que adelante en la misma categoría que tienen las mismas etiquetas y cosas así. Y luego nos dieron la sección de comentarios aquí abajo con ese maniquí avatares de maniquí Commons y algunos Post comentará es cajas como el nombre del comentario, email post Botón común aquí abajo, Sin embargo, con la sección común oro, hay una cosa que tienes que enterrar la mente, porque cuando estás creando un blawg, más posible es que el desarrollador a menudo vaya a usar algunos listos hechos a partir de los enchufes para la sección común. Por ejemplo, discutir o comentarios de Facebook enchufando, y esos dos son los enchufes más comunes utilizados para crear un bloque presume Commons bajo las publicaciones de bloque en esa sección ist. Pero en este video, solo quería mostrarte cómo puedes crear completamente, completamente personalizado, completamente personalizado, el look de una sección de comentarios dentro de una publicación blogueada. Entonces empecemos realmente con la creación de nuestra imagen de héroe. Y luego vamos a crear unos unos chicos visuales que nos van a ayudar en la creación todas estas piezas fuera. Bueno, piezas de texto, títulos de imagen, todas las cosas que se necesitan ahí dentro de un poste de bloque. Ah, contenedor de poste de un solo bloque. 80. 27, crearemos la imagen destacada y el contenedor de post: Como pueden ver, no tengo justo aquí. No tengo ninguna imagen. Y el slider? No tengo ninguna cuadra presumir aquí mismo. Solo tengo la barra lateral, el encabezado. Y por supuesto, el pie de página. Déjame simplemente bajar rápidamente el pie o aquí abajo. Entonces vamos a empezar con agregar esa imagen destacada en lugar de nuestra de nuestro slider. Ahora, ya tengo un rectángulo aquí abajo. Este es este tipo de aquí. Y simplemente lo creé rápidamente porque creo que ya conoces el taladro. ¿ Sabes qué va a pasar en tan solo un segundo? Um, este es este tipo de aquí. Simplemente lo había creado de verdad, muy rápido para convertirlo en el contenedor para nuestra imagen destacada. Entonces de nuevo, voy a asegurarme de que esta opción de inserción dentro de selección esté activada y voy a navegar hasta el lugar donde guardo mis imágenes. Déjame ver. Creo que fue el gran mal invento, este tipo de aquí y simplemente lo voy a pegar así. Y por supuesto, hazlo significativamente más grande. Muévete a algún lugar aquí. Creo que esto debería estar bien como se puede ver aquí mismo Hay un hueco de 50 píxeles entre mi imagen y este este cuadro de búsqueda justo aquí. Entonces para crear un contenedor de postes de bloque, creo que sería bueno tener algunas de guías visuales para nosotros mismos. Entonces creo que podríamos empezar con crear el fondo principal, este fondo, este tipo de aquí para nuestro post de bloque. Entonces primero me voy Teoh, creo que sólo podemos mirar esta capa. Ya no estaremos trabajando en ello. Entonces vamos a crear una nueva capa y vamos a llamarla Ah, solo post, así. Y voy a y puede estar por encima de la barra lateral así como así. Entonces lo que voy a hacer en este momento es que voy a crear un rectángulo que se extiende por todas estas nueve columnas, así como así. Entonces ahora que tengo este contenedor creado, simplemente no puedo sacarlo solo un poco. Entonces, duquesa, nuestra imagen destacada. Y tal vez podamos rápidamente sólo darle un color diferente para que podamos ver sólo un poco mejor . Entonces ahora solo podemos sumar 50 al valor del eje Y para bajarlo así como así. Entonces ahora coincide con nuestro pozo, la altura fuera de nuestra barra lateral. Pero claro, tiene que ser blanco, igual que así. Y ahora podemos simplemente rezar hasta algún lugar de aquí. No demasiado lejos. Creo que esto debería ser pelea. A lo mejor sólo un poco más, así. Entonces ahora nos gustaría simplemente saber cómo panadero, este interior palmaditas este extremo interior y debe ser y con cuánto espacio llegamos a trabajar. Es decir, queremos saber qué tan ancho tiene que ser el texto a este texto este título de publicación en bloque. Cómo por qué este texto y en la parte inferior tiene que ser Así que todo se ve bien y es para de seguir nuestra idea fuera en 50 o 25 píxeles, huecos dentro de nuestro diseño. Entonces, ¿cómo podemos hacer eso? Bueno, el primer fin de semana simplemente agarrar nuestro rectángulo. Este tipo de aquí, cópielo. Y creo que podemos encerrarlo ahora mismo para que no lo estropeemos accidentalmente. Entonces, simplemente bloqueémoslo rápidamente. Y ahora podemos simplemente basarlo de nuevo en. Entonces ahora tenemos dos de ellos y vamos a cambiar rápidamente su color. Entonces ahora vamos a establecer la transformación Origen punto al centro y vamos a restar rápidamente 100 del azotado de nuestro rectángulo, así como así Y ahora es hacer lo mismo para la altura. Ahora estoy restando 100 porque 50 más 50 es 100. Y ya que queremos tener una brecha de 50 soul grande en la parte superior 50 pixel gap en la parte inferior y 50 pixel gap en la izquierda y derecha, Cuando agrego 50 más 50 en ambos lados, obtengo 100. Entonces ahora solo puedo usar esta guía como mi referencia Así que tal vez podríamos bajar su opacidad para decir 25% y tal vez bloquearla y luego simplemente trabajar contra el pozo este fondo. Pero quiero ver cómo va a quedar mi lo que mi testamento gravar el contenido para el post de bloque en contra de este amplio fondo. Yo quiero saber qué estoy haciendo aquí. No sabemos qué estoy diseñando, así que voy a sacar rápidamente algunas guías. Entonces voy a ir a ver va a mostrar a los gobernantes y voy a agarrar rápidamente sólo una guía, una guía horizontal y una guía vertical. Eso va a ser justo aquí. Déjame sólo ver rápidamente si yo sí, ahora es no, Está sentado donde necesita sentarse. Yo sólo voy a ocultar las reglas por control presente son. Y ahora puedo deshacerme realmente de este contenedor no necesito este rectángulo Así que ahora tengo Ahora sé lo anchos que pueden ser mis contenedores fiscales y podemos empezar en el primer contenedor de texto en el siguiente video. 81. 28de Añade el título de publicación de tu blog: Entonces en este video vamos a empezar a agregar el texto y vamos a empezar con el post de bloque titulado. Entonces si solo echamos un vistazo rápidamente a este tipo de aquí, podemos ver que nos dieron la fecha el poste de bloque. Bueno, título. Y llegamos al nombre del autor y al número de comentarios que son, que son enlaces llanos. Por lo que ahora me aseguraré de que estoy en la capa correcta la capa de un solo post justo aquí. Voy a agarrar la herramienta de texto artístico, hacer clic y arrastrar y escribir tipo seguro en la fecha. Di esto, que quizá 15 de julio de 2017. Al igual que eso. Y voy a,por supuesto, por supuesto, cambiar su color y su tamaño para ahorrar tal vez como, 14. Y no quiero que se escriba en todas las gorras, al igual que así cambia el color así. Permítanme sólo consultar rápidamente con el original. Creo que es yo creo que es para esta noche, Alec. Sí, lo es, yo talic. Entonces lo voy a cambiar de regular a cursiva. ¿ Por qué no? Y solo tecleemos en julio como así y ahora simplemente puedo mover a este tipo Mueve este contenedor de texto a. Por supuesto, tiene que estar en la capa derecha y puedo moverla ahora mismo aquí al punto superior izquierdo para que coincida con estas guías aquí mismo. Por lo que ahora podemos crear el título de la publicación en bloque. Entonces voy a Gramp el dedo del marco de texto esta vez y voy a crear voy a crear el cuadro de texto. A lo mejor así esto sería más fácil. Déjame alejar el zoom y lo voy a extender por todas las columnas, así como así. Y ahora sólo podemos imprimirlo. Aún así, toca el 15 de descuento el julio de 2017 y ahora podemos bajarlo. Y en el original, creo que es creo que son 25 pero vamos a revisar rápidamente Vamos a revisar la distancia. Entonces con la herramienta de rectángulo, voy a Sí, será 25. Así que ahora solo podemos agarrar esto, Uh, este disco le textualizará el dedo del pie, y podemos simplemente bajarlo desde la parte superior. Bajarlo por 25 así como así. Y por supuesto, será roboto condensado negrita. Pero el frente va a ser mucho más grande. Vamos a ver sólo en un segundo qué tan grande, qué tan grande se supone que sea. Si solo insertamos algún texto de relleno, lo alineamos a la izquierda, lo hacemos más grande, digamos Vamos a ver 46 por supuesto, hagamos que la línea se esconda mucho más grande. Revisemos 46 y hagamos este marco un poco más pequeño, así que veamos cómo se ve. Déjame simplemente moverlo a la derecha así y vamos a esconder rápidamente a los chicos. Pero presidente controlaba semi columna y quizá ocultemos rápidamente la grilla también para que pueda ver todo más claro. Creo que se ve bien, creo, dejémoslo así otra vez. Si quieres cambiar el texto para ocultar la altura de línea o tal vez la familia de fondos también, puedes por supuesto, hacer eso. Pero solo quiero mostrarles las técnicas y la forma de pensar a la hora de crear este tipo de diseño. Entonces ahora mismo, lo que podemos hacer es simplemente agarrar este pedazo de texto del 15 de julio, ponerlo aquí y cambiar el este texto para comprar y luego escribir el nombre del autor. Y ahora solo podemos llevar a este tipo a la derecha y entonces tal vez lo movamos por 25 píxeles, así. Y cambiemos este texto por el número de comentarios fuera. Voy a deshacerme de esto por palabra, pero voy a teclear y el número de comentarios así. Por lo que ahora simplemente podemos bajar a estos tipos en 25 píxeles así. Y por supuesto, si quieres, tal vez puedas cerebrar a este tipo un poco más cerca de 15 píxeles. Eso es eso realmente depende de ti. Entonces echemos un vistazo al original. Por lo que llegó al nombre del autor, el número de comentarios, la fecha y el título de la publicación en bloque. Por supuesto, si quieres, quizá puedas hacer estos huecos un poco más pequeños, también, como 12 píxeles o 15 píxeles. Te lo voy a dejar a ti. Yo quiero mantener el diseño inconsistente así que lo que sea, tengo 50 pixeles, y si quiero hacerlo como significativamente más pequeño, un hueco diferente, solo voy a ir con la mitad ese valor, que es 25 como Bueno, como aquí, Como en este caso, Porque tengo que decirte que soy un poco de un como una simetría e igual de números buff. Esa Z es sólo Eso eran mis jeans, ya sabes, claro. Ah, nosotros diseñadora. Puedes volverte un poco loco si quieres, y tomaremos un do las cosas un poco diferente. Entonces voy a traer de vuelta a mis guías igual para que podamos ver que todo se está tocando bien. Y si quieres, puedes cambiar de impuesto para ver cómo va a llenar el marco. Si quieres jugar con ese curso palabras diferentes, diferentes, vamos a llenar este marco un poco diferente. Entonces la siguiente pieza que vamos a crear aquí es Bueno, en realidad, en realidad, son todos estos párrafos, incluyendo esta cotización de bloque Y por supuesto, vamos a sumar a la imagen y estas thes tags aquí abajo. Pero hagámoslo realmente en el siguiente video 82. 29, Añade los párrafos e imágenes: Entonces ahora que llegamos al título cubierto, vamos a crear el texto principal para nuestro blogueado, y rápidamente voy a pedir prestado esta pieza de texto. Este título aquí mismo porque es un textil de marco va a ser simplemente más rápido para que cambiemos algunas cosas al respecto. En lugar de crear un nuevo marco de texto, voy a hacerlo sólo un poco más grande para algún lugar de aquí. Y, por supuesto, cambiemos el fondo de Roberto venga Dentista a Roboto. Ah, regular, Así como así Y vamos a cambiar el tamaño de fuente 16 y la línea esconderse de 46 a algo menos impresionante. Probemos 26 quizá no seis meses, 26. Al igual que eso. Por supuesto, puedes jugar con eso con la delantera con la altura de la línea si quieres. De hecho, en muchos bloques modernos, se puede ver que la línea de ocultar es en realidad bastante grande. Bastante extenso, debo decir. Supongo que hace que sea un poco más fácil de leer, sobre todo en unos dispositivos más pequeños, Así que si quieres ir con algo más grande, puedes hacer eso. También se puede hacer tal vez. Por supuesto, depende del frente, pero fondos como Roboto o arenas abiertas son especiales, específicamente diseñados para ser exhibidos en pantallas más pequeñas o, ya sabes, para ser bien visibles en las pantallas en cuando se muestran, el digitalmente para que tal vez puedas hacerlo aún más pequeño si quieres, y aún así jugar con eso con la mayor altura de línea para que se vea aún más. O digamos visible, si eso es si eso es con lo que quieres ir. Pero me voy a quedar con los 16 regulares y voy a ir con una altura de línea más pequeña, tal vez 28. Dejémoslo así. Entonces ahora vamos a moverlo hacia abajo otra vez por 50 gran fuente, Al igual que así y noté que algo interesante está sucediendo con los párrafos en mi en mi marco de texto. Es decir, si quieres, solo puedes hacer tal vez el marco más pequeño y luego bajarlo para crear un párrafo diferente , y entonces tendrías que agregar los 50 píxeles estándar si quisieras hacer 50 píxeles. Pero hay una forma más fácil de crear párrafos dentro de marcos de texto, así que solo bajemos a este tipo. A lo mejor, así Y ahora vamos a ir no al panel de caracteres, sino al panel de párrafos justo aquí y aquí dentro obtienes diferentes opciones de espaciado para que puedas terminar final en la primera línea. De hecho puede y tratará este espacio antes del párrafo. Pero lo que queremos es que queremos crear un espacio después de ese párrafo. Entonces si solo voy con cero aquí mismo, se puede ver que los párrafos Bueno, en realidad, no hay distinción entre párrafos. Pero si voy con algo loco como el 100 se puede ver que la brecha se está volviendo extremadamente, extremadamente grande. Y, por supuesto, se verá diferente si acaba de cambiar el texto de relleno. Se puede ver que a los párrafos aún conservan este espacio de 100 píxeles después de párrafo, ¿ verdad? Pero claro, no queremos que sea tan grande. Vayamos con 25 igual y otra vez. Quizás podamos cambiar algo del texto de relleno para crear un look completamente, completamente diferente, y podríamos jugar con él toda la tarde para que se vea un aspecto diferente. Piensa que no voy a estar gastando demasiado tiempo en ello solo quería mostrarte cómo usar las opciones de párrafo para crear este tipo de Ah, este tipo de efecto. Entonces ahora supongo que podemos. Para que podamos agregar la imagen, Este tipo de aquí. Entonces tal vez sólo déjame rápidamente chico de Brenda apenas un poco hasta algún lugar aquí y voy a agarrar el rectángulo para, y voy a crear un rectángulo que va a ser algo así. De hecho, estoy creando un cuadrado perfecto, perfecto. Por supuesto, puede ser un ángulo directo como este que es que simplemente es tu elección de diseño. Yo sólo quería ir con una plaza para que pareciera para que se viera un poco diferente, ya que es seguro para la fotografía. Sangre, vamos a conseguirlo. Pero vamos a ponernos un poco creativos. Entonces vayamos con tal vez 200 por 200 y movamos a este tipo hacia abajo por 25 píxeles igual. Entonces no lo que podemos hacer es simplemente crear algún texto de párrafo a la derecha de nuestra fuera nuestra imagen para que solo podamos tomar prestado este marco de texto, bajarlo y luego moverlo a la derecha. Y ahora quiero tener exactamente la misma brecha que la brecha entre párrafos. Entonces lo quiero. Yo quiero llegar a ser 25 pixeles, ¿verdad? Entonces lo que voy a hacer es simplemente hacer este marco de texto más pequeño. Por lo que voy a asegurarme de que a mi punto de origen de transformación se establezca a la derecha. Y voy a restar 25 de este marco de texto con Al igual que otra vez, puedo bajar a este tipo hasta que coincida con mi imagen, igual que otra vez hacerlo solo un poco más grande. A lo mejor el pan un poco arriba y otra vez Añadir 25 como así. Entonces ahora podemos Tal vez vamos a cambiar rápidamente el texto, el texto de relleno. Entonces tenemos que conseguirlo. Ya sabes, hacemos que parezca que es algo de verdad, Tex. Si es incluso si es sólo alguna simple Lauren Epsom, así y tal vez eso sea un poco demasiado. Por lo que ahora simplemente podemos agarrar el rectángulo y volver a insertar una imagen. A lo mejor esta imagen alfarería esta vez hagámosla más pequeña, así como así, Y ahí vamos. Obtuvimos la imagen Bueno, insertamos a la imagen dentro de nuestro bloque. presumir. Por supuesto, si quieres de nuevo, puedes hacer que la imagen sea más grande. Puedes hacer que pase a través de todo el pozo, nuestra voluntad de texto al contenedor. Eso En realidad es tal vez hacer eso realmente rápido, así que voy a bajarlo igual que otra vez. Agrega 25 así y me voy. Teoh, agarra esta imagen de alfarería y borra. No voy a hacer que el rectángulo se extienda a través de nuestro contenedor mundial. Y tal vez hagámoslo un poco más grande a algo así como 400. Bueno, eso puede ser un poco demasiado. Hagámoslo 300 y dejémoslo así. Entonces de nuevo, insertemos alguna imagen, tal vez la imagen de la ciudad. Hagámoslo más grande así como así. Ahora podemos volver a bajar este texto a los 25 y ahora realmente podemos agregar el bloque. Cita esta pieza de texto aquí mismo, y la pieza de texto de la cita de sangre suele ser tú sabes, algo importante que está dentro del texto. Si están bien, si el autor quiere enfatizar una cosa, entonces él o ella usualmente usará la cotización en bloque para hacer que esta pieza de texto destaque. Entonces hagámoslo realmente ahora mismo. Déjenme acercar. A lo mejor hagámoslo un poco más pequeño. Al igual que tan horrendo guía hacia abajo otra vez. Vamos a bloc 25 y cambiemos algunas cosas al respecto. En primer lugar, hagámoslo audaz así. Hagámoslo. Vamos a alinearlo al centro y hacerlo un poco más pequeño. Hagámoslo un poco más grande a algo así como 24. Vamos a añadir tal vez algo de altura de línea a 32 Hagamos esto solo un poco más grande y hagamos que todo el marco de texto sea más pequeño. Me refiero a un más estrecho porque normalmente estas citas de sangre no son eso para extenderse a los sitios. Entonces pongámoslo así. De acuerdo, así que conseguimos la cotización de bloque creada, así que las últimas piezas del próximo año serían solo Bueno, tal vez solo agreguemos una pieza de texto justo aquí, y agreguemos esas etiquetas. A lo mejor voy a cambiarlo rápidamente de este texto de relleno a algún impuesto de relleno diferente, así como así y debilitarme simplemente, sólo rápidamente tomar prestados estos comentarios, texto así. Bajemos y nos basemos de nuevo. Voy a moverlo hasta que sea broches con nuestros que tenemos con nuestros guías, y voy a sumar 25. Y cambiemos este texto de comentarios a algunos a algún impuesto o que ha estado recortando. Simplemente escribe algo como fotografía de estilo de vida en tal vez viajes, ya sabes, cosas como esa. De acuerdo, entonces se crea el texto, y la última pieza de la última pieza del rompecabezas sería agregar estos iconos de redes sociales aquí abajo y estas líneas simples para que el usuario pueda compartir nuestro contenido. Entonces hagámoslo realmente en el siguiente video. 83. Añade iconos de redes de redes sociales: Entonces voy a empezar con los íconos del endeudamiento y las redes sociales. A lo mejor de la barra lateral. Yo sólo voy a llegar rápidamente a ellos. Voy a copiarlos. Déjame acercar y los voy a basar aquí mismo. Y por supuesto, necesito asegurarme de que estoy en la capa correcta. Entonces déjame solo ponerme en una sola capa de post y basándome en así Y por supuesto, quiero que sean mucho, mucho más grandes. Entonces sólo voy a ver 32. 32 debe estar bien. Y voy a un grupo de ellos porque ahora mismo quiero no sólo cambiar su color, sino también añadir este fondo elíptico aquí mismo. Lo que voy a hacer primero es que voy a crear en los labios así. Voy a poner por supuesto, el icono contra esto, este fondo y para esto, los labios. Es decir, quiero que esta elipse sea para indicar que cada vez que alguien está rondando sobre esta esta elipse, este enlace y está bien, en realidad está indicando que ha sido resaltado por lo que sólo podemos dar la vuelta. Es un color igual que así y ahora podemos cambiar el color de nuestro ícono. Entonces como es un documento incrustado, lo voy a editar. Ya conocemos el taladro, así como así, y la imagen se pone bien. Se recibe una llamada diferente. Déjame solo tal vez hacer que la Ellipse sea un poco más grande. Hagámoslo. Vamos a duplicar su hacer un doble del tamaño del icono. Entonces si el ícono es tercero en hacer que la Ellipse 64 así y ahora simplemente podemos mover a estos tipos a decidir. Ahora sólo podemos pedir prestada la Elipse. Solo asegurémonos de que todo esté bien alineado. Toma prestada la elipse, ponla debajo del icono. Esa es una línea de estos tipos apropiadamente. Y por supuesto, esta elipse sería simplemente verde simple. Y quiero que este icono de Facebook sea blanco. Ahora lo voy a colonia una vez más y alineemos correctamente este icono de instagram y agreguemos el documento. Como lo puedes ver cada vez que cerramos el documento incrustado, sigue volviendo a nuestro 1er documento aquí mismo. Entonces déjame volver a la que estábamos trabajando y otra vez Colonia. Este tipo, pero debajo de ella la vengo seleccionar todo otra vez, agregó el documento. Está bien. Y nos dieron los iconos Creed. Y por supuesto, ahora podemos simplemente agrupar a todos estos chicos primero los iconos y sus antecedentes como decirlo así con estos chicos. Y ahora podemos sencillamente, señor, podemos distribuirlos adecuadamente. Por lo que voy a ir a la opción de alineación y distribución y distribuirlas. Por supuesto, si quieres distribuirlos por un número específico, podemos hacerlo. Por supuesto, puede ser, digamos, 16 puntos. No te olvides de golpear. De acuerdo, Ahora solo podemos alejar el zoom y ver cómo se ve. Y creo que podría parecer un poco demasiado grande, ¿ no crees? Sólo tal vez demasiado grande. Entonces simplemente podemos agarrar a todos estos tipos ahora mismo. Y en lugar de 64 vamos con algo como tal vez 48 tal vez incluso más pequeño que eso. A lo mejor como 36 creo que 36 debería estar bien. Vámonos. No vayamos más pequeños que eso. Ahora podemos simplemente agruparlos, y ahora, ya que quiero alinearlos en relación a mi contenedor de fondo. Necesito a Teoh. Desbloquearlo. Entonces primero. Por supuesto que necesito encontrarlo. Este es este tipo de aquí. Entonces voy a agarrar a ambos estos tipos los alinearon y ahora puedo saber que solo puedo volver a mirar este fondo. Entonces lo último que habría que hacer aquí sería ponerlo a donde tenga que ir. Es decir, en términos fuera en términos de la alineación, solo, um , arriba. Y ahora lo acaba de poner, Vamos a añadir Sólo vamos a tener 25 a ella. Y ahora simplemente podemos agregar algunos rectángulos simples que van a ser realmente pequeños. Yo quiero que sea tal vez incluso tan bajo también, tan pequeño como un píxel. Pero quiero que sean sólo un poco más amplios de, por ejemplo, 38 o tal vez 42. Y quiero que sean negros o esto fuera este muy, muy oscuro, gran collar. Y voy a ponerlos aquí mismo. Ahora simplemente podemos clonar a este tipo aquí mismo, y voy a convertir a ambos estos elementos en un grupo. Entonces ahora solo puedo agarrar tanto esos rectángulos como en los iconos de las redes sociales y simplemente puedo alinearlos al centro en relación entre sí. Y por supuesto, si quieres que estos rectángulos estén más cerca uno del otro, solo puedes seleccionar uno, como tan impreso un poco a la izquierda, tal vez solo un poco más. Pero como estos siguen siendo un grupo, solo puedo seleccionar uno. Si tan solo pudiera venderla una, así y puedo seleccionar el grupo, me refiero a los iconos de las redes sociales. Y de nuevo, si sólo los llevo al centro, se puede ver que están muy bien alineados entre sí. Pero claro, ahora tengo que agruparlos y alinearlos en relación a mi rectángulo, así como así. Entonces ahora si me alejo y tal vez apago los paneles, puedes ver cómo se ve en este momento. Por supuesto, lo último que se puede hacer aquí será simplemente agarrar este contenedor cosa, agregar 50 píxeles en su do su altura. Tengamos 15 así, y básicamente conseguimos nuestro contenedor principal creado. Por lo que agregamos a estas piezas fuera de texto. Agregamos que el bloque post titulado Estas piezas Off Parrafts las imágenes, cita de sangre y los ciclos de redes sociales. Entonces lo siguiente a hacer ah sería dejarme simplemente volver atrás sería agregar estos post anterior y siguiente presumir ítem de navegación porque queremos que el con el usuario a lector pueda ir rápidamente al post anterior y siguiente post para mantenerlos en nuestro sitio. Entonces hagámoslo en el siguiente video. 84. 31Vamos a añadir el pre de la entrada: en este video, vamos a crear un sistema de navegación para las entradas anteriores y siguientes. Entonces lo primero que voy a hacer es agarrar la herramienta de rectángulo y crear un rectángulo se estira a través de estiramiento desde este fondo y cuarto izquierdo de mi contenedor que voy a hacer sus dimensiones. Alguien específico. Yo quería ser, digamos, 300 píxeles de ancho, y yo quería ser 75 píxeles hasta que quería ser bastante, bastante ancho. Porque recuerda que tenemos que tener una imagen en una imagen de la izquierda y algún texto a la derecha. Por lo que tenemos que tener un poco más de espacio para trabajar. Entonces voy a cambiar su ah fondo. Bueno, está lleno, Dwight, y yo voy a Teoh, bájala por 25 píxeles. Entonces lo siguiente que voy a hacer es que voy a copiar a este tipo y pegarlo al frente, y voy a asegurarme de que en realidad sea un cuadrado. Por lo que quería tener 25 píxeles en con y 75 píxeles en dentro de 75 píxeles de altura. Entonces ahora mismo obtenemos esta imagen bien este rectángulo y un rectángulo debajo de él. Por lo que ahora podemos agarrarlos a ambos y simplemente dividirlos. Por lo que nos queda justo esta plaza, este rectángulo termina esta plaza. Por supuesto, esta plaza va a ser nuestro pozo, imagen un positor. Entonces otra vez, simplemente voy dedo del pie rápidamente Coloque una imagen. A lo mejor este muelle. Espero que estés que estés bien que no seas premiado con estas imágenes. De verdad quería tener muchos de ellos, pero, pero, ya sabes, supongo que es inevitable que algunos de ellos simplemente se repitan. Entonces déjame simplemente hacer rápidamente esta imagen es más pequeña. Por lo que las piezas de texto de Onley que vamos a necesitar realmente van a ser los enlaces para el post final anterior del propio título de la publicación en bloque. Por lo que voy a agarrar el click textil artístico y arrastrar y escribir en tipo in y post anterior . Y, por supuesto, cambiemos algunas cosas al respecto. En primer lugar, no quiero que sea cursiva, y no quiero que sea así de grande algunos tal vez Vamos con 12 y sólo para asegurarnos que estas Elise las letras se escriban usando todas las mayúsculas así. Y tal vez hagámoslo aún más pequeño decir 10 así Y entonces voy a traer a este tipo, pero tal vez no. A lo mejor sólo usaré el textil de marco. Permítanme cerrar este y crear un marco de texto. Vamos a ajustarlo sólo un segundo. Voy a insertar un texto de relleno, y este tipo tiene que ser roboto condensado, roboto condensado, audaz. Y quizá lo hagamos un poco más pequeño, como 18. Vamos a alinearlo a la izquierda y cambiemos la altura de la línea a algo así como 24 quizá brazo de hasta 20. Y bajemos a este tipo. Por supuesto, si quieres, puedes tener dos líneas fuera del texto aquí mismo, o incluso podemos ir por una línea de texto, igual que para que simplemente alejes rápidamente. Creo que la única línea de texto en realidad se verá un poco mejor, así que ahora sólo vamos a asegurarnos de que tenemos todos estos bien. La distancia entre el borde está bien, correcto, así que vamos a ver rápidamente como 2 25 se va a ver si no va a ser demasiado. Creo que el 25 va a ser sólo un poco demasiado. Entonces vamos con 12 para el movimiento del Eje Y y para el movimiento del Eje X también. Ahora vamos a agarrar este texto de marco y vamos a moverlo a la alarde anterior así. Y ahora movámoslo hacia abajo, Digamos, 12. Justo así Y veamos cómo se ve. Por supuesto, podríamos intentar con las diferentes mediciones, diferentes formas de posicionar a estos chicos. A lo mejor vamos a traer a este tipo un poco abajo, igual que tanto que podría volver a ser un poco demasiado. Eso Probemos, intentemos en realidad menos 12. Pero agreguemos algo así como 20 y veamos ahora cómo se ve. Creo que esto debería estar bien. Siempre podríamos sugerir en lugar de tratar de averiguar lo correcto. El directivo es la distancia correcta entre todos estos tipos. Simplemente adelante y agarra a ambos tipos y solo asegúrate de que estas piezas de texto estén exactamente en el centro fuera de este contenedor de pozo aquí mismo porque recuerda que tal vez si tenemos esto un poco. Bueno, el texto es un poco más largo o un poco más grande. Si solo cambiamos del texto de relleno, algunas cosas podrían verse diferentes, pero si tenemos a estos dos chicos exactamente en el centro, deberían acomodarse al contenedor y aún así permanecer en el centro fuera de nuestro sobre donde se contenedor. Entonces en este momento sólo podemos crecer rampa Esto, uh, esto navegará. Bueno, caja. Vamos a llamarlo así y podemos moverlo a la derecha. Por supuesto que no lo clone, pero muévelo a la derecha. Creo que esto debería estar bien. Por lo que para hacer nuestro trabajo más fácil, sólo podemos agarrar todos estos elementos. Y simplemente podemos usar la barra de herramientas para voltear todo horizontalmente. Pero por supuesto, como pueden ver, también volteamos ese texto de alguna manera. Bueno, es decir, ya sabes, bueno, hace que el texto sea ilegible. Pero antes de que me ocupe del texto, voy a agarrar esta imagen y la voy a borrar. Voy a añadir uno diferente. Entonces vamos a dirigir tal vez la imagen del pastel y otra vez hacerla significativamente más pequeña. Al igual que tal vez un poco a la izquierda así como así. Y ahora si sólo agarramos de nuevo a estos tipos y los volteamos a la izquierda, vamos a tener el texto correcto. El impuesto se va a escribir correctamente, ¿verdad? Pero todavía hay una cosa que tenemos que hacer. Es decir, si acabamos de agarrar a un amigo textil y agarramos este trozo de texto, podemos alinearlo a la derecha y podemos simplemente agarrar este texto anterior post así, y podemos moverlo a la derecha y también alineándonos a la derecha, porque ahora mismo, cuando cambiemos este texto, eso lo cambiará de previsualizaciones a siguiente. Noté que el texto se está acomodando a su derecha, ancla derecha, por así decirlo. Entonces no tenemos que cambiar nada ahora mismo. Pero por supuesto podríamos tal vez cambiar este texto de relleno para hacer para vincularlo a un bloque diferente . mayoría igual. Y ahí vamos. Llegamos a la navegación creada, así que simplemente usaremos los rectángulos simples, agregamos algunas fotos, fotos cuadradas y luego agregamos algo de texto. Y entonces simplemente volteamos la colonia de bolas y volteamos esta caja de navegación a la derecha y luego simplemente hicimos algunos trucos para que sea Luca correctamente. Entonces la siguiente pieza de diseño que vamos a crear es esta cuenta relacionada, como un display off posts aquí abajo. Entonces hagámoslo en el siguiente video. 85. Añade la sección de publicaciones relacionadas: la sección de publicaciones relacionadas fuera de nuestra página. Entonces primero, déjame solo tal vez rápidamente tomar prestado algunos de los off los activos que ya tenemos, algunos van a agarrar esta etiqueta y esta primera imagen, y luego voy a ir y luego voy a tratar de pegarlo en la capa correcta, al igual que así y lo voy a entrenar. Déjenme acercar. Esto debería pelear. Y por supuesto que lo voy a bajar en 50 píxeles. Y por supuesto, no queremos que diga anuncios queríamos guardar jactúas relacionadas, algunas van a cambiar rápidamente esto a continuación. Y entonces me limitaré a agarrar este rectángulo y llevarlo a la derecha así como así, ya sabes y cómo hacer cómo hacer esto. Entonces tal vez lo comprobaré primero. Si esta distancia entre estos chicos es de 50 o 25 debe ser de 25 Así que estamos bien para ir. Entonces vamos a comprobar con el original cómo se supone que tiene que ver. Bueno, como se puede ver esta Ah, esta imagen de aquí mismo es más de un cuadrado, más de un rectángulo, entonces es un cuadrado, pero claro, es solo mi preferencia de diseño. Simplemente mi elección de diseño. Si quieres, puede ser soy Puede ser un pozo, un rectángulo. Por lo que voy a quitar rápidamente esta imagen así así así sólo puedo ajustar este rectángulo aquí mismo. Entonces me voy a ir con 2 70 tal vez por 200 así y voy a añadir una imagen. A ver, tal vez esta imagen navideña, ¿por qué no? Y hagámoslo más pequeño. Se ha hecho la imagen más pequeña. Recuerda que Si quieres solo la imagen desde el punto central. Basta con mantener la tecla de control así como así. Por lo que ahora podemos agregar al título del post bloque de texto y el read More taxi de No se equivoca? Sí, exactamente. Este tipo de aquí. Entonces me pongo voy a agarrar la herramienta de rectángulo, encontrar el punto derecho inferior izquierda derecha aquí y creé un rectángulo a 70 por 100. Esto debería estar bien. Por supuesto. Quiero cambiar el color dedo del pie blanco y otra vez y agarrar el taburete texto marco. Crear un marco que se va a llenar con algún texto de relleno alineado a la izquierda Roboto condensado negrita está totalmente bien. Vamos con dos líneas de texto y vamos a mover a este tipo a la izquierda y ponerlo aquí mismo. Y ahora Vamos a comprobar realmente qué haría, cómo se vería con el si tuviera 25 píxeles, huecos a su alrededor. Entonces primero, voy a hacer su va a establecer el punto de origen de transformación de origen de transferencia en el centro, y lo voy a hacer. Voy a hacerlo más pequeño por 50 píxeles, así que menos 15 igual, y voy a empujarlo hacia abajo por 25 también. Ahí vamos. Por lo que ahora sólo podemos agarrar el textil artístico y teclear en leer más así. Entonces cambiémoslo de regular demasiado audaz. Y hagámoslo más pequeño. Probemos 14 y vayamos con este color verde así, y veamos cómo se vería si pudiéramos moverlo por 25 píxeles desde abajo y desde la escuela correcta que en realidad ha comenzado la transformación desde abajo. Entonces vamos a moverlo a la izquierda por 25 y vamos a moverlo hacia arriba por 25 así que podría ser solo un poco demasiado grande y también podría tal vez hacerlo un poco más pequeño. Ese C 10 puede ser en realidad. Podría estar bastante bien. Pero vamos a mover a este tipo hacia abajo entonces y vamos a moverlo hacia arriba. 25 podría ser sólo un poco demasiado. Yo lo creo. Creo que es demasiado. Entonces vamos a moverlo hacia abajo. Vamos a restar dos, Digamos 10. Bueno, es agrega, hecho así Eso debería estar bien. Dejémoslo. Dejémoslo así. Ahora voy a agarrar, por supuesto, todo este fragmento aquí mismo. Y tal vez vamos a encender rápidamente la grilla así. Entonces ahora podemos mover a este tipo a la derecha una vez y luego solo presionar el control j para moverlo a la derecha o para clonarlo a la derecha una vez más. Ahora sólo podemos cambiar esta imagen así como así. A lo mejor el veamos, tal vez la imagen del gato. Hagámoslo más pequeño. Vamos a cambiar este texto de relleno así, Y vamos a cambiar esta última imagen de Navidad a otra cosa, Claro. Esté seguro dentro de la selección. Sí, vamos con el sándwich así Y ahí vamos. Por supuesto, si quieres, tal vez puedas hacer este contenedor un poco más grande. Entonces, en realidad, este tamaño esta brecha aquí está bien también es 25. Entonces obtenemos la misma brecha aquí y la misma brecha aquí mismo. Entonces tal vez hagámoslo realmente. Y hagámoslo en un solo lote. Entonces voy a traer a todos estos tipos arriba, y luego solo y luego solo anuncio aquí mismo. 52 su altura, 25 no 50. Eso sería un poco demasiado. 25. Al igual que eso. Entonces así es como podemos crear este tipo de una sección que te relates presumido. Déjame simplemente apagar la grilla. Apague los paneles. Entonces ahí vamos. Esto es lo que parece ahora mismo. Por lo que conseguimos la imagen destacada. Llegamos al texto el bloque post. Nos dieron esta anterior siguiente navegación post. Nos dieron los puestos relacionados. Y lo último que aún tenemos que hacer es esta sección de comentarios aquí mismo. Entonces vamos a comprobar realmente cómo crear esta sección en el siguiente video 86. Empezemos a crear la sección de comentarios: Entonces empecemos a crear de la sección común haciendo que esta obra sea un poco más grande, porque creo que pronto nos vamos a quedar sin espacio aquí mismo. Entonces voy a ir al aborto al arte, agarré el arte de los tableros a y traer a este tipo de manera bastante significativa a algún lugar de aquí . Entonces podemos simplemente agarrar nuestra comida o dejarme simplemente encontrarla rápidamente en algún lugar Aquí. Este es este tipo de aquí y solo podemos solo dejarme agarrarlo adecuadamente y debilitarme. Bájala para escuchar, Así como así. Entonces ahora volvamos al jugador correcto y tomemos prestado este sello. Este relacionado presume etiquetas. Voy a copiar bases al frente, bajarlo y volver a agregar al estándar 50 pixeles como lo siguiente. Lo que voy a hacer es agarrar la herramienta de rectángulo y crear un contenedor para nuestros comentarios. Pero voy a volver a torneo la visibilidad fuera de la parrilla encendida y simplemente crear un contenedor que va a ser bastante grande, bastante contado, y voy a moverlo hacia abajo por 25 como así. Entonces si le echas un vistazo al original. Lo primero que tenemos que hacer es,por supuesto, por supuesto, cambiar la etiqueta aquí mismo y luego agregar en la imagen el avatar y luego algo de texto. La fecha El nombre de la persona que comentó el botón de respuesta justo aquí y luego debilitarse solo repetirá el proceso con esto, uh, bueno, con esta respuesta y aquí abajo. Entonces primero voy a cambiar esa etiqueta de presume relacionada a comentarios. Después la guía de Brenda a la izquierda. Esto va a estar bien. Entonces ahora vamos a crear su primer avatar. Esto es un mendigo. ¿ Este rectángulo esta plaza y esta persona de aquí? Entonces, claro, empezaremos con agarrar la tienda de Ellipse igual que así, y pongámosla de color rosa. Entonces, fin de crear el cuerpo de nuestro avatar, agarremos esa herramienta de rectángulo redondeado. Este es este tipo de aquí. Y vamos a crear rápidamente un rectángulo redondeado que se va a ver algo así. Me voy con los dedos de los pies. Haga clic en la opción de radio único justo aquí, y voy a entrar cero para el paseo inferior izquierdo e inferior. Correcto. Valores aquí mismo. Cero para que este tipo así, como puedes ver, acabamos de crear rápidamente transformado este alrededor rectángulo de como 1/2 rectángulo redondeado . Y todo lo que tenemos que hacer en este momento es que podemos simplemente tener que jugar un poco, también, con el con los otros valores, para que se vea justo como queremos. Entonces tal vez vamos a traerlo sólo un poco arriba. Y por supuesto, aún podemos hacer de este radio más grande si queremos. Probemos 35. Eso es McNish, Allders, hasta 35 lagos. Entonces creo que esta luce creo que esto se ve bien. Por supuesto que siempre podemos Siempre podemos simplemente agrupar a estos tipos hacerlos más pequeños, hacerlos más grandes. Podemos hacer con estos chicos, lo que sea que quieras y déjame simplemente echar un vistazo rápido al original. Se pone en contra de este cuadrado oscuro. Algunos van a ir a envolver el cuadrado oscuro, y tal vez sólo voy a usar la opción de selección insertada detrás para crear un cuadrado así y hacer un negro y hacerlo un poco más pequeño, algo así Y vamos a saber, una línea. Todos estos elementos juntos así como así. Entonces ahora solo rápido tal vez duplicemos a este tipo para que no tengamos que hacerlo de nuevo en tan solo un segundo. Y vamos a Ah, vamos a dar a estos chicos los colores adecuados. Hagámoslos oscuros. Y hagamos este fondo rosado como la salsa. Y ahora tenemos ambos los avatares creados. Entonces en el siguiente video, realidad vamos a empezar a crear estas piezas fuera de texto y estas piezas de texto. Aziz. Bueno, entonces nuestros comentarios que parecen ser realmente vienen, así que mantente atentos. 87. 34y Crear textos para los comentarios: Si echas un vistazo al original, puedes notar que el relleno dentro de aquí esta sección común es mucho, mucho más grande que los márgenes que normalmente creamos. Creo que son, um, más de 50 píxeles, y esto se hace con el fin de, ya sabes, no hacer todo simétrico. Pero para agregar algunas dinámicas al diseño, no tienes que bien, en la sección común como esta, si lo estás creando,ya sabes, ya sabes, si es una costumbre hecha a mano, hizo un sección, puedes ponerte un poco más loco que viento con los todos los demás elementos. Entonces en este caso, echemos un vistazo a cómo se verán nuestros comentarios si tienen más espacio a su alrededor . Entonces lo primero que haré que solo aleje el zoom es que voy a usar este avatar como mi tipo de ancla para otras piezas de diseño que voy a crear en tan solo un segundo. Pero creo que lo haré sólo un poco más pequeño. Vamos a revisar 48 por supuesto, vamos a asegurarnos de que vinculamos todo lo que esto es un grupo y que vinculamos su tamaño así como así. Entonces vamos con 48. Creo que 48 estará bien y lo voy a poner aquí en la esquina superior izquierda, así como. Y ahora lo voy a mover a la derecha por 100 pistas. Check 100 Voy a moverlo hacia abajo por 100 también. Al igual que así. Por lo que ahora simplemente voy a crear bien gravados se texto fuera del comentario. Entonces voy a agarrar el textil artístico y crear una fecha. Va a ser costilla Otto. Creo que usualmente vamos con metalizado. Vayamos con 14. Vamos a entrar a la fecha y tal vez hagámosla aún más pequeña. 10 debe estar bien. ¿ Sabes qué? A lo mejor voy a bloquear este este fondo aquí mismo, para que no lo estropeemos accidentalmente. Entonces ahora podemos movernos este octubre, Digamos por hecho, y tal vez sólo un poco hacia abajo, como así vamos a echar un vistazo rápido al original, cómo se ve en la versión original. Es algo así. Supongo que podemos. Podemos dejarlo así solo podemos saberlo, imprimir a este tipo y bajarlo por 10. Y cambiemos esto una cita por un nombre y este tipo estará verde en todas gorras y hagámoslo un poco más grande. Y ahora vamos a añadir el siguiente cuadro así, y lo que podemos hacer es que podemos Gran Bretaña este texto de todo el camino a la derecha, como solemos hacer, y podemos hacerlo más pequeño. Así que rastreemos a 100 así, y vamos a llenarlo con algunos con algún texto de relleno que es que va a ser Roboto regular 16. Por supuesto, como puedes ver las veces solo tienes que hacer clic una vez más para seleccionar realmente el impuesto porque encajar en diseñadores a veces simplemente no quiere cooperar cuando se trata de cambiar en el texto a ti bien, al parecer tienen que tener seleccionado el texto específico. Simplemente puedes manipular el marco de texto, lo cual es un poco de vergüenza, Así que tal vez sea solo un poco arriba. Déjame sólo echar un vistazo rápido y rápido y vamos a mover a este grupo a algún lugar aquí porque todavía necesitamos escribir las palabras onduladas respuesta palabra. Vamos a moverlo hacia abajo por Vamos a ver 15 y deja off click en esta antigua opción de Caps. Hagámoslo pero más pequeño a 10. Y tecleemos en respuesta. Y creo que quizá quisiéramos moverlo a la derecha porque supongo que sería más fácil para la gente hacer click si estuviera bien puesto a la derecha. Entonces es sólo una ligera modificación. Entonces supongamos que alguien realmente ha respondido y vamos a bajar a este chico malo. Veamos 15 y sólo podemos agarrar esta pieza de texto, esta pieza de texto, esta pieza de texto y esta pieza de texto clonarlo hacia abajo y moverlo hacia la derecha. Creo que fueron 10 y no. Y ahí vamos. A lo mejor vamos a cambiar el nombre de esta persona también, también, John. Y por supuesto, vamos a hacer este marco de Texas más pequeño, incluso un más pequeño como ese. Y llevemos este texto contestado a la izquierda, así como así. Entonces lo siguiente que haríamos es que solo crearíamos ese formulario para los comentarios, esta sección de dejar respuesta aquí abajo, Así que hagámoslo en el siguiente video 88. 35y Crear los formularios de la publicación: por lo que antes de crear la forma para los Comunes. Así que vamos a solucionar rápidamente un problema que tenemos aquí mismo. Simplemente no cambié el tamaño de este avatar. Este tipo es más pequeño es de 48 pixeles con el ancho, pero este tipo no es así Se arregla rápidamente este, Así que es tipo en 48. Y por supuesto, tenemos que llevar a estos chicos a la derecha y hacer que todo este marco sea más pequeño por 10 píxeles. Bueno, vamos con menos 10. Al igual que eso. Por lo que ahora sólo voy a crear un los comentarios que la forma para los Comunes. Pero déjame simplemente hacer rápidamente esta cosa este contenedor sólo un poco más grande. Entonces voy a empezar con la adición del texto que se va a decir, Deja una respuesta. Algunos van a agarrar la herramienta de texto artístico, empezar en algún lugar aquí y escribir en el dejar una respuesta, O tal vez dejar un comentario y hagámoslo rosa. Hagámoslo. Hagámoslo audaz, no cursiva, Y hagámoslo más pequeño. A lo mejor no tan pequeño. Esto debería estar bien. Vamos a plantearlo y por supuesto que podríamos. ellos pudimos quizá tratar de mover a este tipo a la derecha para que coincida con el texto de respuesta justo aquí y ahora pudimos moverlo hacia abajo por 50 como así movió este tipo a la izquierda y moverlo a la derecha por 50 igual que algunos. Entonces ahora si echamos un vistazo al original, podemos ver que tenemos este cuadro de comentarios aquí mismo. Aquí es donde la gente escribiría el comentario real. Nos dieron el nombre para la gente, para la persona que comentaba su correo electrónico y, por supuesto, el fondo aquí abajo. En realidad podríamos indicar tal vez dos estados cuando la gente está rondando sobre el botón. Entonces es un estado regular. Es estado ocioso, y por supuesto, es Ah, estados hover. Por lo que podríamos en la primera crear un botón verde y luego crear este fondo rosa para indicar y cómo debe ser este fondo, cómo debe ser su fondo cuando la gente está rondando sobre él. Pero empecemos con la arena de las cajas, los elementos fuera de nuestra forma. Entonces con la herramienta de rectángulo, voy a crear un rectángulo. Lo voy a estirar a través de este contenedor Y luego simplemente voy a restar 50 así, y voy a moverlo hacia abajo. Veamos 50. Creo que esto estaría bien y lo voy a hacer blanco. O tal vez Grace. En realidad lo podemos ver. Y luego voy a agarrar la herramienta fiscal artística. Basta con acercar y voy a escribir un comentario. Y yo quería ser sobre un regular, tal vez 10. Demos este gran auto, voy a bajar y luego lo voy a subir por, digamos, 10 píxeles así. Simplemente podemos dejarme crear a este tipo, tu cama hacia abajo. Y ahora solo podemos agarrar estos dos elementos, moverlos hacia abajo y luego bajarlos. Vamos a revisar 25. Estar 25 debería estar bien. Y cambiemos el comentario por que creo que era nombre y rezemos a este tipo para arriba. Hagámoslo 50. Bixel es alto y vamos a extendernos hacia la izquierda. Ahora llevemos a este tipo a la derecha. Por supuesto, estoy presionando la tecla de control para clonarla. Y cambiemos el nombre a correo electrónico, Por supuesto, Necesitamos algo de espacio entre estos thes dos rectángulos, así que voy a crear rápidamente un rectángulo que va a tener 25 píxeles de ancho. Cambiemos su color. Y no pudimos simplemente unir rápidamente estos elementos. chico de Brenda arriba. Pongámoslo al frente. Asegurémonos de que estén correctamente alineados con el disidente, y podemos justo ahora, usando la barra de herramientas. Podemos simplemente restarlo como So a menos que sólo traiga a este tipo a la derecha. Esto estará bien. Entonces lo único que se debe adherir es, como dije, esta post comentario post dedo común Bueno, botón. Entonces volvamos. Y por lo que recuerdo, fueron 50 píxeles. Sí, eran 50 píxeles por lo que rápidamente acaba de agarrar la herramienta de rectángulo y crear rectángulo que va a ser de 50 píxeles de alto, igual que así. Y lo voy a mover hacia abajo por 25. Entonces quiero que estos sean mis botones primarios, el que la gente ve cuando está a punto de publicar un comentario, algunos lo van a poner verde igual que eso. Y voy a agarrar de nuevo el textil artístico y escribir en post comment. Voy a cambiarlo de regular demasiado audaz, y voy a hacerlo más pequeño, tal vez aún más pequeño, y voy a hacerlo blanco. Pan para arriba. Bajémoslo a 18 y los voy a alinear adecuadamente. Y ahora sólo agarraré estos dos elementos y los bajaré y luego los bajaré nuevo a los 25. Entonces ahora solo puedo convertir a este tipo en un botón rojo. Por lo que sólo puedo indicarle a ese desarrollador que cuando alguien está rondando sobre este botón quería girar para ponerme rojo. Y si no quieres, si no necesitas este gran hueco, simplemente puedes hacerlo más pequeño. Entonces tal vez sólo vamos a sólo en lugar de 25 vamos sólo con 10 igual y vamos a alejar . Entonces ahora podemos subir a este tipo así y agregar nuestros 50 pixeles estándar a su altura así. Entonces, en realidad, lo último que hacer sería simplemente volver a subir el pie de página, algunos van a seleccionarlo, marcarlo y luego agregar, Vamos a ver, 25 o 15 tal vez 50. Ya no necesitaremos que este tablero de arte sea así de grande. Y por supuesto, apaguemos Big Red. Entonces ahí vamos. Creamos una página de publicaciones de un solo bloque, por lo que agregamos al destacado un mucho en lugar del deslizador. Y luego agregamos que bueno, el contenido principal para nuestros arcos de bloque, que era el texto. Agregamos algunas imágenes también. Después agregamos a sus iconos de redes sociales la navegación anterior y siguiente post. Están relacionados sección de correos y luego en la sección Commons. Y por supuesto, mantuvimos algunas partes fuera de nuestra imagen principal. Bueno, donde nuestro principal diseño, que era el encabezado, el Cyber y el Pie de Página. Entonces espero que te guste este diseño y que vayas a compartir tus propios diseños. Tal vez inspirado en este diseño con nuestra comunidad y definitivamente si son bien, te animo a crear tus propios diseños cuando se les ocurre no necesariamente inspirados en este diseño. Pero tal vez no estás usando nada para diseñar un sitio web de arma will para un cliente. Eso sería genial si lo compartieras con nosotros, así que yo bueno, hasta la próxima vez, ten un bonito diseño