Create a Racing Website

We are going to create a racing website using Photoshop and a little imagination, along with a few stock images. In this tutorial we are going to learn to create an easy glossy type, quick color correction, several visual elements and the structure of a website.

Remember, being organized is really important to not going crazy with all the layers. I’ll mention creating folders most of the time, but if you feel like something should be in a folder, put it there. Also, label your layers also, so you know what is what. It will give you less of a headache in the long run.

What we are going to need:

Racing image
Racecar image
Tire image
Carbon Fiber Pattern

Step 1

Open up a new 1200x1200px document in Photoshop.

Now go to View and make sure that Snap is checked. Click and drag the left ruler so that a guide comes out and bring it to the middle of the document. It should snap in place at the middle.

Step 2

Create a new layer (Ctrl+Shift+N) and click on the Square Marquee Tool (M). In the options bar, change Normal to Fixed Size. Change the width to 960px and the height to 100px. Click onto the document and fill the box that comes up with black.

Bring up 2 guides, and move one to the left side of the box and the other one to the right side. The guides should snap in place on the edges of the box. This will be the width of our website.

Step 3

Our left main content box is going to be 640px, so repeat step 2 but change the width to 640px.

Do this for our sidebar also, which will be 300px wide. Put the right side of the box on the right guide. This will give us a 20px gap in between the content box and the sidebar.

Click and drag those black box layers to the trashcan at the bottom of the layers palette.

Step 4

Create a new folder by going to Layer>New>Layer Set and call it “Header”. Inside the folder, create a new layer (Ctrl+Shift+N) called “Top Header”.

Now create a new box with a fixed size of 1200x65px, move it to the top of our document and fill it in with #333333.

We are going to add an Inner Shadow to our box so click on the Layer Styles icon and click on Inner Shadow.

Now that we have our inner shadow, you may notice it goes around the sides (which we wouldn’t want if we were to code it). Using Ctrl+T we are going to stretch the box. Hold down Alt and click and drag one of the side anchors out.

Step 5

The next thing we are going to do is create another fixed size box, this time it will be 1200x5px. Fill it with black. Move the box to the top of the document. Create another box the same size and move it so the bottom is lined up with the bottom of the gray box.

Step 6

We are going to add some layer styles to these boxes, so go to click on the same icon we went to for the inner shadow, but this time click on Gradient Overlay. This should give those 1200x5px boxes a 3D look.

Step 7

Lets add our name to the headline. I am using ITC Franklin Gothic Heavy Italic for my font. Change the color to #FFCC00 and add a Drop Shadow, Bevel and Emboss, and a Gradient Overlay from the Layer Styles. This will give our text a shiny metallic look.

Make sure the text is on the left guide.

Step 8

For the navigation part of our header, make a new folder called “Nav” and write out “HOME ABOUT HISTORY SCHEDULE SPONSORS”. Make “HOME” the same yellow as the name on the left (this will be our active button), and the rest will be #CCCCCC. This text should have the same layer styles as the name on the left (Step 7), and should have a font size of 16pt.

Make sure “SPONSORS” lines up on the right guide.

Step 9

We are going to make lines in between each button, so first create a new layer. Using the fixed size, create a box 1px wide and 30px tall and fill it with black. Move the marquee box over one pixel to the right and fill with #666666. These two boxes should be on the same layer. Make sure the lines line up so the center is at about the center of the text.

Step 10

Click on the Add vector mask icon at the bottom of the layers palette. Click on the Brush Tool (B) and get a 20px brush with 0% hardness. Now, put the middle of the circle over the top end of the black/gray line we made and click, do this with the bottom of the line also. This should make the line fade out.

Duplicate the line with Ctrl+J so there is one in between each button.

Step 11

Now, open up the car image. We are going to adjust the red parts of the car so they are yellow and go with the website better. Go to Image>Adjustment>Replace Color and click on the red part of the car. Change the Hue to +40 and the Saturation to +30. If all of the yellow spots on the car don’t change to, hold down Shift and click on those spots.

