Concevoir un Web Design gradient d'inspiration dans Photoshop

 

Dans ce tutoriel photoshop, vous allez apprendre comment créer un blog design à partir de zéro en utilisant une combinaison de gradients et les sélections.

Voici un aperçu de ce que nous allons créer

Taille du document Photoshop

1. Commençons par créer un nouveau document photoshop - Fichier> Nouveau avec une largeur de 900px et une hauteur de 1200px .

Construction de la section En-tête

2. Choisissez votre outil Rectangle de sélection (touche de raccourci: M) et mettre dans les options suivantes ci-dessous. Franges à 0px, puis choisissez dans le menu déroulant et choisissez Taille fixe. Réglez la largeur à 900px et la hauteur de 80px , car ce sera la largeur et la hauteur de notre tête.

3. Cliquez et maintenez vers le haut du document et une sélection devrait apparaître. Déplacer la sélection vers le très haut comme indiqué dans la démo ci-dessous.

4. Ensuite, créez un nouveau calque en allant dans Calque> Nouveau> Calque ... Nom de l'en-tête de couche, Puis allez dans Edition> Remplir et dans la première liste déroulante choisir la couleur ... Ajouter dans le code hexadécimal # 7a6c5a assurez-vous avant de faire ce que vous êtes sélectionné sur le nouveau calque que nous venons de créer. Si vous êtes sur l'image de fond que nous pourrions avoir des problèmes plus tard. Appuyez sur ok et il devrait remplir votre sélection avec une couleur brun foncé.

5. Ensuite, nous allons ajouter un peu d'ombre au fond de l'en-tête. Accédez à votre palette Calques où tous vos couches sont stockées et Commande + clic (Mac) Ctrl + clic (PC) sur la vignette de la couche d'en-tête. Cela fera apparaître une sélection de cette couche. Après il suffit de cliquer et de la sélection est faite Créez un nouveau calque puis dirigez-vous et prenez votre outil de dégradé.Assurez-vous que dans le sélecteur de dégradé que vous choisissez le dégradé Premier plan transparent.

6. Avec le jeu de sélection est encore active et le noir comme couleur de premier plan de votre départ d'environ 20 pixels en dessous l'en-tête, puis cliquez et tirez vers le haut tout en maintenant enfoncée la touche Maj (garde la ligne droite) relâchez le bouton de la souris à peu près à mi-hauteur de la tête. Renommez ce calque Ombre tête. Changez le mode de fusion à la lumière douce et régler l'opacité comme bon vous semble. J'ai mis mon opacité à 78%.

Permet de faire maintenant le logo

7. Grab l'outil texte, sélectionnez Myriad Pro, Gras, 52pt, blanc "Titre du blog" et cliquez près du côté supérieur gauche de l'en-tête de type dans le titre de votre blog dans ce cas.



8. Allez-y et mettez en surbrillance le texte à l'aide de la commande raccourci Ctrl + A ou commande + A puis aller jusqu'à Fenêtre> Caractère et définir le suivi à -39 . Voir exemple ci-dessous.

9. Une fois que vous avez résolu le. Suivi un clic droit sur la couche Titre du Blog et choisissez Options de fusion ... Ajouter une ombre portée avec les chiffres du dessous

Création de la navigation

10. Permet d'abord commencer par mettre un peu de guides apporter un guide à partir du haut à environ 2 pixels sous votre logo. Faites ensuite glisser dans un guide de la gauche et l'ont s'arrêtent juste devant l'6 sur la règle du haut de votre document. Faites glisser sur un autre guide de la gauche et augmentent chacun de 1,25 pouces qui signifie que cette fois-ci s'arrêtera à 7,25 le prochain sera de 8,5 etc ... jusqu'à ce que vous avez cinq cases de votre navigation pour accéder à. Jetez un oeil à la capture d'écran ci-dessous pour voir si elle est semblable à la mienne.

11. Une fois que vous avez les guides en place obtenez votre outil texte et choisissez Myriad Pro, régulier, 16pt, blanc et le type d'accueil dans la première case. Il doit être placé comme dans la capture d'écran ci-dessus. Terminer le reste des éléments de navigation qui sont Tutoriels, Freebies, tendances et contacter et assurez-vous qu'ils Le tout, dans leur boîte.

12. Mettez en surbrillance l'ensemble de vos éléments de navigation et appuyez sur Commande + G ou Ctrl + G pour les grouper et de les nommer Nav. Cela permet de garder notre propre fichier Photoshop.

13. Notre prochaine étape est d'ajouter l'état actif de la navigation. Allez dans le groupe Nav et créez un nouveau calque appelé actif. Faites glisser ce calque actif en dessous du calque de texte d'accueil de sorte que la maison sera affiché au-dessus de celui-ci.

