Studeer aan de KdG en leer websites maken.
Kies Handelswetenschappen en Bedrijfskunde, Event- en Project Management.
Banner

QuickNav

Webdesign Fotolayout

Fotolayout

Gebruikerswaardering: / 1
LaagsteHoogste 
smaller text tool iconmedium text tool iconlarger text tool icon

photographiclayout (13)

Stap1 Creeer een nieuw document met volgende afmetingen: 1080 op 1080 pixels. Nu gaan we dit vullen met een solide kleur: #CDECFF

photographiclayout (00).png

Stap 2 We gaan de navigatie achtergrond laag maken. Maak een nieuwe laag en gebruik een afgeronde rechthoek gereedschap. Maak een navigatie van 860 op 120 pixels in het midden bovenaan het document zodat enkel de onderste rondingen zichtbaar zijn. Vul de selectie met de kleur: #151515

photographiclayout (01).png

Stap 3 Op de navigatie achtergrond laag maak je een degrade en voeg de volgende instellingen in.

photographiclayout (02).png

Stap 4 Nu gaan we tekstlinks toevoegen die gaan dienen als navigatie voor de site. Selecteer het tekst gereedschap van de gereedschapsbox en voeg wat namen in die je zou gebruiken voor een fotografiesite. Ik heb gekosen voor home, about, portfolio, services, contact. Het font dat ik gebruikt heb is Verdana 16pt en de kleuren zijn #EAEAEA voor de links en voor de lijntjes tussen de #010101 tekst.

photographiclayout (03).png

Stap 5 Vervolgens voegen we het logo/header toe. Dus creeer een nieuwe laag en gebruik makend van de afgeronde rechthoek gereedschap en maak een seletie van200 op 240 pixels (met een radius van) op de rechterkant van de navigatie. Selecteer het degrade gereedschap en zet het op radiaal. Zet de voorgrondkleur op #E0E1E1 en de achtergrondkleur op #F1F1F1. Vul de selectie met een degrade.

photographiclayout (05).png

Stap6 Gebruik makend van de tekst tool voeg je de naam van de site toe en een beschrijving eronder. De kleuren die gebruikt worden zijn #272727 voor de donkere kleur en #7b7b7b voor de lichtere kleur.

photographiclayout (06).png

Stap 7 Nu gaan we het eigenlijke logo maken. Als je geen logo van begin wil maken kan je een pregemaakt logo kiezen uit de afbeeldingen bibliotheek van photoshop. Ik heb het opgevuld met #85c7ff en een kleine outer glow toegevoegd (Layer > Layer Style > Outer Glow).

 

photographiclayout (07).png

Stap 8 Creer een nieuwe laag voor de bovenst achtergrond laag. Gebruik de afgeronde rechthoek gereedschap en maak een selectie van 860 op 590 en vul het met #18181.

photographiclayout (08).png

Stap 9 Creeer een nieuwe laag en maak een afgeronde selectie van 860 op 400 pixels aan de onderkant van de achtergrond, laat een 10px marge op de bodem. Vul deze selectie met puur wit.

photographiclayout (09).png

Stap 10 Vul wat dummy tekst in bovenaan. De kleur die ik heb gebruikt is #85C7FF.

photographiclayout (10).png

Stap 11 Nu gaan we een scheiding toevoegen tussen de 2 paragrafen. Op een nieuwe laag maken we een selectie van 40 op180. Vul de selectie met een lineaire degradé van #181818 tot #1e1e1e.

photographiclayout (11).png

Stap 12 Dupliceer de scheidingslijn en ga naar Edit > Transform > Flip Horizontally. Verplaats de gekopieerde laag naar rechts zodat er 1 pixel ruimte overblijft tussen het origineel en het gekopieerde.

photographiclayout (12).png

Stap 13 Vul de overige ruimte in met wat tekst en foto's. En voila je bent klaar!

photographiclayout (13).png

 

Klik hier voor de originele link