Domanda:
Come posso generare icone in stile iOS / Flurry in OS X?
yusf
2012-03-15 19:00:03 UTC
view on stackexchange narkive permalink

Come alcuni di voi sapranno, il trattamento iOS delle icone delle app è spietatamente rigoroso. Forza una certa rotondità degli angoli e non consente trasparenza, rafforzando così un aspetto unificato. Penso che sia carino.

Recentemente mi sono innamorato del set di icone Flurry di Iconfactory e creare nuove icone in quello stile mi ha fatto pensare; qual è il modo più semplice per applicare una maschera e una sovrapposizione a un'immagine personalizzata e generare tutte le dimensioni necessarie per un file icona OS X completo (icns)?

Come menzionato di seguito I 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 di IconBuilder e sebbene sia un ottimo strumento, non è quello che sto chiedendo. Preferirei un'interfaccia drag-and-drop di qualche tipo.

Cinque risposte:
user10355
2012-03-19 04:31:02 UTC
view on stackexchange narkive permalink

Forse se qualcuno scrivesse un hack (ma rimango scettico in quanto tutto ciò potrebbe essere fatto facilmente ottenendo il modello dell'icona (file PSD) e facendolo manualmente.

iOS ha un framework per gestire con le icone 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 determina la forma dell'icona. ( 2) è l'effetto "gloss" che è caduto in disgrazia negli ultimi due anni ed è opzionale. (3) è la base dell'icona, l'ombra che viene applicata sotto il prodotto finale.

Ho fornito una spiegazione grafica e di accompagnamento di come funzionano tutti insieme sul mio sito Web che dovrebbe aiutare a spiegare meglio come iOS fornisce le icone sul rispettivo dispositivo.

Jaku iOS Theme icon mask pictogram

OS X non dispone di 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), da qui il motivo per cui hanno sviluppato un tale framework.

Tu potrei provare a contattare uno sviluppatore Cocoa per il 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.

Grazie cksum per aver spiegato le tecniche alla base del trattamento delle icone iOS. Tuttavia, la tua comprensione della mia domanda è un po 'sbagliata. Non sto mirando a una versione OS X di MobileIcons.framework, solo un modo per generare tutte le dimensioni appropriate per un icns, con mascheramento e gloss a mio piacimento.
Ah, capisco. Prova http://iconfactory.com/software/iconbuilder. Ti consente di creare un modello PSD che include qualsiasi dimensione desideri, quindi salvarli come un singolo file icns. Dovrai eseguire Ps in modalità a 32 bit poiché non è stato aggiornato da un po ', ma fa esattamente quello che vuoi. Produce qualcosa del genere: http://iconfactory.com/graphics/software/iconbuilder/screen1.jpg Dal momento che sfrutta la potenza di Ps, una volta impostati i modelli, puoi creare le tue icone con relativa facilità.
Grazie! Conosco l'approccio di IconBuilder e l'ho usato ma non lo considererei come "generare icone".
Vaptorious
2012-03-20 04:54:27 UTC
view on stackexchange narkive permalink

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, icons rende molto facile armeggiare con tutte le variabili (angoli, lucentezza, dimensioni di esportazione, ecc.) E questo è solo una parte dell'app! (Le altre schede riguardano le icone non iDevice…)

screen-cap of ***icons*** app interface

Grazie per aver risposto! Questo è un po 'quello che sto cercando, ma Icons ha dei forti limiti: non mi permette di personalizzare la maschera e non posso controllare le maschere e il rivestimento "vetro" per ogni dimensione. Anche la generazione di massa sarebbe piacevole.
jgriego
2012-03-19 06:51:21 UTC
view on stackexchange narkive permalink

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

Dopo aver installato ImageMagick, (http: //www.imagemagick .org) [Hanno le istruzioni di installazione qui] dovresti essere in grado di elaborare la tua immagine con maschera, sovrapposizione e ombra:

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

Questo presume che Your_Image sia grande e quadrato (1024x1024) e che mask.png, overlay .png e shadow.png hanno le stesse dimensioni.

Idealmente, non dovresti semplicemente ricampionare l'icona più grande verso il basso per ottenere le versioni più piccole, ma potresti invece usare un normale software per la creazione di icone (ad es. IconBuilder) e usalo per creare YourImage in ogni dimensione, quindi esegui quanto sopra per ciascuna individualmente.

Per quanto riguarda la dimensione corretta delle immagini di maschera, sovrapposizione e ombra, il mio miglior consiglio sarebbe quello di ingrandire e poi ricostruiscili (cioè disegnando un nuovo roundrect e gradienti) a piena risoluzione con Photoshop o GIMP.

Una volta che hai l'immagine a ogni risoluzione, puoi lanciarla in Apple Icon Composer (in l'SDK iOS / Mac) per creare il file .icns

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

Grazie per questa risposta! Non ho mai pensato all'approccio IM. Non molto facile da usare, ma sono favorevole se fa quello che voglio. Lo proverò prima che finisca la taglia!
Parlando di user friendly, stavo solo guardando di nuovo questo ei comandi sono fuori uso: overlay, mask, then shadow, not mask, overlay, shadow. Ho corretto il post, solo un avvertimento.
flakshack
2012-03-19 01:50:37 UTC
view on stackexchange narkive permalink

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

Secondo, controlla CandyBar per gestire e installare le icone sostitutive. Costa pochi dollari, ma è un ottimo programma.

Terzo, cerca in DeviantArt le icone Flurry che sono già state create. Cerca sia icona flurry e icona ios.

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

Spiacente, questo non risponde affatto alla mia domanda. Francamente, è abbastanza fuori luogo. E scrivere "... creare nuove icone in quello stile ..." indica che ne ho già create alcune.
Hai detto, "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 icona OS X completo (icns)?" Il modello PSD può essere utilizzato per applicare una maschera e un effetto lucido sulla tua immagine personalizzata. Img2Icns genererà quindi tutte le dimensioni necessarie per un file icns completo. Scusa se ho frainteso la tua domanda, stavo solo cercando di aiutarti.
Dan
2012-03-20 19:18:11 UTC
view on stackexchange narkive permalink

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

Dai documenti 1:

Quando iOS visualizza l'icona dell'applicazione nella schermata Home di un dispositivo, aggiunge automaticamente i seguenti effetti visivi:

  • Angoli arrotondati
  • Ombra esterna
  • Brillantezza riflettente (a meno che non si prevenga l'effetto lucido)
Benvenuto in Ask Different! Grazie per aver pubblicato una risposta! L'OP non sta parlando delle icone delle app iOS * per * iOS, piuttosto si riferisce alle icone in stile iOS in * OS X *.


Questa domanda e risposta è stata tradotta automaticamente dalla lingua inglese. Il contenuto originale è disponibile su stackexchange, che ringraziamo per la licenza cc by-sa 3.0 con cui è distribuito.
Loading...