Photoshop - how to create buttons

dellas1979

Could anyone please tell me how to create or draw a button in photoshop?

I need to design a site in dreamweaver. I am using CS4, so flash buttons are not available. I have to create a menu. Would anyone know how I could create or draw menu options in photoshop? I have looked online but nothing in simple steps. I am a complete novice to photoshop.

For example, I open a new file in photoshop, draw a rectangle ( as a menu button) and I cannot resize. I saved it anyways as a JPEG and opened it in dreamweaver (in a template) and when I brought in the image, all I could see is this tiny little thing I had drawn and a big white area.

Please help!!

cmyk

Hard to tell what sort of button your trying to create, or what you've done without seeing the file? Plenty of youtube tutorials on button design.

Not sure why you say you can't resize? Sounds like maybe you hit canvas size rather than image size?

dellas1979

Tried youtube. Still a little advanced for me!!

Ok - I need to create a few "menu" buttons for a web project.

I am a complete novice at photoshop.

Lets say I create an oval shape button - I cannot "trim" for want of a better word the remaining white edge parts (see attachment). When I open this in Dreamweaver, it opens huge! I only want the blue button (if you know what I mean) not the white part.

I just want the blue button *sigh*

If I can figure this out, I am sure I can create something decent, but at the moment its stopping me seeing how it all looks.

Help pleeaasseeee....

PS: Anyone any tips as to how to create nice looking buttons?

I was going to create 7-10 individual buttons (ranging from "Home" to "Contact Us") and insert them on dreamweaver template.

daymobrew

If you are in a bind for time, there is online button generator and online gradient image maker (does buttons too).

lostprophetsie

Hi Dellas,

The button you attached is an image of 640 by 480 px. That is why its appearing with a huge white piece around it as your button is only about 200px wide and 100px high, the white is the remainder of your canvas.

So quickly what you need to do is go to "File" and "New" in Photoshop
Going on the size of the button you uploaded change the height to 100px and width to 200 px in the dialog that opens.
Also ensure "Background Contents" is set to transparent.
Click "OK"
Create your button on the checkered canvas that appears.
When finished click "File" then "Save for Web & Devices" Change the File type to "PNG-24" It may be set as "JPEG" or "GIF" or something first I'm not sure what it defaults too.
Click "Save"

Now go to dreamweaver and insert it into your webpage.


Not sure if this tutorial is too advanced but you may be able to use some of the tips to fancy up your buttons a little.

http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/

dellas1979

Thanks very much for the replies!

lostprophetsie you hit the nail on the head - looking better already in DW.

Any tips on creating buttons?

One more thing, as i will be creating a good few buttons, is it possible to edit the size of the button? For example, I make one button with the short text "home". Later on, I, for example, need to create a button called "My Homepage" can I edit the "home" button - keeping all the styles associated with it, yet change its length?

For accessibility purposes, is it ok to have 10 created buttons like this? Would a screenreader, for example, pick up on the "alternate text" tag?

And finally, any tips on colours? i.e. should there only be a certain amount of colours on screen?

I guess its all about web best practices, and staying within those realms, but there is so much conflicting info out there.

Thanks again

cmyk

You can set up multiple buttons in photoshop.

Quite simple to do, but quite difficult to explain, you basically set your base button, depending on the site, if it is for a menu, keep the base the same and just change the text or effects on hover/rollover.

Easiest way to do this is with layers in PS, and then use folders so you can switch off the different buttons to export them individually as before (save for web dialog box)

Sounds like you probably need to have a good mess around and learn the tools in photoshop.

In terms of colour, again, it will come down to learning some design basics, such as the colour wheel. Though sites such as kuler may help you pick a scheme.

Few sites to get you on the way to learning photoshop would be:
http://psdtuts.com
http://forums.creativecow.net/adobephotoshopbasics

Placebo

http://button-download.com/