Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
  • Smartphone
    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    ¿Cómo afecta la tecnología a nuestra vida social?

    ¿Cómo afecta la tecnología a nuestra vida social?

    Aumenta tu productividad con el procesador HUAWEI P60 Pro

    Aumenta tu productividad con el procesador HUAWEI P60 Pro

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    Compartir archivos entre Windows y Android nunca fue tan fácil con Near Share

    ¿Cómo afecta la tecnología a nuestra vida social?

    ¿Cómo afecta la tecnología a nuestra vida social?

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Historia de los sistemas operativos

    Historia de los sistemas operativos

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Como eliminar las aplicaciones predeterminadas de Windows 10 y 11

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Cómo instalar un servidor web en tu ordenador con XAMPP

    Cómo instalar un servidor web en tu ordenador con XAMPP

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    ¿Cómo Hackear Una Cuenta de Gmail de Otra Persona?

    Como activar Windows 10 con KMSAuto

    Como activar Windows 10 con KMSAuto

    Tutorial de administrador de Salesforce: paso a paso

    Tutorial de administrador de Salesforce: paso a paso

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    La ciberseguridad: Vital Para Las Apuestas Online en España

    La ciberseguridad: Vital Para Las Apuestas Online en España

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    China desarrolla una batería de litio con una densidad récord de almacenamiento de energía

    El negocio de la salud

    El negocio de la salud

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

    Intel está paulatinamente descontinuando numerosos procesadores de su 11.ª generación

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    ¿Por qué necesitas un entrenador personal?

    ¿Por qué necesitas un entrenador personal?

    Descubre los beneficios y funciones de la suplementación deportiva

    Descubre los beneficios y funciones de la suplementación deportiva

    Razones por las que los ejercicios HIIT son los más efectivos

    Razones por las que los ejercicios HIIT son los más efectivos

    Alimentos que mejorarán tu desempeño en el gimnasio

    Alimentos que mejorarán tu desempeño en el gimnasio

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Cosas a considerar al comprar mesas de maquillaje al por mayor

    Consejos efectivos para tratar las ojeras

    Consejos efectivos para tratar las ojeras

    Cuidado de la piel saludable para adolescentes

    Cuidado de la piel saludable para adolescentes

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Hinchado, brillante y quebradizo? Usted podría ser demasiado exfoliante

    Top 5 por las que estas realmente ansioso por el chocolate

    Top 5 por las que estas realmente ansioso por el chocolate

    Aumento de peso por retención de agua

    Aumento de peso por retención de agua

    Aprende a perder peso de manera eficiente y correcta

    Aprende a perder peso de manera eficiente y correcta

    Maneras de preparar ensaladas con aspecto atractivo

    Maneras de preparar ensaladas con aspecto atractivo

    Cómo llevar un vestido largo todo el año

    Cómo llevar un vestido largo todo el año

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Los mejores consejos de moda femenina para hacerte lucir más elegante

    Ideas para tu boda del sueño

    Ideas para tu boda del sueño

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Que hacer para que los zapatos de las mujeres sean más cómodos

    Gestión Digital para Autónomos: Aprende a Administrar tu Negocio en Línea Eficazmente

    Gestión Digital para Autónomos: Aprende a Administrar tu Negocio en Línea Eficazmente

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    Cómo negociar con los acreedores: consejos prácticos para negociar con los acreedores y reducir sus deudas

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    5 Ways to Use Hair Extensions - Custom Hair by Albert Amin

    Beneficios de las placas solares de autoconsumo

    Beneficios de las placas solares de autoconsumo

    ¡Servicio de limpieza profesional a domicilio!

    ¡Servicio de limpieza profesional a domicilio!

    ¿Qué es el Snus? Una guía para principiantes

    ¿Qué es el Snus? Una guía para principiantes

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar el tiempo libre para mejorar tu salud mental y física

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

    Cómo aprovechar la tecnología para mejorar tu estilo de vida

  • Marketing
    Herramienta de analisis de tus problemas de SEO

    Herramienta de analisis de tus problemas de SEO

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramientas SEO para posicionamiento de nuestra web 2023

    Herramienta online de generador de datos estructurados

    Herramienta online de generador de datos estructurados

    Reescritor de Articulos - herramienta de paráfrasis

    Reescritor de Articulos - herramienta de paráfrasis

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

    Analisis de backlinks: Herramienta gratuita de SEO (Backlinks Checker)

  • Juegos
    Juegos - HTML5 Canvas

    Juegos - HTML5 Canvas

    Como jugar online y resolver un sudoku

    Como jugar online y resolver un sudoku

    Cómo jugar Ajedrez Online TL

    Cómo jugar Ajedrez Online TL

    Como se juega al ajedrez

    Como se juega al ajedrez

    Tetris en JavaScript – Open source

    Tetris en JavaScript – Open source

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Noticias » Como crear iconos para tu app con la aplicación Sketch

