Golden Design

Free Photoshop Brush Sets

2011-03-01T06:15:00.001-08:00

Hundreds of thousands of incredible Adobe Photoshop brush sets are all over the web. Due to this phenomenally vast amount of Photoshop brushes available, you can now add patches of dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, damaged, dreamy or any look you want.

Without further ado, we present 1000+ high-Resolution Adobe Photoshop brush setsthat will be perfect for any project you may happen to be working on.

Important: Licenses of every brush set varies, so be sure to check that information before using them.

1. Grunge Photoshop Brushes

1.1 Sidewalk Series Vol. 2 Oil Stains

10 high resolution grungy concrete stains inspired by all the cracks, stains, and spots on the sidewalk and in the street.

Download Brush Set here

1.2 Sidewalk Series Vol. 1 Cracks

6 Excellent high resolution sidewalk cracks to give you a nice grungy texture.

Download Brush Set here

1.3 Cracks Part III

15 brushes made with Photoshop 7.0. Those cracks look like soil cracks, but it’s just the paint on the door

Download Brush Set here

1.4 Urban Decay Photoshop Brushes

Here’s a large collection of 61 grungy, dirty and decayed photoshop brushes.

Download Brush Set here

1.5 QuadGrunged

QuadGrunged pack contains 10 grungy abstract brushes compatible with PS 7 and up.

Download Brush Set here

1.6 Cracked Brush Set

Cracked brush set contains 19 grungy brushes compatible with PS 7 .

Download Brush Set here

1.7 Typographic Grunge Brushes

Typographic Grunge Brushes set contains 25 brushes made from stock photos. Compatible with Photoshop 7 and up.

Download Brush Set here

1.8 Free Grungy Wings

10 Photoshop brushes that are ginormous (2500px).

Download Brush Set here

2. Floral Photoshop Brushes

2.1 Hand Drawn Floral Pattern Brushes

This is a set of 8 high resolution Photoshop brushes of hand drawn floral designs that was made with a quill pen and india ink.

Download Brush Set here

2.2 Fantasy Floral Photoshop Brushes

These 4 sets of Fantasy Floral vectors were compiled in single ABR file. These floral or foliage vectors created using Illustrator.

Download Brush Set here

2.3 Flowers Part I

There are 28 flowers in this set so you can call it half-mega-pack. They were made with Photoshop 7.0 and they’ve got some reasonable resolutions.

Download Brush Set here

2.4 Autumn Glory

An automn brush set inspired by an autumn walk through mountains of brown, red and yellow fallen leaves. Made in Photoshop 7.0

Download Brush Set here

2.5 Flower Ornaments Brushes

These are 9 flower ornnament brushes

Download Brush Set here

2.6 Free Hi-Res Photoshop Brushes – Floral

These are 100% original and REALLY BIG brushes, available in CS1 and CS3 formats, as well as a full set of PNG’s.

3. Glow Photoshop Brushes

3.2 Attack Brushes

8 brushes in this pack.

Download Brush Set here

3.3 Unreal Brushes

Unreal Brushes v.3 9 in High Quality.

Download Brush Set here

4. Miscilnea Photoshop Brushes

4.1 Akatsuki Cloud Burshes

7 cloud brushes in this set. An imagepack has been included.

Download Brush Set here

4.2 Smoke brushes

3 smokes per vol. but all of them are more than 1300 px. For the best result, use them in higher size.

Download Brush Set here

4.3 V E C T O R – S C A T T E R

Set contains 66 brushes. Each shape has 3 presets. 1. plain shape, 2. scatter, 3. opacity shift scatter

Download Brush Set here

4.4 Frost Brush Set

Set contains 8 brushes, made in Photoshop CS3.

Download Brush Set here

4.5 School Dayz Sketches Brushes

A set of 27 Photoshop brushes made up of sketches of school themed items. These were all drawn by hand! They are high resolution, with the average size being about 1800 pixels.

Download Brush Set here

4.6 Stencil Word brushes

