Créer un template avec Photoshop ? Comment ?
léon
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
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 :)
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 :)
A voir également:
- Créer template photoshop
- Créer un compte google - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
- Créer un compte instagram sur google - Guide
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.
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.
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.
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.