Compatibile con Xcode 8

Come creare Sticker Pack per iMessage senza saper programmare!

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Ti ricordi come chattavamo qualche anno fa?

Facevamo più o meno così: Caio: “Come va? lol“, Sempronio: “tutto bene XD“. Non pensare di non rientrare anche tu nella categoria. Perché, mi giocherei un polmone, almeno una volta l’avrai fatto anche tu.

Ad ogni messaggio, che ho volutamente scritto senza l’omissione delle vocali (cosa ancor più grave di usare i vari acronimi), facevamo seguire quelle belle faccine create a suon di lettere. Il motivo per cui lo facevi o facevamo era semplice. Internet è sinonimo di velocità e scrivere in maniera abbreviata accelerava le mille mila comunicazioni che intrattenevamo online.

Adesso invece?

esempio-come-creare-sticker-pack-per-imessage-ios

L’App finale del tutorial!

Si vedono Sticker da tutte le parti. Telegram, Facebook Messenger e altre applicazioni simili hanno introdotti gli Sticker come sostituto e complemento delle Emoji. Apple, con la sua app iMessage (la più usata per chattare dagli utenti iOS), non è rimasta a guardare e, finalmente, con il WWDC 2016 ha portato una bella ventata di aria fresca alla sua app di messaggistica.

Il MessageKit, cioè il framework che ti permetterà di creare Sticker Pack e App per iMessage, è entrato a far parte dei must have di tutti gli sviluppatori.

Arrivati a questo punto, la domanda è: Come creare Sticker Pack per iMessage?

Se te lo stai chiedendo, non serve essere uno sviluppatore iOS. Quindi non ti servirà conoscere il linguaggio Swift (anche se te lo consiglio) ma solamente qualche piccolo accenno su come si utilizza Xcode 8 (tratterò tutto nel tutorial).

La mia premessa è stata fatta. Sei pronto a creare Sticker Pack per iMessage? e magari a venderne qualcuno?
Allora cominciamo ad invadere l’App Store!

Creare un progetto Sticker Pack con Xcode

Hai già scaricato Xcode 8? Se non lo hai ancora fatto lo trovi nell’App Store del tuo Mac o se clicchi qui.

Aprilo. Se tutto è andato per il verso giusto, dovresti vedere una schermata in cui ti viene chiesto la tipologia di progetto da cui partire. Seleziona Create a new Xcode project e successivamente clicca su Sticker Pack Application.

Dai un Product Name, cioè un nome allo Sticker Pack, e clicca su Next (gli altri campi li spiego subito sotto l’immagine). Ti verrà chiesto di selezionare la cartella dove inserire il progetto, io li conservo in una cartella su Documenti (o iCloud/DropBox) o nel Desktop come nel caso dei tutorial. Infine premi su Create:

creare-uno-sticker-pack-per-imessage

  • Product Name: Il nome dell’applicazione o, come in questo caso, dello Sticker Pack che andrai a caricare sull’App Store dedicato ad iMessage.
  • Team: Sei hai già un account da sviluppatore, condizione necessaria per caricare App e Sticker sull’App Store, vedrai automaticamente comparire il tuo ID Developer (se ne hai più di uno lo potrai selezionare dal menu a tendina). Se non hai l’account sviluppatore puoi comunque proseguire il tutorial e crearlo una volta che sei sicuro di aver completato tutti i passaggi.
  • Organization Name: É il nome dello sviluppatore o azienda che sviluppa il progetto. Per intenderci, quando vai nell’App Store, questo è il nome che comparirà sotto il nome dell’applicazione stessa.
  • Organization Identifier: É un identificativo univoco che ti rappresenta o che rappresenta la tua azienda. Se vuoi approfondire ne ho parlato nel corso di sviluppo app iOS.
  • Bundle Identifier: Come il precedente, questo identifica univocamente la tua applicazione o Sticker Pack.

Nel caso tu non possegga un account da sviluppatore, che puoi creare qui, non preoccuparti perché potrai comunque testare lo Sticker Pack sul tuo dispositivo iOS e pubblicarlo successivamente.

Proprio perché Apple vuole cercare di raggiungere e sbaragliare i concorrenti, potrai creare Sticker Pack per iMessage senza, davvero, conoscere un briciolo di programmazione.

Quindi fatti forza e non farti intimorire dalle migliaia di schermate di Xcode. Poi se ti fa piacere imparare, puoi sempre seguire i miei corsi o i tutorial che trovi sul blog.

Come aggiungere le immagini per lo Sticker Pack

C’è solamente un file rilevante necessario a creare Sticker Pack per iMessage. Si chiama Stickers.xcstickers ed è il contenitore delle immagini che conterrà il tuo Sticker Pack.

Se lo selezioni, al suo interno, vedrai altre due sotto cartelle:

  • iMessage App Icon: Qui inserirai l’icona del tuo Sticker Pack. Come puoi notare, ci sono tanti piccoli contenitori che rappresentano l’icona nelle diverse possibili visualizzazioni e dimensioni (per esempio, da iPhone ad iPad le dimensioni delle icone cambiano).
    • Per evitare di impazzire, esiste un’applicazione online (la travi anche sullo store del mac) che si chiama Make App Icon che ti permette di creare tutte le immagini partendo da un’immagine 1536×1536 pixel.
    • Se invece vuoi approfondire la differenza tra le dimensioni (Pixel e Point) dai un’occhiata al Corso di sviluppo App o ai tutorial presenti sul sito.
  • Sticker Pack: Qui è dove realmente dovrai caricare le immagini che compariranno su iMessage (sotto ti spiegerò dimensioni ecc).

creare-le-immagini-per-sticker-pack-imessage-xcode

Le immagini che dovrai inserire dentro questa cartella devono essere, preferibilmente, nel formato PNG (cioè con possibilità di trasparenza nello sfondo). Puoi utilizzare anche il formato JPG, APNG e anche il formato GIF (per le animazioni). La dimensione massima di una singola immagine non deve superare i 500 kb.

Se ti va, ho preparato uno Sticker Pack contente le immagini che vedi sotto. Se vuoi, puoi scaricare le immagini in fondo al tutorial (all’interno del box che trovi alla fine della guida, trovi anche il progetto Xcode completo).

Una volta scaricato lo Sticker Pack o, dopo aver creato le tue immagini, trascinale all’interno della cartella Sticker Pack del tuo progetto Xcode:

creare-ed-inserire-immagini-in-uno-sticker-pack-ios

Nel pannello che trovi sulla destra, precisamente nell’Attributes Inspector, potrai modificare la dimensione delle immagini per come appariranno nel preview di iMessage (non verrà modificata la dimensione delle immagini originali). Di default la dimensione classica è Medium. Ci sono anche Small e Large.

Una volta che ti farò vedere come testare gli Sticker, fai una prova modificando questi valori:

modificare-dimensione-di-tutti-gli-sticker-imessage

condividi xcoding

Ho impiegato un po’ di tempo a scrivere questo tutorial. Se ti va, ricambia il mio lavoro, con un like alle mie pagine!

Grazie ;)

Testare gli Sticker Pack con il simulatore iOS

Ormai è dalla versione 7, di Xcode, che non è più necessario possedere un iPhone reale per testare le applicazioni o gli Sticker Pack. Puoi tranquillamente utilizzare il simulatore di iOS che si trova all’interno dello stesso Xcode.

In alto sulla sinistra c’è un piccolo bottone a forma di triangolo. Se lo clicchi avvierai tutto il processo di Build & Run del progetto con la conseguente apertura del simulatore. Puoi anche cambiare la versione del simulatore e del dispositivo usato come base (guarda l’animazione sotto).

Una volta avviato, comparirà una finestra dove comparirà, automaticamente, l’app iMessage con il pannello degli Sticker già aperto. Ti basterà selezionare lo Sticker preferito ed inviarlo al contatto di prova presente sul simulatore.

Se hai un iPhone, selezionalo nella lista dei dispositivi dopo averlo prima collegato al Mac, ed infine esegui gli stessi passaggi spiegati sopra:

testare-sticker-pack-su-simulatore-iphone-xcode

Pubblicazione App Store

Pubblicare un Sticker Pack per iMessage si analogo alla pubblicazione di un’app sull’App Store.

Se vuoi pubblicare il tuo Pack, segui questi due tutorial:

  1. Come creare un account da Sviluppatore
  2. Come pubblicare un’app sull’App Store

Considerazioni

Come ti dicevo, creare Sticker Pack per iMessage è un’operazione davvero semplicissima. Quello che posso consigliarti è provare ad inserire delle GIF o altre tipologie d’immagine.

Non c’è, in nessun modo, la possibilità di creare Sticker intelligenti: che si auto selezionano o che si modificano in base al testo scritto dagli utenti. Apple tiene moltissimo alla privacy degli utenti, quindi le uniche cose che potrai fare con gli Sticker sono quelle viste in questa guida.

Discorso a parte sono le applicazioni per iMessage, lì entrano in gioco logiche di sviluppo che spero di prendere in esame al più presto. Ad ogni modo, se vuoi intraprendere la via del soldato Swift non puoi che partire dai corsi o dai tutorial che trovi qui su xcoding.

Nei prossimi tutorial ti farò vedere come caricare un’applicazione sull’App Store (il procedimento è lo stesso per gli Sticker Pack). Quindi rimani sintonizzato.

Qui sotto invece trovi il download del progetto completo e degli Sticker Pack utilizzati (la fonte da cui li ho scaricati è Pixeden.com):

Buona Programmazione!

  • Gianbattista Specchiulli

    beh con la vostra guida è proprio semplice creare un pacchetto di stickers con iMessage, ma il mio problema è quello che non so creare degli sticker tutti miei e vorrei imparare. Spero possiate aiutarmi.

    • Ciao Giambattista,

      Come consiglio da un non grafico posso consigliarti, se il tuo problema ricade nella mancanza di un tool grafico, di affidarti a sketch (http://sketchapp.com/). In caso hai altri problemi, fammi sapere ;)
      Giuseppe Sapienza
      xCoding.it | Sviluppa, Crea e codifica i tuoi sogni!

      • Gianbattista Specchiulli

        Ti ringrazio Giuseppe, utilissimo e gentilissimo.

  • Federico

    Buonasera a tutti! Non mi è chiaro solo come possa fare per commercializzare degli stickers “miei”, creati utilizzando timbri o avatar reperibili in rete. Ho letto qualche contratto sull’utilizzo, qualcuno vuole un abbonamento, un altro famoso portale li vende a pacchetti, per esempio 50 euro per 5 pacchetti… Sottoscrivendo un abbonamento del genere, potrei liberamente scaricare dei loro disegni, magari modificarli e commercializzare un insieme di stickers che li include?

    • Buonasera Federico,
      La commercializzazione di documenti, immagini o file di terze parti (acquistate o non) devono essere concordate con il creatore ed in base alla licenza di distruzione adottata dal sito/portale/grafico in questione.

      Quindi, ti consiglio di contattare questo portale e chiedere se ci sono dei vincoli alla ri-commercializzazione dei suoi prodotti.

      Alla prossima,
      Giuseppe Sapienza

Start typing and press Enter to search