#katiectalksalot

SEVERAL GIFS IN ONE:

so we’re going to use layer masks to create the four-in-one gif. you can apply this method for any square/rectangular gifs, so for example if you want to put five gifs in a line instead you can adjust the sizing and make that work.

the most important thing is to first work out what size you want each gif to be. i like to map it out with black rectangles first so i know exactly what size i’m using and that the spacing between each one still works (tumblr has a spacing of 4px so i just maintain that throughout my mapping). so these are a size of 132x275px:

now i know exactly what size i’m using, i can get started! first you’re just going to make your gif as you usually would with your usual colouring:

i’m then going to go to image > canvas size and resize this to the 132x275px size i decided on earlier:

that’s then given me the size that i want! you can move this gif layer around to then sit nicely in your new canvas so it’s centred nicely, and then i put all of my layers into one single folder on the layers panel.

i’m then going to select the canvas using the rectangular marquee tool so that the entire canvas shape is selected (this is really important or the area you want to mask will not be defined), and then add a layer mask as so:

this will effectively ‘set’ your gif at those exact dimensions. i’m then going to go back to my image > canvas size and alter the canvas to the size i want the final gif to be at, for this one i’ll alter the width to 540px as that’s tumblr’s ideal width size:

you can now move this gif along to place it where you’d like on this canvas, so i just repositioned this to the very left hand side so it’s the first gif in the row:

you can then repeat this for all your other gifs! top tip: make all your gifs the same length of caps for ease. it is possible to adjust your gif length using the timeline on the animation window if need be, but it’s a lot easier if you just make all your gifs the same number of frames. when all the other gifs are done, we get this:

as you can see, i didn’t make all these gifs the same number of caps so i’ve just dragged the time bar at the top along to the place where my shortest gif runs out when i press play. then i can save and ta-da, all done!

USING OTHER SHAPES:

unfortunately the above technique only works when using rectangles/squares as other shapes do not have the exact sizes to enter in. so i’m going to introduce you to how i use other shapes to create several gifs in one, say hi to clipping masks! 

i’m going to make my gif once again and colour it as i usually would:

then i’m going to insert a shape. now, there are two ways to do this! firstly, photoshop has custom shapes you can use under the ‘custom shape tool’ window, then going to shape and choosing from the options. you can then drag this onto your gif to insert the shape you want at the size you want:

the other option is you can generally find good geometric shapes available for free use on the web. searching for ‘geometric sun’ for example brings up a lot of great shapes to play with, make sure you add ‘clear background .png’ to your search and it brings you to a lot of resource sharing sites that will allow you to save these shapes as cut-outs. 

here i found the cut-out i wanted, re-sized it and pasted it on top of my gif like so:

now for the fun part! you need to reposition this shape layer so that it goes at the very bottom of all your layers. make sure you have absolutely nothing within a folder as well (this is important for speedy clipping masks!). 

once it’s at the bottom of everything, i’m going to right-click on the gif layer and then select ‘create clipping mask’ on the drop-down menu:

and this will clip your gif to the shape! you then need to select all your colouring layers (just control shift and click on the very bottom layer then very most top layer) and then also right-click and select ‘create clipping mask’ to clip it in the same way. this will not work if any of them are in folders, so remove any layers from folders first! you can then continue to make edits to these colouring layers (just double check any new ones you insert are clipped!) until you are happy with your shaped gif like so:

i then drag and dropped this gif on top of another gif i’d made (similarly to how i’ve outlined in the several gifs in one section) to create the shape as a statement on the gif:

to create gifs like my sidebar, i’ve just repeated this shaping several times over and dropped them onto a ‘background gif’ to create the overall pattern i wanted. it is really helpful to just have a play around with just plain shapes to get your layout sorted before you make them into gifs. for example, i made a template for my sidebar gif first so that the size and layout of all the triangles were exactly as i wanted before i giffed anything! you can then just copy and paste these shapes to use as your clipping masks.

THE END