Render Layout Tutorial vol. 3: Logo Creation

Step 1.

Next we're going to make the logo for our website. There's really no right or wrong way to make a logo, just remember not to get too detailed with them, you want something that is easily remembered, and recognized. For the logo I'm going to create, I'm going to start with the "pen tool". On a new layer, draw a similar shape to this.

Step 2.

Next right-click on the shape, and choose "make selection" and fill it with the color #3B7CA0.

Step 3.

Next duplicate the layer and go to Edit->Transform->Flip horizontally and move the flipped duplicate over to the right as I have here.

Step 4.

Next merge these two layers by pressing Ctrl + E on the top -most layer. and duplicate the merged version. and flip this one vertically Edit->Transform->Flip vertically. and position it like so:

Step 5.

While holding down Ctrl click on the top-most layer of the two logo layers this should make a selection on the screen. highlight the bottom most layer of the two logo layers.

Step 6.

Go to Select->Modify->Expand and expand the selection by 2 pixels. and press Delete on your keyboard, here's what you should end up with:

Step 7.

Merge the two logo layers together.

Press Ctrl + T to open up the free transform tool.

While holding down the Ctrl key, grab the bottom left node/corner and drag it outward.

Then grab the bottom right corner's node and drag it outward

Grab the top left node, and drag it inward

Top right goes inward too (remember to hold Ctrl)

Finally release the Ctrl key grab the right or left center node, and pull the whole thing inward to squish the logo a bit and press Enter on your keyboard.

Step 8.

Create a new layer beneath this one. get out the circular marquee tool, and create a perfect circle by holding shift like so:

Step 9.

Fill this selection with: #3B7CA0.

Step 10.

With the selection still active go to Select->Modify->Contract with a setting of 8. Then press Delete on your keyboard and press Ctrl + D to deselect.

Step 11.

Next while holding Ctrl click on the logo layer above the circle to make a selection of it. Then go to Select->Modify->Expand and set it to 2 pixels. Press delete on your keyboard.

Step 12.

Next on a new layer, create a few extra small circles and fill them with the same color.

Step 13.

Position them like so:

Step 14.

Just like before hold down Ctrl and click on the base circle layer to select it, go to select-modify-expand and expand it by 2 pixels, and press "delete" to get this effect.

Step 15.

I then trimmed off the excess near the bottom and merged this layer with the top-most logo layer.

Step 16.

Next add the following layer styles to the top-most logo layer:

Step 17.

And apply these layer styles to the circular layer bellow:

Step 18.

Make a new layer and name it "highlight". Hold Ctrl and click on the layer bellow the "highlight" layer, and get out the circular marquee tool. While holding alt, deselect some of the selection until you have something similar to this.

Step 19.

Go to Select->Modify->Contract by 1 pixel and fill this selection with a white to transparent gradient. Next set the layer style to "overlay" and drop the opacity down to 80 percent.

Step 20.

Click the small "folder" icon on the bottom right of the layers pallet. Drag each of the three logo items into this folder, keeping them in the same order as they are in now.

Step 21.

Click on the "folder" and go to "edit->transform->rotate 90 CCW".

Step 22.

Position the logo in the top left area of the header. if it doesn't seem to fit, press Ctrl + T to open the free transform tool and while holding Shift make it bigger or smaller. Here's how mine looks:

That completes the "logo" of our website, you are now ready to continue on to Vol. 4 of our full layout tutorial, which will cover button completion for our website layout.

Continue on to vol. 4 Button Creation.