Créer un template avec Photoshop ? Comment ?
Fermé
léon
-
11 déc. 2009 à 17:08
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 11 déc. 2009 à 19:18
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 - 11 déc. 2009 à 19:18
A voir également:
- Créer template photoshop
- Créer un compte gmail - Guide
- Créer un compte google - Guide
- Créer un groupe whatsapp - Guide
- Créer un compte instagram - Guide
- Photoshop pour pc - Télécharger - Montage photo
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.
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 497
11 déc. 2009 à 19:18
11 déc. 2009 à 19:18
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.