Set includes 20 stencil word brushes, created in Photoshop version 7.0

Download Brush Set here

4.7 Fingerprint brushes

Set includes 10 stencil word brushes, created in Photoshop version 7.0

Download Brush Set here

4.8 Dirigibles

12 bruses – made in PSCS2, size 450 – 1144 px

Download Brush Set here

4.9 Health And Beauty

A free set of 67 Photoshop brushes ranging in resolution from 69 to 2463 pixels. The set is compatible with Adobe Photoshop 7.0, CS, CS2 and CS3

Download Brush Set here

4.10 1000 great PS free brushes

Abduzeedo has a huge collection of PaulW’s brush set collection. Click on every picture to go to his download page. You can watch the same collection on his journal when you clickhere

Download Brush Set here

5. Hair Photoshop Brushes

5.1 Hair brushes

Hair brush set made in Photoshop CS2.

Download Brush Set here

5.2 Hair Brushes III

5 Hair brush set thats looks amazing.

Download Brush Set here

6. Watercolor Photoshop Brushes

6.1 20 Watercolor Brushes

20 Watercolor Brushes for Photoshop

Download Brush Set here

6.2 WaterColor Reloaded

This HUGE pack contains 83 (resolution about 700 – 1200px) brushes compatible with PS 7 and up!

Download Brush Set here

6.3 Free Hi-Res Watercolor

Amazing brushes that were originally painted on a high quality paper to give us this high-res watercolor brush set.

7. Swirl and Curvy Photoshop Brushes

7.1 More Swirls Brushes

Swirls Brushes for Photoshop

Download Brush Set here

7.2 Swirls II Brushes PS

Swirls Brushes for Photoshop

Download Brush Set here

7.3 Swirls III Brushes

Swirls Brushes for Photoshop

Download Brush Set here

7.4 Curly Brushes + Img

A set of 5 Photoshop brushes, handmade in Adobe Illustrator.

Download Brush Set here

8. Wood Photoshop Brushes

8.1 xbgrunge 03

A small collection of 9 Photoshop brushes. Can be used to add texture of dirtand rust.

Download Brush Set here

9. Fractal Photoshop Brushes

9.1 Fractal Brushes Pack 2

A small collection of 8 Fractal Photoshop brushes.

Download Brush Set here

9.2 Fractal Lite

A big collection of 40 Fractal Photoshop brushes that work nicely when making medium to smaller sized work, from banners to avatars and personal cards.

Download Brush Set here

10. Splatter Photoshop Brushes

10.1 Spetter, splash & splatter

45 Photoshop brushes made in Photoshop CS3.

Download Brush Set here

10.2 14 Hi Res Splatter Brushes

Pack of 14 huge splatter Photoshop CS3 brushes, each one about 2500px. Made from hi res scans of ink splatters, vectorized in Illustrator and converted to the .abr file.

Download Brush Set here

10.3 New Dot Splatter Brushes

Pack of 11 splatter Photoshopbrushes.

Download Brush Set here

Create an Ice Cream Type Treatment in Photoshop

2011-02-28T06:21:00.001-08:00

It’s funny to see how simple objects can inspire creative type treatments. In the past I’ve played with plates, paper andwood. Today I will show you how to realize an awesome text effect using ice cream! The process is simple enough for any level Photoshop lover. We will be dealing with illustration techniques, and will explore the power of layer styles applied to custom brushes. So… give it a try!

Preview

Click to enlarge

Here is a 100% zoom close up

Step 1

Let’s start by creating a new Photoshop document. Mine is 2560×1440 pixels. Fill the background with a color of your choice (it’s not important at this stage), and double click on the layer thumb to open the layer styles window.

Here add a gradient (radial) overlay going from #c0e6df to #15a48b, thus overlapping the first fill color.

Step 2

At this point we need to choose the right font for the illustration. If you have more patience, you could try drawing custom letters in Illustrator. Just try to make them bold and a bit irregular. If you’re lazy, like me, do a search for the right font: Doughboy, realized by Lucas Sharp, looks perfect!.

