February 14
Sia che si codifica i propri siti web o produrre prototipi per un guru di codifica per costruire dietro le quinte, utilizzare Adobe Photoshop per creare visualizzazioni dettagliate per la revisione di squadra e l'approvazione del cliente. Poiché i browser Web visualizzano nel mondo basato su pixel di monitor e schermi dei dispositivi mobili, l'attenzione di Photoshop su immagini bitmap corrisponde con la vista i visitatori potranno vedere quando hai finito di costruire i vostri disegni.
Quando beffe up o di un prototipo di una pagina Web, mantenere le dimensioni del monitor degli spettatori in mente come si imposta file di lavoro in Adobe Photoshop. Anche se il sito web W3Schools attira visitatori tecnologia-centric cui apparecchiature potrebbero non corrispondere in media gli utenti di computer ", le sue statistiche del sito a lungo termine mostrano chiaramente l'impatto dei grandi dispositivi di visualizzazione e le risoluzioni elevate dello schermo. Nel gennaio 2014, il 47 per cento dei suoi visitatori impostato le loro preferenze di visualizzazione a 1920 da 1080 o risoluzioni più elevate, rispetto al 10 per cento di 10 anni prima. Insieme con le versioni del sito a schermo intero, se si sta costruendo la visualizzazione mobile-device di un layout reattivo che si adatterà alle dimensioni dello schermo dei visitatori, è possibile impostare il file di lavoro a una dimensione che corrisponde dimensioni dello schermo comune su smartphone e tablet .
Come si istigare il processo di creazione di un documento Adobe Photoshop, si inizia con i principi fondamentali: dimensioni, risoluzione e modalità colore. Impostare la risoluzione di 72 pixel per pollice e la modalità colore RGB per la compatibilità in linea. preset "Web" di Photoshop crea automaticamente un file 800-by-600 pixel, che non può essere ciò che si vuole, a seconda del tipo di pagina creata e l'hardware si assume tuoi visitatori. Nuova finestra di dialogo del programma mostra anche la quantità di spazio su disco il documento richiede. Utilizzare i contenuti di fondo di impostazione per stabilire un file che include un livello di sfondo bianco, inizia con uno strato trasparente 1 o riempie lo sfondo con il colore di primo piano corrente dal pannello Strumenti. Se si prevede di costruire molti file in queste dimensioni e con queste impostazioni, salvare la configurazione come un preset. Nella sezione Avanzate della finestra di dialogo Nuovo, attivare - o ignorare - la gestione del colore e assegnare un profilo colore.
file di Photoshop a griglia forniscono un'area di lavoro produttivo in cui per la progettazione di layout Web basate su altre soluzioni coerenti di colonne, grondaie colonne e le divisioni di pagina verticali. Quando si imposta questo tipo di accordi, un momento per fare la matematica di base prima. Aggiungere le larghezze delle colonne e degli spazi grondaia tra di loro per determinare larghezza complessiva pagina o dividere la larghezza che si desidera utilizzare per le dimensioni delle unità in cui si desidera disgregare. Con i tuoi calcoli a mano, creare un file che contiene le giuste dimensioni per l'uso previsto. Si noti che se si basa Photoshop layout su qualsiasi sistema di misura diversa pixel, si rischia la creazione di unità di progettazione che non corrispondono alla griglia di pixel invisibile imposto dalla risoluzione del documento. Vedrete bordi smussati intorno solidi rettangolari, perché le vostre misure non cadrà esattamente sulla stessa griglia del file. Naturalmente, se siete abituati a lavorare in punti come unità di misura, un file di 72 pixel per pollice destinato al Web correla esattamente con misure puntuali.
Se si progetta con gli schermi ad altissima risoluzione di dispositivi Retina-display di Apple in mente, creare un set di grafica a due volte le dimensioni delle vostre risorse in linea regolari e servire fino a visitatori con l'hardware di qualificazione. A seconda di come si codifica le pagine del sito web, è possibile utilizzare due gruppi separati di grafica, ridimensionare i file Retina-ready per gli altri visitatori o servire le immagini regolari per tutti. Aggiungere "@ 2x" - senza virgolette - alla fine dei nomi di file ad alta risoluzione sito web in modo che il software che carica le pagine in grado di riconoscere questi documenti. Avrete risultati migliori se si crea i file più grandi prima e di creare versioni ridimensionate di loro per gli schermi normali, piuttosto che il contrario, a causa della rammollimento inevitabile introdotta attraverso operazioni di immagine-scala.
Le informazioni in questo articolo si applica a Adobe Photoshop CC 2014, Adobe Photoshop CC e Adobe Photoshop CS6. Esso può essere leggermente diverso o significativamente con altre versioni o prodotti.