Flipping burgers, probably. I’ve spent years mastering the tool of my trade, and even today I’m still discovering cool new things in Photoshop.

Something that I love doing is creating interfaces, and this includes creating buttons. There has been a buzz in recent years with the whole “Web 2.0” thing, and user interfaces often looked shiny and modern. This was achieved, in part, with stunning graphics such as nice push buttons adorning the pages…

Now for some simple tips

1. Use gradients effectively. Gradients, when used subtly can look great. Try adding a small, light gradient to the top of your button to create that shine effect. Don’t go overboard and make sure you select the right colour – a lighter tone of the button colour is perfect.
2. Rounded corners are more pleasing on the eye. 90 degrees square corners, unless your interface calls for it, are ugly. Rounded corners have been around for ages now, and with CSS3, you don’t actually need to create them in Photoshop! I’ve found that if they’re TOO rounded though, they look a little fat. Keep the corner radius to about 5/6 pixels for rounded perfection!
3. Use shadows sparingly. And keep them minimal. Drop shadows can be an instant aesthetic killer if overdone. My favourite way of creating a button with a drop shadow is to set the distance to 0, the size to about 3 and the opacity to 50%. This creates a dark “glow” around the button giving the impression that it’s lifted slightly off the page.
4. Save as PNG files. Most browsers can handle transparent PNG’s these days, so take advantage of it. If you save in PNG format, they can sit comfortably on any background you want without looking silly.
5. Avoid bevelling. I was going to suggest using bevelling carefully, but to be honest; nobody has used the bevel tool for about 7 years and with good reason. Bevelled corners just look naff, so avoid them at all costs!

Interface design doesn’t stop at button creation, and I will probably write an accompanying article in the near future. Just keep in mind the above tips when creating buttons using Photoshop. It’s relatively easy to make something that looks out of date so you must be careful with the tools at your fingertips. If you get stuck simply take a look around the web and see how other modern websites have designed their buttons, there is a lot of inspiration to be had out there. Good luck!

In this tutorial I will explain how to design a simple business card in Adobe Photoshop. The tutorial is structured in bite sized steps and with a ton of  images. It should be easy enough even for absolute beginners.

Below is the final image of business card that we will design in this tutorial -it wont’ win any design prize, but is a great start for beginners to explore many Photoshop functionalities.

Step 1:

Create a new document (File -> New)
width: 600px
height: 400px
Background contents: white

Fill the shape with a light grey color #d8d8d8. I have changed background color to show business card details more visible.

Step 2:

Select “Rounded Rectangle Tool”.

Now set  radius to 5px

Set style to none.

And finally set color to #3d3d3c.

and set fixed size of:
width: 540px
height: 300px

Now just click once on the new document and a rounded rectangular shape will be create as shown in below image.

Step 3:

In this step we will try to make the background a little more interesting.
Go to: Filter >> ‘Sketch > > >Halftone Pattern

And enter these values:
size: 1
contrast: 10
pattern type: dot

Now the background will immediatly turn into something more interesting, like this:

Step 4:

Select “Rectangle Tool”.

Set color to #d85302 and draw a shape as shown in below image.

Go to Edit >> Free Transform (CTRL or CMD T).

And rotate the shape little upward as shown in below image. Keep note of the rotation amount, as we’ll rotate some text the same way later.

Apply the rotation. Now we will add shadow effect to this shape. Right click on this layer and selecting blending options. Or you can also select blending options from layer >> Layer Style >> Blending Options .
Now Apply the following layer style to this shape.

The layout now looks like this. Note the subtle drop shadow that puts some distance between the background and the rectangular badge.

Step 5:

Again Select “Rectangle Tool” and use same color that we have used in last step  i.e. # d85302 and draw a shape over the first shape as shown in below image.

Apply following layer style to this shape from blending options.

Now our business card looks like this, with the two badges clearly positioned at different depths due to the overlapping shadows.

Step 6:

In this step we will add company name on the card. Create a new layer (Layer >> New >> Layer) just above the layer we created in step 4, i.e. above the first orange rectangle shape layer.

Select “text Tool”.

Type the first word of company with following text style:
Font style: Whatever you like, I used Cracked. TIp: Don’t settle for the fonts you have on your system! Especially if you are on a PC (MACs have more fonts) a few extra fonts may make the difference. You can find free truetype fonts online, browse the styles and download them to your system. Installing new fonts is a breeze and gives that extra touch your design may need.
Size: 24
Color: #ffffff

And apply following layer styles from blending options to this text.

Now the text will have a subtle gradient, and since this is the rotated layer we’ll have to transform the text just like we did for the box. Use the same rotation angle to keep everything neat and tidy.

Step 7:

In this step we will add second word of company on second orange shape that we create in step 5. Create a new layer (Layer >> New >> Layer) above the layer we created in step 5, i.e. above the second orange rectangle shape layer.

Again select  “text Tool” and type second word of company with following text style.
Font style: Same as before
Size: 30
Color: #ffffff

And apply same layer style from blending options to this text as we have applied for first company word in step 6.

Step 8:

In this step we will add a name. Select “text Tool” and write your name (of course Blogger is my maiden name) with following text style.
Font style: A different font, I used a cleaner Lucida Grande
Size: 40
Color: #c0c0c0

Then type your company website address, your email address and your phone number with following text style. Make sure to leave an equal magin between each line. This is a simple tutorial, but the single most important rule about design is to respect margins and symmetry. We’ll talk more about this in some more technical tutorials.
Font style: Lucida Grande
Size: 18
Color: #c0c0c0

Step 9:

In this step we will add icons for web address, email address and phone number. Select “Custom Tool” and add these custom shapes. All shapes should be of same size, and use same color that we have used for text i.e. #c0c0c0

Step 10:

Select “Rounded Rectangular Tool” with radius 10px and color #000000. Draw a shape at bottom of card as show in the opening image.

Change opacity of the layer to 30%. The shape will become slightly transparent. Now select “Text Tool” and type the services your company is offering on the rounded rectangular shape.  I have selected three services; Graphics design, Web Design and Multimedia, using the badge’s  font. Text should be center aligned with respect to the rounded rectangular shape.

Use following text style.
Font style: Same as Badges
Size: 18
Color: #979797

And now our freelance web designer business card is ready for a run in the printer. Don’t print a thousand of them, as your Photoshop skills will increase, this business card will seem too basic.

But for an absolute beginner it is a rewarding project and something to be proud of.

Happy Holidays to you all from your friendly foxy blogger!