This tutorial will teach you how to create Starcraft theme wallpaper.

Step 1

First we need to find some textures and Starcraft font. I use 2 images from SXC:
Rusted metal texture and Texture for metal tiles

Starcraft font can be downloaded from Dafont.com (you need to install it before running Photoshop).

Step 2

Create a new document. I start with 1600×1200 which can be resized to a smaller resolution later.

Open rusted metal texture and resize it until you like its appearance. I resized the original image to 1900×1577.

We are going to bring some order in texture pattern so it will look more impressive.
Copy resized image to your document and place it with 200px blank space to the right. We need only a half of an image, the other half will be mirrored.
Select and clear everything to the left from the horizontal center. You will get something like this:

Step 3

Duplicate the layer with your texture, mirror it (Edit – Transform – Flip Horizontal) and place in the blank space which we left on the right side. Merge down this layer by pressing Ctrl+E.

Step 4

Press Ctrl+U to adjust color and lightness. Here’s my settings:

Step 5

Mirror image to the left and merge layers so you will have the complete texture.

Step 6

Create new layer and fill it with gradient like this:

Step 7

Set Layer Blending mode to Overlay and reduce opacity about 50%. At this step I additionally reduced lightness of the layer with texture to -22 (Ctrl+U).

Step 8

Now we will make a dark area in the center. Select Lasso tool with Feather set to 5. Make free selection at the rust texture image, copy it to your document, then mirror and center.
Set layer blending mode to Multiply and reduce opacity to 60%.

Step 9

