Level 4 : Photoshop for Graphic Designer

Tutorial 4-1 Introduction to Graphic Layout
Tutorial 4-2 Designing a "For Sale" Flyer
Tutorial 4-3 Designing a Logo
Tutorial 4-4 Creating an Animation
Tutorial 4-5 Web Buttons and Rollovers
Tutorial 4-6 Animated Web Banners
Tutorial 4-7 Website Design
Tutorial 4-8 Graphics for Screen Printing
Tutorial 4-9 Business Card Design
Tutorial 4-10 Building an Ad for Print
Tutorial 4-11 Working with Clipart
...more coming soon

4-5 : Web Buttons and Rollovers

Buttons and rollovers are EVERYWHERE!!!!! (well, on the web and shirts around the world) Today we are going to talk about the webpage buttons that you click on and the image that changes when you rollover a button with your mouse. There are many books that are dedicated to this very subject... I personally have about 6 of them. AND I never use them. Even though Photoshop has some built-in options,I will show you the basics of how to setup the images for a simple button, something quick & easy using a shape, that is not a boring, little rectangle. AND, you'll get to practice your drawing skills! (that's a bonus)

Move your mouse over the image to the right to see effect that we're creating in this tutorial.

Example of a Rollover Image

Where to begin?
Decide what you want your button to look like... what it needs to say... and where it will be on your page. In this example, we are making a button for the "Bulldog Inc." website. Because the logo is a dog, lets make a bone shaped button.

If you are creating several buttons that will go on the same page, start your design with the button that has most text. This ensures that all of your other text labels will fit.

We start by opening a new window in PS. You should now how to do this right? File > New (CTRL+N) to open a "New" dialog window.

New File Screen capture

Here I have given it a name of 'DogBoneButton' and set the Width to be '100 pixels' and the Height to be '50 pixels'. I used pixels because this is for the web and it understands pixels, not inches or points, etc. (Also, you can make buttons any size) The Resolution is set for '72 pixels'. The Color Mode is an '8 bit RGB'. (Because the web likes that too) I also selected a 'Transparent' background because I don't want to have color behind it (this will let the background show).

