Have you been noticing those large download buttons popping up everywhere over the last year or so? I sure have, they are really eye catching and in your face. It’s next to impossible to ignore them, and they get the point accross.

I just recently started adding some these buttons to my site to increase downloads, and I think it’s working so far! Anyway, after I designed mine I decided to to write a tutorial blog about it, and give away the resulting file that I create.

Here is the final result that we will create in this tutorial:

Step 1 – Create A New File

Create a new photoshop file with a dimension of 225px by 100px

Create new Photoshop file

Step 2 – Convert Background Layer

Covert the background layer into an editable layer by double clicking on it, and then choosing “OK” from the resulting new layer pop-up window.

Convert the background layer

Step 3 – Create 3 new Groups

Create 3 new groups

Create 3 New Group’s and label them, Text, Icon, & Background. (Yes I am a little obsessive about Photoshop file organization.)

Step 4 – Adding the Gradient

Add a gradient

Move the Background layer, into the Background Group folder and double click it to bring up the layer style menu. From there go to the Gradient Overlay section.

Create your custom gradient, or use one of the pre-defined photoshop gradients. For this example, I am going to create my own Gradient and use #4c5159 as the lighter color, and #0b0e10 as the darker color, which gives us a result like this:

Our new background gradient

But we aren’t happy with the default gradient settings are we? NO! Let’s add a little more style to the gradient.

Open the layer styles palette for the background layer by double-clicking the layer. Then select the gradient palette, and change your Gradient Style to Radial, and your Gradient Scale to 150%.

Customize the Gradient

Which should give you something like this:

Change the graident type to Radial

But WAIT! Before you close the Layer Styles pallete, use your Move Tool (V) and drag the gradient center over to the right a little bit.

Move the center of the gradient

Step 5 – Add A Shine Effect

Now we are going to add a quick shine effect by creating a new layer on top of the background layer, name it “Shine”.

Add new layer

Fill it with a white to transparent gradient. To do this, select the Gradient tool from the toolbar, or hit the G key. Once you have the gradient tool selected select a white to transparent gradient from the gradient selector in the top left hand of the screen.

Select the gradient type

Make sure the “Shine” layer is selected and then using the Gradient tool, move your mouse cursor to the top of the button, click and hold the left mouse button, and drag your mouse between 1/2 and 3/4 of the way to the bottom of the document and let go.

Adding the "Shine" gradient

If you did it right, your button should now look like this:

After adding the gradient

Step 6 – Round the Shine

Now we have to round the bottom of the gradient to really bring out the shine effect by using the Elliptical Marquee Tool (M is the Keyboard Shortcut). The way I find is easiest to do this type of work, is either to make your surrounding window really big, or zoom out really far so you can create a very large round/oval marquee.

Select with Elliptical Marquee tool

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Select Inverse

Finally, click CTRL + X to cut that area off, which should leave you something like this:

After rounding the shine gradient

The last part of this step is to change the layer opacity to 50%:

Change the shine layer opacity

Which should give you something that looks similar to this:

After 50% Opacity is applied

Step 7 – Add & Style Text

Depending on the type of button you are creating, your text may vary, but since I started this tutorial out as a download button, that’s the text we are going to use.

Select the Type tool, or click (T) on the keyboard, then select the “Text” layer, and click on the button to start your type layer. Type the text “Download” and click either the Check Mark at the top of the screen, or hit the Enter Button on the Num Pad to complete the typing.

Hopefully you have something similar to this:

Create "Download" Text

But not to worry if the type if a different color, font or size as we are going to fix that up right now.

There are a million and 1 ways to style the text, but I will just do something quick and easy that generally gives smooth modern results with not much effort.

Use the Character pallette to set the Font Family to “Century Gothic”, the Font Style to “Bold”, the Font Size to “21″, the Character Tracking to 50, and All Caps.

Setting the Character Font Style

Which should give you this result:

Our new Font Style

Now we are going to add some simple layer styles to add some depth to the text:

Double click on the “Download” text layer, which will bring up the Layer Styles palette.

Click on “Drop Shadow” and set the Blend Mode to “Normal”, the Opacity to 100, the Angle to “120″, the Distance to “1″, the Spread to “0″, and the Size to “1″