It’s time to paint some rust. Set brush color to brownish orange (I used #40230C) and Blending Mode to Color.
Select one of the standard Spatter brushes and adjust brush scattering to imitate the natural spreading of rust.
Now paint some orange stains right over the metal texture. To make it look more natural, you can change brush opacity and size while painting.
Here are my brush settings and the resulting image:

Step 10

Select Horizontal Type Tool and write your text. I used 36 pt for big letters and 24 pt for small.
I made some tracking changes to make the text look better (tracking is the distance between the letters in the Character palette).
Tracking between S-t and C-r is set to -200, f-t 50 and 0 for others.
Now rasterize text layer, select small letters with Polygonal Lasso Tool and lift them a little.

Step 11

Double click on the text layer to open the Layer Style window. We are going to make the text look like following.
Change layer blending options according to the pictures.

Step 12

Select Pen tool and draw a shape like on the picture below. Instead of this you can just type “1″ with Starcraft font but I don’t like how it looks.

Step 13

Copy and mirror your “1″ to get “II”. Merge the layers with “1″ and place the resulting layer beneath the text layer. Copy layer style from the text layer and paste it to the layer with “II”.

Step 14

Double click on the “II” layer to open Layer Style window. Uncheck “Drop Shadow”, add “Outer Glow” and make changes to the other effects like on the picture below.

Step 15

Create a new layer. Duplicate the “II” layer by pressing Ctrl+J and merge it with the empty layer to rasterize all effects. Place the resulting layer below the “II” layer and add some blur (Filter – Blur – Gaussian Blur…) to create glowing effect.

Step 16

We are going to add some orange reflection like on the letters. Create new layer above “II”, select soft round brush and set it’s opacity to 30% and color to light orange (mine was #F8CA9D) and make a few strokes at the top of each “I”. Also you can add some white strokes over the orange to make it look more glittering.

Step 17

Make a new layer. Ctrl+click on the “II” layer to select all its objects. Go to Edit – Stroke. Set Width to 5 px, Color to white, Location to Inside and press “OK”.
To make the same thing with the inner edges, select Pen tool and draw a path going along the center edge of each “I”. Then use “Stroke path with brush” option on the Paths palette (don’t forget to change brush to hard round 5px white).

Step 18

Select Pen tool and draw a path for the bottom leaf of the gate. Hold Shift when you need to create straight line.

Step 19

Stroke this path with hard round brush 13 px dark blue (#283547). Apply layer style like it is shown on the picture below. Then duplicate this layer, choose Edit – Transform – Flip Vertical and move it upwards to create the top leaf of the gate.
In Bevel and Emboss set Shading Angle to -90 for this layer. It’s needed because the light goes from the center of the image.

Step 20

Make a selection like this. There are many ways to do it: with quick mask, Pen tool or Polygonal lasso tool. I used Pen tool.
At the Channels palette, click “Save selection as channel”. New alpha channel called “Alpha 1″ will be created.

Step 21

Create new layer and fill it with the original rust metal texture. Now go to Channels palette, Ctrl+click on our new channel to load the selection and then press delete key to clear it.
In this way we get the form of our gates filled with metal texture

Step 22

Press “Ctrl+U” and adjust the color. Add a little shadow using Drop shadow in Layer Blending Options menu (distance 5 px, size 10 px).

Step 23

Open the Tiles texture and press Shift+Ctrl+U to desaturate it.
Create new layer in our wallpaper document and fill it with this texture. Delete the unneeded part like we did in the previous step using the alpha channel.

Step 24

Adjust the tiles contrast with Levels tool (Ctrl+L).

Step 25

Set layer blending mode to Vivid Light and Opacity to 50%.

Final

That’s it. In order to bring some variety you can create a few dark and light spots on the gates with Dodge/Burn Tool.

In this tutorial I will show you guys some simple but efficient techniques that will help you make great movie posters.

Step 1

In this tutorial we are going to use only 2 stock images that I found on SXC.

Here are the links:

http://www.sxc.hu/browse.phtml?f=view&id=912717

http://www.sxc.hu/browse.phtml?f=view&id=1047566

Step 2

First thing you need to do is to cut the soldier out of the background using the Pen Tool (P) and delete the background. Leave only the soldier visible and a transparent background. Name the layer Soldier.

Step 3

Next I want you to make a new layer and place it under the Soldier layer.

Using the Rectangular Marquee Tool (M) make a selection and fill it with black as I did. Name the layer Ground.

Step 4

Next I need you to bring on the project the other image stock and resize it and maybe remove the pigeons using the Clone Stamp Tool (S). Also name the layer Sky.

Step 5

Duplicate the sky image and then go to Image – Adjustments – Black & White and play with the settings a little. If you are not using Photoshop CS3 you might not have this buttons. In this case use the Desaturate button.

Step 6

Now set the Black & White sky layer to Multiply.

Step 7

Again repeat step 5 but this time, apply the technique to the Soldier.

Step 8

Now duplicate the Soldier layer that you just made Black & White to make the soldier darker.

Step 9

Make a new layer and place it above all the layers. Using the Brush Tool (B) simply brush with black over the soldiers feet.

Step 10

Repeat step 9 but, this time make a selection of the soldier and brush as I did.

Next set the layer to Multiply and Opacity 33%.

Step 11

Make a new layer over the soldier. Fill it with white and go to Filter – Render – Clouds. Now go to Filter – Sketch – Chrome. Set the Details to 10 and Sharpness to 10.

Step 12

Transform the chrome layer. Next you need to mask it to be visible only around the soldier. Last set it to Multiply and 78% Opacity. This will make the soldier look like he is wet.

Step 13

In this step we will make the rain.

Make a new layer, name it Rain and place it over all the other layers. Fill the layer with white then go to Filter – Noise – Add Noise.

Step 14

Next go to Filter – Blur – Motion Blur and set it to 24 pixels and angle -63.

Step 15

Now go to Image – Adjustments – Levels and use my settings:

Step 16

Last thing you want to do is to set the Blending Options to Screen.

Step 17

Now you need to start adding you text. Use my settings for the Blending Options.

Step 18

Next make another rain layer just as you did with the first rain layer you made. But this time you will leave the rain to be more intense and also mask the rain layer into the WAR text as I did.

Step 19

Set the layer to Multiply and Opacity 62%.

Step 20

Next you will need to add your own text. For the rest of the text I did not used any effect. Just made the text grey #9f9f9f.

Final

In the end you will be able to add more detail to the soldier by brushing some white over him as I did.

Keep experimenting and use what you learned here with your own techniques.

Hi there guys. I have prepared a new tutorial. In this tutorial we will be learning some more photomanipulation but this time different than the first one I did.

Step 1

First of all I need you to look at the stock we will use for this tutorial. Also you will see there an image that I have created “finish” image.

Here are the links:

http://www.sxc.hu/photo/1026758

http://www.sxc.hu/photo/1012586

http://www.sxc.hu/photo/788012

http://www.sxc.hu/photo/1011828

Step 2

First open up the highway image.

Step 3

The first thing we’re going to do is change the light of the sky to heat up the atmosphere. In order to start editing we must make the background layer editable.

Using the pen tool make a shape of the sky as I did.

Step 4

Set the opacity of the layer to about 25% so you can see the line of the road. Then, using the add anchor point tool, make the shape to match the road.

Step 5

Set the foreground color to #FF7200 and the background color to #F5CB08.

Step 6

Now go to Filter -> Render -> Clouds. Click yes when asked to resterize the layer. Change the Opacity back to 100%. The result should look something like this:

Step 7

Change the blending mode of Shape 1 to linear burn and then rename the layer “sky”.

Step 8

Open the image snail1.jpg and make a path of it using the Pen Tool than Ctrl + Enter to select it.

Step 9

You can see that the snail has a different light than the road, and we need to adjust it. We do that by using the Match color option. Set the luminance and color intensity to 100 and fate to 23. On the source select highway.jpg (make sure it is open), and on the layer dropdown select merged.

Step 10

Now copy the selection of the snail by pressing Ctrl+C and paste it in the document we are working with the highway. Because the selection is very large we need to resize it. Do that by pressing Ctrl+T (Free transform tool). Make sure you press the Shift key when resizing to keep the proportions.

Resize it to a size similar to the one in the picture below and arrange it in the same way.

Step 11

You can see that the snail looks not that good than should be. Adjust this by using the Auto levels option (Image -> Adjustments -> Auto levels) or play with the levels yourself.

Step 12

Now go to Image -> Adjustments -> Brightness/Contrast and set the brightness to -50%.

Step 13

Now we need to put some shadow to the snail. Rename layer 1 to snail1. Select layer transparency and duplicate layer. Press D on the keyboard to switch to default colors then fill the selection with black. Move this layer below snail1.

Press Ctrl+T for Free Transform tool then right click the snail and select distort. Now play with distort option until you get something like this:

Rename the layer to shadow.

Step 14

Make sure you still have selected the layer transparency and go to Filter -> Blur -> Gaussian Blur and use my settings.

Step 15

Now lets create a brake tail. Using the pen tool create a shape similar to the one in the image below.

Than change the Blending mode to Overlay, then apply the Gaussian Blur to a 7.3 px.

Step 16

Next we need to create some smoke rising up from the brake. First make a selection using polygonal lasso tool along the brake tail similar to the one in the image below.

Step 17

Then fill the selection with ABA4A4. Use the dodge tool around the corners with the brush size set to 50, and Range highlights.

After that switch to burn tool with the same brush size and range set to shadows and you should get something like this:

Step 18

Then go to Filter -> Distort -> Wave, and Edit -> Fade wave to 50%.

Step 19

Repeat this (Wave, fade wave step) until you are satisfied with the result. Then use the free transform tool if necessary and adjust the smoke along the brake tail. Duplicate the layer.

Step 20

To add the smoke behind the snail, just copy the smoke along the tail, fill it with black and play with free transform tool until you get something like the image below.

Step 21

Now it’s time to make the Slime trail left by the snail. Using the pen tool draw a shape similar to the one in the image below.

Step 22

Press D to set the default colors. Then apply the clouds filter on the selection.

Step 23

After that apply the chrome filter. Go to Filter -> Sketch -> Chrome.

Step 24

Set the blending mode to Hard Light, and the Opacity to 60%.

Step 25

Use the free transform tool to arrange the slime in a realistic way. Load the selection and using the blur tool, blur a little bit around the edges to blend the slime into the road.

Select the snail and blur a little bit on its lower part just above the slime.

Step 26

Now it’s time to add the other racers to the scene.

Open Snail 2. Select the snail with the Pen Tool.

Step 27

Match the color with the other document, just as you did with the first snail.

Paste the snail into the document and resize it using free transform tool. Place the third snail similar to the image below.

Also duplicate the slime layer and move it behind each snail. Then, using free transform tool distort the slime and shape it as you like. Last you need to add shadows, blur and light to the slime to make it look different and more realistic. Do this using the burn, dodge and brush tools.

Step 28

Next open sign.jpg.

Make a selection of the sign, and use match color with the document you are working with. Copy paste the selection into the document, resize it and place it on the middle left part of the image, just above the smaller column, then use the free transform.

Rename the layer to sign, move it under the layer sky and apply a 0.3 Gaussian Blur on it. The result should be similar to the one in the image below.

Step 29

Now all we need to do is add the finish line.

I have created an image using adobe illustrator and called finish line.jpg. This image could also be easily created simply in Photoshop just by using some shapes and guidelines.

What you need to do with this image is to import it into the document, transform it and place it as I did in the image below.

Step 30

Set the Blending Mode of the Finish line to Soft Light and you are done.

Final

In the end add your favorite light, colors or vintage effects and you are finished.

In this tutorial I will show you guys how to make a very interesting and sleek Phone Advertising wallpaper.

Step 1

Start with a new document. My document is 741×1000 and I used this color: #000412.

Step 2

Create a new layer and name it Dust. Now select your brush and set it to 0% Hardness and 250 size. Also you need to use this color: #0b4690.

Now that you have everything set just paint with the brush as I did or maybe some other way you like. Than set the Dust layer to Screen.

Step 3

Set you foreground to White and background to Black. Make a new layer and call it Clouds and go to Filter – Render – Clouds. Then set the Opacity of the Clouds layer to 28% and set it to Multiply.

Step 4

Now you need to bring your product in this document. The phone I will use I got it from http://www.sxc.hu/photo/855196. And then cut the phone out.

Step 5

Next you need to resize your phone to the desired size and also rotate it a bit. Name the layer Pocket PC. Also I will need you to select the mobile pen and copy it into a separate layer and name it Pen.

Step 6

I will deactivate the Pen layer for now, as I will get back to it later. First use these settings for the Pocket PC layer Blending options:

Step 7

Ctrl + Click on the Pocket PC layer to make a selection. Create a new blank layer and fill the selection with black. Then set the layer to Soft Light.

Step 8

Create a new folder and name it Screen. Make a shape as I did, name it Screen and fill it with a gradient from up to down using the colors black and #001f4e.

Step 9

Double click on the layer to enter the Blending Options and use these settings:

Color used is Black.

Step 10

Make a new layer over the one is step 8. Use the brush set to 0$ Hardness and size 100. Also use this color: #47c0ef.

Using the brush draw as I did on the new layer you just created.

Step 11

Next Ctrl + Click on the Screen Layer in Step 8 to make a selection. Make sure to click on the mask not on the layer thumbnail. Than click on the Add vector mask button to mask away the part of this dust you don’t want. Then set the layer to screen.

Step 12

Make another layer and the same as with the one on step 10 and 11 using the same color draw as I did. (I have hidden the other one so you can see how I draw over this layer.)

Step 13

As you did with the layer in step 11 mask this one using the same steps.

Now set it to Opacity 40% and Screen.

Then I will activate the other layer back.

Step 14

Make a shape as I did using the Pen tool set to Shape layers. Than set the shape to Opacity 7% and Overlay. And last simply mask it to show only on the screen. Use the same technique in step 11 to mask it.

Step 15

In this step you will duplicate 2 times the shape you just made and move them a little so that you get something similar to what I have done.

Step 16

Make a new folder and name it Round Ring. In this folder make a selection as I did and fill it with black.

Step 17

While you still have the selection go to Filter – Render – Difference Clouds. Than press Ctrl + F until you get the look you want.

Step 18

Now go to Distort – Twirl and use my settings. Also keep in mind that when you do this you have to have the clouds layer selected.

Step 19

Now you can finally deselect the layer and chose the Elliptical Marquee Tool and make a selection as I did. Than go to Select – Modify – Feather and use a 20% Radius. Next you need to inverse the selection by clicking Ctrl + Shift + I. And last step is to simply erase the part of the twirl that is not needed.

Step 20

Same as in step 19 make a selection in the center of the ring this time. Again go to Select – Modify – Feather and use the same 20% Radius. Than erase using the Eraser Tool.

Step 21

Now go to Image – Adjustments – Brightness and Contrast.

Step 22

Next go to Filter – Noise – Add noise. Use a 10% Radius.

Step 23

Now go to Image – Adjustments – Levels. Use my settings.

Step 24

Next go to Image – Adjustments – Hue/Saturation and again use my settings:

Step 25

Now you need to transform the ring.

Step 26

Next you need to set the ring to Linear Dodge (Add) and erase the part that is over the phone.

Step 27

Duplicate the layer.

Step 28

Activate the Pen layer again and also move in into a Folder that you will name Stick. Also make a new layer, Ctrl + Click on the Pen to make a selection and fill that selection with black. Then set it to Soft Light.

Step 29

Create a new layer below the Stick folder. Again make sure you have the foreground set to white and background set to black. Go to Filter – Render – Clouds. Make a selection like I did then go to Filter – Distort – ZigZag. Use 100 for the Amount and 5 for the Ridges. For the Style use Pond Ripples.

Step 30

Now go to Edit – Transform – Distort. Distort the layer until you get the right perspective. After that, change the Blend Mode to Soft Light. Again, as we are using Render Clouds, the results may vary. So, you might need to erase some parts to make it more realistic.

Step 31

Go down to the Clouds layer. Above that make a new layer and name it light. using the brush tool draw with white as I did. Then set it to 51% Opacity and Soft Light.

Step 32

Make a new folder above that and name it Dots. In this folder we will brush some nice dots that will go in the back of the Phone.

Use these settings for the brush.

Step 33

Your brush color needs to be black.

Make a new layer and start brushing something close to what I have done. Than set it to Opacity 30% and Soft Light.

Step 34

Ctrl + Click on the layer to make a selection. Then create a new layer and with the Lasso Tool Right Click on the screen and select Stroke. Use my settings. Then set the layer to Opacity 40%.

Step 35

Repeat step 34 but this time make white dots.

Step 36

Making the movement is simple. Make a new folder above the Dots folder and name it Movement.

You need to copy the phone and merge all the layers you copied into a single layer. Also move the copied Phone in the Movement folder.

Step 37

Next you need to transform the copied phone.

Move it into position and rotate it.

Step 38

Now go to Filter – Blur – Motion Blur. Use my settings:

Step 39

Copy the phone again 5 more times. Repeat step 37 and if needed step 38 to add more blur. Also Change the opacity of all the layers so that is fades out.

Step 40

Make a new layer and place this layer on top of all the layers. Name the layer Sparkles. Now go to Brush settings and use these settings:

Step 41

In the Sparkles layer draw as I did. Use a white color. You might not have the same results. I use a tablet and this gives me better handling. Also when you finish drawing use my settings for the Blending Options.

Step 42

Last thing we will do is to make a new folder that will sit on top of all the other layers. In this folder make a new layer.

Make a selection and using the Gradient Tool just click and drag from left to right. Make sure you use a white color for this.

Step 43

Using your Eraser Tool simply erase the gradient so it fades out perfectly.

Next set the layer to Soft Light and rotate, scale and move it into position.

Step 44

Next use the Line Tool set to 1px. Click and drag on the shape you just made like so:

Step 45

Use the Eraser Tool and erase sides so it will fade out nicely. And last set the line to Soft Light and Opacity 50%.

Step 46

Now that you know how to make this you will need to make a lot more. Before you start you can take a break and come back when you are ready.

All you need to do is to duplicate this shape as many times you want and change it’s settings for each different shape or redo each of them from scratch.

Final

Before you are finished with the design you need to work more on the details and add some more things to it.

Use what you have learned here and create your own designs, as there are so many more ways to achieve what I have taught you in this tutorial.

Have fun. ]]> http://www.tutzor.com/index.php/2008/06/sleek-phone-advertisement-flyer/feed/ 81 http://www.tutzor.com/index.php/2008/05/coloring-and-old-black-and-white-photograph/ http://www.tutzor.com/index.php/2008/05/coloring-and-old-black-and-white-photograph/#comments Thu, 22 May 2008 14:47:18 +0000 Constantin Potorac http://www.tutzor.com/?p=44

Here is a tutorial that will show you how to add some colors to your old photographs. This is a very useful technique that I actually used for a client of mine.

Step 1

First you need your image. Here is mine: http://www.sxc.hu/photo/254796

Step 2

You start by organizing and thinking what colors to use. Before you start coloring you need to set your brush to a 0% Hardness.

Now I will start with the background. Select the color (I used #5b4219) and create a new layer on top of the original photo layer. Name it Background Color and fill the layer with the color you selected.

Step 3

Now set the Background Color Layer Mode to Color

Step 4

Now I will first start with the little girl. And that is her hair. Select your color, make a new layer and name it Girl Hair. Now all you need to do is to brush over her hair.

Don’t worry if you get the color over her face because you will come back to that later.

Step 5

Set the hair layer to Color.

Step 6

Now work on her face. But before that, you need to mask the Background Color layer that is over the kids.

Step 7

Do the same as before. Make a new layer and name it Girl Face.

Select you color and start painting.

Step 8

Now set the layer to Color.

Step 9

Make a new layer and name it Girl Eyes1. This will be the layer where we will show how to make the white part of the eye.

Using the Pen Tool make a path and cover the white part of the eyes.

Step 10

Now press Ctrl + Enter (Command + Return on a Mac) to make a selection. Go to Select – Modify – Feather. Select a radius of 2 and press Enter. Then fill the selection with white.

Step 11

Set the layer to Color.

Step 12

Next make another new layer and name it Girl Eyes2. Select a color for the eyes and than paint over her eyes.

Step 13

Set the layer to Color.

Step 14

Lower the Opacity to 40% or so.

Step 15

Make a new layer and name it Girl Lips. Select a red color and paint over the girl lips.

Step 16

Set it to Soft Light this time.

Step 17

Next make her hand and the boy’s hand also. Use the same color as you used for the face. Make a new layer and name it Hands. Also when you are done set it to Color.

Step 18

Next are the sweater and the buttons. Actually only the sweater will be changed because the buttons will remain as they are. Make a new layer and name it Girl Sweater. Select your color and start painting.

Step 19

Set the layer to Color and maybe nudge the Opacity a little.

Step 20

Next is the boy. Same as we did with the girl, start with the hair.

Step 21

Make a new layer and name it Boy Face. Select the same color as you used for the girl face or maybe something close to that and start painting.

Step 22

Now make the eyes just as you made the girl’s eyes but this time use a blue for the color of the eyes.

Step 23

Make a new layer and name it Boy Lips. Same as you have done with the girl. Again you can use a different color.

Step 24

And the finally make the Boy Sweater layer. Chose the color you want and paint it. Leave the skirt white. This time set it to Soft Light.

Final

Last add some Levels to the image and we are done.

How did you colorize your own photos?

Here is a new and improved look of the Tutzor website. Also you should learn a lot from this tutorial.

Step 1

I will start off with a new document 1024×1906. And fill the document with #333225.

Step 2

Next we will use the Rectangle tool and make as shape as I did and also use a light color. I used #eee9d9.

Step 3

Go to the bottom of the page and make another shape as in step 2 but this time use a lighter color than the first one. I used #f1eee1. Also make sure this layer will be lower than the one is step 2. (this small shape will be behind the big shape).

Step 4

For the shape we just created in step 3 use these settings for the blending mode.

Step 5

Make a new folder and make sure he is over the other layers. Name it Lower Side. What we will make here are: add some text and make some details.

Step 6

For the details you need to zoom in to the place where the big shape and the small shape intersect. Here we will make 2 strips of 1 pixel. To do this use the Line Tool and make sure it is set to 1 px. Use these colors: #a6a38b and #ffffff and make something like I did. Also I will add the copyright text.

Step 7

Now that we are done with that side we need to make the menu of this website. I like it simple and clean. Also I will make it on top. So let us move to the top of the website. This is what we will do:

Step 8

To make this you need to first make a new document and name it category. Here will be displayed the category of each tutorial. This folder will need to be on top of all the other layers. Now make a new shape in that folder and use this color #9bb800.

Step 9

Next make a new layer over the green shape. Here we will make a gradient to make the category bar a little better.

Ctrl + Click on the green shape thumbnail to make a selection and make sure you are on the new empty layer now.

Using the Gradient Tool with the Black color as the foreground to transparent and the Radial Gradient, click and drag over the shape. Make something similar to what I did.

Step 10

Now set the gradient to Opacity 50% and to Multiply.

Step 11

Next are 2 strips just as we did with the lower side. This time we will add 2 similar white strips as seen on the image below. After that change the above one to Opacity 40% and the other to 70%.

Step 12

Add the categories and we are done with this side. Make a new folder into the Category folder and make sure it is over the other layers in this folder. Here you will add your text

Step 13

Now I will start to make the shapes where the tutorials will be listed. As I said I like it to bee simple and that is why we will try and make this look as simple as possible and also look good.

Start with a new folder that will be over the other layers. Name it Tutorial.

Using the Rounded Rectangle Tool with a radius of 5px make a shape like mine. Color used: #f5f5f5.

Step 14

Now use these settings for the blending options.

Step 15

Make a new shape inside the shape on step 13. This time, use this color: #f2f2e8. Here will go all the content.

Step 16

First add your tutorial thumbnail. I suggest you use the guidelines from now on.

Step 17

Next I will add some introduction text, comments, tutorial title and other useful text.

Step 18

I will insert the tutorial author into a new shape. This step will show you how to make it.

First of all use the guidelines and establish the right place for it. Now using the Rounded Rectangle Tool draw a shape as I did and fill it in with #434130.

Step 19

Use these settings for the blending options:

Step 20

Make 2 strips as I did, one black and one white. Make the strips 50% Opacity and add your text.

Step 21

Now I want a nice separator between the tutorial name and the rest of the text.

Make a new layer and make a selection. Use the gradient tool with black color and Linear Gradient and make something similar to mine. Also in a new different layer make a white gradient just like the black one.

Get those 2 gradients close together. Leave just a little gap between them. Next make a white thin strip and place it as I did.

Merge the strip and the gradient layer. Now with the eraser tool set to 0 Hardness and make it real big, just erase the sides of the shape to make it blend in with the background.

And for the final step, to make it blend in better, just bring the Opacity lower.

<br>

Step 22

Duplicate the Tutorial folder and position them on the page. Make sure they are all aligned and organized.

Step 23

Next is our right side. Here is the place where we will put a lot of links, news and important stuff.

Start with a new folder. This folder will go behind the Tutorial folders.

Name this one Right side and start with a new shape. Use the Rounded Elliptical Tool with 5px and this color: #bebeaf.

Step 24

For the Blending options use these settings:

Step 25

Using the same shape as we did for the author shape in Step 18 use that shape here to make something similar to what I did. These will stand for the RSS and Email Newsletter.

Step 26

Next I will add the text and I will also use the separator you just created in Step 21.

Final

Finalize this layout by adding the principal menu, the previews and next buttons and also the logo of the website you are creating.

As you can tell, I haven’t applied all the graphics to the actual web site, but do let me know what you guys think about this new layout.

Take care.