This Photoshop tutorial teaches you to create a custom search Icon for your web pages. The dimensions used in this tutorial is : width 270px, height 290px and resolution 72px. This tutorial clearly demonstrates the use of marquee Tool, Gradient Tool, Pen Tool etc. You will also learn the techniques to create Magnifying Glass and scan lines. At the end of this tutorial you will be able to create the custom icons of your own, rather than hunting for them in the net.
Open a new document of 270x290px with white background. Create a new layer and select the Gradient Tool (G) from the tool bar. Set the color from #beece6 to #349c8c and in the options panel select the Linear type. Drag the cursor from bottom to top. Name this layer bg1. Your screen should appear some thing like this.
Next Create a new layer and using a Rectangular Marquee Tool (M), draw a rectangle of 270x90px. Then select the Gradient Tool (G) from the toolbar and set the color from #0b7c7a to #02733f and drag the cursor from left to right on new layer. Press Ctrl + D to deselect the layer. Name this layer bg2.
Using Rectangular Marquee Tool (M) draw a rectangle of dimensions 75x80px and using the Gradient Tool (G) set the color from #cbf4f2 to #5ccfc5 drag the cursor from left to right. Name this layer bg3.
Next we will learn how to create scan lines. Open a new document with 2x2px with transparent background. Zoom your document to 1600%. Using a Pencil Tool (B) with width of 1px and color #666666 draw a line like in the image below. Select Edit > Define Pattern enter the name for your pattern in the text box and click OK. Close the Document.
Create a new layer. Press Shift + F5 select from the patterns, the new pattern you have created and click OK. In your layers panel reduce the opacity of the layer to 50%. Name the layer scanlines. You should have the image like below:
Next we will create a Magnifying Glass. Using Elliptical Marquee Tool (M) draw a circle. Press Shift + F5 set the fill color to White. Press Ctrl + D to deselect the layer. Double click on the layer in the layers panel, apply Stroke, Color Overlay, Bevel and Emboss, Inner Shadow & Drop Shadow settings as given below. Name this layer Glass:
Then set the Color Overlay style to white with the blend mode to be Normal and the opacity as 100%.
The Image should appear like :
Set the Stoke style with Linear Gradient from #050003 to #6dc33a to #050003, size as 10px, position as Inside and the blend mode to be Dissolve.
The Image should appear like :
Select the Stroke Emboss style from the Bevel and Emboss structure and set the depth to 171%, direction to Down, size to 21px and soften to 2px. The Highlight mode should be set to Overlay with the color as #7cff04 with the opacity of 95% and The shadow mode as black (#000000). Then set the shading angles as shown in the image below.
The Image should appear like :
Then set the Inner Shadow structure with blend mode to be normal with color #a9fd07. The Distance and the size of the Inner Shadow should be set to 30px and 90px respectively.
The Image should appear like :
Finally for the Magnifying Glass set the drop shadow style with blend mode to be overlay and the color as #003d0d. The distance, spread and size for the Drop Shadow style to be set as 40px, 61px and 95px respectively. Play with the Shadow angle, I have set that as -96.
The Image should appear like :
Now press Ctrl + T. In the layer options panel set the vertical angle to -10. The Glass layer will rotate and will appear like the one below:
The Image should appear like :
Select the Pen Tool (P) to draw the handle for the Magnifying Glass. Using pen tool draw the handle as shown in the Image. Name the Layer as Handle.
Double click on the layer in the layer panel to open the layer style box and set the Drop Shadow, Gradient Overlay & Bevel and Emboss as shown below:
First set the Drop Shadow style with color as #5efeb4 and blend mode as multiply. The shadow angle, distance and size should be set as 132, 6px and 5px respectively.
The Image should appear like :
Then we will set the Gradient overlay style with colors ranging from #646060 to #150d02 to #074e12 and to #0f120b, Just play with the position of the colors in the Gradient box. Set the blend mode as Overlay and the Gradient angle as -31.
The Image should appear like :
Set the style as Inner Bevel for the Bevel and Emboss Structure with distance set as 100% and the size as 9px. The colors for the highlight and the shadow mode can be set to #acd262 and #487d26 respectively. Set the Bevel angles as shown in the image.
The Image should appear like :
We will next create the shadow for Magnifying Glass : Duplicate the Glass Layer and place this layer below the Glass layer. Right Click on this layer in the layer panel and select Clear Layer Style. Then set the new styles - Inner Shadow and Stroke for the layer. Name it as shadow. Reduce the opacity of this layer in the layer panel to 30%. Now using arrow keys slightly move the layer down to give a shadow effect. Once you do this, the design should look like the one below:
Next Using Text Tool (T) create a letter of your choice (I have used ‘W’) set the font size as 48 and the color #000000. Press Ctrl + T to rotate the text layer. Set the angle as 45 in the layer options box. Duplicate this layer and place it on either side of the magnifying glass as shown in the image below:
Create another duplicate text layer. Increase the font size of the duplicate text layer to 100 and position it in the center of the Magnifying glass.
To give finishing touches we will add few strokes to the glass layer. Select the brush tool set the brush size to 2px and add few strokes of color #65b60c and #5ccfc5. Select the Blur Tool (R) and blur the lines. Remember to rasterize these layers before blurring.
Using Rectangular Marquee Tool (M), create a rectangle and click Select > Transform Selection. Rotate the selection and place it in the upper right corner as shown in the image below:
Finally select the bg1 layer in the layer panel and press delete. Repeat this for the bg2 and the scanlines layers. This will give a Torn Page effect to the Image. Your final Image will look like the one below.
More Tutorials: 