Adding the Drop Shadow

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, and the Style to Linear. Make a gradient with “#FFFFFF” for the light color, and “BEBDBD” for the darker color.

Adding the Gradient to the Text

Finally, click on “Stroke” and set the Size to “1″, the Position to “Outside”, the Blend Mode to “Normal” the Opacity to “30%”, the Fill Type to “Color”, and the Color to “#000000″.

Adding the Stroke to the text

And now you should have something that looks somewhat decent.

The finished Download text

Now let’s move this over a little bit to the right and a bit up to make room for our icon, and add the smaller text. I don’t think i really need to explain how to add the small text. Just use a 12pt Century Gothic with Bold applied and voila!

After adding our small text

Step 8 – Creating the Icon

Start by creating a new layer inside the Icon group folder and name it “Circle”, and Draw a circle using the Elipse Shape tool (U)

Create a Circle with the Elipse tool

Now let’s add some layer styles to make this circle a little more interesting.

Double click on the circles layer, and click on “Inner Glow” and set the Blend Mode to “Screen”, the Opacity to “75%”, the Noice to “0″, the color to “#54BA30″, the Choke to “0″, the Size to “21px”, and the Range to “100%”

Adding an Inner Glow to the Circle

Now click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Smooth”, the Depth to “72%”, the Direction to “Down”, the Size to “4px”, and the Soften to “0″.

Adding Bevel and Emboss to the Circle

Now click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#52A123″ for the lighter color and “#00601B” for the darker color, the Style to “Linear”, the Angle to “90″, and the Scale to “100%”.

Adding a Gradient to the Circle

And finally click on “Stroke” and set the Size to “1px”, the Position to “Outside”, the Blend Mode to “Hard Mix”, the Opacity to “66%”, the Fill Type to “Color” and the Color to “#000000″.

Adding a Stroke to the Circle

Which should leave you with something like this:

Our circle with Layer Styles applied

Next, create another new layer inside the Icon group folder and name it “Arrow”.

Hit (U) on your keyboard, and you should see a menu appear for the Shape tool at the top of your screen.

The Shapes Toolbar

Click on the “Shape” icon to reveal a drop down menu with many shapes you can choose from, and select the 3rd Arrow on the top.

Default Photoshop Shapes

Draw a new Arrow on your new layer.

Create a new Arrow Shape

Rotate it 90 degrees clockwise to make the arrow point down, make sure that the arrow is small enough to fit inside our circle.

Rotate the Arrow layer

Our newly rotated arrow

Next, we will add some layer styles to the arrow.

As usual, double click the layer, and click on “Bevel and Emboss” and set the Style to “Outer Bevel”, the Technique to “Chisel Hard”, the Depth to “1%”, the Direction to “Down”, the Size to “1px”, the Soften to “0px”

Add Bevel and Emboss to the Arrow

Next click on “Gradient Overlay” and set the Blend Mode to “Normal”, the Opacity to “100%”, the Gradient colors to “#FFFFFF” for the lighter color and “#C9C9C9″ for the darker color, the Style to “Linear”, the Angle to “90″ and the Scale to “100%”

Adding a Gradient to the Arrow

Finally click on “Stroke” and set the Size to “1″, the Position to “Inside”, the Blend Mode to “Normal”, the Opacity to “100%”, the Fill Type to “Color”, the Color to “#FFFFFF”.

Adding a Stroke to the Arrow

Almost done! Now we just need to add a final shine to the icon to make it a little fancier.

Create a new layer, and name it Icon Shine.

Hold down your CTRL button (For PC’s) and click on the circle layer. This should create a selection the exact size of the circle.

Create a selection the size of the circle

Select your Gradient Tool (G) and choose a White to Transparent gradient just as we did earlier in this tutorial. Now drag the Gradient Tool from the top of the selection to about 1/2 way to the bottom.

Adding the Shine gradient to the arrow

Now select your Marquee Tool (M) and move the selection up a little more than halfway.

Drag the selection

Now select inverse by either right clicking inside the button area, or click CTRL + Shift + I, or, you can download my 7 FREE Photoshop Actions to cut down design time, and then simply click the F8 key for easy Inversing.

Inversed Selection

Finally, click CTRL + X to cut that area off, which should leave you something like this:

Final Download Button

