Archive for January, 2012

30 Dribbble Freebies For Web Designers

Looking for some User Interface (UI) design for inspiration or free UI PSDs for your next design project? We dived into Dribbble.com, and handpicked you some of the finest (and free) PSDs shared by various designers.

dribbble freebies 30 Dribbble Freebies For Web Designers

Check out the entire list after jump.

For more PSD downloads – we recommend checking out our freebie section and the following posts:

Compact Music Player by Daryl Ginn [Download]
A lovely minimal compact music player design, would serve you in the best manner if you are to build a new app or something that requires a music player.

dribbble freebies 1 30 Dribbble Freebies For Web Designers

Percentage Bar by Daryl Ginn [Download]
These two awesome percentage bars can be used in any application where something is getting loaded.

dribbble freebies 2 30 Dribbble Freebies For Web Designers

Glass Music Player Freebie by Norm [Download]
Glass Music Player is a great music player with a classy glass look; this free PSD can be downloaded without any problem.

dribbble freebies 3 30 Dribbble Freebies For Web Designers

Radio Player Freebie(PSD) by I’m Charlie – TheIssland [Download]
Here we have a beautiful looking radio player with a lovely track being played on it; a little addition of buttons can make it much better.

dribbble freebies 4 30 Dribbble Freebies For Web Designers

Blixt Freebie #2 by Andree Blixt [Download]
This is a nice search bar made by using Photoshop; you won’t be able stop yourself from typing keywords in it.

dribbble freebies 5 30 Dribbble Freebies For Web Designers

Twitter Button Freebie by Norm [Download]
These are two attractive Twitter buttons; they have been made with vector shapes and some layer styles.

dribbble freebies 6 30 Dribbble Freebies For Web Designers

Half Moon Music Player by Norm [Download]
The unique Half Moon Music Player has got a lovely piggy nose styled pause button along all other major music player buttons.

dribbble freebies 7 30 Dribbble Freebies For Web Designers

Calendar Freebie by I’m Charlie – TheIssland [Download]
We have got here a neat looking calendar freebie in PSD format; white background with black digits gives it a classy look, while the red top makes it look hot.

dribbble freebies 8 30 Dribbble Freebies For Web Designers

The aButton Freebie by Diego Monzon [Download]
AButton is an exceptional freebie which can be used wherever you like and the shading around the white color gives an eye popping effect.

dribbble freebies 9 30 Dribbble Freebies For Web Designers

Wrench Freebie by Diego Monzon [Download]
The wrench gives a strong feeling; this great PSD has been left editable in all ways and has got paths as well.

dribbble freebies 10 30 Dribbble Freebies For Web Designers

Map UI Controls Freebie by Edi Gil [Download]
Some great images that can be used in map user interfaces.

dribbble freebies 11 30 Dribbble Freebies For Web Designers

Wooden Button by Pontus Johansson [Download]
We have got a lovely wooden button over here; it’s a great idea of using wood effects to create a virtual button.

dribbble freebies 12 30 Dribbble Freebies For Web Designers

Black UI Kit by Jonathan Moreira [Download]
This is a beautiful user interface kit with a number of buttons; it gives a dim light disco feeling.

dribbble freebies 13 30 Dribbble Freebies For Web Designers

Audio Player by Cameron Dearsley [Download]
Simple, but stylish audio player PSD and it has the required audio player buttons on it as well.

dribbble freebies 14 30 Dribbble Freebies For Web Designers

Pixels Shopping Basket by Norm [Download]
We have an attractive red colored shopping basket, ideal to be put on online shopping sites.

dribbble freebies 15 30 Dribbble Freebies For Web Designers

Stylish Notification by Thomas Offinga [Download]
Those are three different attractive notification bars, which are ideal to be used in places where confirmation, error or warning signs are meant to be displayed.

dribbble freebies 16 30 Dribbble Freebies For Web Designers

Loading Bar by Andreas Fluge Iden [Download]
These are three different loading bars having distinct colors and each can be used to denote specific processes.

dribbble freebies 17 30 Dribbble Freebies For Web Designers