So now we have a new window to work in (it's small so you might want to 'Zoom' into the workspace). We'll need to find clipart of a bone or draw one... Let's draw one!
First we will pick a color for our bone by setting the foreground color of our color palette (1-6). Then select the 'Brush Tool' from the 'Tool Bar' (1-6). Place the curser over your work space and 'Right Click', an 'Options Box' will open, for this I have chosen a 'Brush Size' of '25 pixels' and made the 'Hardness 100%' to get a sharp edge.

Brush Size Screen Shot

Place the curser in the upper left corner and 'Click', move the curser down and click again (hold the shift key to keep it straight ) and repeat this in all four corners (if you can't see your new curser size, you have your 'Caps Lock' on and/or you need to change your 'Preferences' by navigating to Edit > Preference > Curser to 'Normal or Full Size Brush Tip' in the 'Options Box'). Now we connect the two ends with a line of the same width, starting at about midway of the circles, 'Shift+ Left Click and Drag' across to the other side. Release the mouse button when you get to the other side. (Holding down the 'Shift Key while dragging' constrains the line straight) Wow, wasn't that the quickest and possibly the only dog bone that you have ever drawn! This will be the base with a transparent background, that we will use for our button.

Drawing a bone Screenshot

Photoshop has at least 3 ways to do anything... with that in mind,
how do we open the 'Blending Options' box?

  • Right Click in the work space window (when you have an active selection tool)

  • Double click on the image icon in the Layers Palette

  • Right Click on the and select "Blending Options"

There are more: see what ways you can find on your own

Blending Options Screen Shot

Next we will add some highlights and shadows to it using the 'Blending Options' (2-2) to add 'Bevel and Emboss' properties to it. I'm just using the defaults for the 'Inner Bevel' in the screen shot above but you can change these to anything that you want, after you have set your values, click 'OK' to apply them. Remember that you can always turn these off or change these by adjusting them from the same window. This the 'UP' state of your button.

Add text to it by selecting the 'Text Tool' (1-12) and 'Clicking' somewhere in the middle of the bone. You're going to want to change the color of your text so you can see it... I chose red because there is red in the logo and I titled this button 'HOME'. You'll want to double check that you center the text. I used an '18 point' font though you can use anything you like and the size will depend on the font that you pick, I used 'Narbonne'. Whatever the font you use, make sure that it is easy to read when it's at 100%. Think Bold not Thin and if you are using a particular font in your overall design, you should use something that goes with that.

Home Button Screenshot

The word 'HOME' looks too flat, so let's do the same exact thing we just did and add a bevel to it. Though, this time will change the 'Angle' of the light to '-60'. Make sure to uncheck the 'Use Global Light' so you don't change the angle of the bone shading and use the 'Emboss' option so it looks recessed. You will also have to reduce the 'Size' to a pixel or two.

Emboss Screenshot

Button Layer ScreenshotYou are now finished with the 'UP State' of you home button. Let's make the 'DOWN State' of your button now. For Neatness' sake and to make your life easier when you make 10 more of these little buttons, we are going to put these two layers into their own group (2-1). From the 'Layers Palette' you will select both layers ('Click' on both layers while 'Holding' the 'CTRL' key), once activated, 'Left Click' on the upper right options icon (the small arrow) of the 'Layers Palette' to drop down the 'Options Menu' and select 'New Group From Layers...' An 'Option Box' will open and you can give this group a name, we'll call this "Home UP".

We need a copy of this group so that we can make the "DOWN State" of the home button. Grab the main group layer, 'Click+ Drag+ Release' over the copy icon on the bottom of the 'Layers Palette'. A new group called "Home UP copy" will be listed, we will change this to be called "Home DOWN" by 'Double clicking' on the text.

The new layer groups is identical to the original, same 'fx', same placement, etc. All we want to do here is to 'Double Click' on the 'fx' icon and open the 'Blending Options' window so that we can change the 'Angle' of the light by '180 degrees' or so for both layers of the new group.

SO, with all that done, we need to save them out individually, 'Click' on the 'Eye' icon for the 'Home DOWN' group layer to turn the 'Visibility OFF'. Navigate to File>Save for Web and Devices... (Alt+Shift+Ctrl+S) and save is as a 'GIF' with a transparent background (Because we don't want to see a background color). Name the file 'Home UP'... Now do the same thing for the other button, turn 'OFF' the visibility for the 'Home UP' group layer and turn 'ON' the visibility for the 'Home DOWN' group layer, save it, and name it 'Home DOWN'.

You now have two GIF's to use as a rollover button.

Home Up Button + Home Down Button =





Rollover button (try it!)

This was a very simple button to make. It could have been any shape or size, provided that both images are the same, otherwise it will cause you problems in coding the webpage. For instance you can use a photo and simply change the photo when it is clicked on, like a 'Before & After' button. You can change the color of the font or the entire word it's all up to you and your imagination. Think ahead when designing a webpage and use this knowledge to get creative. Also, Buttons and Rollovers don't have to take you any where... they can just change the image or object.

Web buttons should have a small file size so that they load fast. They also need to be easily read and easy to find on your webpage.

Create a new button using any shape and text that you like. If you have a web site authoring program, post it and try it out. If you don't - e-mail it to us, and we'll post it for you so that you can see how it works.

Other kinds of Buttons!
Don't want to make your own? Click Here or Here


<< Previous Tutorial

Return to List

Next Tutorial >>

Owned and operated by The Art Department, Chester, NE
This web site is protected by Copyright 2008 - 2017 ©

Last Update:


Please visit our other sites:

| www.myARTdepartment.com | www.TheCenterofCreativity.com | CustomGamingDesign.com | FreeAutoCADTutorials.com |

myIllustratorsite.com | myAfterEffectssite.com | myAutoCADsite.com