And there you have it, a detailed and quite long tutorial of how to make a big Download button. You can download this file in PSD format by clicking the Download Button below.

I hope you liked this tutorial and learned something from it. Sharing is caring!

Being a web designer, with a possible light case of ADD, i noticed that in the past I had used a different organizational method for my css files on almost every website I built. Hell, in some cases there was no organization what-so-ever.

As is often the case when you repeat a task over and over, I got better at organizing my files to make them easier for me to build and edit. I am going to share some of my organizational tips with you here today, and hopefully they will save you some time in the long run.

1. Organize CSS by page element, not by style
2. Put similar CSS elements on the same line
3. Organize CSS in order of element layout
4. Name your CSS based on structure not design
5. Comment your CSS code

1. Organize by page element, not by style

Below is an example of one way I have seen many web designers organize their CSS files.

/* Containers */
#header-container { }
#navigation-container { }
#footer-container { }

/* Links */
#header a:link, #header a:visisted { }#navigation a:link, #navigation a:visisted { }
#footer a:link, #footer a:visisted { }

/* Fonts */
.header-text { }
.navigation-text { }
.footer-text { }

So, maybe you’re thinking to yourself, “Gee Adam, this looks alright to me”. And sure, it does look visually appealing. But when it comes time to change everything in the header, your now stuck scrolling up and down, looking for each “header” element.

Instead, try using the method below and it will ensure you won’t waste time scrolling the page up and down.

/* Header */
#header-container { }
#header a:link, #header a:visisted { }
.header-text { }

/* Navigation */
#navigation-container { }
#navigation a:link, #navigation a:visisted { }
.navigation-text { }

/* Footer */
#footer-container { }
#footer a:link, #footer a:visisted { }
.footer-text { }

2. Put Similar Elements on the Same Line

If you aren’t writing your CSS on 1 line, then you can use this next trick.

Many CSS elements are related or similar to each other, and therefore, can be organized together when we write our CSS code.
Instead of this:

#header-container {
width:800px;
height:600px;
margin:0; padding:0;
}

Try this:

#header-container {
width:800px; height:600px;
margin:0;padding:0;
}

Not only does this cut down the number of total lines in the CSS file, it also makes finding and editing related elements much much quicker.

I wish I could take credit for this tip, but alas I can not. I read this tip on a blog somewhere, sometime ago. I tried looking for the article again, but I was not able to find it. If you or someone you know wrote the article, please let me know and I will gladly give credit.

3. Organize CSS in order of element layout

This is almost so obvious it’s not worth mentioning, but unfortunately I still see CSS written without any thought to having to go back and edit it later. It is similar to when car manufaturers build a part that has to have 20 other parts removed in order to reach the part you are trying to fix.

If you are only using 1 CSS file, then for god sakes, ORGANIZE! Put your header definitions at the top of the file, and your footer definitions at the bottom of the file, everything else goes in the middle.

4. Name your CSS based on purpose not design

I, like many CSS designers out there, have been guilty of naming a CSS definitions based on their design, and not by their structure and/or purpose.

For example I would name a CSS element like this:

.text-purple {}

Instead of naming the CSS element like this:

.author-name {}

The reason for this is simple, over time when you decide purple isin’t the right color for the authors names, and you want to change the purple to yellow, your CSS definition is still named text-purple which is definitely confusing.

Sure you might think to yourself, “well i can always just remember I changed purple to yellow”, but over time, and after working on countless other websites, I can almost guarantee that you will forget the change, and especially if and when there are more than one change, you will be all but lost.

5. Comment your CSS code

Commenting is one of the most important factors when attempting to organize your CSS files effectively, and there is more than one way to use comments in a CSS file.

Section Dividers
This is one of the more standard uses of comments in CSS files. Use markup like this to label different sections of your CSS file.

/*  Header */

Explanations

This is a common use for comments in programming languages such as PHP.

/* This style definition is needed to fix a problem in IE6 */

This is by no means a complete list, but it is a list of some of my favorite CSS tips!

If you have you own tips to share, please do and if I like them, I will add them to the post giving the author link credit.

After yet another long break I’m back to give away even more free stuff!

This time I have 6 FREE Web 2.0 style badges up for grabs. But wait, why bother only giving you PNG files when I could give you the original source PSD files so you have full control over these badges.

