CursosEmpresasBlogLiveConfPrecios

Cosas útiles en Sketch

Clase 22 de 22 • Curso de Sketch 2017

Contenido del curso

Introducción al curso de Sketch

  • 1
    Actualización de Curso

    Actualización de Curso

    00:05 min
  • 2
    ¿Qué es Sketch y para qué sirve?

    ¿Qué es Sketch y para qué sirve?

    01:39 min

Las Herramientas de Sketch

  • 3
    Creación de documento e interfaz de Sketch

    Creación de documento e interfaz de Sketch

    02:01 min
  • 4
    Herramientas de navegación en Sketch

    Herramientas de navegación en Sketch

    01:27 min
  • 5
    Cómo funcionan los artboards en Sketch

    Cómo funcionan los artboards en Sketch

    04:11 min

Capas

  • 6
    Crear y manipular capas en Sketch

    Crear y manipular capas en Sketch

    10:12 min
  • 7
    Agrupar, bloquear y ocultar capas

    Agrupar, bloquear y ocultar capas

    04:09 min

Objetos, Máscaras y Textos

  • 8
    Combinar Objetos

    Combinar Objetos

    03:51 min
  • 9
    Máscaras en Sketch

    Máscaras en Sketch

    03:59 min
  • 10
    Uso de la pluma en Sketch

    Uso de la pluma en Sketch

    06:07 min
  • 11
    Creación de textos en Sketch

    Creación de textos en Sketch

    10:28 min
  • 12
    Símbolos en Sketch

    Símbolos en Sketch

    05:24 min
  • 13
    Aplicando símbolos

    Aplicando símbolos

    13:09 min

Proyecto - Diseñando una App

  • 14
    Layout, grillas y reglas

    Layout, grillas y reglas

    11:56 min
  • 15
    Cómo hacer un wireframe digital

    Cómo hacer un wireframe digital

    18:05 min
  • 16
    Cómo diseñar un UI Kit

    Cómo diseñar un UI Kit

    17:23 min
  • 17
    Diseñando íconos

    Diseñando íconos

    12:26 min
  • 18
    Armando el Mockup

    Armando el Mockup

    24:58 min
  • 19
    Exportando assets

    Exportando assets

    06:03 min
  • 20
    Mirror

    Mirror

    03:48 min
  • 21
    Plugins en Sketch

    Plugins en Sketch

    09:02 min

Material Bonus

  • 22
    Cosas útiles en Sketch

    Cosas útiles en Sketch

    Viendo ahora
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

      Como ya hemos visto en este curso, Sketch es un software especializado en diseño de interfaces. Anteriormente se hacía el diseño de estas interfaces en programas como Illustrator y Photoshop, esto funcionaba, pero hacía mucho más tardado el proceso. Es por eso que Sketch fue pensado para cubrir todos los requerimientos que implica diseñar una interfaz de la forma más eficiente posible.

      Aquí hay algunas cosas más que podemos encontrar, y algunos datos útiles para el trabajo más eficiente del software.

      Vistas en Sketch

      Hay dos formas diferentes en las que puedes ver tus diseños en Sketch: Vector y Pixel. Vamos a hablar de la utilidad de la vista en Pixel.

      ¿Para qué nos sería útil esta vista? Es la mejor forma de previsualizar todo aquello que deseamos exportar. También es muy útil para la creación de íconos, ya que nos muestra si los límites de la forma están sobre valores de píxeles completos.

      ¿Cómo encontrarla?

      Desde el menú: View › Canvas › Show Pixels on Zoom Shortcut: Cmnd + P

      Edición de Bitmaps

      Como ya sabemos, los bitmaps son una representación binaria en la cual un bit o conjunto de bits corresponde a alguna parte de un objeto como una imagen o fuente. Para editar bitmaps esto es lo que se debe hacer:

      1. Seleccionar la imagen y dar click para que aparezca el inspector de propiedades.
      2. Seleccionar cualquiera de estas dos herramientas, según lo que necesites:
      • Selection: Crea una selección rectangular en la imagen.
      • Magic wand: Crea una selección cuando se arrastra el cursor hasta cubrir toda el área que se desea.
      1. Para editar la imagen se puede utilizar cualquiera de las siguientes herramientas, según lo que se necesite:
      • Invert: El área que no fue seleccionada es la que termina lista para edición.
      • Crop: Recorta la capa para solo tener disponible el área seleccionada.
      • Color: Rellena el área que se selecciona con el color que se elija desde el selector que aparece una vez activamos la herramienta.

      Mejor rendimiento del software

      Hay algunas cosas que pueden hacer que el procesamiento del software sea lento y no fluya a la hora que estamos trabajando en nuestros diseños, aquí están los casos más comunes con la solución más práctica para hacer rendir el programa:

      • Imágenes: Tener muchas imágenes en un solo documento puede hacer más lento el programa a la hora de trabajar y aumentar significativamente el tamaño del archivo.

      Solución práctica: Se puede reducir el tamaño de las imágenes periódicamente después de haber agregado varias.

      • Blurs o difuminados: Agregar muchos difuminados en las imágenes que manejamos en un documento puede hacer más lento el software, esto se debe a que el programa tiene que renderizar muchos más pixeles que en una capa normal. Entra más grande es el radio de desenfoque son más los pixeles que el programa necesita probar y procesar.

      Solución práctica: Maneja con cuidado la cantidad de imágenes en las que colocas difuminados o desenfoques. Mira si, respetando el diseño, puedes disminuir el radio para que la renderización del programa sea menos pesada.

      • Múltiples páginas: El programa está diseñado para tener un número infinito de páginas, sin embargo, cuando éstas contienen imágenes muy grandes o imágenes con sombra o difuminados puede influir para que el software se alente.

      Solución práctica: Aprovecharse de la característica de las páginas incluyendo algunas ilustraciones en diversas paginaciones.

      • Crear contornos: Convertir una gran cantidad de textos a contornos es una de las razones principales de que el programa trabaje más lento.

      Solución práctica: Aunque es importante vectorizar ciertos textos, lo más recomendable es que no se conviertan a contornos oraciones completas o párrafos completos.

      ¿Qué otras herramientas o datos útiles te gustaría aprender? o si has descubierto buenas prácticas comprobadas para el uso de Sketch, cuéntanos en el sistema de discusiones.

      Comentarios

        Francisco Daniel Hernández Puerto

        Francisco Daniel Hernández Puerto

        student•
        hace 8 años

        Abstract
        Kactus
        Zeplin
        Principle
        Invision
        Marvel
        ¿Icon Font (plugin) o symbols?

          Uriel Ramírez

          Uriel Ramírez

          student•
          hace 8 años

          Para sketch indispensable simbolos y librerías. Hay mucha gente que le va bien así Sketch Vanilla. A mi me gustan muchos los plugins, pero el que sean indispensables depende mucho de los proyectos en los que trabajes

          Adolfo Maragoto

          Adolfo Maragoto

          student•
          hace 8 años

          Muy buen aporte Fdhernandez.
          De los indispensables que hay que conocer, despues cada uno valora si los necesita o no.
          Muchas gracias

        Luis Somellera

        Luis Somellera

        student•
        hace 7 años

        Yo encontre muy util el comando cmd + 2 o ctrl + 2, para hacer zoom al objeto que tengo seleccionado.

          Azul Pérez Domínguez

          Azul Pérez Domínguez

          student•
          hace 7 años

          y CMND + 1 Para zoom out directo a todos los artboards :)

        Irma Davila

        Irma Davila

        student•
        hace 7 años

        gracias muy rapido y practico el curso

        Valeria Ahily Rios De la O

        Valeria Ahily Rios De la O

        student•
        hace 7 años

        Me gustaría aprender a utilizar otros plugins en Sketch, así como también importar fuentes a un proyecto :)

        Juan Llerena Fernandez

        Juan Llerena Fernandez

        student•
        hace 8 años

        Que buen post!!!

        Gracias Karen por la colaboración.

        Juan Pareles

        Juan Pareles

        student•
        hace 8 años

        Buen aporte 😃

        Manuel Martínez Ortiz

        Manuel Martínez Ortiz

        student•
        hace 7 años

        ¡Excelentes consejos! Una buena manera de ser más eficiente con los recursos.

        Adolfo Maragoto

        Adolfo Maragoto

        student•
        hace 8 años

        Muchas gracias Karen, ha sido un muy buen aporte 😉

        Brian Miranda Rodríguez

        Brian Miranda Rodríguez

        student•
        hace 8 años

        Gracias Karen!

          Kath Sánchez

          Kath Sánchez

          teacher•
          hace 8 años

          ❤️

        Daniel Peñaloza

        Daniel Peñaloza

        student•
        hace 8 años

        Lo mejor para crear símbolos es renombrar las capas con un texto muy descriptivo tanto para el diseñador como para el desarrollador. Personalmente uso Avocode y funciona muy bien.

        Otro buen plugin para hacer botones con paddings dinámicos es Paddy que ayuda a que los botones mantengan su padding sea cualquiera el ancho del texto.

        Por último el plugin de Google de Material Theme Editor es lo mejor para tener una base de componentes para una app básica.

        Alejandro Sol Villaseñor

        Alejandro Sol Villaseñor

        student•
        hace 7 años

        Excelentes consejos para mantener un rendimiento optimo al trabajar con Sketch y no sufrir dolores de cabeza. Gracias!

        ezequiel cenicola

        ezequiel cenicola

        student•
        hace 7 años

        Gran aporte 😄

        Jairo Mercedes

        Jairo Mercedes

        student•
        hace 7 años

        Excelente.muchas gracias

        DANIEL DAVID BENAVIDES SANCHEZ

        DANIEL DAVID BENAVIDES SANCHEZ

        student•
        hace 7 años

        Muchas gracias. Es una excelente herramienta!

        Rodrigo Castaño

        Rodrigo Castaño

        student•
        hace 7 años

        Tengo una duda, ¿hay alguna manera de exportar y que la estructura quede en html con css?

          Juan Castro

          Juan Castro

          teacher•
          hace 7 años

          ¡Pero por favor! ¡Ese es el trabajo de les devs! Pueden haber plugins pero podrías maquetarlo tu mismo y seguro que queda mejor :wink:.

          Edwar Baron

          Edwar Baron

          Team Platzi•
          hace 7 años

          Hola, seguramente si habrá maneras, pero sería código generado, difícil de mantener por un dev, y no es tan buena práctica, a no ser que quieras solo tener el sitio y los únicos cambios los seguirías haciendo tu mismo.

        jorge nova ferrer

        jorge nova ferrer

        student•
        hace 7 años

        Gracias!

        Christian Rainier Patiño Lara

        Christian Rainier Patiño Lara

        student•
        hace 7 años

        Gracias, información extra muy buena.

        Gran curso.

        Christian Rainier Patiño Lara

        Christian Rainier Patiño Lara

        student•
        hace 7 años

        Un consejo UX.

        Cambien la palabra Examen, por algo más amigable.

        A mí en lo personal, me trajo malos recuerdos xD.

        P.D. Tengo 37 años y soy de la vieja escuela.

        Cinthia Ñacari Brenis

        Cinthia Ñacari Brenis

        student•
        hace 7 años

        Sencillo , entendible, me encanto el curso Sketch, gracias!

        Julio J Yépez

        Julio J Yépez

        student•
        hace 9 años

        ¡Qué bien!
        ¡Gracias Karen por la actualización!