Empieza tu carrera en diseño de interfaz de usuario en Photoshop

1. ¿Qué es este curso?: Hola y bienvenidos a mi curso sobre Photoshop y diseño de UI. Desde los últimos ocho años, he estado trabajando como diseñador de UI y me enfrenté a muchos problemas. Entonces pensé que debería crear algo que pueda traer principiantes y novatos a esta carrera de diseño de UI. Por lo que creé este curso sobre diseño de UI en Photoshop. Te enseñará desde lo básico hasta todas las extensiones, trucos, consejos, atajos, y todas las herramientas que usan los diseñadores de UI en su rutina diaria. Veamos qué hay dentro de este curso. Empezaremos nuestro curso configurando preferencias de Photoshop para un mejor rendimiento y velocidad. Específicamente, configuraremos Photoshop para el diseño de UI. Después dominaremos las calificaciones y guías y cómo diseñarlas instantáneamente con el uso de pocas extensiones y plug-ins. Después dominarás los estilos de capa de Photoshop como Sombras de gota, Afecta de trazo, efecto de inserción y presión. Entonces vamos a cubrir todos estos estilos de capa profundamente que entiendas cómo crear los efectos de luz y sombra y todo esto. Después hay una impresionante sección de solicitudes de estudiante en elementos de diseño de tablero. Vamos a diseñar todos estos gráficos de línea de aspecto impresionante, gráficos oscuros, gráficos de barras. También vamos a elaborar un diseño de cabecera de aspecto realmente impresionante o áreas de encabezado de héroe. Esto realmente importa cuando estás diseñando tu sitio web. Esta es la primera impresión en cualquier visitante del sitio web. También vas a aprender sobre el diseño de aplicaciones para iOS. Vamos a diseñar una pantalla de aplicación iOS 6. También vamos a crear este formulario emergente de inicio de sesión, que sepas diseñar los campos de entrada y todo. Entonces tenemos una gran sección sobre alambres, cómo crear alambres, ¿cuáles son las herramientas requeridas para crear alambres? Te voy a dar el último reto para diseñar un sitio web basado en este wireframe. Ahora te voy a mostrar en un instante lo que mis alumnos han creado y diseñado hasta ahora, que sepas cuál es el progreso que está haciendo este curso. Aquí está el trabajo de mi alumna, Betty. Ella diseñó este tema de Shopify y realmente se ve genial. Por lo que ella creó esto después de ver mi curso. Se puede ver por aquí, tema muy bonito, muy elegante, muy elegante. Entonces tenemos éste. Esto se basa en la maqueta que le di a mis alumnos. Esto está diseñado por mi alumna Antonella Spagnoli. Puedes ver por aquí diferentes secciones, nuestros servicios. Este es otro trabajo de mis alumnos. Entonces puedes ver por aquí, éste es otro de Saqib Ameen, mi estudiante. Se puede ver cómo dispuso todo realmente bonito. Se basa en el último wireframe que les di para el reto. Se puede ver por aquí, aquí están los pocos encabezados creados por mis alumnos. Se puede ver por aquí de alguna manera es momento de colaborar y hacer ideas. Entonces éste de Darryl Haynesworth. Entonces aquí hay pocas pantallas de aplicaciones iOS. Las ideas que obtuve de mis alumnos, este es uno de los trabajos del estudiante, Darryl Haynesworth. Entonces esto es de Neil. Este es también otro ejercicio que hizo. Entonces estas son todas las grandes cosas que están haciendo mis alumnos. Si quieres unirte como estudiante, eres más que bienvenido. Este curso es igualmente bueno tanto para principiantes como para expertos. Aunque estés diseñando desde los últimos ocho años o seis años, realmente te gustarán los consejos y trucos que he compartido en este curso. Te encantarán las extensiones y guiones populares que he compartido en este curso. Entonces no te pierdas este curso. No echa un vistazo es plan de estudios y vamos a verte en ese curso. 2. Lectura de Photoshop CC2017 preferencias para diseño de UI: En primer lugar, necesitamos configurar nuestras Preferencias de Photoshop para un mejor rendimiento y responsabilidad y un buen flujo de trabajo. Vamos a configurar Preferencias de Photoshop yendo a este menú Editar y luego yendo a Preferencias y General. También puedes usar la tecla de acceso directo Control K o Comando K. Ahora, lo primero que estarás viendo es éste. No tenemos mucho que saltar por aquí o configurar por aquí. Si lo desea, puede hacer clic en este o desmarcar este: Mostrar espacio de trabajo “Inicio” Cuando no hay documentos abiertos o muestra “Archivos recientes”. Esto es lo que va a mostrar este. Siempre que inicies tu Photoshop, verás algo como esto. Se trata básicamente de archivos recientes por aquí. Ahora, pasando a la interfaz. Interfaz, vamos a seleccionar ese tema de color, lo que quieras, si te gusta este, este más oscuro, depende de ti. Ahora, lo principal que vamos a configurar por aquí es que esta pantalla completa y para mesas de trabajo, no necesitamos ninguna línea ni sombra de gota. Entonces simplemente lo puse a ninguno, ambos. Entonces en este tamaño de fuente UI, necesitamos el tamaño de fuente grande por aquí. No te metas con otras cosas por aquí. Todo lo demás es solo predeterminado y déjalo así. En este panel de espacio de trabajo, vamos a establecer pocas cosas como documentos abiertos como pestañas. He visto en las últimas versiones de Photoshop como 2017 o 2015, que esta está desmarcada. Al instalar Photoshop, verás tus pestañas abiertas en diferentes ventanas. Asegúrate de revisar este en Tabuladores grandes. comprueban estas dos opciones. Ahora en este Panel de Herramientas, no tenemos mucho que seleccionar. Si desea desmarcar, debe desmarcar este zoom animado. Simplemente le va a poner algo de presión a su tarjeta gráfica. Omita este HistoryLog. No lo necesitamos. Manejo de archivos. Ahora, en el Manejo de Archivos, necesitamos asegurarnos de que nuestros archivos se estén guardando en segundo plano y está configurado para ahorrar después de cada cinco minutos. Así que ponlo en cinco minutos. Entonces en esto maximiza la compatibilidad de archivos PSD y PSB, elige “Siempre”. En los archivos recientes, asegúrate de que no sean más de 10 archivos o cinco archivos, porque si aumentas este número, pondrá más uso de RAM y ralentizará tu Photoshop. Ahora en esta configuración de exportación, exportar es básicamente cuando necesitas exportar rápidamente tus archivos PNG o tus gráficos, configurarlo en PNG y asegurarte de que la transparencia esté configurada aquí. Normalmente no recomiendo convertir a sRGB, así que déjalo. Ahora en este rendimiento, necesitas establecer tu uso de RAM en casi 70 por ciento. Tengo casi 16 GBs de RAM, así que he establecido como 9-10 GB a este Photoshop. Entonces a partir de esta historia y caché, recientemente han agregado este diseño web y de interfaz de usuario. necesario seleccionar este, dejar esto tal como está, y desde esta área, Configuración del Procesador Gráfico, necesario utilizar este Usar Procesador Gráfico. De verdad recomiendo que en las últimas versiones de Photoshop, debas tener instalada alguna buena tarjeta gráfica como NVIDIA GeForce, tengo esta NVIDIA GeForce GT 710, y tiene dos GB de RAM. Por lo que hay que revisar este. Mejorará mucho el rendimiento de tus photoshops. Ahora pasando a este Scratch Disks, por lo que es básicamente donde los photoshops guarda sus archivos temporales. Asegúrese de que no sea una de las unidades de su sistema. Selecciona cualquier otra unidad y luego desmarca tu unidad del sistema como mi sistema está en la unidad C, así que voy a seleccionar E o G o H, o cualquier otra persona. Ahora llegando a esta zona de Unidades, aquí, necesitamos establecer que nuestros gobernantes estén en píxeles porque estaremos diseñando todo en píxeles. tipo debe ser píxeles o puntos, ambos son lo suficientemente buenos. Ahora, en la configuración de rejillas y guías, lo primero es que tus guías y rejillas deben colorearse por separado como las guías de lienzo están en color cian, las mesas de trabajo son de color azul claro. La mesa de trabajo inactiva también es azul claro y las guías inteligentes son básicamente de color verde. También tus rebanadas son de color magenta. Ahora viniendo hacia la cuadrícula, tu cuadrícula siempre debe estar en números pares, y debe ser divisible por números pares. Por lo que lo he establecido en 64 píxeles y cuatro subdivisiones. Es básicamente, esta es mi caja grande de una rejilla y se dividirá en cuatro cajas más pequeñas. Es así como he configurado mi grilla. Puedes configurarlo en 32 píxeles o 16 píxeles, lo que quieras. Ahora aquí está nuestras secciones de extensiones y plug-ins. Asegúrese de haber habilitado este Habilitar Generador, Habilitar Conexión Remota. Elige un nombre de servicio o configura tu contraseña por aquí, y deja esta así y usa alguna contraseña por aquí. Ahora, debes haber comprobado estos paneles de extensión de carga y permitir que las extensiones se conecten a Internet. En ocasiones, muchos estudiantes, me preguntan que mis extensiones no están cargando y no están apareciendo. Necesitas desmarcar y comprobar esto una o dos veces y reiniciar tu Photoshop. Creo que esto funcionará. Así que asegúrese de habilitar generador y estas dos opciones están comprobadas. Ahora, en la sección Tipo de las preferencias, vamos a buscar estos dos ajustes. Una es ese número de fuentes presentes para mostrar. Asegúrate de que sean cinco o siete. Acabo de aumentar el número a siete porque no quiero buscar las fuentes una y otra vez, que he usado recientemente. Entonces este Mostrar Nombres de Fuentes Inglés, asegúrate de que éste esté comprobado. Habilitar Tipo Glifo de capa alterna, asegúrate de que este es cheque. Básicamente, hay que revisar todos estos. Estos son todos los ajustes y preferencias para Photoshop última versión CC 2017, y creo que estos funcionarán también para versiones anteriores, y no hay mucha diferencia, pero creo que han agregado algunas cosas más en las últimas versiones. Entonces pasemos a la siguiente lección. 3. Configuración de accesos personalizados: hoy, vamos a configurar atajos personalizados de Photoshop. Ahora, lo que hacen los atajos personalizados es eso, como diseñador de UI que usan ciertos flujos de trabajo y ciertos elementos o herramientas de Photoshop tiempo en tiempo, y no necesitamos otros. Lo que vamos a hacer es establecer atajos personalizados para las cosas que necesitamos hacer rápidamente mientras diseñamos para aplicaciones web o móviles. Ahora vamos a ir a un Edit. Para establecer estas preferencias, vamos a ir a Editar y luego Atajos de teclado. Aquí tenemos el menú de atajos de teclado. Hay pocas cosas que necesitamos armar por aquí. Ahora, primero vamos a ir a este Editar y vamos a bajar a Buscar. Esta es una característica muy nueva en Photoshop CC 2017. Por defecto no hay una tecla de acceso directo para ello. Lo que vamos a hacer es presionar Control F o Comando F, y vamos a presionar Enter. Esto va a agregar la tecla de acceso directo por aquí. Esta es nuestra primera tecla de método abreviado. Ahora el segundo paso es que vamos a configurar algunas teclas de acceso directo personalizadas en este panel Capa. Vamos a expandir este, y necesitas encontrar este Renombrar Capa. Una vez que hayas encontrado esto, ahora F1 es normalmente para ayuda de Photoshop, pero normalmente no usamos la tecla función 1, así que la he establecido en F1 como una capa de renombrar. Puedo renombrar rápidamente mi capa, solo presionando F1, y me llevó, renombrar mi capa. Esta es una tecla de acceso directo y la segunda está en la sección donde tenemos objetos inteligentes. Ve a este Convertir a Objeto Inteligente y lo he configurado en Alt F5. Puedes usar cualquiera que te guste, opción F5 o lo que quieras. Pero asegúrate de recordar estos todo lo que sabes que son fáciles de recordar. Si configuras estos y te olvidas de ellos, entonces va a ser un dolor de cabeza. Ahora en el menú Capas necesitas encontrar esto, Alinear capas a selección. Tenemos que establecer dos atajos para estos centros verticales y centros horizontales. Puedes configurarlo lo que quieras, pero me he puesto en Alt Control V u Opción Comando V, para vertical, solo para recordar que se trata de centros verticales. Después para Alt Control H para centros horizontales. Estos son pocos ajustes que necesitamos en este panel Capa, teclas de acceso directo de Capas. Ahora necesitamos pasar a esta Ventana. Expande este panel Ventana y necesitamos establecer la tecla de acceso directo para este Mosaico todo Vertical Alt Control F10. Realmente necesitamos mucho este. Estas son todas las teclas de acceso directo que vamos a configurar en nuestro Photoshop. Hay algunas opciones más que pueden ser útiles y necesito explicarlas ahora mismo. Ahora puedes ver por aquí dos botones como puedes ver por aquí. Esto es para guardar todas estas teclas de acceso directo en un conjunto. Si desea guardar las teclas de método abreviado en un nuevo conjunto, desea crear un conjunto nuevo, separado conjunto de accesos directos. Puedes configurar, Guárdalo por aquí. Si desea resumir todas las teclas de acceso directo, si hace clic aquí, generará un archivo HTML. Si intentas guardarlo aquí en el escritorio, así. Se puede ver que puede generar todas las teclas de acceso directo archivo HTML. Puedes consultar estos archivos HTML y conocer todos los accesos directos que has establecido. Esta es sólo otra forma de aprender estos atajos. Hay pocas cosas más como Atajos Para: Menús de Aplicación. Puedes ir por aquí, configurar los Menús de Panel también. Puedes ver por aquí Color, pinceles, todas las herramientas que necesitas para acceder por aquí. Si desea establecer teclas de método abreviado para ellos, puede configurarlas aquí. También se pueden establecer las teclas de acceso directo para Herramientas. Entonces Herramientas están por aquí. En el lado izquierdo, puedes ver Lasso Tool, Lazo Polígono, tienen L, y luego tenemos W, W, C, C, C, C. Estas son todas las teclas de acceso directo que puedes configurar en Photoshop. Pasemos a la siguiente lección. 4. Instalación de scripts en Photoshop: Ahora en esta lección voy a hablar de cómo ampliar las capacidades de Photoshop o cómo agregar nuevas funciones a Photoshop, que actualmente no están presentes en Photoshop. Hay dos maneras de hacerlo. Una es que puedes instalar Scripts Personalizados realizados por diferentes profesionales y programadores. El segundo es que podemos instalar Extensiones de Photoshop creadas por programadores. También usan los mismos scripts, pero se puede acceder a ellos a través de paneles. En esta lección, vamos a instalar Photoshop Custom Scripts usando mi PC. Si estás en un Mac, necesitas ver la siguiente lección para encontrar el camino y dónde vas a instalar Photoshop Scripts en un Mac. Entonces empecemos. Primero lo que vamos a hacer es que te voy a mostrar el sitio web, One Script por aquí. Entonces este es un guión expandiendo objetos inteligentes de este tipo kamile. lo que hace, en realidad expande los Objetos Inteligentes creados por Photoshop, que en Photoshop no es posible volver a la carpeta normal o a un grupo o capas una vez que haya creado Smart Objects. Si no sabes de Objetos Inteligentes, no te molestes. Habrá una conferencia adelante en las próximas secciones sobre Objetos Inteligentes. momento es necesario saber que esta capacidad no está presente en Photoshop. De lo que vamos a hacer, vamos a descargar este guión por aquí. Los scripts son básicamente en formato JSX JS. Se puede ver al final el formato JSX o JS. Estos son básicamente archivos JavaScript y lo vamos a descargar. Guarda el archivo. Ahora hemos descargado el script personalizado Expandir objetos inteligentes. Vamos a copiarlo y lo vamos a instalar dentro de la carpeta de Instalación de Photoshop. Voy a cerrar Photoshop ahora mismo. Asegúrate de cerrar el Photoshop cuando lo estés instalando porque no aparecerá. Necesitas reiniciar tu Photoshop para actualizar la carpeta Scripts. Voy a cerrarlo. Voy a hacer clic derecho y ir a Propiedades y Abrir Ubicación de archivo. Entonces básicamente lo que estamos haciendo es ir a la carpeta Presets de Photoshop en la instalación de Photoshop. Se puede ver por aquí, hay diferentes carpetas, plugins, recursos preestablecidos. Necesitamos encontrar esta carpeta de presets. Haga doble clic y vamos a encontrar carpeta Scripts dentro de ella, Scripts. Aquí está. Se puede ver una vez que haya abierto la carpeta de scripts, hay muchos scripts, pero estos scripts son los scripts predeterminados que vinieron junto con la instalación de Photoshop. Estos son todos guiones y scripts gestión de tareas automatizados que se envían con Photoshop. Voy a crear una nueva carpeta por aquí, Mis scripts, algo así, y la voy a pegar por aquí. Ahora vamos a reiniciar de nuevo nuestro Photoshop para ver cómo tenemos este script actualizado por aquí. Ahora ve al archivo y ve a los guiones y puedes ver por aquí tenemos nuevo guión por aquí, KAM Expandir SmartObjects. Vamos a probarlo. Vamos a crear un nuevo documento de cualquier tamaño. He creado un documento muy pequeño. Por ahora, sólo un ejemplo, voy a crear pocas capas por aquí. De acuerdo, entonces segundo, hagámoslo un poco más pequeño que éste. Tengo dos capas. Voy a crear un objeto inteligente a partir de estos dos. Ahora este es un objeto inteligente y no hay manera de que pueda recuperar mis dos capas. Voy a seleccionar esta capa y voy a ir a Archivo, Scripts, y voy a ir a KAM Expandir SmartObjects usando este script. Una vez que haga clic en esto, se va a realizar algunas acciones y se puede ver por aquí, aquí está la carpeta y me ha devuelto mis dos capas. Por lo que esta es una forma de ampliar las capacidades de Photoshop las cuales no están presentes en Photoshop, puedes agregar nuevas funciones, nuevas funcionalidades, hay una gran cantidad de scripts escritos por programadores o usuarios de Photoshop. Hay una cosa más que puedes hacer con estos scripts, puedes configurar teclas de acceso directo personalizadas de Photoshop para eso. Vamos a ir a Editar, teclado y Archivo. Entonces necesitamos ir a Scripts. ¿ Dónde están los guiones? Tenemos los guiones y se puede ver este es nuestro Ampliar Objeto Inteligente. Voy a darle una clave de Control Shift E. Así que me va a dar que ya está asignada capa merge, entonces algo como esto, Alt Control, Alt F4, Alt opción de comando F4 en tu Mac. Pero ahora mismo te estoy mostrando cómo configurar atajos de teclado. La próxima vez que lo vamos a utilizar, sólo vamos a presionar Alt Control F4 para ampliar nuestro Objeto Inteligente. Todo esto se trata de Scripts personalizados, cómo instalarlos y cómo establecer teclas de acceso directo para ellos. Pasemos a la siguiente lección. 5. Instalación de Scripts de Photoshop en MAC: En esta lección, te voy a mostrar cómo ir a la carpeta Preset e instalar scripts en el uso de Mac OS. Vaya a Go, y vamos a ir a Aplicaciones, y haga doble clic en este ícono de Photoshop. Se puede ver que hay diferentes carpetas como Plug-ins, Preset. Ahora nos interesa esta carpeta Presets. Haga doble clic en él y podrá ver que tiene un montón de carpetas. Ahora bien, si quieres ir a instalar algunos scripts, puedes hacer clic en s y puedes ir a los scripts. Aquí puedes pegar tus scripts y así es como instalamos scripts en Mac OS. Ahora, hay muchos archivos de presets de Photoshop como acciones. Tenemos diferentes acciones. Puedes instalar acciones por aquí. Si los puedes encontrar en línea, entonces puedes tener diferentes gradientes por aquí, instalar diferentes gradientes. Entonces tenemos diferentes mecenas. Puedes tener mecenas por aquí. En diferentes lecciones, he mostrado diferentes cosas para instalar. Así es básicamente como vas a encontrar carpeta Preset de Photoshop para instalar diferentes tipos de cosas como estilos, uvas, patrones, y formas, formas personalizadas, a veces iconos, vienen con formas personalizadas, archivo csh de Photoshop. Aquí puedes copiar el archivo csh y puedes usar esas formas personalizadas en tu flujo de trabajo de Photoshop. Ahora este es el problema que tenían muchos estudiantes. También puedes ver muestras de color por aquí. Si tienes tus muestras de color personalizadas y la has guardado, estaría por aquí. Si quieres traer alguna muestra personalizada por aquí, puedes copiarla y pegarla por aquí. Es así como instalamos diferentes presets en Photoshop usando Mac OS. Si tiene alguna pregunta, por favor házmelo saber. Podré crear más videos de este tipo para usuarios de Mac OS. Adelante y pasemos a las siguientes lecciones. 6. Extensiones de Photoshop para diseñadores de UI: hoy, te voy a dar el mayor secreto del diseño de Photoshop y UI, que son las extensiones de Photoshop. Ahora muchos diseñadores de UI, realmente no confían plenamente en las capacidades de Photoshop, sino que amplían sus capacidades de Photoshop mediante el uso de extensiones y scripts de Photoshop. hoy, vamos a hablar de las extensiones de Photoshop. Ahora, hay muchos cientos de extensiones de Photoshop pero les voy a mostrar algunas de ellas que realmente ayudan en el diseño de la interfaz de usuario y realmente aceleran nuestro flujo de trabajo y no podemos vivir sin ellas. Son pocos los cuales son muy buenos en extensiones libres de Photoshop. Entonces tenemos extensiones premium. He comprado mucho como tal vez alrededor de 10 diferentes extensiones premium de Photoshop y les voy a mostrar a las dos. Depende de ti si lo vas a comprar o no. Veamos primero algunos del intercambio gratuito de Photoshop. El primero que te voy a mostrar es esta extensión de Photoshop, que es básicamente generador de usuarios aleatorios que se basa en este motor de sitio web randomuser.me. Por ahora en la última versión de Photoshop, CC 2017, no está funcionando. He publicado el autor de este plug-in, el problema de que no está funcionando, no sé cuándo lo van a actualizar. Pero este es el problema con las extensiones libres, por lo que básicamente no se manejan demasiado bien. Ahora, su alternativa es ésta UberFaces, y también tengo ésta también. Es de sólo 5 dólares. Es básicamente premium y también se basa en sitio web o motor generador de usuarios aleatorios, pero tiene algunas capacidades más. Puedes leer sobre ello por aquí, uberplugins.cc. Lo que realmente hace es que te voy a mostrar el poder de estos plug-ins y extensiones en la siguiente lección. Te mostraré algunos de los plug-ins que estoy usando y cómo pueden ser útiles en el diseño de la interfaz de usuario. Entonces tenemos este Font Awesome PS que puede traer fácilmente cualquier icono a Photoshop. Por lo que puedes ver por aquí necesitas descargarlo desde aquí. Está disponible para Mac y Windows, ambos. Ahora, pocos más. A esto se le llama Griddify. Este es otro panel de Photoshop y es realmente genial extensión. Realmente puede dibujar diferentes guías y rejillas de forma rápida y muy rápida. Entonces este es uno de ellos, esto también es gratuito. Después tenemos Horno. Esto es básicamente para exportar activos de Photoshop a diferentes tamaños. Este también es uno de ellos que a veces uso, pesar de que la última versión de Photoshop tiene su propio motor de exportación, por lo que no necesitamos tanto, pero puedes mirarlo. Entonces tenemos esta tinta para generar diferentes especificaciones cuando entreguemos nuestros archivos de diseño web o nuestros archivos de diseño de aplicaciones móviles a los desarrolladores. Necesitan conocer los tamaños, por lo que la altura y el ancho, elemento es cuál tiene el tamaño o qué tamaño tiene este elemento. Entonces este es básicamente el plug-in. Esto va a ayudar, y esto es básicamente plug-in gratuito. Otro que uso es este Markly. Es muy maravilloso, realmente fácil de usar, y muchas firmas como Microsoft, Disneyland, lo están usando. También lo estoy usando, soy uno de ellos. Básicamente es un plugin premium y ahora son $50. Por lo que estos son también para generar especificaciones para el desarrollo web y entregárselo a los desarrolladores. Entonces esto también es gratis, Fontea. Administra todas las fuentes de Google y puede tener muchas capacidades. Todavía no lo he usado, pero creo que puedes probarlo. Tiene todas las formas de Google en ella y puede manejar fácilmente y puedes aplicar diferentes fuentes en texto fácilmente. Entonces este, Craft, tiene muchas, se pueden decir diferentes funcionalidades. Es un plugin con cuatro o cinco subsecciones diferentes y es realmente genial, pero solo funciona en Mac. Entonces esto es un poco inconveniente. Simplemente funciona para Mac. Si tienes Photoshop y Mac entonces estás de suerte, puedes usarlo. Entonces tenemos otra que es también para crear guías. Este es un plugin premium. De verdad me encanta si puedes comprarlo por $10, creo que deberías comprarlo. Este es uno de los mejores que he visto por usar guías y crear rejillas. Entonces este es ColorKit y es básicamente administras colores en Photoshop vinculados a diferentes capas en elementos de diseño de Photoshop. Por ejemplo, si quieres cambiar el color de dos o tres elementos al mismo tiempo, puedes hacerlo con esto. Para que puedas comprobarlo. Daré los enlaces a todos estos plugins, así que no te preocupes por ello. Entonces nos estamos moviendo a otro gran sitio el cual tiene muchos plugins premium. Yo les he comprado mucho. Entonces uno es CSS Hat 2, realmente recomiendo esto. Si eres desarrollador front-end, eres codificador, puedes codificar en HTML, realmente necesitas esto. Entonces también tengo este PNG Express. Entonces ya tengo esta Guía Guía y esta Perspectiva Mockup. Muchas de ellas no estoy usando en este momento. Social Kit Pro también es uno de ellos. Puede crear gráficos sociales como avatares de Facebook y diferentes tamaños y plantillas de redes sociales fácilmente dentro de Photoshop en tan solo unos clics. Entonces este es ColorKit, ya tengo esta Fontea. Patrones Sutiles. Se puede conseguir muchos patrones geniales, Sutiles, muy ligeros en Photoshop con un solo clic. Por lo que estos son muchos plugins diferentes. Todos puedes probarlos si eres desarrollador de iOS o diseñas mucho para iOS y Apple, necesitas este plugin. Después tenemos UberFaces, UberColumn, UberFrames. Hay toneladas de diferentes plugins de Photoshop. Puedes probarlos y puedes comprarlos si quieres, entonces hay un último recurso que quiero compartir contigo es este pspanels.com. Tiene muchos plugins cada día, se actualiza. Si desea mantenerse al día, puede enviarse un correo electrónico, suscribirse por aquí. No es mi página web. Por lo que muestra muchos plugins diferentes de Photoshop, paneles, incluso algunos de ellos trabajaron con Adobe Illustrator. Pocos de ellos son libres, como se puede ver por aquí. Por lo que estos son realmente geniales, puedes probarlos. Voy a compartir los enlaces con todos estos plugins y extensiones en las fuentes de esta conferencia. Entonces echa un vistazo a ellos. Ahora, en la próxima conferencia, les voy a mostrar el poder de todos estos plugins en acción. Entonces pasemos a la siguiente lección. 7. Poder de extensiones de Photoshop: Ahora déjame mostrarte algunos de los superpoderes de estos plugins de Photoshop. Ahora bien, este es un archivo de muestra. Esta conferencia es solo para demostrar que estos plugins se pueden utilizar de esta manera. Entonces les voy a mostrar algunos de los usos de los plugins que tengo. He ampliado este panel por aquí. Tengo Kit de Color, FontaWesome, Tinta, PNG Express, QuickGuide, Griddify, GuideGuide, Patrones Sutiles, UberFaces y Preview de Dispositivo. Empecemos con este Kit de Color. De lo que hace, básicamente guarda los colores de estos elementos en grupos, así, se puede ver por aquí. Si quiero cambiar el color de éste así, y elijo algún otro color, puedes ver que se va a actualizar tanto los botones como esos óvalos al mismo tiempo. Se puede ver por aquí, esto es muy útil. Puedo actualizar el esquema de colores de múltiples elementos al mismo tiempo con mucha velocidad e incluso puedo cambiar todo el esquema de color de todo el sitio web o diseño web o un documento completo. Este es el poder de este Kit de Color. Cuenta con este proyecto de muestra. Creas un proyecto y en el proyecto vincula diferentes capas con esto. Si vinculo esta capa con esto, se puede ver que cambia el color de esta capa. Si cambio el color a algún color oscuro así, se pueden ver todos estos tres, estos dos óvalos y esto ha cambiado. Esto es muy práctico, muy potente, pero es un plugin premium. Puedes comprarlo. Después tenemos a FontaWesome. De lo que hace, puede traer a esto todos los diferentes iconos. Puedo decir flecha. Se puede ver por aquí hay diferentes tipos de flechas. Ahora es la flecha y es una forma. Puedes ampliarlo así. Para que puedas expandirlo, puedes cambiar su color así. Se puede ver esto es muy potente, muy fácil, y es muy bueno para los desarrolladores también. Entonces viniendo a esta Tinta, Tinta y esta Markly. Tengo a ese Markly por aquí. Abrámoslo. Este Markly. Estos dos son básicamente para desarrollar nuestras especificaciones de diseño. ¿ Qué significa eso? Si voy a seleccionar este rectángulo y voy a mostrar sus medidas, se puede ver en tan solo un momento. Ahora es de 97 píxeles de altura y 802 píxeles de ancho. Mis desarrolladores, necesitan saber cómo van a producir este elemento de diseño en HTML. En diseño web, desarrollo web, necesitan tamaños exactos. Esto es lo que les va a dar. Entonces déjame mostrarles cómo va a dar los detalles de éste. Voy a dar clic a este ícono por aquí, botón. Se puede ver que muestra nombre, super potencia, opacidad uno, y el nombre de la fuente, Museosans-300, estilo es 300. Estos son todos los detalles de los valores CSS como los colores RGBA, y muchas cosas que los desarrolladores necesitan de los diseñadores. Ahora mismo voy a eliminar esta carpeta por aquí. Entonces déjame mostrarte el poder del otro plugin, que básicamente es este Markly y es un plugin premium, así que voy a importar el documento en él. Ahora el documento ha sido importado en este plugin de Markly, y se puede ver por aquí, si solo hago clic aquí, puede ver que me está mostrando los tamaños en este. Eliminemos esto. Voy a borrar todas las cosas por aquí. Eliminemos rápidamente la información alrededor de todas estas capas. Ahora, por qué este es premium y el otro no, porque solo puedes hacer doble clic en cualquiera de esto y puedes mostrar todas las cosas por aquí. Tan solo pinchando así. Es muy veloz y muy fácil. Se puede ver por aquí solo puedo seguir dando click y puedo mostrar todo por aquí, como es posición, x, y posición y mucha otra información. Es muy fácil, muy rápido. Incluso si haces doble clic en esto, puedes ver por aquí está mostrando toda la información de la fuente con solo hacer doble clic en cualquier elemento. Esta es realmente genial, muy rápida forma de generar especificaciones de desarrolladores. A continuación, llegando a este PNG Express, agrega diferentes etiquetas a estos botones y a estos diferentes elementos o grupos, y necesitamos que se exporten a PNG Express. En este momento, Photoshop tiene una muy buena exportación como overlay y tiene una muy buena herramienta. Se puede exportar a múltiples formatos de diferentes tamaños. No necesitamos mucho este PNG Express. Entonces éste, QuickGuide y Griddify. Ahora lo que QuickGuide va a hacer es que va a generar rápidamente guías alrededor de esta capa. Se puede ver por aquí, estas son todas las guías que se han generado alrededor de esta plaza en un solo clic. Entonces si quiero algo como esto, tal vez en el medio y así, solo puedo hacer clic en estos dos y generar las guías en medio de esto. Entonces si quiero colocar algo en el medio, sé que este es el medio de este círculo. También puede bloquear esta capa rápidamente y ocultar esta capa, ocultar las guías. Bloquear las guías, ocultar la guía y mostrar las guías por aquí. Ahora, vamos a usar Griddify. Griddify, podemos dividir todo el documento en diferentes secciones utilizando guías y cuadrículas. Es muy bueno en el diseño de una rejilla alrededor de nuestro diseño. Voy a seleccionar esto. Yo he hecho la selección, y la voy a dividir en cuatro secciones, verticalmente así, y también horizontal, horizontal y verticalmente. Entonces dividí así a éste. Si pongo el espaciado cero y lo envuelvo, puedes ver por aquí me está dando alrededor de esto. Es envolver esto con diferentes guías así. Se puede ver por aquí, he preparado todo un sistema de cuadrícula por aquí. Esto es realmente genial. Entonces tenemos esta GuideGuide. Lo que va a hacer esta GuideGuide es que puede generar cualquier sistema de rejilla en tan solo unos segundos. Voy a generar sistema de cuadrícula de ocho columnas por aquí, y lo va a generar en tan solo segundos como ese. Se puede ver por aquí, estos son los remeros. Vas a aprender más sobre el uso de esta cuadrícula en los ejercicios y lecciones posteriores. Entonces no te preocupes por ello. Solo te estoy mostrando el uso de estos plugins y cómo pueden ayudar y acelerar nuestro flujo de trabajo. Ahora voy a despejar las guías por aquí. Ahora hay uno más, esto se llama Patrones Sutiles. Te mostré cómo esto puede traer muchos patrones geniales en Photoshop con un solo clic. Voy a adjuntar algún Patrón Sutil con este fondo. Entonces empecemos con este Patrones Sutiles. Tengo papeles, escribas, pared, cosas diferentes por aquí. Voy a revisar este y se puede ver aplicado esto como una superposición de patrón por aquí. Puedo conseguir un efecto de papel por aquí con este fondo. Voy a borrarlo ahora mismo. Entonces esta es otra forma. Entonces tenemos este UberFaces. Esto es realmente genial. Te voy a mostrar justo cómo te va a sorprender. Uno, 2, 3, vamos. Se puede ver que generó cuatro avatares en estos cuatro eclipses en un solo clic. Por lo que ahorró como los próximos 30 o 40 segundos o tal vez dos minutos de tu trabajo. Volvamos atrás y así es como usamos este plugin. Puedes generar mujeres, hombres, y solo puedes hacer clic en esto y se va la máscara en todas estas formas. Entonces este Device Preview, no puedo mostrarlo en este momento, pero básicamente es para conectar y administrar tu área de diseño de Photoshop en tu app para iPhone. Entonces cómo vas a hacer es que vas a usar estas conexiones remotas por aquí. Se puede ver por aquí en estas preferencias. Este nombre de servicio y esta contraseña y esta dirección IP. Estas son las tres cosas que vas a usar. He demostrado cómo conectar esto en mi segundo curso, Tipografía para diseñadores de UI, que está un poco avanzado. En esta lección, creo que no te voy a mostrar, pero puedes conseguirlo fácilmente. Si quieres tomar mi otro curso, eres más que bienvenido. Estos son todos los superpoderes de estas extensiones de IU Design Photoshop. Creo que realmente te gustó esta lección. Entonces pasemos a la siguiente lección. 8. Cómo instalar extensiones de Photoshop: Ahora, te voy a mostrar las formas de instalar diferentes extensiones de Photoshop. Existen dos o tres tipos diferentes de extensiones de Photoshop y sus archivos básicamente los cuales necesitas instalar están en diferentes formatos. Entonces te voy a mostrar diferentes formatos. También, Si tienes la versión de Photoshop que es como 2014 CC o inferior a 2014, entonces necesitas inducir Photoshop Adobe Extension Manager el cual debes descargar desde la página web de Adobe. Si tienes la última versión de Photoshop, CC 2017 o CC 2015 o 15.5, necesitas usar un software llamado ZXPInstaller. Te voy a mostrar caminar por todas las cosas y diferentes problemas que puedes enfrentar durante el peinado de estos plug-ins o extensiones. Déjame mostrarte primero Adobe Extension Manager. Así es como se ve. Si vas a instalar algo, necesitas instalar extensión, haz click aquí, y necesitas encontrar el archivo con la extensión. Se puede ver por aquí, ZXP. Solo va a abrir archivos ZXP y va a funcionar con la versión de Photoshop CC 2014 o inferior. Para CC 2015 en adelante, no necesitas este software. Incluso puedes desinstalarlo si no lo necesitas. Ahora, déjame mostrarte diferentes formatos de archivo que vas a ver durante la instalación de extensiones de Photoshop. El primer tipo que te voy a mostrar es éste, ZXP. El icono se verá como éste. Esta es la extensión PNG Express.zXP. Se puede ver por aquí en la ruta de carpeta, es para CC 2014. Ahora bien, si tienes CC 2015 o el último, entonces vas a ver algo más cercano a esto. Se trata de ColorKit 1.5. Ahora, lo que vas a ver es que vas a ver algo como esto, archivo installer.jsx. Ahora, lo que vas a hacer es la mayoría de los plug-ins como te voy a mostrar uno más, guideguide.ps. Por lo que esto de nuevo tiene installer.jsx. Normalmente, lo que haces es arrastrar y soltar tu archivo de instalador en este Photoshop y se va a ejecutar e instalar el plug-in de Photoshop y necesitas reiniciar Photoshop de nuevo, y eso es todo. Ahora, ya tengo instalación guiada. Si hago click aquí, puedes ver que me ha dado algún error. Ahora, el segundo método es que si no funciona, entonces necesitas ir a “Archivo”, y ir a “Scripts”, y luego “Browse”, y luego necesitas encontrar ese archivo de script, archivo instalador, y necesitas ejecutarlo desde aquí. Se puede ver por aquí, ejecuta archivos JSX, JS, JSXBIN. Lo que vas a hacer es que vas a ejecutar este mismo archivo desde el menú Archivo de Photoshop. Vaya a este “Archivo”, “Scripts”, y “Examinar” a través de ese archivo de script de instaladores, seleccione ese archivo de script del instalador en este, y cárguelo. Se va a instalar esa extensión en Photoshop. Ahora, te voy a mostrar el tercer método para instalar las extensiones de Photoshop manualmente. En ocasiones, si tus archivos de script o algo así, se fastidian o necesitas instalar las extensiones de Photoshop manualmente, entonces necesitas hacerlo con este método. La mayoría de las veces, es necesario leer el manual de instrucciones de la empresa plug-in si tienen algo como esto. Por lo que puedes ver por aquí para Mac OS, dijeron que copiar carpeta MarklyPS a las aplicaciones y a los plugins y generador de Photoshop CC 2015. Para CC 2017, han dado el mismo camino por aquí, se puede ver con él. Una carpeta a la que vas a llegar a esta ruta. Básicamente hay dos caminos por aquí: uno, éste, y segundo es éste. Soporte de aplicaciones de biblioteca, Adobe, CEP, y Extensiones. En ocasiones, si no encuentras esta carpeta CEP, necesitas crearla tú mismo. Estos son dos caminos para Mac OS. La mayoría de los plugins, se instalan manualmente, o bien es necesario copiar esto a esta carpeta, esos o esta. Estas son las dos partes que debes tener en cuenta. Voy a compartir el enlace a esta guía de instalación para que puedas verte a ti mismo. Entonces para Windows, también tienes estos dos caminos. Puedes ver por aquí, Windows 32, si tienes 32 bits, y si tienes Windows de 64 bits, entonces necesitas ir a este camino, Plug-ins y Generador. Entonces hay otro camino que es este C, Archivos de programa, X86, Archivos comunes, Adobe, CEP, y Extensiones. Voy a compartir este documento por lo que necesitas conocer estas dos rutas para instalar estos plug-ins y todas las extensiones que necesitas instalar en Photoshop. Si tienes alguna pregunta o no tienes instalada tu extensión de Photoshop, necesitas mi ayuda, puedes hacerme cualquier duda en cualquier momento. Si tienes sistema operativo Mac, hay dos conferencias más por delante donde te voy a mostrar cómo instalar usando ZXPInstaller. Es necesario ver las próximas conferencias para otro método que básicamente es ZXPInstaller. Puede instalar archivos ZXP incluso en las últimas versiones como 2015 y 2017 que generalmente no admiten archivos ZXPInstaller. Todo esto se trata de instalar extensiones de Photoshop. Pasemos a la siguiente lección. 9. Instalación de extensiones de ZXP de Installer: Hola a todos. He visto a algunos estudiantes teniendo problemas instalar sus extensiones de Photoshop CC 2015, que básicamente son extensiones ZXP. Entonces pensé en hacer otra conferencia para ayudarlos porque creo que otros estudiantes podrían estar teniendo el mismo problema. Aquí está la solución. Número 1. En primer lugar, tienes que descargar este ZXPInstaller para Windows o si estás en OS X descarga esta versión. Acude a este zxpinstaller.com y descarga este instalador. El problema básicamente es la versión más reciente de Photoshop, que es CC 2015, ya he descrito que esta versión no es compatible con la extensión ZXP. Si deseas instalar extensiones ZXP en Photoshop CC 2015, tienes que seguir estos tres pasos. Número 1, descarga este ZXPInstaller desde zxpinstaller.com, luego te mostraré las extensiones que vas a instalar con la ayuda de ésta. Descarga este y luego instálalo y tendrás algo como esto, ZXPInstaller. Se abrirá esta ventana. Instala esta y obtendrás esta ventana y solo podrás arrastrar tu archivo ZXP por aquí y se instalará. Puede hacer clic aquí para seleccionar el archivo, ya sea en el escritorio o donde quiera que esté. Voy a ir a mi carpeta de extensiones y ahora voy a arrastrar este archivo de Griddify beta 3 ZXP por aquí y está instalando mi extensión. Asegúrate de apagar tu Photoshop antes de instalar esto porque podría tener algunos problemas. Apaga tu Photoshop antes de instalar cualquier extensión. También, esta extensión que es básicamente guía rápida, se puede ver por aquí. quickguide.zxp, lo voy a extraer. Es un archivo zip, haga doble clic. También voy a arrastrar este por aquí. Todas tus extensiones que están terminando con este archivo.zxp, tienes que instalarlas usando este Adobe ZXPInstaller. No es básicamente de empresa de Adobe, se hace con la ayuda de estas dos empresas, Creative DO y GuideGuide. Crearon esta pequeña herramienta para instalar la instalación de ZXP en la última versión de Photoshop, CC 2015. Para instalar todas las extensiones ZXP, puedes utilizar esta pequeña herramienta y estaré incluyendo su enlace en un archivo PDF. Algunos estudiantes que también se quejan de los enlaces de archivos PDF. Básicamente, por qué estoy proporcionando enlaces, porque estos softwares o estos plug-ins, siguen actualizándose. Siempre que necesites usar la versión más actualizada, tienes que ir a la URL porque es posible que mi versión no esté actualizada. Si lo subo a Dropbox o algo así, entonces podrías tener problemas para instalarlo porque podría no ser la última versión. Si realmente quieres instalar la última versión como esta ZXPInstaller, se ha actualizado. Déjame mostrarte el último que tuve. El último fue algo así. Se puede ver que el icono era diferente. Ahora, lo han actualizado en este quinto número, el último que descargado fue el mes de julio. Además, el tamaño es diferente. Son 45,298 KB y esta 45,464 KB. Realmente actualizaron este. Esto tiene sentido. Si te estoy dando el link para que descargues la última versión. No tengo que preocuparme de que mis alumnos estén recibiendo las versiones antiguas de cualquier extensión o de cualquier herramienta. Todo esto se trata de cómo utilizar el ZXPInstaller para instalar extensiones de Photoshop. Ahora, voy a dirigir el Photoshop. Asegúrate de que mientras estás instalando esta extensión, tu Photoshop no está en modo de trabajo, tienes que apagarla. Déjame sólo darle un poco de tiempo para cargar. En primer lugar, descargue esta extensión, luego instálelo. Estos son unos pasos. Haga clic en este y el instalador seguirá instalando esta pequeña herramienta. Una vez instalado, entonces puedes seguir adelante e instalar todas estas tres muy buenas extensiones de Photoshop. Este es Font Awesome. Básicamente, Creative DO son los que crearon este ZXPInstaller. Es herramienta muy útil. Descarga el ZXPInstaller e instala esto para impresionante extensión de Photoshop, Quickguide, y Griddify. Estaré actualizando o creando un nuevo video sobre cómo usar Griddify en mi sección pro tip, que próximamente está llegando. Entonces mantente atentos. Espero que hayan disfrutado de esta conferencia y puedan instalar extensiones de Photoshop ZXP después de ver este video. Gracias y nos vemos en la próxima conferencia. 10. Instalación de extensiones de Photoshop en MAC: Muchos de mis alumnos me han estado preguntando cómo instalar extensión en Photoshop mientras utilizaba Mac OS. Por lo que este video es específicamente a petición de los estudiantes. Te voy a mostrar la carpeta, cómo vas a ubicar esa carpeta, donde se instalará la extensión, si vas a instalarla manualmente. Hay dos formas en que puedes instalarlos manualmente o puedes usar este ZXPInstaller. Se trata de un instalador de extensión de Adobe de código abierto. Necesitas descargar esta versión de OS X. Ya lo he descargado, lo puedes ver por aquí. Instalemos esto. Mientras tanto, les voy a mostrar dónde va a estar la carpeta de nuestra carpeta principal de instalación de extensiones de Photoshop. Adelante a esa carpeta. Ahora, primero vamos a ir a nuestra computadora, luego a nuestra unidad principal, este es mi disco. Ve a esta unidad principal, y luego ve a esta Biblioteca, luego esta Application Support, y luego Adobe y la carpeta es ésta, CEP, Si haces doble clic en ella, puedes ver por aquí la carpeta de extensiones. Ahora, siempre que intentes instalar cualquier extensión manualmente, vas a copiar su contenido por aquí, en esta carpeta Extensiones. Entonces volvamos atrás y repitamos una vez más, Biblioteca, Soporte de Aplicaciones, Adobe, y CEP. Entonces tenemos estas extensiones. Este es el camino donde residirán todas las extensiones, aunque las instales automáticamente, seguirán aquí. Encontremos y descarguemos extensión Griddify para Mac. puede ver que han demostrado que descargar e instalar ZXPInstaller. Vamos a descargar este Griddify. Bajemos esta extensión Griddify, aquí tenemos. Entonces vamos a ejecutar nuestra aplicación ZXPInstaller y vamos a arrastrar este archivo ZXP a esto. A ver, lo va a instalar. Mientras tanto, vamos a cerrar la app de Photoshop. Salgamos de ella. Salir de Photoshop CC. Voy a introducir mi contraseña. Ahora me ha demostrado que su extensión se ha instalado con éxito. No sé por qué muchos usuarios y mis alumnos tienen problemas para instalar esto. Ahora vamos a ejecutar nuestro Photoshop. Entonces lo voy a pegar por aquí y vamos a ejecutar este Photoshop CC. Si abro un nuevo archivo, vamos a ver. Vamos a abrir un nuevo archivo, solo cualquier archivo ahora mismo. momento estoy fuera de esta tarjeta 3D porque es VMware windows. Entonces te voy a mostrar las extensiones aquí tenemos click en Griddify, y puedes ver que se va a cargar por aquí. Ahora tenemos Griddify por aquí vamos a probarlo. Control A, voy a seleccionar todo. Comando A, eso es interesante. Comando A, y vamos a dividir esto en cinco divisiones verticalmente. Entonces divide, Tenemos nuestra Griddify funcionando a la perfección. Entonces no sé por qué muchos estudiantes están teniendo problemas para instalarlo. Déjame mostrarte dónde está ahora mismo. Si no puedes instalarlo con ZXPInstaller, puedes ir a este archivo. Copia esta carpeta, Griddify, cópiala, y vamos a pegarla el método manual, que es que vamos a ir de nuevo a esta carpeta, extensiones y se puede ver por aquí ya tenemos Griddify porque lo instalado a la perfección. Pero si no puedes instalarlo de alguna manera y estás muy frustrado solo pega tu carpeta Griddify por aquí y reinicia Photoshop y todo volverá a estar bien. Es así como instalamos extensiones en Photoshop y así es como localizamos la carpeta de extensiones de Photoshop en un Mac OS. Espero que te haya gustado este ejercicio porque estaba teniendo un montón de usuarios de Mac solicita que no puedan encontrar esta ubicación de reajustes de Mac y carpeta de extensión de Macs, así que mantente atentos y avísame si tienes algún problema. 11. Configuración de paneles y espacio de trabajo para diseño de UI: hoy vamos a configurar paneles de Photoshop. Solo necesitamos las herramientas que realmente requerimos durante nuestro proceso de diseño de la interfaz de usuario. Sólo necesitamos capas, colores y pocos plugins. Las cosas extra las vamos a quitar de nuestros paneles de Photoshop y de la interfaz de Photoshop. Empecemos. Vamos a abrir cualquier archivo. Pasar por alto esta área, crear cualquier archivo. Ahora, cuando ejecutes el Photoshop por primera vez, verás algo como esto, que básicamente es esencial por aquí. Por lo que tus paneles, todos los ajustes del panel se guardan por aquí. este momento estamos en lo esencial. Si cambias a 3D, las herramientas se cambiarán a configuración 3D y luego gráficos y web, así, y movimiento y pintura y fotografía, etc. Ahora, primero vamos a empezar con estos gráficos y web. Lo que vamos a hacer es que vamos a crear un nuevo espacio de trabajo por aquí así. Voy a nombrarlo nuevo UI. También vamos a utilizar estos atajos de teclado y todo lo demás. Guardar. Ahora lo que vamos a hacer es que necesitamos nuestras muestras por aquí, así que vamos a mover esto por encima de esto en la parte superior, así. Entonces capas y muestras. No necesitamos colores, así que vamos a cerrarlo, hacer clic derecho y cerrar así. Muestras y aquí estas son nuestras dos cosas más importantes. Ahora en esta área, necesitamos algunos paneles o plugins cargados por aquí. Vamos a ir a ventana y extensiones y vamos a cargar nuestra extensión GuideGuide. Voy a mostrar todos estos plugins en las próximas lecciones, así que no te preocupes por ello. Entonces vamos a utilizar esta guía rápida. Cualquiera que sea el plug-in que vas a usar, en su mayoría vamos a utilizar guías relacionadas plugins y este plugin Font Awesome, este es gratis. Esta Guía Rápida también es gratuita. Esta GuideGuide se paga uno. En este momento sólo necesitaremos Griddify, GuideGuide y Font Awesome. Hagamos clic en este “Griddify”. Ahora mismo necesitamos todos estos. Entonces vamos a cargar algunas cosas más como estilos de carácter o personajes así. También lo vamos a mover así dentro de esta zona. Voy a volver a adjuntarlo así. Tenemos a este personaje por aquí entonces también necesitamos panel Info por aquí. También lo vamos a mover en la parte superior, panel Info así. Entonces también necesitamos estos estilos de párrafo y párrafo si quieres, entonces vamos a mover este párrafo con esto. A lo mejor moverlo dentro de éste. Los estilos de párrafo y carácter son dos pestañas relacionadas entre sí. Entonces también necesitamos quizá panel Propiedades, así que lo vamos a utilizar una y otra vez, panel Propiedades tal vez lo mueva por encima de estos plugins, tal vez mueva este plug-in en la parte inferior, por lo que los paneles Propiedades e Info. Entonces podríamos usar estos estilos así que los vamos a conseguir por aquí, así con muestras. Los estilos son básicamente estilos de capa como sombras de gota, su color es, gradientes, etc. Podemos guardar nuestros estilos de botón por aquí y los vamos a utilizar una y otra vez también con los colores. También voy a usar este Comps de capas por aquí. Voy a cerrar Bibliotecas y creo que estas son la mayoría de las herramientas que vamos a utilizar, párrafo, párrafos y ajustes de caracteres. ¿ Hay algo más que necesitemos por aquí? A veces podríamos necesitar estas acciones, así que tal vez podamos cargarlas por aquí. Mueve estas acciones por debajo de este panel Info así. Es así como vamos a configurar nuestra interfaz de Photoshop. Ahora mismo tenemos muestras, estilos después Capas y una cosa más que vamos a sumar aquí es Caminos, así que busquemos Caminos. Así y los vamos a combinar con Capas. Casi todos estamos configurados. Necesitamos algunas cosas más como gobernantes por aquí. Se puede ver por aquí. Si vas a ver y luego Rulers, Control R. Necesitamos gobernantes por aquí porque vamos a arrastrar y soltar unas pautas como esa. Esto es justo de aquí y colocar nuestros elementos por aquí. Se puede ver por aquí en este momento está posicionado en algunos píxeles por aquí, puede ver cuando lo muevo, muestra 33 píxeles, 52, 67, algo así. Podríamos colocar nuestros objetos de acuerdo a estas pautas así. Necesitamos nuestra configuración de Regla. También necesitamos ver que esta herramienta Ajustar está marcada, Ajustar a guías, Capas, no comentar sobre Rebanadas y rejillas. También, vamos a ir a este Show y asegurarnos de que estas Guías, Guía de Canvas, Guías Inteligentes y cuadrícula de píxeles, todos estos estén revisados. Esto es todo lo que vamos a necesitar en nuestro proceso de diseño de la interfaz de usuario. A lo mejor podríamos necesitar algunos plug-ins más que podrían encontrar en las próximas lecciones. Puedes seguir adelante e instalarlos. Eso es todo. Hemos guardado nuestros paneles en este nuevo espacio de trabajo del panel de interfaz de usuario. Ahora mismo tenemos muestras, estilos, Capas, Caminos, y pocos plug-ins, y propiedades, y estilos de carácter, y pocas cosas de párrafo cargadas por aquí. Si quieres hacer alguna pregunta, pregúntame, si no eres capaz de moverlos o algo así, tal vez necesites practicarlo. Se puede ver por aquí cómo se ha desprendido de su panel. Todo esto se trata de paneles, configurar paneles de Photoshop. En este momento estamos usando uno y el segundo está básicamente minimizado. Si quieres expandirlo, puedes expandirlo por aquí así. A mí me gusta minimizado porque tenemos más espacio de trabajo por aquí. Si quieres expandirlo así, puedes ampliarlo por aquí. Se pueden ver todos mis plugins y todo está cargado por aquí y se puede seguir adelante y acceder a los otros de abajo así. Pero me gusta aquí así porque no necesito acceder a múltiples paneles desde esta zona al mismo tiempo. Todo esto se trata de paneles, pasemos a la siguiente lección. 12. ¿Qué es la calibración del colores?: hoy, vamos a hablar de la calibración del color. Esto es, básicamente, para calibrar su monitor o colores LCD o LED a colores estándar. Cuando compras cualquier dispositivo, ya sea un LED o cualquier monitor, los colores no están estandarizados. Podrían mostrar un tinte de color rojo o verde o azul. Además, podrían no mostrar con precisión todos los blancos y negros. Después está esta calibración de color. Existen dos tipos de calibración. Uno está usando algún hardware, que es así. Estos son pocos dispositivos para calibrar tus colores. Este es ColorMunki Display y ColorMunki Smile. Entonces tenemos esta, otra empresa, que es Spyder5pro. Estos son diferentes dispositivos de calibración de color. Lo que hacen es, los conectas a tu monitor así e instalas su software. Ellos prueban los colores, brillo, contraste, y gamma de tu pantalla y la ajustan en consecuencia. Esto es, básicamente, basado en hardware, hardware más software. Ahora, llegando a la solución fácil, tenemos este sitio web que se llama lagom.nl/lcd-test. Muestra mucha variedad de prueba de calibración de color. De qué es la calibración de color, vamos a ajustar nuestros blancos, negros, y nuestros tintes de color al modo estandarizado. Tenemos que comprobar si nuestros blancos, y grises, y negros, e incluso nuestros otros colores se están mostrando con precisión. Hay muchas pruebas diferentes, pero, normalmente, lo que uso es que uso este contraste. Se puede ver por aquí hay diferentes bandas de colores, hasta 32. Deberían poder verlos todos por separado. Cada color debe estar separado del otro color. No deben mezclarse. Esta es una prueba. Puedes alinearlas en medio de tu pantalla y verlas rectas, no mirar desde arriba o abajo porque algunas pantallas no tienen muy buen ángulo de visión. Aquí tienes alguna descripción que puedes irradiar a lo largo si quieres, entonces tenemos esta calibración gamma. No entiendo mucho de ello, pero lo que tienes que hacer es que te sientas a unos pasos de tu pantalla y te vas a apretar los ojos, y puedes ver por aquí estas barras grises y negras dentro de todos estos colores. Necesitas consultar con estas barras básicamente se mezclan. Cuando aprietas los ojos, se mezclarán en algún momento, como 1.8, 1.9, 2.0 o 2.2, algo así. El establecimiento de estándares es 2.2 y 1.8, entre todos estos, supongo, es preciso. Siéntate, unos pasos, y aprieta los ojos y mira dónde se van a mezclar estas líneas. Otra prueba que usé, ésta, niveles negros. Deberías revisar los niveles de negro. Cómo los vas a revisar es, hay diferentes tonos de negro por aquí, 1, 2, 3, 4. Se trata de tono negro, por lo que se está mezclando con el fondo. Hay diferentes negros a grises. Entonces está este blanco que es el color más agudo por aquí. Deberían poder verlos todos por separado. Si ves todo el color negro por aquí, hasta tres o cuatro, entonces hay algún problema con tus negros. Debes ir a revisar la configuración de tu contraste. Si ves más cajas negras por aquí, entonces deberías revisar tu nivel de brillo y, tal vez, contrastar también. Después viene la prueba para la saturación blanca. Se trata de diferentes tonos de grises a blanco. Deberían poder verlos todos. Si te sientas a unos pasos de tu pantalla, deberías poder verlos todos. Esta es otra prueba. Entonces tenemos bandas de gradiente. Deberías poder ver este blanco a negro, y quizá veas algunas bandas en el medio. Un monitor de color muy bueno o muy buena pantalla no debe mostrar ninguna banda en medio como esta. Estas son diferentes líneas entre venir. A estas se les llama bandas. Deberían ser suaves. No deben mostrar bandas como esta. Han dado ejemplos de mala pantalla y buena pantalla. Otros, no lo sé, y no uso mucho. Este es importante, ángulo de visión. La pantalla que estoy usando en este momento no soporta muy buenos ángulos de visión. Se trata de un LED Samsung de 23 pulgadas, por lo que tiene como 2-3 años de edad. Ahora, lo que vas a hacer es, vas a ver esta imagen desde un poco arriba y un poco abajo. Entonces desde el lado izquierdo de tu pantalla y el lado derecho, y ves los colores van a cambiar mucho. Incluso con este morado, podría lucir un tinte azul o rojizo en él cuando lo miras desde algún otro ángulo. También, éste, esto muestra algún tiempo de color rosado y en algún momento rojo. Esto es muy importante porque, si diseñas algo en Photoshop o cualquier otro software, y si lo vas a mirar desde algún otro lado o tu cliente está mirando desde el lado izquierdo o derecho, puede que no vea los colores correctos. En la siguiente lección, vamos a ver diferentes tipos de pantallas LED, que son buenas para los diseñadores. Además, vamos a utilizar nuestra herramienta de calibración del sistema para Windows, o incluso Macs, para calibrar tu pantalla usando solo tus ojos y ese software, cual está integrado en cualquier sistema operativo. Entonces solo un resumen de lo que cubrimos en esta lección, que hay dos formas de estandarizar tus colores con tu monitor. Se puede ver la imagen por aquí, antes y después. De lo que utilizamos es usar nuestros ojos. Un método es nuestra herramienta de calibración de ojos y color dada en sistema operativo para cambiar los colores. Hacer estandarizar los colores. La segunda opción es usar estos diferentes dispositivos, como esta solución ColorMunki ahí, dos o tres. Pueden calibrar tu pantalla de forma automática. Voy a comprar este ColorMunki Sonrisa muy pronto. Son casi 90 dólares de Amazon, supongo, 89 dólares o 90 dólares. No he usado ninguno de estos antes. Veamos qué van a hacer. Ahora, todo esto se trata de la calibración de color y este sitio web de Lagom. En la siguiente lección, vamos a ver cómo el sistema operativo te va a ayudar. Las características integradas del sistema operativo te ayudan a configurar tu calibración de color para estandarizar el modo. Pasemos a la siguiente lección. 13. Los mejores monitores (led) para diseñadores: En esta lección, voy a hablar de algunas de las pantallas o monitores LED que realmente necesitas para un diseño de interfaz de usuario o cualquier diseñador. Si compramos algún LED, normalmente es panel TN. Por lo que básicamente hay tres tipos de paneles. Cuando compres cualquier LED o monitor para ti, debes buscar estas características. Hay paneles TN los cuales eran básicamente tecnología antigua, tres o cuatro años de antigüedad. Es sinónimo de nemático retorcido. Son un poco baratos. Después hay paneles IPS, conmutación In-Plane. Esta tecnología muestra y muestra mejores colores que los paneles TN. Al igual que IPS y PLS, deberías ir por estos. PLS es una tecnología introducida por Samsung. Por lo que sobre todo, cuando ves cualquier pantalla de Samsung como esta, podría haber PLS escrito, es casi como IPS. Entonces cualquier cosa que sea IPS o PLS, debes comprarlo, en lugar de comprar paneles TN. Si apenas estás empezando en tu carrera, entonces debes quedarte con los paneles TN. Pero si quieres colores muy precisos, entonces debes ir por pantallas IPS o PLS. Un factor muy importante, que es este ángulo de visión. Por lo que siempre asegúrate de que la pantalla que estás comprando tenga un ángulo de visión máximo como 178 grados. En su mayoría estas pantallas IPS y pantallas PLS, ofrecen una gran variedad de ángulo de visión. Entonces aunque veas de izquierda a derecha, y arriba e abajo, los colores y todo deberían ser iguales. Está bien. Para los chicos que usan Macs, supongo que las pantallas de Mac están construidas con tecnología IPS, así que no te preocupes por eso. Pero he visto incluso usuarios de Mac que están usando pantallas LG o Dell u otras empresas o monitores muy amplios. Entonces todo esto se trata de monitores o pantallas IPS y PLS. Entonces dicho eso, pasemos a la siguiente lección. 14. Calibración de colores basada de sistemas de sistema: En esta lección, voy a hablar sobre cómo calibrar tu pantalla usando Mac OS o Windows, usando tus propias herramientas de calibración del sistema operativo. En primer lugar, empieza con OS X o Mac. Lo que voy a hacer es, no tengo Mac ahora mismo, estoy grabando en Windows. Cómo vas a calibrar tu pantalla, vas a usar Preferencias del Sistema. Si vas a Preferencias del Sistema y luego haces clic en “Pantallas”, es posible que veas el color en el lado derecho, así que haz clic en eso y es posible que veas un botón calibrar por ahí. Cuando caminas por este proceso de calibración, es posible que veas diferente al final de esta herramienta de calibración cuando hayas calibrado tu perfil de color. Entonces al final te mostrará los viejos perfiles de color. Si quieres cambiar a cualquiera viejo, puedes cambiar a cualquiera viejo, así que no te preocupes por ello. También, hay un modo Experto. Si eres un experto, puedes comprobarlo y ver más opciones en él. Todo esto se trata de calibrar tu pantalla. Déjame ver si puedo encontrar alguna imagen en Google. Pero supongo que normalmente es algo así. Si no seleccionas el modo Experto, es posible que veas este punto blanco objetivo. Normalmente elegí este nativo. Es así como calibras en OS X Yosemite, o en cualquier otro sistema operativo OS X. Usando Windows, lo que vamos a hacer es que vamos a teclear en búsqueda de Windows por aquí, calibrar color y tal vez veas esto solo calibrar pantalla de color. Este es un asistente y si haces clic en Siguiente, posible que veas diferentes opciones para calibrar tu pantalla. Si haces clic en Siguiente, es posible que veas esta Gamma demasiado baja, Gamma buena, Gamma demasiado alta. Lo que vas a hacer es que vas a ajustar tu Gamma para que no veas ningún punto en el medio, como este punto blanco o negro. Voy a dar click en “Siguiente” y ahora mismo está configurado casi exactamente lo que necesito así que voy a saltar hasta el final. Después tenemos ajustes de brillo y color. Asegúrate de que es posible que necesites ajustar los colores, brillo y el contraste desde tu menú de visualización. Si tienes Samsung o cualquier otra pantalla, es posible que tengas diferentes botones y perillas en tu pantalla. Necesitas usarlos para establecer tu brillo y contraste porque esto está básicamente relacionado con tu pantalla y hardware. Voy a saltarme a continuación. Es así como vas a establecer tu contraste de que tu camisa debe ser visible, estas arrugas deben ser visibles en tu camisa y también estas dos fondo negro y grisáceo por aquí. Entonces lo otro es que vas a quitar las manchas de tu color grisáceo. Si haces clic en Siguiente, es posible que veas manchas de rojo o verde, o tal vez azul en algunos monitores así que lo que vas a hacer es que vas a mover tu deslizador hacia atrás y mover tu verde un poco atrás. Déjame ver si necesito quitarme el azul. No, el azul está bien. Verde y rojo, no había manchas de verde y rojo en mi pantalla, así que voy a dar click a continuación. Puedes consultar tu calibración anterior y nueva calibración. Este es el anterior, éste es el actual. Voy a cambiar a este anterior. Si lo terminas, es posible que veas este asistente de inicio de ClearType. Te va a mostrar diferentes textos y ver cuál te queda mejor. Este se ve bien y éste se ve bien. Entonces éste se ve bien. Éste se ve mejor. Terminas este asistente y tu calibración está configurada. Ahora, hay una forma más de controlar esta gamma y otros colores, que va a su software de tarjeta gráfica. Tengo Intel. Si vas a mostrar, es posible que esto no sea lo mismo para cada tarjeta gráfica, pero puedes ir a la configuración y al panel. Aquí se puede ver brillo, contraste y gamma. Si trato de modelar con esta gamma, puedes ver que los colores están cambiando en mi pantalla y también puedes cambiar este brillo y contraste. Puedes aplicarlo. También son diferentes imágenes de muestra que se dan por aquí. Si trato de cambiar el brillo así, puedes ver por aquí. Ahora mismo lo voy a cancelar. No quiero cambiar la configuración de mi pantalla porque me llevó muchas veces acercarme a los colores precisos. Porque a veces mis hijos, simplemente presionan cualquier botón de mi pantalla de Samsung y todos los colores se han ido. Básicamente lo voy a cancelar. También puedes cambiar diferentes ajustes de contraste y brillo y gamma por aquí. Esta es otra forma. Voy a cancelarlo ahora mismo. Todo esto se trata de cómo calibras tu pantalla usando tu sistema operativo OS X o Windows. Lo que te van a mostrar, te van a mostrar y caminar a través de un mago y simplemente mantener los colores que se ven mejor a tus ojos. Al final, si quieres probar la configuración, siempre puedes venir a este sitio web y volver a probar tu configuración. Se puede ver por aquí ahora no puedo ver casi este 254. Si voy un poco más lejos de mi pantalla, podría ver ésta. Asegúrese siempre de que su calibración de color se realice con precisión. Algo sobre pantallas, te voy a mostrar en la siguiente lección qué pantalla necesitas para diseño gráfico o diseño web o diseño de interfaz de usuario. Sigamos adelante. 15. Cómo funciona el interfaz de de Photoshop: Permítanme presentarles la interfaz de Photoshop y cómo funciona, cómo se está accediendo a las diferentes opciones y herramientas en Photoshop. Entonces, empecemos. He abierto un archivo de muestra por aquí. Tengo una capa y una capa de texto y una capa de forma, así que primero, esta del lado izquierdo, tenemos esta barra de herramientas, por lo que tenemos diferentes herramientas como Mover herramienta y muchas herramientas. Si seleccionas alguna herramienta, puedes ver las opciones en la parte superior relacionadas con esa herramienta, por lo que esta es básicamente barra de opciones, por lo que si hacemos click en cualquiera de estas, si cambiamos a cualquier otra herramienta, puedes ver estas básicamente están cambiando. Estas son más opciones relacionadas con esta herramienta. Si mantienes el ratón o pasa el cursor sobre esta herramienta, puedes ver el nombre de esa herramienta, Herramienta Recortar. También puedes expandirlo por aquí así y redirigirlo así. Es de tu propio agrado. Puedes personalizar esta barra de herramientas desde aquí. Sigue presionando el ratón sobre esto y puedes editarlo por aquí y puedes arrastrarlo así. Es así como puedes cambiar toda tu barra de herramientas. Esta es tu barra de herramientas actual, esta es básicamente barra de herramientas extra, si quieres quitar algo, puedes quitar por aquí. También puedes guardar y cargar presets de diferentes barras de herramientas. Entonces para más opciones, puedes ver por aquí hay navegaciones detalladas por aquí, menús. Se pueden ver estos son relacionados con la imagen, manipulación de imágenes luego capa, Herramientas de tipo relacionadas con selecciones, hay diferentes filtros. Entonces tenemos 3D, no lo vamos a usar, pero esto es solo para información. Entonces tenemos vista y configuración diferente como nuestras rejillas, guías, reglas. Todos están en este panel de vista luego tenemos ventanas o paneles, extensiones, todo en esta ventana por aquí. Así que asegúrate de que solo los veas una vez. No trates de recordarlos, ya sabes que estas cosas están aquí como estas extensiones de espacio de trabajo por aquí. Esta es nuestra navegación detallada. Esta es nuestra barra de opciones para estas herramientas, por lo que sí seleccionamos cualquier herramienta y las opciones vienen por aquí. Entonces para más opciones, a veces necesitas ir a esta barra de herramientas por aquí. Esto es básicamente panel, por lo que Barra de panel. Si selecciono algo de esto, déjame dibujar algo de forma ahora mismo para mostrarte cómo funciona. Entonces si arrastro algo de forma por aquí, se puede ver este panel de propiedades de forma viva se ha abierto. Tiene muchas opciones relacionadas con esto. Hay opciones por aquí en la parte superior, pero también hay opciones por aquí. También se pueden ver las coordenadas de ancho, altura, x e y y ubicación de este objeto de acuerdo a este documento. De todos modos, hay pocas herramientas. Llenas paneles pop a los que puedes acceder por aquí relacionados con cualquier objeto o gráfico que diseñes por aquí. Si trato de seleccionar esta, se puede ver por aquí, he seleccionado una capa de texto y puedo ir a esta barra de panel y puedo seleccionar Carácter, Párrafo y algunas otras cosas por aquí. Si no ves esto cargado por aquí, necesitas cargarlo desde aquí, Window, y puedes cargarlo desde aquí como Capa, Comps de capas. Párrafo, Estilos de párrafo. Entonces así es como cargas estos paneles, pero se activarán una vez que tengas seleccionado ese tipo de capa u objeto. Básicamente las llamamos capas por aquí, así que esta es la capa uno, capa dos, la capa tres. Tan pocas opciones, puedes agarrarlas desde aquí entonces la tercera forma es que puedes hacer clic derecho en cualquiera de esta capa y puedes acceder a más opciones y más operaciones que puedes hacer en estas capas. Entonces así es como se accede a diferentes áreas de Photoshop. Hay una nueva característica que acaba de agregarse, que es la barra de herramientas de búsqueda. Se puede ver por aquí, si voy a Buscar y trato de buscar algo como cultivo, se puede ver que me muestra herramienta de cultivo y otras cosas relacionadas con el cultivo como Trim, Revelar todo. Si selecciono esto, va a seleccionar mi herramienta Recortar. Esto es muy útil, he configurado la tecla de acceso directo para ello, Comando F o Control F. Por defecto, esta tecla de acceso directo no está por ahí, así que si quieres probarla, necesitas asignar el atajo de teclado desde aquí y todo esto se trata de esta interfaz de Photoshop y cómo funciona, donde vas a acceder a diferentes opciones y herramientas y cosas y más opciones relacionadas con cualquier capa o texto que dibuje o diseñe. Entonces pasemos a la siguiente lección. 16. Photohsop de nuevo documento: En esta lección, voy a hablar de la nueva configuración de documentos de Photoshop, y cómo vamos a utilizar diferentes presets para aplicaciones móviles y diseño web. Entonces, empecemos. Ve a “Archivo y Nuevo”, y verás esta ventana Nuevo Documento y podrás ver, esto se ha cambiado mucho en esta última versión de Photoshop CC 2017. Podrás ver los detalles de cualquier preset está en el lado derecho y los presets que vas a seleccionar desde aquí. Entonces si selecciono éste, se puede ver que tiene 1440 píxeles de ancho y 880 es su altura. Puedes cambiar las pulgadas o todo. Pero para el diseño web y el diseño de aplicaciones móviles, vamos a usar píxeles. Ahora se puede ver que hay resolución. Para la resolución digital para aplicaciones móviles y diseño web, en su mayoría vamos a ir por 72 píxeles por pulgada. modo Color será RGB, fondo blanco de ocho bits y en las opciones avanzadas, puedes ver por aquí, perfil de color, configurarlo en Don't Color Manage y píxeles cuadrados. Estos van a ser tu configuración de documento para casi todos los documentos. Ahora, si ves en la parte superior, puedes ver que hay diferentes opciones de documento nuevas como guardadas, lo cual me va a mostrar algunos de mis presets guardados que he guardado. Entonces se va a cambiar a esta fotografía. Si eres fotógrafo, puedes usar estos. Estos son todos en pulgadas y 300 PPI, que es para impresión y fotografía. Entonces también hay huella. De nuevo, puedes ver estos otros ajustes. Si le das click, va a ser en milímetros. Se trata de documentos impresos, arte e ilustración, y web y móvil. Si lo deseas, puedes ver por aquí, puedes acceder a más presets desde hacer clic en este, haciendo clic en este signo más por aquí. Puedes ver por aquí, iPhone 6 Plus, iPad Pro, Microsoft Surface Pro 3, iPhone 5. Hay un montón de plantillas diferentes. Se puede ver que hay una nueva característica en la parte inferior. Puedes ver estas son plantillas gratuitas de Adobe Stock. Si quieres hacer click en él, puedes ver que te mostrará parte del tamaño, 32 MB y se va a descargar de Adobe Stock. Asegúrate de estar conectado a Internet y te has registrado en esta cuenta de tu Photoshop. Es así como utilizas diferentes plantillas. Estos son para cine y video. La mayor parte del tiempo para web, no uso estas plantillas tamaños o medio web, mínimo web, web grande. Normalmente, lo que uso es que uso este, que he guardado por aquí, que es de 1280 pixel wide bootstrap. Ahora, ¿cómo puedes guardar un preset? Puedes nombrar cualquier preset por aquí como Guardar nuevo. Asegúrate de cambiar la altura como voy a cambiar el ancho por 1200 y la altura a tal vez 2000 píxeles. La orientación será así. No quiero un retrato. Siempre estará en orientación vertical si quieres seleccionar tableros de arte, es una nueva característica en las últimas versiones de Photoshop. Puedes revisarlo por aquí. Otras opciones que necesitas mostrar lo mismo, que estoy usando por aquí, necesitas usarlas. Puede seleccionar esta opción por aquí y para guardar el preset. Una vez que se guarda, se va a pedir el nombre. Voy a llamarlo 1200 pixeles de ancho. Guardemos este preset y puedes ver por aquí que ha guardado este preset. Estas son mis plantillas descargadas. Estos son mis presets guardados. Entonces si trato de crearlo, puedes verlo me va a dar un nuevo documento con opción de tablero de arte que puedes ver por aquí. Ahora, ¿qué son los tableros de arte? Nosotros vamos a aprender sobre ellos en la siguiente lección. Pasemos a la siguiente lección. 17. ¿Qué son de tableros de arte?: Ahora, en esta lección, vamos a hablar de las mesas de trabajo de Photoshop. Entonces, empecemos. Vamos a abrir un nuevo archivo, y asegurarnos de que en estas opciones, es necesario revisar esta mesa de trabajo si lo desea. Sin mesas de trabajo, puedes ir sin ellas. Entonces revisa mesa de trabajo y voy a crear en este momento. Por lo que puedes ver esto en realidad tiene 1,200 píxeles de ancho y 2,000 píxeles de altura, y esta es básicamente mi Mesa de trabajo 1. Voy a renombrarlo haciendo doble clic en este panel de capas. Ya puedes ver voy a renombrarlo a WebDesign. Esto es WebDesign. Entonces podemos añadir otra mesa de trabajo. Puedes ver por aquí hay una Herramienta de Mesa de Artboard, si haces click aquí, y puedes ver que tenemos la Herramienta de Mesa de Artboard V, y puedes ver que hay diferentes opciones por aquí, como puedes cambiar la mesa de trabajo seleccionada a cualquier tamaño de mesa de trabajo que te guste. Entonces si quiero cambiar a seis, se puede ver que puede ir a seis o puede volver a mil 200 píxeles de ancho. Además, puedes crear una nueva mesa de trabajo. Al hacer clic aquí, para que pueda crear una nueva mesa de trabajo, y puedo seleccionar cualquiera de esto, y simplemente arrástrelo hasta aquí. Da click aquí una vez, y podrás ver que ha creado una nueva mesa de trabajo, que es plantilla de iPhone 5. Por lo que es básicamente iPhone 5 dimensiones. Ahora bien, si quieres crear más mesas de trabajo, puedes crear más mesas de trabajo. Es muy útil, como si estuvieras diseñando un sitio web o tal vez una aplicación móvil, y cuenta con 10 pantallas o 12 pantallas. Puedes agregar más pantallas haciendo clic aquí, así, y puedes tener múltiples pantallas y ver web todo en un solo Canvas. Entonces así es como usas las mesas de trabajo. Ahora, hay pocas opciones más. Se puede ver por aquí, se pueden alinearlos. Puedes seleccionar diferentes mesas de trabajo y puedes alinearlas si lo deseas. A lo mejor, puedes alinear sus bordes superiores, si los has movido por error. Para moverlos, necesitas ir a esta Herramienta Mover, y necesitas desactivar esta Auto-Select si la has seleccionado, y puedes mover cualquiera de la mesa de trabajo que hayas seleccionado, como yo he seleccionado esta. Puedo moverme así, y si quiero moverlo al fondo, puedo acercarlo más, así. Entonces así es como te mueves por tus mesas de trabajo. Entonces también puedes eliminarlos. Puede hacer clic derecho y eliminar mesa de trabajo. Puedes duplicarlos aquí, si has creado un tema y necesitas duplicar toda la mesa de trabajo con todas las capas. Por lo que cada mesa de trabajo que puedes ver por aquí, es básicamente un grupo y puede tener muchas capas, capas de texto, todo tu diseño sentado sobre ella. Entonces así es como utilizas las diferentes mesas de trabajo y así es como las borras. He presionado mi tecla Eliminar en mi teclado para eliminar cualquier mesa de trabajo que haya seleccionado. Cualquier mesa de trabajo, puedes seleccionarla por aquí. Asegúrese de que la Herramienta de mesa de trabajo esté seleccionada y resaltada. Por lo que puedes ver que hay pocas opciones más como Auto-Nest Layers, Auto-size Lienzo. Hubo pocos problemas en versiones anteriores donde lienzo y el tamaño de tu mesa de trabajo no coincidían. Por lo que crearon esto. Ahora bien, si quieres rotar tu pantalla móvil como necesitas modo paisaje, puedes seleccionar cualquier mesa de trabajo como iPhone, la última que he seleccionado y puedes girarla así. Entonces así es como rotas la vista de tu móvil. Entonces esto es retrato, esto es vista del paisaje. Ahora, permítanme demostrar la magia de estas mesas de trabajo. Si tengo, por ejemplo, un botón por aquí, así, este es un todo incorporado y quiero copiarlo a otro, así que voy a solo Alt y arrastrar por aquí. Se puede ver en el lado derecho, se copia a otra mesa de trabajo. Lo mismo es lo que puedo hacer aquí. Por lo que esta capa o este botón se ha copiado a todas estas otras mesas de trabajo. la misma forma que puedes copiar grupos o arrastrar tu diseño por aquí o por aquí. Ahora, puedes ver si tienes versión antigua de tu tamaño de Canvas, entonces puedes ver si vas a este tamaño de Canvas, te va a mostrar que Lienzo de toda el área que estás cubriendo, que básicamente es de 3,408 píxeles. Entonces si trato de hacer una selección por aquí así, creo que van a ser 3,176. Por lo que aproximadamente va a ser igual al tamaño de todo el Lienzo. Ahora, el cálculo de Canvas es diferente. Entonces si estás calculando todo en Canvas, entonces no debes usar salidas, y si quieres eliminar, solo puedes eliminar la mesa de trabajo por aquí. Por lo que borraré sólo mesa de trabajo, y te irás con los contenidos por aquí. Es así como, si quieres usar el solo el Canvas, puedes ir algo como esto. Voy a eliminar todas las mesas de trabajo y puedes ver que tenemos nuestro Lienzo de vuelta. Entonces este es nuestro Lienzo principal. Entonces si trato de redimensionarlo ahora mismo, puedo redimensionarlo. Entonces este es uno de los problemas, uno de los temores de mis alumnos, así que voy a aclarar esto. Eso si no quieres usar mesas de trabajo, cuando intentes crear nuevo archivo, no las selecciones, no marques esta casilla. Entonces vas a configurar este viejo documento, que es, realmente extraño eso y realmente me encanta. Entonces todo eso se trata de mesas de trabajo y cómo vas a usar múltiples mesas de trabajo para crear tus aplicaciones móviles o diseño web, o diferentes vistas, o diferentes versiones de tu diseño. Pasemos a la siguiente lección. 18. Cómo funciona las capas en Photoshop: En esta lección, voy a hablar de capas y básicamente del concepto de capas y un poco sobre este panel de capas. Déjenme primero dibujar algunas capas. Voy a agarrar esta herramienta de forma, y voy a dibujar algún eclipse por aquí. Q 1, 2, 3, y 4. Ahora tengo cuatro eclipse. Déjame cambiar sus colores para que puedas entender cuál está cambiando o alterando sus colores. Ahora tengo cuatro eclipse. Ahora, como se puede ver que en el panel de capas, el negro está en la parte inferior más. En esta representación también está en la parte inferior. Básicamente están en orden de pila. Abajo, luego esta gris en la parte superior, y luego azul, y esta naranja está en la parte superior. Básicamente utilizamos este orden de pila para crear diferentes objetos y diferentes elementos gráficos y diferentes diseños. En ocasiones fusionamos o mezclamos estas dos capas, arriba sobre abajo. En ocasiones los restamos, algún momento los sumamos. Déjame venir a este panel de capas. Estas son diferentes opciones de mezcla. Esto es normal. Si cambio a esta oscurecida, se puede ver que básicamente se está mezclando con la capa debajo de ella. El estrato debajo de ella es básicamente azul. Tenemos diferentes opciones por aquí como multiplicar. Se está multiplicando con las capas de abajo, quemadura de color y todas estas diferentes opciones. Básicamente se trata de agregar o restar colores o multiplicarlos, o de vincular colores, y estos son multiplicación diferente o se puede decir opciones de mezcla. Ahora estas son básicamente opciones de mezcla. Normalmente usamos multiplicar, quemar color, tal vez pantalla, o superponer la mayor parte del tiempo. No usamos a los demás. A lo mejor color en algún momento. Pero los usaré intensamente en mi próximo curso. Para este curso, sólo basta con la introducción de que es opciones de mezcla. Ahora llegando a esta opacidad, opacidad es básicamente la transparencia de cualquier capa así que si la hago, la primera transparente, puede ver ahora es semitransparente. Esto es básicamente transparencia. Ahora llegando a este relleno, relleno es básicamente el color relleno en este eclipse o capa. Para entenderlo mejor, le voy a aplicar algún efecto de trazo, para que puedas ver eso lo que está sucediendo. Ahora, puedes ver esta opción de relleno solo se aplica al color o relleno dentro de este eclipse. No está consiguiendo o haciendo ningún efecto en el borde o efecto de trazo a su alrededor. Si cambio la opacidad, reducirá todo incluyendo cualquier estilo de capa o estilos aplicados a esta capa en particular. Se puede ver la diferencia entre opacidad, hace que todo el objeto sea transparente incluyendo sus todos los estilos. Pero el relleno sólo hace que el contenido interior sea transparente. Esta es la diferencia entre relleno y opacidad. Ahora llegando a esta opciones de candado. Esto es básicamente para bloquear el movimiento, por lo que ahora no podemos cambiar la posición de esta capa. Permanecerá estático por aquí. Ahora el beneficio de bloquear esta posición es que podemos aplicar diferentes estilos de capa o diferentes opciones y diferentes otros elementos a este eclipse, pero no podemos moverlo. Ahora bien, si cambiamos a esta herramienta de bloqueo, si bloqueamos esto, entonces no se puede hacer nada con ella. Ni siquiera puedes aplicar estilos de capa. Se puede ver que se han deshabilitado todos los estilos de capa. Esta es la diferencia entre este icono de candado y este icono de posición de bloqueo. Ahora, hay pocas opciones más por aquí. Ya puedes ver si trato de encender esto. Este es básicamente el filtrado de estas capas, así que tal vez si tenemos como 100 capas y solo necesitamos encontrar el, déjame crear una capa de texto, soy algún texto por aquí, y luego voy a crear algún objeto inteligente. Sólo recuerda que el objeto inteligente era de color naranja así. Voy a crear un objeto pequeño. Yo lo vi, a dónde se fue. El objeto inteligente está aquí, éste. Ahora tengo una capa de texto, pocas capas de eclipse o forma, y luego tengo una capa inteligente u objeto inteligente. Ahora si quiero buscar rápidamente los objetos inteligentes, voy a dar clic en este y se puede ver que me está mostrando el objeto inteligente. O si tu documento tiene cinco o seis objetos inteligentes, se enumerarán por aquí. Básicamente este es un filtro rápido para localizar tus capas. Si hago clic en esta herramienta de forma , me mostrará las capas de forma. Si hago clic en ambos, me mostrará capas de forma más los objetos inteligentes. Esto es básicamente para filtrar tus capas. Este es un texto y puedo ver todas mis capas de texto y luego tengo estas otras opciones. Normalmente usamos estos tres. Todo esto se trata del panel de capas y de cómo funcionan todas estas capas entre sí y cómo se lleva a cabo su orden de pila y cómo las usamos para mostrar o pueden crear diferentes objetos y afectos. Si elimino una parte de ésta, voy a dejar que lo intentemos primero. Ahora puedes ver, yo puedo ver a través de las otras capas de ésta porque tiene un agujero dentro de ella. Es así como funciona esta capa. Espero que hayas aprendido algunos pasos básicos de cómo funcionan básicamente esta capa y paneles de capas y espero verte en mi próxima conferencia. 19. Panel de texto en Photsohop: En esta lección, voy a mostrar cómo vamos a utilizar nuestra herramienta de texto para diseñar nuestro diseño de interfaz de usuario, y cómo vamos a utilizar diferentes opciones de conjuntos de párrafos y caracteres. Empecemos y vayamos a este símbolo de icono T en este panel de herramientas o bien puede presionar T para la tecla de acceso directo. Voy a dar clic y arrastrar por aquí para dibujar un párrafo encuadernado y voy a pegar algo de texto de Loren Ipsum por aquí. Ahora, voy a aumentar su tamaño de fuente para que lo veas un poco mejor. Ahora, algunas de las opciones de este panel de texto están por aquí. Hemos seleccionado esta cara de fuente que era Open Sans. Puedo cambiar a cualquier otra fuente si quiero, como ésta. Entonces esta es básicamente su configuración. Por ejemplo, peso de fuente, tenemos negrita y negrita cursiva ahora mismo en ella. Entonces este es el tamaño de fuente. Lo vamos a utilizar en píxeles. Esta es básicamente la opción de renderizado de fuentes. Estaremos usando normalmente afilados, crujientes, y lisos. O tal vez Windows LCD. Si estás en pantalla LED, es posible que veas esto. Incluso en un Mac, se puede ver Mac LED por aquí o algo así. Ahora bien, estas son básicamente opciones de alineación; alinear centralmente, alinear a la derecha o alinear a la izquierda. Estos son ajustes de párrafo. Este es básicamente el color del texto. Si quiero cambiarlo por algo así, puedo cambiarlo desde aquí. Esto básicamente es envolver texto, pero es posible que no lo estemos usando en nuestro proceso de diseño de la interfaz de usuario. Ahora, al hacer clic en esto se abrirán más opciones en este panel corrector. Por eso en nuestra conferencia anterior, incluí esta configuración de personajes y párrafos por aquí. Ahora, llegando a este panel de caracteres, este es básicamente el tamaño de fuente, y esto es básicamente la altura de línea entre estas dos líneas. Si intento aumentarlo, se pueden ver las líneas de texto verticalmente, se expanden. Entonces este es básicamente el espacio entre dos letras. Se puede ver que las letras están consiguiendo más espacio aquí y teniendo más espacio en ellas, así. Normalmente, usamos la mayoría de las veces algo, tal vez 25. Ahora pues, tenemos estas diferentes otras opciones por aquí para la fuente y la tipografía como negrita, cursiva, y luego todas las mayúsculas, y subíndice, superíndice; estas son opciones diferentes. Puede que no los estemos usando la mayor parte del tiempo por aquí, pero tal vez puedan ser útiles en algún momento. Ahora, voy a explicar algo sobre esta configuración de párrafo. Ahora, en la configuración de párrafos, tenemos estas más opciones de alineación de texto. Esto se justifica para configuraciones justificadas y estos son tres ajustes normales: línea izquierda, línea media y alineación derecha. Ahora, estas tres son opciones de sangría. Si queremos sangrar nuestro párrafo desde la izquierda, como 50 pixel, podríamos estar usando esto. Se puede ver que este párrafo se mueve 50 píxeles de la izquierda. Si solo quiero la primera línea de indention, entonces puedo usar esta. Ahora, se puede ver que la primera línea se inicia desde 100 píxeles de la izquierda. Ahora bien, estos son básicamente relleno superior e inferior de nuestro párrafo. Si entro 500 por aquí, se puede ver mi párrafo movido hacia abajo. Todos estos son para la configuración de párrafos, pero la mayoría de las veces, es posible que no estemos usando estas opciones de sangría o estas opciones de espaciado porque estaremos moviendo diferentes párrafos con nuestro teclado, como shift y flechas usando nuestras teclas de acceso directo. Todo esto se trata de ajustes de párrafo y párrafo. Pasemos a la siguiente conferencia. 20. Herramienta de forma en Photohsop: En esta lección, estaremos utilizando nuestra herramienta de formas para crear nuevas formas y combinar diferentes formas y restar pocas formas. Estaré centrándome sólo en las cosas que estaremos haciendo mayormente en el diseño de la interfaz de usuario. Empecemos. Haga clic en este icono de forma, icono de herramienta o puede presionar U desde su teclado. Haga clic y arrastre para crear. Se puede ver este ancho y alto viene, ancho este 537 y algo así, estoy usando este. Tan pronto como dibuje este, se pueden ver aparecer propiedades de forma en vivo. Aquí está nuestra anchura y ésta es la altura. Si quiero establecer la altura en 330 píxeles, puedes bloquear la altura si quieres apretar este cuadro en proporción como esta. Entonces tenemos su posición del eje x, qué distancia está del lado izquierdo y a qué distancia está de arriba, que es el eje y. Este es su color de fondo y este es su color de contorno o trazo. Se puede ver por aquí, si yo aumento esto, se puede ver cómo se delinea. No, no vamos a estar usando esto así que no voy a discutir estos pocos ajustes desde el esquema, lo estaremos usando con nuestros menos tiempos. Uno más, lo que es muy importante es este radio fronterizo. Puedes hacer clic o arrastrar por aquí si quieres establecerlo en algún radio del borde, o puedes escribir aquí tu propia elección de valor. Además, si haces clic en este icono de candado, puedes establecer valores personalizados para cada esquina. Si solo lo arrastro aquí así, creará este tipo de forma, y este tipo de formas son posibles en el diseño CSS y las nuevas especificaciones CSS3. Una cosa es esto, estaremos usando la mayoría de las veces estas formas rectangulares para nuestros botones y muchas otras cosas. Ahora vamos a crear una nueva forma combinando dos formas. En ocasiones has visto este tipo de cuadro de diálogo de información o pop up. Voy a usar otra forma personalizada de nuestra barra de herramientas de formas. Aquí voy a cargar todas las formas por aquí, reemplazarlas, y quitar un ajuste más, miniatura grande. Lo pondré en miniatura grande. Ahora vamos a averiguar dónde está este rectángulo. Podemos usar este o tal vez éste, o éste. Voy a dibujar un rectángulo por aquí. No es básicamente un rectángulo. Ahora puedes ver he hecho un globo pop up o punta de herramienta estilo de caja. Ahora bien, si te enfocas en tu panel de capas, esta forma está separada de esta. Si quiero cambiar sus colores, el otro se quedará como está. Ahora cómo puedo combinar estos dos, es muy sencillo. Puedes seleccionar ambos pulsando control y clic, y luego puedes presionar control y E. Es un atajo para combinar dos formas, ahora están fusionadas. Se puede ver que básicamente se fusionan ahora. Si quiero cambiar su color, puedo cambiarlo y controlar T Si quiero escalarlo, van a escalar proporcionalmente. Así es como se crean formas en su diseño de interfaz de usuario. A veces teníamos que crear formas como esta. Ahora bien, si quieres restarle una forma, su mayoría no necesitamos usarla la mayor parte del tiempo, pero aún así es algo que puedes aprender. Ya puedes ver, como he seleccionado este restar de la forma frontal, mi cursor se cambia a este signo negativo o menos. Ahora bien, si dibujo un círculo por aquí, estoy presionando Shift con él, se puede ver que acaba de restar esta forma. Una cosa más, si necesito moverla, no puedo moverla con esta herramienta de movimiento. Se ve que puedo mover la forma, pero si quiero mover este círculo circular dentro de mi forma, que acabo de restar, necesito presionar esta herramienta de selección de trayectoria o herramienta de selección directa. Si hago clic en esto, se puede ver ahora esta forma ovalada dentro de esta otra forma se resalta. Si quiero seleccionar todos sus lados o toda la forma, voy a hacer clic en este cursor negro por aquí “Herramienta de selección de caminos”. Ahora puedo moverlo, ahora está en el medio. Si quiero cambiar su tamaño o forma, puedo escalarlo hacia abajo o escalarlo hacia arriba. Entonces voy a volver a seleccionar herramienta de movimiento, y eso es todo. Hemos creado una forma con la combinación de dos formas y luego restamos esta área sobre esta forma combinada. Esto es todo, y creo que eso es todo para nuestra herramienta de forma. Espero que hayan aprendido algo y disfrutado. Pasemos a la siguiente conferencia. 21. Conceptos básicos de la herramienta Pluma: En esta lección, les voy a mostrar rápidamente cómo vamos a utilizar nuestra herramienta de lápiz en nuestro diseño de interfaz de usuario. No vamos a crear iconos por aquí. Hagámoslo rápido y fácil. Podría haber visto algo así. Déjame solo crear para explicarlo. Esta es mi área de héroes de mi página web. Así. Voy a cambiar su color, color fondo, para que puedas verlo correctamente. Además, voy a ampliar un poco más su tamaño. Podría haber visto variación de esta forma. La mayoría de las veces algunos diseñadores, no usan esta forma totalmente cuadrada. Agregaremos algo de variedad por aquí, seleccionaremos tu herramienta de bolígrafo y pincharemos en esta línea de esta herramienta rectangular por aquí así. Haga clic aquí y haga clic aquí. Básicamente lo que estamos haciendo, estamos agregando algunos puntos de anclaje más para alterar nuestra forma. Ahora pasa a esta Herramienta de Selección Directa. Selecciónelo y luego seleccione el medio y muévelo con el uso de flecha y tecla de desplazamiento, turno, flecha, desplazamiento, flecha, desplazamiento, flecha. Estoy presionando turno y haciendo clic en flecha. Esta forma ha sido creada. Si quieres que las flechas sean un poco no curvadas y un poco puntiagudas, puedes ir a esta herramienta de punto de conversión y dar click una vez por aquí. Se puede ver que tenemos forma básica de un área de cabecera de héroe de cabeza de flecha. Podría haber visto mostrando flecha o contenido al lado por aquí, flechas apuntando hacia abajo por aquí. Este es un uso. He alterado esta forma usando mi herramienta de pluma y cambiado para crear algún valor más estético. También hay algunas otras cosas que podemos usar por aquí. Se puede ver que era nuestra forma básica. Si seleccionas esta Herramienta de selección directa, puedes seleccionar por aquí y mover tu forma así. Se puede ver que hemos creado diferentes variedades de formas por aquí. Para empezar con nuestro este encabezado como área de cabecera o área de héroe. Estos son diferentes usos de la herramienta de pluma y los usamos en combinación con nuestra herramienta de forma. Ten esto en cuenta y espero que hayas disfrutado de esta conferencia. Pasemos a la siguiente lección. 22. Más sobre el uso de la herramienta Pluma: de hoy uno de mis alumnos me pidió que creara alguna conferencia más detallada sobre herramientas Pen. hoy vamos a explorar más sobre la herramienta Pen y al final vamos a crear algo como esta forma de ojo. Se puede ver en la pantalla. Creo que te voy a mostrar algunas de las técnicas de cómo crear curvas y cómo crear diferentes formas usando tu herramienta Pluma. Empecemos. En primer lugar vamos a seleccionar nuestra herramienta Pluma presiona “P” en el teclado, para que tu herramienta Pluma esté seleccionada. Puedes ver en la parte superior que tienes dos opciones; Forma y Ruta. Si seleccionas la Forma, siempre que intentes crear un trazado en modo forma, podrás ver que va a ser una forma completa como esta y forma cerrada. Lo que estoy haciendo es que solo estoy dando clic, y luego estoy dando clic atrás en el primer punto donde empecé y se va a encerrar de forma. Esta es una forma cerrada. Si quieres algo como esto, forma cerrada, vas a seleccionar esta primera opción Forma. Si solo quieres un camino, entonces no debes seleccionar esta Forma. Si solo quieres algunas líneas o tal vez algunas flechas no la necesitamos. Voy a presionar sobre la herramienta Pluma y el camino y voy a dibujar un camino por aquí así. Haga clic y arrastre en la dirección donde desee que siga el camino. En esta dirección significa que voy a ir en esta dirección. Se puede ver cómo calcula mi curva de acuerdo a mi dirección. Por este lado no le he dado ninguna dirección, por lo que va a ser muy afilada. No es redondeado. Si quieres que sea redondeado, vas a esta Herramienta Convertir Punto, pulsa aquí y arrastra fuera. Verás dos asas a ambos lados y podrás arrastrarlas así. Si quieres que esté alineado, debes presionar la tecla Mayús, así. He creado este camino curvo. No veo ningún camino una vez que hago clic en otro lugar. Lo que voy a hacer es que voy a habilitar mis caminos por aquí así y se puede ver, está dentro de esta capa? Sí. Está dentro de esta capa. Eliminemos este. Tengo este camino. Vamos a crear uno nuevo porque se ha fusionado con mi último camino. Voy a crear uno nuevo por aquí. Tan sólo un camino rápido como este. Sólo una ola. Si quiero una ruta acariciada como esta, primero voy a crear una nueva capa luego presiona A, haz clic derecho y puedes ver que tienes Fill Path y Trayectoria de trazo. Da clic en el “Trayectoria de trazo” y si quieres simular presión, te diré más adelante qué significa. En realidad, simula cómo funciona la presión del cepillo. Si hacemos click en él, puedes ver por aquí. Se trata de una pincelada con menor presión en el arranque y al final. Realmente te muestra igual que un pincel. Si no quieres un trazo de pincel, puedes hacer clic aquí, primero seleccionar esta capa y puedes hacer clic con el botón derecho y Trayectoria de trazo, y puedes desactivarlo. Se puede ver que tengo una línea consistente o se puede decir camino. No me está mostrando ningún ángulo o se puede decir que no tengo una presión aplicada, por lo que es sólo una línea consistente. Es así como se crea una ola. El punto principal por aquí es que cuando estás usando la herramienta Pluma, este es el primer clic. Cuando vas a hacer el segundo clic, necesitas decirle a Photoshop a dónde quieres ir. Se quiere ir en esta dirección o en esta dirección. Si hago clic aquí, se puede ver cómo calcula que voy a ir en esta dirección. Si le digo que voy a ir en esta dirección, entonces se va a calcular así. Se puede ver que esto es un poco hacia arriba y esto es un poco más inclinado. En este punto, si no le digo que vamos a ir de esta manera o de esta manera, será muy empinada. Si quieres una curva muy empinada como esta, solo un ángulo, ángulo de 90 grados o 80 grados, no debes decirle a Photoshop que vas a ir en esta dirección. No des indicaciones y será empinada. Es así como construimos formas. Uno es curvo, otro no es curvo. Es así como creamos formas y caminos. Vamos a crear ese iPath. Creo que es más que suficiente. Déjame explicarte una más por aquí. Un ejemplo más. Voy a crear un ejemplo más por aquí, así por aquí, así por aquí, y así. Se puede ver que no tengo curvas por aquí. Si quiero las curvas, debería ir a esta Herramienta Convertir Punto y dar click aquí y arrastrar. Tendrá asas por aquí y puede crear curvas. Ahora, lo que voy a hacer es si puedes dar click en “A” y puedes dar click en esta Herramienta de Selección Directa. Se puede seleccionar cualquiera de estos puntos de anclaje y tiene dos asas. Si intentas arrastrar un mango como este, puedes hacerlo de forma independiente. Hemos seleccionado justo este y podemos tener lo que nos guste. También puedes ajustar este ángulo por aquí, así. Además, se puede mover esto hacia arriba o hacia abajo. Se puede ver este punto de anclaje. Estoy usando teclas de desplazamiento y flecha para moverlo hacia arriba y hacia abajo. También puedes arrastrarlo hacia arriba y hacia abajo donde quieras. Es así como controlas estos puntos de anclaje y estos son sus asas. Si quieres el mango, puedes controlarlos así, puede ser así. Es así como controlas estas formas y trazados de herramientas de lápiz. Esta es la herramienta de selección de caminos. Si seleccionas en esto, seleccionará todos los puntos de anclaje en esta ruta. Puedes moverlo por ahí tal vez así, o por aquí o por aquí. Además, seleccionas este y haces clic derecho y verás que estos hacen selección. Si seleccionas en esto, seleccionará toda la forma en lugar de solo la línea. Asegúrate de que cuando estés seleccionando, tratando de tener alguna pincelada en esta capa, debes tener una capa en este tablero de arte. Crea primero una nueva capa, luego haz clic con el botón derecho sobre ella, y verás una subtrayectoria de trazo o lo que sea. Se va a acariciarlo. Ahora, si queremos crear algo como esto, sólo necesitamos forma de ojo aquí así. Voy a crear un nuevo documento por aquí, y vamos a crear esta forma de ojo. Es ejercicio muy fácil. Voy a dar click aquí. A continuación, voy a dar clic aquí, arrastrar. Nosotros vamos en esta dirección. Presiona Shift si quieres alinearlo así, entonces voy a dar clic aquí, luego por aquí, así y luego por aquí. Se puede ver esta parte superior y la inferior no están alineadas. Lo que voy a hacer es que voy a seleccionar esta herramienta de selección, y voy a seleccionar esta y moverla así con mis teclas de flecha, y tal vez necesito un poco de ojo más pequeño, está muy abierto o tal vez ojo grande. Necesito algo como esto. A lo mejor necesito convertirlo a las formas. Voy a presionar Shape. No sé qué pasó. A lo mejor deberíamos seguir adelante y volver a intentarlo porque habíamos seleccionado. Hay otra forma si quieres llenar esta capa, puedes seleccionar A y presionar Ok y hacer selección así, y puedes pulsar G, Shift G para el color del suelo. Puedo seleccionar este color, tal vez éste. Es lo que está pasando por aquí, he invertido selección. Lo que voy a hacer es que lo voy a invertir. Simplemente seleccionar este ojo está bien. Presioné Control Shift I para invertir la selección y estoy dando click aquí. Mi sección de ojos está completa. Voy a darle algo de estilo de capa. No la sombra gota, voy a dar una sombra interior. Cincuenta por ciento multiplica la distancia que quieras, y luego algo así. Entonces vamos a crear unos eclipses en medio así. Cambia el color a lo que quieras, tal vez este, y luego puedes Controlar G y duplicar esta capa. Nosotros lo vamos a duplicar así. Vamos a crear dos más así. Creo que esto es más que suficiente. Si quieres más capas, puedes crearlas tantas como quieras, así. A lo mejor puedes tener algún otro color dentro del ojo. Es así como creas formas, cómo le dices a Photoshop que en qué dirección vas. Puede seleccionar manejadores personalizados y áreas personalizadas incluso si desea comenzar con una forma. Si tan solo dibujas eclipse por aquí, puedes ver que he dibujado un eclipse. Si presionas A, podrás ver todos los puntos de anclaje. Si quieres eliminar a alguien, si quieres cambiar a alguien, como yo quiero arrastrarlo por aquí así. Voy a dar clic en “Sí”, y si lo mueves así, presiona Shift A para ir a la siguiente herramienta, me va a gustar esto. puede ver que es el inicio del icono. O puedes ver, el icono que creamos de un perfil de usuario, es el jefe del perfil de usuario. Si quieres más así, puedes seguir adelante y presionar A y podemos hacerlo un poco más así, lugar de solo un encabezado ovalado [inaudible] 100 en la parte superior. Entonces, podemos dibujar otra forma a partir de aquí. Necesitamos una forma, así que voy a dar click aquí así. No estoy usando ninguna rejilla, así que por eso está sucediendo. No tengo ningún cálculo como se va a ir. Normalmente cuando diseñas algunos iconos, enciendes tu cuadrícula así. Es Control y registro de cotización en tu pizarra. Cotización simple y cotización doble es solo la siguiente clave de tu punto y coma. Enciendes tu cuadrícula, y cuando dibujas, dibujas de acuerdo a tu cuadrícula. Voy a eliminar toda esta forma, y vamos a dibujar de acuerdo a esta cuadrícula. Empecemos desde aquí. Voy a ir así a este punto, y voy a ir por aquí. Entonces esto va a ser 1, 2, 3, 4, 5, 6, 7, supongo. 1 ,2, 3, 4, 5, 6, 7. Creo que tal vez necesitamos ir por aquí así, y el mismo lugar por aquí, así, y de vuelta por aquí. Ahora puedes ver que es de la misma forma, pero tiene más precisión. Necesito cerrar esta forma así. Ya puedes ver, puedo seguir adelante y cambiar el color de la cabeza así, y hacerlo por encima de esta forma. Se puede ver cómo he creado estos dos iconos. Si quieres moverlo arriba un poco más así o así. Todo esto se trata de cómo usar tu herramienta de lápiz para crear iconos. He creado dos iconos. Uno es este ojo, y el otro es este perfil, o lo llamo el tipo alienígena. No sé qué es. Vayamos a la siguiente lección. 23. Alineación en Photoshop: En esta lección, voy a hablar de alineaciones y cómo las vamos a utilizar en nuestro proceso de diseño de interfaz de usuario. Empecemos. Ya he poblado mi lienzo con tres formas. Déjame mostrarte cómo los vamos a alinear y cómo usar la herramienta de alineación. Ahora, en primer lugar, a veces tenemos que alinearlos horizontalmente y a veces verticalmente, o a veces usamos grupos para alinear todos estos objetos. Para que funcione la herramienta de alineación, necesitamos básicamente al menos dos objetos o dos capas. En ocasiones solo tenemos una capa así que déjame mostrarte cómo alinearla. Si quiero alinearlo en medio de nuestro lienzo, voy a seleccionar esta capa desde aquí, el panel de capas y luego voy a presionar Control+A. Puedes ver todo mi lienzo está seleccionado. Ahora tengo dos objetos. Uno es mi lienzo y otro es esta capa. Ahora los voy a alinear usando mi tecla de acceso directo, que utilicé en nuestra última conferencia, que fueron atajos personalizados. Nosotros lo vamos a alinear horizontalmente primero, Control, Alt, y H. Ahora se puede ver que se posiciona horizontalmente en la selección, esta selección de lienzo. Ahora lo voy a alinear verticalmente, así que voy a presionar Alt, Control, y V. Ahora puedes ver que se ha alineado verticalmente dentro de este lienzo y horizontalmente también, así que está en el medio perfecto. Ahora bien, si tengo dos objetos como este. Ahora, si quiero alinearlos a ambos, voy a seleccionar a ambos y luego voy a presionar, así que necesito estar en la herramienta de movimiento. Presione V o mueva herramienta desde aquí. Ahora puedes ver estas opciones de alineación en la parte superior, están habilitadas. Puedes alinearlos horizontalmente así y verticalmente así. Se posicionan uno con respecto al otro. Ya te dije que necesitamos dos objetos para alinearlos. Se están posicionando uno con respecto al otro. Si quiero alinearlos con respecto al lienzo, tengo que seleccionar el lienzo también. En este momento solo estoy explicando cómo funciona esta herramienta. Déjame mostrarte. Ahora los voy a seleccionar a ambos y si presiono este alinear arriba, se van a alinear en la posición superior. Alinear fondo hará lo mismo. Ahora, una cosa más. Esto es alinear a la izquierda y alinear a la derecha. Alinear a la derecha. Ahora, llegando a estas otras opciones de alineación que están ocultas en este momento, necesitan básicamente tres objetos. Si hago clic en todos ellos así, primero necesito alinearlos así. Deberían estar en una línea. Por ejemplo, son así. Ahora bien, si quiero que todos estos objetos o capas tengan el mismo espacio entre ellos, voy a presionar esto distribuir centros horizontales y ya puedes ver ahora están alineados perfectamente y tienen mismos espacios entre ellos. ¿ Y si quiero alinearlos en el medio, de la misma manera con respecto al lienzo? Primero voy a crear un grupo de todas estas tres capas. Déjenme nombrarlo grupo de capas. Voy a seleccionar esta capa de fondo. Puedo presionar Alt, Control, y H y luego V. Ahora ya puedes ver, todos ellos están alineados con respecto al lienzo en el centro perfecto. Estas son algunas de las técnicas que normalmente usamos en nuestro diseño de interfaz de usuario como seleccionar el lienzo, o seleccionar esta capa de fondo para alinear todas estas. En ocasiones tenemos lineamientos por aquí, por ejemplo, así y quiero alinear esto en medio de estas guías. Lo que voy a hacer es seleccionar esta capa y luego voy a presionar M o Rectangular Marquee Tool y voy a arrastrar por aquí y luego la voy a alinear horizontalmente. Ahora puedes ver, y esta es la mayoría de las veces las usamos en nuestras rejillas cuando tenemos diferentes rejillas de alineación. Asegúrate de conocer todos estos trucos para alinearte con esta selección, para alinear de acuerdo a este lienzo. Dos métodos entonces alinean todos estos tres objetos uno con respecto al otro. Se trata de tres alineaciones que normalmente hacemos. Ten en cuenta todas estas tres alineaciones y los estaremos usando tiempo a tiempo en las próximas clases y tal vez en mi próximo curso. Creo que todo esto se trata de alinear capas y distribuirlas. Espero que hayan aprendido algo nuevo. Pasemos a la siguiente conferencia. 24. Selecciones en Photohsop: En esta lección, vamos a ver cómo las selecciones participan en nuestro proceso de diseño de la interfaz de usuario. Vamos a empezar. Lo primero que tal vez quieras hacer aquí es, a veces, necesitamos Seleccionar Todo nuestro lienzo o Seleccionar selección alrededor de toda el área de dibujo. Para eso, voy a presionar Control A. En cuanto presione Control A, la selección alrededor de todo esto nuestra área de lienzo. Este es el primer escenario. En ocasiones, necesitamos hacer una selección alrededor de alguna capa o alrededor de alguna forma. Para eso, déjame simplemente desseleccionarlo, presione M, y haga clic una vez en el lienzo, y su selección se habrá ido. Ahora, para seleccionar esta forma, selecciónela primero desde este panel de capas y luego Controlar, y haga clic en esta miniatura de capa. Tan pronto como hagas click en esta miniatura de capa, podrás ver una selección alrededor de esta capa. Esta es otra forma en la que necesitamos una selección alrededor de alguna capa o alguna forma. Ahora bien, si quiero agregar otra selección o agregar en esta selección algunas ideas más, puedo subir aquí en la zona superior donde tengo que seleccionar esta opción Agregar a Selección. Entonces puedo arrastrar por aquí y seleccionar cualquier cosa dentro de la sección. Se puede ver ahora la selección se ha incrementado. Si quiero mover la selección, puedo ir primero a esta primera opción y luego puedo moverla. Ahora, puedes ver que he movido esta selección. En otra capa, he creado una nueva capa, y puedo llenarla con algún otro color como este. Voy a seleccionar algún otro color. Ahora, puedes ver que he usado esa selección y creado una nueva capa, y la he llenado con otro color. Es así como agregamos a las selecciones o creamos selecciones complejas como esa. Ahora bien, si quiero restar una selección o área de una selección, déjame mostrarte cómo hacerlo. En primer lugar, es necesario hacer una selección como esta. Ahora, quiero sólo el 70 por ciento de área superior de esta forma. Voy a presionar Restar de forma por aquí, seleccionar esa, y puedes arrastrar el área donde no quieras que sea seleccionada, y soltar. Se puede ver así es como hacemos o restamos de la selección. Esta es otra forma. Permítanme mostrarles esta última opción, que es la intersección. Déjame mostrarte lo que va a hacer. Básicamente se cruzará ambas selecciones y dejará el área que era común entre ellas. Es así como funciona esta intersección. La mayoría de las veces, no necesitamos esta interacción. Interacción, sólo utilizamos esta selección de sumar o restar. También hay algunas teclas de acceso directo que puedes usar para agregar o restar alguna selección de ésta. Tengo esta selección. Si quiero agregar, puedo presionar y mantener presionado Mayús en el teclado, y seguir agregando en esta selección así. Ahora bien, si quiero restar, puedo presionar la tecla Alt u Opción en tu teclado y puedes quitar áreas de tu selección. Turno para agregar selección y tecla Alt u Opción para eliminar una selección o quitar partes de su selección. En ocasiones también necesitamos algunas de las selecciones irregulares, por lo que utilizamos esta herramienta Lasso. Si seleccionas este polígono o herramienta Lasso, puedes ver cómo funciona básicamente esto. Es así. Solo tienes que hacer clic y combinar los puntos inicial y final, y hace una selección. Si quiero eliminar, por ejemplo, la esquina inferior derecha de esta forma, primero voy a hacer clic derecho y rasterizar esta capa. Debido a que es una capa de forma, no se puede restar así con la selección. Entonces voy a seleccionar mi herramienta Lasso poligonal. Voy a quitar esta zona y presionar “Eliminar”. Asegúrate de haber seleccionado la capa correcta, lo contrario no funcionará. He quitado esta porción de esta capa o esta forma. Ya puedes ver cómo se ve ahora. Estas son diferentes formas en las que usamos las selecciones y las usamos para restar, o agregar, o hacer selecciones diferentes como esa. En ocasiones necesitamos selección para dibujar lineamientos. Si hago una selección como esta y puedo arrastrar una pauta desde aquí, se ajustará automáticamente a su borde. Voy a dejarlo así, así y así. Esta es otra forma en la que nuestras selecciones son muy útiles en el diseño de la interfaz de usuario. Supongo que todo se trata de selecciones y su uso en el diseño de la interfaz de usuario. Creo que casi he discutido todos los escenarios en los que necesitamos estas selecciones. Pasemos a la siguiente conferencia. 25. Atajos comunes de Photoshop: En esta lección les voy a compartir con ustedes algunos de los atajos de Photoshop estaremos usando mucho tiempo. Ya he poblado mi lienzo básicamente, ya que esta es una capa de texto y estas son herramientas de forma. Un atajo común es esta herramienta V, que es herramienta de movimiento. Se puede ver por aquí. Siempre que quiera mover parte de la capa, voy a presionar este V. La capa que se va a mover será la que he seleccionado de este panel de capas. Asegúrate de haber seleccionado la capa correcta por aquí. Para seleccionar la capa puedes Control Haz clic en ella, o puedes configurar este auto select. Si tienes esta configuración de selección automática, solo puedes hacer clic en la capa y se seleccionará así. Se puede ver en el panel de capas tan pronto como selecciono cualquier otra capa, simplemente se mueve a esa. Puedes usar ambas opciones. Puedes usar auto select o puedes deseleccionarlo y usar la selección Control Plus, lo cual es más preciso en mi opinión. Ahora, una es que queremos mover estos por ahí. Segundo es que, si quiero duplicar o replicar una de las capas, así que voy a replicar esta capa y voy a presionar Control J en mi teclado. Se puede ver que se convierte y se replica en otra capa rectangular del mismo tamaño. El segundo es que, si quiero agrupar todos estos que estaremos usando mucho tiempo agrupando elementos. Toma el control y haz clic en todos estos, por lo que estos serán seleccionados. Presiona Control G para agruparlos. Ahora están en un grupo y si trato de moverlos, se estarán moviendo juntos. segundo problema es que, si tienes selección automática, selecciónela aquí y restablezca a capa. Entonces si tu grupo está seleccionado y haces clic aquí para moverlo, puedes ver cuál es el problema. Básicamente eres auto seleccionando esta capa dentro de este grupo. Este es otro problema. Si algo sucede así, tienes que asegurarte de que has seleccionado grupo desde aquí. Entonces puedes moverte así. A veces es mejor revisar este auto select. De la misma manera que lo duplicamos o replicamos nuestras capas, también podemos replicar un grupo. Se puede ver ahora grupo está resaltado. Puedo presionar Control G, que es el mismo comando que replicar una capa. Yo he replicado el grupo. Hay dos grupos. Este es uno de los atajos muy comunes que estaremos usando mucho tiempo. Ahora si quiero hacer una selección alrededor de cualquiera del elemento o cualquier capa. Para que esto suceda, vamos a presionar Control en mi teclado y si paso el ratón sobre alguna de las capas, se está volviendo a este cursor de hormigas marchantes. Si hago clic en él, puedes ver que esta herramienta Eclipse ha seleccionado, esta forma ha sido seleccionada. Ahora si quiero mover la selección alrededor, tengo que presionar la tecla M en el teclado o este es básicamente el atajo para la herramienta de marquesina rectangular. Si tienes seleccionada la herramienta de marquesina, asegúrate de tener esta primera opción, la segunda y tercera opciones están combinando y restando la selección. Primera opción seleccionada y puedes moverla así. A veces podríamos necesitar trazar pautas a su alrededor así. Necesito esta selección para dibujar algunos lineamientos. Entonces voy a anular la selección haciendo clic una vez así. Estos son algunos atajos, luego algunos de los atajos que están relacionados con alinear pocas de las capas, que son muy necesarios. Tenemos que usarlos mucho. Déjame simplemente mover algunas capas alrededor y cambiar la forma. Ahora puedes ver que acabo de reducirla. Lo que en realidad presioné es, presioné Control T para escalarlo, que es una tecla de acceso directo para escalar o girar objetos. Presioné Control T y agarro una de las asas y simplemente lo apreté así. Si quieres escalarlos en proporción, entonces puedes seleccionar Mayús en tu teclado. Si selecciono uno de estos mangos, puedes ver que estoy presionando Shift por lo que se mueve en proporción. Se está escalando en proporción. Si seleccionas Alt y Shift y luego lo escalas o lo escalas hacia arriba o hacia abajo puedes ver el efecto. Ha cambiado la escala de un lado a una ubicación central. En este momento se está escalando desde todo alrededor de la forma, desde todos los lados por igual. Esto es presionar Alt y Shift en el teclado y luego arrastrarlo así. Estos son los atajos para escalar. Si desea habilitar más atajos o necesita hacer algo más, puede hacer clic derecho sobre él mientras estos manejadores están activos. Puedes usar estos voltear horizontal, voltear vertical, girar 180, o sesgar, distorsionar, y algo así como estas opciones más. Pero la mayoría de las veces quizá no los estemos usando. Ahora tengo dos capas así y quiero alinearlas desde arriba, voy a seleccionar ambas. Esta capa, y esta capa, puedes seleccionarlas desde aquí pulsando Control. Voy a usar este top one para alinearlos. Básicamente no usamos esta línea superior la mayor parte del tiempo, pero usamos las teclas de acceso directo si recuerdas, configuré en mi tutorial de atajos personalizados, que es un poco antes en esta serie de lecciones. Ahora los dos sin seleccionar voy a seleccionar uno de ellos y lo voy a mover. Ahora si los selecciono y quiero que estén en el centro o alineados horizontalmente, voy a presionar “Control”, “Alt”, y “H”. Ahora puedes ver que ambos están alineados en el centro de este lienzo o tablero de arte. Ahora si quiero mover uno de ellos, voy a seleccionar la capa desde aquí, y puedo moverla. Si quieres que se muevan en una línea, puedes pulsar “Shift” y puedes ver ahora que está manteniendo su lugar. No se mueve en una posición aleatoria. Presiona “Shift” mientras arrastras hacia arriba o hacia abajo, que mantenga su ubicación actual o si está en el medio, permanecerá en el medio de tu lienzo. Esta es una opción. Ahora ya puedes ver si quiero que estén en los centros verticales, voy a agruparlos. Ahora puedes ver que no tengo ninguna capa de fondo por aquí. Todas estas alineaciones funcionan con dos objetos. Debo tener otro objeto. Lo que voy a hacer es presionar “Control A” para seleccionar todo el lienzo, y ahora voy a alinear este grupo. Se puede ver en cuanto seleccioné esto, las opciones de alineación superior están habilitadas. Voy a presionar “Control”, “Alt”, y “V”. Ahora puedes ver que están alineados verticalmente. Voy a esconderlos, para que puedas verlos con claridad. Ambos están alineados verticalmente en medio de este tablero de arte. Ahora voy a desseleccionarlo presionando M y haciendo clic una vez por aquí. Estos son los atajos comunes que vamos a utilizar la mayor parte del tiempo. Ahora algunos de los atajos los puedes aprender desde aquí, solo puedes hacer clic aquí y puedes ver Lasso Tool. Esto también se utiliza para la selección. Ya puedes ver vamos a usar algunas de estas como esta herramienta Pluma, Herramienta de texto, y luego esta Herramienta de selección de ruta, que es una tecla de acceso directo, estas Herramientas de forma que las vamos a utilizar mucho, Herramienta rectangular para usted. Estos son todos los atajos. V para esta Herramienta Mover, volviendo a este cursor. Estos son los atajos que estaremos usando mucho tiempo. Ahora un atajo más. Lo configuramos en nuestra lección de atajo personalizada de Photoshop. Ahora lo vamos a usar. Por ejemplo, si quiero convertir estas dos capas en un objeto inteligente. Discutiré el objeto inteligente más adelante, así que no te confundas ni te preocupes por ello. Básicamente son colores un poco opuestos y están vibrando. Ahora están bien para ir. Ahora estas son las dos capas que voy a hacer un objeto inteligente con las dos. Voy a seleccionarlos a ambos. Voy a presionar “Alt F5" por objeto inteligente. Era nuestra tecla de acceso directo. Ahora puedes ver su icono ha sido cambiado por aquí, este icono en miniatura. Puedes aumentar el tamaño de la miniatura desde aquí yendo a Opciones de panel y puedes aumentar el tamaño así. Ahora puedes ver que he aumentado el tamaño, pero cuando diseñamos diseños de interfaz de usuario, tenemos muchas capas, tal vez más de 100 capas. No usamos tamaño de miniatura demasiado grande. Podríamos usar este o tal vez éste. Ahora algunas de las opciones extra las puedes obtener a partir de aquí, haciendo clic derecho en cualquiera de las capas como estas; Exportar rápido como PNG, Exportar como, Convertir a objeto inteligente. Pero prefiero usar algunos de los atajos de teclado que son muy útiles y los usamos mucho. Queda uno más el cual configuramos en nuestros atajos personalizados, que era Tile All Vertical. Ahora, ¿cómo lo vamos a usar? Debemos tener uno o dos archivos abiertos para Photoshop. Voy a abrir un nuevo archivo, un nuevo tablero de arte por aquí. Básicamente ahora estoy trabajando en dos tableros de arte. Si me cambio de aquí a aquí, no puedo ver lo que tenía en este. Ahora para verlos con claridad o arrastrar un objeto de un lienzo a otro, voy a usar Alt, Control, y F10, y se puede ver cómo el Photoshop los ha alicatado verticalmente. Ahora si hago clic en este tablero de arte, se puede ver esta capa o este objeto inteligente ha sido seleccionado. Si quiero arrastrarlo por aquí, puedo arrastrarlo y pegarlo. Ahora se puede ver que se ha copiado en el siguiente tablero de arte. Pero el problema es que ha perdido su ubicación actual, y esta pizarra de arte es donde estaba. Esa ubicación estaba un poco arriba. Ahora si quiero mantener la misma ubicación, voy a presionar “Shift” mientras lo arrastra. Presione “Shift” mientras lo arrastra y suéltelo. Ahora se puede ver que ha alcanzado su posición actual. Ahora es así como trabajamos en múltiples lienzos, y si quiero arrastrar algunas imágenes o algo de un lienzo o un tablero de arte a otro. Ahora supongo que casi he terminado estas teclas de acceso directo. Una más, pulsa Control plus para acercar y pulsa Control menos para alejar. Por ejemplo, he hecho zoom en mi diseño y quiero arrastrarlo un poco a la derecha o a la izquierda. Si trato de arrastrar con el cursor del ratón, se va a mover esta capa o objeto inteligente alrededor. No quiero esto, quiero llegar aquí, hacer visible esta zona. Voy a presionar la barra espaciadora y seguir presionándola y luego la voy a arrastrar así. Ahora puedes ver me he movido a la esquina superior izquierda de mi tablero de arte. Es así a veces como nos movemos cuando hemos hecho zoom en nuestro diseño. Esto también es muy común zoom-in, zoom-out, y luego mueve tu lienzo alrededor. Ahora supongo que la mayoría de estos atajos han sido discutidos. Supongo que estamos listos para pasar a la siguiente conferencia. 26. Uso de máscaras de capa en Photoshop: En esta lección, voy a hablar de Máscara de Capa. La máscara de capa es otra técnica para ocultar diferentes porciones de los elementos de diseño de tu interfaz de usuario, o en ocasiones áreas de héroes o imágenes utilizadas en áreas de héroes de sitios web. Empecemos a aprenderlo, ¿de acuerdo? Ya he abierto una imagen por aquí en Photoshop. Ahora voy a hacer doble clic en la “Capa de fondo” para que sea Sencilla Capa. Voy a dar clic en este pequeño ícono por aquí es “Añadir”, si pasas el cursor sobre él se lee como Añadir máscara de capa. Lo que hace es que tan pronto como actives esta Máscara de Capa asegúrate de haber hecho clic en ella. Entonces éste está activo, no éste. Se puede ver que hay patillas rectangulares arriba. Por lo que debería estar activo por aquí así. Entonces puedes agarrar tu herramienta Pincel o cualquier otra herramienta y puedes empezar a pintar por aquí. Se puede ver mi color primario está establecido en “Negro” y mi color de fondo color de primer plano es “Negro” y el color de fondo es “Blanco”. Ahora mismo estoy pintando con negro. Sea cual sea la zona que pintaré con negro, básicamente, solo ten en cuenta que el negro lo ocultará todo. Por lo que la oscuridad esconde todo y el blanco lo muestra todo. Voy a establecer un poco más el tamaño de mi pincel. Estoy presionando “Teclas de soporte” en el teclado. Se trata de un atajo para aumentar y disminuir el tamaño de la herramienta de pincel. De acuerdo, ahora, una cosa más hay que ver que esta opacidad se establece en “70 por ciento”. Entonces si quieres esconderte totalmente, entonces tienes que ponerlo en un “100 Por ciento”. Entonces cada vez que me cepillé por aquí, lo ocultará todo. Ahora una cosa más, si quiero ver qué punta de pincel estoy usando, tengo que pinchar aquí. Se puede ver que no es un cepillo duro, es un cepillo suave que tiene esquinas emplumadas. Por lo que vamos a “Seleccionar” cualquiera de este duro. Por lo que ya puedes ver la diferencia. De acuerdo, vamos a limpiar toda esta área por aquí, silla también. De acuerdo, no voy a ir en detalle de conseguir una imagen totalmente lista para tu área de héroe o edición de imágenes y limpiarla fondos. Pero esta es la técnica básica. Puedes Acercar y ver diferentes áreas y puedes Aumentar o Disminuir el tamaño de tu pincel para obtener más precisión como esta. Una cosa más es que al usar máscara de capa no es destructiva. Por ejemplo, si acabo de dar clic accidentalmente por aquí y elimino esta zona y la quiero de vuelta, entonces solo voy a cambiar estos colores y lo pintaré con blanco. Por lo que puedes ver ahora mi silla está de vuelta. Puedo despejar imagen así. Puedes pulsar “X” para desplazar los colores. Se puede ver por aquí mientras presiono “X”, se están cambiando entre sí. Por lo que voy a volver a dar clic en el “Color Negro” y seleccionarlo y pintarlo así. Esta es una técnica muy básica para limpiar imágenes así. Esto se llama básicamente máscara de capa. Puedes ver tu imagen deshabilitando la máscara de capa y puedes ver toda la imagen así y puedes Habilitarla de nuevo. Esto realmente nos ayuda algunas veces en las que tenemos que limpiar imágenes u ocultar poca parte de las imágenes. También podemos hacer algo así como voy a Seleccionar esta zona, por ejemplo, esta hasta aquí. Puedo Seleccionar mi “Herramienta de cubo de pintura” y solo hago clic aquí y escondo todo. Entonces básicamente acabo de caer el color negro por aquí. Por lo que a veces podríamos necesitar hacer algo como esto para ocultar el área rectangular o restar alguna área de alguna imagen o algo así. Entonces usamos técnica rápida. No agarramos nuestra herramienta de pincel y seguimos pintando y pintando. Hacemos una selección y recogemos nuestra Herramienta de Cubo de Pintura y dejamos caer el color negro por aquí. Entonces supongo que todo esto se trata de Máscara de Capa y espero verte en la próxima conferencia. 27. Uso de máscara de recorte: En esta lección, voy a hablar de Máscara de Recorte. Veamos qué es la Máscara de Recorte y cómo la usamos en nuestro proceso de carga de trabajo de Diseño de UI. Entonces básicamente, la Máscara de Recorte funciona igual que una Máscara de Capa. Por lo que su propósito es básicamente ocultar algunas porciones de capa o una imagen. Permítanme mostrarles cómo funciona con un ejemplo. He tomado esta herramienta Eclipse, presiona “U”, y he dibujado este eclipse presionando Shift para mantenerlo en proporción. Voy a centro-línea así. Ahora, voy a traer alguna imagen de stock gratis sólo para la demostración. Por ejemplo, esta imagen, voy a simplemente arrastrarla a Photoshop así. Básicamente, ahora es un objeto inteligente, así que voy a redimensionarlo, presiona “Enter”. Ahora, esta imagen está en la parte superior del eclipse, el eclipse está detrás de esta capa. Entonces lo que básicamente hace la Máscara de Recorte, contendrá esta imagen en este eclipse. ¿ Cómo lo vamos a hacer? Presiona “Alt” en tu teclado y mueve el cursor por aquí entre estas dos capas. Entonces el de abajo es básicamente el contenedor y el de arriba es básicamente la parte que queremos mostrar. Entonces, entre el contenedor y la capa base, vamos a sostener “Alt” y hacer clic una vez. Ahora se puede ver que está mostrando sólo la porción de esa imagen, que básicamente está dentro de este eclipse. Para que pueda mover, arrastrar y mover esto fácilmente , y así es como creamos diferentes imágenes de avatar y diferentes imágenes de perfil en nuestros sitios web en nuestro diseño de interfaz de usuario. Entonces básicamente herramienta Eclipse, podemos usar cualquier forma por aquí. Podemos utilizar esta herramienta en esta técnica de Máscara de recorte de muchas maneras. Espero que hayan disfrutado de mi lección y hayan aprendido algo nuevo. Pasemos a la siguiente conferencia. 28. Ejercicio de destilde → máscara de recorte: Hola a todos y bienvenidos a mi nuevo reto. Básicamente es un reto de práctica para la máscara de recorte. Solo he usado máscara de recorte en este ejemplo, así que intenta crear el mismo efecto con máscara de recorte. Déjame darte algunas insinuaciones. Esta es básicamente una imagen dentro de una máscara de recorte, y este color negro que puedes ver, es otra forma detrás de ella. Ahora se trata de fuente Open Sans y este es un botón y esta área también está recortada. Trata de producir algo como esto con máscara de recorte, y publicaré la solución en la próxima conferencia. Nos vemos pronto. 29. Uso de objetos inteligentes en Photoshop: En esta conferencia, voy a mostrarles el uso de objetos inteligentes, y cómo lo vamos a utilizar en nuestro diseño de interfaz de usuario, y qué beneficios puede proporcionarnos con diseño de interfaz de usuario. Permítanme empezar por crear primero el botón de símbolo. Si hago un botón como este, déjame cambiar su color a azul para que sea fácilmente visible. Ahora, voy a presionar Shift. Ahora bien, este es un botón simple. Voy a seleccionar a ambos para alinearse. Ahora, una forma de agruparlo, vamos a presionar Control G para agruparlo y moverlo. También podemos duplicarlo pulsando la tecla Alt y moverlo. Tenemos dos grupos duplicados, y básicamente son iguales. ¿ Y si quiero que ambos cambien simultáneamente? Si tengo tres o cuatro botones y quiero cambiar su color, tengo que ir a cada capa y cambiar su color una y otra vez. Para evitar esto en nuestro diseño de interfaz de usuario, donde podríamos tener simplemente un controlador primario o un botón primario el cual se duplicará en toda nuestra interfaz de interfaz de usuario, para facilitarlo, podemos convertir este grupo, haga clic derecho sobre aquí en el panel Capas y Convertir a objeto inteligente o utilizar Alt F5, que era nuestra tecla de método abreviado personalizada. Básicamente, ahora, se ha convertido en un objeto inteligente. Ahora, ¿cómo lo vamos a utilizar en nuestro diseño de interfaz de usuario? En primer lugar, lo vamos a duplicar tres o cuatro veces. Se te ocurre la idea cuando cambio algo. Si quiero cambiar todos estos cuatro botones, que están en mi, por ejemplo, diseño web o aplicación web en diferentes ubicaciones, haré clic en cualquiera, seleccionaré a cualquiera, haga doble clic en este Panel de capas, y ahora puedes ver que tengo las dos capas por aquí. Ahora bien, si quiero cambiar algo, por ejemplo, cambio su color a quizá amarillo o naranja, o azul oscuro, azul opaco, voy a presionar “OK”, y lo voy a cerrar y guardarlo, “Sí”. Ahora, todos los objetos inteligentes copiados o duplicados tienen el mismo color del botón. Esta es una forma de administrar nuestros botones donde tenemos cuatro o cinco, o tal vez diferentes mismos niveles de botones. Si los botones son iguales, podemos usar este objeto inteligente para manejarlos fácilmente. Otro ejemplo o uso de estos objetos inteligentes es, por ejemplo, tenemos caja de contenido como ésta y tenemos texto escrito en ella, por ejemplo, “Soy una caja de contenido”, algo así. Déjame agregarle algo más, así. Ahora, puedes ver que se está convirtiendo en una caja de contenido. Voy a agruparlos y voy a crear un objeto inteligente presionando Alt y cinco. Ahora, es un objeto inteligente. Ahora bien, si lo duplique, tal vez tres veces así, déjame simplemente borrar todas las demás para que no nos confundamos. Ahora, lo he duplicado en tres cajas de contenido diferentes. Podría haber visto este patrón en muchos sitios web donde tenemos tres cajas destacadas o tres características de nuestro producto o algo así. La mayoría de las veces, solo tienen un elemento como icono cambiando en todos ellos y el patrón es casi el mismo. Los colores y los tamaños de fuente, todo es igual. Sólo para ilustrar ejemplo: si quiero cambiar el contenido de este o color de éste, voy a seleccionar éste y simplemente cambiar su color a amarillo, o tal vez gris, o gris claro. Voy a presionar “OK”, y “Sí”, guárdelo. Ahí vamos. Este es otro uso de objetos inteligentes. Normalmente, no se usa tal vez por el problema de que no podemos tener contenido diferente en los objetos inteligentes. Te aconsejo que no uses texto u otro contenido, que se va a cambiar en los objetos inteligentes. Si necesitas crear un objeto inteligente, solo tienes que mantener las capas y estilos de fondo, y eliminar el texto para que el contenido se pueda cambiar en todos ellos. Ahora bien, están bien para irse. Supongo que entiendes la idea de que no usan ningún elemento o capa que va a ser diferente en otros objetos. Un uso es este. Otra cosa es que también puedes crear una copia de este objeto pulsando el botón derecho y “Nuevo objeto inteligente vía Copiar”. Cuando se crea un nuevo objeto inteligente a través de la copia, no se adjuntan entre sí. Ellos son es irrelativo. Si cambias de color por aquí, como este, se cambiará sólo en éste. Todos los tres, están vinculados, pero éste es diferente porque fue creado por este Nuevo Objeto Inteligente vía Copy. Creamos otra copia y fue un nuevo objeto inteligente, por lo que no están vinculados. Todo esto se trata de objetos inteligentes y cómo los usamos en nuestro diseño de interfaz de usuario. Nunca, nunca ponga su contenido que sea editable, o cambie, o vaya a ser cambiado en todos los demás objetos inteligentes. Basta con mantener los fondos, y los colores de fondo y estilos o sombras en este objetos inteligentes. Son útiles y puedes usarlos en tus proyectos de diseño de IU. Todo esto se trata de objetos inteligentes. Espero que hayan aprendido algo nuevo. Pasemos a la siguiente conferencia. 30. Objetos inteligentes en Photoshop: En esta lección, voy a hablar de Objetos Inteligentes Vinculados y dónde son útiles. Normalmente, cuando usamos Linked Smart Objects, son básicamente para las aplicaciones o sitios web donde tenemos que diseñar cuatro o cinco páginas diferentes de la misma aplicación o mismo sitio web. lo que básicamente los vamos a utilizar es, por ejemplo, tengo este sitio web y estoy diseñando la página principal del mismo. Por ejemplo, solo creo un encabezado rápidamente por aquí. Tengo este archivo de cabecera y tengo diferentes enlaces por aquí sobre nosotros. Déjame matar a esta capa. Ahora, voy a usar mi herramienta de texto, presiona Shift para que no siga esta capa alrededor. Es independiente de esta capa. Haga clic una vez y aquí tenemos, sobre nosotros, después póngase en contacto con nosotros, y luego productos. Es solo un sitio web ficticio así que no te preocupes por el diseño ni por cualquier otra cosa. Simplemente para darte el concepto de cómo vamos a utilizar Linked Smart Objects en nuestros proyectos. Estos son tres enlaces. Déjame solo colocar un logo ficticio por aquí. Este es nuestro logo. Ahora, primero lo que vamos a hacer es que vamos a guardar este encabezado, todos estos enlaces, y este fondo en un Objeto Inteligente. En primer lugar, necesitas convertirlo en un Objeto Inteligente, luego necesitas convertirlo en Objetos Inteligentes Vinculados. Verás la opción convertir a vinculado. Al hacer clic en él, te dará una opción para guardar este archivo. Básicamente, lo que estamos haciendo es que estamos guardando esta porción de nuestro diseño en otro archivo para que podamos incrustarlo en todos los archivos que estamos diseñando. Si hacemos cambios en uno de ellos, se cambiará en todos ellos. Déjame mostrarte sólo con un ejemplo. Lo he guardado con el nombre Ellipse 1. Ahora voy a guardar este archivo de Photoshop. Por ejemplo, voy a guardarlo en el escritorio ahora mismo. Mi escritorio está muy desordenado, pero tienes que soportar conmigo. Lo nombramos solo de página principal. Mainpage está bien. Ahora, sólo dame un título aquí para que sepamos que es página principal. Página principal por aquí. Vamos a colorearlo de negro. Por lo que la página principal o la página maing, no importa. Ahora, voy a abrir un nuevo archivo de las mismas dimensiones y voy a colocar vinculado por aquí. Quiero colocar el mismo encabezado por aquí. Ahora este es el archivo que guardé Ellipse 1, que básicamente era el encabezado. Ahora se puede ver que se ha colocado por aquí. Puedo moverlo en la parte superior porque estaba en la parte superior, y voy a presionar “Enter”. Ahora, se puede ver que se ha importado por aquí. Si voy a guardar esto como nuestra página de productos, bien, ahora esto es básicamente página de productos. Déjame arreglar ese r. Ahora, esta es nuestra página de productos, y estas son algunas imágenes de producto. Esta es una página un poco fea, pero creo que está bien conseguir lo que va a hacer ahora. Ahora lo voy a guardar como nuestra página de productos. Durante mi diseño, pensé que debería haber cambiado este color a tal vez verde. Mi logo ha sido cambiado. Voy a guardarlo, pulsa “OK”. Ahora puedes ver que ya se ha cambiado automáticamente en el otro archivo. Pero, ¿y si estoy usando solo o solo he abierto un archivo? Estoy trabajando en la página principal y el otro archivo es, este momento, no abrir el Photoshop. Doy clic en esto, y cambio el color de fondo a azul o tal vez amarillo, o tal vez gris, o tal vez gris oscuro, un poco de gris. Voy a cambiar el color de la elipse a éste, quizá éste. Ahora lo voy a guardar y hacer clic en “Sí”. Se puede ver que se ha cambiado en este archivo el cual ya se ha abierto, es archivo mainpage.psd. Si lo cierro y luego abro mi página de productos, déjame abrir mi página de productos. Ahora puedes ver aquí tenemos el viejo diseño, no se ha actualizado. Pero puedes ver un icono amarillo por aquí en tu Elipse Linked Smart Object. Haga clic derecho en él, no en la miniatura, sino en la capa y se pueden ver las opciones: Actualizar contenido modificado o Actualizar todo el contenido modificado. Haga clic en él y ya está bien para ir. Ahora bien, esta es una característica muy bonita y ordenada de Photoshop. Puedes usarlo en el diseño de tu encabezado o en tu diseño de pie de página de tus sitios web porque normalmente permanecen igual en todas las páginas. O incluso si estás diseñando una aplicación, tienes casi los mismos fondos de encabezado o pie de página, o algunas de las capas de todos ellos. Este es básicamente el uso de Objetos Inteligentes Vinculados. Pasemos a la siguiente conferencia. 31. Uso de Comps de capas en Photoshop: hoy, vamos a aprender sobre las composiciones de capas. En este curso, me olvidé de incluir esta lección. Entonces vamos a aprender qué son las composiciones de capas y cómo las vamos a utilizar en el diseño de la interfaz de usuario. Empecemos. Qué comps de capas es, básicamente, son diferentes composiciones de capas y podemos cambiar de una a otra. Si no ves ninguna ventana Comps de capas, ve a Ventana y haz clic en Comps de capas por aquí. Esto es básicamente panel de ventana Comps de capas por aquí. Ahora, lo que vamos a hacer es que vamos a crear un solo botón con diferentes estados. Al igual que cuando pasas el cursor sobre un botón en un sitio web, cambia su color. Por lo que cada botón, cuando diseñes cualquier dato de la interfaz de usuario en diferentes estados como botón deshabilitado , y pasa el ratón, y pulsa el botón, vamos a crear tres estados. Uno es el botón simple, luego, pasa el cursor, y luego desactiva. He usado un rectángulo redondeado. Usa este color, cualquier color que quieras. Entonces, vamos a usar sólo algún texto sobre él, Botón Normal. esa manera, y luego, los vamos a alinear. Alinémoslos así. Simplemente muévelo en el medio. Los agrupa para que sean fáciles de alinear, así. Ahora, este es nuestro Botón Normal, btn-normal. Entonces, duplicar este grupo, Control G. Entonces, tenemos estado de hover. Ahora, en el estado de desplazamiento, selecciona esta capa y vamos a cambiar un poco su brillo hacia arriba, 100 por ciento, así. Se puede ver aquí está lo normal, aquí está el botón de desplazamiento. Entonces, vamos a usar el botón deshabilitado. Algunos usan los puntos y comas así. Pasa el botón del ratón estado así, y el estado normal del botón así. Ahora, vamos a usar comps de capas. Creo que olvidé darle estilo a este botón deshabilitado. Vamos a usar este color gris para botón deshabilitado, y creo que todo se ve bien. Esto está deshabilitado y esto es hover y esto es normal. Simplemente, supongo que deberíamos hacer que el botón normal sea un poco más oscuro porque no se ve muy diferente a nuestro estado de hover. Ahora, tenemos tres botones. Ahora, vamos a crear un comp de capas como este. Podemos incluir visibilidad, posición, y apariencia, tres propiedades de capas. Si cambio la posición, lo mostrará en otra comp de capas. Ahora mismo, creo que para visibilidad y apariencia son más que suficientes. Vamos a usar este es estado normal. Entonces, vamos a crear otro con el estado hover. Entonces vamos a, hover state tiene algo como esto, así que vamos a refrescarlo así. Este es nuestro estado de hover. Entonces, vamos a usar una discapacitada y este va a ser estado discapacitado. Entonces esto está deshabilitado, esto es pasar el cursor, y esto es normal. Se puede ver cada vez que cambio de una comp de capa a otra, cambia u oculta las otras dos capas. Por lo que no necesito esconderlos de aquí, el uno al otro. Es así como usaremos las composiciones de capas en el diseño de la interfaz de usuario. Podemos tener un menú desplegable así. Si alguien hace clic en nuestro menú así y luego te mostramos el desplegable. Esto es normal, y luego, esto es desplegable, algo así. Ahora, si quieres exportar tus comps de capas a diferentes archivos, también puedes ir a este archivo y exportar. Después, puedes hacer clic en este Capa Comps to Files. Ahora, puedes seleccionar el destino donde quieres exportarlos. Puedo exportarlos en el escritorio y presionar “OK”. Entonces, voy a nombrarlo botones y tipo de archivo será PSD, y presione “Ejecutar”. Todos los tres estados han sido convertidos a archivos PSD. Se puede ver por aquí Botón 000 normal, Botón 0001 estado de desplazamiento, y Botón 0002 estado desactivado. Entonces si abro esto, se puede ver que sólo tiene el estado discapacitado. Una cosa más es que Photoshop guarda con él todas las demás capas también. Así que solo asegúrate de que esto no sea lo que quieres. Creo que son innecesarios, pero aún así, no sé cuál es la lógica detrás de ella. Entonces así es como funcionan estas comps de capas y cómo exportas diferentes comps de capas a diferentes archivos PSD. Todo esto se trata de comps de capas hoy y espero que hayan disfrutado de esta conferencia. Pasemos a la siguiente lección. 32. Dominar los efectos de capa de gota: En esta lección, te voy a mostrar cómo usar tus efectos de capa Drop Shadow y cómo crear botones con él. Entonces voy a crear un rectángulo redondeado con radio de esquina de cuatro píxeles. Voy a dibujar uno grande para que puedas ver fácilmente los efectos. Voy a seleccionar este color verde. Ahora, he seleccionado esta capa. Voy a ir a Layer, y luego a Layer Effects, o puedes hacer clic en esta capa y luego puedes ver el icono fx por aquí, click en ella y hacer clic en “Drop Shadow”. Ahora puedes ver que he puesto mi sombra de gota así. Es una sombra de gota muy sutil. Ahora, básicamente, este es el modo de mezcla de tu sombra de gota. No usamos otra cosa que lo normal. Es mejor porque tenemos que convertir nuestras capas a CSS. Entonces tenemos Global Light, que es básicamente la Photoshop Global Light, donde la luz viene en el top 90 grados. Entonces si lo cambio por aquí y tengo otra capa, todas las sombras se ajustarán a esta luz global. Entonces si quieres crear un botón personalizado, apaga esto, y puedes mover la sombra donde quieras. Voy a resaltar la sombra para que veas cómo se mueve. Ahora bien, si cambio la distancia de la sombra, se puede ver lo lejos que va de la parte superior de esta capa porque la luz está por aquí. Entonces si cambio la dirección de la luz, la sombra también cambiará. Además, esto se extiende, que básicamente es cuánto se va a difundir. Por lo que nuestro tamaño es de 25 y spread es del 100 por ciento. Entonces es una sombra opaca. Por lo que normalmente no usamos esta opción de spread. Ajustamos sólo la distancia, tamaño, y el ángulo. Lo más importante, esta opacidad para crear diferentes efectos de sombra. Entonces voy a cambiar el tamaño. Por lo que puedes ver ahora es un poco más borrosa. Voy a subirlo y la opacidad un poco más, y voy a cambiar el ángulo a 85. Ahora, puedes ver cómo solo este efecto de sombra de gota crea mucha profundidad en tus botones y diferentes elementos de diseño gráfico. Ahora, una cosa más en Photoshop CC 2015, puedes aplicar más sombras de gota como he aplicado otra ahora mismo. Voy a hacerlo un poco más oscuro. Voy a cambiar el ángulo a 90. Algo así. Ahora puedes ver que tengo múltiples sombras y están creando un efecto muy distinto, y la luz viene de arriba. De acuerdo, todo esto se trata de sombras caídas y supongo que has aprendido algo nuevo. Pasemos a la siguiente conferencia. 33. Uso de la capa de sombra interna: Hola chicos. En esta lección, te voy a contar algo sobre las sombras interiores. Veamos cómo funcionan estas sombras internas con nuestros botones en diferentes elementos de la interfaz de usuario. Ahora, voy a empezar desde la última conferencia. Voy a aplicar un nuevo efecto que es sombra interior. Ahora, básicamente es sombra interior, pero la usamos de diferentes maneras. Ahora puedes ver aquí tenemos el modo de mezcla configurado a pantalla, pero puedes usar normal si quieres. Se puede cambiar la opacidad. Se puede ver que he seleccionado el color blanco. Por lo que básicamente está entrando desde el ángulo 145. Voy a cambiar el ángulo a 90, que es mayormente lo que usamos en nuestro diseño de interfaz de usuario, casi 99.99 por ciento. Entonces permítanme reducir la opacidad y el tamaño a 2 píxeles. Ahora puedes ver que tiene un efecto un poco atrevido, está un poco elevado por aquí. Entonces así es como usamos nuestra sombra interior. Tengo que reducir el tamaño a cero también, porque el tamaño es básicamente el desenfoque, se puede ver el desenfoque en nuestra sombra interior. Entonces básicamente estoy usando 1 píxel o menos que eso, y estoy usando color blanco. Es así como he aplicado mi sombra interior. Todas las demás cosas son básicamente las mismas de las que les hablé en mi conferencia anterior, que es drop shadow. Entonces ángulo de opacidad y todo lo demás es igual. las diferencias que sombra interior va a venir desde dentro de la forma. No va a caer de la forma. De acuerdo, todo esto se trata de sombra interior. Pasemos a la siguiente conferencia. 34. Uso de efecto de capa de capa de línea: Hola a todos. Ahora voy a discutir ahora mismo sobre el efecto de capa de trazo. En nuestro diseño de interfaz de usuario comúnmente usamos efectos de sombra interna, sombra de gota y trazo en combinación para crear diferentes botones y diferentes elementos de interfaz de usuario de efectos. Ahora vamos a añadir otro efecto el cual es básicamente trazo. Por lo que el trazo tiene en realidad tres tipos diferentes, afuera y adentro y luego tenemos en el centro. Normalmente usamos fuera y algún tiempo dentro. Para que puedas usar el efecto que quieras. Puedes seleccionar un color que sea un poco más claro u oscuro que tu color de botón original. Entonces ahora mismo voy a seleccionar un color un poco más oscuro por aquí. He reducido el brillo del color básicamente. Primero fue como 65 por ciento, y ahora lo he reducido a casi 60 por ciento. Si lo reduce al 55 por ciento, será una representación mucho más clara del efecto de trazo. Entonces si yo aumento el tamaño, se puede ver que el tamaño está aumentando dentro del botón. Estos son diferentes modos de mezcla y no vamos a usar la mayoría de ellos. Entonces podríamos estar usando esta opacidad, pero supongo que no debes meterte con este modo de mezcla y opacidad. Ahora, algunas personas usan este gradiente sobre en este efecto de trazo. No lo recomiendo porque supongo que no podemos representar este efecto de gradiente en nuestra codificación CSS o HTML. Por lo que será muy difícil para los codificadores desarrollar puramente CSS o botón codificado así. Así que evita usar gradientes solo usa color y ponlo en dos o cuatro píxeles y supongo que será muy bonito efecto si muevo la sombra interna un poco más por dentro, así. Ahora se puede ver cómo está resultando. Todo eso se trata de golpe de efectos, ahora pasaré a la siguiente conferencia. 35. Reutilización de estilos de capa: Hablemos de reutilizar estilos de capa. Por lo que he aplicado algunos estilos de capa a esta caja. Entonces si quiero reutilizarlos o aplicarlos a cualquier otra capa o en cualquier otro proyecto, podría que aún necesite producir este efecto de sombra una y otra vez. Necesito guardar este estilo de capa. Entonces, ¿cómo puedo hacer eso? Vaya a este panel de capas, seleccione la capa He aplicado los estilos de capa. Haga doble clic en estos efectos. Ahora, tal vez veas que hay un botón por aquí, “Nuevo Estilo”. Entonces si le das click, puedo nombrarlo como Soft Shadow, y solo puedo hacer clic en él “OK”, y se agrega a mis estilos. Entonces cómo puedo acceder a ella, debería ir a los Estilos. En la última, si pasas sobre ella, puedes ver que ésta es la única sombra suave que acabo de guardar. Entonces si quiero aplicarlo a cualquier otra capa, solo voy a dibujar cualquier otra capa solo para mostrarte cómo aplicarla a esta. Voy a dar click en esto y se puede ver cómo se ha aplicado esta sombra suave a esta capa. Entonces esto es muy importante si quieres guardar tus estilos los cuales vas a usar una y otra vez como estas sombras y sombras internas. Entonces usa esto. Un consejo, ten en cuenta que siempre usa blanco y negro en tus estilos de color para guardar. Por lo que se pueden aplicar a cualquier capa. Si usas colores como azul, gris o naranja o algo así, no puedes aplicar a ninguna capa. Ahora, has aprendido a reutilizar los estilos de capa, pasemos a la siguiente conferencia. 36. ¿Qué son los gradientes?: En primer lugar hablemos de algunos gradientes. Entonces, ¿cuáles son nuestros gradientes? Los gradientes son simplemente la mezcla de dos colores o tal vez más de dos colores. Entonces aquí he abierto un sitio web solo para explicarte el concepto. Ahora tenemos color azul en el lado izquierdo y otro gris oscuro en el lado derecho. Entonces déjame mezclarlos. Ahora este es el gradiente. He creado un gradiente usando estos dos colores. Esto es básicamente parada de gradiente donde cuánto uso del color del lado izquierdo o derecho. Entonces si lo arrastro por aquí, se puede ver que el color grisáceo derecho es dominante y se está volviendo dominante. Si trato de arrastrarlo por aquí, entonces el color más claro izquierdo del azul es un poco dominante. Por lo que puedes probar este sitio web. Incluiré el enlace en recursos. Entonces, básicamente, puedes probar diferentes esquemas de color como estos. Uno afilado y uno opaco, estoy mezclando en este momento. No mezcles dos colores opuestos o dos colores muy diferentes. Al igual que he mezclado este greens entre sí. Se puede pasar de azul a grises, e incluso como este aburrido, y uno es de color naranja. puede ver que es una combinación muy impar. Entonces si mezco como los dos colores, van a hacer una combinación muy bastante buena como esta. Por lo que he visto este uso en muchos sitios web. Entonces hablemos en la siguiente lección, donde muchos diseñadores web profesionales y diseñadores de interfaz utilizan esta mezcla o gradientes en sus diseños. 37. Uso de degradados en el diseño de UI: Ahora, veamos algunos de los ejemplos de uso de gradientes en diseño web y diseños de páginas de aprendizaje. Entonces este es básicamente el sitio web de Stripe y se puede ver que han mezclado estos dos colores naranja y morado y se ve impresionante. Entonces este es un uso y déjame mostrarte algunos ejemplos más. Ahora, aquí tenemos este botón “Empieza gratis”. Ahora el diseñador ha utilizado este gradiente desde este color azul nítido hasta un color azul un poco más oscuro. Por lo que se ve muy único. Tengo algunos ejemplos más como este, sitio web QuickBooks Online. Entonces si haces clic en este general, este “Pruébalo gratis”, también hay un uso de gradiente por aquí en estos botones. Entonces este botón también tiene gradiente. Incluso este botón blanco tiene gradiente de blanco a gris. Entonces es así como los diseñadores usan gradientes y se ven muy bien en diseños y atraen los ojos de los usuarios. Por lo que aquí tenemos otro uso muy único de los gradientes. Se puede ver en este sitio web de Sprout Video, han utilizado gradientes de una manera muy creativa y realmente se mete en el diseño. Entonces este es un uso en los botones. Entonces se puede ver en esta área de contenido, han utilizado este gradiente desde esta dirección, desde este ángulo. Entonces tenemos algo de color afilado por aquí y algunos un poco de color aburrida por aquí. Esta es la misma técnica que te conté en la lección anterior. Eso si quieres mezclar dos colores, no vayas en mucha variedad de colores, solo mezcle los colores que ya están más cerca uno del otro. En este sitio web, han utilizado dos greens. Uno es un poco verde amarillento, y otro es un poco verde opaco. Para que puedas ver lo dramático y lo hermoso que puede crear. Entonces, para empezar, solo ten en cuenta que no mezcles muchos colores ni te vuelvas loco con tus gradientes. Simplemente ten en cuenta consejo simple que necesitas usar solo los colores que están correlacionados y muy cerca entre sí. Hemos visto algunos ejemplos como éste. Ahora, ¿cuál es el truco aquí? Han usado dos colores muy afilados, naranja muy afilada por aquí y morado muy afilado por aquí. Por lo que no es completamente naranja, es básicamente naranja rojiza. Por lo que están más cerca el uno del otro. Pero para empezar, creo que puedes usar estas técnicas como esta. Han usado ambos colores azules por aquí, y en éstos, han usado ambos tonos de naranja y luego naranja más oscuro, naranja afilado y naranja más oscuro, azul púrpura afilado y luego azul púrpura claro, azul púrpura opaco. Entonces esto es básicamente sólo una punta de arranque. Así que ten esto en cuenta, y en la siguiente lección, vamos a crear, indagar en los métodos de creación de gradientes en Photoshop. Entonces pasemos a la siguiente lección. 38. 3 formas de crear Gradients en Photoshop: En Photoshop, hay muchas formas en las que puedes crear gradientes. Pero en el diseño de la interfaz de usuario, solo usaremos los métodos que podamos controlar y manipular fácilmente. Veamos cuántas formas hay. Voy a discutir el primer método que es seleccionar esta “herramienta de gradiente”, no entraré en las opciones del gradiente ahora mismo, así que asegúrate de haber seleccionado algún gradiente de aquí. Tengo sólo una capa de fondo por aquí, he abierto sólo un nuevo documento. Simplemente arrástralo de izquierda a derecha o en cualquier dirección, y creará un gradiente. Voy a presionar “Control Z”. Si arrastro de esta dirección así, se puede ver que el gradiente viene en esta dirección. Esto básicamente está controlando el ángulo de gradiente. Este fue el primer método para crear gradientes, que estaba usando esta herramienta Degradado de este menú de la barra de herramientas. Entonces este es difícil de controlar, no lo vamos a usar para gradientes en nuestro diseño de interfaz de usuario, así que hablemos de otros dos métodos. Déjame crear unas capas por aquí, y debajo de la herramienta Rectángulo voy a crear una capa, rectángulo redondeado por aquí, cambiar su color a este azul. De acuerdo, ahora, el segundo método que es más popular y lo vamos a usar mucho, es usar este Estilo de capa. Entonces ve a Estilos de capa, y luego vamos a usar este efecto de superposición de gradiente. Puedes ver en cuanto seleccioné esto, ya he seleccionado un gradiente por aquí, puedes cambiarlo si quieres. Es así como aplicamos los gradientes de Estilo de capa, y ¿cuál es el beneficio? ¿ Por qué vamos a cambiar a este método u otro? El problema es este efecto de control. Por lo que fácilmente podemos controlarlo, apagarlo por aquí, y encenderlo por aquí. Podemos hacer doble clic y cambiarlo fácilmente a cualquier otro gradiente. Esta es básicamente la facilidad de control. En el diseño de la interfaz de usuario, si tenemos Estilos de capa o algo que sean fáciles de controlar, entonces ve con ellos. Este es otro método. Ahora el tercer método es crear una capa de gradiente de ajuste, por lo que para eso vamos a ir a este icono por aquí en el panel de capas, pequeño icono. Se puede ver “Crear nueva capa de ajuste de campo” dar click sobre él, y luego vamos a seleccionar este gradiente desde aquí, y se puede ver el gradiente que se selecciona momento es de este transparente a blanco. Déjame seleccionar cualquier otro como éste. Ahora puedes ver este relleno degradado, solo llenó todo el lienzo con este color. Ahora en nuestro diseño de interfaz de usuario, su mayoría no necesitamos este tipo de cosas, así que vamos a recortar este gradiente en esta forma de patrón R. Para eso, vamos a dar clic en “Agregar” y hacer clic entre estas dos capas, y ahora puedes ver que se ha aplicado este relleno degradado. Ahora el relleno degradado se aplica a esta capa, por lo que esta es otra forma en la que fácilmente podemos hacer clic aquí, hacer doble clic en este icono de “Estilo degradado” por aquí, y podemos cambiarlo fácilmente a partir de esto. Son muy fáciles de controlar, por eso podríamos estar usando esta técnica de Relleno degradado y este efecto de degradado Overlay. Basta con tener en cuenta que estos dos métodos se utilizarán una y otra vez. Pero solo pensé que deberías conocer todos los métodos de creación de gradientes en Photoshop. Eso se trata de crear gradientes en Photoshop. En la próxima conferencia, estaremos viendo las opciones y las diferentes opciones de Gradient Editor y este estilo de Capa de superposición de gradiente. Tan solo mantente en contacto y pasemos a la siguiente conferencia. 39. Uso de Editor de degradado en Photoshop: En esta conferencia, vamos a discutir este Editor Gradiente. Si quieres cambiar los colores y crear un nuevo gradiente, puedes hacer doble clic sobre él, y puedes ver aquí tenemos ventana de superposición de gradiente. Tenemos algunos presets azules por aquí, pero ahora mismo vamos a crear un nuevo gradiente personalizado por aquí. Ahora permítanme sólo discutir algunas de las opciones que aquí se presentan. Estaremos utilizando la mayor parte del tiempo gradiente sólido y la suavidad estará en el 100 por ciento, así que no te metas con estos ajustes. Ahora estos son básicamente paradas de color. Se puede ver este color está en la ubicación es cero por ciento, que está en la parte superior izquierda y el lado más izquierdo. Si lo arrastro por aquí, se puede ver que su ubicación está cambiando. Las dos opciones de abajo son básicamente la ubicación, donde se ubicarán los colores. Esto puede cambiar la dirección de nuestro gradiente. Estas dos son paradas, si hago clic en él, se puede ver la ubicación está establecida en 100 por ciento para este color. Si trato de moverlo por aquí, este es el mismo efecto que mencioné en mi primera conferencia de gradientes, donde estaba cambiando el lapso de gradientes. Si lo muevo por aquí, se puede ver que el color azul es afilado. El color azul es muy menos dominante que éste es dominante. Voy a revertirlo atrás. Se puede ver una flecha en forma de rectángulo muy pequeña por aquí. Esto básicamente especifica dónde está el lapso de este color. Si trato de moverlo por aquí, puede ver que el lapso de color azul oscuro está disminuyendo y se puede ver que el cambio de este color está aumentando hacia el gradiente. También puedes cambiar la ubicación del span también. Puedes ponerlo en 50 por ciento ahora mismo. Se puede cambiar al 70 por ciento o algo así. Este icono básicamente está mostrando el lapso, cuánto será este color, y por cuánto tiempo estará este color en el gradiente. Estas son todas las cosas que he discutido aquí, si quieres agregar más colores, puedes dar click en esto y dar click una vez por aquí. Se puede ver que he añadido el mismo color por aquí. Puedo cambiar su color así, tal vez algún color púrpura grisáceo o tal vez algún color más claro como ese. Tan solo para explicar los gradientes, podemos agregar tantos colores como nos gusten por aquí. Se puede ver que este color tiene el lapso así. Si trato de arrastrarlo por aquí y puedes ver ahora cómo este color básicamente se está sumando a este gradiente. Ahora si hemos dominado el lado inferior de esta barra de gradiente, hablemos de la barra superior. Ahora tenemos algunos iconos de tipo de paradas por aquí como éste y éste. Se puede agregar esto por aquí también. Lo que es básicamente la parte superior, estas barras están haciendo por aquí. Estos son básicamente la opacidad, qué opaco será tu gradiente. Si a veces pudiéramos necesitar producir un gradiente que sea transparente en un lado y opaco en un lado. Si quiero hacer transparente este color blanco, voy a reducir su opacidad a cero por ciento. Ahora puedes ver estas marcas de verificación están apareciendo, que son básicamente la transparencia. Estas barras superiores básicamente controlan la transparencia de los colores a continuación. Si quiero cambiar la opacidad de éste, puedo usar al 50 por ciento. Se pueden ver los colores y la transparencia ha cambiado. También se pueden ver los iconos por aquí, ellos también han cambiado. Gris claro significa su opaco, 50 por ciento o 40 por ciento opaco no totalmente opaco. Es un poco transparente. blanco significa que es totalmente transparente, negro significa que es totalmente opaco. Estas son todas las opciones por aquí. Ahora para guardar tu gradiente, si quiero guardarlo, puedo nombrarlo aquí transparente a azul, y puedo dar click en este Nuevo por aquí, y puedes ver que he guardado este gradiente por aquí. Es así como creamos gradientes, pero para empezar, no voy a usar muchos colores. Voy a eliminar este color y vamos a estar usando algo más de color azul oscuro por aquí y estableciendo la opacidad al 100 por ciento. Eliminar este tope de transparencia, Eliminar. Ahora quizá podamos cambiar un poco su saturación, convertirla en un color azul más nítido. Yo también voy a cambiar su lapso y luego voy a crear este color a botón azul. Ahora crearlo así, Guardar, Nuevo. Si desea guardar todo este conjunto de gradientes, puede hacer clic en este botón Guardar, y puede utilizar este gradiente guardarlo. Ya puedes ver que lo nombro como quizá gradientes de UI planos, algo así. Si creas muchos gradientes y solo quieres guardarlos, puedes guardarlos así. Si quieres cargarlos más adelante, puedes cargarlos desde aquí, por lo que esto significa que no pierdes tus gradientes. Todo esto se trata de Gradient Editor y crear nuevos gradientes y cómo utilizarlos. Si tiene alguna pregunta o algo en su mente, pregúntame en la discusión. Pensé que esta porción de gradiente es muy, muy importante en el diseño de la interfaz de usuario porque tiene un gran uso en botones, fondos, incluso en el área de héroes. Todo eso se trata de gradientes. Estaré subiendo próximos ejercicios de uso de gradientes y pocos retos. Tan solo mantente atentos y nos vemos en la próxima conferencia. 40. Uso de la estilo de capa de superposición de degradado: Voy a discutir primero estas opciones de efecto de superposición de gradiente. Haga doble clic aquí sobre este efecto y aparecerá esta ventana de estilo de capa. En primer lugar, tenemos este modo de mezcla el cual está configurado a la normalidad en este momento. Lo que básicamente está haciendo es que sólo podemos ver los gradientes pero no podemos ver el color de fondo de esta capa. Pongo el color de fondo de forma a este oscuro donde se puede ver en la miniatura que no se muestra en este momento. Si trato de mezclarlo como multiplicarlo con el fondo, puedes ver ahora los colores azules se multiplican o agregan a ese fondo grisáceo. En este modo de mezcla de superposición de gradiente, es posible que no estemos usando todos ellos, estaremos usando sólo esto tal vez oscurecer o esta multiplicar, quemar color y tal vez pantalla, y tal vez superponer. Estos son básicamente sólo pocos efectos que estaremos utilizando la mayor parte del tiempo. No te preocupes por todas ellas, solo trata de cambiar a quien te guste o sigue cambiando hasta obtener el mejor efecto. No te preocupes por aprender todos estos efectos de mezcla, estos son básicamente solo mezcla de colores. Cómo se van a mezclar los colores del degradado con el color de fondo. ¿ Se van a quemar así? Se puede cambiar la opacidad por aquí, se puede ver. Déjame simplemente cambiarlo a luz normal ahora. Para el diseño Web y CSS, no recomiendo usar este modo de mezcla, así que solo manténgalo a la normalidad. Este es otro consejo. Ahora, para esta opacidad, puedes cambiarla si quieres pero asegúrate de que todo esté configurado en 100. No necesitamos el color de fondo de esta capa. Ahora, sólo voy a discutir aquí las opciones. Discutiré el editor de gradientes después. Si hago doble clic aquí, se puede ver editor de gradiente se abre. Ahora mismo voy a discutir sólo estas opciones de esta superposición de gradiente de estilo de capa. Ahora bien, esta es básicamente la dirección, voy a revertir la dirección. Si tenemos este gradiente de, se puede ver azul oscuro a un color azul agudo, se puede revertir así si se quiere revertir la dirección. Entonces esto siempre se comprueba así que no te metas esto con la opción alinear con capa, es básicamente como va a ser la alineación de este gradiente. Se va a alinear con la capa. Ahora bien, estos son básicamente estilos, cómo funcionará el gradiente. ¿ Va a ser en el modo lineal desde, se puede ver en una línea de arriba a abajo. Ahora mismo tenemos este ángulo de 90. momento, este gradiente está trabajando en esta dirección en un modo lineal en alineación. Si cambiamos al modo radial, se puede ver cómo esto ha cambiado y ahora está en el modo radial como este en modo circular. Puede que no estemos usando estos ángulos y esto reflejado o tal vez diamante, pero supongo que en su mayoría estaremos usando lineales y radiales. Sólo ten en cuenta que simplemente no te metas con todos ellos. Estaremos usando sólo lineales y radiales porque en CSS y diseño Web, tal vez no podamos producir estos efectos supongo. Estos son más fáciles de producir efectos lineales y radiales. Podríamos ser capaces de generar este, pero depende de ti si quieres usarlo. Siguiente es el ángulo. Si cambio el ángulo, se puede ver cómo van a cambiar los gradientes. Es sólo la dirección del gradiente viniendo de izquierda a derecha o el ángulo que especifico. Sólo ten en cuenta, este es sólo el ángulo. Entonces la escala es básicamente qué tan amplia y se puede ver lo estrechos que serán los colores. Se puede ver como estoy cambiando a menos en la sección de escala y los gradientes se están volviendo más estrechos. Si voy a más del 100 por ciento, se puede ver que los gradientes se están volviendo más gruesos y tienen más lapso de colores. El lapso va en aumento. Estas son todas las opciones sobre los estilos de capa de la superposición de gradiente. En la próxima conferencia, discutiremos este editor gradiente. Pasemos a la siguiente conferencia. 41. ¿Qué son los patrones y cómo los utilizamos en el diseño web?: En esta lección, vamos a ver cómo se usan básicamente los patrones en la interfaz de usuario y el diseño web. Entonces, empecemos con lo que son los patrones. Por lo que los patrones son básicamente fondos repetidos. Se puede ver por aquí, estas son imágenes simples que se repiten una y otra vez. Este es un sitio web, sutlepatterns.com. Puedes visitar este sitio web y ver muchos patrones, puedes descargarlos también. Por lo que estos son algunos de los muy buenos patrones. Podemos usarlos en nuestro diseño de interfaz de usuario y diseño web. Veamos algunos de los ejemplos en línea para ver cómo los patrones están siendo utilizados por los diseñadores web. Entonces permítanme mostrarles algunos de los ejemplos. Ya vimos este sitio web, sproutvideo.com. Pero si miras la porción del lado izquierdo y derecho por aquí, puedes ver que hay algunos polígonos patrón estilo aplicado por aquí en el fondo. Entonces tenemos, si nos movemos a este mercado creativo, han mostrado este paquete, pero en el fondo, puede ver que están usando un patrón para la temporada otoñal o lo que sea esto. Entonces tenemos, déjame mostrarte un ejemplo más. Puedes mirarlo. Es solo patrón sin costuras de una madera. Por lo que no es una imagen muy grande. Es sólo una imagen pequeña, puede ser de 100 por 100 píxeles de ancho y 100 píxeles de alto. Por lo que lo han aplicado para crear este fondo de madera. Para que puedas ver cómo estos patrones realmente cuentan en tu diseño web y diseño de interfaz de usuario. El problema es que, siempre úsalos sabiamente, no uses un patrón de archivo muy grande como 500 por 500 píxeles o tal vez a veces he visto a personas usando imágenes de 1,000 píxeles por 1,000 píxeles para sus patrones. Por lo que no es recomendable. Utilice siempre patrones que sean fluidos y tengan un tamaño de archivo muy pequeño. Entonces eso es todo sobre los patrones. En la siguiente lección, estaremos viendo cómo descargar e instalar nuevos patrones en Photoshop para ser utilizados en tu diseño de interfaz de usuario. Entonces pasemos a la siguiente conferencia. 42. 2 métodos de aplicar patrones: En esta lección, voy a discutir cómo podemos aplicar patrones en Photoshop. En realidad, hay dos formas de aplicar patrones de Photoshop. Vamos a discutirlos uno por uno. Ya he dibujado este rectángulo por aquí. El primer método es aplicar estilos de capa. Ir a Capa, Estilos de capa y Superposición de patrones. Tan pronto como veas esta ventana, verás que hay patrones ya aplicados a tu diseño. En primer lugar, es necesario ver algunas de las opciones. Ya conoces estas opciones de mezcla y control de opacidad. Discutamos esta biblioteca de patrones. Estas son las bibliotecas ahora mismo cargadas por aquí. Tengo muchos patrones personalizados cargados por aquí. Entonces si trato de aplicarlos así, se aplican a mi fondo color, sea lo que sea así. Ahora, el problema es, si quiero mostrar mi color de fondo y el patrón debe estar superpuesto en él. Eso se puede hacer con el control de este control de opacidad. Mueve esto por ahí. Ya puedes ver nuestro patrón no es opaco ni transparente. Entonces si quieres efecto muy sutil, puedes usar el control de opacidad para usarlo. Si solo quieres usar este y cambiar a algún otro efecto como multiplicar, puedes ver cómo esto realmente afecta el color de fondo. Simplemente está sumando en segundo plano. Estas son diferentes opciones que puedes usar por aquí, puedes usar multiplicación normal o incluso quemadura de color, algo así. Incluso a veces simplemente elegimos color o tonalidad. En su mayoría usamos normal, multiplicamos o tal vez superposición. Estos son los tres efectos que utilizamos la mayor parte del tiempo. Por lo tanto, ten en cuenta que utilizas este efecto con estas opciones de mezcla, superposición, normal, multiplicar. Eso es todo sobre los estilos de capa. Ahora vamos a discutir el segundo método. Es muy fácil de controlar, simplemente puedes apagar y encender así. Ahora, llegando al siguiente método, vamos a eliminar este efecto por aquí. Ahora, el segundo método es aplicar patrones utilizando sus capas de ajuste. Están las capas de ajuste, solo están en la esquina inferior de tu panel Capas. Haga clic en este icono y vaya a este patrón. Haga clic en él, y podrá ver cómo ha aparecido este cuadro de diálogo de relleno de patrón. Aquí tenemos muy menos opciones como opacidad y otras cosas. No podemos controlarlos aquí. Simplemente vamos a seleccionar cualquiera de los patrones, como tal vez este, lunares. Voy a presionar “Ok”. Ahora el patrón es, siempre que se utiliza una capa de ajuste, se aplica a todo el lienzo. Por lo que solo ten en cuenta que necesitas recortarlo si quieres que el efecto esté en un área específica. Ya teníamos este rectángulo por aquí en el lado derecho en nuestro panel Capas. Entonces vamos a recortar así este patrón dentro de esta capa, y eso es todo. Si quieres controlar su opacidad, puedes controlarla desde aquí, la opacidad del panel Capas así. Si quieres usar un modo de mezcla, puedes usar estos modos de mezcla de capas por aquí, así. Ahora tenemos gama completa. Podemos expandir fácilmente esta capa y se puede ver que el patrón se está expandiendo con ella. Estas son básicamente las dos formas de aplicar patrones en Photoshop. Sólo una recapitulación. El primero es usar Estilos de capa en la Superposición de capas y patrones. El segundo es que vas a usar una capa de ajuste. Por lo que ambos métodos son buenos de usar. Puedes usar cualquiera de ellos. Eso es todo sobre cómo aplicar patrones en Photoshop utilizando dos métodos diferentes. Entonces pasemos a la siguiente conferencia. 43. Crear patrones a partir de un archivo de imagen: Discutamos cómo podemos crear patrones a partir de imágenes o cómo podemos usar patrones o descargarlos de Internet y usarlos en Photoshop. Entonces empecemos este tutorial. En primer lugar, les voy a mostrar este sitio sutlepatterns.com. Es uno muy popular. Tienen un plugin que es plugin premium, necesitas comprarlo. Entonces ahora lo que vamos a hacer es primero vamos a descargar un patrón desde aquí, y vamos a ver cómo vamos a crear un patrón a partir de un archivo de imagen. Entonces solo descarga este patrón por aquí. Está bien, pink_rice, está descargado, y déjame buscar el archivo. Aquí está el archivo, voy a extraerlo. Entonces veamos qué hay dentro. Tenemos un archivo de imagen PNG dentro de este. Vamos a arrastrarlo en nuestro Photoshop, así. Ahora puedes ver que solo es un archivo PNG. Vamos a crear nuestro patrón en Photoshop a partir de este archivo PNG. Por lo que vamos a presionar Control A para seleccionar todo el lienzo, ir a Editar y definir patrón. Entonces voy a renombrarlo a pink_rice, presiona Ok, y eso es todo. Nuestro patrón ha sido creado. Vamos a aplicarlo en algo. Voy a usar la herramienta Eclipse como ahí. Ahora lo voy a aplicar con nuestro método Layer Style, ok, ¿dónde está? Patrón de superposición. Ahora, ve a esta biblioteca de patrones, muévete al final y verás la última o la última que has creado al final de este pasivo patrón. Por lo que siempre que crees un patrón a partir de un archivo de imagen, será en la parte inferior y el último. Entonces da click aquí y puedes ver ya lo he aplicado, pero vamos a usar el modo normal. Para que veas cómo funciona esto. Ahora hemos aplicado nuestro patrón por aquí y eso es todo. Esta es la forma, cómo crear tu patrón a partir de un archivo de imagen. Entonces pasemos a la siguiente conferencia donde veremos cómo instalar nuevos patrones con los ficheros.pat para Photoshop. 44. Instalación y uso de archivos .pat: Ahora, vamos a discutir la segunda forma de usar patrones en Photoshop e instalarlos. Vamos a usar el archivo.pat en él en esta conferencia. Por lo que basically.pat archivo es la colección de diferentes patrones para Photoshop. Ahora, vamos a usar este premiumpixels.com/freebies, que es un patrones, patrones muy bonitos. Simplemente descárgalos desde aquí. Estoy dando click en el “Descargar” y vamos a descargar estos. Estos serán solo archivos de patrón y los vamos a instalar primero. Por lo que vamos a pasar primero a la carpeta de instalación de Photoshop. Ya lo hemos descargado. Pasemos a la carpeta de instalación de Photoshop. He abierto muchos archivos por aquí. Ahora, haga clic derecho en el Photoshop y vaya a Propiedades y Abrir ubicación de archivos, y vamos a utilizar esta carpeta Presets. Acude a esta carpeta Presets y aquí me encontrarás para encontrar la carpeta Patterns así. Para los usuarios de Mac, supongo que el camino es de aplicación y Adobe Photoshop y Presets. Voy a publicar el camino real en los comentarios o en la discusión, o tal vez en alguna otra conferencia, pero ahora mismo esto es para PC. Puedes Google que cuál es la ruta de tu carpeta de instalación de Photoshop en Mac. Ahora, da click en esta carpeta Patrones y verás todos los patrones por aquí. Estos son los patrones prefabricados o por defecto de Photoshop. Ahora bien, si quiero instalar un patrón por aquí, solo necesito copiar y pegar el archivo de patrón por aquí. Eso no es algo muy difícil, así que hagámoslo. Vamos a usar los mismos patrones sutiles por aquí, los voy a extraer, así que vamos a usar este archivo Patterns. Copiar y lo vamos a pegar en nuestra carpeta Patrones por aquí, Continuar. Ahora, para que esto suceda, hay que cerrar los de Photoshop y cerrarlo y ejecutarlo de nuevo. Ahora, sólo deja que empiece un poco. Lleva algún tiempo cargarme en mi RAM. Por lo que tomará algún tiempo. Vamos. Sí, voy a usar el archivo Patterns recién instalado. Entonces vamos a dibujar algo por aquí así, y vamos a aplicar un patrón por aquí, Pattern Overlay. Ahora ya estamos viendo nuestra antigua biblioteca de patrones, así que para acceder a la nueva, haga clic en ésta, y haga clic en cualquiera de los patrones que estaban por aquí. Este es el patrón que acabamos de instalar, haga clic en él. Dirá: “Reemplaza el patrón actual por un patrón a partir de patrones”. Por lo que si quieres reemplazar toda tu biblioteca, puedes hacer clic en Ok, o bien puedes hacer clic en Anexar. Por lo que si hace clic en Anexar, se agregará al final, así. Se puede ver por aquí. Para mayor claridad, solo reemplacemos los patrones para que no tengamos nada más. No sé qué está pasando, tal vez fueron patrones sutiles. Puedes hacer click en cualquiera de los patrones por aquí. Estos eran los patrones, estaba haciendo clic en el nombre de archivo equivocado, así que solo tienes que hacer clic en ellos. Se puede ver que estos son patrones diferentes, muy bonitos patrones sutiles, igual que la textura del papel. Por lo que voy a ampliarlo para que puedas ver la textura fácilmente. Este es básicamente el método que utilizamos para descargar e instalar los archivos de patrón de Photoshop. Son muy fáciles de instalar si quieres usar el mismo patrón para Internet o tal vez, lo siento, para desarrollo o desarrollo de sitios web, puedes usar estos patrones por aquí. Estos son para usar en desarrollo web porque el archivo PNG, puedes repetirlos fácilmente, y para Photoshop puedes aplicarlo fácilmente en el Photoshop. Se trata de aplicar y usar archivos de patrón de Photoshop. Pasemos a la siguiente conferencia. 45. Cómo funciona la luz y la sombra en el diseño de UI: Hola a todos. En esta conferencia, voy a mostrarte básicamente el secreto detrás o el concepto detrás de todos los diseños de UI. Se puede crear cualquier tipo de elemento de interfaz de usuario con este concepto, o al menos el 80 por ciento de ellos. Entonces, ¿qué es este concepto? Es el concepto de luz y sombra. Ahora, he visto casi todos los diseños de UI donde la luz siempre está cayendo desde este ángulo que es de 90 grados. Supongamos primero sólo por un segundo, que la luz viene de arriba, así. Cuando la luz está en la parte superior, la sombra debe estar en la parte inferior. La luz está aquí y la sombra está aquí. Si movemos la luz a otro lugar, así. Permítanme mostrarles un ejemplo. Este. Ahora se puede ver que la luz está en el lado izquierdo y la sombra está en el lado derecho. Entonces la sombra se mueve con la luz mientras movemos la luz. Este es el concepto básico. Ahora cuando algo se eleva en el diseño de la interfaz o tiene algún efecto castor o algo así. Tienen luz en la parte superior y se puede ver luz , estará cayendo sobre esta zona. Básicamente lo que hacemos los diseñadores, creamos luz por aquí y un poco de oscuridad por aquí, y luego sombra por aquí y voila. Nuestro botón elevado está aquí. Diseño de material de Google, hay muchos usos de este concepto, las sombras. Llegando a este mejor efecto, ahora ¿qué está pasando por aquí? Si presionamos un botón o presionamos algo, la sombra estará en el lado interior. Por lo que siempre ten en cuenta que necesitamos sombras por aquí para hacerla prensada y una cosa más, hay un muy pequeño detalle, simplemente no necesitas perderte esto. Déjame acercarlo para ti, ahora, si miras de cerca por aquí, tenemos sombras por aquí y si algo se presiona, la luz caerá sobre esta zona. Debido a que esta zona está presionada en el interior, por lo que saltará toda la luz. La luz caerá de aquí y aquí abajo. Si hago clic en esta capa, puedes ver que he usado una sombra de gota muy ligera. Si aumento su tamaño, puedes ver por aquí ahora. Se puede ver la sombra de gota por aquí, es una sombra blanca, que básicamente es un brillo blanco, pero lo llamaré sombra ahora mismo. Déjame cambiar el color de fondo por ti para que puedas verlo con claridad. Ahora lo puedes ver con claridad. Aquí hay una sombra blanca o brilla por aquí. Esta es básicamente esta luz cayendo por aquí en esta zona para hacerla brillar. Estas son las dos cosas básicas que necesitamos en todo lo que necesitamos para mostrar como objeto prensado o presionado por dentro. Déjame mostrarte otro ejemplo, aquí he usado el mismo concepto en una tipografía o puedes ver en un texto, puedes ver cómo se presiona por aquí. Este es el efecto prensado, era muy popular, los diseñadores de UI todavía lo usan en todos los botones. Casi todos estos tienen estos dos palos, uno es elevado y otro está prensado. Basta con tener en cuenta, concepto muy básico, ese diseño de interfaz de usuario, todos los elementos de interfaz de usuario que giran en torno a este efecto de luz y sombra. 46. Ejemplos de uso de luz y sombra: En esta lección, les voy a mostrar algunos de los ejemplos de dribblers que están usando la luz y la sombra lo mejor. Este es un ejemplo que puedes ver por aquí. Este botón está elevado y han usado luz por aquí y sombra por aquí, luego tienen sombra por aquí y un poco de luz por aquí. Esto es para el efecto prensado y esto es para el efecto elevado. Ahora, incluso en este efecto de elevación, han utilizado el efecto prensado para esta marca de tick. Aún así se presiona de nuevo esto y luego se presiona dentro del prensado. Por lo que este es un efecto muy único, pero se ve muy bien. Ahora, un ejemplo más. Este es también otro ejemplo. Esto es solo por la luz y la oscuridad han usado dos IU muy grandes y han usado la luz y la sombra a nivel prensado. Se puede ver luz por aquí y sombra por aquí. Entonces se puede ver también luz por aquí, sombra por aquí. Entonces en el efecto prensado, se puede ver la luz por aquí en la parte inferior. Se puede ver el color de este botón varía de los dos últimos. Por lo que el color de este botón es más oscuro que los botones izquierdo y derecho. Ahora llegando a otro ejemplo. Ahora esto se llama básicamente los temas oscuros de la interfaz de usuario, no me gustan mucho. Se puede ver por aquí el mismo efecto de luz y sombra. Ahora, la luz está por aquí. Se puede ver una luz muy opaca por aquí. Entonces tenemos sombra, que es una sombra un poco difusa por aquí. Entonces tenemos este botón presionado y adivina qué, el botón presionado es más oscuro. Ese es el concepto principal. Por lo que se puede ver que estos botones tienen un tono un poco más claro de gris y este botón tiene tono más oscuro de gris. Por lo que aquí tenemos gris más oscuro y gris más claro. Este es nuevamente el concepto de luz y sombra. En las próximas conferencias, voy a discutir cómo elegir colores tipográficos, y algunos otros consejos para principiantes. Entonces mantente atentos y nos vemos en la próxima conferencia. 47. Esquema de color para principiantes: Hablemos de esquemas de color. Los esquemas de color son parte muy esencial del diseño de la interfaz de usuario, ya sea que estés diseñando un sitio web o una aplicación o cualquier otra cosa. Entonces cómo vamos a diseñar estos esquemas de color o cómo crearlos para principiantes, lo explicaré de manera sencilla. Entonces, en primer lugar, la regla del pulgar. Nunca use más de dos colores distintos de estos tonos grises. Por lo que usa máximo dos colores para principiantes. De lo contrario, será difícil controlar o manipular estos colores. Sólo tienes que pegarte a dos colores y usa tantos tonos de negro o gris por aquí. Se puede ver en el primer esquema de colores, he usado apenas dos colores planos, verde y naranja. Entonces he usado dos tonos de gris. En la segunda, he usado de nuevo dos colores principales para mi esquema de color. Entonces los tres son básicamente los tonos grises. Esto es básicamente muy popular. Los tonos grises se están volviendo muy populares. La mayoría de las IU, son dominantes con estos tonos grises. Para sacar la mayor parte de la atención del usuario hacia tu IU y si tienes que diseñar diferentes porciones, necesitas usar estos dos colores principales. Estos colores serán utilizados en su mayoría para el texto. Lo he visto mayormente en la mayoría de las IU, incluso en Dribbble usan la mayor parte de los tonos grises para textos. No uses color negro tono, arruinará tu diseño de interfaz de usuario. Así que solo ten en cuenta, consigue algunos tonos grises y consigue dos colores y empieza a diseñar tu IU. 48. Uso de la saturación y el brillo en los esquemas de color: Existe otro método para obtener los colores, que es de tus logotipos. Si ya tienes logo, puedes ver este esquema de colores, lo conseguí de este logo por aquí y cómo lo hice, solo hago clic en la capa y pruebo el color desde aquí. El recolector de color, muestralo desde aquí y luego pruebo este color desde aquí. Cómo generé este color rojo, es método muy fácil. Basta con dar click en cualquier color que necesites, como este y simplemente mover este slider de tonalidad hacia la parte superior, como tengo a este color rojo. Esto se está quedando en la misma saturación y brillo y el matiz es diferente. Este es un método muy fácil. A veces solía aplicarlo así. Se puede ver que estos tres colores van muy bien juntos porque comparten mismo brillo y saturación de color. Este es un método muy fácil. Lo uso la mayor parte del tiempo. Si quieres probarlo, puedes probarlo. Así es como conseguí este tercer color. No recomiendo usar demasiados colores pero a veces en el diseño de tablero, necesitas muchos colores, tal vez más de cinco colores. Es así como obtienes más colores. 49. Herramientas en línea para crear esquemas de colores: Ahora, permítanme mostrarles rápidamente cuántas herramientas o qué herramientas se utilizan para la generación de esquemas de color en el diseño de la interfaz de usuario. Primera herramienta es la 0to255.com. Es herramienta muy útil. Genera diferentes tonos de cualquier color. Por ejemplo, si escojo este color gris y copio su valor hexadecimal, necesito pegar su valor hexadecimal en este Pick Color, pegar por aquí, y presionar este Pick Color, y puedes ver que ha generado todos los diferentes tonos de este color, del blanco al negro. Es una herramienta muy útil para generar diferentes tonos rápidamente. Puedes usarlos desde aquí. Si quieres elegir cualquier otro color, puedes escoger otro color, y ponerlo aquí, y generar sus tonos también. Esta es una herramienta. Entonces si quieres usar colores planos, puedes ir a estos dos sitios web, FlatuiPicker.com y FlaatuiColor. En este sitio web, elige este valor hexidecimal por aquí, tal vez éste, y basta con hacer click en cualquiera de los colores. Este es un sitio web muy bueno, pero tenemos colores muy limitados. En este sitio web, tenemos muchos colores, como el rosa. Si haces click en rosa, verás diferentes tonos de rosa como nuestros colores de diseño plano de interfaz de usuario. Tiene muchas variedades. Si vas a gris, puedes ver que hay muchos tonos grises. Es una herramienta muy buena. Ahora, si quieres navegar por esquemas de colores ya hechos entonces ve a este sitio web, color.adobe.com, y empieza desde aquí. Si puedes buscar desde azul y naranja, puedo ir a colores específicos como ese. Esto es muy útil cuando sé que necesito elegir entre estos dos colores. Podrás obtener todos los diferentes tonos y esquema de color para estos dos colores. Esta es una herramienta muy básica que uso. Una herramienta similar a este Adobe Color es este coolors.co, e ir a este navegador, y empezar a navegar por estos. Pero el problema aquí es la búsqueda. Aquí, tenemos una muy buena opción de búsqueda, y creo que deberías atenerte a esta herramienta de Adobe Color CC. Es muy bueno. Entonces la tercera parte, si quieres generar rápidamente esquemas de color por tu cuenta, entonces ve a este paletton.com o usa este Adobe CC Color Create, haz click en él y elige algún color base por aquí. Si selecciono este color como mi color base, este color verde, haga doble clic sobre él, copio su valor hexadecimal, y lo pego por aquí en el generador de esquemas de color Adobe. Se puede ver cómo ha generado esquema de color. Vaya a esta barra de opciones de regla de color y haga clic en Análogo, se puede ver que está creando diferentes esquemas de color. No quiero entrar en diferentes tecnicismos, pero puedes conseguir tantos colores como quieras desde aquí; tríada monocromática, de cortesía. Si te gusta algún color, solo tienes que copiar su valor hexadecimal y utilizarlo en Photoshop. Vaya a esto, haga clic aquí, pegue el esquema de color así, y vaya a las muestras, haga clic en la nueva muestra, y así es como voy a agregar un color verde afilado a mis muestras. Ya puedes ver ahora se agrega al último color. En primer lugar, coloca tu color por aquí y después agrégalo desde aquí. Es así como creas esquemas de color y los traes en Photoshop. Otra buena herramienta para crear esquema de color es esta, Paletton, y funciona de la misma manera que la herramienta de creación de Photoshop, esquema de color de Adobe. Necesitas pegar tu color base por aquí. Es una caja rara. Simplemente me deja seleccionar cualquier color por aquí. Tengo que presionar el retroceso. Si selecciono este color, este rojo, copie su código y péguelo aquí, y presione “OK”. puede ver que ha generado diferentes tonos por aquí. Esto es tetrad. Entonces tenemos pocos otros; tres colores, dos colores. Puedes seleccionar diferentes esquemas de color a partir de aquí. Estas son pocas herramientas que uso mucho tiempo. A veces sigo coleccionando diferentes esquemas de color y uso colores de diferentes esquemas de color que se juntan bien. Pero para principiantes y principiantes, no recomiendo este método. Usa pocos colores, y consigue buenos tonos de gris de este sitio web, y empieza a diseñar algunas buenas IU. 50. Selección de fuentes y tipografía: En esta conferencia, vamos a hablar sobre el emparejamiento de fuentes, y cómo elegir topografía y fuentes para el diseño de tu aplicación web o móvil. emparejamiento de fuentes o encontrar la topografía perfecta es básicamente una habilidad muy difícil de aprender. Lleva años dominar la habilidad. Para empezar, o incluso para mí, uso estos sitios web para emparejar puntos. Déjame mostrarte algunos de los sitios web y recursos en línea que uso. El primero es este typegenius.com. Si quieres elegir alguna fuente puedes seleccionar desde aquí. Puedes escribir muchas fuentes como, si selecciono este Open Sans, selecciono esta, y luego hago clic en “Ver coincidencias”. Aquí puedes ver unos partidos con el Open Sans, Futura PT Condensado. Este es el enlace. Se trata de una fuente Typekit. Después tenemos este Open Sans y Minion Pro. Esta también es una fuente Typekit. Después tenemos este Open Sans y Museo. Museo es una fuente muy grande, y se puede comprar, o incluso se puede utilizar desde Typekit. Entonces tenemos este Open Sans y Source Sans Pro. Estas son las dos fuentes de Google. Este es un sitio web, entonces deberíamos pasar a este par de fuentes. También es muy bonito sitio web, y desde aquí podemos encontrar muchas combinaciones de fuentes. Se puede ver así, fuentes Sans-Serif y Serif. Puedes ver aquí tenemos Cabina para rumbo y Antiguo TT Estándar para texto de cuerpo. Se puede ver que hay un montón de emparejamientos diferentes. Se puede ver estas son tanto fuentes de Google Lato como Merriweather y Montseratt y Cardo. Aquí puedes ver Cursiva y Serif. Las fuentes cursivas son básicamente así, algunas de las fuentes poco elegantes como estas, y Serif es básicamente la fuente con un poco de final o líneas al final de cada letra. Se trata básicamente de fuentes Serif y de medios Sans-Serif sin terminar. Si vamos a este Sans-Serif puedes ver que hay fuentes planas como estas. Se trata de fuentes Sans-Serif. Puedes utilizar estas guías para emparejar las fuentes. Entonces podemos ir a este tip.io/bibliotecas/google, y se puede ver aquí un montón de grandes combinaciones e inspiración para Google. combinación de fuentes para emparejamiento. Se puede ver aquí se utiliza, Raleway. Entonces en el siguiente ejemplo es Proxima Nova y Libre Baskerville y lo que sea. Es una fuente de Google y es una fuente muy popular de Typekit. Entonces tenemos pocas otras combinaciones como esta. Podrás verlos y obtener inspiración e incluso puedes usar estas combinaciones en tus diseños. Después pasar a la siguiente herramienta. Es una herramienta muy útil, Web Font Blender. Ahora, cuál es su propósito puedes seleccionar cualquiera de estos encabezados, líneas o cualquier cosa, y puedes elegir fuente para ello. Al igual que puedo usar a Lato por aquí. Voy a usar Lato 900 para este. Entonces voy a usar Lato regular, tal vez para este y 300, y voy a usar Open Sans para esta zona. Abrir Sans regular. Ahora se puede ver esta es muy buena herramienta. También te puede dar un código para esta mezcla, u opciones que hayas configurado, y también los tamaños en ems y otras cosas, que es puramente hacia el lado de la programación. Ahora, puedes ver aquí hemos combinado Lato y Open Sans, y se ven muy bien juntos. Esta es la combinación que puedes usar, un titular, luego subtítulo, y luego el párrafo. En su mayoría, solo necesitas tres estilos la mayor parte del tiempo. Incluso se pueden combinar sólo dos de estos como, encabezamiento y el texto del párrafo. Ahora bien, esta también es una herramienta muy útil la cual es typewonder.com. Lo que hace es que le des la URL de cualquier sitio web, como que voy a dar mi propio sitio web, learnuxid.com, y haga clic en “Ir”. Después puedes seleccionar cualquier fuente que quieras aplicar en este sitio, Live site. Quiero que mi página web esté en este Arvo. Yo lo voy a usar. Se va a mostrar mi vista previa de página web usando esta fuente. Míralo. Mira y mira, aquí está y no se ve muy bien. Puedo cambiar la fuente si quiero, como ésta. Hay muchas otras fuentes si vas por debajo de esta línea. Voy a elegir este Vollkorn, y lo voy a usar. Veamos qué hace. Creo que ya se ha aplicado. Tenemos otros artículos, y algunas herramientas de ayuda y diferentes combinaciones que muchos diseñadores ya han hecho, para que puedas encontrarlos. Incluiré los enlaces en los recursos para todas estas herramientas y artículos que he mostrado. Estas son pocas combinaciones de Google. Si pasas el cursor sobre ellos, puedes ver el enlace a ese estilo de fuente. Esto es básicamente Raleway. Si miras la esquina inferior izquierda de mi pantalla, puedes ver que se acerca el enlace. Se trata también de dos fuentes, que es básicamente Playfair plus display fuente de Google. Esta es también otra fuente de Google, Quando. Esta es otra tercera forma. Esta es Signika. Es muy difícil combinar tres fuentes diferentes, incluso para las personas que están usando, y tratando de emparejar tipográficas incluso desde años. Yo diría que nos quedemos a dos. Si puedes encontrar una muy buena combinación, que sea adecuada a tu proyecto, las puedes encontrar desde aquí, y puedes utilizarlas. Se puede ver aquí tenemos otro Sans Source Pro. Esto es todo Sans Source Pro fuente única, y con una familia numerosa. Estas son todas las herramientas de ayuda que puedes obtener desde línea. Ahí hay 100daysoffonts.com y también está mostrando muchos experimentos de tipografía geniales. La mayoría son fuentes de Google. Se puede ver a Lora y Roboto, y se están poniendo muy bien juntos. Se trata de combinaciones de maestros de topografía muy profesionales. Creo que es una habilidad muy, muy única y muy difícil de aprender habilidad. Lleva años dominar esta habilidad de combinación de tipografía. Entonces tenemos otro artículo que me gusta mucho. Se trata de The Ultimate Guide Font Peering de canva.com. Incluiré todos estos enlaces, en los recursos. Se puede descargar el PDF y ver estos artículos, y estas herramientas. Aquí se puede ver, tiene alguna introducción a la topografía como Cap-Height, X-Height, Terminal, Baseline. Después tienen diferentes tipos de clases de tipografía como Script Serif, Sans Serif, Slab Serif, Alineación, Jerarquía. Entonces tuvo un montón de diferentes grandes combinaciones. Se puede ver incluso está mostrando las tallas por aquí, así, 57 PT Mayúscula, 27 PT Italic. Podrás utilizar todas estas diferentes combinaciones y seguir leyendo este artículo. Este es muy buen artículo para principiantes. Eso es todo sobre el emparejamiento de fuentes. Espero ver a ustedes mejorando en el diseño y aplicación de estas habilidades tipográficas a sus diseños. 51. Uso de cuadrículas en el diseño web: Hablemos de las rejillas y cómo diseñamos de acuerdo a las rejillas. cuadrículas son básicamente diferentes columnas de ancho específico y tienen un poco de espacio entre ellas. Se puede ver en este ejemplo que te estoy mostrando por aquí, este es un diseño web, aprendizaje, diseño que hice para alguna empresa. Se puede ver cómo lo he trazado todo. Déjame mostrarte cómo usarlos y los conceptos básicos del sistema de cuadrícula. Normalmente en el diseño web o cuando estás diseñando una aplicación móvil, realmente necesitas conocer el sistema de cuadrícula. Te ayuda a alinear y diseñar tu página muy bien y ayuda mucho en el diseño. Veamos cómo vamos a diseñar de acuerdo a las rejillas y cómo crearlas. primer paso es, ¿qué son las rejillas y cuáles son los espacios en todo? Estas son columnas, las estoy mostrando en gris. Son 12 columnas. rejillas tienen diferentes columnas; 12, 16, 24. más populares son 12 y 16. Los espacios entre cada columna, a partir de aquí, notan estos dos en las dos esquinas. Estas son básicamente canaletas. Nosotros los llamamos canaletas. Estos son espacios. Podemos tener alguna separación entre el contenido y las porciones de diseño. Déjame mostrarte un ejemplo donde he usado esto. Si te enfocas en esta zona, puedes ver que este video y esta bala apuntan, están separados por esta canaleta. Se puede ver por aquí que me he ido de esta canaleta. Esta porción está ocupando una, dos, tres, cuatro, cinco, seis columnas. Esta porción también está tomando seis columnas. Cuando un desarrollador intenta convertir tu diseño en algunas cosas de codificación, es muy fácil para ellos seguir esta columna o sistema en el proceso de desarrollo y codificación. Utilizarán seis columnas para esta y seis columnas para ésta. Las rejillas más populares que podrías haber conocido como Bootstrap and Foundation, todas estas. Este es el básico de los sistemas de red. Si miras por aquí, este logotipo de este diseño de página web, está contenido en una, dos, tres columnas, pero también está tocando esta cuarta columna y está dentro de la canaleta de la cuarta columna. Tomará cuatro columnas básicamente. No podemos decir que sólo esté tomando tres columnas. Si algún elemento de diseño está ocupando alguna porción de canaleta, incluirá la siguiente columna en ella. Esto es básicamente, si miras este número de teléfono, puedes ver que está tomando dos columnas, pero en realidad está tomando tres columnas. Debido a que este icono está en la cuneta de la siguiente columna, los codificadores lo codificarán como si tomaran tres columnas para este número de teléfono. Es así como usamos las rejillas. Ahora, estas guías al final, son más pequeñas. Básicamente son márgenes. Normalmente se utilizan en la programación. Si bien diseñamos, no nos vamos a preocupar por los márgenes, pero no vamos a conseguir nada en estos. Estaremos tocando sólo el lado izquierdo y derecho de las columnas o entre ellas. Ahora bien, si escondo esto, se puede ver el diseño real. Déjame esconder los guías. Ese fue el diseño real. Ahora puedes ver que realmente puede verse bien con la ayuda de guías. Si los enciendo, se puede ver esta porción. He usado una, dos, tres, cuatro, cinco, seis, siete, ocho columnas para esta área, y una, dos, tres, cuatro columnas para esta área. Aquí he usado esta columna para conseguir más espacio por aquí. Esto es un truco. No te limites si ves columna por aquí, columna de cuadrícula y no intentes usarla siempre. Podría dejarlo aquí por más espacio. Se puede ver que hay mucho espacio entre esta área de contenido y esta área de contenido. Esto es lo básico del sistema de red. Estos son canaletas entre ellos. Son, supongo 30 pixeles. Se puede ver en el título por aquí, margen de 15 píxeles y la canaleta es de 30 píxeles. Todo esto se trata de rejillas y cómo usarlas. Cuáles son los fundamentos de las rejillas que tenemos columnas, canaletas, y márgenes en la cuadrícula a ambos lados, y márgenes en la cuadrícula a ambos lados,lados derecho e izquierdo. Pasemos a la siguiente conferencia donde te mostraré cómo crear estas rejillas en Photoshop y usando algunas extensiones. Pasemos a la siguiente conferencia. 52. Crear cuadrículas en Photoshop: En la última conferencia, aprendimos sobre rejillas y cómo diseñar usando rejillas, como diseñar cosas diferentes usando diferentes tamaños de columna. En esta lección, te voy a mostrar cómo crear diferentes tipos y diferentes cuadrículas usando Photoshop, déjame usar primero el sistema de cuadrícula por defecto de Photoshop. Ahora, lo que vamos a usar es que vamos a usar un documento personalizado tamaño 1280, que es común en el diseño web, y la altura es de 1000, 72, no colores maneje este documento, presiona “Ok”. Ahora aquí tenemos nuestro tablero de arte. Ahora, vamos a utilizar el sistema de guía por defecto de Photoshop para crear la cuadrícula. Nueva Guide Layout, y vamos a usar 12 columnas con las canaletas de 20 pixels, márgenes si realmente los necesitamos, puedes usar márgenes por aquí o puedes dejarlos fuera. Entonces voy a usar cero margen superior, cero margen inferior, y izquierda 10 y derecha 10, presiona “Ok”, ahora tu sistema de cuadrícula está listo. Si realmente quieres mejorarlo, puedes agregar diferentes rectángulos por aquí así y copiarlos y duplicarlos en la tecla alt porque esto realmente puede ayudar a tu diseño. Al final, van a despejar estas guías, guías azules. De lo que se va a quedar al final serán estas líneas verdes, estas columnas. Copiarlos así, voy a seleccionarlos todos y fusionarlos en un solo sistema de cuadrícula, y aquí tenemos nuestro sistema de cuadrícula, ahora puedes despejar tus guías, “Guías claras”. Es así como diseñamos una cuadrícula, es de 12 columnas y con canalón de 20 píxeles y margen de 10 píxeles. Entonces ahora, si tratamos de diseñar algo, estaremos diseñando como logo va a estar aquí. Permítanme simplemente cambiar el color, y para nuestro ejemplo, navegación estará aquí así. Entonces así es como diseñamos las cosas, estoy usando dos columnas para este logotipo y 10 columnas para esta navegación, y lo mismo va para otros elementos de tu página web. Esta es una forma de crear rejillas, luego tenemos este plugin GuideGuide, primero era gratis ahora lo conseguí por solo $5, y me gusta mucho, es muy bonito uno. Se pueden guardar las rejillas, diferentes rejillas, y se pueden crear, y se pueden guardar sus conjuntos. Entonces esta es la extensión del plugin GuideGuide, y voy a usar solo estas 12 columnas, estas son número de columnas que puedes ver, tienen diferentes campos, márgenes, arriba, abajo, diferentes márgenes, luego columnas, filas. No voy a entrar en detalles de sistema grid, voy a entrar en detalle en mi próximo curso, que es sobre diseño web muy avanzado y diferentes técnicas de diseño web. En ese curso, hablaré más a fondo de rejillas y verticales y columna son ambas rejillas. Entonces en este momento nos vamos a quedar con 12 columnas, y como no vamos a usar este ancho, no sabemos el ancho, así que solo usamos 12 columnas. Hagamos 16 columnas esta vez. Voy a conseguir el espacio de 15 píxeles por aquí, y voy a presionar “Añadir guías”. Ahora, tenemos sistema de cuadrícula de 16 columnas con estos brecha de 15 píxeles, y supongo que podemos guardarlo, “Guardar cuadrícula”. Vamos a guardarlo 16 columna, canalón de 15 píxeles, “Guardar cuadrícula”. Puedes ver por aquí en mi Guide Guardado puedes ver 16 columna, canalón de 15 píxeles, así que esta es una herramienta muy útil que puedes crear y guardar muchos sistemas de cuadrícula diferentes. Ahora, puedes ver he guardado muchas guías diferentes que he creado, por lo que puedes crear cualquier tipo de guía y guardarla por aquí. Hay pocos otros usos de este plugin que son borde izquierdo, punto medio, borde derecho, guías claras, puedes borrar fácilmente las guías con este botón por aquí. Déjame mostrarte las otras cosas que podemos hacer con este plugin, déjame solo seleccionar este rectángulo y obtener la selección alrededor de él, entonces fácilmente podemos tener guías: punto medio, izquierda, derecha, arriba, punto medio, abajo, así que este es otro uso de este plugin, y es un plugin muy bonito, GuideGuide. Estas son dos formas en las que puedes crear guías y cuadrículas en Photoshop usando Photoshop default, new guide, y new guide layout system, y también puedes usar este plugin GuideGuide. Eso fue todo sobre cómo crear guías y cuadrículas en Photoshop, y pasemos a algunas nuevas conferencias impresionantes. 53. Desafío de creación de botones de sombras suave: Hola a todos. Este es mi primer reto para todos mis alumnos. Básicamente necesitas crear un botón similar a éste y te voy a dar algunas insinuaciones, que básicamente usé dos sombras de gota y un trazo. Entonces un efecto de trazo y dos sombras de gota. Ahora, que comience el reto. 54. Solución de diseño de botones de sombras suave: Esta es la solución para el reto. Voy a hacer de nuevo este botón frente a ti para que puedas aprender cómo usé sombras de doble gota, y este efecto de trazo, y cómo hice este botón. Empecemos. En primer lugar vamos a utilizar una herramienta de forma redondeada rectángulo. Podemos usar el radio a algo así como ocho tal vez, y simplemente dibujar un rectángulo por aquí, esto es suficiente. Ahora, voy a elegir un poco de color grisáceo o algo más cercano al gris azulado, como éste. Ahora, nuestra capa base se completa. He recortado algo por aquí, así que esto es básicamente un rectángulo. Consigue un rectángulo por aquí, y vamos a crear un rectángulo como este, y vamos a cambiar su color por algo. Estos son básicamente tonalidad, saturación, y brillo. Normalmente uso estos para obtener diferentes tonos de colores, así que voy a reducir el brillo que es la parte luminosa de nuestro color, o tal vez podamos ir de, sí, así. Ahora, voy a usar máscara de recorte, alt y click entre estas dos capas. Ahora tenemos nuestra máscara de recorte así. Este botón estaba en algún otro color, estoy creando esto en un poco obsidiana y médica. Podría haber visto este color en las compañías médicas y médicas. Ahora, básicamente nuestra base está completa, ahora voy a agregar algunos estilos. Este era nuestro contenedor, para base de contenedor podemos nombrarlo. Puedes hacer click por aquí el pequeño icono de Fx y añadir drop, comenzando drop shadow. Esta primera sombra de gota es básicamente la opacidad es de 20 por ciento. Si trato de aumentar la opacidad se puede ver que nuestra sombra se está oscureciendo. Entonces tendremos algo como esto, 24 o tal vez 20 está bien. Entonces la distancia es de 21 píxeles. Si reduzco la distancia, se puede ver que tenemos sombras en la parte superior de esta capa que realmente no queremos. Queremos sólo la sombra en la parte inferior. Voy a aumentar esta distancia hasta el momento tenga la sensación de que se ve bien, 15 van a estar bien. Ahora, voy a añadir otra sombra, haga clic aquí. Básicamente lo que hice aquí es que agregué otra sombra que estaba un poco más cerca de la capa, y un poco más opaca que transparente. Voy a aumentar un poco su opacidad. También podemos aumentar la distancia. Si escondo esta capa solo puedes ver lo que le pasa a nuestra sombra. Ahora se ha ido, y ahora está encendido. Este es básicamente el efecto que estamos buscando. Básicamente estamos agregando dos sombras de gota aquí. Uno es un poco más oscuro y más cerca de la capa, uno es un poco más claro y tiene un buen lapso alrededor de la capa de forma, por lo que básicamente es una sombra ancha. Se puede ver el tamaño es de 25 y la distancia es de 15 por ciento. Es así como hemos añadido estas sombras, y vamos a reducir su opacidad a 25, reducir la distancia un poco más. Ahora es un poco suave. A lo mejor cinco porque estamos poniendo sombra en la parte superior, y vamos a reducir esto. Hagámoslo 10. Ahora se ve casi igual. También puedes cambiar este color por aquí para la sombra. Podemos tener un gris claro, puedes verlo solo cambia su efecto. Si no quieres sombra muy dura, puedes usar algún otro color como ese. Básicamente, se trata de controlar esta opacidad, esta distancia y tamaño. Si usamos este spread, puedes ver que básicamente está haciendo de esta sombra un poco sólida, así que realmente no queremos. No vamos a usar el spread ahora mismo. Presiona “Ok” y ahora nos queda sólo con una cosa que es básicamente el trazo. Voy a dar click en estos efectos y voy a añadir un trazo. Voy a escoger el color del trazo de este color, o puedo conseguir un color un poco más oscuro al reducir el brillo al 85 por ciento, tal vez el 90 por ciento es lo suficientemente bueno. 90 por ciento se ve bien. Ahora he creado este efecto de sombra suave, ahora vamos a añadir texto por aquí. Básicamente lo que hice es que utilicé este plugin de fuente impresionante para conseguir este ícono por aquí. Podemos usar cualquier icono como tal vez este icono de ambulancia hará el truco. Ahora puedes ver en cuanto agregué esto entre estas dos capas, nuestra máscara de recorte se ha ido, por eso está pasando esto. Voy a arrastrar este icono sobre la parte superior, voy a volver a crear la máscara de recorte. Voy a “Control D” a transformar, y voy a presionar “Shift” y “Alt” para aumentar el tamaño, estoy sosteniendo la tecla Mayús y Alt. Supongo que esto es lo suficientemente bueno. Voy a moverlo en el centro. Ahora también podemos elegir un color un poco aburrido porque se está poniendo muy afilado a nuestros ojos, 50 por ciento así. Simplemente escojo este color y reduzco el brillo al 50 por ciento o tal vez más, podemos ir al 30 por ciento así o tal vez al 25 por ciento. Supongo que el 30 por ciento fue lo suficientemente bueno. Ahora se hace la parte del icono, ahora voy a añadir algo de texto por aquí. Estoy usando este estilo de fuente abierto sin regular, regular, y estoy usando este tamaño de fuente de 36 píxeles. Puedes presionar “Shift” para que quede justo dentro de esta caja. Presione “Shift” y haga clic, y vamos a llamar a una ambulancia, ambulancia es buena. Básicamente nuestro texto es un poco más largo por lo que podemos aumentar el tamaño de este contenedor base, “Control D” y voy a arrastrar esta esquina por aquí así. Voy a hacer clic en este, “Llama a una ambulancia”. Ahora aquí nuestro problema básico es la alineación. Usemos algunas guías para alinear estos. Voy a dar click en “Control y colon” para sacar mis guías, voy a eliminar esto. Voy a dar click en este, “Control” click. No estoy usando auto select, así que estoy controlando haciendo clic en cualquier capa para seleccionarlos. Voy a controlar click en esto, y voy a arrastrar la capa así. Ahora, básicamente vamos a poner algunas guías para alinear básicamente nuestro icono y nuestro texto en medio de este botón. He puesto uno por aquí, y otro necesito por aquí, así. Usemos nuestro plug-in por aquí que fue QuickGuide, y voy a crear las guías alrededor de este botón rápidamente. Ahora básicamente está llegando a la sombra también, así que apaguemos estos efectos y creemos estos. Ahora bien, estos son buenos. Yo estoy encendiendo estos efectos. Tenemos estas dos porciones por aquí, voy a presionar “M” o básicamente esta herramienta para marquesina. Voy a seleccionar esta herramienta de marquesina rectangular, y vamos a hacer una selección entre esto. Tenemos una selección y luego vamos a dar click en este Llamar a una ambulancia. Ahora tenemos dos básicamente objetos para alinear. Vamos a alinear este Llamar a una ambulancia de acuerdo a esta selección. Voy a presionar “V” y dar clic en este ícono del medio, ahora es alinear, también este. Vamos a crear otra selección por aquí, y vamos a seleccionar este ícono de fa-ambulancia y lo vamos a alinear en el medio. Supongo que es casi en el medio, voy a ver. No, no está en medio. Supongo que tenemos una pauta que no es precisa, que es ésta, supongo. Ahora ya estamos bien para irnos. Puedo seleccionar así y presionar “V” y alinearme en el medio. A veces incluso si lo alinearas de acuerdo a tus matemáticas, no parece centralizado a tus ojos ni a tus ojos humanos. Para hacerlo visualmente centrado, puedes ajustarlo como, supongo que tengo que moverlo un píxel o tal vez dos píxeles por aquí porque esta forma es básicamente diferente. Ahora supongo que se ve en el medio, casi en el medio, y hemos completado este ejercicio de sombras suaves. Espero que ustedes hayan aprendido algo nuevo de aquí. Pasemos a la siguiente conferencia. 55. Desafío de diseño de botones 3D: De acuerdo chicos, aquí hay otro reto para ustedes. También es un botón pero es un botón 3D. Trata de crear algo similar a esto. Te voy a dar algunas insinuaciones por aquí. Esta es sombra y se puede ver una sombra muy ligera y sutil por aquí. He usado dos sombras. También hay una capa muy delgada de trazo dentro del trazo y esta es solo una línea que puedes usar desde aquí, Line Tool. Tan sólo una línea con el color, que es un poco más oscuro que este fondo. Estas son todas las insinuaciones y espero que puedan crear algo similar a esto. Pronto nos publicaré una solución en otro video. Por lo que puedes crear fácilmente ese tipo de patrones. Espero que hayan disfrutado de este reto y déjame ver qué pueden lograr ustedes chicos y mostrarme sus vínculos y discusión y supongo que eso es todo de este reto. 56. Efecto prensado en Photoshop: Hola a todos. El día de hoy vamos a crear este efecto prensado. Es muy importante en todos los diseños de UI para mostrar hay estados prensados de botones, y se utiliza en muchos lugares. Siempre debes dominar esta técnica. Vamos a crear esto rápidamente. Abre un nuevo archivo. Voy a abrir éste, Alt, eliminar para llenar el lienzo con el color de primer plano. Vamos a utilizar esta herramienta de rectángulo redondeado para dibujar un rectángulo redondeado así. Voy a crear uno un poco más grande para que puedas verlo fácilmente. Yo he creado éste. Cambiemos el color de fondo. Estoy usando un campo de color sólido para el fondo. Cámbialo por algo como éste. Ahora hemos creado este rectángulo redondeado. Vamos a crear unas guías a su alrededor así. Ahora, dibuja otro rectángulo redondeado desde el centro hasta esta sección. Esto se va a apretar. En las propiedades, desmarque esta, y vamos a quitar la izquierda a la redonda para ésta. Estamos bien para ir. Cambiemos este botón por algo así, tal vez un look azul más nítido se verá bien. Ahora, nuestra estructura base está lista. Vamos a crear algunos efectos a su alrededor y ponerle algunos estilos de capa. Primero pongamos algo de texto sobre él. El texto debería ser algo. Voy a mostrar otra técnica. Voy, seleccionando el texto en negrita y cambiando su tamaño simultáneamente así. Esta es otra técnica, muchos diseñadores no lo saben. Los vamos a alinear de nuevo con nuestros guías así. Alt Control H, hay algo extraño. Ahora, aquí éste, lo siento. Selecciona esto y lo vamos a volver a alinear en el medio. Eso es todo. Ahora vamos a cambiar este prensado a color blanco solo para asegurarnos de que se vea bien. Quitar las guías, ocultar las guías. En primer lugar vamos a aplicar estilos a esta capa interior. Esta es la capa interior, vamos a aplicar estilos de capa en una sombra. Ahora en la sombra interior, asegúrate de que has seleccionado multiplicar y el color es negro. No uses ningún otro color. También puedes usar sombra más oscura para este azul, pero supongo que el negro es mejor. Entonces usa esta opacidad. Si quieres un efecto más oscuro, puedes ir de aquí así. A lo mejor deberíamos ponerlo al 50 por ciento. Distancia, depende de ti, puedes elegir cualquier distancia, pero no vayas demasiado lejos porque cambiará tu efecto. A veces no se verá presionado. Mantenerlo corto como cinco o tres píxeles es más que suficiente. El tamaño borroso debe ser un poco más alto de este tamaño. Hazlo nueve o 10 o algo así más cerca de éste. No necesitamos otras cosas, luz debe ser desde el ángulo de 90 grados. Presione “OK”, y esto está casi a la mitad de nuestro efecto prensado. Ahora, vamos a crear otra cosa. Ahora, cuando la luz cae desde aquí, debería tener algo de brillo en esta zona. Para crear esto, vamos a seleccionar esta capa, la otra que fue el contenedor en realidad, y vamos a aplicar algunos estilos sobre ella. En primer lugar vamos a aplicar ictus. Ten en cuenta que el trazo debe ser más oscuro que este fondo. Voy a seleccionar este fondo, y voy a reducir el brillo al 65 por ciento. Ahora nuestro derrame cerebral está hecho. Ahora vayamos a la sombra de gota. Ahora no necesitamos esta luz global porque la vamos a usar para del otro lado. Noventa grados, sí, lo vamos a usar en la parte superior, y vamos a usar el color blanco, y quitar esto multiplicar, vamos a usarlo de forma normal. Ahora se puede ver cómo se está consiguiendo el brillo por aquí en esta zona. Entonces lo vamos a reducir porque se está consiguiendo un brillo muy grande. Uno para éste y dos para éste. Supongo que esto es lo suficientemente bueno. Uno para la distancia y dos para el tamaño borroso. Así es básicamente como vamos a crear esta luz prensada por aquí. Esta cosa se veía realmente presionada. Ahora ya casi terminamos con este efecto. Déjame mostrarte acercando, puedes ver cómo funciona esto. Estamos mostrando una línea de trazo muy delgada a su alrededor y luego estamos mostrando brillo por aquí, y en una sombra por aquí. Si quieres reducir la sombra interna, puedes reducirla a tres píxeles. Voy a alejarme. Se puede ver cómo funciona este efecto prensado. Todo esto se trata de crear estos efectos presionados y botones presionados y estados prensados para diferentes objetos. Tiene mucho uso UI. Nos vemos en la próxima conferencia. 57. Diseño de encabezados moderno parte 1: hoy vamos a diseñar estos encabezados de aspecto moderno. Empecemos. Voy a abrir un nuevo archivo, o puedes abrir un nuevo tablero de arte. Voy a establecer el ancho y la altura al máximo, 1920, y establecer la altura en algo así como 700 píxeles. Aquí está nuestro tablero de arte. Ahora voy a utilizar un archivo gratuito, que he descargado de este sitio, unsplash.com. También puedes descargar muchas imágenes gratis desde aquí. Ahora, déjame mostrarte las imágenes que ya he descargado. El imagen es éste, 6H. Ahora lo voy a arrastrar dentro de mi lienzo, así. Ahora para contener esta imagen necesito algunos contenedores, así que vamos a usar algún contenedor por aquí. Dibujemos nuestro contenedor con esta herramienta de rectángulo. Un solo clic en este tablero de arte por aquí, ingresa el ancho 1920 y la altura 700. Vamos a usar el contenedor de tamaño completo, así. Presione “V” y mueva este contenedor por aquí así. Denle el nombre contenedor en el panel Capas. Ahora mueve esta imagen por encima este contenedor porque vamos a recortarla dentro de este contenedor. Déjame cambiar su color para que sea visible. Ahora selecciona las capas anteriores, que básicamente es la capa de imagen e intenta redimensionarla así. Eso es todo. Ahora vamos a recortar esta imagen para poder moverla dentro de este contenedor. Haga clic en la tecla “Alt” u “Opción” si está en un Mac. Si estás en un PC, haz clic en “Alt” y pulsa entre estos, haz clic una vez. Ahora éste está recortado. Puedo moverlo por aquí así. Si realmente necesitamos ajustarlo, podríamos moverlo así, arriba o abajo. Ahora, el segundo paso es que vamos a utilizar nuestra superposición de gradiente para crear algún área oscura o blanca para que nuestro texto se muestre fácilmente y sea legible en nuestro encabezado moderno. Hagámoslo. Haga clic en el contenedor y haga clic en el icono de fx. Vamos a utilizar la superposición de gradiente. Ten en cuenta que vamos a multiplicar el gradiente. Por lo que agregará algunos de sus colores en el fondo anterior, que ya está aquí. Ahora configura el modo de mezcla para que se multiplique. Al llegar al gradiente, haga clic en él. Ahora lo que estoy usando es básicamente un color gris o gris oscuro cerca del negro, y estoy usando su opacidad al 100 por ciento. Del otro lado estoy usando el color blanco y la opacidad es cero. Básicamente es un gradiente de negro a transparente. Eso es lo que realmente necesitaba mostrarte. Ahora lo que esto básicamente haciendo es, va a crear algunas áreas por aquí para escribir fácilmente el texto por aquí. Ahora, estos son los ajustes. Mantenga el ángulo a 90 y estilo a lineal. Eso es todo. Vamos a aplicar este estilo de capa, que es la superposición de gradiente. Ahora bien, esta superposición de gradiente es muy popular. Muchos diseñadores lo usan la mayor parte del tiempo. Esta es una técnica muy útil cuando se tiene que crear algunas porciones o el encabezado donde se desea escribir el texto. En ocasiones, el texto podría no ser visible o no ser visible o legible debido al color de fondo. Por lo que utilizamos superposiciones de gradiente para lograr esta tarea. Escojamos la tipografía. Estoy usando Font negrita Montserrat y Source Sans Pro para este ejercicio. Ahora vamos a seleccionar Mons tipo por aquí. M-O-N, vamos a ver dónde está. Aquí está, Montserrat audaz. Ahora voy a arrastrar por aquí. Ese es otro problema. Presione “Shift” y haga clic aquí para salir de este problema de Photoshop y escribir dentro de los límites de capa. Pasemos al camino del éxito. No se puede ver el texto porque la capa está detrás de la imagen. Subiremos la imagen y cambiemos su color a un negro más oscuro, algo así. Déjame ver los textos que realmente usé en mi archivo de ejercicios, que estaba volando en el camino del éxito. Fue volar en el camino del éxito. Por favor perdona mi memoria, soy persona de memoria muy corta. De verdad olvido muchas cosas. Vuela en el camino del éxito. Ahora hagámoslo regular y vamos a usar el alineamiento medio. Ahora, muévelo en el centro de la imagen. Control A y Control Alt y H para horizontal, esta fue nuestra tecla de método abreviado personalizada, así que tenlo en cuenta. Ahora vamos a establecer algunos de los tamaños. Esta es capa ficticia. Hacer doble clic y ver qué tamaño nos va a ayudar por aquí. Creo que 48 píxeles es más que suficiente. Si necesitamos cambiar la altura de la línea, podemos cambiarla aquí así. Supongo que 78 se ve perfecto. Ahora crea un cuadro delimitador a su alrededor como lo tenemos en nuestro archivo de ejercicios, crea algo así. Sólo un rectángulo por aquí. Ahora vamos a aplicar pocos estilos, que básicamente es trazo a este rectángulo. Simplemente deja el trazo a algo así como cinco o tal vez ocho píxeles. La posición debe estar fuera, no dentro, porque si establecemos el exterior muestra un rectángulo algo redondeado. No necesitamos ahora mismo rectángulo redondeado, necesitamos un rectángulo perfecto con bordes. Ahora lo hemos configurado. Ahora vamos a ir a este relleno y reducirlo a cero. Ahora tenemos nuestro rectángulo bordeado transparente por aquí. 58. Diseño de encabezados moderno parte 2: Eso es todo, y ahora vamos a usar un color básico más. Podrás ver nuestro botón principal de llamada a la acción. Déjame dibujar un botón por aquí así. Vamos a poner su color en amarillo. Hagamos que este amarillo sea un poco más claro en color, moviéndonos a esta zona por aquí. Algo así. De eso se trata. Ahora, agreguemos algo de sombra a este patrón, sombra, y usemos estos ajustes. Multiplicar, 35 por ciento de opacidad, distancia tres, y tamaño siete por ciento. Nuestro desenfoque de sombras se extiende a siete píxeles alrededor de la parte inferior y la distancia es de tres píxeles. Si quieres reducirlo, puedes reducirlo como cinco o algo así. Ahora que la sombra está hecha, tecleemos algo en ella. Obtén éxito ahora. Vamos a reducir ese tamaño de fuente. Lo vamos a reducir usando nuestra fuente por aquí, que es más fácil y más rápido supongo que usar la tecla de acceso directo. Yo he establecido su tamaño en 24 pixel, y estamos bien para irnos ahora. A lo mejor podemos hacerlo más oscuro, tono negro. Ahora, selecciona estas dos capas y Control G, agruparlas , y crea un botón. Nombramos todas las capas. Cambie el nombre a borde, algo así. Eso es todo por esta parte. Ahora pasaré a la siguiente parte que estaba por aquí y por aquí. Esto es básicamente, vamos a usar el color blanco por aquí. A lo mejor blanco completo o algo así en un color blanco grisáceo. Voy a usar la fuente que es Source Sans Pro Regular, supongo, tal vez Light. Únete al éxito de otros 14,532 idiotas igual que tú. Esa es una buena línea para unirse a la comunidad. Ahora, una cosa que nos perdimos en el inicio, que básicamente es conseguir nuestros márgenes, espacio alrededor de nuestro diseño. Voy a dibujar eso rápidamente. Para eso, haga clic en “Control”. Haga clic en el contenedor y haga clic aquí, “QuickGuide”, haga clic en el medio, para crear guías a su alrededor. Entonces vamos a usar Griddify y a ir a Spacing. Voy a usar 60 píxeles alrededor de mi diseño así. Voy a cambiar la dirección a arriba y abajo así. Esto es básicamente para poner en línea tu diseño. Ahora voy a mover mi texto de acuerdo a estos. Se puede ver cómo he usado este Griddify y estos dos plug-ins a mi diseño, Control J y copiar los mismos textos por aquí y moverlo por aquí, así. Ahora vamos a añadir una foto por aquí que fue alguien así, lee la última historia del éxito de John. Primero reformulémoslo. Leamos la historia de éxito de John en nuestra plataforma. Ahora eso se ve bien. Para la imagen, vamos a utilizar un sitio web que se llama UI Faces. Supongo que ahí está el nombre, uifaces.com. Acude a esta página web y utiliza una imagen desde aquí. Usemos este. Yo he usado este. Puedes usar cualquier otro. Puedes volver atrás y arrastrar esta imagen a Photoshop así. Vamos a moverlo por aquí. Ahora para contener esta imagen, también necesitamos una herramienta Eclipse o un contenedor Eclipse. Arrástrelo así y vamos a mantener esto dentro de este eclipse. Nada más. Simplemente necesitamos ajustar nuestro eclipse un poco más grande. Ajusta esta imagen. Un consejo más. Crea algún objeto inteligente a partir de esta imagen así. He presionado Control Alt F5 para convertir esta imagen en un objeto inteligente. Hagámoslo un poco más corto o más pequeño. No más corto, tal vez esta persona podría enojarse, para hacerse más corto. A lo mejor así, estoy presionando Shift y Alt con él, así. Ahora lo vamos a alinear en el medio, así que agruparlos y crear un grupo de imágenes. Voy a alinearlo en el medio así. Ocultemos las capas Control Colón. Ahora, aquí tenemos el problema de que nuestra imagen tenga menos espacio en estas áreas. Vamos a llegar a ese punto. Reduzca un poco esto. Mueve un poco el botón hacia arriba, así. Además, reduce tu trazo a cinco píxeles y el color a un gris un poco más oscuro en lugar de gris azulado. Reduzca esta altura de botón, que me parece un poco extraño. Que sea 85 así. Además, vamos a ver si los bordes necesitan ser redondeados así. Sí, redondez de cuatro píxeles en tus propiedades. Establece esto para el botón. Supongo que eso es más como lo que diseñamos. Si realmente necesitas ver cómo se ve nuestro diseño, puedes ver que he dejado espacios iguales o similares alrededor de mi diseño, que se llama márgenes. Se trata de 60 píxeles, 60 píxeles, 60 píxeles y 60 píxeles. Solo movamos este borde y el botón un poco dentro de nuestra zona de 60 píxeles así. Supongo que aún se siente un poco más amplio para mí. Hagámoslo más corto y mueva el botón un poco hacia arriba así. En la siguiente lección, estaremos haciendo la siguiente variación de este diseño moderno. Nos vemos en la próxima conferencia. 59. Variación de diseño de encabezados modernos: Ahora vamos a crear una variación de este encabezado con botón redondeado por aquí. Empecemos con quitar primero esta frontera. Vamos a eliminarlo. Por lo que presiona “Eliminar” en tu teclado seleccionando esta capa y selecciona ésta, y vamos a hacer que sea botón redondeado. Usa algún menú como 30 pixel por aquí. Ahora, tal vez más de 30, arrástralo así. Cincuenta píxeles serán suficientes. Se establece en 42.5 y está redondeado en este momento. Ahora primero trabaja en este botón. Vamos a aplicar algunos estilos como este, sombra interior. Podemos lograr el look de botón 3D con sombra interior y sombra de gota. Voy a usar sombra interior ahora mismo. Desmarque esta luz global. Mueve la luz al fondo menos 90 y el tamaño a cero. Se puede ver que ya se está dando forma en botón 3D, por lo que la distancia a cinco así. Ahora vamos a usar algún color, tal vez en la sombra naranja, tal vez por aquí, un poco más oscuro. Supongo que eso es bueno. Muévelo al 40 por ciento. Ahora puedes ver cómo he usado la sombra interior para crear un botón de aspecto 3D. Esta es una técnica muy útil, ten en cuenta. Ahora voy a alinear el texto dentro del medio. Ahora si ven he alineado el texto en el medio horizontal y verticalmente, pero el problema son nuestros efectos 3D. Vamos a mover el texto arriba, así, y tal vez cambiarlo de color a un poco grisáceo, así. A lo mejor podemos aumentar el tamaño del botón, pulsar “Shift” y añadir así. Ahora se ve mejor. También podemos cambiar el espaciado entre las letras a cero, hacerlo un poco menos ancho. Este es básicamente el espaciado entre las letras. Se puede ver si lo arrastro por aquí y lo arrastro de nuevo a cero. Eso es todo. Ahora vamos a mover esta capa de texto. Volvamos a encender nuestros guías. Mueve este texto medio por aquí en la parte superior, así, o tal vez un poco más bajo que esto. Cambiemos este liderado o básicamente la altura de la línea. Se ve bien, 62 puede ser lo suficientemente bueno. No, 66 fue mejor. Ahora voy a añadir una línea de texto por aquí que, ayudamos a la gente a dar forma a sus transportistas. Eliminemos esto por ahora y creemos una capa de párrafo de texto arrastrándola así. Eso sería más fácil de controlar. Conformamos destinos de las personas alterando su ADN y otras cosas relacionadas. Ahora cambia su tamaño a 18. No, 18 es un poco más pequeño, 24 estará bien, supongo. Ahora tenemos que cambiar su color a un gris un poco más bajo, por lo que se ve un poco más atractivo y un poco menos importante. También podemos usar texto blanco por aquí, supongo que no. No podemos usar texto blanco se ve horrible. Primero solo cambiemos la altura de la línea. Necesitamos algo similar a esto, 32 pixel se ve bien. Muévete un poco más en el medio, así. Cambia su fuente a Source Sans Pro Regular, así, y cambiamos tu carrera hacia arriba. Esa es una intro de dos líneas fuera de tu sitio. Ahora puedes manejar colores desde aquí, así, o tal vez desde aquí, o aquí. Se puede ver cómo estoy usando la imagen para obtener algunos tonos de color para usar en mi diseño. Se ven realmente bien si usas algo de este fondo. Este es otro truco, tal vez este color se ve bien. Vamos a centrarlo dentro de nuestro Lienzo. Presiona “Control A”, “Control, Alt, H”, y eso es todo. Presionar “Control D.” Ahora veo un poco de problemas en mi espaciado. Vamos a moverlo un poco arriba, 52 y que todo atrevido. Presioné “Control, Alt, Z” para dar un paso atrás. Necesito que sea así. Ahora retírelo a 62, y muévelo un poco hacia abajo. Quitad vuestras fronteras, y casi hemos cumplido nuestra tarea. Simplemente mueve el botón un poco hacia abajo. También mueve esto un poco hacia abajo así. Veamos cuántos píxeles estamos lejos de este top, casi 1, 2, 3, 4, 5. Son lo suficientemente buenos, 1, 2, 3, 4 y 5. Tenemos espacio casi parejo, y si realmente necesitamos mover esto un poco hacia abajo, deberíamos mover todo hacia abajo así. Mueve este texto un poco hacia abajo así. Creo que se ve bien así. Ahora hemos creado nuestro segundo encabezado moderno, y hemos discutido algunas nuevas técnicas como obtener color de tu imagen de fondo y usar la sombra interior para crear este botón 3D, supongo. Supongo que realmente habrías disfrutado de esta conferencia. Muchos estudiantes esperaban este. Estaré haciendo mucho en el futuro. Pasemos a las próximas conferencias. 60. Efectos de superposición de color para el área de héroe: En esta lección, vamos a crear este encabezado moderno de aspecto impresionante. Otra, pero ésta va a ser con otra técnica que básicamente es la superposición de color. Vamos a usar capa de ajuste de superposición de color para crear este efecto impresionante. Empecemos a crear este encabezado. Abrir un nuevo archivo. Voy a utilizar esta mesa de trabajo Web Más Común usado. Voy a usar talla de 700 para ello. Presiona “Ok”. Ahora tenemos el tablero de arte. Ahora vamos a crear otra capa, el tamaño de nuestra mesa de trabajo para nuestro contenedor para la imagen y el fondo del encabezado. Creamos éste. Hagámoslo del tamaño de nuestro lienzo así. Ahora he usado este sitio web llamado picjumbo.com para las imágenes gratuitas. Puedes usarlo y descargar cualquier imagen gratuita desde aquí para utilizarla en este ejercicio. Ya he descargado uno de ellos, que es éste. Entonces lo voy a arrastrar por aquí en mi Photoshop, así. Voy a ampliarlo un poco para que así me guste. Yo lo voy a arrastrar hacia abajo y lo vamos a recortar dentro de nuestro contenedor. A ver, nombra contenedor y haz su color a blanco. Lo que vamos a hacer es que vamos a superponer otro color sobre este fondo para crear este efecto. Por lo que vamos a usar la superposición de color en este contenedor. Puedes usarlo desde aquí. Vaya a estas capas de ajuste y seleccione Color sólido. Presiona “Ok”. Vamos a usar algún efecto como tal vez Multiplicar, Normal y cambiar la opacidad al 90 por ciento. Es tu propia elección. Puedes usar cualquiera, cualquier opacidad por aquí. Haga clic en cualquier color oscuro así. Es así como creamos este efecto. Podemos bajar más. El ochenta por ciento es lo suficientemente bueno. También podemos cambiar el color de aquí a un tono un poco más oscuro, azul. Ahora se hace nuestro antecedente. Ahora podemos seguir y conseguir un archivo de logotipo por aquí y pocas cosas más. He usado dos fuentes tipografía. Una es Work Sans Regular, también hay Google Font, otra es Montserrat Bold. Aquí vamos a escribir nuestro título. Escribamos el título por aquí. Déjame ver lo que escribí sobre el diseño original, Aprende a crear Prototipos de papel. Déjame reformularlo, Aprende a crear, y luego en el siguiente, lo voy a duplicar, Prototipos de papel. En los prototipos de papel, utilizo Montserrat Bold. Hagamos que sea talla a 64 y tal vez 48. Cuarenta y ocho es lo suficientemente bueno y sólo actualicemos este tamaño a 32 y 48. Yo los voy a alinear entre sí, voy a seleccionar a ambos, moviéndolos alrededor. Una cosa más necesito conseguir algunos márgenes en el lado izquierdo y derecho. Entonces voy a usar Griddify 130 pixeles en ambos lados así. Ahora Control D para anular la selección, y voy a alinear estos con esta línea. Voy a copiar el mismo texto por aquí, que utilicé en la imagen original. Ahora voy a volver a seleccionar texto y voy a arrastrarlo así y pegarlo por aquí. Entonces esta es Montserrat Regular, fuente de 16 píxeles, solo para tener en cuenta, y esta es de 32 o puedes aumentarla a 36 también así. No era una fuente regular sino una fuente ligera. Nosotros hemos creado nuestro texto. Vamos a crear nuestro botón de llamada a la acción por aquí. Entonces vamos a usar un botón fantasma o simplemente un botón blanco por aquí, solo para tener un buen enfoque en esta área. Entonces usemos nuestro, de nuevo, Work Sans Regular 20 pixel y vamos a empezar a aprender. Simplemente cambia su color a algún color afilado como este naranja. Voy a usarlo, alinearlo, seleccionar las dos capas, alinearlo con Alt Control H y Alt Control V, solo moverlo un poco hacia abajo, un paso hacia abajo. Seleccione ambas capas y alinéela con esta línea del margen izquierdo. Además, se ve un poco menos espacio aquí. Simplemente deja que el fondo y expanda así este ancho. Ahora nuestro botón está listo. Arrastremos un poco de logo por aquí. Voy a utilizar mi Alt Control F10. Por lo que ahora estoy usando las tres pantallas. Sólo vamos a cerrarlo. Voy a arrastrar mi logo de este archivo por aquí. Nuestro logo está por aquí. Hagámoslo un poco más corto. Esto es lo suficientemente bueno. Vamos a moverlo por aquí. Voy a usar el efecto de superposición de color por aquí. Puedes ir a efectos y superposición de color y puedes usar algún color grisáceo por aquí, porque no queremos más que lo haga prominente. Entonces usa el color gris por aquí. Nuestro logo está hecho. Necesitamos un botón de inicio de sesión en el lado derecho. Entonces solo usa un login de texto o podemos usar estas dos capas. Podemos agruparlos en btn y luego Controlar J, copiarlo, y luego moverlo por aquí así. Pero vamos a cambiar el estilo. Esto va a ser blanco y el fondo va a tener un trazo de blanco, un píxel y vamos a reducir el relleno a cero. Ahora si hemos hecho nuestro botón de inicio de sesión, pero necesitamos hacerlo corto. Usted lo nombra para iniciar sesión. Iniciar sesión, iniciar sesión, iniciar sesión. Ahora, hay un poco de problema. Nuestro botón de inicio de sesión también tiene casi la misma altura y anchura. Entonces lo vamos a reducir porque no queremos mucha atención aquí así y también si podemos reducir el tamaño de fuente a 18 pixel, eso es lo suficientemente bueno. Ahora, vamos a renombrarlo a Login btn para botón de inicio de sesión, muévelo con esta línea, nuestra línea de margen. Vamos a alinear este botón de inicio de sesión con este logotipo. Seleccione ambos y línea central así. Supongo que ya están forrados en el centro. Ahora casi hemos creado toda nuestra cabecera. Hay una cosa más que puedes agregar por aquí. Aquí puedes dibujar otro rectángulo así. Podría haber visto esto en muchos sitios web. Cambia su color a casi negro y cambia su opacidad al 70 por ciento o lo que quieras, como 50 por ciento. Para mí es 50 por ciento. Por lo que puedes ver esta técnica se utiliza mucho tiempo en muchos sitios web. Por lo que también podemos reducir su tamaño y mover el botón de inicio de sesión y nuestro logotipo un poco arriba así. Ahora se ve más equilibrado. Ahora, esta es la forma en que creamos efectos de encabezado de superposición de color. Entonces si tratamos de ocultarlo, podemos usar cualquier relleno de color por aquí, como voy a usar este naranja o este color o tal vez éste o podemos usar un color más oscuro como ese, de color grisáceo más oscuro. Podría haber visto tal efecto en muchos sitios web, una superposición de color grisáceo muy opaco. Por lo que esta es una técnica muy popular. Se puede utilizar con cualquier color. Puedes seleccionar cualquier color desde aquí, y se verá realmente bonito. Entonces se trata de usar superposiciones de color y relleno de superposición de color para crear diseños de encabezado de aspecto impresionante. Si tienes alguna pregunta o cualquier otra petición, solo tienes que iniciar una discusión. Creo que estoy creando muchas conferencias en estos días, así que mantente atentos y manténganme actualizado. 61. Ejercicio de efectos de enmascara: Desde los últimos días, estoy viendo este anuncio de Bluehost en Facebook, así que pensé que debería compartir este efecto con ustedes. Cuando empecé a diseñar por muchos años, no sabía cómo es posible este efecto. Tienen gradiente viniendo de un lado y está haciendo tu imagen de fondo un poco opaca y en algunos lugares, poco a poco es opaca y transparente al mismo tiempo. Permítanme mostrarles en esta lección cómo vamos a diseñar esto. En esta lección, en realidad vamos a diseñar este diseño. Es un poco diferente, pero creo que es mejor que ellos. Empecemos y nos vemos dentro de este ejercicio, si tienes alguna pregunta, pregúntame en cualquier momento. Empecemos. En primer lugar vamos a abrir un nuevo expediente. Haga clic en “Nuevo” y la talla que vamos a utilizar es de 1280 por 650. Presiona “Ok”, y este es nuestro tamaño de lienzo, y luego vamos a colocar unas rejillas sobre él. Ir a Ver, Nueva guía de diseño y vamos a utilizar 12 columnas, tamaño de canalón será de 20 píxeles y los márgenes serán de 20, 20, 20 y 20. Presiona “Ok”, para que nuestro lienzo esté listo. Lo siguiente que voy a hacer es mostrarles algunos de los recursos que he utilizado. Vamos a esta ventana. Estas son las fuentes que estoy usando agregadas por TipoType. Es una de mis fuentes favoritas, puedes conseguirla gratis, solo tienes que pulsar “Cero” en ella y Añadir al carrito, y comprar éstas, solo gratis. Entonces hay una fuente, este Archivo, fuente libre. Esta es también una fuente que he usado. Estas son dos fuentes que he usado, ambas son gratuitas. El tercero es la imagen que he usado, que es ésta. No recuerdo dónde lo encontré, pero si quieres, creo que era gratis y lugar de trabajo-1245776. Si intentas buscar en línea con el mismo nombre por aquí, creo que lo puedes encontrar. Puedes usar cualquier imagen que te guste, déjame mostrarte un sitio web. Acude a esta foto, picjumbo.com y busca aquí, lugar de trabajo y verás muchas imágenes geniales como estas. Este, puedes usar éste también. También éste, o tal vez éste. Creo que este también es perfecto. Usa cualquier imagen desde aquí, estas son todas imágenes gratuitas. Lo primero que vamos a hacer es que vamos a arrastrar nuestra imagen de fondo, ésta a Photoshop y simplemente dejarla así. Entonces lo vamos a dimensionar en consecuencia, así. Ahora tenemos nuestra imagen de fondo. Ahora llegando al efecto de esa opacidad de gradiente y máscara de gradiente. Vamos a aplicar esta máscara por aquí, Añadir máscara de capa. Ahora selecciona esta “Máscara” en el lado derecho, y vamos a agarrar esta herramienta de gradiente. Presione “G”, herramienta de cubo de pintura o herramienta de gradiente. Asegúrate de que el gradiente esté establecido en este negro a blanco. Ahora, ¿qué va a pasar? Ese negro se va a borrar, así que puedes ver por aquí. Lo que está pasando aquí es que este gradiente es de negro a blanco, por lo que la máscara de negro a blanco básicamente está haciendo transparentes algunas de las porciones de nuestra imagen. Básicamente este fondo blanco se está mostrando en la parte posterior. Si quieres otro fondo, puedes llenar cualquier color que quieras, como te voy a mostrar en este momento. Ahora mi fondo es un poco de color cian, está lleno de esto. Si quieres un color negro, puedes hacer clic en un color negro así. Azul, negro, cualquiera que sea el color que quieras, puedes ponerlo por aquí. Ahora mismo voy a usar este blanco. Además, sigue arrastrando esta línea de tu gradiente. Se puede ver si trato de moverlo demasiado tiempo, también hará transparente parte de esta porción. Si quieres mucho texto o mucha legibilidad del texto, puedes aplicar este efecto. Ahora, lo primero es que vamos a usar la fuente “R”, esta, Archive Regular, y voy a elegir este color, creo que fue este color, 31414D. Asegúrate de que tu tamaño de fuente sea 72. Voy a escribir por aquí, “Empoderar”. En la siguiente línea voy a usar, “Tu Startup Now”. No te preocupes, vamos a cambiar la fuente después. Estas son las palabras. Es mejor si los mueves en la capa separada, así que voy a quitar este “Empoderar” dentro de ella, y también voy a quitar el texto inferior de esta zona. Ahora tenemos dos capas diferentes con este texto y esta. El siguiente va a ser este color rojo. Este es el CA4930. Es de color plano. Básicamente estos dos son, creo, colores planos, y uno de ellos es mi color de marca también, corre UXID. Se utiliza en My Run UXID Logo. Ahora vamos a usar Aileron, voy a seleccionar en este momento este “Regular”. Déjame ver, creo, tu puesta en marcha, y no fue capital. Ahora para esto voy a usar la talla 48 y voy a usar la luz. Así, y para esto voy a usar semi-negrita, cursiva, y también voy a usar 48, así. Creo que aquí también tuvimos 48 semi-negrita. Hagámoslo más blanco aquí porque teníamos más blanco en el último ejercicio. Es así como logramos este efecto. Se puede ver que sigo experimentando también. El sentido de este gradiente también funciona si quieres algo en desplazamiento lineal más así, esto será lineal en toda la imagen. Si quieres algo direccional como esto, en esta dirección puedes usar algo como esto. En el anuncio que te he mostrado, Bluehost han usado esta dirección desde la izquierda arriba hacia abajo derecha. Ahora vamos a usar un botón por aquí así. Creo que este tamaño es bueno, y vamos a usar sólo dos píxeles alrededor del radio por aquí en el panel de propiedades de esta forma. Cámbiala, y vamos a usar el blanco, y vamos a añadir algunas sombras por aquí. Sombra de gota 1. Esta es una técnica nueva. Podrás llamarlos sombras resplandecientes y son muy populares en estos días. Una es una sombra negra con efecto multiplicado, opacidad muy baja, por lo que puedes hacerla 20 o tal vez 16, algo así, opacidad muy baja. Entonces tenemos distancia de 10, también el tamaño es de 18. Este es el tamaño de spread. Entonces tenemos sombra de gota, que es este color rojo, o puedes elegir este color desde aquí. También tiene una opacidad muy baja, normal, no se está multiplicando y la distancia es de 10 y 20. Casi de 10 a 20 píxeles de A. Ahora hemos seleccionado esto. Entonces vamos a usar un rectángulo por aquí y colocarlo por aquí así. Vamos a colorearlo de rojo el mismo color de este texto, y vamos a recortarlo, máscara de recorte, así es como usamos máscara de recorte y se usan mucho tiempo en diseño de experiencia de usuario y diseño de interfaz de usuario y diseño de todo esto cosas. Ahora voy a usar por aquí pulsa “Shift”, así que somos fáciles de hacer click aquí. Voy a usar “Únete a UXID. LearnuxID”. Voy a usar la talla 24 y voy a usar Aileron. Voy a usar la luz. Puedes usar cualquier tipo de letra que te guste, pero estoy usando luz regular. Usemos regular, y hay un truco más. Voy a cambiar a fuente Arial justo por ahora. “ Arial”, y ahora vamos a usar la tecla Alt u Opción y presionar “26”. Entonces “R 26" y esto te va a mostrar una flecha. Me encanta esta flecha, es muy fácil conseguir este efecto. Asegúrese de elegir una fuente que admita este valor. Estos son básicamente valor ASCII, valores A-S-C-I-I. Estas son flechas. También las puedes hacer en HTML. Si quieres hacerlo un poco más espacioso, intenta cambiar este valor de seguimiento en este panel de caracteres. A lo mejor 25 o 30 así, por lo que es más abierto. Veamos cómo se ve nuestro diseño. Se ve genial. Ahora, viniendo a esta cuadrícula, estoy usando básicamente estas cuatro columnas; 1, 2, 3, 4. Vamos a centrar alinear todos estos en esta columna. ¿ Qué está pasando aquí? Vamos a anular la selección, Control D o Comando D. Vamos a moverlos a todos juntos, tal vez un poco por aquí. Nuestro botón y todo está en el lugar. Vamos a añadir algo de navegación por aquí, y para eso vamos a utilizar la herramienta de línea. Voy a usar herramienta de línea. Asegúrate de que el peso fuera de tu herramienta de línea sea de dos o tres píxeles porque un píxel es muy delgado, por lo que podría no ser visible. Entonces hazlo dos pixeles así. Voy a colorear este del mismo color por aquí y luego los vamos a duplicar así, 1 y 2. Si quieres algo así, es bueno. Simplemente muévelo en esta columna. Hablo de esta columna, así que esto es básicamente una columna, esto es scatter. Si quieres, puedes alinearlo así, pero he visto algunos de los diseños donde tienen algo como esto y luego tienen algo como esto. Cambiemos sólo el ancho. Ve a este ancho y vamos a usar 32 píxeles por aquí, y vamos a alinear todos estos a la izquierda, así. Es así como completamos este diseño. Voy a compartir mi archivo de recursos PST para este diseño. Si tienes alguna pregunta o no entendiste ningún atajo, o algo durante esta lección, hazme preguntas. Espero que hayan disfrutado de esta lección. Pasemos a la siguiente lección. 62. Diseño de tabletas de Photsohop: Ahora en esta lección vamos a crear algo similar a esto. Estas son básicamente pestañas. Tan navegación por pestañas, lo has visto en muchos sitios web. Uno de mis alumnos, solicitó esta conferencia que necesito crear algunos elementos de diseño de UI como pestañas o desplegable. Esto es lo que vamos a crear en esta lección. Hay otra versión para este, que es versión box. Se puede ver por aquí. Esta es básicamente versión de caja o versión llena y esta es básicamente otra es versión desnuda. Estas son dos versiones que vamos a diseñar en esta lección. Se puede ver por aquí hay sombras sutiles en estas dos áreas. También hay sombras sutiles detrás de estas tres imágenes. Empecemos y veamos qué se nos ocurre en la siguiente lección. 63. Diseño de tabletas 1: Hace unos días, uno de mis alumnos me preguntó que necesitaba crear este tipo de pestañas. Entonces en esta lección, vamos a crear la versión desnuda más rápida. Empecemos. Voy a abrir un nuevo archivo, nuevo documento y voy a usar ese medio, 1440 por 900, crear. Vamos a crear primero la línea roja. Vamos a agarrar esta herramienta rectangular y vamos a dar click una vez en este lienzo. Se puede ver que aparece sobre cómo crear este rectángulo. Vamos a darle un ancho de 1065 y la altura de 2 píxeles. Así. Es una línea muy delgada. Vamos a crear otra capa por aquí. Entonces capa uno, y voy a ir a capa y crear una capa de fondo para poder alinear fácilmente todo de acuerdo a ese arte. Opción de comando H. Ahora está en medio. Ahora vamos a crear nuestros botones. Entonces primero cambia este color a este rojo, ca4930 es el color que estoy usando por aquí. Ahora vamos a agarrar esta herramienta de rectángulo redondeado y vamos a dar clic una vez más y el ancho será de 165 y la altura de este botón será de 55. Deberíamos usar el radio para ser cuatro, supongo cuatro, cuatro, cuatro, y cuatro. Presionar Ok. Entonces tenemos este botón por aquí. Ahora se puede ver que las dos esquinas redondeadas inferiores no deben ser redondeadas porque se van a unir a esta línea. Entonces vamos a eliminar esto y usar cero, cero en la parte inferior. Así. Ahora puedes ver que tenemos un botón de pestaña por aquí. Pongámosle un texto. Vamos a usar Open Sans o puedes usar Clear Sans. Estas dos son fuentes gratuitas de Google. Ahora tamaño del texto voy a usar 20 puntos o 20 píxeles y Shift y click aquí. Vamos a usar películas por aquí. Ahora color blanco, y los vamos a alinear así entre sí. Ahora agreguemos sombras a este. Entonces vamos a ir a estilos de capa, primero agarrar esta capa e ir a estilos de capa y soltar sombra. Ahora la sombra de gota que vamos a usar debe estar en el lado derecho y en el lado izquierdo, por lo que no necesitamos que la sombra de gota esté en la parte inferior. En primer lugar vamos a usar un poco de color grisáceo por aquí. Elige cualquier color grisáceo a lo largo de este lado. Entonces vamos a usar una opacidad muy baja como 30 por ciento, y la distancia debe ser de 9 y este valor de píxel será de 12. Tenemos una sombra, pero necesitamos que esté del lado derecho por lo que vamos a cambiar el ángulo hacia la izquierda, por lo que 180. Si la luz viene de aquí, la sombra estará de este lado. Este es el concepto que estudiamos en la conferencia anterior. Entonces así es como hemos creado una sombra. Vamos a hacer clic en este botón más y vamos a añadir otra sombra. Esta vez la sombra estará del otro lado, que será cero. Asegúrate de desmarcar esta luz global porque va a estropear tus luces por aquí. Vamos a usar dos luces. Uno va a estar en cero y el otro va a estar, asegúrate de que éste esté desmarcado, 180. Por lo que tenemos una sutil sombra en ambos lados. por lo que esto se hace. Ahora vamos a crear otras pestañas. A lo mejor podemos duplicar este Control G y activo, nombrelo pestaña activa. Este es nuestro separador. Nómenlos correctamente, pestaña activa y vamos a Control J o Comando J para crear otra capa. Nosotros lo vamos a mover de este lado. Asegúrate de que esta capa esté en la parte inferior de ésta porque no va a estar activa. Es estado pasivo o inactivo. Por lo que el estado inactivo es éste. Ahora vamos a moverlo un poco atrás de esto. Ahora vamos a cambiar su color a blanco, así y en segundo lugar vamos a quitarle todas las sombras. Vamos a usar algo del trazo. Entonces vamos a usar dos píxeles trazo en él y su color debe ser un poco grisáceo, así. Debe estar dentro, ajuste el trazo al interior. Presionar Ok. Nosotros lo vamos a mover este estado. Necesitamos que el separador esté en la parte superior. Por eso lo va a esconder detrás. Otra cosa que tenemos que hacer aquí es que necesitamos reducir su tamaño. Voy a reducir su altura a 50 píxeles, cinco píxeles por debajo de esto y lo vamos a mover un poco hacia abajo, así. Está bien así. Ahora es casi perfecto. En segundo lugar, es que tenemos que moverlo un poco lejos de aquí, así. Puedes moverlo así o así, depende de ti. Puedes separarlo o puedes mantenerlo detrás de esta pestaña activa. Ahora vamos a duplicar estas películas. Por lo que necesitamos cambiar el color de este texto. Va a ser un poco grisáceo oscuro así. Vamos a llamarlo Dramas, y tenemos que moverlo un poco hacia abajo así. A lo mejor necesito un crujiente por aquí. Entonces Dramas. Estas son pocas configuraciones, las opciones de renderizado de mi pantalla tienen algunos problemas por lo que mi texto no es realmente nítido. Entonces esta es una opción. Entonces vamos a mover éste, duplicar éste, y vamos a moverlo por aquí. Por lo que va a ser anime. Ahora tenemos una pestaña activa y dos pestañas pasivas o pestañas inactivas. Se puede ver cómo esta sutil sombra está cayendo en estas pestañas. Hay muchas variaciones que puedes hacer, como puedes quitar la sombra y puedes usar un poco de color gris claro para colorearlas. Podrías haber visto este estilo en Google, por lo que puedes hacer algo como esto, así. Agarra el color desde aquí. Se ven realmente geniales, muy agradables. Las sombras se ven muy sutiles y se puede ver por aquí en ambos lados. Hay un efecto más que podemos agregar a esto, que es la superposición de gradiente y voy a usar una superposición de gradiente por aquí en este botón. Lo que vamos a hacer es que vamos a usar un gradiente muy opaco, por lo que es básicamente gradiente transparente de negro a blanco. Debe ser blanco por un lado. Puedes usar algo como esto, y también puedes usar multiplicar u otros efectos como éste, y puedes revertirlo o algo así. Vamos a usarlo así, así que cambia el ángulo de luz a 90 grados, y puedes ver por aquí cómo esto está afectando nuestro diseño. puede ver tal vez podamos cambiarlo a algún color grisáceo y podemos mover un poco el deslizador hacia atrás solo para conseguir solo unos efectos sutiles. Se puede ver cómo es la diferencia, este es realmente bonito efecto. Simplemente puedes crear una superposición de gradiente muy sutil en este y así es como lo hacemos. Ahora vamos a llenar esta zona, depende de ustedes. De lo contrario, no debería haberlo incluido en este ejercicio. Puedes hacerlo por tu cuenta. Pero si quieres que te muestre algunas áreas por aquí, lo que vamos a hacer es que vamos a crear algunas guías en torno a esto. Vamos a envolver este separador. Lo que hice es crear 50 píxeles de espacio desde aquí en ambos lados, y voy a colocar mi contenido dentro. Ahora vamos a crear otro rectángulo 285 ancho y alto serán 350. Vamos a usar una esquina un poco más redondeada por aquí, presiona “Ok”, y tenemos esta capa realmente bonita por aquí y puedes ver que podemos poner cualquier imagen en ella. Ahora vamos a añadir algo de sombra de gota primero. Sombra de gota va a ser la primera. Podemos usar una sombra de gota de 90 grados, y debe ser muy sutil, como 9, 12, se ve bien. Presiona “Ok” y asegúrate de que sea algún color de gris. Voy a colorearlo de gris por aquí así. Ahora, muévelo fuera de esta zona. Vamos a replicar esto con otra, Control+G, y será nuestra activa por aquí, imagen activa o miniatura. Vamos a colorearlo un poco más oscuro así. También se destacará su sombra o más intensa como 60 por ciento. También voy a moverlo un poco más ancho, tal vez el 70 por ciento es bueno. También podemos aumentar un poco la distancia hacia abajo. Es así como vamos a utilizar este estado activo. Además, vamos a añadir algún trazo a su alrededor. Por lo que tres píxeles o dos píxeles trazo dentro de esta forma. El tamaño de las tres formas son similares. Presiona “Ok”, y vamos a duplicar esta otra vez al final por aquí, así y pegarla con el lado derecho. Ahora, voy a agarrar a los tres y voy a espaciarlos horizontalmente. Muy bonito, luciendo genial. Ahora puedes agregar cualquier imagen por aquí, lo voy a hacer muy rápido. Voy a arrastrar y soltar imágenes y voy a recortarlas dentro de estas cajas. Estos son básicamente contenedores, vamos a utilizar nuestra opción o tecla Alt para recortar toda la imagen dentro de esto. terminamos con estas sombras, ahora vamos a añadir algo de texto por aquí. Voy a usar un encabezamiento con el Open Sans negrita. Voy a seleccionar Open Sans negrita y el tamaño será de 48 pixels. Añadamos algo de texto por aquí, como películas o películas activas. Voy a usar un poco de color más oscuro aquí así, alinearlo con esta línea de aquí, así. También puedes agregar algunos títulos alrededor de estas imágenes solo para asegurarte de que estos sean títulos de buen aspecto, y voy a añadir algunos títulos por aquí, como ventana rota. Voy a usar 20 o 24 píxeles, 20 puntos por aquí y asegurarme de que la fuente sea Semibold Italic, así. Alinearlos a todos con estos. Yo lo voy a hacer muy rápido. No te preocupes, creo que ya sabes hacer esto, alinearlo con estas formas en la parte inferior, así que contenedores. Voy a agarrar este contenedor y voy a agarrar la capa de texto y lo voy a alinear en el encabezado así. Básicamente estoy alineando cada texto con esto, esto, y esto. Ahora he alineado todos los textos, se puede ver por aquí se ve realmente cool, realmente bonito, muy abierto, abierto, muy abierto, muy buen uso del espacio en blanco. Este es el final de esta lección. Hemos creado barra de pestañas muy bonita, muy sutil, y esta es la información dentro de esta barra de pestañas. Asegúrate de usar algunos estados activos y pasivos, como puedes ver por aquí tenemos botón muy inactivo. No deben mezclarse. Los botones activos deben ser claramente visibles y el usuario debe saber que este color está coincidiendo con este, que estoy dentro de una ventana activa. Con esto se termina esta conferencia. En la siguiente lección, vamos a crear otra versión de ésta la cual se llena una, vamos a usar una caja por aquí. Pasemos a la siguiente lección. 64. Diseño de tabletas 2: Ahora en esta lección, vamos a crear esta versión de caja de estas pestañas. Habrá pocas diferencias como se puede ver una línea muy delgada por aquí, también se puede ver que hay un efecto elevado por aquí, efecto 3D, y también se pueden ver algunos iconos agregados por aquí. El único es que invertimos el esquema de color, ahora el fondo es muy brillante con el emparejamiento con estas pestañas y creo que realmente muestra claramente que éste está activo. Empecemos y vamos a empezar desde la versión anterior donde salimos, así que agregué algunos títulos de películas por aquí solo para que sea más dramático y luzca bien. Ahora, pocas cosas que vamos a hacer, número uno que vamos a quitar pocos de los efectos como se puede ver aquí, este borde blanco se ve muy raro en esta situación, así que vamos a quitarlo así. También, vamos a quitar las sombras, soltar sombras, de ambas, así que voy a quitar las sombras de gota. Se puede ver ahora éste claramente parece que está elevado y básicamente está seleccionado, por lo que hay una sombra a su alrededor. Entonces vamos a quitar esta línea por aquí, así que esconden esta línea y las pocas cosas más que vamos a hacer, número uno, a estas pestañas inactivas, ahora vamos a añadir trazo de gris, se puede ver por aquí, gris trazo y vamos a hacer su color blanco, por lo que se está mezclando con el fondo. Entonces el mismo color que el fondo, se puede ver por aquí y hemos añadido un trazo de, creo, dos píxeles, vamos a ver cuántos píxeles, sí, dos píxeles dentro del 100 por ciento y es un color gris cb, cb, cb. Casi hemos logrado lo que queremos. Ahora, la cosa es que vamos a crear un rectángulo por aquí y va a ser así, tal vez así. Ahora tenemos este rectángulo redondeado y va a estar en la parte superior. No en la parte superior, creo que debería estar frente a estos. Ahora cambiemos su color a éste, así que hemos cambiado el color, por lo que este estaba activo uno, vamos a eliminar la superposición de gradiente que ponemos en el último ejercicio, así que gradiente, no necesitamos gradiente y también si que quieras, también puedes quitar estas sombras de gota, por lo que realmente se ve un poco plano y muy bonito por aquí. Ahora vamos a cambiar los colores de estos textos, así que voy a seleccionar todo el texto. Ahí hay un truco que te voy a mostrar en pocos segundos, ve al panel Carácter y selecciona el color por aquí, así que muévelo a blanco y ta-da, tenemos todos los colores texto en blanco ahora mismo. Entonces en lugar de cambiar cada color uno por uno, simplemente cambiamos el color en un solo lugar y todo se cambia. Además, necesitamos hacerlo un poco más grande y mover este contenido. Este es nuestro rubro y este es nuestro contenido por aquí, así que este es nuestro contenido de películas, así que nombrelo Películas Contenido, así. Ahora muévelo unos píxeles hacia abajo, tal vez 10, 20 así. Ahora vamos a agregar algunos iconos por aquí, pero antes de eso vamos a necesitar una línea por aquí, línea separadora, por lo que muestra que tenemos un separador por aquí y tenemos algo así como título y algo así. Acabo de trazar una línea así, hacer los colores iguales y luego vamos a reducir el brillo para que sea un poco más oscuro, 75 así y reducir su control de tamaño T o comando T y vamos a usar dos píxeles así y asegúrate de que sea del mismo tamaño que tu este fondo, por lo que era 1,115 y va a ser del mismo tamaño que esta barra de aquí por lo que va a ser 1,115. Asegúrate de que tus tamaños sean los mismos, necesitas combinarlos así, solo ajusta el espaciado. Voy a seleccionar este separador, ahora se ve bien. Se puede ver el espacio por encima de este título y por debajo de este título es el mismo, así que estoy tratando de centralizar esta área. Ahora casi hemos terminado con esto, hay un cambio sutil más como este dramas, sus colores deberían ser un poco más aburridos así, gris. No lo hagas demasiado aburrida para que no parezca un inactivo, así que hazlo un poco así para que demuestre que puedes hacer click por aquí. No debe transmitir el mensaje de que no puedes hacer click aquí. Esto es bueno. Ahora hay pocas cosas más que podemos agregar, podemos agregar iconos por aquí ahora. Truco muy sencillo cómo hice estos iconos, solo un simple cálculo, 12 por 12 píxeles de ancho y alto rectángulo, pero creo que es un cuadrado, no es un rectángulo y lo que hice es simplemente moverlo en la parte superior. Duplicé estos así y luego vamos a duplicarlos y moverlos al fondo así. Un ícono está listo, voy a seleccionar todo, controlar o comando E para crear una forma, así que ahora es un icono de uno. Vamos a moverlo por aquí. Ahora el segundo icono va a ser el mismo, solo necesitamos un rectángulos de tamaño más pequeño en el lado izquierdo, lo que va a ser de seis píxeles por seis píxeles cuadrados como este y luego nos quedan con seis y 26 fue total por lo que nos quedan con 20 píxeles y 20 píxeles. Perdón, no fue 20 por 20, debería ser 20 por seis así. Ahora lo vamos a mover por aquí y conseguir algo de distancia como esta. Puedes ajustar la distancia más adelante. Ahora vamos a fusionar estas capas y vamos a duplicarlas una, dos, así que tenemos dos iconos creados en pocos minutos y esto es sólo agruparlas como iconos. Ahora los vamos a alinear con este margen por aquí, línea de margen o directriz por aquí, así es como lo alineamos así. Hemos completado tanto las pestañas y se ven muy bien. Una es la pestaña desnuda y esta es la pestaña con estado muy activo y mezclando el contenido y la pestaña del mismo color. Todo esto es por este ejercicio. Espero que hayan disfrutado de este ejercicio. Ahora, pasemos a la siguiente lección. 65. Reúne recursos para diseño de aplicaciones de IOS: Ahora en esta lección de series, vamos a crear esta aplicación para iPhone de aspecto impresionante. Este es un trato diario para nuestros alimentos y sobre todo para los alimentos. primer lugar, en esta lección, les voy a mostrar cuáles son los diferentes recursos que he utilizado, las imágenes, estos bifurcadores, y colores, todo lo demás. Déjame mostrarte. Por las imágenes que me he suscrito a esta gente muy simpática que son Death to Stock Photos, y me entregan fotos muy impresionantes e imágenes de alta calidad de forma gratuita casi cada semana. Entonces esto es muy bonito. Si puedes suscribirte a ellos, obtendrás un montón de crear imágenes por aquí. Déjame mostrarte algunos de ellos por aquí. Este es uno de ellos, son series. Entonces tengo muchas imágenes de estos tipos. También puedes usar algunos otros sitios web gratuitos como, supongo que aquí tengo algunos de los enlaces. Splash es muy popular, este en splash, puedes buscar en línea, picjumbo, Pixabay. Para que puedas usar cualquier sitio que te guste, y luego la fuente que estoy usando, estoy usando esta fuente Martina Regular, que es supongo libre, fontzone.net. Puedes buscar en línea Martina Regular, descargar esta fuente e instalarla. Entonces estoy usando este Google Font Lato que es muy popular. Otra fuente de Google que es Maven Pro, que he usado en este botón si configuro el texto por aquí, Maven Pro regular. Entonces esto es sólo para el botón. Entonces estoy usando esta fuente estilo marcador que es básicamente Martina, y Lato está en todas partes. Entonces este es Lato, Pollo Biryani, y en este precio. Por lo que en general se ven muy bien y agradables juntos. Estos son todos los recursos. Entonces, empecemos. Los colores que estoy usando son básicamente estos dos colores, que es este color morado y verde. Entonces este es el 211637 morado. Esto es básicamente verde, que es 22a372. Supongo que mayormente elijo estos colores de esta imagen básicamente. Entonces déjame mostrarte cómo escojo estos colores. Hay una máscara de gradiente sobre ellos. Esta es básicamente la imagen. Escogí los colores de la imagen como por ejemplo, este verde. Está más cerca de este verde. Redujamos la saturación al 70 por ciento. Por lo que está casi más cerca de éste. También puedes intentar probar otros colores desde aquí, como éste o éste. Entonces, básicamente, lo escogí de aquí. Este 030f66. Entonces así es básicamente como muestras el color de tu imagen. Entonces el color púrpura que escogí de aquí. Es por eso que van muy bien junto con este diseño general. Ahora, empecemos. Aquí tengo la imagen que fue ésta. 66. Lectura de diseño de aplicaciones de IOS: Vamos a crear un nuevo archivo y elegir iPhone 6 o iPhone 5. En primer lugar, debes seleccionar Diseño de Aplicaciones Móviles por aquí y luego ir al submenú, que es el iPhone 5, 6 o iPhone 6 Plus. Vamos a elegir este iPhone 6 ahora mismo. “ No colorear Administrar este documento”, asegúrate de que esté seleccionado y pulsa “Ok”. Ahora, este es nuestro tablero de arte. Vamos a crear esto como una capa de fondo. He seleccionado este, y capa de fondo, he creado una capa de fondo. Vamos a crear un color de fondo, que será éste. Un poco grisáceo, color f4f4f4. Así es como uso básicamente, fondos. Ahora, vamos a importar nuestro archivo por aquí, que era éste. Arrástrelo aquí en el Photoshop, así. Está casi perfectamente encajado por aquí. Ahora, esto es básicamente la pantalla del iPhone 6, así que tenemos mucho espacio debajo de ella. Si queremos, podemos aumentar el tamaño de esta imagen, si realmente lo necesitamos. Podemos seleccionar Control T e intentar aumentar así el tamaño. Arrástrelo un poco hacia abajo. Aumentemos nuevamente el tamaño. Estoy presionando y manteniendo pulsadas las teclas Mayús y Alt mientras aumenta el tamaño de esto. Básicamente, es salir afuera. Creo que fueron bichos de Photoshop. En cuanto empecé a redimensionarlo, intentaban ajustar el tamaño a su alrededor. Vamos a crear alguna superposición sobre esta imagen. Básicamente, en este diseño, se puede ver por aquí, si hago clic aquí, creé esta y la superposición púrpura-ish para que podamos ver el texto fácilmente. En primer lugar, vamos a crear una superposición de gradiente sobre esto para que podamos ver el texto aquí muy fácilmente. Esto es básicamente lo que he hecho aquí. En primer lugar, lo que vamos a hacer es, vamos a seleccionar esta zona y vamos a crear otra capa. Este, y vamos a presionar G y llenarlo con este color morado. G y prensa así. Ahora, lo que vamos a hacer es crear una máscara sobre esta imagen y vamos a usar la superposición de gradiente. Ya sabes que el blanco lo mostrará todo y el negro lo ocultará todo. Cuando tratamos de usar la superposición de gradiente sobre esta imagen así, puede ver la imagen detrás se mostrará porque ahora, el blanco está quitando todo este color púrpura por aquí. Sigue haciendo así hasta que obtienes un bonito toque así, tal vez así. Esto se ve un poco bonito. Si realmente quieres ajustarla, puedes seleccionar esta capa, Control T, y puedes transformar y ajustar de acuerdo a tu gusto. Ahora, este es el truco como hice este efecto de color de superposición. Usé gradiente y efecto de enmascaramiento para este. El resto de la conferencia, estaremos haciendo en la siguiente lección. Pasemos a la siguiente lección. 67. Agregar elementos de menú a la aplicación de IOS: Añadamos unas cuantas imágenes más por aquí. Este es básicamente nuestro antecedente, por lo que Controlar G y agruparlos en segundo plano. Ahora agreguemos imágenes por aquí. Para eso voy a usar un rectángulo redondeado para contener esa imagen, así, tal vez un poco cuadrada. Vamos a crear una imagen cuadrada de 200 píxeles por 200 píxeles, y un radio de cuatro píxeles, así. Podemos asegurarnos de tener un espacio de 1, 2, y 1, 2, 3, 4, 24 píxeles de distancia de esta zona superior. Consigamos imágenes de alimentos. Estas son todas las imágenes gratuitas que he recopilado. Podemos usar cualquiera de ella como ésta. Sigue siendo bueno. Este se ve bien. Presionemos entrar. Yo lo voy a recortar dentro de esta pequeña caja. Arrástrelo un poco, escalarlo un poco para que se vea un poco más bonito. Centrémonos en este como éste. Ahora, Control G y duplicar este grupo. Llamémoslo pequeño pulgares copia. Voy a arrastrarlo por aquí así. Perdón, presioné básicamente arte con él y creó un montón de copias. Sólo necesitamos cuatro. A lo mejor supongo que este es extra. Vamos a mover este también por aquí así, y el primero por aquí así. Vamos a mover estos 100 píxeles dentro de esto. Sabemos que de ambos lados están igualmente espaciados, 1, 2, 3 ,4, 5, 6, 7, 8, 9,10. Esto es un poco mucho así que pasemos a esta altura. Voy a espaciarlos así. Es así como creé esta porción de selección de miniaturas de imagen. Vamos a crear una guía en medio de esto para que sepamos dónde está el centro de esta imagen. Voy a usar guía rápida así. Ahora sabemos dónde está el centro, así que lo voy a alinear rápidamente así. Sí, está casi en el centro. Seleccionemos el primero y el último, y todos ellos y vamos a espaciarlos otra vez. Ahora está alineado adecuadamente. Sí, la alineación es clave para el éxito en su diseño. Tu todo y cada imagen deben estar alineados adecuadamente. El visor de imágenes luego imágenes como ésta. Ya casi terminamos con esta área. Ahora vamos a agrupar todo esto en miniaturas así. Podemos tener un buen espacio por aquí. Esta tampoco se ve muy mal, pero la brecha entre estas imágenes de aquí se ve un poco más espaciosa. Espacio aquí. Déjame comprobar cuál era la altura por aquí 1, 2, 3 ,4, 5, 6, 7, 8, 9,10, 11, 12. Ahora está a 32 pixeles de distancia. Alineemos la parte superior de estas imágenes. Se ve bien ahora. Pasemos a la siguiente conferencia donde estaré agregando el texto sobre esta imagen o este tablero de arte. Pasemos a la siguiente lección. 68. Agregar texto a la pantalla de aplicación de IOS: Añadamos algo de texto a este diseño en esta lección. Seleccionemos este y primero lo voy a guardar porque aún no lo he guardado. Guardémoslo en el escritorio ahora mismo. Ahora primero vamos a seleccionar esta fuente Martina, regular, y voy a utilizar el tamaño de 52 puntos o 52 píxeles y el color será blanco. Da click por aquí en algún lugar y era sándwich cafe. Ahora, voy a decir manda café por aquí y vamos a moverlo un poco abajo así. Vamos a moverlo en la parte superior y ajustar la superposición de fondo porque no puedo leerlo. Este se ve bien mejor. Pasemos a este panel colector y quitemos este subrayado. Entonces voy a seleccionar nuestra otra fuente que era Lato, regular. Este es malo. Vamos a duplicarlo y seleccionar la fuente Lato. Había seleccionado la fuente por lo que cambió a otra fuente. Esto sucede a veces conmigo. Ahora vamos a usar 28 o tal vez 32 para la ubicación de este café. Para esto, voy a usar Lahore. Así. Vamos a moverlas un poco. Al igual que esto se ve mejor ahora. Supongo que hagámoslo 20, 1, 2, 3, 4 o 24 píxeles y éste va a ser uno y dos. A veinte píxeles de ella, esto se ve bien. Hagámoslo un poco más pequeño, he desplazado esto a 30 píxeles, ahora esta porción donde tuvimos un trato especial para hoy. Nuevamente necesitamos seleccionar esta fuente. Haga clic aquí una vez, haga clic en esta fuente, seleccione como ésta, y luego seleccione este texto y podrá ver este tamaño y todo ya está seleccionado. Haga clic aquí y el texto fue trato especial para hoy. Haga doble clic ir aquí y trato especial para hoy. Ahora voy a seleccionar el color de esta fuente a este color morado, que era nuestro color base para este diseño. Vamos a moverlo y a 1, 2, 3, 4, 5, y 6, a 60 píxeles de esto. La siguiente línea, que es biryani de pollo y el precio. Añadamos que la fuente es Lato. Voy a seleccionar primero esta capa y luego presionar “D” y se selecciona Lato. Voy a escribir pollo biryani y el precio era sólo de $2.99. Este es el texto. No se pueden ver los textos porque estoy haciendo algo de magia vudú negro. El texto blanco. Hagámoslo Gris por este color, supongo. Ahora, movámoslo en el medio. Nos ocuparemos de estos alineamientos. Neutrón, pero si quieres alinearlo rápidamente controla A, Control Alt H y ya está horizontalmente en el medio. Ahora, para este biryani de pollo, creo que es un poco muy tenue. Lo que voy a hacer es que voy a seleccionar este color morado y me voy a mover en esta zona por aquí así. Este era un poco de buen color. Es un poco grisáceo y un poco púrpura. 63, esto es a veces lo hago, así que combino esto ambos colores para obtener el color Gris así y luego voy a seleccionar esto, y voy a seleccionar este color verde por aquí. Vamos a aumentar el tamaño de fuente para este color verde. Hagámoslo 36, así, y luciendo perfecto hasta ahora. 69. Agregar botones al diseño de aplicaciones de IOS: Entonces tenemos un número telefónico, que es mi número telefónico. Vamos a escribirlo por aquí. En primer lugar, vamos a seleccionar rectángulo redondeado, y el radio debe ser 10 o tal vez 12, supongo que 12 estará bien. Vamos a crear un botón aquí así, y los colores deben ser morados, y la redondez debe ser de 20 píxeles. Esto se ve bien. Ahora para el ícono de ese teléfono, voy a usar mi extensión Font Awesome PS por aquí, así que agreguemos un teléfono ícono. Éste se ve perfecto, un poco por aquí. Entonces vamos a colorearlo blanco, hazlo un poco más grande. Esto es básicamente 42 píxeles es lo suficientemente bueno. Por aquí, movámoslo a 1, 2, y 330 píxeles lejos de la izquierda. Entonces voy a escribir mi número de teléfono por aquí. También puedes hacerlo un poco verde. Si quieres hacer un color más nítido, puedes aumentar la saturación por aquí. Voy a aumentarlo a casi 86, así. Ahora voy a usar llamémoslo el teléfono patrón. Aquí voy a añadir mi número telefónico por aquí, que será en lateral. Cambiemos de color a blanco. Más cerca del blanco, que básicamente es un color un poco grisáceo. Vamos a moverlo 1-330 píxeles de la derecha y 40 píxeles. Ahora lo que básicamente voy a hacer es separar estos dos por uno y 220 píxeles y agrupar este número telefónico y alinearlo en medio de este botón así. Ahora lo que hice es, agrupé este contenido interno y luego lo moví en medio de esto. Ahora supongo que también podemos colorear esta pantalla o tal vez un poco grisácea. Creo que resaltarlo demasiado no es suficiente. Yo uso esta palabra bastante bien. Ahora lo que vamos a hacer, vamos a usar un botón de libro muy grande ahora por aquí, y ese era básicamente el botón. Vamos a crear un rectángulo por aquí. Esta grande y colorela esta. Si te gusta el look plano, puedes usar este botón así. Pero si te gusta un look un poco elevado, puedes usar sombra interior. Lo que vamos a hacer es que vamos a seleccionar este color, entonces vamos a reducir el brillo para conseguir un poco de color más oscuro por aquí así. Ya se puede ver la elevación por aquí. Voy a usar 16 píxeles de elevación por aquí y cero tamaño de píxel. El ángulo es menos 90. Entonces básicamente es sombra interior de esta dirección de abajo a arriba. Haga clic en “Ok”. Si realmente lo deseas, también puedes agregar un poco de superposición de gradiente en este botón. Si de verdad quieres. Estoy usando este blanco transparente a negro. Puedes seleccionar así y también puedes multiplicarlo así. Ahora, voy a usar un poco de color gris por aquí porque se veía muy afilado, un poco más oscuro. Supongo que se ve bien sin esta superposición de gradiente. Eliminemos esta superposición de gradiente. Voy a usar de nuevo este Font Awesome PS para conseguir algún calendario por aquí. DA es buena para un calendario, así que voy a seleccionar este. Este es el icono para el calendario. Tenemos que sacar esto de este número telefónico. ¿ Dónde está este calendario? Aumentemos el tamaño y lo movamos por aquí. Colorelo blanco. Entonces vamos a utilizar nuestra última fuente, que fue Maven Pro. Fue Maven Pro no Maven. Voy a usar este Maven Pro Regular y lo voy a usar por aquí y reservar ahora. Lo que hice es, utilicé este panel de personajes para espaciarlo. Por lo que es de 36 puntos, por lo que 36 píxeles básicamente. Puedes fijar el rastreo por aquí. He usado esto para aumentar el tamaño de 225 píxeles. Vamos a mover esto por aquí así. Selecciona este calendario, voy a reducir su tamaño. Básicamente es de 55 por 59 píxeles. Vamos a moverlo a 50, así, y moverlo en medio de este libro de área ahora. También vamos a subrayar este texto, libro ahora. Por lo que la gente sabe que esto es básicamente un botón. Aunque quieras quitarlo, puedes quitarlo así. Entonces no te preocupes por ello. Puedo aumentar también el tamaño de esto, y también deberíamos aumentar el tamaño a 40, supongo, porque debería verse un poco más grande que esta zona. Hagamos que este número de teléfono sea un poco más pequeño. Hagámoslo 30 píxeles y también reduzcamos. Supongo que 32 pixeles se ven lo suficientemente bien y también reducen este tamaño de teléfono de este icono a 36 pixeles. Hazlo más cerca de este uno y dos, y además hazlo un poco más corto así. Voy a usar mi tecla de acceso directo para alinearla correctamente. Entonces voy a agrupar todo esto en patrón telefónico y alinearlo en medio de esta área de aplicaciones, que es nuestro tablero de arte. Creo que se ve casi perfecto. Consigamos un poco de espaciado con precisión. Este es nuestro botón telefónico. Veamos cuánto está más lejos de este 1, 2, 3, 4, 5. Cinco es lo suficientemente bueno. Aquí tenemos pollo biryani. Ofertas especiales. Hagámoslo en medio de esto, un poco abajo así. Se ve perfecto, y supongo alinear esto con este calendario. Está casi alineado pero me siento un poco. Uno y dos, 1, 2, 3, 4. Veinte y cuatro píxeles por aquí. Agrupémoslo, contenido de libro ahora botón. Este es nuestro trasfondo de libro ahora. Agrupémoslos en botón, reserve ahora botón. Alineemos este contenido con esto en el medio, así. Alineemos todo en medio de este Lienzo. Nuestro sándwich de ofertas especiales de Pakistán, y alinémoslo en el medio. Todo está en medio. Creo que podemos aumentar el tamaño de este texto, porque está mirando casi más cerca de estas ofertas especiales. He aumentado el tamaño a 64 puntos, Martina regular. Supongo que esto hace el final de esta serie lectiva. Lo que voy a hacer es sólo un último efecto. Voy a aumentar el tamaño de este signo $. Hagámoslo 40 píxeles o quizá 38, un poco más grande que el otro texto. Es perfecto y ahora lo voy a guardar. Nuestra pantalla de la aplicación iPhone 6 está completa. En la siguiente lección, crearemos el marcador para la pantalla, así que pasemos a la siguiente lección. 70. Usar maquetas de App para mostrar tus diseños: Ahora vamos a crear hermosa maqueta de este diseño. Lo que vamos a hacer es que vamos a presionar “Control A” y “Control C” para copia o “Control Shift C” si quieres copiar todo, y estoy usando este iPhone 6 maquetas de Pixeden. Si quieres, puedes ver por aquí. Mockups de iPhone 6 Pixeden. Estas son básicamente maquetas de Pixeden para iPhone 6, y las estoy usando. Lo que voy a hacer es cuando abro este archivo, básicamente había otros tres iPhones más, así que seleccioné este, blanco. Esta es básicamente la vista frontal. Necesitas solo hacer doble clic aquí y necesitas pegar tu diseño por aquí. Déjenme esconder éste. “ Control V” por aquí y barra de estado, estoy usando básicamente este efecto Colour Overlay. He agregado este Color Overlay en esto. Si trato de ocultarlo, se puede ver que ya es blanco. Pero si quieres cualquier otro color, como si quiero color morado en esta barra, puedo usarlo o aunque quiera este color verde, puedo usarlo. Puedo usar cualquier color por aquí. Esto es más fácil de controlar de esta manera. Estoy usando blanco ahora mismo. Ahora, solo necesitas guardar “Control S”, y puedes ver aquí tenemos nuestra maqueta. Se ve muy bonito, y luego hubo otros dos maquetas que fueron la vista de este trimestre. Es una vista un poco aparte. He seleccionado este negro y aquí es donde nuestro diseño se ve muy limpio en esta vista lateral. Yo he elegido este negro y he escondido los otros dos, que eran estos dos. Vamos a seleccionar este doble clic, haga clic en “Ok”, “Control B”. Mueve la barra de estado hacia arriba por encima de esta capa. Supongo que ya es de color blanco. Si lo desea, puede usar Estilos de capa y aplicar la superposición de color sobre ella, que es blanco. Esto es básicamente, podemos fácil controlar el color. “ Control S”, guárdalo, y puedes ver por aquí, así es como usamos estas maquetas. Estos realmente ayudan a nuestros clientes y otras personas a mostrar caso tu diseño y es una buena práctica mostrar, siempre mostrar tus diseños así. Esta es la versión final donde quería mostrarte cómo usar estas maquetas. Vamos a sumar aquí también. Mueve esta barra de estado hacia arriba. O dejémoslo por aquí. A ver cómo se va a ver esto. Voy a cerrar estos archivos PSP. Así se ve nuestro diseño, y aquí supongo que también necesitamos barra de estado. Por qué es negro, necesitamos una barra de estado blanca por aquí. Hagámoslo blanco Color Overlay blanco y eso es todo. Ahora, se ve bonito, y esto termina la final de este diseño de iPhone. Estaré creando más app de iPhone para el Android supongo. Mantente atentos y cuídate, y nos vemos pronto en otras conferencias. 71. Truco de simple para eliminar fondos blancos: Hola a todos. Vamos a hacer algunas cosas de edición de imágenes en esta sección. En la primera conferencia se trata de quitar el fondo blanco con un simple truco. Este es el resultado final que obtuve. Muchos de ustedes, cuando están diseñando en Photoshop, podrían tener algunas imágenes. Tienen un fondo blanco como éste. Hay un truco muy sencillo para quitar este fondo, y te voy a contar el secreto. Ahora, empecemos. Lo que vamos a hacer, es que vamos a eliminar rápidamente este fondo blanco con opciones de mezcla. Voy a dar click en Nuevo, 1440 por 900 Transparente, OK. Alt Eliminar para llenar la capa. Voy a recoger esta herramienta Rectángulo y dibujar un rectángulo por aquí así. Cambiemos su color a azul muy opaco como éste. Este truco solo funciona con fondos muy claros. Si intentas usar un fondo más oscuro entonces vamos a ver la siguiente conferencia al respecto, vamos a quitar este fondo blanco. Arrastremos mi imagen por aquí, he descargado de Dreamstime. Era imagen cuando la usaba para un cliente mío. Vamos a moverlo por aquí. Hagamos un poco más grande este rectángulo de fondo porque tiene menos espacio a su alrededor. Muévelo hacia abajo, y alinémoslo en el medio, voy Alt Control H. Lo que voy a hacer es ahora voy a quitar rápidamente el fondo blanco, así que pasemos a esta capa. En el panel Capas, asegúrate de haber seleccionado esta capa de imagen, y ve a esta Opciones de fusión y elige esta Oscurecer. Este es un truco de magia muy limpio. Se puede ver este fondo blanco acaba de desaparecer, y también se puede utilizar este Color más oscuro, ambos funcionan muy bien en eliminar fondos blancos sobre colores más claros. Si trato de cambiar el color de algo como esto, fondo claro, va a funcionar muy bien. Este es un truco muy ordenado. Puedes quitar fácilmente fondos como este y puedes fusionar fondos blancos en cualquier fondo blanco o de color muy claro. Si estás diseñando, trata de descubrir imágenes que tengan fondos blancos. Son muy fáciles de ajustar y muy fáciles de quitar. Este es el truco que quería compartir con ustedes. Pasemos a la siguiente lección, donde estaremos quitando rápidamente el fondo blanco con otro método. Así que quédate atentos y hazme preguntas. Pasemos a la siguiente lección. 72. Eliminar pequeños objetos de la imagen con la curación de spt: Hola a todos. En esta lección vamos a hacer un poco más de trabajo de Photoshop con algunas imágenes. En esta lección, lo que voy a hacer es que voy a limpiar esta imagen. Se puede ver la imagen de abajo, es la imagen de uno de mis clientes. Se pueden ver los cables a su alrededor por aquí, por aquí, uno por aquí, y luego hay una rama de árbol por aquí. Entonces lo que vamos a hacer en esta lección, este es el primer paso, vamos a eliminar todos estos detalles, y en la siguiente lección vamos a darle algún efecto dramático como esta nubes y algunos ajustes de color. No soy un maestro de ajustes de color, pero te daré algunos pedacitos de una guía para que puedas manipular fácilmente algunas de tus imágenes porque cuando estás diseñando UI, hay muchas veces en las que tienes que editar imágenes. En primer lugar, voy a empezar con esta imagen, así que pasemos a Consolidar Todo a Tabs. Esta es nuestra imagen final, esta es la imagen con la que vamos a trabajar. Ahora lo que vamos a hacer es que vamos a utilizar esta herramienta Pincel de curación de puntos. El método abreviado es J. Si no ves Spot Healing Brush Tool por aquí, puedes ir a esta barra de tres puntos y puedes editar tu barra de herramientas. Esta es la nueva característica en la última versión de Photoshop. Intenta hacer click en esta edición y arrastra las herramientas que quieras hasta aquí. Entonces así es como funciona esta barra de herramientas personalizada. Voy a seleccionar la Herramienta Pincel Sanador Spot. Tan pronto como me gusta esto, puedes ver tenemos un cepillo por aquí, este es el tamaño del cepillo, dureza, asegúrate de que sea 100 por ciento. No queremos un cepillo muy suave. Entonces tenemos modo Normal, que sea así. Ahora lo principal es este tipo. Debe seleccionar el Content-Aware. No selecciones este Partido de proximidad ni Crear textura. Selecciona este Content-Aware y comienza a cepillarte en los objetos que quieres desaparecer. En primer lugar, lo que vamos a hacer es que vamos a duplicar esta capa para que no perdamos nuestra imagen principal. Yo sólo voy a cepillarlo así. Así. Si quieres mucha perfección, debes acercar. Entonces así es como trabajamos aquí. Así. Se ha quitado un cable por arte de magia y simplemente cepillarlo así. También me cepillaré sobre esta rama de árbol, y por último vamos a cepillarnos en estos dos cables por aquí así. Se puede ver que se han ido todos los cables. Hay una cosa más que puedes ver por aquí, es una luz o un aspersor? Algún tipo de cosas así. Aumenta el tamaño de tu pincel presionando las teclas de soporte en tu teclado y solo presiona una vez. En este click una vez, y puedes ver todas las cosas extra que queríamos quitar aquí las hemos quitado. Aunque quieras ir más allá, puedes quitar este pequeño edificio por aquí, pero creo que nos está dando algunos problemas, así que hagamos más pequeño nuestro pincel. Se puede ver que también he quitado este edificio por aquí. Es así como funciona esta herramienta Pincel de curación de puntos con contenido. En la siguiente conferencia, ajustaremos algunos de los colores y el brillo y la vibración de esta imagen. Entonces pasemos a la siguiente conferencia. 73. Hacer que colores muestren en imágenes: En esta lección, vamos a convertir esta imagen a más cercana a ésta, un poco de nubes dramáticas, diferentes colores, y un poco más de ajustes por aquí. Por lo que empecemos. Lo que vamos a hacer es que vamos a usar nuestras Curvas por aquí. Por lo que estas Curvas básicamente van a comprimir o descomprimir tus tonos de tu imagen. Entonces, lo que vamos a hacer es que vamos a usar un punto por aquí, basta con dar click sobre esta línea, un punto por aquí y un punto por aquí. Ahora lo que voy a hacer es arrastrar un poco este punto hacia arriba, éste un poco hacia abajo, así, así. También éste. Vamos a acercar este un poco más a esto, así. Mueve un poco el de arriba a la izquierda, y puedes ver que hemos logrado casi el mismo efecto que queríamos en estas nubes. Ahora lo que voy a hacer es convertir esta imagen duplicada. Vamos a duplicarlo y lo voy a convertir a blanco y negro, ve a Ajustes y Desaturar. Yo lo voy a desaturar y voy a usar luz suave lineal así. También puedes disminuir la opacidad de la luz suave al 50 por ciento. Incluso sin curvas, esta luz suave funciona muy bien. Se puede ver la diferencia por aquí. Puedes hacerlo con cualquier imagen, solo duplicarla y desaturarla con este ajuste y mover estas opciones de mezcla a luz suave y usar la opacidad para controlar la luz suave. Este es el efecto que podemos conseguir fácilmente en cualquier imagen. Si quieres cambiar diferentes tonos, puedes usar estas Curvas, y en la parte superior de eso, también podemos usar estas Vibrance. Estos son básicamente los colores. Se puede ver a veces decimos que necesito algo de pop en esta imagen, se deben sacar los colores, así que si se mueve este deslizador al valor máximo correcto, puede ver que los colores están realmente estallando. Entonces lo que hago es que suelo disminuir esta saturación a 5 menos 5. La saturación también es lo intenso que es el color y la vibración también está relacionada con esto. Así es como cambio la imagen por aquí. Ahora quizá veas algún tono azulado en el cielo. Esto es muy sencillo, solo tienes que hacer clic en esta capa de fondo, y he usado alguna capa de ajuste, que es básicamente podemos usar color sólido, algún tipo de color azul por aquí así, y vamos para reducir su opacidad al 20 por ciento y mantenerla a esto, así. Se puede ver el efecto de este relleno de color azul. Si quiero cambiarlo, puedo cambiarlo aquí así. Ahora está dando un poco de efecto azulado en toda la imagen. Entonces este es Color Fill, aunque quite las Curvas, todavía puedes ver este Color Fill e incluso este suave efecto de luz con esta capa desaturada, tenemos un efecto muy bueno por aquí. Si enciendo estas curvas, vale ahora, si quieres reducir la opacidad, también puedes reducir la opacidad de este canal de curvas, o curva capa. Entonces lo voy a reducir al 40 por ciento y Vibrance, voy a seleccionar esta Vibrancia y también voy a reducirla al 80 por ciento. De acuerdo, ahora este es el efecto final para esta conferencia, así que solo para recapitular, lo que hicimos es duplicar esta misma imagen a otra capa y utilizamos esta Imagen, Ajustes y Desaturar. Comando es Control Shift y U, y comando de opción U para max. Por lo que he usado esto, y luego simplemente olvidarse de todos estos, y luego seleccioné esta capa superior en blanco y negro y utilicé esta opción de mezcla de luz suave y reduje la opacidad al 50 por ciento. Entonces he usado capa de ajuste desde aquí, que es de color sólido. También puedes usar gradiente si quieres dos colores en esta imagen, diferentes colores de arriba a abajo. Ahora he usado este Color Fill, asegúrate de recortar esto con esta capa, así que Alt, haga clic entre estas dos capas para recortarlas, y este azul sólo se aplica a esta capa, y luego he usado algunas de las Curvas. He ajustado estas Curvas, acabo de jugar alrededor de ellas para que pueda obtener el efecto deseado. Después con la Vibrance, solo usé Vibrance para hacer que las imágenes aparecieran más o lo que tú dijeras. Ahora este es el fin. Te he dicho dos o tres técnicas para alterar tus imágenes. Puedes usarlos en imágenes de retrato, tu cara, o cualquier imagen que tengas. Supongo que esto cubre los conceptos básicos de la edición de imágenes para todos los diseñadores de UI, y si se me ocurre algo más, voy a crear nuevas conferencias, así que mantente atentos y ten cuidado y solo pasa a la siguiente conferencia. 74. Eliminar fondo con la herramienta Lasso magnético: hoy, vamos a quitarle el fondo a este tipo. En realidad, el fondo que tenía era algo así y lo quitamos en muy poco tiempo. Estas técnicas básicamente implican el uso de la herramienta Lasso, que es esta herramienta magnética Lasso, herramienta Photoshop. Empecemos y quitemos el fondo de este tipo y usemos cualquier otro fondo que nos guste. Esta selección básicamente, también tenemos parte de pelo y algunas otras áreas como esta, esta, esta, por lo que vamos a utilizar esta herramienta Lasso para eliminar todo esto. Empecemos. Voy a importar la imagen que tengo. Esta es una imagen libre. No recuerdo de dónde saqué esta imagen, pero seguramente la buscaré y ya está abierta. Voy a empezar de nuevo. Voy a eliminar estas capas. Esta es básicamente la imagen que teníamos. Ahora, primero, voy a hacer es duplicar esta capa y luego vamos a seleccionar esta herramienta Lasso, herramienta Lazo magnético de herramientas de Photoshop. Tan pronto como selecciones esta herramienta Lasso, y puedes ver que hay diferentes opciones por aquí, lo que se trata de opciones de alimentación. Feeder significa que va a desenfocar un poco las esquinas, así que creo que no lo necesitamos en este momento, así que manténgalo en cero. Asegúrese de que el anti-alias esté comprobado. Este ancho es básicamente el ancho de la herramienta de selección, por lo que si el ancho es muy pequeño, puedes adivinar que básicamente es la precisión de esta herramienta de Lazo Magnético. Básicamente se está recortando el contraste del suelo desnudo y de este tipo de aquí. Se puede ver cómo está funcionando así. Ahora mismo estoy usando selección muy áspera solo para asegurarme de que sabes cómo va a funcionar. Quitemos esta selección. El ancho es básicamente cuánta precisión desea en la selección. Si quieres una selección muy precisa, entonces puedes reducirla y luego el contraste. Es el contraste entre este suelo desnudo y el brazo de este tipo, se puede ver por aquí. También aquí tenemos mucho contraste, pero aquí tenemos muy menos contraste. Estos colores son casi similares, por lo que voy a reducir el contraste a cinco o 10 por ciento, cinco por ciento. Frecuencia es básicamente cuántos puntos va a poner este Photoshop para tu herramienta de Lazo Magnético. Como puedes ver aquí, tenemos 10 o 15 puntos, por lo que frecuencia, si quieres ponerlo alto, puedes ponerlo alto. Si tu objeto es muy atrevido y tiene un montón de [inaudibles] de bordes, entonces creo que la frecuencia se debe establecer en alta. Aparte de eso, creo que todos los ajustes son lo suficientemente buenos. Ahora bien, esto es para la presión de la pluma. No estamos usando tablet ni ningún otro dispositivo, así que estoy usando mi ratoncito, así que no vamos a usar esto sólo para simular. Ahora, usemos esta herramienta Lazo Magnético para hacer realmente la selección. Voy a dar clic aquí y sólo dejar que el Photoshop lo haga es truco. Siempre que siento que hay algo que necesito hacer preciso, puedo agregar manualmente otro punto de anclaje haciendo clic aquí así, por lo que es más preciso así. Aquí tenemos la mano de este tipo, luego la oreja y se puede ver cómo estoy haciendo clic y cómo estoy usando este punto de anclaje manual para mi propio uso o ventaja. No te preocupes por las áreas que se están saliendo de esta selección. Lo ajustaremos con otra técnica que es Refinar Edge. Nuestra selección casi está hecha. Ahora tenemos la selección. Cuando lleguemos al primer punto, se va a mostrar esta forma ovalada. Basta con dar click sobre él y podrás ver que se hace la selección. Ahora, la segunda parte, necesitamos restar estas áreas de la selección, por lo que vamos a seleccionar este restar de selección y vamos a seleccionar estas áreas por aquí, que no necesitamos en nuestra selección. Así. También éste. Si tienes algún error y quieres volver atrás, solo presiona retroceso dos o tres veces y así es como se remonta. Ahora, la selección también se hace, entonces tenemos esta selecciones internas en esta mano. Creo que necesitamos aumentar un poco el contraste y también este ancho porque tiene mucho contraste sobre en estas áreas. Estoy aumentando el contraste. Puedes acercar si quieres. Puede presionar Control plus y acercar. Si quieres más zoom, puedes ir así. Si quieres mover tu imagen mientras has seleccionado esta herramienta Lasso, puedes presionar Barra espaciadora y puedes moverte así y soltar la barra espaciadora. Se puede ver de cerca cómo estas selecciones están funcionando mágicamente. Estas son algunas de nuestras últimas selecciones y luego vamos a dejar esto. Hay una selección más muy pequeña por aquí. Es mejor acercar si tienes áreas muy pequeñas que necesitas seleccionar. Ahora, voy a alejarme y vamos a usar este refinamiento y se puede ver por aquí, presione esto. Ahora, hay diferentes modos. Hormigas coincidentes. De acuerdo, superposición. A mí me gusta más porque lo puedo ver sobre un fondo rojo y puedo ver dónde están los bordes y cosas que quiero hacer precisas. A algunas personas les gusta algo así, algo así como sobre blanco, pero a mí me gusta este. Es así como ves o presentas mientras estás usando la técnica de este refinador. Ahora, lo que vas a hacer, el siguiente paso vas a seleccionar el Smart Radius y puedes ver por aquí, tengo algo con un estilo de pincel más signo por aquí. Si quieres reducir su tamaño, puedes presionar estos corchetes en tu teclado así. Hazlo un poco más pequeño para obtener resultados más precisos. De lo que voy a hacer, voy a darle a Photoshop mi contorno o borde de esta imagen que estoy editando, así que solo voy a presionar y arrastrar y pintar al borde de esta imagen así y vamos a simplemente dar Photoshop el borde de esta imagen. No te preocupes por ello, podemos arreglarlo después con nuestras técnicas de enmascaramiento. Ya se puede ver que ha hecho nuestra imagen mucho mejor. Ahora bien, estas áreas, tenemos que arreglarlas también, una y luego esta, dos. Aquí, tenemos un pequeño problema. Ha borrado nuestro problema. Vamos a lidiar con este pequeño punto blanco con otra técnica, así que no te preocupes ahora mismo. Entonces ahora, tenemos un poco de problema con este cabello. Hagamos nuestra selección un poco dentro de este cabello. Ahora, este blanco detrás de este pelo de aquí se han quitado. Ahora, llegando a estas opciones. Terminamos con este radio inteligente de detección de bordes, por lo que el siguiente paso es cómo ajustar el borde. Podemos suavizarlo si queremos, si se siente muy distorsionado. No lo vamos a usar. Pluma, si enciendo esta pluma, se puede ver que hay un campo borroso alrededor de esta selección. En ocasiones, no tenemos una selección muy precisa, y queremos una pluma para poder ajustarla fácilmente. Ahora mismo, no vamos a usar la pluma. A lo mejor dos píxeles es lo suficientemente bueno. Ahora bien, si intentas aumentar el contraste, puedes ver que este contraste de borde está mejorando básicamente. Se puede ver por aquí, la mano y todo, así que hagámoslo a cinco píxeles. Creo que no necesitamos demasiado contraste, tal vez 10. Shift edge significa si te muestro el radio, este es el radio que dibujamos para nuestro radio inteligente para darle a Photoshop los bordes de esta foto. Ahora bien, si trato de cambiar el borde, en realidad cambiará el borde de este radio inteligente que dibujamos por aquí. Entonces si trato de cambiarlo hacia afuera, se puede ver que está seleccionando píxeles externos. Entonces tal vez, podemos seleccionar algo como esto más cinco porque nuestra mano realmente se estaba moviendo dentro de esto. Ahora, la última salida. Entonces lo que vamos a hacer es que vamos a usar una nueva capa con máscara de capa para dar salida a esta selección. Entonces básicamente, lo que estamos haciendo fue que estábamos refinando nuestra selección. Ahora, vamos a presionar “Ok”, y aquí, tenemos nuestra nueva imagen con esta selección y esta máscara. Ahora, voy a crear una nueva capa y llenarla con cualquier color que me guste, como este oscuro. Ya puedes ver, aún tenemos algunos problemas por aquí. Es básicamente el problema con nuestro último enmascaramiento donde movimos el borde hacia fuera de su cabello. Ahora, tenemos estas máscaras de capa, así que ve a esta máscara de capa y selecciona el color negro x. puedes ver aquí, tenemos negro. Presione la “B”, pincel. Presiona el blanco. Básicamente, necesitamos seleccionar el blanco como el color de primer plano y queremos que esto muestre su mano porque está escondida en el original así. Aquí, también tenemos algún problema aquí. El mano, necesitamos que sea visible. Si quieres hacer más pequeño el pincel, puedes presionar las teclas de las que te hablé, las teclas de soporte. Ahora, también podemos seleccionar este pincel. Invertir la selección. Si quieres ocultar algo, selecciona negro así. Ya puedes ver que estoy usando negro en este momento. Podemos quitarle el pelo si quieres, así que no te preocupes por el peinado de este tipo. Quitar pocos pelos no dañará a esta persona wow. Ya casi terminamos. Tenemos que quitar esta zona exterior borrosa, esta aquí, y algunas aquí. Lo que estoy usando es que solo estoy usando una herramienta de pincel para refinar un poco más esta máscara, y creo que casi terminamos con ella. Seleccionemos otro color para este fondo. Seleccionemos el amarillo porque este tipo estaba un poco sobre el fondo de sombra amarillenta, por lo que esto está funcionando muy bien. Entonces este es el resultado final que obtuvimos con esta imagen, y espero que hayan entendido el funcionamiento de esta herramienta de lazo magnético. Es así como normalmente elimino el fondo de la mayoría de las imágenes. También puedes usar esta herramienta de lápiz, pero creo que lleva mucho tiempo seleccionar todo manualmente y cada curva y todo por aquí así. Por lo que la mayoría de los chicos expertos o los chicos que hacen mucho edición de imágenes y retoque de imágenes, son muy expertos con esta herramienta de pluma, y creo que normalmente usan esto. Es muy preciso. Pero para la parte del cabello, supongo que esta herramienta de lazo magnético y afinar borde funciona muy bien. Todo esto se trata de la conferencia de hoy. Si no entiendes nada, hazme preguntas, y supongo, pasemos a algunas nuevas conferencias. 75. Uso de la herramienta Seleccionar y máscara para limpiar fondo: hoy, vamos a explorar una nueva característica de Photoshop CC 2015.5, que es este Select and Mask. Tiene muchas características nuevas. Creo que básicamente convirtieron este Refinar Edge en esta nueva herramienta. Por lo que hoy vamos a discutir este. Ahora el fondo que estaremos quitando es este fondo de este niño. Se puede ver por aquí este fondo. Se puede ver a este niño tener mucho pelo y es difícil extraer todos los detalles en el cabello fácilmente. Empecemos. Ahora voy a eliminar esta selección previa. En primer lugar, lo que vamos a hacer es que vamos a ir a esta herramienta Lasso, así que he visto que funciona muy bien con esta herramienta normal de Lasso. Lo que vamos a hacer es seguir presionando nuestra tecla izquierda del ratón y seguir arrastrando así. Voy a conseguir una selección y asegurarme de que la selección no sea demasiado ancha del cabello. Se puede ver que estoy dejando fuera un poco de pelo afuera así. Mantén tu selección en el interior. No tome demasiada zona exterior en esto. Esta es una selección muy ruda. Puedes ver por aquí, pulsa Shift para hacer una línea recta. Voy a combinarlo con éste. Una cosa más, si tu imagen es demasiado grande, hay un truco que debes seguir presionando la tecla Lasso y presionar Barra espaciadora y mover la imagen hacia arriba o hacia abajo. Mientras tanto, sigue presionando la tecla del ratón. Si sueltas la tecla del ratón, se va a cerrar el camino. Si bien estás en esta herramienta Lasso, no sueltes tu tecla del ratón, hagas lo que hagas. Ahora vamos a presionar este Select and Mask. Aquí tenemos, hay diferentes modos de previsualización. Se puede ver por aquí hay una nueva que se llama Piel de Cebolla. Básicamente muestra el fondo con algo de transparencia si se puede ver. Esto es lo que tenemos ahora mismo, se puede ver por aquí. También otras opciones son casi las mismas que el Refinar Edge. Se puede ver por aquí Shift, Edge, Comedero de contraste, Suave. Asegúrate de hacer clic en este profundo contaminar colores. Asegúrese de que está comprobado y la salida siempre debe ser nueva capa con máscara de capa. Ahora bien, no me gusta esta Piel de Cebolla. Normalmente me gusta este fondo rojo para poder ver fácilmente lo que tengo en esta selección. Aquí hay pocas herramientas. Se puede ver por aquí, la de arriba es básicamente herramienta de Selección Rápida, es la misma que usamos anteriormente. Entonces tenemos este Refinar Edge. Es el mismo cepillo Refinar Edge que usamos antes. Entonces esta es la herramienta Pincel. Entonces lo que hace es que puedes ver si hago clic aquí, básicamente está cambiando mi Máscara de Capa. Ya he enmascarado esta zona, pero si quiero mostrar alguna zona, siempre puedo usar esto. Así. Ya puedes ver aquí, aquí nos queda algo y voy a usar esta herramienta Pincel para recuperar la ropa así. Si quieres quitar alguna porción, vas a presionar la tecla Alt u Opción y se va a quitar esa porción de tu selección. Se puede ver por aquí, si quiero quitar esta y también esta área, y también esta área, estoy presionando en este momento, tecla Opción Alt junto con esta herramienta Pincel. Se puede ver por aquí, aquí está el tamaño y la dureza del cepillo, siempre asegúrese de que sea 100 por ciento duro. Lo segundo es que ahora vamos a ir a esta herramienta de pincel Refinar Edge. También, tenemos herramienta Lasso por aquí. Se trata básicamente de la herramienta Selección rápida y Lazo. Estas son las mismas herramientas que ya tiene Photoshop, pero se incluyeron en esta vista Select y Mask. No tenemos que volver a cambiar. Esta es nuestra herramienta Mano y esta es la herramienta de zoom Lupa. Puedes usar Control o Command plus para acercar y alejar. Comando más y menos o Control más menos. Ahora vamos a ir a esta herramienta de pincel Refinar Edge, que es nuestra herramienta principal. Voy a aumentar así el tamaño del pincel. Ahora voy a cepillarme alrededor de los bordes de este niño. Ahora, asegúrate de que puedas ver cómo me estoy cepillando ahora mismo. El signo más está casi al borde de este chico. Aquí me estoy cepillando dentro del cabello. Se puede ver cómo se está quitando mágicamente todo el cabello y todo el fondo detrás de esos vellos finos. Creo que casi realmente estoy amando esta nueva herramienta y nueva técnica. puede ver mágicamente, se ha quitado la parte más difícil que es el pelo, y el fondo detrás de esos cabellos. Se les ha quitado a todos en tan solo un instante. Ahora bien, si quieres aumentar el contraste, puedes aumentar por aquí así. También puedes ver por aquí, ahora, voy a cambiar a herramienta de pincel. Voy a cepillarme por aquí. Voy a acercar un poco. Puedo ver un poco de fondo rojo en esta chaqueta, así que voy a cepillarme aquí así. También en esta zona. Voy a cepillarme por aquí, sólo para arreglar dos cosas por aquí. Si ves algo más goteando o teniendo algún problema, puedes cepillarlo también. Se puede ver por aquí, me estoy cepillando ahora mismo en los bordes. Creo que están casi arregladas. Ahora puedes ver cómo es tan fácil con esta nueva herramienta Seleccionar y Máscara para reemplazar el fondo o despejar el fondo. Asegúrate de saber cuáles son todas estas herramientas también, esto es Selección Rápida, esta es la herramienta Lasso. Estas son básicamente herramientas para selecciones y esta es Refinar Edge. Siempre lo vas a mover a lo largo de tus bordes de tu imagen. Esta es básicamente la herramienta de pincel para ocultar y mostrar tus áreas enmascaradas, áreas enmascaradas o aquí ahora. Déjame salir a nueva capa con Máscara de capa y pulsa “Ok”. Ahora puedes ver por aquí es un fondo muy claro y limpio. Todos me he quitado fácilmente el cabello y el fondo, los he separado fácilmente. Aquí te dejamos algunos usos más. Se puede ver por aquí, extraí a esta chica del fondo. Déjame mostrarte. Este fue el trasfondo real. Utilizo la misma técnica y la extraigo. Se puede ver por aquí, yo también produje esta sombra falsa por aquí. Se puede ver también a esta chica, la imagen real es ésta. Lo que hice es quitarme el fondo y añadir paisaje urbano al fondo. Ahora bien, esta herramienta es realmente genial. Puedes controlar y quitar fácilmente las áreas. Una cosa es que si tu área de imagen está muy borrosa, como puedes ver por aquí, tiene algunos problemas por aquí. Asegúrate de que tu imagen sea un poco nítida y puedes ver por aquí, todo está crujiente, no hay nada mucho borroso. Se puede quitar fácilmente. Ahora bien, si quieres aprender esta técnica de sombras falsas, es muy simple. Acabo de añadir una sombra, sombra gota con capa por aquí. Añadí esta sombra, se puede ver por aquí, distancia 20,111 tamaño y multiplicar 13. Básicamente se va a añadir una sombra, una sombra de gota. Voy a esconder éste para que veas cómo es. Así. Moveamos un poco más la distancia y la propagación. Ahora lo que voy a hacer es mientras esta capa está seleccionada, voy a ir a Capa, y voy a Estilos de capa. Voy a ir a este Crear Capa. Básicamente fue crear capa a partir de estilos de capa, pero no sé por qué la cambiaron el nombre Crear capa. Se puede ver por aquí esa prensa “Ok”. Se puede ver que esta sombra de gota está separada de mi capa. Es así como separas la sombra de gota. Ahora voy a Comando+D o Control+D mi sombra de gota. Voy a hacer clic derecho y distorsionarlo. Voy a moverlo así. Ahora mi sombra está por aquí. Si quieres distorsionarlo aún más, puedes distorsionarlo a tu antojo. Puedes acercar las piernas al sujeto, la niña, y también a esta zona así. Se puede ver que esta es una sombra falsa muy perfecta. Fue sólo una técnica muy útil. Pensé que debería compartirlo con ustedes. Todo esto se trata de usar esta nueva herramienta Seleccionar y Máscara. Es realmente encantador y es realmente rápido eliminar fondos muy difíciles y separar imágenes pesadas o muy difíciles de su fondo. Si tiene alguna pregunta, házmelo saber. Pasemos a la siguiente lección. 76. ¿Qué son de wireframes?: hoy vamos a hablar de wireframes, qué son nuestros wireframes, y qué papel juegan en el diseño de la interfaz de usuario. Cada diseño de la interfaz de usuario comienza con una estructura alámbar. ¿ Qué es el wireframe? Wireframe es básicamente el plano de su diseño digital. Si tienes una aplicación o una página web o alguna página de aprendizaje, primero necesitas crear una estructura alámbar, por lo que el primer paso es un modelo alámbar. Wireframe puede ser creado por su cliente. Sólo dales bolígrafo y papel y déjalos bosquejar sus ideas sobre ese papel. Además, se puede utilizar Photoshop para diseñar wireframes. También puedes usar muchas otras herramientas. Te voy a mostrar en pocos minutos. En primer lugar permítanme mostrarles algunos de los ejemplos de wireframes. Se puede ver esto es el wireframe de un juego y fue un juego de apuestas. Lo diseñé usando Photoshop. Se puede ver así es como se ve. Tiene muchas pantallas, pero esta es una de las pantallas. Este es otro wireframe y lo diseñé con otro software, que se llama XOR BR. Es muy costoso. De todos modos, lo diseñé, creo que hace unos años. Este es otro ejemplo de un sitio web de carrito de compras. Este es otro ejemplo de un wireframe de aplicación móvil. Me lo da un cliente. Así es como se ve. Esta es una de la pantalla. Entonces ésta es otra que también me fue dada por un cliente. Creo que también fue diseñado en Photoshop. Todo está en gris. La mayoría de las veces estos wireframes son de escala de grises, solo tienen negro y gris y blanco. El diseñador tiene plena autoridad al final y pleno poder creativo que puede usar cualquier color por aquí. Si trato de especificar algún color en el marco alambrico, entonces el diseñador podría pensar que estos son los colores primarios y debería usarlo en sus diseños. Este es uno de los wireframe que obtuve del cliente. Este es otro wireframe que diseñé para mi propia página web. Se puede ver por aquí, estas son las pocas secciones. Creo que has visto mi página web. Es un poco diferente ahora, pero es el primer wireframe que hice para mi sitio web, está diseñado en otro software llamado Balsamiq Mockups. Todo esto se trata de wireframes. Las cosas que debes tener en cuenta son no usar demasiados colores, solo enfatizan, que es como este es botón. He usado verde por aquí. También puedes comentar por un lado, como he comentado en, déjame mostrarte. Este es el único wireframe que hice para un cliente. Puedes ver aquí he comentado por qué estoy usando esta técnica o por qué este elemento de interfaz de usuario está aquí. Se puede ver por aquí también estas secciones, todas las secciones, tienen comentarios como este. También puedes usar comentarios incluso en Photoshop y dibujar una caja por aquí con fondo rojo o fondo amarillo y poner algo de membrillo por ahí. Todo esto se trata de wireframes. En la siguiente lección, vamos a revisar algunas de las herramientas que utilizamos para wireframes. Cuáles son las herramientas en línea y cuáles son el otro software y aplicaciones. Pasemos a la siguiente lección. 77. Herramientas utilizadas para crear fotogramas de wire.: Ahora, vamos a hablar de algunas de las herramientas que utilizamos para wireframing. Ya sabes lo que son los wireframes. Vamos a la página web donde tengo todos los enlaces. Esta es una de las herramientas que he usado, Axure RP y es un poco una herramienta muy avanzada. También crea prototipos. prototipos están funcionando wireframes donde haces clic en los enlaces y ellos van a la página siguiente. También puede exportar tus prototipos en HTML, por lo que esto es bueno para grandes proyectos como e-commerce un proyecto, o algo muy grande. Por lo que puedes usar este. Es un poco caro. Creo que, tal vez 3, 400, no me acuerdo. Creo que es 495 por usuario y Equipo tiene 895. Creo que es bueno para grandes empresas de software o firmas. Yo quería mostrarles que saben que este es uno de ellos Axure RP 8. Entonces tenemos otra herramienta que es muy famosa entre los diferentes diseñadores de UI. De verdad me encantó este, Balsamiq Mockups. Es muy fácil. Sus wireframes son muy bocetos, así que no tienen esquinas muy específicas ni algo así. Permítanme mostrarles algunos de los ejemplos. ¿ Dónde están los ejemplos? Esta es una. Se puede ver cómo se ha presentado esta página web y se ha construido esta maqueta. Me gustó mucho este software, Balsamiq Mockups. Creo que cuesta alrededor de 90 dólares. Creo que está un poco en el rango. Pero si ya tienes Photoshop, esta es la mejor opción. Puedes usar Photoshop para crear tus wireframes, y este es el siguiente tema que voy a cubrir. Si tienes Photoshop, puedes descargar una gran cantidad de kits de maquetas gratis. Así que escribe por aquí, “Kits de maquetas gratis”, y te sorprenderá encontrar muchos kits de wireframing. Se puede ver esta es una de ellas Material Mockups y 15 pantallas de eCommerce. A pesar de que son para pantallas móviles, creo que también puedes usar estos componentes en tus páginas web. Esto es muy bonito. Se puede ver por aquí hay estos otros componentes. También las puedes utilizar en el diseño de tu página web. Este es uno de ellos, está en Photoshop, Sketch, y todo. Otro kit de wireframe que me encanta es de este tipo Rafal Tomal, creo que necesitas suscribirte a su sitio para descargar esto, pero es un muy buen wireframe para sitios web. Dichas casillas, muchos grandes elementos; rubro, subtítulo, párrafos, listas. Tiene un montón de cosas. Puedes ver por aquí obtienes acceso gratuito. Es necesario suscribirse para descargarlo. Otro kit de wireframe es por este Pixeden, gratis por página web. Voy a incluir el enlace, así que no te preocupes. Se puede ver que tiene muchos elementos, controles de video, información sobre herramientas, iconos, calendarios, y una gran cantidad de elementos de interfaz de usuario. El instrumento en línea que me gusta mucho es este Moqups. Te voy a compartir esta maqueta en la siguiente lección porque será tu reto de diseño web definitivo para que sepas qué habilidades has adquirido en este curso. Si eres diseñador de UI, diseñador web, obtendrás un wireframe de tu cliente o de tu cliente que necesito este diseño de sitio web. Si es un bufete muy bueno, han hecho alguna investigación de experiencia de usuario. El producto final de cada investigación de experiencia de usuario va a ser este wireframe. Último desafío de diseño web. Utilizo esta herramienta Moqups, moqups.com. Crea una cuenta gratuita por aquí. Puedes ver que tienes muchas plantillas por aquí como este, botón, enlaces, casillas de verificación, enlace único, etiqueta, nodos, y avatares, cuadrículas, iconos. Este es el que utilicé aquí. Se puede ver este icono. Si hago click por aquí, ya puedes ver. Si hago clic una vez, lo selecciona y si hago clic dos veces , me muestra las opciones. Esta es una herramienta muy buena. Se pueden ver algunas de las opciones por aquí, como llevar adelante, llevar al frente, hacia atrás. Se trata de opciones de estratificación. Entonces tenemos estas opciones de alineación. Se pueden seleccionar dos elementos y alinearlos. Este es uno de los elementos que he usado desde aquí. Puedes cambiar los colores de relleno por aquí si quieres, tal vez así. Esta es una herramienta muy bonita. Primer paso en todos los diseños de interfaz de usuario en cada proyecto de diseño web , en cada proyecto de aplicación móvil primero necesitas averiguar qué vas a diseñar, así que el primer paso es tu wireframe. Esta es una estructura alambrada que he diseñado para ustedes chicos. Voy a compartir el enlace con ustedes, y debo decir esa palabra de desafío en la siguiente lección, o debería decirlo ahora mismo? Está bien. Aquí está el reto definitivo para ti. Tienes que diseñar un sitio web muy bonito usando este wireframe. Te voy a dar algunos consejos de cómo te vas a acercar a este diseño. El número 1 es, primero elige un esquema de color. Usa cualquier logo o simplemente coloca algunos textos por aquí como logo. Ten en cuenta que un color que vas a usar para los enlaces y estos botones. A lo mejor necesitas cambiar algunos colores por aquí como los tamaños de texto diferente. Tenga en cuenta que si tenemos esta sección, esta es la primera sección, el espacio entre dos secciones como esta y ésta debe ser bueno, y debe ser igual. Si tiene la sección 1, la sección 2, la sección 3, ésta es la sección 3, el espacio entre todas estas secciones debe ser el mismo. Por lo que el margen superior y los márgenes inferiores deberían ser los mismos. Otra cosa es, cada vez que obtienes una maqueta de un cliente. Wireframe o maqueta básicamente es una maqueta lo-fi. Nosotros lo llamamos maqueta de baja fidelidad. Mock-up de baja fidelidad es cuando obtienes un wireframe de tu cliente como este, lo que vas a hacer primer paso es que debes tener el contenido. Si no tienen el contenido, va a ser un poco de dolor. El segundo es que no siempre sigas todo lo que ves en la maqueta. Eres diseñador, puedes pensar de otras maneras como podrías necesitar mover esto por aquí. Hasta la maqueta dice que debería estar aquí. Puedes usarlos por aquí o tal vez por el lado derecho y luego mover esta llamada por aquí. Además, puedes desplazar estos si quieres el video a la derecha, puedes usarlo. O incluso si quieres el video en el centro, puedes colocarlo. Este wireframe no es básicamente la directriz de diseño definitiva para ti, esto es solo mostrarte que estos elementos deben estar presentes en esta sección. Éstos deberían estar por aquí. Estos servicios deberían ser así, y necesitamos un botón debajo de ellos. Nuestros proyectos recientes tendrán estas tres categorías. Si hacemos click aquí o hacemos click en este, se va a pasar al siguiente y al tercero. Cambiemos el color del texto. Sólo va a ser gris y esto va a ser blanco. Es el mismo patrón que usé en esta barra de navegación superior. Esto es básicamente una barra de pestañas. Por lo que cambiar crea nuevas pestañas por aquí o reorganiza estas imágenes. Además, asegúrate de que si estás usando algunas imágenes en tu perfil o en tu portafolio o este diseño, mencionaron aquí su nombre y títulos para que el usuario pueda saber de qué se trata todo esto. Ahora en la parte inferior, puedes ver que eres libre de moverlos o usar cualquier estilo que te guste. Es así como usamos los wireframes en diferentes situaciones. Si tuviste una página web muy grande o necesitas un prototipo interactivo, puedes usar este. Además, pueden usar plantillas wireframe de página web, les mostré chicos. Este es el software Balsamiq Mockups. Si diseñas una gran cantidad de maquetas o wireframes, debes comprar este. Aparte de eso, creo que eres bueno con estas opciones gratuitas. No se puede exportar esto. Además, se puede ver en estos ajustes, tenemos 960 cuadrícula. Te mostré la grilla. Si eres codificador o diseñador, puedes diseñar tu alambrada usando una cuadrícula incluso desde el principio. Se puede cambiar a este uno o sin rejilla. También se puede ver el ancho es de 960, se puede aumentar su altura también. Este es el título del proyecto. Sigue explorando. Así es como deshaces y rehaces las cosas. Estos son todos los elementos, plantillas que puedes usar. También puedes importar imágenes por aquí y arrastrarlas por aquí. Estas otras páginas, si quieres múltiples páginas de un mismo sitio web, tal vez página de aprendizaje, contáctanos página, página de blog. Puedes agregar una nueva página por aquí así y seguir diseñando por aquí. También puedes agrupar elementos por aquí si quieres. Se trata de un grupo de control G o bloquear su posición. Sigue explorando esta herramienta. Creo que de verdad te encantará esta cosa de wireframing. Siempre es el primer paso en todos los diseños de UI. Ten en cuenta que este es el reto; quiero que diseñes este sitio web para que pueda juzgar lo que has aprendido en mi curso. Comparte conmigo un enlace publicado en las preguntas o mensaje significan por separado. Trataré de darte consejos sobre cómo mejorar si me muestras el diseño, lo contrario, no sé cómo puedes mejorar. Mostrar siempre tu trabajo a tus instructores o profesores o tus compañeros diseñadores que crees que esto se ve genial? ¿ O necesito mejorar algo? Empecemos. Trata de diseñar este alambres. Necesito una muy buena página web. Estás abierto a utilizar cualquier imagen o íconos gratuitos de cualquier fuente, cualquier fuente libre. A ver qué se puede llegar. Pasemos a la siguiente lección. 78. Ejercicio de →Redesign parte 1: hoy, recibí una pregunta realmente interesante de uno de mis alumnos, y lo que me preguntó es que cómo crear estas porciones resplandecientes en estos botones y cómo conseguir estas luces resplandecientes por aquí. Hay muchas técnicas para hacer esto. Básicamente es un dribble short. Déjame mostrarte lo que compartió conmigo. En realidad, compartió este documento conmigo. Este es el diseño de nuestro dribbler, y es un muy agradable estados botones prensados y elevados. Desde anoche, intentaba crear y replicar este efecto, y creé estos dos archivos que puedes ver por aquí. Esta es versión ligera y esta es versión oscura. Voy a compartir ambos los PST con ustedes chicos, así que no se olviden de descargar. Ahora en esta serie, voy a crear sólo esta versión oscura. Esto va a ser un reto para ti. Necesitas crear algo como esto. Entonces voy a crear justicia oscura. Empecemos. Ahora, durante esta conferencia, mi objetivo final no es crear este efecto impresionante, sino hacerte entender cómo el diseñador logra este efecto y cómo usó diferentes efectos para conseguir todo este impresionante mejores y elevados estados. Ahora primero, voy a abrir un archivo con los 1440 por 900 píxeles. Ahora, el primer paso va a ser tu color sólido. Necesitamos un color de fondo, que va a ser nuestro 3-2, 3-2, 3-2, que es básicamente brillo es de 20 por ciento, y saturación cero, tono cero. Es de color gris oscuro. Entonces vamos a crear un rectángulo redondeado. Selecciona un rectángulo redondeado, haz clic una vez aquí, y vamos a crearlo para que tenga 620 píxeles de ancho y 100 píxeles de altura, y el radio podría ser ocho o 10 o cinco, depende de ti. Entonces voy a ponerlo ahora mismo, así. Ahora el color para éste va a ser de 18, algo así. O tal vez 16. Depende de ti. Creo que 18 es bueno. Siempre que intentes replicar algo, necesitas ver con mucho cuidado lo que hay dentro de este diseño. Acerquemos y vamos a diseccionar este diseño. En primer lugar, se puede ver que hay una capa externa, se puede ver este es un contenedor que se ve como el mejor efecto por aquí. Ahora lo que tenemos aquí es un gradiente de oscuro a blanco por aquí al fondo. Se puede ver por aquí en esto, luego hay una capa más en la parte superior. Se puede ver por aquí, esta es básicamente la capa dentro de este contenedor de fondo. Por lo que básicamente hay dos contenedores, y encima de esos dos contenedores, estos son los tres botones. Entonces básicamente, tenemos cinco capas una encima de la otra. Ahora, déjame crear otra. Vamos a crear otro dentro de esto, y esta vez, va a tener 604 píxeles de ancho y van a ser 84 píxeles de altura. Asegúrate de que puedes usar ocho píxeles o lo que sea. Esto va a ser dentro de eso y su color va a ser un poco más oscuro. Entonces voy a presionar 14 aquí mismo, y vamos a alinear a estos dos dentro del otro. Ahora para obtener el mejor efecto, esta capa externa, el fondo externo VG, voy a nombrarlo, y va a ser VG interno para fondo interno. Ahora en el fondo exterior, vamos a usar la superposición de gradiente. Este es el gradiente que voy a usar, y es básicamente de color oscuro, negro, que va a ser este color negro a este blanco. Está en reversa y asegúrate de que esté encendido multiplicar, o puedes configurarlo a la normalidad, supongo. Lo que estamos haciendo es, estamos creando este efecto de curva de negro a blanco usando esto. Entonces tal vez podamos ajustarlo más así. Por lo que puedes ver aquí tenemos áreas blancas y aquí tenemos áreas oscuras. Hemos creado nuestras dos capas base. Ahora vamos a crear nuestros botones. Entonces vuelve a hacer clic, y necesitamos que nuestro botón tenga 200 píxeles de ancho con una altura de 80 píxeles. Ahora este es nuestro botón principal. Este es nuestro botón, btn, y vamos a moverlo aquí arriba de aquí. Simplemente alinearlo en esto así. Se puede ver cómo creé todas estas tres capas. Este tiene básicamente dos píxeles de ancho por cada lado. Estos son los botones. No estamos usando ningún efecto de trazo para cubrir esto. Esta es nuestra capa base la cual está cubriendo estos botones para crear este efecto redondeado todo alrededor de estos botones. Ahora vamos a conseguir algo de elevación y pocos efectos más a este botón. Ahora, el truco es que podemos lograr esto con muchos hechos. Podemos usar este bisel interno, y podemos usar una profundidad 100 por ciento o tal vez menos que eso, tal vez 20 por ciento, y podemos reducir el tamaño, y tal vez esto, así. Podemos reducir este tamaño por aquí, y también podemos aumentar este tamaño. Existe una técnica que involucra este grabado bivalente. Lo mismo que podemos lograr con esta superposición de gradiente. Ahora en la superposición de gradiente, voy a usar esto, que es nuestro modo de mezcla. Normal y opacidad es de 15 por ciento. Ahora, lo que estoy haciendo aquí es que estamos usando tres paradas de colores. Por lo que se puede ver cómo ha ido este efecto curvo por aquí, que son estos dos colores. Entonces cada vez que haces clic en algunos colores, puedes ver que esto es básicamente la parada que controla lo ancho que va a abarcar esto. Acércate al otro color y verás este bache en tus botones o lo que sea que estés diseñando. Si lo haces lejos de aquí, es más visible. Es así como creamos este efecto de botón elevado o pulsador usando gradientes. Esta es parte muy complicada. Si lo puedes aprender, creo que te va a dar mucho beneficio. Voy a reducir este efecto a como 23 o 20 por ciento. Así. Ahora puedes ver cómo ha ido este efecto. Se puede utilizar bisel y grava. Puedes reducirlo tal vez así. He usado 40 grados por aquí y puedes reducir la profundidad a 15 o tal vez algo así, o puedes usar esta superposición de gradiente. Hay muchas formas en las que puedes crear estos efectos. Ahora con la superposición de gradiente, voy a dar algo de sombra interior porque puedes ver por aquí no tenemos ninguna luz elevada por aquí. Esta es nuestra sombra interior y voy a usar el color blanquecino por aquí para la sombra interior. Debería estar en la parte superior, por lo que la distancia será de dos o uno. Vamos a reducir este tamaño. No lo vamos a multiplicar, así que vamos a usar lo normal. Vamos a reducir la opacidad para obtener el efecto así. Este es un efecto muy mínimo. Puedes aumentar el tamaño si quieres. Depende de ti lo que sea que te guste sea. También puedes reducir el tamaño y la suavidad. Podemos cambiar la suavidad como ésta. A lo mejor tres es bueno. Se puede ver que tenemos algún botón elevado por aquí. A lo mejor podemos añadir algo de sombra de gota con él. Podemos agregar alguna sombra de gota, 90 grados, multiplicar la distancia debe ser dos y el tamaño debe ser cuatro, cinco, o tal vez ocho es bueno. Veamos cómo esta sombra viene de aquí. Aumentemos la distancia y también esto. Voy a usar 20 por aquí. Se ve bien. Tenemos algo de sombra. Si quieres agregar múltiples sombras, depende de ti. Puedes agregar múltiples sombras por aquí. A lo mejor podemos agregar algo de sombra gris claro y expandirla o más. A lo mejor así. Podemos configurarlo para que se multiplique, para tener múltiples sombras y se verá más fresco y más mejor. Tenemos este botón. Podemos usar el color aquí tal vez así. Superposición de gradiente, tal vez podamos usar multiplicar. Esto se está poniendo genial, luciendo bien y tal vez podamos aumentar el efecto multiplicador por aquí. Vamos a añadir algo de texto por aquí. Añadamos algo de texto, uno. Voy a usar uno. Vamos a colorearlo blanco o tal vez blanco grisáceo así. A lo mejor moverlo en el medio así. Ahora casi hemos completado el efecto elevado normal. Ahora pasemos al efecto donde necesitamos un resplandor por aquí. Hay muchas maneras de crear ese resplandor, pero voy a crear un método no destructivo. Duplicar este botón, botón Capa. Duplicarlo, Control J. Lo que voy a hacer es que voy a quitar todos los efectos. Entonces vamos a quitar el campo, así que no necesitamos su color. No necesitamos el color medio. Vamos a fusionar dos colores, dos métodos, o dos estilos de capa. El de arriba, el botón de arriba, voy a dar un trazo. Voy a darnos trazo de color de este color grisáceo CACA, de dos píxeles de ancho. Tenemos este efecto. Básicamente nuestro botón Base y en la parte superior tenemos justo el trazo con un botón vacío. Es básicamente un botón vacío con solo un trazo. Ahora el siguiente paso es hacer clic derecho y lo vamos a convertir a Objeto Inteligente a través de Objeto Inteligente porque necesitamos quitar algunas porciones del mismo. Después de convertir a este Objeto Inteligente, vamos a utilizar nuestra herramienta de enmascaramiento. Crea una máscara sobre esta capa y consigue esta herramienta Pincel. Presione “B” en su teclado y “Haga clic derecho” y asegúrese de tener este consejo, este consejo borroso. No uses cepillo duro. Establezca la opacidad en 50 o 60 por ciento y comience a eliminar estas áreas. Vamos a retirar esta zona. Se puede ver cómo vamos a crear este efecto. Básicamente, vamos a cepillar algunas de las porciones así. Para esta luz por aquí, cepille en esta dirección. Dale unos trazos del pincel así. Trazos suaves muy ligeros. Ahora, puedes ver que tenemos esta luz por aquí. Una luz muy bonita. Siempre puedes volver atrás o puedes pintar con color blanco si quieres conseguir más luz por aquí así. Esta es una forma muy cool, muy fácil, y no destructiva de crear esta luz. Ahora hemos creado la luz. Puedes ajustarlo con teclas de flecha si quieres que esté en la parte inferior, tal vez un poco más abajo, o en la parte superior, depende de ti. Yo lo voy a cambiar por aquí y voy a usar un poco menos de opacidad como 50 por ciento o tal vez 75 por ciento. Esta luz se ve bien y este es muy bonito efecto que tenemos por aquí, y si quieres agregarle algo más de sombra o más profundidad, podemos usar este efecto de color biselado y repujado. A lo mejor podemos usar multiplicar por aquí, aumentar esta oscuridad por aquí y, tal vez reducir esta área blanca u opacidad. Se ve genial, muy bonito botón elevado. Este botón y el tercero, son iguales. Voy a meterlos en una sola capa. Este es nuestro grupo de capas, esta es básicamente nuestra luz, y este es un botón. Voy a Control J y lo voy a mover por aquí al final. Contamos con dos botones completados. Uno es el primer botón y este último botón es tres. En la siguiente lección vamos a crear este botón pulsado. El botón Insertar el cual se presiona y es efectos resplandecientes. De lo contrario esta conferencia será demasiado larga. Pasemos a la siguiente lección. 79. Ejercicio de rediseñar tiro de Dribbble parte 2: Ahora vamos a crear el efecto brillante y el mejor botón de esta lección. Empecemos. Lo que vamos a hacer es que vamos a copiar este mismo botón y lo vamos a mover entre estos botones. Está en estos botones y lo que vamos a hacer es primero, vamos a quitar este resplandor, aquí en la parte superior. No necesitamos ese resplandor. Entonces el siguiente paso va a ser nuestro gradiente. Tenemos que revertir el gradiente, por lo que básicamente se presiona. También vamos a cambiar un poco este gradiente porque se ve muy afilado en la parte superior. A lo mejor podemos moverlo así o tal vez así. Debe ser más oscuro porque está prensado. Entonces vamos a quitar esta sombra interior y vamos a convertirla alguna sombra interior oscura así. Al igual que esto. O también puedes quitarlo totalmente, o tal vez movemos la distancia a cero y usamos esto a cuatro, y vamos a aumentar el tamaño para ser 100. Básicamente estamos dando alguna sombra oscura a su alrededor, todo alrededor de este botón. Creo que tenemos algunos problemas de espacio, así que vamos a arreglarlos primero. Es nuestro segundo botón. Vamos a mover un poco el tercer botón por aquí, tal vez uno más píxeles. Entonces éste también, vamos a moverlo por aquí, así. Ajustaremos el fondo y las cosas después de algún tiempo. momento estamos más preocupados por este botón pulsado por aquí. A lo mejor podemos quitar este efecto biselado, y también lo vamos a mover. Cambiemos su texto a dos. Ahora se puede ver que ya se ve un poco presionado. Ahora debe haber una cosa que necesitamos cambiar y vamos a añadir una sombra interior más. Esta sombra interior, donde le das un poco más de profundidad. Vamos a conseguir alguna distancia por aquí, su tamaño debe ser cero. Estamos creando dos sombras internas. Cambiemos el color a un poco más oscuro, tal vez así. Así, y hagámoslo un poco más suave. Ahora estamos bien. Ahora en la parte inferior necesitamos una sombra de gota. Se va a quitar todas las sombras de gota, y necesitamos una sombra de gota blanca por aquí. Esto está básicamente prensado, por lo que su luz debe reflejarse aquí. Será más oscuro desde arriba, esta zona superior, y será más claro desde esta zona. Vamos a añadir una sombra de gota que será un poco de sombra de gota blanquecina, y vamos a reducir su tamaño. Vamos a cambiar su modo de mezcla a superposición. Se puede ver un poco de sombra por aquí. Redujamos el tamaño a 12, y la distancia debe ser de ocho píxeles, supongo que es buena. Podemos aumentar el efecto moviendo este deslizador hacia arriba y hacia abajo. Depende de tu gusto, cualquier luz que quieras por aquí. Creo que me gusta estar al 75 por ciento, es bueno. A lo mejor necesito cambiar un poco más la sombra interior. Ahora mismo me está viendo un poco aburrido. A lo mejor necesito más sombra interior, que va a ser así. Voy a dar algo más de sombra oscura por aquí, y tal vez pueda aumentar el tamaño. Vamos a subirlo un poco así. Se ve muy bonito efecto prensado. Si lo deseas también puedes reducir esta zona oscura superior por aquí. Estos son ajustes finos, puedes hacerlos toda la noche. Voy a crear rápidamente este botón ahora mismo para ti. Cambiemos el color a este azul, y luego le vamos a dar efecto Brillo Exterior. Efecto Brillo Exterior, asegúrate de que el color que usas sea muy nítido. Se puede ver por aquí la saturación es del 100 por ciento, el brillo es un 100 por ciento. Asegúrate de que estos dos sean 100 por ciento y usa cualquier color que quieras. Se va a brillar realmente y ajustar estos valores. Esto está básicamente extendido. Creo que el dos o tres por ciento de spread es bueno. Entonces tenemos el tamaño, tamaño de 10 píxeles. El resplandor externo es así. Es así como vamos a usar, también asegúrate de que sea un poco opaco y un poco transparente. Será en el medio. Es así como vamos a dar este efecto de resplandor. Ahora llegando a los otros efectos de resplandor, por aquí y por aquí. Estas son técnicas muy antiguas, pero te voy a mostrar por aquí. Hay muchas maneras de crear esos efectos resplandecientes. Vamos a seleccionar esta zona por aquí, y podemos usar pincel. Esta es la técnica más antigua, cepillo ligero. Ahora, lo que vamos a hacer es seleccionar nuestra herramienta de pincel, y aumentar un poco su tamaño. Selecciona el color con el que nos gusta cepillarnos, como este. Asegúrate de que sea un color un poco nítido. Sostén tu pincel de nuevo, y vamos a usar brocha así. Se puede ver por aquí que nos está dando una luz de resplandor y vamos a usar superposición, o tal vez podamos usar aligerar así. Ahora, lo que vamos a hacer es que vamos a quitar el resto de la luz. Sólo necesitamos que esté por aquí en esta zona. Vamos a Control click o Comando click en este botón, y necesitamos quitar todo de este botón. Sostenga su borrador, o tal vez seleccione este pincel ligero y presione “Eliminar”. ¿ Qué está pasando? A lo mejor necesito usar goma de borrar por aquí. Ups. Ahora tengo mi borrador. Quitemos esto así y presionemos M y aquí hemos hecho este trabajo. Ahora vamos a seleccionar esta zona y controlar turno I o comando shift i para invertir la selección, y luego de nuevo vamos a agarrar nuestra herramienta de borrador y vamos a borrar esta luz extra por aquí. Presione M o control o comando D para anular la selección. Se puede ver por aquí tenemos una luz muy afilada. Si quieres reducir la luz, puedes usar la opacidad o tal vez otra vez, puedes usar este enmascaramiento y podemos volver a cepillar las áreas que no necesitamos por aquí. Este es todo el juego de esconder y eliminar nuestros efectos por aquí. Se puede ver cómo podemos hacer eso fácilmente así, tal vez podamos reducir el efecto por aquí así, y podemos multiplicarlo controlar JS para realzar el efecto. Si quieres reducir el efecto puedes usar algo así. La misma técnica se va a utilizar en la parte inferior de aquí, o la segunda técnica que voy a mostrarles es esta. Vamos a usar una barra redondeada por aquí tal vez unos píxeles de ancho. Control D asegúrate de que esté en la altura va a ser de 2-4 píxeles no lo hacen demasiado grande, así. Tenemos esta barra de línea por aquí y vamos a usar alguna técnica realmente bonita la cual va a ser borrosa, desenfoque gaussiano. Antes de eso vamos a convertir esto a objeto inteligente así, así que voy a usar el desenfoque así. Se puede ver que hay demasiadas técnicas para crear el mismo efecto, así que tal vez pueda usar otro desenfoque que es el desenfoque de movimiento. Yo quiero que sea en esta dirección, para que pueda usar algo así. Se puede ver lo genial que va a ser este efecto. Es como la luz emitiendo desde este fondo de este botón. Puedes ajustar la luz donde quieras que esté, y puedes usar opacidad como 50 por ciento o 20 por ciento o 30 por ciento o tal vez creo que 450 por ciento fue bueno de lo contrario se ve muy aburrida. Puedes usar efecto de superposición o tal vez puedes usar quemar color depende de ti o tal vez normal. Creo que lo normal se ve bien y necesito aumentar el efecto a 75 por ciento así, se ve bien. Si quieres reducir el tamaño, también puedes transformar esto y usar la altura y reducir la altura a tres píxeles. Ya puedes ver ahora es un poco delgado y más elegante. De la misma manera vamos a dar el resplandor en estos dos lados, así que si miras esto por aquí puedes ver hay luces por aquí en esta zona y esta área. Esta es la misma forma en que vamos a usar esto. A lo mejor podemos volver a usar el mismo rectángulo o tal vez podamos duplicar esto, controlar T y podemos rotarlo así, reducir su tamaño así y acercamos, usar las asas por aquí, reducir su tamaño a algo como esto tal vez más. Ahora, necesitamos cambiar la dirección de desenfoque del movimiento, por lo que va a ser en esta dirección. Deberían ser 90 así, así que tal vez necesitamos reducir más el tamaño o tal vez podamos reducir el tamaño del desenfoque de movimiento así. Ahora puedes moverlo por aquí. Se puede ver cómo se ve genial la diapositiva. Si quieres ocultar las porciones, puedes recortar esto dentro de eso o puedes volver a usar el enmascaramiento y cepillarlo así. Voy a cepillarlo ahora mismo. Se puede ver cómo este efecto se ve genial y fresco y muy geeky. Lo estoy duplicando y poniéndolo en el lado izquierdo. Ahora bien, creo que nuestro mejor efecto está casi hecho. A lo mejor podemos oscurecerlo un poco más de esta zona y también de esta zona. Es así como se crean diferentes efectos de luz o efectos crecientes alrededor de los botones o en los bordes de los botones, o bien se pueden crear luces resplandecientes con pinceles y ocultar las partes de esos pinceles. enmascaramiento es nuestra técnica clave y en su mayoría hemos utilizado los objetos inteligentes. Necesitas saber que cómo creé todo esto, usamos gradientes, luego usamos bisel y grabado, usamos estas luces. He creado estas luces con tres técnicas. Una era pincel, otra con efecto de trazo de capas, y otra era sólo mediante el uso de una capa de objeto inteligente con, lo que un efecto fue este desenfoque de movimiento. Me estoy olvidando de muchas cosas. Es así como creamos este efecto fresco. Ahora, tu reto es que me vas a dar algo como esto. Ahora, el consejo es que cada vez que intentas crear o replicar algo, necesitas acercar y ver todos los píxeles y pequeños detalles por aquí como puedes ver por aquí, hay un borde de negro, una línea sobre aquí entonces tenemos esta sombra interior y en la parte superior tenemos resplandor. Lo mismo está por aquí, lo mismo ha hecho aquí. La única diferencia es que tienen sombras suaves por aquí y los colores son un poco más brillantes y ligeros. Este es el final de esta impresionante lección para crear este efecto dribble. Voy a crear mucha nueva conferencia pronto, así que mantente atentos y si tienes alguna pregunta hazme. Pasemos a la siguiente lección. 80. Convertir PSD a consejos de codificación: Muchos de ustedes podrían estar preguntándose cómo convertir cualquier capa o cómo copiar sus propiedades CSS si quieren convertirla a algún HTML o algún elemento de página web. Déjame mostrarte un truco muy sencillo. Es solo un comando de copia de Photoshop y CSS por defecto He aplicado al trazo de píxel a esta capa, este rectángulo redondeado y luego algún drop shadow. Así que basta con hacer clic derecho en esta capa y hacer clic en esta Copiar CSS. He hecho un archivo de muestra por aquí, así que vamos a probarlo. Vamos a pegar esto como una clase de prueba. Entonces prueba. Si no eres de un fondo de programación, no te preocupes, solo te voy a mostrar que cómo vamos a usar estos valores CSS. Básicamente, estos son los valores CSS. La mayoría de las veces quizá no necesitemos esta posición absoluta de la parte superior izquierda por aquí, también este índice z. Voy a comentar esto. Abramos nuestro archivo en un navegador y veamos, vale, ¿dónde están nuestros estilos? Está bien. El problema fue esta configuración de visualización. He empezado a mostrar bloque. Aquí está nuestra cuadra. Veamos cómo se va a ver cuando voy a usar absoluto. Se está moviendo debido a esta página HTML y con respecto a esta página HTML. Es así como vamos a convertir nuestros archivos CSS y PST a CSS. Entonces solo copia esto aquí así. Ahora voy a copiar este texto por aquí. Voy a hacer clic derecho Copiar CSS y voy a pegar los estilos a mi estilo de encabezado 2, h2. No te preocupes si no eres codificador, si tu codificador o desarrolladores quieren HTML, solo dale este código y eso será lo suficientemente bueno para ellos. Entonces no te preocupes si no sabes mucho de la codificación. Asegúrate de quitar de aquí este índice z y este posicionamiento absoluto. Posición absoluta izquierda y superior, siempre quítelos porque no los necesitamos. Así es como te voy a mostrar. Este es nuestro texto, “Hola, soy algún texto aquí”. Misma fuente, mismo color, todo. Básicamente lo que realmente necesitamos de nuestro CSS es este tamaño de fuente, familia de fuentes, color, line-height y el ancho y alto, no necesitamos tamaños de fuente, así que vamos a eliminarlo. ¿ Qué es esto? Está bien. Esta es una manera y segunda forma es este plugin que se llama CSS Hat. Yo he comprado. Se trata de un plug-in premium. Convierte tus estilos a CSS Less y Sass y Stylus. El concreto está teniendo algún problema mostrando mi sombra de gota por aquí. Se puede ver si cambio a esta capa, no está mostrando ninguna sombra de gota. Pero para la parte CSS está mostrando muy bueno como borde dos píxeles, sólido y color, color de fondo en valores hexadecimales. Podemos establecer sus opciones por aquí. Este es un plug-in muy bueno y si eres desarrollador, creo que es un plug-in must have. Ahora hay una herramienta más que es muy reciente y es este Avocode. Solo estoy usando su versión de prueba y supongo que es muy buena app. Pero el problema es que es un poco costoso para mi gusto. Puedes ver por aquí si selecciono esta actualización por aquí. Ahora cuenta con integración online con estas aplicaciones de escritorio. Si subes cualquier archivo desde aquí como Open Design y carga tu archivo PST por aquí, te mostrará tamaños. Puedes seleccionar herramientas por aquí como medir y hacer clic en cualquier capa. Te mostrará el tamaño de esta caja. Ahora está mostrando que es un archivo de texto y estos son los ajustes. También está mostrando las distancias de todos los rincones. Es muy impresionante. A la par de esto, está mostrando todo el código sobre del lado derecho, algunas opciones de exportación. Entonces tengo la fuente que estoy usando, que es Oblik Bold por aquí y si voy a este panel Capas, puedo ver todas las capas usadas como estas. Esto es muy grandioso. De verdad me gusta, pero realmente lo compraría si tuvieran algún plan como puedo comprarlo por un año. Lo tienen por un mes, como un mes de uso como Garage, tienes diseños ilimitados empresa empresarial. Si estás trabajando en un equipo muy grande o en un equipo, supongo que esta es muy buena opción. Puedes seguir adelante y comprar este Avocode y creo que es realmente bueno en convertir tus archivos PST a CSS. Pero por ahora me voy a apegar a este comando predeterminado Copiar CSS de Photoshop. Este es el consejo que realmente quería mostrarles hoy chicos. Uno de mis alumnos hizo la pregunta para convertir algo a CSS y esta es la respuesta. Este es un video de solicitud. Mantente atentos y te estaré actualizando muy pronto. Pasemos a algunas nuevas conferencias. 81. Exportar imágenes para consejos de diseño web: Hablemos de guardar imágenes para un diseño Web y UI. Entonces cuando intentas exportar o guardar tu imagen para el diseño Web, o podrías meterte en muchos problemas, como podrías ver diferentes colores en la exportación. Hay una solución muy simple alrededor de esto. Entonces déjame mostrarte el proceso y las cosas que debes tener en cuenta al exportar tus imágenes para diseño Web y diseño de interfaz de usuario. Esta es una imagen. Si quieres exportarlo, primer lugar, vas a utilizar este Comando de Exportación. No utilices Guardar como o Guardar como archivo JPEG. Vamos a utilizar Exportar y Guardar Para Web Legacy. Haga clic en esto y el atajo es Alt Control Shift y S. Ahora en este panel, asegúrese de tener PNG seleccionado o incluso JPEG seleccionado. Ambos son buenos. Se puede reducir la calidad del archivo JPEG para obtener el tamaño que desee. Se puede ver tamaño muy diminuto archivo JPEG viniendo por aquí. Es de 151.5 kilobytes. Entonces si quieres imagen muy pequeña, puedes reducirla como un 70 por ciento. Ahora es 124.8 KB. Si bien estás diseñando sitios web estás muy preocupado por los tamaños de las imágenes para acelerar tu sitio web y reducir el tiempo de carga. Ahora, así es como guardamos una imagen JPEG. También puedes hacer clic en este progresivo. Lo que hará es que cargará tu imagen en diferentes sesiones. Al igual que primero, será una imagen borrosa, luego comenzará a aparecer lenta y lentamente si quieres esta opción. Asegúrese de que se haga clic en Optimizar. El muy, muy importante es este convertir a sRGB. Asegúrese siempre de que esto no esté comprobado. La mayoría de las veces Creará muchos problemas de perfil de color. Así que asegúrate de que esté desmarcada y la vista previa esté configurada para monitorear el color. También puedes utilizar este estándar de Internet RGB. Sin manejo del color. Voy a poner este y luego golpear “Guardar”. Si quieres cambiar este tamaño de imagen, puedes cambiarlo por aquí, como yo quería 1024. Entonces la altura será esta, y la anchura será esta. Este candado significa que están nivelados uno con respecto al otro. Por lo que aumentará y disminuirá en proporción. La mayoría de las veces no necesitamos desmarcar esto. Entonces, por ejemplo, si trato de usar la altura 900 y se puede ver que está distorsionada. Es así como utilizamos este panel. La mayor parte del tiempo para Web, recomiendo este PNG 8 o PNG 24, imagen transparente. En su mayoría utilizamos PNG 24. Entonces si tienes muy bajo nivel de colores, no es una imagen muy colorida, entonces puedes ir a este archivo PNG 8. Se puede ver la vista previa por aquí. Hagamos esto de nuevo proporcional. Ahora puedes ver aquí tenemos una tabla de colores. Está mostrando 256 colores y creo que son suficientes para mostrar mi imagen y todo con precisión. Por lo que estoy usando esto, asegúrate de esta transparencia. Si tu imagen tiene algo de transparencia, comprueba esta. A veces el formato PNG 8 podría no mostrar la transparencia muy agradable. Por lo que necesitas cambiar a PNG 24. Es la mejor opción para mostrar transparencia. Entonces si vamos al archivo PNG 8, no te preocupes por estas configuraciones, solo asegúrate de que ésta sea perpetua y ésta esté configurada en difusión. La difusión obtiene mejores resultados. Puedes reducir los colores si quieres reducir el tamaño del archivo. puede ver por aquí es 31 K. Si trato de reducir los colores a 64 el tamaño del archivo es de 24 K, pero se puede ver mi imagen está un poco distorsionada. Déjame acercarlo. Haga clic aquí. Se puede ver que tengo algo de cara pixelada por aquí. Entonces si cambio a 128 y luego vuelvo a 256, se está mostrando muy agradable. Por lo que estos son diferentes ajustes por aquí. También puedes guardar tus presets por aquí. Si has seleccionado algunas opciones, puedes guardar configuraciones y nombrarlas como diseño de interfaz de usuario, PNG 8, diseño de interfaz de usuario, PNG 24 algo así. Entonces todo eso se trata de guardar tus imágenes y asegurarte que sus colores sean los mismos que los has diseñado. El otro es asegurarte de que tu color esté establecido en este RGB 8. En su opinión, su configuración de prueba está configurada para monitorear el RGB y sus colores de prueba no están marcados. Entonces esto es otra cosa que debes tener en cuenta. Entonces si tienes tu color de prueba establecido en, por ejemplo, CMYK, entonces esto puede causar muchos problemas cuando intentas exportarlo. Además, no debe estar en el inicio de Internet y estándar RGB o sRGB. Asegúrate de que es Monitor RGB, Colores de prueba está desmarcada y luego siempre usas esta Exportar Guardar Para Web. También puedes usar esta Exportación rápida, pero asegúrate de que tus preferencias de exportación estén configuradas en donde hayas desmarcado. Aquí tenemos exportación. Asegúrese de que está establecido en transparencia PNG y Convertir a sRGB está desmarcada. Entonces estas son las cosas que realmente necesitaba decirles chicos y la mayoría de los desarrolladores web y diseñadores web, cuando tienden a exportar sus imágenes y rebanadas, necesitan tener en cuenta todas estas cosas. Este fue un video de solicitud y uno de mis alumnos estaba teniendo problemas en este asunto. Estaré subiendo muchos consejos y trucos nuevos. Así que mantente atentos y pasemos a algún diseño impresionante. 82. Consejos de usar cuadrículas en Photoshop: Te voy a mostrar un truco muy sencillo sobre cómo usar tus rejillas mientras diseñas, así que este es un consejo, déjame mostrarte. Si tienes una cuadrícula como esta, como te mostré en mis anteriores conferencias. Mientras estás diseñando, a veces necesitas ocultarlo y mostrarlo de nuevo si lo tienes en total opacidad como esta. Entonces esto se ve realmente mal cuando estás diseñando. Lo que hago es colorearlos o colorearlos, como este tono gris oscuro, y reduzco la opacidad al 10 por ciento así. Entonces trato de encerrarlo por aquí. Se puede ver este pequeño candado en el panel Capas. Lo encierro para que no lo mueva accidentalmente. Mientras estás diseñando, puedes mostrar fácilmente tus rejillas y alinear mejor las cosas y hacerlo muy bien. Otra cosa que hago es mover esta rejilla en la parte superior. Así que muévelo todo por encima de todas tus capas y manténgalo ahí y manténgalo en muy baja opacidad como cinco por ciento o 10 por ciento y sigue diseñando. Entonces este es un truco muy limpio y sencillo. Por lo tanto, mantente atentos para más trucos. Los estaré compartiendo mucho. Pasemos a algunas nuevas conferencias impresionantes. 83. Conde font → nuevas funciones en Photoshop CC2017: Hay otra nueva característica en Photoshop CC 2015.5, y que básicamente es fuente de coincidencia. ¿ Dónde lo vas a encontrar? Por aquí en el tipo, puedes ver Match Font. Se trata de una característica muy nueva y muy cool. Puedes emparejar fuentes fácilmente. Este es un disparo de Dribbble de otra persona diseñadora de UI. Es trabajar fuera de alguien más así que no sé quién es el responsable de este tipo de trabajo de todos modos. Ahora lo que voy a hacer es solo abrir un tiro de Dribbble aleatorio de Dribbble. Voy a emparejar fuentes si puedo ver que tengo las mismas fuentes como esta. En primer lugar, voy a hacer es voy a seleccionar alguna porción, asegurarme de que sea muy pequeña, no uses demasiado o demasiado ancha. A lo mejor puedes ir a estas cuatro letras, e ir a escribir y emparejar fuentes. Ahora, se va a buscar algunas fuentes. También se va a sincronizar fuentes de Typekit. Si te has suscrito a Typekit, va a conseguir algunas fuentes a partir de ahí. Ha encontrado 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 fuentes, las cuales son casi similares. Ahora el mejor teléfono que me gusta por aquí es este Tw Cen MT Regular. Si hago clic sobre él y presiono “OK”, ahora está seleccionado. Ahora voy a ir a mi herramienta Tipo. Si trato de escribir por aquí, las mismas palabras, pago, se puede ver lo cerca que ha coincidido con mi fuente. Creo que son idénticas. Este diseñador usó la misma fuente que estoy usando en este momento, es Tw Cen MT. Es básicamente fuente geométrica. Podrás encontrar más sobre fuentes en mi otro curso tipográfico. Esta es otra característica que es muy cool. Puede hacer coincidir fácilmente el tipo, las caras y las fuentes. Podrás encontrar si ya has instalado alguna fuente que esté más cercana o cercana a la fuente utilizada en esta cualquier imagen. Entonces en lugar de ir a sitios web, qué fuente o lo que sea para encontrar la fuente utilizada, puedes usar esta herramienta de Photoshop y muy bonito agregar, puedes usarla y encontrar las fuentes más cercanas que quieras usar. Esta es una nueva característica en Photoshop CC 2015.5. Si tiene alguna pregunta, házmelo saber. Pocos de mis alumnos solicitaron estas nuevas características en Photoshop en la última versión, así que estoy creando esta conferencia y una otra. Pasemos a la siguiente lección.