Photoshop para emprendedores: maquetas de diseño web

1. Photoshop para emprendedores: maqueta de diseño web: Oigan, todos, mi nombre es Jeremy Deegan, y hoy vamos a construir un simulacro de diseño Web. Básicamente, este es un boceto rudo o una plantilla sencilla que enviaremos a un diseñador gráfico o desarrollador web para que cree nuestro sitio web para nosotros, como emprendedor, realmente no deberíamos estar gastando mucho tiempo en cosas que deberíamos estar haciendo. Entonces si no tienes habilidades especiales y diseño gráfico o desarrollo Web, probablemente quieras dejar que alguien más que tenga esas habilidades se encargue de eso por ti. Ahora queremos crear un simulacro básico y Photoshopped para mostrar a estas personas para que cuando empiecen a desarrollar el sitio web, tengan un entendimiento básico de lo que estás tratando de ir. Y entre más información que les puedas proporcionar, más fácil va a ser. Entonces sigamos adelante e imaginemos por un segundo que eres dueño de un restaurante de helados, y yo soy un cliente que se acerca al mostrador, y les digo, me gustaría un helado de helado. Después de tener muchos años de experiencia en el negocio de los helados, sabes que a todos les gustan sus sundaes de helado de manera diferente. Entonces me preguntaste, ¿Qué quieres? Vainilla o chocolate? Y yo digo: Bueno, Bueno, vainilla, claro. ¿ Y dices que quieres plátanos? Y yo digo, Claro que hay plátanos en un helado helado y tú dices: OK, bueno, bueno, ¿qué pasa con las nueces? ¿ Te gustaría unas nueces en la parte superior del sundae? Y yo voy, No, no quiero nueces. Soy alérgico a los frutos secos. O simplemente haciendo algunas preguntas simples, inmediatamente averiguas lo que esta persona quiere y no quiere. Y cuanto más información le brindes al artista del diseño gráfico o al desarrollador del sitio web ,más fácil será para ellos hacerlo bien la 1ª 2ª o tercera vez, , en lugar de tener que ir y venir constantemente y tratar de adivina lo que estás buscando. Entonces de vuelta en nuestro ejemplo, si subo a tu restaurante de helados y vengo al mostrador y digo: Oye, Oye, me gustaría un sundae de helado, vainilla con plátanos y látigo fresco y una cereza en la parte superior. A lo mejor un poco de jarabe de chocolate, pero sin nueces, porque soy alérgico a esos. Bueno, no tenías que hacerme ninguna pregunta y sabes exactamente lo que quiero. Se puede volver atrás y empezar a hacer eso de inmediato, y eso es una especie de lo que estamos haciendo aquí. Vamos a hacer un diseño muy básico de un sitio web y simplemente poner algo de información cruda para que podamos darle eso a los artistas del diseño gráfico o al desarrollador del sitio web y hacerles saber qué es lo que estamos buscando. Entonces lo primero que vamos a hacer en este curso es que vamos a apuntar algunas ideas de lo que queremos en nuestra página web. Entonces haremos un boceto áspero a mano solo para obtener algunos diseños básicos. Y suele ser más fácil hacer esto a mano porque rápidamente puedes lápiz o colorear y o o anotar en una servilleta. Cómo crees que debería verse esto, y si no se ve bien, puedes tirarlo y empezar de nuevo. Entonces, una vez que tengas una buena idea de eso, entraremos en photoshop y seguiremos adelante y crearemos algunos elementos muy básicos y agruparlos juntos para que podamos moverlos y ver cómo se alinearía con un diseño de sitios web. Entonces sigamos adelante y empecemos en este curso 2. Investigación de sitios web para las ideas de diseño: Siempre que empiezo a hacer algún trabajo de diseño, lo primero que me gusta hacer es investigar, y esto me permite salir por ahí y ver lo que está funcionando para la gente y lo que no está funcionando para la gente y ayudar a que fluyan los jugos creativos de cómo yo podría decir, quiero diseñar parte de esta información en mi propio diseño Web simulacro arriba. Por lo que planteé elsitio de ingresos inteligentes y pasivos, sitio de ingresos inteligentes y pasivos, y esto es propiedad de Pat Flynn, y le gusta ser la cara detrás de esta empresa. Por lo que se fuera a menudo se ven muchas fotos e imágenes de él en el sitio. Y si vas a esta página web, lo primero que vas a ver es una imagen muy gigante de él, y eso solo ayuda a reforzar su marca personal. Pero seguí adelante y me desplazé hasta el fondo, y vamos a mirar la mitad inferior de su vista para que podamos hacer un tipo de desmontar lo que ha hecho aquí y darte algunas ideas de algunas cosas diferentes que puedes hacerlo en el muy superior. El primero que vas a ver es una barra de menús y yo sólo voy a hacer algunos resaltes básicos aquí. Esto va a ser un poco crudo, pero te ayudará a darte una idea de lo que está pasando. Por lo que tenemos esta barra de menús en la parte superior que he resaltado en rojo, y esa barra de menús se rompe en tres secciones. El primero que tenemos es el logotipo, y luego tenemos los enlaces para el sitio, que es muy común en todos los sitios web. Disculpe, y luego lo siguiente que van a ver son sus reportes de ingresos. Esto es algo que ha estado haciendo desde hace mucho tiempo, y eso es solo mostrar cuánto dinero ha ganado a lo largo de los años. Pero básicamente, esta barra de menús se queda cada vez que nos desplazamos hacia arriba y abajo por el sitio web. Entonces una cosa es siempre estás viendo este logotipo, y eso es algo que ayuda a reforzar la marca. Y entonces siempre tenemos estos enlaces para que puedas ir y dar click en cualquiera de estos enlaces. No importa dónde estés en el sitio web, siempre puedes alejarte de esta página a otra página. Ahora, la siguiente sección que vas a notar ya que tenemos este gran fondo blanco a azul que se desvanece . Y todo esto se siente como una especie de sección grande por el trasfondo común que está compartiendo. A pesar de que ahora tenemos cosas diferentes pasando aquí, todo esto es contenido de su vista. Por lo que tenemos algún post en la parte superior del afiliado Resource es que tiene y luego sus imanes magra , y vamos a seguir adelante y echar un vistazo a todos estos ahora mismo. Pero en la parte superior de esta imagen de fondo, se rompe en dos mitades. Entonces tenemos esta gran mitad en la parte superior, y entonces eso se rompe en dos mitades más aquí. Entonces estos son su post, y estos pueden ser posts bloqueados, YouTube, post o podcasts que en realidad ha sacado. Y tiene tres bonitas, muy pareadas imágenes aquí, dadas en un aspecto muy bonito, legible y muy fácil de ver con un poco de relleno a la izquierda. Y ahora mismo, verás este relleno todo el camino por el costado de la página porque nunca quieres poner nada por completo porque se podría cortar Ahora. Sí puso su en reportes de ingresos por todo el camino para que eso pudiera ser cortado. A lo mejor no le preocupa tanto eso. Y hoy, con diseños de sitios web receptivos, no es un factor tan grande. Pero es agradable tener un poco de relleno a izquierda y derecha. Por lo que tenemos estos tres post y bonito y aun diseño pasando aquí y luego abajo que tenemos este recurso de confianza es sección. Por lo que esto se rompe de nuevo en tres imágenes más. Tenemos este lado izquierdo en este lado derecho, y luego tenemos estos tres botones en los que puedes hacer click. Ahora notarás que no puso los tres botones en línea con los tres en la parte superior. Entonces esa fue una jugada bastante inteligente, porque lo que hace es ayuda. Ayuda a romper un poco la página. Entonces si acabara de clavar esos tres botones debajo de estos tres bollos, se vería un poco soso y aburrido. Entonces tiene estos tres posts, y luego compadece estos tres con un título y un subtítulo, y en realidad se empieza a leer la página así, esa manera se ve el post de los tres y luego se lee este título, y luego se podría mirar estos tres botones en los que quiere que pinches ahora, debajo de eso, tenemos la sección de imanes de plomo, y esto se rompe en una sección superior e inferior. Y en realidad, si miras en vivo esta página Web, esta es una imagen que se desplaza dentro y fuera. Entonces esto cambia. Verás que aparecen diferentes imanes de plomo dependiendo de cuál te esté mostrando. Entonces en esta mitad superior, tenemos la imagen del libro e que está regalando. Y luego tenemos otro subtítulo de título con un botón para dar click. Por lo que está roto eso Niza, fácil de leer y te permite ver ese botón bonito y audaz para que puedas hacer click en eso . Entonces tenemos la sección inferior, que son los cuatro productos que está tratando de conseguir que se inscriban en estos cuatro imanes de plomo , y, um, ahora podría usar cuatro por un par de razones diferentes. Uno que es porque así es cuántos productos tiene. Pero también poner cuatro en lugar de tres esta vez también ayuda a romper un poco más la página . Entonces estás empezando a ver cómo se presenta esta página y simplemente como que lees la página de esta manera, y eso es algo que quieres hacer cuando estás diseñando tu sitio Web. Quieres que sea fácil para la gente leer esta especie de libro donde sus ojos simplemente siguen lentamente por la página y no está saltando por todo el lugar. Entonces ahora tenemos cuatro imágenes y ayuda a romperlo un poco más. Y como dije, cada uno de estos, um, entra y sale de la imagen de arriba justo aquí ahora abajo. Eso se siente como una sección diferente porque no está usando ese mismo fondo blanco y azul que se desvanece . Y eso es porque ahora está hablando de su comunidad, que es un poco diferente. No son productos ni contenidos los que está vendiendo. Está tratando de construir una comunidad, y creo que se trata de un grupo de Facebook al que se unieron. Y en el lado izquierdo vemos una imagen de él, por lo que refuerza esa marca y su confianza. Y luego por el lado derecho, solo vemos un título muy básico y un botón con mucho espacio en blanco, por lo que es muy fácil de ver y dar click. Si eso es algo de lo que quieres ser parte, entonces debajo de eso, tenemos un botón de menú inferior. Ah, esto es solo para agregar algunos botones más en la parte inferior para que cuando llegues al final de la página, puedas hacer click en uno de estos enlaces para continuar con la página. Si estos no estuvieran aquí, es posible que leas todas estas cosas. Tus ojos siguieron por la página. Pero entonces puedes simplemente salir de la página o no hacer clic en cualquiera de estas cosas porque no te resultaba atractivo al tener estos botones de compra en la parte inferior aquí. Cuando tus ojos bajen por la página, puedes decir: OK, ¿qué hago ahora? Ah, puedo dar click en su blawg. Puedo aprender más sobre él o hay un comienzo aquí, pero tal vez quiero dar click en eso y ver adónde me lleva eso. Tan muy inteligente para poner botones en la parte inferior de tu página para que cuando la gente llegue al final de cualquiera de tus contenidos, puedan continuar con tu sitio e intentar no salir de tu vista. Entonces en la parte inferior, tenemos nuestra información básica de pie de página. Por lo que vas a ver en el lado izquierdo términos de servicio e información diferente que puedes encontrar sobre el sitio en el blogging la empresa. Y luego del lado derecho, vas a ver algunos iconos de redes sociales. Por lo que tal vez quieras ir dar click en ya sabes, que Twitter, um, página de Twitter e ir a seguirlo allí. Entonces esta es una forma muy básica de entrar y ver cómo se presenta una página. Y como dije, esto es muy crudo. Es decir, ya sabes, yo solo estaba como destacando rápido aquí, pero puedo ver fácilmente cómo ha trazado este sitio Web, cómo tiene esta linda uniformidad entrando en él y solo proporciona una manera fácil para el espectador para pasar y ver esta información y leerla. Y también te da una idea de algunas cosas que tal vez quieras hacer dentro de tu propia página web. Cuando empezaste a crear tu propio diseño Web, simulate 3. Escribir ideas para tu diseño de sitio web: lo primero que vamos a querer hacer antes de empezar a burlarnos de nuestro sitio web es vamos a querer tomar algunas notas sobre lo que realmente queremos en ese sitio web como faras links y layouts y la forma en que se ve y así sucesivamente. Ahora puedes hacer esto con un bolígrafo y papel. Puedes hacerlo con un documento word o sin documento pad. Pero básicamente todo lo que vamos a hacer es que sólo vamos a apuntar algunas notas de lo que es que creemos que queremos tener en esta página web. Ahora bien, ya que este es un curso de fototienda, solo voy a seguir adelante y hacer esto dentro de una tienda de fotos con tableta gráfica. Y esto es un wack, um, tableta de bambú que tengo. Y básicamente es solo una tableta con un bolígrafo donde cuando muevo el bolígrafo alrededor de la superficie de la tableta, mueve el cursor alrededor, y esto es genial para mí hacer todo tipo de cosas dentro de una tienda de fotos. Pero aquí puedo usar esto para hacer algunas notas, ponerlo en la capa, ocultar la capa y luego más adelante, si realmente quiero recordar esa información. Puedo muy fácilmente, um ahora. Entonces si estás siguiendo, tienes una tableta. Puedes hacerlo de esta manera. De lo contrario, basta con seguir junto con un trozo de papel y un bolígrafo. Y este es un proceso muy sencillo. Esto no tardará mucho, pero solo quiero mostrarles cómo hacer esto. Así que adelante y asegúrate de tener seleccionado tu pincel. Sube aquí y elige un pincel. Fui con la ronda dura en un pequeño tamaño de píxel, así que parece escritura a mano versus un montón de desorden blobby pasando aquí. Y asegúrate de que eres una pasividad se establece en 100% en los flujos a 100%. Y básicamente, sólo puedo dibujar aquí. Y donde sea que dibuje, tengo mucho más control que un ratón. Y cuanto más fuerte presiono, oscuro se pone en la luz o reprimir el encendedor se pone y así sucesivamente. Entonces solo voy a deshacer eso. Y solo queremos contestar algunas preguntas básicas que encontrarías dentro de una página web. Y tú solo piensas en, um, cualquier sitio web que hayas visto antes, o incluso el ejemplo que miramos antes. Y piensas en lo que quieres tener en eso. Entonces, por ejemplo, en la parte superior, generalmente tenemos una barra de menús, y necesitamos tener algunos enlaces. Entonces, ¿qué tipo de enlaces vamos a tener en esa barra de menús? Bueno, vamos a tener Ah, casa, Homelink. A lo mejor soy blogger. Y así quiero tener un poco sobre mi página, porque esto se trata de mi, um, sitio web sobre um, el que blogueé y monetizar. Um, tal vez tenemos o blog. Tenemos la sangre de la que hablamos. A lo mejor soy un podcast o dos. Entonces quiero tener la información del podcast, y luego quiero tener tal vez una sección de contacto donde la gente pueda contactarme y hacerme preguntas . Ahora, también voy a tener algunos enlaces de redes sociales. Entonces, um, acaba de poner enlaces a redes sociales y simplemente pensar en qué? En qué plataformas de redes sociales en las que estoy. Por lo que tengo un canal de YouTube. Tengo un canal de Facebook. Tengo Twitter tengo enlazado y, ah, ah, digamos que ya sabes, qué es otro Google plus OK, así que solo diremos. OK, entonces ahora sabemos qué tipo de enlaces queremos tener aquí. Um, Y entonces hemos tratado de pensar en tal vez en qué? ¿ Qué queremos tener en esta página principal? ¿ Cómo queremos lucir? Entonces sé que quiero Ah, quiero ser la marca detrás de esta página principal y detrás de este sitio web. Entonces quiero decir, um, um, una foto de perfil de mí misma en la parte superior para que la gente pueda verme. ¿ Y qué más vamos a tener aquí? Quiero mostrar mis publicaciones de blawg más recientes porque blogueé mucho, y sí podcast. Um, así que quiero asegurarme de que tengo blawg y podcasts recientes, um, post ahí para que la gente pueda ver eso en la página principal. A lo mejor tengo uno de esos imanes de plomo donde regalo un libro e gratis y quiero tener esa información. Um, así que quiero asegurarme de que tengo mi imán de plomo ahí dentro. A lo mejor hago anuncios Google ads en mi sitio, y quiero tener un anuncio en la portada. Sólo para que tal vez pase a agarrar a algunas personas de vez en cuando haga clic a través del anuncio y genere un poco de ingresos laterales para mí, también. Entonces pondré un anuncio de Google en esa página, y luego puedes pasar y solo pensar en lo que realmente te gustaría tener en esta página y esto. Como dije, esto puede hacerse más en profundidad. Puedes hacer de esto un gran documento y en realidad puedes decir Vale, cuando la gente haga clic en la página del bloque, lo lleva a esta página y puedes ponerle nombre y decir: Vale, Vale, quiero tener, um, ¿ conoces este tipo de información en el blog o este tipo de maquetación? Puedes hacer estos diferentes simulacros de diseño Web, pero típicamente lo primero que quieres hacer después de haber hecho alguna investigación y has mirado a tu alrededor en diferentes sitios, es para hacerte una idea de lo que quieres en tu página, y la mejor manera de hacerlo es escribiendo esto. Y como dije, puedes hacer esto en una hoja de papel de manera muy sencilla, o si prefieres un documento de palabras, puedes hacerlo ahí. Pero empieza a escribir información de lo que quieres ver en esa página web. Entonces a medida que empezamos a diseñar, no hay que pensar realmente en ello. Ya tienes esa información lista para salir. 4. Formateo de tu documento de Photoshop: ahora que hemos anotado algunas ideas que queremos en nuestro sitio web, necesitamos hablar de cómo vamos a configurar nuestro archivo de Photoshopped para que al menos podamos sacar los conceptos básicos de nuestro simulacro de diseño a nuestro diseñador gráfico o desarrollador Web. Ahora todos los sitios web vienen en diferentes dimensiones, y con teléfonos y tabletas y diferentes tamaños de monitor, es difícil elegir el tamaño perfecto para un sitio web. Y esto es mejor dejarlo al diseñador gráfico o al desarrollador Web a medida que comienzas a trabajar en el sitio, porque hay muchas variables que entran en juego en perfecto escogiendo las dimensiones perfectas . Entonces sigamos adelante y hablemos de dimensiones muy rápido. Voy a llevar mi pincel aquí, y sólo voy a dibujar un monitor básico, y esto es como un monitor nuevo que uso. Y este es un formato bastante estándar, y la resolución de mi monitor es 1920 por 10 80. Entonces esto es lo que ahora puedo ver en la pantalla. Ah, mucha gente no está usando monitores de alta definición y más grandes. Mucha gente todavía tiene monitores más viejos que están usando, y esos monitores más antiguos se encuentran comúnmente en una resolución de 10 24 por 7 68. Entonces sabemos que si al menos hacemos nuestro sitio web a estas especificaciones, que va a funcionar para nosotros mucho mejor. Al menos las personas que con motores de olor pueden ver nuestras imágenes. Si posponemos las cosas para aquí en el 1920 por 10 84 se conoció, entonces alguien en un monitor mayor y más viejo podría no verlo, o podría ser recortado. O podrían tener que cambiar el tamaño o monitorizar. Y simplemente no va a quedar bien. Por lo que normalmente es mejor si realmente construyes a una versión más pequeña. Entonces al menos todo el mundo puede ver que ahora, más tarde, Si tu desarrollador web te dice que sabes, vamos a seguir adelante, hazlo al tamaño más grande que luego ir con lo que están diciendo y platicar con ellos. Pero por el bien de este curso, vamos a usar un tamaño más pequeño para que sepamos que todos al menos pueden ver esa información. Entonces lo vamos a construir a este tamaño, y entonces sabes que tendremos nuestra barra de menús y nuestra información y todo lo que hemos escrito aquí. Ahora, claro, ¿qué sitios no son 7 68? Porque en realidad proceden a ir más largo que eso, donde realmente te desplazas hacia abajo. Esta es solo la imagen visible, por lo que siempre podemos sumar a esto más adelante. Um y entonces tendrías una barra de desplazamiento y pasearías arriba y abajo por el sitio web para ver esto Todo el resto de esta información aquí abajo. Ahora, esto también funciona muy bien, estos números, porque sus, um sus poderes de dos o divisibles por dos. Para que podamos dividirlos en trozos que nos funcionen muy bien. Por lo que todos estos números entrarán en realidad en ambas dimensiones muy fácilmente, por lo que hace que sea muy fácil subdividir la información. Entonces sigamos adelante y echemos un vistazo ahora, muy rápido a algunas de las cosas que queremos hacer en Photoshopped. Voy a dibujar un círculo rápido sólo para darte un ejemplo de una cosa de la que queremos estar al tanto. Entonces déjame solo ponerlo ahí y simplemente llenarlo muy rápido para que podamos ver esto. De acuerdo, ahora, lo primero de lo que queremos hablar es imagen, tamaño y tamaño de lienzo. Ahora mismo, si nos fijamos en el tamaño de la imagen y voy a los píxeles, estamos en una resolución de 1920 por 10 80. Entonces si mirara esta pantalla completa, cubriría mi monitor por completo. Ahora, si cambiamos esto a un tamaño de dimensión más pequeño y estamos trabajando con el tamaño de imagen aquí mismo , lo que esto realmente va a hacer es que va a escalar la imagen y se puede ver que comprime todo y hace que todo se aplasta. Entonces a medida que empezamos a trabajar, eso no es algo que queramos hacer. Queremos cambiar el tamaño del lienzo en su lugar. Entonces si voy al tamaño del lienzo y cambio a pixeles, ya que en eso estamos trabajando. Y en realidad cambié el tamaño del lienzo, la misma cantidad que ves, lo que va a hacer es que va a recortar la imagen, pero no va a reducirla y hacer que se apague. Entonces a medida que empezamos a trabajar, si necesitas más espacio, vas a querer cambiar el tamaño del lienzo, no el tamaño de la imagen, porque no queremos escalar eso. Entonces en nuestro ejemplo, podemos hacer este 10 24 y típicamente decir que sería el 7 68 Pero digamos que queremos poco más de espacio porque sabemos que este va a ser un largo sitio web de documentos. Entonces ella ha puesto 2000 y lo que esto hace es que esto nos abre a un documento más largo, algo así como un sitio web, y se puede ver al ver este 50% ahora mismo. Entonces si acerqué al 100% esto es en realidad como se vería el sitio web en mi monitor y en realidad podemos ver este, um, um, pantalla y modo de pantalla completa. Y así sería el sitio web en mi mente Earner y yo no pondría ninguna información importante a los lados aquí. Toda mi información importante acabaría de entrar en este spot. Entonces sé que incluso las personas en monitores más pequeños pueden al menos ver mi sitio web mientras empiezan a pasear por él. Entonces me voy a escapar de eso. Voy a alejar el zoom para que podamos ver todo. Ahora, por supuesto, mi información ha sido recortada aquí y estamos perdiendo mucha información. Y aún tengo mis notas en esta capa. Entonces, um, solo para ver estas cosas, quiero seguir adelante y reducir todo esto. Entonces déjame seleccionar todo aquí. No, si de control selecto. Estar bien. Ahí vas. Y déjame escalar mis notas aquí, Sam. Ahora, sólo tengo estos para después. Si alguna vez quiero volver y algo así como echarle un vistazo, puedo hacerlo. Las dimensiones que realmente no me importan eso está bien. Yo sólo voy a filtrar eso porque creo que usted entiende el punto que estoy tratando de hacer aquí que sólo queremos usar esta resolución en particular. Pero sí quiero guardar estas notas para que siempre pueda encender esta capa y mirarla más tarde, y sólo voy a añadir un nuevo fondo más adelante, capa y simplemente hacerlo blanco solo para que no tenga esa transparencia pasando. De acuerdo, entonces ahora tenemos sólo ah, tengo mi terminal de notas. Ya está apagado. Acabo de obtener un diseño básico blanco que puedo usar aquí. De acuerdo, así que lo siguiente que vamos a querer hacer es que me adelanté y cambio el tamaño de mi lienzo a 10 10 24. Entonces sabemos que tenemos un buen con y lo hice 2000. Entonces es extra largo, así que solo puedo trabajar de esa manera y luego siempre puedo entrar aquí y recortar esto o hacerlo más largo en base a cómo empieza a salir este sitio web. Ahora, lo siguiente que vamos a querer usar es una cuadrícula, porque queremos asegurarnos de que todo se esté rompiendo a una cuadrícula. Um, otra vez, esto no tiene que ser una ciencia perfecta porque estamos haciendo un simulacro. Pero cuanto más cerca podamos hacer las cosas, um, como queremos que se vean realmente como faras las alturas y el ingenio y qué tienes, mejor va a ser. Entonces en lugar de simplemente abofetear cosas arbitrariamente en ella, sea mejor usar una grilla, por lo que al menos tiene un poco más de sentido, sobre todo cuando se lo entregamos a otra persona. Y lo grandioso de esto es que si estás trabajando con un artista del diseño gráfico que tiene photoshopped, puedes darles este archivo PSD, y luego al menos pueden sacarlo y decir, OK, tú hizo de esto tantos pixeles y ¿qué tienes y puedes tipo de ir a partir de ahí? Entonces solo voy a ir a ver y voy a ir a mostrar y luego seleccionar cuadrícula, y esto va a crear una gran fuerza. Ahora quiero ajustar esta cuadrícula porque se puede ver que realmente no está alineando realmente muy bien aquí. Es una especie de ir a los lados y no golpear perfectamente donde queremos que esté. Adelante y acerque aquí para que podamos ver esto. Entonces ver cómo este tipo se cortó aquí y esto. Esta no es una bonita grilla pareada. Es porque está usando dimensiones diferentes a las que estamos usando aquí. Así que haz click en editar cabra, baja a preferencias y luego selecciona guías, rejillas y rebanadas. Y esto nos va a permitir realmente cambiar la grilla, cómo nos parece conveniente. Entonces si bajamos a donde dice grilla, tenemos una línea de rejilla cada pulgada con ocho subdivisiones. Lo que ni siquiera estamos usando heridas fueron usando píxeles, así que eso está orgulloso del problema y tenemos ocho subdivisiones. Adelante. Simplemente haz esa subdivisión ahora para que puedas ver no quise pegarle a Enter, Pero ya ves lo que eso hace. Ahora tenemos una línea de rejilla cada pulgada y ninguna subdivisión. Por lo que son sólo líneas regulares sin ninguna subdivisión. Entonces vuelve aquí, así no quiero cerrar eso. Entonces vamos a cambiar son dos píxeles y ahora tenemos una línea de cuadrícula. Cada píxel. Bueno, eso es un poco demasiado. No necesitamos eso. Y como dije antes, todo esto es divisible por dos. Entonces podemos usar cualquiera de esos números que te mostré antes. 24 8 16 32 64 Así que intentemos 64. Por lo que 64 luce bien. Tiene unas bonitas cajas de buen tamaño y nos divide. Realmente bueno. Ahora podría hacer, digamos, ocho. Um, eso es un poco mucho. 16 es bastante bueno, pero si hacemos 64 un número mayor para conseguir estas cajas más grandes y entonces usamos subdivisiones. Entonces digamos cuatro subdivisiones ahora podemos ver que tenemos lindas gruesas líneas, cada 64 píxeles, y luego está dividido por cuatro. Entonces si tomas cuatro en 64 eso es 16. Entonces cada una de estas líneas de luz tiene 16 y cada una de estas líneas oscuras es 64 podrías configurar esto lo que se sienta mejor para ti, pero creo que esto es bastante bueno. Esto nos dará un buen tamaño de dimensión. Y ahora cuando vayamos a ver, asegúrate de que tengamos snap on snap to grid. Entonces cada vez que hagamos algo como, digamos, si agarro esta caja aquí, la va a romper a los puntos de la cuadrícula, y eso sólo va a hacer que sea agradable y hasta fuerza. Y como dije, esta no es una ciencia perfecta, pero al menos esto nos mostrará darnos algunas cosas bonitas y fáciles con las que trabajó el dedo. Entonces si estoy haciendo que mi barra de menús aparezca y tengo esta bien seleccionada, ahora sabemos que mi barra de menús es exactamente 64 píxeles ley altura sabia y 10 24 con sabio. Entonces esa es una gran herramienta. Y entonces una cosa más que quizá quieras encender son los gobernantes. Entonces si tienes una vista y haces clic en gobernantes aquí, vas a ver a estos gobernantes en la parte superior y estos aire genial para un alinear las cosas nuevo. Está puesta a dos pulgadas y no queremos pulgadas. Así que doble clic en eso. Y cuando hagas doble clic en, eso también va a traer las mismas preferencias. Se pueden ver guías geniales y rebanadas aquí y por encima de esas unidades y gobernantes. Por lo que ahora podemos ajustar la propiedad de los gobernantes. Entonces vamos a gobernantes. Cambia estos dos píxeles y entonces ahora puedes ver que está mostrando nuestros píxeles de nuestro documento. Podemos golpear OK, y esto es genial porque ahora podemos ver dónde queremos dividir esta información si queremos usar como guías a los gobernantes. Y otra gran cosa de las reglas es que si te vas a donde está la regla y haces clic y arrastras, obtienes estas líneas y estas herramientas de medición aireadas grandes. Entonces es muy fácil dejar caer una línea aquí y especie de ver Vale, ese es el centro de mi documento, y puedo alinear las cosas de esa manera, y puedo rebanar esto como quiera, así que vamos a estar usando estos para tipo de simplemente poner abajo algunas cosas básicas antes de que empecemos a dejar caer cosas ahí para que al menos podamos empezar a romper esto y ver cómo queremos que se vea este sitio web. Entonces así es como volvemos a configurar nuestro documento. Tenemos 10 24 de ancho, así que al menos sabemos que las personas en monitores mayores pueden ver esto. Y como dije, como empezaste a trabajar con el diseñador gráfico, el desarrollador Web o quien esté diseñando tu sitio para ti cuando él este simulacro de arriba a ellos, al menos tienen un buen punto de referencia general . Y entonces todos pueden trabajar juntos en ese momento y cambiar lo que quieran. Pero al menos tenemos un sentido general de algo que se ve un poco más, um, ya sabes, cohesivo y ah va a funcionar un poco más agradable que sólo algunos números aleatorios golpeados. 5. Diseño de tu maqueta de sitio web: De acuerdo, entonces tenemos nuestros documentos configurados de cómo queremos seguir adelante y crear este simulacro de diseño web . Y te voy a mostrar un par de maneras diferentes en las que puedes seguir haciendo esto. Ahora, ten en cuenta que todo lo que estás tratando de hacer es solo mostrar los conceptos básicos de lo que quieres buscar en tu sitio web y lo que vas a buscar cuando estás entregando esto a un artista del diseño gráfico o a un desarrollador Web. Entonces lo primero que hacemos es que podemos mirar aquí nuestra grilla y podemos empezar a dividir esta rejilla. Ah, y nuestro documento en lo que creemos sería bueno en una forma de hacer esto es usar estas guías con las reglas para que pueda hacer clic y arrastrar esto hacia abajo. Y puedo decir, um de estos aires de antes Déjame sacar esto. Tienes razón. El centro uno. Entonces podemos decir que sabemos que queremos nuestra barra de menús la parte superior aquí, y sabemos que queremos ah, sección de pie en la parte inferior y vamos a querer un lince en la parte inferior también. Entonces tal vez tengamos un top encima de la sección de pliegue de una foto mía o de ti o de tu marca o lo que sea que estés haciendo abajo. Eso puede ser lo que queremos tener algunos puestos en bloque. Um, entonces queremos tener nuestros imanes de plomo y demás, y puedes bajar cortando esto y dividiendo esto y luego una de las primeras cosas que puedes hacer de eso es crear una nueva capa y luego puedes entrar aquí, toma la caja de herramientas rectángulo. Ah, y luego escoge un color. Normalmente uso gris al hacer maquetas, pero si tienes un color brandy, lo puedes hacer y entraré aquí y solo empezaré a crear imágenes crudas muy básicas de qué es lo que voy a buscar. Entonces una piscina en el texto o y sé que esta es la sección de enlace. Entonces voy a entrar aquí, y voy a escribir a casa sobre log podcasts contacto y qué tienes y luego, ya sabes, cambiar estos cambian el tamaño aquí, Y esta es una forma de hacerlo. Es bastante sencillo. Y todo lo que estás haciendo es solo estás recreando como crees que esto sería ? Entonces tú, ya sabes, o tus enlaces aquí ¿Lo quieres en el centro? Y no tienes que ser un experto. Y como tú como diseñaste el sitio, te vas a dar cuenta. Las cosas iban a cambiar y tú vas a querer, um yo quería lucir diferente. A lo mejor algo no se ve bien. No eres artista, pero al menos puedes llegar tu punto al artista del diseño gráfico o desarrollador web para ayudarte a crear esto por ti. Entonces esta es una forma de hacerlo. Y entonces lo que puedes hacer con esto también es que puedes seleccionar estas capas, golpear el control G y agruparlas, y luego puedes moverlas. Entonces si esto fuera, digamos, ah, block post y no lo hiciste, no estabas seguro de dónde lo querías. Ah, no lo sabes. Si querías en la parte superior, quizá lo desees a mitad de camino en la parte inferior. Esta es una gran manera para que agrupes estas cosas y las muevas y veas qué funciona y no funciona para ti. Ahora déjame mostrarte otra forma de hacer esto y esto me parece más fácil y ah, se ve un poco mejor. Por lo que es un poco más visualmente atractivo. Entonces justo al bate, empiezas a hacerte una muy buena idea de lo que quieres. Y lo que digo a la gente es Adobe Creative Cloud Suite te permite tener acceso a una tonelada de activos que puedes usar dentro de tus proyectos y a lo largo de los cursos que me ves hacer. Me verás usar esto a menudo porque es una herramienta tan poderosa. Creo que es un poco menos usado y puedes salir y puedes encontrar estas cosas en la Web. Podrás encontrar los gratis puedes encontrar los que pagues y cosas que mejor se adapten tus necesidades. Pero no hay que buscar más allá del software en sí. Entonces si abres la aplicación de suite creativa y haces clic en eso, va a tirar hacia arriba esta caja aquí. Y si vamos a los activos y escribimos en ti, ¿por qué vas a encontrar un montón de activos de interfaz de usuario que puedes usar? Algunos de ellos son activos individuales como se ve aquí la calculadora en el calendario y se puede dibujar arrastrar aquellos en Algunos de ellos son formatos de página completa como thes trueno. Tú yo kits estos aire más o menos ya dispuestas. Y tal vez te gusten algunos de estos. Podrías simplemente arrastrar uno de estos. Y si encontraste uno que te guste y ni siquiera tienes que hacer más que, digamos, aquí, esto es lo que quiero. Algunos de ellos son kits de activos, por lo que son agrupaciones. Y déjame encontrar algunos de esos como este de aquí, esta combinación tú AIPAC, este es un grupo juntos que puedes usar, y tiene un montón de cosas diferentes. Si hago click en eso, puedes ver que tiene una foto de perfil. Tiene gráfica. Tiene botones de calendario, barras de búsqueda. Y así arrastraste esto y luego solo sacas los elementos que quieres usar, para que eso funcione realmente bien. Y he sacado un par de estos activos y ya que voy a usar estos en este curso. Esto solo para darte una visión rápida de cómo podrías usar algunos de estos activos y, um, um, seguiré adelante y abasteceré estos en el recurso es sección de este curso. Entonces si miras aquí en mi biblioteca, puedes ver los tres que estoy usando. El Avia, tú, yo kit de arranque, los elementos de ladrillos. Tú me niño y una vista que kit para la navegación. Y yo sólo voy a abrir estos individualmente, son click derecho y golpea en ello y ¿qué va a hacer? Se va a abrir un nuevo archivo PSD Photoshopped con los que tienen ese archivo, y luego se pueden ver todos los diferentes diseños que tenemos dentro de esos. Entonces déjame seguir adelante, abre todas estas. Esto rompe Elemento uno es un poco más grande. Tiene muchas cosas en ella, pero realmente alta calidad se ve muy bien. Ahora, esto es sólo decir que está usando fuentes que no tengo instaladas en mi computadora. Siempre puedo entrar e instalar estas fuentes. No me voy a preocupar por esto ahora mismo porque todo lo que estamos tratando de hacer es solo darte una idea de cómo crearías tu propio simulacro y ni siquiera tienes que trabajar demasiado sobre el texto porque solo estás tratando de conseguir lo que el diseño se ve así. No nos importa el texto o las imágenes solo intentaban llegar nuestro punto al diseñador gráfico o desarrollador Web. Entonces, um, voy a tener justo en cancelar y no resolver esos, y luego voy a abrir este último aquí, y no se resuelve al preocuparse por resolver eso. Entonces voy a ir el 1er 1 aquí, y voy a acercar. Y estos son diseños pre hechos para sitios web que solo puedes seguir adelante y quizá encuentres uno de estos que te guste, y luego solo puedes decir, Hey, esto es esto es lo que voy a buscar en lugar de esto imagen poner esto dentro y así sucesivamente. Pero lo que vamos a hacer es arrancar algunos de los elementos de estas cosas y usarlos en nuestro en nuestro diseño simulan. Entonces el 1er 1 que voy a usar es éste de aquí. Y lo único de estas pausas de Photoshopped, En algún momento tienen muchos elementos, y la parte más difícil es encontrar ¿qué es qué? Entonces lo que hago es que empiezo a apagar capas hasta encontrar la que quiero. De acuerdo, así que esto se llama dos cuadras. Voy a hacer doble clic en esto porque esta es una capa inteligente. Como puedes ver, no hay carpeta de información. Tiene este ícono aquí en la capa. Doy doble clic en que va de los pies hacia arriba, abre una capa inteligente con todas las capas ahí dentro, y está hablando de capas de texto otra vez. No quiero actualizar eso. Entonces cuando abrí la capa inteligente, ahora puedes ver aquí todas mis carpetas e información que podemos arrastrar y jalar. Entonces esto es lo que busco. Entonces voy a volver. Yo sólo voy a cerrar ese documento. Ya no lo necesito, Así que no vamos a usar eso. De acuerdo, entonces vamos en estas dos cuadras y lo que está pasando aquí es que me gusta este top. A mí me gusta la forma en que hicieron este título. El subtítulo. A lo mejor algunos botones donde pueda poner empezar aquí o algo en lo que quiera que la persona haga clic , tener una imagen de mí o de mi marca y ah, tal vez estos enlaces de navegación. Podría gustarme esos enlaces de navegación, Así que sigamos adelante y arrastrémoslo de nuevo. Yo sólo voy a empezar a pinchar a través de los globos oculares y las capas hasta que encuentre lo que busco , que es eso ahí mismo y ellos llaman a este héroe. Entonces voy a hacer click izquierdo y arrastrar eso a mi documento y simplemente dejarlo justo ahí. Ahora, una cosa que definitivamente te recomiendo que hagas a medida que comienzas a etiquetar cosas que o te van a tener sentido o tienen sentido para el diseñador gráfico o desarrollador web más adelante. Porque si les das el archivo PSD y miran esto y ven aquí, no van a saber qué es eso. Entonces podríamos llamar a esto top, um, um, top section o algo así. Al menos sabemos que es la sección superior, y esa es la carpeta en la que estamos trabajando. Entonces voy a dar clic, y voy a arrastrar esto y necesito escalar esto y otra vez. Queremos estar cerca con dimensiones y tamaños. Pero de nuevo, vamos a tener a alguien más trabajando en esto por nosotros. Por lo que no tenemos que ser perfectos. Um, pero, ya sabes, queremos lucir un poco cerca. Entonces nos gusta cómo se ve esto. Esto se ve genial. Excepto que tiene esta foto de esta chica mirando hacia abajo. no me importa realmente. Prefiero tener una foto mía y de mi marca aquí, al menos para que pueda tener algo de cohesión. Podría sacarlo y solo dejar caer un bloque de texto ahí y decir imagen de mí o imagen de marca o imagen de nuestro camión o algo que te gustaría usar. Um, así que sólo voy a abrir esa carpeta otra vez. Puedo hacer clic alrededor de estas cosas y ver qué está pasando aquí. Nos dieron el título que conseguimos, soltera. Teníamos una fila. El flecha. Eso ni siquiera me importa. Yo sólo voy a dejarlo. Entonces es una cosa menos a la que hay que mirar. Tenemos base. De acuerdo, entonces está en la base. Entonces y luego algunas de estas cosas podrían no tener mucho sentido, así que puedes ver cuando encendemos y apagamos eso, tiene algunos efectos colorantes y cosas diferentes pasando mientras no nos importa eso otra vez. No estamos tratando de ser perfectos aquí. Solo estamos tratando de conseguir un diseño básico, así que voy a apagar ese rectángulo. Podría incluso simplemente borrarlo si lo quisiera. En realidad, parece que no puede borrarlo. Sólo voy a apagarlo y esconderlo. Y entonces soy sólo Ah, tal vez traigo una foto mía. Voy a ir a abrir archivo. Este es un proyecto en el que trabajé antes. Foto de mí todos mostrando un poco antes y después imagen de algún color retocando, corrigiendo que hice. Pero yo sólo voy a escoger este que dice ajustes. Esta es la foto de mí aquí mismo. Eso se ve bien. Y voy a arrastrar eso a mi documento. Pon eso ahí y mira, a veces tienes que mover estas cosas hasta que lo veas. Por lo que estaba siendo escondido por algunas de esas capas. Simplemente seguí moviéndolo por esta pila hasta que salió a la vista. Entonces ahora solo voy a escalar esto hacia abajo en esa línea de ahí, escalarlo hacia atrás y moverlo hacia atrás. Está bien, Así que esto se ve bien. Es decir, me gusta esto. Um me dieron algunos enlaces ya. Consiguió esta pequeña sección de título. A lo mejor me gustaría mover esa sección de título. Entonces me gusta como que venga conmigo, y aquí vamos. Ya estamos empezando a ver los conceptos básicos de este diseño se burlan. Entonces esto es lo básico de cómo funciona este proceso. Seguiremos adelante y tomaremos un descanso aquí mismo, y volveremos a echar un vistazo a cómo podemos agregar algunas cosas más en la siguiente sección . 6. Agregar gráficos de UI a tu maqueta de diseño: De acuerdo, vamos a seguir adelante y terminar este simulacro de diseño Web. Ya has visto que hay dos formas en las que podemos hacer esto. Podemos usar las reglas, rejillas y guías para entrar y simplemente bloquear algunas formas muy básicas de hacer las cosas. O podemos usar activos de Photoshopped ellos mismos para arrojarlos rápidamente a nuestro sitio web y moverlos para tener una idea de cómo queremos que nuestro sitio se vea muy rápidamente. Entonces solo voy a agregar un par de cosas más aquí sólo para que puedan ver el proceso a medida que avanzamos . Y va a ser el mismo proceso a lo largo del diseño Web. Muck up, solo te dejas caer las cosas y ajustarlas, moverlas y ver qué funciona mejor para ti. Entonces déjame seguir adelante y minimizar. Conseguimos su sección superior. Tenemos esta capa de ajustes que tenemos aquí. A ver si dejo eso detrás de esa línea. Todavía tengo mi capa de notas por lo que siempre puedo ir a leer lo que quería agregar. Entonces quería mi barra de menús y puedo entrar a la parte superior aquí y otros a la barra de menús aquí arriba , pero esto nos dará una idea básica. Y luego tengo mi foto de perfil. Así que quería algunas publicaciones recientes de Blawg y publicaciones de podcast y un imán de plomo en un anuncio de Google. Entonces sigamos adelante y sumamos un par más de estas cosas. Yo voy a ir a este. Este es el elemento brics. Y si acerco aquí, este es un documento genial. Es largo, y tiene un montón de cosas en él. Y de nuevo, parte del problema con este documento es sólo tratar de averiguar qué es lo que aquí. Entonces tenemos un montón de cosas diferentes para elegir, y voy a desplazarse por aquí, y estoy buscando algo que funcione para nuestros posts de bloque y nuestra publicación de podcast. Algo así podría ser bueno. Um, esto podría ser algo genial. Esta podría ser una imagen de post bloque que podríamos usar. Y eso es todo lo que estoy haciendo es pasar por aquí y tratar de averiguar qué Qué reflejaría algo que en realidad se parece a un poste ah block. A mí me gusta este de aquí. Um, parece un post donde tendría una imagen ahí dentro. El nombre, el título de los posts, la información a medida que empiezo a hablar del post cuando lo publiqué y se han dejado algún comentario . Y tal vez podría tener este corazón favorito aquí. O tal vez podría sacar eso para que, como dije, llegáramos a averiguar cuál. Esto se debe a que estos nombres no necesariamente significan nada para nosotros. Entonces solo paso por aquí y solo empiezo a hacer clic fuera de estas capas. Ah, está bien. Aquí está. Galería de imágenes tres. Entonces voy a dejar click en eso. Voy a arrastrarlo a mi documento. Voy a dejarlo, acuerdo? Y así este es Ah, spot. Donde ahora, cuando estaba diseñando un sitio, puedes hacer un par de cosas diferentes. En realidad podría poner algún tipo de título o encabezado aquí arriba, y podría llenar eso más tarde, o podría ir directamente a la sección de correos del pantano. Um, por ahora, sólo vamos a entrar a la sección de postes del pantano y te darán la idea. Pero claro, quiero que esto se vea bien. En realidad podría tener un poco de dicho aquí, una pequeña cita o títulos que dice post blawg reciente y luego dejar estos en. Pero básicamente, puedo tomar esta capa y ver qué tenemos aquí. ¿ De acuerdo? Conseguimos su imagen. De acuerdo, vamos a deshacernos del ícono. No vamos a ir. Usa ese icono y puedo dejar la imagen. Podría sacar la imagen que también podría, si quisiera. Podría tomar la herramienta de rectángulo y, um, sólo pasar por encima de la imagen en una nueva capa. Entonces dependiendo de lo que quisiera mostrarle al diseñador gráfico, probablemente podrían averiguar que eso no es una imagen, Sabes que esto es solo una imagen de marcador de posición para lo que queremos, pero podría simplemente llenar eso, y yo podría incluso escribir un bloque de texto sobre él que diga imagen. O podría incluso si quisiera, podría traerle una imagen, sólo una foto rápida o algo así y tener tres diferentes aquí. Pero básicamente, esta es solo una forma rápida para que yo vea eso. De acuerdo, esto es un poste de bloque, y sabemos lo que tenemos pasando aquí. Ah, y luego voy a llamar a este post blawg uno. Voy a dejar Click. Arrastre eso hasta la nueva capa. Hacer una copia de la misma. Blawg Post, también. Y agarra mi jugada. Herramienta. Haga clic en eso. Muévelo y cópielo. Mucho puesto tres. Haga clic en eso. ¿ De acuerdo? Y se puede ver que estos realmente no se alinean para que yo pudiera escalarlos, sólo por el bien. Sake del tiempo. Aquí. Yo sólo lo voy a mover y especie de centro hacia fuera. De acuerdo, así que ahora, ahora estamos haciendo un poco de margen. Um, ahora quiero dividir esto y tal vez necesito mi post de podcast. Entonces, um, necesito dividir esto. A mí me gusta esta línea azul. A lo mejor quiero seguir usando esta línea azul hacia abajo. Eso fue en la sección superior, así que vamos a buscarlo. Creo que es este año. Sí. Entonces es este pequeño marcador de aquí. Voy a dar click en eso, no hacer doble click. Voy a dar clic y arrastrarlo al, um, um, debajo del nuevo banderín de capa para hacer una copia. Voy a arrastrarlo fuera de esa carpeta así que está apagado por sí mismo. Voy a renombrarlo saltos de línea. Yo sé lo que es. Muévete, herramienta. Haga clic en él. Entonces está bien, ahí vamos. De acuerdo, entonces tenemos ese salto de línea ahí. Eso es lindo. Y ahora solo quiero duplicar esto, porque tal vez hago lo mismo para el post del pantano. A lo mejor decido quiero compensarlos como vimos con el sitio de ingresos inteligentes, pasivos. De todas formas quieres hacerlo. Pero, ya sabes, esto es otra vez sólo para mostrarte el proceso. Entonces voy a hacer esto a otro salto de línea y muy rápidamente, sólo con el uso de cosas que ya tenemos, um, activos que ya tenemos en photoshop. Se puede ver que este es un proceso muy fácil. Y solo puedes cortar estas cosas en pedazos y usar solo las secciones. Quieres sacar una idea de cómo quieres que luzca tu sitio web. Y de nuevo, probablemente pondría algunos títulos y cosas aquí y diría que esto es Ah, esto es un reciente bloque posts. Déjame hacer eso. Y por supuesto, pasaría algún tiempo y haría que esto se viera bien y parejo y bonito, Pero por ahora, solo te vamos a mostrar lo básico para que no tenga que ser demasiado bonito. Tratemos de atravesar el punto que estoy tratando de hacer aquí. Podcasts. Podcast. ¿ Cuáles son? Episodios, Ok. Y luego Ah, Entonces, ¿qué más queríamos aquí? Volvamos a nuestras notas. Echale un vistazo. Notas que queríamos. Obtuvimos nuestra foto de perfil. Nos dieron nuestro puesto de pantano. Queríamos liderar imán en un anuncio. Entonces veamos cómo podemos hacer eso. Voy a decir esto muy rápido. ¿ De acuerdo? Voy a volver. Necesito algo. Parece un imán de plomo. Estaba mirando esto antes, y esta sería una buena imagen de imagen de imán de plomo en el lado izquierdo. Título habla del imán de plomo, y tal vez tengo un botón de registro y probablemente nos cambie de dedo lo que parece un cuadro de texto usando algunos de esos activos, Pero necesitamos averiguar qué es eso. Ésas son las dos cuadras. Entonces vamos a agarrar eso Arrastra eso a nuestro documento aquí en, um, también podemos cambiar los colores de estas cosas. Entonces, um, si tienes un color de marca con el que estás trabajando y sabes cuál quieres que sea el color . Eso se puede hacer muy fácilmente. Um, divertido. Utilizan este azul bastante típicamente, y eso es algo bueno porque todos siempre usan el mismo azul, que funciona bien. Entonces vamos a averiguar qué cajas es nuestra esta en una. Ese. De acuerdo, eliminemos estos. No quiero esto. Vamos a llamar a este imán de plomo. De acuerdo, así que eso está bien. Tenemos su imán de plomo. Ah, queremos en anuncios. Volvamos aquí. A ver si podemos encontrar algo que se parezca a un anuncio. Ah, dice anuncio. Perfecto. De acuerdo, tenemos que averiguar cuál es esa. Hay muchos de estos, así que solo empiezo a esconderme hasta que desaparezca. Y entonces sé qué es qué. De acuerdo, aquí vamos a las imágenes. Golpear eso en. Suéltala. No necesitamos a uno de ellos. Entonces no queremos caja también. Esconde eso eso más. Está bien, Genial. Y entonces llamaremos a ese anuncio que no puedes deletrear nunca. Corbatas significaba y movamos esa ventaja. Hombre abajo. Por lo que sólo era una especie de aspecto centrado. Está bien, eso se ve bien. Y, ah, veamos tus notas. Entonces prácticamente conseguimos todo lo que queríamos tener. Y lo hemos hecho y, ya sabes, unos 20 minutos más o menos muy rápido, sólo podemos empezar a unir cómo se ve esto. Um, claro, quisiéramos el pie de página en la navegación de abajo. Simplemente sigue adelante y arrastra eso de verdad rápido. Um, vamos a usar Sí, este. Entonces conseguimos este pie de página y sub pie de página en la parte inferior. Así que arrastre los enlaces de pie de página en conseguir y, uh, encajar nuestro documento. No nos importan los textos. Acaba de tener bien a través de eso otra vez. Este es solo el diseño. Hermosa. Y pie de página extendido. Sí, a mí también me gusta esa. Y en realidad vamos a tener estos toques. Sería todo ese links misceláneos e información que podríamos querer poner aquí . Probablemente hago el enlace. El de arriba, Um, un poco más oscuro. Ves, ya sabes, y podría meterme con todas estas cosas. Saca el logo. No me importa ese logo de ahí. A lo mejor lo centro y lo re escalar para que se vea un poco mejor aquí. Bien. Está bien. Y veamos, ya sabes, si digamos, sí queríamos color Teoh en ese pie de página que está por encima. ¿ Cómo haríamos eso? Podríamos caer sobre eso, encontrar ese color de fondo, y en este realmente puedo hacer doble clic en él. Y en realidad va a traer hacia arriba ah, recolector de color para mí porque es una capa inteligente y podría oscurecer eso, así que eso es genial. Um, también podría hacer en efectos superposición de color en esa sección y cambiarlo a cualquier color que quiera. Siempre y cuando tenga seleccionado normal en opacidad al 100%, podría entrar aquí y cambiar el color, pero porque es una capa inteligente sí me da la opción de solo usar un selector de color. Entonces iremos con eso. Eso se ve bien. De acuerdo, echemos un vistazo. Entonces aquí vamos. Contamos con una página web muy rápida y fácilmente dispuestas. A lo mejor no me gusta ese enlace en la parte superior. Y yo soy como, uh, algo así como este enlace un poco mejor. Vamos así este enlace aquí, este es el menú de navegación. Pop eso en, Uh oh. Parece que se me cayó en la carpeta por accidente, así que asegúrate de que no hagas eso. Voy a sacar esto del camino. Llévelo a la cima. A mí me gusta mantener las cosas en las capas apiladas. En realidad, cómo se ven en la página. Simplemente tiene un poco más de sentido. Entonces aquí vamos. Escalar esto. Y no necesito ver todo esto. Menú desplegable de información de la señorita Alina y resultados de búsqueda. Y entonces ahora todo lo demás es una especie de tocar la parte superior. Podría gustarme eso. No me gusta, sin embargo, sin embargo, así que voy a dar clic en todo, asegurarme de tener mi jugada. Herramienta seleccionada. Y podría simplemente mover todo esto juntos. Y luego Ahora el otro problema es que tenemos dos enlaces. Nos dieron estos cobertizos y luego vincula sangrando desde la sección superior. Entonces voy a ir a la sección superior y voy a apagar la solva para que no lo vea. Y luego acabamos de conseguir este poco de espacio en blanco porque no llenamos todo el documento. Ya hemos visto cómo hacer esto antes con el tamaño del lienzo. Entonces vamos a averiguar dónde estamos en esto Mira ¿qué dice eso? 17 10 17 20. Por lo que el tamaño de la lona hacen de este 17 20 recorte Wilker. Proceder. De acuerdo, ahora necesitamos agarrar todo porque lo recorta desde el centro, no desde donde queríamos recortar. Entonces solo agarra todo y luego muévelo hacia abajo. ¿ Qué? El movimiento Herramienta. Y ahí vamos. Tenemos un layout básico fuera de nuestra página web, y tenemos todo lo que queríamos. Tenemos nuestro tenemos nuestro ah logo aquí. Parece que ese logotipo de navegación volvió en difícil. Si no uso quiero cosas, um, navegación. El top sección naff. Si no quiero cosas, normalmente lo eliminaré. Entonces vamos a tomar ese gallo y a deshacernos de él. De acuerdo, entonces ahí vamos. Ahora tenemos son mover eso más de un poquito. OK, tenemos nuestros enlaces. Tengo mi foto de perfil, tal vez algunos botones y hablando del sitio. Tengo mis recientes posts de bloque y algunos posicionadores grandes cuadrados aquí para mostrarlos . Tengo mis recientes episodios de podcasts. Tengo mi imán de plomo. Probablemente pondría una foto diferente o cubriría eso con un cuadrado gris. Tengo mi anuncio, mis fugas de fondo. Entonces todo lo que queríamos bajo las notas excepto los iconos de las redes sociales, pero se puede ver lo fácil que es simplemente arreglar eso y traer esos. Y esas son las dos formas en las que puedes ir para diseñar esto. O bien puedes hacerlo con las cuadrículas y reglas y crear estos cuadrados y cosas tú mismo como yo podría realmente hacer estos cuadrados en este texto, pero es un proceso un poco más largo. ¿ Por qué no simplemente usar los activos que ya están disponibles para ti desde adobe y crear este sitio web? ¿ Cómo le parece bien? Por lo que ahí vas un mercado de diseño de sitios web muy rápido, sencillo y fácil. 7. Usar Photoshop para crear una maquela del diseño web: Ahora ya sabes cómo hacer que un simple diseño Web se burle, y esta es información valiosa para un diseñador gráfico o un desarrollador Web porque les da alguna información por adelantado que pueden usar para comenzar a hacer tu sitio web de inmediato. Y no tienen que hacer un montón de conjeturas tratando de averiguar exactamente qué es lo que estás buscando. En este curso, aprendes a hacer algún dedo del pie de investigación, mira otros sitios web y los escoges y averigua qué les está funcionando bien. Aprendes a escribir algunas ideas antes de tiempo de lo que quieres en el diseño de tu sitio web , que no tengas que hacer esas conjeturas mientras lo estás diseñando. Después aprendes a hacer un boceto áspero para tipo de establecer algunas ideas básicas. Y luego entramos en photoshop y usamos rejillas y capas y diversas herramientas para que pudieras moverte por los diferentes elementos y ver cómo cabían en el diseño de tu propio sitio web . Ojalá, encontraras esta información muy valiosa, y ahora puedes usar esta para ayudar a acelerar el proceso siempre que tengas un sitio web creado para tu negocio o marca. Ahora, lo que quiero que hagas es seguir adelante y guardar una imagen de ese simulacro de diseño que creaste y foto shop y subirlo al área de discusiones o proyectos de este curso. Me encantaría ver en qué estás trabajando. Siempre me interesa ver lo que crean los alumnos. Y si tienes alguna pregunta o quieres retroalimentación sobre tu diseño, definitivamente puedo proveerte eso para ti, aunque solo quieras tomarte una foto o, ya sabes, usar tu teléfono y tomar una instantánea de lo que dibujaste por mano y subir que eso sería genial porque solo quiero ver qué es lo que estás creando Now. Si tienes alguna pregunta, siempre puedes ponerte en contacto conmigo. Puedes hacer la pregunta en el área de discusiones, o puedes enviarme un mensaje directamente, y me volveré contigo en cuanto pueda. Por lo general siempre estoy disponible para los alumnos, y solo quiero brindarles cualquier información para ustedes que pueda. Si quieres conocer más sobre mí, puedes ir a www dot jeremy deegan dot com y averiguar en qué es estoy trabajando y contactarme a través de esa página web también. Por lo que espero ver su proyecto. Adelante y subirlo ahora y te veré en algunas futuras lecciones.