Wooden Menu by Breezy [Download]
Wooden Menu is a gorgeous looking wooden touch menu; it can be used on any appropriate site, probably some wood products site or on any site to give it a classy look.

dribbble freebies 18 30 Dribbble Freebies For Web Designers

Notepaper Freebie by Norm [Download]
A beautiful fully layered PSD, appropriate for being used at any place where a note is required to be shown in a handwritten style.

dribbble freebies 19 30 Dribbble Freebies For Web Designers

Power Button by Pontus Johansson [Download]
An impressive power button, the best part is that it really gives a feeling that something big can be turned on and off with it.

dribbble freebies 20 30 Dribbble Freebies For Web Designers

Banner Designs by Scott Rollo [Download]
Pretty Banner is a really cute banner with a nice little star on it, the curve in the background gives it a natural look good.

dribbble freebies 21 30 Dribbble Freebies For Web Designers

Macbook PSD by Dany Duchaine [Download]
This is a fully layered PSD Macbook pro, has the classic silver coloring and a nice Apple Inc. like surrounding.

dribbble freebies 22 30 Dribbble Freebies For Web Designers

Your cart widget by Pawel Kadysz [Download]
Your cart widget is an amazing widget being shown in two different color schemes with different backgrounds.

dribbble freebies 23 30 Dribbble Freebies For Web Designers

35 Sweet Social Icons by I’m Charlie – TheIssland [Download]
Sweet Social Icons are a number of sharp and well toned icons that can be used on any project to give it direct connection to social networks etc.

dribbble freebies 24 30 Dribbble Freebies For Web Designers

Google PSD by Victor Ingman [Download]
This is an amazing PSD for Google+; the g+ logo is a bit dark, but becomes visible when you look more closely

dribbble freebies 25 30 Dribbble Freebies For Web Designers

Vue by Fares Farhan [Download]
An amazing user interface kit with a number of buttons that support great features and can be used for various purposes.

dribbble freebies 26 30 Dribbble Freebies For Web Designers

Wooden Panel Box by Patrik Larsson [Download]
A realistic woody panel box with several layers and it can be customized with ease, would cast a great impact on an online wood store.

dribbble freebies 27 30 Dribbble Freebies For Web Designers

Freebie- Social Buttons by Patrik Larsson [Download]
These are really nicely toned social buttons for Facebook, Twitter and the latest big gun in the gang, Google+.

dribbble freebies 28 30 Dribbble Freebies For Web Designers

Modern Vintage Stickers Badges by Pixeden [Download]
An outstanding set of 8 retro stickers and vintage badges. They feature all kind of styles including grunge, modern and retro. You can find a great usage for this in any web design or ui project you have in mind.

dribbble freebies 29 30 Dribbble Freebies For Web Designers

Speckle Brushes by Maleika E. A. [Download]
An amazing pack of speckle brushes for photoshop which are made with only "the finest cocoa powder" This great brush pack is available for free download and commercial projects usage.

dribbble freebies 30 30 Dribbble Freebies For Web Designers

Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

In this tutorial, I will show you the detailed step to apply Texture with Clipping Mask to Produce Unique Typography in Photoshop. In my past tutorials I have used clipping mask a few times but many of you might still be confused about it’s usage. So hopefully this basic tutorial will help answering some questions.

By definition, a clipping mask:

“lets you use the content of a layer to mask the layers above it. The masking is determined by the content of the bottom or base layer. The non-transparent content of the base layer clips (reveals), the content of the layers above it in the clipping mask. All other content in the clipped layers is masked out.”

On top of clipping mask, to produce the final effect for this tutorial, I also used a number of other settings such as layer blending, filter effect and adjustment layers.

Here is a preview of the final effect I have for this tutorial: (click to enlarge)

crack text flatten 2 500x618 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorials there. Signup now and get exclusive :) Find out more about the VIP Members Areas

vip sign up 250 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

OK Let’s get started!

To complete this tutorial, you will need the following stocks:

Crack Texture

Water Brushsets (choose one from the list)

Step 1

Let’s start by creating a document with black background, use the type tool to type a letter on the document:

1 type 500x580 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Now load the stone texture into Photoshop, use the rectangular marquee tool to select a piece as shown below:

 

