Pubblicazione di un’app su App Store parte 2

Nel precedente articolo abbiamo iniziato a vedere come preparare il materiale per pubblicare un’app nell’App Store di Apple. Ci siamo concentrati sui testi e su alcuni aspetti a corredo.

Adesso iniziamo a vedere come produrre il materiale multimediale, o per lo meno il più necessario.

Screenshots

Le immagini che vediamo nella scheda di un’app in uno store sono sempre o quasi composizioni ritraenti gli screenshot delle videate principali, partiamo quindi dal fare gli screenshot per i vari dispositivi.

Dispositivi

Giusto, dimenticavo, per ogni dispositivo dove girerà l’app, dovranno essere caricati gli screenshot con le giuste caratteristiche (scritte tutte nella scheda dello store).

Mi è sempre capitato di scrivere app per iPhone, quindi dovrò fare gli screenshot per almeno un modello di iPhone (di solito lo dice il sito quando un dispositivo è obbligatorio e normalmente lo è l’ultimo modello). Ma spesso scriviamo app che vanno bene anche su iPad, e allora anche qui produciamo immagini per i vari modelli. Poi mi è capitato di scrivere un’app anche per iWatch, quindi se necessario andranno realizzate anche quelle, ecc…

Ma non è finita: le immagini vanno prodotte per ogni lingua! Quindi andateci piano… con le lingue.

Vedi che bel lavoro è questo semplice passo???

Ma iniziamo!

Eseguiamo l’app sull’emulatore

Partiamo dall’aprire VS Code o Xcode e un emulatore su cui faremo girare l’app, perché sì, gli screenshots si fanno bene anche da emulatore. Eseguiamo l’app come facciamo normalmente in fase di sviluppo.

Ad ogni schermata che intendiamo catturare clicchiamo l’icona “Camera”, questo salverà uno screenshot nella cartella Scrivania del Mac.

Per chi ha sviluppato l’app in Flutter: per l’emulatore iOS, bisogna fare una piccolissima modifica alla classe richiamata in main.dart, bisogna aggiungere debugShowCheckedModeBanner: false, perché in un emulatore non si può eseguire un’app in release mode e in debug mode, senza quella direttiva Flutter metterebbe in alto a destra un banner rosso con scritto Debug, ma il team di verifica respingono le app che hanno quel banner negli screenshot.

Fatti gli scatti che ci interessano, se proviamo ad aprirne uno vedremo che sono immagini senza… telefono! Si dice che non hanno il frame.

Fortunatamente esiste un’applicazione per Mac che fa proprio questo, si chiama “FrameBuddy” e si può trovare nell’App Store. Installiamolo e usiamolo per aggiungere agli screenshot un frame di un iPhone a nostro piacemento (forma e colore!).

FrameBuddy

Seguiamo le indicazioni della finestra:

1. Selezioniamo le immagine scattate prima
2. scegliamo il modello ed il colore dell’iPhone
3. appena avremo selezionato la cartella di destinazione le immagini saranno pronte.

Non è una figata? Ma non è finita, questo passaggio serve a dare grazia e forma alla nostra app, ma dobbiamo ancora fare molto prima di caricare le immagini sella scheda dello store.

Canva

Io utilizzo un account Canva gratuito per creare le immagini da caricare sulla scheda dell’app store. Questo mi permette di inserire testi, immagini e gli screenshot appena sfornati da FrameBuddy, in una maniera professionale.

Si parte da un progetto per iPhone per la lingua italiana, poi creeremo tanti progetti quanti saranno i dispositivi e le lingue, sempre però si duplicherà il progetto iniziale per avere una coerenza tra immagini e dispositivi.

iPhone

Anche se sarebbe preferibile realizzare ogni set di immagini per le varie dimensioni di iPhone (6,9″, 6,5″, 6,3″, 6,1″, 5,5″, 4,7″, 4″, 3,5″), Apple ha modificato questo aspetto permettendo di crearle per un unico modello e usare queste per gli altri. Possiamo quindi realizzare un unico set per i display con 6,9″ e queste stesse immagini verrano usate negli altri formati se non presenti quelli specifici per loro. Non è il massimo, ma in questo modo si risparmia moltissimo tempo.

Perciò la dimensione delle pagine del progetto Canva potrà essere: 1260 × 2736px, 2736 × 1260px, 1320 × 2868px, 2868 × 1320px, 1290 × 2796px oppure 2796 × 1290px. Ovvero:

• 1260 x 2736 verticale o invertendo, orizzontale;
• 1320 x 2868 (stesso discorso di sopra)
• 1290 x 2796 (come sopra)

Io per scelta, visto che va bene uno qualunque dei 3 formati, adotto il più grande per maggiore libertà di espressione dei messaggi, 1320 x 2868. Queste saranno le dimensioni da impostare in Canva.

Mi raccomando rispettare le dimensioni esatte, al pixel.

GIMP, Gnu Image Manipulation Program

Prima di caricare le immagini in Canva si possono ridimensionare un po’ per non appesantire troppo il progetto e per fare questo uso GIMP.

Una volta fatte tutte le immagini necessarie (minimo 3 immagini, massimo 10), creiamo le immagini (pagine in Canva) con scritte e gli screenshot fatti prima. Esportiamo il progetto per scaricarlo sul nostro Mac (immagino che tu stia lavorando con un Mac altrimenti non potrai fare il deploy della build dell’app sull’app store).

Se tutto è andato bene, hai impostato le dimensioni del progetto correttamente e non è stato aggiunto alcun livello alfa di trasparenza alle immagini esportate in PNG, puoi passare a caricarle sulla scheda dello store. Altrimenti bisogna ritoccare ogni immagine per garantire la corretta dimensione, la risoluzione con 72 o 96 dpi e togliere il livello alfa della trasparenza se presente perché non è ammessa per le immagini della scheda su App Store.

Quando abbiamo ulteriormente elaborato le immagini, siamo finalmente pronti per trascinarle nel riquadro dedicato nella scheda.