• User Attivo

    [Psd sorgente] Realizzare interfacce organiche

    Ciao a tutti,

    Vi posto il .psd sorgente della bozza di un lavoro che stavo seguendo parecchi mesi fa.

    Molto spesso le persone mi chiedono come si realizzano le interfacce metalliche, plastiche o di altro tipo. Come accade quando insegno Photoshop, non smetterò mai di ripeterlo: la padronanza delle selezioni è basilare in questo lavoro, oltre ad un sapiente uso di gradienti e pennelli.

    Di base per creare qualsiasi forma si procedere attarverso l'utilizzo di selezioni tramite le quali, appunto, è possibile "disegnare" la forma che si preferisce. Le selezioni complesse si possono ottenere tramite l'utilizzo della Pen Tool (l'incubo di molti principianti, la gioia degli esperti).

    Una volta ottentuta la forma base, si procedere al riempimento della selezione con un colore piatto o un gradiente, dipende dai casi.
    In seguito la selezione creata e colorata, va rifinita con l'utilizzo dei pennelli.

    I pennelli in queste operazione dovrebbero avere i bordi sfumati ed un'opacità molto bassa (circa 5%) e servono per dipingere le luci e le ombre sulla nostra forma.
    Anche in questo caso ci aiuteremo con altre selezioni per definire bene i limiti delle ombre e delle luci per creare un senso di forme più nette.
    Un altro modo per creare le luci e le ombre è l'utilizzo degli strumenti "Dodge" e "Burn" che però non amo molto perchè hanno un'azione "distruttiva" sull'immagine essendo applicati non su un layer vuoto ma direttamente sull'immagine sorgente.

    Quindi se dobbiamo creare un'interfaccia spaziale, questa sarà composta da vari elementi (leggi: varie selezioni, colorate, sfumate, bruciate, schermate).

    Il trucchetto sta nel creare ogni singola cosa su un layer nuovo, solo così poi grazie all'opacità ed i metodi di fusione, si potrà migliorare la resa finale.
    L'opacità del pennello bassa è fondamentale.

    Se avete la penna grafica è meglio, sarà più facile lavorare ma il risultato è ottenibile anche con il semplice mouse.

    Chi fosse interessato è invitato quindi a nascondere i layer, attivarli e disattivarli e scomporre l'interfaccia. Alcuni pezzi hanno i livelli uniti (che ho unito per sbaglio durante la lavorazione) ma ce ne sono altri aperti e si capisce motlo bene come procedere nella realizzazione.

    Spero che possa essere utile a qualcuno.

    Il file è scaricabile da qui

    Se avete dei dubbi o domande, basta chiedere, io sono qui.;)

    Qui sotto in allegato l'anteprima di un dettaglio del sorgente.


  • Consiglio Direttivo

    Molto interessante.. utilissimo anche come punto di partenza per imparare a realizzare interfacce e vedere come sono fatte realmente. I risultati sono decisamente professionali. Grande ideasnextdoor! 🙂


  • Community Manager

  • User Attivo

    Grazie, sono contento lo troviate utile. Appena ho tempo organizzo un pò di materiale per pubblicarlo.