Inizierò dicendo qualcosa che molti potrebbero sapere ... ma non importa: HTML5 + CSS3 + JS ... semplicemente perfetto 🙂
Un utente mi ha scritto una mail chiedendomi di un tutorial per lui per creare icone piatte, quelle piatte e questa è la nuova moda sul web. Specificamente voluto da Inkscape o Cordoncino un pulsante in stile chat o qualcosa che potrebbe servire (o fare riferimento) Snapchat.
Dato che sono pessimo con Inkscape e inoltre, creare contenuti da zero anche con Gimp fa schifo ... beh mi sono ricordato che tempo fa ho visto una piccola applicazione web (un index.html con alcuni css e js) che ci ha permesso di creare facilmente e rapidamente icone piatte nella moda attuale, sai, design piatti.
Generatore di icone piatte
Ha una serie di icone predefinite, ad esempio l'icona del laptop, dispositivi mobili (quello che mostro nello screenshot), regalo, bicicletta ... uff, sono un bel po ', davvero una grande varietà:
Ma non si tratta solo di mettere l'icona e ora ... possiamo definire la dimensione dell'icona o la dimensione dell'immagine in quanto tale (icona + sfondo) tramite due barre orizzontali. Ovviamente vediamo la dimensione del quadrato in pixel… 256… 512… ecc
L'opzione successiva ci consente di scegliere il colore dello sfondo e il colore dell'icona. Per impostazione predefinita l'icona è bianca e lo sfondo è blu, in modo da non stonare molto.
Infine, in quella barra a sinistra delle opzioni, ci permette di definire se i bordi dell'icona sono quadrati o se, invece, vogliamo che il risultato finale sia circolare.
Vi lascio uno screenshot di queste opzioni:
D'altra parte, nella parte superiore ci mostra le informazioni dell'icona che si sta generando e cambiando in tempo reale. In altre parole, se giochi con le taglie e i colori vedrai che queste informazioni cambiano sempre in tempo reale:
Come puoi vedere, abbiamo anche un pulsante Ottieni icona, che ci mostrerebbe l'icona già generata in PNG in un'altra scheda, in cui possiamo fare clic destro + Salva e voilà, avremo l'icona piatta che generiamo nella cartella desiderata sul nostro computer.
Scarica Flat Icon Generator
Se vuoi provarlo tu stesso (che immagino sia così haha), ecco il link:
Con questo spero di conformarmi a quanto l'utente mi ha chiesto via e-mail, sebbene non sia un tutorial per creare il pulsante con Gimp o Inkscape, beh, immagino comunque che servirà quello che vuoi. In effetti, non puoi semplicemente generare il pulsante per il collegamento da scarica snapchat, ma potrebbe persino generare la stragrande maggioranza delle icone o dei pulsanti del tuo sito o di qualunque cosa tu stia facendo 😀
Saluti e spero che abbiate trovato interessante.
Non ho capito come usarlo pueden Puoi solo fare le opzioni dell'icona che dà?
È molto buono, scrivo il link.
Di solito utilizzo l'app IcoMoon (https://icomoon.io/app/#/select) che è anche piuttosto interessante e molto completo; anche se non so se è esattamente lo stesso a cui si riferisce il post.
Saluti.
Mi è piaciuta l'idea di personalizzare le icone, mi sono piaciuti i link (il tuo e l'utente Percaff_TI99). Li salverò nei miei preferiti 😀
Proposte interessanti, anche se già preferisco utilizzare Inkscape per la facilità con cui è possibile realizzare icone piatte (infatti è più pratico di un altro editor vettoriale che ho utilizzato, anche se non mi sono ancora abituato a realizzare grafiche vettoriali più avanzate con tale applicazione).
Molto pratico e facile da usare. Puoi anche coprire queste esigenze usando Font Awesome: http://fortawesome.github.io/Font-Awesome/
Grazie per la condivisione! che 🙂
Vai così interessante di sicuro servirà per molti progetti. Mi chiedevo com'è un'applicazione web, può essere portata per il sistema operativo firefox? Creando una webapp un collegamento diretto o simile per usarlo? Scusami, non so perché.
Ora che siamo a Natale, molti genitori regaleranno ai loro figli uno smartphone per i re. Qual è una delle prime cose che farai con questi dispositivi? Indubbiamente, uno di questi, se non il primo, sarà quello di scaricare snapchat e un altro di loro sarà la descrizione di WhatsApp. Poiché si tratta di applicazioni gratuite, la maggior parte degli adolescenti le ha sui propri telefoni.
Penso che una delle cause del successo delle applicazioni del tipo snapchat sia in primo luogo che sono gratuite, d'altra parte, la moda è stata creata per inviare immagini di quasi tutto ciò che viene fatto durante il giorno e infine perché si tratta di un'app molto facile da usare
Eccellente! Questo sito web mi ha aiutato molto nel processo di creazione del logo per il mio nuovo sito su snapchat, in coincidenza con l'utente che ha effettuato la query. Ti mando un abbraccio dal Paraguay, il sito è molto buono 😉 Saluti.