Knoppen maken met Photoshop
Een vaak gestelde vraag naar aanleiding van De HTML-Hoek is: Hoe maak je die knoppen? Daarom volgt hier een stap-voor-stap uitleg, voor Photoshop gebruikers. (Mocht je geen Photoshop hebben, dan kan je op het WWW ook interactief knoppen maken bij Pixelsite, wat overigens erg leuk werk is.)1. Maak een nieuw bestand (File/New), met het formaat van de uiteindelijke knop. In dit geval wordt de knop 140 bij 40 pixels.
2. Vul de achtergrond in met zwart (dat werkt fijner zometeen) en zoom een paar keer in.
3. Kies het `Paths' tabblad, en druk op het symbool van de pen.
4. Teken met vier klikjes een `klad-pad'. Het hoeft hier nog niet zo nauwkeurig, dat komt zometeen.
5. Kies nu de pijl (linkerknop) op het Paths tabblad. Verplaats de punten van het kladpad zo dat ze netjes in de hoeken liggen, en de lijnen precies 45 graden zijn. (Dit zie je aan de pixeltrappetjes; op een gegeven moment verdwijnen ze.)
6. Kopieer dit pad naar Path 1, door het balkje van `Work-path' te verslepen naar het kopieer-ikoontje (links van het vuilnisbakje).
7. Kopieer dit pad nog een keer.
8.Versleep nu in het venster de twee vertikale delen van het pad, met shift ingedrukt. Op die manier kan je ze alleen maar exact horizontaal verslepen (of vertikaal, of onder hoeken van 45 graden).
9. Kopieer dit pad nog een keer, en versleep het segmentje wat van het punt rechtsboven naar linksboven loopt naar de linker-benedenhoek van het venster. Verplaats die twee punten zo dat ze netjes in de hoek en onder 45 graden liggen.
10. Nogmaals kopieren en naar boven slepen (met shift ingedrukt).
Maak dan een nieuwe Layer aan (in het Layer tabblad) en selecteer die.
Vervolgens kies je een grijstint, zeg 20% grijs, van je `Swatches'
kaartje. (Het percentage grijs kan je zien in je Info palette, 20%K
moet je hebben). Vervolgens pak je in het Layers palette een laag op,
en sleept die naar het gevulde cirkeltje wat je onderaan het palette
ziet. Er zijn twee rondjes, eentje is gevuld. (op hetzelde rijtje als
het vuilnisbakje enzo). Daar moet je het pad op "laten vallen". Op
dat moment wordt het pad ingevuld, op de laag die je geselecteerd hebt.
Dan krijg je dit:
11. Vul nu de achtergrond in met de gewenste kleur. Selecteer de laag met de paden er in, en kies Overlay of Hard Light (afhankelijk van de achtergrondkleur die je gebruikt; Overlay is vaak het mooist maar werkt niet bij sommige kleuren) voor die laag.
12. Voeg tekst toe, en klaar is kees.
In de knoppen die ik gebruik in de HTML-Hoek heb ik voor de achtergrond `Filter/Render/Clouds' gebruikt met twee tinten blauw, en `Filter/Render/Lens Flare' voor het licht-effect.
