Zaprojektuj realistyczne tło i tekst ze stali nierdzewnej [Photoshop Tutorial]

Projektanci stron internetowych i webmasterzy zwykli kochać fajne stalowe lub metalowe efekty przed Web 2.0 burzy się i wszystko myje; pozostawiając WWW z błyszczącymi, obraźliwymi stronami z gradientami. Apple.com zawsze był związany z dobrym designem interfejsu Web 2.0, ale ci ludzie nigdy nie stracili fajnych efektów czerni i srebra, ani nie ulepszyli swoich projektów i typografii.

Zainspirowany ich projektami, staram się przywrócić te style z powrotem do mojego osobistego projektu i tym samym stworzyć coś solidnego i wygląda trochę jak kawałek metalu ze stali nierdzewnej. Pełny samouczek Photoshopa po skoku.

Tło ze stali nierdzewnej

Krok 1

Utwórz nowy pusty dokument o rozmiarze 600 × 400. Utwórz nową warstwę, nazwij ją 'tło' i wypełnij go szarym kolorem [# c0c0c0]. Duplikować 'tło' warstwa, nazwij nową warstwę ”stalowe tło„i umieść to na górze”tło'.

Krok 2

Po wybraniu warstwy „stalowe tło” zastosuj Filtr -> Dodaj szum i wprowadź następujące ustawienia:

• Kwota: 14,21
• Dystrybucja: Gaussa
• Monochromatyczny sprawdzony

Krok 3

Z 'stalowe tło'warstwa nadal zaznaczona, idź Filtr -> Plama -> Rozmycie w ruchu i wprowadź następujące ustawienia:

• Angel: 0
• Odległość: 34 piksele

Kliknij prawym przyciskiem myszystalowe tło', Wybierz Opcje mieszania i wprowadź następujące ustawienia dla Nakładka gradientu - Edytor gradientów:

Zatrzymanie koloru 1

• Kolor: # 000000
• Krycie: 50%
• Lokalizacja: 0%

Kolor Stop 2

• Kolor: #ffffff
• Lokalizacja: 50%

Kolor Stop 3

• Kolor: # 000000
• Krycie: 50%
• Lokalizacja: 0%

Tekst metalowy

Krok 4

Twoje tło ze stali nierdzewnej jest w zasadzie zrobione, będziemy kontynuować od tego, aby wstawić metalowy tekst, który powinien wyglądać pasująco. Użyj Narzędzie tekstowe, napisz coś na środku, najlepiej z grubą czcionką (używam tutaj Myriad Pro Bold). Kliknij prawym przyciskiem myszy (lub kliknij dwukrotnie) warstwę tekstową, aby uruchomić Opcje mieszania dialog.

1. Upuść cień

• Krycie: 38%
• Odległość: 1px
• Spread: 1%
• Rozmiar: 2px

• Głębokość: 100%
• Rozmiar: 0px
• Zmiękcz: 0px
• Krycie podświetlenia: 42%
• Krycie Cienia: 32%

Twój tekst powinien wyglądać podobnie do poniższego.

Krok 5

Oto coś, czego musisz ściśle przestrzegać. Przytrzymaj klawisz Control (Mac: klawisz Command) i kliknij lewym przyciskiem myszy warstwę tekstową, aby podświetlić jej kontur. Upewnij się, że kontur nadal istnieje, wybierz „stalowe tło'warstwa i naciśnij Control + J (Mac: Command + J)

W ten sposób duplikujesz stalowe tło w kształcie tekstu. Zmień nazwę warstwy na „tło tekstu„i przenieś go na górę.

Krok 6

Zmiana 'tło tekstu' do Palenie kolorów, przynieś to Nieprzezroczystość aż do 67%.

Twoje ostateczne wyjście powinno wyglądać podobnie do poniższego obrazu.

Pobierz plik .PSD.