Step 12

Now use the pen tool to cut out the car and bring it into our website document. If you don’t know how to use the pen tool, psd tuts + has a nice guide to it.

Step 13

We are going to adjust the size and angle of the car. So change the size percentage to 34% and the angle to -58 degrees. Create a new folder above the top header layers called “Car” and put the car layer in it.

Step 14

Duplicate the car layer with Ctrl+J. Ctrl and click on the layer to bring up a marquee around it. Fill the marquee shape with black and move the black layer behind the car layer. Now we are going to blur the black layer to give the car a shadow. So, go into Filter>Blur>Gaussian Blur and change the radius to 6px.

Now move the shadow layer down 5 times.

Step 15

Now we need to mask out some of the unnatural shadows like the ones around the spoiler.

Click on the mask icon (second icon on the bottom of the layers palette). Now using a round black brush with 0% hardness, with a size somewhere around 70px start painting away the shadows we don’t want.

Step 16

Move the car up so it overlaps the header at the very top and goes over the guide on the left, so you have something like what is shown below. This will give our website a little bit of a different look.

Step 17

We are going to create a box behind the car that will go across the width of the website. Create a new layer in the “Header” folder called “Header Box” and move it to the bottom of the folder. Click on the square marquee tool and change the style to fixed size and the size to 960x250px. Fill the box with #333333. The box should touch the top header but not overlap it, and the bottom tire of the car should overlap the box.

Now we are going to add some layer styles to the box.

Click on the layer styles and go to Inner Glow. Change the color to black to give it a shadow around all of the edges.

Now go to Pattern Overlay. Select the carbon fiber pattern, and drop the opacity to 10%. This will give the background a subtle texture.

Next we are going to add a stroke around the box using #666666 for the stroke color.

The last layer style we are going to do is to add a Gradient Overlay.

All of these styles will give our gray box a little more interesting and finished off look to it.

Step 18

Now we want to work on the yellow caution bar that goes across our document. First create a new folder and call it “Caution Bar” and move it just above the “Header Box” layer.

Using the Square Marquee Tool (M) create a box with a fixed size of 20x50px and fill it with #FFCC00 (the same yellow as the text in the header).

Using the Transform Tool (Ctrl+T) Rotate the box 20 degrees.

Step 19

Duplicate the box with Ctrl+J and then, while holding down Shift, move the box to the right four spaces. (Holding down shift moves an object 10px instead of 1px)

Link the two layers together and use Ctrl+E to merge the layers.

Using the fixed size marquee square, create a 100x30px box and put it in the middle of the two boxes, so none of the corners are inside the box. Get the inverse selection with Ctrl+Shift+I and delete. This should leave just the area that was inside the box left, with a flat edge on the top and bottom.

Step 20

Duplicate the two boxes with Ctrl+J, then hold down shift and move over 8 spaces. This will evenly space the squares apart. Continue duplicating and moving the squares 8 spaces until the boxes go across the document.

Step 21

Using the Single Row Marquee Tool (M) we, we are going to start creating the top and bottom border on the caution bar.

