Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Graphic Design
Design

Come creare adesivi per iMessage in Adobe Illustrator e guadagnare denaro Extra!

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Home Sweet Home.
How to Create a Mini 3D House in 3D Studio Max
How to Create an Abstract Vietnamese Woman Portrait in Adobe Photoshop

Italian (Italiano) translation by Francesca Monti (you can also view the original English article)

Final product image
What You'll Be Creating

Avrete notato che c'è una mania per gli adesivi di iMessage da quando sono stati introdotti con iOS 10. Oggi, puoi creare e vendere i tuoi adesivi digitali, invece di utilizzare le emoji pre-installate.

Gli adesivi iMessage sono un modo fresco e divertente per esprimere le tue idee e pensieri perchè puoi inserirli e appiccicarli nelle tue chat!!

Se ti sei mai chiesto cosa avviene nel creare un pacchetto di adesivi per iOS, in questo tutorial, lavoreremo da uno schizzo per disegnare semplici adesivi iMessage in Adobe Illustrator utilizzando linee, forme e colori. Poi spiegheremo in breve come spostarci su iTunes Connect e Xcode per lanciare il nostro pacchetto di adesivi di iMessage sull' App Store.

Se sei alla ricerca di ispirazione di emoticon per i tuoi disegni di adesivi, spingiti su GraphicRiver.

1. Elabora un' Idea di progetto e prepara il file dei tuoi adesivi in Adobe Illustrator

Fase 1

Sono stato lontano da casa per un po'. Non importa quanto io apprezzi le meraviglie del viaggio, la mia pancia è sempre piena del profumo del cibo di "casa". Così ho deciso di basare il mio tema sulla "Cucina libanese". Non c'è assolutamente niente di così ricco e abbondante in varietà come la cucina libanese.

Quindi iniziamo a delineare la nostra idea progettuale di cibo su carta o in digitale.

Ho abbozzato 12 "adesivi" di cibo della tavola libanese ed etichettato i loro nomi in libanese, solo per riferimento.

In generale è bene avere circa 24 disegni per un pacchetto di adesivi, ma per il bene di questo tutorial, lavoreremo solo su 12.

Inizia schizzando 12 oggetti in una griglia 4 x 3, come indicato di seguito.

sketch lebaanese food

Dopo aver terminato gli schizzi, portali in Adobe Illustrator.

Fase 2

Avvia Adobe Illustrator CC.

Apri un Nuovo documento: File > Nuovo (Command-N) e imposta il tuo file Personalizzato:

Nome: "Adesivi_Cibo_Libanese_iMessage".

  • Numero di tavole da disegno: 12 (corrispondente al numero di adesivi, poichè ogni adesivo dovrebbe avere la propria tavola da disegno)

Hai tre scelte per le dimensioni degli adesivi da creare.

  • Piccolo: 300 x 300 pixel
  • Medio: 408 x 408 pixel
  • Grande: 618 x 618 pixel

Io personalmente preferisco lavorare su 618 x 618. Quindi regola le impostazioni del Nuovo Documento:

  • Colonne: 4
  • Larghezza: 618 px
  • Altezza: 618 px
  • Unità: pixel
  • Metodo colore: RGB
  • Clicca su Crea Documento
Adobe illustrator open new document

Fase 3

Utilizza la scorciatoia da tastiera per il comando Inserisci (Command-Maiusc-P) per posizionare lo schizzo sulla prima tavola da disegno. Trascina l'immagine per riempire tutte le tavole da disegno, in modo che i tuoi schizzi riempiano tutte le tavole da disegno create.

Command Shift P Place

Successivamente, abbiamo bisogno di creare un livello per il nostro lavoro con le linee.

Apri il pannello Livelli, Finestra > Livelli.

Fare clic sul sotto-menù del pannello Livelli:

  1. Nome: Schizzo
  2. Seleziona Blocca
  3. Attenua Immagini a: 20%
  4. OK
Adobe Illustrator layer options

Dopo aver bloccato il livello "Schizzo", Crea Nuovo Livello sopra a 'Schizzo' e nominalo 'Tracciato'.

File > Salva (Command-S) e salva il tuo file di Illustrator.

2. Come disegnare il Tracciato

Fase 1

Prepariamoci a disegnare nel nostro lavoro di linea.

Per prima cosa, abbiamo bisogno di creare un pennello artistico calligrafico con "pressione". Apri il pannello Pennelli: Finestra > Pennelli.

Seleziona lo Strumento Ellisse (L), con un riempimento nero, nessuna Traccia e disegna in una piccola ellisse la dimensione del pennello con cui vuoi disegnare.