Everyone knows those once “uber trendy” graphic badges that were on every website known to man a couple years ago. If you still haven’t grasped what I am talking about, have a look at the screen shot below.

Web 2.0 Badges

Got it now? Good. So now that we are all on the same page, why don’t you stop reading and download them already!?!

Maybe you are wondering to yourself why I would bother creating something that was popular 2 years ago? Well the answer is short and sweet. I had to make some for a client, he ended up not even using them, so I created a few more variations and decided to share them with you, my adoring fans.

Need some Web 2.0 style buttons? So did I, so I made a few different versions for the redesign of my website ITS Net Services. I only ended up using 1 of them, so I figured I might as well give the rest away.

They all come in 1 Photoshop file and include all the buttons separated in their own folders.

I made most of these using the Ultimate Web 2.0 Gradients and Styles available to download for free from Deziner Folio.

I’m back again with more FREE CSS Containers to download. Unlike my previous set of FREE Content Boxes, these boxes were designed to be able to stretch as wide as need be. Simply adjust the size of the container css value to the width you need, or remove it completely to have it auto adjust its width. I have also remade the original boxes in this auto stretch way.

You may use these boxes for any purpose, and you do not have to credit me. However, you may not redistribute these on another website, or hotlink directly to these files.

Black Round DOWNLOAD		Black Square DOWNLOAD
Blue Round DOWNLOAD		Blue Square DOWNLOAD
Green Round DOWNLOAD		Green Square DOWNLOAD
Grey Round DOWNLOAD		Grey Square DOWNLOAD
Olive Round DOWNLOAD		Olive Square DOWNLOAD
Orange Round DOWNLOAD		Orange Square DOWNLOAD
Pink Round DOWNLOAD		Pink Square DOWNLOAD
Purple Round DOWNLOAD		Purple Square DOWNLOAD
Red Round DOWNLOAD		Red Square DOWNLOAD
White Round DOWNLOAD		White Square DOWNLOAD

Sometimes preparing for a web design is the most time consuming AND the most important. There are so many ideas floating around, that you better be quick to catch them while they are fresh. I have compiled a list of some of the most important processes when preparing for a web design.

Identify You Clients Needs

Every client you work with will usually have very different needs. It is extremely important to identify these needs from the start. I have listed a few of the questions you should ask your clients to get a good scope of what they will require.

#1 What’s the clients budget?
I list this question first because it really will dictate what you can do for the client. I have encountered so many clients that expect everything including the kitchen sink and think one price pays for it all. After the client has stated their intended budget, it doesn’t mean thats the final budget, that just means that what they would like to pay. If they are asking for more work then their budget allows, tell them that, and it’s up to them to figure out if they can afford to put more towards the budget, or if they can just do without some things.

#2 Timeframe?
Some clients will have an absolute timeframe, and othes will not. It is important to know their timeframe so you can make sure you have the time to accomplish their design in the required time. Also a good trick I learned from a designer friend of mine, is to always over quote your projected time frame. If your client doesn’t have a hard pressed deadline quote them about twice as long as you think it will take you, that way when you are done before you said you would be, you look like a hero.

#3 Brainstorm & Write the ideas down
One of the best things you can do with your client is have a brain storming session with them. One of the worst things you can do is not write the ideas down. Some of the greatest ideas of the project will come during the first meetings with your client. When the project is new, and fresh, and you are excited about it.

#4 Logo & Branding
Does the client already have a logo design? Are they happy with their current branding, and/or colors?

#5 Scripts and Interactivity
What type of website will the client be needing? More importantly, what type of functionality is required of the website? Will it need certain types of scripts, like blogs, photo gallery, comments etc?

#6 Audio & Video
Will the site have any audio and video needs? If so, what type of players will be needed? Should you go flash or not?

#7 Statistics Tracking
Usually setting up some type of statistics tracker is a good idea. Probably one of the best ways for the average webmaster is to obtain a Google Analytics account. Once you have done that, you can setup as many websites with trackers as you need. You can also give separate accounts access to just the trackers you want.

#8 Similar Websites for examples
Try to have the client give you examples of other websites they like, and explain to you what they like, and dislike about each of the examples. You can use this to greatly increase the chance of them being completely happy with the website you build for them.

