Portfolio Web Layout #3 Tutorial

Create a new document 820×700, color background #89887c. Select the rounded rectangle tool and draw out a rectangle leaving about 100pixels at the bottom. Color the rectangle with a gradient using the colors #c4c5b6 & #ebebe2, add a 2 pixel white stroke to your rectangle. You should have something like this.

Select the rectangular marquee tool and draw out to rectangles the same width as your rounded rectangle, color the 1st rectangle the color #f0f0f0 and the second rectangle #e5e5e5. You should have something like this.

Merge the two rectangles together and add a 1pixel white stroke to it. You should have something like this. (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Select your type tool and add some text to your navigation.

Create a new layer and select the “pencil tool” select a 1 pixel brush and draw two 1 pixel lines inbetween your text on your navigation. Use the colors #d9d9d9 and #ffffff.

You should have something like this (see link below)

CLICK HERE TO SEE RESULT SO FAR.

For this next part your going to need some “nature brushes”, a great site for some free brushes isbrusheezy. Once you have your brushes select one and add them above your navigation.

I used a total of 2 brushes to create the effect above.

Now add your site title, ive added a gradient overlay, drop shadow and a stroke, the effects used are very easy to create, all the options are standard apart from colors, just choose what ever works best.
You should have something like this (see link below)

CLICK HERE TO SEE RESULT SO FAR.

Now lets add our content boxes, select the rounded rectangle tool, draw out a small rectangle color it with the color #e7e7d8 and add a 1 pixel stroke to it using the color #c2c2b4.

Now duplicate your navigation bar and drag over the top of your content box at the top. (be sure to drag the layer over your content box layer).

Click your content box layer whilst hold the the key “CTRL” on the keyboard to make a selection. Select the duplicated nav bar layer and goto “select > inverse” then hit the delete key. You should be left with this.

Press “ctrl + t” to enter free transform mode, just make your content box header abit smaller, and change the layers stroke to the same as the content box. Add more boxes to suit your style following the steps above, You should end up with something like this.

CLICK HERE TO SEE RESULT SO FAR.

And with some content it could look like this.

Dj/Music Layout Tutorial

Create a new document 850×600, color the background #131414. Select the round rectangle tool and draw out a big rectangle leaving about 10-20 pixels either side, about 2-4 pixels from the top and about 6-8 pixels from the bottom. Color the rectangle #121415.

CLICK HERE TO SEE THE RESULT SO FAR.

Now your going to need a picture of some dj decks, i found this one on google images. Once you have your decks place them at the bottom left of your rectangle and add this layer style.

Now select the type tool and just type some full stops (…….) to make a divider, place this just above the corner of the decks.

Repeat the above steps and by rotating them make the desired effect (see link below).

CLICK HERE TO SEE THE RESULT SO FAR.

Lets start making the header, select the type tool and type out your dj name, and place at the top, also put in your logo, ive just made something really simple.

Lets also create a music player so our tracks can be listend to live online, i done this by using the rectangle tool, and shapes from adobe’s custom shapes libary, now obviously for you beginners this function would have to be coded properly to work like using a flash player or something. This is purly an example only.

CLICK HERE TO SEE THE RESULT SO FAR.

Now lets create our naviagtion, select the rounded rectangle tool and draw out a small rectangle.

Make a selection like this.

Hit the delete key.

Now add these layer styles.

You should be left with this.

Now we have created our button, duplicate it as many times as needed and place next to our divider that we prevously made by our dj decks. Select all your buttons in the layer window (multiple selctions done by hold CTRL) and goto “edit > transform > distort”, distort the buttons so the perspective is somewhat the same as the decks.

CLICK HERE TO SEE THE RESULT SO FAR.

Select the polygonnal lasso tool and draw out your content boxes. (holding shift key makes you draw perfect straight lines).

Add a stroke to your content boxes.

Now label your content boxes and navigation, ive also added abit of copyright information at the bottom left.

CLICK HERE TO SEE THE RESULT SO FAR.

Now this is optional and requires some “tech brushes” which can be found at deviant-art or search google. Select your brush tool and just randomly brush your tech brushes over the layout, all on one layer be sure to place the layer above your mainbox layer and background layer but underneath everything eles. Heres how mine looks.

Looks abit messy, but if you lower the opacity to about 5%-10% just makes the background abit more appealing.

Thats it really all finished, im sorry if the tutorial is hard to follow and i havent explained steps in alot of detail.

Car Sales Layout Tutorial

Create a new document 850×650 pixels with a white background, the theme for the layout will black and white, so i searched google images for a black and white car, and i found a really nice Porsche 911. Once you have found your images, copy them onto your canvas, resize them and place them either side. See image below.

The reflection under the left image was already there, so following on from that, i made the title, and gave it a reflection, if you dont no how to do reflections i suggest you follow my reflections tutorial.

Add a stroke to your site title using the settings below.

CLICK HERE TO SEE THE RESULT SO FAR

Now for our navigation, select the “rounded rectangle tool” and draw out a small black rectangle.

Add these layer styles.

Your button is now complete and should look like this.

Duplicate as many time as needed and label them.

Ive also added a reflection to my buttons.

CLICK HERE TO SEE THE RESULT SO FAR

Now lets add our footer, select the “rounded rectangle tool” and draw out a rectangle big enough to hold your information in, add the same layer styles as your buttons in step2.

CLICK HERE TO SEE THE RESULT SO FAR

Now lets add our content headers.

The dividers are done with the text tool, really easy to do, you can use any symbol on the keyboard as you want, also add dividers to split up your content into 3 coloums.

Thats it really, nice and simple and with some content it could look like this.

Games Portal Layout

Create a new document 900×800, select the paint bucket tool and fill your background with the color #032c45, now select the “rounded rectangle tool” draw out a rectangle at the top of your canvas fill with a gradient using the colors #1780b8 and #0c4d80.

Add a stroke to your header layer.

Select the “elliptical marquee tool” draw out a BIG eye like shape then drag to the very top of the header like this.

Fill with the color white, then holding the “ctrl” button on the keyboard click on your header to make a selection. Now select the layer your white circle is on and goto “select > inverse” then hit the delete key. Now add a layer mask blend the cirle in as much as you can just leaving abit showing, also set layer opacity to around 50%.

CLICK HERE TO SEE THE RESULT SO FAR.

Now lets add out site title, slogan and logo to our header.

Now the logo is a shape from adobe’s custom shapes libary, add this layer style to the word “planet”.

And add these layer styles to the word “games”.

Now lets add some important menu buttons to the right side of our header.

Lets also make some icons to go with our important menu items, ope up adobe’s custom shapes libary and choose some images from there or use your own images, to select the custom shapes tool see the image below.

Add an “outer glow to your icons”, you should have something like this.

CLICK HERE TO SEE THE RESULT SO FAR.

Thats it for our header, now lets create out navigation, select the “rectangular marquee tool” and draw out 6 rectangles, now the colors all depend on personal preference, heres mine.

Still with the rectangle marquee tool draw yet another rectangle over your button.

Do this with every button and set layer mode to “soft light”, your navigation should now look like this.

Now add your button text.

CLICK HERE TO SEE THE RESULT SO FAR.

Duplicate your header layer, then move and resize your header to fit at the bottom of the canvas as your footer, add your footer information.

With the “rounded rectangle tool” draw 3 rectangles under your navigation, open up your layer styles and add a stroke to your shapes.

Select the “rectangular marquee tool” and draw a white rectangle over half of your 3 rectangles.

Press “ctrl” on the keyboard whilst clicking on your rectangle layer, you should now have a selection like below.

Goto “select > inverse” then hit the delete key. Set the opacity of your white rectangle to about 30%. You should be left with this.

Label your rectangles and your done. Ive also add some dividers to split the layout up abit.

Software Layout #2 Tutorial

Create a new document 810×610 pixels with a white background. Select your “rectangular marquee tool” and draw out a rectangle about 800pixels wide leaving two 5 pixel gaps either side. Place at the top of your canvas. Fill with a gradient using two shades of light blue.

Add a “2 pixel stroke” using the color #3b6a9a. Holding “ctrl” on the keyboard click on your rectangle layer, then make a new layer above it. Fill with a pattern of your choice, if you dont know how to make patterns i suggest you do my custom patterns tutorial. Fill your header with your pattern and add a layer mask so it blends in at the top. Heres how my header looks at this stage.

Now lets add some text, grab your type tool and type your slogan and site title.

CLICK HERE TO SEE THE RESULT SO FAR.

Now lets add some buttons, select the “rounded rectangle tool” and draw a small rectangle fill with any color as this will change in a minute.

Add these layer styles to your button.

Your button should now look like this.

Duplicate your button as many times as needed, label them and place under your header like so.

Now hide all your layers apart from your buttons, then goto “layer > merge visable” UNHIDE everything, then select your buttons layer which should all be on one now layer now they’be been merged. Duplicate them then goto “edit > transform > flip vertical”, place your buttons just underneath the original ones creating a mirror image. Add a layer mask to your mirrored buttons and set opacity to about 50%. You should have something like this.

CLICK HERE TO SEE THE RESULT SO FAR.

Select the “rectangular marquee tool” and draw a rectangle in the middle of the canvas, fill with a light grey and add a 2 pixel dark grey stroke to it.

Select the pen tool and create a shape like below.

Add the following layer styles to your shape.

Your shape should now look like this.

Duplicate your shape you created previously and change the “gradient overlay” to a diferent set of colors. im going to use orange.

Place the shapes next to each other like the above image. Select the “ellipitcal marquee tool” and add two orbs to your shapes.

Make two rectangles at the bottom of your shape, add the same layer styles as your shapes but change the “gradient overlay”.

Add your footer information at the bottom of the page using the type tool.

CLICK HERE TO SEE THE RESULT SO FAR.

Thats it all done, and with some content it can look like this.

Orb Site Icons Tutorial

Create a new document 640×480 with a white background, select the elliptical marquee tool and draw out your circle, fill with any color as this will change in a minute.

Now add these layer styles, im going for a blueish looking icon, just change the colors accordingly in the layer styles to suit your needs.

You should now be left with this.

Still with the elliptical marquee tool draw another cirlce at the top like this.

Fill with the color white, then click the “add layer mask button”.

Now select the gradient tool making sure you have the color black as your forground, and simply drag from the middle of the white circle to the top of the white cirle, set the opacity to about 54% You should then have something like this.

Do the same as above creating a total of 3 cirlces two at the top making one smaller one and one at the bottom. You should have something like this.

Now for your actual icon, select the custom shapes tool.

At the top where it says “shape:” click the little arrow and select your desired shape.

Drag out your shape onto your orb, once you have done that select the “pen tool” and right click your canvas then goto “fill path” press ok when the dialog box pops up. You should be left with this.

Now you can leave it as it is OR add these layer styles to you icon image.

Your icon should now look like this.

Thats it all done, now resize it to your desired size.

Tutorial Layout Tutorial

Create a new document 900×900 pixels, Select 2 shade of dark grey as your background/forground, select the “rectangular marquee tool” and draw out a rectangle at the top of your canvas, fill it with a linear gradient draging from the top to the bottom. Now add these layer styles to your rectangle.

Heres how it looks so far.

CLICK HERE FOR THE RESULT

Select your type tool and type out your sites title and slogan.

Add this layer style to your “title”.

CLICK HERE FOR THE RESULT

Select the “rounded rectangle” tool and draw a small rectangle underneath your header.

Add these layer styles to your little rectangle.

Your little rectangle should now look like a nice button.

Duplicate this button as many time as needed and place along side the bottom of your header, you might also want to label your buttons.

CLICK HERE FOR THE RESULT

Duplicate your header then goto “edit > free transform > flip vertical” and postion the duplicated layer at the bottom of your canvas this shall be the footer. Select the type tool and add your footer information.

CLICK HERE FOR THE RESULT

Now lets create a our content boxes. Select the “rectangle marquee tool” and draw out 2 seperate boxes.

Add these layer styles to both boxes.

Position the boxes on top of one another. You should have something like this.

Now duplicate both boxes and create individual content boxes. (see link below)

CLICK HERE TO SEE THE RESULT

Label all your content boxes.

CLICK HERE TO SEE THE RESULT

Thats it all done, and with some content it shall look similar to this.

Custom Patterns Tutorial

Create a new document 3×3 pixels, with a transparent background. (The size of the image all depends on how big you want the pattern to look).

Zoom in 1600% then select the “pencil” with a 1 pixel brush size and the color black draw this shape. (see image below)

Now goto “edit > define pattern”, enter a name in the box that shows up and press ok.

Now open up an image you want to apply the pattern to, like a website header etc… im just going to use a blank canvas. Select the paint bucket tool, then at the top in the paint bucket menu where it says “foreground” change this to pattern.

Now click the little arrow and find your pattern.

Select your pattern then fill a layer with your pattern as you would if it was a color.

Thats it all done. The possabilities are endless.

Drawing The Linux Penguin Tutorial

Create a new document what ever size you see fit. Select the pen tool and draft out a shape like this.

Add these layer styles.

You should have something like this.

Select the “elliptical marquee tool” and make 2 circles for the arms like this.

Add a gradient overlay using the settings below.

You should be left with this.

Make a selection on one of the arms like the picture below.

fill with the color white and add a layer mask. Duplicate this layer and goto “edit > flip horizontal” then place onto the other side of the arm.

Select the “elliptical marquee tool” and make a selection like below

Fill with the color white and blend in with a mask. Then set the blending mode to “soft light” with an opacity of 50%. You should have something like this.

Do the same as above but for the head also leaving the blending mode to normal.

Create another circle on the head but make it bigger than the last one, also set the blending mode to “soft light”. Place this layer underneath your cirlce you created above. you should have something like this.

Still with the elliptical marquee tool make a selection like the image below.

Fill with the color white then add this gradient overlay.

You should have something like this.

Now lets make the feet, select the pen tool and draft out a shape like below. Might be easier just to create one foot then duplicate it, flip it and place on the other side.

Now add these layer styles to the feet.

You should have something like this.

Now with the elliptical marquee tool create 2 circles one on either foot, add a layer mask and set opacity to 60%.

Underneath the above layer make a small selection like the image below.

Fill with the color white then goto “filter > blur > guassian blur” blur by about 3-4 pixels. You should have something like this.

Select the pen tool again and create a pizza slice shape for the nose.

Add these layer styles to the nose.

You should have something like this.

With the elliptical marquee tool create to shapes like this.

Add these layer styles.

Now add the pupils and fill them with the color black.

Then add a smaller circle inside the pupils, fill with the color white and add a layer mask so they blend in more.

Thats it, hope i wrote the tutorial okay enough for you all to understand. any questions just ask.

Heres the final image.

CLICK FOR BIGGER VERSION

Computer Shop Layout Tutorial

Create a new document 800×950, fill your background with the color #21252e. Select the “rectangular marquee tool” and draw out a rectangle at the top of your canvas, fill the rectangle with the color #111419 and add a “2 pixel black stroke”.

CLICK HERE TO SEE THE RESULTS.

Select your type tool and choosing a nice looking font add your title and slogan. Add these layer styles to your “title”.

Now duplicate your title text and goto “edit > transform > flip vertical”, move the text down so it looks like a mirror image, add a layer mask. (for more information on reflections do my reflections tutorial).

CLICK HERE TO SEE THE RESULTS.

Choose a shape from your custom shapes menu OR use your own logo and place by the side of your title, also add a picture of some sort to give a good idea on what you are selling, as im doing a computer store i shall use a computer. Again duplicate your image, flip it and add a layer mask like you did for the title in step1.

CLICK HERE TO SEE THE RESULTS.

Now lets add a navigation to our header. Select the “rounded rectangle tool” and draw out a rectangle roughly the same size as the image below.

Now add these layer styles to the button.

Your button should now look like this.

Duplicate as many times as needed and place at the top of your header.

CLICK HERE TO SEE THE RESULTS.

Now label your buttons with the type tool.

Lets add some reflections to our buttons, select the “elliptical marquee tool” and draw a circle over the buttons like this.

Fill the circle with the color white.

Here comes the tricky part, “hide every layer apart from your buttons” once everything is hidden goto “layer > merge visable” all of your buttons should now be on one layer with the layer styles intact. Unhide everything then click on your buttons layer whilst holding down the ctrl key on the keyboard, now click your white circle layer and goto “select > inverse” and hit the delete key on your keyboard. You should be left with this.

Now set the opacity of your white cirle layer to about 40%.

Select your rounded rectangular tool again and draw out 3 rectangles. (see link below)

CLICK HERE TO SEE THE RESULTS.

Add these layer styles to your rectangles.

In the left rectangle add your, title/products.

Select the recangular marquee tool and draw out 2 small rectangles, fill them with 2 colors, and place them next to your categories.

Select the type tool again and just type out some full stop signs (.) and place them as dividers.

CLICK HERE TO SEE THE RESULTS.

In the very bottom rectangle put your all important foot information.


Thats it all done really, looks quite plain but with your content added aswell, it could look like this.