W3hobbyist

If you love to design for Web 2.0, then you absolutely need AJAX and cute professional looking icons. One of the icons commonly needed for an AJAX site is the ‘Loading’ or ‘Progress bar icons’ that tells the visitor that the content is being loaded.

Ofcourse you can rip it off from any of the thousands of sites that use AJAX, but what if you could:

1. Choose from35 varieties
2. Color of your choice, that goes well with color scheme of your website or application
3. And all thisfor FREE and within 5 sec. of time!

If you don’t believe me, visit AjaxLoad.info

Bookmark It

Hide Sites

With Web 2, those simple icons are outdated. Icons should be polished with gradient, look cute if they have rounded corners. One such icon I needed recently was the ‘Star’ icon, like the one that resembles ‘Favorites icon’ in Internet Explorer.

In this tutorial, we will use Photofiltre an excellent freeware image processing tool. Install Photofiltre and you are ready to use it. Follow the below steps:

1. Run Photofiltre. Start by creating a new image. Go to File>New or Ctrl+N. Enter the width and height of the images or leave it to default.
2. Go to Selection>Load shape. An open file dialog will be presented to you to choose selection patterns from. Open the file ‘Star01.pfs’ or ‘Star02.pfs’. In this tutorial, I have used ‘Star02.pfs’. If no such file is available in the ‘Selections’ folder, then please download it by clicking on the ‘Download file’ link on the next line. The ‘Selections’ folder is under the folder where you installed Photofiltre
   [-]Download star02.pfs

   1 2 3 4 5 6 7 8 9 10 11

   10 170;195 150;120 210;75 130;75 105;0 80;75 0;75 65;120 40;195 105;150

3. Once the shape is loaded, you will see the outline of it as show below:
   
4. Now fill the selection with any color of your choice:
   
5. Now apply the filter ‘Progressive contour’. Apply this by going to Filters>Stylize>Progressive contour. Choose any color for the contour. Remember to check the option that says ‘Outside’. Click ok.
   
6. Select the magic wand tool() and click in the white space around the image. Now Right click and select ‘Invert selection’. The entire star with its contour will be selected and will resemble the below image.
   
7. Copy the shape using ‘Select>Copy shape’. Wherever you need to use that shape, paste the copied shape using ‘Selection>Paste shape’. Now if you wish fill it with a color of your choice and final output will look like the below:
   
   Your task is now complete.
8. Note:
   • You can save the selection by going to Selection>Save shape.
   • The combination of progressive contour and magic wand tool can be used to obtain rounded corners from almost any image! So remember it!

Bookmark It

Hide Sites