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

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