photoshop to html

Comment créer une page HTML en utilisant Photoshop [Header + Body + Footer] !

Publié par | Catégories : Création de sites - Design graphique

Dernière mise à jour : 30 septembre 2016

Je vais vous présenter aujourd'hui, un tutoriel de qualité, réalisé dans toute une journée !

Comme vous le savez, plusieurs web-designers trouvent de la difficulté dans la création de leurs pages HTML, pour cela j'ai essayé de faire un tutoriel pour vous montrer comment faire pour faire une page html en utilisant le logiciel Adobe Photoshop.

Composé de "4" parties, ce tutoriel va vous faire apprendre comment créer un Header, Body et un Footer en utilisant l'Adobe Photoshop CS4 et finalement comment convertir le fichier PSD que nous allons créer en un fichier HTML (Page web).

pagehtmlphotoshop

Tutoriel :

Lisez les Tutoriels par classement, du premier au dernier, juste pour mieux comprendre.

1 - Le Header

Vidéo :

2 - Le Corps du site (Body)

Vidéo :

3 - Le Footer

Vidéo :

4 - Convertir le PSD à l'HTML

Vidéo :

Espérons que ça va vous aider pour créer votre page HTML !

Si vous avez des questions, n'hésitez pas de les poser juste en bas !

Soufiane - EasyTutoriel.com

Soufiane - Easytutoriel.com

Ceux qui ont aimé cet article ont également apprécié ceux-là :

