Smallwood Tech.com

 

Creating Buttons for Main Page


You are going to make 8 different GIF buttons for the 4 areas (Favorites, About Me, Projects, Tutorials) of your website.

They will be labeled with either "OFF" for Original Image or "ON" for Rollover Image.

When you are finished you are to have a total of 9 different files.  1 - PSD  8 - GIF

Choose a style button below to go to the instructions for that button.

 

 

 

 

 

 

 

 


Changing Color Only

When your finished your layer palette should look like this:

 

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose Transparent

6.    Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorites

7.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

8.    Now choose Save for Web > Select Save > BTN-Favoritesoff <Format type GIF>Select Save

9.    Next change the color of the text to what you want when you rollover the button text.

10.    Again choose Save for Web > Select Save > BTN-Favoriteson <Format type GIF>Select Save


11.    Go to the Layers Palette and turn off the Favorite Links text layer.  (That means click on the eye icon)

12.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

13.    When finished choose Save  <This is just saving your existing PSD file>

14.    Now choose Save for Web > Select Save > BTN-Aboutmeoff  <Format type GIF>Select Save

15.    Next change the color of the text to what you want when you rollover the button text.

16.    Again choose Save for Web > Select Save> BTN-Aboutmeon <Format type GIF>Select Save


Again when you are finished your layer palette should look like this:

 

 

 

 

 

 

 


Background Showing Only On Rollover

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose White

5.    Now Double Click on the Background layer in the Layers Palette, then design the style of button you wish to have on your rolloever.  

If you want to go back to the instructions on creating a button.

Click Here!

6.    When finished designing the button turn the layer off (deselect the eye next to the layer in the Layers palette).

7.   Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorite Links

8.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

9.    Now choose Save for Web > Select Save > BTN-Favoritesoff <Format type GIF>Select Save

10.    Next turn on the layer in which you designed your button.

11.    Again choose Save for Web > Select Save > BTN-Favoriteson <Format type GIF>Select Save

12.    Turn all layers off in the Layers Palette.


13.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

14.    When you are finished Save <This is going to be your PSD file>

15.    Now choose Save for Web > Select Save> BTN-Aboutmeoff <Format type GIF>Select Save

16.    Next turn on the layer in which you designed your button.

17.    Again choose Save for Web > Select Save > BTN-Aboutmeon <Format type GIF>Select Save

18.    Turn all layers off in the Layers Palette.


 

 

 

 

 


Layer Style Showing Only on Rollover

When your finished your layer palette should look like this:

 

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose Transparent

6.   Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorites

7.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

8.    Now choose Save for Web > Select Save> BTN-Favoritesoff <Format type GIF>Select Save

9.    Next using the Layer Style effects area (Choosing the F icon at the bottom of the Layers Palette) add a Outer Glow to the text layer

10.    Again choose Save for Web > Select Save > BTN-Favoriteson <Format type GIF>Select Save


 

11.    Go to the Layers Palette and turn off the Favorite Links text layer.  (That means click on the eye icon)

12.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

13.    When finished choose Save  <This is just saving your existing PSD file>

14.    Now choose Save for Web > Select Save > BTN-Aboutmeoff  <Format type GIF>Select Save

15.    Copying Layer style:

  • Right Mouse click on the Favorites layer
  • Select Copy Layer Style
  • Now Right mouse click on the About Me Layer
  • Choose Paste Layer Style

16.    Again choose Save for Web > Select Save > BTN-Aboutmeon <Format type GIF>Select Save


 

 

 

 

 

 

 

 


Changing Backgrounds on Rollover

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose White

5.    Now Double Click on the Background layer in the Layers Palette, name this layer Button 1, then design the style of button you wish to have.

If you want to go back to the instructions on creating a button.

Click Here!

6.    Now make a new layer in the Layers Paletee, name this layer Button 2, then design the style of button you wish to have on your rollover.  

7.   Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorite Links

8.    Turn Button 1 layer ON and Button 2 layer OFF.

9.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

10.    Now choose Save for Web > Select Save > BTN-Favoritesoff <Format type GIF>Select Save

11.   Turn Button 2 layer ON and Button 1 layer OFF.

12.    Again choose Save for Web > Select Save > BTN-Favoriteson <Format type GIF>Select Save

13.    Turn all layers off in the Layers Palette.


14.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

15.    When you are finished Save.

16.    Turn Button 1 layer ON and Button 2 layer OFF.

17.    Now choose Save for Web > Select Save > BTN-Aboutmeoff <Format type GIF>Select Save

18.   Turn Button 2 layer ON and Button 1 layer OFF.

19.    Again choose Save for Web > Select Save >BTN- Aboutmeon <Format type GIF>Select Save

20.    Turn all layers off in the Layers Palette.


 

 

 

 


Layer Style Animating Only on Rollover

This tutorial is written if you want to animate your buttons.

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose Transparent

6.   Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorites

7.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

8.    Now choose Save for Web > Select Save > BTN-Favoritesoff <Format type GIF> Select Save

9.    Now make an additional copy the Favorites text layer and either change the text to a different color color or add a Layer Style effect (choosing the F icon at the bottom of the Layers Palette).


 

11.   Go to the Layers Palette and turn off all current layers.  (That means click on the eye icon)

12.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

13.    When finished choose Save  <This is just saving your existing PSD file>

14.    Now choose Save for Web > Select Save >BTN- Aboutmeoff  <Format type GIF>Select Save

15.    Now make an additional copy the About Me text layer and either change the text to a different color color or add a Layer Style effect

If you want to use the same Layer Style from the Favorites Copy then do the following:

  • Right Mouse click on the Favorites Copy layer
  • Select Copy Layer Style
  • Now Right mouse click on the About Me Layer
  • Choose Paste Layer Style

 

Now that all of the layers have been created create animations for each of the ON buttons.  

After each creation choose File > Save for web > then save as either

  • BTN-Favoriteson
  • BTN-Aboutmeon

 

 

 

 

 

Font and Style Change on Rollover

1.    Open Adobe Photoshop

2.    Choose File > New

3.    Change your Width and Height to the desired size you want. 

Note:     Remember these are going to be on a webpage so do not make your size too big. 

  • Width is usually between 180 pixels. 
  • Height is usually between 40 - 50 pixels. 
  • For Background choose Transparent

6.   Now type the words below in using the same font used for your main page title graphic, then choose any size or color you desire.

Favorites

7.    When you are finished Save as MainPageButtons  <This is going to be your PSD file>

8.    Now choose Save for Web > Select Save > BTN-Favoritesoff <Format type GIF>Select Save

9.    Make a copy of the Favorites layer in your Layer Palette, turn off (that means click on the eye icon) the original design layer.

10.    Change the style, color, or design of the text in the new Favorites layer.

11.    Again choose Save for Web > Select Save > BTN-Favoriteson <Format type GIF>Select Save

12.    Go to the Layers Palette and turn off all current layers.


13.    Choose your Text tool and type the words below:

About Me

Note:    Remember you must use the same Font and style as before.

14.    When you are finished Save.

15.    Now choose Save for Web > Select Save > BTN-Aboutmeoff <Format type GIF>Select Save

16.    Make a copy of the About Me layer in your Layer Palette, turn off (that means click on the eye icon) the original design layer.

17.    Change the style, color, or design of the text in the new About Me layer.

18.    Again choose Save for Web > Select Save > BTN-Aboutmeon <Format type GIF>Select Save

19.    Go to the Layers Palette and turn off all current layers.


 

 

 

 

 

 

 

 

 


Last updated:  Friday, October 12, 2012

 

Last Updated: Friday, October 12, 2012