website in photoshop cs2-2014.indd

Een website in Photoshop
Beeldschermen hebben
tegenwoordig een minimale
resolutie van 1024 x 768
Een webpagina van 1000
pixels breed is dan ook een
mooi formaat.
Open phtotoshop
cs2 of hoger
- kies file (bestand)
- kies new (nieuw)
Plaatjes zoeken
Zoek op het internet naar passende foto’s...
Natuurlijk mag je ook eigen fotografie gebruiken.
Plaats alle foto’s in de zelfde
map.
In dit voorbeeld wil ik een site maken voor een kinderboerderij.
Afbeeldingen opslaan
- gebruik de rechtermuisknop
om foto’s op te slaan op je
pc of laptop
Een website ontwerp in Photoshop
Het zoeken naar foto’s geeft
ook inspiratie voor de vormgeving. Zo geeft het plaatje
van de pauw en idee voor een
logo en de kleurstelling van
de site.
Foto’s plaatsen in photoshop
Je kunt op meerdere manieren
een foto toevoegen aan een
bestand.
mogelijkheid 1 is:
- via Openen
De foto wordt dan als een nieuw
document geopend
- nu kun je de foto kopieren
- ctrl + A = selecteren
- ctrl + C = copieren
Bestand plakken
- klik in het lege document
- kies ctrl + v = plakken
Een website ontwerp in Photoshop
De Website
In deze reader wordt uitgelegd hoe je een website
kunt maken. We maken een
traditoneel ontwerp Dat tegenwoordig nog veel wordt
gebruikt. Links het voor beeld
met de verschillende namen
van onderdelen
De header
Menubalk
Content
De aside
Footer
De header maken
Ik wil in de header meerdere foto’s plaatsen met
een overvloeieffect
Foto schalen
De geplakte foto wil ik kleiner
maken.
- kies Edit (bewerken)
- Transform
- Scale
Door op de rechter- onderanker te klikken een een
sleepbeweging naar binnen
te maken verklein je de foto
Een website ontwerp in Photoshop
De header maken (vervolg)
Het resultaat tot nu toe ( met deze foto’s)
Jij kunt natuurlijk heel andere foto’s en dus resultaat hebben
De konijnen
de foto is te hoog
Beeld weg knippen
onderste deel weg knippen
Hoe?
- kies de kader selectie-tool
- zorg dat de juiste layer (laag)
is aangeklikt
- selecteer het deel wat weg
moet.
- kies delete-toets
- hef activatie op (ctrl+D-toets)
Twee foto’s in elkaar
over laten vloeien
Eerst moet ik de foto met de
bokjes iets groter maken
door een deel te selecteren
Een website ontwerp in Photoshop
Beeld schalen
- Edit
- Transform
- Scale
Nu kun je het beeld uitrekken
Merk op dat ik de volgorde
van de lagen heb veranderd
De laag met de geiten ligt nu
boven op
Masker maken
- klik op het masker icoon
Er komt een wit vlak bij
Een verlooptint maken
- kies de verloop-tool
kies boven in
van zwart naar wit
- Maak een beweging van
rechts naar links
- zie dat het masker nu gevult
is met een beetje zwart
Een website ontwerp in Photoshop
Het maken van de header (vervolg
De magie van Maskers
Stel ik wil een deel van een
bloem weer iet meer naar voren laten komen
Met het penseel kun je nu een deel van het
verloop weghalen, waardoor het beeld er boven
(bloem)meer zichtbaar wordt
Beeld toevoegen
- kies het rechthoek selectie gereedschap
- kies uit Edit
- fill
- vul met witte kleur
(background)
Lagen samenvoegen
- Selecteeer alle layers
Behalve de Background
- kies met rechtermuisknop
- merge layers
versie cs5
Lagen samenvoegen
Een website ontwerp in Photoshop
De menubalk
Het maken van de menubalk is eenvoudig
- Maak een nieuwe laag
- maak met de selectiekader tool een rechthoek
- vul de rechthoek met een donkere kleur
de items geven we niet aan in het photoshop document
Content
Je kunt de achtergrond van de content het beste een lichte
tint geven. wit is wel erg hard. Ik kies voor een verloop tint.
De kleuren haal ik uit het logo (beeldmerk)
Hoe ?
- maak een nieuwe laag (noem deze content)
Een kleur uit een afbeelding kiezen
- klik op het pipet
- klik op een gewenste kleur
- verander van voorgrond-kleur
en pick een ander kleur
(color picking)
Een website ontwerp in Photoshop
Content (vervolg)
Een verloop maken
- klik op de verloop-tool
- kies uit de mogelijkheden
voor de verloop tussen
voor- en achtergrond
- Klik op de laag content
Die moet je dus eerst maken
- maak een sleepbeweging
van links naar rechts
andere richtingen mogen ook
Oeps...
Heel beeld gevuld
oplossing
- SLEEP DE LAAG CONTENT
NAAR BENEDEN
- Verlaag evt. de dekking
Een website ontwerp in Photoshop
De Aside (rechterkant)
Maak een nieuwe laag (layer)
We leren werken met een nieuwe tool
- kies een rechthoek gereedschap met ronde hoeken
klik even iets langer op het gereedschap
- maak aan de rechterkant een kader zoals in het voorbeeld
- onder Edit (bewerken)
kun je evt. de vorm bewerken
De footer
De footer is een kopie van het menu
De opdracht:
Maak eens verschillende website ontwerpen
oefen met name het maken van verloop tussen twee foto’s
Een website ontwerp in Photoshop

Download Report