Hoe maak je een professionele website-header in Photoshop

Photoshop CC 2014 is een ideaal hulpmiddel voor het ontwerpen van professionele afbeeldingen voor uw website, inclusief banners. Houd bij het ontwerpen van uw eerste banner het ontwerp eenvoudig, zodat de afbeelding niet overladen wordt met te veel visuele informatie. Als uw bedrijf bedrijfskleuren en een bedrijfslettertype heeft, kunt u die zeker in uw banner gebruiken.

Stap 1

Start Photoshop. Druk op "Ctrl-N" of selecteer "Nieuw" in het menu Bestand. Geef in het dialoogvenster de hoogte en breedte van uw banner op, bijvoorbeeld 900 pixels breed en 150 pixels hoog. Klik OK."

Stap 2

Selecteer desgewenst een effen achtergrondkleur voor de banner. Om dit te doen, klikt u op het pictogram "Voorgrondkleur" in de werkbalk en selecteert u een kleur, klikt u vervolgens op het "Rechthoekgereedschap" en sleept u het over de hele banner. In deze zelfstudie overlappen we echter twee verlopen in plaats van een effen achtergrond te gebruiken.

Stap 3

Klik op de tool "Gradient" in de Toolbox. Klik op het menu "Vullen" in de optiebalk en selecteer het zwart-wit verloop uit de beschikbare voorinstellingen. Klik ergens boven de banner in het canvas en sleep de cursor onder de banner. Laat de muisknop los om het verloop toe te passen.

Stap 4

Klik op het "Horizontale tekstgereedschap" in de werkset. Sleep de cursor over de banner om een ​​tekstvak te maken. Gebruik de menu's in de optiebalk om een ​​lettertype, lettergrootte en kleur op te geven. Sleep het tekstvak zodat het gecentreerd is aan de linkerkant van de banner.

Stap 5

Selecteer "Openen" in het menu Bestand en selecteer een afbeelding op uw computer die u voor uw banner wilt gebruiken, zoals een bedrijfslogo, een foto van uzelf of een product dat u verkoopt. Wanneer de afbeelding wordt geopend, selecteert u "Dupliceren" in het menu Laag. Wijzig de bestemming in uw headerbestand, dat "Untitled-1" zou heten, tenzij u het al hebt opgeslagen. Klik op "OK" om de afbeelding als nieuwe laag aan je banner toe te voegen.

Stap 6

Selecteer "Transformeren" in het menu Bewerken en klik vervolgens op "Schaal". In de meeste gevallen is de hele afbeelding niet zichtbaar op de smalle banner, maar de omtrek ervan is zichtbaar nadat u 'Schalen' heeft geselecteerd. Sleep een willekeurige hoek van de omtrek van de afbeelding om het formaat voor uw banner aan te passen. Houd de "Shift"-toets ingedrukt terwijl u sleept om de beeldverhouding te vergrendelen. Druk op Enter." Sleep de afbeelding zodat deze aan de rechterkant van de banner staat.

Stap 7

Klik op het pictogram "Voorgrondkleur" in de werkbalk om de kleurkiezer te openen. Klik ergens aan de rechterkant van de banner zodat deze overeenkomt met de kleur in de Kleurkiezer en klik vervolgens op 'OK'.

Stap 8

Selecteer de "Rechthoek Tool" uit de Toolbox. Klik op het menu "Fill" en selecteer vervolgens het pictogram "Gradient" bovenaan de menu-opties. Sleep de cursor over de banner van net binnen de linkerkant van de afbeelding helemaal naar de linkerrand van de banner. Het maakt een rechthoek met een verloop met de kleur die u op de afbeelding hebt gevonden.

Stap 9

Zoek de laag "Rechthoek 1" in het deelvenster Lagen, de laag met de verlooprechthoek die u zojuist hebt toegevoegd. Sleep deze laag naar beneden om het de derde laag van boven te maken -- onder "Laag 1" en de laag die je tekst bevat. Klik op het menu "Dekking" bovenaan het deelvenster Lagen en sleep de schuifregelaar zodat deze ongeveer 50 procent is. Door de bovenste gradiënt semi-transparant te maken, kan deze worden samengevoegd met de gradiënt eronder, waardoor een rijke achtergrond ontstaat.

Stap 10

Selecteer de laag met uw tekst in het deelvenster Lagen. Klik op het menu "Layer", selecteer "Layer Style" en klik vervolgens op "Bevel & Emboss". Zorg ervoor dat het menu Stijl is ingesteld op "Emboss" en sleep de schuifregelaar "Diepte" naar links -- ongeveer "225" procent -- om slechts een klein beetje van dit effect aan de tekst toe te voegen.

Stap 11

Klik op de optie "Satijn" in het venster Laagstijl. Gebruik voor deze stijl een mengmodus van "Vermenigvuldigen" en verminder de dekking tot ongeveer "15" procent. Dit combineert de satijnstijl met de reliëfstijl. Pas desgewenst de instellingen aan en klik op "OK".

Sla de afbeelding op als een voor het web geoptimaliseerde banner door "Opslaan voor web" te selecteren in het menu Bestand. Selecteer "JPEG" in het menu Opmaak en gebruik een beeldkwaliteit tussen 75 en 80 procent. Dit creëert een afbeelding met een kleine bestandsgrootte, die snel door elke webbrowser kan worden geladen, zonder in te boeten aan beeldkwaliteit. Klik op "Opslaan" en selecteer een locatie om het bestand op uw computer op te slaan. Voeg na het sluiten van Photoshop het bestand toe aan uw webpagina.