Empieza tu carrera en diseño de interfaz de usuario en Photoshop | Muhammad Ahsan Pervaiz | Skillshare
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      ¿Qué es este curso?

      4:04

    • 2.

      Lectura de Photoshop CC2017 preferencias para diseño de UI

      6:19

    • 3.

      Configuración de accesos personalizados

      4:19

    • 4.

      Instalación de scripts en Photoshop

      5:40

    • 5.

      Instalación de Scripts de Photoshop en MAC

      2:15

    • 6.

      Extensiones de Photoshop para diseñadores de UI

      7:09

    • 7.

      Poder de extensiones de Photoshop

      9:28

    • 8.

      Cómo instalar extensiones de Photoshop

      5:46

    • 9.

      Instalación de extensiones de ZXP de Installer

      6:29

    • 10.

      Instalación de extensiones de Photoshop en MAC

      5:07

    • 11.

      Configuración de paneles y espacio de trabajo para diseño de UI

      7:16

    • 12.

      ¿Qué es la calibración del colores?

      8:24

    • 13.

      Los mejores monitores (led) para diseñadores

      2:21

    • 14.

      Calibración de colores basada de sistemas de sistema

      7:29

    • 15.

      Cómo funciona el interfaz de de Photoshop

      5:03

    • 16.

      Photohsop de nuevo documento

      4:12

    • 17.

      ¿Qué son de tableros de arte?

      6:22

    • 18.

      Cómo funciona las capas en Photoshop

      7:53

    • 19.

      Panel de texto en Photsohop

      4:38

    • 20.

      Herramienta de forma en Photohsop

      6:34

    • 21.

      Conceptos básicos de la herramienta Pluma

      2:53

    • 22.

      Más sobre el uso de la herramienta Pluma

      15:52

    • 23.

      Alineación en Photoshop

      6:02

    • 24.

      Selecciones en Photohsop

      6:21

    • 25.

      Atajos comunes de Photoshop

      14:35

    • 26.

      Uso de máscaras de capa en Photoshop

      5:26

    • 27.

      Uso de máscara de recorte

      2:48

    • 28.

      Ejercicio de destilde → máscara de recorte

      0:50

    • 29.

      Uso de objetos inteligentes en Photoshop

      7:40

    • 30.

      Objetos inteligentes en Photoshop

      7:00

    • 31.

      Uso de Comps de capas en Photoshop

      6:27

    • 32.

      Dominar los efectos de capa de gota

      3:40

    • 33.

      Uso de la capa de sombra interna

      2:17

    • 34.

      Uso de efecto de capa de capa de línea

      2:43

    • 35.

      Reutilización de estilos de capa

      2:03

    • 36.

      ¿Qué son los gradientes?

      2:03

    • 37.

      Uso de degradados en el diseño de UI

      3:41

    • 38.

      3 formas de crear Gradients en Photoshop

      4:49

    • 39.

      Uso de Editor de degradado en Photoshop

      7:30

    • 40.

      Uso de la estilo de capa de superposición de degradado

      5:34

    • 41.

      ¿Qué son los patrones y cómo los utilizamos en el diseño web?

      2:28

    • 42.

      2 métodos de aplicar patrones

      4:59

    • 43.

      Crear patrones a partir de un archivo de imagen

      2:35

    • 44.

      Instalación y uso de archivos .pat

      5:11

    • 45.

      Cómo funciona la luz y la sombra en el diseño de UI

      4:01

    • 46.

      Ejemplos de uso de luz y sombra

      2:22

    • 47.

      Esquema de color para principiantes

      1:54

    • 48.

      Uso de la saturación y el brillo en los esquemas de color

      1:28

    • 49.

      Herramientas en línea para crear esquemas de colores

      5:29

    • 50.

      Selección de fuentes y tipografía

      8:55

    • 51.

      Uso de cuadrículas en el diseño web

      5:51

    • 52.

      Crear cuadrículas en Photoshop

      6:14

    • 53.

      Desafío de creación de botones de sombras suave

      0:25

    • 54.

      Solución de diseño de botones de sombras suave

      12:47

    • 55.

      Desafío de diseño de botones 3D

      1:12

    • 56.

      Efecto prensado en Photoshop

      7:09

    • 57.

      Diseño de encabezados moderno parte 1

      8:46

    • 58.

      Diseño de encabezados moderno parte 2

      8:49

    • 59.

      Variación de diseño de encabezados modernos

      9:02

    • 60.

      Efectos de superposición de color para el área de héroe

      11:25

    • 61.

      Ejercicio de efectos de enmascara

      13:15

    • 62.

      Diseño de tabletas de Photsohop

      0:58

    • 63.

      Diseño de tabletas 1

      14:14

    • 64.

      Diseño de tabletas 2

      8:08

    • 65.

      Reúne recursos para diseño de aplicaciones de IOS

      4:00

    • 66.

      Lectura de diseño de aplicaciones de IOS

      4:35

    • 67.

      Agregar elementos de menú a la aplicación de IOS

      5:47

    • 68.

      Agregar texto a la pantalla de aplicación de IOS

      5:30

    • 69.

      Agregar botones al diseño de aplicaciones de IOS

      11:51

    • 70.

      Usar maquetas de App para mostrar tus diseños

      4:12

    • 71.

      Truco de simple para eliminar fondos blancos

      3:20

    • 72.

      Eliminar pequeños objetos de la imagen con la curación de spt

      4:26

    • 73.

      Hacer que colores muestren en imágenes

      6:48

    • 74.

      Eliminar fondo con la herramienta Lasso magnético

      15:53

    • 75.

      Uso de la herramienta Seleccionar y máscara para limpiar fondo

      10:20

    • 76.

      ¿Qué son de wireframes?

      3:45

    • 77.

      Herramientas utilizadas para crear fotogramas de wire.

      11:59

    • 78.

      Ejercicio de →Redesign parte 1

      15:11

    • 79.

      Ejercicio de rediseñar tiro de Dribbble parte 2

      14:43

    • 80.

      Convertir PSD a consejos de codificación

      6:18

    • 81.

      Exportar imágenes para consejos de diseño web

      6:59

    • 82.

      Consejos de usar cuadrículas en Photoshop

      1:30

    • 83.

      Conde font → nuevas funciones en Photoshop CC2017

      2:46

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1350

