Professionele website-bouwers maken vaak prachtige logo’s voor de header van de openingspagina. In deze workshop leer je hoe je ze zelf kunt maken met iWeb en een beetje hulp van Pages.
iWeb is een hele aantrekkelijke webeditor als je zelf niets van HTML, PHP of CSS weet. Met dit programma werk je namelijk aan websites zoals je in Pages werkt aan posters. Je hoeft geen regel broncode te typen. In deze workshop laten we de mogelijkheden van iWeb zien door een header te ontwerpen. Een header is meestal het ´logo´ van je website; het is het eerste wat de bezoekers zien en waarschijnlijk het meest herkenbare onderdeel van de website. Professionele webdesigners maken logo´s meestal met Photoshop en plaatsen ze in de site met Dreamweaver. In iWeb hoeft dat dus niet: op een kleine sluiproute na, kun je de hele banner ontwerpen en daarna online zetten met dit programma. En je zult verrast zijn door de mogelijkheden, want die vallen zeker niet tegen!
1: Schuiven
Schuif allereerst de titel van de website naar beneden. Daardoor zal de hele inhoud van de pagina naar beneden schuiven, zodat je genoeg ruimte hebt voor een header.
De iPhone 14 Pro nu tot €10 korting per maand!
Heb je al internet van KPN thuis? Profiteer dan van extra voordelen
2: Vorm een rechthoek
Ga naar het menu ‘Vorm’ en selecteer de rechthoek. Deze verschijnt nu op de pagina. Maak deze vorm net zo breed als de lay-out en zet via het info-venster de omlijning uit (zet de optie ‘Lijn’ op ‘geen’).
3: Verloopje
Zet nu de optie ‘Vulling’ in het info-venster op ‘Geavanceerde verlooptint’ en zet ‘Hoek’ op 90°. Klik daarna op de linkerschuifknop met daaraan een blokje, dat onder de voorvertoning van de verlooptint hangt.
4: Kleurenkiezer
Nu opent het Kleuren-venster. Pas de geselecteerde kleur naar eigen wens aan en stel de begin- en eindkleur van het verloop in. Voeg een derde tussenkleur toe door op de voorvertoning te klikken.
5: Titel toevoegen
Voeg nu een tekstvak toe aan de header om een titel toe te voegen. Klik op de knop ‘Letter’ voor het venster ‘Lettertypen’ en pas het lettertype en de lettergrootte naar eigen wens en smaak aan.
6: Streepjes en stijlen
Voeg via het info-venster een schaduw toe aan de titel. Kopieer en plak vervolgens het vierkant met het verloopje en vervorm de gekopieerde rechthoek tot een reepje met dezelfde hoogte als het origineel.
7: Verloop omdraaien
Selecteer dit reepje en open het info-venster. Zet de hoek van de verlooptint op 270°. Kopieer en plak het reepje en plaats het links van de eerste. Herhaal deze stap een aantal keren.
8: Posities
Sleep deze rij over het vierkant. De kleuren vloeien nu (als het goed is) mooi in elkaar over, maar de titel wordt onleesbaar. Ctrl-klik daarom op de titel en selecteer de optie ‘Plaats vooraan’.
9: Geheime Pages-truc!
In Pages kun je zelf een vorm tekenen. Ga hiervoor naar het gereedschap ‘Vorm’ en selecteer de Pen. Nu gaan we een pad tekenen dat een nieuwe vorm zal opleveren.
10: Streepjes en stijlen
Houdt de shift-toets ingedrukt terwijl je drie keer klikt met de pen (zo maak je lijnen met een hoek van 90°). Klik en sleep om een curve te maken. Teken in alle rust een vorm (dat kan best lastig zijn).
11: Terug naar iWeb
Stel de lijn van deze vorm (via het info-venster) in op ‘Geen’ en kopieer en plak de vorm naar iWeb. Plaats de vorm precies over de randen van het vierkant, ook al vervormt hij daardoor een beetje.
12: Doorzichtig
Zorg dat de vorm gevuld is met een witte kleur, ga naar de optie ‘Ondoorzichtigheid’ onder het tabblad ‘Afbeeldingsinfo’ in het info-venster en stel deze in op ongeveer 20 à 30 procent.
13: Versieren met sterretjes
Versier de header met een ster en wat tekst. Bij een ster-vorm kun je de punten scherper of vlakker maken met de blauwe lijn, terwijl je het aantal punten kunt instellen met de schuifbalk.
14: De titel
Ctrl-klik nu op de titel die je in stap 1 naar beneden hebt verschoven en selecteer de optie ‘Plaats vooraan’, zodat hij niet achter de header kan verdwijnen.
15: Opschuiven
Sleep de titel nu in de header, zodat de lay-out weer omhoog schuift en er netjes tegenaan staat. Dubbelklik op de titel om je eigen tekst in te vullen. Nu heb je zelf je eigen website-header gemaakt!
Praat mee!