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

QuickNav

Webdesign Website from scratch

Website from scratch

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

 

 

1. Open een nieuw Photoshop document met een witte achtergrond. Kies File>New of druk op Ctrl+N

2. Teken een rondhoekig vierkant, en kies zelf je kleur. Ik heb voor groen gekozen.

websitefromscratch1.png

3. Leg een grijze Gradient over de groene kleur. Doe dit met de Gradient Tool, en zet de Opacity op 13%. De onderkant van de website achtergrond zal nu ietsje donkerder zijn.

websitefromscratch2.png

4. Teken een grote (gele) ellipsvormige cirkel.

websitefromscratch3.png

5. Open de Layer Style en pas de volgende instellingen toe bij Stroke: Size = 3px, position = outside

websitefromscratch4.png

En bij Outer Glow: Opacity = 55%

 

websitefromscratch5.png

Dit is het resultaat:

websitefromscratch6.png

6. Nu gaan we een menu creëeren. Teken een kleine rondhoekige rechthoek. En delete het bovenste deeltje ervan, zoals je hieronder kan zien (met de Select Tool, en druk dan op Delete). Vergeet om je layer te 'rasterizen'.

websitefromscratch7.png

7. Kopiëer deze layer zoveel keer als je wilt. Zet ze onder elkaar en teken dan een rechthoekige rechthoek, en zet deze aan de rechterkant.

websitefromscratch8.png

8. Zet tekst in het menu

websitefromscratch9.png

9. Voeg kleine vierkantjes toe (naast elke tekst) en zet bij Layer Style de optie Outer Glow aan. Je kan 1 van je menu's van kleur veranderen, zodat het lijkt of je er met je muis opstaat. Vergeet niet om je tekstkleur ook te veranderen.

websitefromscratch11.png

10. Teken nu de veter (de witte lijn die je hieronder ziet). En twee cirkels (met ellipse shape tool) en voeg Inner Shadow toe (via Layer Style).

websitefromscratch13.png

websitefromscratch12.png

11. De veter zelf, teken je ook met de Ellipse tool, en je knipt al de rest ervanaf. Verander dan de kleur ervan en zet hem op de juiste plaats (zoals hieronder).

websitefromscratch14.png

12. Zet de naam van je bedrijf erop.

websitefromscratch15.png

13. Nu is het tijd om de afbeelding erin te plaatsen.

websitefromscratch16.png

14. Om een mooie schaduw te maken, kopiëer de layer twee keer. Selecteer 1 van de 2 gekopiëerde layers en ga naar Hue/Saturation (onder Image>Adjustments). Pas de volgende instellingen toe.

websitefromscratch17.png

15. Selecteer nu het bovenste deel van deze layer en delete deze.

websitefromscratch18.png

16. Ga naar Filter>Gaussian Blur en zet bij de Layers, de 'Fill' op 33%

websitefromscratch19.png

17. Pas nu hetzelfde toe op de andere layer, alleen delete je hiervan het bovenste deel niet. Zet de Opacity van deze layer op 22%. Verplaats de andere layer een beetje, zoals hieronder.

websitefromscratch20.png

Dit is dan het resultaat.

Klik hier voor de originele link.