20 trucchi di Photoshop per i web designer

Probabilmente ogni web designer là fuori ha il proprio set di trucchi di Photoshop preferiti nella manica. Per una buona ragione. La potente modifica delle immagini di Adobe è un punto fermo del mondo del web design. Pochissimi programmi possono competere con questo eccellente software e la sua vasta gamma di funzionalità.

Tuttavia, mentre la maggior parte dei web designer conosce Photoshop, c'è sempre altro che puoi imparare. Dopotutto, il programma non è solo potente ma anche complesso. Inoltre, nuove cose vengono aggiunte regolarmente tramite aggiornamenti.

Per questo motivo, è una buona idea continuare a esplorare il tuo strumento preferito. Per aiutarti a farlo, in questo articolo esamineremo alcuni dei migliori trucchi di Photoshop in circolazione. Cose che possono migliorare il tuo flusso di lavoro, semplificare il lavoro e la vita, risparmiare tempo e aiutarti a progettare i migliori siti web possibili.

Sei pronto per saperne di più su Photoshop? Allora continua a leggere.

Trucchi di Photoshop per trasformarti in un mago del web design

I seguenti suggerimenti vanno dal livello principiante al materiale più complesso. Ognuno di loro è scelto per aiutarti a essere il miglior web designer che puoi essere.

1. Semplifica il tuo spazio di lavoro

Cominciamo con le basi. La prima cosa da fare per migliorare il tuo flusso di lavoro è configurare Photoshop in modo che supporti il ​​modo in cui lo usi. Dopotutto, il lavoro diventa più facile con uno strumento più affilato.

Per questo motivo, la nostra prima tappa è Window > Workspace > Graphic and Web . La scelta di questa opzione cambierà gli strumenti disponibili in quelli che probabilmente utilizzerai per il web design.

Successivamente, passa a Modifica> Preferenze . Qui, una delle tappe più importanti è Units & Rulers. Qualunque sia la misura che scegli qui (molto probabilmente i pixel), sarà l'impostazione predefinita per tutti i documenti a venire.

