Tumblr Icons and Headers: A Step-by-Step Guide

Creating a custom Tumblr icon and header is an excellent way to personalize your blog's appearance and make it stand out from the crowd. In this article, we'll walk you through the process of creating a stunning icon and header using Photoshop.

To start, we need to create a guide in the middle of our gif to define the border for the icon. I personally prefer the ripped paper effect, but feel free to experiment with different designs. The key is to ensure that the border color matches the background of your mobile theme.

Next, we'll work on the header gif and add borders to both images. Make sure to do this for each gif separately. Once you've completed this step, group your layers together using the Layer Mask feature.

For the icon, use the round selection tool (Elliptical Marquee Tool) to create a 128x128 selection. This will give you a circular shape that can be used as a border for your icon.

To add some extra flair to your header, try playing around with gradients. You can use pre-made gradients or create your own using the Brush tool. I like to use actual gradients, rather than Gradient Map or Fill, to give my headers an extra pop of color.

When working on your header, it's a good idea to oversize it slightly to avoid having borders on the edges. For example, you can make the gif 587x331 and then crop it down to 583x327. This will give you more flexibility when designing your header.

In terms of dimensions, you'll need to create an icon that is 135x135 pixels in size, which will later be cut to a round 128x128 shape. You can adjust these dimensions to suit your specific needs, but I found that using these sizes allowed me to get close to the actual header and icon size.

Once you've completed these steps, disable your icon and group all of your layers together using the Layer Mask feature. This will give you a seamless transition between your header and icon.

Before we wrap up, I want to clarify that you won't actually be uploading a gif as your icon. Instead, you'll be creating an all-in-one header image that combines both the icon and header designs. To do this, you'll need Photoshop and basic knowledge of how to make gifs using the timeline.

If you're new to making gifs or need a refresher, I recommend checking out 'link to tutorial' for a step-by-step guide on creating your own custom gradients and gif animations. You can also use the provided PSD file as a template or reference point if you get stuck during the process.

By following these simple steps, you'll be able to create a stunning Tumblr icon and header that will make your blog stand out from the crowd. Happy designing!

Tumblr icons and headers