Aujourd'hui, nous allons créer un superbe modèle de site Web dans Photoshop en utilisant un certain nombre de techniques avancées.
Je vous guiderai tout au long du processus en dix étapes simples et vous fournirai un lien pour télécharger le modèle fini. Commençons!
Aperçu et téléchargement
Avant de commencer, voici un aperçu de ce que nous allons construire. Vous pouvez télécharger et utiliser le fichier PSD comme bon vous semble, assurez-vous de mentionner le fond tel qu’indiqué dans l’article ci-dessous.
Télécharger PSD en couches
Étape 1: Créer un nouveau document
Commencez par créer un nouveau document dans Photoshop. Créez une toile de 1 200 pixels de large sur 1 700 pixels de large. Ne vous inquiétez pas, notre contenu ne sera jamais aussi vaste, nous voulons simplement nous donner suffisamment d’espace de travail.
Pour définir la zone de contenu, tracez une zone de 960 pixels de large, centrez-la horizontalement dans la zone de travail, puis faites glisser les guides vers les bords gauche et droit et supprimez la zone. Votre document vierge devrait ressembler à l'image ci-dessus (la couleur n'a pas d'importance à ce stade).
Étape 2: Saisissez l'image de fond
L'inspiration pour cette conception provient d'une ressource gratuite impressionnante de Matthew Skiles. Matthew a créé une belle texture de fond en bois et l'a distribué librement sur Dribbble. Rappelez-vous simplement que si vous utilisez cette texture, vous devez fournir un lien vers Matthew.
Saisissez la texture en bois à partir du lien ci-dessus et réduisez-la de sorte qu'elle ait la même largeur que votre PSD. Cela ne fera que s'étendre verticalement à mi-chemin du site, mais c'est parfait pour l'instant.
Étape 3: Ajouter un dégradé de fond
Le fond en bois a fière allure dans Photoshop, mais il va nous causer des problèmes sur le Web en raison de la toile infinie du navigateur. Nos deux options de base consistent à le convertir en motif d'arrière-plan transparent ou à le dégrader en une couleur unie.
Dans ce cas, j'ai choisi la solution de facilité et décidé d'appliquer des dégradés à gauche et à droite de l'arrière-plan. Pour ce faire, créez un nouveau calque et définissez la couleur de votre avant-plan sur # 421a0e ou sur toute autre couleur foncée de l'image en bois de votre choix. Définissez ensuite votre dégradé de manière à passer de cette couleur à transparente et étirez le dégradé du côté gauche vers le milieu, puis répétez le dégradé du côté droit.
Cela nous donne une belle transition en douceur vers une couleur unie. Si nous codions ce site, nous définirions cette image sur l'arrière-plan et la couleur d'arrière-plan dans CSS sur # 421a0e. Quelle que soit la taille de l'écran du spectateur, l'arrière-plan du site sera parfait.
Étape 4: le logo
Le logo en haut du site est simplement un texte écrit dans Ballpark, une police gratuite impressionnante conçue par Mickey Rossi. Tapez un mot, faites-le en noir et réglez le remplissage sur environ 25%. Ensuite, appliquez une ombre interne et une ombre portée pour lui donner un aspect typographique. Voici les paramètres que j'ai utilisés:
Notez que l'ombre portée est très différente des paramètres par défaut. En effet, nous utilisons en réalité l’ombre portée pour créer un biseau externe. Veillez à définir la couleur sur blanc et à changer le mode de fusion de Multiplier (par défaut) à Écran (fonctionne avec le blanc).
L'astuce pour l'ombre intérieure est de ne pas en faire trop. Allez-y doucement et assurez-vous que l'opacité n'est pas trop sombre. Ces paramètres devraient vous donner l'effet impressionnant vu ci-dessous:
Ensuite, tapez un sous-texte à placer sous le logo et appliquez le même effet. J'ai utilisé un simple Helvetica Bold et tapé en majuscule.
Étape 5: Ajoutez des lumières
Pour ajouter les lumières en haut du modèle, nous allons utiliser une astuce très simple. Prenez un joli pinceau blanc doux et cliquez une fois sur votre toile pour créer un point blanc flou. Appuyez maintenant sur Commande-T pour utiliser l'outil de transformation libre afin d'étirer le point, comme indiqué ci-dessous.
Pour obtenir l’effet asymétrique, maintenez la touche Commande-Maj-Option enfoncée tout en cliquant sur un contrôle d’angle et en le faisant glisser. Cela devrait déplacer les deux coins également.
Une fois que vous avez une forme de lumière que vous aimez, dupliquez le calque deux fois et répartissez les lumières. Ensuite, mettez-les tous dans un groupe de calques et définissez le mode de fusion du groupe sur Superposition. Vous pouvez également jouer en ajoutant une lueur extérieure à chaque lumière pour modifier l'effet.
Étape 6: La boîte de contenu en vedette
Sous le logo, nous allons créer une grande boîte qui servira d'espace réservé pour le contenu que vous souhaitez présenter. Ce sera un endroit génial pour inclure un curseur d'image jQuery.
Pour commencer, dessinez simplement un rectangle et remplissez-le avec un dégradé ou une couleur unie, peu importe, car l’idée est de placer du contenu dessus. Assurez-vous de respecter les 960 guides que vous avez définis précédemment.
Ensuite, nous ajouterons une de ces ombres courbes à la mode qui sont si populaires dans la conception Web en ce moment. Pour ce faire, ajoutez une ombre portée typique à partir du menu des effets de calque. Une fois que vous avez appliqué l'ombre portée, cliquez avec le bouton droit de la souris sur la petite icône d'effet sur le calque et sélectionnez? Créer un calque? près du bas. Comme son nom l'indique, l'effet d'ombre devient un calque d'ombre réel.
Maintenant, utilisez le mode Déformation à l'intérieur de Free Transform pour courber le bord inférieur de l'ombre, comme indiqué dans l'image ci-dessous.
L'effet global donne l'impression que les coins se recourbent tout en conservant dans la zone de contenu réelle une forme standard facile à remplir d'images en phase de développement.
Étape 7: Zone de navigation
Juste au-dessus de la zone de contenu sélectionnée, tapez quelques exemples d’options de navigation. J'ai utilisé Museo, une police gratuite qui peut facilement être utilisée avec @ font-face en CSS.
Comme vous pouvez le constater, le modèle avance bien. Nous avons terminé la partie supérieure et pouvons passer à la section suivante.
Étape 8: Barre de couleur
Juste en dessous de la zone de contenu sélectionnée devrait être sur l'endroit où la texture du bois se termine. Créez un calque et remplissez de cette partie vers le bas avec le n ° 3c1306. Ajoutez ensuite un contenu d’espace réservé.J'ai choisi une mise en page à trois colonnes reprenant le traitement de la boîte d'avant et j'ai utilisé Museo pour les en-têtes.
La chose la plus délicate est de placer la barre de couleur en dehors du fond en bois. Si vous regardez de plus près dans l'image ci-dessus, vous pouvez voir que j'ai étiré un dégradé du noir au transparent, ce qui donne l'impression que la boîte jette une ombre sur le bois. Pour ajouter encore plus de contraste ici, j'ai peint du blanc avec un gros pinceau doux, réduit l'opacité du blanc à 75% et réglé le mode de fusion sur Superposition. C'est un bon truc pour éclaircir les zones sombres d'une texture.
Étape 9: La boîte de devis
Près du bas de la barre de couleur, j'ai inclus un encadré pour contenir un devis client. C'est un processus en trois étapes. Tout d’abord, tracez un rectangle arrondi un peu plus foncé que la couleur de fond. Appliquez ensuite la même technique d’encart que celle que nous avons utilisée sur le logo ci-dessus (ombre portée blanche définie sur écran + ombre intérieure). Enfin, déposez du texte. J'ai utilisé une version italique de Georgia.
Étape 10: le pied de page
Pour finir le gabarit, j'ai ramené un peu de la texture en bois et répété bon nombre des étapes décrites ci-dessus. Tout d'abord, j'ai ajouté des dégradés sur le côté, comme nous l'avons fait au début. Ensuite, j'ai ajouté une autre ombre au bas de la barre de couleur, comme nous l'avons fait en haut. Enfin, j'ai répété le même effet d'insertion que nous avons utilisé trois fois auparavant pour inclure des icônes de médias sociaux de base et le lien d'attribution pour la texture d'arrière-plan.
Conclusion
Avec ces touches finales, vous avez tous terminé! Entre autres choses, nous avons appris comment fondre un fond texturé en une couleur unie afin qu’il fonctionne sur le Web, comment créer un effet de typographie dans le bois et l’appliquer de différentes façons, comment créer de superbes illusions d’éclairage comment utiliser le mode de fusion Superposition pour éclaircir les zones sombres d'une texture.
J'espère que vous avez beaucoup appris de ce tutoriel, n'oubliez pas de télécharger le PSD! Si vous l'utilisez dans un projet, laissez un lien dans les commentaires ci-dessous afin que je puisse le vérifier (facultatif mais apprécié).