Créer un template avec Photoshop ? Comment ?

[Fermé]
Signaler
-
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
-
Bonjour,

Je voudrais apprendre à faire des sites mais d'une certaine façon.
J'ai des connaissances aisées en HTML, CSS et légère en PHP.

Je souhaiterais pouvoir faire des sites en utilisant Photoshop. Je m'explique, j'aimerais pouvoir "dessiner" entièrement mon site avec Photoshop (ou Illustrator, vous me direz lequel est le plus adéquat pour ce genre d'utilisation) puis ensuite faire des découpage de bout d'image et les placer correctement en CSS (ou en <table> ?) pour re-structuré le site.

En fait si j'ai bien compris ça s'appel des "templates"... c'est ça ?

Ma question est la suivante, comment dois je m'y prendre ? je ne trouve pas de tutoriel spécifique sur comment faire cela. Il faut utiliser l'outil "tranche" de Photoshop, oui, mais après ?

Si vous avez des mots clés à me donner pour aiguiller mes recherches, ou carrément des tutoriel en ligne je suis preneur !

Merci :)

2 réponses

Dejà je pense que Photoshop est plus indiqué pour du design web, illustrator étant plus fait pour du design en vue d'impression par exemple.

Ensuite vouloir decouper un design en tranches à mettre dans des cellules de tableau c'est un truc qui ne se fait plus trop, il vaut mieux utiliser du css et réduire au possible tes éléments graphiques en utilisant des fonds de couleur, des images qui se répétent... plutot que de faire une interface entierement avec des images.

Après y'a pas vraiment de recette miracle. Tu fais le design de ta page sous photoshop puis faut que tu te creuses la tete pour optimiser ton code html/css pour avoir le meme rendu en placant tes elements graphiques au bon endroit. Soit en récupérant les éléménts graphiques directement depuis le le psd de ton design general de site, soit en designant les éléments indépendements, ce qui peut être plus pratique notamment pour des éléments biens identifiés comme des boutons par exemple.
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 318
Photoshop ou Illustrator, peut importe tant que tu arrives à faire le résultat final que tu veux et que tu peux découper en PNG ou JPG.

Pour créer un design, il suffit simplement de le créer sur ton logiciel, et tu peux mettre du texte d'exemple si tu le souhaite (à retirer quand tu seras satisfait de ton design).

Une fois fait, on attaque le découpage. Le but est de récupérer tout les bouts d'image nécessaires pour créer le template en XHTML/CSS.

Imaginons que tu aies un dégradé vertical (de haut en bas) : tu crées une sélection faisant 1px de largeur et sur la hauteur de ton dégradé, tu copies (Ctrl+C), tu crées un nouveau document (Ctrl+N), tu colles (Ctrl+V) et tu sauvegarde (Ctrl+S) en PNG (de préférence). Ensuite, en CSS, tu appliques cette image de fond sur un div et tu la fait répéter horizontalement afin qu'elle ne fasse pas que 1px de large.

Si tu as quelque-chose avec comme fond une couleur unie, alors utilise plutôt le CSS pour mettre la couleur de fond, pas une image.