create art brushes

Fase 2

Con l'ellisse selezionata, trascinala e rilasciala nel pannello Pennelli.

Si aprirà una finestra di dialogo Nuovo Pennello. Seleziona Pennello Artistico e OK.

create art brush new brush

Si aprirà la finestra di dialogo Opzioni Pennello Artistico.

Nota: Se disponi di una tavoletta con penna digitale, è perfetto creare un pennello artistico che reagisce alla pressione della penna.

Per creare un pennello da muovere con la pressione della penna, nella finestra di dialogo Opzioni Pennello Artistico, selezionare:

  • Larghezza: Pressione
  • Opzioni Scala Pennello: Allunga in base alla lunghezza del tratto
  • Metodo Colorizzazione: Tinte; questo ci permetterà di personalizzare i colori dei tratti del nostro pennello personalizzato successivamente.
  • Fare clic su OK.
create art brush

Una volta creato il pennello artistico, Elimina l'ellisse creata.

Ora abbiamo pronto un pennello artistico con variazione di pressione!

Fase 3

Cominciamo a tracciare lo schizzo.

  1. Apri il pannello Traccia: Finestra > Traccia.
  2. Dal pannello Pennelli, seleziona il pennello artistico che abbiamo appena creato.
  3. Scegli lo Strumento Pennello (B), dal pannello Strumenti.
  4. Nel pannello Traccia, seleziona una Traccia nera di 0,5 pt e nessun Riempimento.

Assicurati che il pennello non sia molto morbido quando tracci, così che sembri come se fosse disegnato a mano. Per ammorbidire il pennello artistico, fare doppio clic sullo Strumento Pennello (B), dal pannello Strumenti, e si aprirà la finestra Opzioni Strumento Pennello.

Abbassa la Fedeltà di una tacca o due.

paint brush tool artbrush fidelity

Fase 4

Comincia a tracciare con lo Strumento Pennello (B).

Segui lo schizzo e traccialo con le linee. Non è necessario che sia perfetto, poichè vogliamo dargli l'effetto di un semplice scarabocchio disegnato a mano.

sketch trace linework

Una volta che tutto il lavoro di linea è fatto, Blocca il tuo livello "Tracciato" dal pannello livelli.

Crea nuovo livello, sotto "Tracciato" e chiamalo "Colore", così possiamo applicare il colore sotto il lavoro di linea.

adobe illustrator create new layer

Salva sempre il file. File > Salva (Command-S).

3. Come colorare rapidamente il disegno

Fase 1

Coloriamo!

Dal pannello Strumenti, seleziona lo Strumento pennello tracciato chiuso (maiusc-B). Il Pennello tracciato chiuso è simile a un marcatore ed è divertente da usare.

Basta selezionare il campione di colore di tua scelta per la Traccia, con riempimento nullo e colorare nelle icone del cibo.

  • Un suggerimento veloce: per gestire la dimensione dello strumento pennello tracciato chiuso, tieni premuto il tasto della parentesi quadra ([) per diminuire la dimensione del pennello e la parentesi quadra destra (]) per ingrandire.
  • Insieme allo strumento pennello tracciato chiuso (maiusc-B), utilizza lo strumento Gomma (maiusc-E), per cancellare eventuali sbavature che si desidera pulire.

La colorazione non deve essere perfetta, poichè abbiamo bisogno di avere un aspetto organico.

Inizia con l'hummus.

adobe illustrator tip blob brush tool

Come vedi, puoi ottenere molto con lo strumento pennello tracciato chiuso semplicemente cambiando le sue dimensioni e colore. In più è veloce da utilizzare.

Quindi buon divertimento e colora il resto del disegno!

Fase 2

