Ontwerp realistische roestvrijstalen achtergrond en tekst [Photoshop-zelfstudie]

Webontwerpers en webmasters waren dol op cool staal of metaalachtige effecten voor de Web 2.0 stormt naar binnen en wast alles weg; het verlaten van de WWW met glossy, beledigende gradiënten websites. Apple.com is altijd gerelateerd geweest aan een goed Web 2.0-interfacedesign, maar deze kerels hebben nog nooit de coole zwarte en zilverachtige effecten verloren en slagen er niet in om het beter te maken in hun ontwerpen en typografie.

Geïnspireerd door hun ontwerpen, probeer ik deze stijlen terug te brengen in mijn persoonlijke ontwerp en zo iets solide gemaakt, en lijkt het een beetje op een stuk roestvrij staal metaal. Volledige Photoshop-zelfstudie na het springen.

Roestvrij staal achtergrond

Stap 1

Maak een leeg nieuw document met een grootte van 600 × 400. Maak een nieuwe laag, noem die 'achtergrond' en vul het met grijze kleur [# c0c0c0]. Duplicaat 'achtergrond' laag, noem de nieuwe laag 'stalen achtergrond'en plaats het bovenop'achtergrond'.

Stap 2

Met de laag 'staalachtergrond' geselecteerd, toepassen Filter -> Geluid toevoegen en voer de volgende instellingen in:

• Bedrag: 14.21
• Distributie: Gaussian
• Monochroom gecontroleerd

Stap 3

Met 'stalen achtergrond'laag nog steeds geselecteerd, ga Filter -> vervagen -> Bewegingsonscherpte en voer de volgende instellingen in:

• Angel: 0
• Afstand: 34 pixels

Klik met de rechtermuisknop 'stalen achtergrond', selecteer Meng opties en voer de volgende instellingen in voor Overlay met kleurovergang - Verloopbewerker:

Color Stop 1

• Kleur: # 000000
• Dekking: 50%
• Locatie: 0%

Color Stop 2

• Kleur: #ffffff
• Locatie: 50%

Color Stop 3

• Kleur: # 000000
• Dekking: 50%
• Locatie: 0%

Metalen tekst

Stap 4

Je roestvrijstalen achtergrond is in principe klaar, we gaan door om een ​​metalen tekst in te voegen die er bij hoort. Gebruik de Text Tool, schrijf iets in het midden, bij voorkeur met vetgedachte lettertype (ik gebruik Myriad Pro Bold hier). Klik met de rechtermuisknop (of dubbelklik) om de tekstlaag te starten Meng opties dialoog.

1. Slagschaduw

• Dekking: 38%
• Afstand: 1px
• Verspreiding: 1%
• Grootte: 2px

• Diepte: 100%
• Grootte: 0px
• Verzachten: 0px
• Markeer dekking: 42%
• Schaduwdekking: 32%

Uw tekst moet er ongeveer zo uitzien als hieronder.

Stap 5

Hier is iets dat je goed moet volgen. Houd de Control-toets ingedrukt (Mac: Command-toets) en klik met de linkermuisknop op de tekstlaag om de omtrek ervan te markeren. Zorg ervoor dat de omtrek er nog steeds is, selecteer 'stalen achtergrond'laag, en druk op Control + J (Mac: Command + J)

Door dit te doen, dupliceert u de stalen achtergrond in de vorm van uw tekst. Hernoem de laag naar 'tekst achtergronden verplaats het naar de top.

Stap 6

Verandering 'tekst achtergrond' naar Kleur branden, breng het is ondoorzichtigheid naar beneden 67%.

Je uiteindelijke uitvoer moet er ongeveer zo uitzien als de afbeelding hieronder.

Download .PSD-bestand.