Transcripciones
1. Introducción: Hola chicos. Se trata de Meg Lewis de Helechos Fantasmas. Bienvenido a mi clase de Skillshare sobre introducción al diseño de interfaz de usuario. En primer lugar quiero contarles un poco lo que vamos a aprender a lo largo de este curso. Primero te voy a enseñar un poco sobre estilos y técnicas de UI. Vamos a aprender cosas como diseñar varios botones, diales, avatares, contenedores, y luego vamos a armar todo eso en un sitio de desplazamiento de una página para una startup falsa. Cuando lo juntemos todo, vamos a aprender a diseñar a una cuadrícula 960. Vamos a aprender sobre los encabezados, la sección de cuerpo, fotos, y luego vamos a aprender sobre la división del contenido que el cliente quiere en varias secciones para el sitio. También vamos a aprender un poco sobre rollovers e interacciones. Déjenme decirles un poco sobre Party Starters y el proyecto que les voy a dar chicos para que trabajen. Party Starters es una empresa ficticia que tengo un amigo mío que desesperadamente quiere iniciar esta empresa, pero él mismo es un gran iniciador de fiestas, y así que ojalá algún día, esto se convierta en las obras. Pero por ahora, realmente no quiero que ustedes diseñen para una startup real porque no queremos que sus diseños se repartan de forma gratuita. Eres más que bienvenido al diseño para tu propia empresa, si eres fundador de una empresa y si eres diseñador, entonces eres bienvenido diseño para otra empresa como tu proyecto, o si solo tienes curiosidad, puedes también diseño para iniciadores de fiestas. Son gatos, lo siento. Podrás diseñar tu propio sitio Party Starters si quieres y solo presentarlo en la pestaña Proyectos y mostrarme lo que habéis estado haciendo chicos. Déjame contarte un poco sobre por qué me encanta diseñar para startups. En primer lugar, son increíblemente apasionados y entusiastas y enérgicos sobre el producto, y por lo general les gusta tener una mano del diseño, y les gusta realmente contribuir a lo que está pasando con el diseño y están fácilmente disponibles a diferencia de muchas empresas que lo son, tal vez si estás diseñando para una tienda de mamá y pop, que durante el día, están dirigiendo la tienda. Estas startups siempre están pensando en su empresa, están en el reloj todo el tiempo, muchas veces trabajan fines de semana y noches. Por lo que están fácilmente disponibles para ti, y siempre están tan emocionados con su producto, que es realmente divertido trabajar para una startups y no pude recomendarlo más. Además, las startups pueden ser increíblemente lucrativas para ti. Dependiendo de tu modelo de precios, realmente no
quiero sugerir nada ahí, pero muchas veces dependiendo de la empresa, se
puede cobrar un poco más porque este diseño puede ser visto por mucha más gente o después algunas empresas más pequeñas que están realmente ajustadas a su presupuesto. startups en etapa temprana a menudo son muy ajustadas en su presupuesto, y muchas veces sí trabajo para estas empresas, así que estoy muy entusiasmada con el producto. A veces les ofreceré un poco de una ruptura de precio. Pero por lo general son muy serios el trabajo de diseño y seguramente tienen un poco de dinero porque están buscando inversionistas y
quieren tener una apariencia presentable profesional. Entonces son muchas las razones por las que me encanta diseñar para startups, es muy divertido. El diseño de la interfaz de usuario en general es realmente poderoso. Esencialmente es solo hacer formas. Según aprenderás en los tutoriales, solo
estás haciendo muchos cuadrados y rectángulos redondeados, pero estás juntando colores y textos y fotografía, y eres capaz de crear un diseño realmente poderoso. Específicamente, me gusta crear un diseño
amigable que tenga mucho color y mucha energía y bienestar,
limpio, fácil para el usuario de digerir y la gente responda realmente bien al diseño amistoso. Empresas con diseño amistoso son muy populares en este momento, como ves con empresas como Skillshare, y Airbnb, y Zocdoc, e incluso Warby Parker, obtienes estos diseños modernos y limpios que usan color de una gran manera y la gente responde realmente bien a ello. Solo quería hacerte saber que después de que hagamos estos tutoriales juntos, vas a diseñar tu propio sitio de una página para una startup. Puedes ir más allá de eso si quieres y continuar con algunas páginas más, pero para esta clase, de verdad solo quiero que hagas una página. Presentar eso en una fecha límite o puedes seguir adelante y presentarlo antes de eso. Siempre estoy disponible vía correo electrónico a meg@ghostlyferns.com. Puedes dispararme preguntas, mostrarme tus diseños temprano si quieres, y estoy feliz de darte comentarios o proporcionarte algunos consejos extra. También sé que los videos tutoriales son para ver lo que estoy haciendo en algunas ocasiones porque no soy una grabadora de screencast genio. Entonces si te cuesta ver algo o quieres que me aclare, estoy feliz de hacerlo vía correo electrónico. También tengo todos los archivos de recursos de los videos listos para que descarguen aquí. Adelante y descarga esos mientras estás viendo el video y tal vez puedas hacer click en algunos de mis estilos de capa y ver qué estaba haciendo. Muy bien, chicos. Si tiene alguna pregunta, por favor envíeme un correo electrónico, meg@ghostlyferns.com, y espero que disfruten de este curso. Gracias chicos.
2. Estilos de botones, avatares y contenedores: Hey pandilla, esta es Meg Lewis de Helechos Fantasmas. Bienvenido a la clase de intercambio de habilidades sobre la introducción al diseño de la interfaz de usuario. Yo quiero empezar primero diciendo,
gracias por tomar esta clase, ojalá aprendas algo valioso. No apagas tu video y te olvidas de que alguna vez pasó. Por lo que quiero dar primero a las exoneraciones de responsabilidad. Esta es una clase para alguien que tenga una comprensión básica de Photoshop. Si no tienes un entendimiento básico de Photoshop y tienes Photoshop, iré bastante despacio a donde puedes agarrar el ahorcamiento de la misma. Pero voy a ir lo suficientemente rápido para que la gente que ya sabe lo que está haciendo no se aburra del todo. Está bien. Empecemos. Por lo que abre Photoshop, inicia un nuevo archivo. Voy a darle un tamaño arbitrario de 1,000 pixels por 1,000 pixels. Siempre 72 DPI para diseñar para la web. Vamos a hacer un RGB también porque estamos diseñando para Internet. Entonces vamos a darle a esto un título de PARTYSTARTERS en todos los gorras. ¿ Por qué no? Ábrela. Aquí está nuestro Lienzo. Simplemente estamos diseñando elementos de interfaz de usuario para este tutorial. Entonces vamos a aprender cosas como botones, estilos, abundantes. Vamos a hacer unos avatares y vamos a hacer contenedores. Va a ser genial. Te lo vas a pasar muy bien. Empecemos. Lo primero es primero, diseñemos algunos botones. Vamos a ir más de ocho estilos de botones ahora mismo. Los cuatro primeros van a ser botones más oscuros sobre un fondo claro. Vamos a mantenerlo blanco para el fondo. Los otros cuatro van a ser botones más claros sobre un fondo más oscuro. Primer botón, empecemos con un rectángulo redondeado. Voy a darle un radio de cinco píxeles. Simplemente vamos a hacer que sea un tamaño de 245 por 50. Algo a saber es que estoy usando CS6. Por lo que estoy recibiendo esta pequeña notificación de tamaño útil junto a mi ratón. Entonces aquí vamos. Aquí está nuestro rectángulo redondeado para nuestro botón. Voy a agarrar aquí. Tengo precargado nuestros PARTYSTARTERS, muestras de color. Entonces voy a probar este color rosa caliente. Lo que no dice fiesta además de rosa caliente. Entonces ahora es rosa. Primero voy a hacer doble clic en esta capa. Se abre la columna de celdas de capa. Ahora, lo primero del diseño de la interfaz es que definitivamente vas a estar usando este color todo el tiempo. El estilo de capa es muy importante. Hace que todo parezca que tiene profundidad. No estamos enseñando diseño plano necesariamente hoy. Entonces vamos a mantener todo redondeado. Vamos a usar muchas sombras de gota,
gradientes, lo que sea, de una manera de buen gusto, por supuesto. Entonces, primero empecemos con una superposición de gradiente. Como puedes ver, eso se ve absolutamente horrible. Entonces vamos a editar este gradiente aquí mismo. Vamos a dar a ambos N's el mismo color rosa caliente que teníamos antes. Ahora quiero que este gradiente tenga una especie de línea dura en el medio. Entonces vamos a hacer que esta mitad superior del botón sea rosa más claro, y esta mitad del botón se va a quedar del mismo color rosa. Entonces para darle esa línea dura y
voy a hacer dos puntos justo en medio. Se puede ver que está en el medio porque nuestra ubicación está en 50 por ciento. Yo sólo voy a hacer de estos dos puntos de este lado un rosa más claro que este rosa es. Eso se ve genial. Entonces voy a copiar este color y pegarlo aquí también. Nuestro gradiente está hecho y se ve genial, perfecto, todo es maravilloso. El siguiente que hay que hacer es un derrame cerebral. Entonces vamos a mantener el trazo en el exterior. Voy a hacerlo alrededor de ocho píxeles. Vamos a bajar esta opacidad a, vamos a decir 15 por ciento. Genial. Entonces para el botón, estamos terminados con los estilos de capa en este momento. Como pueden ver, todo lo que acabamos de hacer está justo aquí. Entonces si necesito editar algo, solo
puedo hacer clic en trazo, editar a trazo y así sucesivamente. Pero voy a colapsar esto, solo haz que nuestra paleta de capas sea un poco más atractiva. Lo siguiente que hay que hacer es agregar algo de texto. Entonces solo voy a escribir texto de botón y mirar, nuestro texto es blanco para que no lo veamos. Voy a ir por aquí a la ventana de personajes y dar clic en el color y lo voy a hacer rosa caliente solo para que veas lo que está pasando. Veamos nuestro tamaño de fuente es de 18 puntos y tenemos espaciado entre letras de 100. Eso es absolutamente perfecto para lo que quiero hacer. Entonces lo vamos a arrastrar encima del botón y mirar ahora no lo podemos ver. Entonces voy a volver a hacer blanco el texto. Perfecto. Para que el texto sea un poco más fácil de leer, voy a añadir sólo un poco de sombra de gota. Entonces de nuevo, hice clic en una capa para abrir estilos de capa. Ahora voy a añadir una sombra de gota. Entonces vamos a mantener esto a una distancia de uno y luego spread de cero y un tamaño de también cero. El ángulo aquí es realmente importante. Normalmente uso un ángulo de 120 o 90 grados. Para este proyecto, creo que quiero hacer 90. Así que vamos a asegurarnos de que la luz global esté comprobada y eso va a asegurarnos de que estas sombras de gota estén todas en el mismo ángulo de 90 grados y sombras internas, cualquier cosa que hagamos a partir de ahora siempre será de 90 grados. Entonces bajemos esta opacidad al 30 por ciento. Eso es genial. Por lo que ahora puedes ver el texto es solo un poco más fácil de leer. Déjame apagarlo, volver a encenderlo. Mucho diseño de interfaz de usuario son estos pequeños cambios sutiles que los usuarios no necesariamente pueden notar fuera del bate, pero definitivamente está haciendo su vida un poco más fácil. Está bien. Pongamos este botón número 1 en una carpeta, y sigamos adelante. Botón número 2. Vayamos con un poco más de un botón duro. Por lo que esto también va a ser un poco más de un botón plano. Ahora hagamos otro 245 por 50. Hagámoslo nuestro color rosa favorito. En realidad ni siquiera me gusta el rosa. No sé por qué estoy usando esto. Entonces estoy acercando solo un poquito para que pueda conseguir un poco más de detalle orientado aquí con este botón. Voy a hacer de esto un botón de Twitter. Entonces, en primer lugar, vamos a añadir un icono de Twitter y algún texto, solo para mostrarte cómo podría ser eso. Entonces, en primer lugar, voy a hacer un área especial para el ícono de Twitter. Voy a poner una forma cuadrada aquí mismo. Solo estoy manteniendo presionado el turno mientras arrastro mi forma 50 píxeles por 50 píxeles. Como puedes ver, se está mezclando porque es el mismo rosa que la forma detrás de ella. Entonces vamos a hacer este rosa un poco más oscuro, solo un poco más perfecto. Entonces ahora voy a alejar el zoom. Voy a abrir Photoshop. Soy ilustrador, ignora eso. Por lo que abro ilustrador, tenía esta forma útil, forma Twitter, pajarito de Twitter. Voy a copiarlo y luego voy a
volver a Photoshop, lo voy a pegar. Ahora tenemos algunas opciones aquí. Voy a usar una capa de forma sólo porque
quiero poder cambiar la forma del pájaro y quiero poder redimensionarla sin perder parte del detalle. Entonces vamos a añadir una capa de forma. Aquí está, es rosa. Lo vamos a hacer blanco y lo vamos a poner encima de esa zona de ahí. Acerquémonos para que todo sea perfecto. Hagámosle unos 30 píxeles. Perfecto. Ponlo ahí mismo. Ahora vamos a añadir un poco más de texto de botón. Por lo que esta vez, aquí es donde los botones sociales. Entonces voy a escribir texto de botón social, todavía blanco, así que lo voy a arrastrar aquí mismo. No necesariamente estoy seguro si me gusta el espaciado en eso. Parece que las letras están demasiado separadas, así que voy a cambiar esto de nuevo a cero. Eso es genial. Entonces sólo lo vamos a mover al centro visual aquí. Perfecto. Entonces este es un botón plano, así que no vamos a agregar sombras de gota, no
vamos a agregar ningún gradiente. Este estilo de botón es un poco más fácil para los desarrolladores de hacer con los botones CSS. Entonces mantendremos esto como un estilo de botón plano y etiquetaré este botón 2. Ahora siempre paso y nombro todas estas capas, pero en interés del tiempo, no voy a hacer eso ahora. Botón número 3, este es un estilo de botón que uso todo el tiempo. Definitivamente es un botón visto común por ti, estoy seguro. Entonces aquí vamos otra vez 245 por 50 para esto. Lo vamos a volver a hacer rosa. Hagamos doble clic para abrir nuestros estilos de capa. Vamos a añadir otra vez una superposición de gradiente. Eso se ve horrible. Entonces cambiemos estos de nuevo a rosa. Para este, solo voy a hacer que el nivel de gradiente inferior sea un poco más oscuro. Perfecto. Queremos un gradiente sutil. Cuanto más duro es el gradiente, más barato suele verse el botón. Por lo que este gradiente es genial. Ahora vamos a añadir un trazo en el interior para mantener un poco más concreto
el tamaño y la forma del botón. Va a ser un píxel. Por el color, voy a probar este rosa oscuro en la parte inferior del botón. Entonces voy a oscurecer aún más este trazo. Queremos que esté un poco definido pero no demasiado definido. Esto es perfecto. El último paso para este botón es agregar una ligera sombra de gota, y todavía tenemos nuestro ángulo aquí de 90. Para esta sombra de gota, voy a hacer una distancia de uno, spread de cero y tamaño de dos píxeles. Solo bajemos esta opacidad al 30 por ciento. Genial. Añadamos un poco más de texto. Entonces voy a tomar el texto desde el primer botón y lo voy a copiar. Por lo que voy a mantener presionada la opción mientras hago clic en el texto del botón y lo arrastra hasta arriba de nuestro nuevo botón. Ahora todavía podemos ver que está aquí abajo, pero también lo tenemos de nuevo. Vamos a moverlo hacia abajo en la parte superior de nuestro botón. Perfecto. Esta vez, no creo que exactamente quiera que sea todo mayúscula. Entonces voy a volver a escribir texto de botón. Eso es genial. Una cosa más es que esta es una edición sutil que la mayoría de los usuarios no notarán, pero definitivamente es agradable y hace que tu botón se vea un poco más clasista. Vamos a abrir de nuevo nuestros estilos de capa. Esta vez voy a añadir una sombra interior. Empieza por arriba y lo vamos a hacer blanco. Descubre cómo se configura nuestro modo de mezcla para multiplicarse. Cambiemos eso a la normalidad para que podamos ver nuestro color blanco. Hagamos una distancia de dos píxeles de cero y tamaño de cero. Eso es un poco demasiado duro, así que vamos a bajar eso sólo un poquito. Vámonos tal vez 40 por ciento. Perfecto. Genial. Ahí hay un botón estilo número 3. Botón estilo número 4. Del mismo tamaño, vamos con un rectángulo redondeado y hagamos este radio esta vez 50, 245 por 50 es nuestro número mágico. Hagámoslo de nuevo rosa. Esta vez, vamos a hacer gradiente similar al último. Vamos a abrir el botón 3, y, ¿ves dónde dice FX aquí, esos son tus estilos de capa, así que vas a mantener presionada la opción, arrastra el FX hasta la nueva forma y suelta, y acabas de copiar todo los estilos de capa desde el botón anterior hasta este botón. Excepto que quiero algo un poco diferente, quiero tomar este trazo y quiero editarlo. En lugar de hacer un píxel, vamos por fuera ocho píxeles, similar al que hicimos aquí arriba. Perfecto. Entonces lo vamos a mantener en este color rosa oscuro. Ahora, estaba pensando que esta sombra interior se ve un poco demasiado intensa, así que vamos a tomar esto y vamos a hacer que sea sólo una distancia de un píxel, y vamos a bajar un poco la opacidad, vamos con 15 por ciento . Perfecto. Ahora creo que esto no es suficiente de un contraste como yo estaba queriendo, así que vamos a abrir el trazo de nuevo arriba y hacer esto sólo un poco más oscuro, ahí vamos. Perfecto. Tomemos el texto del botón de la última vez y lo copiemos. De nuevo, voy a mantener presionada la opción y moverla hacia arriba, y luego voy a mover este texto hacia abajo en la parte superior de este nuevo botón. Genial, hay botón número 4. Demos un nombre a esta carpeta aquí y sigamos adelante. Ahora, vamos a hacer unos botones de luz sobre un fondo más oscuro. ¿ Qué color debemos escoger para un fondo más oscuro? Ya sé, vamos a hacer rosa caliente. Escogiendo un tamaño arbitrario para la forma de este fondo, solo haciendo un rectángulo aquí, hagámoslo rosa caliente, todos estén contentos, vamos a darle un poco más de espacio aquí para nuestros botones. Perfecto. Pero el número 1, en el lado rosa, vamos a hacer el mismo tipo de botón que acabamos de hacer con un rectángulo redondeado de radio de 50 píxeles, 245 por 50. No lo podemos ver porque es del mismo color que el fondo rosa, así que esta vez sólo lo hagamos blanco. Agrega algunos estilos de capa, vamos a hacer otro diseño de estilo de ordenar aquí, y vamos a simplemente hacer una sombra de gota en lugar de ser este estilo de sombra de gota borrosa que estamos tan acostumbrados a ver, estamos lo va a hacer como una sombra de gota sólida. Entonces cambiemos la distancia a tres, extendiéndonos a cero, y tamaño a también cero, y ahora ves cómo es una sombra muy plana. Vamos a golpear esto multiplicar opacidad hacia abajo, muy bonito, vamos a hacer 15 por ciento, no, vamos 20. Impresionante. Ahora, vamos a agregar algo más de texto encima de eso, voy a escribir texto de botón, vamos a hacer este texto rosa, en realidad no lo
mantengamos en mayúsculas esta vez, tecleemos así. Perfecto. No quiero que el espaciado de letras esta vez, así que voy a volver a bajar esto a cero. Arrástrelo en la parte superior del botón y estamos dorados. Perfecto. Ahí está el botón número 5. Botón número 6. Vamos a hacer otro botón de estilo plano, esta vez vamos a hacer rectángulo en lugar un rectángulo redondeado que hemos estado haciendo, 245 por 50, ahí vamos. Vamos a mantenerlo blanco, y vamos a hacer lo mismo de una sombra de gota, esta vez va a ser de cinco píxeles de distancia, cero spread, y otro cero para tamaño. Vamos a, de nuevo, bajar esto a, vamos a ir 30. Ahora vamos a tomar el texto del último botón y volver a copiarlo, moverlo hacia abajo. Impresionante. Esta vez en realidad quiero que el texto sea un poco más oscuro, así que voy a tomar el texto y voy a probar el color que
vemos aquí abajo y hacerlo así de rosa oscuro. Botón 6. Impresionante. Botón 7. Tenemos una herramienta de rectángulo redondeado, y vamos a ir radio de cinco otra vez, volveremos a cinco, 245 por 50. Este estilo de botón va a ser muy similar al que ves aquí mismo, solo
va a ser una versión más ligera. Vamos a tomar esto, añadirle algunos estilos de capa como un gradiente. La sección superior es blanca, la sección inferior vamos a muestrear blanco, y luego la vamos a cambiar por solo un poco de gris más oscuro, va a ser muy sutil. Perfecto. A lo mejor un poco más, genial. Ahora vamos a añadir un trazo, así que vamos a volver a acariciar por dentro, un píxel, y sólo vamos a elegir un más oscuro, gris, tal vez un poco más oscuro, vamos a ir siete. Perfecto. A continuación es añadir una sombra de gota al fondo, vamos a hacer la misma sombra de gota que hicimos en ese otro botón, este de aquí, vamos a hacer una distancia de uno, tamaño de dos, y vamos a derribar esos a, vamos a ir 40 por ciento. Veamos qué tenemos aquí. Sigo pensando que el trazo es un poco demasiado oscuro, así que vamos a bajar eso una muesca, tal vez a. Un poco más. Perfecto. Hagamos que la sombra de gota sea un poco más oscura también. Cambiemos esto a la normalidad. Genial. El siguiente paso es agregar texto de botón atrás. En aras del tiempo, voy a copiar este texto de botón, moverlo hacia abajo. Esta vez lo voy a hacer un gris oscuro. Tenemos aquí arriba este gris muy oscuro de nuestras muestras, vamos a usar esa y ahí vamos. Por último pero no menos importante, es un estado de botón. Para este botón, cómo se vería al hacer clic en él. Pongamos esto en una carpeta, botón 7, y vamos a copiar esta carpeta. Entonces voy a arrastrar la carpeta aquí abajo, copiarla, entonces tenemos nuestra copia del botón 7. Vamos a cambiarlo al botón 8. Arrastremos el botón 8 hacia abajo. Para que parezca que está empujado, vamos a hacer algo en los Estilos de capa, vamos a añadir una sombra interior. En realidad, primero, tomemos nuestra superposición de gradiente y vamos a revertirla. En lugar de ir de luz a oscuridad, vamos de oscuro a claro, y luego vamos a añadir una sombra interior. Lo estamos manteniendo aquí arriba a 90 grados, y hagamos distancia de 4, tamaño de 3. Perfecto. Bajemos esto a 20. Genial. Ahora nuestro trazo se ve un poco loco porque aquí se puede ver este borde blanco. Vamos a editar el trazo y lo oscureceremos. No tan oscuro. A lo mejor iremos nueve. Genial. De acuerdo, una cosita más que podemos hacer es, podemos deshacernos de esta sombra de gota que teníamos antes y cambiémosla para que sea otra cosa. Cambiemos esto a blanco, y solo eliminemos este tamaño de dos píxeles y lo cambiemos a uno. Entonces vamos a derribar esto sustancialmente. Ahí vamos, así que agregamos solo un poquito de blanco justo aquí. Perfecto. Está bien, terminamos con botones. Pongámoslos en la carpeta de botones, y llamémoslo un día en los botones. Muy bien, vamos a mover nuestros botones aquí arriba. Ahora pasemos a los estilos de avatar. Vamos a hacer un par de diferentes, vamos a hacer un avatar circular y un avatar cuadrado. Empecemos con un avatar cuadrado. Vamos a empezar con colocar un avatar en nuestro tablero de arte aquí. Agarremos a nuestro amigo Anthony. Anthony es un poco grande aquí, así que hagámoslo, sin ofender a Anthony, un poco más pequeño. Vamos 140 pixels cuadrados. Perfecto. Ahora sólo vamos a tomar esta capa, vamos a añadir algunos estilos de capa encima de ella. Empecemos con un derrame cerebral. Entraremos porque si le agregas trazos más grandes al exterior, mira cómo el borde es un poco redondeado. Si vas por los bordes redondeados, esa podría ser una gran idea, pero nosotros no. Entonces pongámoslo en el interior y eso va a mantener la forma en 140 píxeles de ancho en lugar de 140 más ocho. Hagámoslo blanco. Ahora no lo puedes ver, así que vamos a añadir una ligera sombra de gota en la parte inferior. Ver esta sombra de gota realmente intensa se ve bastante cursi y bastante barato, así que vamos a hacer que sea un poco más sutil. Vamos a sumar una distancia de un píxel, un tamaño de dos y vamos a bajar esto a 30. Mira eso, es bonito y sutil. Lo bonito de este tipo es que se ve aún mejor cuando le agregas un color gris claro detrás. Mira eso. Hermosa. Aquí está nuestro avatar de Anthony número 1. Ahora vamos a meternos en unos avatares redondeados. Aquí es donde se pone un poco complicado porque hago las cosas un poco diferente a lo que hacen muchas otras personas. A mucha gente le encanta usar máscaras, a me encantan las máscaras y a veces me encantan las máscaras no a veces. Entonces lo voy a hacer a mi manera y por favor solo sepas que cualquier cosa que esté haciendo en Photoshop, si sabes de una mejor manera de hacerlo y es la forma en que te gusta hacerlo,
por favor ignorame y hazlo a tu manera. A mi manera no está bien, sobre todo cuando se trata de máscaras. Vamos a hacer 140 por 140 otra vez. Sólo estoy haciendo un círculo. Aquí está. Sólo para que podamos verlo, voy a hacerlo así de chillar. No es aburrido. Es bonito. Color azulado. Entonces vamos a tomar de nuevo a Anthony. Aquí vamos. Coloquemos a Anthony y luego solo lo vamos a posicionar sobre el círculo en alguna parte. No lo voy a hacer perfecto porque voy rápido aquí. Ahora tenemos estas dos capas. Tenemos nuestra forma aquí, una forma de círculo, y luego tenemos a Anthony. Voy a ir justo entre ellos y mantener presionada “Alt” u “Opción” y hacer clic. Eso acaba de recortar a Anthony justo en la parte superior. Ahora sé que muchos de ustedes están diciendo: “¿Por qué no estás simplemente haciendo una máscara en el círculo y aplicándola a Anthony?” A eso contesto, no lo sé. Esta es justamente la forma en que lo hago. Voy a tomar el círculo, voy a agregarle un estilo de capa. Si haces enmascaramiento, puedes simplemente agregar los estilos de capa a Anthony en su lugar. Voy a añadir un trazo al exterior esta vez, no, vamos adentro. Vamos a hacer ocho en el interior para mantenerlo en 140 por 140. Lo mismo, lo vamos a hacer blanco y luego vamos a añadir esta vez un Resplandor Exterior. No amarillo, cambiémoslo a negro y cambiemos esto a lo normal. Mira eso, eso es horrible. Se ve horrible. Entonces vamos a bajarlo bastante a cerca del 10 por ciento. Perfecto. Está bien, ahí está Anthony como círculo. Avatar 2. Avatar 3, vamos a hacer lo mismo. En realidad vamos a copiar esto más. Para poder copiarlo, tengo esta seleccionada. Voy a dar click alrededor de Anthony. No haga clic ahora, mantenga presionada Opción, arrástralo sobre. Perfecto. Ahora tengo Anthony toma 2. Llamemos a este avatar 3. Vamos a abrir esta carpeta, vamos a volver a dar clic aquí y para cambiar los estilos de capa. Antes de usar un Resplandor Exterior, desmarquemos eso. Esta vez, vamos a añadir una sombra de gota. Añadamos, en lugar de ser una sombra de gota como este avatar, lo
vamos a hacer realmente sólido. Entonces vamos a bajar el tamaño a cero. Perfecto. Entonces ahora tenemos esa línea dura aquí y hagamos este rosa caliente. Tiempos divertidos. Avatares, bam, lo hicimos. Tomemos estos dos avatares y los escondamos aquí por ahora. Perfecto. Haz un poco más de espacio aquí para nosotros. Lo siguiente que vamos a aprender es un estilo contenedor. Empecemos con un rectángulo redondeado. Nos vamos, radio de cinco está bien. Hagamos aquí como 250 por 280. Perdón, esto es aburrido. Detrás de esto, le
voy a dar un fondo de ese color gris claro que tenemos en este momento. Simplemente ponlo de vuelta aquí. Nada perfecto ahora mismo. Ahora tenemos nuestro rectángulo de fondo seis aquí, y luego rectángulo redondeado, también es gris. Entonces hagamos este blanco sólo para que podamos verlo un poco mejor. Perfecto. Entonces hagámoslo tener los mismos estilos de capa que éste sí. Sin derrame cerebral. Por lo que sólo vamos a añadir esa sombra de gota a esto. Haga doble clic, vaya a Sombra de sombra. Cambia esto a distancia de uno, tamaño de dos, y luego bajaremos esto a, vamos a ir 30. Perfecto. Siguiente paso. Añadamos una imagen a esto. Usemos otra cara. ¿ Cómo es ese sonido? Tenemos unos buenos avatares en nuestra carpeta por aquí. Vámonos con nuestro amigo David aquí. Ahí está, luciendo feliz. Va a ser tan feliz. Está en este tutorial. Ahora sólo lo vamos a volver a tumbar como lo hicimos antes. Entra en el medio, mantén presionada Alt u Opción y dale un click. Ahora David se aplica aquí. lo puedas mover arriba y abajo, ponerlo donde queramos, aquí mismo por ahora. En aras del tiempo, solo voy a echar un vistazo a
esto y decir que se ve bonito aquí mismo. Ahora agreguemos algo de texto encima de esto. Diga que esto es algo así como una tarjeta de miembro o una tarjeta espacial, si tiene espacios. Aquí puedes poner una imagen de un apartamento que amas o para Pinterest, algo un poco de inspiración, una portada de álbum, sea cual sea tu startup, esto podría funcionar para cualquier cosa realmente. Entonces vamos a agregar algo de texto aquí, y vamos a poner Bingo en Noches de Martes. Ni siquiera sé por qué decidí hacerlo. Probablemente una idea horrible. Apenas lo podemos leer. Entonces vamos a cambiar el color del texto a nuestro rosa favorito otra vez, y vamos a hacerlo un poco más pequeño. Entonces vamos con 13 puntos. Perfecto. Ahora vamos a sumar un par de avatares aquí abajo, avatares circulares. A lo mejor es gente que asiste al Bingo los martes por la noche, tal vez es gente que le gusta el Bingo en las noches de los martes, ¿quién sabe? Entonces hagamos un par de círculos muy pequeños. Vayamos 25. Sí, vamos a hacer 25. Acerquemos para que podamos ver un poco mejor aquí. Entonces vamos a añadir algunas caras más. Colocemos aquí a nuestro amigo Daniel. Oh, es tan grande. De nuevo, lo vamos a hacer a mi manera y sólo vamos a ponerlos rápidamente encima. Haga clic en el medio. Ahí está. Está un poco recortado, así que sólo voy a hacer esto un poco más pequeño y ponerlo encima. Perfecto. Entonces ahí está Daniel. Pongámoslo en su propia carpeta Daniel. Genial. Vamos a copiarlo, pierde más de cinco píxeles, 1, 2, 3, 4, 5. Aquí está Daniel. Vamos a añadir de nuevo a Anthony aquí. Entonces renombrame eso, encontremos a Daniel y deshagamos de Daniel, y coloquemos a Anthony aquí en su lugar porque el martes por la noche Bingo tiene dos fans, y ellos son Daniel y Anthony. Perfecto. Eso es genial. Entonces vamos a sumar un área aquí abajo en la parte inferior para poner algunas palabras clave, etiquetas o tal vez un poco de corazón para que también te guste el Bingo los martes por la noche. Entonces, primero agreguemos un poco de regla separadora aquí abajo con la herramienta de línea. Vamos a hacer este píxel que puedes ver aquí arriba, sólo
vamos a arrastrar esto a través. Perfecto. Ahora es blanco, así que realmente no lo puedes ver. No, no lo es. Es gris. No es lo suficientemente gris afuera, hay un poco de luz. Entonces voy a probar este color gris desde el costado aquí. Perfecto. Ahí está nuestra regla. Voy a dejar que esto respire un poco, así que voy a mover Bingo los martes Noches arriba cinco píxeles, y los avatares suban dos pixeles, vamos tres pixeles. Perfecto. Entonces, empecemos agregando un poco de corazón. Entonces voy a abrir Illustrator, agarrar el corazón que tengo listo aquí, y lo voy a pegar de nuevo como capa Shape para poder redimensionar y cambiar el color. Cambiemos el color a rosa para que podamos ver un poco mejor y hacerlo un poco más pequeño. Vamos 12 pixeles. Perfecto. Eso podría ser un poco demasiado pequeño. Entonces voy a alejarme y ver qué pienso. No, creo que ese es un gran tamaño. ¿Qué hay de ti? No te oigo. Entonces estoy asumiendo que estás diciendo: “Sí, es un buen tamaño”. Entonces vamos a añadir algunas etiquetas al fondo ahora. Para obtener este estilo de texto del formulario, voy a copiar estas letras y hacer clic y pegar. Cambiemos nuestras etiquetas a Hombres
solteros, bingo, y diversión. Al parecer, el bingo de la noche del martes es noche de soltero. Entonces digamos que nuestro color de enlace es rosa. Entonces hagamos estas comas no rosas porque no son enlaces. Hagámoslos un color gris en su lugar. De esta manera, si hago clic en Hombres solteros, me pueden llevar a todos los eventos de hombres solteros. A lo mejor, el hierro es dibujar en las damas a esta noche de hombres solteros. No lo sé. Ustedes chicos, estamos completamente terminados con todos los estilos de UI. Esperemos que eso no fuera demasiado atroz. El siguiente tutorial te voy a mostrar cómo tomar todos estos elementos
y ponerlos juntos en una página de inicio de la interfaz de usuario real, y va a ser épica.
3. Crear un one pager o resumen ejecutivo para una startup: Hola chicos. Bienvenido al Tutorial Número 2. En este tutorial, vamos a tomar todo lo que aprendimos en el primer tutorial y aplicarlo a un sitio, y probablemente aprenderemos algunas cosas nuevas en el camino. Para este sitio, vamos a estar diseñando un sitio Squirrly de una página para una startup falsa. A la startup se le llama iniciadores de fiestas. Lo que hacen los iniciadores de fiesta es, si tienes una fiesta coja, patética que estás lanzando, nadie lo está pasando bien, o nadie está bailando, puedes pedir un iniciador de fiesta para llegar a tu fiesta lo antes posible y ponerlo en marcha. A mí me gusta empezar primero con un documento de photoshop que tiene una cuadrícula 960. He puesto el enlace 960.js en la sección de recursos de la página de Skillshare, que puedas ir allí y descargar la cuadrícula por ti mismo, o puedes hacer una cuadrícula tú mismo. Esta es una cuadrícula estándar de 12 columnas sin embargo, que siempre me gusta usar. Por lo general, estoy súper organizado y pongo mucha atención a los píxeles, pero por el bien del tiempo, no voy a hacer nada de eso. Voy a tratar de ser muy organizado mientras también soy rápido, así que veremos cómo va eso. Normalmente me gusta empezar con tres carpetas; encabezado, cuerpo y pie de página. Voy a dividir el sitio en tres secciones, ya que este es un sitio de Squirrly basado en sección. Para el encabezado, vamos a empezar con una pequeña barra de encabezados aquí. Van a tener unos 70 píxeles de alto, 70 y vamos a hacerlo un poco más ancho que los lienzos reales aquí, porque vamos a añadir una sombra de gota al fondo, y realmente no queremos que se muestre por los lados. Para esto, vamos a añadir una sombra de gota, como dije antes, distancia de uno, tamaño de dos, y luego vamos a hacer un pequeño pase aquí de 30 por ciento. Eso se ve genial. ¿Qué necesitamos a continuación? Creo que necesitamos un logo. Aquí tengo un pequeño archivo de recursos listo para salir. Tiene algunos de los estilos de botones que necesitamos, avatares, y también tiene nuestro logo de iniciadores de fiesta. Ahora, este logo que hice el globo está separado del texto real como se puede ver, y eso lo hice solo para que podamos cambiar el color del globo y el texto si queremos independientes de la otra parte. Pero por ahora, sólo lo voy a mantener como rosa y gris oscuro, y luego lo voy a arrastrar hacia nuestro nuevo documento aquí. Se ve un poco grande, así que voy a hacer unos 180 píxeles de ancho. Ahí vamos. Vamos. Ahí. Entonces esta línea de aquí es la línea central, así que la voy a alinear aquí en medio de la página. Ocultemos nuestros guías por un segundo y echemos un vistazo a eso. Creo que eso es perfecto. Lo siguiente que quiero hacer es agregar un pequeño enlace aquí arriba en la esquina que diga: “Quiero ser un iniciador de fiesta para la gente que también quiere unirse y convertirse en un iniciador de fiesta”. Voy a justo de arriba de mi cabeza, digamos que queremos que sean 11 puntos. Todas las gorras, “quiero ser un iniciador de fiestas. Mostrémosle a nuestros guías, y pongamos esto aquí arriba, y anclarlo en esta guía aquí. Eso es perfecto. Genial. Eso se ve un poco demasiado grande sin embargo. Yo quiero que sea bastante sutil, así que voy a bajarlo otro punto aquí, al 10. Creo que eso se ve bastante bien. Se ve discreto. El encabezado en realidad se hace eso era un pedazo de pastel. Vamos a tomar estas capas y ponerlas en la carpeta del encabezado. Ahora, vamos a abrir el cuerpo y trabajar en la Sección 1. Mostrémosle a nuestros guías. Ahora, la sección va a ser una foto de ancho de navegador grande con algún texto importante sobre qué es los iniciadores de fiesta, solo un par de líneas, y luego un gran botón de llamada a la acción por aquí. Ahora, definitivamente quiero que todo esto esté por encima del redil, que voy a decir es por lo menos, digamos 715 píxeles por la línea aquí. Yo quiero mantenerlo bien por encima de eso. A lo mejor vamos a enchufar nuestra imagen primero, y luego ver qué pasa. Voy a colocar nuestra foto grande, que no se ve tan grande ahora mismo, pero voy a hacerlo grande. Voy a estirar esto, y mira lo grande que es. Obviamente se va pasó esta línea que realmente no quiero. Yo quiero que solo esté retomando este apartado. Entonces voy a centrar esto aquí un poco. Vamos a subir esto. Eso se ve genial. Entonces voy a hacer un poco de selección rectangular. Ocultemos este pastel porque no queremos que la gente piense que los entrantes de la fiesta siempre aparecen con un pastel. Eso no queremos. Eso sería horrible. Yo sólo voy a enmascarar eso fuera de ahí. Perfecto. Aquí está nuestra gran imagen bien por encima del redil, justo como me gusta. Ocultemos nuestras guías y añadamos algo de texto. Por aquí en este otro documento, me gusta tener esto a mano y tener esto listo para ir, así puedo referirlo como estoy diseñando. Tenemos el texto de nuestro encabezado memorizado por aquí. Está listo para salir, así que solo podemos agarrar de ella cuando necesitemos algo específico. Voy a agarrar un encabezado H2, y arrastrarlo encima. Se trata de dónde quiero mi texto, así que sólo voy a escribir un poco sobre los iniciadores de fiesta. Se va a decir, no hagamos esas gorras, ahí vamos: “¿Tu evento no va como estaba planeado? Nadie está bailando, los invitados no se están divirtiendo”. Para que ese texto no se vea muy notable en la parte superior de la foto, y esta foto va a estar dimensionando dinámicamente a medida un usuario abre su ventana y la hace más pequeña. Queremos que tenga algo detrás de él para cerrar esa brecha ahí. Voy a añadir un poco de blanco detrás del texto. Aquí vamos. Voy a mirarlo ahora mismo. A lo mejor así. Seguro. Copiemos esto hacia abajo y arrástrelo. Con los partidos de segunda línea, luego jalar esto por aquí. Alejemos el zoom para ver cómo se ve eso. Voy a tirar de esto aquí un poco. Eso es genial. Ahora, vamos a añadir una línea de texto más que dice, en gorras, “Empezamos la fiesta”. Perfecto. Vamos con nuestro color rosa favorito. Muestra este rosa aquí arriba. Pongamos el texto en la parte superior, y en realidad hagamos que este texto sea blanco. Genial. Creo que eso se ve bastante bien. Lo último aquí, vamos a reventar eso, es agregar, nuestro botón gigante de llamada a la acción. Entonces para el botón, voy a acercarme aquí. Voy a probar algo de este texto H2, y pegarlo, sólo para que pueda obtener el texto aquí. Entonces el botón va a decir: “Necesito un iniciador de fiesta ahora”. exclamación. Eso se ve un poco grande, eso va a hacer que el botón solo sea una pestaña más grande de lo que quiero, así que voy a bajar esto a 16 puntos. Sí, eso es genial. Añadamos el fondo del botón. Vamos a hacer ese botón súper redondeado que aprendimos antes, el que tenía un radio de 50 píxeles. Hagamos 335 por 50. Genial. Ajustar esto aquí en consecuencia. Entonces para éste vamos a hacer un gradiente, y esta vez vamos a hacer azulado, porque creo que ese color rosa se está haciendo un poco sobre-uso. Hagamos este gradiente, vamos a muestrear aquí para nuestro esquema de color de iniciadores de fiesta. Déjame poner este color azulado, y vamos a hacer este de abajo aquí un poco más oscuro. Perfecto. Nuestro siguiente paso aquí es agregar ese trazo en el exterior de ocho píxeles, y luego golpear la opacidad hacia abajo. Vayamos al 10 por ciento. Sí, eso me gusta. Hagamos ahora blanco este texto, un poco más notorio. Para que sea aún más notable, agreguemos una sombra de gota debajo del texto. El drop shadow solo va a ser una distancia de uno, spread de cero, y tamaño de cero. Entonces bajaremos la opacidad a eso está fresco, 35 rad. Entonces, movamos ese botón para que quepa en nuestras guías. Aquí está nuestro botón, mueve esto, queremos que todo quepa en nuestra cuadrícula. También vamos a asegurarnos de que este texto esté bien, así que vamos a seleccionar todo nuestro texto, y mantenerlo en Check here. Perfecto. Está bien. La última parte de la Sección 1 es, queremos mostrar claramente si hay un iniciador de fiesta listo para ir a la derecha tú, y quién es ese iniciador de fiestas. Dibujemos algunas guías aquí debajo de la foto. Hagámoslo de 70 píxeles de altura. Vamos 75, y no queremos rosa, lo siento, queremos blanco. Arrastremos otra guía hasta el fondo aquí. Entonces ahí está donde está esta siguiente sección. Lo primero que quiero agregar aquí es un avatar circular. Donde voy a tomar un círculo, hagámoslo unos 35 píxeles. Hagamos nuestro color para que podamos ver eso. Vamos a tropezar con esta guía aquí, y ahora sólo vamos a colocar la foto de Anthony en este círculo. Hazlo muy pequeño. Eso es genial. [inaudible] en la parte superior del círculo. Ahora, voy a hacer la técnica de enmascaramiento. Voy a mantener presionada “Comando”, clic en el “Círculo” y luego ir a Anthony y dar clic aquí en este “Botón de enmascaramiento”. Perfecto. Ahora podemos borrar el círculo. Ahora quiero agarrar algo de la H2 otra vez. Agarremos a H2, arrástrelo, y vamos a decir, “Anthony está de pie”. A continuación, queremos mostrarte que Anthony está cerca de ti, y también que sabemos dónde estás. Porque podemos basarnos en el dispositivo que estás mirando o en la computadora que estás usando. Bueno, servicios de localización donde estás en este momento. Queremos que sepas que hay una fiesta iniciada cerca de ti, específicamente. Para hacer eso, voy a hacer un pequeño pin de mapa que tengo, y tengo uno abierto en Illustrator aquí, solo
voy a copiar esto y pegarlo en Photoshop. Es blanco, por lo que no lo podemos ver. Entonces lo voy a cambiar a rosa. Eso es un poco grande, está compitiendo con la foto de Anthony. No queremos que se vea más importante que Anthony, así que hagámoslo pequeño. Perfecto. Entonces acerque porque aquí voy a hacer un poco de efecto, te
voy a enseñar a hacer un efecto reflectante. Lo he copiado uno encima del otro, el de abajo, la nueva forma que acabo de crear, lo
voy a reflejar hasta aquí. Lo siento, está volteado. Vamos a voltear verticalmente. Entonces me voy a llevar la opacidad, y la voy a bajar a 20. Voy a hacer una máscara de capa sobre ella. Ten seleccionada la máscara de capa, ve por aquí y agarra nuestro ingrediente predeterminado, y solo dibuja una línea aquí mismo. En cualquier lugar está bien, pero ahí es donde lo recomiendo. Ahí vamos, es bonito y sutil. Voy a poner esto en una carpeta titulada “Pin”. Justos. Entonces Anthony está de pie, y vamos a copiar algo más de texto por aquí porque queremos que esto diga el nombre de su ubicación. Hatton, Nueva York. Encantador. Entonces basemos eso un poco mejor, no en el espaciado. Sección 1 está completa, así que tomemos todo lo que acabamos de hacer de la Sección 1 y lo pongamos en la carpeta de la Sección 1. Pasemos ahora a la Sección 2. Aquí está nuestra guía para dónde está terminando la Sección 1, así que empecemos un nuevo fondo. Sólo voy a mirarlo y decir que esta talla se ve bien por ahora, y voy a hacer que sea azulado. Ahora esta sección sólo va a ser para un poco
más de información sobre qué es los iniciadores de fiestas y qué hacen. Estoy notando ahora que aquí mismo, tengo un poquito de mi imagen sobrante de antes, porque la pasé en patineta. Voy a asegurarme de que me deshaga de mi imagen. Volvamos a volver a la Sección 1, voy a seleccionar, mostrar de nuevo mis guías. ¿ Lo ves? Está justo aquí. Sólo un poquito. Voy a tomar un rectángulo, luego entrar en mi máscara de capa aquí, voy a pintar en reset su perfecto. Vamos a colapsar esta sección, volvamos a la Sección 2. Tenemos un fondo azulado, y ahora quiero añadir una sección aquí. Mi fiesta es horrible, y entonces por aquí va a ser otra sección que diga un poco más sobre los iniciadores de fiesta. Para la primera sección, mostrar nuestras guías, vamos a dibujar una forma, sólo un rectángulo, un rectángulo blanco, y tener un poco de sombra de gota. Dibujemos un rectángulo, y voy a globalizar la altura porque sé que este es el ancho que quiero porque lo estoy guardando dentro de las guías. Pero por la altura, simplemente lo estoy ocultando. Entonces ahí está nuestro rectángulo blanco, ocultemos la guía, echemos un vistazo. Vamos a agregarle un poco de sombra de gota sutil. [ inaudible] uno, tamaño de dos, pongamos un cero, y luego bajemos esto a 30. Perfecto. Queremos un texto un poco más grande, así que voy a agarrar este encabezamiento, este más grande, y voy a subir en la esquina y voy a bajarlo 40 píxeles desde arriba, uno, dos, tres, cuatro. 40 píxeles de este lado, uno, dos, tres, cuatro. Entonces voy a hacer una guía aquí porque voy a poner algo de texto corporal aquí, quiero asegurarme de que lo tenga en el lugar correcto. Aquí está el texto del cuerpo, este texto de relleno Lorem Ipsum. Va a arrastrarlo a estas guías. Perfecto. Voy a esconder a los guías, y voy a cambiar esto a, “Ayuda a mi fiesta sopla”. A mí me gusta cómo se ve eso. Esto es, dar derecho a esto, Casilla 1. Ponga estos en esa carpeta, y luego vamos a mostrar las guías, copiarlo manteniendo presionadas la “Opción” y “Shift”, arrastrándolo por encima. Ahora me estoy dando cuenta de que mi copia corporal no está ahí, así que voy a empezar de nuevo. Asegúrate de que mi copia corporal esté en la carpeta de la Caja 1. Voy a mantener presionada “Opción”, “Shift” mientras arrastro. Muévete meticulosamente ahí mismo. Perfecto. Oculta las guías y cambiemos la parte superior de esto a “¿Qué es un iniciador de fiesta?” Aquí están nuestras dos secciones. No perdí el tiempo haciendo copia porque esto no es una startup real, pero en un caso de que esta fuera una verdadera startup, pasaría horas cultivando la copia perfecta para esto. Por ahora, vamos a usar algún texto de relleno. Esta sección se ve un poco aburrida gráficamente, así que quiero agregar solo un icono al centro aquí para agregar algo de peso visual en el medio. Lo que voy a hacer es que voy a hacer un círculo, digamos 55 píxeles, voy a asegurarme de que esté aquí en el centro, y lo voy a hacer azulado. Muestra eso. Por lo que tenemos este círculo azulado encima de ambas cajas. Ahora lo que voy a hacer es, voy a añadir el globo del logo al círculo. Entonces voy a subir a la cabecera al logo, tomar el globo y copiarlo. Tengo dos globos, voy a mover el nuevo globo a la sección de cuerpo, Sección 2. Contraer las carpetas de encabezados, así que ahora bajemos nuestro nuevo globo. Consíguelo en el centro aquí. El rosa en el azulado se ve un poco demasiado, así que voy a hacer este gris oscuro. Impresionante. A continuación se encoge un poco esto, vamos a hacer 410. Hagamos un poco más. completado la sección 2. Pongamos todo en la Sección 2 y pasemos a la Sección 3. Sección 3 es la más complicada porque queremos mostrar quiénes son los iniciadores de la fiesta. Esta sección se va a titular, Conoce a los iniciadores del partido. Vamos a mostrar, como carrusel,
un montón de entrantes de fiesta que están cerca de ti, específicamente. No necesariamente queremos mostrar a todos los iniciadores de fiestas, porque si estás ubicado en Chicago, realmente no
quieres ver a los iniciadores de fiestas en Austin. Vamos a titular esta sección, Conoce a los Starters de Fiesta, que haré tomando nuestro Título 1,
escribiendo, Conoce a los Starters de Fiesta. Voy a mostrar mis guías y pasa esto a esta guía aquí mismo. Voy a asegurarme de que sean 70; 1, 2, 3,
4, 5, 6, 7 píxeles de la parte superior de la sección. Voy a deshacerme de esta guía que creé antes. Perfecto. Ahora queremos demostrar que estos están cerca de ti. Vamos a tomar este pin en Manhattan, Nueva York y vamos a bajarlo a esto. Eso fue en la Sección 1, pin Manhattan, Nueva York. Voy a copiar eso y bajarlo a la Sección 3 aquí, colapsado Sección 1. Perfecto. Tenemos esto de nuevo, y quiero que diga esta vez,
Near Manhattan, Nueva York. Todos los chicos que van a mostrar, y las chicas, van a estar cerca de ti. En este caso, estás en Manhattan, porque ahí es donde estoy yo. Perfecto. El siguiente paso es mostrar a nuestros iniciadores de fiesta. Queremos mostrar su foto, su nombre, y dónde se encuentran, y cuántas fiestas han comenzado. Por aquí, he pre-hecho a Anthony. Está listo para irse. Tiene un tamaño perfecto para la grilla. Yo sólo lo voy a agarrar y lo voy a arrastrar a este documento aquí, y luego lo voy a alinear realmente agradable. Pixel perfecto, aquí mismo. Entonces, por el bien del tiempo, sólo
me voy a llevar este y voy a copiarlo. Si estuviera haciendo esto de verdad, en realidad
lo haría de esta manera. Primero copiaría a Anthony cuatro veces para ser perfecto en la cuadrícula, luego cambiaría el nombre de las carpetas y cambiaría toda la información para cuatro personas separadas. En realidad no me gusta repetir ninguno de los contenidos para burlas porque me gusta que se vea lo más cerca posible de lo real. Normalmente no me gusta usar lorem ipsum o repetir imágenes. Pero por interés del tiempo, tenemos que hacerlo de esta manera porque no quiero aburrirlos chicos. Por lo que tenemos a nuestros cuatro entrantes de fiesta alineados perfectamente en la parrilla, luciendo bien. Todo está genial. Ahora necesitamos agregar algunas flechas a cada lado para el carrusel. Tenía una flecha en mi archivo de Illustrator aquí. Voy a copiarlo, pegarlo como capa de forma, y lo voy a hacer gris oscuro porque ahora mismo es blanco. No lo podemos ver. Ahí está. Es bastante grande. Yo lo voy a hacer un poco más pequeño porque vamos a salir de la grilla en esta. Nos vamos fuera de la red, chicos. No queremos que vaya demasiado lejos fuera de la grilla. Esto es perfecto. Impresionante. Voy a copiarlo y darle la vuelta por el otro lado, y moverlo hacia arriba. Perfecto. Demos un paso atrás y echemos un vistazo. Agradable. Entonces tenemos a Anthony aquí, empezó 41 fiestas. En el archivo fuente que les voy a dar chicos, esto tendrá cuatro personas diferentes en él, así que no se preocupen por eso. Lo siguiente que tenemos que hacer es mostrar cómo se ve cuando se da la vuelta sobre uno de estos. Estoy pensando que sería realmente genial si pudieras saber cuándo alguien está disponible ahora mismo porque estos son solo iniciadores de fiesta que están disponibles cerca de ti. No necesariamente están disponibles en este momento. A lo mejor ya están en una fiesta y sólo uno de ellos está disponible en este momento. Por lo que queremos mostrar que Anthony está disponible en este momento y, cuando te
vuelvas, puedes hacer click y que él inicie tu fiesta; hazlo empezar. Para el vuelco de Anthony, vamos a tomar su imagen aquí. Vamos a hacer doble clic, subir el estilo de capa, y vamos a hacer una superposición de color. Aquí vamos a seleccionar nuestro color rosa favorito y
bajar esto a 75 por ciento de opacidad. Muy bonito. Voy a copiar este texto porque quiero usar el mismo estilo de texto. Voy a pegarlo y teclear, Save my Party. Tráelo arriba, y luego justo detrás de él, voy a añadir un fondo. Eso es demasiado redondeado. Vamos a ir radio de cinco píxeles. Perfecto. Yo quiero que esto sea rosa, y luego voy a hacer que mi texto no sea gris. Hagámoslo blanco. Retrocede aquí y echa un vistazo. A mí me gusta. ¿Qué opinas? No te oigo. Esperemos que me estés respondiendo. Está bien. También queremos mostrar a nuestros desarrolladores que esto es de hecho un rollover, porque cuando consigues este PSD empaquetar para mandar a alguien a codificar realmente, van a estar un poco confundidos si no indicas que es un rollover, porque van a me pregunto por qué es así. Para hacer eso, me gusta simplemente colocar una mano de cursor en la parte superior. Aquí está, sólo para demostrar que esto es de hecho un vuelco. Lo último que quiero hacer aquí es agregar algo detrás del contenedor que solo diga: “Oye, Anthony está disponible ahora”. Nos vamos a llevar 41 iniciador de fiesta y vamos a copiarlo, pegarlo aquí mismo, y cambiarlo a, Disponible ahora. Un poco más cerca aquí, y luego detrás de él, voy a hacer sólo un rectángulo detrás del contenedor que es rosa caliente, y luego cambiaremos el texto a blanco. También, como mencioné, queremos que esté detrás del contenedor, así que voy a arrastrar a los que están detrás. Perfecto. Vamos a golpearlos un poco más cerca. Agradable. Esa sección está casi completa. Recuerda cómo, en el primer tutorial, te
dije que a veces se ve bien cuando tienes estos pequeños contenedores sombríos si pones un fondo gris muy claro detrás de ellos? Creo que lo haremos aquí. Creo que eso va a ser realmente agradable. Voy a ir detrás de todas estas capas y voy a añadir un gris claro detrás. Creo que eso se verá realmente bien. Aquí está nuestro gris claro. Sí, a mí me gusta. La sección 3 es donezo. Está bien. Chicos, estamos en la última sección, que es el pie de página. Normalmente, si esto no fuera un solo buscapersonas, probablemente
tendríamos muchas cosas que poner aquí. Podrías poner Twitter, enlaces de
Facebook, podrías poner términos y condiciones, puedes hacer enlaces al blog, otras secciones del sitio, pero por ahora, solo tenemos un copyright. Eso es todo lo que necesitamos para poner aquí. Voy a copiar desde aquí arriba algo de la copia corporal. Minimicemos todo esto. Ponga en el pie de página, y sólo voy a escribir, Opción,
G, que hace un símbolo de copyright, 2013 Party Starters. Muestra a nuestros guías y pon esto en el centro. Encantador. Estoy pensando que hagamos este pie de página rosa caliente solo para que parezca un poco más interesante, porque se ve un poco soso ahora mismo. Rosa caliente, y eso significa que necesitamos cambiar el texto a blanco. Hagamos eso un poco más pequeño porque el copyright no es muy importante. Bueno, es importante, pero ya sabes a lo que me refiero. No es tan importante como los propios iniciadores de la fiesta. Está bien. Ahí lo tenemos. Vosotros chicos, lo lograsteis y terminamos. Esto ha sido impresionante. Por favor háganme saber si tienen alguna pregunta, estoy aquí para ustedes. Mi nombre es Meg Lewis. Mi correo electrónico es meg@ghostlyferns.com. Estar en contacto. Gracias, chicos.