How do you create buttons for a website on adobe photoshop cs5 on macbook snow lepard ?
asked Dec 25 '11 at 14:35
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
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
this video is perfect for what you want to do
answered Dec 25 '11 at 18:10
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