login about faq

To prove you're not a spammer, email newuser.lgqa@gmail.com with the subject "Account Request" to request an account.

How do you create buttons for a website on adobe photoshop cs5 on macbook snow lepard ?

asked Dec 25 '11 at 14:35

techmaniac's gravatar image


Please try using the "Comment" button near each answer. It helps to keep the site clean.

(Dec 28 '11 at 18:26) TheTechDude TheTechDude's gravatar image

On photoshop create a new file (however big you want your button) and "IMPORTANT" set the background to Transparent "IMPORTANT" Create the button, (I presume you know how to make an image?) and save as a .PNG Otherwise your left with a white border around the button!

answered Dec 25 '11 at 14:55

Tollz's gravatar image


Thanx i got it but does all that stuff you mentioned create an image file?? im not sure as i am new to photoshop!!!

(Dec 25 '11 at 17:50) techmaniac techmaniac's gravatar image

are you looking for something like a navigation bar? I don't know how to do it in Photoshop, but there is a tutorial on the internet for using adobe fireworks.

However if you are just looking for a button you can use almost any graphic then use it as a hyperlink to another page or to run some java script or to call a php function...

answered Dec 25 '11 at 17:59

trueb's gravatar image


I really just need to create a simple basic button for a website any help would be good thanx

(Dec 25 '11 at 18:57) techmaniac techmaniac's gravatar image

How would i do one on fireworks i am going to be using dreamweaver cs5 to create a site

(Dec 25 '11 at 19:26) techmaniac techmaniac's gravatar image

answered Dec 25 '11 at 18:10

Brad%20Hodgkins's gravatar image

Brad Hodgkins

Photoshop cant directly work with making a web page but it can create the elements of the webpage.

I highly recommend not adding text in photoshop. It is a common mistake by many web developers. Instead make the background fur the buttons and use dreamweaver of what ever other HTML editor that you want to use.

using a background only fur buttons allows you to use the same graphic for every button (or all buttons of the same style, then have the text and other basic info done in HTML. This saves a lot of bandwidth as you decrease the use of the number of graphical elements that need to be loaded.

Also be sure to use css, helps a great deal when saving bandwidth as it allows content to be repeated automatically to fit different screen sized. so instead of making a 4000x4000 gradient background or something, you can instead make a 10x4000 and have it repeat

If you want rounded corners on items then it will take more photoshop work as you will have to slice the artwork up.

(not all browsers properly support png images, especially when it comes to some mobile browsers)

PNG is more bandwidth intensive compared to gif or jpeg. If no anti aliasing or gradients are used then gif works great for getting good quality with transparency.

PS when making buttons, make it in photoshop at at least 4 times the actual size you need.

if no transparency is needed then use .gif (if gradients are needed, then use .jpg )

create the background for the button , create text in photoshop to make sure everything looks proper but but don't include it as part of the final render (unless you only plan to ever make 1 button of that style) (be sure to label the button properly to maintain compatibility with voice control apps as well as assist programs for the vision impaired)

answered Dec 26 '11 at 07:28

Razor512's gravatar image


Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: Dec 25 '11 at 14:35

Seen: 1,316 times

Last updated: May 10 '12 at 06:20