Como crear iconos para tu app con la aplicación Sketch


Tutoriales En Linea Por Tutoriales En Linea En: Noticias, Tutorial, Android, App, Diseño Web, WebSite, Software, Apple 0 Noviembre 02, 2018

3.7К
VISTO
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte Email
Compartir
Facebook Twitter LinkedIn Pinterest Email
Diseñar un ícono de aplicación no es una tarea fácil. Tanto Apple como Android emplean una Guía de interfaz humana que describe las recomendaciones y los requisitos para crear un ícono de aplicación que acompañe a su aplicación. Es obligatorio enviar íconos de aplicaciones en una variedad de tamaños, para varios casos de uso, que sean compatibles con las pantallas de retina y no retina. Y luego están los iconos opcionales ( configuración, barra de herramientas, barra de navegación, barra de pestañas, etc. ). ¡Ay!

Podríamos superar esto en Photoshop usando objetos inteligentes y creando solo un ícono de aplicación singular que se reducirá automáticamente a todos los tamaños necesarios. La plantilla de iconos de la aplicación incluso creó una plantilla PSD gratuita y una acción de Photoshop que nos exportó los iconos, pero con la aplicación Sketch 3 esa funcionalidad está disponible de forma nativa.

¿Por qué?

Debido a que Sketch está hecho para UI y diseñadores de aplicaciones, Photoshop no lo es.

No quiere decir que Photoshop e Illustrator sean herramientas inútiles. Photoshop tiene mejor soporte para el control de capas e Illustrator es una herramienta vectorial con características de Símbolo. Sin embargo, Sketch App toma todo esto en consideración y, dado que se encuentra cómodamente en la versión 3.2.2, ofrece lo mejor de ambos mundos en una sola aplicación para Mac por solo $ 99: capas, vectores y velocidad.

¿Qué vamos a hacer?

En este tutorial, aprenderemos cómo construir un ícono de aplicación en formato vectorial utilizando las características inherentes de Sketch App 3, así como la funcionalidad adicional del cuadro de herramientas de Sketch. También haremos un uso excelente de las herramientas de exportación aclamadas por la crítica. Aquí hay uno que hice antes.

Nota: antes de comenzar, se debe tener en cuenta que Sketch tiene una plantilla de íconos de aplicaciones de iOS. No lo usaremos, y si no está interesado en saber por qué, no dude en omitir esta sección y continúe con el tutorial real.

Navegue por su atención a Archivo → Nuevo desde plantilla → Icono de aplicación de iOS . En la primera observación, notará que hay varias mesas de trabajo flotando en nuestro lienzo ilimitado. Genial - eso es lo que queremos, ¿verdad? Mira a tu izquierda y también notarás la barra lateral de capas. Cada mesa de trabajo tiene un nombre adecuado (por ejemplo, iTunesArtwork @ 2x ) y dentro de ellos hay una forma. Presione "R" para activar una forma de rectángulo y dibuje para que coincida con las dimensiones de la mesa de trabajo. Podría mantener presionada la tecla Mayús mientras hace esto para mantener una relación de aspecto 1: 1 si eso ayuda, pero notará que la aplicación Sketch se alinea automáticamente (e intuitivamente) con las capas vecinas de todos modos.


