Web Design Blog

One of the key things I believe in regarding web design is that it's the attention to detail that matters.

You'd struggle to find a good "web 2.0" site these days that didnt make good use of aesthetic buttons. That's why I thought I would share this roundub of button tutorials I found at Design Vitality. Enjoy!

Veerle: Creating Flexible Buttons Using Photoshop Shapes and Styles

IRIS Design: Web 2.0 Style Photoshop Button Tutorial

BlogWatts: A Different Stlye of Web 2.0 Buttons

AvivaDirectory: Windows Vista Style Nav Bar Buttons

PSCloud: Create a Navigation Bar Like the Current Apple Site

Talk-Mania: Create a Navigation Bar like the Old Apple Site

VDC: Create iMac Style Buttons in Photoshop

Spoono: How to Create Gradient Micro Buttons

TutorialWiz: Creating Simple Pixel Micro Buttons

PhotoshopStar: Creating Buttons for a Game Site like the Warcraft III site

EVOGfx: Creating an XBox 360 Syle Navigation Bar and Buttons

PhotoshopPoint: How to Make an Industrial Strength Button

Photoshop-Pack: Simple and Clean Photoshop Menu Bar Buttons

YourPhotoshopGuide: Transparent Glass Button Photoshop Tutorial

N-Sane: Glowing Glass Buttons in Photoshop

PhotoshopStar: Carbon Fibre Navigation Button Tutorial

TutorialStream: Making Big Attractive Buttons in Photoshop

PSDSpy: Small Chrome Micro Button Photoshop Tutorial

WipeOut44: Stylish Rounded Gradient Photoshop Button Tutorial

PixelDigest: Create an MP3 Player Style Glass Navigation Bar

UpUpMedia: Make a Slick Tabbed Navigation Bar in Photoshop

EVOGfx: How to Make a Dark Vertical Navigation Bar and Buttons

TutorialPark: Plastic Button Navigation Bar

Toxiclab: Creating Web Buttons for Your Site Layout

PhotoshopBuddy: Animated Click here Button

SkeletorScope: Brushed Metal Photosho Button Tutorial

RetireAt21: Floral Buttons for a Website Selling Something like Flowers

Time2Photoshop: Sleek Submit Button with Grungy Text

SaberFusion: Create Buttons like the Search button on MSN

Photoshop-Pack: Making Stylish Buttons in Just a Minute

ZASDesign: Inset Photoshop Button Tutorial

PhotoshopStar: Creating a 2.0 Download Button in Photoshop

PSDTuts: Make a Button Like the Ones you Pin on a Shirt

EmpireDezign: Creating a Button with a Gel Effect

Boonage: Creating an Orb Button in Photoshop

TutorialSubmitter: Creating a ‘Push Button’ in Photoshop

Boonage: Perfect Shine Photoshop Button Tutorial

OKTutorials: Making a Sleek ‘Shut Down’ Button in Photoshop

DesignTutorials: How to Make Custom Volume Control Button

Labels: Photoshop Tutorial, web design

As part of the new look and feel to the blog since tying it in more with my other site, JB and G Web Design, I hereby offer the first of many tutorials I hope to provide.

I was tought this technique by Ash, a good friend of mine.

So, photoshop ready? Lets create.

Step One

Create a new document in photoshop. You can choose any size, and any proportions.

Step Two

Fire up the gradient tool, and select two blues, one slightly other than the other.

Apply the gradient, and you should end up with something similar to this.

Step Three

Create a new layer, and fill it with black. Then, go to Filter > Render > and then select Clouds. You should now see something like below. You will need three of these layers, so duplicate the layer twice, and save the duplicates for later.

Step Four

Free transform one of the layers, squashing it down and dragging the edges to gain a degree of perspective, similar to the screenshot below.

Step Five

Use either a soft eraser or a layer mask, whichever you are more comfortable using, and lose the sharp edge from the top of this layer.

Step Six

Import this layer into Liquify, and make some bumps using the smudge tool.

When applied, it should look something like this.

Step Seven

Find one of the duplicate 'cloud' layers you made, and apply a gaussion blur to the layer of about 50.0

Then use the Plastic Wrap filter, using the values 15, 5, 15 in the three input boxes.

The end result should now resemble this

Step Eight

Same process as before, but this time at the top of the canvas, transform the layer to add perspective as seen below

And as before, use either a soft eraser or a layer mask to remove the harshness of the line

Step Nine

Using the Hue/Saturation function, change the colour of these two layers to a more blue colour. You can fiddle around with these settings until you are entirely happy with them.

Step Ten

Time to grab the third of the three cloud layers. Apply a motion blur straight down, of a value in the region of 250

Change the layer style to Screen, and you should see something like this

Step Eleven

Use the distort tool to create a slightly slanted shape, and again use a soft eraser or a layer mask to remove the hard edges

Reduce the opacity to a level you see fit to fade the layer out

and should you wish to do so, duplicate this layer and move it around to create more light beams

Step Twelve

Return to the second of the two cloud layers - the one at the very top of the canvas. Go to Filter > Render > Lens Flare and select 105mm Prime at a level of around 115%

which should create an effect like this

Step Thirteen

Now we're getting somewhere! Go find a picture of, well anything! We're going to use a shark. After cutting it out, add the image, and add a small shadow.

Where your image is positioned on the canvas, select the area of light beam directly below it, select it, and delete, to give the effect the shark is breaking the light beam.

Also repeat the process by selecting your object and cut that from the light beam, so the light is not passing in front of the object.

Step Fourteen

Fire up the pen tool, and draw a shape similar to the one below. Convert this to a selection, and softly erase the two cloud layers, top and bottom.

Step Fifteen

Depending on whether you used one light beam layer, or as we have done here many, go through them one by one and change the layer style to Linear Dodge. You can fade this out accordingly for the best effect.

Finally, select the first cloud layer (the bottom one on the canvas) and apply Filter > Noise. Select Uniform at a value of about 30.

End Result

If all of these steps have been followed correctly, you should end up with something like this!

Labels: Photoshop Tutorial

The first post of 2008, and I'd just like to say I hope you had a good Xmas and New Year!

Over the last month or so, I have done a couple of major and significant things.

Firstly, I bought a PS3, and then I bought a 42" 1080p TV. In light of which, I'm utterly astounded I'm about to also reveal that.. my website has been revamped. I'm surprised I found the time considering!

2008 sees the addition of a good friend to the JBandG fold. With many years of web design under his belt, myself and Neil Dewing have decided to join forces, and the re-design tied in with that perfectly.

We are always very very keen to get feedback, be it good or bad. So why not have a cheeky peek and post your findings!

JB and G Web Design

I will also be using this blog over the coming year a lot more, and for a lot more relevant things. No more random flash dancing monkeys (well ok, maybe one or two), but lots more in the way of web design tips, hints and tricks that I may find along the way. And if you have some of your own, please feel free to let me know and I shall also add them to the pile.

Labels: Playstation 3, web design