1 select Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Copy and paste this piece of texture onto our text, resize and rotate it as shown below:

 

1 paste 500x524 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Step 2

Now if you right click on the texture layer, you will see an option called “Create Clipping Mask”, click on it:

2 create clip Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop 

And you will texture becomes an overlay for the text, with the rest of the area disappeared:
 

2 effect1 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Repeat Step 1 and 2, cover the entire text with stone texture – we can use this to get some practices with clipping mask:

 

2 effect 2 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Step 3

Now we want to remove part of the text with a layer mask add to text layer:

3 layer mask Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Now you will because we have the texture layers as clipping masks, the parts we erased on the text will fade on the texture layers as well:

 

3 effect2 500x316 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

I would also like to mention that you can add adjustment layer as clipping mask as well – make sure you tick the “Use Previous Layer to Create Clipping Mask” option – this way the effect will only apply to the layer below the adjustment layer:

 

3 adjustment clip 500x257 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Try adding a few adjustment layers (curves, levels) as clipping mask to the texture layer, and test the effect.

Step 4

(Attention – the rest of this tutorial involves some advanced techniques, there is no need to proceed if you just want to learn something about clipping masks)

Now we can add some flowing water effect to the image – we can use the water brush to paint some dripping/splashing water:

4 paint Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Use a liquify filter to warp this water pattern as shown below:

 

4 liquify 500x644 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Repeat this above step, make several water pattern layers and attach them around the text:

 

4 dup1 500x355 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Step 5

For some final retouches, I added some cloud effect with some cloud brushes I downloaded from the web:

5 cloud1 500x275 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Also added some grungy textures around the canvas for some decoration:

 

5 grunge pattern 500x595 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Finally, I flattened the image and duplicate the background layer, and applied some “Accented Edges” filter effect on the duplicated layer – use layer mask to hide some parts of this duplicated layer to reveal the background layer:

 

5 accented edges 500x405 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop 

I then further added some slight colour adjustment and here is the final effect I have: (click to enlarge)

crack text flatten 2 500x618 Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

That’s it for this tutorial! Hope you enjoy it and find it useful! Till next time, have a great day!

Design Inspiration: Blog Design Showcase

Get a free icon and vector bundle (worth $54) just for subscribing to our weekly newsletter!

Creating a quality blog design can be a significant challenge, because the design should add to the usability of the blog and should not overpower the content. Browsing through examples of beautiful blog designs can provide inspiration that can be put to good use in your own design work. In this post we’re showcasing 25 outstanding blog designs from various designers for your inspiration.

Cookiesound

Cookiesound

Art of Attention

Art of Attention

Other Focus

Other Focus

Developer Drive

Developer Drive

Sacha Greif 

Sacha Greif

In My Bubble

In My Bubble

Discover Paper

Discover Paper

Ajayu

Ajayu

Shopify

Shopify

Illustrator’s Lounge

Illustrator's Lounge

Geek Victoria

Geek Victoria

SimpleBits

SimpleBits

Beyond Emmaus

Beyond Emmaus

Miss the Stars

Miss the Stars

The Pretty Blog

The Pretty Blog

Mommy Blog

Mommy Blog

By Marina

By Marina

Web is Love

Web is Love

Janna Hagan

Janna Hagan

Wouter De Bruycker

Wouter De Bruycker

Sadie the Shih Tzu

Sadie the Shih Tzu

Jayme Stone

Jayme Stone

Noupe

Noupe

Innovative Cuisine

Innovative Cuisine

Beautiful Type

Beautiful Type

For more design inspiration please see:

Royalty-Free Graphics

Modatoi: Astounding Angles

Aside from her obvious challenge of finding clothes to hide her freakishly long hips, Siobhan was scouring the Internet in search of a chiropractor who did not charge on a per-vertebra basis.

Maybe it’s just some sort of optical illusion, but to my eyes, that right leg of hers appears to be about eight inches lower than it ought to be.  Photoshop has great tools to fix flaws such as these, and I continue to hold that failing to employ said tools can make for just as much of a ‘disaster’ as does abusing them. 

Thanks Roxane. You can see the original on the Modatoi site.