Hai bisogno di ordinare le macchie di colore che hai colorato insieme, così per Ordinare gli oggetti, usa queste scorciatoie per accelerare il flusso di lavoro:

  • Ordina > porta in primo piano (Command - MAIUSC- ] )
  • Ordina > porta avanti (Command - ] )
  • Ordina > porta dietro (Command - [ )
  • Ordina > porta sotto (Command - MAIUSC - [ )

Una volta che avrai ordinato tutto, dovresti ottenere un bel set di icone colorato.

arrange layers

Fase 3

Ora puliamo la nostra tavola da disegno.

  1. Sblocca il livello "Tracciato" dal pannello livelli.
  2. Elimina il livello "Schizzo", trascinandolo dal pannello livelli all' icona del Cestino su questo pannello.
  3. Seleziona lo Strumento selezione (V) e per ogni icona di cibo, selezionare il corrispondente tracciato e colore.
  4. Raggruppa (command-G) insieme. Automaticamente, una volta raggruppati i due livelli, il nuovo gruppo si sposta nel livello "Tracciato".
  5. Centra ogni icona al centro della tavola da disegno, semplicemente ad occhio.
selection tool

6. Scala gli oggetti raggruppati per adattarli all'interno delle dimensioni della tavola da disegno e mantieni un piccolo spazio lungo i bordi. Per mantenere le proporzioni dell'oggetto, tieni premuto MAIUSC mentre trascini le maniglie del rettangolo di selezione fino a quando l'oggetto raggiunge la dimensione desiderata.

7. Una volta che tutte le icone di cibo sono state scalate, elimina il livello "Colore", poichè vuoto.

selection v tool

File > Salva (Command-S).

4. Come esportare e creare la nostra App di Icone

Fase 1

Esporta dei file immagine, utilizzando la funzione Esportazione per schermi (File > Esporta > Esporta per schermi).

  1. Esporta come PNG.
  2. Fare clic sull'icona Impostazioni avanzate, seleziona in quale posizione esportare i file, e imposta la scala su 1x.
  3. Imposta il colore di sfondo: trasparente.
  4. Esporta la tavola da disegno.
adobe illustrator export files

Fase 2

Hai due scelte. O scegliere di utilizzare una piattaforma di vendita secondaria di app per lanciare gli adesivi, come LINE Creators Market, o costruirsela da soli, usando un Apple Developers Account. (account sviluppatore Apple)

Per questo tutorial ti guiderò brevemente attraverso l'apertura di un Apple Developers Account, che costa $100 all'anno. Il processo di applicazione è abbastanza semplice, e l'accettazione è rapida. Pertanto, avrai bisogno di accedere a iTunes Connect e impostare le questioni amministrative come le i dati fiscali e bancari, se hai intenzione di vendere i tuoi adesivi (questo non è richiesto per pacchetti di adesivi gratis).

Per maggiori dettagli, vai su iTunes Connect Developers Guide (guida per sviluppatori iTunes Connect) e prenditi il tempo necessario a familiarizzare con esso.

Fase 3

Per generare i nostri adesivi, abbiamo bisogno di utilizzare Xcode.

Scarica l'ultima versione di Xcode 8 direttamente dal Mac App Store e installa.

Fase 4

Caricare gli adesivi su Xcode è facile; basta seguire i passaggi:

Apri Xcode.

Assicurati di aver effettuato l'accesso a Xcode con il tuo ID Apple.

Preference > Account > selezionare + > Sign in.

  1. Crea un New Xcode Project.
  2. Seleziona Sticker Pack Application.
  3. Fare clic su Next.
  4. Dai al pacchetto di adesivi un Product Name (nome prodotto) per identificarlo: 'Cibo libanese'.
  5. Compila quindi Team, Organization Name (nome organizzazione) e Identifier (com.yourcompany.ProductName), in base ai tuoi particolari.
  6. Fare clic su Next
  7. Seleziona Stickers.xcstickers > cartella Sticker Pack e carica gli adesivi, trascinando e rilasciando le immagini.
Xcode
Xcode Select sticker pack application
Xcode Sticker Bundle
Xcode

Fase 5

Successivamente carica iMessage App Icons.

La cartella è sopra la cartella 'Sticker Pack'.

Scegli un' immagine dal gruppo che vuoi utilizzare come icona della App e convertila in un file JPG in Adobe Photoshop, in modo che abbia uno sfondo bianco. Rinomina l'immagine dell'icona della App: "Icona_App_Cibo_Libanese.jpg".

Ci sono 12 immagini di icone in totale di cui avrai bisogno per Xcode e 1 per iTunes Connect. Per generare facilmente icone di app, visitare MakeAppIcon.

Carica l'icona di cibi selezionati sul sito, Inserisci la tua Email e il sito genererà per te le varie dimensioni di icona per le diverse applicazioni.

Puoi scaricarle direttamente dalla tua email.

makeappicon generator app

Dopo aver scaricato le immagini generate, caricare in Xcode trascinando e rilasciando.

Dovrebbe apparire qualcosa di simile una volta che hai caricato su Xcode.

Xcode upload iMessage app

5. Configurare e Registrare gli Adesivi

Fase 1

Dopo aver caricato gli adesivi, avrai bisogno del 'Test the Build' da Xcode, per vedere se gli adesivi funzionano. Puoi farlo attraverso Xcode Simulator (Simulatore di Xcode), o puoi eseguirlo sul tuo dispositivo. Tutto quello che devi fare è:

  1. Seleziona il tuo dispositivo mobile, sotto Set the Active Scheme.
  2. Fare clic sul pulsante Run.
Xcode select iphone device

Se viene visualizzata una notifica di errore, apporta le modifiche richieste, esporta e carica nuovamente le icone corrette.

Quindi testa gli adesivi su Xcode Simulator facendo clic sull'icona Run. Sembra favoloso!

test run stickers imessage

Se hai bisogno di regolare le dimensioni di visualizzazione dei tuoi adesivi su iMessage, è possibile farlo nel pannello di destra, come mostrato qui sotto.

Le dimensioni "Medium" (medio) o "Small" (piccolo) funzionano bene.

Xcode sticker

Una volta che è fatto, abbiamo bisogno di registrare un ID App per gli adesivi.

Fase 2

Accedi al tuo Apple Developer Account  per registrare un App ID.

  1. Immetti Account > Identifiers > App ID > selezionare +
  2. Compila i dettagli e Register.
apple developer account app

Fase 3

Ora possiamo finalmente Esportare & Caricare il nostro "build" su iTunes Connect!

Torna a Xcode.

  1. Seleziona "Generic iOS device" (dispositivo generico iOS) sotto Set the Active Scheme.
  2. Quindi seleziona la cartella 'Stickers.xcstickers', e dal menu principale in alto clicca Product > Archive, per Archiviare il costruito.

Verrà visualizzata una nuova finestra che mostrerà i "Build" archiviati. Vedrai gli adesivi nel pannello di sinistra.

Fare clic su Validate per vedere se tutti gli adesivi sono a posto. Se ci sono problemi, Xcode mostrerà una notifica in rosso sulla barra dei menu in alto.

Se tutto va bene con il "Build", puoi caricarlo su iTunes Connect per la revisione.

Fare clic su Upload to App Store (carica su App Store). Questo caricherà gli adesivi su iTunes Connect. Terminato il caricamento, questo dovrebbe apparire sul vostro account iTunes Connect. Dategli pochi minuti.

xcode archives sticker pack

Fase 4

E' tempo di presentare gli adesivi nell'App Store!

In iTunes Connect:

  1. Seleziona My Apps.
  2. Seleziona + > New App e seleziona 'Build' che abbiamo appena caricato per la presentazione.
itunes connect plus add new app
  1. Seleziona la piattaforma iOS.
  2. Nome: Cibo libanese.
  3. Seleziona Language e Bundle ID.
  4. Crea un unico SKU "eg.location.com.bundle_title".
  5. Crea!
itunes new app

Sul pannello del menu a sinistra, compila le App information (informazioni della App) e Pricing & Availability (Prezzo & Disponibilità). Qui puoi scrivere la descrizione, la lingua, le categorie e il prezzo della app. Non entreremo in tutti i dettagli, poichè è abbastanza semplice, ma dovrebbe essere simile al seguente:

itunes connect app

Fase 5

In Adobe Photoshop, crea alcune istantanee dello schermo, utilizzando Xcode Simulator e caricale su iTunes Connect, per creare delle immagini di anteprima iMessage delle istantanee degli schermi. Questo potrebbe richiedere del tempo. Crea 5 dimensioni di istantanee: iPhone schermo 5,5 pollici (1242 x 2208 px). Il sistema genererà il resto delle dimensioni per te.

itunes imessage preview images app

Una volta fatto, fare clic su Submit for Review (Invia per revisione).

E questo è tutto!

Ora tutto quello che devi fare è attendere il processo di revisione per un paio di giorni, per ottenere l'approvazione.

Mentre i tuoi adesivi sono in revisione, puoi inviare dei Test invitations (inviti di Test) ai tuoi fan attraverso TestFlight, per far provare gli adesivi gratis per 60 giorni. Oppure puoi utilizzare il tempo per impostare la tua tassazione, contratti, certificati e coordinate bancarie con Apple.

È un piccolo consumo di tempo e affronterai alcuni errori lungo la strada, ma con pazienza e aiuto, ci arriverai.

Congratulazioni! I nostri adesivi "Cibo libanese" per iMessage sono pronti!

Wow, spero che questo tutorial ti sia piaciuto! Progettare adesivi è divertente, soprattutto se puoi guadagnarci qualche soldo!

Acquista il pacchetto di adesivi 'Cibo Libanese' da iTunes.

Spero che hai trovato utile questo tutorial! Mi piacerebbe vedere quello che crei! Condividi i tuoi adesivi con noi.

Lebanese Food Final
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.