[TUTO] CRÉER UN TEMPLATE WEB DESIGN AVEC PHOTOSHOP 1/2

Tutoriel Photoshop en français pour apprendre à créer un template Web Design d’une page d’accueil (home page).
► ABONNE TOI ! : http://bit.ly/2bhFris ◀
► Télécharger les sources : http://bit.ly/1mQmPlY
► Facebook : http://www.facebook.com/Collectif.Team8
► Twitter : http://twitter.com/collectif_team8

Dans cette première partie nous apprendrons à utiliser au mieux Photoshop pour créer le design de notre page d’accueil.

Au programme de ce tuto, nous allons apprendre à :

► Concevoir un gabarit de page
► Utiliser les repères de Photoshop
► Créer un Web Design
► Utiliser et ranger les calques dans des dossier
► Utiliser l’outil texte
► Créer un ghost button
► Préparer le gabarit de page pour l’intégration HTML / CSS

Ce tuto peut être suivi à partir de la version CS6 de Photoshop. Si vous avez aimé ce tuto, nous serions ravis de vous lire dans l’onglet commentaires. Bon tuto 🙂

✿ Tags : tuto, Photoshop, web design, tutoriel

31 replies
  1. AUTODIDACTE PRODUCTION
    AUTODIDACTE PRODUCTION says:

    Bjr la TEAM 8svp serait-il possible d’avoir sur youtube une formation complète en web design pour tous ceux qui sont abonnés à la chaîne svp, merci. A savoir qu’est-ce que le web design? Comment devenir un excellent web designer? et Quelles sont les avantages du web design? Bon bah unexposé complet sur le sujet en fait. Merci. Lord Mades

    Reply
  2. PinAppleStudio
    PinAppleStudio says:

    Bonjour merci pour tous ces tuto je rêve de devenir WebDesigner j’espère que tu pourras m’aider grâce a ton travail C:

    Reply
  3. Jordan Viricel
    Jordan Viricel says:

    Très bon tuto ! 🙂 mais j’ai une premiére question, le travail aura t’il une moins bonne qualité ou sera t’il moins bien construit si on utilise illustrator  ?                                                      
    Ou cela est il plus judicieux de faire une maquette entiérement sur photoshop ?

    Je pose cette question et peut être que ton avis aura plus d’impact car je travail sur illustrator cc pour les blocs et la typo ou effets dégradés, vectorisation d’une image ou un dessin quelconque c’est fous ce qu’on peut faire avec la décomposition et tout ce que le logiciel peut eventuellement proposer d’ailleurs.
     Enfin je combine cela à photoshop et bien d’autre logiciels qui apportent un peu plus de contenu ou pour avoir des idées sur la disposition  (infographics, ColorStrokes, Logoist 2, Hype5)  ou les divers effets au niveau des images ou du contenu, photos pour faire mes maquettes et je m’y retrouve, j’ai aussi l’impression que cela va plus vite et peut avoir de meilleurs rendus sur certain projets. Quand pense tu ?                (je ne suis qu’un humble étudiant avide de curiosité ^^)

    Reply
  4. kentaro HOSOMI
    kentaro HOSOMI says:

    Très bonne vidéo, continue comme ça ! Et j’avais une petite question pour les images de fond, où peut on trouver des images libre de droit ? Merci de pourvoir répondre ! 🙂

    Reply
  5. RISEPIXEL
    RISEPIXEL says:

    "Là je suis à 3px en trop par rapport au milieu absolu" : Faux :p t’es à 3px de plus par rapport à la précédante position de l’objet déplacé 😉

    Reply
  6. clairres chance
    clairres chance says:

    Bonjour, Je ne trouve pas la suite du tuto concernant l’installation de la maquette sur WordPress, vous pouvez me mettre le lien du tuto s’il vous plaît?

    Reply
  7. MOUHAMETH BEYE
    MOUHAMETH BEYE says:

    Merci pour le tuto, mais seulement il y’a une partie qui m’échappe, vous nous demander de télécharger les fichiers mais vous ne l’avez pas nommé

    Reply
  8. Papis Diop
    Papis Diop says:

    merci team je m"initie au web design et je sais tes tutos me seront d’une grande utilité pour apprendre. Merci pour tout

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *