Cómo diseñar un sitio web en Photoshop

1. Introducción: Hola, me llamo Dan. Te estaré guiando a través de este curso sobre cómo construir maquetas profesionales de Website usando Photoshop. Estas son las habilidades que los empleadores quieren, y las habilidades de diseño de UX/UI son donde están los empleos de alto pago. Empecé mi vida como diseñador gráfico y rápidamente me enteré de que era bastante competitivo y la paga no era súper emocionante. No fue hasta que me elevé al mundo del diseño web antes de que mi carrera realmente despegara. Construí este curso para principiantes, para personas nerviosas por cambiar sus carreras en diseño web, para personas nuevas en el mundo web, así como desarrolladores que carecen de alguna formación previa en diseño. Cubrimos todo lo que necesitas para diseñar tus primeros Mockups Web sin ponerte demasiado técnico. Durante el curso, crearemos un sitio web para una agencia creativa simulada desarrollando sus vistas para móviles, tabletas y escritorios. Con los archivos de ejercicio puedes descargar y trabajar junto a mí. Con un PDF principal puedes seguir y crear tus propias notas personales. Te estaré enseñando a configurar nuevos documentos y a trabajar con vistas móviles, tablets y de escritorio. Puedes elegir fácilmente colores y fuentes del sitio web y previsualizarlos en tu iPhone o iPad. Aprenderás a recortar imágenes y hacer fondos completos todo el camino hasta exportar todos los archivos correctos que necesitas para un sitio web. A pesar de que estaré por aquí para ayudar. Cuando estés listo, puedes enviarme tus archivos y echaré un vistazo y ofreceré cualquier sugerencia. Ahora es el momento de actualizar tus habilidades, conseguir esa oferta de trabajo e impresionar a tus clientes. 2. ¿Qué necesitas entregar al final de nuestro proyecto: Para ser un diseñador web comercial, hay más que hacer que solo un marcado de sitio web reflexivo. Hay algunos entregables finales, algunos archivos tangibles e información que necesitarás entregar antes de que pueda comenzar la codificación de tu sitio web. Nuestro objetivo antes del final de este curso es tener una carpeta llena imágenes listas para la web que sigan las convenciones de nomenclatura de Crickweb. También estarás produciendo lo que se llama una hoja CSS que es utilizada por un desarrollador para saber qué fuentes estabas usando, las alturas y anchos de tu caja de navegación o tu caja de fotos. Aprenderás a pasar los códigos de color correctos, la altura de la línea, espaciado para tu sitio web para que la persona encantadora que está construyendo tu sitio web pueda llegar a trabajar rápido, y no tener que hacer enormes conjeturas a partir de tu marcado. 3. ¿Cuál es el papel de Photoshop en el diseño de un sitio web?: Photoshop es increíble en muchas cosas. En cuanto al diseño de sitios web, es la herramienta más utilizada y si buscas empleo en el mundo del diseño web, es esencial. Ahora sitio web construye con maquetas. Estos son visuales de lo que crees que debería ser un sitio web. Haces esto antes de codificar realmente el sitio web. ¿ Por qué? Porque es mucho más rápido. Hacer cambios en Photoshop es sólo cuestión de seleccionar la capa correcta y arrastrar los elementos de página alrededor. En el código puede haber muchas más implicaciones para simplemente mover las cosas. Photoshop hace todo el trabajo de planeación y diseño. Entonces tu maqueta se construye y codifica como sitio web. Si estás interesado en hacer el trabajo de desarrollo tú mismo y no estás seguro de dónde empezar, déjame una línea en la discusión o en el foro, estoy realmente feliz de ayudarte a apuntarte en la dirección correcta ahí. 4. Qué son los videos de producción: ¿ Cuáles son los videos de producción que hay en este curso? Estas son las sesiones donde estoy ocupado construyendo el sitio conceptual usando las herramientas que ya hemos aprendido. Estos pueden contener pequeñas pepitas de flujo de trabajo, oro y otros pueden ser yo solo haciendo el trabajo y pueden ponerse un poco aburrido. No me ofenderé si no los miras a todos, todo el camino. 5. Cómo preparar tu espacio de trabajo para el trabajo en la UI: En este video, vamos a ver cómo restablecer tu espacio de trabajo. Ahora restablecerías tu espacio de trabajo, si abrieras Photoshop y se veía diferente a mi versión y quieres que se vea igual para que puedas seguir adelante. Ahora, estoy usando Photoshop CC 2015. Si estás usando otras versiones, podría verse ligeramente diferente. Pero digamos que lo has estado usando para otras cosas y has movido estas paletas, arrastras por ahí o lo has hecho accidentalmente. Esto lo has hecho durante el tutorial. Puedes volver a este video. Todo lo que necesitas hacer es volver a la normalidad para que se vea bien, está aquí arriba, dice Essentials. Asegurémonos de que se establezca en Essentials primero, y luego haga clic en donde dice “Restablecer Essentials”. Después pongo todo de nuevo en su lugar y me veo como el mío para este tutorial. 6. Ajustar las preferencias de Photoshop: Hola. En este video vamos a ver cómo cambiar tus preferencias para trabajar con web. Ahora, por defecto Photoshop sale de la caja listo para hacer mucho más trabajo orientado a la impresión. Lo que tenemos que hacer es entrar en nuestras Preferencias y cambiarlo por web. Ahora, lo primero que vamos a hacer es encender a nuestros Gobernantes. Vamos a ir a View, y abajo a Rulers. Lo que eso va a hacer es que me muestre lo amplio que es este documento. El mío está fijado en centímetros, porque estoy en Europa y el tuyo se pondrá en pulgadas si estás en América. Ahora, lo que está pasando aquí es que puedes ver que está colgando unos 16 centímetros. Ahora cuando estamos lidiando con web, no queremos saber cuál es el valor del centímetro, queremos saber cuáles son los píxeles. Necesitamos cambiar esta unidad de medida a píxeles. Para ello, subiremos a, en un Mac, vamos a Photoshop CC, vamos a Preferencias, y vamos a uno que diga Unidades y reglas. Ahora bien, si estás en un PC, está en un lugar ligeramente diferente. Vas a Editar, luego justo abajo en la parte inferior aquí, habría uno que diga Preferencias, y luego vas a Units & Rulers. Cualquiera que sea, hagámoslo a unidades y gobernantes. Lo que queremos hacer es, mío está fijado en centímetros, el tuyo podría estar en pulgadas o milímetros. Cambiemos las reglas a píxeles. Otra cosa que necesitamos cambiar es el tipo. tipo utiliza puntos típicamente cuando estamos tratando con la impresión. Pero lo que queremos hacer es que ahora queremos cambiar a píxeles porque esa es la medición que usamos tratando con web. Al hacer clic en “Ok” notarás que ahora tiene aproximadamente 1,200 píxeles de ancho. Cuando vaya a la herramienta Tipo, que es esta T aquí, notará que estoy tratando con píxeles en lugar de puntos. Algo a tener en cuenta es que si eres una persona que se está moviendo de la impresión a la web, vas a tener que volver atrás y cambiar esas provincias cada vez que quieras trabajar en un tipo diferente de documento. Para hacerlo en un Mac, vamos a ir a Photoshop abajo a Preferencias, y bajar a Units & Rulers, recuerda si eres PC, está bajo Editar, Preferencias, Unidades & Rulers, y vas a ponerlo de nuevo a ya sea pulgadas o centímetros, y el tipo se remonta a puntos. Pero de un dolor, pero eso es lo que tenemos que hacer. Voy a dar clic en “Cancelar” porque quiero dejarlo, como estaba, configurado en píxeles. 7. Descarga de los archivos de los ejercicios: Hola, en este video vamos a ver cómo descargar los archivos de ejercicios que van de la mano con este curso. Ahora no tienes que tener estos archivos, pero es realmente útil si quieres seguir paso a paso. Dentro de los archivos, deja tu dirección de correo electrónico aquí en el medio, y te enviaré por correo electrónico las imágenes que van de la mano con el curso, junto con cosas como las fuentes y colores que utilizamos. Lo que también he hecho es que al final de cada video, he guardado un documento de Photoshop que representa donde estamos hasta. Entonces si te pierdes o tu archivo no está funcionando de la manera que lo hace a través de los videos, puedes comparar tu archivo con el archivo descargado, para que puedas ver dónde podrías haber ido mal. A lo largo del curso, me referí a muchas referencias y recursos diferentes, cosas como sintaxis y sitios web, todos formarán parte de este archivo de ejercicios aquí. Está bien, sigamos adelante. 8. Comprender el diseño responsivo para teléfonos y tabletas: El diseño web responsive es una forma de cambiar un sitio web dependiendo del tamaño del navegador. Ahora le estoy mostrando Smashing Magazine. Smashing Magazine es sitio web que leí mucho y me gusta el esfuerzo en el que se metieron para rediseñar las diferentes páginas dependiendo del tamaño del navegador. Por el momento lo estamos viendo como dirías, una pantalla grande como un iMac o un monitor 4K o algo realmente grande y de alta definición. Se puede ver que hay un nav a la izquierda, un sub nav, contenido principal y algunos anuncios. Pero una vez que me hago más pequeño, digamos hacia abajo a una vista de escritorio regular, se puede ver que cambia, se baja a esta navegación aquí, nuestro contenido principal y anuncios, pero a medida que se hace más pequeño, digamos abajo, vista de tableta. Cambia bastante, zanjas son los anuncios, la navegación se vuelve un poco más pequeña, esto está a lo largo de la parte superior aquí, ahora. Si me meto en más pequeño, hasta la vista móvil, las cosas cambian bastante de nuevo. Ahora lo que hay que sacar de eso es que cuando estás diseñando en Photoshop, Photoshop es medio estético. No es escalable, elásticos, como se puede conseguir cuando finalmente se pone como sitio web. Entonces el truco para los diseñadores a la hora de burlarse de un prototipo en Photoshop es que necesitarás diseñar las diferentes vistas para que cuando se lo entregues al desarrollador, sepan lo que hace el sitio cuando se pone al móvil. ¿ Qué sucede cuando el menú está en vista de tableta? Y todas esas preguntas necesitan ser respondidas en tu maqueta. Lo que no quieres es un montón de preguntas de ida y vuelta entre tú y el desarrollador tratando de responder preguntas que deberían haberse concretado en la etapa conceptual. Y esa es una rápida introducción al diseño web responsive. 9. Comprender los sistemas de cuadrícula y Bootstrap: Ahora la solución más popular para manejar diferentes tamaños de navegador en este momento es el sistema de cuadrícula. De los sistemas de red, algo llamado Bootstrap es, con mucho, el más común. Ahora, ya sea que estés usando Bootstrap o cualquier otra forma de construir tu sitio web, probablemente estés usando el sistema de grid. Eso es lo que usaremos en nuestro documento de Photoshop. El sistema de rejilla permite a los diseñadores trabajar desde una cuadrícula base de 12 columnas. Los diseñadores pueden gastar cualquier cantidad de esas columnas para adaptarse a su sitio web. Echemos un vistazo a este ejemplo de sistema de cuadrícula aquí en el sitio Edward Robertson. Se puede ver aquí arriba, se llama responsivegridsystem.com. Ahora, qué vas a ver abajo si me desplaza todo el camino hasta el fondo aquí, empieza en una base columnas de 12. Ahora, aún tengo que ver a alguien usar exactamente todos los 12 a menos que haya puntos de bala o listas o algo similar. Lo que tiende a suceder es que los diseñadores terminan gastando algunas de estas columnas. Por aquí abajo, verás que empieza en un nivel base de 12 columnas. En la parte superior aquí se puede ver que fácilmente podemos cubrir esas 12 columnas, digamos seis de ellas y seis de nuevo, para curvar a la mitad nuestro sitio web. Esta es una manera realmente bonita. Doce es un número realmente bonito porque podemos cortarlo en tercios, y cuartos, y seiss, todo muy fácilmente usando la cuadrícula de 12 columnas. Este es otro ejemplo aquí en el sitio Edward. Se puede ver un par de diseños de ejemplo para responsive. Ahora, esta página de intro aquí, olvídate de las alturas porque las alturas son realmente cortas. Pero ver los diferentes recortes en cuanto a la navegación. Se puede ver aquí es donde va mi logo y este otro trozo aquí, estos otros dos tercios serían donde va mi navegación. Esto es span en absoluto y esto podría ser decir un carrusel giratorio como lo tienen escrito aquí. Estas son cajas de características todas curvadas en tercios. Cuatro columnas, cuatro columnas, cuatro columnas, y luego mi pie de página estaría abarcando las tres. Puedes ver aquí un par de ejemplos diferentes de formas de cortar sitios web. He cambiado aquí al archivo de Photoshop que puedes descargar como parte de los archivos de ejercicio y si no lo has hecho, hazlo desde el siguiente enlace. De lo contrario, puedes crear tus propias páginas. Ahora lo que he hecho es, si voy a “Ver” y voy a “Mostrar”, y voy a “Guías”, verás que se ha cortado en columnas de 12 con un poco de relleno y entre todas ellas. Lo he hecho para escritorio, tablet y móvil. Ahora notarás aquí en el móvil, el móvil en realidad no tiene 12 columnas como la tableta y el escritorio. Hacemos esto porque 12 columnas en un tamaño tan pequeño se convierte en esta masa densa de columnas y nadie realmente corta un sitio móvil en 12 columnas distintas. Ahora, a la hora de decidir qué páginas y qué tamaños deben ser, puedes ver el escritorio aquí tiene 960 píxeles de ancho. Cuando estés decidiendo qué tamaño debería ser el escritorio, y tablet ser, y móvil para ser, no te pongas demasiado al día conlas dimensiones reales de los píxeles porque hay tantos tamaños de pantalla diferentes,es imposible agruparlos las dimensiones reales de los píxeles porque hay tantos tamaños de pantalla diferentes, todos juntos en un solo tamaño de píxel exacto. Eliges un tamaño genérico que se ajuste a dispositivos móviles, de escritorio y tabletas que son comunes en este momento, y eso va a cambiar a medida que pasa el tiempo también. Prepárate para en un par de años cuando se cambien todas las resoluciones de pantalla, o hay una nueva versión feblety, desktopy, móvil por la que quizás tengas que pasar y diseñar un estilo separado para acomodar ese tamaño de pantalla. Si buscas dimensiones exactas para empezar, entonces puedes descargar la plantilla de Photoshop que tengo en los recursos. O si estás usando say Bootstrap, puedes ir a revisar Bootstrap para ver lo que ven las estrellas de la ruptura de los medios. Lo que consideran móvil es, lo que consideran tableta es. Si podemos echar un vistazo. Ahora ya estoy en Bootstrap, en getbootstrap.com. Estoy en la versión ligeramente de vista previa en la versión cuatro. Por el momento, estamos hasta la versión tres, pero la versión cuatro saldrá muy pronto, por lo que estaremos usando eso para este curso. Haga clic en “Documentación” luego bajaré a “Diseño” y escojo “Cuadrícula”. Ahora si me desplazo aquí abajo, este de aquí dice opciones de cuadrícula. Se puede ver aquí, aquí está mi pequeña caja que sería móvil en retrato. Entonces tengo pequeño que se considera teléfono en paisaje, tableta mediana, grande es decir una pantalla de portátil y extra grande es una pantalla realmente grande decir IMAX. Se ve que los tamaños aquí están escritos en esta medida llamada REM, que es una raíz EM. Si nunca has usado esta medición antes, no te preocupes. Esencialmente, tomas el 45 y lo veces por 16. Dieciséis se considera el tamaño predeterminado en un navegador. Por lo que 45 veces 16 nos da 720 píxeles. Si volvemos a Photoshop, verás que he usado 720 píxeles para esta tablet. Ahora cuando lleguemos hasta Bootstrap cinco y Bootstrap seis, eso irá y ajustará estas cosas dependiendo de cuáles sean los tamaños más comunes. Podrían hacerse más grandes, podrían hacerse más pequeños, lo que sea realmente popular en ese momento. Ese es un buen lugar para que empecemos para que nuestro Photoshop se burle. Ahora lo que he hecho por ti aquí también es que estas guías pueden ser un poco difíciles de trabajar también porque se estiran más allá de las páginas. Lo que he hecho aquí es, digamos que estás trabajando en tu vista de escritorio, puedes cambiar estas capas hacia abajo, y te darás cuenta aquí, tengo esta llamada guías de columna útiles. Si cambio eso hacia abajo, he dispuesto un par de rejillas de columnas básicas. Mira esto. Voy a apagar mi Vista, Mostrar, Guías y prefiero trabajar de esta manera. Si estoy haciendo algo que se supone que sean tres columnas, voy a hacer clic en esto en mis tres columnas y es solo el fondo transparente, para que sepa cuándo estoy trabajando con mi documento. Lo estoy arrastrando y sé que estoy trabajando dentro de estas tres columnas aquí. Cuando termines de usar la columna, puedes encender el globo ocular y apagar otro para trabajar en un diseño ligeramente diferente o en un sistema de cuadrícula diferente. Ahora notarás en este tutorial que estamos usando sólo tres de los tamaños. Estamos usando lo pequeño, los menos de 34ems para retrato móvil, la tableta y el escritorio. Ahora no hemos hecho éste que está entre aquí, que es nuestro teléfono paisajista. No hemos hecho el escritorio realmente grande o extra grande también. Es principalmente solo para mantener el tiempo bajo de este tutorial, y depende de supongo el nivel de complejidad que tenga tu sitio web. Si se trata de un sitio web de tiro rápido, posible que no pases tanto tiempo con el Excel o la versión pequeña, que es la versión de teléfono de paisaje pequeño, y hasta tal vez el sitio sea un poco más maduro. Si estás trabajando en un proyecto más grande, entonces definitivamente vas a estar mirando las cinco consultas de medios y los cinco tamaños aquí en Photoshop. 10. Consejos para ampliar y navegar en tu documento: Hola. En este video, vamos a ver cómo hacer zoom y movernos en un documento. Ahora, hay muchas formas de acercar y alejar un documento. Te voy a mostrar la manera más rápida y fácil. En un Mac, mantienes presionada la tecla Comando y toca el “Plus” de tu teclado. Ahora si estás en un PC, mantén presionada la tecla Control y toca “Plus” y se acercará. Ahora, manteniendo esa misma tecla y tocando el “Menos” se alejará. Lo que queremos hacer es que queremos asegurarnos de que estamos viendo nuestra maqueta de Photoshop al mismo tamaño se va a renderizar en un navegador web. Porque un navegador web, obviamente, no podemos acercar y alejar como podemos hacer en Photoshop, así que lo que queremos hacer es verlo a tamaño real. Para ello, si estás en cualquier computadora que no sea un MacBook Pro nuevo, la forma más fácil es ir a View y escoger un 100 por ciento. Eso lo mostrará a su tamaño real. Ahora, puedes ver en la mía aquí, es aproximadamente la mitad del tamaño que debería ser porque estoy usando un MacBook Pro con una pantalla de retina en. Corta historia, esencialmente te muestra todo a la mitad de tamaño. Ahora lo que tenemos que hacer, con cualquiera que tenga un MacBook Pro, es que hay que restablecer a este 200 por ciento, levantado el doble de tamaño. Photoshop mostrará al mismo tamaño que te mostrará en un sitio web para que puedas ser un poco más claro sobre qué tamaños de fuente quieres elegir. Entonces, para que quede claro, si estás en cualquier computadora que no sea una pantalla retina de MacBook Pro, usa este 100 por ciento. Si estás en una pantalla de retina, usa 200 por ciento. Ahora que estamos en este nivel de zoom más cercano, queremos movernos. El largo camino es que podría arrastrar estos pequeños deslizadores por ahí y eso funciona. Una forma más agradable de trabajar es si mantengo pulsada la tecla de la barra espaciadora en mi teclado, verás que mi cursor cambia de herramienta de movimiento a esta manecita y esta mano me permitirá hacer clic, sostener y arrastrar el ratón y moverme alrededor de mi documento. Estoy sosteniendo mi tecla Barra espaciadora todo el tiempo y estoy dando clic y estoy arrastrando y luego soltando con mi ratón. Esta es una manera agradable, fácil de moverse por el documento. Eso es acercar y navegar por tu documento. 11. Herramientas de medición y espaciado: Hola, en este video vamos a ver reglas en la medición de cosas. Hacemos esto por dos razones. Una es que queremos algún espaciado incluso entre cajas y también podríamos estar haciendo esto porque la persona que construye el sitio web, si no somos nosotros, podría querer que las medidas sepan lo lejos que deben estar las cosas o el relleno entre los objetos. Para ello, hay dos maneras, hay la forma oficial y luego está la forma que uso. Ahora la forma oficial de hacerlo es usar la Herramienta Regla. Ahora la Herramienta Regla se esconde debajo de la Herramienta Cuentagotas aquí. Si hago clic en mantener, sostener, sostener, ahí está, agarra la Herramienta Regla. Digamos que quiero medir la distancia entre este botón Más y la caja debajo de él. Lo que hago es hacer clic y mantener y arrastrar. Lo que verás es en la mano superior izquierda arriba en la barra de aplicaciones, que las medidas están cambiando a medida que estoy arrastrando esto. Ahora por defecto su estiramiento va a cualquier parte. Lo que quiero hacer es mantener presionada la tecla Mayús para bloquearla en esta posición vertical, para que pueda desplazarla hacia abajo. Ya verás ahí se establece en 77 píxeles entre éste y éste. Ahora, lo que tienes que hacer es acercar un poco solo para asegurarte de que en realidad esté muy cerca. Se puede ver porque yo estaba tan lejos, no ha sido perfecto. Puedo hacer clic en “Hold” y arrastrarlo solo para limpiarlo y decir en realidad quiero que esté ahí. Ahora son más como 81 píxeles. Ahora esa es la forma oficial. Voy a despejar a mis gobernantes, para deshacerme de él, voy a alejarme manteniendo menos Comando o Control. Ahora esa es la herramienta oficial de medición y es genial. Pero lo que es mejor es usar la Herramienta Rectángulo, la Herramienta Rectángulo aquí tiene un gran beneficio en el hecho de que encaja a los bordes de las cosas en la página. En tanto que tuvimos que hacer algunos ajustes con la Herramienta Regla después para asegurarnos de que todo se midiera bien. Mira esto, voy a medir la distancia entre aquí y aquí. Voy a hacer clic en mantener y arrastrar y ver que hay como líneas rosadas que están apareciendo por todas partes. Eso se debe a que está tratando de alinearse con un montón de cosas diferentes en las páginas. La mía es una página bastante compleja, así que hay un montón de cosas con las que está tratando de alinearse, pero es bastante bueno solo chasquear, mira esto. Si solo lo arrastro aquí abajo, es bastante bueno que salió 81 pixeles. Voy a acercar y revisar dos veces. Vamos a golpearlo, es perfecto. Ahora la Herramienta Rectángulo es realmente buena para espaciar objetos también. Voy a eliminar esta capa aquí abajo. Voy a alejar un poco y bajar sosteniendo mi Barra espaciadora, haga clic, y arrastre hacia abajo. Voy a acercarme aquí a mi pequeña lista de portafolio. Ahora tengo algo de espaciamiento parejo entre estos dos objetos. Estoy usando anchos de columna, así que vamos a Ver, Mostrar, y voy a activar Guías. Se puede ver ahí he usado el espaciado entre estas columnas. Ahora lo que quiero hacer es asegurarme de que el espaciado sea exactamente el mismo entre aquí y obviamente no lo es. Para que sea perfecto lo que puedo hacer es usar mi Herramienta Rectángulo, puedo hacer clic en mantener y arrastrar el rectángulo entre estos dos y te darás cuenta de que, lo ves chascar al borde es perfecto. Pero notarás que quiero que quede perfectamente cuadrado. Voy a deshacer eso yendo a Editar, Paso atrás. Lo que voy a hacer es mantener presionada la tecla Mayús mientras arrastro mi rectángulo, si mantengo presionada la tecla Mayús bloqueará las restricciones. Ya puedes ver son 30 píxeles por 30 píxeles ahora. Ahora si uso mi herramienta Mover, haga clic, mantenga pulsado, y arrástrelos hacia abajo y los usamos como un espaciador. Voy a recortar en el fondo de eso, ahora está ahí. Ahora voy a subir esta imagen. Ahora, a veces no recorta, así que en este caso no lo es. Lo que puedes hacer es usar las teclas de flecha del teclado. Sólo voy a usar las teclas de flecha que lo golpean. Usar rectángulos es una buena manera de asegurarse de que el relleno sea el mismo entre estas imágenes y el mismo debajo de aquí. El único problema con ellos es que son físicos, que significa que esta cosa de aquí va a imprimir o salir en tu simulacro arriba. Debes asegurarte cuando termines con él, que lo seleccionas en tu panel Capas y lo eliminas. Está bien, y así es como mides las cosas en Photoshop. 12. Atajos de capas que debes conocer: En este video, vamos a ver algunos de los atajos esenciales que necesitas en cuanto a lidiar con capas. Ahora, con el panel de capas que ves aquí abajo, estoy trabajando en una imagen final aquí. Se puede ver que las capas se están construyendo con el tiempo, y ahora hay cientos de ellas. Por lo que no es realmente práctico ir a través y tratar de recordar los nombres de todos ellos, para que sepas en qué capa estás trabajando. Entonces necesitas un truco. El mejor y el que uso constantemente es asegurarme de que estés en tu herramienta de movimiento y asegúrate de que tu herramienta de movimiento esté configurada en capa. Ahora lo que pasará es que vas a aprender un pequeño atajo. Estamos en alguna capa aleatoria por el momento. Quiero dar click a esta palabra. Esto es More. Ahora voy a hacer zoom un poco, selecciona Más. Lo que necesito hacer es mantener presionada la tecla de comando en un Mac o la tecla de control en el PC. Lo que notarás es que, ¿ puedes ver arriba en la parte superior de la EPA? Cambia esta cosa llamada auto-selección. Simplemente lo activa mientras lo necesitas. Si mantengo presionada la tecla de comando y hago clic en la palabra más, se puede ver en mi panel de capas, saltó a la Más. Puedo mover esto. Entonces di que también quiero mover la caja verde. Mantendré presionada mi tecla de comando y se enciende la pequeña herramienta de autoselección, hago clic en esto. A pesar de que tiene algún nombre aleatorio llamado Rectángulo 2, todavía puedo moverlo. De acuerdo, así puedo hacer clic en Más y moverlo a través, hacer clic en el rectángulo, moverlo a través. Sostén pulsado Hagamos Awesome. Es sólo una manera realmente fácil de recoger las capas y moverlas alrededor y realmente esencial cuando estás trabajando en un documento tan pesado de capa. Voy a ir a editar. Paso hacia atrás, y un paso hacia atrás, y un paso hacia atrás. Otro atajo útil es que si tienes un conjunto realmente complejo de capas todas encima de la otra, es realmente difícil seleccionar la que quieres. ¿ Qué puedes hacer es pretender por un segundo que aquí vemos esta imagen de fondo? Yo quiero seleccionar usando esta pequeña zona aquí, pero no puedo porque hay una caja negra frente a ella. Si uso mi comando click trick, va a escoger este rectangular cada vez. Por supuesto, puedo recoger aquí, pero eso arruina mi ejemplo. Lo que puedo hacer es si hago clic derecho y si estás en un Mac y no tienes un clic derecho, control-click. Si estás en un PC, es fácil hacer clic derecho y notarás que recoge todo en mi orden de capas aquí. Ese es el rectángulo negro. Debajo de ella hay algo llamado capa 2 y esa es mi pequeña imagen. Otro atajo útil que vas a necesitar es si estás usando mi plantilla y estás usando las cuadrículas de columnas. Necesitas poder ir a ver show guides. Estos pueden ser realmente geniales cuando estás alineando las cosas pero verdadero dolor cuando estás tratando de mirar las cosas visualmente porque arruina el aspecto de todo con las líneas por todas partes. Entonces el atajo para esto, si estás en un Mac, es comando y usa la tecla de dos puntos en tu teclado. Si estás en un PC, es control y colon y activas estos y apagas. Hago esto bastante cuando estoy trabajando con estas rejillas cuando quiero alinear las cosas y luego lo apago de nuevo cuando estoy tratando de mirar las cosas y ver cómo se alinean. 13. La herramienta cuentagotas: Ahora la siguiente herramienta en tu kit de herramientas de diseñador web va a ser herramienta cuentagotas de ojos. Esa es una herramienta fácil para saber con qué color estás trabajando. Se esconde debajo de la herramienta de regla y debería configurarse en la herramienta cuentagotas por defecto, pero estábamos usando esto antes, ¿recuerdas? Voy a usar herramienta cuentagotas y es simplemente realmente bueno para escoger color. Quiero saber de qué color es este verde. Voy a dar click en él y te darás cuenta de que aquí arriba, mis muestra de color que apunta a ella y aquí mi color de primer plano lo selecciona. Vamos a hacer doble clic en el color de primer plano aquí abajo y notarás que obtenemos nuestro número hexadecimal, y este es el número que generalmente se utiliza en el diseño web para establecer color. Hay algunas otras formas de lidiar con RGBA que veremos más adelante, pero también puedes usar estos colores RGB si es necesario. Hagamos click en “Ok”. Esa es la herramienta cuentagotas para recoger color. Digamos que queremos usar ese color una y otra vez en nuestro documento. Lo que puedes hacer es crear lo que se llama una muestra. Ahora, para hacer una muestra, digamos que aquí quiero este color melocotón. Si lo selecciono, lo puedo mover en mis paneles de muestra y puedo usar esta pequeña bandera aquí que dice “Nueva muestra” y usa mi color de primer plano que fue recogido con la herramienta de álgebra y puedo llamar a esto BYOL Peach. Haga clic en “Ok”. Ahora, lo que harás es que lo verás solo aparecer al final de mi pequeño panel de muestra aquí. Eso significa que llego a reutilizar eso cuando lo necesito. Digamos que quiero cambiarlo de nuevo a blanco y negro, voy a usar mi herramienta de rectángulo y voy a dibujar un rectángulo y va a ser negro. Pero lo que puedo hacer es que puedo usar este pequeño desplegable y verás que está mi color melocotón al final de mis muelas, y puedo reutilizar ese color una y otra vez. 14. La herramienta de transformación: Una de las herramientas más útiles es su 'Herramienta de transformación'. Ahora, uso mucho esto a través de esta clase, y mucho en mi propio trabajo. A menudo se usa como atajo. El largo camino está bajo edición, y es éste llamado herramienta de transformación libre aquí. Ahora, voy a usar el atajo a lo largo de este curso, y es realmente bueno para que aprendas también. puede ver en un Mac es Command T, y en un PC es Control T. Así que voy a presionar Command T en mi teclado. Mira esto, porque tengo mi cuadrícula vista aquí, ¿de acuerdo? Si no tienes que mostrarte en la cuadrícula, tienes una vista, muestra y ve a guías. Mira esto, porque mis guías están fuera se va a chasquear y decir que quiero que se haga un poco más grande y quiero sacarlo por lo que expande cuatro columnas aquí para este botón. Genial, por lo que se ajustará a las guías si es necesario. Podrías apagar las guías y no lo hará. Ahora un par de otras útiles herramientas modificadoras es digamos el escape. El escape se deshace de nuestra transformación y vamos a ir a Command T o Control T en un PC y ver esto. Si mantengo pulsada la tecla Mayús mientras arrastro una de estas esquinas, ¿ puedes ver que la altura y la anchura son exactamente iguales? Entonces si deshago eso, si no presiono la tecla Mayús, puedo moverme en cualquier lado viejo que me guste, lo cual es útil, pero también realmente bueno si mantienes pulsada la tecla Mayús. Ahora he tocado escape otra vez, veamos una de las teclas modificadoras, así que Command T y es la tecla ALT. Entonces si estamos manteniendo presionada la tecla ALT, y digamos que quiero hacer de estas cuatro columnas por sostener la tecla ALT a este lado. ¿ Vigila qué pasa? Se puede ver el lado opuesto viene para el paseo. Esa es la tecla ALT, si sostengo eso hacia abajo mientras la estoy estirando. Cuando hayas terminado y hayas terminado la transformación y te gusta presionar 'Enter' en tu teclado o 'Return' y eso va a comprometer eso. Eso terminará la transformación, ya estás listo para irte. 15. La tecla 'f': Ahora esta herramienta es realmente útil cuando quieres tener una sensación de cómo se va a quedar el sitio web sin que toda la basura esté en el exterior, todas las herramientas y pestañas de Photoshop y barras de herramientas. Ahora para hacer esto, vas a “Ver”, hay uno llamado Modo Pantalla y usas este aquí. Ahora por alguna razón, sé que es la tecla de acceso directo de F pero alguna razón en esta marca aquí no estoy seguro si en una PC, pero no tiene el atajo, así que vamos a ignorar ese poquito y usar el pequeño atajo rápido clave. Si toco la tecla F una vez, oculta la mitad de ella. Vuelve a escribir la tecla F en mi teclado, se deshace de todas las barras de herramientas excepto de las reglas. Ahora lo que quiero hacer es volver atrás uno más y apagar a los gobernantes, los gobernantes los apagarán . Entonces recuerda, una vez para la tecla F, dos veces para la tecla F y puedo ver mi documento y puedo moverlo y puedo sostener mi barra espaciadora. Puedo moverlo y me da solo un poco de sentido de cómo se ve mi sitio web en este momento. Una tecla F por tercera vez, te llevará de vuelta al cuadrado uno. Por lo que se trata de tres sentadas. Ahí está esta aquí, y luego esta siguiente, y luego esta pantalla completa. Hacen ciclo mediante el uso de la tecla F. Ahora, otra cosa bonita que me gusta hacer es que obtengo la tecla F dos veces para entrar al modo de pantalla completa es que no me gusta este fondo blanco, sobre todo cuando estoy lidiando con un sitio web tan oscuro. Yo quiero que este fondo aquí no sea blanco. Entonces, lo que puedes hacer, puedes hacer clic con el botón derecho en él y escoger cualquier gris oscuro, hacer clic derecho en él y escoger negro, y solo cambia el color de fondo. Si me alejo, notarás que cambia para siempre mi pequeño color de fondo. Si tengo F key back, depende de ti cómo prefieres trabajar. Me gusta trabajar en una pantalla oscura o gris oscuro solo para poder conseguir escenas más bonitas de mi página web. 16. Tamaños de pantalla para escritorio, tableta y teléfono: Hola. En este video, vamos a ver la resolución de pantalla frente a nuestro tamaño real de píxel. Esto puede ser un poco confuso cuando estás empezando, estás pensando: “Genial, voy a hacer un simulacro de un iPhone 6”. Te vas a Photoshop y aquí están las dimensiones. Tú lo Google, y dice que es este ancho de píxel por esta altura de píxel, y tú decides: “Voy a hacer eso. Voy a entrar a Photoshop, voy a hacer un nuevo documento de que va a ser 750 por este mil 334”. Lo haces y terminas con este tamaño aquí. Ahora bien, este no es el tamaño verdadero, lo va a ser. Echemos un vistazo atrás a ese sitio web aquí y veremos que es el ancho CSS que realmente necesitamos observar cuando estamos diseñando para móviles, porque todos sabemos que los teléfonos móviles, aparte de un par de ellos, todos son muy similar en el tamaño. Pero lo que sucederá es esta relación de píxeles aquí, puede ver cuando es uno a uno, que cualquiera que sea el tamaño físico que sea, es el tamaño real de la pantalla aquí. No hay densidad real, y si has visto un viejo iPhone 3, notarás que los gráficos no son geniales, pero es del mismo tamaño físico que un iPhone 6. Pero lo que pasa es cuando se obtiene esta proporción de píxeles más densa, el mismo tamaño físico, vemos que se duplica aquí. Los píxeles reales se hacen mucho más grandes, pero el tamaño real del teléfono es exactamente el mismo. Te darás cuenta de decir este LG G4, este de aquí tiene una relación de imagen de cuatro, por lo que es un teléfono bastante pequeño, por lo que el tamaño es como el iPhone 6, pero puedes ver que es enormemente grande en cuanto a su ancho físico. Pero aquí lo echamos un vistazo en comparación entre sí, realidad no son tan diferentes. Un poco más grande, el iPhone 6 es un poco más grande, pero no un enorme salto grande como en esta indicación aquí. Por lo que pueden ser bastante confusos cuando eres nuevo. El básico es que cuando estás diseñando un Photoshop, diseñar para este tamaño físico te dará la mejor representación del teléfono real en lugar de seguir estos anchos de píxel físicos en la diapositiva aquí. 17. Pruebas en el iPhone y el iPad con Adobe Device Preview: Adobe Preview o Device Preview es una forma de mostrar en qué estás trabajando en Photoshop directamente en un dispositivo móvil, ya sea un iPhone o un iPad mientras estás trabajando. Esto significa que podrías estar haciendo maquetas en tu computadora, pero en realidad viendo cómo se ve en un dispositivo móvil. Ahora, esta app solo funciona para iPhone y iPad en este momento, todavía no hay equivalente de Android y probablemente no lo sea, pero sigue comprobando si Adobe sí lanza algo para Android. Lo siguiente que debes hacer es descargar la app para tu iPhone y iPad. Ahora, tengo en el iPhone aquí, ignora el fondo de pantalla ahí de mi muy guapo hijo. Una vez que lo hayas hecho, lo abres y ahí dentro, tendrás que iniciar sesión con lo que se llama tu Adobe ID. Ahora bien, si no tienes un Adobe ID, probablemente sí, simplemente no sabes qué es, la forma de averiguarlo es subir hasta aquí, sube a Ayuda. Yo estoy en Photoshop, sube a Ayuda y puedes ver aquí la mía es DANIEL @BRINGYOUROWNLAPTOP. Ahora, no hagas clic en “Cerrar sesión”, esto es solo una guía aquí para saber cuál es tu dirección de correo electrónico para tu Adobe ID. Si no recuerdas tu contraseña, intenta usar esta dirección de correo electrónico en Adobe.com e intenta iniciar sesión y si no recuerdas tu contraseña, haz clic en el botón que dice: “Envíame una nueva contraseña”. Una vez que tengas eso, inicia sesión en tu app. A partir de ahí, tiene que pasar una o dos cosas, necesitas tenerlo conectado como yo tengo a tu enchufe, esto es solo un enchufe que viene vía cargador, enchufarlo a tu computadora y usar eso para conectarlo; o tú puede usar Wi-Fi sin el enchufe. Ahora, usar Wi-Fi solo significa que este teléfono necesita estar conectado al mismo router que es tu computadora, necesitan estar conectados a la misma red y luego funcionará de forma inalámbrica. Ahora lo que tenemos que hacer, es que necesitamos tener abierto nuestro Device Preview. Aquí lo puedes ver, este pequeño ícono. Si no lo puedes ver ahí, está debajo de Ventana y se llama Device Preview. Ahora si ambos están conectados, lo verás en tu pantalla, tendrá el nombre de tu teléfono y en tu app tendrá aquí que estás conectado. Lo siguiente que hay que hacer, es asegurarnos de tener nuestro archivo abierto en Photoshop. Voy a abrir el archivo que vamos a estar usando o creando durante este curso, esa es la versión final. Se puede ver aquí en mi teléfono, todo se está exhibiendo. Ahora lo realmente bonito aquí, es que es utilizable, puedo desplazarme por él y ver cómo se ve todo el diseño en este teléfono. Es independiente de Photoshop. Se puede ver que no está haciendo nada, pero está exhibiendo aquí. Ahora, algo realmente bonito es que es dinámico, lo que significa que cuando actualice algo en Photoshop se va a actualizar instantáneamente en mi teléfono sin que haga nada, así que mira esto. He notado en mi teléfono que tanto BYOL como la Barra de Navegación es bastante grande, así que lo que voy a hacer es que lo voy a hacer más pequeño. Voy a acercarme a esta parte superior de aquí. Te darás cuenta si encuentro mi navegación y la hago bonita y pequeña, verás si agarro mi navegación y la hago un poco más pequeña, haz clic en “Enter”, notarás muy rápidamente que se está actualizando en el teléfono, toma alrededor de un segundo o dos, pero totalmente utilizable. Lo mismo con esto Trae Your Laptop aquí, la fuente es demasiado grande. Agarra la Font, hazla más pequeña, bajémosla a algo así como 45, muévete, muévete y te darás cuenta de que se actualiza a medida que me estoy moviendo con un segundo o dos de retraso. Digamos lo mismo para este texto aquí. Este texto blanco aquí se ve un poco pequeño en mi dispositivo móvil, así que voy a agarrar la Herramienta Tipo, lo seleccionaré todo y lo moveré de 16, bumelo hasta decir 18 y notarás en mi teléfono que se actualizará automáticamente. Un par de cosas que puedes hacer con el Device Preview, es si haces clic en él una vez, en la parte superior aquí hay un desplegable y significa que puedes barajar a través de los diferentes tableros de arte que tienes. Para mí no es tan útil porque tengo las diferentes mesas son tablet y escritorio y es interesante verlo abajo en las diapositivas, pero realmente no me va a ayudar mi flujo de trabajo. Para lo que fue realmente bueno, es decir que estás desarrollando una aplicación o decir que estás en esa etapa conceptual para móvil y tienes un par de versiones diferentes. Eso significa que puedes cambiar y hacer clic en las diferentes mesas de trabajo para verlos en comparación entre sí. Algo a tener en cuenta también, es que en realidad no tienes que tener Artboard configurada en Photoshop para que esto funcione, puedes abrir cualquier archivo viejo y se cargará en la app. Ahora, soy el primero en entrar cuando hay alguna tecnología que conecte mi teléfono y mi computadora y haga deming y esas cosas y muchas veces no funcionan muy bien y lucharé junto con ellos durante bastante tiempo, pero esto particular uno, Adobe Preview es brillante. Funciona, es rápido, y realmente sí ayuda a mi flujo de trabajo. Ahora, si estás diseñando para móvil y tablet, ahora deberías estar usando algo como esto a lo largo tu compilación porque tantos diseñadores esperan hasta justo al final, por lo que el sitio web está realmente construido antes de que realmente bajen y probar lo que va a hacer en el móvil y la tableta, y eso está demasiado lejos en el proceso de diseño para estar haciendo algo así. Estar probando, tenerlo abierto, tenerlo todo el tiempo para que puedas ver y revisar a medida que avanzas. Ahora, probablemente lo más importante a recordar al usar Adobe Preview es asegurarte de que conectes un par de teléfonos, un par de iPads, los anclas por toda la pantalla aquí para que parezca que estás súper importante y además parecerá que estás trabajando en el Reporte de Minoría, como Tom Cruise, moviendo las cosas , pasándolas por ahí y impresionará totalmente a tus colegas. Está bien, eso es todo para Adobe Preview. 18. Lo que es técnicamente posible en el diseño web: En este video vamos a ver formas en que podemos ayudarnos a nosotros mismos cuando estamos construyendo nuestro sitio después de Photoshop. En Photoshop tenemos una infinita cantidad de cosas que podríamos hacer. Podríamos tener un gran tema con una sombra de gota con unicornios volando fuera de ella y fuego y todas las cosas. Podemos hacer eso en Photoshop, ese es ese tipo de programa pero cuando se trata de diseño Web estamos bastante limitados en cuanto a los tipos de cosas que podemos poner en un sitio web hasta su código, y principalmente se reduce a los navegadores y a qué edad los navegadores dependen de lo que pueden y no pueden soportar. Unicornios voladores, no, no hay ninguna característica de CSS para eso pero hay características para gradientes y sombras de gota. Lo que podemos hacer es que podemos usar este sitio web llamado caniuse.com. Ahora hay otros sitios como éste. Me gusta mucho este sitio, y digamos que queremos trabajar con gradientes. Si escribo en gradiente aquí me dice que el gradiente CSS funciona en todo excepto Opera Mini. Ahora si necesitas apoyar Opera Mini entonces vas a tener que pensar dos veces sobre usar gradientes CSS, afortunadamente los gradientes están fuera por el momento y todo se trata de diseño plano. Pero di que necesitas tener un gradiente que si tienes que soportar este Opera Mini, entonces vas a tener que no usar gradientes CSS. Otra cosa que podría necesitar para averiguar si tienes que admitir algunos navegadores más antiguos. Si estás construyendo un sitio web y la regla es que tenemos que soportar al menos un mínimo de Internet Explorer 9, no vas a estar teniendo gradientes CSS. Ahora, no significa que no puedas usarlo, solo significa que no van a aparecer. Podrías diseñarlo para que si no se aplica el gradiente, que solo haya un color de fondo plano y eso podría estar bien porque está en el fondo no es una gran parte importante del mismo. Digamos algo así como, veamos las sombras. Ahí hay un par de sombras diferentes, caja-sombra. Sombras de caja, son sombras que cuelgan los lados de las etiquetas div que funciona de manera bastante consistente. Echemos un vistazo a las sombras de texto. No es compatible de nuevo en IE9. Ahora esto podría ser más importante porque podrías estar decidiendo que voy a tener este texto muy azul claro sobre este fondo blanco pero no es totalmente legible a menos que haya una sombra gota detrás de él. Estás confiando en esa sombra de gota para que se lea el texto. Lo que va a hacer es que Internet Explorer 9 va a ser este texto realmente descolorido sobre fondo blanco por lo que es un poco más importante. Sólo para echar un vistazo a este sitio a veces estás pensando, me pregunto si puedo hacer eso en un sitio web o no. Esto Puedo Usar. Ahora, otro bonito pequeño extra para el sitio está aquí. Es para tomar que estoy en Irlanda ahí es donde estoy filmando en este momento. Si hago clic en “Importar” me da esta linda cosa. Por el momento por defecto me dio el material global y ahora me da en realidad lo que está pasando en Irlanda. puede ver a nivel mundial que es 90 por ciento apoyado pero en Irlanda es 97 por ciento apoyado. Global toma en todos los países mientras que Irlanda tecnológicamente bastante moderna por lo que se va a apoyar mucho más, navegadores bastante modernos y computadoras modernas. Ahora si estuvieras haciendo un sitio que es específicamente para digamos una nación en desarrollo vas a tener una proporción diferente aquí. Vas a tener mucho más bajo. No vas a poder usar algunas de estas características tanto como dicen que vinimos aquí en Irlanda. Está bien, y ese es el sitio web Puedo Usar. 19. Uso de tableros de arte: Hola. En este video vamos a ver las mesas de trabajo. Tablas de trabajo es una nueva característica que salió en Photoshop CC 2015. Ahora si estás usando la versión posterior, va a funcionar bien. Sin embargo, si estás usando una versión anterior, no había tal cosa como los tableros de arte en 2014. Lo que vas a tener que hacer es, vas a tener que usar solo páginas separadas. Pero si estás usando mi versión o posterior, esencialmente todo lo que son es una forma de tener múltiples páginas en un documento en lugar de separarlas en documentos separados de Photoshop. Para hacerlo, vamos a Archivo, vamos a Nuevo y vamos a escoger Art Board de la ventana New Document y pongamos en nuestros anchos que discutimos antes en cuanto a los tamaños físicos de nuestro, empecemos con nuestro vista de escritorio. Nuestro escritorio va a ser de 960 píxeles, ahora la altura realmente no importa porque los sitios web cambian de altura dependiendo de cuál sea el contenido. Voy a poner, digamos 1500 y haga clic Ok. Esta es mi primera mesa de trabajo. Se llama Mesa de trabajo uno y puedes ver mis capas aquí. Es uno ligeramente nuevo. Si estás acostumbrado a usar Photoshop antes, hay un sistema de agrupación ligeramente nuevo con tableros de arte. Entonces voy a hacer doble clic en el tablero de arte uno para renombrarlo. Este se va a llamar escritorio, y va a tener 960 píxeles de ancho. Genial. Puedes ver los cambios de nombre a lo largo de la parte superior aquí. Para agregar otra vista, así que vamos a trabajar todos en una vista de tableta siguiente. Hay un par de formas diferentes de hacerlo. La forma más fácil que he encontrado es usar Layer, New, y usar este, eso dice art board. Este se va a llamar Tablets, y va a tener 720 píxeles de ancho. Voy a asegurarme de que diga 720 píxeles aquí abajo y use la misma altura. Haga clic en Ok, y se lo desliza junto a él allí. El último punto de vista que vamos a hacer es la vista móvil. Vamos a ir junto a Capa, Nueva. Vamos a ir al tablero de arte y vamos a escoger el móvil y éste va a ser de 360 píxeles. Ese es sólo el nombre a lo largo de la parte superior de ahí. Necesito realmente cambiar los píxeles por abajo aquí y usamos la misma altura y vamos a dar click Ok. Por lo que tenemos vista de tableta, vista de escritorio, y vista móvil todo uno al lado del otro. Ahora, donde se vuelve bastante útil es cuando comienzas a diseñar a través de los tres y quieres asegurarte de que todos sean consistentes. Digamos que voy a usar mi herramienta de rectángulo. Voy a escoger un color de muestra aquí, cualquier color aleatorio y no ese color. Una de las grandes ventajas para usar tableros de arte es el hecho de que puedo dibujar algo que en realidad está bastante lejos del borde aquí. Ya ves que está bastante al borde aquí y yo lo suelto, lo ves lo recorta hasta mi vista de escritorio. Es una pequeña característica bonita. Ahora lo siguiente que voy a hacer es que quiero lo mismo. Digamos que este es mi barra de navegación. Entonces voy a hacer doble clic en esto como mi gran barra de navegación a lo largo de la parte superior. He hecho doble clic en el nombre hacia abajo y lo renombré. Ahora quiero moverlo a través. Ahora voy a cambiar de nuevo a la Herramienta Mover, por defecto esta herramienta Mesa de trabajo bastante cuando estás trabajando con mesas de trabajo. He movido la Herramienta Mover y lo que me gustaría hacer es que voy a duplicar barra de navegación. Voy a hacer clic con el botón derecho del ratón y hacer clic en el que dice duplicar. Yo lo voy a llamar Nav Bar. Ya tengo dos de ellos, voy a usar la Herramienta Mover y voy a hacer clic en “Hold” y arrastrarlo a través de la tableta. ¿ Qué puede pasar cuando lo estás arrastrando, voy a deshacer eso solo para mostrarte de nuevo, es que voy a arrastrar nav bar cross. Inicialmente, en realidad no se mueve a través. A veces tienes que darles un poco de movimiento, solo para que aparezca en la vista de tableta, entonces puedo soltarme y está ahí dentro. Ya puedes ver que hay barra de navegación en mi vista de escritorio, y la tengo en mi vista de tablet. Entonces, el último, lo voy a duplicar de nuevo. Duplicar Capa, lo voy a llamar barra de navegación y en la vista móvil, voy a hacer clic en mantener y arrastrar, y luego darle un movimiento y aparecerá en mi vista móvil. Ahora puedes ver los beneficios por esto. Yo los voy a meter ahí y si estás trabajando en unos documentos separados y tienes que cambiar entre ellos, es realmente difícil de saber, ¿es del mismo color? ¿ Está alineado de la misma manera? ¿ Está buscando consistente a través de todas las diferentes vistas y tableros de arte es una pequeña ventaja nueva realmente agradable para Photoshop. Y eso son las mesas de trabajo. 20. ¿Qué pasa con la altura de las páginas?: Cuando empezamos a crear nuestras mesas de trabajo, todas las hicimos una altura de creo que 1500 píxeles de alto. Ahora echemos un vistazo a mi versión final aquí y te darás cuenta de eso, digamos mi vista de escritorio aquí versus mi móvil. Mi móvil era mucho más largo y mi vista de escritorio es en realidad más larga de lo que originalmente hice ahora también. Entonces a medida que estás trabajando, vas a terminar cambiando bastante la altura de tu sitio web para acomodar el contenido que vas a agregar ahí. Lo que aún no sabes, así que va a cambiar a medida que avanzas. Ahora para cambiar estas alturas a medida que avanzas, quieres usar la herramienta de mesa de trabajo. Para encontrar la mesa de trabajo contada, pulsas y mantén presionada la herramienta de movimiento y ahí está. Ahí está mi herramienta de mesa de trabajo. Ahora a slick para decir mi escritorio para hacerlo más largo haciendo clic en el medio, realmente no funciona, ¿verdad? Tengo que dar click en este borde aquí y hacerlo un poco más largo. Entonces da click en el borde, tú obtienes la mesa de trabajo y yo puedo arrastrarla hacia abajo, y eso es todo. De acuerdo, eso ha hecho que mi vista de escritorio sea mucho más larga. Obviamente puedes contratarlo también. Ahora estas manecitas se quedarán en el exterior y hasta que hayas lisado en cualquier otra cosa que no sea esta mesa de trabajo de alto nivel aquí, haz clic en mi barra de Nav y desaparecerán. Obviamente, puedes hacerlo por cualquiera de las páginas. Entonces puedo ir a mi herramienta de mesa de trabajo, asegurarme de dar click en el borde aquí de mi dispositivo móvil y puedo hacer que esto diga mucho más tiempo ya que estoy trabajando, voy a terminar, dar clic en cualquier otra cosa dentro mis capas y esas pequeñas ventanas transformadas se habrán ido. De acuerdo, así es como redimensionas tu página web usando la herramienta de mesa de trabajo. 21. Guías de página, columnas y reglas: Cuando estás trabajando con un diseño responsive en Photoshop, utilicé el término cuadrículas de columnas y guías mucho indistintamente. Porque el término general se llama grilla, pero realmente cuando los estás mirando, son solo columnas. Para definir esas columnas en Photoshop, utilizamos guías. ¿ Confuso? Sí, tipo de. Está bien. Echemos un vistazo a la versión terminada de ésta. Aquí puedes ver, estas pequeñas líneas azules, estas líneas azules claro son guías y me ayudan a conformar mis columnas en mi diseño responsive. Si vuelvo a mi documento vacío, ¿cómo hacer una guía? ¿ Cómo haces tu propia guía? Simplemente ve a View, y tienes que asegurarte de que algo llamado los gobernantes esté encendido. Lo que notarás es, por los lados aquí, la parte superior y la inferior, que estos pequeños gobernantes se repiten. Lo que podemos hacer es en cualquier parte de esta zona, aquí podemos hacer clic en mantener, arrastrar, arrastrar, arrastrar, arrastrar, arrastrar. Eso volcaría una guía en nuestro diseño. Saltamos una vez desde la cima también. Lo que pasará es cuando estés trabajando con la plantilla descargada que te he dado, es que quizá necesites moverlas o apagarlas o bloquearlas. Echemos un vistazo a eso. Por defecto, tu plantilla probablemente esté bloqueada. Es probable que las guías de tu plantilla estén bloqueadas. Eso es porque no quería que fueras a destrozar a los guías. Pero si quieres moverlos o bloquearlos o desbloquearlos, ve a Ver, sube a Lock Guides. Lo que eso significa es que no podré mover estos. No podré moverlos mucho. Están todos atrapados ahí. Si quiero desbloquearlos, desmarcho esto. Entonces porque cambia un poco, y puedo moverlos después. Digamos que hay una guía que ya no necesito. Lo que puedes hacer es seleccionarlo. Para eliminarlo, haz clic en mantener presionado y arrastrarlo. Simplemente lo arrastras de nuevo a la regla donde lo conseguiste y desaparece para siempre. Voy a borrar esa y volver allá. Cuando estás trabajando sin embargo, te darás cuenta en, digamos este de aquí, esos guías pueden ser bastante distrayentes. Útil cuando estás por primera vez colocando, pero bastante distrayendo más adelante. Lo que puedes hacer es encenderlos y apagarlos. Ir a Ver, hay uno bajo Mostrar, y es éste de aquí llamado Guías. Ahora, ves esto [inaudible] aquí, es Comando y Punto y coma o Punto y coma de Control en una PC. [ inaudible] bastante. Cuando estoy trabajando, estoy dirigiendo el punto y coma de Comando para encenderlos y apagarlos cuando estoy trabajando, porque es mucho más fácil ver y conseguir un poco visual yendo sin las guías. Pero estructuralmente, los guías salen llenos. Esto será [inaudible] sobre cómo crear, modificar y eliminar guías. 22. Selección de los colores del sitio web: En este video, vamos a ver el uso del color. Ahora puedes atacar el color desde un par de maneras. Cuando estás dibujando tus cajas y coloreando cosas, puedes usar este pequeño panel de color aquí. Lo que haces es arrastrar esto arriba y abajo para conseguir el matiz. Después movemos este pequeño círculo por ahí haciendo clic y arrastrándolo para escoger el color. Notarás que en el frente aquí está mi color de primer plano. Ahí abajo también está aquí abajo. Si tengo mi herramienta de tipo, ¿puedes ver aquí? Usará el mismo color. Si uso mi herramienta de rectángulo, usará lo que esté en ese color de primer plano, porque mira esto, puedo cambiarlo y todas estas cosas cambiarían al mismo tiempo y puedo empezar a dibujar cosas y hacer color. Para ponerte un poco más técnico, si estás trabajando en una marca de una empresa que tiene colores específicos, necesitarás entrar a estos, y puedes hacerlo creando lo que se llama una muestra. Para hacer una muestra, primero vamos a ir un color, y lo que vamos a hacer es, en lugar de arrastrar cosas, lo que vamos a hacer es hacer doble clic en la muestra aquí y vamos a escribirla. Si estás trabajando con una marca que tiene colores existentes, puedes teclear los detalles que conozcas. Si conoces el color RGB, puedes teclearlo, decir cero, decir que son 200, y 220, me va a dar este color, azul claro, así que sé exactamente que ese es el color correcto. También podría conseguir este número aquí abajo junto a los hashes, el número hexadecimal. Por lo que podría llegar a escribir esto, y puede ser de tres o seis dígitos, dependiendo de lo que se te dé. Ahora ambos funcionan. Si te dan los detalles CMYK, puedes ponerlos aquí también. Para escoger este color, digamos que tenemos esta muestra mágica que necesitamos, podemos hacer click en esta que dice “Añadir a las muestreas”. Le damos un nombre y llamemos a éste el ejemplo azul. Lo que notarás es que haré clic en “Ok”, está en mi panel de muestreas justo abajo de esta lista aquí. Ahora hay este color aquí llamado ejemplo azul que puedo reutilizar una y otra vez. Diga si cambio a otro color porque lo estoy usando y se va a este color rosa, púrpura, si consigo mi herramienta de tipo ahora y necesito hacer algún tipo que sea azul, solo tengo que asegurarme de que haga click en “Azul” antes de empezar a escribir y lo va a cambiar. Si necesito cambiarlo después, puedo seleccionar el tipo y luego escoger cualquier muestra aquí, y cambiará una vez que regrese a la herramienta de movimiento. Genial. Para las personas que no están siguiendo una verdadera gran guía para los colores y eres capaz de escoger tus propios colores, obviamente puedes escoger los tuyos propios, pero a veces puedes quedarte atrapado sin saber qué color elegir, qué funciona con qué. Entonces lo que puedes hacer es usar algo llamado Adobe Color. Ahora está integrado en Photoshop. Vayamos a Window, hasta las extensiones, y este llamado temas de Adobe Color. Ábrelo, necesitas estar conectado a la red y debes iniciar sesión en tu cuenta de Creative Cloud. Una vez que estés aquí, y este es uno de aquí podría explorar. Por inspiración, me gusta ir a este que dice más popular, y este es el que más está siendo utilizado por la gente a través de este pequeño sistema de aquí. Muy a menudo hasta la parte superior aquí hay un bonito grupo de cinco colores que puedes usar para disponer tu sitio web. Como parte de los temas de color diarios, puedes ir y subir tus propias muestrastambién. Entonces si has creado un tema corporativo y quieres compartirlo con otros diseñadores a lo largo del negocio, lo que puedes hacer es subirlos a temas de color. No lo cubriré en este tutorial, pero puedes subir tus propias muestrasa este tema de Adobe Color. De lo que he hecho por ti, si escribes B-Y-O-L, pulsa “Enter”, encontrarás los colores que estoy usando en este tutorial que puedes descargar y usar. Ahora, para descargarlas y agregarlas a tus muestreas, muestrasversus Acciones aquí, baje esto, y dijo: “Añadir a mis muestras", y las verás. Todos aparecen justo de abajo aquí de mi panel de muestreos. Lo que también verás es, ¿ puedes ver que han sido añadidos a mi biblioteca aquí? Si estás usando una versión anterior de Photoshop, esta primera parte funcionará, pero la opción de esta biblioteca no lo será, estamos en 2015, esta opción de biblioteca es una manera realmente genial de elegir colores. Entonces voy a reventar eso y todos deberíamos estar trabajando con estos colores ahora. Obviamente a través de la tienda, puedes escoger tus propios colores, pero si quieres seguir con exactitud, esa es la forma de hacerlo. 23. Cómo estructurar tu sitio web con las formas vectoriales: Muy bien, en este tutorial vamos a burlarnos de algunas del tipo grande de áreas estructuradas usando la herramienta de rectángulo. El rectángulo herramienta, para las personas que son diseñadores web, saben que crea esencialmente etiquetas div que se pueden tirar del estilo y tamaño y colores y cosas a partir de más adelante. Tienes que asegurarte de que estás usando esta herramienta de rectángulo aquí. Si no encuentras la herramienta de rectángulo, haz clic, mantén presionada, arrástrala hacia abajo y es posible que encuentres las dos últimas U usando la herramienta de elipse, posible que tengas que mantenerla presionada y agarrar la herramienta Rectángulo. Lo que vamos a hacer, es si estás siguiendo a lo largo usando mi plantilla, voy a, aquí hay una opción, dice llamada Delete Me. En realidad voy a borrar eso porque se deshace de estas casitas verdes. Esos son mis pedacitos publicitarios ahí. Voy a acostarlo y voy a acercar un poco, comando plus y voy a acercar para poder ver los bordes de mi vista de escritorio. Lo que voy a hacer es, voy a empezar a crear. Está bien. Entonces mi primera caja va a ser mi gran tipo de imagen de héroe principal y voy a usar esta morada aquí, así que voy a hacer clic en eso o recogerlo de este panel de muestras, y voy a hacer clic en “Hold and drag”. Lo que notarás es que puedo arrastrar por encima de los bordes, es mi problema y en reposo, los bordes ahí. Si el tuyo se tiene el color equivocado como el mío tiene, recordado el último color aunque mi color de primer plano dice ser este encantador nuevo Trae Your Own Laptop Púrpura. Lo que puedes hacer es, solo tienes que volver a hacer clic y va a dibujar y cambiar, o si voy a deshacer, puedo hacer click aquí arriba y recoger el color de mi panel de muestras. Genial. Esa va a ser mi gran tipo de imagen gráfica de héroe. Lo que voy a hacer ahora, es que voy a añadir mi barra de navegación. Por lo que volveré a utilizar la herramienta de rectángulo y voy a hacer clic en mantener y arrastrar por encima de aquí y estoy adivinando un poco. Esta va a ser mi barra de navegación. Lo que quiero hacer es llenarlo de negro. El negro está en algún lugar de la parte superior de tus muestras aquí y o puedes usarlo desde aquí arriba. Escogeré esto como mi color de primer plano. Genial, así que ese va a ser mi panel de navegación. Lo que vamos a hacer al final, es que vamos a tener una imagen debajo de la navegación que aún podemos ver. Lo que vamos a hacer es, vamos a tener seleccionada esta barra de navegación. De la forma en que sé que está seleccionada, lo puedo ver aquí en mi parte de capas. Lo que voy a hacer es hacer doble clic en la palabra rectángulo y llamar a éste, nav bar. Llamaré a éste aquí, Hero Graphic. En la barra de navegación aquí, tengo este llamado opacidad. Si bajo un poco la opacidad, quizá esté abajo a cerca del 80%. Lo que notarás, es que si lo bajo justo abajo, puedes ver en realidad es bastante transparente sobre la parte superior del fondo y eso depende de ti y cuánto ver a través quieres que sea. Lo cambiaremos probablemente más adelante cuando tengamos nuestra imagen debajo, pero por el momento, así es como cambias la opacidad de cualquiera de tus rectángulos. Lo siguiente que voy a hacer es, voy a barajar por aquí. Para este tutorial, vamos a omitir tablet sólo para que el tutorial no tenga 10 horas de duración. Voy a hacer una versión móvil. En móvil, cómo sé que estoy en móvil, lo puedes ver aquí en mi panel de capas, es la versión extra pequeña. Voy a entrar en esto y eliminar dónde está mi nombre y mi sitio web, eliminar eso, no necesitamos eso. Pero lo que vamos a hacer es que vamos a alejarnos. Entonces voy a cerrar eso, meterlo, alejar un poco. Lo que quiero hacer es tomar estos rectángulos y moverlos a través. Voy a cambiar a mi herramienta de movimiento. Voy a usar mi truco que aprendimos en video temprano, sobre mantener el mando abajo. Voy a hacer clic en el rectángulo que es mi barra de navegación y lo voy a arrastrar a través sosteniendo la tecla O y lo que el miembro clave O arrastrando que hará, es que hará una copia a medida que se mueve a través. Para ponerlo en la función correcta y el bit correcto, puede que tengas que dar un poco de movimiento pero parece que está perfectamente alineado. Correcto. Voy a mover este también a través por lo que este morado aquí sosteniendo tecla [inaudible] hacia abajo. Está seleccionado el gráfico héroe. Sostenga la tecla O y arrástrela a través y la voy a mover para que se alinee perfectamente. Genial. Consiguió un ligero problema donde el gráfico héroe está por encima de la barra de navegación. Todo lo que necesitamos hacer es, para cambiar el orden de esto como click Hold and Arrastra al héroe debajo del Nav. De acuerdo, así que tengo mi escritorio y mi vista móvil con mis dos rectángulos. Estos rectángulos se van a utilizar como la estructura o las etiquetas div para mi sitio web. 24. Video de producción: cómo estructurar el diseño de tu web: En este video, miramos los conceptos básicos de nuestra herramienta de rectángulo para crear las cajas estructuradas para nuestro sitio web. Lo que vamos a hacer ahora es hacer un poco de una sesión donde pase y agrego todas las casillas. Puedes vernos a doble velocidad o saltarte si quieres. Lo que voy a hacer es que tengo mi primera caja aquí. Lo que voy a hacer es simplemente duplicar esta caja una y otra vez para las diferentes áreas. Voy a usar mi truco para seleccionarlo, Hero Graphic. Voy a sostener Alt y arrastrarlo hacia abajo. Voy a mantener el Shift al mismo tiempo, y lo encrespa todo el camino por debajo. Con esta gráfica de aquí, voy a llamar a ésta. Voy a abrir esta herramienta aquí, mi panel Propiedades. Voy a escoger este. Este es una especie de color durazno. Este, eso se va a llamar la Caja - Quienes somos. Añado cuadro al frente solo para que quede claro desde la distancia. ¿ Qué. Estoy mirando las cajas estructuradas. Yo voy a hacer lo mismo con este. Yo lo voy a arrastrar por debajo, y está en el panel Propiedades. Aquí está el morado oscuro, y aquí está la caja. Aquí está la caja de servicios. Yo lo voy a sostener, arrastrarlo hacia abajo, y él va a ser la caja de nuestro portafolio. Nos hemos quedado fuera del borde de nuestras páginas. Cambiemos primero el color de él en realidad. Aquí está ese color. Ahora, hemos corrido hasta el borde. Lo que podemos hacer, recuerden, es agarrar nuestra herramienta Artboard, asegurarnos de que seleccionamos en la versión de escritorio, y lo voy a arrastrar hacia abajo. Ahora, qué tan lejos arrastrarlo hacia abajo. Eso voy a hacer zoom un poco. ¿ Quién sabe al principio? No es hasta que consigas todo tu contenido en él sabes lo grande que va a ser. Voy a sobredimensionarlo por el momento, hacerlo bonito y grande. Entonces voy a volver a mi herramienta Mover, voy a dar clic en él, es el portafolio de cajas, y voy a mantener presionada la tecla Alt, arrastrarla debajo. En realidad, este trozo de aquí va a ser una gran área blanca. Tiene que tener mi gente o área de equipo. Este último trozo aquí va a ser el verde. Este de aquí se va a llamar mi Formulario de Contacto. Entonces justo debajo de ella, arrástrala hacia abajo, voy a tener este último es uno de los colores no oficiales, como un gris oscuro para mi pie de página. Ahora, es un poco grande, así que lo que voy a usar como mi herramienta Transformar, entonces Comando T, recuerda. Comando T. Lo haré un poco más pequeño. Ese va a ser mi pie de página. Ahora tengo una idea aproximada de la altura de la página. Te lo voy a chupar copia de seguridad usando la herramienta Mesa de trabajo, click en esta de arriba de aquí, y debería chasquear al fondo ahí. Volver a la herramienta Mover cuando hayas terminado. Ahora que tengo un escritorio hecho, podría mover todo a través de mi versión móvil y empezar a tenderla. Lo que encuentro, es mucho más fácil trabajar en uno y luego una vez que hayas completado uno y terminado y mirado todos los bichos fuera de uno de los puntos de vista, es entonces empezar, digamos, el siguiente, y luego trabajar en al móvil. Ahora, mucha gente que empieza primero con el móvil, si esa es la prioridad para su sitio web, definitivamente es el camino a seguir. Definitivamente hay muchos más retos preparando todo para móviles. Para mí, principalmente mis sitios se están utilizando como escritorio, así que empiezo con escritorio. 25. Cuadros de texto de ancho fijo y de expansión en Photoshop: En este video, vamos a ver el tipo o el texto. Lo primero que tenemos que hacer es agarrar la herramienta Tipo y luego vamos a buscar un par de cosas. Hay algunas formas que el cursor puede cambiar en las que quieres estar al tanto. Por defecto, aquí es esta plaza, y eso es genial. Mira lo que pasa con el cursor cambia cuando me pongo delante de esta caja porque tengo el jeroglífico seleccionado aquí, cambia al círculo que lo rodea. Esta otra, que es la línea punteada. Ahora bien, esto es realmente lo que busco. Quiero volcar un poco de garrapatas en una capa por sí misma en la que puedo moverme y trabajar. Si hago clic en esta “Capa”, lo que va a hacer es, va a convertir mi rectángulo, mi jeroglífico, en una caja de formas para que quepa dentro. Mira esto. Si hago clic en “Inside”, va a seguir escribiendo, y va a usar los bordes de esta caja, que puede resultar un poco confuso cuando eres nuevo. Para salir que voy a pegarle a “Escape”. Eso va a deshacerme de mi texto. Entonces lo que quiero hacer es o tener algo más seleccionado, como la Barra Nav, entonces no es nada seleccionado o simplemente teclear el tipo más bajo y moverlo cuando termines. Entonces lo que voy a hacer es sólo tener seleccionado el tablero general de arte y eso me dejará escribir en cualquier lugar usando el cursor cuadrado, y te voy a mostrar dos formas de aplicar texto. Uno es un cuadro de texto expandible y otro es un ancho fijo. Tan expandible significa que puedo escribir algo y verás que sigue yendo para siempre. Simplemente seguirá estirándose hacia la derecha ahí. Ahora, otra forma de hacerlo, voy a golpear “Escape” en mi teclado, se deshace de ese texto y es hacer clic en “Hold” y arrastrar ese texto. Lo que eso significa es que arreglará ancho. Eso significa que cuando llegue al borde, se romperá en dos líneas o tantas líneas que caben. Entonces estas son las dos cajas que vamos a usar cuando estamos trabajando con Photoshop. Entonces el primero que vamos a hacer es, voy a darle de nuevo a “Escape”. Voy a dar click una vez y voy a teclear nuestro logo. Eso va a ser B-Y-O-L mayúscula. Lo voy a mover usando mi herramienta de movimiento a la Barra de Nav aquí. Si estás encontrando su oculto donde no lo puedes ver, probablemente sea porque está en una capa inferior. Para mover las capas, haces clic en “Hold” y arrástrala arriba hasta donde necesites que esté. Para cambiar la fuente, es agradable y fácil. Asegúrate de estar en la herramienta Tipo. Asegúrate de estar en tu Tipo Layer y juega con las fuentes aquí. Ahora bien, si el tuyo no está configurado en píxeles y configurado en puntos, posible que tengas que ir y cambiar eso en tus preferencias, que está en un video anterior. Entonces hay dos formas de hacerlo. Puedes usar el menú desplegable y escoger algunos de estos tamaños. Ahora, me parece bastante útil es en realidad arrastrar este aquí, ¿ puedes ver si paso el cursor por encima de este ícono aquí, haz clic en él, arrástrelo a la derecha o a la izquierda, puedes ver los cambios de fuente dependiendo de dónde arrastres. Derecha para ir más alto, izquierda para ir más bajo. Digamos que voy a recoger 40 por el momento, puedes escribirlo. Entonces digamos, escojo 40 píxeles en el momento, y voy a usar la herramienta de movimiento y moverlo aquí. Para cambiar el color del texto, voy a asegurarme de que estoy en mi herramienta Tipo, me aseguro de que estoy en mi capa tengo seleccionada, aquí está mi capa de tipo, y aquí arriba es donde está el color de la fuente. Doy click en esto, voy a dar click en “Hold” y arrastrar esto alrededor para escoger el color que quiero. Yo quiero blanco, así que lo voy a arrastrar todo el camino hasta la esquina superior izquierda, se puede ver que lo arrastré más allá donde necesita ir, así que se une más en la esquina de ahí. Definitivamente establecido en blanco, fff. Haga clic en “Ok”. Si quieres usar una de tus muestras especiales, lo que haces es dar click en esto y por aquí puedes ver aparece el cuentagotas y él escogerá el color que necesitas de las muestras. Voy a volver y recoger blanco y hacer clic en “Ok”. 26. Cómo diseñar con fuentes seguras para la web a través de Google Fonts: Lo siguiente que vamos a hacer es mirar a cambiar nuestras fuentes. Ahora, por defecto, diseño web de la vieja escuela, solo tenías algunas fuentes realmente básicas para elegir, como Arial, y Georgia, y Times. Lo que podemos hacer ahora sin embargo, es que ahora podemos escoger una enorme variedad de fuentes. Hay un par de métodos para hacerlo. Probablemente la más común de hacer es algo que se llama Google Fonts y eso es lo que haremos aquí porque es rápido, es fácil, es gratis. También puedes usar Typekit, o Adobe Edge Web Fonts, o Fuentes de ardilla. Hay muchas formas diferentes de fuentes [inaudibles] tanto en tu escritorio como en tu sitio web. El gran cosa a saber entonces es que no todas las fuentes que tienes en tu máquina se convertirán y podrán ser utilizadas en línea. Por lo que la forma de comprobar es utilizar un servicio como Google Fonts para encontrar una fuente que desee utilizar. Entonces hagámoslo. Vamos a cambiar a fuentes de Google. Por lo que google.com/fonts. Google tiene toda una gran cantidad de fuentes de uso comercial que llegamos a usar. Lo que voy a hacer es que voy a buscar una fuente. Entonces voy a usar texto de vista previa de BYOL, porque esa es la fuente que busco. Voy a pasar y recoger una fuente. Ahora, voy a usar Roboto como mi fuente de copia corporal. Ahí hay otro llamado Roboto Slab que usaré para mis encabezados. Para poder utilizar estas fuentes web en tu escritorio a través de Photoshop, que posteriormente puedan ser utilizadas en tu sitio web, lo que debes hacer es escoger una de ellas, haz clic en “Añadir a colección”. Voy a usar otra fuente. Aquí voy a teclear Roboto. Ahí hay otra de fuente llamada Roboto Slab que quiero usar y voy a agregar eso a colección. Por lo que me agregaron dos a mi colección, la normal, Roboto normal y esta losa de Roboto. Ahora, lo que vamos a hacer es hacer click en “Usar”. Ahora, solo escojamos lo básico, la versión normal. Lo que quiero es que quiero una versión ligera y me gustaría una versión negrita. Me gustaría este de aquí, una versión ligera. Una versión ligera y una versión audaz. Ahora, cuantas más fuentes añadas, podrías agregar todas estas y descargarlas. Eso está totalmente bien por mientras estás trabajando en tu mock de Photoshop. Pero lo que sucederá es que, si todos tienen que ser utilizados en tu página web, va a hacer que la página se cargue un poco lenta. Como puedes ver aquí exactamente, Google me está dando un pequeño contador de velocidad, sabiendo que la que tengo está en la zona verde, ya que en ella se cargará lo suficientemente rápido. Si comienzas a llegar a naranja, lo va a ralentizar de inmediato, y el rojo es demasiadas fuentes descargadas para una página, y va a impactar demasiado el tiempo de carga de tu página. Una vez que los tengas, lo que vamos a hacer es que los vamos a descargar para usarlos en nuestra máquina. Para hacer eso, aquí está esta pequeña flecha en la parte superior. Aquí tienes un pequeño botón Descargar. Voy a descargar esta colección como archivo Zip, y la voy a pegar en mi Escritorio. Ahora, para ustedes chicos, si quieren seguir, ya tengo las fuentes listas para ustedes ir y descargado ya en los archivos de ejercicios. Por lo tanto, descarga los archivos de ejercicio y debes encontrarlos en la carpeta de fuentes. Ahora, para instalar las fuentes en tu máquina, depende si estás en un Mac o PC. Esencialmente, son lo mismo. Si tienes un PC moderno, o un Mac moderno, simplemente tienes que hacer doble clic en las fuentes y se instalarán. Entonces esta es la fuente que acabo de descargar de Google Fonts. Si buscas las mismas cosas, todas están aquí, en tus archivos de ejemplo, si no quieres pasar por la molestia de descargar estas. Voy a hacer doble clic en el archivo Zip, lo abre. Aquí está mi carpeta de tipotas y aquí los dos grupos de fuentes. Voy a retorcerlo hacia abajo. Lo que quiero hacer es que voy a seleccionar todos estos, y voy a hacer doble clic en ellos. Después hago clic en “Instalar”. Mi pequeño Mac se va a reventar e instalar todas estas fuentes aquí. Podría haber llegado con un error ahora solo para decir que el ya instalado, porque lo he hecho previamente antes de este tutorial. tuyos no los tendrán. Cierra mi carpeta de fuentes. Tendré que hacer lo mismo por Roboto Slab. Selecciona todos estos, haz doble clic en ellos y todos se instalarán. Ahora, en una PC, es un proceso realmente similar. Si no estás seguro de cómo instalarlos en tu máquina, bien déjame un mensaje o ten un poco de Google y mira cómo puedes instalarlos en tu máquina. Ahora, echemos un vistazo a Photoshop ahora. Lo bueno de Photoshop es que no tendrás que reiniciarlo, ni reiniciar tu máquina, ni nada por el estilo, Photoshop recogerá tus nuevas fuentes. Puedes ver aquí está mis fuentes Roboto, y están listas para empezar a usarse en mi diseño. Sabiendo porque utilizamos Google Fonts, es una fuente que podemos usar en línea para nuestra página web al final. 27. Texto de apoyo con Lorem Ipsum: Este video vamos a ver algo llamado Lorem Ipsum. Todo el tiempo cuando estás diseñando un sitio web, tal vez el texto no está escrito, o se está escribiendo al mismo tiempo. Es bastante frecuente que tengas que poner texto ficticio o colocar texto portador. Lo que la gente tiende a hacer es usar algo llamado Lorem Ipsum, y está integrado en Photoshop para que podamos agregar eso. Voy a acercarme en mi escritorio y alrededor. Lo que voy a hacer es poner en una caja de ancho fijo, y quiero que coincida con mi canción de columna, y voy a “Ver”, y enciendo mi “Mostrar”, “Guías”. Aleja un poco. Yo quería expandirme a través de tal vez cuatro de estos en el medio, tal vez seis. Voy a agarrar la herramienta de tipo, y luego hacer clic en mantener y arrastrar. Voy a agregar una caja tipo que abarca seis de mis columnas. Voy a escoger un tamaño de fuente apropiado y tal vez 16 píxeles. Lo que quiero hacer es ir a “Type” y voy a ir a “Paste Lorem Ipsum”. Esencialmente, lo que hace es simplemente volcar en un poco mezclado de palabras latinas. realidad hay palabras latinas, pero no significan nada en el flujo de textos ahí. Es una buena manera rápida de volcar muchos textos extra. Lo que notarás sin embargo es que la caja es mayor de seis. Significa que hay más textos es un poco amable, un poco más que realmente no se puede ver abajo de la esquina inferior aquí. Pero sepan que si elimino esto, pueden ver que hay un montón de cosas extra sobre los bordes. Dependiendo de cuánto necesites, es posible que tengas que eliminar algunas de ellas. Realmente no se puede volcar en una cantidad establecida, solo se volca en una cantidad predefinida. 28. Video de producción: añadiendo todo nuestro texto: Este es un video de proceso, así que voy a pasar y empezar a peinar mi sitio web. En primer lugar, la capa Bring Your Own Laptop aquí, el logo. Tienes un logo, obviamente, estarás atenuando en el logo de la empresa.. Lo que voy a hacer es que voy a tener a este tipo sentado junto a esta columna de aquí. Ahora, si estás moviendo las cosas y trata de chasquear a demasiadas cosas, se chasqueó a la otra guía allí bien, puedes usar tus teclas de flecha izquierda y derecha en tu teclado solo un toque cosas a lo largo y ponerlas en el lugar correcto. Voy a escoger una fuente. Con la capa seleccionada, agarra la herramienta de tipo. Voy a usar mi Roboto. Voy a usar la losa uno, usaré la versión negrita para esto. ¿ Cuál es el tamaño de fuente? No hay un tamaño de fuente garantizado. Voy a usar este de aquí, tocarlo un poco abajo usando mis teclas de flecha. Ahora voy a mirar a agregar mi panel de navegación, que está por aquí. Voy a agarrar la herramienta de tipo, la voy a conseguir para que se baje. Tenemos mucho espacio para trabajar, así que lo voy a conseguir para que abarque esa columna todo el tiempo. ¿Cuántos son esos? Alrededor de nueve columnas. Dentro de aquí, voy a acercarme un poco y voy a escribir en casa. Si, como yo, no puedes ver tu texto y su desaparecido, es porque la fuente es realmente grande. ¿ Recuerdas la fuente de lo último que estábamos haciendo? Por eso lo amplío aquí afuera. Aquí, ahí está. Pero si es pequeño y no lo puedes ver porque el cuadro de texto es demasiado pequeño, sólo tienes que expandir el cuadro, selecciona todo el texto y hazlo un tamaño adecuado. Voy a bajar el mío a 12, en realidad, tal vez 16 píxeles por el momento, y luego puedo volver a moverlo arriba para poder verlo. Para el texto aquí, voy a usar mayúsculas. Este primero de aquí va a ser SERVICIOS, luego voy a poner un espacio entre ellos. Voy a poner dos pestañas entre las mías. El siguiente va a ser CARTERA, dos pestañas. Ahora, en términos de debería estar usando pestañas o espacios o deberían estar en cajas separadas, realmente no importa porque esto es solo un visual. Cuando se trata de diseño web, tendrán que separarse adecuadamente, pero por el momento, depende de ti lo que uses para espaciarlos. Ahora quizá vamos 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Voy a copiar eso, seleccionar a través de copiarlo para que sepa que el espaciado aquí es exactamente 10. Entonces voy a usar EQUIPO, poner el mismo espaciado, y luego vamos a tener un CONTACTUS. Lo que también quiero hacer es que voy a seleccionar todo este texto y lo voy a maquillar la parte superior aquí para estar alineado a la izquierda para que siempre quede alineado a lo largo de esa cuadrícula de columnas de ahí. El tamaño de fuente está bien, pero el estilo de fuente voy a cambiar de nuevo a nuestro simple y viejo Roboto. Voy a seleccionar este texto aquí, escribir Roboto, y ahora sólo voy a usar medio por el momento. Voy a apagar mis cuadrículas usando Comando, punto y coma. Para tener una sensación de ello voy a alejarme un poco. No me gusta el texto. En lugar de medium, voy a escoger la versión ligera. Eso me gusta más agradable. Ahora, lo siguiente que vamos a ver, vamos a poner un gran titular por encima de este pedazo de lorem ipsum aquí. Voy a encontrar el lorem ipsum en mi menú, arrástralo hacia abajo. Voy a usar mi herramienta de tipo. Voy a dibujar una caja de ancho fijo porque quiero que se siente dentro de aquí. Incluso cuando estás arrastrando cuadros de texto, debes usar las cuadrículas para alinear las cosas, usando estas columnas, solo que lo hace mucho más fácil cuando se trata de tiempo de desarrollo. ¿ Cuál es éste? Voy a asegurarme de que esté centrado. Este va a ser, Hagamos This Awesome. Seleccionando el texto, hazlo de un buen tamaño. Cuando digo simpático, apropiado para éste, un bonito, grande, super gráfico. Voy a recoger a Roboto, y usaré la losa. Usaré delgada para este de aquí. En cuanto al color, voy a usar una de mis muestras que utilizo. Abajo aquí abajo, voy a usar este color aquí. Cómo hacerlo, con ella seleccionada, he hecho clic en “Swatch” aquí y eso cambió el color hacia fuera. Voy a apagar mis guías. Voy a bajar eso. Este texto aquí, me gustaría que se centrara también. Voy a ir a agarrar mi herramienta de tipo, click dentro de ella, y te voy a centrar. Si estás encontrando problemas con esta separación de guiones, lo que puedes hacer es hacer clic en este icono aquí, que mostrará tu panel Carácter, puedes cambiar a Párrafo y desactivar el guión, si estás teniendo problemas con separación de sílabas. Odio la separación de palabras. Vuelve a estallar. Digamos que, para este trozo de texto, en realidad sólo van a ser tres líneas. Voy a tratar de conseguir que el redactor trabaje tres líneas para éste, y lo voy a mover un poco hacia arriba, agarrar “Vamos a hacer” hacia abajo. En realidad, un poquito que he olvidado es que voy a añadir aquí un bonito y grande botón de llamada a la acción. Voy a mi herramienta de tipo y voy a dar click una vez, y esta se va a llamar el Más, tengo un plus. ¿ Qué texto voy a escoger? Voy a hacerlo un poco más pequeño, tal vez unos 30. Voy a hacerlo mucho más pesado, audaz. Yo lo voy a hacer blanco, coloque la cosa aquí arriba. Voy a agarrar mi herramienta de rectángulo. Va a estar por encima de este tipo, pero podemos cambiar las capas en un segundo. Pero lo que quiero hacer es encender mis guías, Comando, colon. Voy a conseguir que este se rompa entre estos dos centros. ¿ De qué color va a ser? Voy a recoger mi verde. Quiero asegurarme de que More esté por encima de ese rectángulo. Voy a darle un nombre a este rectángulo y llamar a éste BT, así que sé que es un botón. Este va a ser el botón Más. Voy a agarrar mi texto Más, agarrar mi herramienta de movimiento y moverlo. Recuerda, si no puedes meterte en la línea, solo usa tu cursor para moverlo. Todo necesita ser movido un poco hacia arriba. Para ello, puedo mantener pulsada la tecla Comando y ya tengo más seleccionada. Presione la tecla Comando, haga clic en el botón “Más”. Hagamos esto Awesome y Loren ipsum. Esas son las cuatro partes que quiero mover, y voy a dar clic y arrastrarlo hacia arriba. Recuerda, si no estás seguro de si se ajusta a los puntos equivocados, tal vez solo puedas usar tu tecla de flecha solo para tocarla hacia arriba y tocarla hacia abajo. Apague mis guías. Ya casi estamos ahí. Eso More es un poco grande. Vamos a agarrar mi capa Más, agarrar mi herramienta de tipo, bajarla a 24. Agradable. Muévete un poco arriba, ahí vamos. 29. Ajuste de los bordes de tu página: Antes de entrar en imágenes, les voy a mostrar, me resulta difícil trabajar con el tamaño exacto de la medición, los 690 píxeles de ancho. Eso es exactamente lo que deberíamos estar trabajando también, pero necesito ver un pequeño buffer alrededor de los bordes aquí, un poco de envejecimiento solo para ver cómo es cuando está sentado dentro de una pantalla más grande. Para ello, voy a agarrar la herramienta Mesa de trabajo escondida debajo de la herramienta Mover. Voy a dar click en este aquí donde dice LG Desktop, y voy a desplazarme hacia abajo hasta llegar al medio, pero voy a arrastrar un poco esto. Arrastra eso un poco. Realmente no importa qué tan lejos, porque lo que va a pasar es que si vuelvo a encender mis guías, verás la guía de todavía donde deberían estar. Siguen siendo de ese 960 de ancho incluyendo el relleno en el exterior. Lo siguiente que tenemos que hacer es que tenemos un montón de cajas aquí no son del tamaño correcto. Lo que voy a hacer es desplazarme hacia abajo y encontrar mi Nav Bar. Voy a mantener presionada la tecla de comando en mi Mac o tecla de control en un PC, y seleccionar todas las cajas que necesito ir y cambiar. Ahí está el pie de página. Voy a alejarme bastante para poder ver todo, y lo que voy a hacer es que voy a usar mis herramientas transformadas recuerden comando T en el Mac y controlar T en un PC. Entonces voy a arrastrar estos hacia fuera para que coincida con los lados de todo hecho Alt, va a arrastrar ambos lados conmigo de manera uniforme, ok. Tan solo asegúrate de que se superpongan un poco sobre el borde de ahí. Cuando termines, pulsa Enter en tu teclado, y solo nos da un poco más de espacio para respirar. Voy a apagar nuestras guías, lo cual sigue siendo perfecto. Voy demasiado zoom en un poco. Esto sólo me va a dar un poco de espacio para respirar por fuera antes de empezar a trabajar en la siguiente parte. 30. Dónde conseguir imágenes gratuitas para uso comercial: En este video, vamos a ver de dónde sacar imágenes. Ahora cuando estás haciendo tus conceptos, podrías decir que estás trabajando para ti mismo y no tienes presupuesto para imágenes pagadas o para conseguir que un fotógrafo trabaje, puedes encontrar imágenes gratuitas, imágenes uso comercial en stock. Este es probablemente el mejor sitio aquí se llama freeimages.com. Ahora bien, si quiero una imagen diga de ladrillos, ¿la deletreé bien? Encontrarás montones de imágenes gratuitas para ladrillos. Ahora tienes que tener cuidado de que estos de aquí, bueno, no cuidadosos, estos de aquí son pagados. Por lo que estos siempre se ven muy bonitos y sexys, pero estos se descargan de iStock. Pero tienes que pagar. Los precios son razonables, pero si quieres gratis, necesitamos estos por aquí. Lo que me gusta hacer no es relevancia, pero probablemente lo más descargado tiende a ser los que llegan a la cima son los que están mejor tiro, mejor calidad, tal vez los que quizá quieras usar más. Tendrás que iniciar sesión para descargarlos y comprarlos. Di que sí quieres esto con un look de ladrillo. Está bien. Podrás descargarlos, y dependiendo del tamaño que se hayan subido originalmente, puedes descargarlos. Por lo que tendrás que iniciar sesión y descargarla. Es gratis iniciar sesión y es una gran manera de obtener imágenes en stock gratis. Ahora si quieres imágenes pagadas, iStock es probablemente el mejor lugar para ir. Hay un montón de competidores a iStock. Adobe tiene uno propio en este momento llamado adobe.stock, pero éste de aquí es uno verdadero típico para usar para mucha gente. lo que va en ladrillos de aquí, encontrarás que la calidad es mucho mejor, encontrarás que la resolución es bastante más alta que la imagen libre. Ahora di que quiero este trabajo de ladrillo aquí, he decidido que ese es el fondo que quiero usar. Se le ocurrirá cuántos créditos se va a llevar. Este de aquí me va a costar tres créditos. tanto que decir si fui a algo como éste de aquí, éste de aquí fui a éste es un crédito. Está bien. Aproximadamente los créditos C3 son de 24 euros. Ahora si estás en EU, el Euro es casi el mismo por el momento, no exactamente, pero lo suficientemente cerca como para la comparación. Ahí en presupuesto para la mayoría de los pequeños negocios. Por lo que para que sea fácil, he descargado un montón de imágenes gratuitas que puedes usar para este tutorial en particular. Así que descarga esos si no lo has hecho de los archivos de ejercicios y nos pondremos en marcha con la importación. 31. ¿Incrustar o vincular tus imágenes?: En este video, vamos a ver cómo traer imágenes. Ahora, hay muchas formas de traer imágenes de diferentes programas. Las formas más fáciles es ir a Archivo y tienes estos dos: Place Embedded o Place Linked. Ahora, vamos a usar Place Embedded. Definitivamente es una mejor forma de trabajar cuando eres nuevo en el diseño web o nuevo en el diseño en Photoshop. Los archivos vinculados pueden ser bastante prácticos si el tamaño de su archivo se está volviendo realmente alto. No tienden a ponerse súper altos cuando se trata de diseño web porque la resolución no es enorme y no hay mucho detalle en algunos de los efectos que estás haciendo. Pero sólo echemos un vistazo rápido a la diferencia. Acude a tus archivos de ejercicios web de Photoshop. Voy a abrir este que se llama libros de imágenes y lo voy a colocar en. , se llega a redimensionarlo, voy a dejarlo exactamente como entró y le pegó “Return”. Ahora, lo verás en mi panel de Capas aquí, se llama libros de imágenes. Sin embargo, lo que ha pasado es que se está poniendo dentro de este documento y se va a llevar por ahí. Si le envío a alguien mi documento de Photoshop, va a venir para el paseo. Ahora bien, si lo hago al revés, si voy a Place Linked, lo que va a pasar es que la imagen va a entrar, se verá igual, le pego “Enter”, me dieron dos imágenes igual. Verás el icono cambia, éste tiene un pequeño icono de vinculación. Simplemente significa que si ahora envío esto, digamos, a mi diseñador o a mi desarrollador web para construir, no van a tener las imágenes a menos que las envíe por separado. Voy a necesitar esa imagen books.JPEG para enviar, mientras que la incrustada se queda atascada en el archivo y es un poco más fácil de compartir. El otro problema que necesitas tener cuidado con los vinculados como este es si voy a mi escritorio ahora y voy a borrar libros de imágenes, puedes ver aquí, hay un pequeño signo de interrogación. Significa que, oye, estoy enloqueciendo porque he perdido esa imagen aquí. Se le ocurrirá el error diciendo: “No lo puedo encontrar, no sé dónde está”. Por lo que es un poco más fácil al principio usar embebido. El motivo por el que utilizarías imágenes enlazadas es que si estás usando esa misma imagen una y otra vez en muchos archivos. Realmente no quieres tener muchas copias de ella en todas partes, ocupando mucho tamaño de archivo. También puede ser que estemos trabajando en un documento realmente complejo con un montón de imágenes incrustadas, puede empezar a correr muy lento. Si tienes una terrible laptop vieja que estás usando, eso es algo que tal vez quieras considerar. Por el momento sin embargo, voy a eliminar esta capa aquí y dejar la que estaba incrustada. 32. Cómo enmascarar la imagen con una máscara de recorte: En este video, vamos a ver cómo usar una máscara de recorte. Ahora, una máscara de recorte es una forma realmente genial de recortar una imagen para usarla. Veamos cómo se va a ver ese producto final. Es la imagen cuadrada aquí. Te voy a mostrar cómo hacer eso con lo que se llama máscara de recorte. Lo primero es apagar este globo ocular en nuestra capa de libros de imágenes, y lo que hacemos es empezar con un rectángulo. Voy a volver a encender mis guías, Comando Colón. Yo quiero que abarque, digamos cuatro guías aquí. Yo quiero ser un cuadrado perfecto, así que lo que hago es mantener pulsado Shift mientras lo estoy arrastrando, y puedes verlo bloquea la altura y el ancho a lo largo. Voy a arrastrarlo para que encaje a través de estos cuatro. Ahora bien, realmente no importa de qué color vamos a usar en este momento, porque la máscara de recorte no importa tanto. Voy a usar mi herramienta Mover y la voy a mover un poco hacia abajo. Está en el centro de mi caja, y lo que quiero hacer ahora es, lo voy a reventar y voy a volver a encender mi imagen. Ahora, mi imagen necesita ser un poco más de un tamaño apropiado para este cuadrado. Con un Selector de Capa, voy a usar mi Herramienta de Transformación, Comando T. Bueno, Control T en un PC y voy a mantener presionada la tecla Mayús en las esquinas, para bloquear la altura y el ancho. De lo contrario, termina estirándolo y distorsionándolo. Voy a usar la tecla Mayús hacia abajo. No me preocupa demasiado que vaya a ser perfecto por aquí, voy a recortarlo para efecto. Voy a Entrar cuando se haga su transformación. Lo que necesito hacer es asegurarme de que la imagen esté por encima de mi rectángulo. Voy a renombrar este rectángulo y vamos a llamar a estos los Who- Imagen, así que mi Página Who Yeah. Esto debajo, ahora lo que quiero hacer es recortar a este tipo, que es la imagen de los libros a la plaza. Para hacerlo, la manera fácil es con la capa de imagen seleccionada, mantenga presionada la tecla Alt. ¿ Se puede ver este pequeño ícono aquí con la caja con la flecha? Esto va a girar imagen superior e imagen inferior, y unirlos y hacer una máscara de recorte. Se puede ver lo que pasó en la estructura aquí en las capas, y se puede ver lo que ha pasado aquí en mi imagen real. Voy a apagar mis guías para que sea bonito. La belleza de eso es que este cuadro Quién debajo de aquí y esta imagen, en realidad están separados para que pueda moverlos. Lo que puedo hacer es, digamos que la caja que quiero recortar ligeramente diferente y no he seleccionado aquí. Vigila esto. Con mi herramienta Mover, puedo moverlo y ya ves puedo moverlo y ajustarlo. Es como una ventanita. De igual manera, la imagen debajo se puede mover alrededor, la caja alrededor se puede mover para encontrar a dónde necesitamos ir. Ahora, de lo que quieres tener cuidado es, si quieres moverlos a ambos juntos, tienes que mantener presionada la tecla Comando y hacer clic en ambos. Con los dos seleccionados, puedo moverlos por ahí. Ahora bien, si quieres moverlos juntos permanentemente, bueno, ahora tendré que seleccionarlos a ambos. Es que se puede hacer clic derecho en estos dos. Después de los seleccionados y hay uno aquí este es Link Layers. Ves este icono de vinculación aparece, solo significa que si tengo, di mi fondo de nuevo seleccionado, y luego volver atrás y dar click solo a uno de estos dos tipos, puedes ver solo uno de ellos seleccionado, ambos vienen por el paseo, porque los han sido vinculados. Si necesitas desvincularlos, haz clic con el botón derecho en ellos, y aquí hay uno que dice: Desvincular capas. Dejaré mi enlace por el momento. 33. Enmascaramiento de imágenes para esquinas redondeadas y círculos: Este video es la misma técnica pero un sabor ligeramente diferente. Vamos a ver el uso de una máscara de recorte, pero usando círculos y esquinas redondeadas. Ahora, ver abajo abajo aquí está mi ejemplo terminado. Lo voy a hacer abajo aquí en esta parte blanca, donde tengo las fotografías de mi equipo. Lo que voy a hacer es que me voy a desplazar aquí abajo usando mi barra espaciadora. Voy a acercar usando mi comando plus. Poco a poco baje por el fondo. Voy a hacer clic en mantener presionada la herramienta de rectángulo. Haga clic y mantenga pulsado hasta que llegue a la herramienta Elipse. Ahora, la herramienta Elipse, si hago clic y la arrastro, me va a dar elipse que va a cualquier parte. Ahora, si mantengo pulsada la tecla Mayús, recuerda, bloqueé el ancho de gama alta a un tamaño que necesito. Lo que voy a hacer es que voy a encender mis guías y voy a borrar eso. Voy a dibujar una que abarque, digamos, tres columnas. Voy a sostener turno, abajo y lo voy a conseguir para que se enganche a estos tres. Voy a ir a mi herramienta Mover, voy a bajarla un poco. Ahora bien, realmente no importa de qué color sea porque al igual que hicimos la última imagen, se va a quedar cubierto por la imagen. Vamos a Archivo y vamos a Place Embedded. Vamos a agarrar el escritorio, agarraremos los archivos de ejercicios push-up. Este equipo 1, que va a ser el primero. Voy a pegarle a Place. Ahora, voy a moverlo así que está encima de la parte superior aquí, y voy a mantener el Shift, escalarlo hacia abajo antes de presionar Enter solo para llegar al tamaño apropiado. Voy a moverlo más o menos por ahí. Podemos redimensionarlo después. Recuerda, aquí hay una elipse, y ésta va a ser Team Circle1. Voy a, recuerda, mantener presionada mi tecla Alt en una PC o tecla Opción en un Mac, y se va a unir a los dos. Si no estás contento con el cultivo, recuerda, hago clic en este, este es equipo-1, y puedo usar mis teclas de flecha solo para darle un toque para llevarlo a donde quiera. Puedo transformarlo usando mi Command T. Puedo escalarlo hacia arriba. Hit Enter. Usa mis teclas solo para darle un toque de nuevo. Así es como recortas a un círculo. Voy a hacer rápidamente cómo se recorta hasta unas esquinas redondeadas. Si está utilizando esquinas redondeadas, haga clic y mantenga presionada la herramienta Rectángulo o la herramienta Elipse, y aquí hay una llamada esquinas redondeadas. Ahora, antes de empezar, escoge un radio. Si no estás seguro, no te preocupes, puedes cambiarlo después. Voy a dar click y arrastrar. Esta cajita de aquí me permitirá cambiar las esquinas del radio. Voy a cambiar las esquinas del radio para decir algo así como 30. Gran lío de esquinas redondeadas. Entonces puedo traer otra imagen. Puedo ir a Archivo, Lugar Embedded. Voy a traer el equipo 2. Colócala sobre la parte superior, bájala hacia abajo, pulsa Enter. Recuerda, manteniendo pulsada la tecla Alt u Opción, dependiendo de si eres Mac o PC, y recortará hasta el rectángulo de esquinas redondeadas. Es así como recortar a un círculo y un rectángulo con esquinas redondeadas. 34. Cómo crear imágenes de fondo de gran tamaño: En este video, vamos a ver cómo hacer una imagen de fondo. Ahora bien, las imágenes de fondo tienden a ser bastante lavadas u oscurecidas. Por el momento es bastante elegante, y parecen llenar todo el fondo usando 100 por ciento de estiramiento y cubriendo CSS. Echemos un vistazo a hacer eso. Voy a apagar mis guías, voy a ir a Archivo, Place Embedded, bajo nuestros PS Web Exercise Files, encontrar el que diga, background-brick building y traer ése. Ahora en cuanto al tamaño, va a encajar, pero no es lo suficientemente grande. Lo que voy a hacer es que lo voy a escalar. Escalarlo en Photoshop es algo terrible de hacer. Pero les voy a mostrar un par de técnicas para esconderse si no especula. Esta no es porque sea una imagen razonablemente buena y esté escalando más a alrededor del 120 por ciento, así que va a estar bien. Voy a dar clic en Entrar. Lo siguiente que quiero hacer es que lo quiera recortar, que se esté recortando a esta caja morada aquí. Voy a superponer esa de ahí, y voy a encontrar mi fondo se llama la imagen de Héroe. Lo que voy a tener que hacer, es arrastrarlo así que está por encima de esta caja aquí llamada Box-Hero Graphic. Voy a arrastrarlo hacia abajo, escala, escala. Ahora lo que encontrarás es que puede ser un poco doloroso llegar a la parte correcta. Lo que puedes hacer es derrumbar estos de aquí, como esta biblioteca, no he usado eso desde hace tiempo. Voy a hacer doble clic en la pestaña Bibliotecas, voy a hacer doble clic en el tipo Muestres, solo que mis capas son bonitas y grandes. Puedo trabajar en ellos y es más fácil arrastrarlos por ahí. Mi background-brick building está por encima de mi caja aquí en gráfico, y luego voy a mantener presionada la tecla Option en una tecla Mac o Alt en una PC para recortarla. Lo que me gustaría hacer es, bueno es en realidad antes de hacer eso, voy a deshacer eso, así que es un paso atrás. Voy a apagar esta capa, y en lugar de que esto sea morado, lo que voy a hacer es que la voy a hacer negra. Con esto seleccionado, voy a ir a este panel aquí se llama Propiedades, y voy a seleccionar negro de mis colores. Voy a hacer esto porque cuando encienda este, voy a hacerlo en realidad un poco transparente, por lo que empieza a mostrar el color debajo. Antes cuando hicimos videos de recorte, dije que no importa de qué color las cajas porque vas a usar una imagen en la parte superior para recortarla. Realmente no importa. En este caso, es porque voy a hacer esto un poco transparente. Voy a sostener Alt u Option, y se va a recortar a este gráfico aquí. Esta caja aquí, nuestro laboratorio gráfico. Pero lo que me gustaría hacer es que éste sea un poco transparente. Bajar la transparencia hasta que llegue a un punto en el que pueda empezar a ver los tics con bastante claridad por encima de ella. Depende de ti, y va a depender de la imagen que usaste y de lo opaco que la hagas, pero solo asegúrate de que el color gráfico debajo sea bonito negro sólido, y lo va a mostrar a través. Obviamente, se baja a cero. Se ve completamente la imagen a través y vemos la caja debajo de ella, así que la voy a recortar para que siga siendo visible. Lo que también quiero hacer para que ese fondo sea más impresionante, es que me gustaría hacerlo un poco borroso. Hay muchas maneras diferentes de desenfocar el fondo, porque no quiero, me gusta el efecto de ver el viejo edificio de ladrillo de fondo, pero no quiero realmente poder leer semillas de granos. Lo que quiero hacer es usar Filter. Hay un montón de cosas bajo Blur. Ahí está toda la Galería de Blur y hay otra Galería de Blur. Hay un montón de ellos. Los desenfocos gaussianos son realmente populares. A mí me gusta usar este ahora llamado Desenfoque de campo. me gusta Field Blur principalmente porque me permite desenfocar. Se puede ver que se va a apagar y hacer su desenfoque, desenfocar al valor predeterminado de 15 píxeles. Probablemente sea un poco demasiado fuerte, así que voy a bajarlo a tal vez algo así como 10. Se lo va a redibujar. Ahora puedes ver que está ahí, puedo ver qué es, pero no puedo empezar a leer muy bien los nombres. El motivo por el que me gusta esto es porque hay esta pequeña opción aquí dice Ruido. Doy click en Ruido, bueno, necesito ponerlo aparecer aquí, y voy a patear en Mount, y si hago clic derecho arriba, se va a enloquecer un poco, pero se podría ver a qué me refiero. Voy a acercar un poco. Puedes ver, es poner este fondo de ruido, así que apagaré el ruido, encenderé, apagaré, encenderé. Nos da algún ruido de poca luz el cual oculta algunos de los suaves días de nuestras vidas efecto que termina sucediendo. Cuánto apliques totalmente depende de ti y de tu imagen. Voy a aplicar tal vez no tanto, bajarlo un poco, 20 por ciento. Puede tardar un poco en volver a dibujar dependiendo de lo bueno que sea tu computadora. Cuando termines, tienes que hacer clic en este de aquí arriba que dice “Ok”. Lo hermoso de usar este tipo de método, es que es algo que se está convirtiendo en lo que se llama Filtro Inteligente. Podemos encenderlo y apagarlo. Digamos que un cliente regresa y dice: “Me gusta, pero no es lo suficientemente borroso o demasiado borroso”. Lo que puedes hacer es hacer doble clic en la palabra Blur Gallery, volver a entrar y sancionar o bajarla un poco a tal vez seis. Voy a subir un poco el grano a 40, y luego hacer clic en “Ok”. Es totalmente reutilizable cuando has usado la técnica que hemos hecho en este curso aquí. Ahora así es como hacer un fondo impresionante donde usamos un poco de opacidad para mostrar a través de la caja debajo, también usamos un mejor desenfoque y un mejor ruido para empujarlo al fondo. 35. Video de producción: añadiendo nuestras imágenes: Bienvenido al video de producción de imágenes, donde voy a pasar por algunas de las cosas manuales o cosas monótonas. Tengo mi primer círculo. Lo que quiero hacer es hacer otros dos círculos y luego quiero deshacerme de esas esquinas redondeadas. En primer lugar, usaré mi truco por Comando o Control haciendo clic en la capa, ese es mi chico aquí. Lo que quiero hacer es doblar esa capa, conseguir una capa de esquina redondeada, tengo a mi equipo 2. Ahora, quiero usar el mismo tamaño de círculo. Si agarro este círculo de equipo1 y hago clic derecho en él y voy a duplicar. Voy a llamarlo equipo circle2, lo va a destrozar. ¿ Por qué? Porque este equipo circle2 ha aparecido en medio de esa máscara de recorte que tenía. Se lo ha dividido y lo ha destrozado todo. Lo que necesito hacer es mover a ese tipo hacia abajo y unirme a ellos de nuevo manteniendo presionada la tecla Alt en una PC o tecla Opción en la Mac y volver a hacer clic en estos dos para conseguir mi máscara de recorte. Ahora, este equipo circle2, y él está aquí sentado justo encima de la cima. Lo que voy a hacer es usar mi herramienta Mover, mantenga pulsada Mayús para que arrastre derecho y lo voy a arrastrar, así que se trata en el centro de mi documento. Con él centro, voy a apagar esa capa, arrastrar en este centro. Impresionante. Genial. Ahora voy a volver a encender a este tipo y voy a hacer una máscara de recorte. Quizás manteniendo presionada la tecla Opción más antigua. Voy a escalar este top one usando Control T. Lo voy a conseguir para que se esté llenando tanto como podamos con esta imagen recortada. Lo mismo para duplicar el círculo. Nuevamente, el mismo problema. Si duplico a este tipo, haga clic derecho, duplicar, quiero que sea Team Circle3. Está dividido estos dos aparte. Voy a arrastrarlo de nuevo allá arriba. Arrastra esos dos hacia arriba, Circle3. Arrástralos a través del borde. Voy a traer mi próxima imagen. Voy a ir a Archivo, Lugar Embedded. En mis archivos de ejercicios se llama equipo-3. Trae éste. Voy a reducirlo sosteniendo Shift, ponerlo alineado. Golpea Enter, escoge una máscara de recorte, poco redondo, mi teclado. Eso es lo correcto para mí. Lo que notarás es que estos tipos no están alineados en absoluto a pesar de que pensé que lo estaba haciendo era ponerlo dos columnas por ese lado, una columna por ese lado. Con qué pasa, estoy tratando de dividirlo en tres. Lo que voy a hacer es encender mi servicial, ¿dónde está? Aquí abajo abajo abajo está mis útiles guías de columna. Yo lo voy a romper en tres columnas, voy a encender eso. Te darás cuenta de que esta es una forma más fácil de alinear las cosas en lugar de tratar de contarlas. Una nueva, selecciona esa capa, por lo que el círculo equipo-1 y equipo-1 y equipo-1 van a entrar en el centro de esto. Déjame usar este de aquí. Miembro del equipo 2 y voy a agarrar al miembro del equipo 3 y ponerlos en medio de la capa. Voy a hacer agregarles algún tipo. En realidad, te voy a seleccionar, tú , tú, tú, los voy a mover por encima un poco. Agrega algún tipo, agarra la herramienta Tipo. Voy a dar click Escape allá, hago click una vez por aquí. Voy a asegurarme de que esté centrado y voy a escribir a mi nombre, Daniel Walter Scott. Voy a seleccionar el texto, hacerlo negro, hacer clic en Aceptar, y usando la herramienta Mover, moverlo adentro, tomando un poco. Muévete alrededor del zoom, luego está en el centro de ahí, y eso va a ser negro. Eso es correcto. El tamaño, voy a duplicar esa capa. Voy a usar esta forma complicada usando mi herramienta Mover, mantenga presionada la tecla de opción Alt, haga clic y arrástrela, y luego verá que hace un duplicado. Voy a cambiar este y yo soy el fundador. Hago gorras al FUNDADOR. Voy a hacerlo Roboto. Pero usaré sólo Regular. cuanto al tamaño, hagámoslo un poco más pequeño. Bajar a 17. Un poco arriba. A continuación, poner un texto y ponerlos en la dirección de Twitter. @danlovesadobe. En realidad, lo voy a hacer en gorras. Este de aquí va a ser el audaz. Encantador. Voy a querer duplicar estos, así que los uso una y otra vez. Voy a agarrar los tres de estos. Voy a mantener presionada la tecla Alt en mi teclado. Estoy en mi herramienta Move y la voy a arrastrar a través. Sostenido Shift también, Shift danlove pero un dedo gimnasia. De lo que significa que se hace duplicado de ese trozo entero, se puede ver esa es copia original, esa es la nueva. Voy a cambiar este, cambiar a mi herramienta Tag. Este de aquí, es John Smith, va a ser, muévete levemente aquí, va a ser nuestro desarrollador tal vez, y su dirección de Twitter va a ser @johnsmith. De nuevo, va a hacer lo mismo por esta señora de aquí. Voy a agarrar a los tres de estos tipos, mantener presionado Alt, arrastrarlo a través, centrado. Definitivamente no es John Smith. Ella va a ser Jane, yo no quiero llamarla Doe, significa que está muerta. Llamémosla Jane Smith, Jane incluso. Ella va a ser nuestra diseñadora, @janesmith. El texto para esos, voy a apagar mi, estamos hechos el fondo aquí, voy a apagar mis Guías de Columna Útiles, sobre todo sólo la tercera que hay. A continuación, vamos a hacer es que aquí hay un poco de cartera. Se va a ver así con un montón de imágenes diferentes alrededor de este pequeño rectángulo. Con mis guías encendidas, va a ayudar. Voy a agarrar mi herramienta Rectángulo. Quiero que mis imágenes de portafolio estén en columnas completas. Yo quiero gastar solo tres de ellos cada uno, realmente no importa de qué color sean los rectángulos, porque vas a estar recortando usando Clipping Master las imágenes, pero es doloroso cuando son del mismo color que el fondo. Lo cambiaré a rojo. No muevas tus guías, quiero editar deshacer. Si estás encontrando que tus guías se están moviendo y no deberían, tiene un Lock Guides que no se mueven. Tengo mi primer rectángulo. En lugar de hacerlos de uno a la vez como hacía los círculos, tuve el problema con los círculos donde sigo duplicando las elipses y me rompió la máscara de recorte. Yo lo voy a hacer un poco diferente de esta manera. Voy a duplicar los rectángulos antes de pasar y añadir mis imágenes. Tengo ambas imágenes. Voy a agarrar los dos. Ojalá pasen por ahí. Agarra a esos. Agarremos este. Agarremos este último trozo. Ciérralo. Voy a traer mis imágenes. Nombrémosles antes de que nos llevemos demasiado lejos, con cuáles estamos tratando. Ese es el número 1 ahí, no este era el número 1. A éste se le va a llamar Portafolio 1, copia arriba. Va a ser Portafolio 2, Portafolio 3, Portafolio 4, Portafolio 5, Portafolio 6, Portafolio 7, y Portafolio 8. Para ser honesto, cuando estoy trabajando sola y no hago este nombre hasta el final. Lo estoy haciendo ahora para hacerte un poco más fácil para que sigas. Pero muy a menudo, me fui como sólo una copia de rectángulo 15 ya que voy a lo largo. Voy a traer algunas imágenes, voy a ir a Archivo y voy a ir a Place Embedded. Voy a traer Miniatura 1. Este es más o menos del tamaño correcto. Voy a escalarlos hacia abajo. Entrar. Voy a asegurarme de que esté por encima de la Cartera 1 y recortarlas. Otra vez lo mismo. Lugar Embebido. Se baja al tamaño correcto, aproximadamente. Bastante. Voy a pegarlos por encima de Portafolio 2, clip. Traigamos otro. Si estás encontrando que te lleva una eternidad hacer cosas o al menos bastante monótono y quieres atajos. Entonces Place Embedded es algo que uso bastante. Se va a editar, crear atajos. No puedes entrar aquí y decir, me gustaría este que dice File. Este de aquí que dice Colocar Embedded y hacer un atajo. Voy a ir Comando Shift I. Ya está en uso, Selecto Inverso. En realidad, me gusta esa, así que no voy a hacer esa. Voy a probar Command Option Shift E. Ya está siendo utilizado por Fusionar una copia de todas las capas visibles. No uso esos atajos. Voy a aceptarlo. Sólo tienes que ir con la parte superior de esa. Significa que ahora puedo ir Opción de Comando Turno E. Iremos a mi Lugar Embedded. Resumir a qué? Acerca de la tercera. Para que no te duermas y te pongas súper tabla, esto es esencialmente lo mismo una y más de ocho veces. Voy a saltarme hasta que lleguemos a este último aquí mismo. Por aquí. Ahora, está aquí. Todo bien volver a la velocidad regular ahora. Ese es el final de este video de producción por donde hemos pasado, hemos hecho un poco de ratón de recorte, añadir algunos textos y nos han puesto al día. 36. Dónde conseguir iconos gratuitos de uso comercial para su diseño web en Photoshop: En este video, vamos a ver los iconos. Ahora en este video, vamos a necesitar cuatro iconos utilizados para nuestros servicios. Al buscar iconos, digamos, en este caso estamos buscando iconos gratuitos. Hay un montón de iconos gratuitos en línea. Sin embargo, con bastante frecuencia, cuando los estás buscando, es difícil encontrar algunas cosas buenas. Me gusta mucho este sitio aquí llamado iconfinder.com, y este sitio es realmente bueno para encontrar uso comercial gratuito, así como iconos comerciales. Entonces voy a escribir en este caso arte, lo que buscamos hacer es cambiarlo a gratuito, y en lugar de no tener licencia, vamos a volver a ningún enlace de atrás, de acuerdo. Eso solo significa que llegamos a usarlo y no tenemos que agregarle ningún enlace, así que obviamente puedes agregar un enlace de vuelta en, hay un poco más para elegir y lo que voy a hacer es que voy a usar este de aquí. Lo mejor del buscador de iconos es a menudo cuando encuentras uno que te guste, es parte de ese conjunto más grande que también es gratuito. Voy a usar esta cámara uno, esta de escritorio, y un par de otras. Ahora bien, si quieres, puedes saltarte adelante, y en los archivos de ejercicios tengo cuatro iconos para que empieces. Si quieres jugar junto con éste, lo que haces eres tú, di que elegimos esta cámara aquí. Antes de descargarlo, lo que quieres hacer es escoger una talla que quieras. Ahora, me gusta escoger la talla más grande que pueda encontrar. que más adelante si necesito usarlo para otra cosa, o un super gráfico o un azulejo grande para algo, tengo una versión grande del mismo alrededor. Entonces y luego para descargar, vamos a usar la versión PNG y descargarla a tu escritorio para luego importarla a Photoshop. Lo que he hecho por ti sin embargo es, vamos a Photoshop y vamos a importar las imágenes que ya he descargado. Entonces vamos a ir a Archivo, Lugar Embedded, y hay el icono 1, 2, 3, y 4. Entonces vamos a traer todos estos. Entonces antes que nada, voy a colocar el primero. De acuerdo, solo lo voy a dejar a la talla en la que vino y golpear Enter. El motivo por el que hago esto es que los voy a escalar todos juntos, así que los quiero todos en la página, seleccionarlos todos y escalarlos todos al mismo tamaño exacto, y en lugar de intentar hacerlo por separado e intentar igualarlos. Así que vamos a Archivo, Colocar Embedded, vamos a traer el icono 2, pulse Enter. Archivo, Lugar Embebido, icono 3, hit Return. Archivo, Coloque Embedded, y traigamos el último. Genial, así que tengo cuatro iconos aquí. Se pueden ver todos en mis capas. Voy a mandar, seleccionar todos estos o mantener presionada la tecla de control, si estás en una PC solo tienes que hacer clic cada uno de forma individual. Ahora, deberían moverse juntos y vamos a usar nuestro comando de atajo T o control T, y los voy a escalar todos para que sean del mismo tipo de tamaño. Ahora en realidad antes de hacer eso, voy a golpear a Escape, y lo que quiero hacer es que quiero ver mi guía com completa solo para tener una sensación de qué tamaño deben ser. Guia's on. Tengo los cuatro iconos seleccionados. Voy a usar mi herramienta de transformación. Voy a reducirlos hasta que encaje. De acuerdo, caben en 1, 2, 3 columnas, así que a través de tres columnas en cuatro pequeños grupos. Está bien, así que voy a alejarme un poco. Voy a distribuirlos básicamente sólo para ponerlos en una posición aproximada para empezar y luego la última. El modo de tener un poco de sentido dentro de las guías, lo que cuidarás es, digamos selecciono el icono 1, es que notarás que cuando lo arrastre por ahí, ¿ puedes notar, ver esa pequeña línea azul que apareció? Está bien. Si lo moví otra vez y atrás. Estamos buscando esos, es decirnos que está en medio de algo. Entonces voy a agarrar el icono 2, darle la vuelta así que está en el medio ahí porque tiene una tendencia a bloquearse a montones de cosas diferentes en el documento, lo que puedes hacer es si se pone lejos, solo usa tus teclas de flecha para darle un toque hasta que sientas que está bastante cerca del final. Ahora bien, lo que tenemos que hacer sin embargo es conseguir que se alineen centro. Entonces voy a seleccionar a todos estos tipos, uno, manteniendo presionada la tecla de comando. En realidad hay cuatro de estos, y tengo estas opciones a lo largo de la parte superior aquí puedes ver Puedo alinearlos a lo largo de la parte superior, alinearlos a lo largo de la parte inferior o puedo alinearlos a lo largo de sus centros, y eso es lo que voy a hacer, alinearlos a lo largo de sus centros. Lo siguiente que tengo que hacer es colorearlos. Entonces vamos a colorear uno primero para que coloreemos icono uno primero. Apague mi guía, amplíe un poco. Voy a colorear a este tipo. Voy a usar esta opción aquí abajo llamada un estilo de capa, ok. Entonces con el icono uno seleccionado, haz clic en FX, y luego entra y elige la superposición de color. Ahora, superposición de color, por el momento, se puede ver que lo está superponiendo con gris. Lo que puedo hacer es que voy a hacer click en este pequeño color uno y voy a escoger uno de mis colores de mis bibliotecas de colores. Ahora este pequeño recolector de color no tiene tus muestreas. Entonces lo que voy a hacer es que me voy a asegurar en la parte superior aquí que pueda ver mis muestreas, sobre todo las tres que he importado. Entonces los greens y estos chicos, para que cuando haga clic en gris, pueda usar mi herramienta cuentagotas para escoger el color que quiero. Después hago clic en Ok, vuelvo a pulsar Ok, y se puede ver que el color se ha superpuesto. Ahora quiero aplicar el efecto de color a todos los diferentes iconos. Hay un par de maneras diferentes en las que puedes hacer clic con el botón derecho del ratón y decir copiar, estilo de capa, y luego pegarlo en las diferentes. O este es un lindo truco fácil, es que si puedes ver tus iconos, dice que puedo hacer clic en “Hold” y arrastrarlo, solo tienes que arrástralo al teléfono. Está bien. Arrástralo a la cámara, y hago clic y lo mantengo presionado y lo arrastra al televisor allí. Genial, esa es una forma de traer iconos para nuestro diseño. 37. Video de producción: añadiendo nuestros iconos: Va a ser un video de producción. Simplemente vamos a añadir algún texto debajo de nuestros iconos. Voy a agarrar mi herramienta de tipo, click una vez y asegurarme de que esté en el centro. Voy a escoger un color de blanco. Voy a escoger fuente o Roboto negrita, y el tamaño sabio, voy a tocarla hasta, te voy a mostrar, como 30 tal vez. El primer servicio se va a imprimir, va a ser todo gorras. El siguiente bit es que voy a agarrar mi herramienta de tipo. Voy a poner un poco de copia corporal debajo de ella. Voy a abrir mis guías para asegurarme de que voy por encima de la cima. Se va a patinar y un poco extra, y voy a añadir algo de texto. Recuerda, vamos a ir a teclear, Pegar Lorem Ipsum. Se va a poner montones de Lorem Ipsum ahí dentro. Ahora bien, si quiero seleccionar todo el Lorem Ipsum y cambiar el tamaño del mismo, si arrastro un cuadro, desafortunadamente, si cambio el tamaño de éste hacia abajo a algo así como 12, solo has seleccionado esa parte. Lo que quieres hacer es triple-click, así que 1, 2, 3, 4. Cuando dije triple-click, me refiero a cuatro clics, así que 1, 2, 3, 4, agarra cada pedacito de texto y agarrará el texto que no puedes ver bien. Voy a bajar esto a, digamos 14 píxeles. Lo trasladaremos a, digamos el regular. ¿ Cuántas líneas quiero en este caso? Voy a reventarlo porque me gusta el aspecto de tres líneas. Recuerda también si hago clic aquí con mi herramienta de tipo, apagaré mi guión. Para hacerlo, haga clic en esta casita aquí. Haga clic en Párrafo, desactive Guión, y nos desharemos de esa división de palabras que no me gusta. Lo que me gusta hacer son estos dos cuadros de texto aquí,]. Ya voy imprimir y Lorem ipsum seleccionado. Voy a mantener presionada la tecla Alt, en realidad enciendo primero mis guías, manteniendo presionada mi tecla Alt y usando la herramienta de movimiento para arrastrar una copia. Estoy manteniendo presionada la tecla Mayús mientras la estoy arrastrando, para asegurarme de que llegue perfectamente a un costado aquí. Yo voy a hacer eso por todos estos. Voy a arrastrarlos a través. Tengo cuatro sets, y voy a entrar y cambiarlo. Este se llama App Dev. Este de aquí va a ser Fotografía, éste va a ser Video. Voy a dejar el Lorem ipsum porque de todos modos no significa nada. Apague mis guardias, asegúrate de que todo se ponga en línea. Líneas bien, las líneas están bien. Lo que podría hacer es que voy a agarrar todos los ipsums de Lorem y sólo a levantarlos un poco. Ahí vas. Ahí están los cuatro, y usa mis teclas de flecha solo para escribirlas para que se unan un poco a ese poco. Lo que también podría hacer es agarrar mis iconos, tengo icono 1, 2 y este otro tipo, ahí está debajo de mi texto. A mí me gusta a lo largo de la base. Suficiente feliz. Ese es el final del video de producción. 38. Cómo ordenar con la agrupación de capas: En este video, vamos a ver el uso de Layers. Ahora, documentaré lentamente lo que seguramente se está convirtiendo en un lío loco de cosas por todas partes. Va a ser un poco difícil trabajar con, sobre todo si se lo mandamos a alguien que está, digamos, lo estamos diseñando y lo estamos enviando a alguien, digamos, es un desarrollador y no usa mucho Photoshop y tiene que trabajar con él, puede ser realmente complicado para ellos de usar. Incluso se está volviendo un poco demasiado complicado para que lo usemos. Lo que vamos a usar es algo llamado Grupos de capas. Ahora, Grupos de capas es una forma de simplemente agrupar todo, y hace que nuestras Capas se vean un poco más ordenadas. Lo que haremos es empezar con nuestro grupo de nuestra Navegación. Hay un par de trucos que podemos usar para encontrarlo todo. Lo que quería hacer es en realidad usemos esta caja de héroes aquí. Voy a usar un pequeño truco. Enciende la “Selección automática”. La selección automática nos permite hacer es arrastrar una caja alrededor de todo aquí, y seleccionará todo lo que pueda debajo de esa pequeña línea de puntos. Te darás cuenta en mi panel Capas aquí, justo en la parte inferior aquí, está recogido todo lo que encontró escondido en esa Capa. Apaga “Auto-select” y dale un giro solo para asegurarte de que tiene todo lo que necesitamos y nada que no lo haga. Después voy a ir a Editar, Deshacer o Editar, Paso atrás y volver a ponerlo donde estaba. Ahora sé que todo está en el lugar correcto. Todo lo que haces es hacer clic en este botón de “Grupo”. Photoshop es bastante inteligente, y se los pega a todos en un pequeño grupo agradable. El Grupo terminó por encima de nuestra Navegación, pero eso es algo que podemos arreglar después. éste le llamamos Box Hero. Ese es éste. Lo apagaré por el momento. Lo siguiente que voy a hacer es seleccionar la Navegación. Voy a encender mi “Auto-Select”, agarrar todo por aquí, y verás que aquí está recogido estos tres elementos, lo cual es perfecto. Si voy a “Auto-Select” apagado y le doy un giro, solo para asegurarme de que tenga todo lo que quiero y nada que no. Pulsa el botón “Grupo”. Llamemos a este uno Navegación de Box. Yo lo voy a arrastrar por encima de este tipo. Yo lo arrastré a ella. Así que ten cuidado cuando estés arrastrando. Arrastro esto, ¿puedes ver la pequeña línea corriendo por el exterior? Eso lo va a arrastrar dentro de mi Caja de Héroes. Lo que quiero hacer en realidad es arrastrar arriba, y verás la diferencia. ¿ Ves esa pequeña línea que aparece entre ellos en vez de sobre ellos? Eso significará que está justo arriba. Voy a apagar ambos. Ahora voy a agarrar de nuevo mi herramienta, seleccionar a estos dos tipos. Se ha recogido todo lo que necesito. Agruparlos. Esta se va a llamar Box, y esta fue nuestra caja Quienes Somos. Ahora los voy a apagar. Apagaremos esa. Ahora estamos a la altura de la página Nuestros Servicios. Voy a agarrar la misma herramienta, Auto-Select on, seleccionarlos todos. A mí me gusta apagarlos. Dale un giro. Asegúrate de que sean todo lo que tenemos seleccionado, nada que no lo hagamos. Después agruparlos. Este es nuestro Box Services. Seleccionar de forma automática, agarra a todos estos tipos, y luego agrupa. Llamemos a este Box, y éste va a ser, Portfolio. Apague éste. Este es nuestro Equipos uno. Entonces todos estos en. Apágalo. Una buena mutación. Vamos a agrupar a éste. Este se va a llamar Team Box. Equipo, genial. Apague esa, y estamos abajo a nada más realmente. Tenemos nuestro Formulario de Contacto y Pie de Página. Lo que vamos a hacer es que también podemos poner esos en grupo, este de aquí. Si no termina en el Grupo, lo que puedes hacer es hacer clic en mantener y arrastrarlo al Grupo, como lo hice ahí. A éste se le va a llamar Formulario de Contacto de Box. Este último, lo pondremos aquí. Lo arrastraremos adentro. Este se va a llamar Box, y esto se va a llamar, Footer. Enciende todos estos. Usando las Capas, apáguelas. Verás a este tipo, un pequeño guardabosques solitario aquí, que es una Capa Tipo, pero se llama Capa 1. Si hay una Capa de tipo y se llama Capa 1, significa que hay una Capa de tipo sin tipo en ella. Entonces, en realidad, esta cosa no tiene propósito en el mundo. Es algo que he empezado a escribir, y no me he movido para hacerlo y me olvidé y lo dejé ahí. Este tipo de aquí es un guardabosques solitario, así que no aparece en ninguna parte de esto. Si tiene una palabra aquí dentro, será una palabra en algún lugar oculta en tu documento que debes ir a buscar. En este caso, lo voy a borrar. Haga clic en “Eliminar”. puedes ver ahora que he pasado y agrupado todo, se vuelve mucho más fácil trabajar con él, sobre todo cuando empezamos a hacer nuestro diseño móvil. Puedo encender todo, y lo que podría tener que hacer es jugar con el orden de Capa dependiendo de qué Capas estén. Voy a apagar mis útiles guías de columna. Pero todo lo demás está apilado muy bien uno encima del otro, y estamos listos para irnos. 39. Encuentra lo que necesitas rápidamente con la búsqueda por capas: En este video, te vamos a mostrar cómo usar capas un poco más. Ahora, va a haber momentos en los que trabajas en un documento y realmente quieres encontrar algo particularmente en el documento. En lugar de pasar y tratar de encontrarlo a través de los elementos de búsqueda, lo que puedes hacer es utilizar algunos de estos filtros de búsqueda. Algunos de estos filtros de capa a lo largo de la parte superior aquí. Lo que puedes hacer es decir que quieres encontrar todo en este documento que está escrito, porque digamos que has cambiado el cuerpo podría ser fuente de Roboto de vuelta a Arial por alguna razón. Lo que puedes hacer es filtrar solo las capas, ves estas solo tienen el tipo, y lo que yo podría hacer. Haga clic en el de arriba, mantenga presionado Shift, haga clic en el último y suba aquí a mi herramienta de tipo y cámbielos todos a Arial. Escogeré a Arial negrita. Ahora ya ves que todo es ahora Arial. Esa es una manera fácil y agradable de hacer eso. Voy a deshacer eso porque no me gusta Arial. Por lo que quieres pasar y empezar a jugar con los colores. Lo que puedes hacer es hacer click en este de aquí, es solo un capas de formas. Aparecen todos nuestros rectángulos. Digamos que tienes un grupo de cosas que tienen una sombra de gota sobre ella, y quieres ir y cambiar la sombra de gota. Lo que podrías hacer es ir a éste, ir a un arreglo, y usar este desplegable aquí abajo y decir que apareció todo lo que tiene una sombra de gota. Tengo una cosa usando sombra de gota en este caso. No tengo nada show en mi último panel aquí. Si llegas a un punto en el que no te diste cuenta de que cambiaste esto o has abierto otro documento y también tiene aplicado este efecto de capa, lo que puedes hacer es simplemente encender el interruptor ahí para apagarlo. Se vuelve a la normalidad, y se puede encender y apagar para alternar entre la última búsqueda y todo de nuevo encendido. 40. Cómo nombrar las capas como profesionales: Una de las otras cosas bonitas que puedes hacer cuando estás trabajando con tu panel Capas, y estás tratando de que las cosas estén listas para enviarlas a tu diseñador o desarrollador, es posible que encuentres muchas veces donde tienes muchas cosas llamadas como rectángulo uno o tipo uno o caja dos y no son realmente tan útiles para el desarrollador. Pero lo que puedes hacer es bajar a nuestros iconos que son nuestros servicios. Voy a abrir eso. Diga que quiere empezar a nombrar estos, diga icono uno, tres, y dos. Se trata de un video, fotografía, y nuestra app. Bajaremos y haremos el último aquí abajo. En realidad lo arrastraremos por el momento. Vamos a levantarlo para estar con sus amigos. Lo que vinimos a hacer es una bonita opción para nombrar las cosas. De lo contrario, puedes hacer doble clic en todo para meterte en él y puedes pasar siglos haciéndolo. El modo de hacerlo es tabulando entre ellos. Voy a hacer doble clic en éste, voy a llamar a este guión de icono y voy a llamar a este video. Voy a tabular, se puede ver fotografía de iconos. En lugar de tener que hacer clic en cada uno para que funcione, solo puedes tabular entre ellos, ¿de acuerdo? Guión ícono. A ésta se le va a llamar app, y a ésta se le va a llamar Icon guión print. Está bien. Bonito atajo para nombrar a tus Capas. 41. Diseñar un formulario para tu sitio web: Hola. En este video, vamos a ver cómo iniciar un formulario. Las formas son esencialmente sólo un grupo de rectángulos. En este caso, vamos a utilizar una herramienta de rectángulo. Haremos un relleno de blanco. Ahora, lo grande que hay que comprobar con trazos es que, por defecto, están fijados dos puntos, que es más un término de impresión. Lo que queremos hacer, es que queremos hacer un píxel, o dos píxeles, o tres píxeles. Simplemente puedes escribirlo ahí encima de lo que sea que haya ahí dentro. Voy a dibujar mi rectángulo. Ahora, voy a encender mis guías para asegurarme de que estén dentro de todo y así lo tengo yendo desde esta guía exterior, a través hacia alrededor del medio. Voy a apagar mis guías y luego echar un vistazo y ver cuáles creo que son los bordes aquí. Por lo que puedes ver aquí, tiene un borde gris oscuro con un centro blanco. ¿ A mí me gusta? Sí, está bien. Voy a agregarle algo de texto. Entonces voy a agarrar la herramienta de tipo. Ahora recuerda, no voy a dar clic dentro de esto porque va a convertir este rectángulo en una caja, así que eso no es realmente lo que quiero. Lo que quiero hacer es hacer click fuera aquí abajo y éste va a ser mi nombre. Lo seleccionaré todo y lo voy a hacer Roboto. Yo lo voy a hacer de Roboto luz y lo voy a hacer de color gris oscuro aquí. Volver a mi herramienta Mover, acercar. [ inaudible] en realidad es, él es grande así que voy a bajarlo a 20 y simplemente tenerlo sentado por ahí. Ahora, las cuadrículas están de nuevo encendidas, voy a seleccionar tanto el nombre como el rectángulo. En realidad, este va a ser mi nombre de formulario, minúsculas. Voy a seleccionar ambos y voy a mantener presionada mi “tecla Alt, mi tecla Option”, y lo mantengo y lo arrastre hacia abajo. Me voy a dar tres de esos. Este va a ser nombre, éste va a ser correo electrónico y este de aquí va a ser número telefónico. Está bien. Voy a conseguir que todos se alineen por el lado izquierdo. Entonces voy a tener seleccionado teléfono, correo electrónico, y nombre y voy a volver a mi herramienta de mudanza y luego puedo usar esta de aquí, que es alinear bordes izquierdos, deberían alinearse. De acuerdo, voy a hacer una de las cajas. Voy a ir a la herramienta de rectángulo, asegúrate de que todo esté todavía configurado. Volveré a mi caja blanca a todo color, se va a poner en marcha aquí y va a bajar al fondo de mi caja telefónica. Voy a agarrar a uno de estos tipos, tal vez teléfono, en realidad nombre porque está alineado, mantenga presionada mi tecla alt y los arrastre a través de la celebración del turno. Esto está detrás de donde necesito que esté, así que voy a arrastrarlo hacia arriba y arrastrarlo de nuevo un poco. En realidad, voy a cambiar esto primero y voy a llamar a este mensaje único, Mover herramienta y moverlo por lo que se alinee ahí arriba. Trata de nombrarlo todo. Entonces tengo esta caja que es formulario correo electrónico, este es formulario teléfono y este de aquí se llama mensaje de formulario. A continuación voy a añadir un botón de enviar. Por lo que mi botón de enviar sólo va a ser otro pequeño rectángulo. En este caso va aquí abajo. Se va a cruzar a tres de ellos. Voy a darle un color de relleno de morado oscuro y agarraré mi herramienta de pestaña, click una vez aquí abajo. Voy a llamar a este presentar. Yo lo voy a hacer roboto, pero voy a hacer que esta losa roboto audaz. En realidad, ¿qué usamos aquí arriba? Aquí voy a agarrar mi herramienta de tipo y sólo tienes que dar click aquí y para comprobar. He agarrado mi herramienta tipo, resbalo adentro, este era roboto losa 24. Entonces yo voy a hacer lo mismo con este. Agarra mi herramienta de tipo, haga clic dentro roboto losa negrita 24 y lo haré un color blanco. Mueve herramienta, arrástrala hacia arriba si está detrás de ella, no, está en la posición correcta. Apague mis guías, cierre eso. Genial. Ahí hay una pequeña caja de contacto y ponerlos todos dentro de su propio grupo. Así que recuerda usar nuestro truco, auto select on, arrastra una caja a través de todos ellos, muévalos todos dentro de la caja de contactos. Enciende eso, en un apagado. Aquí están todos. Está bien, y así es como burlarse de un formulario en Photo-shop. 42. Cómo crear un pie de página para tu sitio web: En este video, vamos a maquetas de nuestro pie de página. Es bastante básico, vamos a traer un grupo de iconos, vamos a conseguir nuestro archivo, “Place Embedded” y tengo este llamado “Icons-Social”, es un archivo ilustrador. Voy a colocar este. Genial, muévelo hacia abajo, lo voy a colocar para que se alince con uno de los códigos de columna aquí. Acercar para comprobar dos veces, llevarlo a través, pulsa “Enter” cuando esté listo. Voy a alejarme. Lo que me gustaría hacer es asegurarme de que esté en el lugar correcto. Voy a asegurarme de que esté dentro de mi caja de pie de página. Todo lo demás, voy a hacer los mismos colores que mi icono, así que voy a encontrar mis iconos. Voy a seleccionar icono aquí. Lo que voy a hacer es hacer clic derecho en él e ir a copiar estilo de capa. Ve abajo, encuentra mi gráfico y mi pie de página. Haga clic con el botón derecho del ratón y vaya al que diga “Pegar estilo de capa” y va a ser lo mismo. Agrega una última cosa a mi foto, voy a agarrar la herramienta de tipo y voy a añadir mis derechos de autor. Voy a dar click una vez y voy a pegar en mis todos los derechos reservados, escoger una fuente que sea un poco más apropiada para nosotros. Entonces va a ser Roboto, va a ser medio. Eso va a ser bastante pequeño, así que va a bajar a 12 píxeles. Genial, y ese va a ser mi pie de página. 43. Video de producción: terminando nuestro escritorio: Muy bien, en este último pedacito vamos a ordenar. Un último poquito que falta es que aquí arriba, aún no he puesto mi tipo para los que somos, así que voy a hacer eso. Tengo mi herramienta de tipo, y me aseguraré de que estoy en la caja correcta también. Por el momento, necesito estar en el que dice Quién. Una vez seleccionado, si hago clic una vez, notarás que mi mecanografía está arriba dentro de ella, es un buen punto de partida al menos. De acuerdo, éste va a ser lo que somos. Voy a escoger Texto. Voy a usar mi Roboto, pero voy a usar Slab, y usar mis Bolds. Va a ser blanco, de tamaño, eso va a funcionar para mí, mi herramienta de movimiento, moverlos a través, deshacer. Yo quería moverlos a través de un add mi “Lorem ipsum”. Por lo que voy a hacer clic en mantener y arrastrar. Este va a salir, creo, en la última columna aquí, y vamos a Type, y voy a ir a Pegar “Lorem ipsum”. Las fuentes obviamente realmente grandes, cuando uso cuatro clics y lo bajan a un tamaño más manejable de tal vez 14 píxeles. Voy a hacer líneas de izquierda, voy a escoger Roboto, voy a usar Regular. Elige aligerar este caso. Genial, y eso va a ser por este. 44. Diseñar la vista de tu sitio web para teléfonos móviles: En este video, vamos a ver el diseño móvil. Probablemente la parte más importante al mirar construir un sitio móvil es probablemente la navegación, cómo te desplazas. Debido al espacio limitado, no se puede tener menús tan grandes como los que tenemos en nuestra vista de escritorio. Saber cuál escoger puede ser difícil. Un sitio realmente bueno aquí es este sitio exisweb.net. Es un enlace increíblemente largo, así que usa el enlace en la pantalla ahora para ir y encontrar todos los diferentes enlaces útiles en todas partes. Ahora bien, no vamos a tener la oportunidad de pasar por ellos porque hay tantas formas diferentes de considerar los menús móviles. Pero echemos un vistazo a los grupos principales. Este de aquí, donde tenemos esta cosa llamada la hamburguesa o el sándwich. El sándwich o las tres líneas horizontales, como quieras llamarlo. Esta cosa de aquí hace clic y todo el sitio se desplaza a la derecha, y aparece este menú. Aquí hay otra opción donde se apilan. Aquí se puede ver, esta es la vista de escritorio, pero cuando llega al móvil, apilan como bonitos botones grandes uno encima del otro con algunos otros. Esta de aquí me gusta, sólo la hamburguesa por sí misma cuando hace clic, hay un menú desplegable de ella. Hay un montón de opciones diferentes. Echa un vistazo por el sitio, hay una cantidad loca para escoger. Todos son sabores de algo similar. El gran que hay que decidir es si vas a hamburguesa o no hamburguesa. Al igual que Smashing Magazine, miramos esto antes. Mira esto, si colapso esto hacia abajo, han decidido no hamburguesa, tienen esta palabra “menú” y eso es totalmente genial. Pero se puede ver incluso en mi plug-in de Chrome, he usado la hamburguesa. Hagamos un pequeño truco. Puede ser una moda. Creo que probablemente esté por aquí para quedarse. Es un bonito icono nuevo para los menús móviles. Vayamos a construir uno. Lo que vamos a hacer es que vamos a empezar con el sitio móvil. Entonces vamos a empezar a construir un par de partes del mismo, arrastrando partes del escritorio a través, y luego reconstruir el menú. las cosas con las que quiero empezar es la navegación aquí y la caja de héroes. He seleccionado ambos manteniendo presionado Comando y haciendo clic en ambos o Control en una PC. Lo que voy a hacer es hacer clic, mantener y arrastrar, pero manteniendo presionada la tecla O primero, hacer clic y mantener pulsado y arrastrar, moverlo a través, conseguir lo mismo a esto de aquí. Alinearlo. Te darás cuenta de que todos se han movido a mi versión móvil. Voy a acercar. Hay mucho trabajo para arreglarlo. Entonces voy a acercarme un poco. Lo que quiero hacer es que voy a tener que usar esto. Por lo que voy a ir a mi caja de navegación y la traiga su propio logo de laptop. Voy a moverme al otro lado. No lo veo porque está de este lado aquí. Pero sé que si sostengo Shift y lo arrastro a través, se moverá en una línea bonita, perfecta. Se va perfecto. Mi caja de héroe necesita subir un poco. Encantador. Trae tu laptop, va a estar ahí. Voy a moverlo hacia arriba para estar centrado. Esta navegación sin embargo, va a desaparecer, porque los servicios simplemente no encajan. Entonces voy a apagar eso. Voy a dibujar mis tres líneas horizontales. Es realmente fácil. Basta con utilizar la herramienta Rectángulo. Asegúrate de que tu relleno esté ajustado a blanco. Voy a tener mi trazo puesto a ninguno, y voy a dibujar. Podrías hacerlo con una herramienta Línea también si quisieras hacerlo, me parece que es lo suficientemente fácil usar la herramienta Rectángulo, los hago sentir como líneas. Es un poco grande, así que voy a acercar. Encuentras si eres agradable y cercano cuando estás trabajando en, se vuelve un poco más fácil trabajar con. Si estoy lejos y estoy arrastrando estas líneas por ahí, parecen romperse, pero es mucho fácil cuando se acercan. Voy a sostener Alt y dibujar mi hamburguesa. Aquí puedes ver mi guía inteligente me está diciendo que está coincidiendo con la distancia lejos de esa de arriba, de la de abajo. Genial. Ahora, la hamburguesa es bastante grande. Entonces voy a seleccionarlos todos, transformarlos, y escalarlos un poco, tal vez hacerlos un poco más cortos. Entonces ese es mi menú de hamburguesas móviles. Genial. Lo que me gustaría hacer es cuando se haga clic en ese botón, me gustaría superponer todas las cosas aquí con una nueva etiqueta div allá arriba. Voy a usar la herramienta Rectángulo, y voy a dibujar un bonito rectángulo grande para mi menú, y lo voy a poner dentro. Voy a darle un color. Voy a usar morado. Ahora, voy a usar un poco de transparencia. No hay razón por la que tengas que hacerlo, solo se ve genial. Entonces voy a cambiarlo a 90 por ciento solo para que puedas tener poca conciencia, ver las cosas detrás de él, así que cuando se desliza hacia abajo sabes que puede ser potencialmente copia de seguridad de diapositivas y no es una página nueva. Echemos un vistazo a hacer algunos nombres. Pongamos mi traiga su laptop en el menú de navegación. Este va a ser navegación de caja. Lo que voy a hacer es que voy a empezar una segunda. A éste se le va a llamar Mobile Dropdown. Voy a mantener todo separado. Voy a agarrar la herramienta Rectángulo. ¿ Ese es mi rectángulo? Eso es arriba. Yo lo metí ahí. Voy a agarrar a estos tres tipos. Estos chicos aquí son mi menú de hamburguesas. Lo que voy a hacer es agruparlos o vincularlos. La forma fácil de hacer eso es hacer clic con el botón derecho en ellos y convertirlos en lo que se llama un objeto inteligente. Entonces le renombraré, lo voy a llamar Menú Burger. Voy a deslizar eso hacia arriba en Mobile Dropdown. Genial. Ahora, lo tengo, lo tengo. Lo que voy a hacer ahora es que voy a cambiar mi Menú de Burger así que voy a tener dos. Entonces este es Burger Menu Inactivo, y voy a tener una segunda, que va a ser mi Burger Menu Activo. Porque lo que quiero hacer es hacer lo que he hecho en este sitio aquí. Si escalo esto hacia abajo. Esto es lo que he hecho en mi sitio de Nueva Zelanda, donde conseguí mi hamburguesa, y hago clic en ella y hay una pequeña cruz para saber que puedes hacer clic en ella y cerrarla después. Entonces volvamos a eso. O para crearlo, me vendría bien algunos trucos diferentes. La forma más fácil que encuentro para conseguir una cruz perfecta es hacer click una vez. Ten un plus. No uso X porque se ven como Xs no parecen una cruz. Lo que quiero es un plus de su lado, así que voy a usar plus. Algunas fuentes no se ven muy bien usando esta técnica porque son ventajas bastante estilizadas, por lo que Arial Regular es genial para esta. Lo que quiero hacer es transformarlo. Por lo que voy a usar mi Command-T o Control-T en un PC. Voy a rotarlo alrededor, digamos, 45 grados. Haga clic en “Aplicar”. Parece una linda, buena cruz. Voy a escalarlo un poco, Control-T, hacerlo un poco más grande solo para que coincida con mi hamburguesa de navegación. Enfriar. Voy a copiar eso y voy a pegar eso aquí. Él va a estar activo. Lo que va a pasar es que eso se va a apagar y se van a cambiar entre sí. En realidad, lo que podría hacer para dejarlo más claro para el diseñador web es que voy a poner el Menú Burger en la navegación real misma para que cuando gente encienda y apague eso esté detrás de ahí y este tipo está al frente. Lo siguiente que tengo que hacer es agregar las garrapatas. Entonces voy a agarrar mi herramienta Tipo, y voy a dar clic y arrastrar un cuadro hacia fuera, y voy a escribir mi bit. Van a ser SERVICIOS, lo voy a hacer en gorras. Voy a hacer CARTERA, voy a hacer EQUIPO, y voy a hacer CONTACTO. Voy a seleccionarlos todos, cambiar la fuente, arrastrándola hacia abajo. Voy a usar mi Roboto. Voy a usar Roboto Light. Ahora, lo que quieres hacer es asegurarte de que haya suficiente espacio entre estas palabras. No quieres que la gente haga clic en una y luego haciendo clic inadvertidamente en la otra. Por lo que un buen poco de espaciado entre líneas es genial. El mío lo tiene por defecto porque ya he estado jugando con él. Si agarras la herramienta Tipo y seleccionas todo, lo que quieres estar buscando es, vamos a dar click en este ícono aquí, saquemos tu panel Personaje. Esta opción aquí, la tuya probablemente esté configurada en Auto, que es 28. Probablemente van a ser unos 30 en cuanto al espaciado entre líneas. Voy a manivela la mía hasta cerca de 60. Dependiendo del tamaño de fuente que estés usando, qué tipo de fuente, depende de ti. Ahora, eso va a funcionar para mí. En realidad, tal vez incluso un poco más grande hasta 70. Tan solo para que haya una gran brecha entre ellos, para que los dedos grandes y gordos puedan hacer clic sobre ellos con mucha facilidad. Este va a ser mi desplegable de Nav. Encantador. Esa va a ser mi navegación desplegable. Ahora necesito pasar y transferir todas las cosas que he estado haciendo en el escritorio y hacer que funcionen en el móvil. Eso haremos en el siguiente video. 45. Video de producción: completando nuestra vista para teléfonos móviles: En este video, vamos a estar en este por un rato, porque vamos a traducir todo desde nuestro escritorio a nuestro móvil. Podría estar construyendo el móvil primero, podría estar haciendo lo contrario, desempaquetándolo, dándole espacio para trabajar y usarlo en un escritorio. Lo estamos haciendo al revés. He movido mi primer bloque a lo largo, que se llama box navigation y box hero. Voy a deshacerme de la copia, y voy a empezar a trabajar en esta de aquí. Hay mucho alargamiento que va a suceder, hay algunos tamaños de fuente con los que voy a tener que jugar, y algo de alineación que hacer. Vamos a meternos en ello. Voy a acercar, “Control Plus”, usar mi barra espaciadora para moverme, tal vez hice zoom un poco demasiado. Genial. Lo primero es que voy a usar vamos a hacer que esto suceda, agarrar el tamaño de la fuente y arrastrarlo hacia abajo. Esto está bien. Lo que podría hacer es conseguir que se rompa en dos líneas en realidad, porque ahí se está poniendo bastante pequeño. Voy a seleccionarlo, volverlo a subir a nuestro tamaño de fuente, se va a descomponer a eso cuando esté en móvil. Este trozo de Lorem ipsum necesita bajar y necesita conseguir mucho. El cuadro necesita hacerse mucho más pequeño para caber en este impedimento en los lados aquí. Se va a romper a cinco líneas, está bien. Tamaño de fuente, voy a dejar como está, está establecido en 16 píxeles, que es una fuente lo suficientemente grande. Cuando estás tratando con el tamaño de fuente en el móvil, necesitas realmente probar. Pero como conjetura, su es casi tan pequeño como quiero ir, y 16 es una fuente bastante grande, pero bastante legible. Porque esto es más tipo de ventas toma, está feliz de ser ese pequeño tamaño, así que voy a hacerlo sólo un poquito pequeño. Mi caja más va a tener que bajar y todo este contenedor va a tener que hacerse más grande. Tengo dos partes que hacer. Tengo mi caja, que es la subyacente debajo de mi pase de recorte ahí. Lo cierro, para que sea más fácil. Voy a hacer esto más grande primero. Verás que en realidad está muy lejos de los lados de las páginas. Depende de ti. Realmente no importa para nuestro simulacro de arriba, pero solo para hacer todo menos más utilizable, voy a arrastrarlo y va a ser sobre eso mucho más grande. Es posible que tengas que cambiar el tamaño de la imagen de ladrillos también o reposicionarla dependiendo de dónde quieras que esté o reducirla. He usado “Control T” y lo voy a escalar para que quepa. Se puede ver un poco más. Notarás que el desenfoque ha desaparecido, pero cuando haga clic en “Enter” el desenfoque volverá, eventualmente. Yo estoy acercando. Voy a mover ambos, estoy sosteniendo “Shift” para hacer clic a ambos todos, y moverlos por ahí. Esa va a ser la caja de héroes movida a través. El siguiente es hacer con la caja de pelo. Yo lo voy a agarrar, sostener “Alt” mientras lo estoy arrastrando, moverlo a través. ¿ Dónde voy a posicionarlo? Voy a empezar para poder verlo en absoluto. Voy a culparlo hasta abajo, la caja de héroes, voy a acercar. ¿Cómo voy a hacer esto? Lo que vas a tener que hacer es tomar algunas decisiones difíciles cuando se trata de móviles. ¿ Qué va a hacer para una gran experiencia? Para mí he decidido que me voy a deshacer de la copia y voy a decidir que en realidad estos dos se han ido, que es el rectángulo y la imagen que se sienta en la parte superior de la misma. Yo sólo voy a usar quiénes somos y el Lorem ipsum ahí. Quienes somos necesita hacernos más pequeños, agarrar mi herramienta tipo click aquí, voy a seleccionarlo todo, y bajarlo, éste, agarra éste. Muévete y agarro el “Lorem Ipsum” lo muevo, usa mi herramienta de tipo para encoger los lados dentro. ¿ A qué tan cerca del borde quieres llegar? Simplemente haciendo sobre yo, quiénes somos, ese relleno. Va a funcionar para mí. Ahora esta caja va a tener que hacerse un poco más pequeña o está ahí. Aquí está mi herramienta de transformación y lo que podría hacer es hacer lo que hice en la otra caja. el zoom y simplemente contraiga hacia abajo para que sea un poco más apropiado. El siguiente que vamos a hacer es la caja de servicios. Voy a encontrar mi caja de servicios, ahí está. Voy a alejarme y voy a “Alt”, arrástralo a través. Mi hocico arranca. Realmente no importa por dónde empiezas. Aquí vamos. Tenemos mucho que hacer en este de aquí. Voy a agarrar esa caja morada. Por lo que se llama servicios de caja y una transformación. Es genial. Vamos a tener que hacer algunas cosas para estos ícono. En primer lugar, quiero que los iconos se apilen uno encima del otro, luego trabajo en el texto. Todos mis iconos, ahí están. Ahora, estas casitas de aquí, voy a sarga abajo sólo para hacerlas ordenadas. Es la superposición de color, así que sólo voy a sarga todavía. Simplemente significa, se ve un poco más bonita todas mis capas. Voy a seleccionarlos a todos. Lo que podría hacer primero es en realidad simplemente reducirlo un poco. Voy a usar mi herramienta de transformación. ¿Qué tan grande? Probablemente sea muy pequeño, porque quiero apilar uno encima del otro. Con el fin de estar más o menos ahí. Haga clic en “Entrar”. Ahora lo que voy a hacer es, puedes ver que mis palabras se vuelan por todo el lugar en cuanto a mi documento. ¿ Dónde están todos? Ahí hay uno, ahí hay uno. Es porque los estaba arrastrando, redondeados en diferentes mesas de trabajo y ese es uno de los problemas comunes con sus nuevos sistemas de mesas de trabajo. Precaución sobre lo que tienes que hacer es volver a arrastrarlos, solo llévalos de vuelta al mismo lugar. Vigila esto. Yo sólo voy a arrastrarlos de vuelta a donde estaba y todos se agrupan de nuevo. Tengo mi huella, tengo mi app ahí y mi video minuto de fotografía. Entonces el arriba va a ir allá, luego el de abajo, y el de fotografía, ¿dónde está? Ahí está, por ahí. Vuelve, y luego el video uno, ¿dónde está? Ahí está él. Es bastante bueno estar tan lejos cuando estás arrastrando iconos que puedo un poco perdido en la mesa de trabajo porque te das cuenta antes si deshago eso, cuando empecé a arrastrarlo, apareció ahí arriba y si acercabas a cerca, nunca lo verás y nunca sabrás a qué manera arrastrarlo. Simplemente alineándolos, voy a ir a imprimir va a estar por ahí y voy a agarrar a todos estos tipos y aquí hay una opción que dice alinear, todos alinear. Cambia los centros de distribución, aquí está esta opción. Ahora, nunca funciona perfectamente distribuir centros. Tú sientes si hago zoom, para mí se siente como si esos huecos son parejos, pero este de aquí es mucho más grande. A pesar de que tú lo has hecho, yo sólo voy a hacerlos un poco más grandes. Voy a hacer video, derribarlo. Voy a ir a Fotografía, a bajarlo. Lo estoy bajando usando mi teclado y la app usando el tap-down también. Ahora viene la garrapata. Voy a seguir imprimiendo. He decidido en este caso que el Lorem ipsum aquí abajo, el texto en realidad va a ser demasiado pequeño para ser utilizable en este campo. Voy a usar los bits de alto nivel de texto, así Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, voy a bin. Entonces solo voy a usar estos cuatro y tratando de ponerlos todos en pantalla, voy a alinearlos a la izquierda. Lo que haré es imprimir, moverme arriba, arriba, pasar a allá. Fotografía, moverse hacia abajo, video se mueve hacia abajo, y cambiar el tamaño. Están más o menos determinados por esta fotografía uno, esa es la más grande de la pandilla y él cuelga de un costado. Voy a hacer un par de cosas. Voy a seleccionarlos a todos. Entonces a través de un poco, quiero agarrar todos mis iconos. Empujándolos un poco. De vuelta a mi huella, estos tipos, al otro lado, y voy a ahora agarró mi herramienta tipo. Porque tengo a los más seleccionados, voy a poder cambiarlos todos igual. Voy a hacer clic y “Hold and drag” y voy a asegurarme de que todos estén alineados a la izquierda. Vuelve a mi Herramienta Mover, alinearlos todos de nuevo a la izquierda. Volveré a mi Herramienta de tipo y escogeré un tamaño de fuente. En realidad de vuelta a mi Herramienta de Movimiento, muévelo a través. Eso se trata de mí para las tallas. Yo estoy contento con eso. ¿ Es en qué? Veinte y tres puntos y todo se alinea. Todo encaja, es agradable, distancias claras entre ellos para poder tocarlas, para saltar a las páginas de servicios. A continuación, va a ser portafolio. Ahora, te darás cuenta en mi vista de escritorio, tengo un conjunto bastante grande de portafolios. Tenemos ocho cuadras diferentes. Lo que voy a hacer es que voy a esconder la mitad de ellos cuando se haga al móvil para dar un buen sentido de lo que hacemos, pero no tener esta página de desplazamiento apicamente porque voy a tener una caja encima de la otra. Podrías intentar hacer dos. Pueden ser bastante pequeños, prefiero en este caso hacer uno. Yo sólo voy a ser cuatro encima el uno del otro y excluir a los otros cuatro. Lo que vamos a hacer es trasladarlos hasta aquí. En primer lugar, lo que voy a hacer es, en lugar de arrastrar todo el montón de ellos a través, voy a arrastrar uno a la vez para que sea un poco más fácil para mí. Este de aquí es, arriba en mi vista de escritorio, esto está bajo mi cartera. Lo primero que voy a hacer es, estoy justo abajo aquí. Es esto aquí, el portafolio de cajas que es esta caja de color en el fondo en espera “Alt”, lo arrastro a través, lo pongo alineado, me transformo para meterlo ahí dentro. Te darás cuenta de que mi vista móvil es demasiado corta, así que voy a agarrar mi Herramienta de Mesa de Trabajo, dar click en ella una vez. Si eso no funciona, tienes que sacar el filo. Si eso no funciona sin embargo, solo tienes que hacer clic en la “lista de alto nivel” aquí en la navegación, arrastrarla hacia abajo, porque ¿qué tan grande va a ser esto? Probablemente va a ser un poco más largo que mi vista real de escritorio. Cuando hayas terminado, acaba de volver a la Herramienta Mover. ¿ Qué tan grande debe ser esta caja de color? Probablemente bastante largo. Va a encajar todas mis carteras ahí dentro. Subamos, lo que hacemos es portafolio 1, lo voy a arrastrar a través, así que he seleccionado la caja debajo y la imagen que se le recorta. Voy a mantener presionada mi “tecla Alt”, arrástrala a través. Ese es ese tipo. Voy a agarrar dos y voy a sostener “Alt”, arrastrarlo a través. Todavía no estoy escalado ellos, voy a tratar de hacerlos todos al mismo tiempo. Agarra tres, lo arrastraré a través y luego cuatro, lo arrastraré a través. Están todos aquí. Ahora lo que tenemos que hacer es transformarlos a todos para que sean aproximadamente del mismo tamaño. Los he seleccionado todos aquí y hago clic en el “Bottom one” y mantengo “Shift: y hago clic en el “Top one” y se apila todo en medio. Usemos la herramienta de transformación y sostenga I “Shift” para asegurarnos de que todo sea perfecto. Voy a llevarlos hasta una talla. Parece que va a encajar, por ahí. Alrededor. Está bien. Agradable y grande para caber en la vista móvil. Entonces ahora solo necesito alinearlos a todos. Entonces voy a agarrar el número dos, y acercar, y ojalá entrar para encajar juntos o al menos centrados en línea. Agarro cartera 3, a punto de estar centrado, y lo mismo con la cartera 4. Genial, voy a asegurarme de que esto sea un poco más corto para que se ajuste a todo. he estado moviendo bastante mecánicamente. Si quieres unirte a ellos para que puedas hacer cosas como distribuir centros, porque si selecciono todos estos y hago distribuir centros, no va a hacer lo que queramos. Cambia las casillas separadas de las imágenes. Entonces lo que debes hacer es seleccionar cada uno de ellos, hacer clic con el botón derecho en ellos, o si estás en un Mac o un MacBook Pro sin hacer clic con el botón derecho, todo Control en tu teclado y luego haz clic en ellos, y ve a Convertir a objeto inteligente, y los pega juntos. Es como agrupar, pero lo que puedes hacer más adelante si quieres separarlos otra vez haces clic derecho y hay uno que dice Editar contenido, y lo que pasa es ver Photoshop, editarlo. Abre una pestaña separada con estos dos pequeños tíos solos. Eso puede ser un poco confuso cuando eres nuevo, así que solo tal vez solo uses objetos inteligentes cuando tienes un poco más de experiencia con Photoshop. Convertir a Objeto Inteligente y estos chicos, Convertir a Objeto Inteligente, y siguiente paso, genial. Ahora son núcleo encerrados juntos, ahora puedo usar que distribuyen centros. Echemos un vistazo al siguiente bit, que son nuestros equipos. Entonces voy a traer estos a través. En realidad voy a traer todo el asunto a través del cuadro de equipos, y voy a arrastrarlo a través, sosteniendo Alt y traerlo todo el camino a Mobile View. Empezaré con este primero. Entonces en nuestro cuadro de equipo, lo que podría hacer es agrupar a todos estos tipos. Entonces los selecciono a todos, voy a ir a Grupo, y este de aquí es mi Portafolio de Box. De acuerdo, copia del Equipo de Box. Deshazte del equipo con el OCD, y aquí dentro tenemos y agarraremos al Desarrollador John Smith y su cara. Por lo que ahí está nuestro equipo del círculo, el Círculo 2. Creo que eso es todo el tipo. Genial, no voy a redimensionar esto porque encaja muy bien en Mobile y aunque voy a tener que hacer la página aún más larga, pero recuerda hacer clic en el borde y luego alejar y voy a hacerlo realmente grande. Vuelvo a la herramienta Move y lo que quiero hacer ahora es encontrar a Jane, la diseñadora, Jane Smith, y ella era equipo tres. Tráela a través, y ahí va, acerque, y hazla en el medio. De acuerdo, parece que he dejado el poco de texto para nuestro hombre aquí, así que dónde está, él es John Smith. Dónde está ese texto, tráelo. Lo que podría hacer es hacer el texto un poco supongo. Entonces estamos atrapados con Daniel siendo el más largo. Entonces tú, Jane Smith y John Smith, y yo agarro mi herramienta Tag y los arrastra un poco más grande. Eso funciona, Daniel todavía encaja ahí. Entonces vayamos a Diseñador, Desarrollador, Fundador, tal vez hagamos hasta 20, solo que sea un poco más legible en el móvil, y luego agarrar todas las asas de Twitter, vamos a agarrarlo desde el 17, vamos a ponerlo para arriba. No 204 vamos a hacer sólo 24. Corregir herramienta de movimiento, golpearlo un poco hacia abajo, solo hazla un poco más fácil para el móvil. Genial, todo está en sus cajitas. Echemos un vistazo a nuestro Formulario de Contacto. Por lo que voy a seleccionar Formulario de contacto en esta vista superior, y alejar el zoom, mantenga presionado Alt, arrástralo a través. Empezaré con todos estos tipos. Agarra la caja verde. caja verde necesita hacerse más grande y esta amplia. Ahora todos estos chicos, así que hay Form Name, Form Email, Form iPhone, voy a transformarlos y acercarlos un poco. Lo que podría hacer es golpearlos solo para que usemos todo el espacio que podamos. he seleccionado a todos, los he transferido a todos en uno a lo grande, significa que todos se van a alinear y luego preocuparse a Formar Mensaje. Entonces voy a tener que agarrar Formulario Mensaje, arrastrarlo hacia abajo. De acuerdo, Transfórmalo, haz que se alinee con estos tipos, agarra Mensaje. Está por ahí en alguna parte y ahí está, haz que se alinee con estos tipos. Todos estos son probablemente un poco demasiado lejos a la izquierda ahora. Entonces te voy a agarrar, Correo electrónico, Nombre, Teléfono y te dejaré a través. Ahí vas. Lo último es este botón Enviar, me olvidé de ponerle nombre y este va a ser mi Botón, agarro el Submit, y lo que podría hacer por éste es solo hacer que sea el ancho completo. Por lo que seleccionando sólo el botón, hazlo más ancho. Enviar botón a través, encoge hacia abajo el bit verde, impresionante. Ese va a ser mi Formulario. Último bit es el Pie de página. Cuando me alejo tengo mi Pie de página aquí. Entonces voy a agarrar el Pie de Página, donde está, ahí está. Alt, arrástrala a través. Empezaré por ese lado, porque ahí hay pequeños iconos. Agarra estos iconos, muévalos a través, genial. Haz que el Pie sea un poco más alto, trae eso para que no sea tan ancho. Sea lo que sea, tenemos Iconos sociales y había algo más ahí está la privacidad y las piezas. Entonces me acerco, genial. Entonces podría romper eso en dos líneas, y hacer que la fuente sea un poco más legible en el móvil. Eso probablemente sea demasiado grande, hagámoslo 16, no es súper importante. Bajémoslo a un tamaño más bonito. Transforma mi Pie de página y hazlo en el tamaño correcto. Ahora metamos mi Mesa de Trabajo, vamos Mesa de Trabajo, y sólo que haga que se rompa hasta el fondo ahí. Volver a la herramienta Mover, haga clic en otro lugar. Ver ver el pedacito de línea blanca ahí, voy a darle un toque, excelente. Esa es mi versión móvil. Ahora este es un simulacro bastante rápido de nuestro diseño móvil. Ahora este video es realmente un cómo hacer una versión móvil. Ahora si quieres ver por qué construyes diferentes cosas en el móvil frente al escritorio, quieres empezar a buscar en Dev mundo de experiencia de usuario o diseño de UX. También tienes que empezar a trabajar con el sitio web y crear prototipos para que puedas ver cómo se ve realmente en un sitio web. Una cosa es diseñar en Photoshop, y otra es verla funcionando en un dispositivo móvil y los diferentes tipos de dispositivos móviles. Ya sea un Huawei G7 realmente grande como yo tengo, o uno de los pequeños mini Samsung que hay alrededor. Tendrás que jugar con ambos para asegurarte de que tu sitio sea realmente utilizable. Las últimas cosas que haré antes de salir de esta versión es, voy a ordenar mis carpetas. Entonces tengo mi Footer, él debería estar ahí dentro. Mi botón Enviar debería estar en eso, eso debería estar todo dentro de mi Formulario de Contacto, y ahí están todos mis botones con mi desplegable móvil que se pueden encender y apagar. Está bien, eso es todo para este video. 46. Exportar tus imágenes web: Ahora en este video, vamos a ver cómo sacar tus imágenes de Photoshop para que puedas entregarlas a tu desarrollador para que empiece a construir el sitio web. Ahora lo que van a querer son algunas imágenes listas para la web, no sólo el gran archivo de Photoshop. Si tu desarrollador sí usa Photoshop entonces potencialmente podrías simplemente entregar este PSD y dejárselo a él. Pero a menudo es el papel del diseñador sacar las imágenes listas para la web. Son más o menos dos formatos con los que vamos a trabajar. Va a haber un JPEG y un PNG. Ahora, esencialmente los JPEG son geniales para fotografías y PNG son realmente geniales para cualquier tipo de iconos lineales, logotipos, garrapatas, ese tipo de cosas. Es razonablemente fácil saber cuál usar porque se reduce al tamaño del archivo versus la calidad. Si se ve muy bien y es pequeño, entonces deberías estar usando ese formato. Se revisan ambos, JPEG versus PNG, ver cuál es el más pequeño, ver cuál se ve mejor y luego usar eso. Estamos utilizando una nueva característica en Photoshop CC 2015. Si estás usando una versión temprana, vas a tener que usar algo llamado Slice Tool. Pero debido a que estamos usando la versión más nueva, vamos a usar esta manera impresionante de fantasía llamada Export As. Para hacerlo, veamos primero hacer esta imagen. Por lo que se deslizó en mis Capas, hay esta imagen sentada encima de la caja. Realmente no importa cuál exporta, ya sea la caja o la imagen, funcionará para ambos. Lo que vamos a hacer es hacer clic derecho en él y vamos a bajar a éste que dice Exportar Como. Cuando nos ponemos en la cima cuando sabemos que es un PNG, podemos usar Quick Export pero por el momento, lo sé porque es una imagen, va a ser un JPEG. Entonces vamos a conseguir Export As. Entonces me dice el tamaño y me dice que como PNG, éste se va a fijar en 76 kilobytes y eso es bastante grande. Entonces tienes una escala relativa. Una vez que comienzas a acercarte a 100, eso es demasiado grande para una imagen de este tamaño. Entonces cuando estás a 100 kilobytes, estás muy por encima de lo que debería ser. Entonces, lo que podemos hacer es cambiarlo a JPEG. Entonces tienes este deslizador de calidad. Muy raramente sale en un 100 por ciento. Quieres arrastrarlo hacia abajo hasta que tengas este saldo de que es muy pequeño en cuanto a tamaños de archivo, pero casi no hay una degradante notable de la imagen. Entonces lo que haces es arrastrarlo hasta algo tonto. Entonces bajamos al 15 por ciento y es difícil saberlo, es bueno? ¿Es malo? Lo que me gusta hacer es hacer clic aquí arriba y volver abajo y decidir qué tan bajo puedes ir. Ahora en este caso, puede ponerse bastante baja porque la imagen en sí es bastante ruidosa y es en blanco y negro. Podemos salirnos con la suya bastante baja calidad, pero se puede ver que el tamaño se está volviendo bastante bajo. Entonces cuando está arriba en un 100, está en unos 38 kilobytes razonablemente buenos, pero puedo conseguirlo mucho más bajo. Ahora mis reglas, me quedo ahí entre 30 y 60 dependiendo de la imagen. Este puede ir bastante bajo porque es bastante ruidoso, así que al 30 por ciento de su calidad original estamos en 12 kilobytes y ese es un buen tamaño para mí. Voy a pegarle a Export. Lo último que tienes que hacer es cuando estás exportando esto, voy a golpear esta pequeña opción aquí para que pueda ver, voy a ponerla en mi Escritorio. Voy a ponerlo en una carpeta especial llamada Web Ready Images que he hecho. Otra cosa que debes saber que cuando estás nombrando a tus imágenes, es que necesitas asegurarte de que no haya espacios, y debes asegurarte de no usar ninguno de los personajes locos que hay a lo largo de la parte superior de tu teclado. Así que solo guárdalo a números y letras, y asegúrate de que no haya espacios. Voy a pegarle a Export, y ese es mi JPEG fuera. Ahora podemos movernos, digamos que aquí es mi cartera. Realmente no importa cuál de estas dos casillas selecciono, pero puedo hacer clic con el botón derecho y decir Exportar Como y ojalá recuerde lo que hice por última vez, así que 30 por ciento. Se puede ver en este caso el 30 por ciento no es genial para mí. Si arrastro hasta 100, podría ser difícil ver en el video que estás viendo a menos que estés en HD. Pero al 30 por ciento, no es genial. Por lo que diferentes imágenes te permitirán ir cada vez más alto dependiendo de la calidad de las mismas y qué cosas en ellas. Entonces, te dije que subo a cerca de un máximo de 60, en este caso podría ir un poco más alto porque la compensación es, puedes ver aquí abajo [inaudible] a 5 kilobytes es algo que es bastante pequeño. Entonces voy a golpear a Exportación, y eso va a ser Portafolio 1. Se toma el nombre de la Capa. Entonces, cuando estás nombrando a tus Capas y quieres ahorrar algún tiempo más adelante es usar guiones en lugar de espacios. A mí me gusta usar minúsculas. Realmente no importa cuando se trata de diseño web pero me gusta ser consistente. Hit Export. Entonces esa es esa y puedes moverte, exportar ésta. Ahora lo que puedes hacer es exportar lotes al mismo tiempo. Entonces voy a dar clic a Portafolio 2, 3 y 4, haga clic derecho, vaya a Exportar Como y lo que pasará es que lo azulejará en este lado izquierdo aquí. Entonces tienes este seleccionado, 70 por ciento está bien, es pequeño, este de aquí, éste termina en 7 kilobytes. ¿Se puede ver la diferencia? Tienen el mismo tamaño, pero hay un montón de contenido diferente yendo a lo largo en esta imagen. Mucho más colores diferentes y variaciones de color. Entonces, este es mucho más alto y podrías ser capaz de ir un poco más bajo en cuanto a la calidad. Dependerá de tu imagen, para que podamos esperar a través de ellas. Este se ve muy bien. Este se ve bien. Ese se ve bien a los 40, tal vez no, a los 60. Vamos a hacer clic en Exportar, y el único problema con esto sin embargo es que nombrarlos, va a volcar todos en esta carpeta sin poner nuestros pequeños guiones y así podremos hacerlo más adelante. Por lo que los exportó. Voy a ir a encontrarlo en mis Imágenes de escritorio y listo para web, hay Portafolio 1, 2 y 3. Te ahorrarás mucho tiempo más adelante usando minúsculas si quieres y asegurarte de que haya guiones en lugar de espacios, o puedes usar guiones bajos, realmente no importa. Ahora el siguiente formato que vamos a ver es PNG. Por lo que el formato PNG se acostumbra cuando hay una de dos cosas suceden, que hay gráficos realmente planos como estos iconos, cosas bonitas como iconos y fuentes y logotipos, cualquier cosa que tenga realmente estética, diseño plano a la misma sale muy bien como PNG. PNG tienen una manera realmente buena de mantener bordes bonitos y nítidos en tamaños de archivo realmente pequeños. El otro beneficio de un PNG es que usa transparencia mientras que un JPEG no. Por lo que quiero que estos iconos aquí sean vertidos para que pueda cambiar el color de fondo así y sigue siendo transparente. Para que yo pueda pasar, cambiar el color de fondo y hay agujeros en el medio de aquí para mostrarlo a través. Si uso un JPEG, no me permite hacerlo, tiene que tener una copia de fondo sólida cambiada. Es lo mismo aquí para estos gráficos aquí. A pesar de que había una imagen y dije, “los JPEG son geniales para las imágenes”, en este caso, voy a tener que tomar el hit en tamaño de archivo para ser un poco más grande porque quiero fondo transparente y te voy a mostrar por qué. Este es un ejemplo realmente bueno para mostrarte. Entonces voy a encontrar al Equipo 1, voy a hacer clic derecho en él y hay Exportación Rápida como PNG. Ahora cuando eres nuevo, no estás demasiado seguro si debería ser un PNG o no, puedes usar el Export Como que es el camino ligeramente largo. Entonces tengo el formato JPEG y se puede ver en JPEG que la calidad, cambiarla hasta algo así como 70, la calidad es qué, 10 kilobytes, bonito y pequeño, pero tiene este fondo blanco. El JPEG no permitirá transparencia, no está en su maquillaje. Entonces vamos a tener que hacer un PNG y tenemos dos tipos. Hay PNG 8, que está bien y este tamaño de archivo es bastante pequeño, pero la paleta de colores real que puede usar es en realidad bastante pequeña, es solo 256 colores. Entonces si quieres usar un PNG a todo color tienes que usar este de aquí arriba, que se llama PNG 24. Incluso entonces lo escribo ahí. Por lo que PNG 8 versus PNG 4. Verás que el tamaño del archivo es sustancialmente diferente. Este de aquí, hasta PNG 24. Esto es realmente grande. Pero este es el compromiso de tener transparencia, JPEG son realmente pequeños pero gráficos tienen que tener fondos transparentes y tienen que usar a todo color, tienen que usar este PNG aquí. Entonces voy a usar PNG a todo color, hit Export, y Equipo 1, haga clic en Aceptar. Entonces ahora debería trabajar y hacer lo mismo para las otras dos cabezas y el resto de las imágenes aquí, veamos hacerlo para este ícono a lo largo de la parte superior, y sería exactamente el mismo proceso de exportar esta imagen a lo largo de la parte inferior aquí. Tengo mi ícono, y sé que esto necesita ser un PNG. ¿ Por qué? Porque necesita fondo transparente lo que por defecto lo convierte en un PNG, y es un bonito gráfico plano lo que significa que va a ser bonito y pequeño. Haga clic derecho. Podría usar mi Quick Export como P&G ahora porque sé que va a ser un PNG porque son gráficos planos que necesitan transparencia, definitivamente es un PNG. Entonces voy a golpear Export como PNG y voy a ir directo a aquí y lo voy a poner en mi escritorio debajo de mis gráficos listos para la web y lo voy a poner ahí dentro. Ahora solo trabajaré a través de los diferentes iconos y para decir Exportar como PNG, echemos un vistazo rápido al tamaño PNG. Entonces puedes ver este aquí, 90 kilobytes realmente grandes porque es PNG tratando de hacer lo que hacen los JPEG. Pero se puede ver PNG con transparencia haciendo lo que hace bien, ver que se reduce a 2 kilobytes bonito y pequeño. Estos son los tipos de gráficos que vas a necesitar para entregar a tu desarrollador web para la compilación de tu sitio web. 47. Exportar CSS desde photoshop: En este video, vamos a ver cómo sacar algo llamado el CSS de tu documento. El desarrollador web va a decir: “¿De qué color es este? ¿ De qué talla es ésta? ¿ Qué fuente es? ¿Cuál es el espaciado entre las líneas?” Podrías seguir adelante con la Herramienta Tipo y escribirlas todas y explicar cuáles son todas. Una cosa muy útil que puedes hacer para que sea poco más fácil para ellos es exportar el CSS. Ahora, digamos que quieren saber qué fuente es esta y qué tamaño de fuente es. De lo que podemos hacer con mi cursor, ahí está, aquí estamos. Lo que seleccioné es uno aquí que dice Copiar CSS. Si copio CSS, no parece que pase nada. Lo que se hace es que lo ha copiado y a tu portapapeles como te has metido en copia. Ahora se puede abrir, y [inaudible] en una palabra o comprobando en un correo electrónico y golpear pegar. Lo que se hace es que se creó esta clase a lo largo de la parte superior de ahí, que probablemente no necesitemos. Tiene todas las cosas importantes como tamaño de fuente, familia de fuentes, color de fuente, el peso de la fuente, las alturas de línea con el centrado. Este tipo de cosas, posición, izquierda, arriba, envíalo a desarrollarse de todos modos. Probablemente van a ignorar todo esto. Si eres diseñador web, solo sabrás qué escoger de esto y qué no necesitas. Ahora puedo explicarle a mi desarrollador web que el texto de encabezado héroe es éste. Podrán utilizar sus habilidades mágicas de diseño web para estilo al texto para que coincida exactamente como tu maqueta de Photoshop. Echemos un vistazo a hacerlo lleno algunas de las partes estructuradas. mí me gusta este cuadro de navegación en la parte superior, porque lo que necesitamos es quizá la altura y necesitamos de qué color es y qué es la transparencia Alpha, o la opacidad es. Voy a seleccionarlos como mi Nav Bar. Voy a subir a Capa, voy a ir a Copiar CSS, y voy a saltar al Bloc de notas. Este va a ser mi barra de navegación. Voy a pegarle a Paste. Hay pedacitos que van a poder usar y bits que no lo son. Si no eres diseñador web y no tienes idea de lo que es esta chatarra, solo manda todo el lote y ellos pueden cogerlo. Sé que no necesitamos la clase, y usaremos el color de fondo, usaremos la opacidad, pero no necesitamos nada de esto, pero sí necesitamos la altura. Esas son las cosas que probablemente estoy buscando como diseñador web que necesito ir y estilo para asegurarme de que sea lo mismo, y luego sí me toma muchas de las conjeturas como desarrollador web para decir: “Se trata de eso de alto y es sobre esa transparencia”, y enviártelo de vuelta como el diseño para que regreses y digas: “Oye, no es la correcta, ¿ y qué es toing y froing?” Esto ayudará a eliminar mucho de eso. Esa es una de las nuevas características bonitas y Photoshop CC. Si estás usando CS6 o CS5, desafortunadamente, no es una característica para ti. Vas a tener que hacer mucho más del toing and froing y teclear y explicar qué es la fuente, cuál es el tamaño de la fuente, color que es, qué opacidad es, y etiquetar eso para ellos, o si ellos mismos tienen alguna habilidad de Photoshop, pueden entrar en ella y hacerlo. Eso es explotar CSS de Photoshop. 48. Usar Adobe Generate para que la exportación de imágenes sea sorprendente: Ahora este video es una técnica muy similar a la que hicimos cuando estábamos haciendo la función Export As. Por lo que hicimos clic derecho en la capa y dijimos exportar Como o utilizar la Exportación Rápida. Este hace un trabajo similar, pero es mucho más automatizado y es realmente genial cuando estás trabajando, sobre todo contigo mismo, estás desarrollando cosas de Photoshop como un simulacro y luego estás preparando ensayos y desarrollarlo como sitio web y puedes ir y venir con bastante rapidez usando este Adobe Generate. Lo primero que debes hacer, es activar Adobe regenerar. Si no tienes Adobe Generate aquí, significa que estás usando una visión temprana, ya sea CS6 y anterior, y no vas a tener esta función. Pero si estás en alguna de las versiones posteriores, podemos conseguir un archivo y podemos darle la vuelta a éste que dice activos de imagen. Lo enciendes y no pasa nada, está bien. Por lo que File genera y ve un poco de técnicas a ello. Entonces sé que está encendido, está haciendo algo. Lo que voy a hacer es guardar mi documento en un lugar especial solo para que sepa dónde está y guarde en mi escritorio, voy a hacer una carpeta nueva para ustedes chicos solo para que puedan verlo. Esta va a ser mi carpeta de generar exportación. Solo estoy guardando el PSD en esta carpeta aquí versión de la misma. Haga clic en “Ok”. Entonces te mostraré aquí en el escritorio. En mi escritorio se llama generar carpeta de exportación y este es el PSD en el que estoy trabajando, solo sentada sola. Asegúrate de que Generar esté activado, para mí está apagado por sí mismo debido al Guardar como, asegúrate de que esté marcado. Ahora lo que quiero hacer es, digamos esta imagen aquí me gustaría guardarla. Con un poco de experiencia, sabes que va a ser un JPG porque no necesita transparencia y es una imagen. Entonces lo que voy a hacer es que voy a nombrar a este aquí, punto JPG. Tengo imagen guion libros dot JPG. Lo que notarás es, de vuelta en esa misma carpeta, ¿ves mágicamente que se creó esta carpeta llamada exportación generar esencia. Aquí está mi imagen, mi capa de exportación como un JPG. Está bien, está hecho, todo automáticamente. Lo mismo es, decir si quería que en realidad fuera un PNG. Puedo simplemente, en mi menú de capas aquí, nombrarlo PNG. Aquellos de aquí, en realidad se quitó el JPG y lo cambió por un PNG. De acuerdo, así que esta es una forma realmente rápida y fácil de exportar archivos, pero también es una manera realmente bonita si estás haciendo ajustes, porque es un enlace dinámico, siempre se está ajustando. Por lo que elimina el JPG y agrega un PNG. Entonces tengo esta reserva de imagen dot PNG seleccionado y lo que voy a hacer es, voy a añadir unos efectos de capa y voy a añadir una superposición de color y voy a jugar con, en lugar de normal lo cual es [inaudible] Voy a cambiarlo para que se multiplique , escoja un color, y lo haré como un viejo estilo CPS. Te darás cuenta, en cuanto haga clic en “Ok”, si cambio a mis Imágenes, puedes ver que se estaba rehaciendo conforme me presenté y es un nuevo PNG con el nuevo esquema de color ahí dentro. Si paso y lo cambio de nuevo, cambiaré en algo un poco más, un poco más fuerte. Está bien, es verde. Vigílala aquí, lo está rehaciendo en el verde, así que es un enlace dinámico. Puedes seguir moviéndote, sigue haciendo las imágenes. Entonces sé que uno necesita ser un JPG. De acuerdo, cuando se trata de JPG, sé que está viniendo a través es JPG, mira esto, ahí está. Ahora JPG eso es bastante grande, es 56. Entonces lo que puedo hacer es ahí, es un poco de sintaxis que puedo agregar a este tipo para que sea una resolución diferente. Al final, puedes ver aquí abajo en mi último panel, podría hacer esto un poco más grande para que puedas ver en la pantalla elenco, es que al final aquí, puedo teclear. Si escribo uno y lo va a hacer un JPG del 10 por ciento y lo remake. Mira esto, lo está rehaciendo 10 por ciento, es realmente pequeño tamaño de archivo, pero probablemente sea de mala calidad. Entonces si lo sabes, después de un poco de experiencia, empiezas a saber eso. Sé que si probablemente voy a unos 40, justo antes del final, lo va a rehacer, es un tamaño razonable, la calidad está bien. Pasa lo mismo si quiero que sea PNG. Si quiero que sea un PNG y sé que quiero ser un PNG ocho, o si sabes que quieres que sea un 24, puedes teclear ambos en y hará que el PNG ocho contra 24, lo que sea que necesites. Ahora hay un montón de sintaxis diferente que puedes agregar al final y al principio para la calidad, enfatizamos, no tengo tiempo para pasar por cada uno de ellos aquí. Entonces, si quieres una hoja imprimible para toda la sintaxis diferente, descárgalas desde este enlace aquí. Una última cosa antes de irnos es, puedes empezar a hacer grupos. Digamos que aquí tienes un logotipo, pero tiene un círculo como parte de él, vale, hay parte diferente a tu logo y quieres exportarlo como un gran bulto, vale. Entonces es una mancha blanca con la palabra, trae tu laptop. Ahora lo que puedes hacer es, mira esto, es mi elipse y ahí está mi trae tu laptop, están ahí. Porque si doy estos nombres separados, los va a exportar por separado. Entonces lo que quiero hacer es con ellos seleccionados, agruparlos , y en este grupo aquí, puedo nombrar a este grupo. Entonces este se va a llamar logo BYOL y va a ser un punto PNG y va a ser un ocho. Genial, si salto a aquí, debería tener logo, PNG y es un ocho, [inaudible], transparencia, tamaño impresionante, diminuto. Es otro gran truco para usar con Adobe Generate. 49. No quiero que esto termine. ¿Qué sigue, Dan?: ¿ A dónde vamos desde aquí? Una vez que hayas terminado tu maqueta, por favor envíame una captura de pantalla, o una versión JPEG a través del foro o la discusión en esta página. Me encantaría ver lo que has hecho. El entrenamiento en video puede ser realmente tráfico de un solo sentido. Tengo mis emocionaciones al ver lo que han hecho los estudiantes. Para que este curso sea lo más bueno que pueda ser, por favor pase cualquier sugerencia y haga cualquier pregunta. Para cualquier pregunta persistente, añadiré nuevos videos al curso para hacerlo aún más grande. Place mantente conectado a través de tu canal de redes sociales favorito. Se vienen montones de cosas increíbles en futuras versiones de Photoshop y me encantaría compartirlas contigo. Eso es todo para mí. Adiós por ahora.