Hwu UI Ghost Icons Project - Icone Metro Style

[Khronos]

LINK INTERNI AL TOPIC.

Hardware Upgrade UI Ghost Icons Project

MAN AT WORK

MEtro UI Dock Icon Set - 678 SVG Icons. <---- Da dove tutto è partito.

ICONE BIANCHE con sfondo totalmente trasparente

• GPU-Z by KHRonoS
• Folder and Os -> completamento by KHRonos - 50%
• BROWSERS -> by TheGamba
• SUITE ADOBE -> by TheGamba
• PROGRAMMI TUTTI GLI ALTRI -> by TheGamba

ICONE BIANCHE con fantasma in semi trasparenza

• BROWSERS ->by TheGamba
• SUITE ADOBE ->by TheGamba
• PROGRAMMI TUTTI GLI ALTRI ->by TheGamba
• Folder and Os -> completamento by KHRonos - 50%

[Donbabbeo]

Non avevo visto il thread!

Viste le mie doti artistiche sono molto interessato all'argomento

Personalmente le vorrei bianche, senza nessuna ombreggiatura e contorno, con sfondo trasparente

Visto che sono SVG non ho tra i requisiti la dimensione, mi basta che siano quadrate che poi le ridimensiono da me (OblyTile vuole immagini 120x120).

Requisito extra sul posizionamento dell'immagine: tra il bordo dell'immagine e l'icona stessa dovrebbero esserci una decina di pixel a sinistra, destra e sopra, mentre almeno una 20ina sotto visto che lì ci va la scritta

Visto l'ottimo lavoro che hai fatto con l'immagine di GPU-Z mi rifarò vivo quando avrò bisogno di icone non presenti in quel pacco

[Khronos]

il problema è dimensionarle bene... perchè se le originali PNG sono 512x512... le SVG mi usciranno belle grosse....
Oblytile le prende al volo o le devi per forza ridurre a mano a 120x120? sennò, le esporto dall'SVG dirette 120x120....

[Donbabbeo]

Originariamente inviato da Khronos

il problema è dimensionarle bene... perchè se le originali PNG sono 512x512... le SVG mi usciranno belle grosse....
Oblytile le prende al volo o le devi per forza ridurre a mano a 120x120? sennò, le esporto dall'SVG dirette 120x120....

Credo che 120x120 sia la dimensione minima, ora provo con un'immagine più grossa e ti faccio sapere.

EDIT: 120x120 è la dimensione minima, funziona perfettamente anche con immagini più grandi

[thegamba]

Iscritto

[Danilo Cecconi]

E perchè.... Io chi sono!?!?

[Beelzebub]

Il problema delle icone con questo W8 nasce sostanzialmente dal fatto che non è possibile editare il colore del tile creato da W8 quando si aggiunge un programma a Start; di conseguenza bisogna scegliere tra 3 strade:

1) usare icone a sfondo trasparente sapendo che il colore del tile sarà sempre lo stesso;

2) usare Oblytile e aggiungere le icone usando PNG creati appositamente per adattarsi allo stile Metro.

3) fare un mix delle due opzioni, cercando icone a sfondo trasparente e poi aggiungere un colore di sfondo per usare l'icona tramite Oblytile.

Nelle opzioni 1 e 3 il problema sono le dimensioni delle icone, dato che se la si prende troppo grande o troppo piccola, il "disegno" sarà sproporzionato rispetto alle icone @default (mail, contatti, store, ecc.). Insomma, una scocciatura... Il metodo 2 al momento mi sembra il più comodo, ma la comunità di modders è ancora all'inizio e non c'è una "copertura totale" del panorama software, soprattutto per programmi non diffusissimi...

Nel thread sul modding avevo postato un pò di link a pack in sitle metro sia in formato .ico che .png, dovrebbero andare bene e sono in costante aumento...

[Khronos]

e infatti uno dei pack l'ho postato al primo post è la versione SVG editabile del paccone da 650 che avevi trovato.
ho intenzione piano piano di farle diventare tutte trasparenti, per poi postare la versione base trasparente, la versione modificata da me, e magari se vi serve, una versione Nera.

nel frattempo, se qualcuno cerca qualcosa che non trova....

PS. posto l'unica che ho fatto fin'ora. da stasera mi metto dietro e ne faccio un altro paio, usando i suggerimenti di DonBabbeo:

Requisito extra sul posizionamento dell'immagine: tra il bordo dell'immagine e l'icona stessa dovrebbero esserci una decina di pixel a sinistra, destra e sopra, mentre almeno una 20ina sotto visto che lì ci va la scritta.

.

GPU-Z by KHRonoS

[Khronos]

Alcune prove generali.
i nomi dei file sono identici agli originali, così per ambientarsi.

pacco "Only Alpha", derivato dall'SVG originale del primo post, solo senza sfondo.

FIREFOX ALT.

pacco "Ghosted", derivato dall'SVG originale del primo post, senza sfondo e con un mio "primo tocco".

FIREFOX ALT.


STEAM ALT.

se gustano ai più... io faccio un bel pacco RAR di tutto quanto appena riesco a fare una buona parte di quelle icone.

[birmarco]

Grande Kronos Aspettiamo i pack allora

[Donbabbeo]

Bello bello!
Per me only alpha grazie

PS: una volta che avrai completato il pacco comincerai a fare immagini custom tipo quella che ti ho richiesto per GPU-Z vero?

[thegamba]

Interessatissimo Aspetto con ansia il paccone rar Grazie per il lavoro che stai facendo

P.S.: poi, se ti avanza tempo, ti va di spiegare che programma usi, come fai, etc, etc.? Così, magari, possiamo provare a contribuire

[Khronos]

Originariamente inviato da Donbabbeo

Bello bello!
Per me only alpha grazie

PS: una volta che avrai completato il pacco comincerai a fare immagini custom tipo quella che ti ho richiesto per GPU-Z vero?

esatto ^^ voi potete anche già scrivere che icone non trovate...

Originariamente inviato da thegamba

Interessatissimo Aspetto con ansia il paccone rar Grazie per il lavoro che stai facendo
P.S.: poi, se ti avanza tempo, ti va di spiegare che programma usi, come fai, etc, etc.? Così, magari, possiamo provare a contribuire

Per la trasformazione sto usando InkScape. solo per comodità, visto che il pacco che stiamo usando è in SVG nativo proprio per vettoriale opensource come Inkscape. Non per niente Ho OSANNATO chi lo ha creato... sarebbe stata MOLTO più dura modificare le PNG del pacco originale senza un sorgente...

li dentro bisogna semplicemente saper usare un programma di editing vettoriale, ci sono milioni di guide in rete apposta, non posso fare da "maestro" e so che tra di voi c'è molta gente anche più brava di me.

Per ora, come avrete visto, uso i layer standard... per lavorare meglio tengo lo sfondo colorato fino alla fine, creo il "ghost" del logo originale (magari semplicemente copia-incollando il suo livello, ingrandendolo e ruotandolo e dandogli una trasparenza), poi Cancello lo sfondo colorato (così diventa tutto trasparente) e, da Inkscape, esporto in PNG grandezza 512x512.

per fare le "only alpha".... disattivo il livello del ghost e riEsporto il PNG. ^^

[Donbabbeo]

Originariamente inviato da Khronos

Per la trasformazione sto usando InkScape. solo per comodità, visto che il pacco che stiamo usando è in SVG nativo proprio per vettoriale opensource come Inkscape. Non per niente Ho OSANNATO chi lo ha creato... sarebbe stata MOLTO più dura modificare le PNG del pacco originale senza un sorgente...

Che è quello che ho fatto io per quelle 4 icone che ho sostituito.
Il lavoro purtroppo è tutt'altro che soddisfacente: le icone hanno comunque un minimo di sfumatura e quindi resta un microbordo del colore dello sfondo originario. Aggiungici poi che non sono un granché con i programmi grafici...

[Khronos]

Originariamente inviato da Donbabbeo

Che è quello che ho fatto io per quelle 4 icone che ho sostituito.
Il lavoro purtroppo è tutt'altro che soddisfacente: le icone hanno comunque un minimo di sfumatura e quindi resta un microbordo del colore dello sfondo originario. Aggiungici poi che non sono un granché con i programmi grafici...

ma te che programma hai usato? gli SVG sono vettoriali, e "lo sfondo" è totalmente slegato dal poligono che forma l'icona. semplicemente, "canc" e via.

Quello che hai detto in grassetto succede con i Raster (PNG a livello unico, JPG, BMP).