#9 Number of Pages
Some sites are simple one pagers, and others are hundreds of pages. Find out early how many pages your client will need. If its going to be more than 20 or so, you should probably start talking to them about a content management system (CMS). Not only will it be a little easier to keep in order, it will also give them the ability to edit content themselves.

Content

Perhaps ones of the hardest part of a web design is actually compiling & organizing all the content the client wants. In fact, just getting all the content from the client is a task in itself. Many times it’s almost like they expect you to come to their house or office and go through their content yourself. However, this is not the case, it is their responsibility to provide content for their website.

#1 Text Content
This is ultimately the most important part of any website. It doesn’t matter how pretty the site is, if it doesn’t have good informative content for the users to read, there might as well not even be a website at all. This again can be quite difficult to procure from the client. Unfortunately you are pretty much at the mercy of the client to provide you this.

#2 Images, Videos, & Music
You can’t have a website with some type of images. Ask you clients to provide you with the largest possible size if images so that you can use them in more than just content. Some images are great for using in the design process as background images and collages. If they require Video or Audio to be on their website, you will need to think about what the best way to provide the website users that content. Normally Flash players are the best way to go since it prevents users from stealing the music/video and don’t have to worry about cross platform compatibility issues.

Price

We web designers don’t design for free. So when it comes time to put together a price for a client make sure you do it right. Take the time to figure out exactly how much time you will need to design the site. I find that charging by the hour in a web design situation just wont work. Charging per page is also hard to do as well since some pages have alot of content and some do not.

I find that charging a base fee for the actual design works for me. It is usually between $500 – $1000 just for the design, not including the conversion from graphics to HTML & CSS. Then I try to put together a price on how long it will take me to convert the graphics into code.

Finally put a price together based on the number of pages the client requires. Price may vary depending on the amount of content. But in the end sometimes charging a set price per page is the better way to go since it means the client knows where you stand. And if in the future they need to have you develop another page, they will have a good idea of what to expect to pay.

So there you have it. A somewhat comprehensive list of how to go about starting a website design for your clients. I will add to this list as time goes one.

Legal Stuff

The question was raised in a comment on this blog about the legalities of who owns what upon completion of the web design. In the contracts I personally use it states that all the HTML files, images, and content contained in those files are owned by the client. It also states that all other design & materials remain property of the web designer.

Here are some links to some legal contracts for web designers.

Web Designer Contract

Another Web Designer Contract

Yet Another Web Designer Contract

Sample Web Design Contract

Sample Web Design Contract 2

Permission To Link Contract

Privacy Policy Contract

Total Assignment Of Copyright

Non Exclusive Copyright License

Infringement Of Copyright

Website Planning Worksheet

I have created a selection of FREE to download CSS Content Boxes. These were designed to be used for side bar areas, but if you know your photoshop decently enough you can easily modify the headers to stretch as wide as you need. These CSS Content Boxes are all 100% XHTML & CSS Validated.

Black Content Box DOWNLOAD		Blue Content Box DOWNLOAD
Green Content Box DOWNLOAD		Pink Content Box DOWNLOAD
Purple Content Box DOWNLOAD		Orange Content Box DOWNLOAD

As a designer I often find myself using many of the same colors over and over. That’s not to say they aren’t a wide range of colors, but they are used more often than other colors. The amount of colors available to us designers is just about limit-less, so why do many of us find ourselves in the same position of repeatedly using the same colors?

The answer is we become comfortable with what works for us. And when I find myself once again using comfortable colors, I go to my extensive vault of links to help myself out of a rut.

So please enjoy my collection of links to websites with colors, color palettes and patterns. As always this list will be continually updated.

Last Updated 1-11-08

Kuler

Brought to you be Adobe, this online color tool is basically a social color palette website. Quickly create harmonious color themes online. Explore, create and share color themes.

Colour Lovers

COLOURlovers^TM is a resource that monitors and influences color trends. COLOURlovers gives the people who use color – whether for ad campaigns, product design, or in architectural specification – a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

Color Hunters

Create and find color palettes made from images

Color Palette Generator

Pretty much self explanatory

Web 2.0 Color Palette

Organised into 3 distinct colour groups – neutrals, muted tones and bold colours, you may recognize a few of the shades from some of your favourite Web2.0 sites.

