Transcripciones
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 ejecutar