This is part 2 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 header for our layout. To see how the final product, go here:
Final product | Another variation.
wow, okay now that we got that out of the way, create a new layer, and name it "highlight".
while holding CNTRL click on the text layers, this should make a selection of everything on that layer. NOTE: hold down CNTRL + SHIFT if you're going to be selecting multiple layers (such as l am).
Now with the rectangular marquee tool, while holding down the ALT key (to deselect) remove the bottom 3/4 of the selection such as l have here
with the selection still active, go to "select->modify->contract" with a setting of 1 pixel (see photo).
fill this selection with #FFFFFF (white) and set the "highlight" layers opacity to about 75%. Here's how it should look now:
if the Letters are showing up too light, you can adjust the curves, by going to each layer, pressing CNTRL + M and sliding the curve around until it's dark enough for you.
Here's what l ended up with:
l also added in a small company slogan to tie everything up, and brand the reason for the website. the font l used here is called BM Mini and is available freely for download here: http://www.dafont.com/en/font.php?file=bm_mini
the font size is 8pt and the color is #000000 (black) with the following layer styles applied:
Then set the layers opacity down to around 75 percent, here's how it looks:
Next l just splashed it up with some techbrushes a bit, and dropped their transparency way down. There are several 100 tech brush sets available all over the place, but if you can't seem to find any email me and l will be sure to get you some handful of my personal favorites.
l also through in a little bit of micro-text. in a few spots to push the tech appeal home. Here's how it looks:
This was done by C&P a little snippet of text (anything will do) with a size of 3pt with the BM Mini font. then dropping the layers opacity.
That completes the "header" of our layout, you are now ready to continue on to Vol. 3 of our full layout tutorial, which is where we'll start working on the logo for our website. Continue on to vol. 3 Logo Creation.