Aan het eind van de les zul je het volgende kunnen:
- Je ontwerp verdelen in verschillende te exporteren afbeeldingen
- Aangeven in welke type afbeeldingen je kan exporteren, en wat je waarvoor gebruikt
- De geëxporteerde afbeeldingen in html/css gebruiken voor je website layout
Opstarten: zet het PS ontwerp en de basis website klaar
1) Download de oefen PSD en open het bestand (in photoshop)
2) Maak een kopie van website_basis en noem hem website_les1
3) Open de map website_les1 in je code editor (edge code of brackets)
4) Controleer of je echt in de juiste map werkt!
1) Bepaal de verschillende te exporteren onderdelen v/d PSD
Kijk in photoshop naar het ontwerp en zet eerst alle inhoud lagen uit, zodat alleen de achtergronden van de layout zichtbaar zijn:
Dit is het eindresultaat van je website als je deze opdracht hebt voltooid.
b) Inhoud achtergrond
De Inhoud achtergrond is op te delen in 3 onderdelen:
globale achtergrond
selecteer een klein stukje waarin je een hele breedte van het lichtblauw en een hele breedte van het dongerblauw pakt
2. globale_achtergrond_spot
selecteer de hele breedte van het document en tot bijna onderaan, zodat je niet te vroeg het effect afsnijdt.
3. inhoud_achtergrond_boven
4. inhoud_achtergrond_midden
5. inhoud_achtergrond_onder
Let op dat je de schaduwen ook in je selectie meeneemt.
Maak gebruik van guides om alle 3 de afbeeldingen even breedte te maken.
Klik hier voor een voorbeeld van het gebruik van de segment tool.
 |
| Eindresultaat |
De layout is grof in 2 onderdelen op te delen:
a) Globale achtergrond
b) Inhoud achtergrond
Verder opdelen
De Globale achtergrond is op te delen in 2 onderdelen:
1. globale_achtergrond_patroon
Dit is het donkerblauw/lichtblauw stroken patroon
2. globale_achtergrond_spot
Dit is het gloed effect of spotlight effect wat bovenaan gecentreerd staat over het "globale achtergrond patroon"De Inhoud achtergrond is op te delen in 3 onderdelen:
1. inhoud_achtergrond_boven
2. inhoud_achtergrond_midden
3. inhoud_achtergrond_onder
Overzicht opdeling van de layout
Om de gehele layout (zie de eerste afbeelding) achtergronden uit te knippen in plaatjes. Doe je dit in 5 afbeeldingen:
globale achtergrond
1. globale_achtergrond_patroon
2. globale_achtergrond_spot
inhoud achtergrond
3. inhoud_achtergrond_boven
4. inhoud_achtergrond_midden
5. inhoud_achtergrond_onder
5. inhoud_achtergrond_onder
2) Exporteer de onderdelen uit de PSD als afbeeldingen
Je gaat nu de 5 afbeeldingen (hierboven opgesomd) opslaan als afbeelding. Dit doe je met behulp van de segment tool (in het engels heet dit slice).
1) Met de segment tool selecteer je het gedeelte wat je wilt opslaan als afbeelding
2) Vervolgens klik je op: bestand > opslaan voor web
3) Selecteer het juiste bestandstype (gif, jpeg, of png) en klik op opslaan
Let op: bij het opslaan kun je het beste kiezen voor "Segmenten: Geselecteerde segmenten" anders krijg je heel veel extra afbeeldingen die je niet nodig hebt.
Doe dit voor alle 5 de afbeeldingen en geef ze een logische naam:
1. globale_achtergrond_patroonselecteer een klein stukje waarin je een hele breedte van het lichtblauw en een hele breedte van het dongerblauw pakt
2. globale_achtergrond_spot
selecteer de hele breedte van het document en tot bijna onderaan, zodat je niet te vroeg het effect afsnijdt.
3. inhoud_achtergrond_boven
4. inhoud_achtergrond_midden
5. inhoud_achtergrond_onder
Let op dat je de schaduwen ook in je selectie meeneemt.
Maak gebruik van guides om alle 3 de afbeeldingen even breedte te maken.
Klik hier voor een voorbeeld van het gebruik van de segment tool.
3) Bouw de layout in de website met de geexporteerde afbeeldingen
1) Bepaal in welk HTML element de afbeelding als achtergrond moet worden geplaatst.
(Maak hiervoor eventueel een nieuw HTML element aan)
2) Stijl dit HTML element met CSS zodat deze de juiste achtergrond getoond wordt en de juiste positie en afmeting heeft.
In de HTML/CSS heb je alleen de volgende "onderdelen" nodig
Zet de globale_achtergrond_patroon als achtergrond-afbeelding op de body, maak voor de overige 4 onderdelen div's
Afsluiting
Als het goed is, moet je aan het eind van de les antwoorden kunnen geven op de volgende vragen:
- Hoe verdeel je het ontwerp in verschillende te exporteren onderdelen?
- Hoe exporteer je losse afbeeldingen uit Photoshop?
- In welk type afbeeldingen kan je exporteren, en wat gebruik je waarvoor?
- Hoe zet je de geëxporteerde afbeeldingen in html/css?