14. Avec vos guides toujours en place, sélectionnez l'outil Rectangle arrondi et réglez le Rayon au sommet de 10px. Assurez-vous que dans votre barre d'outils en haut qui PIXELS remplissage est sélectionnée. Commencez par la marque de 6 pouces où la maison est, sur 8px dessus de la maison est l'endroit où vous allez commencer sur le guide de 6 pouces. Cliquez et faites glisser vers la droite jusqu'à ce que vous atteignez l'autre guide et faites glisser vers le bas de sorte qu'il passe par le bas de la tête. Si cela était source de confusion coup d'oeil à la copie d'écran ci-dessous.

15. Prenez votre outil rectangle de sélection, et assurez-vous que dans le haut où vous avez les options de l'outil que vous définissez la chute de style déroulant à la normale au lieu de la largeur fixe. Ensuite, faites glisser une sélection autour de la partie qui pèse sur l'en-tête et appuyez sur la touche Retour arrière ou de suppression.

16. Maintenant, nous allons créer les courbes extérieures au bas de l'onglet.Prenez votre outil plume et faites votre premier clic sur le bord gauche de l'onglet, puis cliquez et faites glisser à gauche au bas de la tête tout en maintenant la touche MAJ enfoncée jusqu'à ce que vous obtenir la courbe désirée lâcher prise et il suffit de cliquer pour terminer la forme.

17. Maintenant que nous avons la voie tracée, nous devons créer un nouveau calque dans notre palette Calques. Ensuite, allez à Chemins et choisissez le "chemin Remplir avec la couleur de premier plan" option. Après avoir rempli la couleur et vous avez votre panneau de chemins s'ouvre, cliquez hors de la voie actuellement sélectionnée en cliquant dans la zone grise ci-dessous, puis revenir à votre palette des calques. Maintenant, dans la mienne j'ai un peu suspendue au-dessus de la tête donc je vais prendre mon outil marguee rectangulaire et supprimer cela.

18. Ensuite, nous devons dupliquer le calque nous venons de faire (Commande + J (Mac) Ctrl + J (PC)). Ensuite, nous avons besoin de le retourner horizontalement parce que nous voulons l'utiliser pour l'autre côté. Aller àEdition> Transformation horizontale> Flip . Appuyez ensuite sur "V" sur votre clavier qui sélectionne l'outil de déplacement et d'utiliser votre touche flèche droite pour déplacer ce calque en position. Une fois que la couche est en position de sélectionner les trois calques dans votre palette des calques et de les fusionner à une seule (Sélectionnez toutes les puis faites un clic droit et choisissez Fusionner les calques). Ensuite, assurez-vous de déplacer ce calque sous le groupe Nav de sorte que le "Home" texte montre à travers. Voici ce que nous avons fait jusqu'ici.

19. Maintenant il est temps de donner à notre onglet certaine action gradient!Faites un clic droit sur le calque et choisissez l'onglet options de fusion. Cliquez sur l'option de superposition de dégradé et de copier les réglages ci-dessous

20. Ensuite, nous voulons donner une ombre portée sur l'onglet pour lui donner un peu de «Pop». Utiliser les paramètres ci-dessous.

21. Maintenant, vous remarquerez peut-être que l'ombre portée est suspendu au-dessous de l'en-tête que nous ne voulons pas. Voici une astuce pour se débarrasser d'une section spécifique d'un style de calque. Cliquez sur la partie qui dit Options de fusion: Custom qui est tout en haut de notre boîte de dialogue Options de fusion. Puis dans la section Fusion avancée consultez "Layer Mask Masque Effets".

22. Maintenant, allez-y et ajoutez un masque de calque à votre onglet Layer> Layer Mask> Reveal All . Prenez votre outil de sélection rectangulaire et tracez une sélection autour de l'ombre qui plane sur la tête.

23. Une fois que vous avez la sélection comme ci-dessus allez à Edition> Remplir ... et choisissez le noir comme couleur . La raison pour laquelle nous utilisons noir c'est parce que lors de l'utilisation des masques de calque blanc révèle et cache noir.

Couleur de fond principale

24. Maintenant, nous allons donner notre blog sa couleur de fond principale.Dirigez-vous vers le bas de votre palette Calques et trouvez la couche appelée arrière-plan. Si elle dispose d'un verrou par son nom double-cliquez sur le verrou, puis appuyez sur OK. Ensuite, allez à Edition> Remplir ...> Couleur ...et mettre dans le code hexadécimal # e0ceb6 .

