Webpagina ontwerpen

In deze oefening bekijken we hoe we een webpagina in Photoshop ontwerpen.

Benodigde bestanden:

logo.ai

Bekijk hier de video-uitleg.

Opgave

  1. Maak een nieuw document aan (geen web-document) : 72 ppi, 1000px breed, 800px hoog.
  2. Maak een nieuwe laag aan en vul met wit.  Dit wordt de ‘nuttige ruimte’ waarop de inhoud van de pagina komt.
  3. Via het menu Afbeelding>Canvasgrootte wijzig je de breedte (niet de hoogte) naar 1400 px, waardoor links en rechts 200 px extra ruimte bijkomt. 
    Deze ruimte dient in ons ontwerp om te tonen wat de webpagina toont op een scherm dat breder is dan 1000 px.
  4. Vul de onderste laag ( onder de witte nuttige ruimte) met een verloop van zwart naar donkerbruin.
  5. We plaatsen twee keer onze Illustrator-illustratie van een broodje als achtergrond bovenop de zwart-bruine laag.
    Doe dat 2x via het menu Bestand> Gekoppelde plaatsen.  
    De broodjes moeten vanachter de witte nuttige ruimte uitsteken.

Via de laagmodus “Kleur tegenhouden” krijgen ze een oplichtend effect.


De bedoeling is dat deze afbeelding alle browserruimte opvult wanneer de browser meer dan 1000 px breed is.

  1. Sleep uit het liniaal (eventueel weergeven via Control-R) hulplijnen naar de witte randen van de nuttige ruimte.
  2. Voeg boven de witte nuttige ruimte de Illustrator-afbeelding van het broodje opnieuw toe (maar transformeer naar wat kleiner) en voeg ook de tekst DE         KNAPPERIGE SANDWICH toe (hier in Avenir (Black) 41 pt).
  3. We maken de navigatie aan:
    1. Sleep een selectie tussen de twee hulplijnen en vul op een nieuwe laag “menubalk” met geel (de achtergrond van de navigatie).
    2. Voeg de menutekst toe (voor elke knop een aparte tekstlaag).  Hier: Montserrat 30 pt).
    3. De actieve pagina is blauw gemarkeerd: maak op een nieuwe laag een selectie die je met blauw vult.
    4. Maak een nieuwe lagengroep aan

      en sleep alle lagen hierin, zodat alles netjes georganiseerd wordt.

      (je kan de lagengroep toeklappen zodat je lagenpallet niet overvol lijkt)
  4. We maken een fotocompositie aan met broodjes, die we op de echte website eventueel als een fotocarrousel kunnen gebruiken.
    1. Zoek op Google een drietal foto’s van broodjes die je copieert en plakt in je ontwerp.  Je schikt ze netjes (met een beetje overlap).
    2. Gebruik laagmaskers om de twee bovenste foto’s te laten overvloeien met diegene eronder.  Voor een ideaal resultaat werk je met een verloop op de laagmaskers.  Het verloopt sleep je best over het stuk waar beide foto’s overlappen.  Je kan dat overlappend stuk heel duidelijk zien wanneer je eerst overdrijft met het slepen van je verloop.  Daarna (zonder Control-Z) sleep je een nieuw verloop, enkel over het overlappende deel).

    3. Maak een nieuwe groep “Laagmaskers broodjes” aan en sleep de lagen erin.
    4. Wijzig de kleuren voor deze foto’s met een aanpassingslaag Kleurtoon/Verzadiging (bv. om de gele tinten wat feller te maken).
    5. Tenslotte sleep je een selectie over de beelden om ze te kadreren. Activeer de volledige groep en pas zo een masker toe op die volledige groep.  (de selectie wordt nu in een masker omgezet).
  5. We maken een bestelknop aan die we rechts in de hoofding plaatsen.
    1. We voegen een vectoriële vorm toe aan onze pagina (vergelijkbaar met een Illustrator-figuur):
       
      Klik op het pijltje naast de vorm in de optiebalk om meerdere vormen in te laden.  Kies daarna het tandwiel om nog extra vormen in te laden.

      Kies ‘Alle’ en druk op ‘OK’ om alle mogelijke vormen te zien.  Je kan hier nu het telefoontoestel selecteren en die vorm in je document slepen.
    2. De kleur van je telefoontoestel kan je bovenaan via de optiebalk regelen.
    3. We hebben plaats nodig om het telefoonnummer op het telefoontoestel te krijgen.
      1. Activeer de laag met je telefoontoetsel.
      2. Activeer het gereedschap ‘Padselectie’ en klik op je telefoontoestel, zodat de ankerpunten (cfr. Illustrator) tevoorschijn komen.
      3. Activeer het gereedschap ‘Direct selecteren’
      4. Trek een kader rond de twee onderste ankerpunten, zodat  je ze selecteert.  Gebruik daarna de pijltjestoetsen om ze naar beneden te brengen, en zo ruimte te creëren voor het telefoonnummer.
      5. Voeg het telefoonnummer en de tekst toe.
      6. Sleep de betrokken lagen in een aparte groep.
  6. We voegen nu rechts de knop ‘Bestel online’ toe (voor wie liever vanaf de computer bestelt).
    1. Sleep met het rechthoekgereedschap (cfr. rechthoeken in Illustrator) een rechthoek. Je kan het formaat met  zowel Control-T als met de pijltjesgereedschappen (cfr. Illustrator) nog wijzigen.
    2. De kleurvulling kan je naar een verloop omzetten, waarbij je zelf de twee kleuren lichtblauw en wit kiest.
    3. Voeg de teksten en de logo’s van PayPal en Visa/Mastercard toe.

  7. We voegen de rest van de pagina-inhoud toe:
    1. Zoek online enkele afbeeldingen van broodjes en plaats onder elkaar. Zorg dat ze even breed zijn.
    2. In plaats van te klikken met ons tekstgereedschap, gaan we slepen: we slepen een kader dat tussen de broodjes en de ‘Bestel online’-knop ligt.  Vul dit tekstkader met 5 paragrafen Lorem Ipsum tekst (aan te maken via www.lipsum.com > 5 paragraphs . copieer de aangemaakte tekst en plak in het tekstkader).
      Het voordeel van zo’n tekstkader is dat je erin kan klikken, waarna transformatiehendels verschijnen waarmee je het tekstkader kan verkleinen of vergroten.
      De titel ‘Kies een broodje’ is wat groter.
      Gebruik als lettertype Microsoft Sans Serif 16 pt, geen anti-alias, zodat de tekst mooi scherp blijft, net zoals in echte webpagina’s.
  8. We kunnen dit ontwerp nog verder uitwerken, maar het dient als basis om aan de klant voor te leggen. Indien die akkoord is met de stijl, kunnen we de rest van pagina en andere pagina’s verder uitwerken.
    Merk op dat in het eindresultaat het witte vlak met de nuttige ruimte uiteindelijk wat naar onderen is verschoven, zodat er bovenaan meer ademruimte vrijkomt.