February 8
Come designer, non si può avere una buona conoscenza su come un progetto creato in Photoshop diventa un sito web completamente funzionale. E 'importante avere una conoscenza di base di HTML e CSS quando si lavora con uno sviluppatore, al fine di preparare un PSD o un file di Photoshop con livelli in modo corretto. I progettisti fanno l'errore comune di salvataggio dei file in formato sbagliato, appiattimento immagini o dimenticando di dare strati nomi semantici. Questi errori provocano frustrazione e confusione per lo sviluppatore, o un sito web che non esegue come previsto. Prendendo a pochi passi per preparare il PSD con lo sviluppatore in mente, si manterrà la partnership e di essere in una posizione migliore per soddisfare le aspettative.
1 Fare clic su "Immagine" e "Mode" e verificare il vostro disegno è impostato su RGB. Questa impostazione configura il disegno per una migliore compatibilità Web. CMYK viene utilizzato solo per la produzione di stampa e dovrebbe essere evitato quando si progetta per lo schermo.
2 Creare gruppi di livelli che corrispondono ai livelli fisici del sito. E 'importante avere una visione chiara di quali elementi laici sotto o sopra gli altri e per organizzare i tuoi gruppi di livelli di conseguenza. Ad esempio, posizionare ogni strato in PSD che comprende lo sfondo in un gruppo di layer "di sfondo" in fondo, gli strati che compongono il menu di navigazione in un gruppo "Menu" e tutto il testo esempio in un "Esempio di testo" gruppo.
3 Aprire la finestra Composizioni livelli cliccando su "Finestra" e "Livello Comps" nel menu di Photoshop. Creare un comp livello nascondendo tutti i gruppi di livelli o strati fino uno specifico elemento è visibile, come il logo completo senza precedenti proiezione.
4 Fare clic sull'icona strato piccolo in basso a destra della finestra di composizione livelli per aggiungere un nuovo livello comp. Dategli un nome descrittivo e fare clic su "OK". Ripetere questo processo per preparare ogni elemento grafico del vostro disegno.
5 Convertire i livelli di testo contenenti caratteri speciali facendo clic destro il layer e scegliendo "Converti in forma." I suoi elementi di testo e basati su testo verranno visualizzati come previsto se lo sviluppatore non ha il tipo di carattere è stato utilizzato. Questo metodo consente di evitare possibilmente violare le licenze di distribuzione per la necessità di confezionare i font con il PSD.
6 Fai clic su "Visualizza" e "governanti" nel menu di Photoshop per abilitare Righelli. Impostare guide di sinistra-clic sul righello superiore o sinistro e trascinando la linea guida nella posizione desiderata. Utilizzare guide per indicare i confini, padding e margini. Guide aiutare il vostro sviluppatore di determinare un valore preciso per questi attributi quando si costruisce foglio di stile del layout di e aiutare lo sviluppatore a decidere se devono unire un'immagine o riprodurlo usando i CSS.
7 Creare un gruppo speciale strato contenente campioni di colore che corrispondono agli attributi CSS specifici, come i colori dei link o sfondi elementi. Per creare ogni strato campione, cliccare su "Layer", "Nuovo livello di riempimento" e "solido di colore." Indicare il selettore CSS nel nome del livello, come ad esempio "un:. Collegamento" Se non si ha molta esperienza con i CSS, essere il più descrittivo possibile quando si indica quanto ogni colore si riferisce a.
8 Clicca su "Modifica", "Preferenze" e "Compatibilità dei file". Selezionare "Sempre" dal menu a discesa "Massimizzare PSD e PSB File Compatibilità". L'attivazione di questa impostazione assicura i livelli PSD e gli effetti vengono visualizzati e si comportano correttamente se aperto in una versione precedente di Photoshop.