#spotify*

– gifset examples: spotify series – cutout tutorial – fonts: Poppins Bold (Google), Circular Std Black (azfonts.net) – tip: play with your export settings for the cleanest result. exporting gifs with large areas of solid colors can sometimes produce a noticeable pixelated effect (see example below; left). while I normally export using adaptive-diffusion, sometimes selective-diffusion works better. try out different combos until you get something smooth!

1. First, download the 177 x 315 px template here. [or here to get a real size print screen template so you can resize the way you want - it’s way heavier].

2. When you open it, you’ll have these following layers inside the folder to edit. I recommend you to edit this psd having the Timeline activated with frame animation option showing.

Their names are already indicating what they are doing, although the “Optional - Gradient” it’s something Spotify have, I didn’t used this on my previous gifsets [x, x].

Anyway, you have the “Track Name” folder, which has 3 layers that make the words move when they doesn’t fit the space (and I also show them going back and forth), but you may delete all the frames except the first one if your track name doesn’t need to move. Plus, the “READ IT AND HIDE IT LATER” folder it’s just a little note about how to make the track name moves in case you need it, but I’ll explain here shortly in the end.

3. Now, I recommed you to convert your frame animation into Video Timeline, especially if you have an animation for your track name. For this, click on the corner icon aside “Forever” and will look like this:

4. Already on your gif file, you’ll have to crop your gif with the Ratio 177 x 315, resize the file to Width: 177 px and to Height: 315 px and transform it into Video Timeline as well. Then, you may grab the template file out of the editor, leaving above the gif file, and drag the “Spotify Template by @novacane” folder inside the gif file like this:

5. Make sure to fit the template perfectly on the file with the guidelines Photoshop has. If your PS version doesn’t have it, you can drag the template folder with the background (select both) and then delete the background now in your gif file. Also, duplicate the template folder too so you can make it lasts the whole gif (I think it’s more practical to duplicate than to change all the components times).

And done! ;) I hope this was useful and understandable!

P.S.: To make the Track Name moves you basically need to delete all the layers inside the “Track Name” folder except the first one, that you’ll edit. For each letter you’ll need to add that doesn't fit in the track name space, you’ll duplicate the text layer and then you’ll remove the first letter and add another one at the end (also hide the layers of text you just made so that it doesn't get messy). When you finish it, duplicate the first frame (the icon next to the trash one) and and go select the next text layer to show. Create frames and show layers until you finish the whole name and then create frames to show the text layers in the reverse order, so you can create the going back and forth effect. The frames’ time is already the way I think is appropriate, but change it if necessary.