Write a word or phrase. A suggestion: type each letter on a separate layer.

Step 3

I will show you how I created the first letter, S. The process for the other letters is the same, so once you’ve learned how to create your first ice-cream letter, you’ll be able to reproduce it infinite times.

Start by rasterizing the type: right-click on the letter thumbnail > rasterize type. Then right-click again and select “Blending options”. We will play with layer styles to start giving color and depth to the illustration.

Add a light red (#fd5e74) color overlay.

Select Bevel and Emboss with the following settings and check “contour” to make the 3d effect more evident.

Finally add Satin, set on color dodge, to put in some interesting details.

Step 4

To make the ice-cream/letter more realistic we can use a texture. Download this ice imageand merge it into the document (File > Open…), directly above the letter. Press ctrl+T to activate the free transform tool and resize the image.

Set the texture color mode to color burn with opacity 10%

Finally with the texture still selected, ctrl+click over the letter (layer thumbnail) to make a selection of its pixels, and add a layer mask. By doing this you will remove the texture areas that exceed the letter.

To add a layer mask simply click the “add layer mask” button which is at the bottom of the layer window.

Step 5

Select both the texture and letter layers and press alt+ctrl+E to merge them into a new layer. We will use this image from now on, feel free to hide the 2 original layers.

Now let’s add a noise effect. Make sure to have white and black as foreground and background color, then create a new layer and fill it with black. Go to Filter > Noise > Add Noise…

Add a layer mask, as shown in step 4, so the noise effect will affect only the area covered by the letter:

Set the layer to screen to remove the black area, and reduce the opacity to around 30% to make the effect subtle.

Step 6

Let’s create the stick. Draw the main shape with the rounded rectangle tool (radius 30px).

Add a light brown (#f4d0b0) color overlay, then rasterize the layer.

With the Rectangular Marquee tool, select the top area of the shape and hit delete. Then ctrl+D to deselect.

Duplicate the shape layer by pressing ctrl+J. Then move the shape which is below a couple of pixel to the bottom-right. Switch its color to a darker brown (#d68f61).

Step 7

With the same technique used in step 4 and 5, let’s apply a wooden texture to the stick. Download our wooden textures and pick up a photo of your choice. Then merge it into the document.

Set the layer blend mode to overlay to see how it will affect the stick.

Reduce the opacity to around 60%, and add a layer mask to remove the area that exceeds the stick.

(To select both the shapes of the sticks, ctrl+click on the first shape, then hold down shift and click on the second one).

Select the texture layer and the two shapes of the stick from the layers window, then merge them into a new layer (alt+ctrl+E) and hide the original layers.

With the pen tool in path mode, create a path that covers a small top area of the stick that we will remove later. The purpose of this step is to make the stick less “rigid”.

Press ctrl+enter to activate the selection and hit delete.

Step 8

Using the Burn and Dodge tools, make darker and brighter areas of the ice cream main body. From the screenshot below you can see how I darkened the area behind the stick:

Apply the burn tool again, this time over the top of the stick. Based on the direction of the light source, this area should look darker.

Step 9

A light effect can help to enhance some texture details and make the frozen effect over the ice-cream look more realistic. So create a new group and set its blending mode to color dodge. Create a layer inside the group, grab a large, soft (hardness 0%), white brush and click once over the ice-cream. Reduce the opacity, if the effect is too strong.

Here is my outcome.

Step 10

Here comes the fun part! We will create drops and ice pieces with the use of layer styles. My first thought was to use stock images of drops and water, and play with their blending options to add the drops to the scene. However, after several attempts I decided to proceed with brushes and layer styles, thanks to the help of our great illustrator Diego. The result is more than satisfactory!

Create a new layer and grab a small round brush with hardness 100%. Then paint a spot over the ice-cream.

Double-click on the drop layer to open the style window. Reduce the fill opacity to 0%.

Add bevel and emboss. This will give depth to the drop:

Add a drop shadow and inner shadow.

Finally add inner glow and satin as the last touches:

Step 11

Now that you have the layer set up, just paint! I’ve created this screencast so you can see my process to realize the drops (with the help of my Wacom tablet).

Step 12

Here is the first letter complete:

Now create a new layer and paint the shadow effect with a soft black brush. Reduce the opacity so the result will look softer. Finally, use the same brush to create the drops on the floor.

The last touch: to increase the contrasts, just add a new gradient map layer (Layer > New Adjustment Layer > Gradient map). Add a gradient going from red (#ee202e) to blue (#002874) to yellow (#f9e600). Set the layer to overlay with opacity 30%.

Now that you know how to create a letter, you can apply it to the entire word or phrase. Exercise your creativity and play with different forms and colors.

The ice-cream is now complete! Are you hungry???

How to create Gauge Icon in Photoshop

2011-02-28T04:50:00.001-08:00

Follow this step by step guide to creating a detailed gauge icon in Photoshop. We’ll be using various Photoshop layer styles to build up gradients and shadows to produce a detailed and realistic large scale icon, then modify and rebuild the icon into a range of typical icon sizes.

The icon we’ll be creating features a sleek and colourful gauge set in a chrome beveled frame with subtle textures and gradients. The largest and most detailed version comes in at 256x256px, then it is incrementally scaled to 128px, 64px, 48px and 32px, each becoming less detailed but modified slightly to work at the smaller sizes.

We’ll start with the largest of the icons. Draw a 256px circle with the Marquee tool on a new layer and fill it with any colour. Double click the layer to open up the layer styles options. Add a Gradient Overlay alternating between dark and light greys to give a shiny metal effect.

Add a thin 1px stroke using a mid-grey between the two tones used on the gradient. Using Photoshop layer styles throughout the creation of the icon makes it much easier to rebuild the icon at the smaller sizes as each effect can be reloaded and quickly edited via the layer styles options palette.

CMD+Click the layer’s thumbnail to load the circular selection. Right click and choose Transform Selection, then scale down the selection while holding Shift and Alt. Fill this new selection with black on a new layer.

Open up the layer styles window for this layer and add a black to dark grey vertical Gradient Overlay to form the base of the fascia.

On the same layer, add an Inner Glow and Stroke effect using light grey tones to give the impression of a chrome surround.

Load the selection by CMD+Clicking the layer thumbnail, then fill a new layer with a repeating pattern. I’m using one of the patterns from the recent pixel patternsfreebie here on Line25. Change the blending mode to Multiply to render the white areas transparent then reduce the opacity to around 25%.

Load another circular selection, scale it down slightly and fill with white. Load the selection again, scale down further and delete this selection to form a white ring. Create a square selection, right click and choose Transform Selection, rotate it by 45 degrees (hold Shift) then move it downwards so the top corner is aligned with the centre of the gauge. Delete this selection from the white ring.

Load the layer styles for this shape and add a Gradient Overlay using the default rainbow color spectrum. Change the style to Angle then alter the orientation until the gradient begins with blue and ends with red. Add a subtle Inner Shadow to the top edge.

Draw a small circle in the centre of the gauge and add a metal style Gradient Overlay using grey tones. Also add a subtle Drop Shadow to add depth and a touch of realism.

Use the Polygonal Lasso tool to draw a needle shape on a layer underneath the centre pin and add a Gradient Overlay using dark and light red tones. Alter the gradient angle so it flows exactly down the centre of the needle. Give the needle a subtle Drop Shadow to give the impression that is lifted from the gauge face slightly.

The largest of the icons is now complete. All the subtle gradients help to replicate light and shade to create a more realistic icon design. Now let’s rebuild the icon into the smaller versions.

Select all layers and press CMD+T to Transform. Using the top toolbar to enter the specific dimensions of the smaller icons.

When the icon is scaled some of the effects are lost, or their size remains too large to work properly on the smaller icon. Go through the styles and remove effects that are no longer visible.

Other effects such as gradients and shadows will need adjusting to accommodate the smaller icon size. Go through and reduce the size of each of these effects.

The great thing about layer styles is the contents of the layer can be recreated entirely while keeping the same effects. The centre pin in particular becomes way too small on the tiny icons, so fill a larger circular selection on the same layer – The layer style will automatically add the same gradient and shadows.

The largest of the icons features all the textures and details, but as the icon is scaled down some of these details are lost. As the icon moves into the 48px-32px range the proportions are adjusted so the design is still recognisable, this includes a larger centre pin and needle as well as replacing the gradients of the chrome surround with a plain grey stroke.

How to create Drop Down menu with jQuery

2011-02-27T09:03:00.001-08:00

Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

View Demo of Sexy Drop Down Menu

Step1. HTML

First create an unordered list for your base top navigation. Then simply nest another unordered list for your sub navigation.
view plain copy to clipboard print ?

<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Step2. CSS

Next, it’s time to style the navigation wireframe with CSS.
view plain copy to clipboard print ?

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

Step3. jQuery

For those who are new to jQuery, you can learn about it here.
The following script contains comments explaining which jQuery actions are being performed.
view plain copy to clipboard print ?

$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});

*To degrade gracefully, we only show the drop down menu trigger to those who have javascript enabled.

This is what it looks like when javascript is disabled:

View Demo of Sexy Drop Down Menu

Conclusion

Note: I went ahead and added the rounded corners to the demo (CSS3 – Only supported in Firefox, Safar, & Chrome). If you would like to give it a try, check out this tutorial.
Experiment and customize this to fit your needs! If you have any questions, concerns, suggestions, or comments, please do not hesitate to let me know.

Create a black navigation with css

2011-02-27T09:00:00.001-08:00

Follow this step by step guide to create a dark and sleek navigation menu design. We’ll begin by building the visual concept in Photoshop, export the image files, then build up the final menu in HTML and CSS using a range of declarations to replicate the design and layout in code.

View Demo for Navigation menu

The PSD Concept

Open up Photoshop and create a new document with a black background. Use the handy pixel swatches I posted a few weeks back to fill a new layer with a cool pattern. Press CMD+I to invert the colours, then set the blending mode to Screen at 10% opacity.

Use the Rounded Rectangle tool with 50px corner radius to draw the basic shape of the menu bar. This large corner radius will help create a long ‘pill’ shape.

Double click the shape’s layer to add some Layer Styles. Begin with a Gradient Overlay flowing vertically between two dark grey colour samples.

Give the menu a subtle three dimensional highlight using the Inner Shadow feature. Set the mode to Normal, colour to a mid-grey, distance to 2, choke to 30% and size to 5px.

Draw the first menu item using the Rounded Rectangle tool on a new layer. Nudge the shape into position using the cursor keys.

Open up the layer style settings for the menu item and add another Gradient Overlay. Select slightly lighter grey colour samples.

Add an Outer Glow effect but change the settings to Normal, a dark grey colour, 50% spread and 5px size.

Finally add a 1px Stroke effect using an almost black colour sample. This stroke effect combined with the outer glow gives a cool chamfered effect around the button.

Use the Text tool to type out the relevant words on each of the buttons. Set the font to Helvetica Bold with a near white fill.

Open up the layer style window for this text layer and select Drop Shadow. Change the angle to -90 degrees and alter the settings to 1px distance and 100% spread to create a subtle inner shadow. We could have used the Inner Shadow effect, but this would add the effect inside the text which would affect its legibility. A Drop Shadow adds the effect on the outside, leaving the original text intact.

Duplicate the menu item to create the remaining buttons on the menu and space out each item evenly.

Next we need to design a style for the button’s pressed state. Open up the settings for one of the button and alter the gradient angle to -90 degrees. Slightly darken the colours to give the impression of shade.

Draw a square selection over the background pattern, taking into consideration key points in the pattern to allow the image to repeat. Export this as a PNG image.

Toggle off all the other layers and draw a selection around the menu background, press CMD+Shift+C and paste into a new document. Export this file as a PNG-24 graphic with transparency.

Make selections of the button states and paste them into a new document to form a little sprite graphic. Export this file as a PNG-24 image.

The HTML Markup

In order to build the menu as a fully working web page we need to write out a little HTML code. Begin with a document with a basic structure of Doctype, Title and CSS stylesheet link, then add a <ul> with an ID of menu. Write out <li>elements with anchors for each menu item.

The CSS Styling

The menu really comes to life when we add the CSS styling. Begin with a simple reset to remove any browser defaults, then add some styling to the body, here I’ve added the repeating pattern background image for the sake of the demo.
Next, target the unordered list with ID of menu and give it a specific width and height according to the size of the menu background image. Add a touch of padding to move the buttons into place and minus this figure from the height to maintain correct box model calculations.

We can then target the child list and anchor elements to style each individual button. list-style: none; and float: left; removes the default bullet points and floats the list items side by side. The actual button styling is added to the anchors. display: block; is first added to change the anchor element from inline to block, which then allows for an exact width and height to be added. Add the button image as a background and style up the text as 18px bold Helvetica. The inner shadow effect can be created using the CSS3 text-shadow property, then the actual font colour and alignment will finish it off to match the concept.

Now the default button state is in place, we need to add the different effects when the button is hovered and pressed. The CSS pseudo selectors do this job. Set up a new declaration using the :hover selector and adjust the colour to the near white selection from the concept. The :active selector can then be used to style up the button when it’s pressed by the user, alter the background image position to bottom so it displays the inset effect.
If you test the button in a browser you’ll notice an ugly dotted outline ruining the effect. a { outline: none; }; will correct this, but don’t forget to add a backup :focus declaration to provide visual feedback when the user has keyboard focus on that particular element.

The Final Menu Design

That makes our dark and sleek menu design complete. Here’s the full HTML and CSS:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dark sleek menu design</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<ul id="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #000 url(images/bg.png);
	padding: 200px 0;
}

#menu {
	width: 612px; height: 73px; padding: 16px 0 0 0; margin: 0 auto;
	background: url(images/menu-bg.png);
}

	#menu li {
		list-style: none; float: left; margin: 0 12px;
	}
		#menu li:first-child {
			margin-left: 19px;
		}

	#menu li a {
		display: block; width: 176px; height: 37px; padding: 20px 0 0 0;
		background: url(images/btn.png) top no-repeat;
		font: bold 18px Helvetica, Arial, Sans-serif; text-shadow: 0 -1px #1d1d1d;
		color: #767676; text-align: center; text-decoration: none;
	}
		#menu li a:hover, #menu li a:focus {
			color: #dcdcdc;
		}
		#menu li a:active {
			background: url(images/btn.png) bottom no-repeat;
			color: #767676;
		}

