Monday, June 13, 2011

8 Placeholder/Filler Image Generators For Designers

When you are designing websites, it is the layout that matters most – contents usually doesn’t exist at this stage, they are to be filled in later. Lorem Ipsum is the most popular filler text used for such purposes. But what options do we have for images?

Well, there is always Lenna, but if you don’t have her close at hand, you have to search through your hard drive or use a search engine for the ideal placeholder image and then resize or crop it to the correct proportion. If you are designing code on your local machine then you simply save the image to your hard drive and access it locally in your code. If you need the code and resources to be available online, you have to upload the image to some server.

Fortunately, you needn’t waste time on such activity as there are many free services that lets you generate dummy images to use as placeholder for your projects. Here are eight of them.

1. Dynamic Dummy Image Generator is a placeholder image generator with a huge set of customization options including size, colors, text, multiple file types and preset sizes. To insert a dummy image, all you have to do is add a code such as
<IMG SRC=”http://dummyimage.com/400x150/000/fff”>.

400x150 represents the image size in width and height. 000 is the hex code for background color and FFF is the hex code for the text color. This is how the image appears when embedded in this page.

It is possible to customize the image by editing the URL directly, without visiting the image generator. You can also add custom text and choose an image format – PNG, JPG or GIF.

2. Placehold.it is another service similar to one mentioned above where you can specify size, background color, text color, and image format.

3. Flickholdr pulls images from Flickr based on the size and tags you specify. So instead of drab machine generated images you get an actual photo, such as the one below. I used the tag ‘forest’ to get this one.

4. Lorempixum is another service that fetches random images of any size in various categories such as animals, food, fashion, people, nature, sports etc. Here is a food image. The image changes with every page refresh offering a pleasant distraction.

5. Placekitten fetches images of kittens to be used as placeholders. To generate images of the size you specify, the service crops the pictures which might produce unexpected results like this.

6. nosrc.net generates plain grey colored images like the one below. You can only specify the size. Does the job but looks ugly.

7. FPOImg is another boring placeholder image generator that churns out dull grey images. But at least you can add custom text to it.

8. Ipsum Image is a placeholder image generator running completely on Google services, intended for assisting with initial layouts of web designs before actual images are available. You can customize the size, color and add custom text.

Reference: Web Resources Depot

2 comments:

  1. Grreat list of placeholder services. I would like to share another similair service, which also provides gradient background shading, and custom text size/styling. http://placebox.es

    ReplyDelete
  2. I have one more placeholder service to share: http://xoart.link
    Images are from Flickr, with custom tags. Feel free to try! :-)

    ReplyDelete

Popular Posts