Tag: photoshop

How to Make an Animated Loading GIF

When you have a form to submit some kind of data to your website it is very helpful to have a loading image that is displayed once the user submits the form.

This let’s the user know that the form was submitted and the upload is in progress, rather than just relying on looking up at the address bar and seeing the refresh button spinning. This also helps prevent people from clicking the submit button again, causing problems with the upload, ending in the user being frustrated and leaving.

First, let’s open Adobe Photoshop and open a new document dimensions 150px by 18px. (See Figure 1).

Figure 1

Then let’s select the Rectangular Marquee Tool in the tools panel, and at the top under Style select “Fixed Size” and enter the dimensions – Width: 14px Height: 14px. Then make a New Layer, and then click on the palette and position the square marquee to the left and centered (as seen in Figure 2). You may need to zoom in in order to position it exactly 2 pixels away from the edges so it is centered.

Figure 2

Then fill this selected square with your desired themed color, I chose a blue color (#044686), using the Paint Bucket Tool. (Also seen in Figure 2).

I like to apply a nice gradient to the square, as well as a little bevel and a clean border. First open the Layer Blending Options – do this by right clicking on the layer you placed the square on, and selecting “Blending Options…” or simply by double clicking the layer – and then go to Gradient Overlay. Then apply a slight gradient, I just keep it on Normal blending mode, and just lower the opacity to like 8%. (See Figure 3).

Figure 3

Then go to the Bevel and Emboss in the Layer Blending Options, and apply a slight bevel. This is accomplished by raising the Depth of the bevel and lowering the Opacity. I like the bevel to be small so I keep the size at 2px. Then I lower the opacity of the white to 15% and the black to 25%. (See Figure 4).

Figure 4

Now your square should have a nice gradient and bevel. To make it stand out from the background even more, add a nice clean border. Keep it at 1px width and either black or a darkened version of the color you used for the square. For example, my square is blue so I just used a dark blue (#0a2b4b). Do this by going to the Stroke menu in the Layer Blending Options. Enter the following for the properties: Size: 1px, Position: Inside, Opacity: 100%, and then choose your color. (See Figure 5).

Figure 5

Now your square has a Gradient, Bevel, and a nice Border. Now you can duplicate your square layer – select the layer and press (Ctrl+J) to make copies. After you make a copy, drag the squares you make to the right and keep them an equal distance from each other.  If you use the dimensions I did, you should be able to fit 8 squares in your document. (See Figure 6).

* I recommend using the guides in Photoshop to be sure they are an equal distance from one another. If rulers are not enabled, go to View > Rulers. Then drag guidelines from the left (vertical ruler) onto the document and use equal increments.

Figure 6

Once you have all your squares the way you want them and set equal distances from each other, you are ready to make the animation. Go the the top menu bar, and under Window select Animation. This will bring the animation menu below your document. To start you only want the first square visible, so hide all the other squares’ layers by clicking the Eyes to the left of each layer in the layers menu.

Your animation menu may come up in Timeline mode – this is shown as the title of the animation menu at the bottom. If it is called “Animation (Timeline)” then you are in timeline mode and you need to switch to frames mode. This is done by clicking the very small image in the bottom right corner of the animation menu which looks like a gray rectangle with 3 white squares in it. This will change the title to “Animation (Frames)“. Now, all you should see on your document is the first square, all the way to the left because we hid the others.

First, set the Delay to 0.5 seconds, this is done by clicking on the “10 sec.” with the down arrow. Now click the New Frame button (which looks identical to the new layer button but is located in the animation menu, obviously, not the layers menu). This will add a second frame to the animation. What you want to do is add a new frame, and then un-hide the next square in the sequence. So it’s basically: make a new frame and un-hide next square – over and over until you reach the last square in the document. When you are done, you should have 8 frames and 8 squares in the last frame. Lastly, set the looping to “Forever” by clicking where it says “Once” with a down arrow. (See Figure 7).

Figure 7

You can preview your animated loading image by zooming back out to 100% on the document, and going to Frame 1 and hit play. It’s still on a transparent background so it doesn’t look as nice as it will on your webpage, but just an idea. Here is our animated loading image:

Animated Loading GIF Image


Here is another, smoother sliding upload bar animated GIF I made:


Now that we have our animated loading GIF image, we need to incorporate this to our website with a form. Let’s say this is our form in HTML:

[codesyntax lang=”html4strict” title=”HTML Form”]
<form method=”post” action=”” enctype=”multipart/form-data”>
<table width=”650″ align=”center” border=”0″ cellpadding=”2″ cellspacing=”0″>
<td align=”left” width=”100″><strong>Title:</strong></td>
<td align=”left”><input type=”text” name=”title” size=”25″ maxlength=”60″ /></td>
<td align=”left”><strong>Image:</strong></td>
<td align=”left”><input type=”file” name=”image” size=”25″ /></td>
<td align=”left” colspan=”2″><input type=”submit” value=”Submit” name=”submit” onclick=”showUploadDiv()” /></td>

So right now, this form just submits as normal without any loading image. To change this, we use the “onclick” attribute to the submit button, so that once the submit button is clicked (the form is submitted) we will display the loading image with whatever text we want to go along with it. So first let’s make some CSS styles for the uploading div and the image itself, then some Javascript entries, to the <head> portion of the webpage.

Insert the following in the <head></head> section:

[codesyntax lang=”css” title=”CSS Styles and IDs”]
<style type=”text/css”>
#uploading {
background: #eee;
padding: 3px;
border: 1px dashed #ccc;
width: 300px;
#loading_image {
padding: 2px 0;
background: #eee url(./Loading-Animated-GIF.gif) no-repeat top center;
text-align: center;

[codesyntax lang=”javascript” title=”Show Upload Image JavaScript Function”]
<script type=”text/javascript”>
function showUploadDiv(){
var uploadDiv = document.getElementById(‘uploading’);
if(uploadDiv.style.display == ‘none’){
// the div isnt being displayed yet, so lets change the display then write the content
uploadDiv.style.display = ‘block’;
uploadDiv.innerHTML = ‘Please wait while your image is being uploaded…<br/><div id=”loading_image”></div>’;

Now, right after our form we need to include a <div> which holds the uploading animated GIF and some text. So let’s put this right after the form:

[codesyntax lang=”html4strict” title=”Uploading DIV”]
<div id=”uploading” style=”display:none”>

Be sure to change the image source to your images location and file name so it loads properly. Otherwise you will see the alternative text. Now, we have one last change to make. We need to add the onclick function to the form’s submit button. So let’s go back to the form and change the submit button to the following:

[codesyntax lang=”html4strict” title=”Form Submit Button”]
<input type=”submit” value=”Submit” name=”submit” onclick=”showUploadDiv()” />

Now when we click the submit button we will see a nice message letting us know our image is being uploaded and an image representing the upload progress.

Click here to check out the demo!


Filed under: Tutorials, Web ProgrammingTagged with: , , , , , , , , , , , ,

Making a CSS Linkbar with Photoshop

In this post I am going to show you how to make a cool link bar for your website with Photoshop. Link bars are very important in websites as they provide a clear and easy way for viewers to reach other pages on your site. Basically we’ll make a background image which will be set to repeat along the x axis as the background of the cells in our table. Then the links in the link bar will be placed on top of the background image blending in nicely as the buttons on your link bar.

In CSS we make a few styles for the table that will serve as the link bar holder:


[code lang=”css”]
.link-bar {
border: 2px solid #d8d8d8;
font: 11px tahoma;
.link-bar td {
background: #eee url(./images/bg.gif) repeat-x top left;
height: 32px;

On our server we have to be sure to be placing the images all in the “images” folder in the “public_html” folder – your website’s default directory.

I made a new document with the dimensions 110×32 pixels as the size of a button. You can make them as big as you want for different words or a standard size, whatever you prefer.

1. Make a new layer and fill the layer with the color #EEEEEE as the background color of the link bar.

2. Make another layer and select a lower smaller half portion of the button to shade in with #E5E5E5.

3. Then make your text layer by typing whatever you want onto the canvas with the text tool on the tool panel. I started with “Home” as the first button. You want to apply the following settings to the text layer’s blending options. You can do this by double clicking on the text layer in the layers panel.

Double click the “Home” text layer and apply the settings below or something similar. You can change these grayscale colors to whatever you would like to fit your website’s color theme.

Our first button turns out something as so:

Now, you can make a rollover image if you would like. This will just make the image change when the viewer puts their cursor over it. We’ll add a slight glow on a new layer to make a rollover layer.

Optional Rollover Image Changes

4. Make a new layer. Select the brush tool in the tools panel. Select the 5th brush type, a glowy brush. Set the size to something like 32px and turn the opacity to 50%. Select the color white (#FFFFFF). Here are the settings:

5. At the top of the image drag half of the brush over the very top of the image and the other half off the canvas to make a slight white glow at the top of the image. Here is the result magnified:

Now as the background all we have to do is make a new document with dimensions 1×32. This will be a single line that will repeat as the background. Now do the same you did to the background of the buttons. Make a layer filled in as #EEEEEE and then another layer with 11 pixels or however much you selected along the bottom as #E5E5E5. Here is the background image close up:

Now as the seperator to the images we need to make a seperator image. This will be a very thin image that will sit between the buttons to give them some distinction.

6. Make a new document 2×32 pixels. On one layer copy the background image we made before and stretch it to be 2 pixels wide. (Press Ctrl+T to transform the layer). Make a new layer and fill the middle left half of the image with the color #DADADA and the middle right half with #F6F6F6. Here is the fill-in’s up close:

Now we have our links and our background image. You will need to make a rollover image for every button you want to have one. Now we just have to apply the CSS styles above to our table that will have the link bar images in it. We do this by setting the link tag in the <head> HTML tags.

Insert the following code in the <head> tags:

[code lang=”html”] [/code]

Here is our HTML:

[code lang=”html”]


This will produce something like so:

Filed under: CSS, Graphics, TutorialsTagged with: , ,

Making a Background Pattern

Here is how to make a very basic background pattern to use on your webpage. We’ll be using Photoshop to make this.

First, open up a new document, with dimensions 5 pixels by 5 pixels.

Create new document.
Create new document.

Then pick a good solid background color, something not too dark that will match the colors of your website. I went with a medium blue color (#004491).

Background color.
Background color.

Now we choose a darker color to make the pattern on top of the blue background color. You can make any pattern you want. I’m gunna show you two different patterns. One will be just a dotted pattern and the other will be diagonal line. Here are the two patterns:

Dotted Pattern
Dotted Pattern
Diagonal Line Pattern
Diagonal Line Pattern

I used the dark blue color (#001c3b) for the pattern. Just take the pencil tool:

Pencil Tool
Pencil Tool

and click on the center of the 5×5 canvas to make the dot pattern. For the diagonal pattern just click along a diagonal line with the pencil tool. Then just save the image as a gif file “background.gif.”

Now we can insert it into our webpage as the background:

[code lang=”html”]


Click here to see examples of these background patterns.

Filed under: TutorialsTagged with: , ,