a { outline: none; }

jQuery Menus with stunning animations

2011-02-27T07:04:00.001-08:00

Query is a great tool that helps our imagination turn ideas into reality. We can do almosteverything we can think of with the help of this useful tool. Apart from being a lightweight cross-browser JavaScript library that simplifies HTML and Ajax interactions for rapid web development, it also gives sites that sleek look while also representing important data in a very attractive way.
You should always keep in mind that once a user lands on your site, the fist thing s/he does is to navigate and check out the content. If your site lacks in providing the user an attractive navigation, s/he will loose interest and will be clicking on that ‘Back’ button within seconds — even if the content on the site is excellent. Hence to stand apart you need to make your menu on your site different and appealing to users.
We’ve collected some tutorials to help you understand how to give your menus that stunning visual effect and animations. Please feel free to share any sites you’ve discovered that have been developed with jQuery. Enjoy!
Scrollable Thumbs Menu with jQuery
In this tutorial you can learn how to create a fixed menu with scrollable thumbs which you can nicely control with your mouse:

Sweet Menu
Sweet Menu takes an ordinary list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system:

Creating a Fancy Menu Using CSS3 and jQuery
Here you can see how a fancy menu can be created with the help of the new CSS3 features along wth jQuey:

Rocking and Rolling Rounded Menu with jQuery
In this tutorial you can make use of the rotating and scaling jQuery patch from Zachary Johnson to create a menu with little icons that will rotate when hovering:

