Tutoriel comment faire un Design Responsive en Parallaxe Scrolling

Bienvenue dans ce nouveau tutoriel, dans ce dernier nous allons apprendre comment réaliser un site web de A à Z, nous allons le faire en utilisant photoshop et dans un autre tutoriel nous allons apprendre comment transformer le PSD en HTML5 et Css3 .

Dans notre tuto le thème sera d’une agence web

et voilà un petit aperçu du résultat final

Avant de commencer vous devez télécharger le pack de ressource suivant qui incluent les icones web, images, et textures.

Puis ouvrez un nouveau document de 1800×4850 pixels , résolution 72Dpi , couleurs RVB8bits .

Pour avoir plus de précision lors de la transformation de PSD en HTML il faut impérativement utiliser les repères pour vous faciliter le travail en CSS .

Ajoutez des repères horizontaux en allant dans Menu > Affichage > Nouveau repère > Horizontal 59px, 651px, 1431px, 2237px, 2613px, 3154px, 3939px, 4767px.

Nous allons commencer par le menu en haut dans le header.

Prenez l’outil texte (T) et tapez votre menu en utilisant la police « Open sans » et une taille de 13pt

Ensuite importez votre logo, dans notre tutoriel c’est un simple texte coloré avec du bleu # 00b3e3 .

Maintenant, importez une image de grand format entre le premier et deuxième repère.

Après, ajoutez un rectangle noir en utilisant l’outil rectangle (U).

Puis réduisez son opacité à 71%.

Ensuite, dessinez un autre rectangle avec un fond transparent en utilisant la couleur des contours # 617b9b , sous photoshop cs6 et cc vous pouvez le faire directement comme ceci.

Par contre, dans les anciennes versions de photoshop, vous pouvez le faire en dessinant un rectangle, puis réduisez le fond à 0% ensuite ajoutez un contour dans les options de fusion.

Ensuite, créez un nouveau calque ( Ctrl+Shift+N ), prenez l’outil crayon (P) avec une taille de 1px la même couleur que tout à l’heure et ajoutez des coins comme ceci

( Pour avoir des traits droits sous Photoshop ; Faites un point avec votre outil là où vous voulez commencer le segment.
Maintenez la touche majuscule enfoncée tout en faisant un point là où vous voulez terminer le segment. Un trait apparaîtra alors entre ces deux points. )

Ensuite, dessinez un rectangle blanc comme ceci.

Puis, appliquez dessus un filtre flou directionnel en allant dans Menu > Filtre > Flou > Flou directionnel.

Après, faites la même chose pour dessiner un autre rectangle avec les mêmes effets, puis dessinez des cercle au centre en utilisant l’outil Ellipse (U) pour obtenir ceci.

Maintenant, ajoutez votre texte (les textes utilisés dans le tuto est un simple exemple, il sera remplacé par votre contenu en HTML).

Pour la troisième partie, importez les icones suivantes dans votre document de travail.

De la même façon que tout à l’heure ajoutez votre texte en utilisant la même police d’écriture « Open Sans » car dans un site web il ne faut pas utiliser beaucoup de police pour éviter les ralentissements du serveur.

Maintenant, passons à la quatrième partie, prenez l’outil rectangle (U) et dessinez un grand rectangle bleu # 32bcef suivant vos repères.

Puis, rendez-vous dans les options de fusion

Puis dessinez un rectangle arrondi en utilisant l’outil rectangle arrondi (U) avec un rayon de 5px et la couleur Bleue foncée #0c1a2d .

Ensuite, ajoutez un logo ou ce que vous voulez, dans le tuto nous avons ajouté le logo du site suivi du logo responsive.

Puis ajoutez d’autres textes gris clairs et foncé pour les titres, comme le montre l’image ci-dessous.

Maintenant, nous allons créer un petit Portfolio inclut dans notre page avec des effets de rollover avec photoshop nous allons seulement l’illustrer le rollover sera réaliser avec du Css3.

Importez vos images et ajustez-les comme ceci.

Mettez-vous sur une de vos images, et dessinez un rectangle bleu #32bcef.

 

Puis dessinez un autre rectangle blanc de la même taille de votre image, déplacez-le derrière le calque du rectangle bleu et réduisez son opacité à 65% .

Et pour finir cette partie, ajoutez votre texte.

Passons à la partie suivante, de la même façon que tout à l’heure, dessinez un rectangle blanc avec des contours gris #cacaca.

Toujours, avec l’outil rectangle (U) dessinez un autre rectangle bleu #36caf4 et mettez-le en bas.

Puis, rendez-vous dans les options de fusion .

Ensuite, mettez-le en écrêtage en allant dans Menu > Calque > Créer un masque d’écrêtage

Puis importez des icônes media sociaux et ajustez-les comme ceci.

Après, ajoutez du texte, dans notre exemple c’est une case pour le staff

Ensuite, faites la même chose en créant d’autre rectangle et du texte comme le montre l’image ci-dessous.

Maintenant, importez une image et mettez-la en bas de page appelé aussi footer et appliquez dessus les mêmes étapes que vous avez fait pour le header pour obtenir une image avec un faible éclairage.

Après, ajoutez un peu de texte et importez des icônes media sociaux.

 

Pour le formulaire de contact, dessinez quatre rectangles avec un fond transparent et un contour blanc de 1-2 pixels.

Puis dessinez un rectangle arrondi en utilisant l’outil rectangle arrondi (U) avec un rayon de 5px et la couleur Bleue #3ec1f1 .

Ensuite, ajoutez votre texte comme ceci.

Pour finir, dessinez un rectangle gris #1e1e1e et ajoutez votre copyright.

Ce qui vous donne le résultat suivant.