Tutoriel FT : Webdesign Business
Bonjour à tous, voici un tutoriel vraiment intéressant qui va vous apprendre a réaliser un webdesign de type business de A à Z ! A noter que la plupart des images sont sous formes de miniatures, pensez à cliquer dessus. Et pour info, j’ai réalisé le tutoriel sous Photoshop CS. Retrouvez ce tutoriel sur notre forum ici.
¤ ÉTAPE 1 :
Ouvrez un nouveau document (ici de 766 X 750 pixels). Créez un calque, remplissez-le d’une couleur et ajoutez-lui ce dégradé grâce aux Options de fusion :
Vous avez maintenant le fond :
¤ ÉTAPE 2 :
Créez un autre calque, prenez l’Outil Rectangle de Sélection et faites une sélection vers le centre. Remplissez-la de blanc.
¤ ÉTAPE 3 :
Maintenant, prenez l’Outil Rectangle arrondi avec un rayon de 2px et faites un bouton en haut à gauche. Récupérez la sélection (Tracés / Ctrl + Clique) et remplissez-la d’une couleur sur un nouveau calque :
Ajoutez ensuite ce dégradé :
Vous obtenez :
¤ ÉTAPE 4 :
Toujours avec le même outil et le même rayon, faites une forme comme ceci :
Récupérez la sélection, faites Maj + Ctrl + N, remplissez de blanc et passez le calque à 17% :
¤ ÉTAPE 5 :
Créez un Groupe de calque, mettez-y les deux calques boutons, et créez un menu en dupliquant plusieurs fois ce groupe. Vous pouvez étirer les boutons en fonction du texte qu’ils contiendront.
¤ ÉTAPE 6 :
Pour mettre en valeur le bouton de la page visitée, prenez le 1er calque et changez le dégradé de cette manière :
Puis ajoutez celui-ci au 2eme calque :
Passez ce même calque en mode Densité couleur - et à 50%.
¤ ÉTAPE 7 :
Ajoutez ensuite votre texte dans le menu :
¤ ÉTAPE 8 :
Puis ajoutez ensuite votre logo et le nom du site :
¤ ÉTAPE 9 :
Reprenez l’Outil Rectangle arrondi avec cette fois un rayon de 10px et créez cette forme sous le menu :
Comme à chaque fois, récupérez la sélection, créez un calque, remplissez-le et ajoutez ces Options de fusion :
Et vous obtiendrez ceci :
¤ ÉTAPE 10 :
Créez ensuite un nouveau calque puis une sélection avec l’Outil Ellipse de Sélection. Faites-la éventuellement pivoter (Sélection / Transformer la sélection). Remplissez-la de blanc, et placez-la dans le coin inférieur droit de la zone bleu. Enfin, passez le calque à 11%. Récupérez la sélection du calque de la zone bleu, faites Ctrl + Maj + I et Suppr :
¤ ÉTAPE 11 :
Commencez cette étape par créer un nouveau calque. Puis prenez l’Outil Pinceau d’1px et en blanc. Faites un trait horizontale sur le haut de la zone bleu et sur toute sa largeur. Dupliquez ce calque et déplacez le de 40px vers le bas. Recommencez cette manipulation jusqu’en bas.
Ensuite, fusionnez tous les traits. Dupliquez le calque et faites Edition / Transformation / Rotation 90° horaire. Placez le calque sur la gauche et Dupliquez en le déplaçant vers la droite de 40px jusqu’au bout. Vous devez obtenir un quadrillage. fusionnez tous les calques de traits verticaux. Pour finir, centrez les deux calques dans la zone bleu.
Récupérez une nouvelle fois la sélection du calque de la zone bleu, faites Ctrl + Maj + I et Suppr. Passez le calque en mode Lumière tamisée et à 20%.
¤ ÉTAPE 12 :
Prenez l’Outil Forme personnalisée nommé “Etoile à 5 branches” et créez une forme dans la partie gauche de la zone bleu. Après l’avoir remplie d’une couleur dans un nouveau calque, faites-la légèrement pivoter :
Puis ajoutez-lui ces Options de fusion :
Et voici ce que l’on obtient en ajoutant un slogan :
¤ ÉTAPE 13 :
Ajoutez votre texte dans le bloc blanc. Pensez à reprendre les couleurs du design pour que ca fasse plus sympa.
¤ ÉTAPE 14 :
Prenez de nouveau l’Outil Rectangle de Sélection, créez un nouveau calque et faites un rectangle que vous remplirez d’une couleur comme ceci :
Puis ajoutez-y ceci :
Vous devriez obtenir ceci :
¤ ÉTAPE 15 :
Ensuite, créez deux autres formes avec le même Style de calque, avec ou sans coins arrondis.
¤ ÉTAPE 16 :
Créez un nouveau calque, puis prenez l’Outil Rectangle arrondi avec un rayon de 4px et faites deux barres allongées et assez fines (Voir image plus bas). Ajoutez-leur le même contour gris que plus haut :
Créez ensuite un bouton moins long avec un rayon de 5px cette fois-ci. Ajoutez-lui ce dégradé et toujours le même contour :
Enfin, placez les trois barres de cette manière :
¤ ÉTAPE 17 :
Dupliquez une des barres et le bouton, et placez-les sur le 2ème bloc.
¤ ÉTAPE 18 :
Reprenez la même forme d’étoile à 5 branches que précédemment et créez en une comme celle-la :
Remplissez-la d’une couleur et ajoutez-y les même Options de fusion que pour la première étoile (sauf pour l’ombre), c’est à dire :
Et le résultat :
¤ ÉTAPE 19 :
Créez un nouveau calque, liez-le avec celui de l’étoile (avec le cadenas) et faites Ctrl + E. Puis créez un Masque de fusion et prenez l’Outil Rectangle de Sélection. Sélectionnez ce qui dépasse comme ceci :
Vérifiez que vous travaillez bien dans le masque, et remplissez-le tout de noir.
¤ ÉTAPE 20 :
Personnalisez le webdesign ! Ajoutez du texte dans les bloc, le copyright, etc …
Tuto traduit & adapté, puis proposé sur Forum-Toshop par Ryu.
Source : http://www.adobetutorialz.com
Si vous avez apprécié cet article, s'il vous plait, prenez le temps de laisser un commentaire ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.
Commentaires
salut, tre beau tuto que j’aurais aimer refaire , mais certain point ne sont pas tre claire pour ma part donc mal expliquer .
car j’ai dut chercher des option que ne sont pas expliquer pour un debutant vraiment dommage .
exemple :
¤ ÉTAPE 3 :
Maintenant, prenez l’Outil Rectangle arrondi avec un rayon de 2px
voila un exemple , donc d’autre point idem que le précédent . merci de me répondre a mon mail pour savoir comme je pourrai refaire ce tuto . merciiiiiiiiiiiiii
Salut wareny. Dans ton exemple, il s’agit juste d’un outil et du réglage qui va avec (qui se trouve sous la barre de menu normalement).
Mais pour les problème, c’est le forum que sa se passe. Donc je t’invite a aller t’inscrire et a créer un topic dans “Besoin d’aide”.
/images/tuto.gif)
/images/galerie.gif)
/images/training.gif)
Tres bon tuto, le rendu est super.