Slick Drop-Down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a busy layout. When structured correctly, drop-down menus can be a great navigation tool:

Thumbnails Navigation Gallery with jQuery
Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation:

Collapsing Site Navigation with jQuery
A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this:

jStackmenu
Here is a jQuery UI widget for Stack Menus. Click here to find out more:

Create Your Own “kwicks” jQuery Effect
Check out this tutorial to find out how you can create your own kwicks jQuery effect:

Overlap that Menu!
In this tutorial, you can learn how to achieve overlapping effects to your menu:

Overlay Effect Menu with jQuery
In this tutorial you can learn how to create a simple menu that will stand out once you hover over it by covering everything except the menu with a dark overlay:

jQuery Multicolor Animation Drop-Down Navigation Menu
Check out this tutorial on how to create a multicolor drop-down navigation menu with jQuery:

jQuery Floating Menu
A simple navigation menu that “follows” page scrolling and expands on mouse over — made with CSS and jQuery:

Kwicks for jQuery & a Horizontal Animated Menu
Here is a walkthrough where you can see the final result of using Kwicks. A jQuery plugin that builds a horizontal menu with a nice effect like Mootools but much more customizable and versatile:

Fading Navigation Menu
Here is a simple, neat navigation menu using CSS sprites and a bit of jQuery code to give it a visually appealing fade effect:

