dress up your interface >> daily fresh clickable icons / at a click

Vista Icons PSD files

by djuro 27. September 2007

Here are the PSD files of the two Vista icons from my tutorials:

Create a CD Vista icon for all backgrounds,   

PSD file:    VistaCD.psd (180.42 kb)

 

and How to create an effective Search Vista icon 

PSD file:    SearchVistaIcon.psd (150.40 kb)

 

Have a good Photoshopping! 

How to Create an effective Search VISTA Icon

by djuro 3. September 2007

 

     Here's how you can make a simple, yet beautiful Search Vista icon

with 5 layers and just a few crucial Photoshop effects.

 

UPDATE  27/09/2007: Some steps corrected, some simplified, and psd file added for download:

     SearchVistaIcon.psd (150.40 kb)
 

 

Before we start, you can download my three free inGradients: 

     inGradients2.grd (17.18 kb)

Here's how you save and activate them. (Note that you don't need them if you downloaded the psd file.)

 

Now we're set. 

   

 
1. First open a new Photoshop document, size 256 x 256 px. Create a new layer, name it "Frame". Choose the Elipse tool, and set the elipse options to 182 x 182 px.

  Click to create the elipse. Right-click this layer and Rasterize it. drag it to the center of the image. Use Grid to help you. 

Duplicate this layer and name it „ Lens“. In Layers window, drag it under the Frame and turn it off for now.

 

  2. Choose the Select tool, take the Fixed size style and set it to 145 x 145 px.

 

  click on the Frame layer  to create the selection,  positon it to the center, as pictured...

 

...and hit the Delete key .

 

                        3. Now we'll dress up this layer. Go to layer style button (f) and add a Gradient Overlay.  It is the third from the end of my inGradients.  Copy these settings:

 

And Bevel and Emboss settings:

As Shadow Mode color, use #170237.

 

4. The Frame is finished. Now turn on the Lens layer. Add the Gradient to it (the next inGradient) and these settings:

 

 
To make it look more like a lens, we'll add Inner Glow as well:

 

(Use a more whiter color than the default Inner Glow one.)  

TIP: You can decrease the opacitiy of this whole layer if you're combining it with some multi-toned background.

 

5. Now select both the Frame and Lens layers and drag them to the top left corner of the image, two pixels from the edge.

 

6. Now to make a handle: create a new layer, name it Handle. Choose the Rounded Rectangle tool, copy the settings and create the handle:


  

 

Go to Edit ->Transform path ->Rotate and set to -45%, and hit Enter.

   

 

7. To dress it up, apply my last inGradient to it, copy settings:

   

Add Bevel and Emboss:

   

And Inner Glow, with a blue color #56c3da :

 

 


8. Position this layer to the bottom right corner, with a few pixels more away from  the bottom edge.


  

   

9. Now to create the little metal handle, make another Rounded Rectangle, only smaller: 24px x 44 px.

Rotate it the same -45°, and position under all layers, and as pictured:

 

 
Replace the Gradient with the Frame gradient, reverse it and turn off Inner Glow.

  

  

10. Now we'll add a little shadow. Create a new layer under all layers. Set the foreground color to #170237

 

 

Choose the Brush tool,  Basic Brushes, and take the 100 px brush that is blurred already.

 

 

  

Click once to create the shadow. Go to Edit-> Transform path -> Scale, and scale it about the same as in the first image.

Decrease the opacity of the layer to around 40%. 

Drag the shadow as you wish, make sure it doesn't go over the edge and - you're done!

  

You can dress it up with some text like I did, scale it as little as you want to, it won't lose any of it's charm. Good Photoshopping!

  

 

 

  

 
 
 
 


Photoshop Tutorial: Create a CD Vista Icon for all backgrounds

by djuro 27. June 2007

In this tutorial, I'll do my best do show you how easily you can make a Vista icon out of two Photoshop layers.

 

  UPDATE  27/09/2007: Some steps simplified, and psd file added for download:

            VistaCD.psd (180.42 kb)

 

 

