Create a design for the automotive site in Photoshop

In this tutorial we will create a template design for a car website in dark colors.

Final result:


(click on image to enlarge)

Lesson resources:

Volume object
Space nebula
Space Nebula 2
Volume object 2
Background image

Step 1 – Creating a Document
Create a new document in Photoshop (Ctrl + N) with the following parameters:

Step 2 – Creating the Background
Open the background image provided at the beginning of the lesson. Tool Move (Move Tool) (V) drag it to the first document and discolor (Ctrl + Shift + U).

Insert a voluminous document in our document and position it in the middle of the canvas. Install Blend mode (Blending mode) on Overlap (Overlay).

Make a copy of the layer with the volume object (Ctrl + J) and the tool Free transform (Ctrl + T) change its size. Repeat this process a couple of times to get this result:

Create a fill layer Gradient (Gradient Fill). To do this, click on the icon of the black and white circle at the bottom of the layers palette.

Create one more layer fill gradient (Gradient Fill) with other parameters.

Step 3 – Navigation Bar
Tool Rounded Rectangle (Rounded Rectangle Tool) (U) with a Radius value of 10 pixels, create a shape. Double click on the layer with it to open the styles window. Apply style Gradient overlay:

Make a copy of the layer with a rectangle (Ctrl + J). Right-click on the copy in the layers palette and select Clear layer style (Clear Layer Styles). Place this copy above the original rectangle layer.

Set the fill color to white. Create a new layer (Ctrl + Shift + N) and tool Rectangular area (Rectangular Marquee Tool) (M) create a selection as shown below.

Fill the selection with white (Alt + Backspace).

Select the original layer with a rounded rectangle (hold down Ctrl and click on the layer thumbnail in the layers palette).

Invert the selection (Ctrl + Shift + I). On a layer with a white rectangle, click Delete.

Step 4 – Creating a Separator
Create a new document of small size, then create a new layer (Ctrl + Shift + N). Set the fill color to # 282828. Tool Rectangular area (Rectangular Marquee Tool) (M) create a selection and fill it with this color.

Create another layer and do the same, only in color # 181818.

Place the layer side by side and merge them (Ctrl + E).

Tool Free transform (Ctrl + T) squeeze the layer as shown below.

Tool Move (Move Tool) (V) drag the divider to our document.

Tool Horizontal text (Horizontal Type Tool) (T) write section names and make several copies of the separator. Everything needs to be arranged in this way:

Step 5 – Main Content Area
Create a rounded rectangle with a radius of 10 pixels in black. Apply style to it Gradient overlay:

Create another rectangle and apply the same style to it (you can just copy it).

Under the last rectangle, create another one to navigate through the pages. The radius of this rounded rectangle should be 5 pixels. Apply the Stroke style to it:

Step 6. Create a new layer above the layer with the bottom rectangle (Ctrl + Shift + N) and merge them (Ctrl + E). Add to this layer layer mask (click on the mask icon at the bottom of the layers palette). Choose a tool Gradient (Gradient Tool) (G) and configure it like this:

Select the layer with the bottom rectangle (hold Ctrl and click on the layer icon).

Fill Color – # 636262. Make a fill as shown below.

Step 7 – Creating a Sidebar
Create a rounded rectangle with a radius of 5 pixels on the right. Apply a 1-pixel stroke to it in color. # 636262.

Create a new layer (Ctrl + Shift + N). Tool Rectangular area (Rectangular Marquee Tool) (M) make a selection of the inside and fill it with color # 0F0F0F.

Create a new layer and make a selection of the layer with the inside. Choose a tool Gradient (Gradient Tool) (G), fill color – # 636262. Make a fill as shown below.

Create another rounded rectangle. Repeat for him all the same.

Step 8 – Separators of the content area
Create a large rounded rectangle as shown below.

Apply style Stroke:

Install Fill (Fill) layer at 0%.

Repeat the process to add two more delimiters.

Step 9 – Sidebar Buttons
Create a regular rectangle on the sidebar and apply the Stroke style to it:

Make many copies of this layer and position them as shown below using the tool. Move (Move Tool) (V).

Step 10 – Navigation Buttons
Create a new layer and set the fill color to #252525. Tool Rectangular area (Rectangular Marquee Tool) (M) create a selection as shown below. Then fill it (Alt + Backspace). Select the text tool and write “Previous Page”. I used the font “Cambria Math”.

Similarly create multiple buttons. You should get this result:

Use the text tool to add text to other areas.

Step 11 – Search Field
Create a rectangle with color #CECECE. Then write “search this site” in color #828282.

Choose a tool Arbitrary shape (Custom Shape Tool) (U) and select the shape of the magnifying glass.

Create an icon.

Step 12 – Active Section
Now we will create a small red triangle that will show the active section in the navigation bar. With the tool Arbitrary shape (Custom Shape Tool) (U) or Pen (Pen Tool) (P) Draw a triangle.

Apply style to it Shadow (Drop shadow):

Then style Color overlay:

Step 13 – Light Effects
Open the image of the nebula and paste it into our document.

Tool Free transform (Ctrl + T) change its size and discolor (Ctrl + Shift + U).

Install Blend mode (Blending mode) on Linear Dodge (Linear Dodge).

Repeat the process for the second image of the cosmic nebula.

Now add the second volume object and resize it.

Place the layer with it under the layers of the site elements.

Create a new layer (Ctrl + Shift + N) and select the tool Brush (Brush Tool) (B). Give it a size of 3 pixels and a stiffness of 100%. Fill color is white. Tool Pen (Pen Tool) (P) Draw a contour as shown below. Right click on the canvas and select Outline the contour (Stroke Path).

In the window that appears, select Brush (Brush).

Step 17 – Adding Light Effects to the Navigation Panel
Insert the second image of the nebula into our document, resize and erase unnecessary areas. Install Blend mode (Blending mode) on Linear Dodge (Linear Dodge).

If you want to enhance the effect, make a copy of the layer.

Final result:


(click on image to enlarge)

Like this post? Please share to your friends: