images – computeraxe

Generate Animated Loading… Images

We’ve all seen animated images on the screen as a video or slideshow is being downloaded and set up for us to view. Sometimes the word “loading…” is the animation itself. Sometimes there’s a horizontal bar or spinning world that alerts us to wait for the media to be loaded.

A few websites provide a way to generate your own animated loading image. They’re online and they’re free. If you’re tired of the same old circular or horizontal animated images, give the following sites a try.

Preloaders.net

It’s easy to generate a multitude of preloader images at preloaders.net, which is by far the most complete animated image generator available. All you do is choose the category of preloaders that you like and then select one preloader image from the spin box. From there you can alter several parameters of the image.

Several categories of preloaders differentiate preloaders.net from its competition, including three-dimensional, astronomy, people, religion signs, rectangular, smileys, social bookmarks, and zodiac signs.

You can choose between a GIF and an APNG image. Specify any color for the foreground and background colors or select a transparent background. Here’s an example animated clock made at preloaders.net:

A slider lets you change the animation speed from slow to very fast. The slowest speed wasn’t quite slow enough and the fastest speed was way too fast, at least for my liking.

The dimensions of the preloader image can be specified as width and height values. A tick can be removed from the “constrain proportions” box to introduce some interesting effects to the animation. Advanced options include means to flip the image, reverse the animation, and inverse the colors.

LoadInfo.net

Loadinfo.net offers a variety of circular, clock-like and spinning images. The foreground and background colors can be any color you choose and the background could be transparent, too. Select one of the three thumbnail sizes (16×16, 24×24, 48×48) for your image and click on ‘generate’ to create it. If you like the image as presented on the screen, download the free image. GIFs created there did not have transparent backgrounds when I tried it, even though the ‘transparent’ feature was selected. The spinning ying-yang symbol seen here was given a white background for a little fake transparency.

ajaxload.info

Ajaxload.info provides a standard set of clocks, bars and flowers that can be modified with respect to foreground and background color. You’re stuck with the speed of the animation and the size of the image, but the background can be transparent. That’s not too many options, but sometimes a simple loading image is all that’s needed.

LoadingAPNG.com

LoadingAPNG is a free online animation generator that offers a few dozen circular and horizontal bar type of animated PNG. The foreground and background colors, width, height and transparency can be modified to suit.

Chimply.com

Chimply offers several clocks or spinners and animated bars that you can modify with respect to colors, transparency and size. Unique to this free online image generator is that several images can be created and temporarily stored in a workspace on the website before wrapping them in a .zip file for easy download. If you click on “Last generated images” near the bottom of the screen, you can see the images that other users have created. GIFs and SWFs can be downloaded.

CSSload.net

Timur Gafforov figured out how to present an animated image using pure CSS. Once HTML5 and CSS3 are more widely accepted and used by browsers everywhere, cssload.net is a source to remember. At the time of this writing CSS3 usage is in its infancy, so for now we’ll rely on small animated GIFs or APNG images to indicate that media is Loading….

CanvasLoader.js

Another way to show animated images on your site is to use pure javascript via CanvasLoader. Use the CanvasLoader Creator to build a script that will create your animated image on the fly. It’s a clock-like oval, spiral, square, rectangle or rounded rectangle that spins around in this animated image. Set the image diameter, density, range, frames per second, speed, and colors. Then, copy the code snippet to create a new CanvasLoader object using javascript.

Make sure to download the CanvasLoader UI library. The minified .js file is less than 6 kb. The custom snippet to produce an animated image is only 8 lines long.

Well, there we have seven sites that can help us make our websites stand out from the crowd. Take caution though, some of these animated images bring back visions of the early Internet, when scrolling marquees were thought to be cool. It’s best to avoid wacky-looking spinning objects unless they suit the style of your site. If you have a game site, maybe a twirling hat or an animated string of cats is appropriate for a loading image. For a more professional look stick to the more common horizontal bars, clocks or circular moving images and modify the colors to match your site.

How To Download A Header Image Just Once

While checking links on a client’s re-vamped web site, I noticed that the header image would be re-loaded for each page visited on the site. I’d forgotten to set the .htaccess file with an Expires Header to ensure that the images would be downloaded just one time by a site visitor.

Making the content appear quickly in front of site visitors should be a goal for all site developers. And besides, reducing the load on your server is always a good idea, don’t you think?

To cache a header image, or other images for that matter, or to make sure that files aren’t downloaded too often, use an Expires Header in your .htaccess file.

#Expire Header <FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$"> ExpiresDefault "access plus 2 months" </FilesMatch>

Note that all types of image files, as well as stylesheets, javascript, flash and other file types, can be cached with this Expire Header.

JPGs Can’t Handle Transparency, So Save As PNG Instead

The title of this post says everything.

JPGs Can’t Handle Transparency, So Use A PNG Instead

Earlier today I got lost in the details while using The GIMP to create a couple icons for a new WordPress theme. I kept seeing this colored background for an icon that I knew just wasn’t there. I could see that the image had only one layer and no background layer in the layers dialog of The GIMP, but every time I saved the image and viewed the result in my browser I saw the colored background.

This drove me mad until I spotted the obvious mistake. I had been saving the file that I wanted to have a transparent background as a jpg file. Since jpg files can’t handle transparency The GIMP tries to accommodate by exporting the file as a .jpg. Unfortunately, the current background color is used to fill in the transparent parts of the image, so you end up with a non-transparent image.

To make a transparent image or an image with a transparent background, save the file as a png file. PNG files can handle transparency, so once I saved my image as a .png the colored background went away.

One caveat here is that image files with the extension .png are not recognized by older browsers so the colored background will show through and the image won’t be transparent.

Gradient Backgrounds for Body and Header Give a Smooth Appearance to WP

The structure of many WordPress themes includes a width definition for the actual blog contents so that there is an empty space on either side of said contents in most modern computer screens. Not many people use 800×600 resolution these days, so some designers argue that the default or standard size of window that we should design for can be larger than 800 x 600 pixels.

Even though the size of standalone monitors and laptop screens are much larger than they were 3-4 years ago, I would bet that many people do not run their browsers at full screen on such large monitors. With Windows Vista, for example, the new sidebar feature takes up a width of 150px which may take away from the browser real estate.

Also, with the ability of modern computers to run several programs at one time, people operate them in this fashion. It’s convenient to be able to see more than one program at a time and if browsers are constantly run at full screen that’s not allowed. Besides, it’s very difficult to read all the way across such large computer screens.

So, we are left with the current state of affairs where most blogs and Web pages have these spaces running down the sides of the real content. Should those spaces be left blank to have a white background?

Let’s make it a bit more interesting and put some color in there. Instead of choosing a background color for the body tag, why not use a gradient? Gradients can be designed with any choice of colors and blending between the colors is up to your imagination.

Open up The GIMP and create a new file 300-400px wide and at least 1000px in height. The width doesn’t really matter here as we’ll trim that down to a couple pixels when we’re satisfied with the gradient we’re making. The height can be much longer – it just depends how fast you want to see the gradient run out when you scroll down your pages.

Double-click on the gradient tool button to open the gradient tool options dialog:

The GIMP dialog box.

The gradient tool is selected in The GIMP.

latest gradient highlighted in tool options

The last-used gradient appears in the gradient toolbox window.

Click on the gradient to bring up a list of the available gradients. Click on a gradient that you like to make it the current gradient. Checking the Reverse checkbox will flip the gradient left-to-right. Changing the shape from linear to radial or conical by clicking the Shape drop-down arrow can give some interesting effects, but for our background gradient we’ll leave the shape at linear.

In your new image click-n-drag the cursor from the top to the bottom of the image. When you release the pointer the gradient will appear and fill the whole image.

Considering download times we’ll trim the gradient background image instead of using this giant image as the background. Click on the rectangle selection tool so you can cut out a slice of the huge gradient image.

rectangular selection tool

The rectangle selection tool is used to select or cut out portions of an image.

In your gradient image select a rectangular portion that is 1-2 pixels wide and 1000 (or more) pixels tall, then copy your selection to the clipboard with Ctrl-c.

Open a new file using the menu, File/New. Notice that the new image size matches your selected area of the large gradient image, so click on OK. Type Ctrl-v to paste the skinny gradient into the new image. As you can tell it is difficult to see the colors in such a skinny image. That is why we use 300-400 pixel wide image to start with – it gives you an idea of what the gradient on your Web page will look like.

Save the new skinny gradient image as a jpg file and export it from The GIMP.

export image from the gimp dialog box

An export jpg window may come up as you save the jpg file. Click “Export” to save it.

To place the gradient in your Web page add a couple lines to both the header and body tags in the CSS stylesheet:

background-image: url(skinny-gradient.jpg);

background-repeat: repeat-x;

This tells the browser to repeat the skinny gradient across the page, but not down the page. Save the gradient jpg in the WordPress theme folder and now it becomes part of your new theme.