Dall'arrivo della versione CS6, Adobe ha implementato in Photoshop un'opzione molto utile per impaginare e sviluppare progetti web. L'operazione è molto facile e soprattutto veloce. Attraverso l'applicazione saremo in grado di generare fogli di stile a cascata prendendo come riferimento le nostre forme e livelli di testo. La procedura è semplice come sviluppare il nostro mockup, copiare la versione in codice dei nostri elementi e incollarla sul nostro foglio.
È un'ottima opzione soprattutto perché ci permette di vedere l'evoluzione del nostro design in termini visivi e in tempo reale. Ecco alcuni suggerimenti per utilizzare questa opzione e ottenere il file prestazione massima:
Cerca di essere preciso
Per ottenere un risultato professionale, ti consigliamo di tenere in considerazione le misure e le proporzioni del tuo sito. Imposta i valori di Larghezza e Altezza del modello che stai progettando e applicali al tuo mockup. Quando copi il codice CSS posizioneremo ogni elemento prendendo come riferimento la distanza in pixel tra ogni elemento ei bordi della tela. Prendi in considerazione anche le dimensioni e i motivi gerarchici che includerai nel tuo progetto, incluso l'allineamento di ogni elemento e la spaziatura tra ciascuno di essi per fornire la massima leggibilità ai tuoi utenti.
L'uso delle guide e delle regole dell'interfaccia ti aiuteranno a costruire un modello ordinato e pulito con tutti i suoi elementi perfettamente allineati.
Configura tutte le caratteristiche di ogni elemento
L'opzione per copiare il codice CSS ci dà la possibilità di progettare il nostro sito con grande precisione attraverso l'uso di moduli e livelli di testo. Il contenuto di ogni livello verrà copiato negli Appunti e possiamo incollarlo rapidamente nel nostro foglio di stile. Dai livelli forma, acquisisci i valori per le seguenti impostazioni:
- Dimensioni
- Posizione
- Colore tratto
- Colore di riempimento (comprese le sfumature)
- Ombra esterna
Dai livelli di testo possiamo catturare i seguenti valori:
- Famiglia di font
- Dimensione carattere
- Spessore del carattere
- Altezza della linea
- Sottolineato
- barrato
- Apice
- Pedice
- Allineamento del testo
Tienilo a mente e imposta ciascuno di questi valori per fornire lo stile che stai cercando.
Lavora con i gruppi di livelli
Questa funzione traduce il nostro lavoro organizzato da due tipi di classe, una per ogni gruppo che riunisce livelli di forme o testo e una classe per ogni livello di uno di questi tipi. Ogni classe di gruppo rappresenterà un elemento div genitore che conterrà elementi div figlio e che corrisponderà ai livelli inseriti in ogni gruppo. In questo modo, i valori superiore e sinistro dei contenitori figlio verranno impostati facendo riferimento al contenitore padre. È necessario tenere presente che questa opzione non è disponibile con gli oggetti intelligenti e non sarà applicabile a più di un livello contemporaneamente a meno che non siano raggruppati.
Passaggi per convertire
Una volta realizzato il tuo mockup, personalizzato ogni elemento e raggruppato per gruppi, dovrai solo seguire questi passaggi:
- Vai al pannello dei livelli e scegli una di queste due opzioni:
- Fare clic con il pulsante destro del mouse su una forma o un livello di testo o un gruppo di livelli e scegliere Copia CSS nel menu contestuale.
- Seleziona una forma o un livello di testo o un gruppo di livelli, quindi scegli l'opzione Copia CSS nel menu del pannello Livelli.
-
Incolla il codice nel tuo foglio di stile e applicalo alle tue pagine tramite html5.