¡Oh no, hemos perdido nuestras esquinas redondeadas! 

Apple requiere que envíes iconos cuadrados de aplicaciones porque iOS aplica automáticamente la máscara de la esquina redondeada para ti. Cada esquina debe tener un ángulo de "90 grados"; son muy específicos al respecto, por lo que podemos usar esta Forma de icono como máscara de capa para ver cómo se vería nuestro icono de verdad. Haga clic con el botón izquierdo en Forma de icono y seleccione "Usar como máscara": nuestro icono ha redondeado las esquinas nuevamente.

Ahora convertiremos este rectángulo en un "Símbolo" y lo usaremos varias veces.

¿Qué son los símbolos?

Los símbolos son una colección de estilos guardada dentro de un grupo (similar a una clase CSS). Imagine poder diseñar un botón, crear un nuevo grupo y aplicar el "Botón" a ese grupo, evitando que tenga que diseñar otro botón. Es una cosa que ahorra tiempo. Si cambia los estilos de un grupo simbolizado, cada uno de los símbolos se actualizará automáticamente ( caso de uso: finaliza el diseño de una aplicación y decide que todos los botones deben ser de un color diferente ).

En la barra lateral derecha ("el inspector") podrá ver que nuestro rectángulo tiene un Relleno y un Borde , y también un Ancho y una Altura . Cambie el color del relleno , reduzca las dimensiones y seleccione "Grupo" en la barra de herramientas de la aplicación Sketch. En este momento, el enfoque cambiará del rectángulo al grupo creado recientemente y ahora se puede ver "Sin símbolo" en el inspector. Haga clic en eso, seleccione "Crear nuevo símbolo" y llámelo "Icono".
Presione CMD + D para duplicar este símbolo e intente cambiar su tamaño. Ambos símbolos han cambiado de tamaño simultáneamente y ahora debería ser evidente por qué este no es un método adecuado para crear iconos de diferentes tamaños.

Entonces, ¿cuál es la mejor cosa siguiente?

Simple duplicación . Cuando hayamos terminado de diseñar el ícono de nuestra aplicación, podemos duplicar todo el grupo varias veces, cambiar el tamaño de todos y moverlos a las otras mesas de trabajo. Genial, tendríamos íconos de aplicaciones en todos los tamaños correctos; solo si necesitábamos hacer un cambio tendríamos que actualizar cada grupo.

Todo esto es muy delicado, estos Símbolos, y si bien la aplicación Sketch es una herramienta brillante, es importante entender sus limitaciones para que no perdamos tiempo.

Nota al margen
: este es mi único problema con Sketch, no dejes que esto te desanime.

Ahora tira todo a la basura

Y vamos a empezar de nuevo. Sketch Toolbox y el complemento Aeiconizer serán nuestro salvador esta vez, y aunque es una forma menos nativa de manejar este tipo de flujo de trabajo, funciona de manera espléndida. Diseñaremos un icono de aplicación singular y utilizaremos el Complemento Aeiconizer de Sketch Toolbox para reproducir nuestro diseño en las dimensiones correctas, listo para la exportación. Crearemos una aplicación de "noche" ficticia, para la cual se necesitará un ícono de la luna simple.

  • Presiona CMD + N para abrir un nuevo lienzo
  • Presione "A" para Artboard y seleccione 180 - iPhone 6 Plus en los iconos de iOS
  • Presione CMD + "+" para acercar al 200%
  • Presione "R" y dibuje un rectángulo del mismo tamaño que la mesa de trabajo
Con el inspector, elija los siguientes estilos:

  • Rellenar: # 23282c
  • Borde: untick y basura

Construyendo la forma de la luna

Ahora vamos a crear la base de nuestra forma de luna:

  • Presione "O" para Oval y dibuje un círculo de 109 x 109
  • Asegúrate de destrozar las fronteras ; el relleno se puede dejar por ahora
  • Arrastre el círculo hasta el centro muerto del lienzo hasta que encaje
  • Duplica el círculo y alinéalo con el borde derecho de la mesa de trabajo
En este momento, parece que tenemos dos círculos superpuestos en nuestro lienzo; el círculo original será nuestra luna y el círculo duplicado se usará para sustraer un fragmento con forma de luna del círculo original.

  • Mantenga presionada la tecla Mayús y seleccione ambas formas ovaladas en el lienzo
  • En la barra de herramientas de la aplicación Sketch, pulsa Restar

Nuestras dos formas ovaladas deberían haberse transformado para crear una forma de luna singular. En esta etapa, la forma de nuestra luna no es destructiva, lo que significa que podemos ubicar nuestras dos formas originales al alternar el menú desplegable en la barra lateral de nuestras capas; esto es útil porque queremos mover la forma ovalada sustractiva para refinar la forma de nuestra Luna. Cuando esté satisfecho con la forma de la luna, haga clic en Aplanar en la barra de herramientas de la aplicación de croquis. Aplanar es una acción destructiva, nuestras dos formas ovaladas ya no se pueden recuperar.

Estilo del icono

Con el inspector, crea los siguientes estilos:

  • Rellene: #FFF, 85 ( Hex, A )
  • Borde: #FFF, 5 ( Hex, A ) con Exterior, 3 ( Posición, Espesor )
  • Sombras: # 000, 50 ( Hex, A ) y 0, 2, 10, 0 ( X, Y, Desenfoque, Extensión )
  • Sombra interior 1: #FFF, 15 ( Hex, A ) y 0, 4, 0, 0 ( X, Y, Desenfoque, Propagación )
  • Sombra interior 2: # 000, 10 ( Hex, A ) y 10, 0, 0, 0 ( X, Y, Desenfoque, Propagación )
Ahora tenemos un icono de luna más estilizado pero sutil. Por supuesto, la idea es que la aplicación se distinga como una aplicación de "noche", pero ya que funcionaría principalmente en segundo plano cuando las luces están apagadas ( sonidos ambientales, funciones de reloj de alarma, etcétera ) la sensación general del icono No debe ser demasiado deslumbrante.

Empezando con el cuadro de herramientas de Sketch

Como mencioné en un tutorial de Sketch App a principios de este mes, Sketch Toolbox es una aplicación para Mac gratuita y no oficial creada por @sharuz que administra sus extensiones de Sketch App. Una vez que haya instalado la aplicación, que es bastante fácil de usar, busque el Complemento Aeiconizer e instálela. Este método es un poco más sencillo que usar la opción "Reveal Plugins Folder ..." de la barra de herramientas de Mac y copiar nuestras extensiones descargadas en eso.

Haciendo uso del complemento Aeiconizer

Ahora que la única mesa de trabajo en nuestro lienzo contiene nuestro diseño de ícono de aplicación final, podemos replicar esa mesa de trabajo en una variedad de tamaños compatibles con iOS.

Dato: la mesa de trabajo original tiene el tamaño correcto para el ícono de Apple touch .

Seleccione la mesa de trabajo de la barra lateral de capas y navegue hasta Complementos → Aeiconizer. En un instante, notará que nuestro icono se ha duplicado varias veces; este flujo de trabajo es mucho más eficiente porque:

  1. No necesitamos configurar ningún símbolo.
  2. Trabajamos con un artboard singular.
  3. Podemos cambiar nuestro diseño original y ejecutar Aeiconizer de nuevo.

Exportando el icono de la aplicación

Las aplicaciones creadas con Xcode tienen una carpeta designada para almacenar imágenes (incluidos los íconos de la aplicación) llamada Images.xcassets . Dentro de esta carpeta, es necesario incluir versiones 2x y 3x de todas las imágenes, para tener en cuenta las pantallas de retina.

Las funciones de exportación de Sketch App le ofrecerán la posibilidad de guardar cualquier imagen como 2x y 3x si lo solicita, pero como nuestra mesa de trabajo ya contiene esas dimensiones, podemos exportar simplemente como 1x (sin retina).

