CursosEmpresasBlogLiveConfPrecios

Imágenes y máscaras

Clase 13 de 32 • Curso de Adobe XD 2019

Contenido del curso

Conocer la importancia de utilizar una herramienta especializada en el diseño de interfaces

  • 1

    Actualización de curso

    00:05 min
  • 2
    Qué es AdobeXD y por qué usar AdobeXD

    Qué es AdobeXD y por qué usar AdobeXD

    01:11 min
  • 3

    Instalación

    00:51 min

Crear y configurar un nuevo proyecto

  • 4
    Creación de un documento

    Creación de un documento

    03:03 min
  • 5
    Interfaz y navegación

    Interfaz y navegación

    05:24 min
  • 6

    Atajos de teclado

    00:12 min
  • 7
    Artboards

    Artboards

    05:18 min
  • 8
    Grids y layouts

    Grids y layouts

    06:40 min

Utilizar las herramientas de Diseño

  • 9
    Formas

    Formas

    14:17 min
  • 10
    Alinear y combinar formas

    Alinear y combinar formas

    06:55 min
  • 11
    Diseñar icono

    Diseñar icono

    14:06 min
  • 12
    Textos y tipografía

    Textos y tipografía

    06:29 min
  • 13
    Imágenes y máscaras

    Imágenes y máscaras

    Viendo ahora
  • 14
    Pluma

    Pluma

    06:09 min

Optimizar el trabajo con herramientas avanzadas

  • 15
    Repeat grid tool

    Repeat grid tool

    10:45 min
  • 16
    Cargar contenido en repeat grid tool

    Cargar contenido en repeat grid tool

    03:03 min
  • 17
    Componentes

    Componentes

    09:38 min
  • 18
    Panel de assets

    Panel de assets

    08:34 min
  • 19
    Responsive Resize

    Responsive Resize

    09:09 min
  • 20
    UI Kits

    UI Kits

    04:39 min

Diseñar una app

  • 21
    Wireframes del proyecto:sección cartelera

    Wireframes del proyecto:sección cartelera

    11:20 min
  • 22
    Wireframes del proyecto: menú inferior

    Wireframes del proyecto: menú inferior

    07:14 min
  • 23
    Mockups del proyecto

    Mockups del proyecto

    15:26 min
  • 24
    Definiendo la paleta de color para el mockup del proyecto

    Definiendo la paleta de color para el mockup del proyecto

    11:52 min
  • 25

    Teoría del color para el diseño de interfaces

    03:10 min
  • 26
    Agregar contenido al mockup del proyecto

    Agregar contenido al mockup del proyecto

    12:51 min

Crear prototipos interactivos

  • 27
    Prototipado

    Prototipado

    07:13 min
  • 28
    Animaciones automáticas con Adobe XD

    Animaciones automáticas con Adobe XD

    03:45 min
  • 29
    Animaciones avanzadas

    Animaciones avanzadas

    04:27 min

Aplicar las mejores prácticas y herramientas para exportar los proyectos

  • 30
    Exportado

    Exportado

    06:46 min
  • 31
    Compartir

    Compartir

    06:59 min
  • 32
    Conclusiones

    Conclusiones

    01:37 min
Tomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads
        Christian Arturo Rios  Mock

        Christian Arturo Rios Mock

        student•
        hace 6 años

        Les comparto una pantalla que hice para móvil es un registro de usuario para un restaurante en Ecuador

        5_Login.png

          santiagorestreporueda

          santiagorestreporueda

          student•
          hace 6 años

          Súper bien, muy buen trabajo!!!

          Christopher Sanchez

          Christopher Sanchez

          student•
          hace 6 años

          Esta brutal Bro, felicidades

        Ares Alberto Vázquez Bravo

        Ares Alberto Vázquez Bravo

        student•
        hace 6 años

        Les comparto un ejercicio que hice tomando en cuanta lo visto hasta el momento.

        Captura de Pantalla 2020-05-04 a la(s) 14.14.46.png
          santiagorestreporueda

          santiagorestreporueda

          student•
          hace 6 años

          Que talento muy buen onboarding!

        Daniel Cabrera Ramirez

        Daniel Cabrera Ramirez

        student•
        hace 6 años

        eso de objeto es en MAC, en windows seleccionas ambos objetos, das click derecho y seleccionas "mascara con forma"

        Héctor Daniel Vega Quiñones

        Héctor Daniel Vega Quiñones

        teacher•
        hace 6 años

        Si queremos utilizar la opción de máscara en Windows, seleccionamos la imágen, la forma simple y usamos el comando Ctrl + Shift + M.

        Jhon Alexander Romero Gonzaga

        Jhon Alexander Romero Gonzaga

        student•
        hace 6 años

        Creo que quiero tomar el curso de illustrator, photoshop y lightroom también. Me apasiona el mundo del arte y diseño, admiro a esas personas que hacen estos trabajos (Vengo de programación y realización de webs).

          Michael Torres Morán

          Michael Torres Morán

          student•
          hace 6 años

          Hazlo :D en esto no hay limites

          Ares Alberto Vázquez Bravo

          Ares Alberto Vázquez Bravo

          student•
          hace 6 años

          Te ayudará a complementar el curso, y será más sencillo de aprender ya que todas las plataformas de ADOBE son muy similares

        Andrea Paola Parra Martínez

        Andrea Paola Parra Martínez

        student•
        hace 6 años

        Shift Ctrl G para desagrupar la máscara. :)

        Kevin Barreto

        Kevin Barreto

        student•
        hace 6 años
        Reto_Interfaz_PS4.png
        Luis Ricardo Moran Chozo

        Luis Ricardo Moran Chozo

        student•
        hace 6 años

        En MASCARA en windows seleccionamos las imagen y la forma le damos click derecho y seleccionamos MASK WITH SHAPE.

        Maylith Ángulo Angulo

        Maylith Ángulo Angulo

        student•
        hace 6 años
        Grupo 1.png
        Pablo Perez

        Pablo Perez

        student•
        hace 6 años
        login.png
        inicio app.png
        Héctor Daniel Vega Quiñones

        Héctor Daniel Vega Quiñones

        teacher•
        hace 6 años

        Si tenemos una imagen en el porta papeles/clipboard y queremos colocarla dentro de una figura, podemos utilizar el comando Ctrl + Alt + V (en Windows).

        Daniel Felipe

        Daniel Felipe

        student•
        hace 5 años

        Aplicando lo aprendida hasta el momento!

        iPhone X-XS-11 Pro – 1.png

        Nicolás Flecha

        Nicolás Flecha

        student•
        hace 5 años
        iPhone 12 Pro Max – 1.png
        Daniela Iriza Barres

        Daniela Iriza Barres

        student•
        hace 6 años

        Hola como puedo desplegar o hacer que aparezca las opciones de files, edit, object, view y window? porque intento aplicar las mascaras y no puedo hacerlos porque en adobe xd no me aparecen aqui una captura de pantalla

        Screenshot (13)_LI.jpg

          Cristian Mauricio Cavanzo Arias

          Cristian Mauricio Cavanzo Arias

          student•
          hace 6 años

          Hola bro, Lo que pasa es que aparece asi solo en mac, tienes que hacerlo con comandos o dandole click derecho a las dos capas seleccionadas https://helpx.adobe.com/es/xd/help/create-a-mask-with-shapes.html

          Daniela Iriza Barres

          Daniela Iriza Barres

          student•
          hace 6 años

          Muchisimas gracias!

        Dustin Campos

        Dustin Campos

        student•
        hace 7 años

        me tiene enamorado la simplicidad de XD, increible que no haya oido de este programa antes

        Susana Gonzalez Cano

        Susana Gonzalez Cano

        student•
        hace 6 años

        Usé Illustrator por muchos años, pero luego de comenzar con Xd me siento incómoda diseñando en cualquier otro software. ¿A alguien más le pasa?

          Efraín Hernández García

          Efraín Hernández García

          student•
          hace 6 años

          Siempre pasa cuando cambiamos de software es normal 😁

          Tania Ramírez

          Tania Ramírez

          student•
          hace 6 años

          Yo ahora quiero hacer todo en Xd jaja

        Carlos Gutierrez

        Carlos Gutierrez

        student•
        hace 6 años
        SIgnUp.JPG
        Alfonso Navarro

        Alfonso Navarro

        company_admin•
        hace 5 años

        S.O.S Colombia

        Andres Ortegon

        Andres Ortegon

        student•
        hace 6 años

        Esta funcione son muy útiles para diseño de interfaces y diseño web, nunca más usare Illustrator y Photosop jejeje (para este tipo de trabajos) ;)

        Ricardo Esteva

        Ricardo Esteva

        student•
        hace 6 años

        Un caso específico para mascara:

        Cuando volteas la imagen de forma vertical u horizontal o la giras dentro de un vector el vector también sufre el ajuste, hay que girar la imagen y después hacer la mascara con el vector.