Website header in Photoshop

• Mei 5, 2024

In deze zelfstudie bouwen we een website-header in Photoshop^R die we zullen animeren in Flash^R Catalyst^TM. De animatie begint met een lege achtergrond en de ontwerpelementen schuiven in om de kop voor onze ogen te "bouwen". De animatie wordt geprogrammeerd om te beginnen "bij het laden" en duurt slechts enkele seconden. Deze websitekop is bedoeld voor een bedrieglijk wenskaartbedrijf.

Onze eerste stap is het bouwen van de header in Photoshop. We zullen elk ontwerpelement op zijn eigen laag plaatsen ter voorbereiding op het werken met hen in Flash Catalyst. Zoals u ziet, hebben we 6 ontwerpelementen.

1. Achtergrond
2. Onderbalk over de breedte van de koptekst
3. Bedrijfsnaam
4. Verjaardagskaart
5. Pompoen Notecard
6. Kerstkaart

1. Laten we een nieuw project starten in Photoshop. Stel de breedte in op 1000 pixels, hoogte op 225 pixels en de achtergrond op transparant. Deze maat past mooi bovenaan onze webpagina.
   
   
2. Het enige element dat zichtbaar zal zijn aan het begin van de animatie is de witte achtergrond. Vul de eerste laag van de afbeelding met de achtergrondkleur van je keuze. Hernoem deze laag in het deelvenster Lagen "Achtergrond".
   
   
3. Om de gearceerde rand te maken, gebruikte ik de stijl Binnenste schaduwlaag. Dubbelklik op de achtergrondlaag en vink het vakje naast Inner Shadow aan. Stel de afstand en de choke in op 0 en de grootte op 49.
   
   
4. Vervolgens voegen we de dunne rand rond de afbeelding toe met de lijnlaagstijl. Ik heb de kleur ingesteld op bruin (# 6e674f), de grootte op 2 en de positie op binnen.
   
   Vervolgens voegen we de kaarten toe. Ik heb de grootte van mijn wenskaarten verkleind tot 230 x 175 pixels. Dit houdt ze in verhouding tot de grootte van de koptekst.
   
   
5. Laten we de pompoenkaart kopiëren / plakken in onze kop. Noem de nieuwe laag "Pompoen". Klik op Bewerken - Vrije transformatie om de kaart iets naar rechts te draaien. Klik op de pompoenlaag en pas de stijl van de slagschaduwlaag toe, met behoud van de standaardinstellingen.
   
   
6. Herhaal de laatste stap voor zowel de verjaardag als de kerstkaart.
   
   Vervolgens voegen we de balk onder aan de kop toe. We stoppen onze kaarten achter deze balk om kaarten op een plank te emuleren.
   
   
7. Voeg een nieuwe laag toe aan het deelvenster Lagen en noem deze "Bar".
   
   
8. Selecteer met het gereedschap Rechthoekig selectiekader het onderste gedeelte van de koptekst, net binnen de bruine rand. Kies een kleur voor uw balk en vul de selectie met deze kleur.
   
   
9. Dubbelklik op de laag en voeg de lijnlaagstijl toe zoals u deed aan de achtergrondlaag.
   
   
10. Klik op het gereedschap Horizontale tekst en kies een lettertype voor uw bedrijfsnaam. Ik heb dezelfde bruine kleur gebruikt als de randkleur. Typ de bedrijfsnaam aan de linkerkant van de koptekst.
    
    
11. Deze stap is optioneel. We zullen de tekst rasteren. Klik met de rechtermuisknop op de tekstlaag en kies Type rasteren in het menu.
    
    
12. Sla uw project op in Photoshop .psd-indeling.
    
    

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] gedeponeerd handelsmerk [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.

Video-Instructies: Photoshop Web Design | Web Header Tutorial (Mei 2024).