Before we start, you'll want to download my two free (in)Gradients.  inGradients1.grd (17.85 kb)

Save them in Program Files ›  Adobe ›  Adobe Photoshop ›  Presets ›  Gradients. To activate the new Gradients, you have to start the program afterwards. To load them into your Gradient Presets, select Gradient Tool and click Load, then choose the inGradients. Mine are the last two of them.

OK now we're set. Here we go:

   

 

1. In Adobe Photoshop, go to File › New and set the canvas size at 256 x 256 px as shown. You can also click Save Preset and name it Vista, for future projects.

 

 


2. In Layers window, right-click on the Background layer and duplicate it. Name the duplicate Dark Background. In Tools window set the foreground color to a darker shade of gray and paint the Dark layer with Paint Bucket tool. For now, turn that layer off by clicking the litle eye on the left side of it.

 

3. In the bottom of Layers window click the "Create a new layer" button. Name it "Transparent".

 

4. Choose the Elipse Tool. In Options toolbar (right below the main toolbar) klick the little black arrow and set it to Fixed size, 220 x 220 px.

Create the shape on the canvas by simply clicking on it.

 

5. Click Ctrl + ' to show the Grid. (TIP: You can adjust the Grid in Edit › Preferences › Guides, Grids & SlicesGrid: Gridline every: 32 px; Subdivisions: 4). Center the shape using Move Tool and keyboard navigation. Use the Grid as a ruler. Now move the Grid, again with Ctrl +'

 

6. With "Transparent" layer selected, in Layers click the "Add a layer style" button, and go to Gradient Overlay.

 

Load my blue Gradient, set it Linear, 125°, reverse as shown. (TIP: When you create a gradient you like, click "New" button to save it - don't forget to confirm with "OK"!)

 

 

 

7. In the same Layer Style window select Drop Shadow, and set it to 100%, 45°, distance 3px and size 7 px. Click OK.

 

8. Now set the Opacity for the "Transparency" layer to 42%. It should look something like this:

 

9. Create a new layer and name it "Cover". The same as with "Transparency", create a circle using the Elipse Tooll, only this time with Fixed size 210 x 210 px. Again, use the Grid to center it. Add Layer Styles for "Cover": load my last Gradient, set it to Angle...

...and select Inner Glow and set it to Opacity 35%, Source Edge, and 5 px size.

The whole "Cover" layer should have Opacity 100% 

 

 

10. Now select both layers using Ctrl, right-click on them and Rasterize Layers. Right-click again on them and Link Layers so they stay aligned. 

 

11. Take the Elliptical Marquee Tool, on the Options bar select Fixed size, and set to 80px x 80px

 
Click to make the selection, and center it. With Cover layer selected, hit Delete: 

 

12. Now make another selection, this time 40 x 40 px. Center it. Select "Transparent" layer and hit Delete. (We're almost done!) 

 


13. With Cover and Transparent selected, go Edit › Transform › Distort. Now the shape is in a rectangle net. Now click and drag the top right corner towards the middle, diagonally. Press Enter when you like the shape of it, and Voilà - you made a cool Vista icon that fits to all backgrounds. 

 

Turn on the Dark Background to check it out.

 

  Now you don't want your CD to look like everyone else's, do you? Put your logo, your photo, or your sign on it! Simply create a new layer and type in it, draw, or put a picture. Adjust it to the CD layer before distorting and merge it. Good Luck with it! And send me your little masterpieces! We can make an expo!

Here's a couple of examples of mine: 

  


Powered by BlogEngine.NET 1.2.0.0
Theme by Itookia.com

Calendar

<<  August 2008  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar

Categories


Archive

Skype us

Djurdjica

My status



Domagoj

My status



Our friends


Axialis Software - Icon, Cursor and Screensaver Authoring Tools for Windows