This is part 4 in a 5 part tutorial to easily create a render layout out of a simple render in about 20 minutes. This is by
far the fastest way to develop a layout for a website and equally as easy to accomplish.
In this installment we will be creating the buttons for our layout design. To see how the final product, go here: Final product | Another variation.
Page 1 of 1
Step 1.)
next we'll start adding the text for our buttons. I'm using a font size of 8pt, a color of #FFFFFF (white) and the BM Mini font.
Then added these blending options to each of the text layers:
Notice l left a good amount of room to the right of "search" for the input box that will end up there. For now l just drew a 1 pixel black box to fill the space, this will be filled in with a real input box when the layout finally gets sliced up.
Step 2.)
for the "GO" button of the search feature, l drew a small rectangle with the marquee tool, and filled it with: #3B7CA0
then added these layer blending options:
and here's how it looks:
Step 3.)
Now we'll add some dividers between each of our buttons to separate them a bit.
Get out the pencil tool, set your foreground color to #000000 (black) and draw a 1 pixel line from the top of the button to the bottom such as l have here:
Tip: Holding the SHIFT key while you draw your line will ensure that it stay perfectly vertical.
Step 4.)
Next press 'V' to get out the movement tool.hold down the ALT key, and press the -> (right arrow) on your keyboard one time.
This will duplicate the black line, and move the duplicate 1 pixel to the right. Once that's done press CNTRL + ALT + i to invert the color from black to white.
Step 5.)
Drop the opacity of the Black line to: 25 percent, and the opacity of the white line to: 30 percent. Highlight the layer with white line, and press CNTRL + E to merge these two layers together.
Step 6.)
name this merged layer "divider". right click on it and choose "duplicate". Move this copy between the next set of buttons.
Step 7.)
repeat this process until you have a divider separating all of the buttons.
That completes the button creation of our layout, you are now ready to continue on to Vol. 5 the final installment of our full layout tutorial, which is where we'll
Related Tutorials: Glossy Buttons In this tutorial you will learn how to make quick and effective looking round gl ... Interface Vents This tutorial will show you how to add a techno depth to your layouts with the u ... Render Layout Tutorial vol. 5: Content Boxes In this tutorial you will learn how to create an entire layout by using an exsis ...
Glossy Buttons
