For web developer

When designing websites, images-to-be-used usually doesn't exist at first as it is the layout that matters the most.

However, the sizes for the images are usually pre-set and inserting some placeholder images help us better seeing/analyzing the layout.

Rather than creating these placeholder images manually, there are free to use services which can automate the process and save us time.

Here is a list of 8 free placeholder image services for instant dummy images:

Flickholdr

As the name tells it, Flickrholdr fetches images from the huge database of Flickr.

Besides the size of the images, it is possible to mention tags in the URL which is great for using related images in each spot.

Placehold.it

The service is full-featured with the ability to mention sizes, image format (.gif, .jpg, .png) and can also display text.

The size of the images generated are displayed on them as well.

Read the rest of this entry »

Maki is a free-to-use bookmarklet for creating websites that perfectly match the mock-ups.

Once you have converted a mock-up into a website, just click the bookmarklet and the web page will load inside the Maki application.

The application lets you overlay the mock-up over the website, position it as you wish and change its opacity to make sure the website and the mock-up matches each other.

If they are not pixel-perfect, just make the necessary HTML-CSS changes as much as you want and reload the page within Maki to see if they fit each other or not.

Sometimes, like switching between OSs, we require a font being in a different format for a better compatibility

FreeFontConverter is a web application that enables us to convert from -almost- any font format to another.

Besides the common font formats like TrueType (.ttf), OpenType (.oft) and PostScript (.ps), it supports .svg, .bin, .dfont and many others.

Spritebox is a free-to-use web application which offers a WYSIWYG tool for creating CSS classes from a single sprite image.

Image to be used can be fetched from a URL, uploaded directly or via drag 'n' drops from the computer.

After that, it is possible to mark any parts of the image, define a class/id name and CSS rules containing the background-position will be created automatically.

Besides mouse, the application can be controlled via keyboard shortcuts and main image can be zoomed for pixel-perfect selections.

X-Icon Editor is an HTML5 application, using <canvas> tag,  that allows you to create high resolution icons.

It generates the icons in .ICO format with 4 different resolutions embedded: 64×64, 32×32, 24×24 and 16×16.

This makes it a perfect fit for IE9 as the browser uses multiple-sized favicons in different screens (address bar, tab page, site mode).

There are tools like brush, pencil, text or shapes for drawing the icon. Also, it is possible to import any image and edit it.

For many, wireframes are a part of the design process as they help a lot when thinking and discussing on a design.

Wirify is a bookmarklet which reverses the standard process and converts any given web page into a wireframe.

With the help of jQuery, it calculates the dimensions of the elements in the page and displays them "wirified".

It is a handy resource for quickly stepping back and seeing the big picture without all the details.

Requirements: No Requirements

ColorZilla, an advanced color toolkit plugin for Firefox, is sharing a web-based CSS gradient creator.

It has a Photoshop-like interface (just the opacity level is missing) where you can select the images to be used and their locations with the help of a slider.

New "gradient stops" can be added just by clicking to the slider and the tools has a list of "presets" for instantly generating ready-to-use" styles.

A last useful feature is the ability to see "how the output will look in IE".

Compatibility: All Modern Browsers

Gridulator is a free web application for creating totally custom grids in .PNG format for using with the image editing applications, inside CSS files, etc.

It simply asks the overall width and the number of columns. Once they are selected, any possible grid variations are automatically displayed.

You can instantly preview how the grid will look like or download the full-size PNG file for it. Simple and handy.

It is usually a good idea to share your thoughts about a website visually in order to make the details clear.

MarkUp is a free web application that, with the help of a bookmarklet, enables you to draw on any web page.

Once the bookmarklet is clicked, the menu with the options of shapes (circle, rectangle, free drawing, etc.) appears and it becomes possible to draw + take notes (with the color you prefer).

And, once the drawing is complete, you can select it to be published which is actually a unique URL generated -that displays the output-  to share.

Requirements: No Requirements

Lorem Ipsum is the most popular placeholder text used in graphic and web design.

If you're bored of it, here is another alternative named Fillerati that has texts from various books.

The website lets you choose the source of the text, whether it will be a paragraph, list or a title and how long it will be with the help of a slider.

And, once the slider is clicked, the text is automatically copied to your clipboard.