Squidfingers

This is just a site with tons of free patterns to download. I wouldn’t say these are Web 2.0 style patterns, but they are pretty good, and you just might be able to find some uses for them.

GenoPal

This link points to the free online application, but there is a more full and robust version that can be purchased and installed on your computer. GenoPal always proposes colors that are eye-pleasing. GenoPal colors are based on how your eye explores color – they are naturally harmonious.

Mayang

A site with mostly textures. Not the best textures in the world, but they are free and you just might find some use for them somewhere.

Everyone loves icons right? Right! So I have put together a list of some of my favorite and some of the best icon sites I have managed to find on the internet, along with a few examples each of the site has to offer..

If you have any other great links to add to the list, just go ahead and leave a comment with the link.

This page will be updated regularly
Last Updated 1-14-08

H-T-D

This site is one of my newest discoveries and has some of the best looking, highest quality icons I have seen. I don’t even know what to call the website because half of it is in another language of some sort, but I will take full advantage of all it has to offer, and I suggest you do to.

FREE ICONS WEB

Free Icons Web has quite an impressive selection of truly high quality icons. Most of the icons are not full sets, but mini sets with particular themes in mind. The icons I show above are just small samples of very different sets available for free.

Sweetie

Some small and clean icons to use for your various web development projects.

DESKTOP LAND

A very random selection of high quality and not as high quality icons. It’s not an all in one icon website, but you just may find the perfect icon you have been looking for.

WEB 2.0 BADGES

A Web 2.0 badge generator. Select from many different badges, add your text, and download. Simple as that.

DESIGNER FOLIO

A selection of a few good looking Web 2.0 badges available for download.

The web, such a bountiful source of free information. The really is no limit to the amount of information you can stumble upon and consume, and completely free no less!

After years and years of being a web designer, I have gathered quite a collection of links to websites that offer me unlimited amounts of css tips, tricks, and free downloads. I have decided to share my list with the rest of you. I hope you enjoy them, as much as I do.

This page will be updated regularly

Last Updated 1/25/08

Dynamic Drive

An amazing archive of numerous free css based scripts, menus, layouts and much much more. Some of my personal favorites are the ones that are inside the Dynamic category.

Layout Gala

Free CSS layouts to download

LightWindow

Of all the LightBox scripts, I think this is so far my favorite. It supports video, flash, external websites, forms, inline content (divs) and of course images. And it also looks amazing as well. Definitely a highly recommended script.

ShadowBox

I really like this lightbox script. It might be in contest for my favorite lightbox script with the LightWindow one above. Best thing about this one though, is that its html will validate, which lets face it is increasingly important these day.

Lightview

This is yet another script that can be used to overlay image on top of the current pag. It is very similar to Lightbox, Thickbox, and Greybox.

Before I get to the bad stuff, I will talk about the good parts about the script. The interface is quite nice looking, with white rounded corners and borders. The animation effect is also quite smooth and nice to look at.

However, I have tested this script on both IE6, and FF2 and I must say that it works better on IE6. On Firefox the animation is a little bit jittery, and gives a very strange effect outside of the borders. It almost looks like a magnifying glass is being put over the outside edge for a quick second, but after the animation is over, it looks great!. I suspect this is a bug that will be worked out in the near future. So defintely don’t hesitate to try this script out for yourself!

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Lightbox

Lightbox is a very simple script that can be used to overlay an image on top of the current page to keep users from being linked to other pages. It is an exceptionally clean way to show off your pictures, designs, and more.

Thick Box

Another version of the Lightbox script. This version adds support for more than just images, you can include iFrames, div’s and many other text based pieces of content.

Greybox

Yet another version of the Lightbox script. This one is probably one of the most well rounded versions I have seen. You can display external pages in the pop ups, and the gallery setup is just plain beautiful.

MultiBox

This is one of the best incarnations of the Lightbox scripts I have seen so far. I am very impressed with this one, and suggest trying it out. Lightbox that supports images, flash, video, mp3s, html.

HighSlide

Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages.

DHTML Goodies

DHTML Goodies has a high quality assortment of CSS / DHTML / AJAX scripts all available to download for free.

CSS Gradients

Think you need images to have gradients in your designs? So did I, at least I used to until a friend of mine told me about this website.