Un modo per evitarlo sui Raster, è usare effetti di "contorno" che ti creano il bordo bianco di 1 o 2 pixel alla selezione che vuoi. riduci al minimo il bordo esterno, rinunci a 1 pixel magari di immagine e la ricrei bordandola te (su photoshop l'effetto del livello è il "traccia", "Stroke" nella controparte inglese. altrimenti si può usare l'effetto "bagliore" "outer o inner glow", sempre li.)
su Gimp ci saranno effetti simili.

[Donbabbeo]

Originariamente inviato da Khronos

ma te che programma hai usato? gli SVG sono vettoriali, e "lo sfondo" è totalmente slegato dal poligono che forma l'icona. semplicemente, "canc" e via.

Quello che hai detto in grassetto succede con i Raster (PNG a livello unico, JPG, BMP).

Un modo per evitarlo sui Raster, è usare effetti di "contorno" che ti creano il bordo bianco di 1 o 2 pixel alla selezione che vuoi. riduci al minimo il bordo esterno, rinunci a 1 pixel magari di immagine e la ricrei bordandola te (su photoshop l'effetto del livello è il "traccia", "Stroke" nella controparte inglese. altrimenti si può usare l'effetto "bagliore" "outer o inner glow", sempre li.)
su Gimp ci saranno effetti simili.

Non parlavo degli SVG, parlavo del risultato che avevo ottenuto io partendo proprio dalle immagini raster

[thegamba]

Stavo facendo qualche esperimento con InkScape, volevo capire come facevi Ho fatto più o meno come hai detto tu:
-Aperto un svg dal paccone
-Tolto lo sfondo
-Copiata l'immagine e ingrandita
-Inserito colore trasparente
Non è bella come le tue, sono scarso, ma almeno qualcosa è venuto

E adesso arriva il bello:
-Esporto come png, ma non salva solo l'immagine 512x512, ma anche la parte "eccedente" del simbolo ingrandito. Perchè? Adesso mi ritrovo un'immagine 700x700, in cui c'è anche la parte del logo ingrandito che dovrei togliere

[birmarco]

Originariamente inviato da thegamba

Stavo facendo qualche esperimento con InkScape, volevo capire come facevi Ho fatto più o meno come hai detto tu:
-Aperto un svg dal paccone
-Tolto lo sfondo
-Copiata l'immagine e ingrandita
-Inserito colore trasparente
Non è bella come le tue, sono scarso, ma almeno qualcosa è venuto

E adesso arriva il bello:
-Esporto come png, ma non salva solo l'immagine 512x512, ma anche la parte "eccedente" del simbolo ingrandito. Perchè? Adesso mi ritrovo un'immagine 700x700, in cui c'è anche la parte del logo ingrandito che dovrei togliere

Non conosco InkScape però penso tu debba ritagliare l'immagine in modo che tronchi le parti eccedenti oppure ci dev'essere qualche impostazione riguardante l'area di lavoro.

Soluzione """"professionale"""" al problema: la apri con Paint.Net, la ritagli e la risalvi

Io per fare lavori di questo tipo mi trovo benissimo con Firework, se ce l'hai però, perchè costa la Design Suite di Adobe

PS. Cmq è venuta bella, eccedenza a parte, mi piace

[thegamba]

Originariamente inviato da birmarco

Non conosco InkScape però penso tu debba ritagliare l'immagine in modo che tronchi le parti eccedenti oppure ci dev'essere qualche impostazione riguardante l'area di lavoro.

Soluzione """"professionale"""" al problema: la apri con Paint.Net, la ritagli e la risalvi

Io per fare lavori di questo tipo mi trovo benissimo con Firework, se ce l'hai però, perchè costa la Design Suite di Adobe

PS. Cmq è venuta bella, eccedenza a parte, mi piace

Ho provato paint.net ma non riesco a selezionare la dimenzione giusta,etc.,etc. Allora mi sono rimesso a smanettare con InkScape e ho scoperto come ritagliare la parte giusta, questo è il risultato:

Mi piacciono poco gli angoli, forse dovevo spostare un po' l'immagine sotto E, magari, potevo darci anche più trasparenza, cosa dite?

[Donbabbeo]

Originariamente inviato da birmarco

PS. Cmq è venuta bella, eccedenza a parte, mi piace

Ma difatti è venuta benissimo, anche il fatto che l'immagine non copra tutto è corretto, altrimenti OblyTile ti crea una tile con l'immagine gigante, invece deve stare al centro senza infastidire troppo.