Di solito, inizio con una serie di forme messe insieme che, a volte, creo con Illustrator perche' quest'ultimo rende il processo un po' piu' semplice. Se lo possiedi, puoi trascinare le forme direttamente in Photoshop. Ancora, se vuoi personalizzare una forma disegnata in Illustrator, tieni premuto CTRL e trascina la forma in Photoshop. Una volta apparsa, vai su Edit>Define Custom Shape.



Tengo queste forme su layers separati, cio' mi permette maggior controllo e la possibilita' di personalizzarle.



A questo punto, inizio con l'aggiungere qualche riflesso su parti diverse dell'interfaccia, ma in questo momento non sto facendo attenzione ai dettagli... sto solo provando a presentare le forme di base. Sto usando il dodge tool per fare questa serie di opacita' in maniera diversa. Ho aggiunto anche un po' di dropshadow a sinistra.



Ora, iniziamo a partire andando intorno agli angoli ed aggiungendo delle ombreggiature dove si pensa ce ne sia bisogno. La luce proviene dalla cima sinistra (almeno sopra la mia interfaccia). Questo e' importante: dovrete assicurarvi di avere la direzione della luce bene a mente quando renderizzerete le forme. Se avrete la luce proveniente dalla cima sinistra, le ombreggiature piu' scure dovranno essere in fondo a destra. Ora le ombre si diffonderanno, ma spero voi capirete.


Adesso abbiamo aggiunto piu' forme e stiamo iniziando a riempire un po' l'interfaccia. Ho aggiunto un riquadro (inset) piuttosto grande per il display principale ed ho creato anche la forma necessaria per inserire i bottoni di controllo poi.



Ho quindi aggiunto qualche sottile e vivace cromatura dove andremo ad inserire i bottoni.




Qui diamo uno sguardo ai miei Layers.



Ora inizio con l'inserire qualche dettaglio ai bottoni di controllo. Sto usando il set Airbrush tool con un lineare dodge mode ed un leggero colore bluette per apportare dei riflessi all'orbita dove metteremo i bottoni. Ho usato anche la pen tool per creare una forma brillante in cima ai bottoni. Notate che non ho usato il bianco per i riflessi. Facendo i displays e le orbite, il riflesso era semitrasparente e percio' non era bianco solido in nessun punto. Quindi, ho ritenuto di dover usare colori piuttosto brillanti che corrispondessero al colore di base.



Poi ho iniziato a fare la stessa cosa con il display principale, tenendo a mente la direzione della luce per i riflessi.



Durante questa fase, ho aggiunto maggiori dettagli, piu' riflessi ed ombre alle parti principali dell'interfaccia. Ho aggiunto anche qualche ulteriore dettaglio al displayprincipale e, per dare un tocco originale, ho creato delle dissolvenze a delle linee bianche del display principale.
Aggiungo anche i bottoni (Play, Next, Back). Uso il Type su una path tool che arriva come nuova caratteristica di Photoshop CS. Se non avete il lusso di possedere Photoshop CS, potete provare a settare il text warp e provare anche a rasterizzare il layer usando il filtro liquify.




Ora, sto focalizzando su dei minimi dettagli. In questo passo, uso linee e cerchi per separare i bottoni. Tutto cio' che sto facendo, e' di usare la mia pen tool ed averla settata a 'paths'. Poi, quando disegno la linea, eseguo un stroke alla path con un brush di 1 pixel. Se preferite, potete usare il line tool.



Adesso ho aggiunto maggior dettaglio, volume slider (usando il rounded rectangle tool) e l'ho liberamente trasformato. Ho aggiunto anche maggior luminosita' ai bottoni. Ora, se guardate verso il display principale, vedrete delle linee metriche. Per far cio', ho usato Illustrator. Con Illustrator ho creato un pattern brush di 3 linee verticali e poi le ho usate per delineare un cerchio, dopodiche' l'ho draggato in Photoshop e dimensionato. Ho aggiunto anche qualche linea di testo per vedere come potevano apparire le cose sul display.



Per finire, ho creato un bilanciamento ed anche un riquadro (inset) per esso. Non ero ancora soddisfatta con la forma rotonda del bottone del volume, cosi', ho creato un rettangolo rotondeggiante trasformandolo sul posto.

Come potete vedere, ho aggiunto del testo ed un orologio al display principale. Noterete il mezzo cerchio di quadratini nel display principale. Ho creato questi con Illustrator, usando lo stesso metodo che avevo adottato con il cerchio metrico. Poi, ho aggiunto una mask a questo layer e nascosto l'altra meta' del cerchio.



Bene, questo e' tutto. Potete continuare costruendo la skin ed aggiungendo piu' caratteristiche e dettagli.