Editie 82 - Een lesje GFX
Deze rubriek is geschreven door Froodooo & -Matthijs-!
Vandaag gaan we een leuke, simpel te maken countdown maken met behulp van Imageready en Photsohop:
Maak een nieuw bestand aan. Afhankelijk van de grootte voor je countdown kun je elke grootte kiezen die je wilt. Selecteer vervolgens de Gradient Tool, zoek twee passende kleuren en vul je achtergrond hiermee op de background layer. Selecteer dan de Custom Shape Tool uit je toolbox:
Selecteer vervolgens de volgende shape:
Dit is overigens een standaard shape, dus hij hoeft niet apart gedownload te worden. Klik dan met je muis in de linkerbovenhoek van je scherm en sleep je muis naar rechts. Zoals je ziet, vormt de shape zich. Laat je muis los als de shape de juiste vorm heeft. Mocht hij niet op de juiste plek staan, dan kun je hem ook altijd nog verplaatsen door middel van de Move Tool. Wij hebben kleur # FFEBDD gebruikt voor deze shape. Voeg tot slot nog outer glow toe op de layer via de Blending Options. Klik met je rechtermuisknop op de layer, kies voor ‘Blending Options’ en vul de volgende waarden in:
Outer Glow:
Dan gaan we nu de vier vakken vullen. Selecteer de Pen Tool uit je toolbox en zoom in tot 300 á 400% met de Zoom Tool. Met de Pen Tool ga je vervolgens netjes via de lijntjes een vorm trekken:
Aangezien de Custom Shape zelf boven deze getekende vorm komt, hoeft het niet per sé netjes. Zolang het vakje gevuld is, is het goed. Dit doe je vervolgens ook voor de drie resterende vakken. Let er wel op dat de layer van de Custom Shape bovenaan de rest staat!
We gaan dan de vakken van wat betere kleuren voorzien. Klik met je rechtermuisknop de layer van het vakje links bovenin en ga naar 'Blending Options'. Neem de volgende instellingen over:
Inner Glow:
Gradient Overlay:
Om overbodig extra werk te voorkomen, slaan we deze style op zodat we deze kunnen toepassen op elke gewenste layer. Ga binnen het Blending Options scherm naar 'Styles' (helemaal bovenaan) en sla deze style op via 'New Style':
Klik op 'OK' om de instellingen op te slaan. Hou CTRL vervolgens ingedrukt en klik met je muis de drie de layers van de overige vakken aan. Ga dan naar 'Window' > 'Styles' en selecteer de zojuist gemaakte style. Als het goed is, zul je op elke geselecteerde layer de style krijgen die je net hebt gemaakt. Een laatste stap is nog nodig voor de onderste twee vakken. Bij 'Gradient Overlay' moet de optie 'reserve' worden aangevinkt:
Gradient Overlay:
Voor het overzicht voorzien we de layers van de vakken van nieuwe namen. Aangezien we met twee kleuren gaan werken (blauw en rood), geven we de layers ook deze namen om ze goed uit elkaar te kunnen houden. De naam van een layer kun je veranderen door met je rechtermuisknop op de betreffende layer te klikken en te kiezen voor 'Layer Proporties'.
Duplicate vervolgens de layers 'Blauw 1', 'Blauw 2', 'Blauw 3' en 'Blauw 4'. Geef deze direct de juiste namen, 'Blauw 1 copy' wordt bijvoorbeeld 'Rood 1'. Klik dan met je rechtermuisknop op de layer 'Rood 1' en ga naar 'Blending Options'. Verlaag bij 'Gradient Overlay' de opacity tot 45%:
Gradient Overlay:
Deze stap moet gemaakt worden bij elke 'Rood' layer. Zodra je dit gedaan hebt, moeten als het goed is alle vlakken rood zijn. Vink de oogjes uit van de vier rode layers, zodat deze weer blauw worden. Zorg er tevens voor dat de rode layers boven de blauwe broertjes staan. 'Rood 1' staat dus boven 'Blauw 1' en 'Rood 2' boven 'Blauw 2', etc. Doe je dit niet, dan kom je straks in de knoop. Let daar dus goed op!
Enkele kleine stappen zijn nog nodig voordat we over kunnen gaan op het Imageready gedeelte. Selecteer de Ellipse Tool en maak in het midden een rondje met dezelfde kleur als de Custom Shape zelf:
Rest ons enkel nog het toevoegen van de tekst. Wij hebben gekozen voor het Pricedown font (bekend van GTA), maar we laten je hier vrij in je keuze. Typ met de Tekst Tool het cijfer '3' (kleur: #1E1E29) en plaats deze met behulp van de Move Tool in het midden. Klik er met je rechtermuisknop op, ga naar 'Blending Options' en neem de volgende instellingen over:
Bevel and Emboss:
Gradient Overlay:
Sla deze style op via 'New Style' (zoals reeds uitgelegd). Maak dan twee nieuwe tekstlayers met de teksten '2' en '1'. Hou CTRL ingedrukt, selecteer beide layers en voeg de zojuist gemaakte style toe via 'Windows' > 'Style'. Vink vervolgens beide layers (die van '1' en '2') weer uit.
We zijn nu klaar met het Photoshop gedeelte, zodoende gaan we verder in Imageready. Sla eerst je bestand op via 'File' > 'Save as'. Switch vervolgens naar Imageready middels de sneltoets 'CTRL' + 'SHIFT' + 'M'.
Je zou het niet direct zeggen, maar het gedeelte in Imageready is verreweg het gemakkelijkste. Het is namelijk enkel een kwestie van op een logische manier de layers zichtbaar en onzichtbaar maken. Zorg er voor dat je in Imageready beschikt over het scherm 'Layer' (F7) en 'Animation' (via Window).
Op je Animation scherm zie je slechts één frame staan. Op dit frame vink je de volgende layers aan:
1. ‘3’
2. ‘Blauw 1’
3. ‘Blauw 2’
4. ‘Blauw 3’
5. ‘Blauw 4’
6. ‘Rood 1’
Let op: Dit geldt natuurlijk niet voor de standaard layers, zoals de background en de Custom shape.
Als het goed is, moet dit je eerste frame worden:
Maak dan een nieuw frame door op de volgende knop te drukken:
Aangezien het lastig is om in tekst uit te leggen wanneer welke frames moeten worden aangevinkt, zie je in het onderstaande tabel per frame welke layers moeten worden aangevinkt:
[table=header]
Frame 1|Frame 2|Frame 3|Frame 4|Frame 5|Frame 6|Frame 7|Frame 8|Frame 9|Frame 10|Frame 11|Frame 12
3|3|3|3|2|2|2|2|1|1|1|1
Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1|Blauw 1
Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2|Blauw 2
Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3|Blauw 3
Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4|Blauw 4
Rood 1|Rood 1|Rood 1|Rood 1|Rood 2|Rood 3|Rood 4||Rood 1|Rood 1|Rood 1| Rood 1
|Rood 2|Rood 2|Rood 2| Rood 3|Rood 4||||Rood 2|Rood 2|Rood 2
||Rood 3|Rood 3|Rood 4||||||Rood 3|Rood 3
|||Rood 4||||||||Rood 4
[/table]
[table=header]
Frame 13|Frame 14|Frame 15|Frame 16
Blauw 1|Blauw 1|Blauw 1|Blauw 1
Blauw 2|Blauw 2|Blauw 2|Blauw 2
Blauw 3|Blauw 3|Blauw 3|Blauw 3
Blauw 4|Blauw 4|Blauw 4|Blauw 4
Rood 2|Rood 3|Rood 4|
Rood 3|Rood 4||
Rood 4|||
[/table]
We stellen tot slot nog de vertraging in per frame. Klik op 'Frame 1', hou SHIFT ingedrukt en klik op 'Frame 15'. Zoals je ziet, worden alle tussengelegen frames geselecteerd. Klik op de '0 sec' (die er standaard staat) en stel de nieuwe tijd in: '0,06 sec'. De laatste frame, 'Frame 16', stel je in op '1 sec'.
Speel je animatie vervolgens af via de volgende knop, om te controleren of deze klopt:
Sla tot slot je animatie/bestand op via 'File' > 'Save Optimized As'!
2 reacties
Recommended Comments