Estudiantes

2

Proyectos

Acerca de esta clase

Curso de mayor venta (TODO en uno en Adobe CURse)

¿Crees que diseñadores de UI utilizan Photoshop de la misma manera que los otros diseñadores?

¿Sabes cuáles de los conceptos, ajustes y herramientas que los diseñadores de diseñadores de UI y no no lo no?

Así que si quieres aprender a diseñar de UI con Photoshop y mejorar tu confianza y niveles de confianza en Photoshop; este curso es para TIti. Este curso es igualmente bueno para principiantes y expertos de así que no te preocupes, no tengas que usar Photoshop antes.

La mayoría de nosotros no sabemos los ajustes básicos, accesiones, herramientas y extensión que necesitamos en Photoshop para que shortcuts, en UI Designer, cometemos errores y seguimos de perderán tiempo en línea en busca de diferentes ajustes y respuestas a problemas de diseño de UI comunes.

¿Qué aprenderás?

  • Domina herramientas básicas de Photoshop específico de diseño de UI de la calidad.
  • Aplica tu conocimiento al diseño de página de aterrizaje o la App App o el diseño de aplicaciones con aplicaciones móvil
  • Utiliza Shortcuts, y extensiones de secretos comunes para acelerar tu flujo de trabajo de diseño de web
  • Aprende sobre conceptos básicos de la luz y la sombra en el diseño de UI
  • Cómo utilizar patrones y degradados para mejorar tus diseños
  • Aprende cómo los diseñadores de profesionales de usuarios en sus rutinas diarias
  • Uso de y la creación de guías y cuadradas con extensiones de Photoshop
  • Instalación y uso de extensiones de Photoshop para el objetivo de diseño de UI
  • Usar Gradients y superposiciones de color para crear diseños modernos
  • Saber sobre todos los complementos y extensiones que usan en Diseñadores de UI los diseñadores utilizan todo el tiempo
  • Aprende a crear y usar GRIDS en el diseño web
  • Diseño de aplicación móvil en Photoshop (ejercicio paso a paso)
  • Técnicas de edición de imágenes en Photoshop para eliminar fondo
  • Conceptos de ajuste de colores de imagen para diseñadores de UI
  • ¿Qué son de los esquemas de Wireframes, cómo crear esquemas y herramientas para diseñar fotogramas?
  • Ejercicios de rediseño en la velocidad a un paso

Estructura de curso

  • Más de 20 ejemplos de práctica y desafíos de diseño para ayudarte en el diseño de UI
  • Preguntas para probar tu conocimiento de Photoshop sobre diseño de UI

Serie de lecciones de estudiantes

Se added muchas conferencias a pedido de mis estudiantes actuales, así que únete y pide cualquier problema de diseño o cualquier problema que quieras aprender de trabajo que quieras aprender

  • Cómo instalar extensiones de Photoshop ZXP en CC2017 (Lectura de pedidos de estudiantes)

Toma este curso ahora y comienza tu carrera como diseñador de UI

Conoce a tu profesor(a)

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Profesor(a)

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

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