(Suggerimento rapido: per cambiare i righelli per i singoli documenti, è sufficiente fare clic con il pulsante destro del mouse su di essi e scegliere l'unità di misura desiderata.)

Successivamente, vai su Preferenze > Prestazioni > Cronologia e cache e fai clic su Progettazione Web/UI .

In questo modo cambierai le impostazioni della cache per favorire file più piccoli con molti livelli, che è ciò con cui lavorerai principalmente.

Nello stesso posto, puoi anche scegliere il numero di stati della cronologia. Questa è la quantità di passaggi che puoi tornare indietro se vuoi annullare qualcosa.

Infine, esci dalle preferenze, chiudi tutti i documenti e premi il tasto T sulla tastiera. Questo farà apparire il menu dei caratteri nella parte superiore dello schermo. Qualunque cosa imposti qui sarà da quel momento in poi standard per i nuovi documenti. Perché a nessuno piace così tanto Myriad Pro.

2. Impara le scorciatoie da tastiera

Per qualsiasi programma che usi regolarmente, imparare le scorciatoie da tastiera è generalmente un buon consiglio.

Ad esempio, uso Ctrl+Alt+2/3 per creare intestazioni h2 e h3 mentre scrivo questo post. È molto più veloce rispetto all'utilizzo della barra degli strumenti dell'editor poiché non devo staccare le mani dalla tastiera.

Lo stesso vale per Photoshop. Sapere come eseguire un'azione con semplici sequenze di tasti è infinitamente più veloce che fare clic sui menu.

Citeremo una serie di scorciatoie da tastiera in questo articolo. Tuttavia, consiglio anche questo cheat sheet per imparare le scorciatoie per le operazioni più comuni di Photoshop. Oltre a ciò, è anche una buona idea prendere l'abitudine di esaminare le scorciatoie da tastiera per le cose che fai più e più volte.

3. Livelli di gruppo e nome

Quando lavori con Photoshop, lavorerai con un sacco di livelli. Non solo la maggior parte degli elementi ottiene il proprio livello, ma anche modifiche come luminosità/contrasto vengono aggiunte come livelli.

Per questo motivo, può creare confusione molto rapidamente. Fortunatamente, ci sono un sacco di opzioni per renderlo meno, due delle quali sono la possibilità di raggruppare e denominare i livelli.

Innanzitutto, facendo doppio clic su qualsiasi livello, puoi cambiarne il nome in qualsiasi cosa tu voglia.

In questo modo, capirai facilmente se un livello contiene l'immagine di sfondo, il menu o la barra laterale.

In alternativa, puoi anche selezionare più livelli contemporaneamente, tenendo premuto Ctrl per selezionare singoli livelli o Maiusc per contrassegnare un intervallo di livelli adiacenti. Ctrl+G quindi li trasforma in un gruppo.

In alternativa, fai clic con il pulsante destro del mouse sui livelli e scegli l'opzione di gruppo da lì. In ogni caso, i tuoi livelli saranno molto più organizzati. Inoltre, puoi anche nominare i livelli raggruppati!

4. Strati di filtro

Dare un nome e raggruppare i livelli è un buon inizio. Tuttavia, quando si lavora con dozzine o addirittura centinaia di essi, è ancora possibile confondersi facilmente.

In questi casi, hai anche la possibilità di filtrare i tuoi livelli. Per farlo, usa semplicemente il menu nella parte superiore del menu Livelli per filtrare per tipo, nome, effetto, colore e altro.

In alternativa, seleziona direttamente un livello utilizzando lo strumento Sposta , tenendo premuto Ctrl e facendo clic su un livello o un oggetto.

5. Crea una griglia

Immagine di PureSolution / shutterstock.com.

La griglia è uno dei principi più importanti nel web design. Porta ordine nel design e ti aiuta a posizionare i tuoi oggetti. Per questo motivo, ha senso solo creare una griglia anche in Photoshop.

Per farlo, usa Visualizza > Nuovo layout della guida . In alternativa, crea guide orizzontali e verticali semplicemente facendo clic su un righello e trascinandolo nel documento. Usa Ctrl per spostare le guide esistenti.

6. Importa campioni di colore

Puoi caricare campioni di colore direttamente in Photoshop da file HTML, CSS o SVG. In questo modo, hai un ottimo punto di partenza per la tua combinazione di colori quando lavori con risorse esistenti come un logo.

Per sfruttare questo trucco di Photoshop, basta aprire il pannello Campioni , fare clic sul menu a tendina nell'angolo in alto a destra e scegliere Carica campioni . Ora vai al file in questione e aprilo per importare il tuo nuovo campione di colore.

7. Salva forme personalizzate

Soprattutto quando si progettano più pagine per lo stesso sito o siti Web con un design simile, ti ritroverai a utilizzare gli stessi oggetti e le stesse forme più e più volte. Per questo motivo, ha senso salvarli come forme personalizzate per un rapido riutilizzo.

Per fare ciò, fai clic con il pulsante destro del mouse sulla forma in questione con lo strumento di selezione del percorso (la freccia nera). Quindi, scegli Definisci forma personalizzata . Dopo averlo fatto, puoi accedere a questa forma tramite le opzioni della barra in alto dello strumento Forma personalizzata . Basta fare clic sul menu a discesa dove dice Forma: e scegliere la forma salvata.

8. Passa dai colori di sfondo a quelli di primo piano

Due passano avanti e indietro tra il colore di sfondo e quello di primo piano senza fare clic sull'icona, basta premere X sulla tastiera. Inoltre, se vuoi che i colori tornino al semplice bianco e nero, puoi farlo premendo D .

9. Cambia opacità tramite tastiera

Un'altra scorciatoia da tastiera: per qualsiasi strumento in grado di modificare l'opacità, puoi farlo semplicemente tramite la tastiera. I numeri da 1 a 0 imposteranno l'opacità su un valore compreso tra il 10% e il 100%. La stessa cosa funziona anche con l'opacità dei livelli.

10. Disegna linee rette

Per disegnare una linea retta con qualsiasi strumento, tieni semplicemente premuto il tasto Maiusc . Successivamente, puoi tracciare una linea (sia orizzontalmente che verticalmente) che sarà automaticamente dritta come un chiodo. In alternativa, fare clic su due punti diversi per creare una linea retta tra di loro.

11. Colore campione

Il prossimo passo nella nostra borsa di trucchi di Photoshop è la possibilità di campionare qualsiasi colore. Se hai bisogno del colore di qualsiasi oggetto, tieni premuto il pulsante Alt e fai clic sulla tonalità che desideri. Funziona sia con Pennello , Matita , Secchio di vernice e qualsiasi altro strumento che utilizza i colori.

12. Aggiungi o rimuovi dalla selezione

È possibile aggiungere a una selezione esistente tenendo premuto Maiusc e selezionando la parte che si desidera includere. Per sottrarre, fai la stessa cosa ma con il pulsante Alt .

13. Annulla più di un passaggio

Il modo classico per annullare l'ultima azione è usare Ctrl+Z . Tuttavia, questo funziona solo per l'ultima cosa che hai fatto. Per tornare indietro di diversi passaggi, usa Ctrl+Alt+Z .

14. Cambia dinamicamente la dimensione del pennello

Per modificare le dimensioni del pennello, non è necessario fare clic sul menu a discesa e trascinarlo nella dimensione corretta. Invece, tieni semplicemente premuto Alt e il pulsante destro del mouse, quindi trascina a sinistra e a destra per diminuire e aumentare le dimensioni del pennello.

15. Risparmia per il Web

L'utilizzo della funzione Safe for Web è essenziale, poiché assicura che le dimensioni dell'immagine siano le più ridotte possibile. Questo è molto importante per migliorare la velocità del sito.

In Photoshop, puoi farlo tramite File> Esporta> Salva per Web . Tuttavia, un modo più rapido è usare Ctrl+Alt+Shift+S . Prego!

16. Apri immagini come livelli

A volte è necessario importare un gran numero di immagini in Photoshop contemporaneamente. Tuttavia, quando li trascini semplicemente sul tuo spazio di lavoro, ti verrà chiesto di posizionarli manualmente.

Un modo più pratico per farlo è File > Script > Carica file nello stack . Sfoglia le immagini in questione, contrassegnale e premi Ok due volte. Ora, ogni immagine verrà automaticamente importata nel proprio livello.

17. Copia CSS direttamente da Photoshop

Uno dei trucchi Photoshop più comodi per i web designer è il fatto che il programma crea CSS che puoi esportare. Non è necessario digitare tutto a mano o utilizzare tentativi ed errori per implementarlo.

Per trarne vantaggio, fai semplicemente clic con il pulsante destro del mouse su un livello e seleziona Copia CSS . In alternativa, usa il menu Livello per trovare la stessa opzione. Ora hai tutti gli stili necessari da incollare semplicemente nel tuo foglio di stile o in qualsiasi altro programma che stai utilizzando.

18. Progetta per più dispositivi e orientamenti contemporaneamente

Progettare per il web oggi significa progettare per una pletora di dispositivi diversi. In tempi in cui i dispositivi mobili eclissano i computer desktop in tutto il mondo, l'implementazione del design mobile è un must.

Fonte: ComScore

Fortunatamente, Photoshop ha tavole da disegno e oggetti intelligenti che rendono molto facile ridimensionare il tuo design in diversi formati.

Potrei descrivere entrambi in dettaglio qui, tuttavia, Phlearn ha realizzato un eccellente tutorial su questo che fa un lavoro molto migliore di quello che potrei mai fare:

19. Utilizzare l'elaborazione automatica per attività ripetitive

Un'altra fantastica funzionalità di Photoshop è l'elaborazione automatica. Significa che puoi ripetere le attività registrate più e più volte senza doverle eseguire manualmente. Questo è super utile, ad esempio se devi salvare molte immagini per il web.

Ecco come funziona. Per prima cosa, apri il tuo file. Quindi, apri Azioni ( Alt + F9 ), trova Crea nuova azione e fai clic su di esso. Fornisci un nome e, facoltativamente, assegnagli una combinazione di tasti e un colore.

Per registrare le tue azioni, premi Registra . Quindi eseguire l'operazione che si desidera ripetere. Nel mio caso, apro un'immagine da una cartella e la salvo per il web in un'altra cartella.

Una volta fatto, interrompi la registrazione. Ora puoi riutilizzare questa azione per tutte le altre immagini, risparmiando un sacco di tempo. Per ulteriori informazioni su cosa puoi automatizzare in Photoshop, consulta questo articolo.

20. Anteprima sul dispositivo

Infine, insieme a Photoshop, Adobe offre anche un'app che ti consente di visualizzare in anteprima il tuo lavoro su diversi dispositivi iOS. La cosa migliore: sei in grado di osservare le modifiche sul dispositivo mentre le fai sul computer.

Per fare ciò, installa l'app e usa Anteprima dispositivo per connettere Photoshop a un dispositivo esterno tramite USB o Wi-Fi. Trovi l'opzione in Finestra > Anteprima dispositivo .

Quali sono i tuoi trucchi di Photoshop preferiti?

Photoshop è uno degli strumenti di web design più utilizzati in circolazione. Le sue potenti funzionalità lo rendono perfetto per la progettazione di siti Web e risorse di alta qualità.

Tuttavia, con una grande potenza deriva anche una grande complessità e, soprattutto per i principianti, può essere necessario del tempo per padroneggiare il software.

Per accorciare la curva di apprendimento, sopra abbiamo fornito una serie di utili trucchi di Photoshop per i web designer. Semplificano molte cose, dal flusso di lavoro generale all'elaborazione automatica dei file.

Conoscere Photoshop dentro e fuori è un grande investimento per i tuoi profitti. Quando sei in grado di fare le cose più velocemente, puoi assumere più lavoro, quindi generare più entrate. E questo non può mai essere un male.

Quali sono alcuni dei tuoi trucchi di Photoshop preferiti? Fatecelo sapere nella sezione commenti qui sotto in modo che possiamo aiutarci a vicenda.

Immagine in miniatura dell'articolo di Creative Stall / shutterstock.com