Come posso generare icone di stile iOS / Flurry in OS X?

5

Come alcuni di voi potrebbero sapere, il trattamento iOS delle icone delle app è spietatamente severo . Forza una certa rotondità degli angoli e non consente trasparenza, quindi impone un aspetto unificato. Penso che sia bello.

Recentemente mi sono innamorato della serie di Flurry di Iconfactory e di aver fatto nuove icone in quel determinato stile; qual è il modo più semplice per applicare una maschera e una sovrapposizione su un'immagine personalizzata e generare tutte le dimensioni necessarie per un file di icona OS X completo (icns)?

Come accennato di seguito, non sto cercando spiegazioni tecniche su come iOS genera le sue icone, né una soluzione a livello di sistema per generare icone al volo. Proprio quello che è menzionato in grassetto sopra. Sono anche consapevole dell'approccio IconBuilder e sebbene sia un ottimo strumento, non è quello che sto chiedendo. Preferirei un'interfaccia drag-and-drop di qualche tipo.

    
posta yusf 15.03.2012 - 15:00
fonte

5 risposte

1

Compilare la risposta di cksum, se riesci a ottenere la maschera, la sovrapposizione e le immagini shadow con una risoluzione sufficientemente alta ( @2x le immagini sono ancora solo circa 140px quadrati) e sei a tuo agio con la riga di comando / shell scripting, puoi usare ImageMagick, un bel processore di immagini da riga di comando, per mascherare e comporre l'icona.

Una volta installato ImageMagick, (http://www.imagemagick.org) [Hanno istruzioni per l'installazione qui ] dovresti essere in grado di elaborare l'immagine con maschera, sovrapposizione e ombra:

convert YourImage.png overlay.png -composite YourImage_overlay.png
convert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.png
convert shadow.png YourImage2.png -composite YourImage_largest.png
convert YourImage_largest.png -geometry 512 Icon512.png
convert YourImage_largest.png -geometry 256 Icon256.png

Si presume che Your_Image sia grande e quadrato (1024x1024) e che mask.png, overlay.png e shadow.png abbiano la stessa dimensione.

Idealmente, non dovresti ricampionare l'icona più grande per ottenere le versioni più piccole, ma potresti usare un normale software di creazione di icone (ad esempio IconBuilder) e usarlo per creare YourImage ad ogni dimensione, quindi eseguire quanto sopra per ciascuna uno individualmente.

Per far sì che la maschera, la sovrapposizione e le immagini ombreggiate abbiano le dimensioni corrette, la mia migliore raccomandazione sarebbe quella di ingrandirle e poi ricostruirle (cioè disegnare un nuovo roundrect e gradienti) alla massima risoluzione con Photoshop o GIMP.

Una volta ottenuta l'immagine ad ogni risoluzione, puoi lanciarla nell'applicativo Icon Composer di Apple (in iOS / Mac SDK) per creare i file .icns

Non è la soluzione più semplice, ma ti offre la flessibilità di specificare la maschera esatta e altri effetti e della riga di comando.

    
risposta data 19.03.2012 - 02:51
fonte
3

Forse se qualcuno ha scritto un trucco (ma io rimango scettico perché tutto ciò potrebbe essere fatto facilmente ottenendo il template dell'icona (file PSD) e facendolo manualmente.

iOS ha un framework per gestire le icone di SpringBoard. I file sono i seguenti (convenzione di denominazione presa da iOS 5. Le versioni precedenti di iOS rilasciano il suffisso ~ iphone):

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. AppIconShadow@2x~iphone.png

(1) è la maschera di ritaglio, che detta la forma dell'icona. (2) è l'effetto "gloss" che è in qualche modo caduto in disgrazia negli ultimi due anni ed è facoltativo. (3) è la base dell'icona, l'ombra che viene applicata sotto il prodotto finale.

Ho realizzato una spiegazione grafica e accompagnatoria di come tutti lavorano insieme sul mio sito web che dovrebbe aiutare a spiegare meglio come iOS offre icone sul rispettivo dispositivo.

OS X non ha un sistema di questo tipo. Ogni icona è semplicemente vincolata dalle dimensioni impostate nel Finder. Apple non ha mai cercato di controllare il modo in cui le icone appaiono su OS X, ma voleva avere un aspetto uniforme su iOS (e non li biasimo), quindi il motivo per cui hanno sviluppato un framework di questo tipo.

Potresti provare a contattare uno sviluppatore Cocoa sul porting di MobileIcons.framework da iOS a OS X, ma ancora una volta, poiché Finder può regolare le dimensioni (in Lion, ovunque da 1024x1024 in giù), rimango scettico sul fatto che sia possibile.

    
risposta data 19.03.2012 - 00:31
fonte
2

Le altre app menzionate hanno i loro usi, ma per la tua richiesta dichiarata, ci sono 2 app che lo fanno molto facilmente:

Entrambi sono disponibili sul Mac App Store, ma preferisco icone tra i due: è molto più robusto e abbastanza lucido. Come vedrai dallo screen-cap che ho aggiunto, icone rende molto semplice l'elaborazione di tutte le variabili (angoli, lucentezza, dimensioni dell'esportazione, ecc.) E questo è solo una parte dell'app! (Le altre schede riguardano le icone non-iDevice ...)

    
risposta data 20.03.2012 - 00:54
fonte
0

Per prima cosa, controlla Img2Icns per il modo più semplice di creare un file ICNS da un file immagine 512x512. (La versione gratuita funziona alla grande).

In secondo luogo, dai un'occhiata a CandyBar per gestire e installare le icone di sostituzione. Costa pochi dollari, ma è un ottimo programma.

In terzo luogo, cerca le icone DeviantArt per Flurry che sono già state create. Cerca sia icona a raffica e icona ios .

Infine, se non riesci a trovare ciò che stai cercando, usa questo Modello Flurry per creare nuove icone.

    
risposta data 18.03.2012 - 21:50
fonte
0

Non è necessario creare angoli e luci, essi vengono aggiunti automaticamente dalla tua app in fase di compilazione.

Dai documenti 1 :

When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:

  • Rounded corners
  • Drop shadow
  • Reflective shine (unless you prevent the shine effect)
    
risposta data 20.03.2012 - 15:18
fonte

Leggi altre domande sui tag