How to make a GIF Widget

In order to make my blog look professional and give it a brand I decided to create a GIF widget which I could feature on the side of my website. I did this by using Photoshop. I first created a composite image then made this into a video using the time line tool. Here is my step by step guide of how I made it.

Part 1

Choosing the right size

The first thing to do when creating a GIF widget is making sure your working from the correct size paper. For this side bar widget you will need to have the width and height both at 250 pixels.

Insert image

Once I had done this I could then insert the image of my choice. Make sure the image is unlocked before copying it onto the paper. I used the ‘free transform’ tool to make the image the correct shape and size for the paper.

Insert Text

As I wanted to create a brand for my website I wanted to included my websites name on the widget so It can be seen all over the blog. To do this I selected the ‘T’ icon and inserted my chosen text. I spent a lot of time choosing the typography font as I wanted it to reflect my brand perfectly. Once I felt I had done this successfully I changed the colour of the font to white as I wanted it to fit the rest of the colour scheme on the image.

Hue and Saturation

Once I had done this I then went on to create many different ‘hue and saturation’ layers. I did this by selecting the circle button under the layers and choosing ‘hue and saturation’. Here I created many different coloured versions of my widget by experimenting with the colour sliders.


Once I was happy with the amount of layers I had I went to ‘window’ then ‘timeline’ to start creating my GIF. Before I added any new frames I clicked the small button with three little boxes on in the bottom left hand corner. This allowed me to see the animation frame by frame. Once this was done I was able to add new frames and choose which layer I wanted to see on each frame.

You can hide the visibility of layers by clicking on the eye icon by the layer. You can also change the length of the frame depending on how long you want each section to be.


When you are happy with your frames you can export the animation as a GIF. To do this I went to ‘file’, ‘export and ‘save for web’. This box then appeared. I chose the video to be exported in GIF format and saved it into my files.

Part 2

When the GIF has exported you will be able to upload it as a widget to your website.


To do this I first uploaded the GIF to my media files. You can do this by going on your WP admin dashboard and selecting ‘media’ and ‘add new’. Once you have done this make sue you copy the images URL.

Adding widget

After this I went to ‘appearance’, and then ‘widgets’. I selected the image widget and placed it in the ‘main sidebar’ section. If you click the down bar you will be able to paste the images URL into the ‘image URL’ section. Click save changes and your GIF widget is officially on your website!

Widget on website


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s