Comience seleccionando cada mesa de trabajo de la barra lateral de capas, pero recuerde omitir la mesa de trabajo original. Si ejecutó Aeiconizer hace solo unos momentos, las mesas de trabajo requeridas ya estarán seleccionadas. Presione CMD + Shift + E para comenzar la operación de exportación. Aparecerá un cuadro de diálogo que le pedirá que confirme la exportación; puede marcar o desmarcar cualquier mesa de trabajo antes de exportar finalmente. Si necesita exportar una capa o un grupo con configuraciones personalizadas (esto puede no aplicarse a nuestro ícono de la aplicación, pero tal vez un diseño futuro), seleccione la capa deseada y haga clic en "Hacer exportable" en la esquina inferior derecha de la ventana de la aplicación. Tendrá la oportunidad de elegir un formato de archivo, un sufijo o una resolución diferentes antes de exportar esa capa individual.

Independientemente de cómo inicie la operación de exportación, Sketch App siempre recuerda todas y cada una de las capas exportadas, junto con sus ajustes de exportación, y guarda esa información en lo que llamamos un 'Slice'. Los usuarios de Adobe Fireworks estarán familiarizados con esta terminología.

Además de lo obvio, los segmentos son útiles para otros diseñadores y desarrolladores que están usando el archivo .sketch por primera vez; es posible que deseen usarlos y es muy útil tenerlos ya configurados.

Conclusión

En este tutorial de Sketch 3, hemos aprendido cómo crear una forma básica utilizando diferentes tipos de enmascaramiento, cómo utilizar el Complemento Aeiconizer para un mejor flujo de trabajo de diseño de iconos de aplicaciones y cómo configurar segmentos para exportar un icono de aplicación en todos los tamaños necesarios para enviar una aplicación a la tienda de aplicaciones. No solo eso, sino que también hemos reiterado algunas de las cosas que hemos aprendido antes , como familiarizarse con Sketch Toolbox y usar el inspector para diseñar elementos. Por: Daniel schwarz
Compartir Facebook Twitter Pinterest Tumblr WhatsApp VKontakte
Síguenos en Síguenos en Google News
Articulo anterior Desbloquea tu teléfono gratis...
Articulo siguiente Cómo crear un icono de Lista ...
¿Te gusto la informacion?

Si te gustó la publicación, apóyanos compartiendo en tus redes sociales o dejanos tu comentario.

  • 80
  • 1
  • 2
  • 3
  • 4
  • 5
Tutoriales En Linea
Tutoriales En Linea
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: CEO de Tutoriales En Linea:
https://tutorialesenlinea.es
Fundador y CEO de Tutoriales En Linea...Leer mas...

Artículos Relacionados

Cómo liberar tu teléfono Vodafone (Simlock)

Cómo liberar tu teléfono Vodafone (Simlock)

Emeraldbux Es Una Estafa

Emeraldbux Es Una Estafa

Cómo crear un icono de Lista de tareas con Illustrator

Cómo crear un icono de Lista de tareas con Illustrator


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Herramientas SEO para posicionamiento de nuestra web 2023

Herramientas SEO para posicionamiento de nuestra web 2023

Set 27 660 164
Cómo crear un USB de arranque para instalar Windows 10

Cómo crear un USB de arranque para instalar Windows 10

Oct 12 114 007
Historia de los sistemas operativos

Historia de los sistemas operativos

Mayo 16 21 008
Herramienta online de generador de datos estructurados

Herramienta online de generador de datos estructurados

Feb 11 301 543

Últimas publicaciones

Estrategias para aumentar el tráfico del sitio web: una guía completa para el éxito en línea

Estrategias para aumentar el tráfico del sitio web: una guía completa para el éxito en línea

Por administrador 29-05-23
Lista IPTV con canales para Latinoamerica

Lista IPTV con canales para Latinoamerica

Por Dianna 28-05-23
Starting a Woodworking Side Business: A Comprehensive Guide to Turning Your Passion into Profit

Starting a Woodworking Side Business: A Comprehensive Guide to Turning Your Passion into Profit

Por administrador 25-05-23

Etiquetas

CrearTutoriales En LineaAplicacionesArticulosPostNoticiasDiseñoAppleAndroidIconosAplicacion AndroidDeveloper AndroidDesarrolladoresSketchSoftwarePrograma





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.