We will create the top border first. The first line just above the yellow boxes will be black (#000000). Move the marquee up one pixel and the fill with #333333. Move the marquee up one pixel once again and fill it with #666666.

Duplicate the top border with Ctrl+J and bring it down just below the yellow boxes.

Step 22

Create a new layer above the yellow boxes and using the fixed size Square Marquee (M) make a 1200x30px box, and fill with black. This will cover the entire caution bar. Now drop the fill down to 0%. This should make the box disappear. The reason for this is that when we add a layer style, that will show up but not the actual box.

So lets go into our Layer Styles and add an Inner Shadow. Change the shadow color to #191400 in the settings.

Step 23

We want to give the caution bar a shiny look, so first change the Square Marquee (M) to 1200x15px (half of the box). Move the box so it is at the bottom of the yellow boxes and fill with black. Drop the opacity to 30%.

Make a box the same size at the top of the yellow boxes and fill with white. Drop the opacity down to 20%.

Step 24

Move the caution bar just below the box at the top of the document.

Now we want to get rid of the stroke on the top and bottom of the box so looks like it is sitting behind the top header and the caution bar.

Select the box layer and use Ctrl+T to use the Transform tool. Click and drag the bottom anchor behind the top border of the caution bar and move the top anchor behind the top header.

Step 25

Now we are going to create an image box to the right of the car. Lets start out by creating a box 500x210px and filled with #333333. The box should be 10px from the right side of the box and 20px from the top and bottom of the box.

We are going to add a Bevel and Emboss.

Step 26

We want to make a spot for our photo and we want to make sure it is center. So to make sure it is center click on the box layer and bring up the transform tool with Ctrl+ T. Drag a horizontal and a vertical guide from the rulers and put the in the middle of the box, the intersecting point being our center point.

Create a new box 400x180px and fill it with black. Using the Transform tool, move the box so that the middle lines up with the guides we just made. For now this will be a placeholder for our photo.

Step 27

Create a new box 1x180px and line it up with the top and bottom of the photo placeholder and five spaces from the left. Fill the box with black. Move the marquee over one space and fill with #666666. Move over five spaces and repeat until you have six of the light/dark lines.

Drop the opacity down to 30%. Duplicate the layer (Ctrl+J) and using the Transform Tool (Ctrl+T), rotate the lines 180 degrees and move them over to the other side of the box, five spaces from the right of the photo placeholder.

Step 28

Lets add a few more Layer Styles to our box to give the box more of a textured metal look.

First, we’ll add an Inner Shadow

…then Satin

…and finally a Gradient Overlay.

Step 29

Open up the racing image in Photoshop.

We are going to do some color corrections, so first open up the levels (Ctrl+L) to brighten up the image.

Then we will open up the Hue/Saturation (Ctrl+U) to brighten the colors.

Step 30

We are going to change the color of the grass from brown back to green. Go to Image>Adjustments>Replace Color. Click on the brown grass and adjust the settings something like what I have.

Step 31

Take the racing image and drag it into our document. Ctrl and then click on the photo placeholder and click on the mask icon at the bottom of the layers palette. This will mask out the image except for where the placeholder is. Click on the eye icon next to the placeholder layer to make it disappear.

Right now you should have an overly size image. To shrink it we want to click on the chain link in between the layer and the mask to make it disappear. Click on the racing layer and now we can use the Transform tool to adjust the size of the image.

Step 32

Go into the Layer Styles and add a #666666 1px stroke to the photo.

I also added a box with a 70% opacity and some text with the same style as the text in the top header.

Step 33

We are going to add in our sidebar. Click on one of the border layers on the top header and duplicate it with Ctrl+J and put it in a new folder called “Sidebar”.

Move the border down so it is just below the caution bar. Hold down shift and move the border down two spaces. This will make it so it is 20px below the caution bar.

Create a marquee box around the border within the sidebar guides. Get the inverse selection with Ctrl+Shift+I and delete. This should leave just the part of the border within the sidebar area.

Step 34

Duplicate the border with Ctrl+J and while holding down shift, move it down two spaces.

Duplicate the gray box from the header and move it into our “sidebar” folder. Resize the box with Ctrl+T to fit in between the two borders as well as the guides.

Open up the layer styles and go to Pattern Overlay and use the carbon fiber pattern with a 10% opacity.

Step 35

Duplicate the text from the navigation bar with Ctrl+J and move it into our sidebar folder. Delete all the text except for “home” and move it into the middle of the sidebar box we just made. Hold down shift and move the text to the right. Change “home” to “schedule”.

Step 36

Duplicate the sidebar folder by right-clicking on it and click on Duplicate Layer Set. Change the folder name to “Content”. This will be the folder for our posts on the left side of the website.

Using Ctrl+T stretch the content header layers out, except the text, so it fits in the content guides. Change “schedule” to “news”.

Step 37

Here is the text for the schedule in the sidebar:

July 26th, 12:20 p.m. Week 5 Race starts

August 3rd, 12:20 p.m. Week 6 Race starts

August 8th, 8:15 p.m. Week 7 Race starts

August 16th, 12:20 p.m. Week 8 Race starts

August 23rd, 12:20 p.m. Week 8 Race starts

August 30th, 12:20 p.m. Week 8 Race starts

September 6th, 12:20 p.m. Week 8 Race starts

The font I am using is ITC Franklin Gothic Medium at 12pt.

Use the #FF00CC for the dates and white for the right column.

Step 38

Duplicate the “schedule head” folder and call it “sponsor head”, and change “schedule” to “sponsors”

You can put a sponsor at the bottom, I’m just going to come up with something quickly using this tire photo.

Step 39

We are going to start adding in our posts now. Duplicate the “news” header and put it in a new folder called “Post 1”

Duplicate the racing image and put it in the “Post 1” folder also. Click on the mask and fill the entire layer with white, then create a 200x200px box with the Square Marquee tool (M), get the inverse selection with Ctrl+Shift+I and delete. This should leave just a 200x200px box with the racing image inside.

Step 40

Take the “news” header layers and duplicate them. Take the news text and put it in the trash. This is the start of our post box. Move the top border so it is touching the bottom of the bottom border. Now hold down shift and move the box down one space. Take the square image we just made and move it so it is resting on the bottom of the top border. Then hold down shift and move it down two spaces and in two spaces from the left guide.

Move the bottom border to the bottom of the photo, then hold down Shift and move it down two spaces. This will make it so the photo is 20px away from the top, bottom and right side

Now using Ctrl+T, stretch the gray box so it lines up with the top and bottom borders. Move the Pattern Overlay to the trash.

Step 41

Now we are going to add in some preview text:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Continue…

The continue will be the #FFCC00 yellow and aligned to the right. The font is ITC Franklin Gothic Book at 12 pt.

Make the text box go from the right edge of the photo to the right edge of the post box. Now hold down shift and move the box to the right four spaces. Double-click on the text layer and move the right anchor to the right edge of the post box. Click ok and while holding shift move the text box to the left twice. This will give a 20px border between the photo and the right edge of the post box.

Move a guide to the left side of the text.

We are going to add a headline to this also. “This Week’s Race Preview”. The font will be ITC Franklin Gothic Heavy at 26pt, with the #FFCC00 for our color.

Step 42

Duplicate the post in folder twice and call them “post 2” and post 3” Move them down so there is 20px between each post.

The last post we want to fade out, so we can add in our footer. Click on the layer mask and using a black to 0% opacity gradient click and drag the gradient from the bottom up, so you get something like I have.

Step 43

Now for the footer, we are going to duplicate the caution bar and move it into a new folder called “footer” and move it below the last post and ad.

Duplicate the gray box behind the car and move it into the “footer” folder. Using Ctrl+T stretch it out past the ends of the document so the inner shadow doesn’t show on the edges.

Step 44

Lastly we are going to add our footer information:
Copyright 2010. All Rights Reserved.

Final Result

Get you networking credential with testking and obtain highest score in real exam using ccna and ccnp materials.

Only comments in English will be approved!

• Flash Templates

• Signazon.com

• Blogroll

  • Dzinepress
  • Hongkiat.com
  • Inspiration Feed
  • Little Box Of Ideas
  • PBrushes.com
  • PR5
  • Splashnology
  • Stock Images
  • The Design Work
  • Tutorial Lounge
  • TutorialKing.eu
  • WebDesignFan