12 Excellent Thumb Image Styles for Web Designers

In this post I would like to share some ready to use modern thumb image styles that you always looking for. These images created in Photoshop by me and free to use for all my readers. I am here sharing a downloadable psd file to help you. Web Designers who use Photoshop can easily use this file according to their needs.

If you have any query please leave a comment. I'll try my best to help you. Enjoy!!!

Download thumb_view_style.psd

1. Wide Border Image Style

This image style is very common now a days. You might have noticed this style in different web sites. Creating clean border style is very easy. Take any image of any size you want to use. Make a new layer (proportionately big from existing image) just below the existing layer and fill with white color. Now use a Stroke option by using Blending option to give border. You'll get final result like me.

2. Sleek Border Image Style

This is also a very famous style I always use during designing. All you need to create effect like this just reduce proportionate size of stroked layer and rest steps are same as above. This style is very common in ----- galleries.

3. Sleek Border with Drop Shadow

Just give a drop shadow effect to your sleek border layer created in "Sleek Border Image Style" above. To give drop shadow effect you'll have to use blending option.

4. Behind Drop Shadow

This is very modern style for thumb view image and of course my favorite too. If you are a Photoshop user then download psd file from above link and learn how to create style like this.

5. Flip Shadow Style

A very unique and clean style used for horizontal thumb view in ----- galleries. Download psd file from above to learn the process for creating this style. You will notice that all steps are same like above (In Wide Border Image Style), Just added flip drop shadow style to create it.

6. Bottom Corner Cut

Bottom Corner Cut style is very unique style for ----- galleries. Follow a Style like above in "Sleek Border Image Style" and cut a bottom corner of image by using marquee tool.

7. Wide Rounded Border

A very simple and sober border style. To give a style like this click on blending option and choose stroke outside with 3 or 4 size. Download psd file from above to quick reference.

8. Top Flip Shadow

Another style by using drop shadow effect. You can apply this style on top left or top right side of the image. It gives natural gallery image look. Very trendy style now a days.

9. Classic Rounded Corner Style

Classic Rounded Corner Style is very common now a days and very easy to create. A time saving style for your ----- gallery images. There's number of image styles but this style is still famous among design community.

10. Dotted Border Style

Dotted Border Style gives different look from solid border image style. Some contest design sites started to use this style. You can say that this is new Web 2.0 style.

11. Classic Drop Shadow

A very old classic drop shadow style used by designers in early 90's, but still famous among designers. You can use this with stroke or without stroke images. Even some designers use this with default value of drop shadow.

12. Transparent Shadow Style

A famous Web 2.0 style among design community. You can create this style by using blending option. Follow psd link above to learn it. Every 6 sites out of 10 are using this style.

Do you have any suggestions? Leave your comment.

Convert Your Favorite Pic into Pencil Sketch

Being a designer I always like pencil sketches. I was very keen to learn pencil sketch during my childhood in school. It looks very artistic.

Today I would like to share that how to convert your favorite pic into pencil sketch by using Photoshop. Well, there are lots of ways to do that but the simplest way I would like to share with you.

Here we go:

Original photo that we will convert into pencil sketch (You can use any favorite photo of your own choice).



Final photo after converting into pencil sketch:



Step 1

Open photo in Photoshop and duplicate your selected layer by pressing ctrl+j from background to Layer 1.



Step 2

Now convert (selected) Layer 1 into grayscale by pressing ctrl+shift+u or go to Image > Mode > Grayscale.



Step 3

Again make a copy of Layer 1 by pressing ctrl+j.



Step 4

Now convert your selected layer (layer 1 copy) into inverse by pressing ctrl+i.



Step 5

Now convert your selected inverse layer Normal to Color Dodge, It will hide your pic for sometime but don't worry.



Step 6

Now with selected layer go to Filter > Blur > Gaussain Blur set Radis 2.5 pixels (You can set Blur Radius according to your choice).



Now here is final copy of your favorite one:



Do you have any suggestions? Add your Ideas.

Convert your digital pics into pencil sketch

FotoSketcher turns digital photos into beautiful pencil sketches or paintings in seconds. This free program can help you create images that really look like they have been hand drawn by the best artists. If you want to turn a portrait, the photograph of your house or even the picture of your pet into a black & white or colour pencil sketch, then look no further, FotoSketcher will do this in just a few seconds.

