Fond et texte en acier inoxydable réalistes [Tutoriel sur Photoshop]

Les concepteurs Web et les webmasters adoraient les effets froids en acier ou en métal avant la Web 2.0 fait irruption et tout emporté; quittant le WWW avec des sites Web brillants et dégradés. Apple.com Il a toujours été associé à une bonne conception d'interface Web 2.0, mais ces gars-là n'ont jamais perdu les effets noirs et argent-froids, ni réussi à l'améliorer dans leurs conceptions et leur typographie..

Inspiré par leurs designs, j'essaie d'intégrer ces styles dans mon design personnel et crée ainsi quelque chose d'assez solide, qui ressemble à un morceau de métal en acier inoxydable. Tutoriel complet sur Photoshop après le saut.

Fond en acier inoxydable

Étape 1

Créez un nouveau document vierge au format 600 × 400. Créez un nouveau calque, nommez-le 'Contexte' et remplissez-le avec la couleur grise [# c0c0c0]. Dupliquer 'Contexte' couche, nommez la nouvelle couche 'fond en acier'et placez-le sur'Contexte'.

Étape 2

Avec le calque 'Fond d’acier' sélectionné, appliquer Filtre -> Ajouter du bruit et entrez les paramètres suivants:

• Montant: 14.21
• Distribution: gaussien
• Monochromatique vérifié

Étape 3

Avec 'fond en acier'couche toujours sélectionnée, allez Filtre -> Brouiller -> Flou de mouvement et entrez les paramètres suivants:

• Angel: 0
• Distance: 34 pixels

Clic-droit 'fond en acier', sélectionnez Options de fusion et entrez les paramètres suivants pour Superposition de dégradé - Éditeur de dégradé:

Couleur Stop 1

• Couleur: # 000000
• Opacité: 50%
• Lieu: 0%

Couleur Stop 2

• Couleur: #ffffff
• Lieu: 50%

Couleur Stop 3

• Couleur: # 000000
• Opacité: 50%
• Lieu: 0%

Texte en métal

Étape 4

Votre fond en acier inoxydable est pratiquement terminé, nous allons continuer à partir de là pour insérer un texte en métal qui devrait correspondre. Utilisez le Outil texte, écrivez quelque chose au milieu, de préférence avec la police think fat (j'utilise ici Myriad Pro Bold). Faites un clic droit (ou double-cliquez) sur le calque de texte pour lancer le Options de fusion dialogue.

1. Ombre portée

• Opacité: 38%
• Distance: 1px
• Propagation: 1%
• Taille: 2px

• Profondeur: 100%
• Taille: 0px
• Ramollir: 0px
• Opacité de la surbrillance: 42%
• Opacité de l'ombre: 32%

Votre texte devrait ressembler à celui ci-dessous.

Étape 5

Voici quelque chose que vous devez suivre étroitement. Maintenez la touche de contrôle (Mac: touche de commande) et cliquez avec le bouton gauche de la souris sur le calque de texte pour le surligner. Assurez-vous que le contour est toujours là, sélectionnez 'fond en acier'couche, et appuyez sur Control + J (Mac: Commande + J)

Ce faisant, vous dupliquez le fond en acier sous la forme de votre texte. Renommez le calque en 'fond de texte'et déplacez-le vers le haut.

Étape 6

Changement 'fond de texte' à Brûlure de couleur, apporte c'est Opacité jusqu'à 67%.

Votre sortie finale devrait ressembler à l'image ci-dessous.

Télécharger le fichier .PSD.