I was inspired by may other UI designer and most importantly Apple UI. So i decided to design something and share with all of you freely. This is the first part of Sharp & Sleek UI Kit. So you can download it and are free to use and modify.
Click the below button for free downloading.

Related Posts

1. Add to Cart Button – Free Web Element
2. Mini Notepad – Free Web Element
3. Member’s Login Box – Web Element

Today I am here with new Freebie, its a button (Add to Cart Button). I personally was working on projests where I saw this buttom which was looking very messed up so I decided to design and share my work with you guys and I hope you like this and give me some refreshing comments as well.

Add to Cart Button - Free Web Element

Related Posts

1. Mini Notepad – Free Web Element
2. Free Video Player Interface in Photoshop – Freebie
3. Member’s Login Box – Web Element

Today I decided to share another free web element “Mini Notepad”. You can use this element to show qoutation, testimonial etc.

Related Posts

1. Search Bar – Freebie
2. Member’s Login Box – Web Element
3. Free Video Player Interface in Photoshop – Freebie

Step by step – Photoshop tutorial

Step 1 – Open Photoshop and create “New Document”

Let’s start with creating a new document in abobe photoshop, so goto File > New … (Ctrl + N) and a popup box will appear and ask for document size and further details. By the way! I am going to use (1024px  x 768px) size document.

Step 2 – Create Guide lines

Now go to View -> New Guides… and when you click New Guides… a popup box appear named as;
“New Guide“. Select Orientation -> Horizantal, Position -> 50% and Click OK
Now again repreat above step but now this time select Orientation -> Vertical.

In this step we use guides to know the center point of the document, because we draw our shapes in the center of the document.

Step 3 – Draw Shape

Now a draw a circle with the help of “Ellipse Tool” and sellect the following option from the tool bar.

Step 4 – Blending Options

Now it is a time to play with blending option to get desired results. Goto the Layers Panel and click “Blending Option” and you will see a popup box with lot of more options and then we select “Gradient Overlay”

After selecting “Gradient Overlay” you will notice a popup box appear, so the task is simple please follow the following image for accurate results.

• Blend Mode : Normal
• Opacity : 100%
• Gradient : Please check below this image for gradient color setting
• Style : Angle and tick (check) Align with Layer
• Angle : -120 Degree
• Scale : 100%

Gradient Settings:

1. Color : #aaaaaa, Location: 0%
2. Color : #f7f7f7, Location: 9%
3. Color : #c8c8c8, Location: 14%
4. Color : #f7f7f7, Location: 31%
5. Color : #c5c5c5, Location: 51%
6. Color : #ffffff, Location: 57%
7. Color : #bbbbbb, Location: 63%
8. Color : #f2f2f2, Location: 75%
9. Color : #aaaaaa, Location: 100%

Now Select “Bevel and Emboss” and follow the following settings;

• Style : Inner Bevel
• Technique : Smooth
• Depth : 100%
• Direction : up
• Size : 1px
• Soften : 0px
• Angle : 111 degree & 42 degree
• Highligh Mode : #ffffff and Opacity : 100%
• Shadow Mode : #000000 and Opacity : 32%

Inner Glow Settings:

• Blend Mode : Normal
• Opacity : 100%
• Noise : 0%
• White color #ffffff
• Technique : Softer
• Source : Edge
• Choke : 0%
• Size : 3px
• Range : 50%
• Jitter : 0%

Drop Shadow Settings:

• Bend Mode : Multiply -> black color
• Opacity : 40%
• Angle : 70%
• Distance : 8px
• Spread : 0%
• Size : 20px
• Noise : 0%

And finaly click OK button

After playing with blending you are able to see the following results on your screen, but its not enough we have to give this final touch.

Now hold the Ctrl key from you keyboard and click over the circle shape from Layers and you will see that the circle from artboard is already select, now create new layer ( Shift + Ctrl +N ) and Fill (G) with #cccccc. And select Color Burn, Opacity : 80% and Fill 30%.

And goto Filter -> Noise -> Add Noise and you will see a popup box “Add Noise” and set the Amount : 400%, Distribution : Uniform and tick the Monochromatic.

Next Step is Filer -> Blur -> Radial Blur. Then Radial Blur, Amount : 50, Blur Method : Spin and Quality : Best.

Step 5 – Draw node

Let’s draw node over the circle shape with the help of “Rounded Rectangle Tool” same as following image.

After the above step let’s add some blending style for final results:
Select Drop Shadow:

• Blend Mode : Normal and color white
• Opacity : 100%
• Angle : 120 degree
• Distance : 1px
• Spread : 0px
• Size : 0px

Inner Shadow:

• Blend Mode : Multiply with Black color
• Opacity : 73%
• Angle : -120 degree
• Distance : 2px
• Choke : 0%
• Size : 7px

Add some cool background and if you want to add more things in your drawing you can. Please take a look at my final results bellow;

I hope you like this photoshop tutorial and give me you comments.

Download Amplifier Knob Tutorial PSD file.

Related Posts

1. Famous Letterpress Text Effect in Adobe Photoshop CS5
2. Rough Paper Effect in Photoshop CS5
3. Colorful Abstract Background in Photoshop CS5

Free Video Player Interface – Photoshop

Today I am sharing another freebie web element, “Video Player Interface”. I was free and decide to design some new freebie for you guys. So i spend some couple of hours and design “Video Player Interface”.

Click Here to download Photoshop file

Related Posts

1. Search Bar – Freebie
2. Gmail Web Elements – Freebie
3. Simple Navigation Bar (PSD)

Download Free Photoshop Patterns

Download Circles Pattern

Download cirssXcross Pattern

Download Cubes Pattern

Download Dark Brick Wall Pattern

 Download Dark Leather Pattern

Download Dark Mosaic Pattern

Download Diagonal Noise Pattern

Download Diamonds are forever Pattern

Download Fancy Deboss Pattern

Download Inflicted Pattern

Download Mirrored Squares Pattern

Download Noise Subtle Cross Lines Pattern

Download Pool Table Pattern

Download Project Papper Pattern

Download Robots Patter

 Download Small Crosses Pattern

Download Soft Circles Scales Pattern

Download Triangles Pattern

Download White Texture Pattern

Download Whitey Pattern

Related Posts

1. Search Bar – Freebie
2. Noise Texture Background Effect in Adobe Photoshop CS5
3. Colorful Abstract Background in Photoshop CS5

Here another freebie, Download Memebers Login box free. This is shiny, sharp and bright members login box. You can download the (.psd) from the following link and use it freely without any licence restriction.

Free download Member’s Login Box

Click here to download

Related Posts

1. Search Bar – Freebie
2. Simple Navigation Bar (PSD)
3. Gmail Web Elements – Freebie

Download web element search bar – freebie

I am inspired by many other designers and decided to share my work as freebie. Just click on the following button to download this search bar. PSD is available.

Click here to download – Search Bar Freebie

Related Posts

1. Gmail Web Elements – Freebie
2. Simple Navigation Bar (PSD)
3. 8 Usefull CSS/jQuery Tutorials for Web-Developers

Inspiration of the day – Beautiful and sleek Iphone Icons

BookTime iPhone icon

Related Posts

1. 15 Free Social Media Icon Packs – Freebies
2. 10 CSS Best Examples – Inspiration of the Week #4
3. Inspirational Character Designs

Add popular posts feature – WordPress

Final results

Step by step wordpress tutorial

Step 1:
Open your wordpress admin panel and go to Appearance > Editor and open Main Index Template index.php from the right side.

Step 2:
Now find your loop in index.php file

<?php while ( have_posts() ) : the_post(); ?>

and add following codes before the above line of code;

<?php /* Start popular Post */ ?>   
    <div id="pp-01">
        <h3>Popular Posts</h3>
        <?php
            $pp_query = "SELECT ID, post_title
                         FROM {$wpdb->prefix}posts
                         WHERE post_type = 'post'
                         ORDER BY comment_count
                         DESC
                         LIMIT 0,10";
            $popular_posts = $wpdb->get_results($pp_query);
                foreach($popular_posts as $pop) {
                    if ( has_post_thumbnail() ) {
        ?>
            <div id="pp-img-<?php echo $pop->ID; ?>">
        <?php    echo '<a href="' . get_permalink( $pop->ID ) . '" title="' . esc_attr( $pop->post_title ) . '">'; ?>
        <?php    echo get_the_post_thumbnail($pop->ID, array(100,100)); ?>
        <?php    echo '</a>'; ?>
            </div>
        <?php
                    }
                }
        ?>
        </ul>
    </div>
<?php /* End popular Post */ ?>

and then simply upload the file

Step 3:
Now go to the Style.css file and add the following css codes to stylise wordpress popular post area.

#pp-01 {
    border-bottom: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 30px;
    padding-bottom: 20px;
    width: 100%;
}

#pp-01 img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0 10px 10px 0;
    padding: 6px;
    width: 100px;
}

#pp-01 h3 {
    margin: 0 0 12px;
    border-bottom: none;
}

See more wordpress tutorials

Related Posts

1. Add About Author Under Each Post – WordPress
2. Get rid of unnecessary post revisions – WordPress
3. 15 Most Wanted Web Designs – Inspiration of the Week #01