Mots clés :
Dernière mise à jour avant 5 ans
61 commentaires
L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 61 commentaires ! { Ajouter le vôtre ? }

  • Marlie63 dit :
    18 janvier 2012 à 3 h 41 min

    BONSOIR! je suis Marlie

    mon usb apparait au bas de l’ecran mais il n’apparait pas au poste de travail,
    ET quand j’ai fais clic droit sur le usb au bas le l’ecran il apparait seulement “”dispositifs ouvert et imprimantes “”
    et donne aucun autre information seulement ca.
    svp que doit je faire pour le reparer.
    Merci

    Répondre
  • HB dit :
    17 janvier 2012 à 21 h 43 min

    Merci, je me suis servi de ce tuto pour créer un newsletter, à noter que l'on peut mettre les liens directement sous photoshop et sauvegarder en html.

    Super tuto, merci.

    Répondre
    • Soufiane Sabiri dit :
      18 janvier 2012 à 1 h 16 min

      Bonsoir,

      C'est vraiment génial de dire merci, vous m'avez fait signe pour faire des tutoriels sur le Photoshop, je ne sais pas pourquoi j'ai oublié cette catégorie, mais bon :D Je me souviens que mon casque s'est écrasé, donc comme je suis paresseux, ça a bloqué :)

      Bref, je vous remercie pour les compléments, et bon courage pour vos newsletters !
      Bien amicalement,
      Soufiane

      Répondre
  • creeon dit :
    20 novembre 2011 à 21 h 17 min

    Je te félicite pour ton site et pour votre tuto très explicite !

    Répondre
    • Soufiane Sabiri dit :
      21 novembre 2011 à 0 h 12 min

      Bonjour Creeon,

      Merci pour votre précieux commentaire. Cela m'aide à foncer plus dans mes tutoriels.
      Je vais passer à 2 tutos par jour quelques semaines après, cela nécessite les encouragements des gens comme vous ! MERCI !

      Cordialement,
      Soufiane

      Répondre
  • patricia dit :
    21 septembre 2011 à 5 h 44 min

    bonjour soufiane, :whistle:
    merci beaucoup pour ce tuto . en regardant les videos tout à l'air si simple ! je vais essayer de mettre tout cela en pratique et j'espère arriver au même résultat. en même temps j'ai une question, je m'intéresse au do-follow : vous indiquez un lien en do-follow à partir du 5ième commentaire ? s'agit-il du 5ième commentaire en tout ou du 5ième commentaire de l'internaute qui doit écrire 5 commentaires ? :D
    à bientôt
    patricia =]

    Répondre
    • Soufiane Sabiri dit :
      21 septembre 2011 à 18 h 01 min

      Bonjour Patricia,
      Pour le lien en Do-Follow, voici un exemple..
      Si vous avez ajouté 5 commentaires, tous vos liens seront Do-Follow et seront pris en considération par les moteurs de recherche comme Google !
      Merci pour votre question et n'hésitez pas de partager le résultat de votre travail :)
      Amicalement,
      Soufiane

      Répondre
  • AHMEDI dit :
    12 septembre 2011 à 10 h 45 min

    Merci sofiane baraka allaho fike .

    karim merci merci merci

    Répondre
  • sana dit :
    2 août 2011 à 13 h 04 min

    Grand merci pour ce travail :))
    j'aimerais savoir comment rendre cette maquette active , c'est à dire comment rendre les boutons de menu cliquable, ..... je veux savoir aussi, comment créer une bnnière dynamique par photoshop

    Merci bcp
    bonne continuation

    Répondre
    • Soufiane Sabiri dit :
      9 août 2011 à 19 h 20 min

      Bonjour Sana,
      Pour créer des boutons cliquables, vous pouvez utiliser un éditeur HTML comme Notepad++ :)
      Voici quelques techniques pour créer un bouton cliquable en éditant la page HTML créé par le PhotoShop (tableaux)
      - Ouvrez la page en utilisant le navigateur Google Chrome, ensuite, inspectez l'image que vous voulez la rendre bouton, puis, copiez le nom de cette image et cherchez-le dans l'éditeur HTML (Notepad++), ajoutez la balise du lien avant le , et après la balise de l'image, et pour enlever le bordure, mettez l'attribut border="0" dans la balise ;)
      - Et pour les autres méthodes, je vous conseil de visiter cet article : http://www.easytutoriel.com/decouvrez-comment-creer-des-boutons-attractifs-pour-votre-site-web/
      Merci pour votre commentaire, et n'oubliez pas que je vais publier récement un article qui va vous montrer comment créer des images qui bougent !
      Amicalement
      Soufiane

      Répondre
  • Abdou dit :
    9 juin 2011 à 15 h 09 min

    Slt Soufian
    Bravo de tout ce que tu fais, mais ton grand problème -je vais le dire franchement- c'est ton Français!! hélas que tu dois encore fournir un très grand effort pour être dans le rang, je reviens souvent sur ton blog car j'apprécie beaucoup ce que tu fais mais malheureusement j'ai toujours quelques choses à remarquer côté "orthographe ,grammaire, ponctuation ....etc. " Attention Soufian beaucoup de gens n'ont pas réussi dans le NET , à cause de cet obstacle, il faut donner l'impression qu'on est des PROS! pour se faire ça commence par "le langage" facile certes mais correcte, c’est la première leçon qu’un marketer doit apprendre ,tu est sur le net tu t'adresse au francophones qui ne sont pas forcément des marocains que tu vois ici avec ce langage de ''choukrane a khouya soufiane!!! ici on fais des commentaires et non pas "le chat avec des intimes !! et cela compte beaucoup dans le domaine ou tu es , tu dois être méfiant de ceci.
    Bonne continuation

    Répondre
    • Soufiane Sabiri dit :
      9 juin 2011 à 15 h 27 min

      Bonjour Abdou,

      Merci mon frère pour votre aide !
      Je suis entrain de développer, j'ai lu dans ces cinq derniers jours presque 10 livres éléctroniques, je trouve que mon niveau en langue se développe. Je vous jure qu'après la lecture, je relis mes articles, et j'ai constaté que j'avais été un alpha-bête qui écrivait des articles pleins de fautes d'orthographe :s...Bon, je vous jure que je serai plus stricte dans mon écriture, je vous assure que je vais analyser tous les articles (60 articles) que j'ai tapé dès l'ouverture de ce site web ^^.

      Merci encore une fois pour votre aide Abdou, vive le Maroc :)...

      Amicalement,Soufiane

      Répondre
  • saad dit :
    11 avril 2011 à 20 h 22 min

    mais hadchi howa la base
    +
    kayn bzaf dyal les methode bach tkhdem

    Répondre
  • abdou dit :
    11 avril 2011 à 8 h 59 min

    merci bcp

    Répondre
  • youness dit :
    8 avril 2011 à 22 h 25 min

    3jeebni had tuto beezaf wlh , w kemel fhad chi rahe zwéén

    Répondre
  • Nabil dit :
    7 avril 2011 à 20 h 27 min

    Superb blog et info!

    Bonne continuation ^^

    Répondre
  • Soufiane dit :
    7 avril 2011 à 18 h 07 min

    Bonjour,
    Je vous remerci pour le plus long commentaire dans Easytutoriel !!
    Je lol, vraiment ce que tu viens de dire est vrai, mais ce Tutoriel est juste pour les débutants ! Je sais bien que la meilleur méthode pour mettre du style dans son site et d'utiliser le CSS !
    Pour les forums français, vraiment j'ai pas le moindre du temps !
    Merci encore une foix ^^

    Répondre
  • Dark Marouane dit :
    6 avril 2011 à 19 h 49 min

    J'aaaime j'aiime!!!
    Merci Soufiane :D

    Répondre
  • Imad dit :
    6 avril 2011 à 17 h 07 min

    Bonjour,
    Merci pour votre réponse... Oui je sais très bien qu'il faut attendre cela fait 3ans que je suis avec adsense :)
    En tout cas moi je préfére le cheque... western union c'est pour les petits comptes :)
    En tout cas merci, je reviendrai surement sur votre blog pour voir ce qu'il y a de nouveau !

    Répondre
  • Imad dit :
    6 avril 2011 à 16 h 51 min

    Bonjour,
    Très bon tuto qui va sans doute être très utile pour pas mal de personnes... Bonne continuation.

    P.S : Avez-vous recu le cheque adsense de ce mois ? j'ai le paiement emis sur mon compte adsense depuis le 28 mars mais je n'ai toujours pas recu le code DHL pour suivre mon courier

    Répondre
    • Soufiane dit :
      6 avril 2011 à 16 h 57 min

      Bonjour,
      Merci pour votre commentaire, pour l'Adsense il vous faut attendre au moins deux semaines pour le chèque :) , Je vous conseil d'utiliser le paiement par WESTERN UNION c'est plus rapide que le chèque .

      Cordialement

      Répondre
  • Soufiane dit :
    6 avril 2011 à 12 h 21 min

    Bonjour,
    même si vous connaissez la méthode, sachez bien que la plupart des gens ne la connaissaient pas :)

    Répondre
  • Soufiane dit :
    6 avril 2011 à 10 h 36 min

    On est là pour vous aider :)
    Merci pour le commentaire

    Répondre
  • Soufiane dit :
    6 avril 2011 à 10 h 35 min

    Merci pour le commentaire Anas :)

    Répondre
  • issam dit :
    5 avril 2011 à 22 h 28 min

    Nice tuto :)
    Bonne continuation frero ^_^

    Répondre
  • amine dit :
    5 avril 2011 à 22 h 24 min

    thanks for these informations, i enjoyed watching the tutoriel

    Répondre
    • 1 2

    Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)