Come scrivere CSS da un template in Photoshop(.PSD)?

Stato
Chiusa ad ulteriori risposte.

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
Salve a tutti, sto realizzando un progetto che mi è stato assegnato ma ho dei problemi su come interpretare il css rispetto al file in Photoshop. Cerco di spiegarmi meglio, mi hanno mandato un file PSD contenete l'aspetto che dovrà avere la pagina web da realizzare divisa in griglia con i livelli, specificandomi che la stessa pagina doveva essere visualizzata con due risoluzioni diverse (v1200 e v750).Presumo per le due risoluzioni dovrò fare regole per ogni elemento diverse, per intenderci due media-query con proprietà css differenti, ma il mio problema è: come faccio a ricavare il css? prendo il righello di Photoshop e misuro ogni elemento(risoluzione immagine, distanza tra voci menù ecc...? sapreste darmi dei consigli su come fare?, perché ho visto delle guide su internet ma non erano chiare, per favore aiutatemi non so come fare!!
 
Quello che ti hanno mandato è appunto l'aspetto che deve avere il layout. Tu non devi far altro che guardare come è composto il layout e richearlo con div e css in una pagina web dando le misure e proporzioni in base alla risoluzione che vuoi, non hai bisogno delle media-query ti basta fare due fogli di style e richiamarli a seconda del device usato che tu puoi rilevare con user-agent di JavaScript.

Se poi tu non conosci i linguaggi HTML e CSS allora puoi portare l'immagine alle dimensioni ad esempio di 750px complessive con PS e salvarlo da PS per il web, in questo modo PS ti crea il markup e il foglio di stile, sarà un codice sporco ma se non ne puoi fare a meno funziona anche quello
 
Quello che ti hanno mandato è appunto l'aspetto che deve avere il layout. Tu non devi far altro che guardare come è composto il layout e richearlo con div e css in una pagina web dando le misure e proporzioni in base alla risoluzione che vuoi, non hai bisogno delle media-query ti basta fare due fogli di style e richiamarli a seconda del device usato che tu puoi rilevare con user-agent di JavaScript.

Se poi tu non conosci i linguaggi HTML e CSS allora puoi portare l'immagine alle dimensioni ad esempio di 750px complessive con PS e salvarlo da PS per il web, in questo modo PS ti crea il markup e il foglio di stile, sarà un codice sporco ma se non ne puoi fare a meno funziona anche quello
Grazie mille della risposta Max 1, spero sia questo lo scopo, di rispecchiare il Layout senza le misure precise perché quello che sto realizzando è una pagina web che è destinata ad una web agency che potrebbe assumermi facendo fare prima questo test....comunque per il resto so trattare html e css ma non conosco Photoshop, mi sono appena diplomato come perito informatico.
 
Penso che l'immagine sia un prototipo di quello che devi realizzare, ma la costruzione non dipende da quell'immagine che deve essere solo uno specchio.

Comunque se hai bisogno siamo sempre qui
:byebye:
 
Ciao a tutti. Io ho un problema simile.
Sto collaborando con un grafico che ha creato un layout in psd che io dovrei trasformare in sito web.
Il problema è che le sue misure non vanno bene quando le porto su web e faccio un esempio.
Nel psd il testo è 27pt ma su web è troppo grande...
Tra header e corpo ha messo circa 200px ma ha ricavato questa misura dai cm, cioè ha il psd disegnato in cm ed io gli ho detto di passarmi le misure in pixel ma probabilmente sono sballate.
Come posso risolvere questo problema ed ottenere le misure corrette per un risultato verosimile al psd?
Tenete presente che conosco html css php etc etc... e che sono non vedente quindi ho bisogno ovviamente delle misure corrette.
Spero possiate aiutarmi
 
Stato
Chiusa ad ulteriori risposte.

Discussioni simili