Come creare skin per Steam

Steam è una console di gestione videogiochi e community ampiamente usata creata da Valve Entertainment. L'app presenta un negozio online, client chat e social networking. Una delle funzionalità più popolari è la sua overlay in-game, che ti permette di controllare amici online o chattare senza uscire dal gioco. Steam ti permette di progettare le tue skin dell'interfaccia (l'aspetto grafico dell'applicazione) usando una console di sviluppo o tramite strumenti di terze parti facili da usare.

Utilizzo del Skin Creator

Passo 1

Scarica Steam Skin Creator da Fileplanet. Quando completo, decomprimi il file "ilovesteam10.zip" nella posizione di tua scelta o clicca il pulsante ">" se è stata usata l'applicazione di download. Apri la cartella "ilovesteam10" e avvia "ilovesteam_19.exe".

Passo 2

Clicca "Avanti" sull'installer e accetta l'Accordo di Licenza nella pagina successiva. Scegli una posizione per installare il Skin Creator e clicca "Installa". Lascia la casella "Esegui" selezionata e clicca "Fine".

Passo 3

Clicca su "Opzioni > Modifica percorso Steam" e clicca il pulsante "Percorso". Naviga alla posizione della tua directory Steam. Questo è tipicamente C:\Program Files\Steam (Program Files(x86) su sistemi a 64 bit). Seleziona Steam.exe e clicca "Apri".

Passo 4

Clicca il pulsante "Nuovo progetto" sull'interfaccia Skin Creator. Digita un nome progetto e clicca "OK". L'immagine "Root" verrà mostrata per prima, con la finestra "Server" nella seconda scheda. Queste immagini rappresentano i pezzi principali del Client Steam e come gli altri dialoghi appariranno con le tue modifiche.

Passo 5

Modifica colori, immagini di sfondo e icone usando i campi sul lato sinistro. I colori devono essere inseriti usando hex, preceduti da un segno #. Puoi opzionalmente usare il color picker che apparirà se clicchi il quadratino colore a destra del campo di input.

Passo 6

Converti le immagini di sfondo o icone desiderate in formato TarGA usando un programma di editing grafico come Photoshop, Corel Paint Shop Pro o Gimp. Carica l'immagine esistente nel programma poi semplicemente scegli "Salva come" dal menu File e seleziona il file e seleziona il tipo di file "tga".

Passo 7

Clicca sul pulsante "Salva progetto ILS" quando hai finito. Clicca "File > Salva ed esporta su Steam". Dovrebbe apparire un messaggio di successo.

Modifica avanzata usando Dev Mode

Passo 1

Scarica e installa una skin compatibile 2010 o successiva dal sito di Valve. Questo servirà come tuo modello per la tua skin personalizzata.

Passo 2

Apri Esplora risorse di Windows e naviga alla tua cartella Steam (tipicamente sotto Program Files). Fai doppio clic e poi apri la cartella "Skins". Fai doppio clic sulla cartella per la skin appena installata e poi premi Ctrl+A per selezionare tutto all'interno. Clicca "Modifica > Copia" dal menu Esplora.

Passo 3

Torna alla cartella Skins principale e crea una nuova cartella nominata come la tua skin personalizzata. Fai doppio clic per aprirla, poi clicca destro e scegli "Incolla". Il contenuto della cartella della skin scaricata dovrebbe apparire dentro la tua nuova cartella skin.

Passo 4

Avvia Steam e accedi. Clicca su "Steam > Impostazioni" e clicca la scheda "Interfaccia". Seleziona la tua skin dal menu a discesa Skins e clicca "Sì" per permettere a Steam di riavviarsi. Chiudi Steam una volta che si riapre.

Passo 5

Clicca su "Start", digita "Esegui" nel campo di ricerca e premi "Invio". Digita il percorso del tuo steam.exe tra virgolette, seguito da uno spazio e "-dev" senza virgolette. Questo avvierà il programma in modalità sviluppo. Per esempio: "c:\program files\steam\steam.exe" -dev

Passo 6

Apri la finestra su cui vuoi iniziare a lavorare, come Amici, Server, Community e così via. Premi "F6" per aprire la console "vgui layout debugger". Solo una finestra di dialogo può essere modificata alla volta mentre questa è aperta.

Passo 7

Seleziona un elemento della finestra che vuoi ridisegnare. Per esempio, nella finestra Amici, potresti selezionare il link "Aggiungi un amico". Tutti gli elementi richiesti per visualizzare e far funzionare il link appariranno nel debugger, divisi in Stili, Dettaglio, Layout, Gruppi e Localizzazione. Gli elementi primari su cui concentrarsi sono Stili e Layout che sono simili a stili CSS e layout HTML nel web design.

Passo 8

Nella scheda Stili, seleziona la proprietà che desideri modificare e poi clicca il link del file all'estrema destra. Dovrebbe apparire una finestra di dialogo Windows che ti chiede come aprire il file. Clicca l'opzione "Seleziona il programma da un elenco..." e clicca "OK". Scegli Blocco note o il tuo editor HTML preferito dall'elenco. Se non appaiono, clicca "Sfoglia" per individuare il programma. (Blocco note si trova nella tua cartella Windows).

Passo 9

Modifica il file con le tue modifiche desiderate a posizione, colore o comportamento. Per trovare voci specifiche relative all'elemento che hai evidenziato nel debugger, clicca su "Modifica > Trova" e digita il nome della proprietà. Per esempio: Cambiare Button:hover in "Red" farà diventare il testo rosso dopo che le mie modifiche skin sono salvate e Steam è ricaricato.

Passo 10

Salva le modifiche a qualsiasi file di testo che modifichi cliccando "File > Salva" e fai attenzione a non cambiare l'estensione del file. Chiudi Steam quando hai finito di modificare stili e layout.

Passo 11

Avvia il tuo software di editing grafico. L'applicazione deve essere in grado di visualizzare e salvare file TarGA (.tga), come Photoshop, Corel Paint Shop Pro o Gimp. Clicca su "File > Apri" e naviga alla cartella della tua skin all'interno della directory skins di Steam. Fai doppio clic sulla cartella Graphics per visualizzare le immagini disponibili che puoi modificare.

Passo 12

Modifica i file grafici nello stesso modo in cui modificheresti qualsiasi altra immagine d'interfaccia. Se sostituisci l'immagine con una di dimensioni diverse, assicurati di salvare la nuova grafica con lo stesso nome e scegli "tga" come tipo di file.

Suggerimento

Immagini personalizzate come grafica pulsanti, sfondi e così via possono essere salvate come file .tga nella cartella graphics e poi referenziate negli stili. Per esempio, potresti modificare una proprietà sfondo per includere un percorso relativo alla tua grafica invece di usare un colore solido.