Questo guide indica i différentes consignes a suivre per préparer sotto Photoshop dei visuels di ogni pagina di un site, in vista del communiquer a suo développeur per che structure il codice source HTMl, Css dei différentes zones.
Questi explications partent del principe che voi connaissez i bases d'utilisations di Photoshop.
Je m'excuse anche da avance dei différentes fautes d'orthographe potentiellement présentes in questo articolo.

Questo che bisogna préparer prima di développer una charte grafico

Bene sicuro, prima ogni projet, l'idéal étant d'avoir in suo computer un dossier che rassemblera i différents éléments, per gagner molti tempo poi per retrouver, organiser, usare i différents objets.
Lui è préférable prima di commencer, d'avoir nel dossier di vostro projet :

• Il logo del site
• Il codice colore principal
• Différents textes di contenuto (al pire, egli è sempre possibile di remplacer da n'importe quel testo, tuttavia, questo pourra inclure alcuni surprises lors del remplacement, tel che débordement, taille di zona différente, etc.)
• Différentes immagini di contenuto

I bases

Ogni pagina può essere vista sotto tre formats majeurs, è perché, per ogni pagina di un site internet, bisogna communiquer tre fichiers PSD différents :

• Una per la versione Desktop (visite del site da un utente su un computer portable o fixe)
• Una per la versione Tablet (di meno in meno populaire, ma ci sono ancora dei utenti.)
• Una per la versione mobile (sempre più di visites sono effectuées da un smartphone.)

I formats

I différentes tailles a usare sono i suivantes :

Desktop

Largeur di 1 000px, parfois 1 200px ma per s'assurer di un buono rendu globalement i 1 000px sono préférables. Sachant naturalmente, che contenuto deve potere se centrer su dei schermi più larges che 1 000 pixels e che sarà anche possibile di scegliere d'ajuster automatiquement il testo su tutta la largeur di un schermo. 
Di più, vostro fichier Photoshop devra avere una largeur supérieure, ma egli voi faudra usare i regole per centrer un contenuto su 1 000px
Da esempio :
In Photoshop -> Fichier -> Nuovo -> Largeur = 1 600px / Altezza = 3 500px (ajustable da la suite) -> e sempre in RVB 8bits

Una fois nel fichier, refaite un altro fichier a côté, ma questa fois -> Largeur = 1 000px / Altezza = 700px

Infine, in questo fichier di 1000px dellarge, remplissez-il della colore di vostro choix, poi ctrl + HA (per tutto sélectionner) poi ctrl + C (per copier), retourner nel fichier di 1 600px dellarge, e faites ctrl + V (per coller), così voi aurez vostro zona di 1 000px dellarge centrée al milieu di vostro zona, egli sarà facile di positionner vostro règle per sempre savoir o se trouve il centre della zona

Tablet

Largeur di 760px e altezza a vostro guise, in questa zona di 760px egli faudra centrer 740 px per laisser una marge di 10px di ogni côté

Mobile

Largeur di 300px con una zona centrée di 290px laissant 5px di marge su i côtés. On pourrait facilement essere tenté d'aller al-delà di 300px, perché suo nuovo smartphone gère quasi 500px senza soucis, ma non, mauvaise idea, perché il type che ha sempre un smartphone standard avrà suo contenuto complètement a l'ouest.

Per ajuster la altezza di suo fichier in corsi di strada in Photoshop, egli voi faudra aller in Immagine -> Taille della zona dellavoro (alt + ctrl + c) -> scegliere la valeur della altezza di vostro choix (poco importe, in centimètres o in pixels), e surtout ne non oublier nella zona Position, di cliquer sulla flèche in haut, per indiquer che il départ è in haut di vostro immagine, per che ajoute il surplus di altezza verso il bas.

Structure principale

Durant il sviluppo di vostro tema, voi pourrez découper vostro pagina in tre zones majeures :

• Il header : L'en-testa del site è idéalement composé del logo, poi del menu, e éventuellement logo di réseaux social e altri fioritures annexes di piccola taille.
• Il contenuto : Il contenuto central sarà questo che change tra i pagine, e egli faudrait idéalement che suive i consignes del concept linea da linea, expliqué più lontano in questo guide.
• Il footer : Il pied di pagina è généralement structuré in colonnes, da esempio, 3 colonnes su formato PC, di 1 a 3 colonnes in Tablet, e una seule colonne su mobile. Il footer respectera il stesso genre di consignes che il concept di linea da linea

A propos dei menus

Lui existe diversi sortes di menu :

• Basique : Constitué di parole simples alignés verticalement, egli faudra toutefois prévoir in vostro visivo, tre versions per ogni élément del menu, una versione standard, una altro survolée da il curseur della souris, poi una altro versione per il menu Actif che indica che la pagina in corsi correspond a questo élément del menu
• Avancé : Il menu avancé possède la stesso base che il menu basique, ma egli permette al survol di déployer una zona in sotto, che liste altro chose. In il CMS di Sitecrea, questo sotto-menu può essere structuré in colonnes, ogni colonne può contenir dei menus diffusés verticalement, o immagine.
• Mobile : Il menu mobile sarà in tutto premier tempo, un semplice logo di tre linee superposées verticalement. Lors del clic su questo logo, una zona déployée listera un menu verticalement in un cadre o bulle. È importante di prévoir in vostro visivo in versione mobile, una versione con la mise in forme di questo menu mobile déployé.

Il concept linea da linea

L'outil di gestion dei pagine disponible nel CMS Sitecrea, permette di définir per ogni linea, di 1 a 3 colonnes allargeur variable.

Da esempio, si ma linea dispose di tre colonnes, je peux scegliere che la première fera 25% dellargeur, la secondo 35%, e quindi ma troisième colonne devra forcément fare 40% della largeur totale della linea.
Bene sicuro, si può anche scegliere di n'avoir qu'une seule colonne, lei fera automatiquement 100% della largeur.

Per ogni linea, si può anche scegliere di centrer suo contenuto, o d'exploiter tutta la largeur.

Poi, in ogni colonne, noi pouvons scegliere d'y diffuser un type d'élément uniquement.

I types d'élément possibile possono essere i suivants :

• Una zona di testo brute, o contenuto HTML (a evitare autant che possibile per se faciliter la vita)
• Un titolo (che sarà diffusé in formato h1)
• Una immagine
• Un articolo di rédaction (a usare autant che possibile per facilement aller modifier l'article senza toucher alla structure della pagina)
• Una catégorie d'article di rédaction (questo che listera tutti i articles a l'intérieur di questa catégorie)
• Module (secondo i composants installés nel CMS sitecrea, diversi possibilités voi saranno proposés, ogni module diffusera dei sistemi divers, tel qu'un formulaire, newsletter, etc..)
• Mise in forme automatique (incluant alcuni propositions di mise in forme basique per rapidement ajouter un testo)

Infine, ogni élément in una colonne può essere défini per apparaître o non su tel formato di diffusion.
Da esempio, si in ma linea di tre colonnes, je choisis di ne non diffuser i due premières colonnes, seule la troisième colonne sarà visible su i smartphones. Inversement, je peux scegliere di ne diffuser i éléments di una linea che tablet o PC.

Così per una structuration facile a usare, egli è possibile di diffuser 3 fois il stesso contenuto a dei endroits différents, ma ciascuno visible che su Tablet, Pc, o mobile.

La simplification

I complications arrivent lorsqu'on souhaite, da esempio, che nel 4eme bloque di linea di mon contenuto, il titolo ne sia più bleu, ma orange, o che tel testo ne fasse più 12px di taille, ma 14px.
Questo genre di bisogno déclenche un caso particolare.
Per l'instant, il sistema ne propose non ancora di préciser dei paramètres spécifiques per ogni élément, ma questo pourra essere una amélioration future.
In attendant, s'bisogna créer un caso particolare, egli faudra che il développeur définisse nel codice source del fichier CSS, telle zona di telle pagina per tel type d'élément devra annuler tel paramètre per ajouter tel altro.

Quindi si l'on souhaite fare semplice, ogni titolo, e contenuto devra respecter la stesso mise in forme, da formato di diffusion.
Bene sicuro, un titolo diffusé su mobile n'aura non forcément la stesso taille qu'un titolo su Tablet o PC, ma tutti i titres su mobile respecteront la stesso mise in forme di base, sauf si l'on réalise un caso particolare.

Conclusion

Per résumer, si voi faites il visivo della pagina d'accueil di un site, egli voi faudra fare 3 visuels sotto Photoshop (Pc, Tablet, Mobile). In ogni visivo, egli faudra tre zones principales, Header, Footer, Contenuto.
Per tutte vostri altri pagine, egli voi suffira di modifier uniquement la zona di contenuto, e dupliquer vostro fichier sotto un altro nom. Quindi la première pagina sarà molto più longue che i altri a réaliser.

Lors di vostro création, egli faudra usare i dossiers internes a Photoshop per regrouper vostri différents calques, così che nommer vostri calques per voi y retrouver voi-stesso, ma anche celui che devra parcourir i éléments per identifier i tailles di polizias utilisées, etc..
Da esempio, vostro Header devra avere tutti questi calques regroupés in un dossier, idem per vostro footer

Si vostro tema contient una polizia altro che Arial, Time new roman, questo che è molto probable, egli voi faudra anche communiquer con i fichiers PSD, i fichiers d'installation della polizia in TTF o OTF (questo che correspond al formato Web universel). Sinon, un altro Pc che ouvre vostri PSD senza avere i polizias installées, observera un contenuto complètement différent. Di più, i fichiers di polizia devront essere intégrés nel tema développé sul site internet.

Voici i premières consignes a respecter per développer un tema per il CMS sitecrea, ma la plupart concernent n'importe quel tema ailleurs.

Facebook

Twitter

Tumblr

Reddit

Pinterest

Linkedin

Cordier Steeve Contacter l'auteur