Zelfstudie 17

Transparante knoppen voor het web maken

In deze zelfstudie leert u hoe u een fraaie, transparante knop met meerdere afbeeldingen maakt. Eerst maakt u een afbeelding om de vorm van de knop te bepalen. Vervolgens maakt u een afbeelding voor het slagschaduweffect en vervolgens een afbeelding voor het verloopeffect. Als u wilt, kunt u eerst een knop maken met één van de effecten. De volgende stappen zijn het toevoegen van tekst en het toevoegen van transparantie aan de knop.

    De vorm van de transparante knop maken

  1. Kies Bestand > Nieuw om een nieuwe afbeelding (80 x 40) te maken met de naam Sjabloon. Klik op het keuzerondje "Transparant", onder in het dialoogvenster Nieuwe afbeelding. Zie afbeelding 10.17.1 hieronder.


    Afbeelding 10.17.1

    1. Selecteer het gereedschap Rechthoekig selectiekader en gebruik de optie Afgeronde rechthoek, zoals u ziet in afbeelding 10.17.2. U kunt de gewenste afronding van de rechthoek invoeren. Klik en sleep om de selectie te maken. Zie afbeelding 10.17.3 voor het resultaat.


    Afbeelding 10.17.2


    Afbeelding 10.17.3

  2. Kopieer de selectie naar de lokale buffer door Bewerken > Selectie naar buffer kopiėren te kiezen*.

    * U gebruikt de lokale buffer omdat hiermee de transparantie behouden blijft en met het Klembord niet.

    Een afbeelding voor het slagschaduweffect maken

  3. Kies weer Bestand > Nieuw om een transparante afbeelding (80 x 40) te maken met de naam Slagschaduw.

    1. Kies Bewerken > Plakken uit buffer om de selectie uit Sjabloon (de eerste afbeelding die u hebt gemaakt) op te halen.

    2. Wijzig de voorgrondkleur in zwart, RGB (0, 0, 0).

    3. Kies Bewerken > Vullen... en selecteer Voorgrondkleur.

    4. Gebruik het gereedschap Afgerond rechthoekig selectiekader op de werkbalk om een gebied te selecteren dat ongeveer 5 pixels in straal groter is dan de oorspronkelijke afgeronde rechthoek.

    5. Kies Filter > Gaussiaans vervagen.... en stel de straal voor de vervaging van de afbeelding in op 5. Zie afbeelding 10.17.4.


      Afbeelding 10.17.4

    Een afbeelding voor het verloopeffect maken

  4. Kies Bestand > Nieuw om een derde afbeelding (80 x 40) te maken met de naam Verloop.

    1. Kies Bewerken > Plakken uit buffer om de selectie uit Sjabloon op te halen.

    2. Wijzig de voorgrondkleur in rood, RGB (255, 0, 0,), en de achtergrondkleur in wit, RGB (255, 255, 255).

    3. Gebruik het gereedschap Verloop op de werkbalk en selecteer het type Lineair met een dekking van 80. Plaats de cursor tegen de linkerzijde maar binnen het geselecteerde gebied. Klik vervolgens en sleep naar boven en naar links uit het geselecteerde gebied. Zo krijgt u een lineair verloop dat lijkt op het resultaat in afbeelding 10.17.5.


      Afbeelding 10.17.5

    Een afbeelding voor de transparante knop maken

  5. Kies Bestand > Nieuw om een vierde afbeelding (80 x 40) te maken met de naam Knop. U kunt nu de transparante knop samenstellen en de slagschaduw- en het verloopeffect in de knop opnemen. Zie afbeelding 10.17.6.

       
       Afbeelding 10.17.6

    1. Als u de afbeelding met de slagschaduw niet meteen ziet, opent u het menu Venster en kiest u Slagschaduw in de vensterlijst om de afbeelding te activeren. Vervolgens kiest u Bewerken > Naar buffer kopiėren om de afbeelding te kopiėren naar de lokale buffer.

    2. Selecteer de knopafbeelding of open het menu Venster en selecteer Knop om de knopafbeelding te activeren. Vervolgens kiest u Bewerken > Plakken uit buffer om de afbeelding met de slagschaduw op te halen. Kies Afbeelding > Object-/achtergrondopties om de dekking in te stellen op 70 en gebruik het gereedschap Selecteren en verplaatsen om de afbeelding ongeveer 3 pixels naar rechtsonder te verplaatsen. Zo ontstaat een schaduw onder de knop waardoor een driedimensionaal effect ontstaat.

    3. Open het menu Venster en selecteer Verloop om de verloopafbeelding te activeren. Vervolgens kiest u Bewerken > Naar buffer kopiėren om de afbeelding naar de lokale buffer te kopiėren.

    4. Haal deze verloopafbeelding in de knopafbeelding. Zie afbeelding 10.17.7.


    Afbeelding 10.17.7

    Tekst voor de transparante knop maken

  6. Selecteer het gereedschap Tekst op de werkbalk en klik op de afbeelding om het tekstdialoogvenster te openen. In dit dialoogvenster voert u de tekst in die op de knop moet worden weergegeven. In dit voorbeeld wordt een kleine knop gemaakt. Een tekengrootte van 9 is dus geschikt. U gebruikt wit als de lettertypekleur. Zie afbeelding 10.17.8.


    Afbeelding 10.17.8

    Transparantie toevoegen om de knop af te maken

  7. Kies Optimaliseren > Converteren en optimaliseren... om het dialoogvenster Converteren en optimaliseren te openen. Als u de indeling PNG kiest en Indexmodus inschakelt, schakelt u ook Transparantie in en selecteert u wit als de Randkleur (afbeelding 10.17.9). Als de oorspronkelijke afbeelding geen transparantie, bijvoorbeeld geen alfakanaal, heeft, is de optie Transparantie niet beschikbaar.


    Afbeelding 10.17.9

  8. U kunt een voorbeeld van de geoptimaliseerde afbeelding in de browser bekijken door Optimaliseren > Voorbeeld in browser te kiezen, zoals u ziet in afbeelding 10.17.10.

   
   Afbeelding 10.17.10