Mise en Ligne et code webdesign photoshop

Fermé

NekoTomo Messages postés 10 Date d'inscription jeudi 11 septembre 2008 Statut Membre Dernière intervention 14 octobre 2011 - 12 oct. 2011 à 12:25
Masa - 14 oct. 2011 à 17:26

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:

Mise en Ligne et code webdesign photoshop
Mise en forme conditionnelle excel - Guide
Partager photos en ligne - Guide
Site de vente en ligne particulier - Guide
Le code ascii en informatique - Guide
Aller à la ligne excel - Guide

4 réponses

Réponse 1 / 4

NekoTomo Messages postés 10 Date d'inscription jeudi 11 septembre 2008 Statut Membre Dernière intervention 14 octobre 2011 1
Modifié par NekoTomo le 12/10/2011 à 12:41

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

BlackOs77
Modifié par BlackOs77 le 12/10/2011 à 13:51

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"

NekoTomo Messages postés 10 Date d'inscription jeudi 11 septembre 2008 Statut Membre Dernière intervention 14 octobre 2011 1
13 oct. 2011 à 00:28

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 ...

BlackOs77
13 oct. 2011 à 11:13

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.

NekoTomo Messages postés 10 Date d'inscription jeudi 11 septembre 2008 Statut Membre Dernière intervention 14 octobre 2011 1
13 oct. 2011 à 23:15

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 ?

BlackOs77
14 oct. 2011 à 10:15

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)

Réponse 2 / 4

Valix
12 oct. 2011 à 12:43

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 ...

Réponse 3 / 4

BlackOs77
12 oct. 2011 à 12:33

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.

Réponse 4 / 4

Valix
12 oct. 2011 à 12:34

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

Discussions similaires

Que veut dire "correspondant occupé" lors d'un appel ?

On me voit connecté sur facebook alors que je n'y suis pas