Render Layout Tutorial vol. 4: Button Creation

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 I left a good amount of room to the right of "search" for the input box that will end up there. For now I 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, I 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 I 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 Ctrl + 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 Ctrl + 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

Start working on the content boxes and sidebar for our layout.

Continue on to vol. 5 Content boxes and sidebar.