Iniziamo una nuova serie di articoli che parleranno di alcuni strumenti indispensabili per il lavoro del web designer e del front end developer.
Oggi vi voglio introdurre a Page Layers, è un programma esclusivamente per MacOS che trasforma qualsiasi pagina Web in un file photoshop PSD a livelli editabile.
Il funzionamento è semplice quanto efficace. Dato un indirizzo web il software trasforma la pagina visualizzata in un file PSD a livelli pronto da essere utilizzato per le creare la vostra prossima bozza in photoshop.
Il programma ha un costo di 35€ una-tantum ed è scaricabile a questo indirizzo.
Una volta installato ed avviato, il programma vi propone una schermata molto simile ad un classico browser come Safari e il campo di ricerca si comporta come una barra degli indirizzi, in cui è sufficiente digitare l’url della pagina da visionare e cliccare invio per entrare nel sito. Il browser integrato vi permette inoltre di navigare all’interno del sito fino ad una eventuale area riservata e/o protetta da password. Questo è molto utile nel caso in cui dobbiate creare delle bozze per le pagine riservate.
Per questo esercizio trasformeremo il sito della Apple in un documento psd. Entriamo nel sito che vogliamo convertire e clicchiamo sull’icona di photoshop attendendo il caricamento del file.
Come si vede dall’immagine la conversione può essere fatta sia in psd che in png, infatti con Page Layers è possibile salvare anche la sola schermata come un semplice screenshot in formato png.
Il risultato è una copia esatta della pagina aperta.
Ma che dimensioni ha il file ottenuto? L’opzione di default è “larghezza x ∞”. Ciò significa che la larghezza è corrispondente alla larghezza della finestra di navigazione, mentre l’altezza è quella dell’intera pagina web (il doppio se salviamo il file da uno schermo retina). É possibile anche scegliere dimensioni diverse a seconda delle necessità selezionando i formati proposti oppure inserendo un formato personalizzato.
Se abbiamo la necessità di esportare il nostro sito in versione responsive infatti basta selezionare la dimensione adatta (o inserirla) e cliccare su esporta. Ecco che il file psd sarà l’esatta copia del sito in versione mobile.
I siti con effetti JavaScript che gestiscono lo scorrimento della pagina (ad esempio effetti parallasse oppure elementi e animazioni resi visibili solo dopo uno scroll-down) sono più complicati da salvare per Page Layers. Il trucco in questo caso è catturare schermate separate del sito con l’opzione “fixed browser height” e poi ricomporre il file completo in Photoshop.
E per il testo?
Il file psd che viene generato dopo l’esportazione è un file a livelli completamente editabile ma trasforma qualsiasi blocco di testo in un elemento raster, non permettendo quindi di modificare il testo del sito con il nostro. Esiste però un’opzione che permette di generare livelli di testo, basta salvare il file non con il click sull’icona di Photoshop, ma dal menù Screenshot -> Save As selezionando la casella “Genera livello testo” (generate text layers).
Immagini Retina
Page Layers gestisce il salvataggio delle immagini sia in versione retina che non-retina, opzione utile se la necessità non è quella di utilizzare le foto della pagina salvata, ma caricare le nostre.
Fateci sapere se l’articolo vi è stato utile!
Ancora nessun commento