UI Elements: Search Box with Filter and Large Drop Down Menu
A tutorial that will show you how to create a search box with a filter and a large drop-down menu:

jQuery Convertion: Garagedoor Slider Navigation Effect
Learn how to turn your menu to jQuery and give it a Garagedoor slider navigation effect as well:

Create Bounce Out Vertical Menu with jQuery
A simple bounce out vertical menu is created here with the help of a little bit of CSS3 and jQuery Framework to create a vertical menu which on mouse hover gives a nice bounce out sliding effect:

Slide Down Box Menu with jQuery and CSS3
Learn how to create a unique sliding box navigation. The idea here is to make a box with the menu item slide out, while a thumbnail pops up:

LavaLamp Plugin
This plugin has some attractive features like targeting and container options, automatic default location, vertical and horizontal morphing:

Little Boxes Menu with jQuery
A nice display of little boxes that animate randomly when the menu item is clicked. It then expands and reveals a content area for some description or links:

Horizontal Scrolling Menu Made with CSS and jQuery
Here is a tutorial that explains how to make a horizontal scrolling menu made with CSS and jQuery:

Beautiful Background Image Navigation with jQuery
Learn how to create a beautiful navigation that has a background image slide effect. The main idea here is to have three list items that contain the same background image but with a different position:

Awesome Cufonized Fly-out Menu with jQuery and CSS3
One of our favourites! Here is a full page cufonized menu that has two nice features:

Free textures for design

2011-02-27T06:38:00.001-08:00

Every day we try our best to present to you some useful tips, dear reader, to inspire you with fresh ideas and to try out new things. Today, we’ve prepared a nice collection of freetexture packs that you just may have been looking for to freshen up your designs you’re working on. Enjoy!

High Resolution Texture Pack

5 High Resolution Brick & Tile Textures

9 High Resolution Metal Surface Textures

Starry Textures

4 Free High Resolution Grunge Textures

5 High Resolution Grungy Paper Textures

10 High Resolution Grungy Surface Textures

46 High-Quality Graffiti Textures

High Resolution Fabric Texture Pack

6 High Resolution Sand and Seashell Textures

27 High Resolution Watercolor Textures

12 Free Grungy Bokeh Textures