25. Nous allons ajouter un point culminant au fond de l'en-tête de sorte qu'il donne l'en-tête d'une séparation subtile de l'arrière du corps. Bien que sélectionné sur votre calque de fond créez un nouveau calque. Ensuite, prenez votre Rangée simple outil Rectangle de sélection et cliquez à l'intérieur juste sous l'en-tête. Le bon choix devrait ressembler à ci-dessous.

26. Remplissez cette sélection avec # f3ebe0 et vous devriez obtenir quelque chose comme la capture d'écran ci-dessous.

Sur le contenu

27. La première chose que nous voulons faire est de libérer l'ensemble de nos guides. Alors, allez à Affichage> Effacer . Créons à présent deux guides qui nous aideront à adapter notre contenu correctement. Remonter à Affichage> Nouveau repère ... choisissez verticale et lui donner une valeur de 25px et appuyez sur Entrée . Répétez ce processus sauf que cette fois mis en 875px. Cela nous donne 25px de " padding "de chaque côté.

28. Permet de créer la boîte où les messages seront affichés. Sélectionnez l'outil Rectangle de sélection d'entrée et les paramètres de la barre d'outils ci-dessous.Placez la sélection à l'endroit exact comme on le voit dans la seconde capture d'écran.

29. Remplissez la sélection avec une couleur (j'ai utilisé blanc), puis ouvrez le menu de votre style de calque et choisissez l'option de gradient et de copier les réglages ci-dessous.

30. Alors que dans le menu style de calque ajouter un coup: 1px, # 887c6a (couleur du contour), à l'extérieur.

31. Maintenant, nous allons créer une section pour le titre du poste pour aller en.Prenez le chapiteau rectangulaire et utiliser les paramètres ci-dessous.

32. Remplissez-le avec n'importe quelle couleur et de copier les styles ci-dessous pour appliquer le dégradé.

33. Maintenant, nous pouvons ajouter un peu fort pour séparer le titre de l'aperçu du contenu à l'aide de notre outil de sélection rectangulaire et réglage de la largeur de 550px et la hauteur de 1px.

34. Ajouter un nouveau calque et remplissez-le avec # f2e7d9.

35. Prenez ces trois couches que nous venons de faire et de les regrouper et de les appeler "Post". Dupliquer les deux fois et uniformément les espaces bas de la page, comme ci-dessous.

Sur la barre latérale

36. La barre latérale utilise beaucoup des mêmes valeurs que nous avons utilisés pour le poste, cette partie doit être court. J'ai créé deux guides plus pour m'aider à aligner la barre latérale. J'ai placé un sur le bord droit de la poste et puis on 25px à droite de cela. Il s'agit d'espacement formidable car il signifie que tous nos éléments ont 25px entre les uns aux autres que nous voulons garder cohérente.

37. Maintenant, je peux tirer ma barre latérale à l'aide de l'outil de sélection rectangulaire régler le chapiteau rectangle de la taille fixe avec une largeur de 275px et une hauteur de 430px

38. Créez un nouveau calque et remplissez-le avec n'importe quelle couleur.Copier le style de calque à partir de # 29 plus tôt dans le poste et l'appliquer à cette nouvelle couche. 
Tracez une sélection en haut de la barre latérale où le titre «commanditaires» ira.Assurez-vous qu'il s'aligne avec la partie plus sombre brun le titre du message.Remplissez-le avec n'importe quelle couleur et de copier le style de calque à partir de # 32. Également créer le point culminant 1px comme nous l'avons fait avant d'aller à droite en dessous de la partie brune.

39. Groupe de tous les éléments de la barre latérale dans un groupe appelé barre latérale et le dupliquer une fois. Utilisez votre outil de déplacement pour pousser le groupe dupliqué vers le bas pour s'adapter à la position comme la capture d'écran ci-dessous.

Le pied de page

40. Prenez votre outil de sélection rectangulaire et commencer à 25 pixels en dessous et sélectionnez le dernier message le reste de la toile. Remplissez-le avec # 716656 et il devrait ressembler à la capture d'écran ci-dessous. PS J'ai dû ajuster la hauteur de la barre latérale seconde afin qu'il soit aligné avec le dernier message.

Mise Remplissez maintenant ajouter du contenu

41. La mise en page est maintenant compléter tous les thats nécessaires maintenant est d'ajouter un peu de contenu. J'ai collé avec Myriad Pro pour toutes de la police sur ce site y compris les titres de poste.

J'espère que vous avez appris quelque chose de ce tutoriel, même si vous n'êtes pas un fan de la conception il ya encore des techniques de photoshop à tirer.Merci à tous et laissez-moi savoir si vous l'essayez. N'oubliez pas de promouvoir ce ci-dessous si vous l'avez apprécié.