WongFei
10 Feb 2007, 01:25 PM
I wrote this yesterday night for my new forum hope it helps everyone!
--------------------------------------------------------------------------------
Graphic Design Secrets Demystified
By Michael Brown
For ZuniWeb Design Forums
visit: http://www.zuniweb.com
and: http://forum.zuniweb.com
1st installment:
--------------------------------------------------------------------------------
Eric’s Secret Glossy Effect Button Making Secrets Revealed!!!
If you’ve been to our main page then you have undoubtedly noticed our beautifully glossy buttons. Like little windows into the outer reaches of our site designers mind these seem not only to please the occasional on looker, but help to confuse the aspiring psychologist and graphic designer.
Well wipe that dumbfounded look off your face and hyperlink no more for I am here to save the day! In this the first edition of Graphic Design Secrets Demystified I will not only show you how to add a little shine to your button, but even to add depth to your shapes as well as your character. So let’s move along and begin this tutorial!
I will first introduce the reader to a few things and then we will cover specifics of button design. I am assuming that everyone is familiar to some extent with using Photoshop, so I will not go into detail on creating some of the effects.
Tools of the Button Trade:
First off, we need to know what tools we’ll be using. I have listed them and given short descriptions of their abilities and use in this technique.
--------------------------------------------------------------------------------
1.) The first tool that we will be using is the gradient tool. This is a very handy tool for creating depth within the picture. By using a gradual change from darkness to light, this tool can provide a 3D appearance to our shapes.
--------------------------------------------------------------------------------
2.) The next tool will be the paint bucket. This tool fills in empty spaces with color. Simple enough, or is it? You will need to know how to change the opacity so make note of how to edit the bucket fill options.
--------------------------------------------------------------------------------
3.) Lastly we will use the circular and rectangular select tools. You can use these tools to select, move, copy, cut and paste sections of layers you select.
--------------------------------------------------------------------------------
What Layers Have Done for You:
Layers are like layers of paint on a canvas. Being separated makes it easy to edit the final image or painting if necessary. By choosing different layers you can navigate through an image and edit specific pieces within it. Layers are what makes Photoshop so great!
Step One: Four Sides, Infinite Possibilities
Let us begin now by creating a rectangle. On our website you can see the approximate dimensions of our buttons, but they do not necessarily need to be that size or even that shape. In time you will figure out the fine details; we’ll just learn the basic idea by using a horizontally elongated rectangle for this tutorial. Remember to make the rectangle the size you would like your button to be in the end.
Make the rectangle any color you would like as long as it is a somewhat lighter color. You will need to introduce a darker color later for this technique to work.
Step Two: Depth of Perception and Deception on an Optical Level
Create a new layer once you have made the colored rectangle on either the background layer or a new layer. Then select the gradient tool from the tools box and look at the top of the screen. You will see a pull down menu that displays the gradient you have selected. Mouse over the pull down menu and open it. Select the gradient fill that creates a fade from either the foreground or background color to opacity. Go to the color select and choose a shade much darker than the one used in the rectangle. You may also use black, but it is usually not as effective as a darker shade of the same color. After you have chosen the color you will need to add a gradient to the image.
Create the gradient so that it goes from darker to lighter from bottom to top. You can do this by selecting the bottom or top of the picture and stretching the line across the rectangle vertically. The gradient may also be added on the original layer instead of a new layer, but we want to be able to edit this button later without deleting the whole rectangle. Lookin’ nice!
Intermission
Congratulations you have now made your first button, but don’t get too ****y because were not finished yet. Now we move on to the gloss. This is a cut throat world here in web design and just a hint of 3D is not going to cut it unless it shines brilliantly. You can’t just fly under the radar with elegance; you have to punch them in the face with reflective eye searing light.
Step Three: A Blinding Light
--------------------------------------------------------------------------------
1.) This unyielding appetite of the masses for shiny things is why we will add this next layer. Create the layer and then use the famous bucket tool to fill the layer with a very opaque white. The opacity has to be set to very high so that the fill is almost completely invisible.
--------------------------------------------------------------------------------
2.) You should now choose the rectangular select tool and select a box that is the same size as the original colored square. After that copy the rectangle you selected and delete the opaque layer. Create a new layer and paste the selected rectangle of opaque white to it.
--------------------------------------------------------------------------------
3.) Use the arrow keys to do any fine placement of the rectangle and then resize the canvas so that it is significantly larger than the button. Move the three sections that comprise the button to the center of the screen if they are not already centered.
--------------------------------------------------------------------------------
4.) Choose the circular select tool. Select a horizontally stretched circle about three times larger then the button or so that an entire length of the button sticks out on either side. Select it so that so that the top half or so of the rectangle occupies the bottom center end of the circle; the more gradual the curve of the bottom of that opaque layer is, the less round the button will appear in the end. Copy this circle and delete the layer as before.
--------------------------------------------------------------------------------
5.) Paste that piece of the rectangle you cut out using the Circle Select back onto the top of that button. If you have all the pieces placed together correctly you should have a button pretty similar to the ZuniWeb signature orange button!
--------------------------------------------------------------------------------
The Payoff
All you have to do now is export it as a jpeg and…voila! You have your button! C’est magnifique!
I hope that you enjoyed this tutorial and that your button came out as good as Eric’s did for us. Until next time remember keep your glossy effects subtle, yet apparent and your colors matching.
Your friendly neighborhood,
Mike Brown
Join the ZuniWeb Forums at: http://forum.zuniweb.com
VISIT THE SOURCE: http://www.zuniweb.com/forum/index.php?topic=20.0
--------------------------------------------------------------------------------
Graphic Design Secrets Demystified
By Michael Brown
For ZuniWeb Design Forums
visit: http://www.zuniweb.com
and: http://forum.zuniweb.com
1st installment:
--------------------------------------------------------------------------------
Eric’s Secret Glossy Effect Button Making Secrets Revealed!!!
If you’ve been to our main page then you have undoubtedly noticed our beautifully glossy buttons. Like little windows into the outer reaches of our site designers mind these seem not only to please the occasional on looker, but help to confuse the aspiring psychologist and graphic designer.
Well wipe that dumbfounded look off your face and hyperlink no more for I am here to save the day! In this the first edition of Graphic Design Secrets Demystified I will not only show you how to add a little shine to your button, but even to add depth to your shapes as well as your character. So let’s move along and begin this tutorial!
I will first introduce the reader to a few things and then we will cover specifics of button design. I am assuming that everyone is familiar to some extent with using Photoshop, so I will not go into detail on creating some of the effects.
Tools of the Button Trade:
First off, we need to know what tools we’ll be using. I have listed them and given short descriptions of their abilities and use in this technique.
--------------------------------------------------------------------------------
1.) The first tool that we will be using is the gradient tool. This is a very handy tool for creating depth within the picture. By using a gradual change from darkness to light, this tool can provide a 3D appearance to our shapes.
--------------------------------------------------------------------------------
2.) The next tool will be the paint bucket. This tool fills in empty spaces with color. Simple enough, or is it? You will need to know how to change the opacity so make note of how to edit the bucket fill options.
--------------------------------------------------------------------------------
3.) Lastly we will use the circular and rectangular select tools. You can use these tools to select, move, copy, cut and paste sections of layers you select.
--------------------------------------------------------------------------------
What Layers Have Done for You:
Layers are like layers of paint on a canvas. Being separated makes it easy to edit the final image or painting if necessary. By choosing different layers you can navigate through an image and edit specific pieces within it. Layers are what makes Photoshop so great!
Step One: Four Sides, Infinite Possibilities
Let us begin now by creating a rectangle. On our website you can see the approximate dimensions of our buttons, but they do not necessarily need to be that size or even that shape. In time you will figure out the fine details; we’ll just learn the basic idea by using a horizontally elongated rectangle for this tutorial. Remember to make the rectangle the size you would like your button to be in the end.
Make the rectangle any color you would like as long as it is a somewhat lighter color. You will need to introduce a darker color later for this technique to work.
Step Two: Depth of Perception and Deception on an Optical Level
Create a new layer once you have made the colored rectangle on either the background layer or a new layer. Then select the gradient tool from the tools box and look at the top of the screen. You will see a pull down menu that displays the gradient you have selected. Mouse over the pull down menu and open it. Select the gradient fill that creates a fade from either the foreground or background color to opacity. Go to the color select and choose a shade much darker than the one used in the rectangle. You may also use black, but it is usually not as effective as a darker shade of the same color. After you have chosen the color you will need to add a gradient to the image.
Create the gradient so that it goes from darker to lighter from bottom to top. You can do this by selecting the bottom or top of the picture and stretching the line across the rectangle vertically. The gradient may also be added on the original layer instead of a new layer, but we want to be able to edit this button later without deleting the whole rectangle. Lookin’ nice!
Intermission
Congratulations you have now made your first button, but don’t get too ****y because were not finished yet. Now we move on to the gloss. This is a cut throat world here in web design and just a hint of 3D is not going to cut it unless it shines brilliantly. You can’t just fly under the radar with elegance; you have to punch them in the face with reflective eye searing light.
Step Three: A Blinding Light
--------------------------------------------------------------------------------
1.) This unyielding appetite of the masses for shiny things is why we will add this next layer. Create the layer and then use the famous bucket tool to fill the layer with a very opaque white. The opacity has to be set to very high so that the fill is almost completely invisible.
--------------------------------------------------------------------------------
2.) You should now choose the rectangular select tool and select a box that is the same size as the original colored square. After that copy the rectangle you selected and delete the opaque layer. Create a new layer and paste the selected rectangle of opaque white to it.
--------------------------------------------------------------------------------
3.) Use the arrow keys to do any fine placement of the rectangle and then resize the canvas so that it is significantly larger than the button. Move the three sections that comprise the button to the center of the screen if they are not already centered.
--------------------------------------------------------------------------------
4.) Choose the circular select tool. Select a horizontally stretched circle about three times larger then the button or so that an entire length of the button sticks out on either side. Select it so that so that the top half or so of the rectangle occupies the bottom center end of the circle; the more gradual the curve of the bottom of that opaque layer is, the less round the button will appear in the end. Copy this circle and delete the layer as before.
--------------------------------------------------------------------------------
5.) Paste that piece of the rectangle you cut out using the Circle Select back onto the top of that button. If you have all the pieces placed together correctly you should have a button pretty similar to the ZuniWeb signature orange button!
--------------------------------------------------------------------------------
The Payoff
All you have to do now is export it as a jpeg and…voila! You have your button! C’est magnifique!
I hope that you enjoyed this tutorial and that your button came out as good as Eric’s did for us. Until next time remember keep your glossy effects subtle, yet apparent and your colors matching.
Your friendly neighborhood,
Mike Brown
Join the ZuniWeb Forums at: http://forum.zuniweb.com
VISIT THE SOURCE: http://www.zuniweb.com/forum/index.php?topic=20.0