Adobe Photoshop - Geanimeerde rand


Voorheen bestond er altijd een apart pakket genaamd Image Ready als aanvulling op Photoshop om simpele GIF animaties mee te maken. Sinds Creative Suite 3 is Image Ready echter geheel komen te vervallen maar gelukkig heeft Photoshop sindsdien zelf een mogelijkheid om animaties te maken op vrijwel dezelfde manier.

Geanimeerde rand

Maak een geanimeerde rand, bijvoorbeeld voor een banner. Neem een afbeelding van, in dit geval 468px bij 60px. Ga bovenin naar Image en kies hier Canvas Size. Zet hier de waardes op Pixels in plaats van Centimeters en tel dan bij zowel de hoogte als de breedte 5px op. Er komt dan een transparante rand om de banner heen te staan zoals hieronder.

Maak dan een nieuwe laag aan onder de originele laag en vul deze met zwart. Maak dan nog een laag aan en zet deze tussen de zwarte laag en de laag met de afbeelding.

Pak nu je gradient tool. Selecteer dan bovenin de werkbalk 'Reflected Gradient' en maak een buisachtige lijn. Selecteer hiervoor de kleur wit (voorgrondkleur) en laat deze overlopen naar een transparante achtergrond zoals je hieronder in de screenshot ziet.

Het resultaat is dan als volgt. Sleep dan de 'buis' naar links zodat hetgeen wat nu rechtsboven staat bovenin links komt te staan.

Animatie

Ga bovenin naar Window en kies hier Animation. Er opent dan een nieuw palet. Standaard is hier het eerste frame geselecteerd, kopieer deze door op het icoontje eronder te klikken direct naast de prullenbak. Het tweede frame is nu geselecteerd. Verplaats dan de buis weer naar rechts zodat de onderkant in de benedden in de rechterhoek komt te staan.

Selecteer dan het tweede frame en klik op het kleine icoontje rechtsboven in het palet. In het menu dat opent kies voor 'Tween' waarna onderstaand scherm opent. Vul hier achter 'Frames to Add' 100. Hoe hoger hier het getal hoe langer de animatie duurt.

Ga dan bovenin naar File en kies hier Save for web en sla het bestand als GIF op.