Glowtext, written & copyrighted by Gushe

Toch leuk hé; zo'n mooie gloed over je text of andere plaatjes?
Altijd al willen weten hoe het zelf te doen? Met Photoshop is het zeer eenvoudig; zelfs zonder enige kennis van animaties!
Je zult ondertussen ook leren gebruik maken van Clipping Masks.


Stap 1.
Maak de achtergrond van het plaatje waar je de text op wil hebben; de text mag je ook al toevoegen.
Bij mij ziet het er nu zo uit:

Het Layer venster ziet er zo uit:

[ We zullen het Layer venster nog gebruiken maar om de tutorial zo overzichtelijk mogelijk te houden ga ik geen plaatjes van het Layer-venster meer plaatsen, hier kan in principe toch weinig fout gaan. ]

Stap 2.
Maak een nieuwe Layer & plaats die Boven je text layer.
Kies nu de Gradient Tool & selecteer deze Gradient:

met de volgende Gradient:

(Foreground to Transparent)
[ De kleur van de Gradient kan je zelf kiezen; het is de 'foreground color' in Photoshop bij je 2 kleurenvierkantjes ]
Ik kies nu voor Rood.
De Gradient bar ziet er dan als volgt uit:

De kleurenvierkantjes:

Stap 3.
Teken een Gradient naar keuze op je nieuwe Layer.
Het plaatje ziet er dan als volgt uit:

Ga nu naar je Layer venster en rechterklik op de Layer met de Gradient.Kies dan voor 'Create Clipping Mask'.
Je plaatje ziet er nu als volgt uit:

-> INFO: Een Clippin Mask maakt letterlijk een Masker. De layer waar je een Clipping Mask van maakt gaat zich over de layer daaronder leggen.
Als je bijvoorbeeld op Layer1 een cirkel zet, je zet een ruitjesmotiefje op layer2 en je maakt van Layer2 een Clipping Mask, ga je een cirkel zien met een ruitjesmotief. Het doet dus ongeveer hetzelfde als 'Pattern Overlay' in het Blending Options menu, alleen kan je met Clipping Mask bijvoorbeeld een plaatje over je text/vorm zetten.

Stap 4.
Selecteer je 'Move Tool' (of druk op V) & verplaats de Gradient naar helemaal vooraan de text, totdat je hem niet mee ziet.
Het plaatje ziet er nu weer uit zoals in Stap 1.
Ge nu naar Window>Animation, nu komt het Animatievensterje tevoorschijn.
In dat Animatievenstertje kies je voor de Tab 'Animation (Frames)'.
[ Als er ipv 'Animation (Frames)', 'Animation (Timeline)' staat klik je rechtsonder op de volgende knop:

Nu zou er Animation (Frames) moeten staan. ]

Stap 5.
In het Animatieventster klik je op de volgende knop:
.
Nog steeds in het Animatievenster selecteer je nu het Tweede Frame. Selecteer weer de 'Move Tool' (of druk V) & verplaats nu de Gradient naar volledig achter je text. (Zorg ervoor dat je mooi recht verplaatst!)
Nu gaan we animeren. Zoals de meesten waarschijnlijk wel weten is een animatie een opeenvolging van verschillende plaatjes, als je nu een beetje nadenkt kan je waarschijnlijk wel bedenken dat we gewoon de Gradient gewoon over de text gaan laten schuiven. Gelukkig heeft Photoshop hier een handige optie voor, de TWAIN.
-> INFO: TWAIN is de naam voor het automatisch animeren van bepaalde dingen. Zo kies je het beginpunt, desnoods enkele middenpunten & het eindpunt van bijvoorbeeld een balletje, als we dit dan TWAINen lijkt het of het balletje beweegt. Dit gaat natuurlijk weel sneller dan altijd het balletje een beetje verschuiven & altijd opnieuw opslaan. (in Flash animaties wordt TWAIN vaak gebruikt)
Als je even nadenkt zul je wel bedenken dat we natuurlijk een bepaalde tijd tussen elke 'Frame' moeten laten afspelen, dit noemt men de Delay en deze zullen we voor de gemakkelijkheid voor het TWAINen zelf al instellen.
Kijk hiervoor naar de 2 Frames die in ons Animatievenstertje staan, onder de text staat iets van een 'xx,xx' sec. (Bij mij stond er 10 sec)
Om het mooiste Glow effect te krijgen zetten we deze op 0,1 sec, dit kan je gemakkelijk doen door op het zwarte pijltje rechtsonder de Frame te klikken en '0.1 seconds' te kiezen.

Stap 6.
Nu komt het animeren zelf, en je zult merken dat het eigenlijk zeer gemakkelijk is!
Selecteer de 2 Frames en klik onderaan het Animatievenstertje op de volgende knop:

het Tween (is hetzelfde als TWAIN) venstertje verschijnt nu.
In dit venstertje moet moet je maar 1 ding veranderen; 'Frames to Add', dit moet je naargelang de lengte van je text & de snelheid van je Glow naar believen invullen.
Voor deze button ter grootte van een Userbar koos ik 50.
Klik op OK en je zult in het Animatievenstertje nu zo'n 52 Frames zien. (De 2 Frames die je had gemaakt & de 50 tussengevoegde Frames)
Om je animtie te bekijken kan je onderaan het Animatievenstertje op de Play toets drukken.
Als je vind dat je te weinig/te veel Frames hebt tussengevoegd selecteer je in het Animatievenstertje alle Frames buiten het eerste & het laatste en je drukt op Delete.
Herhaal nu het Tweenen (om de andere benaming eens te gebruiken) pas het aantal tussen te voegen Frames aan.
De Animatie is gemaakt & het lijkt of er verschijnt een Glow over je text!

Stap 7.
Nu moeten we het nog opslaan, dit gebeurt niet zoals een gewone Animatie door het als .gif op te slaan.
Allereerst gaan we ervoor zorgen dat onze animatie oneindig blijft door lopen, als de Glow maar 1x over je text loopt is dit niet zo mooi hé.
Dit kan je zeer eenvoudig doen door linksonder in het Animatievenstertje de 'Once' in 'Forever' te veranderen.
Om het op te slaan ge je naar File>Save for Web & Devices. Normaalgezien staat hier alles al juist & kan je gewoon rechtboven op 'Save' klikken.
Geeft het een gepaste naam & sla het op, upload het naar een Site & opscheppen maar! ;)