Zaglavlje web stranice u Photoshopu

• Travanj 26, 2024

U ovom ćemo tutorialu izgraditi zaglavlje web stranice u Photoshopu^R koju ćemo animirati u Flash-u^R Katalizator^TM, Animacija započinje praznom pozadinom, a elementi dizajna ubacuju se u "izgradnju" zaglavlja pred našim očima. Animacija će biti programirana tako da započne "on load" i trajat će samo nekoliko sekundi. Ovo će zaglavlje web stranice biti za nepouzdano poslovanje s čestitkama.

Naš prvi korak je izgradnja zaglavlja u Photoshopu. Svaki ćemo dizajnerski element staviti na svoj vlastiti sloj u pripremi za rad s njima u Flash Catalyst-u. Kao što vidite, imat ćemo 6 elemenata dizajna.

1. Pozadina
2. Dno trake po širini zaglavlja
3. Naziv tvrtke
4. Kartica za rođendan
5. Bilješka od bundeve
6. Božićna čestitka

1. Počnimo novi projekt u Photoshopu. Postavite širinu na 1000 piksela, visinu na 225 piksela i pozadinu na prozirne. Ova veličina će se lijepo uklopiti na vrh naše web stranice.
   
   
2. Jedini element koji će biti vidljiv na početku animacije je bijela pozadina. Prvi sloj slike ispunite bojom pozadine po vašem izboru. Na ploči Slojevi preimenujte ovaj sloj u "Pozadina".
   
   
3. Da bih stvorio zasjenjeni rub, koristio sam Inner Shadow Layer Style. Dvaput kliknite na pozadinski sloj i potvrdite okvir uz Inner Shadow. Postavite Udaljenost i prigušnicu na 0, a veličinu na 49.
   
   
4. Dalje ćemo dodati stil tankog obruba oko slike sa Stroke Layer Style. Boju sam postavio na smeđu (# 6e674f), Veličinu na 2 i Položaj na unutrašnjosti.
   
   Dalje ćemo dodati kartice. Smanjio sam veličinu čestitki na 230 x 175 piksela. Ovo će ih zadržati u proporciji s veličinom zaglavlja.
   
   
5. Kopirajmo / zalijepimo Pumpkin karticu u naše zaglavlje. Imenujte novi sloj "Bundeva". Kliknite Uredi - Besplatna transformacija da biste malo zakrenuli karticu udesno. Kliknite na sloj bundeve i nanesite sloj kapljice sjene, zadržavajući zadane postavke.
   
   
6. Ponovite posljednji korak i za čestitku za rođendan i božić.
   
   Dalje ćemo dodati traku na dnu zaglavlja. Složit ćemo naše kartice iza ove trake kako bismo oponašali kartice na polici.
   
   
7. Dodajte novi sloj na ploču Slojevi i imenovajte ga "Bar".
   
   
8. Pomoću alata Rectangular Marquee odaberite donje područje zaglavlja, unutar smeđe obrube. Odaberite boju za svoju traku i odabir ispunite ovom bojom.
   
   
9. Dvokliknite sloj i dodajte Stroke Layer Style kao i prethodnom sloju.
   
   
10. Kliknite alat Horizontalni tip i odaberite font za naziv vaše tvrtke. Koristio sam istu smeđu boju kao i boju obruba. Upišite naziv tvrtke na lijevoj strani zaglavlja.
    
    
11. Ovaj korak nije obavezan. Tekst ćemo rasterirati. Desnom tipkom miša kliknite sloj teksta i na izborniku odaberite Rasterize Type.
    
    
12. Spremite svoj projekt u Photoshop .psd formatu.
    
    

Autorska prava 2018. Adobe Systems Incorporated. Sva prava pridržana. Snimke zaslona Adobe proizvoda preispisane su uz dozvolu tvrtke Adobe Systems Incorporated. Adobe, Photoshop, Photoshop album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst i Flash Paper je ili su [a] registrirani zaštitni znak ili zaštitni znak tvrtke Adobe Systems Incorporated u Sjedinjenim Državama i / ili drugim zemljama.

Upute Video: Kreiranje Web Templatea - PhotoShop - Web Design - #1 (Travanj 2024).