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!!
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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
 

Marco Carlozzo

Nuovo Utente
13 Giu 2014
27
0
0
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.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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:
 

gssmart

Nuovo Utente
28 Ott 2020
3
0
1
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
Autore Titolo Forum Risposte Data
G Come scrivere due parole ai lati opposti in css? HTML e CSS 5
D Miglior modo per estrarre le occorrenze di un elemento in un set di più file xml e quindi scrivere il risultato in una tabella Excel o magari in JSON XML 0
F Scrivere dei dati in word con php PHP 0
E Scrivere una data corrente in un pdf PHP 1
J Scrivere in due JPanel Java 1
R [C#] Scrivere un post in grassetto con Selenium su FB Mobile .NET Framework 0
N Scrivere su file PDF PHP 4
P textbox- scrivere tutto su una sola riga anche se si va a capo .NET Framework 2
alexice51 proggrammi per scrivere in javascript? Javascript 3
Cosina [PHP] Scrivere dati in un div specifico PHP 3
Drago73 [Java] leggere/scrivere txt server Java 0
C [PHP] Scrivere testo su immagine PHP 3
C [PHP] scrivere o aggiornare record in tabella PHP 7
spider81man Scrivere su file .txt da form php PHP 2
napuleone scrivere in un file <?php $variabile PHP 1
B Scrivere in una casella di testo una variabile PHP PHP 9
B [PHP] Scrivere risposta multipla in database PHP 1
B PHP e JQUERY per scrivere codice html dinamicamente PHP 2
crealatualista Scrivere in un file php aperto dal codice php! PHP 7
P [HTML] scrivere il titolo di una pagina nella pagina stessa, si può? HTML e CSS 3
Y scrivere file in ascii PHP 1
S Come inserire file in database Mysql senza scrivere codice PHP? PHP 0
A Scrivere da pagina .php su altra pagina .html PHP 4
V Array da scrivere PHP 2
L Scrivere valori nel campo INPUT TEXT a seconda della SELECT Javascript 0
E scrivere nome immagine su db PHP 2
I scrivere solo il percorso (e nome file) di un file allegato (type="file") PHP 1
E Cercare un valore e scrivere tutta la riga txt che lo contiene PHP 15
filippino Link per scrivere un'email HTML e CSS 1
S Far scrivere un testo ad un utente registrato..... PHP 3
L Come far commentare/scrivere agli altri utenti?? Windows e Software 10
A Java: Scrivere su un file senza sovrascriverlo Java 1
S richiesta permessi per scrivere nelle sezioni Supporto Mr.Webmaster 0
S scrivere e-mail in html Posta Elettronica 6
criric Effetto macchina da scrivere Snippet Javascript 0
P Scrivere delle matrici su file csv PHP 2
4 in asp si puo scrivere così? Classic ASP 1
M Scrivere contenuto variabile su txt PHP 3
M Script per scrivere la data su vari file immagine PHP 12
N Scrivere in campo nascosto Javascript 1
IImanuII Scrivere su un file php PHP 7
maxbossi [LEGGERE] Perchè NON ho il permesso di scrivere in questa sezione? Presenta il tuo Sito 0
B Scrivere articolo con joomla Joomla 2
N Scrivere in un DIV in base alle scelte fatte in due select Javascript 5
D Scrivere un'espressione condizionale in Access Visual Basic 0
M MyReviews.it se ami scrivere Presenta il tuo Sito 8
V Effetto macchina da scrivere Javascript 3
F scrivere con le variabili php su dreamweaver PHP 3
T Scrivere il contenuto di un database in un file di testo PHP 2
B Scrivere l'html Javascript 1

Discussioni simili