Suunnittele realistinen ruostumaton teräs tausta ja teksti [Photoshop-opetusohjelma]

Web-suunnittelijat ja ylläpitäjät rakastivat viileää terästä tai metallisia vaikutuksia ennen Web 2.0 myrskyt ja pestä kaiken pois; jättää WWW kiiltävien, väärinkäyttöläisten sivujen verkkosivuilla. Apple.com on aina ollut yhteydessä hyvään Web 2.0 -liittymäsuunnitteluun, mutta nämä kaverit eivät ole koskaan menettäneet viileitä mustia ja hopea-ish-vaikutuksia eivätkä tee sitä paremmin malleissaan ja typografiassaan.

Suunnittelunsa innoittamana yritän tuoda nämä tyylit takaisin henkilökohtaiseen muotoiluun ja näin luoda jotain hieman vankkaa ja näyttää hieman ruostumattomasta teräksestä. Täysi Photoshop-opetusohjelma hyppyjen jälkeen.

Ruostumaton teräs tausta

Vaihe 1

Luo tyhjä uusi asiakirja, jonka koko on 600 × 400. Luo uusi kerros, nimeä se 'tausta' ja täytä se harmaalla värillä [# c0c0c0]. monistaa 'tausta' nimeä uusi kerros ”teräs taustaja aseta se päälletausta'.

Vaihe 2

Käytä "teräs tausta" kerros valittuna Suodatin -> Lisää melu ja anna seuraavat asetukset:

• Määrä: 14,21
• Jakelu: Gaussilainen
• Monokromaattinen tarkistettu

Vaihe 3

Kanssa 'teräs tausta'kerros on edelleen valittuna, siirry Suodattaa -> Hämärtää -> Motion Blur ja anna seuraavat asetukset:

• Enkeli: 0
• Etäisyys: 34 pikseliä

Oikealla painikkeella 'teräs tausta', valitse Sekoitusasetukset ja anna seuraavat asetukset Gradientin peitto - Gradient-editori:

Värin pysäytys 1

• Väri: # 000000
• Läpinäkyvyys: 50%
• Sijainti: 0%

Color Stop 2

• Väri: #ffffff
• Sijainti: 50%

Värin pysäytys 3

• Väri: # 000000
• Läpinäkyvyys: 50%
• Sijainti: 0%

Metal-teksti

Vaihe 4

Ruostumattomasta teräksestä valmistettu tausta on pohjimmiltaan tehty, me jatkamme sieltä, jotta voit lisätä metallitekstin, jonka pitäisi näyttää vastaavalta. Käytä Tekstityökalu, kirjoita jotain keskelle, mieluiten ajatella rasvaa -fonttia (käytän Myriad Pro Boldiä täällä). Napsauta hiiren kakkospainikkeella (tai kaksoisnapsauta) tekstikerros käynnistääksesi Sekoitusasetukset dialogi.

1. Pudota varjo

• Läpinäkyvyys: 38%
• Etäisyys: 1px
• Levitä: 1%
• Koko: 2px

• Syvyys: 100%
• Koko: 0px
• Pehmennä: 0px
• Korosta läpinäkyvyys: 42%
• Varjon läpinäkyvyys: 32%

Tekstin pitäisi näyttää jotain samanlaista kuin alla.

Vaihe 5

Tässä on jotain, jota sinun täytyy seurata tiukasti. Pidä ohjauspainiketta painettuna (Mac: Komentonäppäin) ja napsauta tekstikerrosta vasemmalle napsauttamalla sitä. Varmista, että ääriviiva on edelleen olemassa, valitse 'teräs tausta'kerros, ja osuma Control + J (Mac: Command + J)

Tällöin kopioit teräksen taustaa tekstin muodossa. Nimeä kerros uudelleen nimellätekstin taustallaja siirrä se yläreunaan.

Vaihe 6

Vaihdatekstin taustalla'on Väri Palaa, tuo se sameus alas 67%.

Lopullisen tuotoksen pitäisi näyttää jotain samanlaista kuin alla oleva kuva.

Lataa .PSD-tiedosto.