Met de webtools van Photoshop kunt u heel eenvoudig de elementen van uw webpagina's maken of volledige webpagina's uitvoeren in vooraf ingestelde of aangepaste indelingen.

  • Met lagen en segmenten kunt u webpagina's en de interface-elementen voor deze pagina's ontwerpen. (Zie Lagen en webpagina's segmenteren.)

  • Met laagsamenstellingen kunt u experimenteren met verschillende paginasamenstellingen of kunt u verschillende versies van een pagina exporteren. (Zie Laagsamenstellingen.)

  • Maak rollovertekst of knopillustraties en importeer deze naar Dreamweaver of Flash.

  • Maak webanimaties met het deelvenster Animatie en exporteer deze animaties als geanimeerde GIF-afbeeldingen of QuickTime-bestanden. Zie Frameanimaties maken.

  • Gebruik Adobe Bridge om een webfotogalerie te maken, zodat u een reeks afbeeldingen met gebruik van professioneel ogende sjablonen snel kunt omzetten in een interactieve website.

Voor een video over het ontwerpen van websites met Photoshop en Dreamweaver gaat u naar Photoshop openen vanuit Dreamweaver om een webafbeelding te verbeteren.

Rolloverafbeeldingen maken

Een rollover is een knop of afbeelding op een webpagina die verandert wanneer u de muis erboven plaatst. U hebt minstens twee afbeeldingen nodig om een rollover te maken: een primaire afbeelding voor de normale staat en een secundaire afbeelding voor de gewijzigde staat.

Photoshop beschikt over een aantal nuttige tools voor het maken van rolloverafbeeldingen:

  • U kunt primaire of secundaire afbeeldingen maken met lagen. Maak de inhoud op één laag en dupliceer en bewerk deze laag om vergelijkbare inhoud te maken waarbij de uitlijning tussen de twee lagen behouden blijft. U maakt het rollovereffect door de laagstijl, zichtbaarheid of positie van de laag te wijzigen, kleur- of toonaanpassingen aan te brengen of filtereffecten toe te passen. Zie Lagen dupliceren.

  • U kunt laagstijlen ook gebruiken om effecten, zoals bijvoorbeeld kleurbedekkingen, slagschaduwen, gloed of reliëf toe te passen op de primaire laag. Als u een rolloverpaar wilt maken, schakelt u de laagstijl in of uit en slaat u beide staten van de afbeelding op. Zie Laageffecten en laagstijlen.

  • Gebruik de vooraf ingestelde knopstijlen in het deelvenster Stijlen om snel rolloverknoppen te maken met de staten normaal, muisbeweging en muisklik. Teken een vorm met de tool Rechthoek en pas een stijl toe, zoals Schuine kant - normaal, om de rechthoek automatisch om te zetten in een knop. Kopieer de laag en pas andere vooraf ingestelde stijlen toe, zoals Schuine kant - muisbeweging om de andere knopstaten te maken. Sla iedere laag op als een afzonderlijke afbeelding om de set met rolloverknoppen te voltooien.

  • In het dialoogvenster Opslaan voor web en apparaten kunt u rolloverafbeeldingen met een optimale bestandsgrootte opslaan in een indeling die compatibel is met het web. Zie Afbeelding optimaliseren.

Opmerking:

Wanneer u rolloverafbeeldingen opslaat, maakt u aan de hand van een naamgevingsconventie onderscheid tussen de primaire afbeelding (niet-rolloverstaat) en de secundaire afbeelding (rolloverstaat).

Nadat u een set rolloverafbeeldingen hebt gemaakt in Photoshop, kunt u de afbeeldingen met gebruik van Dreamweaver op een webpagina plaatsen en automatisch de Javascript-code voor de rolloveractie toevoegen.

Exporteren naar Zoomify

U kunt afbeeldingen met een hoge resolutie op het web plaatsen. Gebruikers kunnen dan pannen en zoomen om meer details te zien. Afbeeldingen van standaardgrootte worden net zo snel gedownload als een JPEG-bestand van vergelijkbare grootte. Photoshop exporteert het HTML-bestand en de JPEG-bestanden die u kunt uploaden naar uw webserver.

  1. Kies Bestand > Exporteren > Zoomify en stel exportopties in.

    Sjabloon

    Hiermee stelt u de achtergrond en de navigatie in voor de afbeelding die in de browser wordt weergegeven.

    Uitvoerlocatie

    Hiermee geeft u de locatie en de naam van het bestand op.

    Opties voor afbeeldingen naast elkaar

    Hiermee bepaalt u de kwaliteit van de afbeelding.

    Browseropties

    Hiermee stelt u de pixelbreedte en -hoogte in voor de standaardafbeelding in de browser van de gebruiker.

  2. Upload de HTML- en afbeeldingsbestanden naar uw webserver.

Werken met hexadecimale kleurwaarden

Photoshop kan de hexadecimale waarden van afbeeldingskleuren weergeven of de hexadecimale waarde van een kleur kopiëren voor gebruik in een HTML-bestand.

Hexadecimale waarden voor kleuren weergeven in het deelvenster Info

  1. Kies Venster > Info of klik op het tabblad van het deelvenster Info om het deelvenster weer te geven.
  2. Kies Deelvensteropties in het menu van het deelvenster. Kies Webkleur bij Modus onder Eerste kleurinfo of Tweede kleurinfo en klik op OK.
  3. Plaats de muisaanwijzer boven de kleur waarvoor u hexadecimale waarden wilt weergeven.

Een kleur kopiëren als een hexadecimale waarde

Photoshop kopieert kleuren als een HTML COLOR-kenmerk waarin de hexadecimale waarde (color=#xxyyzz) opgenomen is of als alleen de hexadecimale waarde.

  1. Voer een van de volgende handelingen uit:
    • Selecteer het pipet en verplaats de aanwijzer over de kleur die u wilt kopiëren. Klik met de rechtermuisknop (Windows) of houd Control ingedrukt en klik (Mac OS). Kies vervolgens Kleur kopiëren als HTML of Hexadecimale code van kleur kopiëren.

    • Stel de voorgrondkleur in in het deelvenster Kleur, het deelvenster Stalen of de Adobe Kleurkiezer. Kies Kleur kopiëren als HTML of Hexadecimale code van kleur kopiëren in het menu van het deelvenster Kleur.

    • Klik in het dialoogvenster Opslaan voor web op het kleurstaal of kies Matte > Overige. Klik in de Adobe Kleurkiezer met de rechtermuisknop op de hexadecimale waarde en kies Kopiëren.

  2. Open het gewenste bestand in een HTML-bewerkingstoepassing en kies Bewerken > Plakken.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid