Step 1 – Size it Up

Before making a background we need to think about the dimensions of the twitter site. Basically, your background will be sitting behind a container that is 763 pixels wide. Furthermore, we need to remember to keep our background image under 800k in size.

Step 2 – Prepare the Photoshop Document

With our size restrictions in mind, lets go ahead and start creating a background. First, create a new document that is 1600px by 1200px in size at 72 DPI.

Step 3 – Put in Some Guides

The first thing I do when working in Photoshop is to place my guides. I first create a shape that is exactly 763-pixels and place it on the left side of the photoshop document. Twitter will justify (stick) your background to the left of the screen while allowing the main container to remain centred relative to your browser window. This makes it hard to know where to place your background elements, but you’ll probably want to place any important background elements within 150-pixels of the left side of the canvas.

Step 4 – Create a Mind Blowing Background

This tutorial is more about the technical aspects of making a twitter background, not so much the actual design work. But when creating your background it’s important to remember that your background should fade to a solid color, otherwise people with large screens could end up seeing unattractive “cut” lines. Here are the steps that I took to make my background “work”:

1. Created a nice background that has a radial gradient at the top
2. Applied a subtile background pattern
3. Used a masking layer to “fade out” the right and bottom edges of my pattern/gradient layers
4. Made a note of the solid color at the edges of my background (#481904 in my example).

Step 5 – Setup Twitter

After logging into twitter, head over to settings/design area. You’ll need to set your background color to whatever you noted in the last step and then upload your new fancy image.

I know this background isn’t “mind blowing”, but it’s cute and simple and a good example of what you can do.

If you’re interested, feel free to download the blank background and add your own name.

Click for the full size version

There is a neat little trick that most good web designers know and love, and it has to do with background textures and noise. I remember when I first started designing for the web, I would never use textures in my designs and was always left feeling like something was missing. A textured background, even when it’s very subtile, will give your site much more depth and feeling than a plan flat color or gradient. This quick example will use some simple noise to give a gradient background some extra depth. So let’s get started!

First Example – A Noisy Gradient

Step 1 – Create a New Document

Create a new web document that is 1200px by 1000px.

Step 2 – Choose a Nice Gradient Background

For this example I decided to do a nice bright-dark green gradient. Make sure it’s linear to make it easier to slice into HTML/CSS afterwards.

Step 3 – Add the Noise Layer

Next, add a new layer on top of your background layer. This will be our noise layer. Fill it in with total black and then go up to Filter > Noise > Add Noise. Use roughly the same settings that I use below:

You should end up with a really really noisy background.

Step 4 – Blending and Opacity

Next we need to change the blending mode and opacity to make our noise layer more palatable. First set the blending of the noise layer to Overlay. Next you need to bring the opacity down to somewhere between 1% and 20%, depending on how much noise you want. In my Example I used  5% opacity.

Your final background should end up looking something like this:

Click to See Full Size

Here is a quick way to produce a neat halftone effect in Photoshop that can be used to give your compositions a little more complexity.

Step One – Setup the Document

Start off by creating a new document with the dimensions of 800px by 800px.

Step Two – Black to White Gradient

Create a new layer and fill it with a blank-to-white gradient. Try and make the gradient fairly even across the entire document.

Step Three – Apply the Halftone Filter

Select the entire gradient layer and goto Filter > Pixelate > Color Halftone… and fill it in with the settings below.

Step Four – Rotate the Halftone Layer

Next we can rotate the halftone layer by around 45 degrees counter clockwise.

Step Five – Crop it Down

Next make a selection near the centre of the halftone and crop it – I ended up cropping a section of ~ 615px by 300px.

Step Six – Apply a Pleasing Gradient

Choose a nice two color gradient (I choose blue). You now have two options. The first is to create a new gradient layer above your halftone layer and then reduce the gradient layer’s opacity to a suitable level. Or, the second option is to put a gradient layer below the halftone layer, set the halftone layer’s blending option to “Darken“, and reduce the halftone layer’s opacity until you find a good level. Either way the effect will be similar!

And there you have it – a quick and easy halftone effect that you can use to make neat backgrounds!

Our Final Product

First off, I know that it’s easy to find semi-customizable GIF makers around the web. This being said, I think it’s important to understand how to make these yourself, as it allows for a degree of customizability that would otherwise be impossible with the online tools such as AjaxLoad (a great tool to make little AJAX loaders).

A Word of Warning

I love Photoshop with all my heart, but to be honest, creating animated GIFs can be painful and annoying. Things just don’t work the way you would expect, and if you mess things up bad enough, it means sometimes redoing the entire animation (aka make sure your history settings are set to longer than normal). What makes this worse is that changing small details can be really annoying because it seems like you need to do it across ALL your frames of animation. If anyone out there has any insight into this please let me know and I’ll update this post. Thanks

Step One: Create a Nifty Looking Loader Bar

First we’ll create a new Photoshop document with the following settings:

Next we need to create the background for the loading bar. When creating basic elements I generally try to use vector shapes whenever possible. This allows me to scale my work without losing quality and ends up saving me tons of time if I ever need to resize my document. Go ahead and create a vector rectangle shape (U key). Make sure that you’re making a shape, not a path. Your top toolbar should look like this:

Now, using the info panel for precision, make the rectangle shape exactly 260px by 30px and centre it on in the document. Another thing that’s nice about vector shapes is how easy it is to change their color. All you need to do is double click the color swatch located on the left side of the layer (in the layer panel). For this example I choose a light grey #d2d2d2. Your basic outline should look something like this (click to enlarge):

0

Next up we will add a subtle gradient overlay to give our loader background a little more depth. Make sure that foreground color is set to white (#ffffff) and double click on the layer  (again, in the layer panel) to pop open the layer styles dialog. In the Gradient Overlay section click on the Gradient dropdown to see all our possible gradients. In this instance we want to have a white to transparent gradient, which will probably be your second gradient swatch (you did choose a white foreground, didn’t you?). We will also be adding a small inner shadow:

If everything is working out, your image should look something like this:

OK, now let’s make the actual loader. I like the glossy candy-striped look, but you can really choose anything you want. Start by duplicating the layer we’ve been working on, and make sure that it is sitting on top of our background layer. Right-click on the new layer and choose “remove layer styles” to clear out our old styles and rename the layer to something like “loading bar.” I want to have a nice viberent red loading bar, so I choose #ff2f2f as my base color. Now we are going to add some layer styles that will give our loading bar that glossy look. Just like before, make sure that you have pure white selected as your foreground color. We are adding 4 different styles: an inner shadow, an inner glow, a gradient overlay, and a pattern overlay. If you want to use the same pattern that I’m using, I’ll attach it to this tutorial at the end.

Whew, I know it’s a lot of styles, but it creates a really nice effect! At this point you should have something that looks kinda like this:

Finally, you should reselect the background layer (the grey one) and transform the shape so that it sticks out 1px by on each side. This will give our loader a little border.

Step Two – Animating the GIF in Photoshop

With our loader in vector format, we can now start the process of animation. There are quite a few ways of doing this and tons of little tricks and tips, but if you’ve never animated a GIF before I’ll try and keep this easy (there is probably a faster/more complicated way to do this).

First things first, transform your loading bar until it is only a few pixels wide:

Now comes the annoying part. First you need to open up the animation window.

By default, your animation window is probably on the wrong setting (timeline mode) and we want to do this animation frame by frame. Adobe has hidden a huge menu in the animation window, it’s located in the top right corner, just below the close button. Click on it and select “convert to frame animation“. If you’ve done this right your animation window should now look something like this:

Now we need to put in some guides so that we can animate our loading bar with precision. The number of slices you put in will correspond with the smoothness of your loading bar. The more guides you place, the more frames you’ll need, and the smoother the animation will be. It doesn’t need to be exact, but try to keep it relatively uniform. Take a look at my example:

With our guides in place we can start the actual animation process. In the animation panel you can add new frames by clicking the new frame button (bottom of the animation window, just left of the trash icon). While clicked on the second frame, duplicate the loading bar, and horizontally transform it – moving the right side up by one “notch.”

Photoshop allows you to hide and show layers within the animation timeline, and that’s really the magic that will make our loading bar move. Click back on the first frame of animation and hide the duplicated layer we just created. Now when you click between the first and second frame, you should see the loading bar get bigger and smaller. It’s good practice to name your layers after their corresponding frames, so the first (smallest) loading bar layer should  be named “1st”.

Hopefully you’re getting the idea by now. Go ahead and finishing incrementing the loader until you’ve filled up the entire thing. It can be hassle to do all the frames, and you’ll find that Photoshop can be a little annoying. What seemed to work for me was to 1. add new frame, 2. hide the current loader step, 3. duplicate the hidden loader step, 4. unhide and transform the duplicated loader step… repeat, repeat, repeat… (If you do it in this order you won’t need to go back and re-hide the duplicated loader step in each animation frame). My animation took a total of 26 frames, yikes!

You can tweak the timing in the animation window – in my project each frame is set to take 0.07 seconds:

When you’re ready to export make sure you save it as a GIF and the animation should work just fine. The finished product looks quite nice: (for this example I’ve set the gif to automatically repeat, although you probably only want it to play once)

So thats it! As I mentioned before, there is probably a much easier and efficient method of doing this, but for simple animations this technique will work fine.

Feel free to download the source PSD and have a look for yourself!