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 es