Mise en Ligne et code webdesign photoshop

NekoTomo Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -  
 Masa -
Bonjour à tous,

Juste pour information, je suis débutante dans le domaine du webmastering, j'ai tout juste fini d'apprendre le Xhtml, css et php ...
Je souhaite réaliser mon webdesign en photoshop (template, etc ...), sauf que je ne sais vraiment pas comment mettre en ligne ce webdesign. Est ce que je peux tout faire avec photoshop, en un seul fichier visuel, ou bien dois je réaliser plusieurs fichiers (fond, boutons cliquables que je placerai avec le CSS, etc...), je n'ai vraiment aucune idée de la façon dont je peux "installer" mon webdesign photoshop dans ma page de code...
Je vous remercie.
Excellente journée!





A voir également:

4 réponses

Réponse 1 / 4
NekoTomo Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   1
 
Donc si j'ai bien compris, si je decoupe chaque zone cliquable avec l'outil tranche et en enregistrant pour le web, ca va me donner pour chaque zone un fichier different ? ôO
1
BlackOs77
 
Ce que je veux dire, c'est qu'avec cette méthode Photoshop te génère un fichier HTML, avec les images découpées.

Il te faudra juste éditer le fichier HTML généré et créer les liens des zones cliquables, que tu auras préalablement définies avec l'outil "Tranches"
0
NekoTomo Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   1
 
Doux Jesus ... je suis vraiment désolée, je crois que je n'ai absolument pas compris... autant que je te le dise hein!
Bon, par pur test, j'ai crée un tit exemple sur photoshop, essayé de découper avec tranche les zones cliquables, enregistré sur le web, mais n'ai pas trouvé de un "type", et le fichier s'est enregistré en .gif ôO
J'me sens bête ...
0
BlackOs77
 
On va y arriver ... Après avoir créer tes tranches, tu fais :

- Enregistrer pour le Web (Ctrl+Shift+Alt+S)
- Puis "Enregistrer" sur le bouton en haut à droite de ton écran
- Nom du fichier : comme tu veux (facultatif)
- Type HTML et images
- Paramètres : par défaut
- Tranches : Toutes les tranches
- puis Enregistrer.

A ce moment, la page HTML et les images prédécoupées en tranches se génèrent.

- Ouvrir le fichier HTML avec éditeur de texte ou un éditeur HTML (genre Dreamweaver)
- Repères dans le code HTML les images cliquables
- Puis applique-leur le lien correspondant :
- Par exemple : 
<a href="http://www.monsite.com/monlien.html"><img src="images/ton_image.jpg" /></a>


En espérant que cela t'aide... Mais tu n'es pas loin, si tu as déja fait tes tranches.
0
NekoTomo Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   1
 
J'ai testé ! Ca marche :) merci beaucoup !
Juste une question bête, si j'ai bien compris, il y a donc plusieurs fichiers dans un même fichier ?
Mais si on veut modifier, par exemple, un bouton sur une même page d'accueil ... on doit reprendre TOUT le fichier psd ?? et re-générer ?
0
BlackOs77
 
re-Bonjour,

1. Oui, un fichier photoshop (PSD) peut te générer plusieurs fichiers images (gif ou jpg) pour créer une page, ainsi que la page HTML correspondante, comme tu as pu le constater.

2. Dans le cas où tu modifierais une partie de ta page sur Photoshop, il te suffirait de re-générer UNIQUEMENT les tranches modifiées comme ce qui suit :

- Modifies ta créa, sans te soucier des tranches
- Enregistrer pour le Web (Ctrl+Shift+Alt+S)
- Sélectionne le(s) tranche(s) dont le contenu a été modifié
- Puis "Enregistrer" sur le bouton en haut à droite de ton écran
- Nom du fichier : comme tu veux (facultatif)
- Type : images
- Paramètres : par défaut
- Tranches : Tranches sélectionnées
- puis Enregistrer.

De cette manière, seules les partie modifiées de ta page seront ré-exporter, sans toucher au reste de ta page.

NB : Si tu touches aux tranches lors de ta modification, Il vaudra mieux ré-exporter le tout. (HTML et images)
0
Réponse 2 / 4
Valix
 
Perso moi quand je découpe , je prend l'outil de selection , je selectionne ma partit je fait edition => copier avec fusion. Fichier => nouveaux => ok. Edition=> coller

Fichier=> enregistrer pour le web et ...
1
Réponse 3 / 4
BlackOs77
 
Bonjour,

La solution qui me paraît la plus simple, c'est de faire un découpage de ton design sous photoshop avec l'outil "Tranches" en faisant en sorte d'isoler les zones cliquables.

Puis d'"enregistrer pour le Web" en sélectionnant dans "Type" HTML et images.

Tu n'auras plus qu'à aller dans ton code HTML et insérer les liens qu'il te faut.

Bien sûr, il y a toujours mieux comme solutions.

Bon Courage.
0
Réponse 4 / 4
Valix
 
Salut ,

Quand tu réalise ton webdesign sous photoshop , il te faut découpé ces a dire :

- Le fond
- Le menu
- Footer

etc ...

Et après tu relis tous ça avec du css et html
0