Now you can print stunning images to make original gifts for your friends or relatives, or print on birthday cards or even T-shirts.

And best of all, it comes with absolutely no strings attached!

Click here to download FotoSketcher

Photoshop Tutorial: How to create Shiny Starburst Effect

In this post you will learn how to create shiny starburst effect by using photoshop. Following the simple steps to create a shiny starburst effect:



Step 1

Open your canvas. Press D. (to set default foreground and background colors) Press Alt+Backspace to fill canvas with black color. Duplicate the layer ( right click on the current layer on the layer's panel and select 'duplicate layer '). Continue working on this new layer.

Step 2

Select the gradient tool from the tool bar, place the cursor at the bottom of the canvas, click and drag it to the top of the canvas. Now your canvas has a black and white gradient fill.

Step 3



Click on Filter>Distort>Wave the Wave window appears, give the settings as in the image on the right.

Step 4

Click on Filter>Distort>Polar Coordinates. The polar coordinates window opens up, give the settings as 100% and check the 'Rectangular to Polar' option.

Step 5

Click on Image>Adjustments>Hue/ Saturation and change the settings to : Hue - 200, Saturation - 25 and Lightness - 0. Check the Colorize option

Step 6

Next click on Filter>Render>Lighting Effects and set the Light type to Omni let the other settings be default.



Here's the shiny star!

Photoshop Tutorial: How to make nice glossy button?

In this post I would like to share how to make nice glossy button with photoshop. If you use photoshop regularly you would like this tutorial. These glossy buttons would match Web 2.0 design standards. Ok we are ready to start now. First look this button that we are going to design:



Step 1
Make new document with any size you want by pressing Ctrl+N (I usually do with short command it saves our time) or you can go to file menu and then select New, I am taking here 230x30 pixels size this is standard button size.

Step 2
Now fill this area with any color by pressing ALT+BACKSPACE I am filling this with light grey color.



Step 3
Now select newly created layer and right click on that to select blending option, Blending option pallett will open now select gradient overlay option from the left side of the pallett.





Step 4
With selected gradient option, click on gradient to edit it with the colour of your choice.



Step 5
Now adjust with color stop of left sided and right sided with your own choice I am filling up with light grey shade and then press ok.



Step 6
Your Blending option pallett already opened so select Stroke option from the left side where you have select Gradient overlay. Now adjust stroke size with 1px like I have done in picture given below and press ok.



Now you are done and your nice glossy button is ready. After you learning this tutorial you can adjust colour of your own choice to make different type of button. How do you like this tutorial? Rate this or send comments/suggestions.

All the best.

Create a nice header with brush tool tutorial

In this tutorial I'm going to explain you how to create a nice header with brush effect. I tried to give you as many images as possible. If you have any further questions you can always ask them by leavig a comment.

First of all open photoshop and create a new document like below:



Fill the background color with #666666 and get the Rectangular Marquee Tool (M) and select about 800 x 15 px on the top of a new layer(Ctrl + Shft + N). Fill this layer with anycolor you want. Now open the blending options and add these styles.



Apply a gradient overlay from #222222 to #000000 and end with #585858



And add a black stroke line from 1px.
Next we get the Rectangular Marquee Tool (M) again and select an area from about 800 x 150 px just under the bar we created, this is for the header so pick what fits the best for you, create a new layer (Ctrl + Shft + N) and fill this layer with any color you want. And apply a gradient overlay like below.



And add a 1px Black stroke like on the image below.



Now select Layer 2 (The header layer) and Ctrl + Click it to select it or go to Select > Load Selection and hit OK. Next create a new layer (Ctrl + Shft + N) above the previous created layer, this would be layer 3, on this layer we are going to create the grass effect. Do not deselect! Take out your brush tool (B) and get the Dune Grass and the Grass brush (If you reset your brushes they should appear in the list). Now brush the bottom of your header until you get a effect like me.



Next create a new layer (Ctrl + Shft + N) and again select the header layer (like above) Select > Load Selection and hit OK or just Ctrl + Click and apply a gradient from #FFFFFF to transparent going to the right bottom corner. Now add some text and your header is ready. I added some brushes and some blending options on the text, feel free to do it as wel. This is my final outcome.