Photoset with blurred gif on the front (includes motion blur transition gif)

So yeah idk if you know what the heading means lol but basically im making a tutorial on how to make something like this graphic. 

1. Firstly, you will make small pictures at the back. Pick 8 photos, edit them as you wish with colouring, texture, sharpen etc. Make sure their size is 245x140.

2. Next, take this template. Copy the 8 small pictures you just edited and paste them on top of the black parts of the template. My canvas looks like this so far:

3. Then it’s time for the gif on the front. Choose a picture that you want as your gif. Edit, sharpen, colour it etc. Then right click your picture on the layer palette and click ‘flatten image’. Now the picture will be called ‘background’ on the layer palette and will have a little lock made on it. Double click the picture so that you can turn it into a layer.

4. Next you have to erase the background. If you dont know how to remove the background, read this tutorial. It shows numerous ways to remove it. I removed the background by using the eraser tool. Choose the eraser tool and start erasing parts of the picture you dont want. The picture will look like this:
 

5. Take your picture and drag it onto the template with the small pictures. Place it at the bottom in the middle (or where ever you think looks best).
 

6. Now we blur the gif! Go to window>animation. The timeline should show up. If your timeline is not already in the form of frame animation, then click the three little squares on the bottom right side
 

It will turn into a frame animation and your timeline should look like this:
 

7. This part is a bit tricky. On your layer palette, choose the front picture that needs to be blurred and duplicate it three times. Make sure the first frame on your timeline will only have the original picture visible. (Click the eyes to make the duplicated layers invisible) Then, click the icon next to the trash can to create a new frame. Making sure that you have clicked the second frame on your timeline and the first duplicated layer of the picture on your layer palette,go to filter>blur>motion blur. My settings were: Angle: 42, Distance: 55. 

Then create a third frame. Click the third frame and only make the second duplicated layer visible, and apply the motion blur again with the settings  Angle: -42, Distance: 55.

Create a fourth frame, and make the third duplicated layer visible and apply the motion blur settings: Angle: 90, Distance: 55. 

8. Fix the timings of your frames as 1sec for the first frame and 0.1 for the rest:
 

Save your gif, and you’re done! Hope this helped and if you have any problems be sure to ask me!