7 proyectos de diseño web en GIMP: aprende diseño web en GIMP de forma práctica

1. Gimpwebdesign: Hola. Soy Chris Parker y he sido diseñador pro gráfico desde hace 30 años, y recuerdo mi primer diseño de página web todo el camino atrás en 2002. Fue horrible. No tenía ni idea de lo que estaba haciendo. Y después de 16 años y cientos de diseños de sitios web después, he aprendido qué hacer y qué no hacer. Entonces en este curso se trata más que solo de diseño Web. Se trata de diseñar un sitio web con el usuario final y la mente, y en realidad es incluso mejor que eso. Se trata de hacer porque no sólo vas a verme diseñar. Te animo a que tomes lo que aprendes y diseñas exactamente lo que creé. Entonces es hora de tomar lo que diseñé y hacerlo mejor para hacerlo tuyo. Cuando hayas completado este curso de diseño Web, tendrás siete diseños Web únicos para tu portafolio. Ahora, además de diseñar siete sitios web únicos, compartiré con ustedes mis 16 años de experiencia y brindaré consejos riel world sobre la creación mejores sitios web que los consejos promedio de diseñadores sobre la venta de servicios adicionales a su clientes y mucho más. Este curso fue diseñado tanto para principiantes como para usuarios avanzados. Al inicio del curso, vamos a repasar todas las herramientas básicas y que necesitas como diseñador Web. Ahora, si ya estás familiarizado con, puedes saltarte esa sección y sumergirte en la anatomía de un sitio web. Por lo que en esa sección vamos a diseccionar cada sección de un sitio web para ayudarte a mantener organizados tus archivos PSD . Después descubrirás los estilos de diseño web más populares, el sistema de cuadrícula, y luego podrás comenzar en los siete proyectos de diseño Web. Te mostraré paso a paso, cómo crear un sitio web desde el encabezado hasta la sección de héroes, los diferentes elementos que conforman el cuerpo y luego finalmente, el pie de página. Ahora, en cada proyecto, aprenderás algo nuevo, y cada proyecto se basa en el último. Por lo que aquí te presentamos solo algunas de las cosas que vas a aprender en este curso de diseño Web. Aprenderás a crear diseños web que proporcionen una gran experiencia de usuario y por qué necesitas crear una gran experiencia de usuario. También aprenderás cómo crear una gran experiencia de usuario ayudará a que tu cliente haga crecer su negocio, y a su vez te ayudará a conseguir más negocios tú mismo. También vas a aprender agregar adicional en servicios en los que puedes hasta vender a tus clientes además de solo diseño Web. Y luego vas a aprender las herramientas para hacer fondos creativos que ayudarán a captar atención de la gente mediante el uso de resplandor, máscaras de capa y más. También vas a aprender lo que se necesita para triunfar como diseñador Web y destacarte entre las decenas de miles de otros diseñadores web que hay por ahí. Y esto va a ayudar a asegurar que tengas éxito en tu carrera de diseño Web. Aprenderás la importancia de elegir las fuentes adecuadas y otra topografía. Pro tips. También vas a aprender consejos pro adicionales no solo sobre el diseño, sino también el final del negocio del diseño y mucho más. 2. Introducción a la anatomía de un sitio web: Hola y bienvenidos de nuevo. Muy bien, entonces en esta sección, vamos a aprender todo sobre la anatomía de un sitio web porque como diseñador web, necesitas conocer la terminología que describe las diferentes partes que conforman un sitio web . De esta forma podemos comunicarnos con otros que trabajan en el proyecto, especialmente con el desarrollador web que es responsable de codificar el sitio web. Y necesitas poder mostrar y tu Web diseña las diferentes secciones y luego no nombrar secciones basadas en la terminología que es un estándar de la industria. Entonces tenemos seis secciones principales que conforman un sitio web, su brazo o pero sólo vamos a cubrir el seis principal, que cubre el encabezado, la navegación, la sección de héroes, el cuerpo, el pie de página y la barra lateral. Entonces vamos a cubrir los seis de esos iban a ver algunos ejemplos, y te voy a dar algunos consejos pro sobre cada uno de los de diferentes secciones también. Entonces si estás listo para aprender todo sobre la anatomía de un sitio web, hagámoslo 3. Encabezado: la primera sección del sitio web se le conoce como el encabezado, que se encuentra aquí arriba en la parte superior de un sitio web, por lo que los encabezados que van del dedo del pie tienen alguna información sobre el sitio web. En general, los tipos de contenido más comunes en esta sección son un logotipo, un menú y posiblemente algunos enlaces de redes sociales. También podrías hacer una búsqueda Berg como yo tengo aquí. También tengo un enlace a algunos artículos de tendencia aquí arriba en la parte superior. También podrías hacer alguna información básica de contacto, como tal vez una dirección de correo electrónico o tal vez un número de teléfono. Puedes tener algunos enlaces a páginas de cuentas de miembros, por lo que tenemos una opción de inicio de sesión aquí. También podrías hacer cosas como las llamadas Botones de Acción. A lo mejor tienes una empresa de software, y quieres ofrecer tu software para una prueba gratuita por 30 días. Podrías tener un botón de acción fría para eso. O tal vez estás diseñando un sitio web para una organización sin fines de lucro. Podrías hacer un botón de donación aquí arriba. Las posibilidades son infinitas para los botones de llamada a la acción que puedes incluir ahí dentro , y esos son solo un par de ejemplos Ahora, Todo lo que mencioné hasta ahora son solo sugerencias para lo que podrías poner en el encabezado y en realidad podrías poner información de Mawr en el encabezado también. El problema es que no quieres poner demasiada información. De lo contrario se pone demasiado ocupado. Y entonces el punto focal de ese encabezado se diluye porque el espectador está procesando demasiada información porque hay demasiada que mirar. Mi encabezado en realidad está probablemente demasiado ocupado, pero por eso lo dividí en dos colores diferentes. Por lo que esta zona azul aquí sólo tenemos el logo en el menú y luego el gris oscuro. Tengo mis iconos de redes sociales, búsqueda y mis artículos de tendencia por aquí, y está separada de esta parte de aquí abajo, pero sigue siendo parte del encabezado. Entonces esa es una forma de diseñar tus encabezados y alejarte si tienes muchos elementos que quieres poner en el encabezado. Pero suele ser mejor solo hacer algo sencillo, como un logotipo, un menú de navegación y luego algunos iconos de redes sociales. Eso no significa que no puedas hacer nada creativo, pero aún así puedes mantenerlo sencillo haciendo algo con un tipo de diseño creativo. Por lo que solo ten en cuenta que el propósito del encabezado es darle a tus espectadores una oportunidad a uno confirmado que están en la página correcta si se identifican con tu logo y tu identidad de marca, y darles la oportunidad de encontrar qué es lo que están buscando a través de tu menú o si es un cliente existente para acceder fácilmente a su cuenta existente. Entonces si está demasiado ocupado y está pasando demasiada información, solo vas a hacer difícil que tus espectadores accedan con el dedo del pie a lo que necesitan. Por lo que en la mayoría de los casos, recomendaría limitar su encabezado a su logotipo, su menú y luego de 1 a 2 elementos más a lo sumo ahora, otros aspectos del diseño de su encabezado pueden incluir lo que se conoce como un encabezado pegajoso. Entonces si empiezo a desplazarme por este sitio web, podemos ver que el menú ha desaparecido. Entonces en un encabezado pegajoso, cuando comienzas a desplazarte, el encabezado se pega a la parte superior de la página del navegador. Entonces eso es algo más que puedes crear como parte de tu diseño con el fin de ayudar a tus espectadores a tener fácil acceso a otras partes del sitio web. Entonces en lugar de tener que desplazarse todo el camino de vuelta hasta la parte superior. Un encabezado pegajoso hace que sea fácil para los espectadores acceder a páginas adicionales si no están encontrando lo que necesitan dentro de la parte interna de esa página Web. De acuerdo, entonces en la siguiente lección, quiero hablar un poco más de nuestro menú porque tenemos algunas opciones de diseño diferentes para esa navegación o ese menú basado en la colocación así como diferentes estilos de diseño para el propio menú. Entonces vamos a seguir adelante y echarle un vistazo a eso en la siguiente lección. 4. Navegación: Hola y bienvenidos de nuevo. Muy bien, entonces en esta lección, solo vamos a repasar algunos aspectos diferentes de tu navegación o de tu menú. Y por sí mismo, creo que es una sección completa de su sitio web que está separada de todo lo demás. A pesar de que la mayoría de las veces lo vas a encontrar en el encabezado, no necesariamente tiene que ir en el encabezado. Y les voy a mostrar algunos ejemplos de eso en tan solo un segundo. Por lo que para este sitio web, tenemos un tipo de menú muy sencillo, clásico donde tenemos tres enlaces a tres páginas diferentes. Otro tipo de menú es aquel que tiene menús desplegables. Entonces, cuando pases por encima de un enlace específico, vas a bajar este borrador para obtener opciones adicionales. Por lo que esta es considerada la navegación primaria para este sitio web en particular. Pero sí tenemos una navegación secundaria también, que es este ítem aquí mismo. Estos cuatro enlaces se consideran un tipo secundario de menú y luego, al hacer clic en ellos, obtendrás diferentes resultados en función de las categorías para esos enlaces en particular, al menos para este sitio web. Ahora, no todos los sitios web se van de pie tienen un menú secundario. Todo depende del sitio web y de la cantidad de información que tengan para que los espectadores encuentren en su sitio web particular, razón por la cual he separado parte de mi contenido en un menú secundario, que solo es accesible para los miembros existentes. cual es otra razón por la que no quise volver a poner estos enlaces dentro de la navegación primaria . Se trata de un tipo clásico de menú, y existe otro tipo de opción de menú llamado mega menú que puede expandirse en la cantidad de información en el menú desplegable. Y eso se puede ver desde este sitio web aquí. Y cuando pases por encima de diferentes tipos de longitudes, vas a conseguir diferentes opciones. Por lo que este aquí mismo se considera un mega menú porque tiene imágenes incluidas con enlaces a esa página o artículo en particular. Y esto también se considera un mega menú porque tiene múltiples columnas bajo un encabezado de menú , y está dividido en diferentes categorías. En base a ese contenido de sitios web en particular en cualquier momento. Tienes mucha información como esta, o imágenes que se considera un mega menú. Ahora, como mencioné antes, no tienes que colocar tu menú dentro del encabezado. En realidad puedes colocarlo en una barra lateral a la izquierda o a la derecha del sitio web. Incluso he visto menús colocados en la parte inferior con enlaces para navegar a diferentes partes del sitio web. Ahora, nueve veces de cada 10 vas a ver menús colocados en el encabezado vs en una barra lateral o abajo en la parte inferior. Este tipo de diseño, donde la navegación está dentro del encabezado, es práctica estándar. Es a lo que la gente está acostumbrada. No se ven muchos sitios web con un menú en una barra lateral o incluso en la parte inferior. Es aún más raro frente a una barra lateral. Por lo que quieres que sea fácil para que las personas accedan a tu sitio web y a las diferentes páginas de tu sitio web para que puedan encontrar la información que quieran. Y si una persona viene a tu sitio web y no está familiarizada con un menú en la barra lateral o el diseño es diferente porque están acostumbrados a que el menú esté aquí arriba y no aquí abajo en la parte inferior o en el lateral, entonces pueden se frustran un poco si no son capaces de encontrar lo que están buscando, y pueden sentirse frustrados o apagados debido a ese diseño, porque antes había algo que apareciera en la parte superior. Eso no va a decir que va a ser lo mismo para todos. Pero algunas personas podrían estar apagadas al tener en esto en el costado o en el fondo. Por lo que hay que estar al tanto de su audiencia o de su audiencia de clientes y determinar si eso es algo que va a mejorar el diseño del sitio web y la funcionalidad del sitio web. Si es una multitud más joven de lo que probablemente no es gran cosa. Pero si se trata de una multitud mayor, entonces tal vez quieras quedarte con algo más convencional con tu navegación arriba en el encabezado. El otro tipo de opción que tenemos para nuestro menú es ocultarlo por completo. No vemos ningún enlace en el encabezado, en la barra lateral o en el fondo aquí abajo otra vez, este tipo de diseño va a depender de la audiencia esperada para ese sitio web. Ahora puede que estés familiarizado con dónde está el menú, pero si nunca has visto esto antes y no sabes dónde buscar el menú, entonces vas a salir de la página web así que nuevamente quieres que las cosas sean fáciles. para que los espectadores encuentren lo que quieren cuando lleguen a la página web. Pero como probablemente sabrán, esta cosita de aquí con estas tres líneas parece una hamburguesa, y a veces se hace referencia a una hamburguesa, un ícono de hamburguesa. Sabes que si haces clic en él, entonces obtienes tus enlaces a las diferentes páginas del sitio web. Entonces de nuevo, tenemos aquí un menú realmente simple, con tres enlaces a tres opciones diferentes, además de un par de iconos de redes sociales. Entonces al ocultarlo, sí, sí, hace que todo sea más limpio. Y el enfoque es más en lo que hay aquí en esta área versus lo que hay aquí arriba. Por lo que el principal beneficio de ocultar tu menú así sería porque sabes que el público para este sitio web en particular va a estar viniendo de usuarios que utilizan una tableta inteligente o un smartphone. Y es mucho más limpio cuando no tienes muchos elementos para mostrar en dispositivos más pequeños y no mencionar dependiendo de cómo esté recubierto el sitio, realidad podrías cargar la página más rápido ocultando ciertos elementos como el menú o incluso estos elementos gráficos justo aquí a la tasa, lo que va a potenciar la experiencia del usuario cuando alguien va a visitar un sitio web en particular . Entonces esa es la única razón por la que querría usar esta opción en particular es hacerla más limpia, enfocarme en algo específico o porque los usuarios van a estar usando un dispositivo más pequeño frente a un monitor de escritorio. Otra cosa que quiero mencionar es otra vez en el mega menú, esto va a depender del público. Si tu cliente está esperando que la mayoría de sus clientes o visitantes vengan de un smartphone o una tableta, entonces es posible que no quieras hacer un mega menú porque va a ser demasiado grande en un dispositivo pequeño como ese. Pero si la mayoría de sus clientes y clientes usan un dedo del pie de escritorio, acceda a su sitio web, entonces puede que esté bien ir con un diseño tipo mega menú, y puede obtener esta información de sus clientes. Si no tienen sitio web existente y tienen Google Analytics instalado en su sitio, pueden entrar y obtener información sobre qué porcentaje de visitantes provienen de una computadora o tablet smartphone y cosas por el estilo. Por lo que tal vez desee conocer esa información adicional sobre los visitantes existentes que visitan su sitio en este momento. De acuerdo, así que terminamos con la navegación. En la siguiente lección, vamos a echar un vistazo a esta parte del sitio web aquí mismo, que se llama la sección Héroe. Entonces vamos a abordar eso en la siguiente lección. 5. Hero: A continuación, tenemos nuestra sección de héroes, que se encuentra debajo del encabezado y lo que se conoce como el arriba del pliegue, que está aquí abajo. Por lo que cualquier cosa de abajo aquí se conoce como debajo del pliegue. Esto básicamente se remonta a los días de los periódicos. Doblaban sus periódicos y la mitad y luego cuando lo exhibían en un nuevo stand, sólo se podía ver esa parte del periódico por encima de ese redil. Por lo que para atraerte a comprar ese periódico, pondrían por encima del redil la información más importante. Entonces todo lo que hay debajo del redil solo sería visible si abrieras o desplegaras ese periódico. Por lo que el mismo concepto aplica a su sitio web. Se quiere poner toda la información importante por encima del pliegue, y luego si alguien quiere ver el contenido debajo del pliegue, tiene que desplazarse hacia abajo para poder verlo. Por lo que desea la información más importante en una página Web por encima del pliegue, que incluirá su encabezado. Necesitas darles una manera fácil de acceder a diferentes partes de tu sitio web para iniciar sesión en tu sitio web o cualquier otra información que esté disponible en tu encabezado, y luego la sección de héroes los va a atraer a seguir explorando tu sitio web o a conseguir que hagan algo. Entonces en lugar de comprar un periódico, vas a conseguir que hagan algo con una llamada acción del dedo del pie. ¿ Qué quieres que hagan en este punto de la sección de héroes? ¿ Quieres obtener su dirección de correo electrónico a cambio de información para la que acudieron a tu página web? ¿ Quieres que compren algo? ¿ Quieres que conozcan más sobre un producto para que luego puedas venderlos al comprar ese producto o ese servicio? Por lo que la sección de héroes va a incluir información basada en el objetivo de tu sitio web o esa página específica. En este caso, la página principal va a tener una sección de héroes que está definida o diseñada de una manera para que ese espectador haga algo. Qué es tu cliente quiere que ese visitante haga una vez que aterrice en su página principal. Eso va a determinar cómo diseñas esta parte del sitio web, por lo que la sección de héroes puede definirse como una gran imagen destacada o una serie de imágenes o incluso un ligero mostró que de manera prominente se muestra en tu página principal. Y de nuevo, tiene que estar por encima del redil porque quieres que esa información o esa imagen o imágenes o diapositivas capten la atención de los espectadores para que mantengan su atención, les interesen de qué se trata ese sitio web y luego que lleguen a hacer algo. Por lo que los estudios de investigación han demostrado que la gente tomará una decisión sobre un sitio web en particular a menos que un segundo basado en esta sección de héroes. Por lo que es uno de los aspectos más importantes del diseño Web porque hay que llamar su atención y sostenerla. De lo contrario, si no tienen ningún interés basado en esa sección de héroes, entonces van a ir al sitio web de otra persona y los vas a perder como cliente o tus clientes los van a perder como cliente. Entonces por eso vas a usar una imagen para captar su atención porque están buscando algo específico. Tienen un problema y van a una página web específica en busca de una solución. Por lo que una imagen puede representar esa solución o contenido o texto puede representar una solución a su problema, y les vas a pedir que hagan algo en base a cómo vas a resolver su problema específico agregando una acción llamada. Entonces otra cosa que quieres asegurarte de que haces al diseñar una sección de héroes es que sea fácil de leer, tiene que ser clara y comprensible desde el principio. Tienen que saber exactamente qué es lo que hace esta empresa o qué están ofreciendo, porque si no es claro o fácil de leer y no están muy seguros de qué es lo que hace esa empresa, entonces vas a perder a ese espectador. Van a ir a otra página web para que puedas lograrlo con varios métodos diferentes . Se pueden agregar palabras clave en función de qué se trata ese objetivo de ese sitio web, o utilizando palabras clave que expliquen de qué es el producto o el servicio que va a resolver sus problemas. Por lo que el contenido o el texto es un método para lograr la claridad para ese particular visitante del sitio web. O puedes usar una imagen, o incluso puedes usar un video que llamará su atención porque si lo configuras para que el video auto se reúna, entonces eso automáticamente va a llamar su atención porque el video está empezando como cuanto lleguen a la página web. Entonces sigamos adelante y echemos un vistazo a algunos ejemplos de diferentes tipos de secciones de héroes que puedes diseñar para resolver los problemas de las personas. Por lo que Apple está utilizando su producto principal como parte de la imagen de héroe, y tienen algún contenido para acompañarlo. Entonces sabemos exactamente qué es este producto basado en la imagen o el texto o ambos, y sabemos que se trata de un smartphone iPhone 10 en particular. Entonces tienen que llamar a las acciones. ¿ Quieres conocer más sobre esto, o ya estás listo para comprar? Por lo que dependiendo de dónde se encuentre ese visitante, el ciclo de compra determinará qué acción llamada van a tomar con el fin el siguiente paso para completar la solución a su problema. No tienen celular, así que quieren comprar. Ahora mismo, no están seguros de si el iPhone tenis para ellos, así que van a dar click en aprender más. Por lo que les estás pidiendo que hagan algo para dar el siguiente paso en ese proceso de compra. Entonces este diseño, está claro que es conciso. Es fácil de entender, y hace que sea fácil para los visitantes a un lado elegir qué hacer a continuación. Ahora este sitio web en particular también tiene una imagen, pero no es una imagen sobre un producto o servicio específico. Se trata más de un tipo genérico de imagen, y esta imagen llena toda la sección de héroes de izquierda a derecha. Entonces en este caso, la imagen está retratando lo que se puede tener o lograr en base a los productos o servicios que esta empresa está vendiendo. ¿ A dónde te gustaría ir? Esa es la llamada acción. Adónde quieres ir En base a lo que elijas, puedes lograr el objetivo de acampar en un camping o en una playa o ir están siendo y ver puestas de sol. Ese es el resultado. Eso es lo que la gente quiere. Ellos quieren alejarse de la gran ciudad, y quieren encontrar un lugar donde puedan ir de camping o están siendo. Y eso es lo que esta imagen retrata y les da lo que pueden esperar una vez que encuentren un lugar para acampar o RV o cualquiera que sea el caso. Otro tipo de sección de héroes sería conocida como la sección de héroes fundadores, por lo que aquí tenemos una foto del fundador de esta empresa en particular, que suma credibilidad y autoridad. Y esta persona es un comercializador bien conocido en la industria S E o. Por lo que puede reconocer a esta persona si aterrizó en esta página Web, y puede que ya sepa lo que ofrece sólo en base a su imagen. Por lo que de nuevo está ofreciendo algo gratis. Consejos de tráfico exclusivos para tu página web. Entonces la llamada que acción es Si quieres recibir estos consejos de tráfico exclusivos gratuitos, entonces entra en tu dirección de correo electrónico, regístrate y luego vas a conseguir estos tips gratis en tu casilla de correo electrónico. Entonces de nuevo, la sección de héroes se trata de transmitir lo que haces y dar una solución a un problema que pueda tener el visitante. Y también le ha agregado algo de credibilidad adicional para su empresa. En base a estos bajos va aquí abajo. No todos pueden decir que han sido destacados en la revista Entrepreneur, revista Forbes, Huffington Post, etcétera. Por lo que nuevamente, la credibilidad como otra forma de mantener el interés de las personas en su producto o servicio particular de la empresa o sus clientes, productos y servicios. Este siguiente sitio web es otra empresa que se especializa en marketing o tráfico S CEO. Pero esta vez, en lugar de usar una imagen, es solo una sección de héroe de tipo contextual. Pero básicamente está haciendo lo mismo. ¿ El otro es sin ninguna imagen? ¿ Quieres más tráfico? Por supuesto. Quiero más tráfico a mi página web y seguro que sí. Y estoy seguro de que sus clientes quieren más tráfico a su página web. Entonces lo que vas a hacer es que vas a escribir aquí la dirección de tu sitio web y luego esta empresa va a analizar tu sitio web de forma gratuita y darte sugerencias sobre cómo conseguir más tráfico a tu página web. Entonces eso es acción demasiado fría. Por lo que al diseñar una sección de héroes, debes conocer los objetivos del cliente que te contrató para poder determinar cómo vas a diseñar la sección de héroes así como la acción fría para esa sección de héroes. Entonces tienes que decidir, ¿ Vas a hacerlo basado en el contextual? ¿ Vas a agregar una imagen de producto o una deuda de imagen proporciona un resultado y una imagen de fundador o un video o algo más. Por lo que una vez que conozcas esta información que recabaste de tu cliente, quieres asegurarte de que la sección de héroes esté complacida por encima del redil sea clara y concisa sobre lo que la empresa está ofreciendo o lo que hacen y tener una clara acción del dedo del pie frío. Nuestro odio. Entonces eso es todo para mis consejos en la sección de héroes. En la siguiente lección, vamos a empezar a trabajar en los ítems por debajo del pliegue. 6. Cuerpo: la siguiente parte de nuestro sitio web es el contenido debajo del pliegue y comienza con ya sea contenido secundario que complementa la sección de héroes o nuevo contenido adicional. Por ejemplo, el sitio web de Apple tiene contenido adicional para productos adicionales que ofrece entonces con el sitio web del camping. Ofrece contenido secundario a la sección de héroes al ofrecer lugares populares para buscar campamentos versus hacer una búsqueda genérica. Por lo que la sección de cuerpo de un sitio web se va a determinar en la propia empresa, qué están ofreciendo y si tienen múltiples productos que pueden ofrecer. Por lo que el concepto de diseño para esta sección es prácticamente ilimitado pero limitado a lo que esa empresa está ofreciendo ahora. Además de ofrecer contenido secundario o adicional, realidad podría hacer lo que se conoce como diseño de una sola página, que va a incluir contenido adicional sobre la empresa, pero no necesariamente productos individuales. Pero en cambio podría ser un sitio web más pequeño que tenga una cantidad limitada de información. Entonces, en lugar de ponerlo en páginas individuales, podrías poner esa información en una sola página. Por ejemplo, este sitio web aquí. Si navegamos a la página sobre, en realidad se desplaza hacia abajo a esa sección para la página principal. Por lo que el sobre las preguntas más frecuentes están todos en la página principal y eso se conoce como un diseño de una sola página. Y también puedes agregar otras secciones al diseño de una página, como tal vez una sección de contacto o tal vez una sección testimonial. Por lo que el cuerpo de tu página web va a contener ya sea información secundaria, información adicional o todas las páginas de la página principal. De acuerdo, entonces esos son mis consejos para la sección del cuerpo. Hay mucha más información que podemos repasar el para el cuerpo, ya que hay tanta información que puedes poner en esta zona. Y los conceptos de diseño que se pueden idear son prácticamente ilimitados también, basados en el contenido de esa sección. Por lo que realmente no podemos cubrir todo lo que te conduces en el cuerpo, pero esos son los fundamentos de la sección del cuerpo. ¿ Verdad? Entonces en la siguiente lección, vamos a echar un vistazo a la siguiente sección, que es el pie de página 7. Footer: la sección justo debajo del cuerpo, que se encuentra en la parte inferior de un sitio web, que es esta zona aquí mismo se conoce como el Pie de página. Ahora al igual que el encabezado, va a permanecer igual de página a página. Y el propósito del pie de página es dar a tus espectadores la oportunidad de localizar lo que necesitan y poder navegar a otra parte del sitio web sin tener que subir al menú. Porque no todos los sitios web tienen un menú pegajoso y si no tienen fácil acceso al menú lo que realmente pueden acceder a esa información desde aquí ahora. Además de enlaces a diferentes partes del sitio web, hay información adicional que generalmente se coloca en el pie de página como las políticas de privacidad , términos de uso, ventas y reembolsos, mapa legal del sitio e información adicional. Tenemos información de copyright en el pie de página así de fácil acceso para contactar con Apple y mucho más lo que vaya en el pie de página de nuevo depende de la empresa lo que quieran lograr y los objetivos para su sitio web. Ahora para mi sitio Web en particular, no tengo muchos enlaces en la parte inferior de mi pie de página. Simplemente tengo mis longitudes de soporte de política de privacidad e iconos de redes sociales, que es muy diferente a lo que tenemos aquí. Una manzana. Por lo que el diseño depende enteramente de si quieres o no hacer solo enlaces, o si quieres hacerlo más creativo o más basado en imágenes, puedes agregar imágenes aquí abajo también para ayudar a la gente a encontrar lo que necesita. También podrías poner otra barra de búsqueda aquí abajo. Si tienes uno arriba en el encabezado, puedes poner uno aquí abajo está bien, así que hay mucha información que puedes poner en el pie de página, y solo porque esté en la parte inferior no significa que quieras escatimar en el diseño. Sí, está bien si solo se basa en el contextual, pero quizá quieras agregar algunas imágenes al pie de página también, dependiendo del sitio web, por supuesto, para agregar algún interés a esa área, a captar la atención de las personas para ayudarlas a encontrar lo que necesitan para que sigan navegando a diferentes partes del sitio web. De acuerdo, así que ese es el pie de página. Tenemos una sección más para repasar, así que vamos a hacer eso en la siguiente lección. 8. Sidebar: la sección final que crea el plátano me de un sitio web se conoce como la barra lateral. Cuando creas un menú vertical como esta empresa tiene aquí, esto se considera una barra lateral. Está fuera a un costado, y está en un bar. Entonces esa es la barra lateral. Pero un tipo más típico de barra lateral es uno que verás en el tipo de sitios de blog o revista o comercio electrónico . Y eso va a enumerar información adicional a la que los espectadores podrán acceder, si quieren inscribirse a un boletín informativo, enlaces a redes sociales, acceso a publicaciones recientes, publicaciones populares y mucho más ahora. Por lo general, no quieres poner una barra lateral en tu página principal como lo he hecho aquí. Y si le echas un vistazo a Apple, puedes ver que no tienen una barra lateral en su página principal en absoluto porque quieren que el foco esté en los productos y no necesariamente información que podría incluirse en la barra lateral . El otro lugar al que no quieres agregar una barra lateral es la página de aterrizaje real de un producto específico . Entonces aquí tenemos una página de producto para el iPad pro, y no necesariamente tienen una barra lateral típica con la información que tengo aquí en mi barra lateral. Entonces, al diseñar una barra lateral puedes y mucha información, pero quieres enfocarte en el estilo de diseño general de esa barra lateral en particular. Por ejemplo, aquí tengo un color oscuro para el fondo del titular, elegí una fuente específica para los títulos, y el diseño general es bastante limpio. Por lo que de esa manera el enfoque está más en el contenido y no necesariamente en el diseño. Por lo que puede o no necesitar diseñar una barra lateral para ir con el sitio web, y de nuevo eso depende del sitio web. Los objetivos para ese sitio web y su cliente. De acuerdo, así que son los artículos de Thesesenta que conforman la anatomía de un sitio web. En las próximas lecciones, quiero simplemente repasar algunas mejores prácticas de diseño adicionales antes de que nos metamos realmente en diseñar las diferentes partes de nuestro sitio web. 9. Introducción a la sección de estilos de diseño de diseño: Hola y bienvenidos de nuevo. acuerdo, entonces en esta sección, vamos a aprender todo sobre los estilos de diseño web, y lo primero que vamos a hacer es dar un paso por el carril de la memoria y echar un vistazo a algunos diseños Web creados de 15 a 20 años hace. que podamos aprender qué no hacer a la hora de diseñar sitios web, pero también te damos algunos consejos pro adicionales en el camino también. Después de eso, voy a compartir con ustedes los siete estilos de diseño web más populares ahora mismo en 2019. Si estás viendo esto en un año diferente a esos populares estilos de diseño Web, tal vez diferentes. Por lo que quieres asegurarte de estar actualizado anualmente sobre los estilos de diseño más populares . Está bien, así que después de que pasemos por eso, entonces íbamos a echar un vistazo a algunos lugares que debilitan van en busca de inspiración para que podamos conseguir algunas ideas sobre cómo diseñar un proyecto específico en el que estamos trabajando. Entonces si estás listo, dedo del pie, aprende todo sobre qué estilos de diseño llevaron a hacerlo 10. Mis ideas sobre los estilos de diseño: hola y bienvenidos de nuevo una tarifa. Entonces en esta lección, solo quiero repasar brevemente alguna información sobre tendencias de diseño Web. Las tendencias son como la industria de la moda. Están de moda hasta que no lo están. Hay cosas que se hicieron en los años noventa, como este sitio web en particular que es puro mal o cosas que nunca volvería a hacer. Esto es simplemente horrible. Y el diseño Web ha recorrido un largo camino desde la introducción de la World Wide Web y los sitios Web que solíamos visitar en aquel entonces a través de tantas cosas mal con este diseño Web en particular . No sé por dónde empezar, aparte de decir, si alguna vez tienes una oportunidad, solo haz una búsqueda en Google de diseños web de los noventa y encontrarás sitios web que aún están vivos y activos que fueron diseñados en el finales de los noventa, y vas a ver muchas cosas que no deberías estar haciendo hoy en día. Pero dicho eso, si avanzamos rápidamente al 2004 todavía teníamos sitios web que se estaban diseñando que estaban cometiendo demasiados errores, y esto está tan ocupado, no sé dónde buscar. Están vendiendo muchas cosas, al parecer, y no estoy muy seguro de lo que están tratando de lograr. Pero está tan ocupado y eso es algo que recomiendo hacer. Cuando se trata de un diseño Web, hay muchos estilos diferentes. Hay muchas tendencias diferentes. Diferentes tipos de tendencias van y vienen. Se vuelven anticuados porque todo el mundo empieza a hacerlo. Y los dueños de negocios que están manejando estos sitios web quieren destacar de su competencia. Por lo que reharán su página web en base a la última tendencia. Y sigue cambiando una y otra vez porque las tendencias cambian todo el tiempo. Pero los sitios web que siguen utilizando el mismo tipo de diseño básico como Media Temple. Se trata de un sitio web limpio más moderno, clásico y aunque ocasionalmente cambian las cosas un poco, la marca general para su negocio en particular se mantiene igual. Utilizan los mismos esquemas de color. Utilizan un estilo de diseño muy similar, que es moderno y limpio. Este tipo de estilo aguantará la prueba del tiempo. No se desactualizará porque no está usando muchos elementos gráficos y está limpio. Pero al mismo tiempo, si le echas un vistazo a este sitio web, puedes ver que están usando muchos gráficos y como puedes ver, está semi ocupado. Están usando elementos gráficos de finales de los noventa con el botón Grady, um, aquí y algunos otros elementos también. Pero esta empresa es una empresa enorme y son muy populares en el mundo del marketing para expertos en redes sociales y aquellos que quieren convertirse en expertos y redes sociales y hacer crecer su negocio a través de las redes sociales. Por lo que aún puedes diseñar algo como esto y tener un sitio web exitoso. Por lo que este sitio web en particular tiene un tema, y el diseño de ese tema o de su marca está diseñado en consecuencia para lo que su mensaje está tratando de retratar. Entonces se reduce a que uno sepa lo que está tratando de lograr tu cliente, cuál es su sitio web, y luego tienes que decidir cuál es su marca. ¿ Tienen ya una marca específica en su lugar? Entonces eso es lo que vas a diseñar el sitio web alrededor. Si te contactó un templo de medios para actualizar su sitio web existente y propusiste este tipo de estilo de diseño, probablemente lo van a rechazar porque no coincide con su marca particular que ya han establecido Pero si tienes un cliente que su flamante que no tiene una marca en su lugar, entonces eso es lo que necesitas desarrollar primero y averiguar qué están tratando de decir. ¿ Cuál es su mensaje y cómo quieren retratar eso con su marca? Por lo que a veces el diseño Web viene después de desarrollar una marca y un logotipo. Pero muchas veces los clientes obtendrán un logotipo primero basado en lo que les gusta, y luego eso se convierte en su marca, y luego su sitio web está diseñado en torno a ella. Pero eso no quiere decir que ese diseño en particular coexista con su mensaje particular. Por ejemplo, un médico probablemente obtendrá primero un logotipo, y luego querremos un diseño Web. Pero tal vez les guste este tipo de estilo. Esto es lo que personalmente les gusta, pero no se alinea con lo que están tratando de hacer en el mercado. Están tratando de construir una práctica con más clientes. Este tipo de estilo no va a representar lo que están tratando de lograr y el tipo de negocio en el que están. Al menos esa es mi perspectiva personal sobre este diseño en particular versus una industria profesional . No presentaría este tipo de estilo de diseño a un médico profesional ni a nadie más de otro tipo de industrias profesionales. Por lo que el diseño tiene que coincidir con la industria en la que se encuentra esa persona en particular. Esta empresa en particular se basa en las redes sociales y sus mensajes redes sociales, jungla y que convive lo que su industria particular. Porque si sabes algo de marketing y redes sociales, es una jungla. Están pasando muchas cosas, y son de marca, y su diseño de este sitio web en particular funciona para ese mensaje en particular. Entonces, cuando se trata de diseñar sitios web, tienes que decidir ¿qué tipo de diseñador eres? ¿ Eres uno que va a ser más creativo y aportando gráficos como este? ¿ Ese es el estilo que te gusta? Entonces tienes que construir tu portafolio en base a eso, y luego necesitas localizar clientes que van a apreciar tu estilo. Pero si quieres probar y diseñar para todos, vas a tener un momento más difícil tratando de apaciguar a todos. Porque ahora vas a tener que tener un portafolio con este estilo moderno, clásico y limpio y otros estilos además frente solo a este en particular. Entonces si te enfocas en un estilo en particular. Entonces podrás atraer a los clientes que, como ese me estilo personalmente. Prefiero diseños de tipo más limpios, clásicos, modernos versus este tipo de diseño. Por lo que nunca he diseñado algo como esto. Hago diseños más modernos y limpios versus sitios web que tienen muchos gráficos, y lo otro que no me gusta hacer es aplicar InTs Grady a los menús. Me gustan mis botones, y mis hombres solían ser planos. No quiero distracciones de gráficos, otros tipos de elementos, ingredientes para distraer de lo que quiero que hagan mis lectores. Y eso es navegar con facilidad sin ninguna distracción. Nuevamente, esa es mi preferencia personal. En mi estilo personal, te puede gustar algo completamente diferente, y en base a lo que aprendes en los proyectos en este curso, es solo un punto de partida. Necesitas hacer investigaciones sobre tendencias de diseño digital. Haz una búsqueda en Google de tendencias de diseño web, y verás cada año que se están introduciendo nuevas tendencias de diseño aquí mismo. Tenemos 13 tendencias de diseño web a tener en cuenta en 2017 necesitas estar al día de lo que posiblemente va a estar en tendencia para ese año porque tus clientes van a ver que este tipo de elementos de diseño se utilizan en sus sitios de la competencia y están van a querer lo mismo para los suyos. Y necesitas saber si eso es algo que quieres ofrecer o no. Y de nuevo, tienes que comunicarte con el cliente y hacerles saber que una tendencia de diseño no necesariamente significa que van a tener éxito con ese sitio web. ¿ Qué es lo que están tratando de hacer con su página web? ¿ Hay tratando de ganar clientes o es solo un sitio web personal con una mamadita it? Si estas tendencias de diseño distraen de los visitantes y visitantes aire incapaces de navegar para obtener la información que quieren, entonces van a salir del sitio web y no comprar ni suministrar una dirección de correo electrónico. Y tu cliente pierde con ese cliente en particular porque tú sobrediseñaste el sitio web con elementos que no van a ayudar a ese dueño de negocio a lograr lo que es que quieren. Entonces antes de diseño Web viene la comunicación con tu cliente para averiguar exactamente qué es lo que quieren lograr con su sitio web y luego descubrir su marca y luego diseñar el sitio web alrededor de esa marca. Si no tienen marca o logotipo, entonces tienes la oportunidad de arriba vender tus servicios de diseño para brindarles un logotipo y una marca y luego en la página web para que coincida con esa marca. 11. 7 estilos de diseño populares: Hola y bienvenidos de nuevo. Está bien, entonces para esto dije que vamos a repasar algunos tipos diferentes de estilos de diseño. Hay muchos tipos diferentes de estilos de diseño y sólo vamos a repasar unos siete estilos de diseño diferentes. En esta lección. Definitivamente hay mawr y estos aires, los más populares a partir de hoy. Ahora, hace 15 años, había estilos de diseño que eran muy populares entonces que en realidad no se usan mucho hoy. Pero eso no quiere decir que esos estilos de diseño no vuelvan a ponerse de moda y se vuelvan más populares que lo que hoy es popular. Entonces no vamos a cubrir realmente lo que era popular hace 15 años. Esperemos que algunos de esos estilos de diseño no vuelvan porque son horribles. Y nunca los usaría en mis diseños de sitios web de todos modos, así que simplemente lo limitaremos a estos tipos de diseños más populares. A partir de ahora. Ahora, en lo que respecta a tu portafolio, debes representar tu estilo o tu estilo de diseño con diseños que prefieras crear . Deberías tener un tipo específico de estilo de diseño, y puedes tomar los siete tipos principales de estilos de diseño y crear tu propio diseño a partir de esos. O puedes seguir con los conceptos básicos de cada estilo de diseño apretado y centrándote en los diseños que prefieras crear. Entonces va a ser más fácil encontrar clientes que aprecien tu estilo particular si intentas representar los siete estilos de diseño diferentes de los que estás tratando de acomodar todo tipo de clientes, y va a ser mucho más difícil crecer tu negocio o consigue más empleos porque no estás enfocado en un tipo específico de estilo. Y eso es porque cuando te especializas en un estilo específico, sí hace que sea más fácil concentrarse en encontrar clientes que, como ese estilo específico versus tratar de hacer todo por todos. De acuerdo, con eso en mente, sigamos adelante y echemos un vistazo a los siete tipos diferentes de estilos de diseño. Por lo que los primeros en diseñar estilos que vamos a ver se conocen como el diseño plano y el realismo , o también conocido como pincho morph ism. Al principio, en la historia del diseño Web, realismo fue el popular diseño de elección no sólo en el diseño Web sino también en la interfaz de usuario diseñada . Por ejemplo, aquí podemos ver tanto estilos de diseño que Apple había aplicado a su sistema operativo para sus smartphones, tabletas en diferentes momentos de la historia. Entonces por aquí a la derecha, tenemos el diseño del realismo y por encima a la izquierda. Tenemos un diseño plano, por lo que en realismo tenemos mucho más detalle en los iconos. Tenemos texturas, lanzaderas de gota, incluso fotos realistas para algunos de los iconos, luego a la izquierda. La mayoría de esos detalles han sido despojados, lo que nos da nuestro estilo de diseño plano. Por lo que puedes pensar en estos para diseñar estilos como la estética visual de los elementos de esos iconos o de la página Web o de la interfaz, o lo que sea que estés diseñando. Aquí hay otro ejemplo. Entonces a la izquierda tenemos realismo a la derecha. Contamos con un diseño plano. Aquí hay otro diseño plano, así que no hay mucho detalle. No hay sombras de gota ni texturas ni detalles dentro de los propios gráficos. Lo mismo con éste. Sí tiene un poco de sombra gota aquí en este ícono y este ícono aquí, pero en general es un tipo de diseño bastante plano, y más en 99 diseños, eso es sí, tienen un post de sangre sobre la escuela, más diseños FIC, y se puede ver una tonelada de ejemplos para ese estilo de diseño en particular. Y puedes ver definitivamente hay más detalle en los iconos y los abdominales y todo lo demás . Para estos diseños en particular, hay textura detallada. Hay sombras de gota, reflejos y mucho más para darle ese tipo de look realista. Entonces a la hora de elegir uno de estos estilos de diseño sobre el otro, prefiero el diseño plano y me llamo perezoso. Pero los diseños huidos son más fáciles de crear y menos tiempo de crear. No obstante, el mayor beneficio del diseño plano es el bajo tiempo. Toma menos tiempo cargar una página Web en tu navegador o tu smartphone o tablet dentro de ese navegador, frente a un diseño realista con todas sus texturas y sombras y fotos e INTs Grady, etcétera. Por lo tanto, un diseño plano tiene mejores posibilidades de clasificar y motores de búsqueda, frente a un diseño de realismo basado en la velocidad de la que carga ese sitio. Ahora hay otros factores,por supuesto, por supuesto, que también entran en el ranking de un sitio web, pero la velocidad es uno de ellos, por lo que cuanto pero la velocidad es uno de ellos, más rápido se cargue tu sitio web, mejor puntuación obtienes de Google u otra búsqueda basados en lo rápido que se carga ese sitio web. Al final, sin embargo, sí se reduce a una cuestión de preferencia personal, identidad de marca de tu cliente y el objetivo del sitio. De acuerdo, ahora, echemos un vistazo a otro estilo de diseño en este que vamos a ver se llama minimalista. A veces minimalista se puede confundir con el estilo de diseño plano. No obstante, existe una diferencia distinta. Un estilo de diseño plano y el estilo realismo, para ese asunto se refería a la estética visual de los elementos de una página Web los menús, botones, fondos y cualquier otro gráfico que conforma la página. El minimalismo, por otro lado, se refiere a una filosofía de diseño. Menos es más como diseñador, tu objetivo es solo dedo del pie. Agrega los elementos más esenciales y necesarios para lograr el objetivo de esa página Web, razón por la cual a veces se confunde con el diseño plano, ya que, también, es bien, mínimo En su diseño. No obstante, la diferencia no está en los propios elementos gráficos ni en la estética visual, sino en cuántos elementos se utilizan de nuevo en un diseño, Menos lo es más. Echemos un vistazo a algunos ejemplos, por lo que Apple nos proporciona un ejemplo perfecto de minimalismo. Tenemos un encabezado aquí arriba en la parte superior con algunos elementos de menú. Tenemos contenido que es muy directo al grano. Tenemos un par de botones de acción llamados y luego tenemos un producto muy, muy sencillo. Realmente no hay necesidad de agregar nada más a esto porque sabes exactamente de qué se trata esta página en particular. El iPhone 10. O quieres aprender más o quieres comprar. Ahora es muy mínimo. Lo mismo con este sitio web aquí, aunque están usando una imagen para el fondo. Pero sigue siendo muy sencillo y hasta el punto sabes exactamente lo que hacen en base a la imagen y el contenido aquí mismo. Y luego tienes opciones para navegar a otras partes del sitio web muy mínimas, y luego el siguiente sitio es mínimo también. Se desglosa con contenido en el producto lateral en el medio y luego alguna información adicional aquí a la derecha, por lo que es muy mínimo y al grano. Nuestro siguiente estilo de diseño es un poco mawr opuesto al minimalismo y tal vez hasta el diseño plano , porque la estética de los elementos gráficos tiene mucha más información o detalle, por lo que vamos a echar un vistazo a un diseño retro estilo. Por lo que este estilo engloba menos el verso Mawr. Y como mencioné, tiene un poco de realismo en ella también para retratar los elementos que conforman la página para, bueno, darle un look tipo retro. Y este estilo de diseño es un gusto adquirido, y va a ser limitado en función de la identidad de marca de tu cliente, sus objetivos para su sitio web y lo que están tratando de retratar con su particular estilo de diseño o su look. Está bien, así que sigamos adelante y echemos un vistazo a algunos diseños retro solo para tener una idea de lo que podemos hacer con este estilo en particular y cómo crearlo. Por lo que un diseño retro está conformado por diferentes elementos para darle esa sensación retro, y que puede incluir pancartas y cintas, el tipo de texto y, por supuesto, otros elementos tipográficos, como este poco borde alrededor del contenido que se deshilacha y especie de parece un tipo de papel de la vieja escuela y luego, por supuesto, otros elementos y fuentes también. Este sitio en particular le tiene una sensación de tipo realismo así como una sensación retro, y eso se basa en las imágenes que se utilizan para darle. Ese look retro tipo de tiene proceso de 1/2 tono. Aplicar a las imágenes, que es lo que ocurrió atrás en el día al imprimir en una prensa. Y luego, por supuesto, el uso de fuentes particulares y otros elementos gráficos también se suma a la sensación retro, que puedas mezclar y emparejar diferentes estilos para llegar a tu propio estilo. Entonces éste, por supuesto, el retro y el realismo se han mezclado para este diseño en particular. Esta básicamente ha hecho lo mismo en cuanto a agregar realismo con una foto real y luego tipos específicos de fuentes para darle una sensación retro. Esta está usando una combinación de fuentes, colores y elementos gráficos para darle esa sensación retro. Estos colores particulares aquí, los grises y las naranjas, son representativos de lo que se utilizó en los años cincuenta y sesenta. Por supuesto, también hay otros colores, dependiendo del periodo de tiempo, Pero estos airean algunos colores populares de esos periodos de tiempo. Este está utilizando una combinación de elementos gráficos, texto y diferentes tipos de colores retro para completar el diseño retro, además de agregar algunos elementos gráficos que son casi realismo en la naturaleza basados en la cantidad de textura y detalle en los pájaros y los perros y cosas así. Por lo que estos son todos diferentes tipos de formas en las que puedes crear un diseño retro. Pero de nuevo, es un gusto adquirido, y va a ser algo que tal vez su cliente vaya a querer y le pida específicamente. O podría ser algo que puedas recomendar en base a su clientela y a su particular identidad de marca. Muy bien, así que el siguiente estilo de diseño que quiero compartir contigo se conoce como un estilo de diseño de ilustración . Por lo que va a consistir en mayormente ilustraciones versus fotos. Por lo que este estilo de diseño puede consistir en ilustraciones que sean planas o tengan un aspecto más realista. O bien, si te sientes realmente creativo, podrías hacer un híbrido tanto del plano como del realismo con tu diseño Web ilustrado. Por lo que este tipo de diseños tipo de dan la sensación de un tipo de ambiente divertido y relajado y al igual que algunos otros estilos de diseño, elegir este tipo específico de estilo de diseño va a depender de tu cliente en particular y su identidad de marca. Entonces sigamos adelante y echemos un vistazo a algunos ejemplos. Ahora, igual que todos nuestros diferentes estilos de diseño, las ilustraciones mismas pueden venir en diferentes tipos de estilos también. Por lo que para este sitio web en particular, tenemos una ilustración con algunas texturas sobre los elementos que se dibujaron para este sitio web en particular. Este siguiente también cuenta con elementos gráficos que tienen texturas en las ilustraciones o INTs Grady . Pero algunos de los elementos también son planos y de diseño, por lo que puedes mezclar y combinar esto también con tus ilustraciones. Y luego otro estilo de ilustración es crear un efecto tipo tres D. O bien, si eres vieja escuela y tu cliente es vieja escuela y quieres hacer más de un dibujo a lápiz tipo ilustrativo de tus personajes, puedes hacerlo. Y este sitio web está incorporando ese tipo de ilustración junto con fotos realistas para más realismo para vender su producto en particular. Pero en todo el sitio, vas a notar que hay muchos otros tipos de ilustraciones que se incorporan en el diseño de la página web. Y por supuesto, también hay otro tipo de médiums. Esta en particular, está utilizando una ilustración de acuarela como sus imágenes dominantes para su página web. Por lo que puedes pensar en el diseño ilustrativo como otro concepto que puedes promover para diferentes tipos de sitios web basados en el dedo del pie del cliente y la identidad de marca para esa empresa en particular. Y luego, por supuesto, hay que decidir sobre el estilo de esa ilustración. Una vez que decidas que quieres ir con ese estilo de diseño en particular para un sitio web, así que no solo es cuestión de bien. Yo quiero hacer diseños de tipo ilustrativo. Bueno, ¿qué tipo de ilustraciones quieres dio dibujos a lápiz de acuarela de carbón, tres diseños planos D? Por lo que hay muchas más decisiones que entran en crear un tipo ilustrativo Diseño web . Está bien, así que el siguiente diseño, así que quiero compartir contigo, se conoce como un estilo grunge, que, como el diseño retro es lo contrario al minimalismo. Runge es cualquier cosa menos mínimo o incluso simétrico o equilibrado. Grunge tiene un look sucio con tus elementos visuales regulares, a veces no tan bonitos. Este es otro de esos estilos de diseño que se van a limitar al gusto de tu cliente o a su identidad de marca, o incluso al público que van tras. Por lo que se puede pensar en el estilo gruñidos para tal vez rock o incluso mientras los músicos grunge o incluso otro tipo de empresas que atienden a estos músicos o artistas. Por lo que pueden estar más inclinados a usar este tipo particular de estilo de diseño versus, digamos , un médico o un dentista. Así que echemos un vistazo rápido a un par de diseños de estilo running, igual que con el estilo de diseño retro. Los elementos que conforman la página y las texturas y las imágenes utilizadas crearán ese efecto grunge. Por lo que las fuentes utilizadas son más de un tipo grunge de una fuente y la textura general y superponiendo esa textura sobre las imágenes así como los demás elementos de diseño. Dale ese look grunge o que se sienta grunge en este sitio web en particular. Este está bien, está usando algunos elementos gráficos para crear esa mirada y sensación grunge, y eso se basa en el gráfico de fondo aquí, donde parece que el papel o el sitio web está siendo tor ni rasgado, y se tiene un tacto grunge, junto con las fuentes que se están utilizando como parte del logotipo, crea una sensación grunge. Nuestro estilo final de diseño Web se conoce como un estilo de diseño geo métrico, que consiste en utilizar formas u otros elementos gráficos de una manera que sea visualmente agradable a la vista. E incluso puede proporcionar una composición con esas formas geométricas que llevan a un visitante en la dirección que quieres llevarlas. Con este sitio web en particular, están utilizando diferentes formas geométricas que no son consistentes con lo que hemos visto en el pasado desde otros sitios web en forma de cuadrados o rectángulos o incluso círculos. Esta forma geométrica en particular no se utiliza tanto como esas otras formas, y hace para un diseño interesante y organiza todas estas diferentes fotos y texto y contenido dentro de ellas para ayudar a organizarse y hacer fácil encontrar lo que queremos encontrar. Este siguiente sitio web también está utilizando formas geométricas para poner contenido dentro de él, para separarlo del otro contenido, y visualmente hace que sea mucho más fácil verlo versus solo tenerlo todo esparcido a través solo algunos rectángulos. Y eso es básicamente lo que ves en muchos sitios web es solo contenido dentro de cuadrados, rectángulos o círculos, y éste está usando diferentes formas geométricas como parte del diseño. Lo cual es mucho más interesante, creo, que el tipo convencional de formas que hemos usado en el pasado. Esta está usando formas geométricas para contener contenido dentro también, pero lo está haciendo de una manera más única y optimizada frente a los otros dos sitios. Pero sigue limitando ese contenido dentro de las formas geométricas. Y lo está haciendo de una manera que nos hace querer seguir esta flecha aquí, para desplazarnos hacia abajo y continuar nuestro viaje basado en esta forma geométrica donde está creando este puntero apuntando hacia abajo, lo cual es una buena forma visual de conseguir tu a los espectadores para seguir desplazándose por el resto de la página. Entonces esa es solo otra forma de usar formas geométricas en tus diseños. Muy bien, así que hemos cubierto siete tipos diferentes de estilos de diseño y los diseños. forma en que elijas para un proyecto específico va a depender del cliente, la identidad de marca y de su público. Tienes que tomar todo eso en consideración antes de decidir sobre un estilo de diseño. Pero si te especializas en un estilo de diseño específico, entonces sabes que los clientes que vienen a ti van a estar esperando ese estilo de diseño en particular . Y no tienes que preocuparte demasiado por enfocarte en qué estilo de diseño elegir, ya que te están eligiendo para tu especialidad. De acuerdo, entonces eso es todo para nuestros estilos de diseño Web en la siguiente sección o en la siguiente lección que vamos a empezar a tomar. Mira la anatomía de un sitio web, todas las diferentes secciones y partes que conforman una página Web. Vamos a entrar en cada una de esas secciones a detalle, y te voy a dar algunos consejos pro y algunas mejores prácticas para diseñar cada una de esas secciones diferentes. Entonces si estás listo para llegar ahí en eso, hagámoslo. 12. Inspírate: Hablemos de inspirarnos como diseñador Web las mejores prácticas y cosas a evitar . Por lo que probablemente lo más fácil de hacer es solo hacer una búsqueda en Google de ideas de diseño web. Mejores diseños Web. O tal vez si estás atascado en una parte específica de sitio web, podrías hacer diseño web, ideas de encabezado, diseño web, ideas de pie de página, cosas así para obtener alguna inspiración para tu proyecto actual. Entonces esa es una forma de obtener inspiración es a través de Google. El otro es a través de 99 diseños, y este es un lugar de crowdsourcing donde puedes acudir como diseñador gráfico y pujar por trabajos. Entonces cuál es tu Un diseñador y eres miembro de esta comunidad. Puedes entrar y navegar por concursos, y puedes filtrar hasta qué es lo que necesitas inspiración. Entonces aquí tengo proyectos de diseño Web y APP, y hay más de 14,000 proyectos en este momento que están cerrados que puedo filtrar y buscar ayuda del dedo del pie, dame algo de inspiración para mi proyecto actual y también han seleccionado proyectos terminados versus abierto porque abierto no te va a mostrar siempre diseños para ese proyecto en particular porque ah muchos de ellos son proyectos ciegos, por lo que es mejor entrar en el estado terminado y luego puedes navegar a diferentes concursos para ver esos diferentes tipos de diseños para obtener inspiración a partir de ahora. Lo único que no quieres hacer es que no quieres copiar un diseño. Exactamente. Por lo que aquí podemos ver para este certamen en particular. Este fue el diseño ganador que seleccionó el cliente. Y si decides entrar y diseñar un sitio web, ya sea por tu cuenta o a través de un servicio como 99 diseños, sobre todo si vas a ser diseñador en esta plataforma de crowdsourcing, te van a arrancar desde la plataforma porque encontrarás en el código de conducta del diseñador que hacer obras de arte originales es una necesidad. Si copias este diseño en particular y tratas de venderlo a algún otro cliente, serás suspendido de esta comunidad y ya no podrás remolcar trabajo a través esta empresa por lo que tienen una política de suspensión que enlaza con ese código de conducta de diseñador . Eso explica que sí tienes que hacer obra original porque todos los diseños son por defecto, copyright del artista original. Y al copiar a ese artista estás infringiendo sus derechos de autor, y te prohibirán de estos sitios de crowdsourcing. No sólo eso, si, por ejemplo, trabajas para una empresa de tecnología y vas a la página web de Apple y dices: ¿ Sabes qué? Me encanta su maquetación y tú copias su maquetación exactamente. Bueno, ¿ adivina qué? Eventualmente, Apple se va a enterar porque tu negocio está creciendo y el diseño de tu sitio web es exactamente igual al suyo. van a contactar, y te van a demandar por robar su diseño Web. Alguien diseñó este sitio web en particular, ya sea una empresa separada o alguien dentro de la empresa. Apple es dueña de este diseño en particular, y no se puede copiar esto exactamente. De lo contrario, vas a estar infringir sus derechos de autor, y te van a demandar por una indemnización por ese robo. Entonces hagas lo que hagas, no robes los diseños de páginas web de otras personas. Otra cosa que debes considerar es las imágenes y cualquier tipo de clip art que utilices en tu diseño Web. Ambos están protegidos por derechos de autor, dependiendo de la licencia para esa obra de arte en particular. La mayoría de las imágenes de stock cuando vas a stock photos dot com, por ejemplo, todas esas imágenes tienen un copyright, y hay que pagar una licencia para poder utilizarla. Pero puedes usar esas imágenes con una marca de agua de copyright sobre ellas como parte de tu diseño. Pero tienes que hacerle saber a tu cliente que esas imágenes en particular tenían derechos de autor y si quieren usar esa misma imagen exacta de lo que tienen que pagar los derechos para usarla igual con clip art. Si usas algún clippard que esté protegido por derechos de autor, entonces tienes que pagar una cuota de licencia. O a veces cuando se trata de clip art, el creador de ese Clipper pedirá una atribución que diga, Este sitio web en particular fue creado con clip art y luego proporcionas un enlace de vuelta a ese artista. Entonces eso es algo que pondrías en el pie de página. Por lo que desea conocer el acuerdo de licencia para esa obra de arte en particular que desea utilizar para un sitio web antes de utilizarla realmente en un sitio de vida. Entonces, por ejemplo, este pequeño ícono de búsqueda de aquí mismo fue creado por alguien que un diseñador creó eso, y si encontraras esta lupa en particular en línea y robaste esa imagen en particular sin dar un atribución o pagar una licencia de la que ese diseñador gráfico básicamente puede volver. Y así lo hiciste igual que Apple. Por lo tanto, no uses ningún tipo de imágenes o imágenes prediseñadas sin antes averiguar cuál es el uso de los derechos de autor y la licencia para esa obra de arte en particular antes de que realmente lo utilices. Esas son las mejores prácticas. Entonces hagas lo que hagas, no robes el trabajo de otras personas. Asegúrese de que todo esté licenciado correctamente. Antes de empezar a usarlo en sitios de vida o incluso en concursos como a través de 99 diseños. No se quiere utilizar obras de arte protegidas por derechos de autor. De lo contrario, te van a arrancar desde su comunidad. Entonces cuando estás mirando diferentes sitios web en busca de inspiración, tienes que preguntarte a ti mismo. De acuerdo, me gusta el diseño. A mí me gustan los colores. A mí me gustan las fuentes, pero ¿qué puedo hacer para mejorarlo? Bueno, la empresa para la que estás trabajando, van a tener una identidad de marca diferente frente a esta empresa de aquí. Van a tener diferentes colores y tal vez diferentes fuentes que forman parte de su identidad de marca , así que eso va a ser diferente. Pero lo otro que puedes hacer de manera diferente es reorganizar algunos artículos utilizados diferentes imágenes. No quieres usar esta imagen aquí. Quieres hacer tu sección de héroes tal vez de un tamaño diferente. A lo mejor en lugar de sangrar completamente la imagen, limitas al tamaño de ese contenido, que es esta información de aquí abajo. Entonces tal vez esto tenga 960 píxeles de ancho. Por lo que harías esa imagen de ese tamaño para que se alinea a la izquierda y a la derecha del contenido, y eso marca la diferencia. Yo tal vez movería el menú aquí arriba en la parte superior, tal vez coloque esta información de contenido aquí arriba con los elementos de búsqueda aparecen. Si sus ítems de búsqueda, tal vez quieras agregar un nacimiento de búsqueda, así que eso va a marcar la diferencia. No quieres hacerlo exactamente igual. Pero tal vez te guste el sombreado en la sombra de gota de esta zona de menú aquí. Por lo que en realidad podrías dar la vuelta a esto y mover esto a la parte superior. Se puede mover el logotipo dentro a la izquierda del menú. Simplemente básicamente estás reutilizando el sombreado para este menú en particular. Pero estás reorganizando los artículos para que surjas tus propios diseños únicos igual con los iconos. No quieres usar exactamente el mismo ícono. ¿ Quieres encontrar diferentes iconos o crear tus propios iconos para hacer diferente el diseño general ? Entonces así sería como iría a buscar inspiración para un proyecto en particular en el que estoy trabajando es descubriendo la identidad de marca para mi cliente, viniendo con los colores y las fuentes que quiero usar primero, para luego empezar construyendo las diferentes secciones fuera de su página Web en base a lo que necesiten. ¿ Necesitan una barra lateral? Si no? Bueno, no tienes que preocuparte por la barra lateral. Van a necesitar un cabezazo. Van a necesitar navegación. Y entonces es solo cuestión de decidir cómo vas a diseñar todo. Además la estética visual del encabezado, que sería la sombra de gota para el fondo del menú y cualquier otra cosa como faras. El estilo va del texto y cualquiera de los otros tipos de elementos gráficos para esa sección en particular 13. Introducción al sistema de cuadrícula: todo bien. Sé que probablemente estás ansioso por empezar a diseñar nuestros proyectos, pero hay una cosa más que necesitamos saber y aprender antes de empezar a diseñar sitios web y gimp y ese es el sistema de grid. Entonces en esta sección, vamos a aprender qué es un sistema de cuadrícula y por qué queremos usarlo con nuestros diseños Web. Y te voy a mostrar dónde puedes conseguir diferentes tipos de sistemas de cuadrícula de forma gratuita. Entonces si estás listo para aprender todo sobre el sistema de rejilla, hagámoslo. 14. Sistema de cuadrícula: hola y bienvenidos de nuevo. Antes de entrar en nuestros proyectos de diseño Web, primero quiero compartir con ustedes el sistema de cuadrícula que vamos a estar utilizando para estos proyectos de diseño Web . Y también quiero explicar qué es un sistema de cuadrícula, en caso de que no estés seguro de qué es. Entonces en esta lección, solo voy a compartir esa información contigo. Y luego te mostraré dónde puedes descargar el sistema de grid para que lo utilices con los proyectos de diseño Web a lo largo de este curso. Entonces, básicamente, un sistema de cuadrícula te permite agilizar tus diseños Web porque proporciona dimensiones de uso común basadas en un con específico. Ahora, el estándar de la industria solía tener 960 píxeles de ancho, y hay dos variaciones diferentes de ese sistema de cuadrícula, que es de 12 o 16 columnas. Entonces, ¿por qué vamos a usar un sistema de cuadrícula como este? Bueno, nos ayuda predefiniendo los tamaños de columna y nos permite espaciar uniformemente, son diferentes elementos gráficos y proporcionan un espaciado igual entre ellos para ayudarnos a alinear todos los elementos y dar simetría a nuestros diseños Web. Por ejemplo, si tenemos tres columnas de contenido. Entonces sabemos que una cuadrícula de 12 columnas funcionará mejor para esa configuración en particular. Y la razón por la cual es porque 12 columnas divididas en tres es igual a cuatro. Y entonces, si tenemos cuatro columnas de contenido, sería mejor cambiar a un sistema de 16 columnas ya que 16 divididas por cuatro son cuatro, y en general, va a espaciar mejor nuestro contenido en esos aspectos. Ahora, el sistema de cuadrícula que estoy usando proviene de este sitio web de aquí, que es de 9 60 puntos gs. Así que adelante, navega a este sitio web, y si te desplazas aquí abajo y haces clic en show grid, vas a ver estas diferentes columnas, cualquier superposición roja, y vas a notar cómo todos los diferentes elementos del diseño de página se alinean, y podemos ver que la cantidad de espaciado entre ese contenido es incluso a lo largo de la página Web . Por lo que al usar este sistema de rejilla, te aseguras de que todos los elementos estén uniformemente espaciados alineados, y esto , al final, te dará un diseño mucho mejor que si solo estuvieras para alearlo y tener elementos espaciado por todo el lugar. No va a haber simetría. Va a ser difícil navegar por toda la página, y va a ser muy caótico si no estás usando un sistema de cuadrícula. No sólo eso, sino que usar un sistema de cuadrícula definitivamente ayuda a agilizar tu flujo de trabajo y hace que sea más fácil y rápido para ti diseñar todo y ponerlo todo en una posición adecuada. Ahora el único problema con el sistema de rejilla 9 60 es que está un poco anticuado. Todavía podrías usarlo, pero no estaba realmente diseñado para sitios web receptivos para smartphones iPads, cosas así. Por lo que de vuelta en el día anterior a los smartphones que tenemos hoy en día y tabletas, este sistema era todo lo que realmente necesitabas. Pero ahora, con todos los diferentes tamaños de los dispositivos móviles y el tamaño de los monitores, necesitamos un sistema de cuadrícula más grande, y el que recomiendo es un sistema de red de 1200 o 1200 píxeles de ancho. Por lo que esto va a acomodar más dispositivos y más tamaños de monitor frente a 9 60 también será perfecto. Primeros sitios que necesitan ser sensibles. El otro beneficio es que si un cliente tiene un requisito de tamaño específico, puede reducir fácilmente al sistema de red necesario para ese proyecto. Ahora vamos a descargar el sistema de cuadrícula desde aquí. Pero el problema es que no tienen un sistema de red 1200, lo que podemos solucionarlo fácilmente descargando desde aquí el sistema de cuadrícula 9 60. Basta con dar click en este gran botón de descarga viejo justo aquí para descargar el sistema de cuadrícula 9 60. Adelante y abramos ese archivo y lo conviertamos a un sistema de cuadrícula 1200. Entonces vamos al interior de plantillas. ¿ Iban a elegir Photoshopped? Hagamos sólo la columna 12 Cuadrícula por ahora. Ábrela. Ve a imagen, ve al tamaño de imagen y ahora mismo debería decir 10 20 por 10 20. Por lo que tenemos un extra de 40 píxeles, así que tenemos un poco de espacio para respirar a ambos lados del sistema de rejilla. Por lo que para el tamaño de la imagen, vamos a agregar 200 píxeles. Entonces ahora tenemos 1220 por 1220 que nos va a dar nuestro sistema de red 1200. Muy bien, ahora que tienes ese sistema de cuadrícula redimensionado, guárdalo como archivo maestro y luego vamos a usar eso para todos los proyectos de diseño en este curso y lo que quieres hacer es, una vez que comiences en un proyecto eres tú vas a querer guardar, ya que para que puedas guardar este archivo para ese proyecto de diseño Web en particular y mantenerlo separado de tus archivos maestros para que siempre puedas volver a tu archivo maestro para el siguiente proyecto son Hey, ahora que finalmente conseguimos toda esta información fuera del camino, es hora de empezar a diseñar sitios web. Espero que estés listo. Estoy emocionado y no puedo esperar a compartir con ustedes todos mis consejos y secretos para diseñar sitios web y Photoshopped. Entonces si estás listo, hagámoslo. 15. Pixel perfecto: para esta lección. Yo solo quiero darte un par de consejos más a la hora de diseñar un sitio web, y el 1er 1 es mantenerse organizado. Cuando estés diseñando tu sitio web, vas a estar construyendo diferentes partes de ese sitio web en base a la anatomía del sitio web, ya sea el encabezado, el héroe, el cuerpo, el pie de página barra lateral, lo que sea que quieras ser organizado. Y lo que quiero decir con eso es que quieres organizar tus capas y lejos para que sea fácil acceder y encontrar lo que necesitas. Por ejemplo, esta página Web en particular tiene varias secciones. Entonces como pueden ver, tengo un jugador de grupo para el encabezado, el héroe, el cuerpo y el pie de página. Por lo que puedo acceder fácilmente a lo que necesito para esa sección particular dentro de aquí. Tenemos el cuerpo y tengo un par de partes diferentes del cuerpo, así como un sobre y una sección de revisión también, y todo está organizado dentro de estas capas agrupadas ahora dentro de la capa de grupo. Tengo jugadores de grupo adicionales así con contenido adicional, para que pueda acceder fácilmente a esa parte del sitio web. También ayuda con el desarrollador Web. Cuando entregues este archivo al desarrollador Web, necesitan saber qué va hacia dónde y organizando todo en capas agrupadas. Hace que sea fácil para ellos encontrar un acceso a esa información para que sepan en qué paso necesitan trabajar a continuación. Otra cosa que quieres hacer es que deseas diseñar tus diseños Web pixel perfecto. Y lo que quiero decir con eso es que quieres tener todo alineado perfectamente. Entonces si este título y esta sección de contenido estaba apagado por un par de píxeles por aquí a la izquierda , bueno, bueno, ¿ adivina qué? Los desarrolladores web van a pensar que lo hiciste a propósito y no se va a alinear con este cuadro aquí, y va a estar apagado a la izquierda. Pero si lo haces pixel perfecto que el desarrollador Web debería alinear esos elementos a la izquierda tal y como se diseñó. Entonces si cometes algún error en tu diseño, el desarrollador Web no va a saber que esos fueron errores y en realidad codificará el sitio web en base a lo que realmente les des. Por lo que quieres crear un diseño web perfecto de píxel y alinear perfectamente todo como tu diseño y antes de entregárselo al desarrollador Web. La otra cosa que va a hacer es que te va a meter en el hábito de crear diseños perfectos de pixel desde el principio, y también va a ser simétrico. Ni siquiera tenemos cantidad de espaciado entre estas tres columnas. Y si esta columna estaba más a la izquierda y la brecha entre las dos columnas era mayor que ésta, entonces no va a ser simétrica. Y no se va a equilibrar. Eso va a mirar fuera. No va a ser un buen diseño va a ser un mal diseño. Quieres poder crear un diseño que sea agradable a la vista, agarra el interés de la persona, tiene su interés, y luego, en base a las acciones llamadas, consigues que hagan lo que quieres que den dio para ese diseño en particular. Si no estás diseñando con una intención perfecta de píxel desde el principio, entonces tus diseños van a parecer descuidados. No vas a poder mandar un alto precio por tus diseños, y vas a conseguir menos negocios, así que asegúrate de diseñar con la mentalidad perfecta de píxel. Tener todo alineado adecuadamente simétrico y no tengas ningún error y tus diseños antes de salir al desarrollador Web o incluso a tu portafolio, para el caso, porque alguien puede notar un error y decidir no contratarte porque no te tomaste el tiempo para prestar atención a los finos detalles de ese diseño en particular. Y van a querer contratar a alguien que sí tome ese tiempo para prestar atención a esos pequeños detalles, y es más probable que paguen un precio más alto por esa atención al detalle. Entonces a medida que comienzas a diseñar y crear diseños para tu portafolio y luego comienzas promocionar tus servicios, a promocionar tus servicios, quieres tener eso en mente, organizar todo y diseñar con esa mentalidad perfecta de píxel. Por lo que condenas y un precio más alto y obtienes más empleos en el proceso. 16. Introducción a los 7 proyectos: Está bien. Entonces adivina qué hora es. Eso es correcto. Es el momento que has estado esperando toda tu vida. Está bien, bueno, tal vez no tanto tiempo, pero es hora de empezar a diseñar sitios web y Gipp. Sí. Está bien. Entonces tenemos siete proyectos de diseño en los que vamos a trabajar, y vamos a utilizar muchas de las herramientas y gimp con el fin de lograr estos diseños. Y vamos a usar muchas de las herramientas una y otra vez, lo cual es genial, porque para cuando termines de hacer los siete proyectos, deberías haber dominado o al menos tener una muy buena idea de cómo usar las herramientas gimp nosotros necesidad de utilizar para diseñar nuestros sitios web y gimp. De acuerdo, Entonces no sólo vas a tomar el proyecto y volver a crear mi diseño que se me ocurrió como práctica. Pero una vez que hayas terminado con eso, quiero que recreas ese sitio web en tu propia visión creativa. Yo quiero que se te presente algo mejor para que luego puedas tener ese diseño a tu cartera. Entonces si estás listo para empezar a diseñar sitios web y Gib bien, hagámoslo 17. Proyecto 1: resencia de Nike: Está bien, sigamos adelante y echemos un vistazo a la página principal actual de Nike, y como puedes ver, tiene un diseño bonito, limpio y moderno. La navegación está centrada, y al pasar el cursor sobre cada uno de los ítems, se puede ver que un mega menú se presentará y mostrará todos los diferentes productos disponibles. También tenemos fácil acceso a marcas y opciones específicas para acceder fácilmente a una cuenta. Si ya tienes un acceso a un Kurt de compras, algunas opciones de ayuda y un botón de búsqueda para encontrar algo específico. Por lo que este sitio web fue diseñado con clientes y mente nuevos y existentes al facilitar a sus visitantes encontrar exactamente lo que necesitan. Esta página realmente no necesita un rediseño, pero quería mostrarte cómo juntar todos estos diferentes elementos en un nuevo diseño y mostrarte cómo ser creativo puede agregar interés adicional a una página para sostener o agarrar la atención y conseguir que hagan lo que quieras que hagan en este caso por unos zapatos u otros productos. Entonces no todos los sitios web van a tener todos estos elementos diferentes. No todas las empresas, van a tener varias marcas, y puede que no tengan una cuenta porque tal vez no estén vendiendo algo directamente en su página web. Al igual que este sitio, que es más de un tipo de sitio de comercio electrónico frente a un tipo de sitio web corporativo o empresarial tradicional . Todavía podrías vender productos, pero tal vez no tenerlo configurado en un estilo tradicional de tipo comercio electrónico. Esta página inicial no es un estilo de tipo de comercio electrónico. Se trata más de un tipo de información de página Web, pero cuando se navega a sus productos específicos, se trata más de un tipo de comercio electrónico de diseño de página. Entonces para el rediseño, realmente no queremos remarcar el sitio web porque Nike ya tiene una marca sólida en su lugar en su sitio existente. Simplemente podemos sumar a ella agregando diferentes elementos para que los visitantes hagan cualquiera que sea su objetivo específico. Y creo que para ellos su objetivo es vender más de sus productos. Entonces para el rediseño, no hice una remarca de la página web. Yo sólo quería enfocarme más en sus tres mejores marcas, que es el Air Jordan, el Hurley y Covers, y quería tomar sus más recientes diseños de zapatos. Destacar esos productos para captar la atención de las personas hacia ese producto específico y facilitar que las personas los compren a través de un llamado botón de acción. Pero también quería colocar esos productos de una manera que sea diferente a cualquier otra cosa que vas a ver por ahí. Y ahí es donde entra en juego la creatividad cuando estás tratando de diferenciar tu diseño de otros sitios. Pero al mismo tiempo, sin embargo, no quería sobrepasar el diseño, y lo mantuve sencillo simplemente agregando tres elementos principales. Tenemos el contenido con la llamada acción, el zapato principal y luego una persona, o una imagen de una persona que interactúa con ese zapato. Por lo que los tres zapatos principales, todos tienen un público específico esa década o dos en la mayoría de los casos. Por lo que el aire de Air Jordans va a atender más a los que, como el baloncesto o los zapatos altos en general, entonces Hurley va a tener combinación de zapatos y sandalias. Entonces tal vez los playeros o surfistas o cosas así, y luego conversar, o tal vez más popular entre los skateboarders u otro tipo de personas en esa multitud. O tal vez justo o tal vez simplemente les gusta el look de converse en general Y aquí es donde comunicarse con su cliente sobre esos productos específicos para determinar cómo su moneda, también, presenta esos productos de una manera que es diferente, creativo, pero lo suficientemente simple como para que no sea demasiado confuso y todavía eres capaz de agarrar la atención de una persona y conseguir que haga lo que quieres que haga, que es comprar más. Por lo que la comunicación es primordial para cualquier tipo de diseño Web. Por lo que elegí un tipo específico de persona para cada uno de esos productos para mostrarlos en acción con los zapatos reales. Entonces, claro, tenemos una foto de Michael Jordan para este zapato en particular porque son los Air Jordans , y quería mostrar no sólo el diseño de ese nuevo zapato, sino la inspiración para ese zapato. Entonces tenemos a Michael Jordan volando por el cielo, y parece que se va a meter dentro del rodaje. Esto por sí solo es diferente, y va a llamar la atención de un espectador porque no lo han visto antes. Después tengo una surfista surfista cruzando la parte superior de una sandalia y luego escapar de frontera, haciendo lo suyo en la parte delantera del zapato. Entonces cada una de estas ideas. Los reemplazos de la imagen de las personas en los zapatos ayudan a crear interés visual por ese zapato en particular o esa marca en particular. Entonces para este proyecto, vas a aprender cómo tomó todos estos elementos y los colocó juntos. Cómo retocar la imagen es cómo organizar las capas, cómo crear el mega menú y organizarlo de una manera que el desarrollador va a entender que esto no es solo un menú de navegación típico, y vas a aprender más tips pro en el camino también. Entonces lo primero que vamos a necesitar hacer es agarrar algunas imágenes para este diseño en particular . Si estás listo para empezar, te voy a mostrar de dónde conseguí estas imágenes en la siguiente lección. Entonces hagámoslo. 18. Imágenes: Cuando se trata de imágenes, o bien vas a obtener las imágenes directamente de tu cliente o vas a tener que usar imágenes en stock en tu diseño. Es probable que la declinación te esté dando imágenes de las que ya han comprado la licencia para usar esas imágenes en el sitio web. Si vas a salir y encontrar imágenes de agencias de stock o de imágenes de Google o donde encuentres la imagen, tienes que hacer saber a los clientes que esa imagen en particular está protegida por derechos de autor y que no pueden usarla en su sitio web hasta que adquirir una licencia para utilizarla en su página web. De lo contrario, sus clientes se van a meter en problemas y pueden terminar viniendo tras de ti por daños y perjuicios por usar una imagen que estaba protegida por derechos de autor. Por lo que sólo tienes que hacerles saber que cualquier imagen que hayas incluido en tus diseños, nuestros derechos de autor protegidos y necesitarán adquirir esa imagen en particular para poder utilizarla . Por lo que para completar el proyecto, necesitamos descargar algunas imágenes para que podamos usar las del proyecto. Así que encontré todas las imágenes en las imágenes de Google, y también creé un archivo de texto con un enlace a todas las imágenes que estoy usando para que puedas descargar este archivo de esta conferencia y navegar a cada una de las imágenes y luego agregarlas a tu gimp documento. Ahora sí quiero señalar que a pesar de que proporcioné enlaces directos a las imágenes que estoy usando , pueden o no estar disponibles en el momento en que estás viendo este video tutorial. Porque las imágenes a veces se quitan de las imágenes de Google, lo cual está bien, solo tienes que seguir adelante y encontrar otra imagen que sea similar a la que estamos usando en el proyecto. Porque las herramientas y las técnicas que vas a utilizar para retocar estas imágenes se pueden aplicar a cualquier imagen. Por lo que solo quiero darte un par de consejos rápidos para agregar estas imágenes a tu documento de regalo así como imágenes de Google antes de pasar al siguiente tutorial donde vamos a retocar estas imágenes. Entonces primero, vamos a entrar en imágenes de Google. Y cuando busco imágenes a través de imágenes de Google, me gusta encontrar las imágenes de mayor calidad disponibles, y si vamos a herramientas, tenemos algunas opciones de clasificación, así que si vamos de menor tamaño debilita, selecciona grande y esto nos dará archivos mucho más grandes con los que trabajar, y tienden a ser de mayor calidad. Y así es como encontré esta primera imagen de Michael Jordan, y en realidad vamos a usar esta imagen en el proyecto. Por lo que para añadirlo al proyecto, vamos a hacer click derecho y seleccionar copiar imagen. Después vamos a ir a Gimp y abrir ese archivo de cuadrícula que descargamos de una lección anterior y luego con su atajo de teclado, podemos usar el control Commander en la letra V para pegar ese archivo, o puedes subir a editar y seleccione pegar desde aquí. Ahora, si vamos a otra imagen ahora, cuando es como este borde de surf y copiamos esta imagen al portapapeles, vuelve a ir a nuestro documento, podemos ver que esta capa aquí se ha agregado, y es actualmente seleccionado. Ahora, cuando voy adelante y pego eso en, obtenemos una capa que dice selección flotante por lo que antes se convierte en una real más tarde, necesitamos hacer clic derecho en esta capa y seleccionar a nueva capa, y luego se agregará ese archivo a una nueva capa, o voy a seguir adelante y deshacer eso con comando o control y la letra Z. Si vamos a nuestra herramienta de marquesina o a una herramienta de selección de rectángulo, selecciónela y luego simplemente haga clic en cualquier lugar de su documento. Se agregará eso automáticamente a la capa. El único problema es que es agregarlo a la capa donde teníamos a Michael Jordan, así que tampoco queremos hacer eso. Entonces en este caso, lo que voy a hacer es crear una nueva capa. Sigamos adelante y lo nombremos surfista. Voy a hacer que sea transparencia. Da click ok, y luego lo voy a pegar y luego dar clic. Y luego se agrega a esa capa por sí misma. Por lo que esas son un par de formas diferentes de copiar y pegar imágenes en tu documento gimp. Otra cosa que quieres hacer una vez que añadas todas tus diferentes capas de nuevas imágenes es que quieres entrar y hacer doble clic para cambiar el nombre de las capas de acuerdo a la imagen misma, por lo que queremos darle una descripción de lo que es esa capa. Esto es para nosotros y para que el desarrollador Web nos ayude a organizar mejor nuestras imágenes. Entonces sabemos cuál es cuál Así que si vas a nuevo, adelante y agrega aquí el nombre de la capa. Si no lo haces de esa manera, solo haz doble clic y luego solo da esa capa en nombre basado en la descripción de esa imagen. Otra cosa que queremos hacer es que queremos usar los archivos P y G para los logotipos. Por lo que bajo herramientas, podemos ir a color y seleccionar transparente. Y esto nos va a dar una lista de todos los archivos PNG para ese logotipo en particular. Y eso hace que sea mucho más fácil versus tratar de averiguar cuál de estos es PNG de todos estos archivos, porque la mayoría de estos van a ser un archivo J peg, y vas a tener que hacer click en todos ellos para saber cuáles son transparentes y cuáles son las que se desea utilizar. Al igual que éste. Aquí hay un archivo J Peg, y no es algo que podamos usar para este proyecto en particular de todos modos. Por lo que esos airean algunos consejos sobre el uso de imágenes de Google y la adición de esas imágenes a tu archivo gim. Así que adelante y y todas las imágenes y luego en el siguiente tutorial seguirá adelante y retoque . El imagen es 19. Imágenes de retoque: Hola y bienvenidos de nuevo. De acuerdo, entonces deberías tener todas tus capas de imagen colocadas en tus documentos de cuadrícula, y debes tener todas las capas nombradas apropiadamente. Apenas ahora necesitamos organizar un poco sus capas para que se agrupe contenido similar . Entonces tengo todos mis logotipos juntos aquí en la parte superior, luego mis zapatos y luego todas las imágenes con la gente. Puede reorganizar las capas haciendo clic y arrastrándolas a una nueva ubicación. Guerra. Puedes usar las teclas de flecha arriba o abajo para moverlas de esa manera. Adelante y apaguemos todas las capas excepto dos. Y ese sería el logotipo de Nike y nuestro fondo blanco. Entonces primero vamos a ir a los logotipos de Reese Ice y ponerlo en posición, aparecen en la parte superior. Entonces vamos a quitar el fondo de nuestros productos y las imágenes con la gente. Entonces para cambiar el tamaño. Lo primero que tenemos que hacer es cambiar el límite de la capa. Si subes para ver y seleccionas Mostrar contorno de capa, podemos ver que el límite para esta capa es el tamaño real del documento. Eso no es lo que queremos Queremos que este límite de capa se ajuste al tamaño del contenido real de la capa, que estaría en esta área aquí mismo. Por lo que necesitamos hacer esto primero antes de volver a escala. De lo contrario, la escala será mucho más de lo que queremos porque va a ser escalado en función del tamaño del documento y no del tamaño del logotipo real. Entonces vamos a subir para recortar en capas el contenido, y ahora el límite de la capa se redimensiona al tamaño del propio logotipo y no al documento. De acuerdo, para hacer este logotipo más pequeño, porque es demasiado grande, necesitamos usar nuestra herramienta de escala, que se encuentra aquí mismo. Y el atajo de teclado es Shift Plus s. Ahora solo tenemos que hacer clic en nuestro logotipo, asegurarnos de que esté seleccionado en el panel de capas, y luego vas a conseguir esta caja de límites alrededor de ese logotipo con algunos cuadrados. ¿ Se puede hacer clic en para hacer clic y arrastrar hacia dentro o hacia fuera para cambiar el tamaño. Otra cosa que podemos hacer es que realmente podemos teclear lo real con o la altura, y podemos vincularlo para que si escribes en uno la altura o el con cambien automáticamente para mantenerlos en proporción. Entonces si tienes esto apagado aquí mismo, esto significa que el ancho y la altura no están vinculados. Entonces si redimensiono el con 2 50 la altura no cambia y se mantiene en 418 píxeles de altura y distorsiona el logotipo. Eso no es lo que queremos. Entonces vamos a encender eso, y vamos a seguir adelante y teclear 75 para la pestaña de click de ancho. Y ahora la altura es de 27 lo que mantiene ese logotipo en proporción. Vamos a hacer clic en escala, agarrar tu herramienta de movimiento con la letra V. Asegúrate de tener pick antes o guía seleccionada para que al hacer click en ella, realmente estés seleccionando esa capa y luego simplemente moverla hacia arriba. Muy bien, hagamos lo mismo por el logo Converse esta vez. Tenemos que quitar el texto del logo porque no quiero eso como parte del logo. Entonces vamos a agarrar nuestra herramienta de rectángulo justo aquí o con la letra m. dibuja una caja alrededor de ella, Luego haz clic en tu tecla de borrar o en tu tecla de retroceso, y luego necesitamos de seleccionar con comando o control y la letra D. Está bien, no olvidemos cambiar el límite de Delayer. Vamos a subir a capa, seleccionar recortar el contenido. Agarra tu herramienta de báscula con turno más s. y en esta ocasión vamos a hacer 50 para la escala con click. Volver a la herramienta de movimiento. Muévete hacia arriba. En realidad voy a hacer de ese el último. Entonces voy a poner eso por ahí, y voy a mover éste por un aire Jordan va a ser segundo. Entonces vamos a agarrar esa herramienta de escala de cultivo Lear a contenido. Y vamos a hacer 54 este en el último también. De acuerdo, vamos a agarrar de nuevo nuestra herramienta de rectángulo con la letra M. Y vamos a eliminar el comando de texto o control y la letra D a de Select Crop, la herramienta de escala de contenido y 50 de nuevo. Está bien, los logotipos están hechos. Adelante y apaguemos esos. Por ahora. Este es probablemente un buen momento para guardar tus archivos. Entonces golpea comando o control y la letra s y voy a trabajar primero en mis zapatos Nike, Así que voy a seguir adelante y mover esa capa hacia arriba y Converse será tercero. Está bien, sigamos como la capa de zapatos Nike y vamos a encenderla. Kayla, acerque ahora con la herramienta de zoom. Lo que queremos hacer es que queremos un fondo blanco puro. Ahora mismo, es un tono más oscuro de blanco o gris. Entonces lo que necesitamos hacer es seleccionar el fondo así como la sombra, porque quiero deshacerme de la sombra y vamos a necesitar usar una de nuestras herramientas de selección para poder hacerlo. Y luego vamos a usar una máscara de capa con el fin de quitar ese fondo. Entonces para esta edición, voy a agarrar mi herramienta de selección difusa, y voy a establecer mi umbral para que hagamos 20 para el umbral y luego haga clic en el fondo para hacer tu selección. Entonces en este momento está prácticamente seleccionado todo en segundo plano y nada más. Si presiono mi tecla delete, se quita el fondo, pero eso no es lo que queremos hacer. Por lo que necesitamos sumar a nuestra selección porque no es agregar la sombra como parte de la selección para que podamos usar otra de nuestras herramientas de selección para hacerlo. Pero mi método preferido es usar el modo de máscara rápida, que se encuentra justo aquí abajo a través de este icono y luego el atajo de teclado para alternar el modo de máscara rápida. Honor off es la letra Q. Así que una vez que lo enciendas, vas a conseguir una máscara roja sobre el zapato en las sombras. Entonces en este momento, esa es la zona que no está seleccionada. Entonces sigamos adelante y acerquemos el zapato aquí para que podamos ver la sombra un poco mejor . Y entonces lo que vamos a hacer es agarrar nuestra herramienta de pincel con el fin de agregar o quitar de la selección. Por lo que queremos que nuestros colores de primer plano y fondo sean blancos y negros. Simplemente voy a agregar un color escrito rápido, porque quiero mostrarte lo fácil que es cambiar los colores para el primer plano y el fondo. Y eso es simplemente presionando la letra D en tu teclado, y la cambiará a blanco y negro. De acuerdo, así que recuerda, tenemos una máscara de capa roja sobre el área que no está seleccionada. Por lo que se selecciona el fondo y queremos eliminar de la selección. Por lo que en este caso, blanco quitará de la selección o quitará la máscara roja. Y luego cuando salgas de este modo de máscara rápida, tendrás solo el fondo seleccionado y no la sombra ni los zapatos. Entonces vamos a agarrar ese cepillo, y vamos a dimensionarlo en consecuencia. Y luego puedes ajustar la dureza entre 25 75 dependiendo de la imagen. Y ahora mismo sólo voy a dejar la dureza fijada en 75 porque de nuevo, no me voy a sentar aquí a tratar de hacer esto perfecto, porque el cliente puede que me dé una imagen diferente más adelante. Entonces solo voy a entrar aquí y quitar la máscara roja de las zonas que no la quiero esa manera. No forma parte de la selección. Entonces puedo usar mi espacio Barkey para navegar a otras partes de la imagen también, solo para ver si necesito encontrar Tune mi selección. Eso se ve bastante bien. Entonces voy a golpear la letra Q. Y luego voy a usar mi herramienta de zoom y mantener presionada la tecla de control donde está la tecla de comando para que pueda alejarme. También puedes hacer esa selección aquí mismo. Amplíe, aleje y puede ver el atajo de teclado está justo aquí. Está controlado porque estoy en un PC, y si estás en un Mac, va a ser comando, Está bien, así que ahora mismo tenemos todo seleccionado que queremos quitar las sombras y el fondo. Pero lo que tenemos que hacer es invertir la selección o revertir la selección para que se seleccione el zapato. Y luego cuando entremos en capa, enmascarar el fondo y se eliminará la sombra. Entonces subamos a seleccionar invert Y ahora solo se selecciona el zapato, y si lo corto, se puede ver que los zapatos ahora se han ido. Entonces pasemos a nuestro panel de capas y seleccionemos la máscara de capa. Quieres asegurarte de que tienes selección seleccionada y haz clic en agregar, y ahora la sombra y el fondo se han ido. acuerdo, Deacuerdo, vamos a seleccionar con Commander Control y la letra D. Y si le echas un vistazo a tu máscara de capa aquí mismo, puedes ver que es blanco y negro. Por lo que el negro quita las hormigas blancas y se puede ver el contorno del zapato ahí mismo en blanco. Y si no invertimos nuestra selección de lo que hubiera hecho justo lo contrario, Muy bien, Ahora que hemos hecho ese zapato, ahora necesitamos hacer la misma edición a los otros dos zapatos. De acuerdo, entonces lo que vamos a hacer son exactamente los mismos pasos que hicimos para el zapato Nike. Entonces en vez de que me sentara aquí retocando estas imágenes y tú viéndome hacer lo mismo , voy a dejar que sigas adelante y hagas esto por tu cuenta. Así que adelante y edita tus otros dos zapatos, y te voy a dejar entrar en un pequeño secreto. Vamos a usar exactamente los mismos pasos. Cuatro son imágenes también, excepto quizá la herramienta de selección. Porque aunque la herramienta de selección difusa probablemente funcionaría, solo tendríamos que seguir trabajando en aumentar el umbral para poder seleccionar más de la imagen. Entonces en cambio, lo que voy a hacer es que voy a usar una herramienta de selección diferente para empezar, y esa va a ser mi herramienta de selección gratuita, así que solo voy a hacer clic y arrastrar y trazar alrededor del tema principal aquí, que es Michael Jordan. Entonces, una vez que tengamos nuestra selección, podemos entrar en modo máscara rápida para afinar nuestra selección. Por lo que para completar la selección con la libre seleccionable, tuvimos que volver al punto exacto donde empezamos y flotar sobre esa zona hasta conseguir este pequeño círculo. Una vez que hagas eso, puedes soltar el botón del ratón y luego presionar la tecla enter a return, y luego obtendrás tu selección de esa herramienta. Ahora podemos entrar en modo máscara rápida presionando la letra Q y luego usando nuestro pincel para agregar o quitar a la selección según sea necesario. Entonces voy a seguir adelante y hacer esto. Pero voy a adelantar rápidamente esta parte del video para que no tengas que ver esto en cámara lenta porque no hay mucho más que pueda agregar que ya no te lo he dicho . Lo único que recomendaría es mantener la mano cerca de la Letra X, y la razón es que si presiona la tecla letra X, cambiará los colores de primer plano y fondo en consecuencia. Y luego puedes seleccionar fácilmente esa clave si vas fuera de la línea donde necesitas ir . Entonces si entro justo aquí, tal vez estoy en su cara y su brazo aquí, comprimo la letra X y luego puedo quitar rápidamente la máscara donde no debería estar. Y vuelven a presionar X para seguir agregando esa máscara de capa según sea necesario. Está bien, así que voy a seguir adelante y rápido adelante mientras voy adelante y termino esto. De acuerdo, Ahora que tengo mi selección refinada, voy a presionar la letra Q para salir del modo máscara rápida. Ahora bien, esta vez no necesito invertir la selección porque el sujeto está seleccionado. Por lo que solo necesito venir y seleccionar mi máscara de capa, hacer que tu selección esté seleccionada y hacer clic en Agregar aquí y eso quita el fondo. ¿ Qué tan guay es eso? Ahora me encanta. Yo sí pasé bastante rápido por esa edición en particular, y puede que tenga que ir a través y encontrarlo más adelante. Si el cliente aprueba esta imagen en particular, se puede ver que no seguí muy bien a lo largo de los bordes. Y dejé algunos de los antecedentes aquí también. Y por eso utilizamos máscaras de capa porque nos permite trabajar de manera no destructiva. Y luego solo puedo seleccionar mi máscara de capa para entrar y refinar esa edición. De acuerdo, así que solo lo voy a dejar así por ahora. Ahora, tu tarea es seguir adelante y terminar también las otras dos imágenes, solo usando las mismas técnicas. Usa qué herramienta de selección siempre que creas que funcionará mejor para esa imagen en particular. Se utilizó el modo de máscara rápida para refinar tu selección en tu máscara de capa. Y luego estarás todo establecido toe work en el siguiente tutorial el cual estará trabajando en la primera parte de nuestro encabezado. 20. Encabezar parte 1: Hola y bienvenidos de nuevo. Muy bien, entonces para este tutorial, vamos a empezar a trabajar en nuestro encabezado de nuestro sitio web, y vamos a organizar y configurar nuestros logotipos y colocarlos exactamente donde necesitan estar . Por lo que tenemos la colocación perfecta de pixel. Vamos a usar nuestra herramienta de alineación vamos a y algunas formas de trazos, etcétera. Y luego en el siguiente tutorial, vamos a seguir adelante y terminar la parte de cabecera del diseño y la razón por la que lo estoy rompiendo porque se va a poner un poco largo porque quiero explicar muchas cosas en el camino para dar te algunos consejos pro para diseñar el encabezado de tus sitios web. Entonces sigamos adelante y empecemos. Voy a seguir adelante y hacer zoom, y así puedo ver mi logo es un poco mejor. Y ahora mismo tengo las rejillas apagadas, así que voy a seguir adelante y volver a encenderlas. Pero también quiero encender mis guías que se incluyen con esta plantilla de cuadrícula. Por lo que para verlos, se puede subir a ver y seleccionar mostrar guías. Aquí te dejamos el atajo de teclado para aquello que es Commander Control y la tecla de punto y coma. Una vez que enciendas eso, vas a ver todas tus guías, y también están alineadas con las columnas. Por lo que esta primera directriz aquí está a la izquierda de la columna. Y entonces tenemos otra pauta a la derecha de la columna también, que es una cantidad igual de espacio entre aquí y aquí. Y esta pauta básicamente divide el espacio entre la primera y la segunda columna manera uniforme y lo mismo con la segunda y 1/3. Tenemos otra pauta que divide a ese etcétera. Por lo que esto solo espacia por igual todas las columnas para que podamos usar las pautas como guía para alinear nuestros elementos de una manera para que todo esté alineado a la perfección y tenga simetría. Entonces lo que queremos hacer es que queremos colocar nuestros logotipos directamente en el centro de las columnas de izquierda a derecha. Pero también quiero definir la altura del espacio de cabecera. Y luego vamos a alinear esos logotipos entre la parte superior y la inferior de la altura del encabezado también. Entonces esto va a tener mucho más sentido a medida que vamos a lo largo de este tutorial y empezamos a alinear todo correctamente. Entonces sigamos adelante y definamos primero la altura del encabezado. Entonces lo que quiero hacer es que quiero hacerlo más grande que el ancho de esta columna aquí. Por lo que tenemos algo de espacio entre la parte superior y la inferior de los logotipos también. Por lo que primero tenemos que determinar cuál es el con para esta columna en particular. Bueno, podemos sentarnos aquí y podemos contar los píxeles, pero en realidad tenemos una herramienta de medida, que se encuentra aquí mismo, que nos dará la medida o la distancia entre el lado izquierdo y el derecho de la columna. Entonces si agarramos esta herramienta y luego hacemos clic en esta segunda guía justo aquí y luego arrastramos a la segunda guía, una vez que soltemos nuestro botón del ratón, se va a añadir el punto de esa herramienta de medición ahí mismo. Y luego si echamos un vistazo aquí abajo, podemos ver el número de píxeles o el ancho de esa columna, que es de 90 píxeles. Entonces la altura necesita ser de más de 90 píxeles, así que tenemos que decidir cuántos píxeles de espacio queremos en la parte superior e inferior de los logotipos? Así que digamos 20 píxeles para la parte superior y 20 píxeles para la parte inferior, así que son 40 píxeles en total. Tenemos que sumar eso al con. Entonces eso son 130 pixeles para la altura de nuestro encabezado. Para que podamos seguir adelante y presionar la tecla de escape del teclado para deshacernos de esa medición. Y entonces podemos seguir adelante y agarrar nuestra herramienta de movimiento con la letra V. Y entonces sólo necesitamos agregar una guía aquí abajo a 130 píxeles. Pero es un poco difícil de ver a menos que acerques o intentes contar el número de barras aquí para encontrar 1 30 Pero tenemos una pequeña herramienta aquí abajo otra vez que nos mostrará exactamente dónde está la colocación de esa guía mientras la arrastramos hacia fuera, dijo Toe, agregar una guía. Tenemos que hacer click en la regla aquí arriba en la parte superior y arrastrada hacia abajo y hacia abajo allá. Si echas un vistazo ahí abajo, dice agregar guía 1 11 Así que estamos agregando esa guía a ah 111 píxeles hacia abajo. Queremos 1 30 Así que solo seguimos bajando hasta llegar a 1 30 Vale, así que esa es la altura de nuestra cabecera. Y ahora podemos seguir adelante y alinear. Son logotipo de Nike de izquierda a derecha y de arriba a abajo. Por lo que para alinear nuestro logotipo en este espacio, necesitamos crear una selección y luego usar nuestra herramienta de alineación para alinearlo dentro de esa selección. Entonces tomemos nuestra herramienta de selección de rectángulo y dibujemos una selección en el espacio. Entonces podemos agarrar nuestra herramienta de alineación, que se encuentra justo aquí y luego en las opciones de herramienta. Tenemos que asegurarnos de que tenemos relativa a y tener selección seleccionada. También queremos asegurarnos de que nuestro logotipo fue seleccionado, y ahora necesitamos definir el objeto que se necesita alinear. Y lo podemos hacer haciendo haciendo click en nuestro logo. Una vez que lo hagamos, vas a ver estos cuatro casitas en cada esquina y eso deja dar No, este es el objeto o el elemento que necesita alinearse dentro de la selección. Por lo que volvemos a nuestras dos opciones y seleccionamos un centro de línea de objetivo y ahora está perfectamente alineado desde el lado izquierdo y derecho. Por lo que está centrado en medio de la columna, y luego necesitamos hacer lo mismo para la altura. Por lo que un medio acostado de objetivo y ahora está perfectamente alineado en el centro de la selección. Adelante y de seleccionar con Commander Control y la letra D. De acuerdo, tenemos que hacer lo mismo para nuestros otros tres logotipos también. Pero antes de hacer eso, quiero seguir adelante y añadir un círculo para cada uno de los logotipos. Entonces lo primero que tenemos que hacer antes de crear nuestra forma es que necesitamos crear una nueva capa. Entonces haga clic en este ícono aquí. Vamos a darle un nombre, Círculo uno, y vamos a asegurarnos de que tenemos la transparencia seleccionada y haga clic en Aceptar, ahora podemos agarrar nuestra herramienta Elipse, asegurarnos de que has seleccionado la relación fija y de aspecto, y luego solo hacer clic y arrastrar hacia fuera una forma. Y luego necesitamos hacerla de 90 píxeles de ancho por 90 píxeles, más alto como si fuera tu pegajoso y ahora que tienes tu forma, podemos rellenar eso con un color blanco así que cambió el primer plano un blanco, agarra tu cubo, llene herramienta y luego haga clic en el interior. También quiero agregar un trazo alrededor de esa forma, así que vamos a subir a editar y seleccionar selección de trazos. Asegúrate de tener color sólido seleccionado anti alias ing y luego para la línea con Queremos uno. Queremos cambiar el negro de nuevo al color de primer plano y luego hacer clic en trazo. OK, entonces ahora tenemos un trazo alrededor de nuestra forma, y necesitamos de seleccionar con Commander Control y la letra D. Vamos a seguir adelante y agarrar esa forma con nuestra herramienta de movimiento y moverla aquí arriba a la segunda columna. También queremos cambiar el límite de capa para este círculo porque ahora mismo es del tamaño de nuestro propio documento. Entonces si vengo aquí, en realidad necesito un zoom hasta el final. Podemos ver el límite de la capa, que es esta línea punteada amarilla y negra, y necesitamos colapsar eso al tamaño de nuestro círculo. Entonces vamos a recortar capa el contenido y ahora el límite de la capa ha cambiado. Voy a seguir adelante y ocultar eso Ahora necesitamos alinear esta forma en particular directamente en el centro de esta columna para poder usar mis teclas de flecha para moverla a la izquierda, derecha arriba o abajo un píxel a la vez para alinearla directamente a la izquierda, derecha. Pero ahora necesitamos usar nuestra otra técnica para alinear creando una selección en esta área con nuestra herramienta de selección. Y entonces podemos agarrar nuestra herramienta de alineación. Haga clic en esa forma, asegúrese de que relativa a la selección aún esté seleccionada y que su capa esté seleccionada y luego una línea en medio del objetivo. De acuerdo, estos selectos controles de comandante en la letra D. Ahora necesitamos mover esa capa en particular por debajo del logotipo de Air Jordan, y ahora necesitamos tomar este logotipo y alinearlo directamente en el centro de nuestro círculo. Entonces vamos a seguir adelante y agarrar nuestra selección de rectángulos para otra vez y hacer una selección. Y luego, con su herramienta de alineación, desea hacer clic en el logotipo y luego alinear el área central y central. Sigamos adelante y sumamos un círculo para nuestros otros dos logotipos también y una línea cada uno de los elementos dentro de su espacio. Entonces vamos a agarrar nuestra capa de círculo. Y en lugar de hacerlo desde cero, en realidad podemos duplicar la capa haciendo clic en este icono aquí. Vamos a llamarlo en círculo, y vamos a mover eso por debajo del logotipo de Hurley. Agarrémoslo con nuestra herramienta de movimiento y muévala. Estúpida Kate, Este. De acuerdo, empecemos con alinear el logotipo de Hurley, y luego haremos cada capa después de eso. Por lo que selección, herramienta, alineación, herramienta, Haga clic en el logotipo y luego alinearlo. De acuerdo, así que como ya tenemos esa zona seleccionada, todo lo que tenemos que hacer es agarrar nuestro círculo a capa, y luego con nuestra herramienta de límite, click en el círculo y luego podemos alinear ese. Kayla's hacen el alineamiento para las últimas capas de selecto. Vamos a seguir adelante y utilizar nuestra herramienta de zoom para alejar el zoom solo para echar un vistazo mejor a la forma que todo está alineado. Y eso se ve bastante bien. Adelante, apaga la capa de rejilla y se hace la primera parte de nuestro encabezado. Muy bien, entonces vamos a seguir adelante y pasar al siguiente tutorial, que va a incluir agregar la segunda parte de nuestro encabezado, que es la segunda navegación Dairy por aquí a la derecha. Y también te voy a dar algunos consejos pro adicionales para encontrar topografía o tipos específicos de fuentes que se utilizan en sitios web. Porque tal vez tu cliente compró o usó un tipo específico de fuente en su página web y porque la estás rediseñando, quieren usar la misma fuente, pero desconocen el nombre del fondo. Bueno, te voy a mostrar exactamente dónde encontrar el nombre de esa fuente. Entonces si estás listo, sigamos adelante y empecemos con eso. 21. Consigue: hola y bienvenidos de nuevo todo bien antes de empezar en el mega menú. Como mencioné en la última lección, primero quiero ayudarte a organizarte con tus archivos de diseño Web, y hay un par de razones por las que quieres organizarte. El primero es para su propio beneficio. A medida que trabajamos en este proyecto, vamos a estar agregando muchas más capas a las capas que ya tenemos. Y si necesitas volver atrás y hacer ajustes a algo, vas a pasar mucho tiempo desplazándote a través tratando de encontrar eso específicamente er así. Lo que puedes hacer es organizar las capas en capas de grupo para que sea más fácil encontrar lo que necesitas. El otro motivo por el que quieres organizarte es que este archivo lo más probable es que salga a un desarrollador Web para ser recubierto si no lo estás haciendo tú mismo así que o lo vas a enviar directamente a un desarrollador Web. O tal vez fuiste contratado por una agencia que lo va a externalizar a un desarrollador Web. En cualquier caso, te van a enviar este archivo de vuelta y decir que necesita ser organizado y agrupado capas. Y si eso alguna vez te pasa porque no estaban organizados, vas a parecer poco profesional. Y lo más probable es que no vuelvas a trabajar con ese grupo de personas en particular. Entonces déjame seguir adelante y mostrarte cómo organizar todas estas capas en capas grupales para que puedas hacerlo mucho más fácil para ti y para los pies. Busca más profesional cuando trabajes con otras personas en tu equipo de trabajo o si eres contratado por una agencia. Entonces una de las cosas que tenemos que hacer, como hicimos con algunas de nuestras capas anteriormente es que necesitamos nombrar las capas apropiadamente en función de lo que se trata esa capa. Entonces aquí mismo tenemos caja primaria para nuestra caja de navegación, que está bien, pero nuestro carrito de compras. A pesar de que tiene carrito de compras en él, es más sencillo solo hacer dos palabras. Carrito de compras versus lo que había antes. Y entonces aquí podemos renombrar este menú de navegación primario de capa, y entonces éste sería nuestro menú secundario de navegación. Y lo que recomiendo hacer es meterme en el hábito de renombrar y agrupar tus capas como estás trabajando, no al final del proyecto porque si esperas hasta el final del proyecto, te va a llevar mucho más tiempo pasar por y encontrar todas las diferentes capas que se supone que están juntas y agrupan. Entonces de nuevo, es mucho mejor y más rápido hacerlo ya que estás trabajando frente a hacerlo al final. Así que vamos a dar click en nuestra capa superior click derecho y Seleccionar nuevo grupo de capas. Entonces aquí está nuestro jugador de grupo y vamos a nombrar a esta navegación primaria. Y luego vamos a arrastrar todas las capas que forman parte de la navegación primaria para que estén agrupadas. Vamos a hacer clic y arrastrar hacia arriba una vez que liberemos esa capa se sangrará del dedo del pie a la derecha, y eso te permite saber que esa capa en particular está en esta capa de grupo. Entonces si cerramos a este jugador de grupo en particular, esa capa desaparecerá. Por lo que también tenemos nuestro menú de navegación principal. Voy a poner esa tasa aparece en la parte superior. De acuerdo, así que eso es todo para la navegación primaria. Sigamos adelante y cerremos eso, y vamos a crear un nuevo grupo de capas por encima de nuestro carrito de compras. A él y le llamaron la navegación secundaria, y vamos a poner ahí, por supuesto, el carrito de compras y el menú secundario de navegación. Muy bien, ahora tenemos un montón de logo, así que sigamos adelante y agreguemos un nuevo grupo de capas para los logotipos, y pongamos cada uno de esos dentro. Ahora, la otra cosa que puedes hacer para ayudarte a organizar aún más tus capas es que puedes poner capas de grupo en otras capas agrupadas. Por lo que si seleccionamos nuestra capa de Air Jordan haga clic derecho y creamos un nuevo grupo de capas, se agregará por encima de eso. Y luego podemos poner el logotipo de Air Jordan y dar un círculo dentro de ahí. Y luego podemos renombrar a este grupo aquí logotipo de Jordan. Entonces hagámoslo también para los otros dos logotipos. Y de nuevo, esto sólo mantiene todo unido que es similar a otras capas. Ahora que tenemos todas esas capas agrupadas en tres capas de grupos, no es tan difícil navegar y encontrar lo que necesitamos. También tenemos que hacer lo mismo con los zapatos, pero los agruparemos a medida que lleguemos a esas partes del proyecto. Por ahora, solo vamos a seguir adelante y empezar en el mega menú en el siguiente tutorial. Entonces si estás listo para eso, bueno, hagámoslo 22. Encabezar parte 2: Hola y bienvenidos de nuevo. Muy bien, entonces en esta lección, vamos a trabajar en nuestra navegación primaria y secundaria. Pero primero, quiero compartir rápidamente con ustedes una herramienta que puedan utilizar para encontrar fuentes específicas en sitios web en vivo . Esto resulta muy útil si tu cliente tiene una fuente específica que quieren usar ya sea desde su sitio web existente o desde el sitio web de otra persona, pero no conocen el nombre del fondo. Por lo que esta herramienta, es una herramienta de desarrolladores Web y es gratuita. Y ya está instalado en la mayoría de los navegadores modernos, como chrome y Firefox. Prefiero usar cromo. Entonces vamos a seguir adelante y vamos al cromo. Y luego si hacemos click derecho sobre mí pedazo de texto, entonces seleccionamos inspeccionar. Y luego conseguimos estas dos columnas aquí abajo en la parte inferior del navegador, y luego solo necesitamos navegar y encontrar familia divertida, que está aquí mismo. Y luego vas a ver una lista de todas las fuentes que se utilizan para esa sola pieza de texto . Ahora bien, ¿por qué hay tantos? Bueno, la primera familia 5 aquí mismo, una moneda de Nike es la fuente principal, y la que debería cargar en tu navegador si no está disponible en tu navegador, porque tal vez estás usando un navegador más antiguo y no es apoyado. Entonces se va a cargar la segunda fuente, que es Trade Gothic. Si ese no está disponible, eso va a cargar a Helvetica, y luego va a probar Aereo, y por eso hay más de uno. Entonces el que queremos usar y nuestro diseño Web si el cliente aún quiere usarlo, es una moneda Nike. Desafortunadamente, no tenemos acceso a este funt, y luego Trade. El gótico es una granja premium, que requiere una compra, y luego las dos últimas son fuentes gratuitas. Pero se ven completamente diferentes a estos dos fondos aquí, por lo que o bien podemos intentar acceder a ese hallazgo de nuestro cliente si aún lo tienen disponible. O podemos intentar encontrar un Funt similar, y podemos ir a fuentes dot google dot com para tratar de encontrar un fondo que sea similar a los que se utilizan en la página web existente. Ahora todos estos fondos son gratuitos. Hay otros lugares donde también puedes descargar fuentes gratuitas, así que solo es cuestión de hacer alguna investigación y tratar de encontrar un funt que sea similar al que quieren usar si no puedes obtener la fuente real que quieren usar. A menos que, por supuesto, estén dispuestos a comprar ese fondo en particular. Entonces para este diseño Web en particular, voy a usar una fuente completamente diferente. Y voy a usar una fuente llamada Oswald para la navegación primaria y para títulos y luego ferroviario para la navegación secundaria y algunas otras cosas también. Por lo que puedes descargar estos fondos desde aquí. Si quieres usar exactamente las mismas fuentes, no importa. Puedes usar cualquier fuente que quieras usar, así que sigamos adelante y empecemos primero en la navegación secundaria escribiendo, iniciando sesión. Y luego vamos a sumar cinco espacios para agregar separación, teclear ayuda y luego cinco espacios más. Y eso es porque vamos a añadir un icono de carrito de compras a la derecha de eso también. También necesito cambiar por fuente y el tamaño, así que solo hago doble clic dentro para seleccionar el texto, y luego solo necesito escribir el nombre de la fuente que quiero usar aquí, que en realidad es ferroviario. Y luego voy a escribir 16 para el tamaño de fuente. Una vez que haga clic en Tab, va a cambiar el tamaño de ese contenido para mí. Sigamos adelante y movamos esto hasta la cima. Por ahora, agarremos nuestra herramienta de movimiento. Necesito un zoom en sólo un poquito Aquí. Encendemos también a nuestros guías con Commander Control y el hijo Michael y Key para que veamos dónde colocarlo. Entonces sólo voy a moverlo aquí arriba al lado derecho de esta última columna. Si encendemos la grilla, realidad la podemos ver un poco mejor. Ahora solo necesitamos encontrar un icono de carrito de compras, y vamos a hacer una búsqueda rápida en Google para un icono de carrito de compras gratis. Ahora, igual que con las imágenes, éstas pueden o no ser libres, y pueden o no estar protegidas por derechos de autor. Si tienen una marca de agua como esta de aquí, bueno, casi sabemos que eso va a ser un Icahn con derechos de autor. Por lo que o bien necesitamos comprar el icono y luego construir a nuestros clientes por esa cuota, o podemos crear los nuestros propios en Gimp o podemos intentar encontrar un ícono gratis. Este ícono de aquí es gratis, pero tiene lo que se conoce como una ATRIBUCION requerida para usarlo. Entonces, ¿qué es una atribución y atribución es un conjunto de código que tuvo que poner en tu página web? Eso es un enlace de vuelta a este sitio Web en particular, Así lo dice aquí mismo, licencia libre con atribución. Por lo que si quieres usarlo, tienes que añadir un enlace de vuelta a la página web. Por lo general, eso no es algo que yo quiera hacer. Yo quiero encontrar un ícono 100% gratuito, pero por ahora, sólo vamos a descargar este ícono en particular. Realmente no importa ningún ícono que quieras usar. Es sólo para la práctica. Entonces sigamos adelante y naveguemos a la página de descargas. Vamos a seleccionar PNG 16 para el tamaño, y luego puedes ver aquí mismo el código que debes agregar al sitio web para una atribución nuevamente. Esto no es algo que recomiendo hacer. Entonces por eso quieres encontrar un ícono 100% gratis. Adelante y descarguemos este por ahora y después para añadirlo al diseño de nuestro sitio web aquí mismo , solo voy a dar clic y arrastrarlo sobre mi documento. Una vez que suelte, se va a agregar en una nueva capa. Entonces esa es solo otra forma genial de agregar archivos adicionales a tu documento. Simplemente voy a acercar un poco para que pueda agarrar este ícono y ponerlo en su lugar. Muy bien, sigamos adelante y agarramos nuestras herramientas rectangulares. Podemos alinear todo exactamente donde deberían estar. Voy a ir por encima del área de canalón y esta columna aquí para alinear esta capa directamente en el centro, de arriba a abajo, a la derecha, derecha, a la izquierda para asegurarme de que la capa esté seleccionada. Un oleaje. Agarra tu herramienta de alineación. Ahora vamos a asegurarnos de hacer clic en nuestra capa aquí también, para que gimp sepa que esa es la capa que queremos ah, alinear en el espacio. Asegúrese de tener selección seleccionada y luego un centro de línea de objetivo y alinear medio del objetivo. Vamos a seguir adelante y de seleccionar y hacer lo mismo para nuestro carrito de compras. Muy bien, entonces la última parte es sumar nuestra navegación primaria. Adelante y alejemos un poco aquí. Voy a seguir adelante y esconder a mis chicos con Commander Control y el Semi colon, luego de vuelta a la herramienta de texto. Vamos a escribir todo en todas gorras va a hacer hombres, y luego vamos a hacer cinco espacios. Y de nuevo, esto nos da cierta separación entre cada partida de línea. Vamos a mantener presionada nuestra tecla de turno y luego usar nuestra tecla de flecha izquierda y movernos sobre cinco espacios para poder seleccionar los cinco espacios para que podamos copiar eso y pegarlo al final de cada elemento. Por lo que el teclado para corte es comando o control y ver. Y luego, si presiono mi tecla de flecha derecha, voy hasta el final, y puedo seguir escribiendo y luego comando o control y V para pegar esos cinco espacios. De acuerdo, voy a seguir adelante y terminar el resto de los elementos del menú. Voy a seleccionar todos con Commander Control y la letra A Voy a cambiar la tipografía dedo Oswald y 24 por la talla. Date prisa. Agarremos nuestro movimiento, herramienta, y solo moveámosla aquí a la parte superior, y luego vamos a utilizar nuestras herramientas de alineación de nuevo para alinearla directamente en el centro de nuestro documento. Entonces empecemos de nuevo aquí del lado izquierdo todo el camino a la derecha. Culpa a él, herramienta, haga clic en él y luego una línea centro y medio de objetivo. Ahora, lo último que quiero hacer es que realmente quiero mover esto un poco más arriba porque está abajo demasiado lejos. Y si encendemos nuestras guías con Commander Control y el semi colon, podemos ver que hay demasiado espacio en la parte superior y los iconos que necesitamos para acercarlo un poco más. Entonces esta primera guía está a las 1 30 creo que voy a hacer una segunda guía a las 1 80 Así que recuerda mirar la parte inferior de tu interfaz ahora mismo para conseguir la guía en 1 80 Muy bien, vamos adelante y apaguemos nuestra grilla. Eso va a hacer más fácil seleccionar esta capa en particular y vamos a moverla hacia arriba. Entonces lo que vamos a hacer es que vamos a rehacer esa alineación que acabamos de hacer para poder colocarla directamente en el centro, platicamos de él y a la izquierda derecha de este nuevo tamaño que creamos para el menú. Muy bien, vamos a seguir adelante y agarrar nuestras herramientas rectangulares para que podamos realinear nuestra navegación primaria, conseguimos la herramienta de límite, clic en el menú y luego realinear una tasa el selecto. Ahora, antes de pasar a la siguiente parte de este proyecto, creo que hay un par de cosas que podemos hacer para mejorar este diseño de cabecera. Lo que quiero hacer es que quiero agarrar estos logotipos aquí y quiero bajar la opacidad para que no estén tan oscuros como ahora mismo. Porque este es el logotipo primario. Estos aires secundarios y no quiero que estos logotipos compitiendo con éste. Y simplemente podemos hacer eso bajando la opacidad de estas tres capas. Y yo también los voy a dejar caer . 30 por la opacidad en los tres. Ahora, lo último que quiero hacer es añadir una línea por encima y por debajo de la navegación primaria . Esto va a ayudar a darle algo de separación de la parte superior lastimada de la cabecera. Entonces para hacer eso, vamos a subir a la cima aquí, y vamos a crear una nueva capa. Llamémoslo caja primaria. Vamos a mantenerlo establecido en transparencia para el click de relleno. OK, entonces vamos a agarrar nuestra herramienta de rectángulo y necesitamos encender nuestras guías también. Entonces hagamos una selección aquí, subamos a editar selección de trazos selectos y luego todos los ajustes que creamos para los círculos deberían ser los mismos. Y los vamos a usar de nuevo. Así que solo haz clic en trazo. Vamos a seleccionar Control de Comandante en la letra D y guías de Haider Y ahora tenemos esa línea por encima y por debajo de ella. De acuerdo, creo que estamos listos para pasar a la siguiente parte del proyecto, que va a ser el mega menú de este diseño web. 23. Mega menú: Hola y bienvenidos de nuevo. Muy bien, entonces el siguiente paso de nuestro encabezado es crear un mega menú para que nuestro desarrollador Web sepa que estos enlaces para la navegación no son solo enlaces estándar sino enlaces que enlazan a un mega menú. Entonces si volvemos a ese sitio web de Nike y me paso el rato sobre uno de los elementos del menú, podemos ver el enorme mega menú de enlaces adicionales que muestran todos los diferentes productos en las diferentes categorías. La otra cosa que tenemos es esta pequeña línea negra justo aquí debajo de esta categoría en particular , y no la vemos en ningún otro lugar hasta que naveguemos a esas otras categorías. Entonces esto se conoce como estado flotante, y lo otro que notarás es que hay una mano ahí, y cuando me aleje de ella, cambia a una flecha, por lo que esa mano también forma parte del estado flotante. Entonces cuando se trata de tu estado flotante, hay muchas cosas diferentes que puedes hacer. Además de solo agregar una línea en la parte inferior, podrías agregarla en la parte superior. Podrías agregar una caja. Se puede cambiar el color del texto o del fondo o ambos. Hay muchas cosas diferentes que puedes hacer, independientemente de lo que decidas para tu diseño Web. necesario mostrarlo en ese diseño Web para que el desarrollador Web sepa lo que va a pasar cuando se pasa el cursor sobre un área determinada. Entonces en este tutorial, vamos a crear nuestros estados flotantes y crear nuestro mega menú. Sigamos adelante y acerquemos nuestra navegación primaria, y lo primero en lo que quiero trabajar es esa línea debajo de la categoría que estaban flotando. Voy a salir de mis guías con Commander Control y el semi Colón, y vamos a arrastrar una guía hasta el final y el comienzo de esta palabra aquí. Entonces vamos a agarrar nuestra herramienta de selección con la letra M. Dibujemos una selección entre esas dos guías y vamos como nuestra caja primaria. Está bien, usa tus teclados fueron cortados para copiar esa zona en particular con control de comandante en la letra C y luego apretarlo con comando o control y la letra V vuelve a tus capas porque tenemos una selección flotante, necesitamos moverlo a su propia capa para que podamos hacerlo haciendo clic derecho y seleccionar a nueva capa. Kate. Cambiemos el nombre de esta línea flotante, y esto realmente necesita salir de este grupo jugadores, o vamos a sacar eso todo el camino. Y vamos a crear un nuevo grupo de capas llamado Hover State y pongamos su línea flotante dentro. Ahora lo que quiero hacer es que quiero hacer esa línea un poco más oscura. Voy a esconder aquí mis guías con Commander Control y Semi Colón. Agarremos nuestra herramienta de llenado de cubetas. Asegúrate de tener el negro seleccionado para el primer plano y luego haz click en esa línea para que sea negro puro. Muy bien, vamos a hacer una búsqueda en Google de nuestro icono de mano. Vamos a escribir en los iconos de mano libres de pasar el ratón. Da click en este botón PNG para arrodillarse tus búsquedas. Este de aquí parece que va a funcionar. Vamos a dar click derecho Seleccionar copiar Imagen y luego Commander Control y V para pegarlo . Y vamos a la derecha. Haga clic en la capa y seleccione una nueva capa. Muy bien, definitivamente demasiado grande. De acuerdo, vamos a seguir adelante y alejar con comando o control y la tecla cero y Agarremos nuestra herramienta de escala fue Shift plus s y movamos esto un poco hacia abajo para que podamos verlo un poco mejor. Y vamos a agarrar una esquina y bajarla a, digamos, 91. Por ahora, puede que tengamos que ir más pequeños. Echemos un vistazo acercando. En realidad es un poco demasiado grande todavía correcto. Entonces vamos a reducirlo de nuevo. Si agarras el centro de esta caja de báscula justo aquí, puedes moverlo a su posición. Entonces solo voy a moverlo justo por ahí. Haga clic en escala. Y lo otro que quiero hacer es que quiero quitar esta flecha porque no necesitamos eso . Voy a agarrar la herramienta de rectángulo con la letra m selecciónela y luego golpear su retroceso o borrar tecla. No es un ícono de muy alta calidad, pero funcionará por ahora. Si vamos a usar unos iconos personalizados como este, pasaría un poco más de tiempo en encontrar un ícono de mayor calidad. Entonces para que esto sea un poco más fácil, vamos a volver al sitio web de Nike y vamos a copiar el contenido de cada columna y crear una nueva capa para cada columna en nuestro proyecto de diseño Web. Entonces vayamos a la primera columna, seleccionemos todos Control de Comandante y veamos para copiar y luego ¿qué? Su herramienta de texto la podemos pegar con Commander Control en la letra V. Vamos a seleccionar todos y vamos a redimensionarlo a 16 píxeles para el tamaño de fuente, y vamos a utilizar ferrocarril para el Funt. Vamos en realidad a ir atrevidos. Ya que esta primera columna es audaz en su sitio se adelantará y igualará eso por ahora. Voy a seleccionar mi herramienta de movimiento para poder salir de ahí y simplemente acercar un poco. Muy bien, volvamos a entrar y hacer algunos otros ajustes a nuestro texto. Ahora mismo. El texto está demasiado cerca, y está haciendo que sea más difícil de leer, así que quiero agregar algo de espacio entre cada una de las líneas. Otra cosa que quiero hacer es aumentar el tamaño, y creo que quiero cambiar el estilo de la fuente también a algo con un peso más pesado . Voy a ir con ultra negrita y luego dedo del pie añadir el espacio extra entre cada línea. Vamos a aumentar la línea de base del texto seleccionado, así que creo que 14 saldrá bastante bien. Parece mucho más fácil de leer, así que sigamos con eso. Adelante y aleje aquí y pongamos esta primera columna aquí a la derecha. En realidad, vamos a sacarlo del Estado flotante porque no es parte del Estado flotante. Y sigamos adelante y movamos que estamos aquí a la izquierda. Muy bien, vamos a copiar la siguiente columna y básicamente lo mismo esta vez. No voy a ir con ultra Bold. Voy a ir con el mismo tamaño mediano, esos 16 píxeles y luego 16 de nuevo para la línea base. Ahora, el título de los zapatos debe ser un poco más oscuro ya que es un título. Entonces cambiemos eso a Ultra Bold. Entonces sólo necesitábamos hacer esto tres veces más. Voy a seguir adelante y acelerar este video tutorial para que no tengas que ver esto en cámara lenta ya que ya lo he hecho dos veces. Y entonces puedes seguir adelante y hacerlo tú mismo también. Está bien. ¿ Qué? Están encendidas las rejillas. Voy a seguir adelante y mover esto a la columna derecha aquí y luego esta de aquí . Voy a pasar a la columna de la izquierda, refresco se alinea con nuestro logotipo de Nike por aquí. Pero necesito cambiarlo a la opción pick a layer o guide. De lo contrario, voy a seguir moviendo esta capa aquí. Muy bien, vamos a crear un nuevo grupo de capas. Llamémoslo texto mega Menú, y vamos a poner cada una de estas columnas dentro. También voy a organizar mi capa para que estén en el orden adecuado y vamos a renombrarlos . Por lo que tenemos nuevos lanzamientos, zapatos y ropa. Muy bien, apaguemos las guías. Muy bien, alineemos todas nuestras columnas para que todas estén alineadas en la parte superior para que podamos agarrar nuestra herramienta de rectángulo para crear una selección que nos dé un punto de partida. Y luego solo necesitamos agarrar cada una de las columnas individualmente con nuestra herramienta de alineación , y necesitamos asegurarnos de que lo seleccionamos ahora. El problema es que estamos seleccionando toda la capa de grupo y no la capa en la que hicimos clic. Por lo que vamos a necesitar mover estos fuera de la capa de grupo para que podamos alinearlos y luego podamos moverlos de nuevo dentro. Y luego vamos a seleccionar una línea a borde superior del objetivo. Y luego vamos a hacer eso para las otras columnas es mientras necesitamos asegurarnos de que seleccionamos esa capa también con la herramienta de alineación. De acuerdo, vamos a seleccionar y mover todo de nuevo adentro. Está bien, voy a agarrar todo el grupo de texto, y voy a moverlo hacia abajo. Y antes de intentar moverla, asegúrate de haber movido la capa activa seleccionada, y luego haz clic en ella y luego usa tus teclas de flecha para moverla hacia abajo. De acuerdo, entonces lo último que tenemos que hacer es agregar un poco de espacio adicional entre las columnas. Tenemos demasiado aquí y no suficiente aquí, Así que vamos a seguir adelante y encender nuestra grilla y Spacey salió un poco mejor. Ahora antes de que hagamos eso, sigamos adelante y acerquemos y añadamos aquí una guía a la parte superior de nuestras columnas. Entonces sabemos exactamente a dónde se necesita ir para alinear y elegamos la tienda por capa de tendencias . Pero se mueven herramienta y de nuevo, necesitamos asegurarnos de que se seleccione mover capa activa para que podamos seleccionar esa capa y no otra cosa. Lo voy a mover aquí mismo a esta columna de cuadrícula justo aquí y luego solo voy a usar mis teclas de flecha para moverla a su lugar. De acuerdo, sigamos adelante y alineemos el mega menú directamente en el centro. Está bien, entonces todo se ve mucho mejor ahora. Entonces lo último que quiero hacer es agregar otra línea aquí abajo para mostrar que ese es el final del mega menú. Vamos a entrar en nuestra navegación primaria y seleccionar nuestra caja primaria y duplicada infinita Renombrarlo mega menú. En pocas palabras, Mueve esto aquí arriba. Agarremos nuestra herramienta de movimiento, y vamos a mover esta línea aquí abajo hacia abajo a la derecha sobre ahí debería ser bueno . Lo que quiero hacer es deshacerme de esta línea de arriba aquí. No necesitamos hacerlo, así que volvamos a la herramienta de rectángulo con la letra M, selecciónela y luego presione su tecla de borrar o retroceso. Muy bien, vamos a asegurarnos de que tengamos una cantidad pareja de espacio entre la parte inferior de esta línea y la parte superior de esta línea para nuestro texto del mega menú. Vamos a seleccionarlo y utilizar de nuevo nuestra herramienta de selección para hacer una selección para la altura. Perfecto. Muy bien, vamos a crear un nuevo grupo, capa. En realidad, no dentro de esa. Este nombre, este mega menú. Y vamos a poner esta capa de grupo dentro y la línea de fondo así como nuestro estado flotante . También necesitamos poner estas capas de grupo en particular en el orden adecuado también. Deberíamos tener los logotipos en la parte superior, seguido de la secundaria primaria, para luego hacer un menú. De acuerdo, ahora que terminamos con nuestro mega menú, podemos empezar a trabajar en la siguiente parte de nuestra página web. Pero antes de hacerlo en el siguiente tutorial, quiero repasar algunos ajustes menores que debemos hacer para nuestro encabezado antes de comenzar en la sección de héroes. Entonces vamos a cubrir eso en el siguiente tutorial. 24. Ajustes menores: Hola y bienvenidos de nuevo. Muy bien, casi terminamos con nuestro encabezado. Pero antes de pasar a la sección de héroes, solo quiero hablar un poco más sobre el encabezado y el diseño actual que tenemos, porque creo que se puede hacer mucho mejor que lo que tenemos actualmente. Entonces mientras estoy diseñando, puede que me dé cuenta de que el diseño actual que tengo no es muy bueno y puedo hacerlo mejor . Por ejemplo, creo que la navegación primaria debería ser la parte más prominente de nuestro encabezado fuera de estos tres elementos aquí. Pero ahora mismo tenemos los logotipos mucho más grandes que la navegación primaria, y nuestros ojos están rebotando de ida y vuelta entre estos dos. Y entonces tenemos algo por aquí y solo ten en cuenta que el mega menú no sería visible hasta que pasáramos por encima de la navegación primaria. Entonces está realmente ocupado en este momento, y creo que tenemos que arreglarlo para que no esté tan ocupado y volver a poner la prominencia en la primaria. Navegación y debilitar simplemente hacer eso agarrando nuestros logotipos y haciéndolos más pequeños. Entonces sigamos adelante y hagamos eso Agarremos nuestra báscula a con Shift Plus s y solo tomemos una esquina y la hagamos más pequeña. Entonces ahí mismo podemos ver que definitivamente vuelve a poner el foco en la navegación primaria. Entonces esto es lo primero que vemos que sus ojos gravitan por aquí, y luego podemos ver que hay algo por aquí, así que no está tan ocupado como antes. Otra cosa que necesitamos hacer realmente rápido es que necesitamos realinear los logotipos. Entonces vamos a agarrar los logotipos y ponerlo de nuevo en su lugar a lo largo del lado izquierdo de la rejilla. Y vamos a agarrar nuestra herramienta de rectángulo con la letra M y una línea de arriba a abajo. De acuerdo, entonces eso arregla esa parte del diseño. Ahora lo otro que creo que tenemos que hacer es hacer las fuentes un poco más grandes , y necesitamos agregar algo de espacio adicional ahora. Lo siguiente que creo que podemos hacer para mejorar el diseño general de nuestro encabezado es aumentar la cantidad de espacio entre las palabras y aumentar el tamaño de la fuente y tal vez el estilo de las fuentes así para hacerlas un poco más audaces de lo que actualmente son, y eso va a ayudar a que se vuelva mucho más prominente. Y nuestros ojos van a gravitar primero a esa sección, más de lo que es ahora. Entonces lo primero que vamos a hacer es agarrar nuestra herramienta de texto, y vamos a seleccionar estos cinco espacios en el medio. Las palabras iban a copiarlas, y luego las vamos a pegar al final de cada una de las palabras para que podamos aumentar la cantidad de espacio entre cada palabra. Muy bien, sigamos adelante y realineemos al centro. Entonces vamos a agarrar nuestra herramienta de rectángulo con la letra M. Vamos a hacer nuestra selección, y en realidad necesitamos sacar esta capa de menú de navegación principal del jugador de grupo para que podamos seleccionarla con nuestra herramienta de alineación, y luego podemos alinear centro de objetivo. Adelante y pongamos esto de nuevo. En realidad, creo que deberíamos haber aumentado primero el tamaño de la fuente, pero eso está bien. Sigamos adelante y seleccionemos todos y aumentemos el tamaño de fuente a 28. Y también seleccionemos Oswald bold para aumentar el estilo o la densidad de esa fuente. Muy bien, entonces vamos a tener que seguir adelante y realinear de nuevo. Está bien, sigamos adelante y aumentemos la cantidad de espacio entre estas dos líneas aquí, vamos a agarrar nuestra caja primaria. Tenemos que subir a capa y seleccionar recortar a contenido para que el límite de capa se ajuste a las líneas mismas y no a todo el documento. Ahora vamos a agarrar nuestra herramienta de báscula con Shift Plus s, y luego podemos simplemente agarrar ya sea la parte superior de la parte inferior y simplemente tirarla hacia abajo o subirla para aumentar la cantidad de espacio algo adelante y seleccionar 78 para la altura. Y ahora solo necesitamos alinearnos con el centro de la parte superior y la parte inferior de nuestra caja. Entonces vamos a sacar de nuevo el menú de navegación principal. Agarra tu herramienta de rectángulo, haz una selección, asegúrate de hacer clic en ella con la herramienta de alineación y luego una línea media de objetivo. Commander Perfecto Control Andy a de selecto. Vamos a volver a poner esto. Y creo que eso es 10 veces mejor de lo que era antes. Nuestra navegación primaria es ahora la más prominente. Destaca más. Nuestros ojos gravitan a eso. En primer lugar, el encabezado no está tan ocupado como antes. Todavía reconocemos que hay algún logo por aquí y estos aires posiblemente enlaces para llevarnos a otro lugar. Y aquí tenemos una navegación secundaria que es mucho más pequeña que la navegación primaria y los logotipos. Entonces básicamente tenemos los ojos yendo de aquí a aquí y luego de vuelta a nuestra navegación primaria , que es donde queremos que vayan, porque ahí es donde van a encontrar los productos que están buscando. Ahora vamos a tener otro problema ahora que hemos ajustado el tamaño de la navegación primaria y de la caja primaria, y ahí es cuando encendemos nuestro mega menú. Todo ha cambiado. Necesitamos y algo de espacio adicional para nuestras columnas aquí porque es demasiado apretado y nuestros estados florecientes ahora necesitan ser trasladados aquí a esta categoría también. Entonces sigamos adelante y hagamos estos ajustes y estaremos todos listos y listos para pasar a nuestra sección de héroes. Entonces lo primero que quiero hacer es trabajar en el estado flotando. Entonces encontremos el estado flotando y aquí tenemos la mano. También necesito cambiar el nombre de este ícono también flotar, y sigamos adelante y pasemos eso de nuevo. También tengo la línea de flotación que necesito para moverme también, y en realidad necesito hacerla un poco más grande. Entonces voy a agarrar mi herramienta de báscula con Shift Plus s. y sólo voy a deslizar esto hacia la derecha para que coincida con la de nuestra palabra. De acuerdo, ahora que tenemos eso, sigamos adelante y alejemos el zoom y vamos a mover esta línea de fondo un poco hacia abajo para que podamos tener un poco más de espacio para que nuestras columnas encajen. Así que vamos a agarrar nuestra herramienta de movimiento gramatical de línea de fondo del mega menú y simplemente moverlo un poco hacia abajo . Agarramos nuestro texto de mega menú agrupado capa la letra M para nuestra herramienta de rectángulo para que podamos alinearnos de arriba a abajo, y también tuvimos que sacar esta capa de grupo de la otra capa de grupo para que podamos seleccionarla con nuestra herramienta de alineación aliando medio de objetivo y Vamos a ponerlo de nuevo dentro del mega menú de Select. Y ahora sigamos adelante y sumamos nuestro fondo al mega menú. Entonces vamos a agarrar de nuevo nuestra herramienta de rectángulo y dibujar una selección. Cambiemos el primer plano un blanco, y vamos a agarrar nuestra herramienta de llenado de cubos. También necesitamos crear una nueva capa en la que ponerla, Vamos a llamarlo fondo, hacer un menú, y luego podemos rellenarlo con blanco. Eso es de selecto. Y ahora sigamos adelante y movamos esto a la capa grupal adecuada, que estará en nuestro mega menú en la parte inferior. Perfecto. De acuerdo ahorita, la otra cosa es que cuando envías este diseño Web terminado al desarrollador Web, no quieres tener activado el mega menú. En cambio, quieres tenerlo apagado. Al estar trabajando a través de todos los diferentes grupos, capas y capas, se encontrarán con los mega hombres. Notarás que está apagado, lo encenderán, y luego sabrán que tienen que codificar eso para la navegación primaria también. El otro es, si le echas un vistazo a la página web de Nike, ves todas estas categorías diferentes, y cada una tiene su propio mega menú único, por lo que tendrías que crear un mega menú para que cada categoría represente todos los diferentes enlaces para esa categoría en particular. De lo contrario, el desarrollador Web sólo va a codificar el un mega menú cuatro hombres. Entonces no vamos a hacer eso ya que ya sabes cómo hacerlo. Si quieres practicar, puedes seguir adelante y hacer eso por cada categoría, y entonces yo también les daría diferentes nombres. Entonces tenemos mega menú hombres, y luego yo haría uno para mujeres, niños, niñas, etcétera. Y luego apagaría eso para el desarrollador Web, claro, pero también para ti, porque no quieres tener eso encendido cuando estás trabajando en tu sección de héroes, que está en esta área justo aquí. De acuerdo, ahora que hemos actualizado nuestro encabezado, se ve mucho mejor de lo que hacía antes. Por lo que de nuevo, como estoy trabajando en diferentes secciones de mi sitio web, no tengo problema al volver atrás y hacer ajustes para hacer mejor el diseño. Si veo algo que no está funcionando con el diseño general Bien, entonces a continuación, vamos a trabajar en nuestra sesión de héroes. Entonces si estás listo para trabajar en eso, hagámoslo. 25. Hero: Hola y bienvenidos de nuevo. Muy bien, entonces ahora vamos a trabajar en nuestra sección de héroes. Y como saben, de lecciones anteriores, la sección de héroes es una de las partes más importantes de qué página necesitamos para agarrar el interés de una persona y ojalá que hagan algo antes de que o bien naveguen a otra página o antes de que decidan salir del sitio por completo. Por lo que cuando una persona aterriza en una página Web, primero tiene que decidir. ¿ Estoy en el lugar correcto? Y si es así, ¿este sitio me va a dar lo que necesito? En este caso, vamos a utilizar las imágenes de manera creativa con el fin de asegurar que esa persona sepa exactamente dónde se encuentran y que se apoderen de su interés porque pueden estar interesados en el nuevo Air Jordan nine. Entonces sigamos adelante y creamos nuestra sección de héroes, y va a ser realmente fácil de hacer porque tenemos tres partes principales de la sección de héroes . Tenemos nuestro titular que incluye el botón comprar ahora son Zapato y Michael Jordan metiendo en el zapato. Entonces primero necesitamos definir la altura de la sección de héroes y esa sección de héroes va a cambiar en función del dispositivo o del tamaño del monitor de computadora que esa persona está usando. Entonces lo que los desarrolladores web tienen que hacer hoy en día para asegurar que esa sección de héroes sea visible en la mayor cantidad de dispositivos es crear lo que se conoce como respuesta de código. Pero para nosotros, necesitamos definir la sección de héroes, la altura de la misma que acomodará la mayor cantidad de tamaños de pantalla. Y dependiendo de con quién hables, podría ser en cualquier lugar a partir de 700 días 100 pixeles. Por lo que me gusta quedarme con mi sección de héroes y esa zona. Y luego dejo que el único desarrollador No, que el sitio necesita ser responsive, y la sección de héroes necesita estar disponible o visible y tantos dispositivos y tamaños de pantalla como sea posible. Entonces sigamos adelante y enciendamos nuestras guías con mando o control y la llave de punto y punto, y vamos a arrastrar una guía hacia abajo a 750 esta será el área de contención para nuestra sección de héroes. Entonces sigamos adelante y agarramos nuestro primer conjunto de zapatos, que son los zapatos Nike. No tiene que ser exactamente los mismos zapatos que seleccioné. Esto es sólo para la práctica. Así que adelante, agarra el zapato, agarra tu herramienta de movimiento y muévelo a su posición. También necesitamos una agarrada Michael Jordan. Entonces vamos a encontrarlo. Y llevémoslo a esta parte de la página Web también. Agarremos nuestra herramienta de texto y apaguemos nuestras guías. Y vamos a crear nuestro contenido para el lado izquierdo de nuestra sección de héroes. Y en todas las mayúsculas, vamos a corregir el nuevo enter para ponerle un J nueve en la segunda línea y hagamos nuestro texto negro. También quiero cambiar la fuente a Oswald Bold y vamos a aumentar el tamaño de la fuente a 100. Agarramos nuestra herramienta de movimiento y volvamos a nuestra zapatilla Nike para que podamos rotarla que nuestro nuevo texto encaje un poco mejor en esa zona. Voy a encender mis guías y luego a rotar los zapatos. Vamos a agarrar nuestra herramienta de rotación, que está aquí mismo, y tengo el atajo de teclado configurado para controlar o comando más T. Así que tu atajo de teclado, tal vez diferente, basado en si tú o no actualizado que en el inicio del curso. Una vez que tengas eso, sigue adelante y haz clic en los zapatos, y luego puedes teclear el ángulo que quieras, o puedes rotarlo manualmente haciendo clic en cualquier lugar del exterior y luego moviendo el ratón a la izquierda o a la derecha. Entonces sólo voy a moverlo a algo así alrededor de 32 o 34 para el ángulo. Al hacer clic, girar y luego con la herramienta de movimiento, puedo moverlo a la posición justo ahí. Es posible que tenga que cambiar eso una vez que consiga todo lo demás configurado. Entonces agarremos nuestro textil con la letra T. Seleccionemos todo porque lo que quiero hacer es que quiero reducir la cantidad de espacio entre estas dos líneas. Hay demasiado espacio. Entonces para reducir la cantidad de espacio entre las dos líneas, aquí podemos usar esta segunda opción, y queremos agregar un número negativo para reducir esa cantidad de espacio. Entonces voy a teclear en menos 40 y eso se ve mucho mejor ahora, ¿de acuerdo? Y agarremos nuestras herramientas de rectángulo para que primero podamos crear nuestro botón de compra. Vamos a seguir adelante y crear un nuevo antes. Llamémoslo por botón y sigamos adelante y enciendamos nuestras rejillas porque lo que quiero hacer es crear un botón de compra que tenga tres columnas de ancho. Y entonces vamos a agarrar nuestro cubo. Herramienta de relleno, elige un color para tu botón de compra y luego adelante y llénalo y de selecto. De acuerdo, voy a agarrar mi herramienta de zoom aquí para que pueda acercar un poco. Enciendamos nuestra guía para que podamos alinear todo. Sigamos adelante y movamos primero nuestro contenido, y en realidad tenemos que ponerlo un poco. Ese es Graham son por botón y mueven eso hacia arriba a la posición justo ahí. Ahora vamos a crear el texto para nuestro botón de compra. Volvamos a Blanco por el color del texto. Y vamos a hacer ya 75 por el tamaño del texto, y voy a ir a Usemos ferrocarril para el botón. Voy a utilizar Railway ultra bold. Es un poco demasiado grande, así que podemos usar nuestra herramienta de báscula para condensarla para que quepa dentro de la caja. Entonces con turno y s conseguiremos nuestra herramienta de escala. Apagemos el enlace para que solo podamos ajustar el con de nuestro contenido. Entonces sólo voy a hacer eso en, como, así que haga clic en escala. Está bien, sigamos adelante y alejémonos y arreglemos a Michael Jordan para que no sea tan grande como lo es ahora , Así que sigamos adelante y agarremos capa de deuda. De acuerdo, entonces vamos a agarrar nuestra herramienta de báscula y reducirlos. Entonces no es tan grande, probablemente demasiado pequeño. Entonces voy a ir un poco más grande aquí. Voy a encender mis guías porque quiero asegurarme de que su pie aquí mismo esté al borde de esa línea de rejilla. Vamos a escalarlo. Agarremos nuestra herramienta de movimiento y movamos el zapato un poco, y en realidad voy a agarrar este contenido aquí y hacerlo un poco más grande. Pero antes de que hagamos eso, sigamos adelante y creemos un nuevo grupo de capas. Llamémoslo contenido. Voy a poner nuestra información de botón por clavo ahí dentro así como nuestro contenido, y luego necesitamos cambiar el límite de capa para esta capa de grupo en particular subiendo a capa y seleccionando cultivo. El contenido puede. Volvamos a la herramienta de escala. Y aumentemos esto para llenar el espacio aquí. Haga clic en escala. Apagemos nuestras guías y sus rejillas. Está bien, eso se ve bastante bien. Adelante y terminemos de organizarnos aquí. Vamos a crear un nuevo grupo de capas. Voy a nombrarlo imágenes. Vamos a poner esos dentro, encontrar el zapato. Pongamos eso ahí también. Y luego un grupo de capas más para la sección de héroes. Entonces llamémoslo héroe. Tire hacia fuera. Vamos a poner nuestro contenido y nuestra imagen dentro de ahí. Y sólo sigamos adelante y movamos esto aquí también. Entonces lo otro que tenemos que hacer es lo que aún no hemos hecho es poner todas estas capas de grupo en su propia capa de grupo llamada Cabecera. Entonces sigamos adelante y hagamos eso también para que puedas ver poniendo todo en sus propias capas grupales. Ayudamos a organizar el panel de capas, por lo que es más fácil encontrar exactamente lo que necesitamos. Por lo que ahora tenemos nuestro encabezado en nuestro héroe en grupos separados, capas y nuestra sección de héroes ahora está hecha. Por lo que en el siguiente tutorial, vamos a empezar a trabajar en la sección de cuerpo de nuestra página web 26. Cuerpo: Hola y bienvenidos de nuevo. Muy bien, Entonces para esta parte de nuestro proyecto, vamos a empezar a trabajar en la sección de cuerpo de la página Web, y vamos a tomar este contenido existente y duplicado para que podamos ser consistentes lo largo de nuestro diseño, y hace que sea más fácil frente a reiniciar desde cero. Pero tenemos un pequeño problema, y es cuando volvemos a escalar este texto más grande. En la última lección, reformateó el texto de una capa vectorial a una capa gráfica, y se puede ver que el texto está borroso y no tan nítido como antes. Y si tomamos nuestra herramienta de texto y hacemos clic en ella, vamos a recibir un pequeño mensaje aquí preguntando si queremos seguir editando nuestro texto. Si hago clic en editar, va a cambiar el texto de nuevo al tamaño original que tenía antes de que se escalara hacia arriba. Y luego necesitamos seleccionar todo y cambiar el tamaño de ese texto para que se ajuste al tamaño que lo queremos. Y hagamos 130 por los pixeles. Y sigamos adelante y volvamos a subir este texto. Entonces justo sobre ahí debería ser bueno y sigamos adelante y hagamos lo mismo para este contenido aquí para el botón por clavo. Haga clic en él. Y entonces esta vez seleccionemos realmente Crear nueva capa y se va a llevar esa información y la pondremos en una nueva capa para nosotros. Entonces voy a poner esto justo aquí. Ahora renuncias. Echemos un vistazo a nuestras capas aquí y podemos ver que tenemos dos tipos diferentes de capas. Y hablamos de todos los diferentes tipos de capas al inicio del curso en la conferencia de capas, y hablamos de todos esos diferentes tipos de capas. Entonces esta capa aquí es una capa de texto, y sabemos que debido a que tiene este icono aquí como parte de esa capa, la capa la sopla, pesar de que contiene la misma información. Por ahora, no es realmente una capa de texto. Ahora es una capa de gráficos preocupación de píxeles capa, y se convirtió en una capa de píxeles cuando la volvemos a escalar. Por lo que hay que tener cuidado cuando estás volviendo a escalar tu texto porque va a cambiarlo de un vector a una capa de píxeles, y simplemente puedes cambiarlo de nuevo usando tu herramienta de texto. Entonces voy a seguir adelante y borrar esto ya. Capa aquí, la capa de píxeles porque no necesitamos eso. McGahan renombró esto eliminado número uno, y sólo tenemos que mover eso de nuevo a su posición. Está bien, vamos adelante y una línea nuestro texto directamente en el centro del botón a lo largo de los cuatro lados. Y para hacer eso, necesitamos primero tomar esto ya, capas y moverlo hasta arriba. Entonces está fuera de esa capa de grupo. De lo contrario no podremos seleccionarlo con nuestra herramienta de alineación. Ahora podemos agarrar esa herramienta de rectángulo para hacer la selección y la herramienta de alineación. Vamos a hacer clic en él y luego vamos a alinear centro y medio de objetivo. Está bien, escucha con el texto por clavo dentro de la capa de grupo. Vamos a cerrar esto. Seleccione el jugador de Grupo de Contacto y duplicar. Está bien, sigamos adelante y saquemos esto porque va a estar en una sección diferente, y ahora podemos agarrar eso con nuestra herramienta de movimiento y moverlo hacia abajo a su posición. Enciendamos nuestras guías para que podamos alinearla con el lado derecho aquí. Muy bien, encuentra tus sandalias Hurley. Adelante y encienda esa capa. Y encontremos también a nuestro surfista. Muy bien, vamos a poner nuestras sandalias en su lugar aquí. La sandalia se ve un poco demasiado pequeña de mí. Entonces voy a seguir adelante y volver a escalar eso con mi herramienta de escala, hacerlo un poco más grande y alinearlo al lado izquierdo de nuestra cuadrícula. Aquí, vamos a agarrar a nuestro surfista también. Voy a ponerlo en un lugar y volver a escala también. Entonces hagamos que parezca que ese surfista está surfeando por el costado de la sandalia aquí mismo . Se lo va a mover un poco dolorido justo por ahí es bueno. Y también quiero tomar este contenido y subirlo. En realidad, descubramos algún espacio entre la sección de héroes y nuestro contenido. Yo solo quiero cambiar este contenido por contenido y esa copia de contenido. Muy bien, vamos a Graham nuestra herramienta de medida. Y midamos 75 píxeles de la parte inferior de la sección de héroes para que podamos poner ese contenido en la parte inferior de esos 75 píxeles. Entonces vamos a dar clic en nuestra guía aquí, arrastrarla hacia abajo hasta que veamos 75 píxeles ahí abajo en la parte inferior izquierda de nuestra interfaz. Entonces ahí mismo, dice 75 cuando lo suelto, y luego felicito a un guía y lo arrastra hasta donde están esos cruces. Y entonces sé que están a 75 píxeles de la parte inferior de la sección de héroes. Adelante y agarremos la herramienta de movimiento. Y movamos nuestro contenido para que la primera línea esté ahí mismo en esa pauta particular que acabamos de crear. De acuerdo, vamos a alejarnos. Y creo que podemos subir nuestro Sando y nuestro surfista también. Creo que nuestro surfista sigue un poco demasiado alto. Entonces voy a agarrar la báscula para otra vez y sólo hacerlo un poco más pequeño. Muy bien, vamos a crear un nuevo grupo de capas para nuestras imágenes. Y luego sigamos adelante y los movamos hacia arriba con nuestra herramienta de movimiento. Está bien. Voy a bajar un poco más al surfista porque quiero asegurarme de que el codo no esté por encima de esa línea en particular ahí mismo. Está bien, eso se ve bastante bien. Voy a seguir adelante y poner otra guía al fondo de las sandalias, y luego voy a medir otros 75 píxeles. Por lo que tenemos una cantidad igual de espacio entre aquí y este zapato y el siguiente producto. Así que agarra de nuevo tu herramienta de medición y mide 75 píxeles y luego coloca a tu chico ahí . Y entonces es solo cuestión de repetir los pasos que acabamos de dar para esas sandalias y hacer lo mismo para los zapatos Converse también. Entonces vamos a seguir adelante y encender nuestro próximo a imágenes y crear un nuevo grupo de Lear para ellos llamado Imágenes número dos. Sólo voy a mover todo aquí un poco y otra vez nuestros patinadores un poco demasiado grandes. Entonces vamos a usar nuestra báscula para otra vez. Y hagamos que parezca que está patinando por la parte superior de estos zapatos de aquí. Por lo que justo ahí debería de ser bueno. En realidad quiero tomar ambas imágenes y moverlas hacia la derecha para que estén alineadas con el lado derecho de las rejillas. Muy bien, tomemos aquí nuestro contenido y lo duplicemos de nuevo, y sigamos adelante y movamos esto hacia abajo a la posición todo el camino hacia el lado izquierdo de esta cuadrícula. Y entonces necesitamos mover el texto para que se alinee con esa nueva guía que acabamos crear. Está bien, sigamos adelante y movamos nuestras imágenes hacia arriba sólo un poquito. De acuerdo, entonces ahora tenemos una cantidad igual de espacio entre cada uno de los productos, pero personalmente, creo que todavía está demasiado apretado. Entonces sigamos adelante y retrocedamos y sumamos otros 25 píxeles de espacio entre nuestro contenido. Entonces vamos a usar esa herramienta de medición otra vez y solo medir 25 píxeles y luego pongamos nuestra nueva guía ahí. Y entonces sólo necesitamos mover todo para alinearnos con esa guía, y necesitamos hacer lo mismo por esta. Pero esta vez vamos a mover a este tipo hasta el fondo de los zapatos. Por lo que necesitamos asegurarnos de que en dos opciones seleccionamos escoger una capa o guía para poder seleccionar esa guía para moverla. Y luego qué? El instrumento de medida. Voy a medir 100 píxeles, y en realidad voy a deshacerme de esta guía aquí ya no necesitamos esa. Y entonces solo necesitamos mover todo a su posición y asegurarnos de que vuelvas a mover el acto de capas. Podría mover todos los contenidos de la capa grupal. De acuerdo, vamos a agrupar estos en su propia capa agarrada. Por lo que nuevo grupo de capas otra vez. Vamos a llamarlo Hayley Sando. Entonces, contenido uno va dentro de aquí así como estas imágenes y luego un nuevo grupo de capas para éste llamado Converse. De acuerdo, voy a alejarme con mando o control NZ y esconder las guías. Ahora, creo que agregar que 25 píxeles extra definitivamente ayuda al diseño general. Por lo que no es tan apretado como antes. Una última cosa antes de seguir adelante, vamos a tomar nuestras sandalias y nuestros zapatos conversos y agruparlas en su propia capa grupal llamada body. De acuerdo, saquemos esto y luego pongamos las sandalias y los zapatos y ahí y ya está. Todos hemos terminado con el cuerpo. ¡ Impresionante! Está bien. Espero que estés disfrutando de esto. Por el momento, tenemos una sección más para este proyecto de diseño Web, y ese es el pie de página. Entonces si estás listo para empezar con eso, bueno, hagámoslo 27. Parte 1: Entonces sigamos adelante y copia de estas columnas y Adam a nuestro documento describió la herramienta de texto pegada en selecto All We're Gonna Do 14 puntos para el tamaño de fuente. Vamos a cambiarlo a Ferrocarril que seleccione ferrocarril Bold. Es temprano exactamente donde lo necesito, así que solo lo voy a dejar justo ahí ahora para las otras Bombas iban a dejar una columna de espacio entre ellos. Entonces sigamos adelante y copiemos el resto de la información. - Ahora lo único que quiero hacer es que quiero llevarme estos. El único que realmente debería ser negrita ID en estas dos columnas son los títulos. Entonces sigamos adelante y agarramos estas tres líneas y solo seleccionamos ferrocarril regular y luego lo mismo con estas cinco líneas. Vamos a seguir adelante y cambiar esto sólo por ferrocarril. Muy bien, tenemos una línea más de contenido que necesitamos copiar, y esa es la información de copyright. Hagamos cursiva mediana ferroviaria solo para mezclarlo un poco, y luego vamos a alinear esto por aquí al lado izquierdo. Vamos a alejarnos porque necesitamos crear una línea horizontal dos columnas y este contenido por aquí, vamos a agarrar nuestra herramienta de rectángulo. Y luego en cuanto al color, solo soy un poco más brillante que el fondo. Por lo que 34 34 34 se ve bien por ahora. Y entonces vamos bien ahora podemos seguir adelante y llenar eso. De acuerdo, Seleccionan. Ahí están mintiendo. Creo que podría ser un poco demasiado grueso con el así que voy a hacerlo. Entonces voy a agarrar mi herramienta de escala con Shift Plus s. el único problema es que el límite de capa necesita ser arreglado. Entonces salgamos de esa herramienta con la llave de escape. Asegúrate de que el contenido de la capa ahora. El único es, creo que esta línea es un poco demasiado gruesa, así que asegúrate y asegurémonos de seleccionar aquí nuestra capa adecuada. También quiero apagar mis guías y mi cuadrícula. Agarra tu herramienta de alineación. Haga clic en este contenido aquí está funcionando. Entonces vamos a mover esta capa todo el camino hasta la cima así y una línea en medio del objetivo algún momento. Bueno, entonces a veces gimp nos hará mover Lee, por lo que a veces podemos seleccionar esos elementos con nuestra herramienta de alineación donde están las capas. Pero a veces gimp no reconoce dónde estamos haciendo clic, por lo que necesitamos mover la capa a una nueva posición más como arriba del panel de capas por encima de todas las demás capas para que realmente puedas seleccionar. Es un poco difícil de leer. Así que empecemos con sobre Nike Graver Textual Selecciona todo con control Commander y a y luego recordemos en dos opciones. Podemos bajar aquí y aumentar la cantidad de con esta opción aquí mismo. Y esta vez vamos a aumentar la cantidad de espaciado. Entonces va a ser positivo. La última vez tuvimos que decir para estos también, Vale, voy a echar un vistazo a mis guías otra vez, y eso es y vamos a escoger una capa o guía porque quiero deshacerme de esta guía aquí . Adelante y pongamos estas columnas ahí, así que sigamos adelante y copia de estas columnas y Adam a nuestro documento que la herramienta de texto lo pegue, seleccione todo lo que vamos a hacer 14 puntos por el tamaño de fuente. Vamos a cambiarlo por ferrocarril. Eso es selecto ferroviario negrita y cambiemos el color de negro a blanco. Y vamos a seguir adelante y encender nuestra guía para que podamos seguir adelante y alinear esto correctamente. Parece que ya está exactamente donde lo necesito, así que solo lo voy a dejar ahí ahora mismo, las otras dos columnas iban a dejar una columna de espacio entre ellas, así que sigamos adelante y copiemos el resto de la información. Ahora lo único que realmente debería ser negrita ID en estas dos columnas son los títulos. Entonces sigamos adelante y agarramos estas tres líneas y solo seleccionamos ferrocarril regular y luego lo mismo con estas cinco líneas. Vamos a seguir adelante y cambiar esto sólo por ferrocarril. Muy bien, tenemos una línea más de contenido que necesitamos copiar, y esa es la información de copyright. Hagamos cursiva mediana ferroviaria solo para mezclarlo un poco, y luego vamos a alinear esto por aquí al lado izquierdo. Muy bien, vamos a alejarnos porque necesitamos crear una línea horizontal para crear un divisor o separación entre las tres columnas y este contenido de aquí. Agarremos nuestra herramienta de rectángulo para que podamos crear una forma y luego en cuanto al color, solo voy a ir un poco más brillante que el fondo. Por lo que 34 34 34 se ve bien por ahora. Y entonces vamos a llenar eso con nuestro filtro de cubeta voluntad. Pero primero, Antes de hacer eso, vamos a crear una nueva capa. Llamémoslo divisor. Está bien, Ahora podemos seguir adelante y llenar eso. De acuerdo, seleccionan. Está bien, creo que esta línea es un poco demasiado gruesa, así que vamos a acercar aquí y agarrar nuestras herramientas de escala para que podamos hacerla un poco más pequeña . Vamos a no ser así. Y cambiemos la altura también. Hagamos tres por la altura, y solo quiero bajarlo un poco. Entonces justo ahí debería ser bueno. Ahora solo necesitamos hacer nuestra alineación de todas nuestras columnas y nuestro contenido aquí abajo. Entonces tomemos nuestra herramienta de rectángulo con la letra M, y vamos a espaciar este contenido entre el divisor y la parte inferior del pie de página, y vamos a asegurarnos de que aquí seleccionamos nuestra capa adecuada. También quiero apagar mis guías y mi cuadrícula. Agarra tu herramienta de alineación Haz clic en este contenido aquí no parece que esté funcionando, así que movamos esta capa hasta la parte superior. Está bien. Ahora podemos seleccionarlo y una línea media de objetivo. Por lo que a veces podemos seleccionar esos elementos con nuestra herramienta de alineación donde están las capas. Pero a veces gimp no reconoce dónde estamos haciendo clic, por lo que necesitamos mover la capa a una nueva posición en la parte superior del panel de capas por encima todas las demás capas, para que en realidad puedas seleccionarla con la herramienta de alineación. De acuerdo, vamos de seleccionar. Y luego vamos a tomar nuestras tres columnas aquí y alinearlas a la parte superior. Entonces, volvamos a agregar nuestras pautas, y luego sólo necesitamos mover cada columna a esa pauta. No importa dónde esté esa pauta, porque los vamos a alinear desde la parte superior del pie de página y el divisor en tan solo un segundo. Ahora, antes de que hagamos nuestra alineación, solo quiero agregar algún espacio adicional entre las líneas porque ahora está demasiado apretado y es un poco difícil de leer. Así que empecemos con sobre Nike graver textual Selecciona todo con Commander Control y a y luego recordemos en dos opciones, podemos bajar aquí y aumentar la cantidad de espaciado entre las líneas con esta opción aquí mismo. Y esta vez vamos a aumentar la cantidad de espaciado. Entonces va a ser positivo. La última vez tuvimos que reducirlo y fue negativo. Entonces vamos a hacer siete. Y luego vamos a hacer lo mismo por estos también. De acuerdo, voy a echar un vistazo a mis guías otra vez. Y vamos a escoger una capa o guía porque quiero deshacerme de esta guía aquí. Vamos a seguir adelante y poner estas columnas en su propia capa de grupo, haga clic derecho y seleccione Nuevo grupo de capas. Yo lo voy a nombrar. Tres columnas. Está bien. Ahora podemos agarrar esta capa grupal y una línea hacia el centro de la parte superior y la inferior justo aquí. Entonces, ¿qué? Son herramienta de rectángulo. Podríamos seguir adelante y hacer nuestra herramienta de alineación de selección, clic en una de las columnas, y de nuevo, no nos está dejando seleccionarla. Entonces vamos a mover a este jugador de grupo todo el camino hasta la cima, y vamos a intentar volver a hacer clic en él. Esta vez nos deja seleccionarlo y luego podemos alinear medio del objetivo. Entonces ahora tenemos igual cantidad de espacio entre aquí y aquí. Que de selecto con Commander Control y D y vamos a seguir adelante y mover esto de nuevo hacia abajo. Por lo que necesitamos crear un nuevo grupo más adelante para el pie de página para toda esta información. Pero tenemos algún contenido adicional que necesitamos agregar a nuestro otro lado de su pie de página aquí a la derecha, que va a incluir nuestros iconos de redes sociales. Pero vamos a cubrir eso en el siguiente tutorial. Entonces si estás listo para hacer todo eso, hagámoslo. 28. Parte 2: nuestro material final para este proyecto en particular es agregar algunos iconos de redes sociales. Pero antes de que hagamos eso, quiero compartir con ustedes algo de lo que tal vez nunca hayan oído hablar antes porque nadie está hablando de esto, y eso es infracción de derechos de autor a logotipos de redes sociales. Ahora, ¿de qué estoy hablando exactamente? Bueno, volvamos a echar un vistazo a la página web de Nike y echarle un vistazo a su pie o aquí, y podrás ver los iconos sociales que tienen aquí para Twitter, Facebook, YouTube e Instagram. Y cada uno de estos logotipos se colocan dentro de un círculo, y al pasar el cursor sobre ellos, verás el estado flotante, que resulta ser blanco. Bueno, ¿ adivina qué? Se trata de una infracción de derechos de autor en estos logotipos particulares. Otra vez, eres como, ¿De qué estoy hablando? Bueno, vamos a averiguar el uso adecuado del Logo's de Social Media para que no infrinjas a estas empresas. Derechos de autor. Entonces hagamos una búsqueda del logo de Facebook. No vamos a hacer imágenes porque estas airean todas las infracciones, excepto tal vez un par de ellas, vamos a desplazarnos hacia abajo y seleccionar activos. Por lo que Facebook, Twitter, instagram y todas las demás plataformas de redes sociales tienen un recurso en su página web que se ve algo así que explica cómo se supone que debes usar su logotipo en tu sitio web. Entonces si nos desplazamos por aquí, podemos ver los logotipos y las insignias que te proveen directamente desde Facebook que puedes usar en tu sitio web. Y si te desplazas hacia abajo, también vas a ver algunos otros artículos, explicando cómo puedes usar su logotipo sin infringir sus derechos de autor. Ahora bien, si quieres usar este icono del logotipo en particular, si haces clic en él, terminarás yendo a otra página. Y luego puedes descargar este logotipo en particular para utilizarlo en tu página web por lo que tienes que elegir bien de tus medios. Se tienen diferentes requisitos para impresiones y empaques en línea, TV y película. Ahora ni siquiera puedes usar estos en televisión y cine sin obtener primero el permiso escrito de Facebook. Pero como estamos trabajando en línea, echemos un vistazo a las pautas y sigamos adelante y desplázate hacia abajo y miremos esas para que no puedas darle estilo a los ojos su logotipo. No se puede deformar ni modificar su color ni la forma. Todo eso no está permitido, y dice si no puedes usar el color correcto debido a limitaciones técnicas. Bueno, entonces puedes convertirlo a blanco y negro, y dice aquí mismo no utilices ningún ícono o imágenes para representar a Facebook que no sea lo que se encuentra en este sitio. Por lo que aquí a la izquierda, no permitido a la derecha permitido. Entonces si no haces lo que dice Facebook puedes hacer con el logo, entonces estás violando la ley. Estás infringiendo su copia, ¿verdad? Y legalmente pueden venir tras de ti o de la empresa para la que estás trabajando por infringir ese copyright. Ahora, ¿eso significa que en realidad van a ir a buscar daños por los millones y millones de sitios web que están usando sus logotipos y correctamente? Lo dudo, pero eso no significa que no tengan derecho a hacerlo. Y creo que en este punto del tiempo, se ha vuelto aceptable reutilizar esos logotipos con diferentes colores y formas diferentes y lo que tienes tú. Pero de nuevo, todavía hay una posibilidad de que Facebook pueda venir tras el dueño del sitio web, ya sea Nike o pequeña mamá y pop shop y decir que estás infringiendo mis derechos de autor, o cambiarlo o vendremos tras de ti por daños. Ahora de nuevo, no creo que vayan a ir tras las pequeñas tiendas de mamá y pop, pero tal vez una marca como Nike. Podrían ir tras una empresa así. Es una empresa de $1,000.000.000, y estoy bastante seguro de que Nike no estaría feliz si tomaras su logo y empezaras a cambiarlo y cambiarlo y deformarlo y peinarlo de diferentes maneras para promocionar algo en tu página web por lo que de nuevo sería una infracción al logotipo de Nikes. Pero por alguna razón, está bien para los iconos de redes sociales y logotipos de redes sociales, así que eso es solo algo de información que pensé que compartiría contigo. Pero lo que vamos a hacer por este proyecto de diseño web es que vamos a seguir adelante e infringir sus derechos de autor porque vamos a tomar sus logotipos y vamos a ponerlos dentro un círculo, y vamos a cambiarlos un poco poco. No mucho, pero es solo para la práctica para que puedas aprender a crear estas diferentes formas y gimp y toe aprender algunas de las otras herramientas que tenemos un gimp para hacer cosas diferentes. Entonces lo que vamos a hacer es seguir adelante y descargar. El recurso es directamente de Facebook e Instagram y Twitter y Pinterest o cualquier plataforma de redes sociales que quieras. Basta con descargar cuatro logotipos de cada uno de sus sitios. Simplemente haz una búsqueda en Google de los activos de Facebook. Twitter activos cosas así, y encontrarás cada una de esas empresas tendrá un lugar donde podrás descargar sus logotipos para usarlos en sitios web. Por lo que te van a dar algunos colores diferentes, el color original, y luego deberían tener algunos colores para blanco y negro también. Entonces sigamos adelante y descarguemos todo en blanco, para que todo eso sea consistente. Y luego vamos a seguir adelante y a partir de ahí hasta el tamaño. Encuentra algo alrededor de 50 a 60 píxeles porque vamos a seguir adelante y reducir el tamaño de ellos de todos modos. Pero empecemos con un icono de logotipo de bastante alta calidad, porque si vamos con algo más pequeño como unos 15 o 20 píxeles y necesitamos hacerlo más grande, se va a pixelar. Entonces, empecemos con algo alrededor de 50 a 60. ¿ De acuerdo? Entonces una vez que tengas todos los descargados adelante y agrégalos a tu documento. Simplemente puedes arrastrarlos y soltarlos en el documento, luego crear una nueva capa para cada una. De acuerdo, ahora tengo todos mis logotipos en mi documento, y lo he puesto en este orden Facebook, Instagram, Pinterest y Twitter. Se puede hacer el mismo o un orden diferente. Depende enteramente de ti. Realmente no importa. Otra cosa que he hecho es que he activado mi límite de capa show porque quiero mostrarte algunas cosas con nuestra herramienta de alineación. Cuando vamos a una línea, cada uno de los logotipos. Y si hizo el ejercicio de alineación al inicio del curso, entonces ya estás familiarizado con lo que vamos a cubrir cuando lleguemos al punto que necesitamos alinear nuestros logotipos y son elementos. Pero por ahora, lo que tenemos que hacer es cambiar el tamaño de todo para que ahora sean todos de la misma altura , dependiendo del logo que hayas descargado, pueden ser más pequeños que lo que tengo, que es bien. Vamos a redimensionar todos los logotipos a una altura de 30. Entonces vamos a Graham, nuestra herramienta de escala, y voy a empezar con mi primera capa aquí, y soy un nuevo 30 para la altura, y entonces sólo voy a seguir con las otras también. Ahora, antes de que haga el logotipo de Twitter, hay una cosa que tenemos que hacer, y papá se le quita este fondo grisáceo que tenemos en el logo en este momento porque podemos ver que el límite de la capa está alrededor de eso fondo y no el propio logotipo. Quiero el límite de capa alrededor del logotipo para que podamos redimensionarlo para que sea la misma altura de todos los demás logotipos. De lo contrario, el pájaro de Twitter va a ser mucho más pequeño. Entonces vamos a agarrar nuestra herramienta de selección difusa. Y luego en las opciones de herramientas solo establecer el umbral para alrededor de 2018 a 20 está bien. Seleccione el fondo y luego presione delete o la tecla de retroceso para deshacerse de ese fondo. Entonces vamos a de select, y luego podemos seguir adelante y subir a capa y seleccionar contenido recortado, y ahora son capa. Límite es donde debe estar, así que vamos a seguir adelante y volver a escalarlo a 30 para la altura y vamos a seguir adelante y mover todo poco va hacia abajo en su lugar por aquí. Ahora no puedo ver a un par de ellos porque son blancos puros. En realidad, aquí está el de Facebook de aquí, pero eso está bien, porque Pero eso está bien, porque desde que he movido al líder activo, solo puedo hacer clic en cualquier parte de mi documento y se moverá eso capa para mí. Entonces solo voy a hacer de ese el 1er 1 Vamos a agarrar Instagram. Eso va a ser segundo. Tenemos a Pinterest aquí en alguna parte, y voy a hacer ese tercero. De acuerdo, vamos a agarrar nuestro instagram porque si el tuyo es negro como el mío, necesitamos cambiarlo a blanco. Y lo podemos hacer subiendo a colores seleccionando aumento de color y luego dar clic en esta barra de color aquí y seleccionar blanco. Entonces eso lo va a cambiar dedo blanco para nosotros. Muy bien, Siguiente, necesitamos crear algunos círculos para que los logotipos entren dentro de, así que vamos a agarrar nuestra herramienta Elipse en el panel Herramientas. Queremos tener seleccionada la relación de aspecto fija, y solo iban a hacer clic y arrastrar hacia fuera una forma y hagámosla 50 por el ancho y la altura. También vamos a crear una nueva capa llamada Circle. Vamos a llamarlo logo Círculo con un relleno con transparencia Nuevamente, click. Está bien. Y luego cambiemos nuestro color a este número. Aquí mismo. 333333 Click. Ok, y luego vamos a agarrar nuestra herramienta de llenado de cubeta para llenar ese color en de select, y luego tenemos nuestra primera forma. ¿ De acuerdo? Con mi herramienta de movimiento. Voy a mover esto. Y lo otro que necesito hacer es cambiar el límite de capa por ello porque es demasiado grande. Y eso es importante porque vamos a una mentira todos nuestros círculos de manera uniforme, arriba a abajo y distribuir e incluso cantidad de espacio entre ellos. Y tenemos que subir a la capa de cultivo al contenido con el fin de ayudar a que ese proceso sea más fácil. De acuerdo, voy a poner esos círculos justo debajo del logotipo de Facebook, y luego voy a duplicar ese círculo. Vamos a moverlo a Instagram, y luego moverlo debajo de ese logotipo. Entonces repitamos eso para cada uno. Está bien. Voy a moverme con este círculo aquí abajo y lejos. Para que pueda mostrarles lo fácil que es alinear estos círculos a la parte superior y distribuir una cantidad pareja de espacio entre todos ellos. Ahora, como usted puede o no saber, podemos seleccionar más de una capa en el panel de capas. Pero por suerte, con nuestra herramienta de alineación, podemos seleccionar múltiples capas y luego usar las opciones de las opciones de la herramienta para alinear todo rápidamente . Entonces voy a dar click en el primer círculo, y podemos ver esos cuatro cuadrados mostrando que esta capa en particular ha sido seleccionada para ser alineada. Ahora bien, si quiero seleccionar los otros círculos, si hago clic en ellos, se deshace de las otras selecciones. Entonces lo que tenemos que hacer para seleccionar todos ellos es mantener nuestra tecla de show y luego dar click en el siguiente círculo. Ahora, mientras mantengo presionada mi tecla de mayúsculas, puedo hacer clic en el siguiente círculo para seleccionarlo, y luego sigo manteniendo presionada mi tecla de mayúsculas, lo que aún me permite seleccionar el 4to 1 El problema es, los otros tres fueron de seleccionados, por lo que es una especie de bug. Creo que si mantienes presionada esa tecla de turno ya que estás seleccionando diferentes capas, a veces funcionará y te permitirá seleccionar todas las capas. Pero a veces no lo hace, y de seleccionarlos. Entonces aquí está el arreglo. Vamos a seleccionar el 1er 1 sosteniendo en tu tecla de turno. Haga clic en él. Suelte la tecla de turno. Vuelva a mantener pulsada la tecla Mayús. Haga clic en él. Suelta de nuevo la tecla de turno y lo adivinaste. Presione nuevamente la tecla Mayús y luego haga clic en la última capa. Por lo que eso te permitirá seleccionar continuamente tantas capas como quieras. A lo mejor tienes 67 10 12 capas. Entonces esa es una forma de permitirte seleccionar todas las capas. Muy bien, ahora que tenemos todas las capas seleccionadas con nuestra herramienta de alineación, quiero alinearlas para que estén todas igualadas en la parte superior. Por lo que vamos a ir a opciones de herramientas y seleccionar relativo al primer elemento. Por lo que este sería el primer elemento. Por lo que queremos alinearlos al borde del objetivo. Y no tenemos llave de ropa, así que eso va a estar en la parte superior. Ahora quiero añadir una cantidad pareja de espacio entre todos los círculos aquí mismo. Tenemos un espacio enorme. Entonces, ¿cómo hacemos eso? Por lo que aún tenemos relativo al primer ítem seleccionado. Vamos a bajar a las otras opciones aquí que dicen distribuir para que podamos dar click en este ítem aquí mismo, Distribuir centros horizontales de objetivo y obtenemos una cantidad pareja de espacio. También puedes cambiar el desplazamiento a cualquier número que quieras. Entonces si cambio esto a cinco en lugar de 90 y luego hago clic en él, comienza a solaparse de círculos. Por lo que hay que encontrar un medio feliz y encontrar la cantidad de espacio que desea entre los círculos escribiendo un número para el offset X, que es horizontal. Si tienes un conjunto vertical de capas, entonces vas a hacer offset. ¿ Por qué? Entonces ahora voy a hacer 75 luego agrega una cantidad par de 75 píxeles entre cada capa para que pueda seguir añadiendo diferentes números para obtener resultados diferentes. Entonces ahora mismo tenemos 200 que en realidad no están funcionando porque va fuera del documento por aquí a la derecha. Entonces voy a deshacer eso con Comandante Control en la letra Z y vamos a hacer 75 por clavo. Y tenemos todo perfectamente alineado. Muy bien, Ahora vamos a colocar nuestros logotipos dentro de los círculos en línea ellos, y vamos a estar todos listos. Entonces voy a seleccionar escoger una capa o guía en mis dos opciones para que simplemente pueda agarrar ese logotipo y ponerlo en su lugar frente a venir aquí y seleccionar la capa en el panel de capas. Muy bien, subamos a nuestro primer círculo de logotipos. Vamos a elegir son difusos, Seleccionar herramienta, y vamos a dar click en el interior de la misma. Y luego vamos a agarrar nuestro logotipo de Facebook, nuestra herramienta de alineación. Vamos a hacer clic en ese logotipo, y luego lo vamos a alinear al centro en medio del objetivo. Pero primero, necesitamos cambiar respecto a dos selección, ya que estamos alineando B de la selección. De acuerdo, entonces vamos a hacer lo mismo por los demás. Vamos a agarrar el círculo, la herramienta difusa, seleccionar. Se puede utilizar el atajo de teclado. Tengo w para el atajo de teclado para mí. Voy a hacer mi selección. Entonces, al igual que la herramienta de alineación. Selecciona el logotipo y luego una mentira a esa selección. Entonces sigamos adelante y terminemos eso también para los otros. Adelante y organicemos todo. Vamos a crear una nueva capa haciendo clic derecho en grupo nuclear. Voy a nombrar a este Facebook. Nos vamos, y luego voy a crear un nuevo grupo de capas para cada uno de los logotipos. - Está bien, sigamos adelante y creemos una capa de grupo para nuestro pie de página también. Ponga todo dentro de ahí que pertenezca dentro. Y otra vez. Simplemente estamos organizando todo para que sea más fácil encontrar lo que necesitamos. Parece que tengo una capa extra aquí, así que voy a seguir adelante y borrar eso. Sólo voy a ordenar algunas de mis capas aquí. Creo que tenemos que alinearnos. Son iconos sociales también. Voy a seguir adelante y encender mis guías y pasar eso. Yo quiero ponerlo aquí mismo. De acuerdo, apaguemos las guías y lo que vamos a hacer es alinear nuestros logotipos a la parte superior de sus columnas también. Entonces tomemos nuestra herramienta de alineación. Seleccionemos el primer elemento. De acuerdo, intentemos seleccionar esa capa de grupo. No es seleccionarlo. Entonces vamos a movernos. Las tres columnas e iconos sociales fuera de esa capa de grupo. A ver si podemos seleccionarlo ahora. Todavía no funciona. Subiremos a la cima. Aquí vamos. Entonces tengo eso seleccionado. Ahora quiero mantener presionada mi tecla de turno y hacer clic en los logotipos y luego usar relativo al primer elemento y una línea a la parte superior volvió a encender las guías. Todo parece alineado. Todo está alineado a lo largo del resto de la página web, y creo que todos estamos hechos. Vamos a seguir adelante y poner estos de nuevo dentro del pie de página. Enhorabuena son odio. Creo que finalmente terminamos con nuestro primer proyecto de diseño Web, y si seguiste y creaste este sitio web como estabas viendo los tutoriales, entonces ya estás todo listo. Si no, ahora es el momento de pasar por este proyecto y rehacer este proyecto tú mismo para que puedas acostumbrarte a usar las herramientas y gimp y meterte en el hábito de alinear las cosas y reforzar adecuadamente todo lo que tienes aprendido Ahora. Una vez que hayas terminado con eso, por créditos extra de bonos, puedes tomar lo que has aprendido y aplicarlo con tu visión creativa para crear tu propio rediseño de esta página Web. Entonces, ¿qué puedes hacer para hacer esto? ¿ En qué página? Mejor para el usuario y el diseño general del propio sitio. Probablemente seas mejor diseñador que yo, y probablemente podrías llegar a algo. Ah, mucho mejor y tal vez más creativo de lo que me he ocurrido. Entonces lo que sea que creas, puedes entonces usar eso para tu portafolio y comenzar a promocionar tus servicios. Como diseñador Web, tienes que tener un portafolio para mostrar a la gente lo que puedes hacer. Por lo que recomiendo encarecidamente tomar lo que aprendiste en crear tu propio diseño. No puedes usar este porque es mi diseño. Yo soy dueño de los derechos de autor, así que crea tu propio diseño y empieza a crear tu portafolio. Y si quisieras, me encantaría ver tu visión creativa final y ver tu página web. Entonces si quieres compartir eso con la comunidad, adelante y publíquelo en la sección Q y A y avísame si quieres algún comentario, y estaría encantado de proporcionar cualquier retroalimentación sobre lo que creo que puedes hacer para mejorarlo. O tal vez sea perfecto de la forma en que es. Entonces eso depende enteramente de ti. Si ya hiciste bien ambos, entonces estás listo para trabajar en el segundo proyecto. Entonces en el segundo proyecto, vamos a aprender Ah, mucho más sobre conceptos e ideas de diseño. Y vamos a seguir reforzando lo que hemos aprendido sobre las herramientas y gimp y posiblemente aprender nuevas herramientas en el proceso. Entonces si estás listo para empezar, el siguiente proyecto llevó a hacerlo. 29. Proyecto 2: resencia de capital de manhatten: Hola y bienvenidos de nuevo. Muy bien, vamos a trabajar en nuestro segundo proyecto de diseño Web, esta vez para esta empresa en particular llamada Manhattan Bridge Capital. Ahora, a diferencia de Nike que ya tiene un estilo bien definido, limpio , minimalista, este sitio o empresa en particular, realmente no tiene una marca fuerte. El diseño o disposición general del sitio web no está limpio. Está anticuado. Tiene gráficos e imágenes de mala calidad y necesita mucha ayuda. A pesar de que este sitio web tiene un copyright de 2018 no parece que este sitio haya sido actualizado con un nuevo diseño fresco en 20 años. Este fondo Grady int detrás de la navegación y a lo largo de los bordes y en el Footer es una reminiscencia de sitios web que salieron a escena hace 20 años. Y está extremadamente anticuado. No sólo eso, es muy difícil leer lo que se está colocando en esta página en particular, y el diseño del contenido se dispersa por todas partes, y no estamos muy seguros por dónde empezar. Nuestros ojos rebotan alrededor de un elemento a otro, y en general el sitio no se ve muy profesional. Esta empresa en particular otorga préstamos a inversionistas del área de la ciudad de Nueva York y por la falta de profesionalismo de su página web. Creo que en general eso va a obstaculizar su efectividad y conseguir nuevos clientes, no sólo por los elementos anticuados y el no profesionalismo. Es muy difícil leer este contenido. Tenemos rojo brillante para nuestro titular y luego el estilo y el texto elegido para ese contenido es muy pequeño y difícil de leer. Entonces una de las primeras cosas que me gustaría hacer por esta empresa en particular es actualizar su logotipo. Está anticuado y en general sí parece que se utilizó un gráfico y texto de baja calidad, así que me gustaría usar algo con un rez más alto, gráfico y mejor texto. Por lo que no se ve tan pixelado como ahora. Y este fondo en el encabezado aquí mismo no es necesario y no agrega ningún valor al sitio web en general. Las imágenes así en todo el sitio web no son muy buenas y me gustaría actualizar las imágenes también para contar una mejor historia de lo que hace esta empresa y por qué querrías hacer negocios con ellos o realmente conseguir solo a través de ellas. Hay otras cosas que podemos hacer para aumentar la posibilidad de que los inversionistas quieran hacer negocios con ellos para obtener su préstamo a través de esta empresa en particular versus a través de otras fuentes, como una cooperativas de ahorro y crédito o un banco de estilo tradicional. Tampoco hay incentivo riel para que alguien quiera contactar con esta empresa. Sí, tenemos su información de contacto, pero ¿por qué debemos ponernos en contacto con ellos? Qué hay en él para mí cuando estoy diseñando un sitio web, quiero ponerme en los zapatos de los visitantes, y lo primero que un visitante quiere saber cuando van a un sitio web es por qué, qué quiero hacer negocios contigo. ¿ Qué hay en él para mí? ¿ Qué voy a conseguir si decido hacer negocios contigo? Entonces ahí entra en juego la llamada acción en la sección de héroes. ¿ Qué es lo que les vas a ofrecer que no pueden rechazar? Porque es tan impresionante. Tienen que tener eso ahora mismo, y te van a dar información, su nombre, su número de teléfono, su correo electrónico lo haría o cualquier información que quieras A cambio de algo que eres les va a dar. Tienes que empezar esa relación con ese cliente dándoles algo. No siempre tiene que funcionar de esa manera, pero creo que en la mayoría de los casos hay que empezar a construir esa relación desde el principio. De lo contrario, van a navegar hacia atrás y buscar otra empresa con la que lidiar, porque probablemente estén apagadas por el diseño. A lo mejor no están pensando que todo este diseño es horrible. No estoy haciendo negocios con ellos. En cambio, están pensando, mientras esta empresa no parece que les importe su imagen y este lugar se ve poco profesional y mi trato con un prestamo, o estoy lidiando con un financiero profesional institución porque quieren saber que están tratando con alguien que no va a venir tras ellos y romperse la pierna o quitarse la vida porque no pagaron el préstamo? Sí, probablemente se vayan a llevar tu propiedad, pero esto se parece más a un tipo de empresa de tiburón prestamo, al menos a mí, porque en general simplemente no se ve profesional. Nada en contra de los tiburones prestamistas. Entonces si estás escuchando, no me refiero a nada malo. Solo necesitas idear algo un poco más profesional para que puedas asegurarte de que consigues que los prospectos de MAWR se pongan en contacto contigo para tus servicios particulares. Entonces hay cosas que podemos hacer para asegurarnos de que podamos obtener su información antes de que salgan del sitio web, y además queremos que sea un poco más fácil para ellos ponerse en contacto con nosotros y encontrar más información sobre nosotros. A lo mejor quieren visitar nuestra institución antes de decidir ponerse solos a través de ti. Que, por supuesto, esos son probablemente los pasos. Tienes que tener una consulta. Descubre qué tipo de propiedad quiere este inversor potencial, y tienes que pasar por algunos pasos diferentes. Bueno, ¿por qué no proporcionarles una forma para que visiten sus oficinas, aunque solo tomes citas? Onley Si una persona está dispuesta a tomarse el tiempo para venir a su oficina, para visitar, averiguar más información y para concertar una cita, eso en sí mismo es un cliente mucho más fuerte frente a alguien que solo llama. Por lo que hay un montón de pequeñas cosas que podemos hacer para este diseño de sitio web en particular para asegurar que demos a nuestros prospectos todas las oportunidades de hacer una cita con nosotros o conocernos en persona con el fin de conseguir su negocio. Entonces el diseño que se me ocurrió está aquí mismo, y tengo mi llamada acción y tengo mejores imágenes que relacionan a Mawr con su potencial . Inversores versus sólo un simple apretón de manos también han incluido algunos artículos adicionales y algún contenido adicional que la empresa puede utilizar para vender sus servicios. ¿ Por qué Manhattan Bridge Capital? ¿ Por qué deberías hacer negocios con nosotros? Bueno, aquí están todas las razones por las que deberías hacer negocios con nosotros. También he incluido alguna información adicional, como preguntas frecuentes que pueden querer hacer al momento de la consulta. Démosles parte de esa información ahora antes de que se pongan en contacto con nosotros. Y luego diseñé una sección connect con múltiples formas de contactar a la empresa así como un mapa construido en donde se pueden obtener indicaciones directamente a su oficina. A lo mejor estás en los alrededores, y querías parar y saludar. Preséntate, etcétera. Entonces quiero hacer. Es lo más fácil posible para los clientes potenciales hacer negocios con Manhattan Bridge Capital en su sitio web particular. Todo se agrupa por aquí a la izquierda. Ni siquiera tienen una dirección de correo electrónico. Sí, tienen su dirección aquí para que pudiera tomar esa información y dejarla caer en Google maps o algo así, o puedo hacerlo directamente desde aquí. Por lo que estamos haciendo lo más fácil posible para los clientes obtener la información que quieren frente a tratar de hacerlo fuera del sitio web y luego en el área de Footer. Tengo nuestros enlaces sociales, enlaces adicionales aquí abajo en la parte inferior información de copyright. Pero también he limpiado el diseño general. Entonces es más limpio. Eso es amore, estilo de tipo minimalista, más limpiador moderno. Y todos esos diferentes elementos hacen para un sitio mucho más limpio y fácil de navegar y leer. Entonces esa es nuestra reunión informativa sobre nuestro próximo proyecto de diseño Web. Vamos a seguir adelante y empezar con nuestro rediseño de logotipo en la siguiente lección. 30. Rediseño de logotipos: Hola y bienvenidos de nuevo. Muy bien, entonces cuando estás cotizando y trabajando para un proyecto de diseño Web, tienes una oportunidad dorada con el dedo del pie arriba. Venda sus servicios para incluir otros servicios de diseño gráfico, y creo que en este caso podrían usar nueva marca y un logotipo. Por lo que solo necesitarás comunicar por qué crees que se pueden beneficiar de un nuevo logotipo. Y entonces también puedes incluir eso en tu precio, pero mantenerlo separado del propio proyecto de diseño Web. Ahora que dicho eso, este curso en particular no se trata de un bajo buen diseño en y por sí mismo. No vamos a entrar en mucho detalle sobre cómo diseñar logotipos. Simplemente vamos a crear algo realmente simple y básico como yo creé aquí. E incluso entonces, sigo encontrando que esto es 10 veces mejor que lo que actualmente tienen ahora. Entonces sigamos adelante y trabajemos primero en el logotipo, y luego trabajaremos en el encabezado del diseño Web. Entonces primero, adelante y agarra tu archivo maestro de diseño de cuadrícula, y luego vamos a seguir adelante y crear un nuevo documento para el logotipo. Hagamos 3 25 por 1 25 y luego en opciones avanzadas. Queremos llenar de transparencia. Adelante y haga clic. OK, ahora, vamos a seguir adelante y agarrar nuestra herramienta de texto. Y en todas las capitales, voy a hacer Manhattan por el color verde. Simplemente voy a elegir un bonito color verde oscuro. Cualquier color está bien y de tamaño va a hacer 60. Y luego Oswald, audaz y de nuevo, puedes usar cualquier diversión que quieras. Voy a mover mi logo, aparecer en la parte superior con la herramienta de movimiento y luego, con el rectángulo seleccionable, voy a hacer una selección. Voy a seleccionar mi herramienta de alineación, Haga clic en ella y luego una línea al centro. Vamos a seguir adelante y hacer la selección. Muy bien, ahora que está en el centro, vamos a seguir adelante y de seleccionar y agarrar de nuevo nuestra herramienta de texto. Esta vez se debió. Puente Capital Seleccionar todos. Y luego hagamos 30 por el tamaño. Vamos a hacer la misma fuente. No hagamos tazón. Hagámoslo regular. Y creo que también quiero dejar caer la opacidad para esta capa también. Voy a hacer alrededor de 50. Está bien, vamos a agarrar nuestra herramienta de movimiento. Entonces podemos subirlo aquí ahora. Lo que quiero hacer es que quiero estirar capital puente por lo que es la misma longitud que Manhattan . Ahora podríamos usar la herramienta de escala para hacer eso, pero va a distorsionar un poco las letras, y lo va a convertir en una capa de píxeles. Y no quiero hacer eso porque quizá quiera cambiar algo más adelante. Entonces, en cambio, vamos a volver a nuestra herramienta de texto otra vez con la letra T seleccionar todo y luego en las opciones de la herramienta. Tenemos una opción aquí abajo para aumentar la cantidad de espacio entre cada letra. Entonces sigamos adelante y aumentarlo hasta que sea la misma longitud que Man Han. Entonces más ocho se ve bastante cerca. Vamos a seguir adelante y agarrar de nuevo nuestra herramienta de selección de rectángulos y alinéela al centro. De acuerdo, de selecto. Agarremos nuestra capa de fondo, presione la letra D y luego asegurémonos de que el blanco esté establecido en el cuatro gramo y luego vamos a agregar ese color a la capa de fondo y eso es todo. Nuestro logotipo ya está hecho, así que sigamos adelante y organicemos nuestras capas agregándolas a un nuevo grupo anterior. Voy a llamarlo logo y sigamos adelante y guardemos esto con Commander Control y la letra s. solo voy a llamarlo logo y asegurarme de que tengas X CF para la extensión para que se guarden todas las capas. Y esto nos facilitará hacer cambios en el futuro si a nuestro cliente le gusta el logotipo, pero tal vez quieran hacer un cambio o dos. Ahora puedes acceder fácilmente a las capas de forma individual porque lo guardaste como un archivo ex CF. Muy bien, vamos a seguir adelante y Graham nuestra capa de logotipo aquí, haga clic y arrástrela a su cuadrícula y suelte. Entonces esa es una gran manera de agregar otro documento o capas de archivos a un nuevo documento. Simplemente lo voy a colocar aquí arriba en la parte superior, y nuestro logo está todo hecho mayor odio. Entonces en la siguiente lección, vamos a seguir adelante y agregar el encabezado a nuestra página Web. 31. Encabezado: bien, vamos a seguir adelante y terminar la parte de encabezado de nuestro diseño de página Web porque técnicamente, nuestro logotipo es parte del encabezado. Entonces lo primero que quiero hacer es un letrero, cierta cantidad de espacio entre la parte superior de la página y la parte superior del logo. Entonces sigamos adelante y enciendamos a nuestros guías. Y dependiendo del diseño y los elementos gráficos, voy a agregar en cualquier lugar de 20 a 50 píxeles de espacio entre el logotipo y la parte superior de la página Web. Pero de nuevo, podría cambiar en base al diseño. Entonces si haces clic y arrastras hacia fuera como recuerdes, podemos ver cuántos píxeles estaban agregando esa pauta a Basado en la información que se muestra aquí abajo, va a decir Agregar Guía, y voy a tirar eso hacia abajo a 25. De acuerdo, sigamos adelante y movamos nuestro logo, pero antes de que lo hagas quieres asegurarte de que te has movido activamente o seleccionado De lo contrario, si haces clic en el logo, se va a seleccionar la capa en la que hiciste clic dentro de esa capa de grupo. Entonces una vez que tengamos eso activado, podemos mover todo juntos y voy a mover eso hacia arriba justo en posición. Adelante y alejemos el zoom. Apagemos nuestras guías y agreguemos nuestra navegación. Aparecen a la derecha. Entonces agarra tu herramienta de texto y luego sigamos adelante y tecleemos la navegación así que voy a hacer a casa y luego seis espacios. De acuerdo, vamos a seleccionar. Se iban a copiar los seis espacios para poder añadirlo al final de cada elemento del menú. Y sigamos adelante y terminemos de mecanografiar todo. Hagamos sobre. Voy a pegar dos comentarios Pegar Equipo y Conectar. Está bien, selecciona todo con Commander Control y a Vamos a cambiar la fuente a 18 y es un poco difícil de ver en este momento, Así que sigamos adelante y cambiemos la fuente blanca a Negro. Vamos a cambiar ese dedo del pie blanco más tarde, pero sólo quiero poder verlo fácilmente frente a verlo de lejos. Antecedentes. Adelante y cambiemos la fuente a ferrocarril. Seleccionemos ferrocarril negrita y luego podemos seguir adelante y moverlo aquí a la derecha y luego con nuestras guías encendidas, solo quiero conectarlo al lado derecho de esta columna aquí y ahora necesito alinearlo a la parte superior de este logo por lo que puedo arrastrar esto hacia arriba, que sería la opción más fácil, o puedo usar mis herramientas de alineación. Entonces ahora tenemos una alineación agradable, perfecta en la parte superior entre los dos elementos. De acuerdo, voy a seguir adelante y apagar mis guías. Vamos a alejarnos. Y a continuación, solo necesitamos organizar nuestras capas agregando una nueva capa de grupo click derecho y seleccionar nuevo grupo Capa. Vamos a llamarlo Encabezado él y pongamos ambos dentro. También voy a renombrar esta navegación, está bien. Nuestro encabezado ya está hecho, y al lado de Tora empezaremos en la sección de héroes de la página Web, y probablemente vamos a dividirlo en dos partes diferentes porque va a haber mucha información a la que voy a compartir con ustedes sobre cómo se me ocurrió este diseño en particular y por qué elegí esta imagen en particular. Y te voy a dar algunos propinas pro adicionales también. Entonces si estás listo para empezar con eso, hagámoslo 32. Hero parte 1: Hola y bienvenidos de nuevo. Muy bien, entonces ahora vamos a trabajar en la sección de héroes para este sitio web, y tenemos un montón de cosas geniales que vamos a aprender en esta lección en particular. Tenemos una forma personalizada aquí en dos tonos diferentes, y luego tenemos una imagen confinada a esa forma. También tenemos un Grady Int que solicité para agregar un poco de muerte. Y nosotros, desde luego, se nos llama acción. Por lo que la llamada acción es algo que debería ser un beneficio para el visitante del sitio web, y debe ser algo que sea difícil de rechazar. Entonces tienes que saber de tu cliente qué necesitan o quieren sus clientes y qué tipo de problemas tienen sus clientes? ¿ Y cómo puede tu cliente resolver esos problemas? Entonces digamos, por ejemplo, por ejemplo, a veces las aprobaciones de préstamos podrían tardar 23 o cinco días hábiles en ser aprobadas. Pero digamos que un inversionista necesita el dinero mucho antes porque van a una subasta por un edificio o un almacén o una casa o lo que sea en que estén invirtiendo. Y necesitan ese dinero ese día. Pero, ¿y si Manhattan Bridge Capital pudiera hacer una aprobación de préstamo en 60 minutos? Bueno, esa oferta que llamó a la acción envuelta en torno a esa aprobación de préstamo de 16 minutos va a agarrar ese interés de los inversionistas. Y van a querer postularse para averiguar si pueden calificar para comprar ese edificio a través de la subasta que está sucediendo ese día versus esperar tres 45 días hábiles o por mucho tiempo que lleve, porque esa casa o esa el edificio podría haberse ido ya porque alguien más tenía el dinero ese día. Por lo que esta llamada acción va a permitir que esta empresa, Manhattan, genere más negocios porque están ofreciendo algo que su competencia no está ofreciendo. Por lo que este es otro tipo de servicio que puedes ofrecer además de tu servicio de diseño Web ayudando a tus clientes a llegar a una acción llamada que les ayudará a generar más negocios. Así que sigamos adelante y empecemos a armar las piezas de nuestra sección de héroes, y proporcionaré algunos consejos pro adicionales a medida que avancemos. Por lo que lo primero que tenemos que hacer es definir la altura de nuestra sección de héroes. Entonces sigamos adelante y enciendamos nuestras guías con mando o control en el semi colon. Y luego vamos a dar clic y arrastrar hacia fuera una guía hasta llegar a 700 sabemos que estamos en 700 en base a la información que hay en la parte inferior y la interfaz. Muy bien, vamos a seguir adelante y añadir un color de fondo para la sección de héroes. Entonces sigamos adelante y creemos una nueva capa llamada Fondo. Nos vamos a llenar de transparencia y luego dar click. OK, vamos a sacar eso de esa capa de grupo en particular porque necesita estar en su propia capa de grupo. Y luego vamos a agarrar nuestro rectángulo seleccionable con la letra M, y luego vamos a dar clic y arrastrar hacia fuera una selección basada en la ubicación de la sección de héroes . Entonces vamos a elegir un bonito color azul. Este es el color que usé. Puedes usar cualquier azul que quieras, y luego, y luego, con nuestra herramienta de relleno de cubos, podemos rellenar ese color. Sigamos adelante y movamos la capa de fondo por debajo de la cabeza antes para que podamos ver todo lo demás. Muy bien, vamos a de seleccionar y apagar las guías y lo siguiente que quiero hacer es volver al Grupo de Cabeceras y seleccionar mi navegación. Y luego con mi herramienta de texto, voy a dar clic en una de las palabras y seleccionar todas. Y vamos a cambiar ese dedo blanco. Está bien, creo que estamos listos para agregar nuestra imagen a continuación. Pero primero, echemos un vistazo a esta imagen porque quiero explicar por qué elegí esta imagen en particular frente a otra que originalmente había elegido, que era esta imagen de aquí. Por lo que nuestra empresa, Manhattan Bridge Capital, brinda préstamos a inversionistas inmobiliarios. Y mi primer pensamiento fue una foto del centro de Manhattan mostrando el horizonte, algunos rascacielos y algunos edificios y cosas por el estilo. Y elegí esta imagen porque tiene un bonito color azul nublado, y quería tener algo que tuviera un contraste en relación con el verde del logo y el botón. Además, no es muy abrumador porque como que se mezcla con los otros colores de la sección de héroes también. Pero entonces empecé a pensar, OK, por ese color azul. Es un poco frío y fuera de poner, y son sólo edificios. ¿ Y con quién trabaja Manhattan en realidad ¿A quién le están dando préstamos? Bueno, al final, pesar de que trabajan con inversionistas inmobiliarios o préstamos inmobiliarios, realmente no están prestando dinero a los propios edificios. Están prestando dinero a la gente. Entonces por eso decidí encontrar una imagen de alguien que representara mejor quién es y con quién lidian frente a un edificio en sí. Entonces porque los edificios pueden obtener préstamos y la gente sí. Por eso decidí elegir una imagen con una persona en ella, y terminé encontrando esta imagen aquí. Y la razón por la que elegí esta imagen por encima de algunas de las otras que encontré con la gente se basaba en el tipo de inversionistas que trata este cliente o con esta empresa. Se ocupan de inversionistas, pero ¿qué tipo de inversionistas? Por lo que hay muchas opciones a la hora de seleccionar una imagen con inversionistas. ¿ Quieres a alguien con traje y corbata, o quieres a alguien con pantalones cortos y les muestra trabajando en casa junto a su piscina? O quieres a alguien vestido con atuendo de negocios casual en un Semite casual, ambiente de negocios o tal vez algo completamente diferente. Todo depende de lo que esa empresa para la que estás trabajando esté vendiendo en su tipo de dedo cliente. Entonces, ¿quién era su principal clientela? Bueno, para esta empresa en particular, los inversionistas con traje y corbata no son su dedo principal del pie cliente. Es el inversionista individual el que trabaja por sí mismo versus una corporación. Entonces sentí que alguien con atuendo de negocios casual en un ambiente casual, semi empresarial era más apropiado frente a alguien con traje y corbata o un entorno de negocios más formal. Oye, así que por eso me instalé en esta imagen en particular aquí. Pero hay otra razón por la que elegí esta imagen, y eso es por la dirección en la que está mirando. Por lo que los estudios han demostrado que o bien quieres que la gente mirando directamente a los visitantes cree contacto visual. O, es más importante, quieres que miren algo, porque cuando miras a esa persona, quieres ver lo que están mirando, y tus ojos tenderán a seguir en la dirección que están mirando, que es en este caso y eso es correcto se llaman la acción. Entonces ella está investigando esta área, lo que nos lleva a esa llamada la acción y Queremos que nuestros visitantes se den cuenta de que llamó acción y porque nos tomamos el tiempo para averiguar a nuestro cliente qué están vendiendo y los problemas de sus clientes, creamos una acción fría que es irresistible. Resuelve un problema. Necesitan dinero hoy. Hagamos que te aprueben en 60 minutos o menos, y esta va a ser una gran manera de agarrar el interés de alguien porque nadie más en su área está ofreciendo este tipo de servicio de aprobación de préstamos. Por lo que va a generar más negocios para el cliente porque están resolviendo un problema real que sus clientes airean teniendo. Entonces de nuevo, solo quiero reforzar el hecho de que este es un tipo de servicio de marketing que se puede quitar sus clientes que otros diseñadores Web no están ofreciendo, y se puede ir más allá de lo que otros diseñadores Web aire haciendo y ayudar tu cliente gana más negocios. ¿ Y a quién crees que van a contactar cuando necesiten actualizar su página web? Te van a contactar, Así que sigamos adelante y agarremos esta imagen aquí. Y lo genial de este sitio web aquí elige obedecer dot com es que todas sus imágenes no solo son gratuitas sino sus derechos libres de autor por lo que puedes utilizarlas en tu página web en vivo de clientes sin ninguna atribución o pagar una cuota para usar esa imagen. Entonces si quieres descargar esta misma foto exacta, ve a escoger Subait dot com, crea una cuenta y luego podrás descargar esa imagen en particular en diferentes tamaños de resolución . Entonces para descargar esta imagen, solo teclea este número aquí y recoge un testamento, encuentra la imagen, y luego podrás descargarla, y luego seguiremos trabajando en nuestra sección de héroes. Está bien, sigamos adelante y hagamos nuestras formas que van a estar del lado izquierdo de nuestra imagen. En realidad, aún no tengo mi imagen aquí, así que voy a seguir adelante y agarrar mi imagen y arrastrarla a mi documento. Voy a seguir adelante, apagarlo por clavo, y vamos a Graham son herramienta de Ellipse. Esta vez, queremos asegurarnos de que en nuestras opciones de herramientas hayamos arreglado apagado y vamos a hacer un tamaño de Vamos a hacer 5 40 por Vamos a hacer 7 40 Por la altura. En realidad necesitamos bajar eso un poco para poder llenarlo con un color de nuestra elección. Vamos a seguir adelante y crear una nueva capa. Primero, llamémoslo forma. ¿ Siente qué? Transparencia Haga clic en Aceptar, Y luego para nuestro color, elijamos un azul más oscuro frente al fondo. Entonces creo que voy a ir con algo así sólo un poco más oscuro. Puedes hacer lo que quieras cualquier color de tu elección. Yo sólo voy a hacer eso. Click, Ok. Y luego voy a agarrar por cubeta herramienta de relleno con la letra G para llenar eso. Voy a seguir adelante y de selecto, y sólo voy a moverlo un poquito. También quiero subir a capa y seleccionar recortar a contenido para cambiar el límite de capa. Y sigamos adelante y creemos un nuevo antes. También lo vamos a llamar forma, Y luego con nuestra herramienta Elipse, vamos a seguir adelante y crear una nueva forma del mismo tamaño exacto. Entonces hagamos 5 40 por 7 40 Vamos a bajar eso. Y quiero elegir un color más claro esta vez. Entonces sólo voy a elegir algo diferente poco más ligero, él y seguir adelante y llenar eso. De acuerdo, vamos a seleccionar. Está bien, voy a mover esta capa por lo que se superpone a la primera forma am e ir justo por ahí. Vamos a subir a capa y recortar al contenido para cambiar también el límite posterior, en realidad vamos a alinear estos un poco mejor. Entonces voy a encender mi guía para poder crear una nueva guía para poner la segunda forma en línea con la otra. De acuerdo, vamos a mover a ese tipo. Y fuera de ahí, no necesitamos eso. Está bien, así que ya casi terminamos. Lo que vamos a hacer ahora es que sólo vamos a tomar la segunda forma y duplicarla. Porque lo que vamos a hacer es que vamos a usar eso para cortar ambas formas. Entonces tenemos ese bonito borde de elipse a lo largo del lado izquierdo, y luego va a ser transparente de este lado, así que te voy a mostrar lo genial y fácil que es esto. Entonces sólo vamos a mover eso un poco, luego vamos a subir a nuestros modos de fusión y seleccionar color o raza y boom. Ahora tenemos nuestras dos formas con nuestra transparencia aquí a la derecha. Ahora hay un problema es borrar todos los colores debajo de él. Entonces si vuelvo a mi imagen aquí, va a sacar el color o los píxeles para esa capa también. Entonces cualquier píxel debajo de esta capa que tenga ese modo de mezcla en ella, va a borrar los colores y los píxeles y darte transparencia para el resultado final . Entonces vamos a arreglar eso, y es realmente fácil de arreglar. Lo que vamos a hacer es hacer click derecho seleccionar un nuevo grupo de capas. Llamemos a esto formas. Y luego una vez que ponemos esa capa de forma en la capa de grupo, elimina ese modo de mezcla de todas las capas debajo de ella, porque está contenida dentro del grupo. Ahora, una vez que traemos las otras dos formas y luego borrará los píxeles debajo de ella en el grupo, no afecta nada en el exterior del grupo. Entonces eso es bastante guay. Eso me gusta bastante impresionante. Está bien, sigamos adelante y subamos esto. Tenemos que asegurarnos de que hemos movido la capa activa seleccionada, y sigamos adelante y movemos esto hacia arriba a su posición. Entonces justo por ahí, voy a subir mi imagen sólo por un segundo, poder ver dónde estoy colocando esto. Así que quería fuera de la parte superior de la página, y va a ir por fuera de la parte inferior de la sección de héroes también. Y luego vamos a crear una máscara de capa para quitarla de la parte inferior de la sección de héroes . Está bien, una imagen más dura de nuevo porque necesitamos poner esto en posición. También tenemos que darle la vuelta porque, como pueden ver, ella está mirando en la dirección equivocada. Queremos que mire la acción llamada, así que sigamos adelante y hagamos eso primero subiendo a capa, seleccionemos, seleccionemos, transformemos y luego seleccionemos voltear horizontalmente. Desafortunadamente, tenía seleccionada la capa equivocada, así que voy a debajo de eso con Commander Control y las letras. A Seleccionemos aquí a nuestro inversor. En realidad voy a renombrar a este inversor de capas, y luego vamos a volver a subir a la transformación de capas flip horizontalmente. Ahora ella va a mirar la llamada acción Vamos a agarrar nuestra escala para desear turno más s, y luego, por la altura, voy a escribir en 700 que es la altura de nuestra sección de héroes y luego con la tecla de tabulador , lo va a redimensionar. Y entonces puedo agarrarlo en el medio y moverlo hacia el lado derecho. Y quiero traerlo todo el camino. Entonces justo por ahí debería ser bueno y luego hacer clic en habilidad. Tengo un poco de azul aquí arriba, así que solo voy a agarrar mi herramienta de movimiento y moverla hacia arriba solo un poquito con mis teclas de flecha, así que eso debería funcionar. Ahora, sólo necesitamos deshacernos de la imagen en la parte superior izquierda y la inferior izquierda aquí. Y simplemente podemos hacer eso agregando una máscara de capa y seleccionando blanco porque, como saben, anuncios blancos y los negros eliminan. Entonces vamos a empezar por mantener intacta toda la imagen con una máscara de capa blanca. Ahora, vamos a agarrar nuestra herramienta de pincel con la letra B. Vamos a cambiar esto a blanco y negro con la letra D, y luego podemos pintar con negro para quitar. ¿ Qué tan guay es eso? Ah, me encanta. Muy bien, sigamos adelante y hagamos lo mismo para nuestro grupo Shapes más tarde. En realidad podemos, y una máscara de capa a un jugador de grupo. Tan mismo cosa. Máscara de capa. Anuncio blanco. Ahora, esta vez, en lugar de usar nuestro pincel para quitarlo, vamos a agarrar nuestro ángulo recto seleccionable con la letra M. Vamos a hacer una selección donde queremos quitar, y luego estamos va a golpear nuestra tecla de borrar o retroceso. Pero desafortunadamente, no pasó nada. Y eso es porque está tomando la información del color de fondo para reemplazarla por . Por lo que necesitamos cambiar el fondo y el color de primer plano con la letra X. Y luego cuando golpeamos la tecla delete o el retroceso Kate, lo quita. Está bien. Creo que este es un buen punto para parar y continuar con nuestra sección de héroes en el siguiente tutorial. Entonces si estás listo para eso, hazlo siempre. 33. Hero parte 2: Está bien. Entonces lo que nos queda para nuestra sección de héroes es la llamada acción y posiblemente hacer algunos cambios menores en el diseño general de la sección de héroes también. Entonces sigamos adelante y empecemos con nuestro textual para que podamos agregar un título para nuestra llamada acción. Yo sólo voy a teclear la aprobación de préstamo en 60 minutos. Seleccionemos todo el contenido para que podamos cambiar el color de la fuente a Blanco. También quiero hacer 50 por el tamaño de píxel, y voy a usar Railway bold para la familia divertida. Y entonces sólo tenemos que mover esto sobre el dedo del pie izquierdo aquí. Entonces la fila con nuestro logo y se ve bastante bien ahí mismo. El único problema es que ahora estamos soltando las formas. Adelante y saquemos esa capa porque no debería estar ahí. Bajar eso por debajo del grupo de cabecera, y creo que necesitamos mover la forma y tal vez la imagen también. Entonces tomemos esa capa de forma y movela hacia la derecha. Justo ahí debería ser bueno, y también movamos la imagen también. Ahora, si agarras el pulgar máscara de capa ahora y no la capa en sí. Entonces solo vas a mover la máscara de capa, así que asegúrate de seleccionar la miniatura de la imagen para que puedas mover ambas juntas. Entonces voy a jugar set ahí mismo. Entonces necesitamos quitar esta parte de la imagen. Entonces vamos a agarrar la máscara de capa, miniaturas nuestro pincel, y luego asegurarnos de que tienes el set negro en primer plano para que puedas quitar esa parte de la imagen. Muy bien, vamos a seguir adelante y renombrar este titular de capa y sólo vamos a subirlo un poco. Está bien, sigamos adelante y tecleemos un pequeño párrafo de información. Agarra tu herramienta de texto. Voy a seguir adelante y sólo pegar en un párrafo que un bonito escribió Así que realmente no importa lo que escribas. Simplemente haz unas tres líneas de información, y luego cambiemos el tamaño de fuente a 14 Blanco, y creo que quiero ir con un fot diferente. Ahora, cuando se trata de un cuerpo de contenido de tres o más líneas, voy a usar una fuente como Georgia o Helvetica, y ese tipo de fuentes son mucho mejores a los ojos es más fácil leerlas versus una fuente como ferroviario o Oswald. Entonces, por ahora, sigamos adelante y vayamos con Georgia. Creo que necesito hacer ese texto un poco más grande, así que voy a subir aquí y cambiarlo a 18 y luego sólo necesitamos moverlo hacia arriba a posición ahora. En este momento, estoy encontrando que el párrafo sigue compitiendo con titular. Tiene la misma intensidad de peso. A pesar de que es una familia de fondos diferente, sigue haciendo algo difícil de leer. Entonces agarremos esta capa y bajemos la opacidad al 50% y eso definitivamente ayuda a crear algo de separación de los dos y hace que esto sea más fácil de leer. Creo que podemos seguir adelante y crear nuestro botón de uñas aplicar. Vamos a seguir adelante y crear una nueva capa llamada Aplicar ahora botón transparencia, por supuesto, Y luego, con nuestro rectángulo seleccionable, vamos a crear una forma con el siguiente tamaño. Vamos a hacer 3 75 por el con y 10 por la altura. Ahora, lo que quiero hacer es que quiero crear esquinas redondeadas ahora no tenemos una herramienta de selección para hacer eso. Pero si vamos por debajo de la opción de menú selecto, no tenemos opción aquí llamada rectángulo redondeado. Entonces una vez que seleccionas que condenas. Define el radio de esas esquinas redondeadas para que puedas establecerlo entre lo que quieras. 0 a 100. Entonces voy a seguir adelante y hacer 35 click, OK, OK, y ahora puedes ver las esquinas redondeadas. ¿ Qué tan guay es eso? Impresionante. Muy bien, ojalá estés aprendiendo cosas nuevas a medida que continuamos con nuevas lecciones. Sigamos adelante y escojamos uno de los colores verdes que usábamos previamente y pinchemos. OK, vamos a seguir adelante y llenarlo con su cubo de llenado a uh y D Select are are right. Vamos a seguir adelante y tomar esa capa y duplicarla para que podamos crear una especie de sombra de gota . Voy a tirar esa hacia abajo y voy a ponerle nombre. Aplicar ahora, sombra de botones. Ahora, antes de mover esas capas a la posición, sigamos adelante y subamos a capa y seleccionamos recortar a contenido para ajustar el límite de la capa. Y hagamos lo mismo para el contenido de primera capa aquí y luego ¿qué? Se mueven a una podemos hacer click sobre a la izquierda y arriba uno. De acuerdo, ahora podemos seguir adelante y colorear la sombra de botones. Seleccionemos esa capa. Sube dos colores y selecciona colorear. Haga clic en la barra de colores y luego simplemente haga clic en el mismo color de verde que seleccionó para el botón superior y luego haga clic en Aceptar y automáticamente lo oscurece. Y yo solo quiero mover el mío un poco. Y solo voy a usar mis teclas de flecha para moverlo a la izquierda, terminar un píxel a la vez. Entonces ahí mismo se ve bastante bien. Adelante y pongamos esos en una capa de grupo. Llámalo. Aplicar ahora botón y sigamos adelante y alinearlo a los otros dos elementos también. Se pone una tarifa por ahí. De acuerdo, voy a seguir adelante y seleccionar mi párrafo y vamos a seguir adelante y usar nuestras teclas de flecha para seleccionar eso también. Y para usar tus teclas de flecha en esto, tendrás que hacer click en él con tu herramienta de movimiento primero. De lo contrario, solo vas a usar tus teclas de flecha para navegar en el panel de capas. Vamos a seguir adelante y renombrar este párrafo vamos a poner el titular en la parte superior son aplicar . Ahora botón abajo de esos y luego podremos crear un nuevo grupo de capas para los llamados llamada a Acción. De acuerdo, nos queda una cosa que nos olvidamos de hacer, y eso es agregar nuestro texto para nuestro botón. Entonces, ¿qué? Son textuales. Vamos a teclear, Aplicar ahora y vamos a seleccionar el blanco también viejo y vamos a hacer 70 píxeles para el tamaño de fuente. Pero eso ahí mismo y sigamos adelante y una línea que directamente en el centro de nuestro botón voy a mover esto aquí abajo con nuestro botón de uñas aplicar, y luego vamos a hacer una selección con nuestra herramienta de selección difusa. Asegúrate de tener seleccionada tu capa de botón Aplicar ahora, y luego podemos usar nuestra herramienta de alineación para alinearla directamente en el centro, y necesitamos tirar de esto. Aplicar ahora, capa hacia fuera en la parte superior para que podamos seleccionarla con su herramienta de límite y luego asegurarnos que tienes relativa a la selección y una línea media y centro del botón. El único problema es que tenemos más espacio en la parte superior que en la parte inferior, así que déjame mostrarte por qué sucedió eso. Agarra tu textil y haz clic en él y podemos ver dentro de este cuadro de texto. Aquí tenemos más espacio que aquí abajo, y ahí es donde la herramienta de alineación está haciendo sus alineaciones en función del tamaño de esa caja . Entonces si hacemos click justo aquí en la parte superior, podemos ver una pequeña caja amarilla, y podemos hacer click y arrastrarla hacia abajo para que llegue a la parte superior del texto. El único problema es que empuja ese texto hacia abajo y debajo del cuadro de texto, por lo que está cortado. Pero eso está bien para los fines de alinearse. Eso está bien. Volvamos a nuestro botón de uñas aplicar y y er selección con nuestra herramienta de selección difusa. Y luego con su herramienta de alineación, podemos volver a centrar esto directamente en el centro. Ahora necesitamos de seleccionar y volver con nuestra herramienta de texto y mover esa caja hacia arriba hasta que tengamos todo el texto visible dentro de ese cuadro de texto. Y ahora debe estar perfectamente alineado. Hermosa. Está bien, sigamos adelante y alejemos el zoom. Muy bien, así que echemos un vistazo rápido a nuestra sección de héroes aquí para ver si hay algo que podamos hacer para que esto sea un poco mejor. Entonces tenemos dos lados, y la imagen de nuestro inversionista está mirando hacia atrás de esta manera, que es lo que queremos. Pero creo que aquí hay demasiados elementos que compiten, y se ve demasiado ocupado. Entonces, ¿cuáles son las partes más importantes de esta parte de la sección de héroes? Yo diría que el botón aplicar ahora es el más importante porque ese es el llamado a la acción. Esta es la oferta, pero el botón de uñas aplicar te lleva a ese siguiente paso, por lo que ese debería ser el más grande. Lo cual está bien. Lo es. Pero sigue compitiendo con el logo aquí arriba porque el logo es bastante grande. Por lo que el logo está compitiendo con el botón de uñas aplicar, y es como que nos quita los ojos de esta sección. Entonces creo que necesitamos tomar ese logotipo y hacerlo más pequeño. Adelante y muévanse. Postúlate ahora, vuelve hacia abajo en jugador de grupo adecuado. Encontremos nuestro logotipo, que debería estar en nuestro encabezado y con nuestra herramienta de escala, vamos a seguir adelante y escalar esto a una altura de Vamos con 98 para la altura. Ahora, como saben, esto ahora se ha convertido en una capa de píxeles. Y si queremos actualizar este contenido, tenemos que seleccionar nuestra herramienta de texto y seleccionar la opción adecuada para poder cambiarlo. Pero eso está bien, porque sí diseñamos el logotipo en un documento separado y decimos que ojalá entonces siempre podamos volver a ese documento en particular y actualizarlo en base a los comentarios de nuestros clientes. Si les gusta el logo tal como está, está bien. Pero si tienen cambios, puedes volver al documento original y luego arrastrar esa capa frente a intentar arreglarla desde aquí. Entonces, como puedes ver haciendo que ese local sea más pequeño, no está compitiendo como lo hacía antes. Y ahora nuestros ojos gravitan a esta zona. Leemos el titular. A lo mejor queremos leer aquí este párrafo para más información, pero sabemos lo que tenemos que hacer a continuación, y eso es aplicar ahora. Y estas son pequeñas cosas en las que vas a tener que pensar mientras estás diseñando ¿cuáles son los elementos más importantes? Cuál debería ser el más grande en lo que debería ser el más pequeño. Dicho esto, creo que nuestro texto aquí y nuestra navegación es un poco demasiado pequeño. Entonces voy a agarrar mi herramienta de texto y seleccionar todo. El único problema es que puedo acceder a las opciones de herramienta por encima de ella porque está siendo oculto por la parte superior del documento. Entonces salgamos de eso. Y luego con su herramienta de movimiento, podemos simplemente tirar eso hacia abajo y luego entrar y hacer cambios. Voy a hacer esto 22 puntos por el tamaño y luego sólo necesitamos asegurarnos de que esté realineado a la parte superior y a la derecha. Muy bien, me gusta el tamaño de la navegación. Ahora es sólo un poco demasiado cerca de estas formas aquí. Entonces voy a seguir adelante y cerrar a todos estos jugadores de grupo fuera y mover a mis jugadores de forma y se fue sólo un poquito. Entonces justo ahí debería ser bueno. Y ahora necesito agarrar la máscara de capa de la imagen para poder pintar con blanco para poder traer vuelta la imagen en esta parte y esta parte de la sección de héroes, porque borramos parte de eso antes, y ahora solo necesitamos añadirla de nuevo en esa zona. K por lo que las puntadas blancas y negras quita. Muy bien, entonces nuestra sección de héroes ya está hecha. ¿ O lo es? En realidad hay una cosa que podemos hacer para mejorar la sección de héroes para aumentar las posibilidades que un inversor aplique clavo versus desplazamiento a una parte diferente de la página o navegar fuera de la página, o tal vez incluso salir del sitio. Y voy a explicar más sobre eso en el siguiente tutorial. 34. Hero parte 3: vamos a seguir adelante y terminar nuestra sección de héroes. Ahora necesitamos ingrediente agregado, que no hicimos en el tutorial anterior, y también necesitamos organizar nuestras capas para la sección de héroes también. Y entonces sólo quiero hablar de otra cosa a la que conducimos para mejorar la sección de héroes para aumentar las posibilidades de que un inversor aproveche este llamado a la acción y aplique ahora. Y lo cubriremos en tan solo un minuto porque puede que queramos o no agregarla a la sección de héroes , y voy a explicar más al respecto. Una vez que superemos estos otros pasos, sigamos adelante y trabajemos en agregar un int Grady a nuestros antecedentes. Y para empezar, vamos a seguir adelante y crear una nueva capa. Vamos a nombrar ingrediente con un relleno de transparencia. Adelante y haga clic. OK, saquémoslo de esa capa de grupo. Entonces vamos a seguir adelante y encender el límite de capa bajo vista y luego simplemente haga clic en Mostrar límite de capa y podemos ver que esta capa en particular está cubriendo todo el documento. Y si agregamos nuestro ingrediente son ingrediente se va a agregar también en esta área, y tendríamos que usar una máscara de capa para sacarlo de esa zona. Pero hay una forma más fácil de hacerlo. En realidad podemos escalar esta capa en particular a la altura de la sección de héroes, por lo que no tenemos que preocuparnos de añadir la máscara de capa para aquí abajo. Entonces para hacer eso, vamos a dar click derecho en Ingrediente Seleccionar Escala aquí. Queremos desbloquearlo y ajustar la altura a la altura de la sección de héroes, que es 700. Y luego, cuando haga clic en escala, notará que el límite de la capa ha cambiado. En realidad podemos hacer clic y arrastrar hacia arriba esa parte de la capa hasta la sección de héroes y ahora son capa. Límite está alrededor de la sección de héroes y el ingrediente se aplicará sólo a esta zona. Así que sigamos adelante y agreguemos ingrediente con nuestra herramienta de saludo, que se encuentra aquí mismo. No tengo un atajo de teclado para ello, pero si lo usas mucho, puede que quieras y uno para ti. De acuerdo, en las opciones de herramientas, tenemos algunas opciones aquí que necesitamos configurar para nuestro ingrediente bajo forma. Queremos asegurarnos de que tenemos radio seleccionada para que tengamos unos ingredientes de tipo circular, por lo que es algo así como un foco de atención. También queremos el espacio de color de mezcla, establecer toe lineal rgb, y luego necesitamos cambiar los colores de nuestro ingrediente. Ahora mismo, mía está mostrando el dedo negro blanco. El tuyo podría ser diferente dependiendo de si utilizas esta herramienta en particular antes o no. Entonces voy a seguir adelante y dar clic en esto, y voy a conseguir una lista de todas las diferentes INT codiciosas que están disponibles de nuevo. El tuyo puede ser diferente al mío porque he creado ingredientes personalizados antes y luego los guarda automáticamente en este panel. Por lo que para cambiar los colores, tenemos que dar click en este pequeño ícono aquí para editar el int Grady. Y luego nos presentan un nuevo panel aquí arriba llamado Degradante y Editor, y luego podemos hacer ajustes a este color en particular. Entonces tenemos algunos triángulos aquí y el centro. En realidad podemos mover los puntos finales que no podemos, así que puedo ajustar cuánto blanco y negro se agrega al int Grady. Yo quisiera mantener la mía en el medio así que son 50 50. Y luego con el fin de cambiar los colores, necesitamos hacer nuestras selecciones de color en primer plano y en los colores de fondo. Entonces el color Grady y yo queremos es blanco dedo del pie azul, y quiero un color específico de azul, que es este color aquí mismo, el fondo de nuestra sección de héroes. Por lo que ya tienen puesta en blanco. Así que adelante y establece que si es diferente para ti y luego para el color de fondo, vamos a seleccionar este color con nuestra herramienta cuentagotas, que se encuentra aquí mismo. Entonces una vez que haces click en eso, te pones un cuentagotas y luego puedes hacer click en este color, y se va a agregar ese color por aquí. De acuerdo, entonces ahora tenemos ese color. Podemos ver que mi codicioso y editor también cambió de dedo azul blanco automáticamente. Entonces te voy a mostrar cómo cambiar esto un poco porque queremos dedo blanco azul y también podemos hacer selecciones de color desde aquí Un oleaje. Entonces hagámoslo. Voy a dar click. OK, entonces si nos acercamos al Grady y al Editor y hacemos click derecho, obtenemos un menú pop up, y podemos ver aquí mismo para el tipo de color izquierdo. Tengo el color de fondo seleccionado, y por eso cambió automáticamente en el Grady, un editor cuando seleccioné por aquí. El tuyo puede ser diferente. Los años pueden ser arreglados, y probablemente no cambió de color. Por lo que da clic derecho en el editor de rejilla y luego díselo a gimp qué color quieres usar para el lado izquierdo. Y en este caso, quiero blanco. Por lo que voy a seleccionar el color de primer plano y luego hacer clic derecho y seleccionar el tipo de color correcto y el color de fondo esta vez. Por lo que ahora tengo mi dedo blanco azul. Así que adelante y configura tus colores y luego vuelve a tu panel de capas. Asegúrate de tener la rejilla seleccionada y luego haz clic y arrastra hacia fuera tu ingrediente. Entonces veamos cómo se está confinando a ese límite de capa. Si no hubiéramos hecho eso, entonces habría estado encubriendo Up. Aquí abajo está bien, habríamos pasado más tiempo editando ese Grady Int, así que no está apareciendo aquí abajo porque sólo lo queremos confinar a la sección de héroes. Entonces, cuanto más larga esta línea, más blanco o más grande es el círculo para ese particular Grady int. Yo entro aquí muy apretado, es más bien un foco y es mucho más pequeño. Eso no es lo que quiero. Entonces yo también me voy a arrastrar . Oh, no lo sé. Supongo que tal vez justo ahí debería ser bueno. Ahora podemos seguir adelante y hacer click, entrar o regresar para crear ese int codicioso. Por lo que se ha aplicado nuestro ingrediente, y ahora necesitamos hacer ajustes al mismo porque no podemos ver nuestra imagen. Entonces lo primero que quiero hacer es dejar caer mi opacidad alrededor de 5 a 10 por la opacidad. No lo quiero demasiado brillante ni demasiado intenso. Y si le echo un vistazo al antes y al después, me dará una mejor idea de dónde quiero colocar esa opacidad particular. Y voy a ir a seis por mí. Puedes hacer lo que decidas Se ve mejor de tu lado. Ahora lo otro que tenemos que hacer es quitar el int Grady de la imagen. No quiero el codicioso int por aquí a un lado, así que sí necesitamos hacer una máscara de capa para hacer eso. Entonces sigamos adelante y agreguemos una máscara de capa con blanco y haga clic y luego con mi herramienta de selección de rectángulo , voy a hacer una selección aquí mismo. Y luego quiero asegurarme de que tengo el negro ajustado al fondo y luego presionar delete o la tecla de retroceso, y eso elimina ingrediente de esa selección. Ahora necesito hacer una selección aquí para quitar el resto de la misma para que podamos entrar en nuestras formas. Agrupa esa capa, y quiero seleccionar la capa superior, que es ésta de aquí y luego con mi herramienta de selección difusa, puedo dar click en esta área para hacer mi selección. Voy a seguir adelante y cerrar este jugador de grupo y volver arriba y seleccionar mi máscara de capa para esa capa Grady Int y luego otra vez, borrar o retroceder clave para deshacerme del resto del ingrediente. Ahora echemos un vistazo al antes y al después. Sólo se está aplicando en esta zona por ahí. ¿ Qué tan guay es eso? Está bien, así que eso le suma un poco de profundidad a nuestro fondo, lo hace un poco más interesante y no s plano. Está bien, vamos a seguir adelante y crear un nuevo grupo de capas y llamémoslo sección de héroe o simplemente Héroe. Y pongamos aquí todas nuestras capas grupales en cualquier aire individual. De acuerdo, entonces tenemos nuestra sección de cabecera o héroe, y todo es bonito y ordenado y organizado. Está bien, sigamos adelante y trabajemos un poco más en la sección de héroes porque quizá tengamos o no una sección que queramos sumar en la sección de héroes. Y en el diseño original, agregué alguna prueba social para aumentar la probabilidad de que un inversor aproveche esta oferta y aproveche la llamada acción aplicando ahora. Entonces la razón por la que quisiera agregar prueba social es porque agrega credibilidad y credibilidad. Para una empresa como esta es enorme cuando se habla de dinero en general. Por lo que al mostrar a los inversionistas potenciales que esta empresa en particular ha sido destacada en estas publicaciones y medios particulares muestra que esa empresa en particular es de confianza y muchos inversionistas quieren asegurarse de que están tratando con alguien que es digno de confianza y no un tiburón de préstamos. Por lo que esto podría ayudar a aumentar la posibilidad de que alguien quiera hacer negocios con esta empresa frente a no tener esta información. El único problema es, ¿ dónde lo ponemos? ¿ Lo ponemos dentro de la sección de héroes Ahora mismo? Aquí arriba está la sección de héroes, pero la prueba social está por debajo de ella. Entonces vamos a subirlo a la sección de héroes y echemos un vistazo a lo que sucede. Por lo que ahora la sección de héroes está mucho más ocupada. Tenemos mucho más pasando. Lo que podemos hacer es que podemos bajar el tamaño del logotipo y el botón aplicar ahora y mover todo para que esta información encaje. O podemos tomar esta prueba social y podemos ajustar la opacidad de los logotipos para bajar la intensidad de los mismos. Siguen visibles y siguen mostrando credibilidad, pero no está tan ocupado como antes. La otra cosa que podemos hacer es tomar estos logotipos y debilitarlos reducirlos para que no sean tan grandes como ahora, y entonces de esa manera no están compitiendo con el resto del contenido. Entonces te voy a dejar esa decisión creativa. Si lo vas a colocar en la sección de héroes, solo recuerda realinear tus elementos y redimensionarlos en consecuencia para que la sección de héroes no esté tan ocupada como actualmente. Vas a tener que mover la imagen también y subir eso. O puedes hacer lo que hice y colocarlos justo debajo de la sección de héroes así. De acuerdo, así que eso es todo para nuestra sección de héroes. A menos que, por supuesto, estés colocando ahí tu prueba de redes sociales. De cualquier manera, vamos a empezar a crear la sección de prueba social y estas tres columnas en el siguiente tutorial, que es el inicio de crear la sección de cuerpo de nuestra página Web. Entonces si estás listo para hacer eso, hagámoslo. 35. Demostración social: Hola y bienvenidos de nuevo. Muy bien, entonces en este tutorial, vamos a seguir adelante y crear nuestra sección de pruebas sociales, y también vamos a crear tres columnas de información. Y en su página Web original, tenían un enlace aquí mismo, servicios que fueron a otra página que explicaba los tres principales tipos de inversionistas para los que otorgaban préstamos. Entonces pensé que sería bueno colocar fragmentos de esa información en la página principal de esa manera si decidieran que querían más información sobre uno de estos tipos específicos de préstamos de la que puedan navegar fácilmente a esa página a través del enlace que se crea a través del titular. Entonces vamos a seguir adelante y crear esas tres columnas también. Entonces sigamos adelante y empecemos primero con nuestra sección de prueba social. Entonces lo que necesitamos son de 4 a 5 logotipos. Estos fueron los que elegí formas la Street Money Inc y CNBC, y los vamos a sumar a nuestro documento. Así que acabo de hacer una búsqueda en Google para cada uno de esos logotipos y seleccioné transparente o PNG cualesquiera sean las opciones porque quieres asegurarte de que ese archivo en particular que vas a agregar a tu documento sea transparente. Por lo que vamos a hacer click derecho seleccionar copiar imagen, y luego de vuelta en nuestro documento, podemos pegar con Commander Control y la letra V. Si no obtienes esa opción, donde automáticamente la agrega a una nueva capa para ti, puede obtener esta opción en su lugar. Eso dice, selección flotante. En ese caso, basta hacer clic y seleccionar a nueva capa, y luego se agregará eso a una nueva capa para ti. De acuerdo, no necesito ambos, así que voy a seguir adelante y quitar uno, y luego sólo tenemos que cull, surgir y cambiar el tamaño de cada uno de los logotipos, y también necesitamos renombrar los logotipos también. Entonces hagámoslo Forbes. Tengo algunas diferentes. Aquí está Bueno, tengo dinero de CNN en lugar de dinero. Realmente no importa. Esto es sólo para la práctica de todos modos. Y sólo voy a ir con tres en este momento. Entonces subamos a los colores y seleccionamos colorear. Y luego queremos seleccionar el blanco para cambiarlo todo dedo blanco. Entonces sigamos adelante y hagamos eso por cada uno de los logotipos. ¿ De acuerdo? Con nuestros guías encendidos con control Commander en el semi colon. Voy a seguir adelante y una guía al 785. Agarramos nuestra herramienta para marquesina para que podamos llenarla con un color. Hagamos una nueva capa también. Vamos a llamarlo fondo y vamos a escoger un color azul oscuro y luego con tu herramienta de relleno de cubo , puedes seguir adelante y rellenar eso. De acuerdo, voy a de seleccionar y apagar mis guías. Vamos a mover la capa de fondo debajo de los logotipos, y también necesitamos cambiar el tamaño de nuestros logotipos y cambiar el límite de la capa también. Entonces subamos a capa y seleccionemos Recortar el contenido y sigamos adelante y hagamos los otros dos también. Ahora, si el límite de la capa ya está recortado al contenido, vas a recibir este pequeño mensaje aquí, así que parece igual para Forbes también, así que estamos bien para ir allí. Vamos a seguir adelante y agarrar nuestra herramienta de báscula y asegurarnos de que la altura y el ancho estén vinculados. Y luego, por la altura vamos a hacer 50 píxeles. Debería ir un poco más bajo. Hagamos 35 y luego sigamos adelante y escalarlo y simplemente moverlo a su posición. De acuerdo, vamos a hacer lo mismo con los otros dos logotipos también. Estamos, por muchos logotipos que tengas. Todos van a tener 35 años. De acuerdo, vamos a encender nuestras rejillas porque quiero asegurarme de que todo esté correctamente alineado. También necesitan mover mi rejilla lier por encima de todas las demás capas. En realidad lo podemos ver. Sigamos adelante y coloquemos este logo aquí directamente en el centro de estos dos. Entonces tomemos nuestra herramienta de selección de rectángulo y hagamos una selección. Y luego, con nuestra herramienta de alineación, queremos hacer click en esa capa y moverla hacia arriba si es necesario. Y luego nos vamos a alinear con el centro de objetivo. De acuerdo, sigamos adelante y pongamos todos esos logotipos en una capa de grupo. Por lo que haga clic derecho y seleccione nuevo grupo anterior llamado Logo's. Ahora sigamos adelante y aliando nuestros logotipos directamente en el centro de nuestros antecedentes. Vamos primero a la capa de fondo y seleccionamos capa y elaboramos un contenido para cambiar el límite de la capa, y luego con la herramienta de alineación, vamos a hacer clic en ella. Pero parece que necesito mover esto todo el camino hasta la cima. Entonces vamos a dar click en eso. Después vamos a mover los logotipos a la parte superior, sosteniendo tu tecla de turno y dando click en los logotipos. Esta vez nos vamos a alinear con el primer ítem, que es el fondo. Y luego vamos a alinear centro y medio del objetivo para alinear esos logotipos directamente en medio de la forma. Muy bien, para que parte de qué página se haga, vamos a crear un nuevo grupo de capas para ello llamado Social Proof. De acuerdo, tenemos todo eso organizado. Sigamos adelante y movamos esto hacia abajo por debajo de la sección de héroes. Y ahora trabajemos en nuestras tres columnas. Ahora, Antes de hacer eso, en realidad quiero volver atrás y seleccionar los logotipos y bajar la opacidad a alrededor de 50 solo una especie de tono hacia abajo solo un poquito. Está bien, así que eso lo hace menos ocupado de lo que estaba antes. Entonces sigamos adelante y trabajemos ahora en nuestras columnas. Por lo que la primera columna le pondremos el título a Arrendador. Cambiémoslo a Oswald Bold. Hagamos 30 por la talla y luego por el color, vamos a elegir el color verde de su botón. Así que describe tu herramienta cuentagotas aquí y haz clic en el botón para obtener ese color click. OK, y en realidad necesitamos mover esta capa en particular fuera de este grupo. Esa capa. Muy bien, sigamos adelante y pongamos esto aquí abajo en la parte inferior, y entonces sólo vamos a crear un nuevo párrafo con alguna nueva información. Realmente no importa lo que diga. Simplemente teclea algo. 567 líneas está bien. Y hagamos de este texto 12 por el tamaño y luego por el color que vamos a escribir en 333 333 Haz clic en tu tecla de tabulación Haz clic en Aceptar, y cambiemos la fuente a Georgia luce un poco pequeña. Entonces tal vez un poco más grande. Voy a seguir adelante y seleccionar todo y cambiarlo a 14 y luego vamos a moverlo a posición aquí, acuerdo? Creo que necesitamos encender nuestra grilla. Entonces sigamos adelante y encenderemos eso, y voy a seguir adelante y crear un nuevo grupo anterior para este contenido. Se va a llamar casero y echemos un vistazo a nuestro pelo espaciado. Creo que cuando quiero hacer es tomar este párrafo y condensarlo para que llene dos anchos de columna. Entonces volvamos a nuestro textil con la letra T. Y entonces necesitamos ir dentro de nuestra capa de grupo aquí para seleccionar nuestro párrafo, y luego podemos hacer clic en él para activar el cuadro de texto para poder redimensionarlo. Entonces solo voy a agarrar esta esquina aquí y arrastrarla hacia la izquierda y hacia abajo hasta que llene esas dos columnas solo voy a reajustar un poco mi texto aquí. Por lo que tengo dos párrafos. Eso está bien. Y ahora está condensado a estas dos columnas, que es lo que quiero. Y luego vamos a añadir un par de columnas de espacio entre las columnas ya que creamos las otras columnas también. Y vamos a hacer esto realmente fácil de dio. Lo que tenemos que hacer es agarrar a nuestra capa agrupada arrendadora, y vamos a duplicarla dos veces va a poner al casero uno en la parte superior que se llama este uno aletas, y sólo llamaremos a ésta nueva. Agarramos esta capa y luego ¿qué? Se mueven a testamento. Simplemente muévelo para escribir sobre su. Así que asegúrate de tener dos columnas de espacio y entre ellas, ya que ella creo que son demasiadas. Voy a seguir adelante y moverlo hacia la izquierda, así que tenemos una columna de espacio entre ellos y de vuelta a nuestras herramientas de texto. Podemos cambiar el título, seleccionar todo, cambiarlo a 30 y luego cambiar la fuente también. Cómo Oswald Old y tenemos que asegurarnos de que teníamos el color, y luego vamos a mover la otra capa también. Por lo que necesitamos una columna de espacio. Está bien ahí y cambiemos el título. Ahora solo necesitamos alinearlos a la parte superior para que estén perfectamente alineados a lo largo de ese borde. Adelante y apaguemos a estos tres mejores jugadores, y deberíamos poder seleccionarlos ahora con nuestra herramienta de alineación. Vamos a seguir adelante y haga clic en Arrendatario, mantenga presionada la tecla de turno, haga clic en aletas y luego suelte la tecla de turno, manteniendo el encendido de nuevo y luego haga clic en Nuevo todo bien, vamos a ir a relativo al primer elemento y luego seleccione una línea borde superior de los objetivos, Todo justo ahí. Ahora perfectamente alineado a lo largo de la parte superior. Sólo necesitamos centrarlos en medio de nuestro documento aquí. Muy bien, Entonces antes de aliar estas tres columnas directamente en el centro, vamos a crear una sección para esas columnas y especificar una altura específica para ellas. Entonces vamos a encender nuestros guías con Commander Control en el semi colon. Agarremos nuestra herramienta de medición y midamos 300 píxeles de altura. Kate, agarra a tu chico y tira hacia abajo y y eso hasta el punto de mira ahí mismo. Ahora, antes de seleccionarlos con su herramienta de alineación, sigamos adelante y creemos un nuevo grupo de capas llamado tres Columnas para que podamos poner cada una de esas columnas en él. Y entonces podemos simplemente seleccionar ese grupo de capas en particular con la herramienta de alineación versus cada columna individualmente, y luego hará que sea más fácil y rápido alinearlo directamente en el centro. Entonces con nuestra herramienta Lehman, solo necesitamos hacer clic en ella una vez y luego ah, acostado centro de objetivo y alinear medio del objetivo. acuerdo, Deacuerdo,de, selecciona y apaga las guías, y luego podemos seguir adelante y encender las otras capas también. Seguiremos adelante y mantendremos la grilla alejada por ahora. Ahora hay una última cosa que quiero hacer antes de seguir adelante, y es que quiero alinear los títulos directamente en el centro de los párrafos. Ahora, cuando haces algo como esto y ya lo has agrupado todo, va a ser mucho más difícil que hacerlo desde el principio. Pero a veces eso sucede porque tal vez el cliente querrá hacer un cambio y querrá centrar esto. Pero no lo hiciste al principio como lo hicimos nosotros, y tendrás que pasar por cada una de estas, agrupar las capas y sacar todas las capas para poder seleccionarlas con tu herramienta de alineación . También necesitamos volver a desactivar estas capas para poder seleccionarlas, y luego podemos seleccionar esas capas con nuestra herramienta de alineación para que luego podamos una línea relativa al primer elemento y un centro de línea de objetivo. Ahora, en este caso, el párrafo se desplazó hacia la izquierda porque lo estamos alineando con el primer ítem. Entonces en lugar de seleccionar primero al arrendador, podemos seleccionar el párrafo porque quiero que el arrendador se mueva hacia la derecha. De lo contrario, perdemos esa cantidad uniforme de espaciado entre cada columna y luego puedo seleccionar arrendador, y eso se moverá o bien, sigamos adelante y pongamos esos de nuevo y luego hagamos eso para las otras dos columnas también. Voy a renombrar estos títulos con el nombre del título sólo para darle un poco mejor descripción. Y luego como faras el nombre del párrafo para la capa. Voy a seguir adelante y renombrarlo párrafo por lo que a veces el cliente no tendrá el contenido disponible. Por lo que solo usarás algún texto como este, o texto ficticio, que hablaremos en un próximo tutorial. O en realidad puedes navegar a su página web y agarrar parte del contenido que ya tienen el lugar dentro de aquí. Pero por ahora, sólo vamos a dejarlo así. De acuerdo, tenemos son tres columnas. Pongamos ese golpe héroe a prueba social y cabecera volvió a encenderse y todo viene bien. De acuerdo, ahora que ya lo hemos hecho, vamos a seguir adelante y trabajar en la siguiente parte de nuestro cuerpo en el siguiente tutorial 36. Cuerpo parte 1: para nuestra siguiente sección de nuestra página web. Yo quería crear algo que explicara por qué deberías hacer negocios con esta empresa en particular . Entonces es algo así como la página sobre nosotros. ¿ Qué pasa con nosotros? ¿ Qué nos dio? Estas son las cosas que dio. Entonces creo que algo que es mucho más poderoso entonces y en torno a nosotros. Page está listando beneficios de por qué debes hacer negocios con cierta empresa que aún puedes hacer sobre nosotros página. Pero preferiría tratar de vender servicios de mis clientes a potenciales visitantes del sitio web sobre por qué deberían hacer negocios con ellos. Y eso es lo que representa esta sección en particular. ¿ Por qué Manhattan? Y luego enumeramos de 4 a 7 beneficios de por qué deberías hacer negocios con Manhattan Bridge Capital Now. Este contenido no está disponible en su página web, por lo que es algo de lo que tendría que hablarles y ordenarme saber cuáles son los beneficios de usar su empresa en particular versus otros servicios de préstamo de la zona. Entonces esto es algo en lo que yo aumentaría a mi cliente porque o les ayudaría corregir el contenido para esta sección, o les permitiría brindarme esa información. Si lo escribiera yo mismo en su nombre en base a los beneficios que brindan, entonces por supuesto cobraría una cuota adicional por eso. Si están aportando la información, no lo estoy. Por lo que esta es sólo otra oportunidad para ir por encima y más allá. Siendo solo otro diseñador Web. No tienes que hacer los derechos de autor tú mismo. Si no eres bueno escribiendo como yo, todavía puedes externalizarlo pero marcar el costo de conseguir que ese contenido en particular se escriba , y luego ganas ingresos adicionales. Pero al mismo tiempo, estás haciendo un servicio a tu tipo brindando tu experiencia profesional para hacerles saber que pueden aumentar la cantidad de clientes o prospectos que van a contactar con ellos vendiéndolos sobre por qué debería hacer negocios contigo. Si no tienes esta información, es solo información general. Sí, proporcionamos este tipo de préstamos. Podemos hacer una aprobación de préstamo en 60 minutos, pero en realidad no es decir por qué deberías hacer negocios con nosotros. Sí, puedes obtener una aprobación en 60 minutos, pero tiene que haber otros beneficios por encima y más allá de nosotros que atraigan a la gente a hacer negocios con ellos. Podrían proporcionar tasas de interés más bajas frente a su competencia. Y pueden explicar te vamos a ahorrar cientos de miles de dólares porque nuestras tasas de interés son más bajas que nadie en la zona. Ese sería un beneficio. Otro sería tu en una subasta. Usted por la inmobiliaria. Ya sabes que estás aprobado para ese préstamo en particular. Pero Manhattan Bridge Capital podría llevarlo un paso más allá y transferir automáticamente ese dinero al subastador tras la aprobación o aceptación de su oferta para que no haya retraso en llevar los fondos a esa casa de subastas. Por lo que puedes tomar posesión de ese inmueble hoy frente a la espera de capital puente para enviarles un cheque o como sea el caso para esa empresa en particular, tienes que comunicarte con tu cliente para saber cuáles son los beneficios de hacer negocios con usted. ¿ Por qué los prospectos que no saben nada de ti? ¿ Por qué deberían hacer negocios contigo? ¿ Si no les das una razón por la que deberían hacer negocios contigo frente a la competencia ? Bueno, más probable es que no vayas a conseguir su negocio porque tal vez tu competencia está haciendo eso ahora mismo. Y eso es parte de tu investigación. Vas a ir a revisar la competencia en su zona. Vas a escoger a los 4 a 5 competidores y su área y averiguar qué están haciendo en sus sitios web. Y si están ofreciendo beneficios en su página principal, bueno, entonces esa es otra razón para que tu cliente lo haga también, que puedan aumentar sus posibilidades de conseguir nuevos clientes. No quiero que esto sólo sea otro curso de diseño Web. Cualquiera puede diseñar un sitio web. Quiero compartir contigo consejos e ideas sobre cómo puedes aumentar tu resultado final, pero al mismo tiempo ayudar a tus clientes a ganar un mayor retorno de su inversión también cuando estén haciendo un nuevo sitio web. Por lo que la parte fácil de este diseño Web es juntar estos tres elementos. De lo que tenemos, tenemos un texto, tenemos un titular, y tenemos una foto. Es tan fácil diseñar algo como esto. Es más difícil comunicarse con tu cliente sobre por qué estás haciendo la página Web específica y por qué deberían tenerla y la conclusión es, solo pregúntale a tu cliente. ¿ Te gustaría que el dedo potencial ganara más ingresos al tener más clientes? Por supuesto, van a decir que sí, quieren más negocios. Por eso están teniendo un sitio web hecho. Quieren generar más ingresos. Bueno, en base a mi experiencia profesional, esta es una forma de ayudar a vender tus servicios para que puedas asegurarte de que obtienes un mayor retorno tu inversión y asegurar a más clientes diciéndole a la gente por qué deben hacer negocios con ustedes. Muy bien, entonces ahora que hemos repasado eso, sigamos adelante y diseñemos esta sección en particular. Elegí una imagen del centro de Nueva York o de Manhattan, y elegí un skyline que me permitió colocar contenido dentro de él que también balanceaba con el resto de la imagen, con un edificio alto a la derecha y edificios adicionales. Golpéalo porque ahí es donde Manhattan Bridge Capital hace sus negocios, Manhattan o el centro de Nueva York. Por lo que quería agarrar una imagen de su patio trasero, por así decirlo. Por lo que para esta imagen en particular, fui a escoger sbeih dot com. Yo mecanografié en edificio de Nueva York. Seleccioné vertical para la orientación porque quería algo que proporcionara un edificio muy alto y no tanto una orientación paisajística. Por lo que una vez que tecleé esto y seleccioné vertical, la segunda imagen aquí mismo agarró mi intención. Me gusta el color de la imagen. Proporciona mucho skyline para nuestro impuesto. Simplemente necesitamos recortarlo de alguna manera para que nuestro edificio alto principal justo aquí esté apagado a la derecha y el contenido esté a la izquierda del mismo. Entonces si quieres descargar esta imagen, adelante y crea una cuenta gratuita y luego vamos a descargar el tamaño 12 80 por 1920 . Y también puedes llegar a este particular vinculado escribiendo este número. Y te llevará directamente a la URL de esta imagen en particular. Una vez descargado, puedes arrastrar y soltar eso en tu documento, así que es un archivo bastante grande, pero no cubre el completo con de nuestra página Web en este momento, y lo que quiero es una imagen de sangría completa, en otras palabras, bordeó el borde. Entonces vamos a volver a escalar esta imagen, pero también necesitamos hacer nuestro lienzo más grande también porque no tenemos suficiente espacio aquí abajo en la parte inferior. Entonces sigamos adelante y hagamos eso primero. Al subir a imagen y seleccionar tamaño de campus, asegúrate de que el dentro de la altura esté desbloqueado y vamos a hacer 5000 por la altura. Una vez que hagas clic en tu pestaña Clave, vas a ver la vista previa aquí mismo. Y va a mostrar todo el espacio extra que se va a agregar a tu lienzo. Adelante y haga clic en cambiar el tamaño. Otra cosa que tenemos que hacer es agarrar nuestra capa de fondo y y blanco al resto de ese lienzo también. Entonces voy a golpear las letras D y X para ponerme blanco en primer plano y luego con la herramienta llena de cubo con la letra G, puedo seguir adelante y llenar eso. El único problema es que nuestro límite de capa está confinado a la altura anterior de nuestro campus, así que vamos a subir a capa y seleccionar capa a tamaño de imagen, y eso aumenta el límite para esa capa en particular, y entonces podemos llenarla en. Está bien, así que nuestra imagen está dentro son tres columnas al menos para mí. No lo quiero ahí dentro, así que voy a sacar eso y vamos a tirarlo abajo también. Muy bien, sigamos adelante y redimensionemos nuestra imagen con nuestra herramienta de habilidad. Y el lienzo es actualmente 1400 pixels blanco. Entonces eso es lo que vamos a hacer por la imagen también. Y si está bloqueado, hará automáticamente la altura, que es 2100. Adelante y escalar, y luego necesitamos encender nuestra guía para que podamos mover esto a la posición y alinearlo con esa pauta que creamos antes en una lección anterior. Está bien, así que eso es lo más alto ahora. El único problema es que no tengo espacio para mi contenido aquí a la izquierda. Por lo que en realidad quiero hacer esto más grande para que el edificio se mueva hacia la derecha y nos dé más cielo abierto. Entonces vamos a agarrar de nuevo nuestra herramienta de báscula. Esta vez, voy a usar la esquina superior derecha aquí para hacer clic y arrastrar para hacerlo más grande. Entonces ahí mismo, adelante y escala, y la lección que tenemos que hacer es crear un fondo para nuestras tres columnas para que la imagen no esté sangrando en esa sección. Entonces vamos a entrar en nuestras tres columnas aquí. Vamos a crear una nueva capa llamada fondo Haga clic, OK, y necesito sacarla de esa capa de grupo y ponerla debajo de ella. Y luego voy a llenar con mi herramienta de cubo. Y por último, voy a seguir adelante y agarrar mi rectángulo seleccionable para poder seleccionar esta parte de la página web y desplazarme hasta abajo para que podamos quitar el fondo de esta zona y luego seguir adelante y solo tienes que hacer clic en tu delete o su clave de retroceso para eliminar esa parte del fondo. ¿ Podemos de seleccionar y apagar nuestras guías? Y ahora tenemos nuestra imagen en su lugar. Muy bien, sigamos adelante y creemos nuestro cuadro de texto y emisión. Necesitamos nuestras guías contra Sabemos exactamente dónde alinearlo del lado izquierdo porque queríamos alinearnos con todo el resto del contenido, aparecen también en la sección de héroes. Por lo que vamos a colocarlo justo en esta segunda guía, click y arrastrar hacia fuera tan justo por ahí. Y este es el tamaño de mi texto actual, Box 600 por 9 78 No tiene que ser ese exacto mismo tamaño Justus, siempre y cuando esté en este espacio vacío de nuestra imagen aquí, eso estará bien. Podría ser un poco demasiado alto. Necesito un poco más de espacio para mi titular. Entonces voy a bajar esto sólo un poquito. cangrejo de Kayla, nuestra capa de imagen y crea una nueva capa llamada cuadro de texto. Haga clic. De acuerdo, y entonces vamos a llenarlo con White. Creo que quiero bajar el tono del cuadro de texto solo un poquito del dedo del pie. Permita que parte de esa imagen pase por detrás de ella. Entonces dejemos caer un poco la opacidad por esto. Voy a hacer justo alrededor de los 80 así que justo ahí está bastante bien. No quiero hacer demasiado. De lo contrario, va a dificultar la lectura del texto. Adelante y agarremos nuestra herramienta de texto y tecleemos el título y hagamos Oswald negrita. Hagamos 75 por el tamaño así que justo ahí debería ser bueno y apaguemos todas nuestras otras capas para que podamos usar nuestra herramienta de alineación para alinear el titular directamente en el centro del cuadro de texto. Y antes de hacerlo, necesitamos subir a capa y seleccionar contenido recortado y luego mantener presionada la tecla de turno para seleccionar el titular. Y entonces podemos alinear Centro de Target. Muy bien, A continuación, vamos a sumar nuestros beneficios a nuestro cuadro de texto. Vamos a sumar 56 o tal vez siete párrafos, y lo que vamos a hacer es usar lo que se conoce como texto ficticio. Por lo que el texto ficticio es texto que utilizan los diseñadores Web para rellenar un espacio que requiere o debe tener contenido. Y se utiliza para llenar ese espacio porque el contenido final no está siendo proporcionado por el cliente. Entonces tal vez sean una empresa totalmente nueva. Todavía no tienen el contenido, Así que en lugar de tratar de llegar a algo que debería entrar ahí para ellos, vamos a usar texto ficticio en su lugar. Entonces no es legible, y no está destinado a ser leído. Simplemente se usa como relleno. Otro nombre para texto ficticio es Laura um, Ipsum. Es el estándar de la industria para maquetas de diseño y prototipos como diseños web y, como mencioné te permite mostrar a los clientes puntería o versión completa de tu diseño sin tener que invertir tiempo y redactar copia Riel. Pero a pesar de todos los beneficios de Warm ipsum, es solo texto latino aleatorio, y puede ponerse algo aburrido con el tiempo porque no es realmente legible. Y de una manera eso está bien, porque realmente no quieres que los clientes se estén enfocando en el contenido. Quieres que se centren en el diseño. Pero si tienes un cliente que tiene un buen sentido del humor, conduces a una búsqueda en Google de generadores de texto ficticios, y encontrarás muchos sitios diferentes que ofrecen diferentes tipos de contenido versus solo contenido latino aleatorio. Y aquí te dejamos una lista de algunas de las opciones que están disponibles. Vas a tener texto ficticio en tocino. Si a tu cliente le gustan los gatos, puedes hacer no puedes ipsum magdalenas y muchos más. Hay uno para Bob Ross. Si no estás familiarizado con él, es de los ochenta. Ah, hay uno para Harry Lips, um, y muchos más. Así que solo haz una búsqueda en Google de cuatro generadores de texto ficticio, y puedes conseguir algunos de estos tipos de Laura Um em algunos generadores para usar como relleno para tu contenido. Entonces solo voy a seguir adelante y hacer una búsqueda en Google para Laura. Um, cadera algunos. Y este 1er 1 aquí es simplemente viejo, aburrido texto latino. Entonces sigamos adelante y agarremos cuatro o cinco párrafos de este texto ficticio. Vamos a copiarlo, y luego vamos a agarrar nuestra herramienta de texto y pegarlo. Ahora, lo otro que podemos hacer realmente rápido es que podemos hacer ajustes a nuestras opciones de herramientas por aquí. Por lo que tenemos el tamaño correcto del texto versus tener que rehacerlo aquí arriba. Entonces voy a seguir adelante y cambiar mi talla aquí abajo a 16. Voy a cambiar la fuente a Georgia, y voy a cambiar el color a ese color gris oscuro que usamos anteriormente. Que son todos estos tres números aquí no pueden ahora, una vez que pegue, terminará sumando en los estilos de fuente que escribimos por aquí. Ahora lo otro que tenemos que hacer es agarrar una de estas esquinas y seguir redimensionando ese texto hasta que quede dentro de ese cuadro de texto. Presionemos comando o control end zero para acercar todo el camino hacia fuera, y eso hará que sea más fácil y rápido cambiar el tamaño de este cuadro de texto. Entonces solo lo voy a poner justo dentro de aquí y vamos a seguir adelante y acercar de nuevo. Ahora sigamos adelante y una mentira ese texto directamente en el centro de nuestro cuadro de texto, vamos a agarrar ese cuadro de texto primero con nuestra herramienta de alineación, mantenga presionada su llave de nave y haga clic en el texto y luego un centro acostado y medio de objetivo . Otra cosa que quiero hacer es volver a nuestro texto aquí y cambiar el tamaño de los títulos de cada párrafo. Entonces voy a hacer 20 por la talla y también voy a hacer una negrita también voy a añadir un espacio entre el párrafo y el título también. Entonces hagámoslo por cada título solo hace que sea un poco más fácil de leer. Y no me preocupa tanto que el texto no llene toda el área. Tenemos texto extra aquí que está más allá de la parte inferior de nuestro cuadro de texto, pero eso está bien. Si este fuera texto real del cliente, entonces pasaría un poco más de tiempo consiguiendo el cuadro de texto el tamaño adecuado en las fuentes, el dedo del tamaño adecuado tienen todo cabida. Pero por ahora, esto saldrá bien. De acuerdo, sigamos adelante y volvamos a encender nuestras otras capas. Hay una última cosa que creo que deberíamos hacer, y creo que deberíamos bajar el tono del color de esta imagen en particular, para que coincida mejor con el resto del sitio. Está un poco demasiado caliente, así que quiero tonificarlo agregándole una superposición de color. Entonces sigamos adelante y agarramos esa capa de imagen. Vamos a renombrarlo Trade Center, que es el nombre del propio edificio, este grande de aquí. Y luego vamos a crear una nueva capa llamada superposición de color. Escojamos un bonito color azul. Cualquier color azul servirá, y luego lo llenemos con ese color y luego bajemos la opacidad a alrededor de 15 a 20 . Y creo que eso definitivamente ayuda a enfriar un poco la imagen. Por lo que no es tan cálido, y mejor coincide con el resto del sitio. Por lo que de nuevo, diseñando esta parte de la página web Super simple. Es solo cuestión de comunicarse con nuestros clientes por qué necesitan esta sección en particular en su sitio web y cómo no sólo los beneficiará a largo plazo, sino que va a facilitar a los prospectos decidir si deben hacer negocios con ellos contra alguien más. Y si estos beneficios que tienen para ofrecer no están siendo ofrecidos por la competencia, entonces las posibilidades son buenas. Van a asegurar su negocio Ahora. En la siguiente lección, vamos a seguir adelante y crear otra sección para esta página Web en particular que va a ayudar a los visitantes a determinar si quieren hacer negocios con esta empresa o no. Y de alguna manera, también va a ayudar a Manhattan Bridge Capital. Porque lo que vamos a hacer es agregar una sección F A Q, y vamos a tomar sus preguntas más frecuentes y responderlas por esos prospectos ahora para que esas preguntas sean respondidas antes de que se pongan en contacto con Manhattan Capital, que en turno les ahorra tiempo de no tener que contestar esas preguntas por teléfono o en persona. Entonces si estás listo para empezar con eso, hagámoslo 37. Cuerpo parte 2: Hola y bienvenidos de nuevo. Muy bien, entonces en esta lección, vamos a crear nuestra sección de preguntas frecuentes, y esto brindará un par de beneficios a los visitantes del sitio web y beneficios a su cliente también. Para los visitantes, les va a dar fácil acceso a respuestas a preguntas que van a tener antes de dar ese paso de comprar a esta empresa en particular. Y luego pueden decidir si quieren pasar a la siguiente parte del proceso de decisión de compra en base a las respuestas que obtienen de aquí. En lo que va tu cliente, les ayuda porque uno no tienen que responder estas preguntas en persona o en el teléfono o un correo electrónico, y a especie de, de alguna manera pre califica a un prospecto. Porque si un prospecto obtiene estas respuestas a estas preguntas específicas y decide continuar mientras están muy interesados en lo que tienes que ofrecer, lo que tu cliente tiene para ofrecer porque no decidieron, sabes qué, No me gustan estas respuestas. Voy a ir algunos resultados. A ellos les gusta la respuesta, por lo que quieren continuar con el proceso de decisión de compra con el fin de hacer negocios con su cliente. Entonces para este diseño, es realmente simple. Tenemos algo de texto. Tenemos titular. Tenemos un botón, tenemos un cuadro de texto que sostiene la pregunta, y luego también vamos a crear un estado de flotación que muestre lo que sucede al hacer clic en este pequeño ícono de aquí. En realidad se va a expandir para revelar la respuesta debajo de ella, y vamos a diseñarla y configurarla de alguna manera. Entonces el desarrollador sabe que este es un estado de flotación y qué va a pasar cuando se haga clic en el botón antes de que empecemos en la sección de la FAA, vamos a seguir adelante y hacer algunos ajustes en nuestra cuadrícula. Lier así como organizadas son capas de la sección anterior, por lo que necesitamos extender nuestra cuadrícula hasta la parte inferior de la página, y lo vamos a hacer con nuestra herramienta de escala. Voy a teclear 5000 para la altura, y también necesitamos organizar estas capas. Entonces pongámoslos en un nuevo grupo de capas llamado ¿Por qué Manhattan? Muy bien, sigamos adelante y empecemos en la sección de la FAA con nuestra herramienta de texto. Vamos a crear nuestro titular, y vamos a usar Oswald Bowled 72 para el color, voy a elegir nuestro color verde que hemos estado usando a lo largo de este proyecto y luego en todas las mayúsculas de una Q y minúsculas s Muy bien, alineemos esto al lado izquierdo aquí para alinearlo con todos los demás contenidos de la sección de héroes . Está bien, sigamos adelante y creemos nuestro primer cuadro de preguntas, y vamos a hacer que sea de seis columnas de ancho, razón por la cual extendimos la cuadrícula para que sea un poco más fácil para nosotros. Entonces sigamos adelante y agarramos nuestra herramienta de selección de rectángulo y apaguemos fijo y luego solo creamos seis columnas de ancho, y también quiero cambiar la altura para que sean 67 píxeles y necesitamos crear una nueva capa. Llamémoslo cuadro de texto de pregunta y sigamos adelante y llenemos eso con Blanco, y también quiero agregar un trazo a la selección también. Entonces subamos a editar y seleccionar selección de trazos. Voy a hacer una línea con de uno, y también necesito asegurarme de que tengo el negro set al primer plano y ahora tenemos nuestro trazo. Adelante y acerquemos y asegurémonos de que esto esté correctamente alineado con todo lo demás . Parece que está un poco apagado, así que voy a agarrar mi herramienta de movimiento y hacer clic en ella y luego usar mi tecla de flecha derecha para moverla . Y veamos si el lado derecho está dentro de esa columna. No lo es. Queremos una alineación perfecta de píxeles, y vamos a seguir adelante y redimensionar eso con nuestra herramienta de escala. Pero primero tenemos que subir a capa y seleccionar recortar el contenido, y luego podemos agarrar nuestra herramienta de escala en el lateral para jalarla. Muy bien, sigamos adelante y creemos nuestro botón para este cuadro de texto en particular. Por lo que volver a la herramienta de selección de rectángulo. Esta vez voy a volver atrás y seleccionar relación de aspecto fija y vamos a seguir adelante y teclear. Hagamos 42 por la talla. También quiero agregar esquinas redondeadas y vamos a subir a seleccionar rectángulo redondeado, y voy a hacer 20 por el radio para mis esquinas redondeadas, y luego voy a agarrar un color azul claro para rellenarlo con. Y antes de que hagamos eso realmente rápido, necesitamos crear una nueva capa. Llamémoslo botón pregunta el selecto y sigamos adelante y agarra nuestra herramienta de marquesina de nuevo para que podamos alinearla directamente en el centro de esta columna. Apagemos fijos para que podamos arreglar eso justo en la ubicación. Nosotros lo necesitamos. Está bien, apaguemos estas capas. Aquí lo podemos seleccionar con nuestra herramienta de alineación. Y antes de volver a hacer eso, tenemos que subir a capa y seleccionar el cultivo al contenido. Y luego necesitamos asegurarnos de que tenemos selección seleccionada y luego una línea de centro y medio de objetivo. Muy bien, volvamos a nuestra herramienta de texto para que podamos añadir un pequeño símbolo dentro. Simplemente voy a escribir un signo más, y también voy a cambiarlo dedo del pie Blanco. Entonces de nuevo, estoy usando Oswald bowled 72 y ahora solo necesitamos moverlo a su posición. Entonces esta vez sólo voy a usar mis teclas de flecha para ponerlo justo en el centro. Muy bien, sigamos adelante y creemos un nuevo grupo anterior para estas dos capas. Llámalo botón pregunta. Y ahora vamos a seguir adelante y escribir nuestra pregunta. Voy a cambiar la fuente a Georgia. Hagamos 18 por la talla y luego son de color gris oscuro. Y luego solo escribe una pregunta que voy a hacer. ¿ Cuál es tu tasa de interés de 90 días? ¿ En realidad quieres hacer eso más grande? Voy a hacer 24 puntos. De acuerdo, Vamos a mover esto a la posición justo sobre que debería ser bueno. Echemos un vistazo a nuestra orientación. Entonces está justo a lo largo de ese borde de esa columna. Eso es perfecto. Solo necesito asegurarme de que esté perfectamente centrado, arriba a abajo también. Entonces sigamos adelante y hagamos nuestra selección para que podamos hacer eso. Y si es necesario, tiró de esa capa afuera, puedes seleccionarla y luego un medio acostado del objetivo. De acuerdo, entonces eso está alineado. Adelante y vuelve a poner eso. Está bien. El siguiente paso es crear nuestros cuadros de texto de preguntas adicionales, pero primero necesitamos ponerlos en un nuevo grupo de capas. Y llamémoslo pregunta uno puede. Vamos a poner todas esas capas y firmar, excepto la F a Q. No queremos eso ahí dentro, porque eso está separado. Entonces en realidad vamos a poner ese en la parte superior y estoy un ir adelante y apagarlo sólo por el momento. Y vamos a seguir adelante y agarrar nuestra pregunta una capa agrupada y duplicada tres veces. De acuerdo, ¿qué? ¿ Se trasladan a qué? Solo vamos a seleccionar cada capa y abajo. Creo que quiero acercarlos un poco más, y luego vamos a usar nuestra herramienta de alineación para distribuir uniformemente la cantidad de espacio entre ellos . Pero creo que tenemos un pequeño problema porque puedo decir por el límite de capa ahora mismo está fuera de nuestro cuadro de texto. Debe estar a lo largo de la parte superior y la inferior aquí. Y creo que eso es por nuestro pequeño signo más que creamos. Podemos ver que es mucho más alto que el resto de la caja, así que vamos a entrar y agarrar cada una de estas capas y recortar el contenido de la capa hasta el tamaño real de ese elemento en particular. Entonces vayamos dentro de cada una de estas preguntas y sigamos adelante y hagamos eso. Está bien, ahora, que lo hemos hecho, podemos ver que el límite de la capa ahora se coloca exactamente donde lo queremos. Sigamos adelante y hagamos nuestras selecciones con nuestra herramienta de alineación. Presione la tecla de turno y suelte y vuelva a presionar la tecla de turno para cada elemento. Y luego vamos a ir a relativo al primer ítem, y luego vamos a seleccionar esta opción aquí para distribuir centros verticales. El único problema es que todos se superponen y ahora están en la misma ubicación. Entonces vamos a deshacer eso con Commander Control y las letras A Y lo que tenemos que hacer es decirle a gimp cuántos píxeles queremos compensar el espacio vertical. Así que intentemos 100 y luego seleccionemos esta opción aquí de nuevo. Y ahora se agrega perfectamente una cantidad pareja de espacio entre cada pregunta. Si cambiamos este número a otra cosa que va a aumentar la cantidad de espacio, así que vamos a quedarnos con 100 por ahora porque creo que eso va a salir bien. Otra cosa que quiero hacer es asegurarme de que cada una de estas capas de grupo estén en la ubicación adecuada y luego voy a renombrar cada una de estas capas. Pregunta dos a cuatro. Ahora, tomemos estas cuatro capas y las pongamos en un nuevo grupo anterior. No voy a renombrarlo ahora mismo porque todo lo que vamos a hacer es tomar este grupo y duplicarlo dedo del pie. Agrega cuatro preguntas más del otro lado. Case tomará este grupo de capas, lo duplicará y luego podremos moverlo hacia la derecha. También encendió mi grilla para que pueda ver a dónde va. Entonces ahí mismo, ahí vamos. Voy a poner este grupo de capas de top Y en realidad, sigamos adelante y cambiemos el nombre de éste también. Preguntas. Entonces tenemos nuestro uno a cuatro, y luego vamos a tomar estos grupos de capas aquí y ponerlos dentro de aquí y luego cambiarles el nombre de cinco a ocho. Y ya no necesitamos éste. Algo adelante y borra esa también. ¿ Podemos simplemente necesitar organizar nuestras capas sólo un poquito aquí? Voy a seguir adelante y encender algunas de mis otras capas aquí también. Vamos a encenderlos todos para clavo. Probablemente un buen momento para salvarlo. Entonces voy a seguir adelante y ahorrar con Commander Control y la letra s. Ahora, sólo tenemos que traer todo arriba porque tenemos demasiado espacio aquí arriba. Entonces voy a tomar una medida del espacio aquí mismo, Toe Agrega eso en la parte inferior de la página de Manhattan también. Entonces tomemos nuestra herramienta de medición. Y hagamos una medición de aquí a aquí, y se ve como 75 píxeles. Entonces voy a añadir la misma cantidad de espacio aquí mismo. 75 píxeles. Yo estaba en un guía ahí, y entonces simplemente vamos adelante y movemos todo hacia arriba. Muy bien, sigamos adelante y hagamos otra medición. Yo quiero saber cuánto espacio hay aquí mismo. Entonces vamos a medir eso. Por lo que tengo 32 pixeles. El tuyo podría ser diferente. Eso está bien. Basta con medirlo, averiguarlo. Y luego desde el fondo de la Q. Mida cuánto espacio necesitas. Tenía 32 y luego vamos a colocar nuestras preguntas justo a lo largo de esta guía. De acuerdo, Así son falsos. Se hace tu sección. No necesitamos crear un estado hover para que nuestros clientes y nuestro desarrollador Web sepan cuál es el código. Cuando una persona hace clic en este pequeño botón, lo que va a pasar es que va a abrir un cuadro de texto con la respuesta a la pregunta. Y como este tutorial en particular se está haciendo bastante largo, seguiremos adelante y lo dividiremos en la segunda parte en la siguiente gira de dos. ¿ Estás bien? Entonces si estás listo para hacer eso, sigamos adelante y sigamos en la siguiente lección. 38. Cuerpo parte 3: Hola y bienvenidos de nuevo. Muy bien, así que vamos a seguir adelante y terminar nuestra sección F A Q con nuestro estado flotante que mostrará la respuesta a nuestras preguntas. Por lo que lo primero que tenemos que hacer es crear un nuevo grupo Lear para la parte actual de la sección R. F. F. A Q. Démosle el nombre F A. Q. Pongamos a estos dos dentro, y sigamos adelante y navegamos a nuestra primera pregunta y duplicarla. Vamos a renombrarlo Responder, y vamos a sacarlo todo el camino. Mano por encima de la F A Q. Capa agrupada. Muy bien, así que hagamos algunas modificaciones a esta capa o capas en particular. Queremos seleccionar el símbolo más que creamos previamente. Adelante y acerquemos aquí para que veamos agarrar tu herramienta de texto y dar click en ella. Entonces recibimos un pequeño mensaje de gimp preguntando si queremos editar nuestro texto. Hacemos clic en él y recordamos la razón por la que conseguimos eso fue porque redimensionamos el límite de la capa y lo recortamos hasta el símbolo mismo. Entonces sigamos adelante y seleccionemos todo con el control Commander y a Vamos a cambiarlo a un signo menos y cambiémoslo a Blanco y luego solo vamos a seguir adelante y agarrar nuestra herramienta de movimiento y ponerlo en posición. Entonces solo voy a usar mis teclas de flecha para colocarlo visualmente directamente en el medio. Justo ahí debería de ser bueno. Y ahora solo necesitamos agregar nuestro pequeño icono de mano flotante en esta zona aquí mismo. Entonces vayamos a Google y hagamos una búsqueda de íconos de mano de estado hover. Y luego queremos ligeramente PNG y Pointer. Y creo que el que encontré es éste de aquí. Es un archivo PNG, Así que voy a seguir adelante y copiar esto y pegarlo en. Por lo que tenemos una selección flotante, por lo que necesitamos dedo del pie y ella a una nueva capa haciendo clic derecho y seleccionando dos nueva capa. Vamos a renombrar este icono de flotar. También es demasiado grande, Así que lo vamos a escalar hacia abajo con nuestra herramienta de escala y para las alturas. Adelante y vincula esto para la altura. Voy a hacer 40. Voy a seleccionar capa para recortar el contenido. Vamos a hacer clic en escala. Está bien, así que ahora que ha desaparecido Vamos a seguir adelante y acercar todo el camino con Commander Control y cero ahí está. Por lo que siempre y cuando se haya movido activamente o seleccionado y pase el cursor sobre el icono Lear seleccionado, lo podrá encontrar. Ponlo en posición aquí y ya casi terminamos. Vamos a seguir adelante y crear nuestro cuadro de texto de respuesta. Vamos a crear una caja, llenarla con algo de texto y estaremos todos terminados. Entonces sigamos adelante y salgamos de nuestra capa agrupada de respuesta solo por un momento, y vamos a crear un nuevo antes y llamémoslo cuadro de texto de respuesta y luego simplemente dibujemos un rectángulo que cubrirá las tres de las otras preguntas que hay debajo de él. Y luego con White lo llenará, y también queremos agregarle un trazo a su alrededor también. Entonces subamos a editar y seleccionar selección de trazos. Voy a cambiar el primer plano de nuevo a Negro y añadir mi trazo. Kate. Vamos de seleccionar y necesito seleccionar mi herramienta de movimiento y hacer clic en ella y luego usar mis teclas de flecha solo para moverla un poco. Justo ahí se ve bien. Y ahora estoy un poco demasiado lejos del lado derecho. Entonces sigamos adelante y recortemos para contentar el límite de la capa. Y luego con nuestra herramienta de habilidad, sólo vamos a bajarla un poco entre ir adelante y escribir 305 y tratar eso para probar tres o 43 o cuatro obras. Escalarlo. Perfecto. De acuerdo, sigamos adelante y alejemos aquí y sigamos adelante y pongamos esto dentro ahora. Está bien. Cuatro. Nuestra respuesta. Vamos a empezar con una letra grande, toda una mayúscula, y cambiemos esto a verde. Ponle un poco de periodo al final, y sólo voy a poner esto en posición. ¿ Todo bien? Adelante y encontremos algún texto ficticio. Yo quiero agregar algo de tocino. Es, um así que voy a hacer dos párrafos. Va a ser todo carne y vamos a dar click en, Dame algo de empezar. Muy bien, así que eso probablemente sea demasiado contenido. Entonces voy a seguir adelante y describir el primer párrafo. Copia eso, y luego voy a seguir adelante y añadir eso en. Entonces en lugar de solo hacer clic y pasar el ritmo, vamos a crear un cuadro de texto donde queremos que sea ese texto así que voy a dar clic y arrastrar hacia fuera un cuadro de texto aquí y ahora puedo pasar el ritmo y no tenemos que preocuparnos por volver a dimensionar el cuadro de texto. Tan pequeñas cosas. Te voy a presentar nuevos consejos y técnicas para trabajar con gimp. Adelante y cambiemos las señales a 16. Vamos un poco más grande. 17. Yo quiero llenarlo para probar 18. Perfecto. Entonces 18 funciona, Pero es la fuente equivocada. Vayamos a Georgia y solo voy a bajar aquí y pegar en algunos o contenidos lo que lo llena todo. Y ella quiero hacer este cuadro un poco más pequeño. Está lloviendo este ipsum iniciado, y ahora sólo necesitamos alinearlo. Por lo que está directamente en el centro desde la parte superior e inferior del cuadro de texto de respuesta. Diga que 10 veces real rapido. Está bien, sigamos adelante y dibujemos una selección. Entonces justo ahí debería ser bueno. Agarremos nuestra herramienta de alineación y cambiémosla a selección. Ahora bien, no estoy seguro si voy a poder seleccionar esto, así que voy a seguir adelante e intentarlo. No se parece. Entonces vamos a sacar esto todo el camino. Inténtalo de nuevo. No, tenemos que apagar todas nuestras capas en el proceso de hacer nuestra selección de alineación. Y ahora podemos seguir adelante y una línea en medio de objetivo. Nosotros de selecto y volvamos a encender todo lo demás. Y luego sigamos adelante y pongamos esos de nuevo dentro. Ahora sí tengo un poco de casta de color azul en lugar de blanco puro. Y eso es por esa capa de color que creamos dentro de la sección de Manhattan. Y lo que tenemos que hacer es añadir una máscara de capa para que podamos quitar ese color fundido del resto del documento aquí abajo. O podemos cagar el límite de la capa a esa sección. Entonces sigamos adelante y hagamos eso. En cambio. adelante y creemos una selección a su alrededor y luego subamos a capa y seleccionamos recortar a selección de selección, y ahora nuestro límite de capa de recorte está establecido en ese tamaño, y eliminó esa superposición de color del resto del documento. Ahora solo quiero limpiar un poco esto porque tengo un poquito de texto mostrando aquí. Entonces volvamos dentro de esa capa de texto y eliminemos todo ese contenido. ¿ De acuerdo? Nuestra sección ya está hecha. Tenemos nuestro estado flotante. Tenemos todas nuestras preguntas. Y cuando presente esto a mis clientes, voy a dejar visible este estado flotante para que sepan cómo se ve cuando alguien hace clic en aire se cierne sobre esta área en particular. Y luego cuando lo enviemos al desarrollador web, toparán con estas capas agrupadas y se darán cuenta de que este es un estado flotante y codificarán cada una de las preguntas en consecuencia, en base a la información que les dimos en nuestro diseño. Muy bien, entonces en el siguiente tutorial, vamos a seguir adelante y empezar a trabajar en la sección de conexión. 39. Cuerpo parte 4: Hola y bienvenidos de nuevo. Muy bien, entonces en esta lección, vamos a cubrir el diseño de la sección Contáctanos. Ahora. Tenían una página de contacto de EU a la que podrías acudir para llenar un formulario, y luego te devolverían la llamada o te enviaban un correo electrónico de vuelta y luego en su página principal. Sí tenían la dirección de su oficina así como su número de teléfono, pero está un poco metido por aquí a la izquierda. Es un poco difícil de leer, y en general, me parece muy difícil que los clientes potenciales se pongan en contacto con esta empresa. Por lo que queremos hacerlo lo más fácil posible y darles unas opciones Zeman E. Entonces he puesto todo en un solo lugar frente a dividirlo todo, así que tenemos una forma de enviarlos por correo electrónico. Tenemos su dirección. Tenemos su número telefónico y el mejor momento para llamar porque sus oficinas abren entre estas horas. También he incluido un mapa de Google de su oficina para que puedan obtener indicaciones directamente desde esta sección del sitio web. Entonces todas estas cosas, incluyendo este pequeño ex de aquí, si solo quieren enviar un correo electrónico y enviar una pregunta o dos. O tal vez sólo quieren ponerse en contacto con ellos. De esta manera, por favor. Llámame en este momento. Sea cual sea el caso, solo quiero que sea tan fácil para los prospectos o clientes existentes ponerse en contacto con ellos en lugar de dividirlo en páginas separadas como lo hicieron aquí, donde tienen una página de contacto con nosotros. Y luego por aquí, como que tienes dedo de la búsqueda de la información de contacto. No es realmente un buen lugar para decirlo, porque realmente no estás esperando información de contacto aquí a la izquierda. Quieres saber más sobre la empresa primero y después Ok, sí. A mí me gusta esta empresa. Quiero ponerme en contacto con ellos. Bueno, sí, está bien aquí. Pero de nuevo, es solo un diseño muy, muy malo y un mal diseño. Y me parece que esto es mucho más invitante un más fácil para los prospectos o clientes obtener la información que necesitan, porque tal vez quieran visitar la oficina directamente en lugar de llamar o enviar un correo electrónico. A lo mejor están en la zona, y simplemente pueden obtener rápidamente indicaciones desde el sitio Web aquí. Entonces sigamos adelante y armemos este diseño juntos. Está compuesto en su mayoría de formas, por lo que va a ser realmente fácil de diseñar y armar. Basta con encontrar algunos iconos y luego una imagen de Google Maps. Entonces sigamos adelante y hagamos eso primero. Adelante y ve a Google. Escriba iconos de negocios gratuitos y adelante y descargue algunos iconos para correo electrónico. Encuéntranos y llámanos así que usa lo que todos quieres. Te recomiendo usar archivos PNG porque vamos a agregar una superposición de color versus usar iconos que airen iconos pre coloreados o en blanco y negro. Entonces puedes dirigirte a Google maps y teclear 60 molino cortador número de carretera 205 Y aquí está el código postal justo aquí. Así que adelante y teclea eso. Deberías conseguir algo como esto. Y entonces lo que hice fue condensarlo un poco para poder tener algo en un formato más horizontal. Y luego solo usé un enchufe de captura de pantalla aquí para capturar, y luego lo copié y lo agregué a mi documento. Así que adelante, descarga esas imágenes y vamos a seguir adelante y empezar. De acuerdo, ahora que tenemos nuestros iconos y nuestro mapa de Google, Vamos adelante y terminemos nuestra sección de contactos. Lo primero que quiero hacer es tomar estos iconos y una superposición de color para cambiar el color del negro a un color específico. El problema es, y gimp, no tenemos una herramienta de superposición de color. Pero eso está bien, porque te voy a mostrar cómo agregar una superposición de color a tus iconos. Entonces lo primero que voy a hacer es agarrar mi icono de mapa o mi icono de dirección y también los coloqué en orden en función de dónde se van a posicionar, y los renombré en consecuencia también. Entonces si no has hecho eso, adelante y hazlo a continuación. Vamos a seguir adelante y crear una nueva capa. Voy a llamarlo superposición de color. Y luego voy a usar mi recolector de color aquí para seleccionar el azul de este botón, y luego lo vamos a llenar con nuestra herramienta de llenado de cubitos. Muy bien, siguiente paso es subir a nuestro modo de fusión y seleccionar uno de los modos y vamos a elegir suma y bam. Mira eso. Ahora tenemos una superposición de color en cada ícono. ¿ Qué tan guay es eso? El único problema es que es agregar esa superposición de color a todas las capas debajo de ella. Por lo que nuestros Google Maps también tienen esa superposición de color. Entonces hay una solución fácil para eso. Y hablamos de cómo hacer esto Previamente en cómo confinar un color específico a capas específicas. Por lo que probablemente ya recuerdes cómo hacer eso. Es decir, eso es correcto. Vamos a subir y crear un nuevo grupo de capas. Vamos a llamarlo superposición de color. Y luego una vez que coloquemos todas las capas dentro de ella, esa superposición de color se va a aplicar sólo a las capas dentro de ese jugador de grupo. ¿ Qué tan guay es eso? Está bien, me encanta. De acuerdo, así que lo siguiente que quiero hacer es en realidad agarremos estas capas y simplemente moverlas un poco hacia abajo . Yo quiero agregar nuestro titular para esta sección, así que vamos a entrar en F. A. Q. Vamos a seleccionar la capa de texto F A Q, y vamos a duplicarla. Adelante y saquemos eso de ese jugador de grupo y ponerlo por encima de las superposiciones de color. Cerremos F a Q y cambiemos el nombre de este contacto. Y ahora solo necesitamos agarrar nuestra capa con nuestra herramienta de movimiento y moverla hacia abajo. Está bien. Ahora, con su textil saldrá adelante y renombrará este contacto. Hagamos todas las mayúsculas, y creo que necesitamos trabajar un poco en nuestro espaciado. Quiero asegurarme de que tengamos una cantidad igual de espaciado aquí y aquí por consistencia. Pero también quiero subir a nuestro titular de Manhattan aparece para encontrar la medición aquí porque creo que tenemos menos espacio aquí frente a esta área de aquí abajo. Y hicimos una medición previamente, pero quiero apretar un poco las cosas, y quiero usar la misma cantidad de espacio que tenemos aquí. Entonces tomemos nuestra herramienta de medición y medimos desde la parte superior de esta sección hasta la parte superior de esta letra y tengo 57 píxeles de espacio. El tuyo puede ser diferente. Eso está bien. Basta con medirlo porque vamos a seguir adelante y medirlo aquí y añadir una nueva pauta. Voy a volver a mi herramienta de movimiento, y necesito seleccionar escoger una capa o guía para poder deshacerme de este tipo que teníamos anteriormente. Entonces sólo voy a subir eso. Yo también puedo deshacerme de éste, porque ahora vamos a mover todo a esta pauta. Por lo que volver a la mudanza, herramienta y seleccionar. Mueve la capa activa y asegúrate de tener seleccionado al jugador del grupo F A Q. Entonces una vez que agarres eso, puedes seguir adelante y moverlo hacia arriba en posición. Y si es necesario, también puedes usar tus teclas de flecha para alinear todo donde debería estar. Muy bien, vamos a seguir adelante y volver a nuestra herramienta de medición y hacer otra medición desde la parte inferior de esta sección con la misma cantidad de píxeles que antes para colocar nuestra incursión de sección de contacto a lo largo de esa línea. Entonces sigamos adelante y agarremos otra pauta. Colócala ahí mismo, y luego podremos mover nuestra capa de contacto en posición. De acuerdo, vamos a seguir adelante y trabajar en nuestras formas ahora y vamos a trabajar en el espaciado. Una vez que tengamos todo listo, voy a seguir adelante y encender mi grilla solo por un momento. Entonces porque estábamos usando un sistema de cuadrícula de 12 columnas. Podemos dividir cada una de estas secciones en cuatro columnas y con. Entonces usemos nuestra herramienta de medición para averiguar el con de esas cuatro columnas en sus 375 píxeles. Ahora, con nuestro rectángulo seleccionable, vamos a asegurarnos de que tenemos fijo encendido con relación de aspecto, y vamos a dibujar una forma y luego escribir 3 75 Necesitamos crear una nueva capa antes de rellenarla con color. Entonces hagámoslo. Llamemos a esta dirección. Escojamos un color gris claro. Cualquier color está bien. Simplemente sigue adelante y elige uno y luego llénalo con tu herramienta de llenado de cubitos. Añadamos también un trazo subiendo a editar la selección de trazos, y tenemos que asegurarnos de que tenemos negro para el cuatro gramo y luego añadirle ese trazo. De acuerdo, solo voy a agarrar mi herramienta de movimiento. Necesito de seleccionar primero con Commander Control y D y pasar eso. Otra cosa que necesito hacer es recortar el límite de la capa, así que sigamos adelante y hagamos eso. Sube a capas de contenido corrupto, y luego vamos a mover eso justo a su posición. Ya que estamos aquí, sigamos adelante y midamos nuestro espaciado, y quiero una cantidad igual de espacio que tenemos de aquí para aquí. Entonces con nuestra herramienta de medición, sigamos adelante y medimos desde la parte inferior de la Q Teoh aquí, y tengo 34 píxeles, algunos para seguir adelante y medir eso fuera. Adelante y agréguese para que pueda obtener una mejor medición. Añadamos su guía, y entonces podremos seguir adelante y mover esta casilla a su posición. Sigamos adelante y movamos esa capa en particular. A continuación se muestran los iconos también. De acuerdo, sigamos adelante y tomemos nuestra forma de dirección y duplicados dos veces y luego solo sigamos adelante y moverlo a su posición. También quiero reorganizar las capas para que estén en orden. Y luego cambiemos el nombre antes es que voy a hacer correo electrónico y teléfono. Muy bien, agarremos nuestra herramienta de alineación con la letra A y sigamos adelante y apaguemos todas nuestras capas para que nos resulte más fácil seleccionar esas capas y luego, con su tecla de turno, seleccionaremos la otra dos y Vamos a cambiarlo de relativo a primer elemento y una mentira a la parte superior. De acuerdo, volvamos a encender todo lo demás. Además de nuestra grilla. De acuerdo, Ahora solo necesitamos rellenar nuestras formas con la información de contacto para cada sección. Y creo que solo quiero mover estos iconos porque quiero poner la parte de la dirección por aquí. Entonces está justo encima de los Google Maps porque vamos a hacer este mapa de Google más pequeño en tan solo un minuto. Entonces sigamos adelante y movamos estos iconos. Vamos a entrar en la superposición de color y luego simplemente moverlo y voy a tomar mi icono de correo electrónico. Se mudó aquí y luego telefoneó en medio. También movamos la dirección hacia abajo al fondo solo para mantenerles un orden. Y ahora podemos agarrar nuestra herramienta de texto para agregar esa información. Por lo que el 1er 1 va a ser correo electrónico. Voy a cambiar la fuente a ferrocarril y luego para el tamaño va a hacer 36. Y también quiero cambiar el color a un color gris oscuro. Entonces voy a hacer 333333 Ahora el problema es porque tenemos nuestra capa de texto dentro de esta capa de grupo. No nos va a permitir cambiar de color porque se le está aplicando la superposición de . Entonces así es como lo vamos a arreglar. Vamos a tomar esta capa, y vamos a moverla por encima del color o Relais. Y ahora, porque está por encima, va a agregar el color que seleccionamos con la herramienta de texto. De acuerdo, vamos a duplicar eso y vamos a nombrarlo teléfono y vamos a duplicar ese, y lo llamaremos dirección y luego sólo ponerlos en la posición apropiada. Vamos a seguir adelante y agarrar nuestra herramienta de texto y renombramos a cada uno. De acuerdo, sigamos adelante y agreguemos alguna información adicional. Ahora, ¿qué seleccionó el textil? Quiero pasar a mis opciones de herramientas para hacer mis selecciones desde aquí para que no tenga que hacerlo desde H Layer individualmente. Entonces vamos a hacer Georgia por la fuente. Vamos a hacer 16 por el tamaño, y luego usaremos el mismo clic de color gris oscuro, OK, y solo vamos a escribir una dirección de correo electrónico falsa. Quiero seleccionar aquí todo este texto y alinearlo al centro. De acuerdo, sigamos adelante y trabajemos en volver a dimensionar nuestros mapas de Google y agregar nuestro formulario aquí a la izquierda. Y luego en el siguiente tutorial, seguiremos adelante y trabajaremos en realinear todo y conseguir todo exactamente donde necesitan estar. Entonces para los Google Maps, lo que quiero hacer es limitarlo a ocho columnas, así que vamos a hacer una forma de ese tamaño y luego pondremos el mapa dentro de ella. Entonces tomemos nuestra herramienta de medición y averigamos el tamaño que necesitamos, y se ve como 775 píxeles de ancho. De acuerdo, salgamos de esta capa de grupo en particular y vengamos aquí a Google Maps y creemos una nueva capa. Vamos a llamarlo Google Maps y luego, con nuestro rectángulo seleccionable, seguirá adelante y creará un tamaño de 7 75 por 500. Así que asegúrate de haber arreglado apagado. Y vamos a escribir eso en así 775 tecla de tabulación Oops fue demasiado lejos. 500. Entonces creo que eso es un poco demasiado alto. Vamos a seguir adelante y redimensionar eso a 3 75 para que sea más una forma de rectángulo para que este mapa quepa un poco mejor dentro de ahí. Voy a presionar la tecla X para poder cambiar mi color de primer plano, dedo blanco, y luego seguiré adelante y lo llenaré con mi filtro de cubo, y quiero volver a agregar ese trazo. Entonces voy a ir a editar selección de trazos y luego negro en primer plano y stroke de select Commander Control y D y pongamos esta capa debajo de Google Maps. Necesito cambiar este nombre a cuadro de Google Maps. De acuerdo, lo siguiente que tenemos que hacer es recortar el límite de la capa para nuestra caja de Google Maps . Entonces capa recortó un contenido y tomemos nuestro mapa y redimensionemos. Se cambiaría más s. y voy a teclear en 3 75 por la altura que coincidirá con nuestra caja y luego esto. Adelante y simplemente muévelo a la posición aquí. De acuerdo, Ahora necesitamos confinar nuestro mapa a esa caja. Entonces vamos a agarrar nuestra caja de Google Maps y luego estamos borrosas. Selecciona herramienta para hacer que nuestra selección vuelva a la capa de Google maps, luego sube a capa y selecciona recortar a selección. De acuerdo, sigamos adelante y de selecto con Commander Control y D. Muy bien, sigamos adelante y trabajemos en nuestra forma. Ahora este va a ser el formulario de envío de correo electrónico. Vamos a hacer de la rosa cuatro columnas de ancho, como lo hicimos antes. Vamos a seguir adelante y seleccionar fondo y crear una nueva capa llamada nombre de formulario. Y luego, con nuestro rectángulo seleccionable, vamos a dibujar una forma y hagámosla 3 75 de ancho por 50 píxeles de alto. Y luego escojamos ese mismo color gris que usábamos antes y luego lo llenamos. Añadamos ese trazo también. El selecto y sigamos adelante y duplicamos este. Vamos a moverlo hacia abajo. Llamémoslo, formemos correo electrónico y sigamos adelante y recortemos al contenido para cada capa también. Ahora, lo que va un espaciado, quiero agregar la misma cantidad de espacio que tenemos entre las columnas de la parte inferior de esta forma y la parte superior de esta forma. Entonces sigamos adelante y medimos esto. Por lo que tengo 25 pixeles. Voy a seguir adelante y medir esto. 25. De acuerdo, Adelante y apaguemos nuestras guías. Entonces la siguiente forma quiero tener la misma cantidad de espacio, y la quiero la altura de esta área justo aquí para que la parte inferior se alinea con la parte inferior de los mapas de Google. Entonces sigamos adelante y midamos de nuevo 25 píxeles. Y luego necesitamos medir desde aquí hasta el fondo de los mapas de Google. Por lo que tengo 224 píxeles de peaje. Entonces vamos a agarrar fondo y crear una nueva capa llamada mensaje. Y luego con nuestra herramienta de selección de rectángulos, podemos seguir adelante y sacar eso. Vamos a asegurarnos de que tenemos el tamaño correcto. Aquí. Tenemos 3 75 por 2 24 Vale. Otra vez lo mismo, vamos a rellenar con ese gran color, y luego vamos a añadir nuestro trazo. De acuerdo, entonces lo último que tenemos que hacer es y un título para cada sección. Adelante y selecciona aquí mi nombre de formulario para poder asegurarme de que esa capa esté configurada en la parte superior. También quiero cambiar mi información y dos opciones. En primer lugar, hagamos ferrocarril. Hagamos 30 por la talla y luego son de color gris oscuro. Entonces éste será nombre. En realidad voy a cambiar esto demasiado audaz, y luego vamos a hacer correo electrónico para el siguiente. Por lo que esto solo le permite al visitante saber qué información poner en cada fila. Y entonces tenemos un mensaje. De acuerdo, así que esa fue la parte fácil. Contamos con toda nuestra información. Tenemos todas nuestras formas. Lo único que tenemos que hacer ahora es que necesitamos alinear todo directamente en el centro de nuestras formas. Asegúrate de que todo esté perfectamente aliado para asegurarnos de que ni siquiera tenemos cantidad de espacio entre todas las diferentes formas. Y vamos a cubrir eso en el siguiente tutorial. 40. Cuerpo parte 5: De acuerdo, Entonces en esta lección, vamos a seguir adelante y terminar nuestra sección de contactos, y también necesitamos organizar nuestras capas. Y ahora mismo tengo un enorme desorden de diferentes capas en diferentes lugares. Entonces voy a seguir adelante y empezar a organizar mis capas y renombrarlas también para que sea más fácil encontrar lo que necesito y también agruparlas para ayudarnos en línea. Entonces, una vez que lo hayamos hecho, seguiremos adelante y alinearemos todos los elementos dentro de las formas, ajustaremos el espaciado, y luego estaremos listos para pasar a la sección de pie de página. - De acuerdo , Ahora que tengo todo agrupado, podemos seguir adelante y empezar a alinear todos los diferentes elementos. De acuerdo, Entonces para espaciar, tengo 29 entre el ícono y la parte superior del correo electrónico. Y luego pongo la dirección de correo electrónico más cerca del correo electrónico. Entonces sabemos que esos dos están juntos. Y entonces alinearé el resto de los iconos en base a esa cantidad de espaciado. Por lo que ahora Enhorabuena. Mi herramienta de alineación con la letra A. Puedo hacer clic en mi primer cuadro aquí, y luego voy a hacer clic en mis iconos de email basados en ese grupo de capas, voy a establecer primer ítem para el relativo a, y luego voy a alinear centro en medio de objetivos. Niños, vayan y den vuelta a nuestras guías en pick, layer o guide. Y vamos a mover esto a la parte superior del correo electrónico para que pueda alinear todo lo demás. Y también vamos a colocar aquí una guía por encima del correo electrónico. Entonces ahora solo necesitamos agarrar esas capas y ponerlas en posición. Ahora, muy rápido. Voy a volver al correo electrónico porque quiero asegurarme de que cada uno de estos elementos esté alineado también en el centro de los otros elementos. Entonces para hacer eso, vamos a sacar todo del grupo, esa capa, esa capa, y luego seleccionaremos cada uno con nuestra tecla de turno presionada, y luego un centro de línea de objetivo. De acuerdo, Tenemos que volver a poner todo y realinear el medio del centro porque creo que eso va a afectar cómo se centraba en esa forma. Hagamos lo mismo por la información telefónica. Vamos a sacar toda esa información. También necesitamos hacer nuestra medición aquí de 29 píxeles y luego Vamos a alinear todo en el centro. ¿ De acuerdo? Todo de nuevo al grupo y luego una mentira al fondo. Ahora lo va a mover un poco más arriba porque aquí tenemos una segunda línea comparación con nuestra dirección de correo electrónico, lo cual está bien. Entonces vamos a seguir adelante y solo lo dejaremos así porque lo quiero directamente centrado en medio de la caja. De acuerdo, vamos a seguir adelante y hacer lo mismo para esta información también. Muy bien, sigamos adelante y alineemos aquí nuestras tres líneas de texto. También quiero asegurarme de que haya tumbado perfectamente de arriba a abajo también. Entonces vamos a agarrar nuestro rectángulo seleccionable para hacer una selección y alinearlos en medio del objetivo. Y luego tenemos que asegurarnos de que tenemos selección seleccionada y luego una línea media de objetivos . De acuerdo, hagamos lo mismo por los otros dos. Y luego para el último solo medirá la cantidad de espacio que tenemos aquí en la parte superior , que es de 14 píxeles. - De acuerdo , Ahora necesitamos volver a poner nuestros iconos en el grupo de superposición de color para que podamos asegurarnos de que esos tengan el color correcto. De acuerdo, echemos un vistazo rápido aquí. Todo se ve bastante bien. Lo último que tenemos que hacer es crear un nuevo grupo de capas para la sección denominada Contacto. De acuerdo, así que eso fue muy aburrido y muy repetitivo. Pero es importante que tengamos todo debidamente organizado, por lo que sabemos dónde está la información si alguna vez necesitamos volver a acceder a ella. Y también ayuda al desarrollador Web y encontrar los detalles de la página Web ya que están citando el sitio web y teniendo todo, cualquier orden específico les facilita el acceso a esa información y llamó al sitio web. Si todo está por todas partes, entonces le va a llevar mucho más tiempo codificar el sitio web y el final. Va a terminar costando más dinero a tu cliente tener ese sitio web codificado porque no está adecuadamente organizado y es probable que no vayas a conseguir negocios repetidos empresa en particular o de esa agencia si estás trabajando a través de un agencia porque tus capas no están debidamente organizadas, sí, es aburrida y repetitiva, pero es imperativo organizarse como diseñador Web. Definitivamente hará las cosas más fáciles para ti y para todos los demás que se van a involucrar en el proyecto, y va a hacer que te veas mucho más profesional a la larga. Ahora que la sección de contactos se completa en el siguiente tutorial, vamos a terminar este proyecto de diseño Web agregando un pie de página a la página Web, Así que si estás listo para empezar en eso, hagámoslo. 41. Footer: hola y bienvenidos al diseño de pie de página para este sitio web. Es realmente simple. Simplemente tenemos algunos iconos sociales, algunos enlaces y alguna información de copyright. Ahora, por lo general, un pie de página tendrá muchos enlaces a otras partes del sitio web. Pero lo que básicamente hemos hecho es que hemos creado un sitio web de una página, aunque no es completamente una página, porque sí tenemos algunos enlaces que navegarán a otras páginas dentro de los sitios web así como algunas opciones para las revisiones del equipo en una sección sobre si hacemos una sección sobre porque recuerden, sí hicimos esta sección aquí, pero podríamos crear una página diferente para la sección sobre que tal vez explique un poco más sobre la empresa versus los beneficios de usar el empresa. Por lo que en general es principalmente un diseño web de una sola página porque hemos combinado ah lote de estas páginas individuales en la propia página de inicio. Muy bien, sigamos adelante y terminemos la sección de pie de página y casi terminaremos con este proyecto de diseño Web . Entonces sigamos adelante y creamos una nueva capa para nuestro fondo de pie de página llamado Bueno, hagamos click de pie o fondo. OK, entonces con tu rectángulo seleccionable. Vamos a dibujar una selección de 1400 píxeles de ancho y 200 para la altura. Después con nuestro filtro de cubeta, irá adelante y lo llenará con un color azul que utilizamos previamente y D select. Muy bien, vamos a agarrar nuestra herramienta de movimiento para que podamos mover esto hacia abajo a la posición también fue seleccionar recorte de capa a contenido para recortar el límite de capa. Sólo voy a usar mis teclas de flecha para moverlo hacia abajo. Entonces ahí mismo, así que eso se ve bastante bien. Entonces aquí está la parte fácil. En realidad vamos a hacer trampa un poco, y vamos a agarrar nuestros iconos de redes sociales del último proyecto. No hay razón para rehacer estos iconos particulares de las redes sociales ya que ya los hemos hecho una vez antes. De acuerdo, solo déjalos ahí, pero no estoy muy seguro de dónde están. Está bien. Parece que están aquí abajo en el fondo, así que sigamos adelante y recortemos el contenido de Lear. ¿ Todo bien? Ahora que tenemos esos ahí abajo, necesitamos seguir adelante y apagar estas capas para poder alinearlas con nuestra herramienta de alineación . Voy a seleccionar primero el fondo. y luego con la tecla de turno, seleccione esas y luego relativas al primer elemento y un centro de línea de objetivo. Muy bien, sigamos adelante y sumamos nuestros enlaces aquí abajo en la parte inferior. Adelante y cambia el color de la fuente, dedo blanco, y luego voy a hacer cinco espacios y copiarlo para que podamos pegarlo hasta el final de los otros enlaces. Muy bien, sigamos adelante y alineemos esos centro de objetivo también. En realidad necesito subir esto un poco más alto, justo sobre que debería haber bueno y luego uno más. Vamos a hacer nuestros derechos de autor a continuación, y luego voy a elegir el color gris oscuro para el color del fondo y luego simplemente teclear una información de copyright. Y luego, igual que antes, vamos a alinear estos dos centro de objetivo y necesitamos moverlo hacia arriba. Sigamos adelante y pongamos esos en un nuevo grupo de capas. Vamos a llamarlo contenido de pie de página, y vamos a alinear esto una vez más. En realidad, creo que mis derechos de autor son demasiado bajos. Yo quiero subir eso un poco más alto porque quiero contestar más espacio al fondo de la misma. Muy bien, volvamos al retrasador del grupo de contenido de pie de página y alinéelo a la altura de nuestra caja de pie de página. Entonces línea medio del objetivo. Y luego finalmente, vamos a hacer una selección entre los iconos de las redes sociales y la información de copyright porque quiero una mentira los enlaces aquí directamente en medio de esos dos elementos. Entonces lo saqué del grupo. Voy a seleccionarlo y luego cambiarlo a selección y luego una línea media de objetivo. Ok, de Select. Volvamos a poner esto dentro y sigamos adelante y alejemos el zoom y volvamos a encender nuestro contenido. De acuerdo, entonces el diseño Web está completo. Pero lo que siempre me gusta hacer antes de entregarle a mi cliente para su revisión es ir por la página Web y ver si hay algo que me olvidé de hacer. O si hay algo que pueda hacer para mejorar la página Web. Ahora, hay algunas cosas que no hicimos, y eso lo hice a propósito solo para que podamos volver atrás y echar un vistazo a la página Web y hacer algunos ajustes finales y reforzar el hecho de que necesitas pasar por tu página Web una más tiempo antes de entregarlo porque no quieres entregar una página Web para que tus clientes revisen. Si hay errores en ella, porque si ven los errores, entonces eso te va a hacer ver lo mismo profesional. Si estás pasando por una agencia, si ven errores, no va a reflejar Bueno en ti. Entonces hay algunas cosas que tenemos que hacer para que esta página sea mejor y para organizarla mejor también para nuestro desarrollador Web. Entonces vamos a hablar de eso en el siguiente tutorial, y vamos a retocar esta página sólo un poquito para que sea sólo un poquito mejor y para asegurarnos de que todo esté alineado correctamente. 42. Modificaciones finales: Por lo que casi terminamos con este proyecto. Sólo tenemos algunos ajustes finales que tenemos que hacer para que el sitio web sea un poco mejor y un par de cosas que nos olvidamos. Entonces, ¿qué nos olvidamos de hacer? Bueno, tenemos un formulario aquí, pero no tenemos botón de enviar. Vamos a seguir adelante y eso dentro. Tenemos que tener arriba nuestro espaciado aquí y asegurarnos de que el espaciado entre aquí y aquí sea igual al espaciado aquí. Se ve un poco apagado en este momento, por lo que queremos asegurarnos de que nuestras alineaciones sean consistentes a lo largo de toda la página Web. Entonces, por ejemplo, espaciado entre aquí y aquí es igual aquí y aquí. Entonces vamos a pasar y hacer algunas mediciones para asegurarnos de que todo se alinee en consecuencia, y luego haremos ajustes a medida que avancemos. Entonces sigamos adelante y empecemos haciendo nuestros ajustes aquí. Entonces vamos a seguir adelante y Graham son herramienta de alineación y hacer algunas mediciones. Tengo 25 píxeles aquí, que es lo que teníamos aquí abajo es Bueno, así que voy a seguir adelante y medir 25 píxeles aquí y voy a agregar mi guía ahí mismo . Ahora, solo necesito mover todo hacia arriba. Entonces encontremos esa capa grupal. Entonces está en contacto. Tenemos aquí nuestro formulario de envío de correo electrónico y nuestro contenido de Google, y podemos seguir adelante y simplemente moverlos individualmente. Y así solo voy a dar clic y arrastrar esto hacia arriba. Lo mismo con éste también. Asegúrate de que todo sea una línea que se vea bien. Parece que nuestro correo electrónico aquí es un poco demasiado largo. Algo para volver dentro de eso y redimensionarlo con mi herramienta de escala. Va a hacer 3 66 por el con Eso debería cuidarlo. Y luego con mi herramienta de movimiento, voy a seguir adelante y seleccionarla y usar mi tecla de flecha derecha para moverla sobre un píxel. Está bien, así que eso se ve bastante bien. Ahora, vamos a seguir adelante y alejarnos, ¿de acuerdo? Ahora que tenemos la cantidad correcta de espacio entre todos estos diferentes elementos, esa parte está arreglada. Ahora quiero pasar y asegurarme de tener la cantidad correcta de espacio entre cada una de las secciones. Ahora mismo puedo ver que tengo más espacio aquí abajo versus aquí. Entonces subamos a la parte superior de su página y echemos un vistazo al espaciado que utilizamos en esta sección. Entonces aquí mismo tenemos. Parece mucho más espacio entre estos elementos y la parte superior de esa sección frente a lo que hicimos en la parte inferior. Por lo que para consistencia se iban a medir y agregar la misma cantidad de espacio y se ve como 75 píxeles. Entonces voy a seguir adelante y hacer ese ajuste a este apartado también, para darle un poco más de espacio para respirar y para darle esa consistencia. Entonces sigamos adelante y midamos 75 píxeles. Y si el tuyo es diferente en esa sección de tres columnas, está bien. Basta con averiguar la medición y luego usar eso para el resto de la página web. Otra cosa que puedo hacer es Aiken organizar mejor estas capas. Aquí tenemos dos elementos que deben agruparse en un nuevo grupo de capas denominado Beneficios. Y también podríamos poner ahí el título también. Y esto nos va a hacer más fácil mover todo. De acuerdo, entonces aquí mismo tenemos menos espacio entre este edificio y este contenido versus lo que teníamos antes, pero eso está bien. Esta es la información importante aquí, y es muy legible y fácil de leer. Entonces no estoy realmente preocupado por ese espacio ahí mismo. De acuerdo, vamos a seguir adelante y seguir midiendo 75 píxeles de espacio y ajustando cada una de las secciones. - Muy bien, así que hemos añadido la cantidad correcta de espacio entre cada sección y nos queda algo de espacio vacío en la parte inferior del lienzo. Puede que tengas más o menos que yo en base a la cantidad de espacio que agregaste entre cada sección. Eso está bien. Lo que vamos a hacer es que vamos a reducir el tamaño del lienzo, y si coloco mi cursor aquí mismo, me está mostrando en la parte inferior de la interfaz que la altura es de 49 42. Por lo que necesito subir a la imagen y seleccionar el tamaño y el tipo de lienzo en ese nuevo número, 49 42. También es necesario echar un vistazo. Contesta aquí una vista previa para asegurarte de que está tomando esa información del lugar adecuado. Es un poco difícil de ver con esta longitud de un documento, pero puedo ver justo aquí abajo está recortando esa zona que necesito recortada. Entonces voy a hacer clic en cambiar el tamaño, y ahora estamos en el negocio. De acuerdo, entonces ya casi terminamos. Vamos a seguir adelante y crear nuestro botón de enviar. Vamos a seguir adelante y crear una nueva capa llamada botón enviar. Vamos a agarrar nuestra herramienta de selección de rectángulo fija está apagada. Y luego, por la talla, vamos a hacer 100 por la longitud y 50 por la altura. Esta vez, voy a seleccionar un color verde que usábamos previamente. Y también quiero dar la vuelta a las esquinas. Entonces bajo seleccionar, selecciona rectángulo redondeado, hagamos 20 y luego llenemos eso con tu herramienta de relleno de cubo. Voy a seguir adelante y apagar este fondo para poder ver mi botón. Muy bien, sigamos adelante y movamos nuestro botón de enviar a la posición. Yo quiero alinearlo al fondo aquí, así que voy a arrastrar una guía sólo para asegurarme de que esté justo donde lo necesito. Y también necesito moverlo un poco hacia la izquierda para que se alinea con esta guía y estos sumisión se levantaron aquí y ahora voy a seguir adelante y encender esta capa de mensajes, y voy a seguir adelante y mover una de estas guías hasta la parte superior de la porque lo que quiero hacer es medir otros 25 píxeles desde la parte superior de este botón. Y sólo voy a sacar un nuevo fondo para ello versus re dimensionándolo porque a veces se distorsiona un poco. Entonces voy a hacer 25 píxeles ahí. Nueva guía. Eliminemos ese mensaje y creemos una nueva capa llamada fondo de mensaje. Y luego qué? Son rectángulo seleccionables. Seguiremos adelante y haremos esa selección. Y luego necesitamos agarrar nuestro color con nuestro colector de color cuentagotas de ojos Herramienta click OK, y llenarlo con tu herramienta de relleno de cubo y vamos a seguir adelante y añadir un trazo a la selección. Negro en primer plano y trazo de clic. De acuerdo, Lo último que tenemos que hacer aquí es teclear out submit en todas las capitales. Voy a hacer Oswald negrita por el Funt, y voy a bajar esto a 24 por el tamaño. Y cambiémoslo, dedo blanco. De acuerdo, Vamos a seguir adelante y moverlo hacia arriba, tire de esto hacia abajo y luego sólo necesitamos usar nuestra herramienta de alineación para alinear eso directamente en el centro de nuestro botón. Pero primero, vamos a nuestro botón de enviar y seleccionar capa. Recortar el contenido y luego seguir adelante y hacer nuestras selecciones. Parece que necesitamos apagar todo de nuevo y luego asegurarnos de que cambies relativo a volver al primer ítem y luego un centro de línea de objetivos. Muy bien, volvamos a encender todo esto. ¿ Puede nuevo grupo de capas? Y esta vez es para el botón de enviar, y luego podemos colocar eso dentro de nuestra capa de grupo de contactos también. De acuerdo, sigamos adelante y alejemos el zoom. Creo que ya casi terminamos. La otra cosa que quiero hacer eso, creo que lo hará mucho mejor es que quiero bajar el tono de los iconos para que no sean tan intensos, y también quiero bajar el tono de los iconos sociales en el pie de página. Entonces sigamos adelante y agarramos esos primero. Voy a bajar la opacidad a 50. De esta manera nuestros ojos no saltan por todo el lugar porque tenemos tantas cosas compitiendo por nuestra atención. Queremos darle más importancia a ciertos elementos sobre otros. Entonces sigamos adelante y agarremos nuestros iconos aquí también. En realidad llevas a este grupo esa capa y bajamos eso a 50 también, que definitivamente lo haga mucho más fácil en sus ojos y le agregan algo de importancia a otros elementos versus los iconos. Muy bien, echemos un desplazamiento hacia arriba y echemos un vistazo al resto del sitio para ver si necesitamos agregar algo más. OK, creo que eso se ve bastante bien, y hemos hecho nuestros ajustes. Todo está correctamente alineado. Tuiteamos el área de contacto para que se vea un poco mejor de lo que era antes, así como los iconos sociales. Y creo que ahora estamos terminados. Enhorabuena por terminar este segundo proyecto de diseño Web. Si aún no lo has hecho, sigue adelante y sigue y completa este proyecto para la práctica y luego sigue adelante y trata de averiguar qué puedes hacer para que este diseño de página Web sea mejor único en tu cuenta para que puedas agregarlo a tu cartera. Entonces esa es tu próxima asignación. Adelante y se te ocurra algo que creas que es mucho mejor que esto. Y si quieres, adelante y envíalo en la sección Q y A para comentarios. Una vez que hayas terminado con todo eso, estarás listo para pasar a nuestro tercer proyecto de diseño Web en la siguiente sección. Gracias por escuchar y tener un día impresionante. 43. Proyecto 3: resumen de mareo: Hola y bienvenidos a nuestro Diseño Web Proyecto número tres para audio y video Seaside. Entonces solo vamos a hacer un breve resumen del sitio existente Lo que puedes ver ahora y después te mostraré el diseño que se me ocurrió, y te daré algunos consejos sobre por qué lo diseñé de la manera en que lo hice. Eso es lo primero. Echa un vistazo al sitio original para que podamos averiguar qué es lo que tenemos que hacer para mejorar este sitio web. Por lo que inicialmente, lo primero que veo es su logotipo, audio y video costero. Y parece que tomaron algún Clippard cursi gratis de imágenes de Google y abofetearon un logotipo. No se ve muy profesional. Parece anticuado, y en general, solo creo que tiene una sensación barata para ello. Entonces creo que un diseño nuevo, actualizado, más moderno, más moderno, sencillo sería mejor para su logotipo frente a lo que tienen actualmente. Por lo que de nuevo, esto te da la oportunidad de subir vender tus servicios para incluir diseño de logo. Entonces si tienes un cliente que viene a ti por diseño Web y no tienen sitio web existente o incluso simplemente logotipo de sting sin examinar, posible que quieras echarle un vistazo a eso y ver si puedes llegar a algo aún mejor. Y luego puedes probar y Upvenderlos en tu logo. Servicio de diseño. A lo mejor tener algunas ideas de campamento dispuestas antes de tiempo antes de que realmente les des una cotización. A lo mejor sólo les enseñas algo sencillo solo para especie de darles una idea de por qué tu logo es mejor que lo que tienen actualmente. Esa es otra opción para que usted considere cuando el diseño Web es vender hasta servicios adicionales . Entonces como puedes ver en su navegación, es un sitio web muy sencillo. No tienen mucho contenido. Tienen audio, video y contactan con nosotros, y los tres van a una página separada, pesar de que toda esta información también está en la página principal. Entonces no estaba muy seguro por qué tenían esas páginas adicionales cuando todo está en la página principal, así que lo veremos en tan solo un segundo. Entonces mi pensamiento es, si vamos a hacer páginas adicionales, quisiera agregar información adicional versus lo que tenemos en la página principal. No me importa poner alguna información básica en la página principal. Se puede ver aquí tienen muestras para su audio y para sus videos, lo cual está bien. Pero si quieren información adicional, entonces podemos poner eso en esas páginas extra. Entonces vamos a mantener la navegación prácticamente igual. Muy bien, entonces después de eso, tenemos frente y centro de redes sociales. Y si nunca has oído hablar de esta empresa antes y estás visitando su sitio web por primera vez, probablemente no estés listo para empezar a seguirlos en Facebook y Twitter. ¿ Por qué querrías seguir a alguien de quien no sepas nada? Por lo que no haría esto prominente por esa razón. Es por eso que estás mejor diseñando esto arriba en el encabezado y haciéndolo más pequeño, por lo que no es tan prominente, pero la gente todavía puede acceder fácilmente a él cuando están listos para seguirte en esas plataformas de redes sociales , y Simplemente no me gusta la idea de ponerlo al frente y al centro. Entonces, empecemos. ¿ Empezar en qué? En realidad no es un titular muy fuerte. Tenemos una imagen muy pobre para el fondo también, y luego tenemos de nuevo su información de contacto. No estoy listo para ponerme en contacto contigo. No sé nada de tu empresa? ¿ Por qué querría llamarte? Todavía no me has dado ninguna razón para llamarte, así que ponte en contacto con la información de nuevo. Si quieres meter tu número de teléfono ahí dentro, lo pondría en el encabezado y lo haría pequeño. Por lo que no es dominante, pero aún de fácil acceso. Por lo que toda esta información aquí mismo se puede combinar en el encabezado. Entonces ahora nos estamos metiendo en por qué debería hacer negocios contigo, audio y video para tu marca. Y luego continúa explicando lo que hacen. Y tienen una acción llamada, que es buena. Entérate más entonces. Tenemos dos enlaces aquí que son exactamente los mismos enlaces que navegan a las páginas de audio y video que están disponibles aquí arriba en el encabezado. Por lo que están repitiendo esa información otra vez. No necesitamos poner esta información aquí dos veces. Ya está en la navegación, pero sí me gusta la idea de poner muestras en la página principal porque a partir de aquí se puede muestrear el tipo de trabajo que han hecho antes y ver el tipo de trabajo que han hecho antes. Y luego vas a navegar a las otras páginas. Si quieres saber más información, Entonces en este caso, Entonces en este caso, tener lo que se conoce como un encabezado pegajoso sería beneficioso para que cuando una persona se desplaza hacia abajo esa navegación siga disponible. Entonces eso sería algo que recomendaría para este sitio web en particular. La otra cosa que haría es en este momento sólo tienen una muestra de video, y la imagen para ese video es bastante brillante. Sí llama tu atención porque es muy, muy vívida, pero no creo que sea una imagen de muy buena calidad en general, y probablemente cambiaría esto. Pero lo más importante, si no cambiáramos la imagen, lo que recomendaría es tener una lista de reproducción de videos. Aquí tenemos varias muestras de audio. mí me gustaría ver varias muestras de video así cuatro, tal vez cinco, tal vez siete u ocho videos, muestras para incluir también en esta área, que puedas atender a diferentes audiencias en base a quién estás apuntando, ya sea una empresa profesional a la que estás apuntando, o tal vez estás haciendo bodas también, vas a querer tener algunas muestras de video de eso también u otro tipo de eventos de la vida . Vas a querer tener algunas muestras de video de cada tipo de servicio o eventos que atiendas , y los tipos de empresas a las que atiendas, ya sea de negocio a negocio o una combinación de negocio a negocio y bodas y otros tipos de eventos de la vida. Entonces eso es otra cosa que recomendaría para esta empresa en particular. Y luego aquí abajo, tenemos una sección de contacto de EU, déjanos una línea, llámanos, Harry. Hacen que sea fácil que las personas se pongan en contacto con ellos ya sea llamando o descendiendo un mensaje . Y luego en el Footer, tenemos una enorme sección de derechos de autor con información adicional no relacionada con los derechos de autor. Por lo que de nuevo, recomendaría solo incluir información sobre derechos de autor y luego enlaces a políticas de privacidad y cosas por el estilo. Porque si echan un vistazo aquí arriba, tienen una política de cookies, así que no necesariamente pondría ese enlace de política de cookies en esta área aquí. Yo recomendaría ponerlo en la lata de pie de página. Entonces tenemos de nuevo algunos enlaces a las redes sociales, lo cual está bien, y después hemos powered by Go Daddy website builder. Por lo que esto le dice a May esta empresa en particular construyó su sitio web ellos mismos, y muestra que está mal diseñado, tiene un mal diseño, un logotipo barato. No hay estilo del texto, y en general, la experiencia del usuario puede mejorarse al tener un sitio web diseñado profesionalmente. Entonces vamos a repasar mi diseño particular ahora y por qué. Creo que las opciones y el diseño que creé es mejor que esto y cómo va a proporcionar una mejor experiencia de usuario. Entonces sigamos adelante y echémosle un vistazo. Lo que decidí hacer fue crear un logotipo nuevo, sencillo y moderno. No es nada de fantasía. No me va a ayudar a ganar ningún premio, pero es mucho más profesional que este logotipo en particular aquí mismo. He añadido un par de artículos más a la navegación así como una hamburguesa Icahn, que mostrará u ocultará la navegación cuando se haga clic. No pensé que fuera necesario tener esa navegación visible, ya que mucho de ese contenido y enlaces a este contenido está disponible en la página principal ahora, como parte de su logo y su imagen, intentaban incorporar costera palmeras, vista al mar cosas así, y sentí que en general que su logotipo y su marca serían mejor servidos con colores del lado del mar. Entonces por eso elegí un azul oscuro para el agua y luego un bonito naranja a un color rosado Grady int rojizo para representar el sol. Entonces por eso elegí esos colores y no imágenes o imágenes prediseñadas como lo hicieron originalmente. Y luego en la sección de héroes. Yo solo tengo una enorme declaración de texto haciendo realidad tu visión. En realidad no dice mucho, pero tal vez te agarra el interés porque tú mismo tienes una visión, y por eso vas a esta empresa en particular y no eres un AGA de video para o no sabes cómo capturar correctamente audio profesionalmente. Por lo que esta afirmación por sí sola no va a hacer que nadie quiera comprar sus servicios, pero puede agarrar su interés Ahora. lo único que sí agregué para la sección de héroes son estos logotipos de empresas para las que esta empresa en particular ha trabajado o trabajado para eventos en vivo. Por lo que esto suma prueba social o credibilidad. Aumenta la credibilidad de esta empresa y hace que se vea mucho más profesional aquí . Queso, cursi . No hay credibilidad real. Sí, así que estás en redes sociales eso no es credibilidad ni prueba social. No hay pruebas de que puedas ir a su página de Facebook y pueden que solo tengan 100 fans. Gran cosa. Este es un trato más grande. En realidad has trabajado con estas empresas. Este video AGA for ha trabajado con estas empresas. Esto es mucho más impresionante que esto. Por lo que he incluido esto en la sección de héroes para que esté por encima del redil y los visitantes de este sitio web verán esta información y si pueden, que sería aún mejor. Es tener enlaces que vayan a una página en cada uno de estos sitios web que muestre a su cliente y el trabajo que han realizado. Entonces lo primero que vamos a ver después de que empecemos a desplazarnos hacia abajo son los servicios que ofrecen. Y luego cada uno de estos puede enlazar dedo del pie otra página para obtener más información. Por lo que de nuevo, necesitas vender tus servicios. ¿ Por qué debería hacer negocios contigo? Bueno, si estás buscando a alguien que haga video o audio para un evento en vivo mientras te vas a interesar los eventos de la vida o el sonido de la vida, o tal vez solo necesitas algunos servicios de consultoría para que cada uno de estos pueda ir a otra página que los venderá sobre por qué deben hacer negocios con audio y video costero. Después de eso, podemos ver después algunas muestras de audio y video. Realmente no cambié mucho por el diseño para esta parte en particular de la página web. Se ve muy similar a lo que actualmente tienen ahora, y eso se debe a que tienen sus muestras de audio alojadas en la nube de sonido. Y lo que puedes hacer con Sound Child es que puedes tomar algún código o un plug in y ponerlo en tu página web, y luego mostrará una lista de reproducción de toda tu música o audio para que la gente lo muestre. Por lo que realmente no hay mucho que me gustaría cambiar con este diseño en particular. Yo sólo lo limpié un poco. Yo sí hice más grandes las imágenes y los botones de reproducción, pero todas estas actualizaciones de diseño dependen de si se te permite o no, o si incluso puedes modificar el código que proporciona Sound Cloud. Preferiría ver estas imágenes, y el botón de reproducción es más grande. Pero de nuevo, eso depende de si se puede hacer o no. Y si puede el presupuesto del cliente porque entonces el codificador tendría que entrar y personalizar esto en base a lo que está disponible en Soundcloud. Siguiente debajo de eso, tenemos nuestras muestras de video. Y para este diseño, incluí un gran botón de reproducción rojo porque están hospedando sus videos en YouTube y se puede ver eso con este pequeño botón de reproducción aquí mismo. Ese es un logotipo de botón de reproducción de YouTube, así que pensé que sería mejor hacerlo más grande. Pero lo que recomendaría para este cliente es hospedarlo en otra cosa que no sea YouTube por el simple hecho de que una vez hecho el video, vas a empezar a ver una lista de reproducción de otros videógrafos y otros tipos de eventos. Y eso puede distraer al visitante porque entonces van a empezar a navegar a otros videos. Se van a desviar, y luego van a salir del sitio. Por lo que queremos mantener a los visitantes en nuestra página web el mayor tiempo posible, por lo que recomendaría hospedar los videos en otro lugar si puedes hacerlo en Soundcloud de lo recomendaría hacer eso o elegir otro servicio como el video. La otra cosa que he hecho para este diseño en particular es que he agregado una playlist o un slider agregando algunos botones por aquí a izquierda y derecha, y actualmente estamos en cuatro de cinco muestras de video, y luego actualizé el connect y he incluido texto adicional para una consulta gratuita. Entonces, ¿por qué debo conectarme contigo? Qué hay en ello para mí mientras te voy a dar una consulta gratuita que va a aumentar la probabilidad de que alguien te vaya a mandar un mensaje, mientras que aquí abajo sólo tenemos contactarnos. Bueno, déjanos una línea. ¿ Por qué debería dejarte una línea? ¿ Qué hay en él para mí? Por lo que quieres asegurarte de que le das al visitante una razón para enviarte un mensaje, y puedes hacerlo solo dándoles algo a cambio de enviarte un mensaje. Y luego simplifiqué el pie de página con una simple línea de derechos de autor y algunos iconos de redes sociales. El único otro que probablemente agregaría es una política de privacidad y una política de cookies que enlaza a esas páginas para ese contenido. Y luego también tomé el fondo que creé para el encabezado y la sección de héroes y lo agregué al pie de página para equilibrar el diseño general y conectar todo juntos. Por lo que en general es más limpio. Es más moderno. Está más al día. Es más fácil de usar, y se ve mucho más profesional de lo que actualmente tienen. Entonces para este proyecto, vamos a recrear este diseño en particular. Te voy a mostrar cómo hice esto. Grady int aplicó algunos de estos efectos especiales cómo lidiar con situaciones cuando se tiene contenido proveniente de otro sitio web. Cómo conseguir estas imágenes porque no fue fácil ni sencillo conseguir estas imágenes en particular . Entonces te voy a mostrar cómo conseguí esas imágenes y luego vamos a seguir adelante y crear un simple slider moderno para nuestra sección de video, y luego lo redondearemos con nuestro connect y pie de página. Entonces si estás listo para empezar en este nuevo proyecto, hagámoslo 44. logotipo: Hola y bienvenidos al primer tutorial para nuestro proyecto costero. Lo primero que vamos a hacer es que vamos a crear nuestro logo diseño realmente simple, así que no va a tomar mucho tiempo diseñar. Entonces sigamos adelante y empecemos. Entonces vamos a crear un nuevo documento con comando o control y la letra, y vamos a dimensionarlo 200 por 100. También queremos establecer el color de fondo toe white click, OK, y vamos a utilizar para nuevas fuentes que aún no hemos utilizado. Y es posible que necesites descargarlos e instalarlos si quieres usar exactamente los mismos fondos. Si no, eso está bien. Simplemente usa cualquier fuente que quieras. Es sólo para la práctica. Por lo que el 1er 1 está en las fuentes de Google. Se trata de fuentes dot google dot com, y esta es la diversión que vamos a usar. No estoy seguro de cómo pronunciarlo, pero sólo tienes que seguir adelante y hacer una búsqueda de esta fuente en Google Fonts y la otra se llama placa de cobre, y se puede encontrar en fuentes geek dot com, y puedes descargar esta fuente para gratis una vez que tengas los descargados e instalados. Vamos a seguir adelante y teclear Seaside para la primera parte del logo. Pero primero, vamos a entrar en opciones de herramientas y tecleemos nuestra información para ese Funt. Por lo que quiero elegir Placa de cobre. Vamos a hacer 36 por la talla y luego por el color, vamos a usar este color azul oscuro. Entonces solo teclea este número aquí. Haga clic en Aceptar y, a continuación, siga adelante y escriba Seaside. Entonces hice la primera letra en una mayúscula. El resto son minúsculas. A pesar de que parecen capitales, son un poco más pequeños. Entonces voy a seguir adelante y seleccionar todo, y voy a atrevir esa fuente también. Entonces sigamos adelante y solo movamos esto hacia arriba a la posición, y luego vamos a agarrar de nuevo nuestro textil, y luego vamos a teclear el nombre del próximo fondo que queremos usar. Hagamos 20 por el tamaño y vamos a usar el mismo color, así que solo teclea audio y video en todos los campamentos. Abrendamos eso también, y vamos a seguir adelante y agarrar ese texto y moverlo sobre una especie de líneas con el lado izquierdo y el lado derecho de la orilla del mar. Adelante y agarrarlo y moverlo hacia abajo sólo un poquito porque vamos a poner una línea que se divide a aquí mismo en medio. Entonces sigamos adelante y enciendamos nuestros GYN y luego solo coloquemos una guía a cada lado del texto y luego, con tu rectángulo select, saldremos adelante y dibujaremos una selección. Y hagamos que el tamaño o la altura sean dos píxeles, agarra tu cubo. Herramienta de relleno, mismo color azul. Tenemos que llenarlo. Pero antes de que podamos hacer eso, necesitamos crear una nueva capa. Llamémoslo divider de Select, y luego use su herramienta de movimiento solo para moverla hacia abajo a su posición. Vamos a seguir adelante y encender nuestro límite de capa show bajo vista y luego vamos a recortar capas el contenido, y luego vamos a seguir adelante y alinearlo con nuestra herramienta de selección de rectángulos y nuestra herramienta de alineación . Coloquemos también el relativo a dos selección y luego un medio tirado de blanco. De acuerdo, sigamos adelante y agarramos nuestra capa de audio y video, y dejemos caer la opacidad un poco. Bajar a alrededor de 80 por la opacidad. Ocultemos los gineños y sigamos adelante y coloquemos esto dentro de un nuevo grupo de capas así llamado logo. Y también asegurémonos de guardar este archivo en caso de que necesitemos hacerle modificaciones más adelante. A continuación, queremos asegurarnos de tener abierto nuestro documento de cuadrícula maestra para que podamos partir de una pizarra en blanco para nuestro nuevo diseño. Una vez que tengas eso abierto, vas a agarrar tu capa de grupo de logotipos y arrastrarla al documento para luego moverla hacia arriba a la posición aquí arriba en la sección de encabezados. Entonces ese es el inicio de la cabecera. Nuestro logotipo está diseñado, y vamos a completar la parte de diseño del encabezado en el siguiente tutorial. 45. Encabezado: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y trabajar en nuestro encabezado así como en nuestra sección de héroes porque necesitamos crear ingrediente que sea sin fisuras desde el encabezado hasta el héroe. Entonces vamos a seguir adelante y crear el fondo de héroe también. Entonces antes de crear esos fondos, sigamos adelante y definamos la altura del encabezado y la sección de héroes, así como los logotipos que son la prueba social que agregan credibilidad a la compañía en esa sección de héroes también. Y vamos a añadir algunas guías para cada una. Entonces el 1er 1 vamos a dar clic y arrastrar hacia fuera una guía hacia abajo a 150 luego crear otra guía y 550 y luego la final va a estar en 700. Así que adelante y agrega esas tres guías y seguiremos adelante y crearemos nuestro ingrediente. Vamos a seguir adelante y crear una nueva capa. Llamémoslo ingrediente. Está bien. En primer lugar, necesitamos definir nuestro color, así que solo voy a agarrar los colores del documento que creé anteriormente. Así que adelante y teclee este número para el naranja brillante, y necesitas ponerlo en primer plano eso. Y luego para el color de fondo, va a ser este color rosa brillante. Así que adelante y teclea este número aquí mismo. ¿ De acuerdo? Una vez que tuviste esos colores fijados a tu color de primer plano y de fondo, condenamos. Adelante. Y Graham son herramienta ingrediente. Tenemos que ir al editor de rejillas, que se puede acceder haciendo clic en este icono justo aquí y luego aquí arriba y ingrediente Editor, necesitas definir tus colores si no se configuran automáticamente, y puedes hacer que por derecho, haciendo clic y seleccionando tipo de color izquierdo, seleccionando primer plano, y luego volver a hacer clic derecho. Y para el tipo de color correcto, vas a seleccionar el color de fondo y luego para nuestro triángulo blanco justo aquí. Queremos asegurarnos de que eso esté en el medio, justo alrededor de 0.50 Así que solo acércate lo más que puedas, y luego podremos crear nuestro ingrediente. ¡ Vamos a empezar Argh! Radiante en la parte superior izquierda de la cabecera. Y vamos a arrastrar hacia abajo a justo aquí en la parte inferior derecha de la sección de héroes. Así que solo tienes que hacer clic, arrastrar hacia fuera la liberación y luego presionar tu tecla enter o return para crear ese int codicioso. Y ahora es una identificación a nuestra capa. Entonces sigamos adelante y creamos una separación entre el encabezado y la sección de héroes agregando una sombra de caída. Entonces para hacer eso, primero vamos a crear una selección con nuestro rectángulo seleccionable justo alrededor del encabezado. Vamos a copiar eso con comando o control y la letra C y luego pegar con comando o control y la letra V y tus capas piano. Vas a obtener una selección flotante, haz clic derecho y selecciona a nueva capa. De acuerdo, entonces ahora tenemos nuestro Grady int para nuestro encabezado. Vamos a llamarlo fondo de cabecera y vamos a cambiar este a fondo de héroe. Asegúrate de tener el fondo de encabezado seleccionado porque lo que tenemos que hacer es aumentar el límite de capa de esa capa actual. Ahora mismo, se está cortando aquí mismo, lo cual está bien, cual está bien, si eso es todo lo que necesitábamos. Pero debido a que necesitamos sombra anti caída, en realidad no va a aparecer porque esas sombras de gota van a bajar aquí por debajo ese límite de capa, por lo que necesitamos aumentar el límite de la capa para mostrar la sombra de caída. Y lo podemos hacer subiendo a más tarde y seleccionando capa a tamaño de imagen. De acuerdo, ahora vamos a subir a filtros luz y sombra y seleccionar sombra gota. Entonces desde aquí, ya se puede ver que se está aplicando la sombra de gota. Y luego podemos usar estas opciones aquí para personalizar la sombra de gota. Si no estás viendo la sombra de caída, asegúrate de tener activada la vista previa para que podamos aumentar la cantidad de la sombra de caída que se muestra a través de los deslizadores X e Y. Y si tienes ambos vinculados entre sí, puedes ajustarlos ambos al mismo tiempo. Entonces más o menos, voy a ir menos. Voy a ir a la derecha alrededor de las dos. También voy a aumentar la opacidad para oscurecerla. Y voy a hacer eso justo en torno a una. Puedes hacer el tuyo como quieras. Voy a seguir adelante y usar estas opciones aquí y hacer clic. OK. Y ahora tenemos nuestra separación entre el encabezado en la sección de héroes. De acuerdo, entonces lo siguiente que tenemos que hacer es definir el int Grady. Por lo que sólo aparece en la sección de héroes y no en el resto del documento. Por lo tanto, asegurémonos de tener seleccionado nuestro fondo de héroe. Y luego vamos a hacer una selección en torno a esa selección de héroes. Y luego vamos a subir a seleccionar y seleccionar Invertir y Net invertirá la selección para que seleccione todo menos la sección de héroes. Por lo que tenemos el encabezado seleccionado y tenemos el resto del documento seleccionado. Entonces ahora vamos a crear una máscara de capa, llenarla de blanco, y después tenemos que asegurarnos de que tenemos el negro configurado al color de fondo y luego presionar tu tecla delete o backspace para quitar ese Grady int del resto del documento. Ahora, por supuesto, realmente no marcó la diferencia aquí arriba porque tenemos nuestro fondo de cabecera ahí también . Adelante en de select con mando o control y la letra D Let's Haider guía por un momento. Nuestro encabezado y parte de nuestra sección de héroes ahora se define con ese radiante, y es sin fisuras. Aparte de esa sombra de gota que los separa. Los colores son sin fisuras. Sigamos adelante y movamos nuestro logo hacia arriba y sigamos adelante y alinémoslo directamente en el centro en ese encabezado desde arriba hacia abajo. También asegurémonos de que esté alineado a la izquierda de la columna también. Si no, agarra tu herramienta de movimiento. Asegúrese de haber movido la capa activa seleccionada. Haga clic en él y luego muévelo a posiciones en la línea a esa primera columna de la cuadrícula. Adelante y apaga la rejilla. Voy a mantener eso en la parte superior por ahora, así que tengo fácil acceso a ella. De acuerdo, vamos a agarrar nuestra capa local ahora y nuestra herramienta de selección de rectángulo y hacer una selección. Voy a agarrar mi herramienta de iluminación con la letra A y voy a dar click en mi logo. Voy a establecer relativo a la selección y luego una línea media de objetivo. Por lo que ahora está espaciado uniformemente entre la parte superior y la inferior. Muy bien, sigamos adelante y trabajemos en nuestra navegación a continuación. Ya lo hemos hecho algunas veces, y básicamente vamos a utilizar el mismo concepto que usamos en los diseños anteriores agregando cinco espacios después de cada elemento del menú, copiándolo y pegándolo al final de los demás. Entonces con tu herramienta de texto, vamos a entrar en dos opciones y configurar la fuente para ferroviar el tamaño a 24 el color toe blanco. Y también quieres asegurarte de que estás espaciado se restablezca a cero porque no queremos ningún espacio extra entre las letras para nuestra navegación. Y vamos a seguir adelante y escribirlo. Kate. A continuación necesitamos crear nuestro icono de hamburguesa, así que vamos a hacer eso con nuestra herramienta de selección de rectángulo. También creemos una nueva capa primero llamada Hamburger, y luego por el tamaño vamos a hacer 30 por ocho. Y luego vamos a utilizar nuestra herramienta de cubo para llenar eso con cámara blanca y acercar solo un poco y de selecto. Y antes de que nos olvidemos, subamos a capa y seleccionamos recortar a contenido y duplicamos esa capa dos veces con tu herramienta de movimiento. Simplemente vamos a mover estos hacia abajo a su posición. De acuerdo, vamos a agarrar nuestra herramienta de alineación con la letra. Agarra tu tecla de turno. Selecciónelos todos establecidos en relación al primer elemento relativo al primer elemento y una línea a la izquierda. Otra cosa que queremos hacer es distribuir e incluso cantidad de espacio entre cada uno de ellos también. Entonces, vamos a desplazarnos hacia abajo y establecer el desplazamiento. ¿ Por qué? A 12 y luego seleccione esta opción aquí para distribuir el espacio entre ellos. De acuerdo, sigamos adelante y seleccionemos la capa superior, ¿ verdad? Haga clic y seleccione. Fusionate hacia abajo y luego hazlo una vez más y eso toma las tres de esas capas y lo combina en remolque. Uno. Muy bien, sigamos adelante y llevemos nuestros nuevos elementos aquí y alinéelos al lado derecho de nuestra columna aquí. Y luego alinémoslo a la parte superior de la parte inferior con su herramienta de selección de rectángulo y nuestra herramienta de alineación. También necesitamos un gramo, nuestra navegación saca eso si es necesario. Y entonces sólo vamos a mover eso junto a nuestro ícono de hamburguesa justo por ahí. Y debido a que agregué esos cinco espacios al final del contacto, puedo ver el límite de la capa justo aquí. Y eso me da igual cantidad de espacio entre cada una de las palabras y la hamburguesa. Yo vengo. Está bien. Voy a seguir adelante y agarrar de nuevo mi herramienta de selección de rectángulo para poder alinear la navegación directamente en el centro de arriba a abajo. De acuerdo, todo está en su lugar adecuado. Lo último que tenemos que hacer es y un icono de estado de hover para representar lo que sucede al clic en el icono de la hamburguesa porque la navegación misma se ocultará hasta que haga clic en él. Entonces lo que vamos a hacer es ir al archivo anterior en el que trabajamos, y vamos a agarrar ese ícono del hover de este documento versus intentar encontrarlo de nuevo en línea. Entonces sólo voy a localizarlo. Se va a la sección F A Q, y luego simplemente haz clic y arrastra esa capa hacia nuestro documento actual, muévala a la posición y eso es s ella movió ese ícono que pasa por encima de la capa de hamburguesas debe cambiar el nombre de esto. Voy a quitar copia, y luego sólo necesitamos organizar nuestras capas. Así que sigamos adelante y creemos un nuevo grupo de capas para el encabezado y eso es todo. Nuestra sección de cabecera ya está hecha. De acuerdo, Entonces en el siguiente tutorial, seguiremos adelante y crearemos nuestra sección de héroes y los logotipos para prueba social 46. Hero: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y trabajar en nuestra sección de héroes y terminar el diseño de esta parte del proyecto. Va a ser muy sencillo. Vamos a añadir algunos textos y algunos logotipos para nuestra prueba social y añadir algo de credibilidad al audio y video costeros. Entonces lo primero que tenemos que hacer es encontrar algunos logotipos, cualquier logos o bien. Acabo de escoger cinco logotipos aleatorios que pueden necesitar los servicios de un profesional de audio y video . No tiene que ser el mismo logo. Simplemente haz una búsqueda de imagen de Google para algunos logotipos, descárgalos, y luego agrégalos a tu documento. Porque todo lo que vamos a hacer es alinearlos con nuestra herramienta de alineación y simplemente seguir practicando con algunas de las herramientas que vamos a necesitar para usar como diseñador Web. Por lo que una vez que los tengas descargados y añadidos a tu documento, podemos seguir adelante y empezar. Entonces voy a encender mis guías y agarrar mi herramienta de movimiento, y voy a seleccionar el primer logotipo y alinearlo a la columna de la izquierda. Entonces voy a agarrar mi último logo y alinearlo al lado derecho y esto se alinea con ícono de hamburguesa por aquí y este con el logo por aquí. Entonces sólo movamos a los otros tres a la posición. Ahora, lo otro que puede que tengas que hacer es cambiar el tamaño de tus logotipos. Por lo que mis logotipos, soy experto con el cambio de herramienta de escala más s, y redimensiono la altura a 75 píxeles. Ahora bien, si tienes un logotipo como este aquí, no hay necesidad de redimensionarlo a 75 para la altura porque el ancho va a ser mucho, mucho más ancho de lo que es ahora. Entonces solo voy a dejar este como está, y de todos modos voy a alinearlo en el centro de la columna y luego distribuir uniformemente la cantidad de espacio entre ellos. Tan real simple. Entonces sigamos adelante y hagamos esa alineación primero, donde se alinea dentro de esta área aquí de arriba a abajo. Por lo que vamos a hacer nuestra selección con nuestra herramienta de selección de rectángulos. Vamos a agarrar nuestra herramienta de alineación con la letra A y voy a dar click en ese primer logo. No parece que me vaya a permitir seleccionarlo, así que puede que tenga que apagar el encabezado. Entonces intentemos eso. Ahí vamos. Ahora que tengo que tengo selección seleccionada cuatro relativa a, y luego puedo seleccionar una línea media de objetivo. De acuerdo, voy a seguir adelante y hacer eso para cada uno de los otros logotipos también. De acuerdo, voy a cambiar esto de nuevo al primer elemento, y luego voy a seleccionar mi primer logotipo con mi herramienta de alineación, y luego voy a mantener presionada mi tecla de turno para seleccionar los otros logotipos. De acuerdo, Probablemente sepas lo que pasa a continuación. Eso es correcto. Vamos a distribuir, y luego necesitamos asegurarnos de que tenemos nuestra configuración para la X e y configurada correctamente. Voy a volver a poner ancho a cero. Todavía no estoy muy seguro de lo que necesito para el ex, así que voy a probar 250 y luego voy a seleccionar esta opción aquí. Ahora. El problema es que no nos dio igual cantidad de espacio entre h logo. Entonces a veces eso va a pasar. En función de la capa y del tamaño de esas capas y del número de capas que has seleccionado , no siempre te va a dar exactamente lo que quieres. Eso voy a deshacer con Commander Control y la letra Z. Entonces, ¿qué podemos hacer para alinear estos logotipos de manera uniforme entre ellos? Bueno, en lugar de usar la distribución, podemos alinear este logotipo en el centro y luego usar nuestra herramienta de selección para alinear este logo entre estos dos y luego este logo entre estos dos y eso aún nos va a dar un igual cantidad de distribución. No va a ser exactamente la misma cantidad, pero serán más simétricos y más cercanos a ser distribuidos uniformemente de esa manera. Y eso se debe a que este logo de aquí es más largo que éste, y va a tener más o menos base que la otra. Así que sigamos adelante y agarremos nuestro logo del medio con nuestra herramienta de alineación. Vamos a subir y seleccionar imagen y luego un centro acostado de objetivo para que lo alinea directamente en el centro de nuestro documento, el ancho de nuestro documento. Por lo que ahora podemos ir a nuestra herramienta de selección y hacer una selección entre los dos, y luego podemos agarrar este logotipo, cambiarlo de nuevo a selección y luego alinearlo centro de esa selección. Ahora podemos hacer lo mismo con este logo por aquí con nuestra herramienta de selección de select con Commander Control nd y apagar las guías. Y ahora todo está perfectamente alineado. De acuerdo, lo siguiente que tenemos que hacer es y una sombra de gota que coincida con la sombra de caída que hemos colocado en su cabecera. Entonces sigamos adelante y hagamos eso. Volvamos a encender nuestras guías. Hagamos nuestra selección alrededor de esa sección. Voy a seleccionar mi capa de fondo porque quiero que el fondo se mantenga blanco. Lo vamos a copiar con Control de Comandante y ver y paga con comandante Control. Envidia. ¿ Podemos tener una selección flotante? Entonces vamos a añadir eso a una nueva capa. Vamos a subir eso. Eso se llama antecedentes de prueba social. Subamos a capa y seleccionamos capa a tamaño de imagen, y ahora podemos subir y seleccionar filtros, luz y sombra y sombra para crear esa sombra de gota para que coincida con la anterior. Ahora deberíamos haber anotado los números exactos que usábamos previamente porque va a por defecto a la configuración por defecto, y no recuerdo el número exacto que usé para la X y la Y, Y la opacidad que conozco es bastante cercana a uno por la opacidad. Pero no estoy seguro de esto, pero ya está lo suficientemente cerca por ahora. Entonces solo recuerda que en el futuro, si vas a usar una sombra de gota varias veces en un documento, es mejor que el dedo del pie tenga exactamente los mismos números. Por lo que tienes exactamente la misma sombra en todo el documento. De acuerdo, voy a seguir adelante y dar clic. OK, entonces tenemos nuestro clavo de sombra gota, y tenemos la separación entre esta sección y esta sección aquí abajo. El único problema es que tenemos una sombra de gota por encima también. Entonces lo que voy a hacer es que voy a hacer una selección con el rectángulo seleccionable que excluye ese lanzadera drop. Pero queremos asegurarnos de que aquí seleccionamos la sombra desplegable. Y luego cuando subamos a recortar capas a selección, eso va a recortar ese límite de capa y quitar la sombra de gota desde arriba de esa barra. No queremos esa barra por encima de ella porque va a ser demasiada separación. Entonces tenemos nuestra sección de héroes y nuestra separación de aquí y aquí y ahora solo necesitamos agregar nuestro texto. Entonces tomemos nuestra herramienta de texto y cambiemos la fuente a la placa de cobre. Vamos a hacer 15 por la talla y luego por el color, vamos a elegir este click de color azul oscuro. OK, vamos a asegurarnos de que todo esté puesto en cero aquí abajo, y entonces podemos seguir adelante y escribir la primera línea, seleccionar todo y ponernos en negrita. Entonces es un poco demasiado grande. Quiero asegurarme de que me quede dentro del lado izquierdo de la primera columna y del lado derecho de la última columna, Así que voy a agarrar de nuevo mi textil, seleccionar a mano todo y cambiar el tamaño hasta que encaje dentro de esos límites. Entonces intentemos 107 bastante cerca. Por lo que texto para volver a seleccionar todo y parece que 105 va a ser perfecto. Y luego en una segunda línea con nuestra herramienta de texto escribirá una realidad. Hagámoslo audaz justo ahí. Vamos a seguir adelante y ponerlos en un nuevo grupo de capas. Se llama contenido de héroe, y luego vamos a hacer nuestra selección en esa área. Entonces aquí y luego con nuestra herramienta de alineación se adelantará y seleccionará. Pero sigamos adelante y apaguemos todo lo demás. Eso está por encima. En realidad podemos agarrarlo. Y luego una línea al centro de selección y medio de Target vino en un de select volvió a encender todos estos y esto organizado son capas apenas un poquito aquí. Voy a crear un nuevo grupo de capas llamado Social Proof, y vamos a poner todos nuestros logotipos dentro de aquí. Y luego un nuevo grupo de capas llamado Hero y eso es todo. Nuestra sección de héroes ahora se hace en. El siguiente tutorial comenzará a trabajar en la primera parte del cuerpo, Así que si estás listo para empezar en eso, bueno, hagámoslo. 47. Servicios corporales parte 1: Hola y bienvenidos de nuevo. Muy bien, Entonces la siguiente parte de nuestro proyecto de diseño es crear cuatro columnas de información para ayudar a vender los servicios de sus clientes a sus prospectos. Entonces vamos a dividir cuatro secciones diferentes de manera uniforme a lo largo de tres columnas de nuestra cuadrícula. Vamos a agregar un título y alguna información que será un fragmento de lo que se trata ese servicio . Y luego, si eso atraiga al prospecto, pueden hacer clic en el título o la imagen para navegar a la página de Eventos en vivo o a la página de Producciones de Video para leer más sobre esos tipos particulares de servicios que son interesado en. Y como faras van las imágenes, las vamos a colocar dentro de un círculo y una sombra de gota, crear un trazo, y en cuanto a las imágenes reales que utilicé, solo uso algunas imágenes de stock de obturador. En realidad podemos ver la marca de agua en las imágenes, y eso sólo significa que las imágenes tienen derechos de autor. Y como saben, para poder utilizarlos en un sitio de vida, es necesario adquirir la licencia completa de esas imágenes y luego obtener el reembolso de sus clientes. Entonces si quieres descargar exactamente las mismas imágenes. Vaya al obturador stock dot com y escriba este número en la búsqueda del primer elemento. Este número para la segunda imagen, y luego esta foto me d para esta imagen. Y luego finalmente, esta foto me d para esta imagen. Entonces vamos a seguir adelante y dar click en esta lupa,click derecho, click derecho, seleccionar copiar imagen y luego pegarla en nuestros documentos. De acuerdo, Sigamos adelante y hagamos eso por cada una de las imágenes. Tengo una selección flotante para este, así que voy a dar click derecho y seleccionar Nueva capa. De acuerdo, vamos a renombrar estos. Voy a llamar a éste Consultas, producciones de audio y video en vivo y eventos en vivo. También voy a reorganizar el orden en que están quieren eventos en vivo primero este siguiente y luego este 1/3. De acuerdo, ahora tenemos nuestras imágenes. Tenemos que seguir adelante y empezar a redimensionarlos en función del número de columnas que tenemos y el número de imágenes. Entonces tenemos 12 columnas con cuatro imágenes, así que vamos a hacerlas tres columnas de ancho. Entonces tomemos nuestras herramientas de medición para que podamos averiguar cuántos píxeles de ancho. Necesitamos hacer nuestras imágenes, y luce como 275 píxeles de ancho. Entonces voy a volver a escalar mis imágenes para que sean un poco más altas que eso. Entonces vamos a hacer realmente 300 píxeles de altura. Entonces tomemos nuestra herramienta de báscula con Shift Plus s. asegurémonos de que estén vinculados entre sí y seleccionemos 300 para la altura. Y hagámoslo por cada una de las imágenes. De acuerdo, con removido dicho solo muévalos hacia abajo a posición aquí. En realidad, ese debe ser primero esta segunda mano, este 1/3. Está bien. Esa fue la parte fácil. Ahora viene la cosa divertida. Entonces nuestro siguiente paso es crear algunos círculos para colocar nuestras imágenes y remolcar. Añadirles algunas sombras de gota también. Adelante y apaguemos primero nuestras secciones de héroe y encabezado, después agarrar tu herramienta Elipse en las opciones de herramientas. Asegúrate de tener seleccionada la relación de aspecto fija, y queremos que nuestro círculo tenga tres columnas de ancho, así que solo dibuja un círculo y sabemos que el tamaño es de 75. Entonces escribe eso y luego crea una nueva capa llamada círculo y luego con nuestra herramienta de relleno de cubo , vamos a llenarlo con blanco y luego de seleccionar. También cambiemos el límite de la capa subiendo a capa y seleccionemos recortar el contenido. Y ahora vamos a crear un segundo círculo que va a sostener nuestra imagen. También vamos a hacer este círculo más pequeño para que cuando encaje dentro de este círculo, el círculo inferior cree nuestro trazo de peso para nosotros. Entonces sigamos adelante y tecleemos al 65. Para el tamaño, vamos a crear una nueva capa llamada Image Circle, y luego la vamos a llenar con blanco. También necesitamos recortar el contenido del límite de la capa y luego con nuestra herramienta cojo it, vamos a dar click en la primera capa. Holden, tu tecla de turno y haz click en la segunda capa. Entonces queremos establecer en relación con el primer elemento y alinear centro y medio del objetivo . Y ahora nuestro círculo de imagen está en el centro del círculo inferior. Muy bien, apaguemos el círculo M. Vamos a agarrar esta capa de círculo. Vamos a volver a subir a capa y seleccionar capa a tamaño de imagen porque quiero añadir una sombra de gota a esta capa. Y si no aumentamos el límite de capa que eso, soltar sombras no van a aparecer como habíamos hablado en secciones anteriores. Entonces subamos a filtros luz y sombra drop shadow y luego ajustémonos para que coincida con tus otras secciones. O por lo menos ponlo de cerca causa que aún no recuerdo lo que usé. Creo que fue algo así y luego, para mi opacidad fue 1.6 Ahora podemos volver a subir a capa y recortar al contenido otra vez y encender tu círculo de imagen. De acuerdo, pongamos nuestra imagen dentro de ese círculo. Ahora vamos a agarrar eventos en vivo y moverlo hasta arriba, y también usar tu herramienta de movimiento para moverlo sobre ese círculo. Ahora quiero componer esta imagen de cierta manera para que el primer plano esté en el centro del círculo. Bueno, es un poco difícil determinar cómo hacer eso cuando no podemos ver nuestro círculo. Pero si hacemos click en el círculo, vemos el límite de la capa y luego con pick una capa o guía seleccionada con nuestra herramienta de movimiento, podemos hacer click en la imagen y luego colocarla dentro de ese límite de capa que podemos ver. Una vez que nos soltamos. Desaparecerá, y ya no podemos determinar la composición a menos que hagamos clic en ese círculo de imagen y empecemos de nuevo. Voy a ir con eso. Eso está bien para mí. Ahora voy a agarrar mi selección difusa. Te asegurarás de que tu círculo de imagen esté seleccionado y haz clic en el centro para hacer una selección para esa forma. Vamos a seguir adelante e invertir la selección de nuevo a eventos en vivo. Agrega una máscara de capa con blanco, asegúrate de que el negro esté configurado en el fondo y luego presiona delete o tu tecla de retroceso y boom ! Ahora tu imagen está confinada a esa forma. ¿ Qué tan guay es eso? A mí me encanta. Está bien. Eso es bastante impresionante. Muy bien, sigamos adelante y vayamos a Image Circle y creemos un nuevo grupo de capas llamado Círculos. Pongamos ambos dentro, y ahora todo lo que tenemos que hacer es duplicar esto tres veces para las otras imágenes. Voy a agarrar mi herramienta de movimiento, mover el lier activo, y lo voy a mover hacia el extremo derecho, y también necesito mover esta capa grupal al al fondo para que tenga todo en el orden adecuado. Hagamos este 3er 1 y luego éste será el 2do 1 Y cambiemos el nombre de estos círculos uno a cuatro. Ahora sigamos adelante y creamos un nuevo grupo de capas para eventos en vivo y los círculos. Llamémoslo Imagen uno, y sigamos adelante y enciendamos nuestras guías, y luego vamos a mover esta capa de grupo para que se alinea a la izquierda de la primera columna . Entonces justo ahí debería ser bueno por ahora. Y luego vamos a tomar nuestros otros círculos y colocarlos donde deberían estar. Y ésta debe estar en la cuarta columna a lo largo del lado izquierdo. Y sigamos adelante y moveamos estos a la posición también. Ahora movamos nuestras imágenes a la posición de acuerdo a donde esté su círculo. Voy a apagar cualquier círculo en el que aún no se hayan trabajado, y vamos a confinar nuestra imagen a esa forma. Ahora vamos a seleccionar círculo un selecto, escoger una capa nuestra guía, y luego mover tu imagen a su lugar. Ahora solo tenemos que agarrar nuestraherramienta difusa, seleccionar, herramienta difusa, seleccionar, hacer una selección en verdant, y luego agregar una máscara de capa a la tecla de borrar o retroceso de imagen y luego la selección. De acuerdo, así que sólo tenemos que repetir eso dos veces más. De acuerdo, sigamos adelante y agreguemos algunos nuevos grupos de capas para cada uno de estos círculos. Ahora, con nuestra Herramienta Lehman, vamos a alinear a todos a la cima. Así que selecciona tu primera tecla de turno 1 y haz clic en las demás. Primer elemento todavía y una línea a la parte superior. Está bien, así que aún nos queda mucho más por hacer. Tenemos que sumar nuestros títulos en nuestros párrafos, pero los tutoriales se hacen un poco largos. Entonces sigamos adelante y continuemos con el resto de esta sección en el siguiente tutorial. 48. Servicios corporales parte 2: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y terminar esta parte de nuestra sección de cuerpos. Vamos a agregar algo de contenido, un alineamiento de fondo, todo organizado, son capas y será bueno para ir. Entonces sigamos adelante y empecemos con nuestra herramienta de texto. Y cambiemos el funt. Voy a hacerlo audaz y hagámoslo 24 por la talla. Y quiero el color azul oscuro para esos titulares. Entonces sigamos adelante y tecleemos esos. Ahora, si presiono mi tecla de escape, me sacará de este cuadro de texto y luego podré seguir adelante y agarrar otra herramienta sin agregar ese atajo particular al cuadro de texto. Muy bien, vamos a Paul todas estas capas fuera. Organizémoslos también para que estén en el orden correcto. Y luego vamos a seguir adelante y volver a encender nuestra cuadrícula y usar nuestra herramienta de selección de rectángulos y nuestra herramienta de alineación para alinearla al centro de estas tres columnas. Adelante y apaguemos nuestra sección de héroes y encabezados también, para que podamos seguir adelante y alinear esto y necesitamos volver a ajustarlo a la selección y luego un centro de línea de objetivo. Sigamos adelante y hagamos lo mismo para los otros tres titulares también. Está bien, vamos a seguir adelante y agarrar cada una de las capas. Lo haremos en su nave, K seleccione los cuatro y luego una línea a la parte superior. Vamos a seguir adelante y ponerlos en un nuevo grupo de capas así llamado titulares. Voy a seguir adelante y agarrarlo también, así que puedo subirlo un poco, solo quiero acercarme. Entonces lo que quiero hacer es que solo quiero mover esto hacia arriba sin alejarlo de donde se supone que debe estar. Por lo que sigue centrada entre las columnas. Sólo voy a añadir una guía aquí. De esta manera, sólo puedo colocarlo a lo largo de esta guía. ¿ Todo bien? Puedo seguir adelante y sacar a este tipo ahora porque ya no lo necesito, al menos por el momento. Entonces para nuestro párrafo, sólo vamos a agarrar algún texto ficticio. No necesitamos mucho. Solo voy a agarrar un par de líneas aquí, copiarlo, y luego con mi herramienta de texto, crearé un cuadro de texto y luego lo pegaré. También necesitamos cambiar la fuente en sí. Entonces voy a seleccionar todo y cambiarlo a Georgia 12 para el tamaño, y luego vamos a usar el color gris oscuro que usamos anteriormente. Sólo voy a traer esto en un poquito para que se alinea con nuestro texto aquí y aquí. Y luego en nuestras opciones de herramientas, podemos seleccionar justificado a la izquierda y a la derecha para llenarlo. Simplemente lo voy a aumentar en ambos lados sólo un poquito. Y ahora todo es la línea justo ahí. De acuerdo, salgamos de ahí golpeando nuestra llave de escape, y vamos a seguir adelante y alejarnos y duplicar este párrafo tres veces. Saquémoslo del grupo de titulares y sigamos adelante y duplicémoslo y luego solo movelos . Adelante y volvamos a encender nuestra grilla. Y la línea son párrafos al centro de estas tres columnas, igual que hacíamos antes. Está bien, mantengamos presionada la tecla Mayús y seleccionemos todas las capas para que podamos alinearlas a la parte superior. Sigamos adelante y ponerlos en orden y luego les renombramos párrafo uno a cuatro. Muy bien, Tenemos que añadir un poco de espacio entre los párrafos y nuestras imágenes aquí. Entonces sigamos adelante y midamos la distancia entre aquí y aquí. Por lo que tengo 21 pixeles. Voy a añadir la misma cantidad de espacio aquí, vamos y su guía. Y entonces sólo podemos agarrar nuestras imágenes aquí. En realidad pongamos a los cuatro en un nuevo grupo de capas, ¿de acuerdo? Sólo nos queda un par de cosas que hacer, y eso es organizar nuestras capas un poco. Y entonces necesitamos tomar todo este contenido y alinearlo directamente en el centro de nuestro fondo de servicios de arriba a abajo. Vamos a seguir adelante y agarrar nuestra capa de descanso par y crear un nuevo grupo anterior para poner todo dentro de él se llamaba Body Services y luego vamos a poner todo ese contenido dentro excepto por el fondo de servicios. Dejemos eso fuera por el momento. Ahora, Para alinear esto, si seleccionamos esta capa de servicios de cuerpo, vas a notar el límite de la capa y podemos ver que hay mucho espacio en blanco o espacio vacío aquí mismo, y hay ninguno en la parte superior. Entonces cuando vamos a alinear esto con nuestra herramienta de alineación, no va a centrarlo perfectamente en medio de nuestro objetivo. Debido a este espacio extra, habrá más espacio por el pelo que aquí arriba. Entonces el así como ustedes saben, lo que podemos hacer es que podemos recortar el límite de la capa para que quepan justo debajo de nuestras imágenes aquí mismo. El único problema es que, como saben, se va a recortar esa sombra de gota, y luego cuando vayas a aumentar el límite de la capa, las sombras de gota no volverán. Entonces, en efecto, cuando lo recortes hacia abajo, va a borrar los fondos de las sombras de gota. Y no queremos eso porque eso va a eliminar ese efecto visual. Entonces así es como vamos a movernos por ello. Vamos a seguir adelante y duplicar a este jugador de grupo y apagar el original. Entonces ahora podemos entrar en esta capa de grupo y encontrar todas las capas que son demasiado altas y luego recortar el contenido hasta la parte inferior de los círculos, y luego podemos usar nuestra alineación de puntera herramienta de alineación, arriba a abajo. Y luego podemos agarrar nuestra capa de otros grupos, volver a encenderla y moverla manualmente en posición y se alineará perfectamente. Por lo que sólo tienes un poco de trabajo que hacer. Vamos a entrar de aquí. Vamos a encontrar nuestras imágenes. Vayamos al 1er 1 y elegamos nuestro círculo inferior y pudimos ver que el límite de la capa está por debajo del círculo. Ahora, si subimos a capa y seleccionamos contenido recortado, vamos a recibir un mensaje. Pero diciendo que ya está recortado a su contenido. Y eso es por esa sombra de gota, las sombras de gota en realidad siendo emplumadas todo el camino hasta el borde justo aquí. Entonces lo que necesitamos hacer es establecer manualmente el límite de capa al borde del círculo mismo. Y lo podemos hacer con nuestra herramienta de selección de rectángulos. Y no estoy realmente preocupado por los lados. Entonces solo voy a empezar aquí y bajar la selección al fondo de ese círculo, y luego podemos subir a capa y seleccionar recorte a selección de selecto y ahora la tenemos exactamente donde lo queremos. Por lo que necesitamos hacer eso para cada uno de los círculos. Entonces vayamos a los otros tres grupos de capas y hagamos lo mismo. De acuerdo, sigamos adelante y apaguemos nuestra sección de héroes aquí si la tienes encendida y parece que hemos reducido la cantidad de espacio. Pero todavía tenemos algo de espacio ahí, y eso probablemente sea por las imágenes o por los otros círculos. Entonces volvamos dentro de ellos y pinchemos en cada capa, para que parezca que la capa de imagen está un poco más baja ahí. Ese círculo está bien, así que vamos a seguir adelante y hacer lo mismo para cada una de las imágenes también. Muy bien, vamos a seguir adelante y agarrar nuestras herramientas de selección de rectángulo para que podamos hacer una selección a la altura de nuestro fondo. Ahora recuerda, no podemos seleccionar el fondo de los servicios porque el límite de la capa es demasiado alto, y si lo recortamos de nuevo, vamos a eliminar esa sombra de gota. Por lo que es simplemente más fácil hacer una selección y luego usar nuestra herramienta cojo it. Agarra en relación con la selección y luego una línea en medio de Target K. Adelante y de selecciona Enciende tu otra capa de grupo, y luego con tu herramienta de movimiento. Simplemente sigue adelante y haz clic en él y luego usa tus teclas de flecha para moverlo hacia abajo. Adelante y eliminemos los servicios de cuerpo. Copia y boom. Ahora está perfectamente alineado de arriba a abajo. ¿ Qué tan guay es eso? De acuerdo, así que ese es tu trabajo para situaciones como esa. Y solo necesitamos poner nuestra capa de fondo de servicios dentro de esa capa de grupo, y todos hemos terminado con esta sección de su cuerpo. Enhorabuena. Está bien. En el siguiente tutorial, vamos a seguir adelante y empezar a trabajar en la parte de muestras de audio del cuerpo. 49. Parte 1 de audio: hola y bienvenidos de nuevo. Por lo que la siguiente parte de nuestro proyecto es crear la sección de muestras de audio y video, y tenemos mucho trabajo que hacer. Por lo que probablemente vamos a romper esto en tres, tal vez cuatro conferencias diferentes. Y en este tutorial, vamos a seguir adelante y empezar a agarrar nuestras imágenes, tal vez hacer algunos botones en algún texto y luego en el siguiente tutorial, empezaremos a armar todo. Entonces sigamos adelante y empecemos creando nuestro titular inicial para esta sección. Cambiemos la fuente a la placa de cobre y el tamaño a 48 entonces el color azul oscuro está bien para esto también. Y luego sólo tienes que seguir adelante y teclear lo siguiente. Voy a seleccionar todo y hacerlo audaz también. No me preocupa alinearme ahora mismo. Vamos a seguir adelante y hacer eso en el siguiente tutorial, así que sólo voy a moverlo aquí por ahora. Otra cosa que tenemos que hacer es aumentar el tamaño del lienzo porque nos estamos quedando sin espacio. Entonces subamos al tamaño del lienzo de la imagen y hagámoslo 5000 para la altura asegurémonos de que esté desbloqueado y luego haga clic en redimensionar. Entonces lo otro que necesito hacer es agarrar mi capa de fondo aquí, presionar la letra D que la letra X que nos da blanco para el primer plano y luego con nuestra herramienta de relleno de cubo, podemos llenarlo. Pero primero necesitamos subir a capa y seleccionar capa a tamaño de imagen para cambiar el límite de retardo . Y ahora podemos seguir adelante y llenar eso de peso. Vamos a seguir adelante y crear nuestro fondo para nuestra sección de audio. Entonces en la sección de audio, realidad tenemos que fondos porque tenemos una sombra de gota que separa la lista de reproducción superior de la lista de reproducción inferior. Entonces vamos a crear dos formas para el fondo. Así que agarra tu rectángulo seleccionable y asegúrate de haber arreglado apagado y luego solo click hacia fuera y dibujar una forma porque vamos a hacer un tamaño personalizado de 11 76 por 830 luego con comando o control y la letra C. Vamos a copia, asegúrate de tener tu capa de fondo todavía seleccionada y luego comando o control, y la letra V para pegarla bien. Haga clic en su selección flotante aquí y seleccione a nueva capa. De acuerdo, solo voy a usar mi herramienta de movimiento para subirlo solo un poquito. Y también quiero cambiar el límite de la capa para que se ajuste a la imagen porque necesitamos añadir una sombra de gota . Entonces vamos a la capa dos, tamaño de imagen. Sigamos adelante y hagamos nuestros filtros de sombra de drogas, Layton Shadow y drop shadow. Muy bien, vamos a hacer otra caja para la parte superior de la lista de reproducción. Por lo que volver al rectángulo seleccionable. Y esta vez vamos a hacer 11. 76 para el con y 360 para la altura. Asegurémonos de tener nuestra selección dentro de nuestro documento. Vuelve a tu capa de fondo copia y pega de nuevo y luego haz clic con el botón derecho en nueva capa. Aumenta nuevamente el tamaño del límite de capa y luego agrega una sombra de gota a esa capa. También movamos esa capa por encima de la otra capa y cambiemos el nombre de estos fondos de lista de reproducción superior un fondo de muestra de audio. Podemos seguir adelante y agarrar este top one y simplemente moverlo hacia arriba. Ahora pueden notar que la sombra de gota es mucho más oscura aquí, aquí y aquí en comparación con por aquí en estas áreas. Y eso es porque estamos poniendo otra sombra de gota encima de otra sombra de gota, por lo que la hace más oscura. Entonces sigamos adelante y arreglemos eso. Vamos a agarrar nuestra herramienta de selección de rectángulo y hacer una selección. Necesito asegurarme de que estoy recibiendo el máximo herido de esa sombra gota. Por lo que está justo encima. Y luego vamos a crear una máscara de capa Blanco, asegurarnos de que el negro esté ajustado al fondo y luego eliminar o retroceder la tecla. Por lo que eso quita la sombra de gota de los lados. Todavía tenemos un poco más aquí, así que vamos a seguir adelante y Graham tiene razón herramienta de selección de hormigueo aquí otra vez para ir por los letreros y luego vamos a eliminarlo de ahí también. Y luego lo mismo de un lado. De acuerdo, tenemos nuestras sombras de gota en nuestro fondo. Adelante y agarremos algunas imágenes. Entonces lo primero que vamos a hacer es hacer una búsqueda en Google de un logotipo de nube de sonido. Voy a seleccionar este aquí es 300 por 300 es un archivos PNG, así que asegúrate de tener un archivo PNG y luego dar clic derecho en la imagen, copió la imagen y luego adelante y pegarlo con Commander Control y la letra V y luego en el selección flotante, seleccionar a nueva capa. Y luego nos llega un pequeño mensaje de aire diciendo que pertenece a la capa Mass porque eso es lo que había seleccionado antes de pegar. Entonces no queremos hacer eso. Y sólo quería mostrarles que en caso de que tengan ese problema ahora o en el futuro, voy a seguir adelante y deshacer eso con Comandante Control y las letras. A. Entonces, al pegar desde tu portapapeles, no quieres tener una máscara de capa ni ninguna capa más pequeña que el límite de la capa que el elemento en el que estás pegando. Entonces lo mejor que puedes hacer es agarrar tu capa de fondo porque tiene un límite de capa mucho más grande que nuestra imagen. Y entonces podemos pasar eso y agregarlo a una nueva capa, y luego solo necesitamos mover esa capa por encima de todo lo demás para poder verla. Cambiemos el nombre de este logotipo y sigamos adelante y lo movamos aquí arriba a la parte superior, ¿ verdad? Simplemente vamos a agarrar todas nuestras imágenes, y luego las escalaremos en tan solo un minuto. O tal vez en el siguiente tutorial, veremos cuánto tiempo dura este tutorial. Muy bien, vamos a seguir adelante y agarrar seis imágenes. Vamos a ir a soundcloud dot com forward slash seaside dash audio, y luego vamos a desplazarnos un poco hacia abajo. Y para la primera imagen, vamos a seleccionar esta. El único problema es que cuando hacemos click derecho, no hay opción para copiar esa imagen. Entonces déjame mostrarte cómo aún puedes obtener esta imagen a pesar de que no está disponible desde este menú. Entonces aquí abajo tenemos un artículo que dice Inspect. Creo que ya hemos hablado de esto con anterioridad. En la mayoría de los navegadores modernos tendrán esta opción. Y si no lo haces, o bien necesitas fechar tu navegador o usar un navegador diferente. Por lo que esta opción está disponible en Firefox chrome y safari, y actualmente estoy usando chrome. Una vez que selecciones eso, va a resaltar el código de ese ítem en el que has hecho clic derecho. Y luego por aquí en la columna derecha. Vas a ver una opción para la imagen de fondo, que es esta imagen de aquí mismo. Entonces si apago esto, podemos ver que la imagen desaparece. Y entonces tenemos una URL justo aquí que nos llevará a esta imagen. Entonces solo copia la URL y luego pegarla en una nueva pestaña, y luego tendrás acceso a esa imagen. Así que adelante y copia de la imagen. Vamos a volver a la capa de fondo y pegarla y luego añadimos dos nueva capa. Ahora, solo necesitamos agarrar cinco imágenes más, y realmente no importa qué imágenes obtengan. Cualquiera de estos funcionará. Sólo vamos a hacer click derecho, inspeccionar. Y luego solo necesitamos obtener la URL. Y también puedes simplemente hacer clic derecho y seleccionar copiar dirección de enlace y pegarla en. Así que adelante, descarga cinco imágenes más, Adam a tu documento, y luego seguiremos añadiendo algo más de información. Y voy a seguir adelante y acelerar esta parte del tutorial para que no tengas que verme hacer esto Y cámara lenta. - Está bien . Seguí adelante y renombré también a cada una de las imágenes. Imagen 01 a través de 06 imagen. Entonces si no lo has hecho ya, adelante y hazlo. Y entonces sólo voy a mover estos hacia el lado izquierdo aquí. Y luego quiero agarrar mi herramienta de texto para que podamos empezar a agregar algún contenido para cada una de las imágenes. Y vamos a cambiar el fondo a Georgia. En realidad, usemos esta fuente en su lugar. Y por la talla vamos a hacer 18 y luego son de color gris oscuro. Entonces volvamos a nuestra página web aquí, y sólo vamos a copiar algunas de estas líneas aquí. Entonces copia esa información y luego pegarla con tu textual y luego solo copia cinco líneas más de contenido y pegarla en. adelante y pongamos estos también en el orden adecuado, y luego les renombraremos un solo contenido a través de 05 contenido. Vamos a seguir adelante y crear algún contenido que aparezca y agarrar nuestra imagen de forma de onda, y luego seguiremos adelante y continuaremos con esta lección en el siguiente tutorial. Creo que para este lo hará un poco más grande Vamos a hacer 24. Y también quiero tomar nuestra segunda línea y seleccionar justo eso y cambiarlo a nuestro color azul oscuro . De acuerdo, entonces lo último es agarrar un formulario de camino, Volvamos a subir a la cima aquí. Y entonces lo que queremos hacer es que queremos empezar a jugar esta lista de reproducción para que podamos ver el temporizador y el color naranja entrando. Entonces sólo voy a hacer por cinco segundos, y luego voy a agarrar mi software de captura de pantalla, que está incorporado en el Mac, y luego solo voy a hacer una selección alrededor, capturarlo, y entonces lo voy a meter en mi documento. Así que solo sigue adelante y usa cualquier software de captura de pantalla que utilices captura de esa manera, forma imagen, y luego traedla y cambiemos el nombre de la forma. Está bien, así que todavía tenemos mucho que hacer. Tenemos que organizar nuestras capas. Necesitamos crear botones, y vamos a seguir adelante y empezar a trabajar en algo de eso en el siguiente tutorial. 50. Audio del cuerpo parte 2: Ahora que tenemos todas nuestras imágenes y nuestro contenido, redimensionemos las imágenes y movamos todo a su posición. Adelante y apaguemos estas capas de tres grupos, y luego vamos a seleccionar todo el documento con comando o control y la letra A para que podamos alinear nuestro titular en el centro de nuestro documento Can d select. Ahora tomemos nuestro logo y lo haremos más pequeño. Así que agarra tu báscula, cambio de herramienta más s y vamos a hacer 100 por la altura y luego simplemente moverlo de nuevo aquí a la cima, ¿ verdad? Esto va a mover éste, y también quiero aumentar el tamaño de nuestra forma de camino. Entonces turno Plus s otra vez, y yo sólo voy a llenar la mayor parte de la zona aquí es que puedo tan justo sobre ahí debería ser bueno. Voy a seguir adelante y hacer una selección alrededor de mi forma de camino para que pueda hacer ese límite de capa más apretado a la imagen real. Entonces me preocupa más el fondo y el lado derecho frente a la izquierda en la parte superior. Entonces solo voy a ir justo ahí y luego bajo capa. Vamos a seleccionar recorte a selección De Select y quiero alinear esto al fondo de nuestra imagen y voy a poner los dos en una nueva capa de grupo. Sigamos adelante y seleccionemos todo de nuevo para que podamos alinear esto al centro de nuestro documento. Ahora podemos ver que hay un poco más de espacio de este lado vs este lado, y eso es porque nuestras imágenes de fondo necesitan estar alineadas también al centro. Entonces sigamos adelante y de selecto, y lo haremos a continuación. Entonces no quiero que Teoh alie la capa con una máscara de capa porque no vamos a poder soltar el límite de la capa hasta ese fondo. Entonces vamos a agarrar primero nuestro fondo de muestra de audio el más grande, y luego vamos a subir a recortar por capas el contenido y ahora podemos usar nuestra herramienta de alineación para alinearlo al centro del documento. Y luego moveremos el otro de forma manual. Entonces sigamos adelante y apaguemos esa capa para que podamos seleccionar esta seleccionar todo de nuevo y luego de selecto puede seguir adelante y agarrar ésta. Voy a acercarme aquí para poder echarle un vistazo. Y luego solo voy a usar mi tecla de flecha derecha para moverla hacia el comando que derecho o control en cero para alejar la interfaz. Entonces sí necesitamos hacer un botón aquí arriba así como algunos botones propios aquí. Pero sigamos adelante y arreglemos primero estas imágenes y el contenido. Entonces vamos a tomar cada una de estas imágenes y reducirlas a aproximadamente una altura de 60. Adelante y pongamos su imagen superior dentro así como nuestra inferior, y luego los vamos a alinear todos a la izquierda y distribuir el espacio de manera uniforme. Necesito seguir adelante y apagar mi máscara de capa aquí está bien, para poder seleccionarlos. Bueno, Daniel, tecla de turno y selecciona cada imagen. De acuerdo, vamos a una línea a la izquierda. Ahora sigamos adelante y distribuyamos el espacio entre ellos en el offset. ¿ Por qué? Vamos a escribir 90 y seleccionar esta opción aquí para distribuir centros verticales. Y ahora tenemos una cantidad igual de espacio entre todos ellos Ahora. Podrás recordar anteriormente cuando estábamos trabajando en nuestros logotipos, no pudimos hacer eso porque el tamaño de esas capas era diferente entre sí . Pero cuando las capas sean todas del mismo tamaño, entonces distribuirá uniformemente la cantidad de espacio. De acuerdo, sigamos adelante y tomemos nuestro contenido y moverlos hacia arriba a la posición, junto con una de las imágenes a las que corresponde. También pongamos nuestro logo dentro de las imágenes superiores también. De acuerdo, ahora vamos a tomar nuestro contenido y alinearlo al centro de nuestras imágenes. Agarra tu herramienta de selección de rectángulos, haz una selección, y luego vamos a alinear medio del objetivo. Entonces hagámoslo por todas las diferentes capas. - Vale , Siguiente, vamos a aliar todo este contenido a la izquierda, Así herramienta de alineación, clave de basura. Y luego haga clic en cada una de las líneas. Está cambiando de nuevo al primer elemento y una línea a la izquierda. Muy bien, tomemos todo este contenido en el que acabamos de trabajar y creemos un nuevo grupo de capas para él llamado contenido inferior. Adelante y agarra esto y sólo muévelo un poco por aquí a la derecha. Por lo que tenemos algo de espacio para nuestros botones. Y también quiero hacer una selección para alinear todo este contenido directamente en medio de esta selección. Y solo asegúrate de volver a desactivar esa lista de reproducción superior para que puedas seleccionar este contenido, cambiarlo de nuevo a selección y luego alinear el medio de los objetivos. Entonces de selecto, vuelve a encender este. Echemos un vistazo rápido aquí. De acuerdo, así que casi terminamos. Solo necesitamos crear nuestros botones y alinear algunos elementos más y organizar un poco más nuestras capas , pero lo vamos a hacer en la siguiente lección. 51. Parte 3 de audio: está bien, ya casi terminamos. Vamos a seguir adelante y crear algunas capas organizadoras de botones, y luego veremos si nos queda algo por hacer. Entonces sigamos adelante y creamos nuestro primer botón, aparecemos en la parte superior y tomemos nuestra herramienta Elipse, y vamos a crear un botón que sea de 60 por 60. Vamos a agarrar nuestro color azul oscuro y luego llenarlo con nuestra lana filtro de cubeta. Pero primero tenemos que crear una nueva capa. Llamémoslo botón superior. Rellénalo en el selecto. Muy bien, vamos a seguir adelante y crear nuestro icono de patas. Agarremos nuestra herramienta de selección de rectángulo Y dentro de aquí solo voy a dibujar un rectángulo, y también necesitamos crear una nueva capa llamada Pausa Icon. Vamos a agarrar nuestro cubo, llenar herramienta y llenarla con Blanco. Adelante y de selecto. Sigamos adelante y tomemos ese ícono y duplicarlo. Y luego, con el movimiento dicho, sólo vamos a moverlo aquí a la derecha, solo para darle un poco de espacio y entre y luego a la derecha, haga clic en el icono de Pausa superior y seleccione fusionar hacia abajo. Está bien, hay Pausa Icon. Vamos a seguir adelante y recortar el contenido de esta capa y el botón superior. Y luego sigamos adelante y ponerlos en un nuevo grupo de capas llamado botón superior. Está bien, vamos a seguir adelante y agarrar eso para que podamos seguir adelante y ponerlo en posición. Sigamos adelante y alinémoslo a la izquierda de nuestra forma de camino, que está ahí mismo. Entonces eso se ve bien y luego la parte superior de la imagen. Entonces solo voy a usar mi herramienta de movimiento y moverla hacia arriba para que se alinea a la parte superior ahí. También necesito agarrar mi contenido aquí y luego mover eso hacia abajo para que se alinea a la parte superior también . Vamos a seguir adelante y crear un nuevo grupo de capas para este contenido aquí. Démosle el nombre Top playlist. También voy a sacar mi logo y sacarlo de esa capa grupal para que podamos seleccionar este contenido y alinearlo a la parte superior e inferior del fondo. Entonces vamos a hacer eso haciendo nuestra selección y luego, con su herramienta de alineación, vamos a alinear medio del objetivo. También me voy a llevar mi logo y solo quiero subirlo solo un poquito. Sólo voy a usar mis teclas de flecha. Entonces justo por ahí. Y entonces podríamos volver a poner eso dentro de ese grupo antes. Andy Select. Vamos a seguir adelante y crear un nuevo grupo de capas para esta sección. Y llamémoslo muestras de audio. De acuerdo, vamos a terminar el resto de nuestro contenido aquí, y luego pondremos esas capas dentro de ella. Está bien, vamos a seguir adelante y crear nuestros botones para nuestra lista de reproducción inferior ahora y al igual antes, vamos a empezar con nuestra herramienta Ellipse y hagámoslo del mismo tamaño, que era de 60 por 60. Vamos a crear una nueva capa llamada el botón y luego agarrar tu color azul oscuro y llenarlo de selecto para que podamos verlo ahora mismo. Y eso es porque está por debajo de algunas de las otras capas aquí también. De acuerdo, vamos a acercar un poco. Sigamos adelante y alinémoslo a la parte superior de esta imagen, para que eso se vea bastante bien ahí mismo. Adelante. Apague las guías. Ahora hagamos una pequeña flecha en el interior. Eso es apuntar a la derecha. Entonces vamos a cambiar nuestro color de primer plano hacia atrás dedo blanco y luego con nuestra herramienta de selección de rectángulo , podemos hacer una forma cuadrada. Entonces hagámoslo 30 por 30. Y vamos a crear una nueva capa llamada Arrow Todavía no se ve como una, pero lo hará y luego seguir adelante y llenarlo con blanco y de selecto. Ahora subamos al contenido de capas y cultivos, y ahora estamos listos para rotar. Por lo que vamos a agarrar nuestra herramienta de rotación desde aquí mismo, y una vez que hacemos clic en ella, entonces podemos hacer clic y arrastrar para rotar desde aquí. Podemos usar este encendedor aquí arriba o debilitar tipo en un ángulo específico, y quiero 45 para los ángulos tan apretados que en click giran Ahora solo necesitamos cortar parte de nuestra forma de diamante para que se vea más como una flecha. Entonces vamos a Graham son herramienta de elipse y crear una forma de tipo ovalado y luego simplemente colocarlo sobre esa forma de diamante. Entonces te haces una idea de cómo se va a ver. Vamos a crear una nueva capa llamada corte y luego simplemente llenarla con cualquier color. Adelante y de seleccionar y crear un nuevo grupo anterior llamado Arrow. Y luego vamos a sacar el corte y el aire antes y ponerlo dentro. Y ahora podemos llevar esta capa recortada para, bueno, recortar esa forma usando nuestros modos de fusión y seleccionando una carrera. De acuerdo, vamos a seguir adelante y agarrar nuestra flecha y simplemente centrarla manualmente tan a la derecha sobre su aspecto bueno. Y ahora vamos a crear un nuevo grupo de capas para él llamado botón hover. Y eso se debe a que los otros botones que no se están flotando serán un tono diferente de azul. Ahora solo necesitamos duplicar este botón flotando cuatro veces. Pero primero, sigamos adelante y organicemos algunas de estas otras capas antes de empezar a agregar Mawr a nuestro panel de capas porque ahora mismo se está poniendo un poco lleno. Voy a mover esta capa a la parte superior, que luego le siguen nuestras muestras de audio. Tenemos una lista de mejores jugadas y ayuda a la lista de reproducción inferior, así que sólo voy a poner eso dentro de vez en cuando. También tenemos algunos fondos aquí que podemos poner dentro de cada grupo de capas. Entonces sigamos adelante y los que entran. Está bien. Por lo que eso ayudó a limpiar un poco nuestro panel de capas. Adelante y mueve mi botón de desplazamiento por encima de todo lo demás por ahora, para que en realidad lo podamos ver. Y sigamos adelante y duplicemos esa capa una vez. Arrástrelo hacia abajo, y luego, con nuestra herramienta de movimiento, vamos a arrastrar esa capa hacia abajo. Asegurémonos de que sea una línea a la parte superior aquí, y sigamos adelante y cambiemos el color de ese botón también. Y lo vamos a hacer simplemente bajando la opacidad a alrededor de los 80. Ahora, antes de que me olvide. Vamos a seguir adelante y agarrar nuestro botón de desplazamiento y recortar el contenido. Y hagámoslo también por este botón. Y vamos a renombrarlo botón uno. Vamos a duplicarlo, y luego vamos a seguir adelante y moverlo a la posición, y luego vamos a repetir eso dos veces más. Muy bien, asegurémonos de que todo esté alineado correctamente. Adelante y agrega aquí una guía que se alinea con esta imagen, aparezca en la parte superior, y luego vamos a agarrar nuestros botones y moverlos a su posición. De acuerdo, creo que ya casi terminamos. Adelante, tomemos todos nuestros botones y ponlos en un nuevo grupo de capas llamado Buttons. Y eso es todo. Nuestra sección de muestras de audio ya está hecha, y estamos listos para pasar a la sección de muestras de video, y vamos a empezar eso en la siguiente lección. Entonces si estás listo para hacer eso, bueno, hagámoslo. 52. Video corporal: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y trabajar en la sección de muestras de video, y necesitamos un par de imágenes para empezar. Así que vamos a ir a recoger sabei dot com y hacer una búsqueda de imágenes de conciertos en vivo. Cualquier imagen servirá. Entonces, solo sigue adelante y escoge uno. Voy a seleccionar este, y voy a descargar 12 80 por 8 53 Adelante y descarga eso y después agrégalo a tus documentos. También necesitamos ir a las imágenes de Google y hacer una búsqueda de YouTube, iconos de placa de video y luego bajo herramientas. Seleccioné medio para el tamaño y transparente este 1 800 por 800. Eso es un poco demasiado grande, este todavía demasiado grande. Pero creo que vamos a seguir adelante y empezar con este, y voy a seguir adelante y copiar éste y pegarlo en mi documento. Y ahora sigamos adelante y cambiemos el nombre de estas capas y también sigamos adelante y apagarlas momentáneamente, porque lo que tenemos que hacer primero es crear un fondo para esta sección. Por lo que en realidad voy a subir a nuestra sección de audio y seleccionar este fondo aquí. Si tienes escogida una capa o guía, seleccionará esa capa de fondo al hacer clic en ella y luego se abrirá todas las capas de grupo que está dentro y luego la felicitas y duplicadas. Y ahora solo podemos hacer clic y arrastrar esto hacia fuera y cambiar el nombre de su Volver arriba aquí y cerrar esta capa de grupo. Y ahora necesito volver para mover la capa activa para poder hacer clic y arrastrarla hacia abajo a su posición. Entonces justo ahí debería ser bueno, por lo que eso lo hace mucho más fácil versus tratar de crear uno desde cero. De acuerdo, vamos a cambiar el tamaño de nuestro cambio de imagen de YouTube más s para la herramienta de escala. Y luego en cuanto al tamaño, vamos a ir 680 por la altura, y luego tengo un ancho de 10 20. Si escogiste una imagen diferente, podría ser diferente en el con, por lo que puede que tengas que ir y recortarla o volver atrás y descargar esta imagen. Entonces voy a escalar eso y simplemente moverlo a la posición aquí mismo. Adelante y centrémoslo dentro de este fondo. Entonces con nuestra herramienta de alineación, seguiremos adelante y seleccionaremos el fondo, en realidad necesitamos apagar primero las muestras de audio. Ahora puedo seleccionar esa tecla de turno, clic en la imagen y luego un centro de línea en medio del objetivo. De acuerdo, sigamos adelante y agreguemos algunos botones al lado izquierdo y derecho de la imagen, que representarán una forma de navegar dos videos diferentes que forman parte de la lista de reproducción. Entonces vamos a volver a subir a nuestro grupo de muestras de audio a capa, y vamos a seleccionar uno de estos botones. Entonces volvamos a nuestra herramienta de movimiento, escojamos una guía de capas y pinchemos en la parte inferior. Entonces voy a seguir adelante y agarrar botón para y duplicado y tirarlo hacia abajo, y en realidad quiero poner eso debajo de la imagen de YouTube para que parte de ella se esconda detrás ella. Entonces voy a renombrar este botón, ¿verdad? Voy a duplicarlo y luego llamarlo Botón izquierdo. De acuerdo, volver a mover la capa activa. Pongamos nuestro botón izquierdo por aquí y luego nuestro botón derecho por aquí. Vamos a cerrar esto. Muy bien, así que tenemos que seguir adelante y cambiar el tamaño de los botones y hacerlos más grandes. Así que agarra tu botón izquierdo shift plus s y hagámoslo 90 para la altura y el ancho y luego lo mismo para el botón derecho. De acuerdo, sigamos adelante y pongamos esto en posición. En realidad quiero centrar estos botones de arriba a abajo con el fondo, así que voy a agarrar de nuevo mi herramienta de alineación y apaguemos las muestras de audio. Entonces, al igual que el cambio de fondo más el botón y luego una línea en medio del objetivo, hagamos lo mismo para nuestro otro botón aquí. Y lo otro que tenemos que hacer es tomar este botón aquí, el izquierdo, el izquierdo, y voltearlo horizontalmente, por lo que está apuntando en la otra dirección. Entonces, ¿qué? Se seleccionan capa de botón izquierdo. Vamos a subir a capas, transformar y seleccionar voltear horizontal. Voy a seguir adelante y dar clic en esta capa también, para que pueda mover un poco la flecha y el botón a la izquierda. Vamos a acercar y agarrar nuestra herramienta de medición para que podamos medir el borde de la parte exterior del botón hasta el borde. de la imagen para que podamos sumar la misma cantidad de espacio del otro lado también. Por lo que parece 67 píxeles. Tomemos también esta imagen y bajemos la opacidad, para que no sea tan intensa. El único problema es que tenemos parte de nuestros botones mostrando a través de ahora, lo cual es una solución fácil con nuestra herramienta de selección. Voy a agarrar mi herramienta de selección de rectángulo y hacer una selección. Enciendamos nuestras guías porque sí tenemos una guía aquí mismo que mi herramienta de selección de rectángulo también está encajando . Entonces solo voy a moverlo a ese tipo hacia la derecha, solo un poquito para igualar donde el borde de las imágenes y vamos a revisar el otro lado también . Entonces eso se ve bien. Ahora puedo seguir adelante y hacer mi selección. Vamos a agarrar nuestro botón izquierdo y y una máscara de capa y negro blanco dijo al fondo, luego eliminar o retroceso tecla. De acuerdo, mantengamos esa selección. El peso es agarrar el botón derecho y la misma cosa capa máscara y luego borrar o retroceso tecla. De acuerdo, entonces eso se encargó de esa parte del reproductor de video. Sigamos adelante y busquemos nuestro botón de reproducción de YouTube y sigamos adelante y bájalo un poquito justo sobre que debería haber bueno, y luego sigamos adelante y alinémoslo al fondo. De acuerdo, ahora sigamos adelante y creemos nuestros círculos que representen la cantidad de videos en la lista de reproducción. Vamos a crear unos cuantos con un círculo blanco y un trazo naranja, y luego otro con un color azul sólido que representa el video que se está reproduciendo en este momento. Entonces tomemos nuestra herramienta Elipse y dibujemos un círculo y lo hagamos 26 por 26. Vamos a crear una nueva capa Voy a llamar un círculo de playlist. También quiero seleccionar el color naranja de nuestro encabezado. Agarremos nuestra herramienta cuentagotas y hagamos una selección, así que voy a usar eso para llenar este círculo en particular. Vamos a seleccionar y vamos a seguir adelante y crear una nueva capa, y luego vamos a dibujar un círculo más pequeño esta vez de 20 por 20. Adelante y llénalo en de select. También queremos tomar ambas capas y recortar el contenido. Muy bien, usemos nuestra herramienta de alineación, nueva para seleccionar tanto y un centro de línea y medio de objetivo. Y luego, por supuesto, un nuevo grupo de capas. Sigamos adelante y duplicemos esto cuatro veces. Pongámoslos en el orden adecuado. Adelante y agarrarlos y separarlos. Entonces nombro a este círculo cinco, porque va a ser el final. Voy a poner aquí el 4to 1, que va a ser de color azul sólido. Entonces al igual que antes, leer Graham son Ellipse Tool. Vamos a tamizar a 26 por 26. Voy a crear una nueva capa. Después vamos a seleccionar nuestro color azul oscuro y llenarlo con ese color. De acuerdo, sigamos adelante y tomemos esta capa. Uñas y recorta el contenido y luego usa tu herramienta de alineación para seleccionarlos todos para que podamos alinearlos. Seleccionemos un dedo del pie acostado, inferior o superior. Cualquiera de ellos está bien, y luego queremos distribuir y luego para el offset vamos a establecer. ¿ Por qué? A cero y x toe 100. Probemos eso. Creo que eso es un poco demasiado, así que voy a bajar a 65. De acuerdo, eso me gusta. Sigamos adelante y pongamos todos estos en un nuevo grupo de capas. Parece que está un poco fuera de centro. Entonces sigamos adelante y agarramos esa capa grupal. Seleccionar todos. Y luego un centro tirado de blanco puede. Adelante y de selecto. Y echemos un vistazo aquí. Tenemos que limpiar un poco nuestras capas aquí. Entonces sigamos adelante y creemos un nuevo grupo de capas para el reproductor de video y los botones. De acuerdo, vamos a sacar el fondo de ello por un segundo porque necesitamos alinear todo este contenido en el centro de nuestro fondo. Ahora mismo, tenemos mucho más espacio aquí arriba versus aquí abajo. Entonces vamos a agarrar esta capa de grupo aquí, y luego usar de nuevo tu herramienta de alineación para hacer clic en el fondo y luego en una línea media del objetivo. Y luego adelante y pon tus antecedentes ahí también. Está bien. Voy a seguir adelante y encender nuestras muestras de audio también. ¿ Todo bien? Creo que todos hemos terminado con las muestras de audio y video junto al mar. En el siguiente tutorial, vamos a seguir adelante y abordar las secciones de contacto, Así que si estás listo para eso, hagámoslo 53. Contacto corporal: Hola y bienvenidos de nuevo. De acuerdo, vamos a trabajar en nuestra sección de contactos, y lo que queremos hacer es añadir un soborno. Queremos incitar a los visitantes para que nos den su dirección de correo electrónico. Ahora, si realmente, realmente quieren saber información de nuestra empresa o de la empresa de su cliente, entonces van a dar esta información libremente. Pero algunas personas pueden necesitar un empujón extra o un incentivo para dar esta información porque o no están realmente seguros si están listos para dar el siguiente paso o tienen miedo de ser span porque han sido spammed demasiadas veces. Sé cómo se siente eso. Seguro que sabes cómo se siente eso también. Entonces si supiera deletrear, tendríamos un soborno que les ayudara a atraerlos a darnos esa información. Por lo que queremos que sea lo más fácil posible ponerse en contacto con nosotros, pero también darles algo a cambio. El sitio web original no tenía eso. Lo único que realmente tenían fue contactarnos y dejarnos una línea. Pero, ¿por qué? ¿ Qué hay en él para mí? Por lo que siempre pienso en términos de lo que hay en él para la persona que visita el sitio web. ¿ Qué beneficios van a obtener por hacer algo? Entonces la razón por la que estoy enfatizando esto es porque queremos no solo darle a nuestros visitantes a nuestra página web de clientes una buena experiencia de usuario. También queremos ayudar a nuestro cliente a conseguir más negocios o más direcciones de correo electrónico para que puedan comercializarles más adelante. Entonces sigamos adelante y creemos nuestra sección de contactos. No es nada elegante ni extravagante. No nos va a ganar ningún premio, pero es directo al grano. Conéctate con nosotros para una consulta gratuita o algo de forma gratuita. Entonces sigamos adelante y hagamos eso. En realidad, antes de entrar en hacer la sección de contactos, necesitamos crear nuestro fondo para la sección anterior y poner todo ese contenido en su propia capa de grupo. Entonces tomemos nuestra capa de fondo y nuestra herramienta de selección de rectángulos y hagamos una selección para que podamos crear nuestra copia de fondo y pegarla, y luego pongamos la selección flotante en un nuevo anterior llamado audio más fondo de video. También tomemos el límite de la capa y aumentemos el tamaño seleccionando el tamaño de la imagen y luego vamos a filtros, sombra de luz y sombra para crear la sombra de gota para ese fondo en particular. Ahora sigamos adelante y creemos un nuevo grupo de capas llamado Audio Plus Video. De acuerdo, ahora que ya lo hemos hecho, podemos seguir adelante y crear nuestra sección de contactos. Entonces sigamos adelante y empecemos con nuestros antecedentes. Primero, sigamos adelante y enciendamos nuestras guías y tomemos nuestra herramienta de medición y dibujemos 800 píxeles de altura y luego con nuestra herramienta de selección de rectángulos de nuevo, podemos seguir adelante y hacer una selección basada en ese tamaño. Y luego, igual que antes, copiar pegar ponerlo en una nueva capa. Vamos a subir a capa y aumentar el límite de la capa, y luego vamos a añadir de nuevo nuestra sombra de gota. Voy a renombrarlo Contacto Antecedentes. Muy bien, estamos listos para agregar nuestro contenido. Ahora Vamos adelante y Graham son herramienta de texto para el frente. Voy a hacer placa de cobre. Hagamos 60 por la talla y son de color azul oscuro. También voy a ponerlo demasiado audaz y luego por un soborno, vamos a cambiar la fuente. Hagamos también eso audaz. También voy a bajar la opacidad a alrededor de 90 sólo para darle un poco de separación de nuestro título. Y también quiero hacer el texto sobre el mismo ancho que nuestro título. Entonces vamos a usar la opción de espaciado. Simplemente voy a seguir adelante y una línea estos primero y luego con nuestro fin de semana textil, seleccionar todo y luego aumentar el espaciado. Entonces eso se ve bastante cerca para seguir adelante y hacer 1.2, tal vez un poco más. Prueba 1.4 y 1.6. Está bien, eso se ve bien. Sigamos adelante y pongamos esta información en un nuevo grupo de capas. De acuerdo, sigamos adelante y movamos esta información hacia arriba y luego alinearla con su herramienta Lehman. Vamos a seleccionar todos primero, y tenemos que apagar nuestras otras capas aquí arriba. Asegúrate de tener selección seleccionada y luego un centro acostado de objetivo. Muy bien, sigamos adelante y creemos la forma. El clavo se volvió primero en nuestra grilla. Parece que necesitamos aumentar el tamaño para que realmente podamos verlo con agarrar nuestra herramienta de báscula y asegurarnos de que esté desbloqueado. Y hagamos 5100 por la altura y nuestras formas van a tener cinco columnas de rejilla de ancho. Vamos a tener que en la parte superior, y luego vamos a tener una columna disponible en cada lado, lo que nos dará una forma simétrica directamente en el centro. Entonces sigamos adelante y Graham son rectangulares seleccionables para que podamos crear nuestra primera fila de forma. Vamos a crear una nueva capa llamada nombre, y en cuanto al tamaño vamos a hacer las cinco columnas, y vamos a hacer que se peguen 50 píxeles. Por lo que 4 75 por 50. Escojamos un bonito color gris y luego sigamos adelante y llenarlo en K d Select. Vamos a duplicarlo y renombrar su correo electrónico. Llevemos también esas dos capas y recortar al contenido. Vamos a mover el correo electrónico hacia la derecha, sólo vamos a asegurarnos de que tenemos todo alineado a la parte superior, que eso se vea bien. Y luego vamos a volver a crear la forma de mensaje con nuestra herramienta de rectángulo, y vamos a hacer 10 columnas de ancho, y luego en cuanto a la altura, hagamos 360. Crea una nueva capa llamada mensaje y llénala. De acuerdo, en lo que respecta al espaciado. Vamos a hacer una cantidad igual de espacio entre estas dos columnas aquí y luego esta fila y la cuerda del mensaje. Y parece que también necesito mover ambas de mi rosa aquí arriba o a la derecha un píxel. Entonces voy a seleccionar escoger una capa o guía para poder seleccionar cada una de forma individual y luego solo usar mi tecla de flecha derecha para moverla. Ahora vamos a agarrar nuestra herramienta de medición por lo que tenemos 25 píxeles ahí. Adelante y dibujemos 25 píxeles aquí abajo. Vamos adelante y er guía, y entonces podemos subir este camino. Sólo voy a usar mis teclas de flecha. Perfecta lata. Ya no necesitamos la grilla. Adelante y apaguemos eso y luego organicemos aquí estas capas. Cualquier grupo nuclear, sólo lo llamaremos forma. Añadamos sus etiquetas para cada parte del formulario y luego para los fondos iban a hacer esta fuente aquí y vamos a hacer 24 por el tamaño, y luego vamos a elegir el color gris oscuro que hemos estado usando en partes anteriores de la proyecto. Adelante y muévete. Nombre hasta arriba y vamos a escribir nombre aquí. Hagámoslo audaz. A continuación, tenemos correo electrónico, y al seleccionar la capa que estaban agregando el texto para creará esa nueva capa por encima de ella ,lo , que simplemente lo hace más fácil, por lo que no tenemos que preocuparnos de moverla después. Está bien. Simplemente vamos a seguir adelante y alinear todo ahora. De acuerdo, tomemos una medida aquí para que podamos agregar la misma cantidad de espacio del otro lado. Por lo que tengo 18 pixeles. Por lo que otros 18 aquí. De acuerdo, vamos a alinear estos al centro de la parte superior e inferior de la fila. Entonces, ¿qué? El rectángulo de selección herramienta deja cangrejo. Eso parece que vamos a tener que mover estos fuera de esa capa de grupo para que podamos seleccionarlo y luego la selección y una línea media de objetivo puede. Pongamos eso de nuevo, hagamos lo mismo por nombre. Tomemos una medida para la parte superior de esta parte. Por lo que tengo 17 pixeles. Por lo que 17 píxeles aquí para velas de mensaje. Vuelve a poner nombre dentro, y luego vamos a tomar el formulario, y sólo voy a subirlo un poco. De acuerdo, Adelante y agarra tu rectángulo seleccionable. Y para este botón, quiero esquinas redondeadas como lo hemos hecho antes. Y tal vez recuerden si subimos a seleccionar debilitar, seleccionamos rectángulo redondeado a partir de aquí. Pero también hay una opción dentro de nuestras dos opciones aquí mismo dice esquinas redondeadas. Y tienes que seleccionarnos en. Agrega tu radio antes de hacer tu selección. Entonces sigamos adelante y tecleemos 20 para el radio. Y luego por el tamaño, vamos a hacer 200 por 85. Voy a usar el mismo color naranja que usé anteriormente, y voy a llenar eso en de select. Yo solo quiero acercar, asegurarme de que todo esté alineado correctamente aquí mismo. Se ve bien. Y luego qué? Su herramienta de texto irá adelante y cambiará la fuente a ferrocarril. Voy a usar negrita Probemos 24 blanco va a hacer esto más grande. Probemos 36 cuando pruebo 44. A ver si eso encaja dentro. Yo sólo quería lo más grande posible sin acercarme demasiado a los bordes. Está bien, así que eso se ve bastante bien. Muy bien, vamos a seguir adelante y agarrar nuestra herramienta de alineación para que podamos alinearnos. Presentar directamente en el centro del botón. Pero primero necesitamos agarrar nuestra capa de botones y recortar el contenido. Y luego podemos hacer nuestras selecciones con nuestra herramienta de alineación cuando cambie de nuevo al primer elemento y luego un centro de línea de objetivos y medio de objetivo. De acuerdo, entonces vamos a seguir adelante y crear un nuevo grupo de capas llamado Button. Adelante y limpiemos el resto de estas capas aquí. Entonces otro nuevo grupo de capas llamado Contacto y eso es todo. Ya terminamos con la sección de contactos. Por lo que queda una sección más y ese es el pie de página. Seguiremos adelante y terminaremos eso en el siguiente tutorial. 54. Footer: Hola y bienvenidos de nuevo. Muy bien, entonces el último paso para este proyecto es hacer el pie de página. Vamos a mantenerlo real. Simple, riel limpio. Sólo vamos a añadir un aviso de copyright. Algunos iconos de redes sociales e ingredientes fondo para los iconos de redes sociales Utilizo los que descargamos de una lección anterior. Así que adelante, encuentra esos expedientes y llévalos a tu documento. Seguí adelante y las puse en un orden específico, y también renombré cada una de las capas que representan ese icono de redes sociales en particular. Ahora que tienes esa configuración, sigamos adelante y hagamos el fondo de Grady int, y en realidad vamos a subir a nuestro encabezado y hacer una copia de este fondo de encabezado para que podamos usarlo para el fondo de pie de página. Vamos a seguir adelante y renombrar este fondo de pie de página y luego solo arrastra esta capa hasta abajo, y luego con tu herramienta de movimiento, vas a hacer clic en el fondo para que puedas arrastrarlo hacia abajo hasta la parte inferior del lienzo . Ahora, ahora mismo, en este punto, va a tardar para siempre. Entonces si tienes un botón de ardilla en tu ratón. En realidad puedes usar eso para navegar a la parte inferior de la página mucho más rápido. Entonces eso es algo que tienes que configurar en preferencias si tienes un botón de desplazamiento. Entonces sigamos adelante y pongamos esto en posición. Y ahora tenemos mucho espacio vacío, así que sigamos adelante en crop son lona hasta el fondo del pie de página, menos la sombra de gota. Entonces estoy a los 42. 21 y sé que porque coloqué el cursor del ratón justo en la parte inferior y aquí abajo, nos dice la altura de nuestro campus en ese punto. Por lo que una vez que descubras la altura, necesitas recortar para subir a la imagen y seleccionar el tamaño del lienzo y escribirlo. Muy bien, voy a seguir adelante y recortar el límite de la capa para esta capa en particular también. Ahora está mostrando su estar en este punto aquí mismo, y eso es por la sombra de gota, y eso está bien. Realmente no necesitamos hacer nada más con los antecedentes, así que solo lo vamos a dejar ahí mismo. Adelante y hagamos nuestro aviso de copyright, y luego por diversión, voy a hacer Railway bold y voy a ponerlo en 12 y blanco para el color. De acuerdo, vamos a encender nuestras guías y alinémoslo al extremo izquierdo de la cuadrícula. Adelante y enciendamos nuestras rejillas aquí, y parece que es esta línea de aquí. Entonces ahí es donde quiero alinearlo. Y entonces sigamos adelante y alinémoslo. Arriba la parte inferior del fondo del pie de página también. Y a estas alturas deberías saber hacer esto. Vamos a Graham son rectángulo seleccionar herramienta de alineación de herramienta y luego una línea al centro de selección del objetivo. De acuerdo, vamos de seleccionar y sigamos adelante y más en los iconos de las redes sociales. Y voy a colocar el logo de YouTube hasta aquí en el lado derecho. Y entonces sólo voy a agarrar a los otros también. Adelante y apaga a los chicos. No los necesito ahora mismo. Muy bien, agarra tu herramienta de alineación para que puedas alinear estos a la parte superior. Voy a cambiar el offset a 100 y parece que tenemos más espacio aquí que aquí y otra vez. Eso se debe a que este logotipo es más grande. Tenemos que compensar aún más el espacio aquí. Pero en lugar de tratar de averiguarlo manualmente con estas opciones aquí abajo escribiendo números una y otra vez hasta que lo encontremos, solo es más fácil agarrar tu herramienta de medición y hacer una medición entre estos iconos aquí, que es 46. Para mí, el tuyo podría ser un poco diferente. Eso está bien. Y luego de aquí para aquí, vamos a ir 46 Así que tenemos que mover todo hacia la izquierda. Pero lo haremos en tan solo un segundo. Quiero seguir adelante y una superposición blanca para este ícono. Entonces tomemos Instagram y creemos una nueva capa llamada Overlay. Vamos a llenarlo de blanco, y luego tenemos que cambiar el modo de mezcla de suma normal de dos. Y luego tuvimos que colocar a esos dos dentro de un nuevo grupo de capas. Una vez que hagamos eso, entonces podremos ver nuestro icono en peso. De acuerdo, vamos a seguir adelante y agarrar estas cuatro capas y ponerlas en un nuevo grupo de capas llamado Iconos Sociales . Muy bien, ya casi terminamos. Sigamos adelante y movamos todo a la derecha. También necesitamos recortar el contenido, y ahora podemos seguir adelante y alinearlo con nuestra herramienta de alineación a través de nuestra selección. De selecto. Vamos a seguir adelante y crear un nuevo grupo de capas para el pie de página y eso es todo. Nuestro diseño Web ahora está hecho, igual que hicimos en el proyecto anterior. Tenemos que pasar por nuestro diseño Web y ver si hay algo que podamos hacer para mejorar el diseño general. O tal vez cometimos algunos errores y necesitamos corregirlos antes de enviárselos al cliente. Por lo que vamos a trabajar en los ajustes finales de este proyecto de diseño Web en el siguiente tutorial. 55. Tweaks: en general, creo que mejoramos mucho el sitio web existente. Con nuestro nuevo diseño. Es mucho más fácil de usar. Es mucho más profesional. El contenido es más fácil de leer. El diseño general es mucho mejor que lo que tienen en su sitio original. Además, hemos agregado alguna información para ayudar a las personas novias con el fin de presentar para obtener información adicional y proporcionar su dirección de correo electrónico. Y con el encabezado pegajoso, entonces les facilitaríamos encontrar la siguiente página de información que necesitan si no navegaban a ella desde esta zona de aquí. Y por supuesto, sí agregamos algo de credibilidad con nuestro estandarte de prueba social aquí mismo en la sección de héroes. Entonces creo que en general el diseño es mucho mejor. Pero hay algunos errores y cosas que tenemos que hacer para modificarlo, para que sea aún mejor. Y básicamente es el espaciado de las diferentes secciones no son consistentes. Aquí tenemos este elemento que no está adecuadamente centrado con el fondo. Tenemos una enorme cantidad de espacio en blanco justo aquí. Eso no me gusta para nada. Esta zona está desequilibrada y simplemente no es un buen diseño. Podríamos hacer algunas cosas diferentes para hacerlo mejor. Uno. Podríamos crear dos columnas de muestras de audio, o podríamos mover este contenido y contar con una imagen grande aquí. En este caso, esta imagen que estamos reproduciendo puede aparecer aquí para que puedas configurarla, tal vez para reproducir automáticamente el primer video una vez que naveguen a esa sección y luego esa imagen , la imagen que corresponda con ese audio se mostrará aquí . Pero si tienen suficientes muestras de audio, podrías hacer múltiples columnas contra una, y eso solo llena este espacio vacío y equilibra todo. La otra cosa que no hicimos es agregar nuestro icono de estado de hover que usamos aparece en el encabezado. Tenemos que ponerlo aquí y crear capas agrupadas, lo que indica que esto es de hecho, un estado flotante. Y cuando pases por encima de algo, va a cambiar a este tipo de botón o a este botón de color versus estos otros botones de aquí abajo. Entonces creo que todas estas cositas son cosas que hay que tener en cuenta. Recuerda hacerlo para que el diseño y diseño Web en general sea consistente, y eso hará que tus páginas Web sean mucho mejores porque estás prestando atención a estos pequeños detalles. Queremos pixel perfecto. Queremos una cantidad pareja de espacio entre todas las secciones y puedo ver aquí mismo hay más espacio aquí arriba que aquí abajo. Y necesitamos entrar y medir el espaciado entre cada sección y ajustar todo el contenido dentro de ella en consecuencia. Entonces ya sea a. Me puedes ver hacer esto o B. Si ya has pasado y diseñado todo en este punto, probablemente ya sepas hacer esto para que puedas seguir adelante y entrar y ajustar el centro de espaciado todo correctamente si no lo hiciste ya y puedes entrar y crear una segunda columna o llegar a tu propio concepto de diseño. En general, este proyecto es solo para la práctica y de nuevo, al igual que los demás proyectos, no puedes usar este diseño en particular en tu cartera. Entonces lo mejor que puedes hacer es pasar por todo esto y pensar para ti mismo, ¿Cómo puedes hacer que este diseño de página Web sea aún mejor? Este probablemente no sea el mejor diseño Web. Probablemente podrías idear algo aún mejor que lo que he creado. y ese es todo el objetivo a crear. sitios web que sean fáciles de usar van a generar más negocio para tus clientes y proporcionar el mejor diseño Web general posible en base a tu visión creativa. No mi visión creativa, tu visión creativa. Te vas a inspirar en mi trabajo y en otras webs. Y luego vas a tomar esa inspiración y crear algo completamente nuevo basado en tu visión y tu creatividad. Por lo que estoy bastante seguro de que las 2 secciones 1er sean perfectas. Todo debe estar perfectamente alineado en el centro porque recuerdo específicamente usar la herramienta de alineación en cada uno de los diferentes elementos. Entonces sigamos adelante y echemos un vistazo a nuestra siguiente sección, que es la primera parte de nuestro cuerpo. Y creo que en realidad podemos mejorar un poco el diseño de esta sección aumentando la longitud de nuestros párrafos. Creo que ahora son demasiado cortos, y el texto es demasiado apretado y hace que sea un poco difícil de leer. Por lo que necesitamos aumentar el espaciado entre cada línea. Entonces sigamos adelante y hagamos eso para este primer párrafo aquí, y sólo lo vamos a extender a la izquierda y a la derecha de nuestra imagen aquí. Entonces a través de tres columnas de cuadrícula. Y vamos a seguir adelante y copiar esta información y pegarla en un par de veces para llenarla. También volvamos a nuestras opciones de herramientas aquí abajo y aumentemos la base de líneas. Y yo voy a hacer dos, tal vez tres, por el espaciado. Uno golpeó mi llave de escape para salir de ella para poder echar un vistazo a todo aquí. Y creo que eso definitivamente es ah, mucho más fácil de leer que esto aquí. Por lo que queremos que sea lo más fácil posible para que los visitantes lean nuestro contenido. De lo contrario, sólo van a saltar por encima de él, seguir adelante, tal vez incluso salir del sitio. Entonces sigamos adelante y cambiemos las otras tres columnas para que coincidan con ésta también. Yo sólo voy a agarrar el cuadro de texto aquí abajo y subirlo un poco porque puedo ver un poco las tapas de la siguiente línea. Entonces sólo quiero deshacerme de eso. Entonces voy a borrar estos tres párrafos. Entonces voy a tomar este párrafo y duplicado tres veces. Adelante y pongámoslos en el orden adecuado y luego simplemente muévalos. Qué arrastre y pauta aquí abajo está bien, así que puedo asegurarme de que todos estén alineados hasta la parte superior. Sigamos adelante y renombremos también los párrafos. De acuerdo, creo en general, eso hace que ese contenido sea mucho más fácil de leer. Y definitivamente hemos incrementado la calidad diseñada con solo hacer eso. Está bien, sigamos adelante y echemos un vistazo y nuestra siguiente sección, y podemos ver que el espaciado aquí es menor que aquí. También quiero aumentar la cantidad de espacio aquí que es igual a la cantidad de espacio que aparece . Entonces tomemos nuestra herramienta de medición y medimos esto para que se vea como 80 píxeles. Entonces sigamos adelante y dibujemos 80 píxeles aquí o cualquier número que tuvieras en base a tu diseño. Lee fuera. También necesito aumentar la cantidad de espacio entre el titular y nuestra primera sección aquí también. Entonces voy a hacer otros 80 píxeles, y apuesto a que necesitamos un espacio Anson aquí abajo también, y también parece que todo está un poco central. Voy a añadir una guía aquí mismo. Asegurémonos de que estos estén alineados exactamente donde deberían estar. Este está un poco demasiado lejos a la derecha. Entonces voy a volver atrás y seleccionar esa y moverla sobre para que se alinea con la otra sección debajo de ella. Va a mover a la guía sólo para asegurarse. Y creo que somos buenos para el espaciado ahí. Creo que el espaciado entre estos dos está bien, pero sí quiero agregar 80 píxeles de espacio aquí abajo, así que parece que son más de 80 píxeles. Entonces vamos a seguir adelante y recortar sólo un poquito. De hecho, ni siquiera tenemos que cosechar. Solo tenemos que ir dentro y seleccionar la capa de fondo. Y luego solo voy a usar mis teclas de flecha para subirlo. De acuerdo, subamos a la parte superior de la sección, asegurémonos de que todo se vea bien. Todavía podemos tener una sombra de gota? Y todo se ve mucho mejor que antes. No, Si le echan un vistazo a mi diseño aquí mismo, si me acerco, podría ver un poco acostado cruzando la parte superior, y no estoy muy seguro de qué es eso. Voy a seguir adelante y navegar a esa sección las muestras de audio, y vamos a seguir adelante y encenderlo y apagarlo. De acuerdo, entonces desaparece cuando apagué a ese grupo esa capa. Entonces tiene que ser algo por dentro, y creo que en realidad es el fondo mismo. Voy a seguir adelante y navegar y encontrar ese fondo. Entonces definitivamente eso es todo ahí mismo. Una vez que lo apago, esa línea blanca desaparece. Entonces voy a agarrar mi icono de máscara de capa aquí mismo, hacer una selección, y luego la voy a eliminar. ¿ De acuerdo? Necesito poner el negro al fondo. Entonces d y luego actúa y luego borra en la tecla de espacio trasero para quitar esa línea porque está agregando negro a esa zona y la sombra de gota se mantiene en su lugar. De acuerdo, así que hemos limpiado eso. Eso se ve mucho mejor. Esta sección se ve mejor ahora. Tenemos que mover todo lo demás hacia arriba ya que eliminé parte del espaciado de la última sección. Entonces otra vez, vamos a medir 80 píxeles, así que necesito mover la información de contacto hacia arriba, así que voy a entrar de ahí, encontrarla, y luego solo voy a usar mis teclas de flecha para moverla arriba. Está bien, vamos a seguir adelante y agarrar nuestros antecedentes también. Sigamos adelante y movamos eso para llenar el espacio aquí arriba para el espaciado entre estos dos elementos aquí. Voy a tomar la cantidad de espacio que tengo aquí y agregarlo aquí mismo. Por lo que eso solo agrega consistencia al diseño general. Entonces sigamos adelante y medimos esto. Entonces estoy en 69 que agarra tu capa de forma y adelante y muévelo hacia abajo. Catalizadores y un poco de espacio. Ahora entre nuestro botón de envío y vamos a usar 25 píxeles, que es la distancia entre aquí y aquí, aquí y aquí. Por lo que de nuevo, solo queremos agregar consistencia a nuestro diseñado agregando cantidades iguales de espaciado entre diferentes elementos. Y luego, por último, necesitamos 80 píxeles de espacio debajo del botón. De acuerdo, quiero mover el fondo hacia abajo. Ahora. Sé que acabamos de moverlo hacia arriba, así que vamos a tener que volver a entrar y llenarlo de blanco con nuestra herramienta de selección de rectángulo . Entonces sigamos adelante y hagamos eso. Ella yo estaba muy cerca de que lo hicieran. Tenemos que seguir adelante y aumentar el tamaño del pie de página para que coincida con nuestro encabezado. Entonces sigamos adelante y hagamos una medición de su pie de página. Estoy en 1 48 y luego mi cabecera en sí es 150 así que no tengo que terminar demasiado. Voy a seguir adelante y ir al tamaño del lienzo de imagen y aumentarlo en dos píxeles. De acuerdo, ahora que nuestro pie de página coincide con nuestro encabezado, creo que queda una cosa más, y ese es el temporizador de juego en la parte superior derecha aquí que estarían bien tener un temporizador de placas que tenga una barra de color que cruza la parte superior aquí. Eso coincide con nuestra forma de camino. Entonces sigamos adelante y creemos eso. Lo vamos a poner dentro de audio y video y también dentro de muestras de audio. Entonces vayamos adentro de ahí. Vamos a crear una nueva capa. Escojamos un color naranja que usamos previamente, y luego lo dibujemos con nuestra herramienta de selección de rectángulos. Entonces voy a ir por eso porque no tiene que ser un tamaño exacto. Yo sólo voy a ir justo ahí y luego voy a seguir adelante y llenar eso. Creo que eso es un poco demasiado grande o al menos un poco demasiado alto. Alguien adelante y de selecto y luego con mi cambio de herramienta de escala más s, puedo seguir adelante y hacer que la altura de la misma sea más pequeña. Pero sí tenemos que recortar el contenido de la misma primero, así que voy a hacer cinco re escalarlo y sigamos adelante y echemos un vistazo. Está bien, entonces creo que eso sólo agrega un poco. El diseño extra a esa sección en particular lo hace un poco más atractivo de lo que era antes. Vamos a seguir adelante y cerrar todas estas capas de grupos. De acuerdo, creo que me queda una cosa que quiero hacer, y eso es agregar nuestro icono de mano sobre este botón. Así que subamos a nuestro encabezado y encontremos ese icono de flotar, que es esta capa aquí mismo y duplicarla y sigamos adelante y movamos esa capa a esa sección. Voy a seguir adelante y dar clic en escoger un líder o guía, y luego cuando haga clic en este botón, va a abrir automáticamente todas las capas de grupo y mostrarme la capa en la que hice clic, así que esta es la zona al que quiero arrastrarlo. Por lo que ya tenemos el nombre de la capa correctamente etiquetado como botón de desplazamiento, y solo necesitamos mover el icono de desplazamiento a la posición. Ahora. Lo último que recomendaría hacer para hacer de esto un mejor diseño es llenar este espacio vacío. Ahora mismo está desequilibrado, y no es muy buen diseño. Entonces lo que recomendaría es crear una segunda playlist y colocarla aquí del lado derecho , y eso sólo dará a los visitantes más oportunidad de probar el tipo de trabajo que dieron . Entonces si entramos aquí y echamos un vistazo a nuestra lista de reproducción, que está en el contenido de fondo, podríamos tomar toda esta información y duplicarla, moverla hacia la derecha. Pero tengo un presentimiento cuando lo hagamos, va a ser demasiado amplio y el contenido va a estar demasiado cerca del borde. Entonces probémoslo muy rápido. Voy a seguir adelante y agarrar mi fondo de muestra de audio y sacarlo de la capa de grupo, y luego voy a duplicar este contenido. Voy a seguir adelante y moverlo hacia abajo y luego moverlo hacia la derecha y es demasiado grande y luego tenemos contenido superpuesto aquí y está demasiado apretado por aquí. Entonces lo que haría entonces, en este caso es que en realidad usaría mi herramienta de habilidad y la reduciría. Asegurémonos de que esté encerrado juntos. Probémoslo con de 500 hagamos lo mismo para la otra columna también. Y creo que esto nos va a dar el respiro extra que necesitamos ahora. Tenemos que seguir adelante y sacar ambas columnas de estos grupos también para que podamos alinearlas al centro del fondo. Entonces para hacer eso, también necesitamos ponerlos en un nuevo grupo de capas temporal para que sea más fácil alinearlos. Apagemos todo lo demás. De acuerdo, ahora con tu herramienta Lima, veamos si podemos seleccionar el fondo no parece que vaya a trabajar con el dedo del pie, así que vamos a tomar estas dos capas y moverlas hasta arriba. Muy bien, probémoslo ahora. OK, así que eso está funcionando mantenga presionada su tecla de turno y haga clic en las columnas y luego cámbiala al primer elemento y luego a un centro de línea de objetivo. Sigamos adelante y tomemos el fondo muestreado y lo movamos de nuevo a su capa agrupada. Y ahora podemos llevar nuestra herramienta de selección de rectángulos en la línea de arriba a abajo desde aquí. De acuerdo, vamos a volver a poner esto ahora. Entonces solo necesitamos tomar este contenido y eliminarlo de esta capa agrupada temporal. Eliminemos esa. Ciérrala. En realidad, una última cosa. Tenemos que volver a entrar y volver a nombrar esta columna izquierda derecha, y también necesitamos quitar el estado de desplazamiento desde el primer botón. Entonces voy a borrar eso, y también voy a cambiar la opacidad de éste ya que no se está jugando y necesitamos cambiarlo al 80%. Perfecto. Muy bien, sigamos adelante y cerremos todo esto y echemos otro vistazo al diseño de nuestro sitio web. Quiero volver a encender estos comando o control y cero para acercar todo el camino hacia fuera. Asegurémonos de que todo esté encendido aquí. Parece que estoy viendo mi sección de videos. Ahí vamos. Perfecto. Enhorabuena. Ya terminamos de mejorar nuestro proyecto de diseño de sitios web. Y como ya había mencionado antes, recomiendo encarecidamente pasar por este proyecto y crear tu propio diseño creativo para que puedas agregarlo a tu portafolio. Una vez que hayas terminado con eso, estarás listo para pasar al diseño web. Proyecto número cuatro. Gracias por escuchar y tener un día increíble. 56. Proyecto 4: resencia de bienes raíces: hola y bienvenidos a nuestro Diseño Web Proyecto número cuatro. Por lo que para este proyecto de diseño, vamos a tomar otro sitio web existente y rediseñarlo para que sea fácil de usar y ayudar al cliente a ganar más negocios. Y una vez que te muestro el diseño original, vas a notar muchas similitudes con algunos de los proyectos que ya hemos hecho. Hay un montón de sitios web malos diseñados por ahí que no son fáciles de usar. Pero no se desesperen. Vamos a aprender algunas cosas nuevas en este proyecto. Te voy a mostrar cómo quitar cualquier cosa de una imagen. Por lo que en realidad vamos a hacer algunos retoques en la imagen principal. Y también te voy a mostrar cómo crear iconos a partir de formas. Y por supuesto, voy a compartir algunos consejos adicionales de diseño web pro en el camino. Entonces sin más preámbulos, déjame mostrarles el diseño original del sitio web que vamos a rehacer rollo de tambor, por favor. Aquí está en todo su esplendor. Es el sitio web de renta inmobiliaria y es horrendo. Tenemos un enorme logo y un número de teléfono con su ubicación de oficina aquí mismo. sé absolutamente nada de esta empresa cuando visité por primera vez porque nunca antes había oído hablar de ella. Y no estoy listo para llamarte porque no estoy seguro de por qué te estoy llamando. Vengo a tu sitio porque necesito un lugar para rentar o quiero listar una casa o un condominio que quiero rentar. Pero no estoy muy seguro de querer hacer negocios contigo todavía, Entonces, ¿por qué te voy a llamar? Tenemos que darle a nuestros prospectos una razón para llamarnos. Y colocando el número de teléfono centro frontal. Esta grande realmente no agrega ningún beneficio para ese prospecto a menos que estén visitando el sitio por una referencia. Y sólo necesitan el número telefónico. Bueno, bueno, En ese caso, es fácil para ellos encontrar. En general, solo creo que el área de cabecera es demasiado grande, sobre todo para el logotipo. Tenemos algunos botones que fueron diseñados a partir de los 19 noventa. Este estilo Grady int está anticuado. Diferentes elementos de la página de qué No aliarse con otros elementos. Podemos ver que el logotipo no se alinea con la navegación. Imagen aquí abajo no se alinea con la navegación etcétera, por lo que en general, el diseño es descuidado. Tenemos un titular aquí básicamente explicando de qué se trata esta empresa y de qué se dieron. Ofrecen ofertas inmobiliarias de alquiler en el área de Nueva Inglaterra más específicamente, el área de Lincoln New England. Entonces, a medida que te desplazas hacia abajo, notarás una imagen aquí que está muy pixelada. Utilizaron imágenes de baja calidad, y luego parece que las dimensionan con el tamaño incorrecto, lo que crea la ización de píxeles y hace que la imagen se vea borrosa. Por lo que en general, la calidad de la imagen es horrible. Se trata de un deslizador, por lo que puedes deslizar dos propiedades diferentes, pero todas son de la misma baja calidad. Y creo que las imágenes de mayor calidad, bien fotografiadas son mejores que las de baja calidad. Y permítanme darles un pequeño ejemplo. ¿ Por qué la última vez que viste un comercial para, digamos, McDonald's o Burger King o Wendy's? Y hacen un tiro de cerca de su comida. Sea lo que sea que estén promocionando y tú lo ves y esa comida se ve hermosa. Los bollos son de la consistencia correcta. Se puede ver la textura. Está afilado. Se pueden ver los condimentos y los tomates y la lechuga. Está todo fresco y crujiente y la hamburguesa se ve regordeta y jugosa, y tú estás como, Oh Dios mío, estoy ansiando esa comida ahora mismo. Tengo que tenerlo ahora Imaginemos si usaron cómo se ve realmente su comida. Cuando vas a la unidad a través de pedir algo y lo abres y estás como, OK, el pan está aplastado. El aspecto de la carne se secó. El lechuga es un poco marrón. El jitomate no se ve fresco, casi parece pasta de tomate. Ahora eso es realmente malo jitomate, pero te das la idea. Si mostraron esa hamburguesa real por la que se obtiene a través del impulsor en sus comerciales, no vas a estar tan emocionado por ir a agarrar esa comida en ese momento. Por lo que las imágenes de calidad son importantes para generar interés, mantener su interés y hacer que esa persona se entusiasme con esa propiedad específica. Si la imagen era nítida, fue filmada profesionalmente y tal vez fue filmada más tarde en el día para que haya como una puesta de sol en el fondo, va a parecer mucho más atractiva. Entonces esta imagen mal iluminada aquí mismo, por lo que las imágenes son muy, muy importantes. Puedes poner las mejores imágenes y tu diseño Web, pero Al final, si tu cliente te está dando malas imágenes como esta para ponerlas en su sitio web, tal vez estés codificando el sitio web también. No hay mucho que puedas hacer o puedes hasta vender tus servicios y tomar mejores fotos de lo que te están dando y cobrarle por ese servicio. A lo mejor no eres fotógrafo. No tienes el equipo. No sabes cómo tomar imágenes profesionales, externalizarlas y luego cobrar una cuota por coordinar ese servicio. No quieres separarlo en tu factura. Simplemente te vas a llevar lo que sea que te vaya a cobrar ese fotógrafo y luego aumentaste el precio en 10 o 20% o lo que quieras cobrar por ese servicio adicional porque te estás tomando el tiempo para contratar a alguien y coordinar y gestionar el proyecto. Por lo que necesitas una compensación a cambio de hacer eso. Entonces ese es otro tipo de servicio que hasta puedes vender a tus clientes. Muy bien, vamos a desplazarnos hacia abajo y mirar un poco más en este sitio web y luego te mostraré el diseño que se me ocurrió. Entonces tenemos este enorme bloque gris de nada. Esto con su logotipo y un párrafo, por lo que llevan casi cuatro años en la zona. Pero su sitio web no refleja eso porque está mal diseñado, parece poco profesional. Parece que son un starup, y no están retratando cualquiera que sea su marca. Entonces creo que se están haciendo un mal servicio y debilitan definitivamente aumentar su negocio, que es nuestro objetivo final, porque su objetivo es rentar más inmuebles para ganar más ingresos porque son un para empresa de lucro, y podemos ayudarles a hacer eso creando un sitio web bien diseñado que sea amigable y profesional, y que por sí solo debería aumentar su negocio. Ahora están tratando de agregar alguna prueba social además de afirmar que llevan casi 40 años en la zona , y eso es a través de este cuadro de aquí, que es un código de Facebook que puedes agregar a tus barras secundarias que listarán más que has publicado así como la cantidad de likes que tienes mientras llevan más de 40 años en la zona . Y sé que Facebook sólo ha existido por qué, ¿ 10 años? Solo tienen 99 luces. Esto no está encabezando ninguna credibilidad para esta empresa en particular. Preferiría ver lo que hemos hecho en proyectos anteriores, y eso es agregar logotipos de empresas con las que han trabajado antes. Y eso va a sumar más credibilidad que 99 luces. Definitivamente me quitaría esto, al menos en la página principal. Ahora, si tienes un blawg, puedes poner esto ahí dentro, y eso está bien. De acuerdo, entonces ahora tenemos un botón aquí abajo que dice llamada R R E. ¿Por qué te estoy llamando? No estoy muy seguro de por qué te estoy llamando. Necesito una propiedad. Pero aún no he visto otras propiedades que no sean estas mal iluminadas sobre imágenes de bienes raíces pixeladas y borrosas. Por lo que necesitamos facilitar a los prospectos encontrar propiedades para rentar y facilitar los arrendadores que tienen propiedad rentar lista sus propiedades. Ahora toda esa información está aquí. Ahora sí tenemos otra sección aquí por ser amigable con mascotas. Entonces esto es algo que podemos destacar como un beneficio por ir con esta empresa inmobiliaria de alquiler versus otras porque no todo el mundo es amigable con mascotas. Pero volviendo a lo que estaba diciendo Sólo un segundo ir hay formas para que la gente navegue a diferentes partes de la página web para obtener la información que necesitan. Pero creo que en realidad podemos colocar parte de esta información en la página principal para reemplazar parte de la información que ya tienen aquí y hacer un mejor diseño de sitio web con un mejor diseño para facilitar a los prospectos encontrar lo que necesitan, así como para facilitar a los propietarios listar su casa en particular que quieren rentar. Entonces déjame mostrarte el diseño que se me ocurrió, y lo primero que vas a notar es que rediseñé el logo. El logotipo está un poco anticuado, y también reduje el tamaño del logotipo también, así como la información de contacto, solo para darle importancia a elementos específicos. De acuerdo, así que quieren asegurarse de que ahí logo esté frente y centro. Todavía lo hice sin tenerlo así de grande solo creando un fondo azul el cual tomé de los colores de su logotipo existente. Por lo que me quedé con sus colores de marca. Acabo de cambiar las fuentes y el logotipo en sí para hacerlo más a las fechas y un poco más profesional o mucho más profesional que esto. Entonces lo primero que vamos a ver es logo que nuestros ojos. Van a navegar a la navegación, y luego si ya sabemos con qué queremos o con quién queremos hablar debilitarnos, Ve que sí tenemos el número telefónico aquí arriba, y también podemos postularnos ahora. Entonces si nos han referido a esta empresa y sabemos lo que queremos, podemos aplicar ahora contra tratar de encontrarla en otro lugar. Otra cosa que notarás, es una imagen de alta calidad para la sección de héroes, que representa lo que hace esta empresa inmobiliaria. También queremos que sea fácil para los prospectos encontrar lugares para rentar frente y centro. En la sección de héroes. Tenemos opción de filtrar el tipo de inmueble que quieren y dónde, por lo que podemos poner un presupuesto con un desplegable por la ciudad. Queremos buscar dormitorios y baños, y luego podemos filtrar en base a estas selecciones, y eso nos llevará a una página con todos los anuncios basados en este filtro nuevamente, queremos que sea fácil de usar. Queremos que sea fácil para los prospectos encontrar lo que quieren. No están listos para filtrar, así que van a desplazarse hacia abajo, y van a encontrar cuatro beneficios de por qué deberían trabajar a través de este lugar de alquiler de bienes raíces en particular versus otros. Si crean una cuenta, recibirán un correo electrónico. Cuando se listan nuevas propiedades, las personas están ocupadas y pueden no querer volver continuamente todos los días para buscar propiedades . Entonces si podemos hacer fácil que la gente encuentre lo que necesita y que los devuelva a nuestros clientes, sitios web y no a nuestros competidores, porque tal vez no recuerden el sitio web que visitaron hace 20 minutos y mañana o la próxima semana, tal vez no recuerden a esa empresa en particular que visitaron primero, y sólo encontrarán a alguien más para rentar. Por lo que vamos a facilitar la creación de una cuenta y proporcionar correos electrónicos de nuevas propiedades. Y esto otra vez, estas formas aéreas se pueden subir. Por lo que tus clientes de diseño Web me permiten ayudarte a generar más ingresos, y aquí está mi idea de cómo puedo hacerlo. Por lo que aquí mismo puedes agregar esto como una venta al alza. Yo quiero ayudarte a generar más negocios, y así es como lo vamos a hacer. Aquí tienes otro servicio que te recomiendo para que tu empresa te ayude a incrementar tu negocio. Crear lejos. O alguien en la empresa puede ayudar a los inquilinos a organizar sus utilidades. vas a ayudar a armar a sus nuevos residentes con electricidad, gas de Internet y más. Para que puedas ayudarlos a averiguar cómo hacer esto. ¿ Y les vas a cobrar por ayudarles a hacer esto? ¿ Por qué no ayudar a las perspectivas para los inquilinos? Encuentra un compañero de piso. Podrás crear un foro u otro método del cual las personas puedan encontrarse en tu página web, Mr Client, para encontrar un compañero de piso. Y, por supuesto, ya ofreces un ambiente amigable con mascotas. Y las mascotas son bienvenidas en lugares selectos. Filtra fácilmente tu búsqueda vamos a y en como otro beneficio, te voy a mostrar cómo crear estos iconos en particular también mediante el uso de nuestra herramienta de forma. De acuerdo, entonces tal vez no sean inquilinos. A lo mejor son un casero. Entonces a medida que se desplazan hacia abajo, los terratenientes van a ver esto porque es de frente y centro. Está dividido entre todo lo demás con un fondo azul brillante basado en los colores de marca de esa empresa . ¿ Eres Un arrendador posó tu listado para lista gratis. Ahora caso tenemos una acción llamada para que los terratenientes enumeren sus propiedades de vez en cuando abajo de eso, entonces podemos empezar a filtrar propiedades en base a los cuatro o cinco tipos principales de filtros que gente usa. Y entonces podemos colocar automáticamente nuevos anuncios en esta sección aquí. Si quieres encontrar más alquileres amigables con mascotas, puedes navegar a él haciendo clic en este enlace Seymour otra vez, estamos haciendo más fácil que la gente encuentre lo que necesita, Así que tenemos diferentes tipos de categorías para que la gente encuentre lo que ellos quieren. Entonces otra cosa que recomendaría para que esta empresa se asegure de que la gente siga regresando a su sitio o simplemente para descubrirlos a través de los motores de búsqueda es crear un bloque para que puedas ayudarles a configurar un blawg y empezar a crear contenido para que blawg y brinden sus servicios profesionales con una tarifa adicional por encima y más allá del diseño inicial . Entonces otro tipo de servicio que puedes hasta vender a tus clientes, así que armé una pequeña sección para su nuevo blawg y luego hacia la derecha, podemos armar una barra lateral de contenido adicional o puedes brindarles otro idea para generar más ingresos. Y eso es ofrecer este espacio como espacio publicitario para que puedan vender aquí espacio publicitario a empresas de su zona. Versus esto aquí mismo no proporciona información ni valor, ni credibilidad Por aquí. Este es siempre ese espacio. Están mejor ofreciendo un blawg con enlaces a los artículos más recientes, además de vender espacio publicitario para generar ingresos adicionales por lo que se doblan en la zona durante casi 40 años. Te garantizo que conocen a gente del área que estaría feliz de alguna vez atar en esta parte de su página web. Por lo que estas son todas las sugerencias que puedes dar a tu cliente para ayudarles a ganar ingresos adicionales y hacer crecer su negocio. Y esto es lo que queremos hacer como diseñadores web. No queremos ser sólo otro diseñador Web. Hola, señor Cliente. ¿ Qué es lo que quieres? ¿ Qué tipo de estilo de diseño te gusta? Bla, bla , bla. OK, aquí está el diseño. Gracias. Adiós. No, hagamos algo diferente. Seamos mejores que tu diseñador web promedio. Ayudemos a estas empresas a hacer crecer su negocio porque al final, por eso te están contratando para diseñar su sitio web. Quieren un sitio web que puedan vender sus productos y servicios, y si puedes mostrarles formas de aumentar su negocio, entonces adivina qué. Te van a referir a otras personas que necesitan sitios web hechos para generar más negocios. Y una vez que obtienes una referencia, vas a conseguir otra y otra, y antes de que te des cuenta, vas a tener más trabajo. Entonces puedes manejar, y luego puedes empezar a aumentar tu precio en consecuencia porque estás ayudando a la gente a ganar más dinero y debes ser compensado por hacer eso. Y luego al subir tus precios, también controlas la cantidad de volumen o la cantidad de trabajo que estás haciendo. ¿ Quieres hacer 2025 diseños de sitios web al mes a $200 la página web Eso son $5000 al mes, O preferirías hacer cinco diseños de sitios web al mes a $1000 por sitio web? Preferiría hacer cinco contra 25 porque estoy haciendo la misma cantidad de dinero por menos trabajo . Ahora. No digo que esto sea lo que cobro ni lo que debes cobrar. Solo quiero que pienses en cómo puedes ser diferente de todas las otras decenas de miles de diseñadores web por ahí. Tienes que separarte de ellos mawr que solo en base a tu estilo de diseño. Tienes que brindar servicios que te separen de la competencia. Por último, tenemos un simple pie de página también, con algunos enlaces a iconos de redes sociales y luego algunos enlaces a otras partes del sitio web. Contamos con nuestra política de privacidad. Tenemos alguna información legal. Contamos con un mapa del sitio que proporcionará enlaces a todas las diferentes páginas de la página web. También tenemos una manera de que la gente se publique con ellos si no tienes un enlace a una página sobre publicidad, y entonces la gente no va a saber hacer publicidad con esta empresa. Entonces si puedes vender a tu cliente en el servicio, vas a querer poner un enlace en algún lugar para que la gente sepa que pueden anunciarse en el sitio. También necesitamos un derecho de autor. También necesitamos algo de información de copyright aquí abajo está bien, no la incluí en este diseño, pero eso no es relevante. Entonces lo que vamos a hacer es que vamos a crear este diseño de sitio web en particular comenzando con retocar esta imagen principal aquí porque la imagen originalmente tenía un auto o dos, creo abajo en esta área. Y sentí que no estaba ayudando con la imagen general. Y me gusta más la imagen con fuera el auto versus con el auto. Entonces les voy a mostrar cómo quitar el auto de esta imagen en particular, y luego trabajaremos en el logo y luego seguiremos adelante y seguiremos construyendo el sitio desde ahí. No puedo esperar a compartir esa información contigo. Si estás listo, hagámoslo. 57. Retouch: Hola y bienvenidos de nuevo. Está bien, así que me encanta esta foto para este proyecto de diseño web en particular porque creo que es una imagen muy fuerte. Refleja lo que hace nuestro cliente, y eso es alquiler de bienes raíces. Ahora que dicho eso, esta ubicación en particular probablemente no funcionará para el cliente uno, porque probablemente no tengan este listado en su sitio. Y dos, por la ubicación ahora basada en las palmeras. Podemos adivinar que esto probablemente está en algún lugar del Sur, y nuestro cliente está en el medio Oriente porque atienden a la zona de Lincoln New England. Pero sigo pensando que está bien mostrar esta imagen en el diseño inicial porque es una imagen fuerte , y quieres retratar a tus clientes una imagen fuerte para que puedan ver la diferencia entre una gran imagen como esta versus aquella primera imagen te mostré en la lección anterior donde se lava el cielo, su pixelado. Tiene basura al frente de la imagen, y en realidad no refleja bien el tipo de propiedades que tal vez quieran alquilar o realmente no retrata esa ubicación en particular así como esta imagen Docena como yo tenía mencionado anteriormente para esa única imagen que teníamos de su página web. Sería una gran diferencia rodar esa imagen más tarde en la tarde o temprano en la noche . Por lo que tienes una puesta de sol pasando al fondo con algunas nubes y algún color en el cielo . Va a hacer que esa propiedad luzca mucho más atractiva, como lo hace esta imagen aquí con la puesta de sol y la iluminación y la composición y todo lo demás de esta imagen es mucho más profesional que esa otra imagen. Eso no es decir que todas sus propiedades vayan a tener imágenes así. Pero quieres tener una imagen fuerte en la sección de héroes para captar la atención de la gente. Si estás mostrando una imagen con basura en el césped delantero y de verdad la puedes ver porque está pixelada o borrosa o ambas cosas, entonces realmente no se parece al tipo de sitio del que quizá quieras rentar porque están mostrando gama baja propiedades. No hay nada de malo en eso. A lo mejor tienen muchos de esos tipos de anuncios, pero aun así puedes retratar cualquier tipo de ubicación mucho mejor poniendo atención al detalle en la imagen para que esa imagen en esa ubicación luzca mucho más atractiva de lo que tal vez realmente es. Ahora. Lo único que no me gusta de esta imagen son estos dos autos. Entonces creo que quitando estos dos autos como lo hice aquí, va a hacer que esa imagen sea mucho más fuerte y mucho más atractiva. Entonces sigamos adelante y descarguemos esta imagen yendo a escoger sabei dot com y luego solo teclear este número aquí mismo. 690086 y para buscar y serás llevado directamente a esta página donde podrás descargar esta imagen. Entonces voy a descargar la imagen 1920 por 10 82, y luego voy a agarrar ese archivo y llevarlo a mi plantilla de cuadrícula. Entonces quieres seguir adelante y abrir esa plantilla de cuadrícula de una lección anterior para empezar desde cero en este proyecto en particular, seguir adelante y cerrar las rejillas, y luego vamos a redimensionar la imagen para que sea sangría completa o, en otras palabras, borde del dedo del pie. Entonces en este momento la imagen tiene 1900 píxeles de ancho, así que vamos a seguir adelante y volver a escalarla con nuestro cambio de herramienta de escala más s. y luego vamos a escribir el con, que es 1400. Y entonces la altura debe ser de 7 89 Una vez que lo esqueleto, solo muévelo hacia arriba a posición aquí, y luego vamos a seguir adelante y retocar esta imagen y quitar estos dos autos. Ahora, al inicio del curso, hablamos de dos tipos de herramientas que puedes usar para retocar, y esa fue la herramienta de clon y la herramienta de curación para este tipo de edición. Creo que la herramienta clon sería la mejor opción para retirar estos autos. Entonces sigamos adelante y agarremos esa herramienta, que se encuentra aquí mismo. O si actualizaste tus atajos de teclado como se mencionó al inicio del curso. Tengo mentalidad a la letra s para el atajo de teclado. Ahora, una vez que hacemos clic en él, realmente no podemos hacer nada aún. Si echamos un vistazo aquí abajo, dice, establece primero una imagen fuente. Entonces lo que tenemos que hacer es decir gimp, dónde queremos clonar desde la imagen para retocar el área que se necesita retocar. Entonces con esa herramienta, si mantengo presionada mi tecla de comando o control y hago clic en esta área justo aquí y luego una vez que me muevo, se aplica el contorno de herramienta a esta área, por lo que sabemos que esta área se va a aplicar en cualquier lugar. Doy click y arro mi ratón. Ahora, medida que me muevo hacia arriba, se puede ver ese contorno de herramienta a la derecha. Ahí está siguiendo mi movimiento de pincel, y va a seguir sumando de derecha a izquierda. Y así es como volvemos a tocar con esta herramienta. Ahora la clave para usar esta herramienta con imágenes como esta que tienen una perspectiva específica. Se quiere asegurarse de que esa perspectiva no esté rota, porque si se hace clic en el área equivocada, el inicio, entonces esa línea es que se va a reunir por aquí hasta el otro extremo. Entonces lo que recomiendo hacer para esto es comenzar de esta manera y luego arrastrar hacia la derecha Ahora , puede que hayas notado que el bordillo cambió a otra cosa en este punto, y eso es porque a medida que arrastras hacia abajo, es va a seguir tirando de los datos o los píxeles de esta zona y cuando vayas lo suficientemente lejos. Posteriormente tomará los pixeles del auto. aquí está bien, así que vamos a dar clic y arrastrar soltar y luego dar clic y arrastrar sobre cualquier píxel que no queremos en esa área. Entonces voy a empezar justo en esta área aquí, y luego sólo voy a seguir esa línea hacia abajo para tratar de encontrarme con donde empecé con esa herramienta. Por lo que ahora tengo ese auto que se está aplicando en esta zona. Entonces solo voy a dar clic aquí y empezar de nuevo, y ahora tengo un trazo diferente que se está aplicando a esa zona. De acuerdo, también podemos redimensionar o cepillar con nuestras llaves de soporte. Ahora mismo tengo mis pechos, me puse alrededor de 14. Por lo que quieres aumentarla o disminuirla en función del área en la que estás trabajando porque no quieres agregar píxeles donde no son necesarios si no es necesario agregarlos ahí. Entonces si golpeo mi llave del soporte izquierdo, va a hacer que ese tamaño de pecho sea más pequeño. Entonces ahora está más cerca de cuatro. La llave de soporte derecho lo va a hacer más grande, por lo que ahora está más cerca de 30 para que solo lo haga más fácil y rápido que venir aquí y ajustar el tamaño de tu pincel mientras estás trabajando. literalmente puedas redimensionar tu pincel mientras estás trabajando. Entonces justo en esta zona aquí tengo un poco extra del bordillo que no quiero, así que voy a hacer mi nacimiento más pequeño con la llave del corchete izquierdo. Voy a mantener presionada mi tecla de control o comando puesta si estás en un Mac o PC y luego voy a restablecer donde quiero clonar desde aquí mismo. Y entonces cubrirá esa zona arriba donde no quiero que la curva esté en esa zona. Entonces voy a seguir adelante y hacer las llantas y el fondo del auto por aquí ahora, Así que otra vez, control o comando para decirle a gimp de dónde clonar y luego sólo pintar sobre esa zona. Otra cosa que queremos hacer como diseñador Web es que no queremos retocar imágenes de forma gratuita . Si los clientes te piden retocar una imagen, di que sí, yo puedo hacer eso. Yo puedo brindar ese servicio. Pero esto es lo mucho que va a costar hacer Así que tienes que determinar cuánto vas a cobrar por retocar tus imágenes. Y por supuesto, algunos son más fáciles que otros. Por lo que hay que poder saber cuánto quieres cobrar por ese servicio en particular. Si lo vas a hacer tú mismo o si te vas de dedo, externalízala. Entonces necesitas idear un plan de precios para aumentar esa cuota en particular por parte de la persona que realiza el retoque para que puedas ser compensado por gestionar ese proyecto en particular . Voy a venir aquí y agarrar el pasto. Voy a tapar la sombra aquí porque esa sombra viene del auto. Y entonces voy a seguir adelante y seguir agregando hierba de nuevo a esta zona aquí, tal vez agregue un poco de acera aquí y la otra cosa que voy a hacer como diseñador Web cuando estoy retocando una imagen para el diseño Web inicial, yo no estoy preocupado por ser 100% perfecto. Es probable que los clientes no se vayan a dar cuenta de pequeñas cosas. Y luego una vez que aprueben alguna imagen retocada, condenas, retrocede y explica que la imagen original fue retocada. Esto es lo mucho que va a costar retocarla que te asegurarás de que sea imagen Quieres asegurarte de que sea una imagen de alta calidad, una yendo en un sitio web en vivo. Por lo que vas a explicar que los precios basados en este servicio en particular, esta calidad y por qué va a costar X cantidad. Entonces solo puedes cobrar una tarifa plana por hacer algo como esto. Porque una vez que aprendes a hacerlo tú mismo y sabes cómo hacerlo, no debería tardar tanto en hacer 10 15 20 minutos, tal vez medio Knauer, para hacer un retoque completo como éste con toda la atención al detalle. Por lo que sólo voy a entrar y hacer clic en mi tecla de control o comando para llenar el área de defensa ahora. Genial. Entonces creo que ese auto está hecho. Adelante y alejémonos, y podríamos ver que hay algunos remanentes de la sombra del fondo, el auto justo en esta zona, y eso es lo que quiero decir con un retoque de mayor calidad. Pasaría un poco más de tiempo mezclando esto con mi clon y mi herramienta de talón así para que ese aspecto sea mucho más natural. y mucho más profesional. Y porque este es el diseño inicial y las posibilidades son este cliente en particular no va a estar usando esta imagen porque es del Sur y no es en su zona local donde se rentan. Realmente no hay necesidad de entrar a la perfección con esta imagen en particular. De acuerdo, entonces básicamente lo mismo. Vamos a decirle a gimp dónde queremos clonar para esta imagen en particular, y creo que en realidad quiero empezar de nuevo aquí. Está bien, para que ese bordillo esté hecho, sigamos adelante y trabajemos aquí en la parte inferior. Entonces para esta parte en particular de la edición, empecé aquí abajo como el punto donde le dije a Gim que clonara, y en realidad no está coincidiendo con el resto de la escena en esta zona aquí. Entonces en ese caso, sería mejor comenzar mi clonación ya sea desde aquí arriba o por aquí. Lo voy a probar aquí, y probablemente voy a conseguir un mejor resultado. Y eso se debe simplemente a la textura y a la iluminación en esa zona en comparación con donde estaba anteriormente. Voy a seguir adelante, acercar para que pueda ver un poco mejor. Y ahora tengo un reflejo en la calle aquí de este auto también. Entonces voy a mover mi punto de partida o mi fuente de clones desde aquí. Entonces si entramos con nuestra herramienta de curación y agregamos un trabajo de puntera fuente, solo voy a dar clic aquí y luego pintar sobre esa área en la que acabamos de trabajar con el clon. Se va a mezclar todos esos píxeles juntos mucho mejor que la herramienta de clones lo hace por sí misma. De acuerdo, voy a volver a mi herramienta clon con la letra s y voy a ir adelante y trabajar en esta área herbácea de aquí. Entonces en lugar de hacer trazos largos, solo estoy haciendo trazos cortos haciendo clic y arrastrando porque quiero quedarme aquí en esta zona . De lo contrario, voy a subir por esta zona y empezar a sumar algo de la acera. Y no quiero terminar con una acera aún, así que solo voy a dar clic a ráfagas cortas muy cortas y seguir arrastrando sobre otras partes del auto hasta tener el área cubierta. De acuerdo, vamos a ver si hay un pedazo de acera por aquí. Creo que aquí mismo podemos trabajar con esto. Por lo que de nuevo, sólo haciendo clic y arrastrando ráfagas cortas. Y voy a añadir algo de pasto por aquí otra vez porque estoy perdiendo la perspectiva de esa acera ahora porque estoy haciendo grande la acera. También voy a hacer el tamaño del pecho un poco más pequeño con mis llaves de soporte. De acuerdo, Ahora, en esta zona, tenemos el auto cubriendo parte de nuestros árboles. Entonces para esto, voy a agregar mi fuente de clon justo aquí en medio del árbol porque tenemos una parte larga aquí abajo siendo tapada. Y solo quiero hacer clic y poder arrastrar hacia arriba y seguir esa curva por ese camino. Sólo necesito y un poco de hierba por aquí. Ahora podemos trabajar en la esgrima. De hecho voy a empezar de nuevo aquí con mi fuente de clon. Por lo que de nuevo, tenemos que tener cuidado en dónde están la fuente de clones. Esquema Ahí a la derecha está en relación a donde realmente estamos jugando píxeles por aquí la izquierda. Porque ahora tengo una columna a la izquierda de ese pincel. Y del otro lado, donde el clon fuentes esa columna está mucho más lejos. Entonces sólo voy a pintar en algunos de estos arbustos hacia abajo, pelo al frente, llenar la acera un poco, y luego voy a seguir adelante y trabajar de este lado de la barda y trabajar de esta manera ahora , Entonces voy a seguir adelante y solo dar clic en la columna aquí para mi fuente de clon, y luego solo voy a pintar por este camino a la izquierda y luego a la derecha, así que necesito seguir adelante y escoger otra parte de barda en el centro. Entonces voy a volver a este y empezar en este pequeño poste justo aquí en el medio, para luego agregar mi primera braza justo aquí, que corresponde con el medio de esta barda donde debería estar un poste pequeño también. De acuerdo, voy a y mi fuente cercana en esta columna ahora y trabajar en esta columna. Entonces de nuevo, trazos cortos y simplemente arrastrando para llenar esa zona. Yo sólo quiero ver cómo se ven estos posts aquí abajo. Está bien. Voy a seguir adelante y agarrar este post ahora y ya casi terminamos. Otra cosa que estoy haciendo es tener mi mano izquierda en el lado izquierdo de mi teclado donde se encuentra mi tecla de comando o control. Por lo que puedo dar click rápidamente y seleccionar una nueva área para clonar desde Cam. Sólo voy a limpiar la acera aquí en el frente. Por lo que la acera está un poco fuera aquí mismo. Entonces si tuviera que retocar esta imagen para el producto terminado, eso probablemente pasaría un poco más de tiempo en la acera. Pero creo que para este proyecto en particular y el diseño inicial está bien porque realmente no van a acercar al 769% y ser como, OK, esa acera está apagada. No se ve bien. Creo que en el diseño inicial, ni siquiera lo van a notar, sobre todo cuando tenemos algún contenido en esta área también. Se van a estar centrando más en esto y que se den cuenta de que la acera no es 100% perfecta. Pero de nuevo, si están pagando mis servicios para retocar esta imagen, voy a dedicar más tiempo para que sea un perfecto en ello versus solo una edición para el primer borrador. De acuerdo, entonces eso es todo para retocar esta imagen en particular en el siguiente tutorial, vamos a empezar en el logo y el área de encabezado de la página Web, así que si estás listo para eso, hagámoslo. 58. Encabezado: Hola y bienvenidos de nuevo. Muy bien, entonces para esta lección, vamos a trabajar en la sección de encabezados de nuestro proyecto de diseño Web. Vamos a añadir una navegación primaria y secundaria. Vamos a crear un nuevo logotipo, que va a ser realmente sencillo de hacer. Va a ser limpio y de aspecto más profesional que el logotipo que tienen actualmente. Y lo otro que quiero mencionar realmente rapido es, como diseñaste cada vez más sitios web, puede que te encuentres usando el mismo tipo de formas o elementos una y otra vez en nuevos proyectos. Por ejemplo, en nuestro proyecto anterior, creamos esta navegación primaria con un icono de hamburguesa para mostrar o representar que la navegación se mostrará u ocultará. Al hacer clic en ese icono en particular. Ahora me gusta esta fuente. Me gusta el tamaño me gusta el ícono de la hamburguesa, así que realmente no hay razón para que vuelva a hacer esto desde cero cuando ya lo he hecho previamente en un proyecto diferente, por lo que realmente podemos tomar esta navegación y añadirla a nuestra actual proyecto, que hice en el diseño inicial. Sólo necesitamos cambiar un par de longitudes porque se trata de propietarios o personas que buscan rentar versus videografos o un especialista en audio. Entonces, entremos aquí y saquemos el logo. Así que adelante y abre este archivo y luego quita el fondo del encabezado también. Y luego podemos hacer clic y arrastrar este grupo esa capa a nuestro proyecto actual y añadirlo. Entonces sigamos adelante y movamos esto hacia arriba a la posición aquí. Todavía no va a ser exacto. Simplemente lo vamos a levantar y salir del camino, y puedo seguir adelante y cambiar el nombre de esta navegación primaria. Sigamos adelante y definamos nuestro espacio de cabecera. Entonces tiremos una pauta hacia abajo 2 20 píxeles. Entonces eso nos va a dar nuestro espaciado en la parte superior. Y luego vamos a tirar hacia abajo otro 1 a 120 que será la línea de base para nuestra navegación primaria, la parte inferior de nuestro texto aquí, o el ícono de la hamburguesa y nuestro logotipo. Por lo que en realidad podemos graham nuestra navegación primaria ahora y ponerla en posición. Entonces, así como eso, casi terminamos con la sección de encabezados. Adelante y hagamos la navegación primaria Voy a usar ferrocarril para la fuente. Voy a hacer 14 por la talla. Y luego, claro, necesitamos a White. Entonces solo voy a escribir un número de teléfono y luego cinco espacios para reenviar listones y luego cinco espacios otra vez y luego aplicar ahora. Entonces voy a seleccionar esto porque quiero que este contenido sea audaz. Entonces, adelante y hazlo audaz. Y eso solo ayuda a que destaquen un poco más frente al número telefónico, porque creo que aplicar ahora es más importante que el número telefónico porque muchas veces creo que la gente querrá postularse para que su edificio figure en la página web. O tal vez quieran rentar un condominio específico o un permiso o casa o lo que sea que sea el caso versus llamar. En ocasiones están ocupados, y simplemente es más fácil llenar un formulario para decir que estoy interesado en esta propiedad o tengo esta propiedad en renta y aquí está mi información de contacto. Hazme saber cuál es el siguiente paso. Entonces por eso destacaría aplicar ahora versus el número telefónico y de nuevo que todo se remonta a investigar y averiguar más sobre los prospectos específicos de tu cliente. A lo mejor es lo contrario para su parte del país. A lo mejor la gente prefiere llamar frente a aplicar en línea, y preferirían postularse vía telefónica o concertar una cita para entrar. Y en ese caso, base en esa información que obtengo de mi cliente, entonces pondría el número telefónico en negrita y no aplicaría. Ahora quiero decir ni siquiera poner aplicar ahora. Si su clientela está ahí, prospectos no les gusta aplicar en línea. Está bien, sigamos adelante y movamos esto a la posición. Pongamos a nuestros guías, Comandante Control y Semi Colón, y lo voy a colocar aquí mismo en la parte superior de esta pauta. Entonces eso va a estar en línea con nuestro logo porque nuestro logo va a cubrir la altura entre estas dos líneas. Entonces sigamos adelante y empecemos con eso. También necesito sacar esto y llamarlo navegación secundaria. De acuerdo, vamos a crear una nueva capa llamada fondo logo y luego, con nuestra herramienta de selección de rectángulo, hagamos un rectángulo. Digamos que 1 90 por yo creo que son 100 por la altura. De acuerdo, entonces antes de que podamos preguntar, rellena este color de fondo necesitamos encontrar su color exacto de branding. Entonces déjame mostrarte cómo puedes hacer eso. Si estás en el sitio web de un cliente y no saben el color exacto para darte, en realidad puedes encontrar un enchufe de selección de color. Y creo que hablamos de esto en una lección anterior. Y cuando tengas ese enchufe instalado, tengo uno aquí mismo llamado el Selector de Color. Puedo hacer clic en él y luego pasar el cursor sobre un color que quiero, y te muestra justo ahí abajo, el hex. Un número decimal. Ahora cuando repaso el logo, cambia porque están usando un logotipo de baja calidad que está pixelado, y ahí hay diferentes blues. Entonces sólo voy a elegir este color azul aquí, y luego lo voy a copiar. Simplemente toma nota de ese número ahí porque puedes escribir eso en el cuadro de notación HTML justo aquí. Una vez que escribas eso, golpea tu pegajosa y luego obtienes ese color exacto ahora podemos seguir adelante y llenar esa caja y d seleccionar. Adelante y apaguen mis guías. No los necesito, y luego en cuanto a la familia de fondos. Elegí una fuente que es un tipo de fuente más moderno y actualizado en comparación con lo que tienen en este momento. Y se llama Arrow, por lo que puedes ir a w fuentes dot com forward slash font forward slash arrow para descargar esta fuente. Una vez que no hayas descargado e instalado, vas a tener que reiniciar gimp para finalizar la instalación de ese fondo. Entonces una vez que tengas esa configuración, adelante y configura el fondo y las opciones de herramientas aquí y para el tamaño de fuente, hagamos 80 y el color blanco. De acuerdo, sigamos adelante y tecleemos nuestra E en todas las mayúsculas y luego simplemente moverla hacia arriba en posición. Creo que quiero ir un poco más pequeño en él. Está un poco demasiado cerca del filo ahí, así que voy a seguir adelante y teclear 75. Prueba eso. De acuerdo, eso me gusta mucho mejor, y luego vamos a escribir su nombre comercial aquí abajo en la parte inferior. Cambiemos la fuente a ferrocarril, y no estoy seguro del tamaño. Voy a empezar con 16 y puede que tengamos que aumentar eso. Por lo que alquiler, inmuebles. Adelante y que sea 18. Eso se ve bastante bien. Creo que está apagado sólo un poquito. Entonces lo que podemos hacer es aumentar la cantidad de espaciado entre H. Funt y la razón por la cual es porque quería emparejar el con de R E. Así que en dos opciones, hagamos 0.2. Eso en realidad es demasiado. Voy a bajar uno así que va a ser 10.1. Oye, vamos a seguir adelante y crear un nuevo logotipo frío de grupo de capas. Sólo vamos a poner nuestro texto aquí porque quiero tomar este logotipo el contenido y alinearlo con el fondo. Entonces sigamos adelante y llevemos nuestros antecedentes locales y recordemos al contenido. Y luego, con nuestra herramienta de alineación, podemos seguir adelante y seleccionar ambos. Sostén la tecla de turno, haz clic en el logotipo y luego configúrelo en primer elemento y luego alinea el centro y medio del objetivo . Ahora el problema es que tenemos un cuadro de texto más grande de lo que realmente necesitamos, por lo que necesitamos volver a nuestro texto aquí con su herramienta de texto y hacer clic en este cuadro de texto en la parte superior y luego arrastrarlo hacia abajo hasta que llegue a la parte superior de las letras. Ahora, después de que hace eso, empuja esas letras hacia abajo. Pero ahora tenemos el tamaño correcto que necesitamos para alinearlo perfectamente en el medio. Entonces volvamos con nuestros linistas. Las herramientas se realinean, y luego tenemos que volver en nuestro cuadro de texto otra vez y mover esto de nuevo a donde estaba antes. Entonces creo que fue un poco más alto que eso. De acuerdo, podemos seguir adelante y poner nuestros antecedentes dentro ahora. Por lo que lo último que necesitamos hacer es actualizar nuestra navegación primaria con el contenido correcto para seguir adelante y hacer doble click con mi textil en audio para seleccionarlo y luego teclear en propietarios. Y entonces podemos eliminar este último. El líder esos cinco espacios extra también. Golpea tu llave de escape, y creo que ya terminamos con el encabezado. ¡ Impresionante! De acuerdo, ahora que tenemos la cabeza o hecho en la siguiente lección, vamos a trabajar en nuestra sección de héroes. Entonces si estás listo para ponerte a la estrella en eso, bueno, hagámoslo 59. Hero: terminemos ahora nuestra sección de héroes para que sea más fácil que los prospectos encuentren lo que necesitan . Y en este caso, necesitan una propiedad de renta para rentar. Y lo que vamos a hacer es crear un filtro para que puedan reducir su búsqueda en función de la ubicación, presupuesto y algunas otras opciones de filtro también. Y luego pueden filtrar y navegar a esa página con esos filtros para aquellas propiedades inmobiliarias que cumplan con sus requisitos. Entonces, en esencia, esto es una acción fría, y lo estamos haciendo fácil para esos prospectos. Teoh encuentra fácilmente lo que necesitan proporcionándolo directamente en la sección de héroes. Esto es realmente simple de diseñar se basa solo en formas y texto, así que sigamos adelante y hagamos eso. Entonces, empecemos por crear nuestros antecedentes para el llamado a la acción y esto. Adelante y crea una nueva capa y vamos a mostrar nuestra guía para que sepamos dónde colocar todo. Voy a agarrar mi rectángulo seleccionable con la letra M, y lo voy a hacer 1230 píxeles de ancho y 200 píxeles de alto. Adelante y escojamos un color de suciedad. Empecemos con el negro por ahora. Agarra tu cubo, llena la herramienta y sigue adelante y llena eso en de select. Otra cosa que quiero hacer es dejar caer la opacidad solo un poquito para que algo de la imagen que hay detrás de ella salga. Entonces voy a ir por ahí. Probemos 75 y también necesitamos alinear esto en el medio, así que creo que sería mejor alinearlo de arriba a abajo izquierda y derecha. Y lo podemos hacer como ustedes saben, con nuestra herramienta de selección de rectángulo. Entonces sigamos adelante y agarramos eso y dibujamos una selección para centrarlo dentro de. Y por supuesto, también necesitamos recortarlo hasta el contenido. Y luego qué? Su herramienta de alineación. Podemos alinearlo con el centro de selección y medio de objetivos. Perfecto. A continuación, vamos a crear nuestras cajas de filtro. Voy a seguir adelante y crear un nuevo anterior llamado Budget Row y hagámoslo tres columnas de ancho. Y luego, por la altura vamos a hacer 65. Escojamos nuestro color azul que usamos para el branding y luego llenamos eso bien, adelante y de Select Commander Control y la letra D. Muy bien, hagamos el resto de las cajas y luego alinearemos todo después porque necesitamos un texto arriba también en la parte superior. Este. Vamos a hacer cuatro columnas de ancho y hagámoslo la misma altura de 65 luego los mismos colores, y sólo voy a seguir adelante y completar el resto. Vamos a hacer una columna, otra en una columna y luego las últimas 13 columnas, y todas van a ser 65 por la altura. De acuerdo, vamos a seguir adelante y agarrar todos esos y alinéelos a la parte superior. También necesitamos subir a capas y recortar el contenido cada una de las diferentes Rose. Dios, eres Lyman Tool. Bueno, Daniel, tecla de turno y selecciona todas las filas. Cámbialo. El primer elemento y una línea a la parte superior. De acuerdo, estamos empezando a conseguir un montón de capas aquí, y está organizando esto en un poco caótico aquí. Entonces sigamos adelante y organizemos nuestras capas, y definitivamente necesitamos poner todo en una capa de grupo para el encabezado también Así que sigamos adelante y hagamos ese grupo nuclear llamado Cabecera. - Está bien, sigamos adelante y sumamos nuestras etiquetas en la parte superior. Ahora vamos a usar ferrocarril 14 puntos y blanco y tú crees que quiero hacer cursiva en vez de solo regular. Entonces el ferrocarril, yo lo digo, vino a apagar todo lo demás ahora mismo, incluyendo el fondo, para que podamos alinear ese texto a la parte superior. Y también necesitamos sacar este texto de esa capa de grupo. Entonces de nuevo, con nuestra herramienta de alineación, vamos a seleccionar cada uno de estos con nuestra tecla de turno y luego una mentira hacia arriba. De acuerdo, agreguemos nuestras etiquetas de formulario que van por aquí adentro. Vamos a cambiar la fuente 2 24 por los señalamientos y ferrocarril regular. De acuerdo, sigamos adelante y tomemos este y hagámoslo realmente audaz. Entonces voy a usar bien, temblorosa. De acuerdo, entonces lo último que tenemos que hacer es alinear todo. Entonces, para los títulos de etiqueta, alinémoslos al borde de sus filas y solo podemos entrar y agarrar cada capa. También quiero poner estos en orden, y luego solo voy a usar mi herramienta de movimiento para moverlo. Entonces solo haz eso por cada uno. Y entonces necesitamos alinear nuestras etiquetas dentro de la Rosa directamente en el centro. Y quiero dar un poco de espacio en el lado izquierdo de cada fila también. Además, parece que mi fila está apagada por un píxel. Entonces voy a entrar y mover eso de nuevo, y también deberíamos organizarlos en el orden en que deberían estar también. Simplemente lo voy a alinear a la parte superior e inferior nueva. Entonces, ¿qué? Son rectángulos electorales. Podemos hacer una selección, y luego trataremos de seleccionarla con nuestra herramienta de alineación. Nos está permitiendo hacer eso, cambiarlo a selección y luego una línea media de objetivo. Entonces solo voy a seguir adelante y agarrar cada una de estas otras capas y alinearla a la mitad del objetivo también. De acuerdo, sigamos adelante y movamos todos estos. Pero primero necesitamos hacer una medición para averiguar la distancia entre el borde izquierdo y nuestro texto para que podamos hacerlo todo igual en toda la rosa diferente. Ahora lo único que quiero hacer, sin embargo, es que quiero tomar este contenido y moverlo hacia la derecha sólo un poquito para darle poco más de respiro aquí a la izquierda. Por lo que tengo 14 pixeles. En realidad voy a seleccionar eso y hacer que sea un bonito hasta 15 píxeles. Y entonces sólo necesitamos medir cada uno de estos también para ponerlos en su lugar. Así que adelante, haga sus mediciones y mueva todo en consecuencia. Ahora para estos dos, realidad la vamos a mandar directamente en medio de sus cajas ya que están cuadradas . Entonces sigamos adelante y agarramos de nuevo el rectángulo seleccionable para que podamos alinearnos en el centro así centro y medio del objetivo y luego lo mismo para este último aquí. De acuerdo, vamos organizados son capas un poco. Voy a crear un nuevo grupo de capas para nuestros títulos, otro grupo de capas para nuestras etiquetas y luego un grupo de capas más para la sección de héroes. Adelante y alejemos el zoom. Creo que sólo necesitamos centrar se llaman acción. En realidad, aún no hemos definido la altura de nuestra sección de héroes, Así que sigamos adelante y hagamos eso y hagamos que sea de 700 píxeles de altura. Vamos a hacer una selección alrededor de eso, y luego vamos a sacar nuestra imagen de condominio para que podamos alinear todo lo demás en la sección de héroes en esa zona. Y entonces lo último que necesitamos hacer es recortar nuestra imagen aquí para que no se muestre debajo de la sección de héroes. Entonces sigamos adelante y agarremos esa imagen. Hagamos una selección justo alrededor de esta parte de la que queremos deshacernos y una máscara de capa y prensa blanca, la letra D y luego la Letra X y luego tu tecla de borrar o retroceso, y que eliminará esa parte de la imagen. Y nuestra sección de héroes ya está hecha. Enhorabuena. Ahora estamos listos para pasar a la siguiente parte, que es crear los servicios del's o la sección de beneficios con estas cuatro columnas. Pero primero vamos a trabajar en crear nuestros iconos para esos beneficios 60. Cuerpo parte 1: Hola y bienvenidos de nuevo. Está bien, entonces ahora vamos a empezar a trabajar en esta parte de nuestro cuerpo, que incluye son cuatro beneficios principales. Y primero, vamos a crear nuestros iconos para cada uno de esos beneficios. Ahora, cuando se trata de iconos, tienes dos opciones. Podrás encontrarlos de forma gratuita en línea o comprarlos en línea a otra persona, o bien puedes diseñar los tuyos propios para que no sea demasiado difícil encontrar iconos que estén relacionados con estos beneficios. Pero, ¿cuál es la diversión en eso? Entonces lo que vamos a hacer es que vamos a crear estos 1er 2 iconos desde cero, y luego vamos a hacer estos dos desde cero en la siguiente lección. Entonces sigamos adelante y empecemos creando un nuevo documento, Commander Control y la letra en. Vamos a Tamañar al 75 por 80. Y vamos a llenarlo con Blanco para que nuestros iconos el aire simplemente se van a hacer a partir de diferentes formas. Entonces sigamos adelante y creamos en nuevo antes para la primera forma. Y para el tamaño, vamos a hacer 70 por 75 y sólo vamos a añadir un trazo alrededor de la selección para subir a editar y luego seleccionar selección de trazos. Hagamos dos pixeles color sólido y hagamos el control Black Que de Select Commander y la letra D. Sólo voy a mover esto a posición aquí. También necesitamos recortar los límites de la capa. Vamos a capas, recortamos el contenido, y también mostremos nuestros límites lier. Entonces sigamos adelante y hagamos nuestra siguiente forma. También necesitamos crear una nueva capa Ford también. Esto no se llama este 101 Y por el tamaño vamos a hacer ocho por ocho, y luego vamos a terminar un golpe alrededor de él otra vez. Mismo tamaño y D Select también fue recortar el contenido y vamos a duplicarlo tres veces. Después reorganizar las capas y luego tomemos cada una de estas y tirarlas hacia abajo. Por lo que justo ahí debería de ser bueno. Vamos a agarrar nuestra herramienta de alineación y seleccionarlos todos con nuestra tecla de turno presionada. Y luego lo vamos a cambiar a primer elemento, y luego vamos a compensarlo a cero para X y 25 por qué es un poco demasiado. Probemos 10. No es suficiente. Probemos 18. Vamos un poco menos. Ahí vamos. Eso va a funcionar. Voy a seguir adelante y poner estos en un nuevo grupo de capas, ¿de acuerdo? Sólo tenemos que hacer algunas líneas ahora. Entonces de nuevo, solo usaremos nuestro rectángulo seleccionable para crear una línea. Y voy a hacer el mío 40 por dos. Vamos a crear una nueva capa llamada mentira. Rellenarlo con negro, el selecto y recortar al contenido. Adelante y mueve esto hacia abajo. Entonces está en la parte inferior de esta caja aquí, y voy a duplicarla tres veces y ponerlos en posición como humanos y simplemente renombrar estos 01 a 04 y ponerlos en su propia capa de grupo. Está bien, vamos a seguir adelante y tomar ambos y ponerlos en otro grupo de capas. De esta manera, podemos moverlos a todos hacia abajo. Vamos a seguir adelante y hacer una selección aquí mismo para que podamos colocarla directamente en el centro del propio contorno. Muy bien, vamos a crear una nueva capa para nuestro círculo en la parte superior. Vamos a agarrar nuestra herramienta de labios y vamos a dibujar un círculo. Hagamos 15 por 15. En realidad lo voy a hacer un poco más pequeño 13 por 13 y vamos a añadir un trazo. Hagamos un píxel esta vez desde la línea con De Select. Y entonces sólo voy a agarrar mi herramienta de texto para poner en la letra X. Y voy a hacer esto un poco más pequeño. Hagamos 12 dos grandes. Probemos 10 y ocho. Entonces voy a hacer el mío a las ocho. Ponga eso justo en el centro, y luego finalmente, un nuevo grupo de capas para este contenido. De acuerdo, Un último paso. Vamos a crear un nuevo grupo de capas llamado Cuenta, que es nuestro primer beneficio, Y luego vamos a tomar eso y agregarlo a nuestro documento. Por lo que ahí está nuestro primer ícono. Adelante y trabajemos en nuestro segundo ícono. Voy a seguir adelante y borrar esto, Vale, Vale, Así que ese 1er 1 fue bastante fácil. El siguiente que vamos a hacer es plug y vamos a usar rectángulos, rectángulos redondeados y algunas líneas para crear el enchufe. Entonces sigamos adelante y creamos nuestra primera parte de nuestro enchufe con una nueva capa, y vamos a seleccionar nuestro rectángulo seleccionable. Queremos asegurarnos de que tenemos esquinas redondeadas seleccionadas y un tamaño de 50 para el Radius. Ahora, cuanto al tamaño va para nuestra parte inicial de nuestro enchufe, vamos a hacer 80 por 35. Vamos a subir a ediciones y a añadirle un trazo también. Dos píxeles para la línea con Ir adelante y hacer eso de Seleccione ahora porque la selección estaba en el exterior de mi documento aquí. Creó el borde de nuestra forma justo aquí en el borde del documento. Pero eso está bien, porque voy a recortar esto para que pueda tener algo de espacio para las partes del baile de graduación del enchufe . Entonces sigamos adelante y agarra de nuevo la herramienta de selección de rectángulo porque quiero crear una línea y la voy a poner en una nueva capa por si necesito un movimiento. Después, voy a apagar las esquinas redondeadas y luego la voy a llenar de negro. De acuerdo, voy a volver a mi enchufe para que pueda cortar esa parte. Entonces solo voy a hacer una selección y luego entrando bajo control y la letra X para cortarla . Creo que quiero mover esta parte solo un poquito y luego cortarla otra vez. De acuerdo, me gusta esa talla. Entonces voy a seguir adelante y voy a enchufar a capa, haga clic derecho y seleccione fusionar abajo. Y ahora eso se convierte en una sola pieza, y también voy a seguir adelante y recortar al contenido también. Podría ser un poco demasiado grande, pero lo resolveremos después de que hagamos algo más del enchufe en sí. Vamos a seguir adelante y crear las púas con nuestra nueva capa seleccionable de rectángulo y luego llenarla de negro. Eso también es duplicar esa capa y moverla hacia abajo. Recortemos también al contenido para ambas capas, haga clic derecho y seleccione emergió de nuevo hacia abajo y luego lo pongamos directamente en el centro del propio enchufe. De acuerdo, voy a seguir adelante y hacer click derecho y asesiné eso también abajo. Voy a duplicarlo y apagarlo y volver a tamaño. Es más pequeño para que pueda trabajar con un cabezal de enchufe más pequeño por el momento. Y la razón por la que lo duplicé es porque si decido necesito volver a esta talla, no tengo que rehacerlo desde cero y tendré el original ahí si es necesario. Una vez que haya terminado. Si me gusta más esta talla que eliminaré la que no necesito. Está bien. Volver al rectángulo seleccionables esquinas redondeadas Y hagamos 25 para el radio. Y yo iba a crear un poco de forma aquí mismo para iniciar el cordón Parte de nuestra forma. En lo que respecta al tamaño, voy a hacer un poco más corto, voy a hacer 12 por cuatro. Y vamos a crear una nueva capa y llenarla de negro. Y entonces sólo voy a mover esto hacia la derecha, y luego vamos a recortar al contenido también. Creo que eso es un poco demasiado grande. Entonces voy a seguir adelante y agarrar mi herramienta de báscula con Shift Plus s y hacerlo más pequeño. Por lo que nueve por tres debería ser bueno. Muy bien, necesitamos crear el resto del maíz. Ahora, vamos a crear una nueva capa llamada cable para agarrar tu rectángulo seleccionable Establezca el radio en 25 . Entonces para el tamaño, voy a hacer 40 por 18 y vamos a agregarle un trazo de nuevo. Negro también. Perfecto. De acuerdo, vamos de seleccionar. Adelante y cortemos el final de eso. Asegúrate de tener las esquinas redondeadas apagadas y luego adelante y córtala. Sigamos adelante y movamos esto a la posición y recordemos al contenido también. Por lo que esta primera parte del cordón quiero hacer más gruesa. Entonces voy a volver al turno más s y aumentar la altura. Entonces nos queda una pieza más de ese acorde. Entonces vamos a crear una nueva capa llamada Cord tres y vamos a volver a hacer esquinas redondeadas. Con un radio de 25 Kayla's y un trazo. Vamos a recortar el contenido otra vez y luego cortar el final de eso con nuestra herramienta para marquesina , Commander Control y X. Y nuestro tapón ya está hecho. Solo necesitamos limpiar un poco nuestras capas. Vamos a seguir adelante y fusionar algunas de estas capas hacia abajo. De hecho, no lo soy. Adelante y haz eso por todos ellos. Y llamemos a las utilidades de capa y luego llevemos eso a tu documento. De acuerdo, así que esto clases un poco pequeño. En general, voy a seguir adelante y bajar mis guías al otro ícono, y luego lo voy a girar con nuestra herramienta de rotación y simplemente girarla para que esté un poco en ángulo , y eso ayudará a llenar algunos de ese espacio vacío. Y ahora nuestro segundo ícono está hecho. Otra cosa que quiero hacer es bajar la opacidad de nuestros iconos porque creo que el negro es un poco demasiado oscuro. Entonces dejemos caer la opacidad a nada que hacer. 50 para ambos. Y ahí vamos. Tenemos dos iconos hechos, y seguiremos adelante y terminaremos los otros dos en el siguiente tutorial. 61. Cuerpo parte 2: Por lo que nos quedan dos iconos más por diseñar, y vamos a utilizar de nuevo nuestras formas así como otra herramienta, que es esta herramienta aquí, la herramienta paths. Entonces sigamos adelante y creamos primero nuestro ícono de casa. Y sigamos adelante y empecemos con una nueva pizarra. Vamos a seguir adelante y crear nuestra primera capa para la puerta y agarrar tu herramienta de selección de rectángulo . Asegúrate de tener las esquinas redondeadas desactivadas. Y luego por el tamaño, hagámoslo 18 por 30. Vamos a añadir un trazo con negro va a hacer para la línea con. Y asegurémonos de que también recortamos el contenido. Y también voy a seleccionar todos con control Commander y a y luego alinear int al centro. De acuerdo, vamos a crear otra capa. Vamos a llamarlo casa, y vamos a hacer de este 1 54 por 54 otro trazo de selecto y recortar el contenido y vamos a moverlo a su posición. Lo mismo vamos a seleccionar todos y utilizar nuestra herramienta de alineación a una línea al centro y después de seleccionar. De acuerdo, ahora vamos a crear el techo para la casa y vamos a seleccionar esta herramienta aquí, que es la herramienta de caminos. También voy a arrastrar hacia fuera una guía 2 37 píxeles y luego encender tu guía para que puedas verla . De acuerdo, vamos a empezar nuestro camino justo aquí en la parte superior izquierda de la casa. Simplemente haz clic ahí, luego ven al lado izquierdo del documento, haz clic de nuevo, y luego vas a conseguir el pequeño camino en el medio. Esos dos puntos de anclaje iban a subir a nuestra guía aquí en la parte superior del documento y click en la guía justo ahí y luego volver hacia abajo hacia el lado derecho. Y luego vamos a seguir adelante y dar click aquí mismo para terminar ese camino. Ahora, antes de añadir el trazo al camino, sigamos adelante y creamos una nueva capa llamada Roof. Después vamos a añadir el trazo subiendo a editar y seleccionar trayectoria de trazo. De acuerdo, ahora tenemos el techo hecho. Volvamos a la capa de casa para que podamos eliminar esta parte de la forma. Entonces describe tus rectángulos. Selecciona herramienta de nuevo y luego eliminado con el control Commander y X. De acuerdo, vamos a seguir adelante y crear una chimenea se puso esquinas redondeadas en y configurarlo en 10 para el radio. Y luego para el tamaño, hagámoslo nueve por 17 y luego le agreguemos un trazo. Está bien, quiero borrar esta parte de la chimenea, así que voy a agarrar mi herramienta de borrador con la letra e Desde aquí, puedo seguir adelante y borrar esta parte de la chimenea para que no se muestre por dentro. También quiero sacar esta parte del techo también. Entonces tomemos nuestra capa de techo y luego eliminemos dentro de aquí. Adelante y pongamos todos estos en un nuevo grupo de capas. Está cogido compañera de piso. Muy bien, sigamos adelante y agreguemos esto a nuestro proyecto de diseño Web. Déjala caer ahí y también bajemos la opacidad al 50%. Muy bien, queda un ícono más. Sigamos adelante y eliminemos esta capa y apaguemos las guías. Agarremos nuestra herramienta Elipse, y luego, para el tamaño, vamos a dimensionar 18 por 28. Kate. Añadamos una nueva capa y luego y tu trazo de select. Vamos a asegurarnos de que no nos olvidamos de recortar, el límite de la capa y luego duplicar cuatro veces. Simplemente voy a seguir adelante y mover estos a la posición, así que algo así. Muy bien, volvamos a la herramienta Ellipse y quiero hacer la mía y 42 por 29 Nueva capa. Y luego agrega el trazo de select Commander Control y D. Voy a volver a mi herramienta de borrador porque quiero borrar parte de esto aquí mismo. Y luego voy a agarrar mi herramienta de pincel con la letra B y luego en cuanto al tamaño, voy a ir cuatro por el tamaño del pincel y luego sólo voy a pintar en un pequeño arco justo aquí. Entonces eso se ve bastante bien. Voy a poner esto en el nuevo grupo de capas. Y la razón por la que estoy poniendo todo esto en un nuevo grupo de capas frente a fusionarlos todo es porque tal vez más adelante, voy a querer redimensionar parte del icono. Y simplemente puedo hacer eso seleccionando las capas individuales que quiero redimensionar frente a tener que hacerlo todo desde cero. Está bien. Asegúrate de bajar la opacidad a 50 también Bueno, va a limpiar mis capas aquí, renombrarlas un poco. Póngalos en orden, y estaremos todos listos para pasar al siguiente tutorial. De acuerdo, todos terminamos con nuestros iconos. En el siguiente tutorial. Seguiremos adelante y terminaremos esta sección agregando algún contenido, centrando todo y organizando las capas. Entonces si estás listo para eso, hagámoslo. 62. Beneficios de la parte 3: Hola y bienvenidos de nuevo. Muy bien, entonces tenemos cuatro beneficios, 12 columnas. Entonces vamos a dividir cada dos columnas en tres columnas. Adelante y primero definamos la altura de la sección, que va a ser de 430 píxeles. Entonces voy a seguir adelante y tomar una medida desde el fondo de mi sección de héroes y bajar a 4 30 vamos y una pauta. Y eso nos ayudará a centrar todo de arriba a abajo una vez que lleguemos a ese punto. De acuerdo, sigamos adelante y tecleemos algún contenido para los títulos que voy a hacer. Ferroviario semi negrita 24 para el tamaño y un color gris oscuro para el color. Adelante y pon esta capa aquí arriba en la parte superior. Sólo voy a teclear todo por ahora. Y luego organizaremos y centraremos todo en consecuencia. Entonces, por un párrafo, sólo voy a volver al ferrocarril regular por el contenido voy a hacer 16 y del mismo color. Sólo voy a dar clic y arrastrar hacia fuera un cuadro de texto. Ya tengo algo de información que sólo voy a pegar. Puedes escribir la misma información o simplemente puedes usar algún texto ficticio. Creo que en realidad hace de este cuadro de texto el ancho completo de las tres columnas también va a sacar esto también. Y entonces solo necesitamos crear un enlace de texto aquí abajo en la parte inferior. Voy a ponerlo en negrita, y voy a elegir el color azul de la marca de la empresa. De acuerdo, vamos a mover esto hacia arriba a la posición. Voy a apagar mis rejillas por ahora. Ahora, vamos a trabajar en algún espaciado. Entonces el espaciado entre nuestro icono y nuestro título, quiero que sea de 20 píxeles. Entonces voy a seguir adelante y medir eso fuera. Adelante y alineemos estos dos. Vamos a crear un nuevo grupo de capas llamado Cuenta, y voy a poner mi título y mi icono en el interior. Y luego voy a seguir adelante y agarrar mi herramienta de selección de rectángulo para poder alinearla entre estas tres columnas, volver a mis calificaciones y asegurarme de tener todas las cuadrículas seleccionadas. De acuerdo, apaguemos la grilla y luego ¿qué? El alineamiento irá adelante y agarrará ese contenido y una línea al centro o párrafo ya debe estar centrada. Desde que lo aplicamos a través de tres columnas. Solo necesitamos Graham son crear enlace de perfil y alinear eso al centro. De acuerdo, Siguiente, necesitamos de seleccionar y continuar con nuestro espaciado entre el título del párrafo y el enlace aquí abajo. Entonces vamos a agarrar de nuevo nuestra herramienta de medición y vamos a hacer 30 píxeles desde la parte inferior del título hasta el párrafo y luego 20 píxeles de nuevo para la parte inferior del párrafo y nuestro enlace. De acuerdo, pongamos toda esta información en esa capa de grupo llamada cuenta. De acuerdo, solo necesitamos hacer eso tres veces más. Seguiremos adelante y apagaremos mis armas. Y para hacerlo más fácil, podemos simplemente duplicar este grupo esa capa, moverla sobre, y luego ajustar el contenido y el icono con el icono correspondiente. En lugar de simplemente escribir todo desde cero, podríamos usar el mismo contenido. Podemos usar nuevo texto ficticio. O si quieres tomarte tiempo para escribir algo nuevo, puedes hacerlo también. Entonces voy a seguir adelante y terminar esto. Puedes vigilarlo, o puedes seguir adelante y saltarte esta parte y terminarla tú mismo. Y entonces no olvides alinear todo este contenido una vez que esté en un nuevo grupo de capas llamado Beneficios en línea lo desde la sección de héroes en la parte inferior de la sección arriba abajo de la parte inferior. Entonces voy a seguir adelante y encender mis rejillas y comenzar a alinear todo mi nuevo contenido. - Está bien, así que ya casi terminamos. Voy a seguir adelante y alinear todo. Ahora necesito ponerlo en una nueva capa de grupo, y eso es todo. Nuestra sección de beneficios ya está hecha. 63. Propio corporal: ya que nuestro cliente cuenta con dos personas principales a las que necesitan apuntar, tenemos que crear una sección para ese segundo grupo, lo que su servicio principal es brindar listados en renta. Pero necesitan que esos listados reales provengan de propietarios o propietarios de propiedades, por lo que necesitan asegurarse de que puedan agregar continuamente nuevos anuncios, esperemos a diario. Por lo que queremos crear una sección para que los propietarios puedan enumerar fácilmente su propiedad. Por lo que aparece en esta página web. Entonces lo primero que vamos a hacer es definir la altura de esta sección, que va a ser de 150 píxeles de altura. Entonces tomemos nuestra herramienta de medición y midamos 150 píxeles. Pero un chico ahí abajo y vamos a crear un fondo para agarrar tu herramienta de selección de rectángulos, hacer tu selección. Vamos a crear una nueva capa llamada fondo. Sigamos adelante y escojamos ese color azul que hemos estado usando de su marca y luego adelante y llenarlo con tu herramienta de relleno de cubeta de select. Vamos a renombrarlo fondo propietario de la propiedad. A continuación, vamos a seguir adelante y agarrar nuestro textil. Vamos a cambiarlo dedo del pie blanco. Vamos a hacer ferrocarriles negrita. Hagamos 24 por el tamaño y luego disco adelante y tecleemos una línea de texto. Simplemente lo voy a colocar justo ahí. No estoy seguro de dónde lo quiero todavía. De acuerdo, Vamos a seguir adelante y crear nuestro Pero ahora, adelante y agarra tu derecha. Herramienta Kingo Seleccionar. Queremos esquinas redondeadas en 25 para el Radius y luego para el tamaño, hagamos al 75 100. Vamos a crear una nueva capa llamada lista de botones ahora y luego seguir adelante y llenarla de blanco. Muy bien, vamos a agarrar nuestra herramienta de texto y vamos a usar el tamaño de flecha 50 y vamos a usar esa misma lista Tapout de color azul ahora. Entonces solo necesitamos centrarlo dentro del botón. Agarremos ahora nuestra lista de botones y recortemos el límite de la capa. Adelante y selecciónela con tu cojo una herramienta y una línea al centro y medio. De acuerdo, voy a poner eso en un nuevo grupo de capas llamado Les Nail Button y vamos a seguir adelante y alinear eso de arriba a abajo de select. Sigamos adelante y movamos nuestro texto solo un poquito. Voy a seguir adelante y acercar. Muy bien, sigamos adelante y agreguemos 50 píxeles de espacio entre la herramienta, así que agarra tu herramienta de medición y mide 50 píxeles. ¿ De acuerdo? También necesito alinear esto en el fondo de arriba a abajo. Sigamos adelante y pongamos a esos dos en un nuevo grupo de capas. Llamémoslo dueños de propiedades. Por lo que el botón y el contenido entrarán ahí. El trasfondo. Vamos a dejar fuera sólo por un segundo porque necesitamos alinear esto al centro de los documentos. Así que selecciona todo con control Commander y a luego selecciona el contenido y alinea centro de contenido de Seleccionar, luego coloca la propiedad sobre su fondo dentro de esa capa de grupo. En realidad necesitamos mover eso de nuevo hacia abajo. Cierra eso. También tengo mi imagen de condominio escuchar de la sección de héroes, no en las capas de grupo. Entonces voy a seguir adelante y colocar eso en el interior y moverlo hacia abajo y eso es todo. Nuestra sección de propietario de la propiedad ya está hecha. Esa fue una fácil. Está bien. En el siguiente tutorial. Vamos a seguir adelante y empezar a trabajar en los cuatro o cinco listados de la categoría principal de la propiedad , así que si estás listo para eso, hagámoslo. 64. Listos: dependiendo de la etapa en que se encuentre un prospecto en el ciclo de compra o en el punto donde estén listos para rentar. Algo puede determinar cuánto y hasta dónde navegan en un sitio web específico. Entonces, por ejemplo, aterrizan en la página principal, y se les da la oportunidad de filtrar propiedades en función de su presupuesto, la ubicación y un par de factores más. Pero tal vez no estén listos para buscar cuatro propiedades de esta empresa en particular en este momento. Quizás quieran saber un poco más sobre la empresa primero. ¿ Por qué debería hacer negocios con esta empresa? Por lo que en ese caso, pueden comenzar a desplazarse hacia abajo o navegar hacia una de las opciones de navegación aparecen por lo que a medida que se desplazan malditamente, se les presentan cuatro beneficios por rentar propiedades a través de esta empresa en particular . Por lo que estamos vendiendo los servicios de esta empresa con esta sección de servicios. Pueden ser tentados a proporcionar su dirección de correo electrónico para que puedan ser notificados cuando se proporcione un nuevo listado. Les gusta la idea de que esta empresa les ayude a organizar sus utilidades porque están muy ocupados, y realmente no tienen tiempo para hacerlo. Sí, probablemente podrían encontrar tiempo, pero están tan ocupados, sería bueno que alguien más lo hiciera por mí. Entonces, ¿qué hay en él para mí? Estas son las cosas que hay en ella para ese arrendatario. Entonces ahora están empezando a pensar, OK, OK, esta empresa me da la espalda. Estoy listo para empezar a buscar para que o bien puedan volver aquí arriba y empezar a filtrar. O si se desplazan hacia abajo lo suficientemente lejos, entonces verán listados de propiedades basados en las cuatro o cinco categorías más populares, que es lo que diseñé aquí. Entonces el pensamiento es que queremos poner las peticiones más populares en la parte superior, seguido de cada uno de los tipos de categorías menos populares. Entonces tal vez para esta empresa en particular, su mayor punto de venta es que tienen rentas amigables con mascotas, y ese es su tipo de filtros de descuento más populares que la gente está solicitando. Por lo que quieres poner eso en la parte superior, y cada vez que se agrega un nuevo anuncio, se agrega por aquí a la izquierda y luego el de la derecha se golpea para que tengas listados frescos siempre listados en la página principal. Pero siempre vas a dar clic en Seymour demasiado bien, Seymour Properties en esta categoría en particular, Tal vez esa no es una categoría que realmente te importa porque no tienes mascotas, mientras que tal vez lofts son el tipo de propiedad que quieren y estos airean los siguientes tipos más populares fuera de las solicitudes de alquiler. Y de nuevo, simplemente hacemos que sea fácil para los prospectos a encontrar lo que necesitan, y pueden desplazarse hacia abajo y encontrar un listado en particular que les funcione. Entonces vamos a seguir adelante y diseñar esta parte de los sitios web y ponerla juntos. Es realmente súper simple. Tenemos titular. Tenemos dos formas, una para un marcador de posición de imagen, otra para contenido. Y luego colocamos nuestro contenido dentro de ahí. Y entonces todo lo que tenemos que hacer es una vez que creemos este 1er 1 se duplica tres veces y el mar más enlace. Y entonces podemos tomar todo este contenido duplicado 34 veces más. Cambia los titulares y por supuesto, queremos entrar y añadir diferentes imágenes. No es necesario hacer eso. Técnicamente podrías liderar la misma imagen para cada listado porque esto es solo para una revisión para tu cliente. Y, por supuesto, dejar el contenido igual para cada listado. Pero me gusta ir la milla extra y no sólo poner atención a los pequeños detalles, sino que quiero darle a mi cliente una representación visual de lo que pueden esperar que sea su sitio una vez que se ponga en marcha. Sí, pueden visualizar eso con esta casa en cada categoría alistarse. Pero creo que ayuda a romperlo y a visualizar mejor lo que está pasando para su nuevo sitio web, cuando en realidad pueden ver diferentes imágenes y diferentes listados en diferentes precios. Por lo que es realmente sencillo de hacer, y sólo toma 10 15 minutos entrar y cambiar parte de esta información y cambiar las imágenes. Por lo que sólo está yendo esa pequeña milla extra para ayudar a nuestros clientes a ver visualmente cómo se verá su sitio web una vez que aprueben ese diseño final. Por lo que lo primero que debes hacer es descargar algunas imágenes. Entonces solo fui a recoger sabei dot com e hice una búsqueda de casas inmobiliarias. Puedes descargar una imagen, o puedes descargar 16 imágenes diferentes basadas en las cuatro categorías diferentes, y luego una vez que las tengas descargadas todas. Adelante y agrégalas a tu proyecto y coloca esas imágenes en las categorías correspondientes . Y tengo alquileres de loft amigable con mascotas, rentas con albercas y casas unifamiliares y luego renombrados esos grupos capas en consecuencia. Y entonces quizá quieras cambiar el nombre de cada una de esas capas también, en base a la categoría, que pudiéramos tener pet friendly uno a cuatro y luego hacer lo mismo por las demás también . Pero antes de que hagamos eso, solo quiero darles otro consejo rápido. Ahora bien, aunque sí me gusta cambiar el nombre de mis capas en consecuencia en función del contenido de esa capa, quiero compartir una razón por la que tal vez no quieras cambiar el nombre de esas capas. Cuando descargas esas imágenes de las selecciones obedecen, tienen un nombre de archivo específico adjunto a ellas. Entonces si echamos un vistazo a este 1er 1 aquí y a todos los demás, tenemos casa, luego un número de siete dígitos, y luego ah, número de tres dígitos. Si entramos y seleccionamos este número de tres dígitos y luego copiamos y pegamos en picks, obedecemos búsqueda, nos va a llevar a esa imagen exacta que descargamos. Y eso es 6 40 nos dice la resolución que descargamos así 6 46 40 Ahora eso hace fácil encontrar esa imagen exacta que descargaste porque digamos que sí cambiaste el nombre de esto y luego tu cliente dice que me encanta esa imagen. Usémoslo en la página web en vivo. Bueno, esa resolución que descargaste quizá dos pequeños, sobre todo si vas a hacer una imagen grande como esta. Por lo que ahora necesitas volver atrás, y necesitas encontrar esta imagen en particular para poder descargarla y una resolución más alta. El problema es que renombraste la Capa, y no mantuviste tracto de la URL para esa imagen. Entonces esta es una razón por la que quizás no quieras cambiar el nombre de la capa porque facilita encontrar esa imagen específica más adelante, si es necesario. Ahora, para este proyecto en particular, sé que este cliente no va a usar estas imágenes porque no están escuchando estas casas reales en su sitio. Entonces en este caso, estoy bien con cambiar el nombre de estas capas pet friendly de uno a cuatro. Y por supuesto tendría que hacer esto también para las otras capas y lo haré más adelante . Ahora mismo, sólo voy a seguir adelante y hacer estos cuatro, ¿de acuerdo? Ahora que tenemos las imágenes en su lugar, necesitamos redimensionarlas. Tenemos que crear un fondo para que podamos anti drop shadow para la imagen y para el contenido también. Pero primero necesito aumentar el tamaño de mi lienzo porque me estoy quedando sin espacio. Entonces voy a subir a la imagen y seleccionar el tamaño de cama, asegurarme de que esté desbloqueado, y luego , por la altura, solo voy a hacer 5000 y redimensionarlo. También necesito agregar blanco a esa capa de fondo también. Por lo que voy a seleccionar una capa de fondo y aumentar el tamaño del límite al tamaño de la imagen. Y luego con mi herramienta de llenado de cubeta, puedo llenarlo con blanco. De acuerdo, ahora podemos empezar a trabajar en nuestro título y la sombra de gota para las imágenes y un marcador para el contenido. Adelante y hagamos primero nuestro título, agarra tu herramienta de texto con la letra T Vamos a hacer Railway Bold 36 para el tamaño y luego gris oscuro para el color. De acuerdo, vamos a seleccionar. También, podemos alinear este título directamente en el centro del documento. También voy a mover esto hacia arriba, y también necesito apagar los otros grupos de capas también. De acuerdo, Ahora, con mi herramienta de alineación, puedo seleccionarla y línea centro de objetivo. De acuerdo, Ahora que ya está hecho, podemos empezar a trabajar en nuestras imágenes. Entonces quiero ir dentro de mi primera capa de grupo aquí. Voy a crear un nuevo fondo llamado fondo. Asegúrate de seleccionar también con Commander Control en D para deshacerte de esa última selección. De acuerdo, ahora podemos seguir adelante y crear nuestro fondo para imágenes y contenido, y vamos a hacerlo de tres columnas de ancho, que tiene 275 píxeles de ancho. Y eso nos dará cuatro imágenes uniformemente espaciadas y dimensionadas a través de esas tres columnas. Entonces tecleemos al 75 para el con. Y luego por la altura, vamos a hacer 270. Adelante y llenemos eso de blanco con nuestra herramienta de cucharón. Y si presiono la letra D y luego la letra X, me pongo blanco en mi primer plano Y entonces puedo llenar eso en que de select con Commander Control y la letra D y simplemente seguir adelante y moverlo por aquí a la parte superior izquierda, y luego nosotros puede seguir adelante y añadir nuestra sombra de gota. Por lo que filtra luz y sombra y sombra gota. Ahora, en el proyecto anterior, tuvimos muchas sombras de gota a lo largo de todo el diseño, y quiero darte otro consejo rápido por usar tu sombra de gota así como otros filtros, porque nosotros tener algo dentro de estos filtros que nos facilitará recordar los ajustes exactos que usábamos anteriormente. Y tal vez recuerden que dije, no recuerdo los ajustes exactos que usé, y eso lo hice a propósito para que luego pueda mostrarles en este proyecto cómo recordar fácilmente la configuración exacta que usa si hacemos ajustes y nosotros al igual que esos ajustes, en realidad podemos guardar esos ajustes para uso futuro creando lo que se conoce como un preset preestablecido es una herramienta o una función que guardará todas las opciones que seleccione para que pueda usarlo más adelante, y simplemente podemos hacer eso haciendo clic en este icono más. Dale una dame. Simplemente lo voy a llamar Sombra suelta Haz clic en Aceptar, Y luego si entras dentro de este menú desplegable preestablecido, desplázate hacia abajo hasta la parte inferior, verás ese nombre aquí. También tengo otro aquí llamado Drop Shuttle. Entonces en este momento tengo 11.795 para la X y la Y. Pero si selecciono mi sombra de gota favorita, esos ajustes cambian en función de lo que guardé en ese momento, no solo eso, sino que también guarda tus últimas sombras de gota usadas. Entonces en el proyecto anterior, podría simplemente haber entrado y seleccionado esta fecha en particular, y lo haría, y esos ajustes que seleccioné en ese momento y haciendo que sea mucho más fácil aplicar la última gota usada sombra. Por lo que no hay necesidad de anotar estos ajustes ni tratar de recordarlo. Cuando se puede crear un preset, también se pueden aplicar presets a algunos de los otros filtros. Así que solo ten eso en cuenta cuando creas un filtro específico y te gusta ese filtro, asegúrate de crear un preset para que puedas acceder fácilmente a él de nuevo en el futuro. Entonces voy a ir a mi sombra de gota favorita. En realidad voy a cambiar la configuración y aumentar la opacidad. Voy a seguir adelante y salvarlo. Y como ya he usado ese nombre antes, sólo va a agregar un número después de él. Lo que hace fácil hacer un seguimiento de las diferentes sombras de gota favoritas que creo ahora que le echo un vistazo a esta sombra de gota. Creo que es demasiado intenso para este diseño en particular. En realidad voy a bajar esto de nuevo a 50. No lo voy a guardar porque puedo acceder a la última sombra de gota usada desde aquí. Y también hay otro lugar donde podemos acceder a él también. Entonces déjame mostrarles que voy a seguir adelante y aplicar eso y vamos a seguir adelante y deshacer eso con Commander Control y la Carta Z para deshacernos de ella. Y digamos que quiero volver a usar esa sombra de gota exacta sin tener que ir dentro de ese panel de filtro. Bueno, si subimos a filtros, podemos ver una opción aquí mismo. Dice Repetir sombra de gota y este es el atajo de teclado. Entonces comando o control, va a ser comando Si estás en un control Mac más F así podría estar trabajando en este proyecto, podría seleccionar mi capa de fondo y luego solo aplicar ese atajo de teclado, Comandante Control y F. Y luego lo aplica directamente a esa capa sin tener que subir al menú para seleccionarla . ¿ Qué tan guay es eso? Entonces eso hace que sea mucho más fácil seguir usando esa misma sombra de gota a lo largo de todo tu proyecto versus cómo lo hicimos en el proyecto anterior, donde entramos repetidamente en ese menú de filtros para configurar esas opciones particulares. Muy bien, sigamos adelante y movamos nuestra capa de fondo detrás de nuestra primera imagen aquí, y vamos a limitar esta imagen al con de este fondo en particular. Solo voy a acercarme un poco aquí y asegurarme de que mi imagen esté perfectamente alineada con el fondo. Entonces, ¿cuál es mi herramienta de movimiento y mis teclas de flecha? Yo sólo voy a moverlo a su posición. Ahora voy a agarrar mi herramienta de selección de rectángulo y vamos a crear una selección que tenga 275 píxeles de ancho, que es de las tres grandes columnas de ancho. Y luego por la altura, vamos a hacer 100 y 80. Entonces podemos seguir adelante y tomar esa selección y moverla directamente en el lugar donde la necesitamos , solo hacer clic en el interior de esa selección y luego moverla con nuestro ratón. También podemos usar nuestras teclas de flecha para ponerlo precisamente donde lo queremos ahora. Porque sí tengo mi imagen todavía seleccionada. Puedo entrar y añadir una máscara de capa. Asegúrate de tener selección y haz clic en agregar. Y luego aplica esa máscara de lira a la imagen y la limita a esa forma. De acuerdo, Ahora podemos seguir adelante y tomar esta capa de fondo y duplicado tres veces para las otras imágenes. Y luego voy a seguir adelante y reorganizar estos para que estén en el orden adecuado. Y entonces sólo necesitamos mover cada uno de ellos a la posición en la que necesitan estar también encenderá nuestras rejillas para que podamos asegurarnos de que todo esté perfectamente alineado donde necesitan estar. De acuerdo, voy a agrupar estas dos capas aquí para poder moverlas. Simplemente llámalo imagen uno. También voy a encender mi guía para que podamos antipauta a la parte superior para que pueda alinear todas las demás capas a la parte superior de la misma. Entonces lo último que necesitamos hacer es crear esas selecciones de rectángulos para que podamos confinar las imágenes a los fondos. Adelante y apaguemos nuestras guías y nuestra cuadrícula y sigamos adelante y movamos nuestras otras imágenes a la posición para que estén por encima de sus respectivos fondos. Esta imagen necesita ser redimensionada, así que voy a seguir adelante y agarrar eso. Y mi herramienta de habilidad fue Shift Plus s. sigamos adelante y hagamos al 75 por el con. Tenemos una altura de 1 84 lo cual está bien, porque vamos a usar nuestra máscara de capa para confinarla a 180 píxeles de altura. Sólo tenemos que moverlo a la posición, y también voy a mover mis otras imágenes a la posición también. De acuerdo, puedo seguir adelante y crear mi selección ahora con mi herramienta de selección de rectángulo. Y vamos a hacer a 75 por 1 80 Asegúrate de tener seleccionada la capa correcta. Necesito mi segunda imagen, y luego necesito agregar mi máscara de capa. Así que adelante y haz eso también para las otras imágenes. Está bien, todo se ve bastante bien. Ahora, sigamos adelante y agreguemos nuestro contenido para nuestros listados. Entonces, ¿qué? Su texto a otra vez? Vamos a utilizar ferrocarril regular y vamos a hacer 18 por el tamaño y son de color gris oscuro otra vez. Y luego solo teclea una dirección de calle, el metraje cuadrado y el precio de esa casa. Por lo que parece que tengo todo centrado. Entonces voy a seleccionar todo con control Commander y a y luego en dos opciones, voy a cambiar la justificación para que esté alineado a la izquierda. También quiero tomar este precio y hacerlo atrevido y hacerlo un poco más grande. Entonces voy a hacer 20 por eso. Y entonces sólo necesito agarrar ese contenido y moverlo a su posición. Ahora, puedo seguir adelante y duplicar esta capa tres veces y mover cada una a su posición. Está bien. Voy a seguir adelante y sacar cada uno de estos para poder alinearlos todos a la parte superior para asegurarme de que todos estén alineados correctamente. Entonces, ¿qué contenían la Herramienta Lehman y tu tecla de turno? Vamos a seguir adelante y hacer clic en cada capa, cambiarla a primer elemento, y una línea a la parte superior puede seguir adelante y poner estos en posición ahora y después organizarlos que todos estén en la posición adecuada de acuerdo a su listado. También voy a tomar cada una de estas capas y luego agruparlas en consecuencia en función su posición. Entonces grupo nuclear Imagen cuatro y luego vamos a poner cada una de esas capas dentro. Entonces sigamos adelante y organizemos todas nuestras capas de la misma manera. - De acuerdo , así que casi terminamos con nuestra primera categoría. La lección que tenemos que hacer es agregar un enlace de Seymour en la parte inferior. Entonces, ¿a qué son mensajes de nuevo? Vamos a dimensionarlo en 18 píxeles. Voy a hacer ferrocarril negrita y luego por el color, vamos a usar nuestro color azul que hemos usado previamente. Y entonces sólo voy a tapear a Seymour. Adelante y saquemos eso. Selecciona todo para que podamos usar nuestra herramienta de alineación para alinearlo con el centro y también vamos a mover esto hacia arriba. Solo voy a usar mi tecla de flecha arriba por ahora. Tan solo para poner esto en posición justo ahí debería ser bueno. Y entonces puedo poner esto en la parte inferior de este jugador de grupo. Ahora que nuestra primera categoría está hecha, las siguientes tres secciones son realmente fáciles. Todo lo que tenemos que hacer es tomar esta capa grupal y duplicarla tres veces para luego reemplazar nuestras imágenes y cambiar el contenido para hacer diferente todo el contenido. Voy a seguir adelante y mover a este grupo inclinado hacia abajo, y luego puedo sacar las imágenes de este jugador de grupo para ponerlas en éste, y luego puedo entrar y cambiar todas las imágenes en consecuencia. Canadá, borra a este jugador de grupo, ya que ya no necesito ese. Y entonces todo lo que tengo que hacer es entrar y borrar estas imágenes y luego reemplazarlas por las nuevas. Entonces voy a seguir adelante y terminar esta categoría y la de al lado, pero voy a acelerar el resto del tutorial porque ya debes saber aplicar estas imágenes a ese tamaño específico. Así que adelante y termina las siguientes tres secciones y luego en el siguiente tutorial seguirá adelante y trabajará en la siguiente sección de nuestro proyecto de diseño, que va a estar agregando una sección blawg así como colocaciones para algunos anuncios. Así que adelante, termina las siguientes tres secciones y te veré en el siguiente tutorial. 65. Sidebar de blog: después de mi consulta inicial con mi cliente y después de algún pensamiento e investigación sobre su proyecto particular. Al revisar su competencia, puedo decidir que podrían beneficiarse de un blawg y tal vez incluso de algún espacio publicitario en ese blawg así como en su página principal. Entonces no necesariamente voy a ponerme en contacto con ellos y preguntarles al respecto antes de diseñarla, porque esta sección en particular de aquí no tarda tanto en hacer 10 15 20 minutos solo para armarla. Y luego cuando brinde el concepto de diseño para que mi cliente lo revise, entonces hablaré con ellos sobre esta sección en particular del sitio web y cómo les va a beneficiar e impulsar más tráfico a su sitio web y o agregar ingresos adicionales vía el espacio publicitario para esa empresa en particular. Y al final, si no hacen el espacio publicitario, pero sí están de acuerdo en hacer un blawg que el tráfico adicional eventualmente generará más ingresos porque están conduciendo más tráfico a su página web. Por lo que estos son servicios adicionales en los que puedes vender a tus clientes ayudándoles a configurar un blawg y a empezar consiguiendo que alguien escriba para ellos, ya sea tú o tal vez lo subcontratas. O tal vez tengan a alguien dentro de la empresa que pueda hacer la escritura por ellos. Pero lo que puedes hacer es educarlos sobre cómo escribir para los motores de búsqueda. Entonces de nuevo, ese es otro servicio que puedes brindar es la optimización de motores de búsqueda si no vas a ser el escritor, o tal vez además de para que puedas asegurarte de que estos artículos se van a encontrar para su palabras clave específicas para secar el tráfico de vuelta a su página web. Por lo que hay múltiples tipos de servicios que estamos diseñando en este sitio web en particular que vamos a intentar y Upsell a nuestro cliente después de que vean son diseñados concepto y no necesariamente tratar de venderlos en él antes. Siempre es más fácil mostrar a alguien visualmente tu concepto y luego explicar cómo y por qué esta parte en particular del sitio web ayudará a que su empresa crezca. Dicho eso, sigamos adelante y armemos esta parte del sitio web, Entonces para esta sección, vas a necesitar encontrar cinco imágenes diferentes y agregarlas a tu proyecto. Estas dos imágenes a la derecha. Acabo de elegir al azar de una búsqueda rápida en línea y luego para estas tres imágenes, las descargué directamente de picks. Obedecer. Y si quieres usar exactamente las mismas imágenes, solo toma nota de estos números de siete dígitos y luego haz una búsqueda y recoge un cebo para encontrar esas imágenes exactas. Una vez que tengas los descargados y añadidos a tu proyecto, entonces crearemos ese divisor para separar esas dos secciones. Así que sigamos adelante y acerquemos, encienda sus guías y coja su herramienta de medición y mida 40 píxeles de espacio. Entonces aquí es donde vamos a colocar nuestro divisor. Pero antes de crear ese divisor, sigamos adelante y creemos otros 40 píxeles de espacio entre la parte superior de la siguiente sección y el divisor. De acuerdo, podemos clavar crear nuestro divisor con nuestro rectángulo seleccionable con la letra M, y vamos a hacer 1200 píxeles de ancho, que es el tamaño de nuestro sistema de cuadrícula. Adelante y crea un nuevo divisor llamado antes, luego agarra un color gris oscuro y llénalo con tu filtro de cubo. Todos estos seleccionan con control de comandante y la letra D, y creo que eso es un poco demasiado grueso. Entonces voy a seguir adelante y recortar el límite de la capa, y luego puedo agarrar mi herramienta de escala con Shift Plus s y voy a hacer tres por la altura. Asegúrate de que sea escala de clics desvinculada, y eso se ve mejor, pero es un poco demasiado intensa, así que voy a bajar la opacidad a alrededor de 20 y eso definitivamente es mucho mejor ahora. Muy bien, vamos a seguir adelante y encender nuestras guías y vamos a añadir nuestro primer título. Entonces voy a agarrar mi herramienta de texto con la letra T. Voy a hacer ferrocarril ultra negrita y 24 para el tamaño y luego gris oscuro otra vez para el color del texto. Golpea tu llave de escape para salir de esa herramienta. Después agarra tu herramienta de movimiento para moverla a su posición. Por lo que queremos mantenerlo al lado izquierdo de esta columna y no en el borde exterior aquí. De acuerdo, ahora podemos empezar a redimensionar las imágenes de arte en colocarlas donde necesiten ir, así que volvamos a nuestra herramienta de medición para que podamos colocar 40 píxeles de espacio entre el título y la primera imagen después podremos agarrar nuestra imagen y ponerla en posición. Entonces otra vez, para esta, voy a asegurarme de que la imagen esté al lado derecho de esta tercera columna porque queremos hacerla de tres columnas de ancho. Y si voy demasiado lejos a la derecha, entonces se va a recortar parte de su cara. Entonces con mi rectángulo seleccionable, voy a seguir adelante y hacer 275 píxeles de ancho y 180 píxeles de alto. Asegúrate de tener seleccionada tu capa de imagen y crea una máscara de capa con una selección para recortarla a ese tamaño K d Selecciona con Commander Control y la letra D. Sigamos adelante y hagamos otros 40 píxeles de espacio entre las imágenes, y entonces vamos a seguir adelante y repetir lo mismo para esta imagen. Entonces a 75 por 1 80 y luego crear una máscara de capa que misma cosa vamos a medir, moverlo y recortarlo. De acuerdo, adelante y de selecto. Agarra tu herramienta de medida, y lo haremos una vez más para la siguiente imagen. 40 pixeles de Control de Commander Espacial y D a de selecto. Y luego vamos a crear nuestro contenido para cada uno de nuestros círculos. Voy a agarrar mi herramienta de texto. Voy a cambiar el tamaño de la fuente a 18 y sólo tren regular Bold. También voy a hacer clic y arrastrar hacia fuera un cuadro de texto que tiene cuatro columnas de ancho. Adelante y teclee tu título. Asegúrate de que esté alineado a la izquierda. Voy a seguir adelante y hacer este cuadro de texto más pequeño así que está en la parte inferior del texto. Vuelve a golpear tu herramienta de texto clave de escape. Haga clic y arrastre hacia fuera, y quiero que la parte inferior del texto no sea más larga que la parte inferior de esta imagen por aquí. Entonces voy a agarrar un texto ficticio para pegar dentro de aquí. Voy a seleccionar todo porque es demasiado grande. Voy a hacer que sea 14 y ferroviario regular, sin negrita. Y luego aquí abajo abajo, voy a teclear, leer más, entonces puedes seleccionarlo y cambiar el color para representar un enlace. Creo que quiero hacer eso audaz también para ayudar a que destaque solo un poquito más voy a seguir adelante y poner este contenido en un nuevo grupo de Lear llamado Article One. Entonces lo voy a duplicar dos veces, y luego sólo lo voy a mover hacia abajo a la posición. Y ahora que nuestros artículos se hacen al aire, casi estamos terminados. Entonces nuestras imágenes van a ir por aquí a la derecha, y vamos a hacerlas cuatro columnas de ancho. Sigamos adelante y movamos la primera imagen hasta la parte superior de la primera imagen y hacia el lado derecho de la columna derecha. También voy a mover esto. Entonces Aiken, céntrela un poco mejor a través de cuatro columnas. Entonces justo ahí, y luego voy a agarrar mi herramienta de selección de rectángulos para poder recortar esa imagen a esta posición. También quiero y una pauta aquí mismo en la parte inferior de la primera imagen. Y luego voy a colocar mi imagen justo en esta zona aquí, y la voy a agarrar una vez más y moverla hacia arriba solo un poquito para poder centrarla un poco mejor. Y luego puedo usar mi herramienta de selección de rectángulo para hacer mi selección y luego y una máscara de capa . De acuerdo, así que ese es el primer anuncio. Vamos a hacer lo mismo para el segundo anuncio, y para éste, lo voy a recortar hasta el fondo de nuestro último artículo, y luego sólo lo voy a recomponer, así que está un poco centrado y podemos ver más de la información. De acuerdo, vuelta al rectángulo, seleccionable de nuevo para hacer nuestra selección y luego añadir tu máscara de capa el selecto Commander Control y el bien, apaguemos la cuadrícula. Apagemos los GYN ahora La sección está hecha, pero nos queda un paso más, y eso es dedo del pie organizar nuestras capas. Por lo que tenemos un montón de capas aquí tanto para nuestra nueva sección como para nuestra sección anterior, que era nuestros listados. Entonces sigamos adelante y organicemos primero nuestros listados, y luego haremos la otra sección. Muy bien, la sección de Nuestro blog ya está hecha, y estamos listos para terminar nuestro diseño agregando nuestro pie de página, y lo haremos en la siguiente lección. 66. Footer: siguiente arriba el pie de página que ya me he tomado la libertad de diseñar porque no hay mucho que tengamos que hacer para este pie de página en particular porque no hay muchos enlaces. He incluido algunos aquí. He agregado iconos de redes sociales y creé la altura del pie de página 1400 por 150 píxeles altura. Y en esta instancia utilicé un azul más oscuro para agregar un poco de contraste a la sección general aquí abajo en la parte inferior de la página web. Y en general todavía se ajusta al diseño general del sitio, que es limpio, moderno, profesional y realmente no hay mucho más debilitado do para este pie de página. Y si lo hicimos, si hicimos algo más creativo, puede que no sea cohesivo con el resto de la página web. Entonces en esta instancia y en la mayoría de los casos estoy bien con un pie de página profesional moderno llano, aburrido porque preferiría que el resto del contenido destaque y no tanto el pie de página. Sí, el pie de página está solitario y recibe muy poco amor en la parte inferior de la página, pero el propósito del pie de página está en Lee para permitir a los espectadores acceder fácilmente a otras partes del sitio web, que tenemos aquí con nuestros medios enlaces y dos enlaces a otras páginas que necesariamente están disponibles en la navegación primaria o secundaria, como poder anunciarse con esta empresa en particular. Si fueras a convencer a la empresa para que venda espacio publicitario, quieres tener un enlace a esa página en particular. También necesitamos páginas legales y de privacidad así, sobre todo si la empresa planea publicitar en Google o Facebook u otro tipo de plataformas. Esas plataformas de redes sociales sí requieren políticas de privacidad y legales y, en ocasiones, políticas de cookies disponibles para que los espectadores las lean. Por lo que saben qué tipo de información se está recopilando al ver el sitio Web y para qué se está utilizando. Ese es tu típico pie de página. Podríamos hacer algo un poco más creativo, pero de nuevo, probablemente no va a coincidir con el resto de los sitios web. Por lo que antes de pasar al tutorial final para este proyecto, adelante y termina aquí. Pie de página. Hazlo lleno con el color azul oscuro terminar tus iconos de redes sociales y tus enlaces extra aquí abajo también. Y luego vamos a seguir adelante y hacer nuestros retoques finales en el siguiente tutorial 67. Tweaks: Hola y bienvenidos de nuevo ahora, como lo he mencionado anteriormente en otros proyectos. Una vez que complete un diseño, no va al cliente de inmediato. Yo quiero retocar el diseño y ver si hay algo que pueda hacer para mejorarlo. O tal vez pueda encontrar algunos elementos que no están correctamente alineados que deben ser arreglados antes acudir al cliente. Pero otra cosa que hago además de ajustar el diseño es que me aleje del proyecto y , si es posible, trato de alejarme de él hasta por 24 horas. Ahora bien, si estoy en un plazo apretado y necesito llevarle esto al cliente más pronto que tarde, me gustaría al menos darme un par de horas de distancia de este proyecto en particular porque puede que haya estado trabajando en este proyecto para un hora, dos horas, tres horas, cualquiera que sea el caso. Y luego encuentro si me alejo del proyecto y vuelvo, me da una visión fresca del diseño, y es más fácil ver cosas que me perdí mientras diseñaba, por ejemplo, espaciando y alineando diferentes elementos, o tal vez podría ser algo sencillo, como olvidar el dedo del pie. Agrega un estado flotante como aquí abajo en esta sección. Olvidé agregar un estado de hover para este enlace en particular. Ahora se están diciendo. Otra cosa que tengo que decidir es qué va a pasar cuando un usuario o visitante haga clic en este enlace. ¿ Se va a ir a otra página y abrir otra página con toda esa información? O va a pasar algo más cuando haga clic en ese enlace Ahora, te voy a mostrar exactamente lo que va a pasar cuando hagas click en este enlace en un momento justo . Pero primero voy a volver a subir a la sección de héroes por un minuto Ahora. En general, estoy contento con el encabezado y la sección de héroes, pero creo que podemos hacer que esta sección de filtros sea mucho más fácil de usar en este momento. Creo que este botón de filtro es demasiado grande. Se ve desequilibrado. Realmente no necesito un botón tan grande para filtrar a través de estas diferentes opciones. Entonces, ¿qué podemos hacer para mejorarlo? Bueno, creo que si hacemos este botón más pequeño y en lugar de usar tres cuadrículas de columna, podemos usar dos o incluso una columna para ese botón de filtro. Y luego en las otras dos columnas, podemos agregar opciones de filtro adicionales para permitir al espectador estrechar aún más sus selecciones en base a esas otras opciones. Pero la otra cosa que realmente falta de esto es un estado estacionario, porque ¿qué va a pasar cuando se cierren sobre estas opciones? ¿ Se les va a permitir escribir manualmente su presupuesto en su ciudad y estas otras opciones? ¿ O quieres brindarles opciones pre hechas? Disponible cualquier lista desplegable para que puedas tener cuatro o cinco opciones de presupuesto diferentes, y también puedes tener una docena o más diferentes tipos de ubicaciones. Lo mismo con tus otras opciones. Por aquí, puedes tener tres o cuatro opciones diferentes para dormitorios y baños, y luego tienes la opción de agregar opciones de filtro adicionales aquí también. Entonces déjame mostrarte el diseño que se me ocurrió para mejorar nuestro llamado filtro de acción. Entonces este es el original, y este es el nuevo diseño. Por lo que hice más pequeño el botón del filtro y agregué dos opciones más. Pero a pesar de que mantuve el botón de filtro 22 columnas de cuadrícula. Tomé la ciudad, y la hice más pequeña también. Antes era de cuatro columnas de ancho, y lo hice tres columnas blancas en su lugar, por lo que podía agregar esa opción de filtro adicional. Podríamos hacer lo mismo con el presupuesto. Podemos hacer que dos columnas anchas y luego agregar otra opción. Todo depende de los prospectos de tu cliente y de lo que puedas hacer para que sea más fácil encontrar lo que quiere. Y entonces, por supuesto, tengo este estado de hover justo aquí mostrando que si haces click en esto, algo va a pasar. Entonces, ¿qué va a pasar? ¿ Te va a dar una opción de preselección de otras ubicaciones? ¿ O vas a permitirles que lo escriba automáticamente? ¿ O se va a ir otra página? ¿ Qué exactamente va a pasar? Pues bien, para facilitarle nuestros prospectos, quiero mantenerlos en la misma página en el mismo apartado. Entonces lo que creé fue un desplegable para mostrar ciudades adicionales entre las que elegir. Por lo que esto muestra a nuestro cliente y al desarrollador Web lo que sucede al hacer clic en esa zona. Y si hay más de cuatro o cinco opciones, bien vas a tener que mostrar esa parte del desplegable, ya sea bajando y cubriendo más esta página aquí abajo o vas a crear un pergamino en el dedo del pie derecho. Hágale saber al desarrollador que esa persona puede entonces desplazarse dentro de ese fondo de menú versus tener que desplazarse hacia abajo por el navegador, que de nuevo hace que sea más fácil en el prospecto. Ahora la pregunta es, ¿qué pasa con estas otras opciones? Bueno, las recámaras y el baño. Probablemente podrías dejar eso, como está y solo permitiste que el visitante escriba su respuesta para estos. Pero ¿qué pasa con mascotas amigables? ¿ Quieres que lo tipeen, o quieres darles una opción? ¿ Sí o no? Si lo haces de esa manera, entonces tienes que crear un desplegable para esa opción. Lo mismo con alberca, ¿sí o no? Y luego por el presupuesto. Probablemente quieras crear un desplegable para esta parte del filtro también, porque no quieres que los tipeen dedo en un número específico. A lo mejor tu cliente tiene cuatro o cinco rangos presupuestarios de los que típicamente rentan. Entonces en ese caso crearías otro estado de desplazamiento u otro menú desplegable para esta parte del filtro también. Y tienes que hacer todo esto como parte de tu diseño antes de dárselo a los desarrolladores web para que sepan codificar adecuadamente cada una de estas diferentes secciones. Entonces, ¿qué más podemos hacer para que este diseño web sea aún mejor? Bueno, si nos desplazamos hacia abajo hasta la sección de listado, se puede ver que el espaciado entre los títulos para ver más y los fondos de imagen son todos diferentes. No me tomé el tiempo para espaciar adecuadamente todos los diferentes elementos el uno del otro, y simplemente lo hice al azar y por I. Y se ve en profesional ahora, pesar de que algunas personas pueden no darse cuenta de que aún lo quieres notar usted mismo antes dárselo al cliente y al desarrollador Web. Porque todos estos pequeños detalles en los que trabajas va a hacer que el diseño de tu sitio web sea mejor que otros diseñadores web que no se toman el tiempo de alinear todo pixel perfecto. Y podrías conseguir un desarrollador Web que va a codificar esto exactamente en base a los píxeles que has trazado en tu diseño porque piensan que eso es lo que quieres. Por lo que podrías terminar con un sitio web en vivo que luce poco profesional porque no hay simetría entre el espaciado de todos los diferentes elementos. Ahora otra cosa que podemos hacer para que esta sección de listado sea mejor para el usuario es crear un estado de desplazamiento que al hacer clic en él va a proporcionar más información de lo que están tratando de encontrar. Entonces recuerda, mencioné que deberíamos tener un estado flotante para nuestros enlaces Seymour. Entonces si lo enciendo bien, ahora tenemos nuestro estado flotante. Pero de nuevo, ¿qué va a pasar es que nuestro visitante es que nuestro prospecto va a ser llevado a otra página para mostrarles más de los listados? O, mejor aún, lo que podemos hacer es mantenerlos en la página principal y cargar esos listados adicionales debajo de esta fila de contenido. Ahora quizá estés pensando, ¿Cuál es la diferencia entre ir a una nueva página con la información frente a tener esa información apareciendo en la página principal? Bueno, si están viendo esta página Web en particular en un dispositivo móvil. Es probable que su velocidad de Internet no vaya a ser tan rápida como, digamos, en un escritorio o una laptop. Entonces cuando navegas a otra página, mucha información que ya está en esta página, como el Encabezado y un Pie de Página y algunas otras cosas van a tener que recargarse en esa nueva página. Además, todos los listados adicionales también tienen que cargar en esa nueva página. Entonces eso va a tardar mucho más en cargarse frente a que aparezcan en la página principal. Porque puedes tener el sitio codificado para que estas imágenes, pesar de que no las puedas ver, se precargarán en segundo plano para que al hacer clic en este enlace, esos anuncios aparezcan instantáneamente versus esperando 5 10 20 segundos para que se carguen en una nueva página. Porque cuanto más grandes sean estas imágenes y más listado haya, más tiempo tomará la carga. Y cuanto más tiempo tome la carga, mayor será la probabilidad de que esa persona salga de ese sitio web y trate de encontrar lo que está buscando de otra persona. Entonces, al final, queremos que sea lo más fácil posible para que los prospectos encuentren lo que quieren. Y al hacerlo de esta manera, ayuda a mantenerlos en esta página, porque si tienen que esperar esos 20 segundos o 10 segundos o lo que sea, lo más probable es que vayan a salir del sitio web e ir a otro sitio para encontrar lo que ellos necesidad. No tienen la paciencia para esperar esa información, la carga. Por lo que al hacerlo de esta manera, aumentamos la probabilidad de que se queden en la página y hagan negocios con nuestro cliente, lo cual es parte de nuestro objetivo como diseñador Web es ayudar a nuestros clientes a ganar más negocios través de mejor diseño. Entonces, ¿cómo se vería esto? ¿ Cómo configurarías esto como diseñador para mostrárselo a tus clientes? Y así el desarrollador Web sabe codificarlo. Bueno, igual que hicimos en la sección de héroes. Necesitamos crear todo este contenido y otra capa de grupo para mostrar a todos lo que va a pasar al hacer clic en este enlace, que agregará dos filas más de listados para esa categoría, y todas las demás categorías serán entonces empujado hacia abajo. Entonces este es el estado flotante, y esto es lo que sucede cuando se hace clic en ese enlace. Ahora lo otro que podemos hacer para que el sitio sea aún mejor es mejorar la legibilidad del contenido del listado. Entonces en este momento estamos usando una fuente. Todos son del mismo tamaño, y está un poco lleno y ocupado, por lo que hace un poco más difícil de leer. Entonces, ¿qué podemos hacer para aumentar la legibilidad de nuestros contenidos? Bueno, creo que podemos usar diferentes fuentes, diferentes tamaños, y tal vez cambiar el diseño de ese contenido también, para agregar énfasis en ciertos elementos o cierto texto versus otros para que lo haga más fácil de leer. Entonces esa fue la primera opción que se nos ocurrió. Pero esto es lo que se me ocurrió como mi segunda opción para facilitar la lectura de ese contenido . Entonces cambié la fuente de la calle, y también cambié el tamaño de 22 16 y también la hice negrita, y usé la flecha de fuente versus ferrocarril. La otra cosa que hice fue tomar el metraje cuadrado y lo hice 14 por el tamaño versus 20 por aquí. Y luego tomé el precio y lo moví a la parte inferior derecha, y también me quité el estilo audaz, y reduje la opacidad de la capa de 100 a 75 para de enfatizar el precio. Por lo que ahora se enfatiza más que nada la calle, en base al estilo y al funt. Entonces esto en general hace que sea mucho más fácil leer esto de lo que hace esto porque está menos lleno y nuestros ojos gravitan al nombre de la calle primero contra aquí a la derecha. Nuestros ojos no están muy seguros de qué mirar al principio, pesar de que sí atrevimos el texto por el precio, todavía está mucho más ocupado que este contenido de aquí. Entonces siempre es una buena idea alejarse de tu diseño por un par de horas de forma o si es posible, y luego cuando vuelvas, repensar ¿Cómo puedo hacer que este diseño sea aún más fácil de usar? Y entonces todas esas pequeñas cosas que hagas para mejorar el diseño lo harán mucho mejor . Por lo que su siguiente encargo consiste en dos cosas. Uno pasa y realiza todos esos pequeños ajustes al diseño para que sea mejor asegurarte de que todo esté alineado correctamente y asegúrate de tener una cantidad adecuada de espaciado entre todos los elementos y asegúrate de no dejar nada fuera. También necesitamos recortar son lona para deshacernos de todo este contenido aquí abajo. Y lo otro que debes hacer es pasar por todos los diferentes estados de hover que cubrimos en esta conferencia y crearlos por tu cuenta. En este punto del curso, debes saber crear todas las diferentes formas, redimensionar y todos los demás elementos, agruparlas y cómo recortar tu lienzo. Por lo que te animo a que te tomes el tiempo para hacer esta tarea, y esto ayudará a reforzar lo que has aprendido previamente al hacerlo por tu cuenta. Si te quedas atascado, sólo tienes que volver a conferencias anteriores para conseguir un refresco sobre cómo hacer ciertas cosas. Y al hacer esto por tu cuenta, aprenderás exactamente cómo hacerlo para tus propios proyectos en el futuro. De hecho, en realidad tienes 1/3 de asignación, y eso es rehacer este sitio web con tu propia visión creativa para que puedas usarlo para tu portafolio. Gracias por escuchar y tener un día impresionante 68. Proyecto 5: resumen de Watkins Glen: Hola y bienvenidos a Diseño Web Proyecto número cinco para este sitio web. Vamos a rediseñar esta página Web desde el estado de Nueva York, y ésta en particular, es para Watkins Glen State Park. Al igual que muchos de los otros sitios web que hemos rediseñado, este, también, está anticuado. Y aunque sí tiene mucha información, es un poco difícil navegar y tratar de encontrar exactamente lo que queremos. Sí, tenemos algunos botones por aquí para darnos la información, pero creo que el diseño general está mal diseñado. Es difícil de leer porque las selecciones de fuentes y el estilo podrían hacerse mucho mejor de lo que es actualmente en este momento. La otra cosa que encuentro de este sitio, al menos para este sitio en particular, es a pesar de que están describiendo exactamente las cosas que se pueden ver en este parque. Hay mucho texto que describe esa información, y creo que sería mejor mostrar una imagen de todas las diferentes cosas que puedes hacer en Watkins Glen versus Reading Lo que puedes hacer. Hay un viejo dicho de que una imagen vale 1000 palabras, y yo pensaría que una imagen describiría mejor lo que vas a ver porque, bueno, en realidad vas a ver una parte de lo que puedes hacer en el parque o en Watkins Glen general, la ciudad o el pueblo de Watkins Glen. Sí, sí tienen un par de imágenes, pero esta imagen de aquí no es representativa de este parque. Es una mala imagen. Se ve distorsionado. Parece que fue apretado de arriba hacia abajo. El alumbrado no es muy bueno, y en general, simplemente no me parece muy atractiva esta imagen. Preferiría ver una fotografía profesional y no algo que pareciera que fue tomada por un turista. Esta imagen de aquí es mejor, pero es tan pequeñita. Es realmente difícil distinguir lo que es. Y si estás en un dispositivo móvil, eso va a ser aún más pequeño a menos que esté codificado para ser más grande. Pero parece que su diseño Web general está más basado en texto versus en imagen. Entonces déjame mostrarte lo que se me ocurrió para el diseño de Watkins Glen State Park, y básicamente es un diseño web más intensivo fotográfico versus basado en texto. Por lo que arranco la sección de héroes con una gran imagen del propio parque estatal. Cuando entras al parque, esta es una de las primeras cosas que te encuentras. Tenemos una pequeña cascada, un puente de piedra, y se ve muy acogedor. Tenemos un gran botón de acción llamado aquí arriba en la parte superior para descubrir Watkins Glen, que navegará a otra parte de la página web para mostrarte las cosas que te llevan en este parque. También he consolidado todos los elementos del menú dentro de un menú oculto para ayudar a consolidar toda esta información y a limpiar el sitio. A medida que te desplazas hacia abajo, te presentan imágenes profesionales que muestran todas las cosas que puedes hacer en Watkins Glen. Entonces, en lugar de describir cada uno de estos ítems, en realidad podemos ver las cosas que podemos hacer. Y podemos estar motivados mawr para visitar el parque en base a estas imágenes vs lectura. Sí, he puesto esa información aquí también para dar una descripción de cada uno de estos tipos de cosas que puedes hacer. Pero cada una de estas imágenes también enlazará a otra página web entrando en más detalle sobre lo que puedes hacer, además de una galería de fotos de cada una de esas. Entonces eso sería parte de mi conversación que tengo con el cliente al momento de revelar el concepto de diseño inicial. No voy a entrar y diseñar cada una de estas páginas por separado si el cliente no está aprobando ese tipo particular de concepto de diseño toe, tenerlos todos en páginas diferentes, pesar de que ya tienen todas esas páginas. Todavía quiero conseguir su confirmación de que sí les gusta este concepto de diseño, porque voy a emparejar cada una de estas páginas individuales para que coincida con esta página principal también , que es toe tienen grandes imágenes que Philip el navegador desde borde al borde. Entonces, medida que te desplazas hacia abajo, hay una lista de mucha información que quizás necesites saber sobre la parte. Por ejemplo, horas de operación. Yo sí tengo un estado de desplazamiento aquí para que cuando hagas click en el botón, se abrirá una pequeña ventana con esa información dentro de ella, y también he incluido dos opciones para cerrar esa ventana. Acceso tan fácil a toda la información que necesitas aquí mismo. En realidad falta uno. Parece que aquí vamos. Y entonces también tenemos una manera fácil de reservar un camping. Hay lugares donde puedes acampar dentro del parque, y puedes reservar de forma rápida y sencilla un camping a través de esta opción aquí. Si no estás familiarizado con el parque, puedes hacer clic en este enlace para obtener un mapa del camping, y éste navegará a otra página para proporcionarte más información. Pero de nuevo, queremos que sea lo más fácil posible para que los campistas reserven su estancia, sobre todo si has acampado aquí antes y sabes lo que estás haciendo. Puedes hacerlo aquí mismo desde esta parte de la página Web sin tener que navegar a otras partes del sitio. Y luego debajo de eso, tenemos un pie de página limpiado, actualizado con todo su contenido vinculado a todas las diferentes páginas. Todo está uniformemente espaciado ahora, aunque hay pie de página ahora ¿no es tan malo? Acabo de actualizarlo un poco con fuentes nuevas y diferentes colores para ayudar a que sea más fácil de leer. Por lo que este va a ser un diseño Web bastante fácil de crear. Pero como antes. Voy a compartir algunos consejos pro adicionales en el camino ya que diseñamos este sitio web, así que si estás listo para empezar en este proyecto, hagámoslo. 69. Encabezar + héroe: hola y bienvenidos de nuevo están en este EU, y vamos a diseñar tanto el encabezado como la sección de héroes. Así que adelante, agarra tu plantilla de cuadrícula para que puedas empezar desde cero. Y también necesitamos agregar a los archivos de imagen a nuestro documento, los cuales se adjuntan ambos a esta lección. Por lo que el 1er 1 es nuestro logotipo del estado de Nueva York. Así que adelante, agarra eso y llévelo al documento y luego solo mueve el logo hacia arriba a la izquierda y luego agarra la imagen del héroe y trae eso también. Por lo que esta imagen es un archivo de baja resolución, y necesitamos ampliarlo para que esté lleno con de izquierda a derecha o sangría completa. Y cuando lo hagamos, se va a pixelar o borroso. Lo cual está bien, porque esto es solo para la práctica y no para nuestro portafolio. Vamos a seguir adelante y volver a escalar esta imagen con Shift Plus s y vamos a escribir 1400 para el con , y luego la altura se convierte en 9 38 una canción. ¿ Lo tiene bloqueado? Adelante y escalar es y luego simplemente muévelo hacia el lado izquierdo y derecho del documento . Vamos a recortar, compuso esta imagen en un minuto una vez que lleguemos a la sección de héroes, pero vamos a terminar primero la sección de cabecera. De acuerdo, sigamos adelante y creemos una nueva capa llamada click de fondo de encabezado. OK. Y luego para el ancho, quería ser sangría completa también a la izquierda, Derecha, Derecha, Así que vamos a seguir adelante y crear una selección con nuestra herramienta de selección de rectángulos. Está bien si va más allá porque va a confinar esa selección a los límites de tu documento. Entonces el con no me preocupa un apretado. Yo quiero ser 100 y luego por el color, quiero usar este color crema, que es este número decimal Hexi aquí. Así que adelante y teclea eso, y luego adelante y agarra tu filtro de cubo voluntad con la letra G y llénalo. Y que no se te olvide de seleccionar con Commander Control y la letra D. Muy bien, vamos a seguir adelante y recortar el límite de la capa. Ahora ve a capa, recorta el contenido, y luego simplemente muévelo hacia arriba a su posición. De acuerdo, voy a seguir adelante y mover esto abajo por debajo de ambas imágenes Vamos a seguir adelante y alinear nuestro logo. Sigamos adelante y midamos 30 píxeles de espacio entre el borde izquierdo y el lado izquierdo del logotipo. De acuerdo, sigamos adelante y reposicionemos nuestro logo. Está bien. Siguiente arriba es alinearlo a la parte superior e inferior de nuestro fondo. Entonces con mi herramienta de alineación, adelante y haga clic en mi fondo de encabezado primero y luego en la tecla de turno. Haga clic en el logotipo y luego un medio tirado de blanco. Ahora trabajemos en la navegación. Simplemente voy a añadir un ícono de hamburguesa que representa la navegación. En primer lugar, necesitamos crear un nuevo fondo para ello llamado hamburguesa Fondo. Y vamos a hacer una selección 100 por 100. Y luego para el color, voy a usar este color verde oscuro para seguir adelante y escribir ese número en. Y entonces vamos a llenarlo, asegurarnos de que de selecto entrando bajo control y D y luego sólo voy a moverlo aquí arriba a la parte superior, ¿ verdad? De acuerdo, voy a agarrar mi ícono de hamburguesa que creamos en el último proyecto, así que solo necesito el icono del hover y el icono de la hamburguesa, así que sólo voy a agarrar a esos dos y traerlos a este documento. De acuerdo, vamos a poner esto arriba y otra vez ahora. El ícono de la hamburguesa es un poco pequeño, así que solo quiero hacer eso más grande y no el hover que me tipo. Entonces solo voy a agarrar mi ícono de hamburguesa que Shift Plus s y lo voy a agrandar. Entonces ahí mismo, 50 para el con 53 para la altura. Y entonces sólo voy a seguir adelante y moverlo a posición aquí. En realidad, sigamos adelante y aliando el icono directamente en el centro del fondo de la hamburguesa. Asegúrese de que tiene seleccionadas capas de fondo de hamburguesas y recorte hasta contenido para el límite de capa . Voy a seguir adelante y sacar el ícono de la hamburguesa también para poder seguir adelante y agarrar ambos con mi herramienta de alineación y luego puedo alinear medio y centro de objetivo. Volvamos a poner el ícono de la hamburguesa. Simplemente voy a mover el icono del hover hacia abajo hacia la derecha sólo un poquito. Entonces justo por ahí. Adelante y alejemos el zoom. Apagemos nuestras guías y nuestra cuadrícula para que podamos echar un vistazo a la sección de encabezado, para que la sección de encabezado esté hecha. Simplemente voy a seguir adelante y limpiar mis capas aquí y crear una nueva capa de grupo llamada Encabezado. Muy bien, vamos a seguir adelante y agarrar nuestra imagen de héroe y moverla hasta la parte inferior de la sección de cabecera. Simplemente voy a acercar y asegurarte de que sea píxel perfecto. Parece que solo necesito subirlo un par de píxeles más así que ahí mismo se ve bien. Entonces nos quedan un par de cosas, y eso es encabezar nuestro título y llamar al botón de acción para la sección de héroes. Entonces cuando se trata de las familias de fuentes que elijo para un proyecto de diseño Web, normalmente lo hago antes de diseñar. Y elegiré mis fuentes en base a una de dos cosas ya sea fuentes populares en el momento en que estoy diseñando la página web. Entonces, por ejemplo, hemos estado usando mucho ferrocarril a lo largo de estos proyectos y su popular en este momento en el futuro. Puede que no sea tan popular, así que probablemente no lo use tanta guerra. Dependiendo de la empresa, usaré una familia de fuentes de su branding. Entonces si tecleamos a Watkins Glen y cambiamos esto a ferrocarril. Utilizan ultra negrita. Es un bonito fondo, pero en realidad no coincide con el branding de su empresa. Entonces en su lugar usaría una fuente como flecha que mejor coincida con su marca. Y lo podemos ver en la letra W aquí. Es muy similar a la W en su logo. Entonces o voy a usar exactamente el mismo frente que usaron en su logotipo o cualquier otro tipo de branding, o voy a usar una fuente. Similares. Ahora las letras minúsculas realmente no coinciden. Pero si lo hiciéramos en todas las capitales, mejor se ajustarían a su marca. Entonces por eso elegiría una fuente como flecha para este diseño en particular. Entonces voy a seguir adelante y poner esto en el centro y seleccionar todo. Y luego con mi herramienta de alineación, puedo seguir adelante y alinearla a esa selección. Entonces, adelante y haz eso. El selecto Ven en nuestro control y la letra D, y vamos a seguir adelante y crear nuestro Pero ahora vamos a llamarlo botón C T A y C T. A. Es abreviado de llamado la Acción. Agarremos nuestra herramienta de selección de rectángulos, y vamos a añadir algunas esquinas redondeadas. Hagamos 15 por el Radius y luego en cuanto al tamaño que vamos a hacer al 35 por 75 entonces vamos a llenarlo con este mismo color verde oscuro que usamos aquí arriba. Adelante y rellena tu botón y de select, y luego quiero alinear el botón al borde derecho de nuestro título. Entonces sigamos adelante y recortemos también el límite de la capa, luego simplemente moverlo a su posición. De acuerdo, sigamos adelante y agarremos nuestro textil. Voy a seguir adelante y cambiarlo a Railway, pero quiero elegir un estilo cursiva. Sigamos adelante y cambiémoslo de nuevo a blanco y luego solo teclea descubre y luego para el tamaño. Sigamos adelante y bajemos esto a 48. Está bien, vamos a seguir adelante y la línea dentro de nuestro pero nuevo Ok, ya casi terminamos. Lo último que quiero hacer es recomponer un poco la imagen moviéndola hacia arriba. Entonces, ¿a qué se mueve? Simplemente voy a seguir adelante y agarrar la imagen y subirla. No quiero ir a drogarme porque no quiero descubrir Button para estar aquí abajo en esta zona. Yo quiero que se quede donde actualmente está oscuro en esa parte de la imagen. Entonces voy a ir justo ahí, y también vas a notar que la vieja línea de ladrón para esa sección de héroes es justo alrededor 700 a 800. Pero la imagen real va por debajo de esa línea de pliegue, y eso está bien para este sitio en particular, porque cuando hacen clic en el botón Descubrir, va a desplazarse automáticamente hacia abajo a la siguiente sección. Por lo que no me preocupa la imagen sangrando por o pasando por esa sección de héroes. De acuerdo, sigamos adelante y tomemos nuestras capas nuevas y agruparlas en nuevos grupos anteriores. Vamos a seguir adelante y hacer nuestro botón primero para hacer C T un botón y luego un nuevo grupo de capas para la sección de héroes, y eso es todo. Nuestra sección de cabecera y héroe son clavo hecho 70. Cosas del cuerpo parte 1: cuando un visitante de este sitio web haga clic en nuestra llamada acción, que es nuestro botón de descubrimiento, el sitio navegará automáticamente hacia abajo a la siguiente sección, que son las cosas a hacer. Entonces esto es algo que tenemos que explicarle a nuestro cliente. Cuando presentamos el concepto de diseño real, esto no va a navegar a otra página. En cambio, se va a desplazar automáticamente hacia abajo a la siguiente sección. Y una vez aprobado, también tenemos que dejar que el desarrollador sepa esto también para que no estén pensando que esto vaya a otra página o que haya un pop up. En cambio, necesitan codificarlo para desplazarse hacia abajo, y luego cuando el visitante haga clic en él y sí desplácese hacia abajo hasta esta parte, se les van a presentar todas las cosas que puedes hacer en Watkins Glen. Pueden leer una breve introducción de cada ítem, o pueden hacer clic en cada una de estas imágenes o títulos de texto para navegar tumba o información. Por lo que antes de empezar a diseñar el sitio, solo quiero hablar un poco de imágenes porque necesitamos encontrar imágenes para cada una de estas cosas para hacer sus siete y sumar uno de mis lugares favoritos para ir por imágenes gratis sin preocuparte sobre adquirir una licencia y poder utilizarlas para proyectos comerciales. Y cosas como esa son picos obedecen. Ya hemos hablado de ello antes, así que si entramos aquí y empezamos a hacer una búsqueda de Watkins Glen, podemos ver que no hay tantas imágenes. Solo hay seis imágenes en total, por lo que ahora necesitamos empezar a hacer búsquedas más profundas. Watkins Glen Caza Watkins Glen canotaje. Pero también hay menos imágenes para esas categorías. Entonces ahora necesitamos hacer búsquedas generales de, Digamos, cascadas porque sólo hay una cascada y no queremos una imagen vertical. Necesitamos una imagen horizontal para cada uno de estos enlaces, por lo que esta imagen no funcionará. Sí, puedes recortarlo y hacerlo horizontal, pero no creo que vaya a ser una muy buena imagen recortada horizontalmente porque estás cagando mucha de la imagen. Por lo que queremos encontrar imágenes horizontales. El único problema es que ninguna de estas imágenes, o incluso esta imagen, es una cascada ubicada en Watkins Glen Park. Esta cascada está en realidad a unas tres horas de distancia cualquier ventaja completamente diferente. Entonces cuando estás desarrollando un sitio web con muchas imágenes o solo unas cuantas imágenes en general, sea cual sea el caso, quieres asegurarte de que esas imágenes sean representativas de la ubicación para esa empresa , o que parque, o cualquiera que sea el caso, porque si metes esta imagen con el Watkins Glen Park, mientras la gente va a estar decepcionada, si quieren ver esta cascada y no la pueden encontrar, y entonces finalmente averigüe que en realidad está a tres horas de distancia. Por lo que la moral de la historia es elegir tus imágenes en consecuencia. Entonces si no podemos usar picks, obedecer, tenemos que encontrar un sitio diferente para usar. Y hay agencias de fotos de stock con más imágenes de Watkins Glen que en realidad puedes usar versus las imágenes de picks, obedecer o incluso imágenes de Google. Esta imagen aquí encontré en imágenes de Google, pero no está fácilmente disponible para uso comercial. El cliente tendrá que pagar una licencia para usar esto. Está bien usarlo en tu diseño, pero no puedes usarlos en una página web en vivo hasta que se adquieran licencias para uso comercial. Por lo que antes de empezar con este proyecto, es necesario encontrar siete imágenes. Ya sea que sea a través de picos, obedecer o tal vez una empresa como el stock de obturador o las imágenes de Google. De cualquier manera, encuentra siete imágenes para cada categoría. Descárgalos y seguiremos adelante y armaremos esta sección del sitio web en la siguiente lección. 71. Cosas del cuerpo parte 2: Hola y bienvenidos de nuevo. Muy bien, Ahora que tienes tus imágenes descargadas, adelante y agrégalas a tu documento. Si aún no has renombrado las capas en consecuencia y luego sigue adelante y posiciónalas en un orden similar a éste. Y puede que también necesites aumentar tu tamaño de lienzo, lo cual ya he hecho subiendo a imagen seleccionando tamaño de lienzo y luego ajustando la altura en consecuencia. Entonces, adelante, haz eso. Y entonces podemos seguir adelante y empezar a dimensionar nuestras imágenes en colocarlas precisamente donde necesitan estar. Ahora, lo que respecta al tamaño, vamos a hacer 400 en 67 píxeles de ancho por, 310 píxeles de alto. Para las 1 ª 6 imágenes, la última imagen va a ser de 1400 píxeles blancos. Lo que llena el dedo izquierdo del pie derecho del documento. Y luego voy a dimensionar la mía y 450 píxeles de altura. Ahora bien, la imagen que descargaste puede ser diferente a ésta. Por lo que en ese caso, puede que tengas que hacerlo más alto o más corto, en base a la composición de esa imagen. Por lo que va a dimensionar su imagen en la parte inferior aquí. De acuerdo a lo que descargaste. Muy bien, volvamos aquí arriba arriba y vamos a seguir adelante y redimensionar nuestra primera imagen justo aquí. Ahora muy rápido. Te puede estar preguntando por qué elegí 467 píxeles de ancho. Bueno, como mencioné, base en el estilo de diseño que elegí para este proyecto de diseño Web, quiero que las imágenes llenen el documento de la extrema izquierda a la extrema derecha. Por lo que tenemos tres imágenes, y los signos de nuestro documento tienen 1400 píxeles de ancho. Entonces cuando dividimos eso, obtenemos 4 66.6 y acabo de redondear hacia arriba para asegurarme de que todo quepa en la página. Y lo otro que vas a notar es que en realidad no estamos confiando en el sistema de cuadrícula ni en las columnas para alinearse. Nuestras imágenes son texto y otros elementos por el estilo de diseño que elegí. Y cuando vamos a y estamos contenidos en esta sección, no estamos usando para nada las columnas. Simplemente vamos a hacer una selección para alinear ese texto directamente en el centro frente al uso las columnas de la cuadrícula. Está bien, sigamos adelante y empezamos a recortar nuestras imágenes al tamaño que queremos. Por lo que si es necesario, es posible que necesite volver a escala. Tu imagen es de acuerdo al tamaño que vamos a utilizar para cada imagen. Por lo que recomendaría escalar sus imágenes lo más cerca posible de la altura o el con para esa imagen en particular. Entonces ahora mismo, tengo 3 11 para la altura, y vamos a hacer 3 10 para la altura, así que realmente no puedo escalar más esto. Entonces voy a seguir adelante y agarrar esa capa en particular, que es esta imagen de senderos, y voy a hacer una selección. Y luego voy a añadir una máscara de capa para recortarla a ese tamaño particular, que de nuevo es para 67 por 3 10 Y entonces si quiero, realidad puedo agarrar mi herramienta de movimiento con la letra V. Y entonces puedo usar mis teclas de flecha después de dar clic en esa capa y mover esa imagen a su posición para recomponer la imagen de acuerdo a cómo la quiero componer. Entonces una vez que haga eso, puedo Entonces ir y agregar mi máscara de capa, asegúrate de tener selección seleccionada y haga clic en agregar y se recorte la imagen. Por lo que esta imagen de aquí es mucho más grande que la última. También necesitamos de seleccionar con control Commander y D. Así que voy a seleccionar esta capa en particular, y luego voy a utilizar mi herramienta de escala para reducirla. También necesito asegurarme de que tengo todo bloqueado aquí para que se quede y proporcional. Y voy a poner atención a estos números aquí arriba porque no quiero que ninguno de estos números sea menor a 4 67 o 3 10 creo que está bien ahí mismo. Entonces voy a seguir adelante y volver a escalarlo, y luego voy a usar mi herramienta de rectángulo para hacer otra selección. Pero lo que necesito hacer es asegurarme de que estoy alineando esta imagen en particular con el lado derecho de esta imagen para que podamos encender nuestras guías y agregar algunas guías a lo largo de estas imágenes para ayudarnos a hacer una mejor selección antes de hacer esa selección. De lo contrario, si lo recortamos y está fuera de lugar y tenemos que rehacerlo, Vale, voy a seguir adelante y agarrar de nuevo mi herramienta de movimiento para poder mover un poco esta imagen y recomponerla porque realmente no quiero recortar de nuevo esta parte de la imagen. Estos aire, los pequeños detalles en los que debes trabajar a la hora de diseñar tus sitios web para que tus diseños sean mejores que el diseñador gráfico promedio. Está bien, sigamos adelante y una máscara de capa otra vez. Y entonces sólo tenemos que repetir esto para todas las demás imágenes. Entonces voy a seguir adelante y hacer esto muy rápido, y probablemente aceleraré esta parte del tutorial para que no tengas que verme hacer esto y a cámara lenta. - Está bien, sigamos adelante y sumamos nuestro contenido corporal en esta sección. Nuevo. Vamos a seguir adelante y crear un fondo de color para ello primero. Y sigamos adelante y creemos una nueva capa de fondo llamada fondo de texto. Vamos a seguir adelante y crear una selección aquí mismo, y luego vamos a llenarla con ese color crema que usamos en nuestra sección de encabezados aquí arriba. Voy a agarrar mi herramienta cuentagotas y seleccionarla, y luego puedo seguir adelante y llenar eso. Está bien, vamos a seguir adelante y nuestro contenido clavo. Agarra tu herramienta de texto. Cambiemos la fuente a ferrocarril Ultra Bold. Hagamos 72 por la talla y luego nuestro color verde oscuro. Y vamos a escribir cosas que hacer. Se puede simplemente mover esto arriba y fuera del camino ahora, antes de que nosotros y nuestro contenido corporal, quiero que el tamaño de ese contenido sea un tamaño específico. Entonces si agarro mi herramienta de texto y hago clic en un cuadro de texto, realmente no puedo definir el tamaño de ese cuadro de texto. Entonces una forma de moverse eso es creando una nueva capa. Va a ser un temporal más adelante porque sólo lo vamos a usar para hacer una forma para el tamaño que queremos y luego la eliminaremos cuando hayamos terminado. Entonces sigamos adelante y hagamos la forma. Hagamos 600 vino por 4 50 de altura, y luego sólo vamos a agarrar un color gris claro y llenarlo con eso, y ese es el tamaño del cuadro de texto que quiero usar. Adelante y de seleccionar y agarrar tu herramienta de texto, y antes de hacerlo, vamos a asegurarnos de que ahora tenemos la Funt correcta, cuando se trata de la familia de fuentes para el contenido corporal, me gusta usar una fuente como Georgia, que es mucho más fácil de leer a un tamaño más pequeño de 14 o 16 o 12 frente a una fuente como esta, que es mucho más fácil de leer a un tamaño mucho mayor. Vamos a hacer Georgia a los 16 por la talla, y luego por el color vamos a hacer un color gris oscuro. Ahora podemos tomar esa herramienta de texto y hacer clic y arrastrar hacia fuera una forma a su alrededor. Pero primero, sigamos adelante y el cultivo, el contenido de ese límite de Lear para que sea más fácil ver dónde colocar ese cuadro de texto. Entonces ahora nuestro cuadro de texto es del tamaño exacto que lo quiero. Entonces ahora voy a agarrar algún texto ficticio, el que ya haya seleccionado de un monitor diferente, y voy a seguir adelante y pegar eso. De acuerdo, así que tengo algún texto adicional aquí abajo que se está cortando. Entonces sólo voy a hacer que ese cuadro de texto sea un poco más corto y luego golpear la tecla de escape para salir de él. Ahora sí quiero hacer del siguiente conjunto de párrafos un tamaño específico también, o al menos estar confinado a un tamaño específico. Entonces vamos a llevar nuestra capa de fondo aquí, y vamos a redimensionarla con nuestra herramienta de escala. Y esta vez van a ser 1 50 para la altura y son 600 para el con. Asegúrate de desbloquearlo primero, cambiarlo el tamaño de la cacerola, y luego podemos tomar esta caja y bajar aquí para que podamos crear un nuevo cuadro de texto basado en este nuevo tamaño. Sí necesito volver a mi texto y un poco porque todavía puedo ver un pequeño texto ahí. OK, ahora que ya lo he hecho, lo que quiero hacer es echarle un vistazo rápido y el viejo diseño. Tienen una sección aquí que tiene una actualización que está dando información sobre el estado del parque, y en este momento está cerrada con base en el estado. Entonces esta es alguna información importante que debemos incluir sobre las cosas por hacer, porque si alguien está mirando las cosas por hacer, sería bueno saber si el parque está abierto o no. Entonces vamos a seguir adelante y esa información aquí abajo. Entonces sí tengo esa información de un documento anterior y otro monitor aquí a la izquierda que no se puede ver. Así que solo toma algo de texto ficticio y luego simplemente toma tu herramienta de texto y crea un nuevo cuadro de texto basado en el nuevo tamaño de nuestra forma. Adelante y pega eso en hit tu llave de escape. Y ahora podemos eliminar este fondo de texto porque ya no lo necesitamos. Y entonces creo que deberíamos añadir un título para esta sección también. Voy a llamarlo actualizaciones de parque, y también quiero cambiar la fuente de nuevo a negrita ferroviaria. También hagamos que el tamaño de la fuente sea más grande. Hagámoslo 20 y luego solo elijamos un color rojo oscuro. Está bien, voy a seguir adelante y encender mis guías ahora para poder seguir adelante y alinear todo a la izquierda. En cuanto al espaciado aquí, sigamos adelante y midamos 25 píxeles de espacio. Hagamos 50 píxeles de espacio entre este párrafo y el siguiente título, y realmente no hay razón para que esté usando estos números exactos. Simplemente encuentro que estos números funcionan bien para este diseño. Entonces, cuando estés diseñando, vas a tener que decidir y elegir la cantidad de espaciado en función de lo que creas que se ve mejor. De acuerdo, puedo seguir adelante y poner este en posición, y luego tenemos que hacer 25 píxeles de espacio para el siguiente párrafo. Muy bien, sigamos adelante y empecemos a organizar nuestras capas aquí. Por lo que ahora necesitamos tomar este contenido y alinearlo perfectamente en el centro de esta zona aquí . Entonces voy a seguir adelante y crear un nuevo grupo de capas más para todo este contenido llamado contenido corporal . Y esto hará que sea más fácil alinear todo directamente en el centro. Voy a seguir adelante y hacer una selección para esta zona aquí. Ahora bien, podríamos haberlo hecho con el fondo del texto, pero creo que el fondo del texto es en realidad más grande que esta área aquí. Y por eso estoy usando una selección en lugar de alinearme con el fondo. Entonces alinean ese centro y medio del objetivo, de selecto Comandante, Control y D, y eso está todo hecho. Nos queda una cosa más por hacer y ese es el anuncio. Son títulos para cada imagen. Voy a seguir adelante y volver a desplazarme aquí porque quiero dar click en mis senderos Imagen para el primer título y te voy a decir por qué lo estoy haciendo de esta manera en tan solo un momento. Adelante y agarra nuestro textil con la letra T. Cambiemos la fuente, Teoh Arrow Para el tamaño, vamos a hacer 60 y vamos a cambiarlo dedo del pie blanco. De acuerdo, voy a dar clic en la imagen aquí, y voy a escribir el primer título en todas las mayúsculas. Y aquí es por qué seleccioné mi capa de imagen antes de agregar el título. Cuando hagas eso, va a agregar esa capa de texto directamente encima de la capa que seleccionaste. Entonces si vengo a imagen de camping y escribo camping, esa capa de camping ahora está por encima de la imagen de camping. Entonces esto lo hace más fácil versus hacerlo todo aquí o en algún otro lugar y después tener que volver atrás y mover todos esos títulos a la posición. Así que solo otro consejo rápido para ayudarte a organizarte más rápido seleccionando primero la capa antes de agregar tu título. Ahora que tenemos nuestro texto en blanco en nuestras imágenes, tenemos un pequeño problema Algunas de las imágenes tienen colores claros y esperan en el fondo, y está dificultando la lectura de esos títulos. Queremos que sea fácil para la gente leer el contenido, por lo que necesitamos hacer algo con nuestro texto aquí. Para que sea más fácil de leer debilita ya sea bajar la opacidad de las imágenes o hacer que la imagen sea más oscura. O podríamos crear un cuadro de texto detrás del contenido y usar un color oscuro detrás de él. O podemos añadir una sombra de gota al texto para que sea más fácil de leer, porque va a ayudar a separar el texto de la imagen. Y en este caso, para este diseño en particular, me gusta la idea de la sombra gota frente a las otras opciones porque no quiero y nada más a las imágenes, porque las imágenes deben sobresalir por su cuenta. Y si añado un fondo para el texto en sí, como que le quita a la imagen. Entonces debido a que este es un estilo de diseño intensivo de imagen, quiero que esas imágenes destaquen tanto como sea posible. Entonces sigamos adelante y seleccionemos aquí nuestro primer título. Vamos a subir a filtros luz y sombra sombra gota. Así que sigamos adelante y juguemos aquí con nuestros ajustes para encontrar una opción que funcione mejor para nuestros títulos y las imágenes. Voy a seguir adelante y bajar X e Y. También voy a soltar el radio de Desenfoque también, que agudiza esa sombra de gota, y ayuda a separarse mucho más de la imagen detrás de él cuando bajes ese radio consecuencia, en base a tu propio personal preferencia. Por lo que me gustan estos ajustes aquí, y puedo crear un nuevo preset basado en esto y luego volver a este cuadro de diálogo de sombra de filtro cada vez que quiero agregar esa sombra de gota a todos los demás títulos. Realmente no es necesario a menos que quiera usar esta sombra de trabajo en particular en un proyecto diferente . No planeo usar estas configuraciones específicas para otro proyecto, así que estoy bien con hacer clic en Aceptar, porque si recuerdas, si seleccionas otra capa de texto y luego usas tu atajo de teclado, que es comando o control y F, automáticamente va a aplicar ese ajuste de filtro directamente a la capa. ¿ Qué tan guay es eso? Por lo que eso hace que sea mucho más fácil y rápido usar esos teclados para cortar versus volver subir al menú para hacerlo manualmente. Así que adelante y aplica tu sombra de gota a todos tus títulos. Ahora que tenemos nuestras sombras de gota añadidas a todos nuestros títulos, necesitamos entonces tomar todos nuestros títulos y la línea, luego perfectamente en el centro de nuestras imágenes. Entonces sigamos adelante y empecemos con nuestra primera imagen aquí. Voy a agarrar herramienta de selección de rectángulo para poder hacer una selección alrededor de la imagen y luego puedo usar mi herramienta de alineación para alinearla a esa selección. Entonces voy a seguir adelante y hacer esto por cada uno de los títulos y las imágenes. De acuerdo, Ya casi terminamos. El último que tenemos que hacer es organizar todas nuestras capas y voy a tomar todos los títulos e imágenes y colocarlos en grupos de capas individuales llamados Imagen Uno a Imagen siete y eso es todo lo que hay que hacer. Sección ahora se hace en. El siguiente tutorial seguirá adelante y comenzará a trabajar en la sección info de nuestro cuerpo. Entonces si estás listo para hacer eso, hagámoslo. ¿ De acuerdo? 72. Información del cuerpo: Hola y bienvenidos de nuevo. Muy bien, entonces tenemos otra sección para nuestra página Web que va a brindar información adicional para cualquiera que quiera visitar el parque. Vamos a contenido guapo en la parte superior y algunos botones en la parte inferior que proporcionarán información adicional cuando se haga clic en. Y luego también vamos a sumar una pequeña sección aquí abajo para aquellos que quieran reservar un camping en el parque. Lo primero que tenemos que hacer es agregar una imagen grande para el fondo de la sección. Cualquier imagen servirá. Así que adelante y ve a escoger a Sabii, encuentra una imagen y luego avanza y escalarla. Por lo que tiene una altura mínima de 1950 píxeles, y cubre el completo con del documento no tiene que ser exactamente del mismo tamaño. Sólo asegúrate de que se llene al menos tanto. Muy bien, vamos a agarrar nuestro textil con la letra. T diversión familia va a ser flecha. El tamaño va a ser muy grande a los 95 y vamos a usar el blanco y esto va a ser por nuestro título. Está bien, voy a seguir adelante y apagar estas otras capas. De esta forma puedo seleccionar las capas que necesito con mi herramienta de alineación porque vamos a alinear nuestro título. Por lo que Primer Comandante Control y a para seleccionar todos. Entonces eres cojo, es herramienta y luego un centro de línea de objetivo. También quiero agregar una sombra de gota a este título porque es un poco difícil de leer en este momento . Por lo que con Commander Control y F, podemos agregar esa sombra de gota que hemos utilizado en partes anteriores del proyecto. Por lo que definitivamente eso hace que sea mucho más fácil de leer versus no tener la sombra de gota. Está bien. A continuación, quiero crear dos cuadros de texto para contener el contenido de la parte superior. Entonces vamos a crear un nuevo fondo de capa llamado cuadro de texto uno. Entonces lo siguiente que quiero hacer es añadir dos cuadros de texto para contener nuestra información. Entonces vamos a crear una nueva capa llamada cuadro de texto uno. De acuerdo, Para el tamaño, vamos a hacer 700 por 3 50 Entonces vamos a llenar eso con blanco, adelante y de seleccionar con Commander Control y D Vamos a subir a capas y recortar el contenido. Simplemente voy a moverlo hacia arriba, seleccionar todo y luego una línea al centro del documento nuevamente de select. Y vamos a crear otro cuadro de texto esta vez llamado texto Box, también. Para este, vamos a tamaño 700 por 700 y vamos a llenarlo de blanco otra vez. Simplemente voy a acercar aquí para que pueda agarrar esa capa y moverla a su posición. También necesitamos recortar el límite de la capa, así que no olvidemos hacer eso. Y creo que también quiero bajar la opacidad a 30 y esto permitirá que algo de esa imagen que hay debajo de ella salga. Está bien, adelante y agarra algún texto ficticio. Después coge tu herramienta de texto y cambia tu familia de fuentes a Georgia. Bajémoslo a 16 para el tamaño y un color gris oscuro. Sólo voy a dibujar un cuadro de texto aleatorio. Cualquier tamaño está bien. Adelante y pega en tu texto ficticio y si es necesario, capa de película encima del cuadro de texto. Está bien. Voy a seguir adelante y añadir otro párrafo aquí para llenar un poco más el espacio, y luego voy a ajustar mi cuadro de texto en consecuencia si ese Texas está siendo cortado. Entonces voy a seguir adelante y agarrar mi herramienta de alineación ahora con la letra un agarrar ese cambio de fondo cuadro de texto y hacer clic en el párrafo y luego una línea al primer elemento. Está bien, así que eso se ve bastante bien. Adelante y agreguemos nuestros botones. Ahora vamos a seguir adelante y crear una nueva capa llamada Button. Añadamos esquinas redondeadas con el radio de 15 y luego, para las señales iban a hacer 3 75 por 75. Agarra tu cubo, llena la herramienta y luego asegúrate de agarrar tu color verde oscuro y llenarlo. Adelante y de selecto y subamos a recortar capas al contenido y moverlo a la posición. Y entonces sólo necesitamos alinearlos botón en el centro del documento otra vez. Así que selecciona todos. Agarra tu herramienta de alineación click sobre ella y una línea a la selección. acuerdo, Deacuerdo, vamos a seleccionar Commander Control y la letra D. Oye, vamos a volver a nuestro textil otra vez, y esta vez vamos a cambiar la fuente a ferrocarril Bold. Hagamos 34 por la talla y vamos a hacer blanco por el color. Y apuesto a que ya sabes lo que tenemos que hacer a continuación. Eso es correcto. Necesitamos alinear nuestro contenido en medio de nuestro botón, ¿de acuerdo? Y sigamos adelante y organicemos algunas de estas capas. Ahora sigamos adelante y tomemos nuestro botón y lo duplicamos cinco veces, - ¿de acuerdo ? Y usemos nuestra herramienta de alineación y seleccionemos todos los botones que están sosteniendo tu tecla de turno y pinchemos en todos ellos y luego una línea a la izquierda. A continuación, quiero distribuir la cantidad de espacio de manera uniforme entre todos los botones. Entonces vamos a chica abajo para distribuir y luego para offset. ¿ Por qué? Yo quiero cambiar esto a 100. Después haga clic en este ícono aquí para distribuir centros verticales. De acuerdo, quiero renombrar todas estas capas ahora botón uno a botón seis y luego las voy a poner todas en su propio grupo de capas. De acuerdo, sigamos adelante y una línea al cuadro de texto y luego un nuevo grupo anterior para esta sección. De acuerdo, entonces la primera sección está bastante hecha. Creo que sólo necesitamos tomar este título aquí en la línea lo de aquí a aquí. Entonces haz tu selección y sigue adelante y alinearla Así que la parte final de esta sección va a ser una acción llamada, que va a ser un lugar donde los visitantes puedan reservar un camping. Entonces vamos a construir una especie de filtro como hicimos en el proyecto anterior, y vamos a empezar primero con una caja de contenido. Y quiero que esa caja sea la completa con de la página. Entonces sigamos adelante y creamos primero una nueva capa. Muy bien, sigamos adelante y hagamos nuestra selección. Y hagamos esa selección de 525 píxeles de altura. Ahora. El único problema es que mi selección está yendo por debajo de la imagen. Yo lo quiero contenido dentro de la imagen en esta área aquí para que pueda simplemente hacer clic y arrastrarlo hacia arriba a su posición. Una vez que hayamos terminado de hacer, esta sección irá adelante y la alineará en el centro de la parte inferior de esta parte en la inferior de nuestra imagen. Por ahora, sigamos adelante y llenémoslo con Blanco. Vamos a seleccionar y bajar la opacidad al 75%. Muy bien, agreguemos el título de esta sección. Agarra tu textual con la letra T. Vamos a usar flecha de la fuente 95 de la talla otra vez, y luego son de color gris oscuro. Adelante y alinémoslo. Entonces voy a crear otro fondo para el filtro en sí. Esta vez quiero que sea el completo con basado en nuestro sistema de grilla. Entonces tengo una pauta extra aquí mismo. Voy a seguir adelante y mover eso Así que mi lado izquierdo está aquí para aquí. Entonces sigamos adelante y dibujemos una selección hasta el final, y luego vamos a cambiar la altura. 2175. Vamos a usar ese color verde oscuro otra vez. También necesitamos crear una nueva capa primero la va a llamar fondo de filtro, y luego podemos seguir adelante y llenarla de selecto. Y voy a dejar caer la opacidad de esta capa de fondo a 10. Creo que eso es un poco demasiado. Probemos 20 y me voy a ir con eso. Y ahora podemos crear nuestras formas para ese filtro. Empecemos con los títulos de cada columna que vamos a crear. Entonces vamos a cambiar nuestro texto a Georgia. Pero quiero elegir cursiva para el estilo. El tamaño será 14 y luego de nuevo gris oscuro, y la primera columna será la fecha de llegada. Entonces vamos a tener la duración de la estancia y luego menos columna será flexible de nuevo. Podríamos hacer muchas más columnas en base a cómo ese visitante puede reducir su selección. Pero sólo nos vamos a quedar con tres columnas por ahora. Está bien, vamos a trabajar en la Rosa ahora. Sólo voy a llamarlo Fila Uno. Y luego por el tamaño, va a ser similar a nuestros botones aquí arriba. A lo mejor un poco más pequeño. Hagamos 300 por 75 y llenémoslo con el verde oscuro. Está bien, duplicemos eso dos veces. Muy bien, sigamos adelante y recortemos el límite de la capa para cada capa. Alinémoslos todos a la parte superior, y luego vamos a establecer offset. ¿ Por qué? Volver a cero y todo Conjunto X 23 50. A continuación, haga clic en este icono para distribuir centros horizontales. Vamos a seguir adelante y agarrar nuestros títulos, clavarlos y ponerlos en posición. De acuerdo, Volver a la herramienta de alineación para que podamos seleccionar todos estos y alinearlos a la parte superior. Kate, organicemos nuestras capas. Está bien, sigamos adelante y una línea son contenidos al fondo del filtro. Vaya primero a su capa de fondo de filtro y recorte hasta contenido, y luego use su herramienta de alineación para seleccionar ambos para alinear. De acuerdo, solo quiero agregar algo de información en estas filas para que los visitantes sepan qué información necesita ser introducida en cada fila para la familia divertida. Vamos a volver al ferrocarril, vamos a seleccionar Bold 24 y blanco. Ahora, como lo hicimos anteriormente en el último proyecto, quizá queramos crear algunos estados de flotación para algunos cuadros desplegables. Entonces te dejaré eso en manos de ti si quieres sumar esos cuando hagas tu propio diseño para tu portafolio, lo último que quiero hacer es agregar otro enlace aquí abajo, y este enlace en particular se usará si no están familiarizados con el diferentes opciones o el propio parque y no familiarizado con los diferentes campings. Si hacen clic en este enlace, los llevará a otra página que les puede proporcionar información adicional sobre los diferentes tipos de campings. Entonces lo último que tenemos que hacer es organizar nuestras capas. - Enhorabuena . Ya terminamos con nuestra sección de información de nuestro diseño de páginas Web. Entonces en la siguiente lección, vamos a trabajar en el pie de página de esta página Web. Entonces si estás listo para empezar con eso, bueno, ¿lo hace? 73. Footer: Hola y bienvenidos de nuevo. Muy bien, entonces vamos a terminar nuestro proyecto de diseño Web con nuestro pie de página. Ahora no se ve demasiado diferente al pie de página original, y actualmente tienen un total de cinco columnas con sus iconos de redes sociales aquí abajo y una fila separada. Y pensé que sería bueno tener todo en columnas frente a extenderlo. También tenemos cinco columnas aquí arriba. Además esto haría una columna de seis, lo cual es bonito, porque entonces podemos poner una columna a través de columnas de cuadrícula cada una y eso espaciará uniformemente todo. Y entonces solo cambié un poco los colores para que sea un poco más fácil leer. Entonces sigamos adelante y empecemos creando nuestro fondo para la primera sección del pie de página. Vamos a seguir adelante y crear una nueva capa llamada Pie o una para la altura. Vamos a ponerlo en 4 25 También necesito subir esto. Parece que me estoy quedando sin espacio en mi lienzo, así que vamos a tener que aumentar eso va a hacer eso en tan solo un segundo. Adelante y elijamos nuestro color gris oscuro. Adelante y rellena eso y luego recorta el contenido y muévalo hacia abajo. De acuerdo, sigamos adelante y aumentemos nuestro tamaño de lona. Simplemente voy a agregar 800 píxeles a la altura, y luego lo reajustaremos una vez que hayamos terminado. Muy bien, vamos a crear un nuevo fondo llamado Footer a esta vez. Vamos a tamaño más pequeño, Así que vamos a hacer 1 25 y luego seleccionar tu color verde oscuro para rellenarlo con De Select y recortar el contenido. De acuerdo, ahora que sabemos la altura de ambos pies, podemos seguir adelante y recortar o lienzo. Vuelvo a estar en el 51 81. Es posible que seas diferente en función de las imágenes que seleccionaste, así que sigue adelante, descubre la altura de tu lienzo y luego sigue adelante y córtala para el primer título. Vamos a ponerlo en Railway Bold 24 y vamos a hacerlo blanco. Entonces, adelante. Simplemente escribe algún texto ficticio para tu título y sigamos adelante y alinéalo a la primera columna del lado izquierdo. Voy a seguir adelante y crear mi título secundario, y luego para nuestro próximo título. Vamos a usar el ferrocarril regular, y vamos a dimensionarlo a 18. Entonces tenemos algo más de texto para colocar debajo de él. Voy a crear un cuadro de texto que atraviesa dos columnas y luego simplemente pega algo información para rellenarlo. Vamos a redimensionarlo a 14 y también quiero aumentar el espaciado entre cada línea para que sea más fácil de leer. Entonces bajemos y aumentemos el espaciado. Y creo que 15 para ese espaciado de líneas va a funcionar muy bien. Muy bien, salgamos de ahí. Y lo otro que quiero hacer es que Quieres crear una línea que tenga dos columnas de ancho, así que voy a seguir adelante y crear una nueva línea anterior llamada. Dibujemos una selección a través de dos columnas y sigamos adelante y llenarla de blanco . También quiero hacer que esta línea sea un poco más delgada. Subamos a la capa, recortamos el contenido, luego agarramos tu báscula. Herramienta fue Shift plus s y hagamos la altura, también. Adelante y mueve esta línea hacia abajo sólo un poquito. Adelante y arreglemos algunas de nuestras capas aquí Vale , ahora que tenemos todo eso entrados y alineados, sigamos adelante y duplicemos esta capa unas cuantas veces para que podamos llenar el resto de la columnas. Está bien, sigamos adelante y encontremos aquí nuestra capa de rejilla. Asegúrate de que esté encendido y sigamos adelante y escalarlo para que realmente podamos verlo en la parte inferior de nuestro campus aquí. Entonces eso nos va a hacer más fácil colocar nuestras columnas donde necesiten estar, pueden. Trabajemos en la segunda parte de nuestro pie de página. Lo vamos a mantener Railway, pero voy a hacer 14 por la talla. Adelante y sumamos nuestro logo aquí abajo. Voy a seguir adelante y agarrarlo de la sección de cabecera y duplicado y traerlo todo el camino hacia abajo. Ahora tenemos que agarrarlo de aquí arriba también. Los organizados de Kayla son capas un poco. Lo único que quiero hacer es que quiero tomar este logo y hacerlo todo blanco, así que sigamos adelante y creemos una nueva capa llamada overlay. Vamos a llenarlo de blanco, y vamos a seguir adelante y poner esas dos capas y un grupo nuclear llamado Logo Overlay. Y luego necesitamos cambiar el modo de mezcla para la superposición y vamos a seleccionar Edición Perfecta. Entonces lo único que queda por hacer es agregar los iconos de las redes sociales, y voy a dejar que lo hagas por tu cuenta. Es realmente simple. Simplemente crea tu título y luego agrega tus iconos de redes sociales como lo hice aquí. Otra cosa que haría es actualizar el pie de página para representar diferentes títulos y diferentes enlaces. No creo que quieras sentarte aquí a verme tipear toda esta información. Si quieres practicar haciéndolo por tu cuenta, puedes seguir adelante y hacer eso. Y eso definitivamente es algo que haría antes de dárselo a mi cliente para su revisión. Yo también cambiaría. Los enlaces aquí abajo es bueno ser diferentes versus tener todo exactamente igual. Está bien, así que eso es todo para nuestro pie de página. Y como saben, tenemos que pasar por toda la página web antes de dar a nuestros clientes para actualizarla y hacerlo mejor si es posible, y para retocar cualquier otra cosa que nos olvidamos de hacer. como espaciado y alineaciones. Entonces vamos a seguir adelante y echar un vistazo a la página general en qué página en el siguiente tutorial. Y hay otra cosa que tenemos que hacer que aún no hemos hecho. Y eso es agregar nuestros estados de hover a nuestra sección de información para estos botones aquí mismo. Vamos a cambiar los nombres de estos y luego crear una pequeña ventana emergente para el estado de flotación . ¿ Y qué pasa después de hacer click en ese enlace en particular? Entonces vamos a cubrir eso en el siguiente tutorial, así que si estás listo para eso, hagámoslo. 74. Tweaks: hola y bienvenidos a los retoques finales para el Proyecto número cinco. En general, creo que hicimos un trabajo bastante bueno. No hay mucho que cambiar o arreglar. Creo que más o menos alineamos todo correctamente centrado todo correctamente. A mí me gustan los fondos que usamos. Lo único que no hicimos fue y un estado flotante para este botón en particular aquí. Y no cambiamos los nombres de los títulos para cada uno de estos botones. Entonces estas son dos cosas que definitivamente tenemos que hacer antes de enviar el concepto de diseño a nuestros clientes. Entonces voy a seguir adelante y actualizar estos botones muy rápido. La otra cosa que quiero mencionar es que definitivamente hay más información en su sitio web general que estos cinco botones. Por lo que mi recomendación sería ampliar esta sección para incluir botones para toda la información. No vamos a hacer eso porque es sólo repetitivo de cosas que ya hemos hecho. Ya sabes crear un botón y centro de texto, es etcétera. Pero eso es algo que yo tendría en cuenta antes de presentar un diseño para revisión o para aprobación es asegurarme de que tengas toda la información incluida en tu diseño. No quieres escatimar y dejar nada fuera porque el cliente puede estar confundido y rechazar el diseño no necesariamente basado en tu diseño, sino porque falta información. Así que solo asegúrate de tener toda la información incluida. Vamos a seguir adelante y diseñamos el estado de desplazamiento, que va a ser una ventana emergente al hacer clic en uno de los botones. En realidad, antes de que hagamos eso, sigamos adelante y una mentira son contenidos dentro de los botones. Ahora, como saben, de lecciones anteriores, no podemos seleccionar estas capas de texto individuales porque están enterradas dentro de capas de grupo , al menos en la versión actual de Gamper, que es 2.10 punto a Tal vez esperemos, en una futura actualización de gimp, nos permitan seleccionar estas capas con su herramienta de alineación, pesar de que estén anidadas en capas agrupadas, y la única opción es apagar las capas o la agrupar capas por encima de él. Pero incluso en este caso, todavía no puedo seleccionar mi texto, y luego podemos seleccionar esa capa en particular con nuestra herramienta de alineación, seleccionar todo y una línea a esa selección. Después tenemos que agarrar esa capa y moverla todo el camino de vuelta dentro de las capas de grupo. No muy productivo. Entonces es por eso que quizá quieras actualizar cosas como esta en el momento en que las estás creando y no durante el proceso de ajuste, porque esto va a agregar mucho tiempo a la producción de tus diseños Web. Voy a seguir adelante y terminar el resto de estos títulos y alinearlos con sus botones . Muy bien, vamos a seguir adelante y agarrar nuestro icono de estado HOVER de nuestro encabezado y duplicado y agregarlo al primer botón. Muy bien, ahora estamos listos para crear nuestro pop pop de estado flotante, que es el estado después de hacer clic en un botón. Así que sigamos adelante y creemos una nueva capa encima del botón uno llamado Hover Pop up. Vamos a crear un fondo que cubra todos nuestros botones actuales ahora mismo que va a mostrar toda esa información. Entonces para el tamaño, vamos a hacer 5 25 por 600. Simplemente lo voy a mover por aquí a la izquierda y especie de centro solo un poquito y luego voy a seguir adelante y llenarlo de blanco. También quiero agregar un trazo. Entonces vamos A editar selección de trazos, voy a cambiar mi color de primer plano al verde oscuro, una línea con de tres y click trazo Que de select con Commander Control y la letra D . Adelante y agarremos nuestras herramientas de texto. Podemos poner un título aquí arriba de horas de operación. Voy a cambiar el color y el tamaño y luego seguir adelante y agarrar algún texto ficticio, hacer clic y crear un cuadro de texto y pegar en algún contenido. Definitivamente demasiado grande. Entonces voy a hacer 14 por la talla. Lo vamos a cambiar a Georgia y son de color gris oscuro otra vez. Tengo que contentarme mucho, Así que voy a seguir adelante y hacer este contenido un poco más pequeño. Hagámoslo una talla 12 y eso debería funcionar. Vamos a seguir adelante y sólo subirlo un poco. Y ahora necesitamos crear una opción para cerrar esta ventana. Voy a entrar dentro de mi cuadro de texto muy rápido y cambiar el tamaño del cuadro de texto a una línea a la parte inferior justo aquí. Muy bien, sigamos adelante y saquemos estas capas del grupo de botones y vamos a crear un nuevo grupo de capas flotante frío pop up. Creo que en realidad voy a sacar este del grupo de botones ya que es un estado flotante y en realidad no un botón. De acuerdo, tomemos este hover, pop up y recortar el contenido y luego hagamos una selección del fondo y luego seleccionemos nuevamente la capa agrupada flotante emergente. No me va a dejar seleccionar eso es casa y seguir adelante y sacar esto todo el camino, y sólo vamos a seleccionarlo para que podamos alinearlo al centro del documento. De acuerdo, pongamos eso de nuevo dentro de selecto. Y vamos a seguir adelante y añadir un enlace aquí abajo que va a permitir que nuestros visitantes cierren esta ventana emergente cuando hayan terminado de leerla. Y luego elijamos nuestro bonito color azul para el color. Y voy a seleccionar subyacente para agregar un subyacente debajo de él, y lo voy a establecer en 16 para el tamaño y el ferrocarril. Bold está bien. De acuerdo, sólo voy a poner esto aquí otra vez. Voy a sacar esto para poder alinearlo al centro en y hacer una selección desde la parte inferior de ese texto y hacer la selección alrededor del resto de la parte inferior de esa sección para que podamos alinearla directamente en el centro de esa selección. Entonces cuando entregue esto a mi cliente, lo tendré apagado, y luego puedo mostrarles lo que va a pasar. Una vez que hagan clic en una de estas opciones de botones para obtener más información, van a ver que el Estado Hover va a aparecer con una nueva ventana con la información basada en el botón en el que se hace clic. Y, por supuesto, nuestro desarrollador Web lo va a notar también. Entonces lo único que tenemos que hacer es arreglar tu pie de página y organizar cualquier capa que necesite estar adecuadamente organizada. Y entonces y luego terminarás todo con el Proyecto número cinco. Así que adelante y termina este proyecto de diseño Web y luego, como siempre, sigue adelante y rediseña esta página web con tu propia visión creativa para que puedas editar portafolio y luego estarás listo para pasar al proyecto número seis. En realidad, este próximo proyecto es mi diseño favorito fuera de todo este curso. Es mi favorito. Por lo que no puedo esperar a compartir con ustedes cómo lo hicimos. El siguiente diseño le ha sacado un poco de una sensación de comercio con un estilo retro a ella. Entonces es muy divertido, y vamos a aprender algunas cosas nuevas en esos proyectos de diseño. Entonces cuando estés listo, te veré en ese proyecto. Hasta entonces, gracias por escuchar y tener un día impresionante. 75. Proyecto 6: resumen retro: Hola y bienvenidos a nuestro Diseño Web Proyecto Número seis. Estoy tan emocionado de que finalmente llegaste a este proyecto en particular. Este es mi diseño Web favorito. El proyecto. En este curso, sigamos adelante y echemos un vistazo rápido a su sitio web existente. Aquí no pasa mucho más que muchas malas opciones de diseño. Su logotipo está pixelado, y es un logotipo de muy baja calidad, no el diseño en sí. Pero el archivo real que se utilizó es de baja calidad, y no se ve muy profesional. Tenemos un fondo oscuro con texto oscuro para el menú, que no es fácil de leer, por lo que vamos a arreglarlo para que el menú sea mucho más fácil de leer. Y si te preguntas qué hace bien esta empresa, lo que hacen es vender carteles de películas antiguas, y uno de esos carteles está siendo presentado aquí en la sección de cuerpo de corte de héroe de su página web. Y luego tenemos alguna información de contacto aquí abajo, así que si llegas a esta parte de su página web, te darás cuenta de que venden con cita previa en persona o en diversos espectáculos de arte y antigüedades , para que puedas póngase en contacto con ellos para averiguar dónde van a estar para comprar sus carteles. Pero mi pensamiento es, ¿no sería mejor que fueran más fáciles o ambos ofrecer los carteles a la venta directamente en su página web. Ya tienen una sección de inicio de sesión para clientes, pero no están vendiendo directamente en línea, así que no estoy muy seguro de por qué tienen un log in. tienen un libro de visitas, no estoy seguro de cuál es el beneficio de eso. Y luego tienen alguna información sobre su empresa y lo que dieron y luego una página de contacto, que básicamente es esta información aquí. Por lo que en general, este sitio web y este cliente pueden hacer crecer fácilmente su negocio al mostrar sus carteles en línea y venderlos directamente en línea frente a limitarse a ventas en persona. Entonces déjame mostrarte la página de inicio de comercio e que creé para hueso de galería retro. Tiene un estilo de diseño retro. Hemos actualizado el logo. El menú es más fácil de leer. El inicio de sesión ahora tiene sentido de propósito. Clientes o clientes pueden revisar sus pedidos en su historial a través de una cuenta. Hay un Kurt de compras para llevarlos directamente a su corriente para echar un vistazo a La sección The Hero cuenta con sus carteles de películas más populares que los clientes pueden navegar hasta cinco carteles de películas diferentes solo en la sección de héroes. Siempre podemos agregar más si fuera necesario, pero pensé que comenzaríamos con cinco. Tenemos una descripción del póster de la película. Si quieren saber más, pueden dar click en este enlace de Mawr, y un pop up mostrará más información sobre ese cartel en particular. Y si están listos para comprar tomados por ahora mismo, entonces si quieren explorar más opciones, pueden desplazarse hacia abajo. Y tenemos un tipo de comercio electrónico configurado que los clientes pueden filtrar por precio año calidad de género . Teoh encuentra fácilmente los tipos de carteles que les gusta coleccionar, Y, por supuesto, pueden comprar ahora o obtener más información primero. Entonces, por supuesto, terminamos la página principal con un pie de página. Por lo que en general estamos tomando este concepto de diseño Web de su logotipo existente y lo que están vendiendo. Y por eso elegí un estilo de diseño retro para esta empresa en particular. Y me encanta el estilo de diseño que creé, así que te voy a mostrar cómo actualizar este logotipo. Pero tal vez estés pensando bien ¿ya sabes cómo hacer eso? Solo necesito escoger la fuente y rehacerlo. Si fuera así de simple, Sí, eso es todo lo que tienes que hacer. Pero, ¿y si la persona que diseñó este logotipo no le dijera a tu cliente qué fuente usaron ? Todo lo que tienen es un archivo J peg aplanado, y no tienen idea del nombre de esta fuente. Vas a tener que desplazarse por miles de fuentes para intentar encontrar esto. O eres Ah, él tan emocionado de compartir contigo lo fácil que es averiguar qué fuente es esta entre miles. Y puedes hacerlo literalmente en un minuto o dos como máximo. Entonces voy a compartir ese secreto contigo en la siguiente lección. Entonces vamos a crear este slider retro. Te voy a dar una propina y el recurso que utilizo para fondos y texturas. Entonces tenemos una textura tipo lino para el fondo, y puedo agregar esto en un solo clic y te voy a mostrar cómo hago eso. Y luego, claro, vamos a seguir adelante y crear la sección de comercio e y te voy a dar algunos consejos sobre cómo creé algunos de los efectos para estos listados Ya hemos hablado de drop shadow antes, pero también tenemos una gota sombra en el interior del botón esta vez en lugar del exterior . Entonces te mostraré cómo hice eso. Y por supuesto, proporcionaré consejos adicionales en el camino. Entonces si estás emocionado como yo por este proyecto, hagámoslo. Empecemos con averiguar la fuente utilizada en este logotipo. 76. logotipo: antes de que podamos realmente rehacer nuestro logo para este cliente. Tenemos que averiguar qué fuente se utilizó para el logotipo. El problema es el cliente no sabe qué fuente se utilizó ni el nombre de esa fuente. Todo lo que tienen es un archivo J peg aplanado. Y, como pueden ver, esto está muy pixelado. Haber incluido realmente este logotipo como parte de esta lección, por lo que puedes descargarlo y usarlo tú mismo para averiguar qué fondos. Entonces déjame mostrarte cómo hacer eso. Adelante y descárgalo. Entonces necesitamos ir a esta página web. Mis fuentes dot com forward slash w t f, y lo que va a hacer este sitio web es que va a quitar el archivo de ese logotipo, y después de que lo subas a través de este navegador, va a escanear ese archivo, y va a comparar es a miles y miles. En realidad, hay 130 mil fuentes y contando. Se va a comparar ese archivo con todas las fuentes de su base de datos para reducir qué fuente se utilizó en ese logotipo. Es tan simple, está soplando la mente. Qué fácil eso dice. Entonces voy a agarrar mi archivo aquí, y voy a arrastrarlo y dejarlo caer en esta zona. Entonces tenemos que dar click en este pequeño botón azul aquí para identificar al Funt y Boom seleccionados . Ahí vamos. Ahí está el extremo derecho, Plaza. También hay otras versiones de ese fondo, Este de aquí. Hay otros estilos de esa fuente, por lo que puedes identificar la fuente utilizada para ese logotipo sin tener que tamizar 130 mil fondos. ¿ Qué tan guay es eso? Ahora estás mirando esto, y puedes ver por aquí a la derecha. Tenemos que comprar estos fondos. ¿ O lo hacemos? En realidad hay versiones gratuitas de este funt que puedes usar en tu diseño Web, y luego puedes decidir si quieres que tu cliente use esa fuente gratuita. O tal vez estarían mejor con una versión de alta calidad de la fuente original. Y el precio de la fuente no es tanto. Esto en realidad es en dólares canadienses, por lo que probablemente esté más cerca de como 25 a $30 U. S. Así que si hacemos una búsqueda en Google para Plaza Fondo gratis, nuestra primera opción aquí mismo desde fonts geek dot com Puedes descargar el regular talla de forma gratuita. Entonces, ¿qué tiene el maldito local ingenioso Adelante e instalarlo en gimp Reiniciar campamento para finalizar la instalación y luego volver a gimp y vamos a seguir adelante y recrear el logo para que podamos agregarlo a nuestro proyecto. Entonces sigamos adelante y empecemos. Vamos a crear un nuevo documento con comando o control y el final de letra. Esta es la talla que queremos 80 por 68 luego vamos a seleccionar el color de primer plano, y vamos a elegir este color gris oscuro. Así que adelante y escriba número de deuda en y luego haga clic. OK, entonces vamos a seguir adelante y crear un par de fondos antes de entrar texto. Entonces sigamos adelante y creamos una nueva capa llamada fondo retro lleno de transparencia y luego, con su herramienta de selección de rectángulos, crearemos el tamaño de esas cajas, y el 1er 1 va a ser de 1 35 por 58 y luego sólo tienes que seguir adelante y moverlo hacia arriba y hacia el documento y luego agarrar tu blanco y llenarlo con tu cubo, llenar la herramienta y luego de seleccionar. Sigamos adelante y duplicemos ese fondo y lo llamemos fondo de galería. También quiero recortar la capa bhandari para ambas capas y luego para el fondo de la galería . En realidad vamos a llenarlo con Negro, Así que golpea la letra D y luego agarra tu herramienta de relleno de cubo con la letra G y adelante y llénala. También queremos agregar una guía que esté a mitad de camino del logo, por lo que estamos a 80. Entonces vamos a arrastrar una pauta a los 40 y luego vamos a mover el fondo de la galería hacia la derecha. Genial a lo largo de esa guía y luego asegúrate de que tu fondo blanco también esté alineado con esa pauta. De acuerdo, podemos seguir adelante y ocultar la guía ahora, y vamos a seguir adelante y agarrar nuestra herramienta de texto. Vamos a elegir la fuente que descargamos e instalamos Plaza de Wreg y luego por el tamaño, vamos a hacer 60 y vamos a hacer negro para retro. Así que adelante y teclea retro en todas las mayúsculas y luego simplemente muévelo a la posición ahora porque el límite de la capa está en el exterior del texto retro arriba y volarlo. O tenemos que entrar y ajustar el tamaño de ese cuadro de texto hasta que lo cubra todo para que podamos, luego una línea que directamente en el cuadro de texto voy a seguir adelante y hacer eso. Sostenga la tecla de turno, haga clic en el logotipo y luego una línea al primer elemento. De acuerdo, tenemos que volver al cuadro de texto ahora y cambiar el tamaño del cuadro de texto en consecuencia. Vamos a seguir adelante y añadir galería en el lateral, pero cambiémoslo dedo del pie blanco para que pueda seguir adelante y la línea este contenido con el logo retro ahora con sin usar la herramienta de alineación simplemente agregando una pauta aquí y asegurándome de que se alinea en la parte superior. Puedo ver visualmente que es igual en ambos lados también. Entonces voy a seguir adelante y dejar el texto de la galería justo ahí, y eso es todo. Nuestro logo ya está hecho. Adelante y pongamos esto en un nuevo grupo de capas llamado Logo. Ahora podemos agregar esto a nuestro proyecto, y necesito seguir adelante y abrir mi plantilla maestra de grid y realmente no lo estoy viendo aquí en este momento. Entonces lo que puedo hacer es poder venir aquí a documentar la historia, y esto me va a mostrar muchos más archivos que he abierto en el pasado. Y puedo navegar a través de esto para encontrar esa plantilla maestra de cuadrícula y luego abrirla directamente desde aquí versus tratando de buscarla en mi disco duro. Entonces lo veo aquí mismo. En realidad, ese es mi expediente PST. Entonces aquí está, grid dot Exe CF. Entonces si hago doble clic en eso, se abrirá esa plantilla. Y ahora puedo agarrar mi logo de aquí y y ello a los documentos. Sólo voy a arrastrarlo ahí mismo y sólo moverlo hasta arriba. ¿ Todo bien? Ahora que hemos terminado con nuestro logo, vamos a seguir adelante y trabajar en la sección de encabezados en el siguiente tutorial. Entonces si estás listo para hacer eso, hagámoslo 77. Encabezado: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y trabajar en nuestra sección de cabecera. Ahora vamos a añadir nuestra navegación primaria así como una navegación secundaria. Entonces te voy a dar algunos consejos nuevos en el camino, además de crear un nuevo atajo de teclado para una característica específica que hemos estado utilizando en cada proyecto. Y lo hemos estado usando una y otra vez. Entonces vamos a seguir adelante y crear un nuevo atajo de teclado para eso. Pero primero, sigamos adelante y creemos nuestro fondo de cabecera. Por lo tanto, crea una nueva capa con el fondo del encabezado del nombre. Adelante y hagamos nuestra selección. Queremos que esté lleno con. Y luego por la altura, vamos a hacer 1 50 Adelante y agarrar, son de color gris oscuro y llenarlo. De acuerdo, sigamos adelante en de select antes de movernos esto a la posición. Vamos a seguir adelante y crear un atajo de teclado para ese recorrido esa característica que hemos estado usando una y otra vez. Y esa es la capa a recortar a la entidad de contenido. Por lo que hemos estado usando esto en cada proyecto sin parar. Entonces si subimos a editar y seleccionar atajos de teclado. Podemos asignar un atajo de teclado para esa característica específica. Entonces en búsqueda, vamos a hacer cultivo a contenido. Entonces de éstos a la que queremos asignar el atajo de teclado es la opción de capas. Por lo que necesitamos hacer clic aquí para poder asignar una pulsación de tecla a esa herramienta o característica específica . Entonces originalmente pensé tal vez la letra C, pero eso se está usando para la herramienta de cultivo. Entonces, en cambio, lo que podemos hacer es usar la tecla Mayús en conjunto con la letra C. Así que mantenga presionada su tecla Mayús y luego presione la letra C. Y ahora ese es el atajo de teclado para esa herramienta en particular. Asegúrate de haber guardado los atajos de teclado al salir y pulsa cerrar. Ahora simplemente podemos usar Shift más C para recortar el límite de la capa hasta el contenido. Está bien, sigamos adelante y movamos eso hacia arriba a la posición. Adelante y apaguen mis rejillas por ahora, y sigamos adelante y sumamos nuestra navegación primaria. Ahora, lo que va el fondo, probemos la Plaza de Wreg que usamos para el logo. Pero vamos a tamaño 24 y vamos a usar Blanco para el color. Entonces tecleemos en casa y luego peleemos espacios tienda y echemos un vistazo a esto. Entonces en este momento es un poco difícil de leer, así que tal vez necesitamos aumentar el tamaño de la fuente. Entonces sigamos adelante y probemos 30 y veamos si eso ayuda a alguna ahora, aunque eso sí ayuda un poco, sigue siendo un poco difícil de leer, y el texto es una especie de competencia con nuestro logo, ya que ya estamos usando ese fondo particular en el logotipo. Entonces sí quiero usar una fuente de tipo retro para la navegación, y en este caso, no creo que usar la familia del fondo del logotipo funcione para la navegación ni para ni siquiera los títulos de la página Web. Ahora, en el proyecto anterior, sí usamos una fuente similar a su branding, pero no compite tanto con ella ya que el logo estaba apagado a la izquierda y mucho más pequeño que los títulos reales. Pero en este caso, están demasiado unidos, e incluso con un tamaño grande, sigue siendo difícil de leer. Por lo que queremos asegurarnos de que hacemos fácil la navegación y los títulos así como el texto corporal. Entonces vamos a entrar y cambiarlo a Oswald y vamos a cambiarlo a 24 porque creo que 30 es demasiado grande. Entonces eso es mucho más fácil de leer versus lo que teníamos anteriormente. Ahora sigamos adelante y sumamos nuestros otros elementos del menú de navegación aquí a la derecha. Pero antes de que hagamos eso, bajemos aquí y tecleemos Oswald para que se ajuste por defecto a esta fuente a medida que agregamos más texto. Entonces sigamos adelante y tecleemos alrededor de cinco espacios y en contacto. Entonces ahora la pregunta es, ¿cómo alineamos toda esta información? ¿ Queremos alinearlo con las columnas de la cuadrícula, o necesitamos hacer otra cosa? Entonces sigamos adelante y una línea a la tercera columna y a la tercera desde la última columna por aquí. Y echemos un vistazo a lo que sucede cuando hacemos eso. Voy a seguir adelante y poner ese ahí, y entonces éste necesita ir a la derecha esto un poco. Voy a seleccionar ambos con mi herramienta de alineación para poder alinearlos a la parte inferior. Ahora necesito seleccionar todos. Agarra mi dedo de alineación otra vez para que pueda online mi logo al centro de esa selección. Muy bien, volvamos a nuestra herramienta Lima y pinchemos en uno de los ítems de navegación. Turno. Haga clic en su logotipo para que pueda alinearlo a la parte inferior de los elementos del menú. Muy bien, ahora que tenemos todo correctamente alineado, no estoy seguro si se puede notar, pero el diseño está desequilibrado en este momento. Si acercamos aquí y echamos un vistazo más de cerca, puedo ver que hay más espacio en este lado vs en el lateral. A pesar de que alineamos todo al centro y a través de las columnas adecuadas. Todavía hay espacio extra aquí, y si tomamos aquí nuestra herramienta de medida y medimos, tengo 125 píxeles ahí y luego de este lado tengo 97 así que hay 28 píxeles más de espacio en el sitio. Entonces, ¿cómo arreglamos eso? Bueno, el problema es que nuestros elementos del menú de navegación tienen una cantidad diferente de caracteres en ellos y diferentes caracteres en general que son de diferentes tamaños, así que eso es crear el desequilibrio. Entonces la pregunta es, ¿movemos la navegación primaria por aquí a la derecha, más hacia el dedo derecho, agregamos más espacio en ella, o quitamos ésta o hacia la derecha? Si hacemos eso, entonces todo no va a estar correctamente centrado en el propio navegador. Entonces va a estar desequilibrado otra vez. Y creo que eso va a ser mucho más notable que el dilema de espaciado actual que tenemos en este momento. Entonces esto es lo que yo haría. Tomaría nuestro logo y lo centraría directamente entre los dos lados de nuestra navegación primaria , y eso lo va a equilibrar. Pero cuando alejas el zoom en general, vas a ver que el logotipo no está centrado en el navegador, sino como el espaciado está mucho más alejado por aquí a la izquierda y a la derecha, no va a ser tan notable como es ahora, así que es el mal menor de las tres opciones. Entonces voy a seguir adelante y hacer una selección entre mi navegación y luego ¿qué? El instrumento de alineación. Puedo seleccionarlo y alinearlo al centro de nuestra selección, para que eso lo haga mucho más equilibrado aquí mismo. Y a pesar de que no está equilibrado en el navegador, no es tan notable como lo era antes. Al menos esa es mi opinión. Entonces estas cosas de aire en las que vas a tener que decidir en base a lo que ves y a tu visión creativa. La otra solución es poner toda nuestra navegación primaria en una línea y luego con abajo , sobre a la izquierda o a la derecha para que también tengas esa opción. Muy bien, sigamos adelante y creemos nuestra navegación secundaria. Vamos a tapout log in. Hagamos tres espacios para reenviar inclinaciones tres espacios. En realidad voy a cambiar eso a cinco espacios en ambos lados aquí y luego golpear tu llave de escape . Y vamos a subir esto ahora porque esta es nuestra segunda navegación láctea. No debería ser tan grande como nuestra navegación primaria, por lo que necesitamos volver a entrar y hacer esto más pequeño. En este caso, voy a hacer 14 por el tamaño si nos alejamos y le echamos un vistazo, el problema es, es difícil de leer, Así que esta tipografía Oswald no es una buena fuente para usar en tamaños más pequeños es mucho más fácil a un tamaño más grande. Entonces lo que vamos a hacer es ir adentro, doble clic en iniciar sesión, y luego aquí abajo, podemos cambiarlo a ferrocarril, y ahora se puede ver que es mucho más fácil de leer de lo que era antes. Ahora necesitamos y un Kurt de compras hasta el final de eso. Y sólo voy a agarrar uno de los que usamos cualquier proyecto anterior, que es el primer proyecto. Y voy a seguir adelante y agarrar ese Kurt de compras y traerlo para que tú puedas hacer lo mismo . O simplemente podrías encontrar uno nuevo a través de las imágenes de Google. Ahora, muy rápido. Antes de poner esto aquí arriba y alinearlo. Tengo otro consejo rápido para ti ahora mismo. Tengo seleccionada mi herramienta de movimiento, y tengo seleccionarla antes o guía seleccionada. A veces cuando el contenido de esa capa Israel pequeño o tal vez hay una brecha entre diferentes elementos. ocasiones es difícil escoger el contenido de esa capa y moverla, y en su lugar terminarás moviendo otra cosa, porque cuando escojas una capa o guía, va a escoger la capa en la que haces clic. Entonces, por ejemplo, si subimos aquí y traté de seleccionar esta parte de nuestra navegación y hago clic en el medio, es Ashley seleccionando la capa de fondo y moviendo eso en su lugar. Entonces si vengo aquí abajo y trato de dar click en esto, voy a mover el fondo. Por lo que a veces es difícil utilizar esta herramienta de movimiento con esta opción para hacer una selección en algunos casos. Pero así es como puedes evitar eso. Si tomo esta capa de fondo y subo aquí y doy clic en esta opción de bloqueo, se va dedo del pie bloquear la capa en posición para que ya no pueda moverla. Por lo que podría hacer lo mismo con mi fondo de cabecera también, y así en posición. Y entonces no puedo seleccionarlo. Pero puedo seleccionar otra cosa en la que sí haga clic ahora. Otra cosa que puedes hacer es que todavía puedes llevar tu capa de fondo aquí y un color a ella, pesar de que es mucho. Pero si quieres proteger aún más tu capa, puedes seleccionar esta opción aquí, que bloqueará los píxeles de esa capa. Por lo que ahora puedo agregar cualquier color a esa capa. E incluso dice aquí abajo esta capas activas pixeles están bloqueados. Entonces cuando trate de moverlo, vas a recibir otro mensaje. La posición de las capas activas está bloqueada, por lo que esa es una excelente manera de asegurarse de que no mueve accidentalmente una capa o capas específicas o de que accidentalmente agregue píxeles adicionales a ellas. Porque como estás trabajando con muchas capas como las que tenemos en proyectos anteriores, a veces intentas mover algo, y tal vez tienes la opción equivocada seleccionada y terminas moviendo una capa que no quieres mover, y realmente no te enteras hasta llegar a la etapa final, donde estás ajustando el diseño final y luego tienes que volver atrás y arreglarlo. Entonces solo quería compartir esto contigo para que sepas proteger tus capas y minimizar el trabajo extra que tal vez tengas que hacer al final de tu proyecto. Muy bien, sigamos adelante y volvamos a nuestro icono de Kurt de compras y moverlo hacia arriba a su posición. Adelante y una línea esto con nuestras guías y su columna para que todo sea perfecto. También necesito agarrar mi navegación secundaria aquí y asegurarme de que esté bien espaciado entre las varillas delanteras y el comienzo de su ícono. Ya que no lo es, necesito seguir adelante y moverlo. Y por eso agregamos los cinco espacios al final para que podamos ver que el límite de la capa está por aquí y no por aquí. Está bien, sigamos adelante y empecemos a organizar nuestras capas. También necesitamos llevar nuestro carrito de compras aquí y cambiarlo dedo blanco, por lo que quizá recuerdes cómo hacerlo. Lo que vamos a hacer es crear un nuevo fondo de superposición. Después lo vamos a llenar con click blanco. OK, vamos a crear un nuevo grupo de capas llamado Overlay y luego agarrar ese fondo excesivamente y cambiar el modo de mezcla a adición. De acuerdo, ahora tenemos nuestro carrito de compras blanco. Echemos un vistazo a nuestro encabezado hasta ahora. Parece que nos queda una cosa por hacer, y es separar un poco más nuestra navegación secundaria y primaria porque es especie de competir entre sí todavía, y está un poco desequilibrada porque tenemos más contenido aquí a la derecha, por lo que este lado del diseño es más pesado. Es una especie de inclinarse hacia la derecha porque aquí hay más elementos o más contenido. Entonces una forma de arreglar eso es crear otro fondo para que la navegación secundaria ayude a contener ese contenido dentro de él, y eso debería ayudar a equilibrarlo un poco más. Entonces vamos a crear una nueva capa llamada fondo secundario y cambiarla a transparencia . Haga clic en Aceptar, y sigamos adelante y llenarlo con ese mismo color oscuro. Adelante y hagamos 40 la altura y vamos a usar ese color gris oscuro. Está bien. Ahora llegamos a usar nuestros nuevos atajos de teclado, así que turno más C sigue adelante y sube eso. Tenemos que mover esto por debajo de esa capa de grupo. Adelante y acerquemos aquí para que podamos alinear nuestra navegación secundaria entre la parte superior y la inferior. Aquí, agarra tu herramienta de alineación y sigue adelante y haz clic en la navegación secundaria. El único problema es porque creamos esa nueva superposición. Tenemos que recortar el contenido de nuevo a aliarse con el contenido en sí. Así que agarra tu capa agrupada de navegación secundaria. Usa tu nuevo atajo de teclado shift plus C. Ahora podemos seleccionarlo, y la línea media del objetivo puede ir adelante y de seleccionar. Ahora lo que tenemos que hacer es y una sombra de gota para ayudar a crear esa separación. El único problema fue nos adelantamos un poco al recortar el contenido hasta ese contenido. Por lo que estaba realmente emocionada por usar el nuevo atajo de teclado. Entonces vamos a seguir adelante y deshacer eso con capa de capa de dos tamaño de imagen. Subiremos a nuestros filtros son drop shadow y añadimos una drop shadow. Entonces eso es un poco demasiado grande para mí. Voy a seguir adelante y soltar el acceso X e Y hacia abajo, y eso se ve bastante bien por ahí. Es una especie de zoom por aquí y ver cómo está afectando al resto del diseño, así que todo se ve bastante bien. Entonces voy a dejar todo lo demás por defecto y hacer clic en Aceptar ahora, si quieres, puedes seguir adelante y usar tu atajo de teclado para recortar el contenido. Pero como saben, está recortando el fondo hasta el borde o la parte inferior de esa sombra caída, por lo que definitivamente ayudó a equilibrarlo un poco. Todavía está un poco fuera de equilibrio. Todavía está un poco pesado aquí, pero no tanto como antes. Y definitivamente hay separación ahora entre la navegación secundaria y la primaria. Lo único que realmente no me gusta es el espaciado del logo porque tenemos más espacio aquí abajo que aquí arriba. Entonces sigamos adelante y la línea el logo al centro de la parte superior y la inferior aquí. Está bien, entonces eso se ve mucho mejor ahora, y creo que todos hemos terminado. Todo lo que tenemos que hacer es organizar nuestras capas aquí y ponerlas en un nuevo grupo de capas llamado Header. Enhorabuena. Ya terminamos con la parte de cabecera de este proyecto de diseño. En el próximo proyecto, vamos a empezar a trabajar en el slider de la sección de héroes, y esto va a tardar mucho tiempo en hacerlo. Probablemente vamos a romper esto en dos, tal vez tres tutoriales diferentes. Entonces si estás listo para empezar con eso, hagámoslo 78. Hero parte 1: Hola y bienvenidos de nuevo. Muy bien, así que vamos a seguir adelante y empezar a trabajar en la sección de héroes, que incluye nuestro slider de diferentes productos. Pero antes de que realmente empecemos en el slider, primero quiero hablar del fondo porque sí tengo un fondo texturizado en la parte posterior, y quiero mostrarte cómo y estos diferentes tipos de texturas o patrones dentro de gimp instalando patrones prefabricados en el gimp que luego puedes usar con tu herramienta de llenado de cucharón . Incluso podrías usarlo con tus herramientas de pincel, tu camino, herramienta y más. Entonces te voy a mostrar el recurso que me gustaría usar para obtener este tipo de patrones de forma gratuita. Entonces sigamos adelante y comprobemos eso. Y aquí está el sitio aquí. Top tail dot com forward slash diseñadores hacia adelante slash patrones sutiles. Ahora hice una búsqueda de lino, que redujo el número de patrones para ese tipo de textura o ese patrón, y en total. este momento, el sitio tiene 491 patrones, y siguen agregando más y más patrones de manera regular. Hace apenas unos meses, sólo había alrededor de 470 patrones. Por lo que es un gran recurso encontrar patrones gratuitos que puedes usar para tus proyectos de diseño Web , especialmente para patrones de tipo de fondo, porque te van a proporcionar un archivo que va a ser bastante pequeño en tamaño, aproximadamente 50 píxeles por 50 píxeles o 100 píxeles por 100 píxeles. Pero la forma en que se diseña ese patrón o se diseñó ese archivo, se vuelve sin fisuras cuando lo agranda de 100 píxeles a 1400 píxeles, y se hace automáticamente para usted en función de la forma en que se crea ese archivo. Entonces sigamos adelante y descarguemos uno de estos patrones. Te mostraré cómo instalarlo y gim, y luego empezaremos a trabajar en el color de ese patrón en particular porque, como puedes ver, son mayormente gris oscuro, blanco y negro y en realidad no le tienen ningún color. Pero te voy a mostrar cómo agregar color a ese patrón. Entonces sigamos adelante y descarguemos la ropa de bajo contraste. Entonces o hacer una búsqueda de esto aquí o simplemente Lenin o simplemente lino y general. Adelante y descárgalo, y después tenemos que descomprimir el archivo. Entonces dentro de aquí vas a encontrar tres archivos, léame texto y luego dos archivos para ese patrón. Por lo que este archivo aquí a X el patrón real es el doble de grande. Ese no es el que queremos. El que queremos es éste de aquí. Entonces voy a seguir adelante y arrastrar esto a mi documento para ver de qué tamaño es. Y parece que mide alrededor de 250 por 250 píxeles de altura. Y ahora mismo, no va a ser fácil hacer esto lleno y llenar toda la sección de héroes con este único archivo. Y por eso queremos entrar en nuestros patrones y aplicarlo de esa manera. Entonces si vas a tu herramienta llena de cubo, verás diferentes opciones aquí abajo para rellenar con el primer plano, el fondo y luego un relleno de patrón. Por lo que ya tengo este instalado. Entonces déjame mostrarte cómo instalar esto para que luego puedas aplicarlo con tu herramienta de llenado de cubeta . Por lo que tenemos una carpeta específica en la que necesitamos poner nuestros patrones, y este es el directorio que debes seguir para poder instalar el patrón en gimp. Entonces, ¿quieres acudir a tus usuarios de disco local? ¿ Tu nombre de usuario? AP datos roaming gimp 2.10 y luego patrones. Entonces vas a tomar este archivo que descargaste, vas a la derecha, click y copiar y luego ir a este titular de patrones y pegarlo en. Entonces así es como lo instalas para usuarios de PC. Ahora, si estás en un Mac, vas a ir con los usuarios. Nombre de usuario, aplicaciones de biblioteca, soporte gimp 2.10 y luego patrones. Y luego puedes pegar ese archivo directamente en esta carpeta. Y luego una vez que tengas eso en la carpeta correcta, debes volver a gimp e ir a tu panel de patrones, que se puede acceder mediante diálogos de Windows Doc Kable y luego seleccionando patrones. Vas a conseguir una ventana como esta, y luego quieres hacer clic en este botón de patrones de actualización, el cual actualizará cualquier patrón que hayas añadido a esa carpeta, y luego solo necesitas localizar ese patrón en particular por aquí solo para asegurarte que lo tienes en la carpeta correcta. Entonces el mío está apareciendo aquí mismo, y puedo ver el nombre de ese archivo aquí mismo. Por lo que se ha instalado con éxito. De acuerdo, entonces ahora que ya lo tienes hecho, todo lo que tienes que hacer es crear una nueva capa. Voy a llamarlo fondo héroe, llenarlo de transparencia, luego agarra tu cubo. Herramienta de relleno. Acude a las opciones de tus herramientas. Seleccionar patrón Phil. Haga clic en este ícono. Localice el patrón, selecciónelo y luego podrá llenar ese fondo con ese patrón. Entonces ese es el primer paso para meter tu patrón en tu proyecto de diseño. Ahora necesitamos colorear ese patrón para que no sean esos color gris aburrido llano, y aquí es más de este color naranja, y lo vamos a hacer con una serie de diferentes superposiciones. Entonces sigamos adelante y creemos una nueva capa llamada superposición uno. Vamos a rellenar con este tipo de color naranja brillante en este número HTML aquí mismo, luego seguir adelante y llenarlo con ese color de primer plano. Desea volver a las opciones de sus herramientas y asegurarse de que tiene seleccionado relleno de color de primer plano . Ahora necesitamos cambiar el modo de fusión de esta capa demasiado suave, ligera y También queremos cambiar la opacidad de la capa de fondo para que podamos hacerla mucho más ligera. No lo quiero tan oscuro. Entonces en este caso, voy a hacer 90 y voy a crear otra superposición llamada superposición a la voy a llenarla con el mismo color. Y esto me va a permitir que este color sea mucho más brillante de lo que es ahora mismo . Entonces vamos a hacer el mismo modo de mezcla, una luz suave, y esta vez vamos a bajar la opacidad a 30. Entonces, con solo agregar la segunda superposición, podemos hacer que ese color sea mucho más brillante de lo que era con una sola superposición. Por lo que cuando estás mezclando en tus colores con tus patrones, puedes experimentar y probar diferentes configuraciones de capacidad así como diferentes modos de fusión para llegar a diferentes esquemas de color y diferentes efectos eligiendo diferentes modos de fusión y diferentes capacidades. Entonces eso es algo con lo que vas a tener que experimentar por tu cuenta, para ver cómo puedes llegar a diferentes tipos de colores e intensidades de esos colores. Pero este es el esquema de colores que vamos a usar para nuestro fondo de héroe por ahora. Entonces, una vez que hayas hecho esto, seguiremos adelante y empezaremos a crear el deslizador en el siguiente tutorial. Si estás listo para eso, hagámoslo. 79. Hero parte 2: Hola y bienvenidos de nuevo. Muy bien, así que este es el momento que has estado esperando toda tu vida. Bueno, tal vez no tanto tiempo, pero ahora por fin vamos a empezar a trabajar en crear nuestro slider retro. Entonces sigamos adelante y empecemos. Probablemente vamos a dividir esto en dos partes porque va a llevar bastante tiempo crear todos los diferentes elementos que necesitamos para el deslizador. Entonces sigamos adelante y empecemos creando nuestro fondo para el deslizador. Entonces vamos a crear un nuevo S e anterior Voy a tomar estas capas y agruparlas para sacarlas del camino. Vamos a llamarlo fondo de héroe. Ahora te habrás dado cuenta una vez que ponemos estas tres capas, cualquier capa de grupo, el color y la capacidad del fondo general ha cambiado. Y eso se debe a que los modos de fusión no necesariamente funcionan como antes, porque no tenemos esta capa de fondo ahí también. Entonces una vez que ponemos eso ahí dentro, entonces obtenemos el resultado que queremos. Pero no necesariamente queremos poner la capa de fondo en este grupo la capa porque va a haber otras secciones por debajo de esto, y van a estar ocultas. Entonces vamos a deshacer eso con Commander Control y la letra Z. Entonces la solución a eso es agarrar a tu grupo de fondo héroe retrasador subiendo al modo de fusión y luego seleccionar pasado. Entonces eso va a pasar todos los elementos dentro de este grupo. Capa a través de ella para que la capa de fondo se aplique de la manera que la queramos con las otras capas. También definamos la altura de nuestra sección de héroes arrastrando una pauta a 700 y también necesitamos contener nuestro fondo aquí a esa altura también. Entonces agarremos nuestra herramienta de selección de rectángulo y creemos una selección en esa área. Y luego vamos a añadir una máscara de capa a la capa agrupada de fondo héroe. Asegúrate de tener selección seleccionada en click Añadir Que de Select with Commander Control Andy y apaga tus guías. De acuerdo, ahora podemos seguir adelante y empezar con el deslizador, así que lo primero que quiero hacer es crear un nuevo fondo llamado fondo más ligero. Y hagamos que el tamaño de ese fondo ocho columnas de ancho. Entonces, en realidad, solo sigamos adelante y tecleemos las dimensiones, que es 775 por 4 75 Va a mover esto aquí arriba, así que está a un lado de la sección de héroes, y luego vamos a agarrar un color crema claro aquí. Este es el hex, un número decimal que seleccioné. Así que adelante, teclea eso y luego adelante y llénelo. Muy bien, ahora necesitamos recortar el límite de la capa para que podamos hacerlo con Shift Plus C. Hagamos una selección alrededor de nuestra sección de héroes y elijamos nuestra capa de fondo con nuestra herramienta cojo it, y luego podemos alinearnos con el centro y medio del objetivo. A continuación, quiero crear un marcador de posición de imagen que vaya a actuar como nuestra guía para dimensionar las imágenes de nuestros productos para que podamos crear una nueva capa llamada Marcador de posición de imagen. Y luego, para este lo vamos a dimensionar 7 20 por 3 60 y vamos a seguir adelante y llenarlo negro, y no olvidemos recortar también el contenido. Turno más C. Así que sigamos adelante y midamos una cantidad específica de espaciado para la parte superior, y luego la alinearemos al centro. Entonces voy a hacer 20 píxeles por el espaciado en la parte superior. Y luego qué? Su herramienta de alineación. Vamos a seguir adelante y seleccionar nuestro fondo, luego cambiar haga clic en el marcador de posición de la imagen, cambiarlo a primer elemento y luego a un centro de línea de objetivo. Vamos a sumar en nuestra imagen en esto en un minuto. Yo solo quiero agregar algunos otros elementos primero. De acuerdo, ahora vamos a crear nuestro botón de compra. Agarremos nuestra herramienta de elipse, hagamos una selección. Vamos a tamaño 1 25 por 1 25 Vamos a crear también una nueva capa para ella, y luego vamos a llenarla con un color gris oscuro. Entonces voy a usar este color aquí. Adelante y llénalo ahora, antes de que de select. Lo que quiero hacer es añadir un trazo a su alrededor, que va a ser del mismo color que su fondo, y eso nos va a dar un efecto donde va a parecer que está recortando parte de la imagen. Por lo que vamos a subir a editar selección de trazos selectos. Probemos cuatro, y también necesitamos asegurarnos de que tenemos ese color seleccionado. Así que usa tu herramienta cuentagotas para dar click en el fondo para obtener ese color y luego adelante y haz clic en Stroke de Select with Commander Control y la letra D. Así que ahí está nuestro por moño que se ve bastante cool. Y como dije, sí parece que está recortando esa parte de la imagen, Así que eso es bastante guay. Está bien, sigamos adelante y golpeemos Shift más C para recortar el límite de Lear. Añadamos algo de texto aquí en el lado izquierdo, y esto representará la condición del cartel. Entonces voy a usar una fuente grande, y vamos a usar Oswald bold y vamos a ponerla en 60 para el tamaño y luego son de color gris oscuro . Entonces en todos los gorros, voy a hacer significados, y entonces sólo podemos seguir adelante y mover esto hacia arriba, y quiero asegurarme de que esté alineado al lado izquierdo de nuestra imagen Placeholder. Entonces el límite de la capa es una línea a ella, pero quiero que la letra real esté alineada a ella, así que la voy a colocar justo ahí. También lo voy a alinear arriba abajo también. Ahora de nuevo, sí tenemos más espacio aparece en el límite de la capa versus aquí abajo. Pero si tocamos turno más C, eso recortará el límite de la capa hasta el texto. Entonces esta es una forma más eficiente y más rápida, frente a la forma en que te he enseñado anteriormente. A pesar de que funciona, es menos eficiente. Por lo que siempre intenta usar el recorte a contenido para recortar el límite de la capa a los píxeles de esa capa. Por lo que ahora podemos usar nuestra herramienta de selección de rectángulos, hacer nuestra selección y luego seleccionar menta con tu herramienta Lima. Tenemos que volver a la selección y a una línea media de objetivos. De acuerdo, vamos de seleccionar y vamos a seguir adelante y alejar de nuevo. Voy a seguir adelante y guardar esto con Commander Control y la letra s. Vamos a seguir adelante y encender nuestras rejillas porque lo que quiero hacer es que quiero crear un párrafo aquí mismo que va a ser la descripción de este producto en particular. Por lo que quiero que sea un tamaño específico cuatro columnas de ancho por 56 píxeles de alto. Entonces vamos a crear una nueva forma para definir el tamaño de ese cuadro de texto. Voy a llamar a un cuadro descriptivo, y luego vamos a teclear 56. Por la altura, voy a seguir adelante y llenarlo con Gris Oscuro. Realmente no importa, porque vamos a estar borrando esto más adelante. Así que adelante y de Select Commander Control y la letra D. Y vamos adelante y una línea esta arriba la parte inferior de nuestro slider. Entonces aquí mismo. Y asegúrate de recortar el límite de la capa también con shift plus C, y luego puedes seleccionar esa capa y alinearla en medio del objetivo. De acuerdo, Comandante Control nd a de selecto. Vamos a sumar la información o la descripción en tan solo un segundo, y lo haremos después de que tengamos nuestra imagen. Yo solo primero quiero trabajar en un par de otros elementos primero. Entonces agreguemos nuestro texto para nuestra compra ahora, botón. Entonces para este, voy a usar una fuente llamada placa de cobre, y es un tipo retro de peleada, y puedes descargar esto de forma gratuita solo haciendo una búsqueda en Google de fuentes de placa de cobre, fuentes gratuitas. Y si no tienes esto ya instalado puedes seguir adelante y encontrarlo, descargarlo, instalarlo, reiniciar campamento y luego volver y vamos a seguir adelante y añadir en nuestro por ahora texto para el tamaño voy a hacer 30 y el peso del color. Por lo que la primera letra es mayúscula y luego minúscula para los dos siguientes. Lo mismo con ahora. A pesar de que parece que todos son mayúsculas, todavía hay un poco más pequeño frente a las primeras letras que se definen como una letra mayúscula . De acuerdo, voy a seguir adelante y hacer esto audaz, así que voy a seleccionarlos todos y dar clic en Bold aquí mismo. Vamos también adelante y una línea esto al centro, y creo que quiero aumentar la cantidad de interlineado. Entonces voy a probar 0.5. Haga clic en el techie. Eso no es suficiente. Entonces 1.5 2.5 Probemos cuatro. Y creo que eso es bueno ahí mismo. Entonces cuatro para el espaciado de líneas. adelante y coloquemos esto directamente en el centro de nuestro botón, así que voy a mover esta postura para que esté por encima del botón comprar ahora y luego seleccione su círculo con la herramienta de alineación y luego el texto y una línea del dedo del pie. Primer artículo. Vamos a seguir adelante y crear un nuevo grupo anterior para nuestra compra. Ahora, botón. Muy bien, sigamos adelante y creemos nuestros botones de navegación a ambos lados de su más ligero. De acuerdo, voy a seguir adelante y desplazarme aquí abajo y seleccionar la capa agrupada de fondo héroe porque quiero que estas capas estén detrás de nuestro deslizador. Entonces voy a llamar a esta navegación izquierda, y luego vamos a usar nuestra herramienta de elipse para crear un botón que es 65 por 65. También lo vamos a llenar con un color crema, pero quiero que sea más oscuro de lo que está el deslizador ahora mismo. Por lo que destaca un poco más Así por el color. Voy a hacer lo siguiente f seis e d. nueve. Adelante y toma eso, y luego sigue adelante y llena ese color, y luego podemos de seleccionar, por lo que es muy similar. Pero si acercamos aquí, se puede ver que es un poco más oscuro. También vamos a añadir una sombra gota en el segundo dedo del pie, ayúdala a destaque solo un poquito más Así que sigamos adelante y colocamos esto para que la mitad del círculo se esconda detrás del deslizador. Por lo que la forma más fácil de descifrar eso es encender nuestras guías y hacer una medición de la mitad de ese círculo. Entonces hicimos 65 así que 32 píxeles deberían ser aproximadamente la mitad. Entonces parece que quiero un poco demasiado lejos. Voy a poner esta guía aquí mismo. También voy a recortar el límite de la capa con Shift más C y luego lo vamos a mover a esa zona que acabamos de medir. De acuerdo, deja guías de Haider. Y ahora necesitamos crear una flecha apuntando hacia la izquierda. Entonces para hacer eso, vamos a usar nuestro rectángulo seleccionable. Vamos a crear un rectángulo que sea 19 por 19. Voy a seleccionar ese color naranja que utilizamos previamente para el fondo. Vamos a crear una nueva capa llamada Errol izquierda y luego adelante y llenarla. Adelante y de Select Commander Control y D y vamos a cosechar. El límite posterior fue enviado más C. No puedo ver el color en este momento, y eso se debe a que la capa está detrás del deslizador. Entonces necesito seguir adelante y mover esto por aquí de todos modos, Así que sólo voy a agarrar esto con mi movimiento y capa activa seleccionada, y ahora podemos ver el naranja. Muy bien, vamos a seguir adelante y duplicar esta capa. Adelante y acerquemos realmente de cerca. Muy bien, Ahora vamos a tomar una medida de nuevo porque quiero mover esta capa actual hacia abajo a los tres píxeles correctos. Entonces tomemos nuestra herramienta de medición y midamos tres píxeles. Añadamos una guía aquí y luego bajamos tres píxeles y otra guía. Y ahora con nuestra herramienta de movimiento, queremos moverla justo a esa zona. Vamos a seguir adelante y crear un nuevo grupo de capas. Llamémoslo Flecha izquierda. Vamos a colocar ambos dentro. Voy a llamar a esta flecha izquierda, cortar, y luego tenemos que cambiar el modo de mezcla para cortar ese cuadrado. Entonces vayamos al modo de mezcla y seleccionemos color o raza. De acuerdo, Ahora podemos tomar esta flecha izquierda y girarla 45 grados, por lo que apunta a la izquierda. Entonces vamos a agarrar nuestra herramienta de rotación, que está justo aquí y mi atajo de teclado para eso es Commander Control y la letra T y luego para el ángulo necesitamos escribir 45. Desafortunadamente, eso lo va a hacer puntualmente. Así que intentemos menos 45 Click Tab. Y ahí vamos, nuestras flechas apuntando ahora en la dirección correcta. Adelante y haz click, Girar y luego solo voy a mover manualmente esto a la posición para que pueda hacerlo bien en el centro. Veamos si podemos usar nuestras herramientas de alineación para conseguir que eso se alinee de arriba a abajo. Voy a agarrar mi herramienta de iluminación y voy a dar clic en el cambio de botón, clic en la flecha y luego un primer elemento del dedo del pie acostado, que sería medio del objetivo. Entonces eso lo alinea. Voy a seguir adelante y agarrar mi herramienta de movimiento ahora Y sólo me voy a mover hacia la izquierda Un par de clics y creo que eso se ve bien ahí mismo. Adelante y aleje para poder echar un vistazo rápido a lo que tenemos hasta ahora. Entonces eso se ve bastante bien. Quizá quiera hacer esa flecha un poco más grande. Entonces lo que puedo hacer es, puedo volver a acercar. Y ahora con tu herramienta de movimiento. Simplemente haz clic en esa capa y usa tu tecla de flecha derecha para moverla sobre un píxel a la vez hasta que estés contento con el grosor de esa flecha. Entonces voy a ir a pixeles más a la derecha. Adelante y alejémonos y echémosle un vistazo, y creo que eso se ve mucho mejor. Entonces voy a seguir adelante y dejar el mío así. Puedes hacer lo que creas que se ve mejor. Ahora necesitamos tomar esta navegación y ponerla en un nuevo grupo de capas llamado Errol Izquierdo. Vamos a duplicarlo y renombrarlo. Y eso es correcto. Vamos a renombrarlo flecha derecha. Adelante y una guía para la parte superior de este botón aquí para que podamos alinearlo aquí en el lado derecho también. De acuerdo, solo voy a agarrar el mío. Mover, Herramienta, Asegúrate de tener seleccionadas las capas activas, y lo voy a mover por aquí hacia el lado derecho. Está bien. Está bien. Sigamos adelante y midamos 36 píxeles para asegurarnos de que tengamos suficiente del botón mostrando no se vea como yo. Voy a seguir adelante y colocar un guía ahí mismo y luego simplemente moverlo a su posición. El único problema es que no podemos ver la flecha. Entonces para arreglar eso, solo necesitamos voltear la capa horizontalmente. Así que sube a capa, selecciona, transforma y luego elige voltear horizontalmente. Su odio. Ahora que nuestra navegación está hecha, sigamos adelante y pongamos esos dos botones y un nuevo grupo de capas llamado Slider Navigation. Adelante y guardarlo de nuevo, Comandante Control y la letra s Así tenemos la mayoría de los elementos para nuestro slider. Simplemente tenemos algunos elementos gráficos para agregar aquí. Un párrafo, nuestra imagen y luego se hará. Entonces sigamos adelante y terminemos el resto del slider en el siguiente tutorial. 80. Hero parte 3: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y terminar nuestro slider y vamos a seguir adelante y añadir nuestra imagen de producto . Vamos a hacer una búsqueda de imagen en Google para la última A sonando ella monstruo, y vamos a seleccionar esta aquí mismo. Es 7 40 por 5 60 Vamos a seguir adelante y copiar esa imagen y pegarla en. Asegúrate de tomar esta capa y ponerla a nueva antes y luego desplázate hacia arriba con esa capa. Entonces está por encima de todo lo demás, y luego solo vamos a usar nuestra herramienta de movimiento para ponerla en posición, pero también soltar la opacidad hacia abajo para que podamos ver el positor de imagen detrás de ella, lo que nos permitirá recortar la imagen o compuso el imagen exactamente de la manera que queremos. Simplemente voy a mover esto hacia abajo y hacia la derecha un poco, tal vez hacia abajo un poco más ahí y luego volvamos al 100% en la opacidad y luego voy a agarrar mi imagen Placeholder. adelante y pongamos eso debajo de la capa de imagen y te voy a mostrar una forma un poco diferente de recortar tu imagen a un tamaño específico. Entonces como ya creamos un marcador de posición de imagen con el tamaño exacto que queremos, ahora necesitamos hacer una selección con él. Por lo que podemos hacer clic derecho en esta capa y seleccionar Alfa a la selección, y eso va a aplicar automáticamente una selección alrededor de esa forma. Ahora podemos ir a nuestra capa de imagen y añadir una máscara de capa basada en la selección, y recortará la imagen de esa manera. Entonces esa es solo otra forma de hacerlo frente a cómo lo hemos hecho en el pasado. Voy a seguir adelante y crear un nuevo grupo de capas para estas dos capas llamado Imagen, y vamos a seguir adelante y moverlo hacia abajo para que esté abajo están por botón aquí. Muy bien, vamos a obtener nuestra descripción para nuestro cuadro de texto. Volvamos a las imágenes de Google y pinchemos en visita, así que solo vamos a ver si aquí hay una descripción que podamos utilizar en base a este cartel en particular. Ahora sólo podríamos usar cualquier cosa o usar impuesto ficticio, pero solo quiero entrar aquí y ver si puedo encontrar una descripción de este póster para que esto funcione solo voy a agarrar este texto aquí en este primer párrafo. Copiarlo. Vamos a entrar en nuestro documento aquí, y voy a acercarme, agarrar tu herramienta de texto, y también vamos a encender nuestras cuadrículas sólo para guiarnos un poco. De acuerdo, vamos a seguir adelante y crear nuestro cuadro de texto Nail. Pero primero, con nuestro textil seleccionado, asegúrate de teclear la familia de fuentes, que es ferroviaria. El tamaño es 14 y luego el color es gris oscuro. Ahora podemos seguir adelante y crear nuestro cuadro de texto y hacer que sea del tamaño de esa forma y luego seguir adelante y pegar en esa información que copiaste anteriormente. De acuerdo, sigamos adelante y apaguemos nuestro cuadro de texto aquí para que realmente podamos ver nuestro texto. Y creo que necesito alinear esto a la izquierda. Entonces voy a seguir adelante y seleccionar todo alinearlo. Y creo que aún tenemos nuestro espaciado de líneas encendido. Yo sí. Tengo cuatro y creo que eso es demasiado. En realidad voy a bajar esto a una y luego golpear tu llave de escape para salir de ella . Y ahora tenemos nuestro párrafo o nuestra descripción. Entremos aquí y modifiquemos o párrafo un poco. Voy a seguir adelante y añadir tres puntos porque lo que quiero hacer es crear puntería o enlace aquí mismo . Entonces en todas las mayúsculas, sólo voy a escribir mawr, y luego podemos hacer doble clic en esa palabra, y en realidad podemos entrar y cambiar el color de sólo esa palabra. Voy a elegir este color naranja, y también quiero agregarle un subyacente para representar un enlace. También quiero agregar algunos gráficos aquí solo para especie de darle una sensación de tipo más retro agregando tres líneas. Entonces sigamos adelante y empecemos a organizar algunas de estas capas aquí, y voy a seguir adelante y tomar mi cuadro descriptivo y eliminarlo porque ya no necesito más. Y luego voy a crear una nueva capa de grupo para mi contenido. Está bien. Creo que todo lo demás es bastante bueno. Los pondrá a todos en una nueva capa de grupo llamada Héroe al final. Entonces sigamos adelante y sumamos aquí nuestros elementos gráficos. Ahora voy a crear una nueva línea fría de capa y luego, por el tamaño que vamos a hacer para el con y 50 para la altura. Agarremos nuestro color azul y sigamos adelante y llenarlo en que de select. Vamos a seguir adelante y mover este sobre un poco y recortar el contenido con turno más c. Está bien, vamos a crear dos líneas más, pero un poco más pequeñas a cada lado. Por lo que los próximos van a ser lo mismo con así también. Y entonces la altura va a ser de 35. Así que adelante y crea dos líneas más. En realidad, podríamos simplemente duplicar este, y entonces sólo necesitamos alinear todo. Simplemente voy a mover éste un poco, y voy a seguir adelante y arrastrar hacia fuera una pauta para que pueda alinear estos a la parte superior. Hagamos una selección re aquí, y quiero seleccionar la capa media con mi herramienta de alineación para poder alinearla al centro de esa selección. También necesito hacer lo mismo para nuestra línea media aquí. Parece que está apagado por un píxel. Entonces solo voy a moverlo hacia arriba con mi tecla de flecha izquierda y luego voy a hacer clic derecho en la capa superior aquí y fusionarme para combinar todas estas y 21 capas. Ya no los necesito individualmente. Sigamos adelante y volvamos a encender todo lo demás, y entonces sólo necesitamos alinearlo dentro de este espacio aquí. Entonces sigamos adelante y hagamos nuestra selección. Por lo que quiero centrarlo directamente en el centro, pero puede que tenga que apagar de nuevo estas otras capas. Agarramos nuestra herramienta de límite. Haga clic en el gráfico con su herramienta de alineación. Asegúrese de tener seleccionada la selección y luego alinear el centro y el medio del objetivo. Adelante y diesel I y luego sigamos adelante y volvamos a encender las otras capas. Adelante y alejemos el zoom. Entonces lo último que quiero hacer es y un poco de profundidad al deslizador general, y lo vamos a hacer agregando una sombra de gota. Quiero agregar una sombra de gota para los botones de navegación por separado del propio deslizador de fondo , porque sí quiero soltar sombra pasando por encima de esos botones también. Adelante y empecemos con nuestros botones de navegación, y si los seleccionamos y subimos a filtros, luces y sombras. Podemos agregarle una sombra de gota. Y la razón por la cual es porque podemos agregar una sombra de gota a las capas agrupadas. Por lo que necesitamos entrar y encontrar los botones reales ellos mismos y luego aplicarles una sombra de gota . Y, por supuesto, necesitamos cambiar el límite de la capa para que se ajuste al tamaño de la imagen para que podamos agregar esa sombra de gota . Ahora puedo subir a filtros, luz y sombra, soltar sombra y crear mi sombra de gota. Así que sigamos adelante y juguemos con algunos ajustes aquí hasta que encontremos una sombra de gota con la que estamos contentos. A mí me gusta eso de ahí. Entonces voy a seguir adelante y hacer clic, OK, y luego vamos a agarrar este botón aquí. Lo mismo capa capa capa dos tamaño de imagen y luego comando o control más F para volver a aplicar esa sombra de caída de nuevo. Muy bien, ahora solo necesitamos seguir adelante y encontrar la capa de fondo de nuestro deslizador y aplicarle también la sombra de gota . Pero primero necesitamos subir a capa y capa seleccionada a tamaño de imagen y luego comando o control y f para aplicar la sombra de caída. Está bien, sigamos adelante y pongamos todo en un nuevo grupo de capas frío. Eso es, héroe. Por lo que tenemos nuestro color de fondo cambiando de nuevo porque ponemos esa capa de grupo dentro de un nuevo jugador de grupo. Por lo que solo vamos a seleccionar a nuestro grupo de héroes Capa y Seleccionar pasado para el modo de fusión, y eso nos arreglará el fondo y felicitaciones. Ahora tenemos nuestro slider retro completado. Ahora necesitamos trabajar en la sección de comercio electrónico de nuestra página web, y seguiremos adelante y empezaremos con eso en el siguiente tutorial. 81. Cuerpo parte 1: Hola y bienvenidos de nuevo. Muy bien, ahora vamos a trabajar en nuestra sección de comercio electrónico para esta página web, y vamos a crear nuestro fondo y algunos de nuestros botones de filtro, y luego lo terminaremos en el siguiente tutorial. Entonces sigamos adelante y trabajemos primero en nuestros antecedentes. Pero en realidad, necesitamos aumentar el tamaño del campus. Subiremos a ojos de campus de imagen y aumentémoslo a 3000. También vamos a agarrar nuestra capa de fondo aquí e ir a capa y seleccionar capa a tamaño de imagen. Ahora, ahora mismo, no puedo seleccionarlo. Y eso es porque mi capa de fondo es mucho. Entonces si el tuyo también está bloqueado, adelante y desbloquea y luego aumenta el tamaño del límite. Agarra tu color blanco para rellenar el resto del fondo. Muy bien, ahora necesitamos entrar y agregar nuestro patrón así como nuestros nuevos colores. Entonces voy a seguir adelante y sólo entrar en nuestra capa de grupo de fondo de héroe y seleccionar esta capa para duplicarla. Y entonces sigamos adelante y saquemos esta cámara. Adelante y mueve el mío aquí abajo, así que lo primero que tenemos que hacer es eliminar esta máscara de capa, y podemos hacerlo haciendo clic derecho y seleccionando Eliminar máscara de capa. De acuerdo, puedes seguir adelante y mover esto a la posición ahora, y también necesitamos aumentar el tamaño del límite de capa para cada capa. Entonces hagamos eso para cada una de las superposiciones y para el patrón también. Por lo que capa tamaño de imagen en capas. Agarramos nuestra herramienta de relleno de cubeta. Seleccionemos nuestro patrón y sigamos adelante y llenarlo. Y ahora necesitamos seleccionar las superposiciones de color para poder agregar un nuevo color a cada capa, y vamos a usar este color azul aquí. Así que adelante y agarra eso y luego adelante y rellena eso con el nuevo color. Ahora que nuestros antecedentes están hechos, podemos seguir adelante y trabajar en nuestros botones de filtro. Empecemos con nuestra herramienta de texto. Vamos a establecer la fuente en Oswald y 24 después blanco para el color. De acuerdo, vamos a teclear filtro ya, vamos a seguir adelante y crear cuatro botones nuevos. El 1er 1 va a ser el botón uno, y luego por el tamaño vamos a hacer 95 por 45. Pero primero agreguemos una esquina redondeada de 10 y luego el tamaño de nuevo es de 95 por 45. Y luego vamos a llenar eso con nuestro color gris oscuro. Adelante y de selecto y sigamos adelante y duplicamos tres veces. Ahora sigamos adelante y los cultivos están contentos con turno más C para cada capa. Vamos adelante y un león y repartimos las capas. Por lo que herramienta de alineación. Apagemos aquí nuestra sección de héroes y luego cambiemos. Haga clic en los otros botones. Alinémonos con el primer elemento a la parte superior, y luego necesitamos distribuir el espacio entre ellos. Entonces ahora mismo tengo 3 50 que es demasiado. Voy a probar 150 Quiero hacer menos que eso. Probemos 100. No lo suficiente hacer 1 40 y 1 25 Parece la mejor opción. Ahora solo necesitamos agregar algunos títulos para nuestros botones. Por lo que volver a la herramienta de texto, misma fuente, mismo tamaño, solo hay que cambiarlo dedo atrás. Caso blanco de lo último que necesitamos hacer es alinear todo a los botones y luego solo necesitamos organizar nuestras capas. Por lo que para el contenido, voy a recortar el contenido con turno más C para cada capa. Ahora puede que hayas notado que cuando haces eso, cambia el texto de una capa de texto a una capa de píxel. Entonces si quiero entrar ahí y cambiar la ortografía o la fuente o el tamaño y hago clic en ella, entonces necesito confirmar que quiero volver a cambiarla a edición de texto, y puedo hacerlo en una capa nueva o directamente en esa capa. Por lo que sigue siendo una buena idea recortar tu contenido para tu texto de esta manera, porque siempre puedes volver a esa capa de texto para actualizarla si es necesario. Simplemente hace que sea más fácil recortar el contenido de esta manera para que pueda alinearlo fácilmente según sea necesario. Por lo que volver a la herramienta de alineación y alineado al primer elemento. También necesitamos tomar una medida de la cantidad de espacio entre aquí y el cabello para que podamos sumarlo aquí también . Así que adelante y mide. Tengo 40 pixeles. Ahora que nuestros botones se hacen al aire, solo necesitamos agregar nuestros productos para esta parte de nuestro diseño de página, y vamos a seguir adelante y descargar esas imágenes en la siguiente lección y ponerlas configuradas para que se vea más así . 82. Cuerpo parte 2: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y terminar la sección de comercio electrónico y necesitamos ocho imágenes para llenar esta sección. Así que adelante y haz una búsqueda de imagen de Google para carteles de películas antiguas. Se prefiere vertical. Agréguelos a tu documento, y luego podrás seguir adelante y redimensionarlos en un minuto. Una vez añadimos el marcador de posición de la imagen, y luego sabrás qué tamaño reducirlos también. Entonces sigamos adelante y trabajemos en nuestro 1er 1 y vamos a empezar creando un fondo para el listado de productos. Entonces vamos a crear una nueva capa llamada Producto uno. Y luego por el tamaño que vamos a hacer al 76 por 450 y luego vamos a llenarlo con nuestro color crema claro. Adelante y haz click, OK y llénalo. De acuerdo, vamos de seleccionar y vamos también a encender nuestra grilla por el momento. Y si pasamos esto, vas a notar que tiene exactamente tres columnas de ancho, lo que nos permitirá puntera agregar cuatro productos diferentes. Muy bien, vamos a seguir adelante y recortar el cambio de contenido, más C. Ahora vamos a seguir adelante y crear un marcador de posición de imagen igual que lo hicimos para el deslizador anteriormente. Y luego por el tamaño, vamos a hacer 2 30 por 3 20 y vamos a llenarlo con Black. Por lo que golpeo D y luego agarro tu herramienta de llenado de cubeta con G Phil Iden y de Select Que Shift más C para recortar el contenido y luego moverlo a su posición. Va a subir un poco la mía, y voy a tomar una medida aquí. Entonces estoy a 18 píxeles, así que adelante y mueve los tuyos. Entonces tienes un espacio de 18 desde la parte superior, y luego vamos a usar nuestra puntera de herramienta de alineación, alinearla al centro, a la izquierda y a la derecha de nuestra imagen de fondo. Entonces, adelante y haz eso. De acuerdo, sigamos adelante y hagamos nuestro botón por clavo. Agarra tu herramienta de selección, y luego , por el tamaño, vamos a hacer 95 por 95 y también necesitamos crear una nueva capa para ello. Agarremos nuestro color gris oscuro y sigamos adelante y llenarlo. Ahora, antes de que d seleccione, necesitamos subir y agregar un trazo. Entonces en ello la selección de trazos, vamos a hacer cuatro píxeles, y también necesito elegir mi color. Así que agarra aquí tu herramienta de selección de ojos, asegúrate de seleccionar el color de fondo haz clic en Aceptar y tu trazo, y luego podemos seguir adelante y mover esto hacia la derecha de select y luego cambiar. Plus C. Añadamos nuestro texto para esa compra. Ahora botón. Vamos a utilizar Placa de Cobre 26 para el tamaño y blanco. También centremos el texto, y luego usemos tu herramienta de alineación para alinear ese texto. Vamos a seguir adelante y ponerlo en el nuevo grupo de capas. Vamos a crear nuestro título para este cartel en particular, y quiero cambiar la fuente a Oswald, y luego vamos a hacer 18 por el tamaño y vamos a volver a nuestro color gris oscuro. Entonces para el título, sólo voy a escribir un título que coincida con el póster de la película para este producto en particular. Por lo que el tuyo puede ser diferente, dependiendo del póster que hayas descargado, así que solo sigue adelante y escribe un título para ello. De acuerdo, vamos a hacer Railway Bold y 12 por el tamaño y ahora solo voy a escribir las dimensiones de ese póster de película así como un precio. Creo que voy a cambiar esa fuente. Yo quiero que sea mucho más oscuro, así que voy a elegir Ultra Bold. Y luego voy a volver al título y ver si puedo encontrar una fuente diferente o una fuente más ligera . Probemos la luz Oswald. De acuerdo, eso me gusta mucho más porque eso agrega importancia a las dimensiones en el precio más que al propio título. Entonces sólo recuerda, queremos asegurarnos de que los elementos específicos del texto sean de estilo correctamente, para que un título o subtítulo fuera más importante que el otro. De esa manera es más fácil de leer. ¿ Esto puede seguir adelante y ahorrar con Commander Control y la letra s? Ahora vamos a crear un botón aquí abajo también. Eso les va a dar la oportunidad de conocer más sobre ese póster de película específico. Entonces tecleemos más info y hagamos de nuevo placa de cobre para la fuente y 18 para el tamaño. Muy bien, vamos a seguir adelante y crear una nueva capa para el botón más información, y luego vamos a añadir esquinas redondeadas. Hagamos 10 para el radio y luego hasta donde las señales iban a hacer 1 15 por 30 y vamos a llenar eso con un color gris claro, así que voy a usar F uno F uno F un clic OK, y luego seguir adelante y llenar eso en De Select Comandante Control y la letra D. En realidad hagamos un poco más pequeño este texto, porque lo que quiero hacer es que quiero crear una sombra interior. Entonces ya te lo he mostrado antes. Cómo el dedo del pie agrega una sombra gota. Pero crear una sombra interior no es una opción a través de las herramientas en sí, así que tenemos que ser un poco creativos sobre cómo hacemos eso. Entonces solo quiero asegurarme de que la sombra interior no esté pasando por encima de nuestro texto en sí. Entonces quiero hacer 14 desde la talla, y voy a seguir adelante y alinearlo también. Así que volvamos a nuestro cambio de botón más información más C para escalar el límite de la capa, y luego usaremos nuestra herramienta de alineación para alinear el texto. De acuerdo, sigamos adelante y creemos nuestra sombra interior ahora. Entonces básicamente todo lo que vamos a hacer es crear otro botón del mismo tamaño y un color más oscuro , y luego vamos a cortarlo y luego desenfocar los bordes. Entonces vamos a seguir adelante y crear una nueva capa fue Llamarlo en su sombra y luego vamos a usar el mismo tamaño y el mismo radio 1 15 por 30. Y luego vamos a golpear D. Agarra tu herramienta de cubo con G y llénala de negro y de selecto. Sigamos adelante y movamos esto una y otra vez detrás del otro botón. Entonces eso es del tamaño que quiero para mi sombra interior. Entonces ahora lo que tenemos que hacer es hacer una selección. Por lo que vamos a ir a nuestro botón más info, click derecho y seleccionar Alfa a la selección. Vuelve atrás y selecciona tu sombra interior, y luego vas a hacer un corte así comando o control y X, o puedes subir a editar y seleccionar Cortar desde aquí, que de select Commander Control y D. Ahora vamos a mover nuestro sombra interna de nuevo arriba más info shift plus C para recortarlo y luego agarrar tu herramienta de movimiento y colocarla encima de ese otro botón. De acuerdo, ahora vamos a subir a filtros, desenfoque y seleccionar ghazi en Desenfoque. Entonces a partir de aquí, puedes ajustar la configuración de todos modos, te gusta. Y solo voy a usar estos ajustes aquí mismo, que creo que son los predeterminados. 1.5 y 1.5 click. OK, ahora, eso está un poco demasiado oscuro para mí. Entonces voy a agarrar mi opacidad y dejar caer eso. Entonces en este momento, parece que necesito subirlo un píxel. Entonces voy a agarrar mi herramienta de movimiento, seleccionar la capa, y luego moverla hacia arriba un píxel. Y ahora solo necesito limpiar un poco los bordes para que tenga una esquina más redondeada aquí y por aquí también. Entonces solo voy a acercarme aquí, agarrar el agarre de sombra interior, podría herramienta de borrador con la letra e. Y entonces sólo voy a borrar algunos de estos píxeles. Eso podría haber sido demasiado. Entonces voy a deshacer eso con Commander Control y las letras e y luego rehacerlo. También necesito hacer este sitio también, y creo que quiero dejar caer la opacidad un poco más. Entonces ahí mismo. Adelante y agarremos nuestra herramienta de zoom. Presione la tecla de comando o control para que pueda alejar y luego simplemente siga adelante y seleccione cualquier otra capa y su ego. Ahora tienes un castillo interior. Entonces lo último que necesitamos hacer es agregar nuestra imagen al marcador de posición. Entonces encuentra tu imagen. Colóquelo encima del marcador de posición de la imagen. Muévelo a su posición. Seleccione el marcador de posición de la imagen. Correcto. Haga clic en él. Selecciona Alfa para seleccionar de nuevo a la capa de imagen. Y luego necesitamos recomponer el cartel si es necesario agarrando nuestra herramienta de movimiento con la letra V y haciendo clic en ella. Y luego podemos usar nuestras teclas de flecha para moverlo a su posición. Entonces ahí mismo se ve bien para mí. ¡ Voy a seguir adelante y añadir una máscara de capa y boom! Ahora tengo la imagen recortada exactamente de la manera que la quiero. Está bien, sigamos adelante y limpiemos estas capas aquí. - Entonces lo último que quiero hacer es añadir una sombra de gota en el reverso de nuestra imagen aquí. Entonces vayamos adentro y busquemos el marcador de posición de la imagen, y sigamos adelante y agreguemos una sombra de gota. Pero primero, por supuesto, necesitamos aumentar el tamaño límite posterior, y luego podemos subir a filtros, luz y sombra y añadir una sombra de gota. Está bien, Nuestro primer póster de película está hecho, y lo único que queda es repetir eso siete veces más. Entonces en lugar de verme hacer esto una y otra vez, me gustaría que te tomaras el tiempo para practicar lo que aprendiste agregando los otros siete carteles. Y de hecho, en realidad puedes hacer trampas un poco tomando tu primer póster, duplicándolo y luego moviéndolo a las columnas apropiadas para luego actualizar el contenido. Así que adelante y completa eso como parte de tu encargo. Y cuando termines, estarás listo para terminar este proyecto de diseño Web, que estará completando el pie de página y haciendo cualquier tipo de retoques que podamos encontrar 83. Footer: Hola y bienvenidos de nuevo. Está bien. Ahora que tienes todos tus listados de productos en su lugar, ahora vamos a hacer nuestros retoques finales así como terminar nuestro pie de página soas faras spacing va. Tomé el espaciado entre las dos columnas aquí y añadí eso al fondo de los carteles también. También tomé el espaciado de aquí y lo aplicé aquí. Por lo que ojalá tu sección de comercio electrónico se vea similar a esto. Probablemente tengas diferentes carteles, y eso está bien. También me llevé todos mis carteles y los puse en una nueva capa grupal llamada posters. Y ahora necesito crear una nueva capa de grupo para la sección. Entonces sigamos adelante y hagamos eso si no lo has hecho ya. Ahora vamos a tener la misma situación con nuestros antecedentes que hicimos en la sección anterior , y es decir, una vez que lo pongas en el grupo de capas, el color del mismo va a cambiar. Por lo que voy a seleccionar la capa de grupo de comercio e y seleccionar pasado. Adelante y terminemos nuestro pie de página y luego haremos algunos ajustes finales. Entonces para los iconos sociales, realmente simples, acabo de usar algunos simples iconos sociales en blanco y negro, y probablemente podrías agarrar los de un proyecto anterior y luego simplemente traerlos. Vamos a seguir adelante y crear el pie o fondo, y luego por el tamaño vamos a hacer no esquinas redondeadas llenas con y 210 por la altura . Entonces vamos a llenar eso con nuestro color gris oscuro de select y shift plus C para recortar el contenido. Y luego vamos a seguir adelante y vamos a subir esto y vamos a sumar 40 píxeles de espacio aquí abajo. Ahora podemos seguir adelante y recortar nuestro lienzo en general, así que voy a ir al tamaño del lienzo de imagen y volver a ajustar la altura en consecuencia. Entonces solo voy a agregar alguna información aquí abajo que tenga un aviso de copyright así como algunos enlaces. Y se lo voy a poner a Oswald, 20 y White. Así que adelante y escriba algo para esa parte de la página, y luego simplemente adelante y muévelo a su posición. Vamos a seguir adelante y agarrar nuestra herramienta de selección de rectángulo para que podamos alinear eso al fondo. De acuerdo, solo necesito encontrar mis iconos de redes sociales ahora y alinear esos también. De acuerdo, son pie de página ahora está hecho, y sólo vamos a pasar por aquí muy rápido y hacer un par de ajustes menores. No me gusta cómo está nuestra navegación sentada para palabras al fondo. No es la parte inferior exacta, porque al principio sí alineamos el logotipo de arriba a abajo. Entonces pongamos nuestra navegación en el centro también para ayudar a equilibrarla. Otra cosa que tenemos que hacer para esta página es agregar algunos botones de radio en nuestro deslizador. Nos olvidamos de hacer eso. Entonces solo voy a volver a este proyecto de video costero y agarrar los botones de radio que creamos anteriormente. Por lo que si seleccionas tu herramienta de movimiento con la letra V, entonces haz click en Pick a Layer guide. Una vez que haga clic en él, va a navegar a todos esos círculos de lista de reproducción o botones de radio, y que sólo podemos arrastrar eso a nuestro proyecto actual. Voy a volver a mover la capa activa. Nos sacó de ese jugador de grupo y lo mueve hacia abajo. Actual lo ha puesto dentro de la sección de héroes, que es donde pertenece, así que quiero hacer un par de modificaciones. Quiero hacer el círculo más pequeño y reducir la cantidad de espacio entre ellos. Entonces vamos a escalarlos primero con Shift Plus s cualquier cosa que hacer 1 75 por 16 y quiero cambiar este círculo azul. Dos son de color azul más claro, pero primero necesitamos agarrar la herramienta Ari Lips para crear un nuevo tamaño. Y hagamos 16 por 16. Vamos a crear una nueva capa, y luego vamos a seleccionar ese color azul claro y llenarlo en Commander Control Indy to de Select Shift Plus C, luego de vuelta a nuestra herramienta de movimiento, y luego podemos moverlo a posición aquí. Ahora vamos a agarrar nuestra herramienta Lehman, y en realidad necesitamos sacar todos estos para poder seleccionarlos y luego, con tu cojo una herramienta, selecciona el 1er 1 y luego vamos a cambiar el espacio de distribución entre ellos. Vamos a fijar primer elemento y para el offset. Probemos 25 demasiado. Bajemos esto a 50 demasiado abajo a 25 y solo quiero hacer un poco más. Voy a hacer 35. Y ahí vamos. Adelante y pongámoslos de nuevo en la lista de juegos. Vamos a seguir adelante y seleccionar todo con el control Commander y a y vamos a seguir adelante y alinearlo al centro de selecto y luego seguir adelante y usar tu herramienta de movimiento para moverlo hacia abajo solo un poquito. De acuerdo, sigamos adelante y alejemos el zoom. En realidad quiero mover esos hacia abajo solo un poquito más. Por lo que justo ahí debería de ser bueno. Vamos a crear un nuevo grupo de capas para el pie de página y vamos a ver si necesitamos hacer algún otro ajuste. Y no soy como en el filtro. Al estar aquí arriba en la parte superior, realidad quiero colocarlo en el centro del botón real, así que sigamos adelante y Graham R Selection Tool. Hagamos una selección. Vamos a sacar el filtro, realmente filtrar por, seleccionarlo y luego una línea en medio del objetivo. ¿ Podemos volver a poner eso? A ver si hay algo más que necesitamos dar. Creo que todo lo demás está alineado bastante bien. Voy a encender mis rejillas solo para asegurarme de que todo esté alineado exactamente donde debería estar. Lo único que no me gusta es que el pie de página ahora esté tomando ese patrón también, así que no quiero eso. Quiero un color sólido ahí abajo, Así que en este caso, está bien poner el pie de página por encima de la otra capa de grupo. Ya sabes, lo único que tal vez quiera hacer es tonificar este color naranja del fondo. Entonces vayamos a la sección de héroes y vayamos a las superposiciones, y solo voy a ajustar la opacidad de excesivamente uno a alrededor de 75 solo para tonificarlo un poco. Y definitivamente me gusta mucho más eso. Enhorabuena. Ya terminamos con el Proyecto número seis. Como siempre, termina cualquier retoque y actualización que tengas que hacer para este proyecto en particular y luego adelante y rediseñarlo con tu propia visión creativa para que puedas agregarlo a tu portafolio . Una vez que hayas terminado con eso, te veré en el próximo proyecto, que es el Proyecto número siete. Gracias por escuchar y tener un día impresionante 84. Proyecto 7: resumen de Trek: hola y bienvenidos a nuestro proyecto final de diseño Web. No estés triste, sin embargo. Vamos a aprender muchas cosas geniales en este proyecto. Entonces vamos primero a repasar el sitio web original y luego te mostraré mi diseño Web. Ahora. Lo único que vas a notar sobre este sitio web versus muchas de las otras que hemos hecho es que en general, este sitio web no es tan malo. Entonces, echémosle un vistazo. Es profesional, está limpio. Tiene imágenes mucho mejores que algunos de los otros proyectos en los que hemos trabajado. Tienen un poco de estilo, pero creo que eso podría mejorarse un poco y hacer que sea más fácil leer en general. Entonces les compartiré lo que creo que podemos hacer para que esta parte sea mejor otra vez. Las imágenes no son tan malas. Tenemos algo de espacio vacío por aquí. Está un poco desequilibrado, no es gran cosa. Podemos simplemente deslizar estas cosas hasta aquí. Eso no es nada importante otra vez. Todo está de estilo agradable y ordenado y limpio. Eligieron buenos fondos, por lo que en general es bastante fácil de leer. Pero en realidad podemos hacer que sea un poco más fácil de leer. Tienen alguna prueba social aquí abajo para sumar un poco de credibilidad a la empresa. Preferiría ver esto arriba cerca de la parte superior. Pero de nuevo, si ya tienen una marca fuerte y hay una gran empresa, realidad no necesitan mucha prueba social como empresas menos conocidas Mamá y pops cosas así. Entonces, de cualquier manera, la prueba social podría estar aquí abajo en la parte inferior o podría ser arriba un top, así que vamos a echar un vistazo a eso. Y luego están a pie de página. Nada mayor. Tienen algunos enlaces a otras partes de su sitio Web. Su navegación primaria está abajo. Aquí está bien, tienen algunos iconos sociales. Derechos de autor prueban la política de privacidad, tus cosas típicas en el pie de página. Entonces nada importante en el pie de página otra vez. Entonces en general, este sitio realmente no es tan malo. Sí, podemos hacer pequeñas cosas para hacerlo mejor. Pero lo principal que me encontré cuando estaba investigando este sitio en su competencia fue que su competencia prácticamente luce exactamente igual. Tienen cabecera, tienen logo. Tienen navegación, tienen contenido. Tienen imágenes bonitas. Entonces es el diseño básico. El diseño limpio de estilo corporativo. Ya sabes, todo el mundo se ve exactamente igual. Entonces en un esfuerzo por sobresalir y ser diferente y tener una imagen diferente, una marca diferente, un estilo diferente. Yo quería idear algo que nadie más estaba haciendo por este nicho en particular. Entonces pensé en los diferentes estilos de diseño que cubrimos en la sección anterior, los siete tipos populares de estilos de diseño. Y yo estaba mirando a través de ellos, y estaba tratando de averiguar cuál sería mejor frente a la empresa limpia, moderna. Y yo quería hacer algo que nadie más estaba haciendo en este nicho, y decidí hacer algo más artístico Cuando ciclismo de montaña. Es más que pedalear por un cerro grande o una montaña grande. Tienes que ir con el reflujo y el flujo de ese sendero, y hay que estar al tanto de las rocas y los baches porque no quieres golpear una roca o un bache y volar por el acantilado. Entonces hay un reflujo y flujo para andar por un sendero en una montaña, así que es como una forma de arte, Así que quería incorporar algún tipo de arte versus imágenes simplemente ordinarias y aburridas. Sí, la imagen no es tan mala, pero tampoco es tan grande. Entonces, ¿cómo podemos crear el reflujo y flujo del ciclismo de montaña y el arte? Por lo que se me ocurrió la idea de tomar su imagen principal y transformarla en una pieza de arte, y elegí el color del agua como mi medio. Y ahora probablemente estés pensando, Vale, ¿cómo voy a crear una acuarela que nunca antes había pintado? Bueno, adivina lo que nunca antes había pintado, y por eso tenemos el poder de Photoshopped al alcance de la mano. Entonces déjame mostrarte cuál es el diseño final que se me ocurrió, y te explicaremos un poco más sobre el estilo de diseño, y aquí está. Entonces tenemos esa misma imagen y parece una pintura de acuarela, y esto se puede hacer directamente. Y Photoshopped. No es necesario comprar un lienzo o pinceles ni pintura de color agua. Podemos conseguir este efecto directamente y photoshop, y te voy a mostrar cómo hacer esto en la siguiente lección. Por lo que tenemos nuestra navegación primaria. Nada elegante, pero no se lo puso. Es propio trasfondo. Está encima del color del agua así como su logotipo y luego una acción llamada para registrarse para reserva. Un momento para ir con un guía para este sendero en bicicleta de montaña u otros senderos de tu elección. Entonces cuando una persona aterriza en este sitio web, queremos que haga algo. Queremos que se registren. Cuatro. El producto o servicio es que la empresa está vendiendo en este caso visitas guiadas para ciclistas de montaña. A lo mejor no están listos para registrarse. Eso está bien. Por eso tenemos contenido adicional debajo de la sección de héroes para ayudar a venderlos sobre por qué deben elegir nuestros senderos o la suciedad. Senderos de campamentos en bicicleta de montaña de Siri. Y luego les vamos a dar otra oportunidad de registrarse una vez que hayan leído alguna información. He incluido algunos logotipos de su página web que ya han usado para agregar credibilidad en la parte superior para que cualquiera que no esté familiarizado con esta empresa o este campamento lo vea. Y esto les va a sumar algo de credibilidad a medida que nos desplazamos hacia abajo, se introdujeron al contenido que nos va a ayudar a decidir si queremos o no el registro para este campamento. He incluido algunas imágenes también y he tomado el concepto de acuarela y lo he aplicado a los bordes de las imágenes para no solo agregar consistencia con nuestra imagen de color de agua, sino para separarla y hacerla diferente. Todo el mundo está haciendo imágenes con cuatro lados rectos. Nadie está haciendo esto y también continúa el estilo de diseño del concepto de acuarela lo largo del resto de la página principal. Tenemos entonces nuestra opción de registro aquí. Si están listos para reservar de vez en cuando tenemos nuestro pie de página debajo de eso. Por lo que de nuevo, tomé una imagen principal como parte del fondo y le aplicé un borde de acuarela en la parte inferior y la parte superior no la puede ver en la parte superior porque las nubes y el cielo se lavaron. Entonces les voy a mostrar cómo agregar este efecto a las imágenes, cómo crear este fondo aquí para la opción de registro, y luego en la siguiente lección, les voy a mostrar cómo crear este efecto de acuarela. Entonces si estás listo para empezar, hagámoslo 85. Parte 1: Hola y bienvenidos de nuevo. Está bien. Antes de empezar a transformar nuestra imagen ordinaria en una pintura acuarela, primero necesitamos descargar algún recurso es e instalarlos también. Entonces eso es lo que vamos a hacer en esta lección. Y luego en la siguiente lección, iremos paso a paso en la creación de nuestra obra de arte de acuarela. Por lo que necesitamos descargar una imagen necesitamos descargar e instalar pinceles de acuarela. Necesitamos descargar e instalar este enchufe, y también necesitamos descargar un papel texturizado de acuarela también. Por lo que armé un archivo de texto con la URL para cada uno de estos. Recurso es. Así que adelante, navega a ese archivo, descárgalo y luego navega a cada una de estas URL para descargar ese recurso específico para la imagen. Hice Whistler Trek Dirt, Siri's Mountain como la búsqueda en imágenes de Google, y encontré esta imagen aquí por lo que solo puedes hacer clic derecho, copiar la imagen y luego abrir tu plantilla maestra de cuadrícula y pegarlo dentro de ahí. A continuación, necesitamos unos pinceles de acuarela. Por lo que una vez que navegues a la URL proporcionada en el archivo de texto, entonces harás clic en este botón aquí para descargar esos pinceles y te mostraré cómo instalarlos en tan solo un momento. Y luego para el G m I C Enchufe, necesitarás ir a la URL proporcionada. Y luego puedes descargar para Windows o para Mac y Windows. Los usuarios quieren el archivo ZIP, y los usuarios de Mac deben descargar el archivo de archivo T GZ. De acuerdo, así que adelante y descarga esos. Y luego cuando vayas a este Earl específico, podrías simplemente hacer clic derecho y copiar la imagen como hiciste con la otra imagen. Está bien, echemos un vistazo. Tía son pinceles aquí y vamos a seguir adelante y descomprimir esos. Después encontrarás algunos archivos en el interior. Y lo que queremos es este expediente aquí mismo. Tiene una extensión de punto a b R. Así que vas a hacer click derecho y copiar esto y luego dentro de gimp, necesitamos encontrar la carpeta exacta para colocarlo. Va a ser diferente para los usuarios de PC frente a los usuarios de Mac, y te voy a mostrar cómo hacer cualquiera de los dos, y vamos a repasar las ventanas primero. Entonces si subes a editar y seleccionar preferencias y luego da clic en carpetas Aquí abajo. Encontrarás todas estas carpetas diferentes donde podrás instalar diferentes tipos de recurso es en este caso, necesitamos encontrar la carpeta Pinceles, y esto muestra la ubicación exacta de donde debes instalarlo. Quieres esta de arriba aquí, no la de abajo. Entonces una vez que navegamos a esa ubicación específica, que de nuevo es app de nombre de usuario, datos roaming gimp 2.10 dentro de la carpeta de pinceles, ¿quieres hacer lo correcto? Haga clic y pegue ese archivo que copió. Una vez que hagas eso, lo encontrarás aquí mismo. Ahora, para los usuarios de Mac, ¿quieres acudir a los usuarios? Nombre de usuario, biblioteca soporte de aplicación gimp 2.10 pinceles. Y luego dentro de ahí, pegarás ese archivo. Entonces aquí está, aquí mismo. Y luego Una vez que hagas eso, necesitas volver a dar de nuevo. Seleccione su panel de pinceles y luego haga clic en actualizar pinceles. Una vez que hagas eso, luego encontrarás esos pinceles dentro de este panel. Y todos los pinceles están listados alfabéticamente. Por lo que cuando instalé mis pinceles de acuarela la primera vez, agregué la letra z al frente de ese nombre de archivo para que se añadieran al fondo todos mis otros pinceles. Entonces el tuyo, si no hiciste eso, probablemente estará en algún lugar del medio para que puedas volver atrás y volver a nombrar ese archivo en particular con la letra Z. Si quieres agregarlo al final o un si quieres agregarlo al frente y luego simplemente facilita la localización de pinceles específicos si quieres renombrarlos en un trimestre específico . Si cambias el nombre de ese archivo, necesitas volver atrás y actualizar las opciones de pinceles para que se actualicen en el panel. Entonces así es como instalas los pinceles de acuarela, y los vamos a usar para pintar nuestra imagen en color de agua. Ahora. La otra cosa que necesitamos instalar es este enchufe aquí mismo. Por lo que este plug in particular tiene más de 400 tipos diferentes de filtros, lo que mejora gimp En general, a pesar de que gimp tiene muchos filtros integrados, este plug in particular ya lo tiene instalado te brindará muchas más opciones versus lo que obtenemos directamente de gimp Así que déjame mostrarte cómo instalar estos enchufes particulares . Uno para Windows y otro para Mac. Entonces echemos un vistazo primero a Windows. Entonces aquí están las ventanas Zip archivadas, y aquí está, descomprimidas. En su interior encontrarás un montón de archivos. Pero lo que tenemos que hacer por Windows es correcto. Haga clic y copie esta carpeta, y luego necesitamos volver a una carpeta específica para saber exactamente dónde instalarla. Entonces en este caso, necesitamos volver a 2.10 y luego desplazarnos hacia abajo hasta que encuentres enchufes, ¿ verdad? Haga clic y seleccione pegar. Entonces verás esa carpeta así como esta dentro de ahí. Y luego necesitas reiniciar gimp para que se complete la instalación, y luego verás esa opción plug in justo aquí abajo en la parte inferior del menú de filtros . Ahora, para los usuarios de Mac, solo tienes que retroceder un paso otra vez, encontrar enchufes, y luego tienes que ir dentro de la carpeta de la que descomprimidos y copiar aquí el Fuller y este archivo. Entonces copia ambos de esos y luego pegarlos dentro de aquí y otra vez. Tienes que reiniciar. A continuación, encontrará el enchufe en la misma ubicación. Tan rápido de verdad, ya casi terminamos. Yo sólo voy a mostrarte algo más muy rápido. Cuando empezaste, así es como se ve el dedo del pie. Pero lo que quiero hacer es que quiero deshacerme de estos cuatro logotipos aquí porque realmente no los necesito. Da ahí sólo los patrocinadores para este enchufe en particular. Y también quieren cambiar el tema a un tema más oscuro que coincida mejor con el tema que tengo dentro de gimp. Entonces para hacer eso, vamos a ir a ajustes. Vamos a desmarcar esta opción aquí, y podemos cambiar el tema aquí mismo de predeterminado a oscuro. También hay otras opciones, pero solo voy a dejar todo lo demás en el defecto por ahora. Haga clic en Aceptar y, a continuación, haga clic. Cancelar, porque necesitamos reiniciar el plug in para que el tema surta efecto. Está bien, así que adelante y termina de instalar tus pinceles, el enchufe en conseguir los otros dos archivos de recursos, y luego vamos a seguir adelante y terminar nuestra obra de arte de acuarela en el siguiente tutorial. 86. Parte 2: Hola y bienvenidos de nuevo. Muy bien, Ahora que tienes todos tus archivos y todo instalado, vamos a seguir adelante y crear nuestra obra de arte de acuarela. Por lo que lo primero que debes hacer es cambiar el tamaño de tu imagen para que tenga 1400 píxeles de ancho. Y luego, para la altura, va a depender de la imagen que seleccionaste si seleccionaste esta misma imagen exacta que debería tener 931 píxeles de altura. Si escogiste una foto diferente, no te preocupes por la altura. Siempre y cuando sea alrededor de 900 eso debería estar bien. Y luego podemos subir a filtros y seleccionar nuestro nuevo plug in para empezar en el aspecto acuarela de la imagen. Entonces lo primero que vamos a hacer es ir a nuestra opción de búsqueda aquí mismo y teclear suave para que podamos suavizar la imagen general y vamos a seleccionar bilaterales estos aire , los ajustes predeterminados, y eso es lo que vamos a usar. Adelante y haga clic, postúlate siguiente. Vamos a hacer una búsqueda de Contour y queremos segmentación nuevamente por defecto, pero queremos asegurarnos de que el modo de salida esté configurado en nuevas capas. Haga clic en aplicar, y luego esa voluntad y una nueva capa con esos filtros aplicados a la misma. Vamos a seguir adelante en apagar esta capa ahora se están tapando. El menú ha desaparecido, pero si bajas a tu barra de tareas, deberías poder encontrarlo. Así que adelante y dale click en él y vamos con el dedo del pie. Vuelve a agregar el mismo filtro de segmentación de contorno, pero esta vez vamos a ajustar los ajustes para la suavidad. Cuanto más lejos vayas a la derecha, más suave es la imagen, más lejos a la izquierda, más detalle vas a ver en la imagen. Quiero traer de vuelta detalle en esta capa aquí en algunas áreas. Entonces vamos a dejar caer el liso esto hacia abajo a algo así. Y entonces también podemos aumentar el umbral del borde para traer de vuelta detalles adicionales en la imagen. Entonces estos airean los ajustes que voy a usar, y luego voy a volver a aplicar a una nueva capa. Voy a renombrar este paso uno este paso uno, dos detalles más. Vamos a seguir adelante y encender el paso uno capa, y ahora podemos ver que tenemos más detalle en esta capa. Ahora, con el fin de volver a traer más detalle a esta capa, voy a mover esta capa por debajo de ella. Y luego para esta capa, vamos a añadir una máscara de capa, como saben, quita el blanco y el negro. Entonces voy a seguir adelante y añadir una máscara de capa blanca. Ahora puedo agarrar mi herramienta de pincel y un pincel. Voy a seleccionar este de aquí, que es la dureza 50. Y luego ajusta el tamaño de tu pincel en consecuencia. Y luego puedes hacer clic y volver a pintar parte de ese detalle. Entonces tal vez quiera entrar a los árboles aquí y agregar un poco de detalle y estos árboles porque el punto de enfoque de nuestra cámara está en los motociclistas de aquí. Por lo que queremos y retroceder detalle con cualquier elemento que esté en línea con la gente en la moto. Entonces voy a deshacer esta parte por aquí golpeando mi ex llave en pintura con blanco para quitar algo de eso y luego pintar con negro de nuevo en los árboles aquí para traer de vuelta algo de ese detalle. Ahora bien, si quieres, podrías realmente, y detallar de vuelta en cualquier lugar que quieras. Simplemente me voy a centrar en esta área por ahora. Una vez que hayas terminado de agregar de nuevo tu detalle, vamos a seguir adelante y tomar estas dos capas y ponerlas en un nuevo grupo de capas. Sólo llamémoslo paso de detalle. Entonces técnicamente, podemos tomar estas dos capas y fusionarlas mediante la selección fusionado hacia abajo. No obstante, me gusta trabajar de manera no destructiva, y en un momento posterior quizá quiera volver en un agregar detalle adicional a mi obra de arte. Entonces si aplanara estas capas, no sería capaz de hacer eso. Entonces por eso me gusta juntarlas en un nuevo grupo anterior. Y luego podemos hacer click derecho y seleccionar Nuevo de Visible. Después combinará ambas capas y la pondrá en una nueva capa para que pueda volver más tarde y empezar de nuevo desde aquí versus empezar de nuevo desde cero. Ahora es y una nueva capa que vamos a llenarla de blanco se llamaba fondo, y lo vamos a poner debajo de la capa visible. Ahora vamos a terminar una máscara de capa a la capa visible en clic blanco y ahora comienza la diversión porque podemos agarrar nuestra herramienta de pincel con la letra B, y luego podemos usar nuestros nuevos pinceles de acuarela con el fin de darle un efecto más pictórica para que puedas seleccionar cualquiera de estos pinceles de acuarela que quieras usar. Voy a seguir adelante y seleccionar 006 para que empiece. Por lo que una vez que seleccionas ese pincel, puedes ver que se ve bastante diferente al pincel anterior. También queremos entrar en nuestras opciones de herramientas y hacer algunas selecciones de que el tamaño del pecho es demasiado grande. Voy a bajar a alrededor de 150 y también quiero encender el shader de lápiz de dinámica. Por lo que si haces clic en este ícono aquí, puedes seleccionar diferentes tipos de dinámicas o la forma en que se está aplicando el pincel a tu campus por defecto. Probablemente tengas dinámicas básicas, y eso solo va a aplicar un simple trazo que sea consistente con el tamaño y la forma de tu pincel. Cuando seleccionas otras dinámicas, la forma en que tu pincel interactúa con la capa en la que estás trabajando será diferente una de la otra, lo que tendrás que pasar por todas estas y jugar con ellas para ver cómo tu pincel se está aplicando con estas diferentes opciones. Entonces, cuando seleccionas sombreador de lápiz, en realidad va a tomar tal vez un minuto o dos. Olvídate de activar realmente ese pincel porque es un tipo de pincel muy extenso o intensivo que se va a aplicar el pincel de manera diferente a medida que pintas alrededor de tu imagen. Por lo que no va a ser un trazo suave y consistente. Va a ser más aleatorio, y va a agregar trazos más realistas a tu lienzo frente a un trazo simple y consistente. Entonces ahora mismo gimp sigue tratando de activar ese pincel, y no puedo aplicarlo en ninguna parte aún hasta que gimp se ponga al día y en realidad cargue ese cepillo. Por lo que ahora que lo tengo, asegúrate de tener seleccionada tu máscara de capa. Se quiere pintar con negro, y lo otro que se quiere hacer es que se quiere hacer dos cosas. Quieres ajustar la opacidad a medida que estás pintando, y quieres cambiar tu pincel de acuarela, y esto lo romperá para que sea menos consistente y más realista. Entonces solo te voy a mostrar muy rápido lo que pasa mientras estás pintando así como puedes ver la cantidad de un pase ity alrededor del borde de ese pincel es diferente en diferentes partes de la zona que estoy aplicando el pincel. Entonces solo voy alrededor de los bordes aquí, y es aplicar ese trazo al azar porque puedes ver que el pincel real cambia tamaño y gira. Y está agregando diferentes trazos aleatorios. Cuando tienes esas herramientas, las opciones configuran la forma en que lo hacemos. Entonces lo que quiero hacer ahora es soltar mi opacidad y volver a elegir un pincel diferente. Cualquier pincel está bien porque todos te van a dar diferentes tipos de trazos, diferentes resultados y va a hacer que tu pintura acuarela se vea más realista. Entonces voy a bajar un poco más pequeño para este pincel en particular, y sólo voy a hacer lo mismo. Yo sólo voy a pintar aleatoriamente a lo largo de los bordes de la imagen, y se puede ver que los trazos son diferentes a lo que eran antes. Voy a seguir adelante y apagar mi capa original aquí, y mi detalle va más tarde porque realmente no necesitamos los encendidos ahora mismo, Así que voy a seguir adelante y seguir dando vueltas hasta que desaparezca el borde recto de nuestra foto porque no quiero un borde recto para esta pintura de acuarela en particular. De acuerdo, voy a seguir adelante, deja caer la opacidad, voy a elegir un pincel diferente, y voy a hacer este un poco más pequeño. Hagamos eso también. Y entonces solo voy a dar clic al azar en segundo plano aquí sólo para romperlo un poco más. Ahora bien, la capacidad, creo, es un poco demasiado alta. Entonces voy a deshacer eso con Commander Control y las letras E. Y voy a tonificar esto sólo un poquito porque sólo quiero unos trazos aleatorios en el fondo aquí para que parezca que se aplicaron unos trazos de pintura sobre el real imagen misma. Y eso ayuda a romperlo y hace que se vea más realista y más como una pintura de acuarela versus simplemente dejarla en blanco como era antes. Está bien, sigamos adelante y agreguemos nuestro papel de textura de color agua. Queremos asegurarnos de que tenemos una capa sin máscara de capa seleccionada. Si lo vas a pegar en tu documento, De lo contrario no va a funcionar. Simplemente voy a hacer clic en, Crea una nueva capa aquí, y luego pega ese contenido en particular que copié en una nueva capa. Llamémoslo papel de acuarela. Voy a seguir adelante y escalarlo para que tenga 1400 píxeles de ancho, y luego sólo necesitamos moverlo a su posición. También necesitamos agregar un modo de fusión para poder ver realmente el resto de nuestra obra de arte. Entonces vamos a los modos de fusión y seleccionar multiplicar. Por lo que eso agrega algo de textura a nuestra obra de arte. Y ahora quiero deshacerme de esto tirado aquí abajo, y también tengo algún texto en ese expediente. Entonces voy a subir a capa y seleccionar capa a tamaño de imagen. Voy a agregar una máscara de capa blanca y luego con mis pinceles de acuarela, solo voy a seguir adelante y pintar con blanco para deshacerme de algo de ese papel de acuarela aquí abajo. Necesito aumentar mi opacidad primero, aunque no como en este pincel demasiado. Entonces voy a seguir adelante y escoger una diferente. ¿ De acuerdo? Ese parece estar funcionando un poco mejor. No quiero deshacerme de toda la textura del papel. Voy a dejar algunos aquí abajo está bien, al menos por ahora hasta que decida lo contrario. Así que solo sigue adelante y limpia tus bordes aquí abajo. Y creo que quiero volver a esta máscara de capa con un pincel nuevo. Se ha probado este, y sólo voy a pintar en algunas de las esquinas aquí un poco más, un poco más arriba aquí un poco más. Eso no me gusta. Entonces voy a cambiar al negro para poder deshacerme de algo de esto aquí, aumentar la opacidad y esto es sólo cuestión de gusto. Por lo que los años definitivamente van a verse diferentes a los míos porque configuras la rapacidad tus pinceles que estás seleccionando, todos son diferentes. Así que adelante y haz exactamente lo que quieras en base a tu visión creativa, y eso es todo. Nuestra imagen en color de agua ya está hecha. Lo último que recomendaría hacer es crear una nueva capa una vez que hayas terminado de aplicar todos tus ajustes en tus pinceles y tus texturas y todo eso, Así que sigamos adelante y hagamos eso si has terminado. Si no, adelante y sigue trabajando en tu pintura de acuarela y luego ponlos todos dentro de esta nueva capa de grupo, y eso es todo. Una vez que hayas terminado, te veré en el siguiente tutorial porque necesitamos trabajar en nuestro encabezado para nuestra página Web. Entonces si estás listo para empezar con eso, bueno tiene que hacerlo. 87. Encabezar + héroe: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y trabajar en el encabezado y la sección de héroes en este tutorial porque el encabezado va a ser realmente sencillo y súper fácil de hacer. Seguí adelante y mecanografié mi navegación primaria. Añadí cinco espacios entre cada uno de los elementos del menú. Utilicé ferroviario negrita y 24 para el tamaño y blanco, claro. Ahora lo único que tengo que hacer es hacer que este contenido sea más fácil de leer. Pero primero, solo quiero mostrarles dónde coloqué mi navegación primaria, que estaba en el lado izquierdo de la primera columna, y usé 30 píxeles de espacio en la parte superior del navegador en la parte superior de la navegación primaria . También agregué una pauta a 700 píxeles abajo para representar la línea completa para la sección de héroes . Así que adelante y saca esas pautas y termina tu navegación primaria y ponla en el lugar. Una vez que tengas eso, entonces necesitamos añadir una sombra de gota para el contenido. Pero primero tenemos que subir a capa y seleccionar capa para emitir tamaño para aumentar el tamaño del límite de la capa y luego vamos a filtros, gota de luz y sombra para agregar nuestras sombras de gota. Voy a dar la vuelta a uno por la opacidad y luego sólo seguir adelante y hacer cualquier otro ajuste. Deseas que tu texto te facilite la lectura. Entonces voy a ir con estos ajustes aquí. Una vez que hayas terminado, sigue adelante y haz clic. OK, Una vez que hayas hecho tu navegación primaria, sigamos adelante y ponla en un nuevo grupo de capas llamado Encabezado. Y a pesar de que solo hay una capa, todavía me gusta organizar todas mis capas y agruparlas en base a esa sección. Ahora necesitamos descargar cuatro logos toe add a nuestra sección de héroes. Entonces el 1er 1 va a ser éste de aquí, y tú vas a hacer una búsqueda de esto. Se quiere encontrar el archivo PNG, que va a ser blanco y negro. Pero una vez que haga clic en él, verá el archivo transparente. Así que adelante, copia eso y pega eso, y luego solo necesitamos cambiar el tamaño de la capa. Entonces agarra tu herramienta de báscula y luego por el con, vamos a hacer por 20 y sigamos adelante y colocarla para alinear con nuestra navegación primaria , y quiero asegurarme de que todo el texto esté dentro de la montaña. Kate. Aumentemos el tamaño de límite de capa y usemos Commander Control y F para pegar son drop shadow. ¿ Podemos tener tres logotipos más para descargar? El 2do 1 es logo de Trek, logo de Fox Shocks, y luego el último es esto escuche? Así que adelante y encuentra archivos PNG para cada copia, pegarlos y luego vamos a seguir adelante y redimensionarlos. En cuanto a dimensionar, vamos a hacer 50 píxeles de altura por cada una de las capas. Ahora que ya lo hemos hecho, podemos seguir adelante y ponerlos en posición. Pero la pregunta es, ¿queremos poner nuestros logotipos por encima del pliegue o por debajo del pliegue? Creo que en este caso para esta empresa en particular, es una empresa bien conocida, y no creo que agregar la prueba social por encima del pliegue sea tan importante como lo hemos hecho con otras empresas que no son tan conocidas como esta empresa. Entonces eso es algo más que tienes que considerar cuando estás sumando tu prueba social arriba en la sección de héroes o justo debajo del redil. Creo que para este caso, está bien por debajo del pliegue. Por lo que para este primer logo, voy a una línea al lado izquierdo de la segunda columna, El último logo voy a alinear al lado derecho del segundo dedo del pie. Última columna. Adelante y agarremos nuestra herramienta de alineación para que podamos agarrar cada una de estas capas, así que estoy teniendo problemas para seleccionar mi logotipo. Entonces si subo a mi otro local, aparece la parte superior. Si recorto el límite de la capa, debería poder seleccionar ahora mi local. De acuerdo, sigamos adelante y seleccionemos los otros dos manteniendo pulsada nuestra tecla de turno y haciendo clic en cada logotipo, seleccionemos primer elemento y una línea para arriba. También necesitan centrar mi segundo logotipo directamente en medio de estos dos logotipos, así que vamos a agarrar nuestra herramienta de selección, hacer una selección, y luego necesitamos alinearla al centro de la selección. Muy bien, adelante y de select, y lo último que tenemos que hacer para nuestros logotipos es aplicar una superposición de color blanco a estos dos logotipos, así que sigamos adelante y creemos una nueva capa llamada superposición. Vamos a llenarlo de blanco. Y pongamos todos los logotipos en un nuevo grupo de capas llamado Logo's. Queremos asegurarnos de que no seleccionamos el primer logotipo en la sección de héroes. Así que agarra los otros tres, póngalos dentro y luego agarra tu capa de superposición y cambia tu modo de mezcla a adición Ahora necesitamos tomar esta capa de grupo logotipos y duplicados porque necesitamos y la sombra de gota . , y no podemos agregar sombras de gota a capas agrupadas. Entonces lo que vamos a hacer con esta nueva capa es que vamos a hacer con la derecha Haga clic y seleccione Fusionar grupo de capas. Y de esta manera, si nuestro cliente tiene un cambio en una vez los logotipos, cualquier orden diferente, podemos volver a la capa de grupo original aquí y reorganizarlos versus fusionarlos, sin tener esta opción. Y luego tenemos que empezar todo de cero descargando y creando una superposición para que en realidad puedas apagar esta capa porque no la necesitamos de vez en cuando. Una vez que tu cliente finalmente apruebe el diseño, puedes seguir adelante y eliminar esta capa de grupo por completo antes de entregarla al desarrollador Web . De acuerdo, así que ahora podemos seguir adelante y usar nuestro atajo de teclado, Commander Control y F para agregar la sombra de caída. Por lo que lo último que hay que hacer es decretar se llaman Botón de Acción. Adelante y Graham son herramienta de texto. Cambiemos los letreros de fuente a 36 blancos para el color. Vamos a crear una nueva capa llamada botón. Asegúrate de llenarlo con transparencia. Ahora, antes de crear el botón, tenemos que ir a las opciones de nuestras herramientas y asegurarnos de que los ajustes dinámicos se ajusten a las dinámicas básicas. Entonces sigue adelante y elige un color de tu elección. Y luego hacer el botón. Simplemente vamos a dar click varias veces con el fin de crear el botón del tamaño que queramos. Y cuanto más agregamos, oscuro se vuelve el botón. Entonces voy a ir justo ahí, y lo voy a mover por debajo del texto. Adelante y Graham también son capa de texto. Aumentemos el tamaño del límite en. Añadamos un comando o control de sombra de gota y la letra F puede Vamos a seguir adelante y agrupar estas dos capas. Vamos a seguir adelante y también crear un nuevo grupo anterior para la sección de héroes. Lo último que quiero hacer es que quiero agarrar este botón aquí y moverlo un poco porque ahora está un poco desequilibrado. Entonces voy a volver a entrar y agarrar mi llamado botón de acción. Adelante y recortemos el límite también con Shift Plus C. Y lo voy a colocar justo debajo de nuestro logo aquí. Su odio. Entonces eso es todo. Nuestro encabezado y la sección Héroes ya están hechos en la siguiente lección. Vamos a seguir adelante y empezar en la primera parte de su cuerpo. 88. Contenido corporal: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y empezar a trabajar en la sección de cuerpo de nuestra página Web. Necesitamos tres imágenes, y vas a pixel bay dot com o imágenes de Google y encuentras tres imágenes de ciclistas en cuanto al tamaño vamos a hacer las 2 primeras imágenes del lado izquierdo, cinco columnas de ancho, y esta imagen de aquí será de siete columnas de ancho. Así que adelante, re escalar sus imágenes en consecuencia. Se cambió el nombre de las capas y asegúrese de subir a capa e incrementar el límite de capa de cada imagen. Porque más adelante, vamos a tomar un pincel de acuarela y ajustar los bordes de las imágenes para crear ese efecto de acuarela. Está bien, así que una vez que lo hayas hecho, entonces necesitamos entrar y aumentar los ojos del campus. Voy a hacer 3500 por ahora. Y luego una vez que enciendo aquí mi sección de héroes, no son visibles todas mis imágenes. Y eso es porque dentro de la sección de héroes dentro del grupo de acuarelas, tenemos esta capa aquí mismo llamada activa. Eso es demasiado alto. Entonces está escondiendo mis imágenes. Entonces voy a agarrar mi herramienta de selección de rectángulos, y voy a cambiar el tamaño del límite de la capa para que se pueda ver el resto de la página. De acuerdo, ahora que mis imágenes son visibles, también necesito ir a mi capa de fondo. Una vez que cierre esto y necesito aumentar el tamaño límite posterior y luego necesitamos llenarlo con peso. Muy bien, Ya estamos listos para empezar a trabajar en nuestras imágenes y en nuestro contenido antes de trabajar en las imágenes . Adelante y sumamos nuestro título. Entonces vamos a usar Oswald Bold. Hagamos 76 y Dark Ray. Sólo voy a mover esto hacia arriba y fuera del camino por ahora. ¿ De acuerdo? Adelante y un poco de contenido adicional y vamos a hacer que sea siete columnas ancho, y vamos a ajustar la altura de la misma más adelante una vez que tengamos todas nuestras imágenes en su lugar. Entonces usemos Georgia 16. Agarra algún texto ficticio y pegado. Está bien, voy a seguir adelante y apagar estas dos capas por un momento para que podamos trabajar en nuestras imágenes . Agarramos uno de nuestros pinceles redondeados de acuarela. Voy a elegir el número 006 Asegúrate de que en las opciones de herramienta tengas set dinámico a lápiz shooter y luego ajusta tu opacidad en consecuencia. Voy a empezar ese 100% y luego necesitamos añadir una máscara de capa blanca. Y luego con negro, podemos pintar a lo largo de los bordes para quitar ese borde duro. Entonces voy a seguir adelante y hacer esto para las tres imágenes, y luego vamos a seguir adelante y moverlas a la posición. Así que adelante y trabaja en tus imágenes también. Intenta quitar tanto del borde recto como sea posible. Ajusta tu A pasarlo E y tu tamaño de pincel a medida que estás trabajando para crear más trazos aleatorios pueden. Una vez que hayas terminado con tus imágenes, vamos a seguir adelante y volver a encender la cuadrícula para que podamos alinear estas exactamente donde necesitan estar. También voy a recortar el contenido para cada capa también con turno más C y eso hará que sea más fácil alinear todo. Y voy a poner este vino de 16 columnas, y para poder moverlo, queremos asegurarnos de que seleccionamos la miniatura de la imagen y no la máscara de capa. De lo contrario, estamos moviendo la máscara de capa y no la imagen. Por lo que quiero alinear estos dos en la parte inferior. De acuerdo, así que eso se ve bastante bien. Adelante y alineemos nuestro título. Por lo que el contenido un poco demasiado alto. Entonces voy a seguir adelante y la línea para que el texto se alinea con la parte superior de su título, y es un poco demasiado largo aquí abajo, así que voy a seguir adelante y eliminar parte de este contenido también. De acuerdo, así que eso se ve bastante bien. Nunca un rápido. Te quiero dar otro consejo sobre el contenido. Voy a seguir adelante y apagar nuestro título a nuestra imagen aquí. Y voy a duplicar esta capa sólo para mostrarles este consejo. Entonces cuando se trata de contenido, cuanto más amplio es ese contenido, más difícil es leer. Y los estudios han demostrado que esto es cierto. Tus ojos tienden a cansarse cuanto más larga sea la línea de texto. Por lo que hasta tía siete columnas de ancho. Todavía es un poco difícil de leer porque las líneas siguen siendo bastante largas. Ahora es mucho más fácil que 12 columnas. Pero incluso entonces no iría más de siete columnas de ancho. A menos, por supuesto, que hagas el texto mucho más grande. Lo mismo es cierto si vas demasiado lejos al revés y haces que las líneas sean demasiado estrechas ahora se vuelve difícil de leer de nuevo porque solo estás obteniendo de 2 a 3 palabras por línea, y eso hace que sea mucho más difícil de leer. Por lo que me gustaría ir a cualquier lugar de 3 a 5 columnas de ancho en promedio, y ajustaré eso en función del tamaño del texto. Adelante y deshacer todo esto. Pongamos esto en un nuevo grupo de capas llamado contenido. Entonces tenemos nuestras imágenes. último, pero no menos importante, tenemos nuestro grupo corporal y adivina cuál es su contenido corporal todo hecho. Entonces de aquí en adelante, realmente no tengo ningún consejo adicional para ti en el siguiente tutorial que vamos a cubrir se llaman Sección de Acción para nuestro cuerpo, que va a consistir en un formulario de registro que se puede llenar dedo del pie libro fechas específicas . Esto no va a ser muy diferente a lo que hemos hecho en proyectos anteriores, pero voy a seguir adelante y lo voy a pasar contigo sólo para poder completar este proyecto y luego haremos el pie de página después de eso. Entonces si estás listo para empezar en el registro, parte de este proyecto seguirá adelante y empezará a hacerlo en la siguiente lección. 89. Registro del cuerpo: Hola y bienvenidos de nuevo. Muy bien, vamos a seguir adelante y crear una sección de registro dentro del contenido corporal, y vamos a usar una imagen grande, de sangría completa como fondo. Así que adelante y encuentra uno descargado, redimensionarlo dedo del pie 1400 píxeles de ancho, y luego aplica tus pinceles de acuarela a lo largo de los bordes superior e inferior de la imagen para que podamos mantener la consistencia del estilo de diseño a lo largo de esta página también. Y recuerda, tienes que añadir una máscara de capa blanca para hacer eso y también aumentar tu tamaño de límite de capa. Y luego una vez que hayas terminado, puedes seguir adelante y recortar nuevamente el tamaño del límite de capa con turno más C. Voy a subir a mi sección de héroes aquí. Voy a agarrar mi C t un botón y duplicado y luego con mi herramienta de movimiento. Simplemente voy a dar clic y seguir arrastrando hacia abajo hasta que baje hasta el fondo. También voy a volver a recortar el límite de capa manualmente con mi herramienta de selección de rectángulo para que pueda alinearlo al centro de nuestro documento y luego seleccionar todo. También necesita sacar esta capa hacia fuera y hacia abajo. Seleccionado con tu herramienta Lehman y luego un centro de línea de objetivo. En base a esa selección de selecto, Adelante y cierra a este jugador de grupo y luego vamos a hacer trampa agarrando nuestra forma de filtro de un proyecto anterior. Entonces voy a seguir adelante y solo tienes que hacer clic y arrastrar esto. Ahora, muchas veces vas a usar elementos que has creado antes en nuevos proyectos. Ahora, por supuesto, siempre se puede volver atrás y rehacer estos desde cero. Si quieres usar un diseño ligeramente diferente, tal vez quieras esquinas redondeadas en lugar de esquina perfectamente cuadrada. Entonces en ese caso, lo reharía. De lo contrario, entonces no hay razón por la que no puedas tomar contenido existente, reutilizándolo para otro proyecto y luego solo actualizarlo en consecuencia para ese proyecto. Entonces voy a agarrar mi herramienta de mudanza aquí enemas, y vamos a seleccionar Escoger un tipo de capa porque quiero dar click en esta fecha aquí mismo. Yo quiero saber dónde está, y luego puedo actualizarlo en consecuencia. No lo necesito para este diseño, así que voy a seguir adelante y eliminarlo cuando elimine esa capa y voy a tomar este contenido y borrado también. ¿ Podemos acercar aquí para que pueda agarrar mi herramienta de texto y actualizar este contenido a fecha de inicio? Seleccionemos todos Cambiemos el color a Blanco y también voy a hacer Oswald negrita. Hagamos lo mismo por el contenido aquí mismo. Todavía es un poco difícil leer este contenido aquí mismo. Entonces voy a ir a mi capa de fondo aquí y cambiar la opacidad al aumentarla de 22 . Digamos que justo alrededor de los 80. De acuerdo, entonces eso es más fácil de leer ahora. Simplemente voy a mover un poco el texto hacia arriba, para que no esté demasiado cerca de las formas de filtro. Adelante y una guía para que podamos alinear también la siguiente capa. También quiero cambiar el color de la rosa también, así que voy a seleccionar cada fila y llenarla de blanco. De acuerdo, voy a bajar este contenido y cambiemos esto a libro. Ahora hagámoslo más grande. Hagamos 48 y Oswald audaz otra vez. Voy a recortar el contenido con Shift Plus E, y también necesito sacar esta fila para poder seleccionarla con mi herramienta de alineación. Lo mismo con su contenido. Y luego seguir adelante y alinearnos con el primer centro de ítem y medio del objetivo. Está bien. Es necesario volver a meter esos. Simplemente voy a reorganizar algunas de estas capas aquí. También quiero mover este filtro hacia arriba justo debajo del contenido del registro aquí. Entonces está juntos. Muy bien, así que eso es todo para la sección de registro. En la siguiente lección, vamos a terminar nuestro diseño haciendo el pie de página y cualquier retoque final. 90. Footer: Hola y bienvenidos de nuevo. Está bien, así que para el pie o sección, me adelanté y lo hice. Y no es nada elegante, bastante aburrido. Profesional. No mucho más podría hacer con la sección de pie de página. Solo está ahí para proporcionar enlaces adicionales para información que un visitante pueda estar buscando . Yo sí tengo un estado de hover justo aquí para uno de los íconos para que podamos ver cómo se va a ver cuando pasemos el cursor sobre uno de esos iconos de redes sociales. Va a ser un poco más oscuro. Yo sí usé los colores de branding de la propia empresa, y también usé esos colores en los enlaces también otra vez. Probablemente no quieras verme hacer esto desde cero. Es realmente simple de hacer. A estas alturas. Debes saber cómo hacerlo. Así que adelante y practica lo que aprendiste al crear los diferentes contenidos para el pie de página y tus iconos de redes sociales. Addy hover estados en todas las diferentes longitudes información de copyright, un enlace de privacidad y cualquier otra cosa que desee agregar. Entonces, igual que antes, necesitamos pasar y asegurarnos de que el diseño no necesite ajustes Lo único que veo que tenemos que hacer es nuestro espaciado entre cada una de las secciones. Así que entra, asegúrate de que las secciones tengan la misma cantidad de espaciado entre ellas. Y entonces lo último que creo que tenemos que hacer para mejorar la sección de héroes es hacer más oscura nuestra imagen en color agua . Es demasiado brillante, es demasiado blanco. Es un poco difícil. Leer todo el contenido. Entonces lo que hice es entrar con una nueva capa texturizada que descargué de picks. Obedecer y lo coloqué sobre mi obra de arte e hice algunos ajustes en el papel. Se me cae la opacidad. Cambié el modo de mezcla para multiplicar. Y luego agregué una máscara de capa para quitar el borde duro a lo largo de la parte inferior de la misma. Y encuentro que se ve mucho mejor con el color más oscuro sobre él versus el blanco brillante , porque creo que de nuevo eso hace que sea demasiado difícil de leer. Esto definitivamente lo mejora. La única otra cosa que puedo hacer es entrar aquí y quitar algo del color del agua aquí abajo y tipo de tonificarlo solo un poquito. Aparte de eso, creo que todos hemos terminado. Entonces, felicitaciones por completar los siete proyectos de diseño. Practica lo que aprendiste. Crea un nuevo diseño para esta empresa en particular para tu portafolio. Y luego, si quieres, toma alguno de los diseños que creaste para tu portafolio y publícalos en la sección Q y A para lucir tus nuevas habilidades de diseño. O tal vez solo quieras retroalimentación sobre los diseños que creaste, y estaría encantado de echar un vistazo a esos diseños y proporcionar cualquier retroalimentación si fuera necesario. Puede que termines haciendo un mejor trabajo que yo diseñando estas páginas. Si es así, te felicitaré y entonces sabrás que estás en camino a triunfar. Como diseñador Web, gracias por escuchar y tener un día impresionante.