Adelyn Tam es una diseñadora de productos e ilustradora residente en Kuala Lumpur (Malasia). Consiguió subir sus pegatinas de dibujos animados con temática dim sum a iMessage de Apple en poco más de una semana. En este tutorial, explica cómo puedes crear tus propias pegatinas para iMessage. Todo lo que necesitas es un conjunto de diseños de pegatinas y tu ordenador.
Cuando Apple anunció iOS 10, me entusiasmaron los stickers en iMessage. Como usuario habitual de iMessage, cuando los emojis no eran suficientes para transmitir mis pensamientos, hacía un garabato, sacaba una foto y se la enviaba a la otra persona (¿qué es una llamada telefónica?).
Me encantó la idea de ver cómo se utilizaban algunas de mis ilustraciones en las conversaciones diarias del chat y decidí intentarlo. Aquí voy a compartir mi proceso desde los bocetos en papel hasta tener la Dim y Sum pegatinas publicado en la App Store de iMessage. Este es mi primer intento de autopublicar una pegatina o una aplicación para iOS (es el mismo proceso), y lo comparto desde la perspectiva de un. diseñador.
Mi proceso para los ocho días en pocas palabras:
Día 1-3:
Se me ocurrió un concepto y lo esbocé en papel. Utilicé Illustrator para crear versiones digitales de mis bocetos. Terminé 24 pegatinas.
Día 4:
Descargué Xcode y aprendí a usarlo para crear pegatinas. Me registré en una cuenta de desarrollador de Apple e hice lo que me parecieron mil pasos para subir mis pegatinas.
Día 5:
Por fin he subido mi compilación a la App Store de iMessage para que la aprueben.
Día 6:
El estado de la aplicación ha cambiado a "Esperando revisión".
Día 7:
El estado de la aplicación ha cambiado a "En revisión".
Día 8:
Las pegatinas han sido aprobadas y ya están a la venta.
He aquí cómo preparé mi obra de arte para iMessage.
1. Prepara tus pegatinas en Adobe Illustrator
Suelo trabajar con Illustrator cuando creo vectores. Trataré algunos aspectos básicos que debes tener en cuenta al preparar tus documentos de Illustrator para pegatinas:
Conoce el tamaño de tu pegatina. Debes elegir 1 de los 3 tamaños más adelante en Xcode. Así que tu mesa de trabajo en Illustrator debe tener el tamaño adecuado. Por lo general, cuanto más detallada sea la ilustración, mayor deberá ser el tamaño de la pegatina. Yo utilicé el tamaño normal (408px x 408px) para el mío.
Elige tu tamaño. Esta imagen está tomada de las Directrices de interfaz humana de iOS.
Crea mesas de trabajo separadas para cada sticker. No hay un número fijo de pegatinas (que yo haya encontrado) para la tienda de iMessage. Así que mi opinión es que elijas un número que creas que atraerá a los usuarios, especialmente si los vas a vender.
Recuerde que se trata de un juego de pegatinas, así que intente mantener cierto nivel de cohesión visual entre las distintas pegatinas.
Utiliza la función "Exportar para pantallas". Exporta como PNG, asegúrate de que el fondo es transparente y basta con @1x.
2. Cree los iconos de su aplicación
Para los iconos de la aplicación, opté por Sketch. Aquí tienes un plantilla que encontré por michaellee en Github para generar los iconos de la aplicación en Sketch. En total, hay 12 imágenes de iconos que necesitarás para Xcode, y una para iTunes Connect. Esto es lo que parece:
Algunos consejos profesionales para crear iconos de aplicaciones en Sketch:
Si copias los vectores directamente desde Illustrator, asegúrate de haber convertido previamente los trazos en contornos. No querrás que algunos trazos sean demasiado gruesos o demasiado finos al escalarlos a los distintos tamaños necesarios.
Configura tus iconos como símbolos. Así, cuando hagas tu segundo juego de pegatinas, solo tendrás que sustituir una imagen.
Expórtalos @1x y colócalos todos en una carpeta.
3. Transfiera sus activos a Xcode
Ahora que ya tienes listos tus activos, es hora de configurarlos en Xcode , una herramienta de desarrollo de software de Apple. Puedes descargar de forma gratuita en la Mac App Store.
El proceso de introducir tus activos en Xcode es bastante sencillo. Puedes verlo en este vídeo. Básicamente, hay dos partes: una es la transferencia de las ilustraciones de tus pegatinas y la otra son los iconos de la aplicación.
La mayor parte del trabajo de la publicación de la aplicación viene después de eso, especialmente si usted está haciendo esto por primera vez como yo. Voy a hablar acerca de la configuración de Xcode para sus pegatinas, pruebas, y subirlo a iTunes Connect y el otro nitty gritty cosas en el resto de este post.
4. Únete al programa de desarrolladores de Apple
Suponiendo que aún no formes parte del programa, tendrás que registrarte para poder distribuir aplicaciones en el App Store. Cuesta $99 al año. El proceso es sencillo y la aceptación es inmediata. El único contratiempo para mí es que tuve que ponerme en contacto con el Soporte de Apple para modificar mi nombre legal completo (obligatorio), y eso me llevó aproximadamente un día.
Esta parte podría ser un freno para algunos porque implica cierta inversión inicial, pero, como lo que siempre digo a todos los productos de Apple: "¡Toma mi dineroyy!".
5. Configura tus certificados iOS
Necesitas certificados de iOS para desarrollar y distribuir tus pegatinas y aplicaciones. Necesitarás dos certificados: desarrollo y distribución. Los certificados tendrán una duración de un año.
Haga clic en el botón + de la parte superior para crear un nuevo certificado.
Una vez que tu cuenta de desarrollador esté lista, ve a Cuenta > Certificados, y deberías ver la imagen de abajo. He elegido añadir mis certificados iOS manualmente. Mira este gran guía en vídeo para ver cómo se hace todo.
El proceso necesitará un poco de clic, pero por lo demás es bastante claro. Aquí resumo brevemente el proceso en el vídeo:
Crear un nuevo certificado para producción
- Haz clic en el botón + > Elige iOS App development
- Cree una solicitud de firma de certificado (CSR) mediante el acceso al llavero.
- Cargue el CSR recién creado.
- Genere el certificado de producción, descárguelo e instálelo. Ahora aparecerá en su Acceso a Llaveros.
Crear otro certificado para su distribución
- Haga clic en el botón + > Seleccione App Store y Ad Hoc.
- Puede utilizar el mismo CSR que en el caso anterior.
- Genere el nuevo certificado de distribución, descárguelo e instálelo.
- ¡Ya está!
6. Registrar un ID de aplicación para los adhesivos
Tendrás que registrar un ID de app para tus stickers. El mismo ID se utilizará más adelante en la configuración de Xcode. Aquí tienes un breve tutorial:
- Vaya a Cuenta > Identificadores > App ID > Haga clic en el signo +.
Este es el aspecto del mío:
Un ejemplo de cómo se escribe un Bundle ID. Puede ser cualquier cosa, siempre y cuando nunca se haya utilizado antes, pero manténgalo de tal manera que tenga sentido para usted cuando lo lea.
Confirma tus datos y regístrate. Ya está.
7. Cree sus perfiles de aprovisionamiento
Voy a omitir la explicación de la finalidad de los perfiles de aprovisionamientoexcepto que necesitas uno para poder instalar tus pegatinas o aplicaciones en tus dispositivos de prueba y enviarlos a la App Store de Apple.
Hay dos perfiles de aprovisionamiento que necesitará para sus adhesivos, resaltados a continuación:
El proceso para crear los perfiles es sencillo una vez que tengas configurados tus certificados y tu App ID. Solo tienes que elegir lo que has creado antes en los menús desplegables cuando se te solicite, descargarlo, instalarlo y ¡listo!
8. Crear una nueva aplicación en iTunes Connect
Si ha llegado hasta aquí, ¡ya casi hemos llegado!
iTunes Connect es lo que utilizarás para publicar, probar y ver los análisis de tu aplicación. Puedes encontrarlo en tu cuenta. A mí personalmente me pareció que estaba un poco escondido, así que aquí tienes una foto:
Al hacer clic en iTunes Connect, de repente se abre otro mundo.
Para crear una nueva app, ve a Mis Apps > Haz clic en + > Rellena el formulario. Suponiendo que ya hayas realizado los pasos anteriores, no deberías tener ningún problema para rellenar el formulario. Ahora deberías haber creado tu primera app (stickers).
Tómate un tiempo para familiarizarte con iTunes Connect. Hay dos cosas que te deben importar aquí:
Pestaña 1: App Store
Lo que tienes que hacer aquí:
Rellena toda la información necesaria sobre tus pegatinas (precio, descripción, categorías, etc.). Sube capturas de pantalla o ilustraciones de tus pegatinas para la App Store y la tienda de aplicaciones de iMessage.
En dimensiones que necesitas: pantalla de iPhone de 5,5 pulgadas (1242 x 2208 px), iPad (2048 x 2732 px).
Sube el icono de tu aplicación (1024 x 1024 px)
Aquí también podrá ver el estado (en preparación para la presentación, en espera de revisión, etc.) de su aplicación.
Pestaña 3: Vuelo de prueba
Testflight es lo que utilizarás si quieres probar tus pegatinas con otros usuarios. Ofrece opciones de prueba interna y externa. Pruebas internas significa probarlo dentro de tu propio equipo con usuarios registrados (sólo roles específicos) hasta 100 personas. Las pruebas externas te permiten llegar hasta 2000 probadores, pero tendrás que enviar tu beta para que Apple la revise antes de ponerla a disposición de los probadores.
9. Configura tu archivo de pegatinas en Xcode
Ahora que ya tienes la configuración hecha en iTunes connect, tendrás que configurar tu archivo de pegatinas en Xcode.
Si aún no ha iniciado sesión en Xcode con su ID de Apple, vaya a Preferencias > Cuenta > Haga clic en + > Iniciar sesión.
Vaya a Navegador de proyectos > Su archivo de pegatinas. Verá todos los campos que debe rellenar.
Rellene el campo Identificador de paquete con el mismo ID de paquete que creó anteriormente.
Desmarque la opción "Gestionar automáticamente la firma" y elija el perfil de aprovisionamiento que ha creado anteriormente.
El mío tiene este aspecto:
Ahora que ya lo has configurado, tendrás que editar también la información de la extensión, así:
Si no lo has hecho, ajusta el tamaño de tus pegatinas. Puedes hacerlo en cualquier momento del proyecto. Así es como se ve (en el panel derecho):
10. Exporte su compilación con Xcode
Ahora vamos a subir la compilación a iTunes Connect.
Asegúrate de seleccionar "dispositivo iOS genérico" en Establecer el esquema activo y, a continuación, selecciona tu carpeta .xcstickers > ve a Producto > Archivo.
Ve a Ventana > Organizador. Debería aparecer una nueva ventana y deberías ver tus pegatinas en el panel izquierdo.
Haz clic en Validar para ver si todo va bien con tus pegatinas. Si hay algún problema, Xcode te lo notificará.
¡Ahora, suponiendo que todo está bien con su construcción, es el momento de subirlo a iTunes Connect! Haz clic en Subir a la App Store... Pero no te preocupes, lo que realmente significa es que primero subirá las pegatinas a iTunes Connect, donde habrá un proceso de revisión.
Cuando termine de cargarse, dale un poco de tiempo y debería aparecer en tu cuenta de iTunes Connect.
11. Envío de los adhesivos a la App Store
En iTunes Connect, podrás seleccionar la compilación que acabas de cargar para enviarla.
Si decides probarlo antes de enviar tu aplicación, aquí es donde entra en juego Testflight. Revisa todos tus datos y asegúrate de que están bien, porque no podrás cambiarlos una vez que tus pegatinas estén siendo revisadas.
Una vez que esté listo, puede hacer clic en el botón Enviar.
Y ya está. Lo único que tienes que hacer ahora es esperar al proceso de revisión. En el mío fue bastante rápido, unos tres días. Mientras tanto, es buena idea aprovechar este tiempo de espera para configurar tus acuerdos, impuestos y datos bancarios con Apple. Habrá que rellenar algunos formularios más (yay), ¡pero eso sería lo último!
Si has llegado hasta aquí, ¡te doy las gracias y te deseo un gran viaje con tus pegatinas para iMessage! Espero que otros artistas, diseñadores e ilustradores puedan dar a conocer su trabajo en diferentes medios y tener el control sobre su obra.
Este artículo se publicó originalmente en Medium. Publicado con permiso.
ES 
EN 
FR 
PT 
DE 