Make a Web Interface with Car Images

Preparations: We will need several nice angles of a sports car. I’m using Toyota FT-HS Hybrid Sports Car for this tutorial. Found these images through google with keyword "Sports Car". I think you can find even better ones if spend more time on it heh. All rights of these resources belong to their respective owners. Step 1 – Setting Up Background: Create a document of size 900×550 pixels. Set the foreground color to #6D6C67 and background to #FFFFFF. Fill the Background layer with a top-down gradient. Step 2a – Forming the Header: Open up the front view of the car and identify any parts of it that can be used to form your header. I’m using the bumper area that has the nice curves. Using Pen tool, create a path around the part you will need. Step 2b – Forming the Header: Go to Paths tab and press Ctrl+left click on the Work Path you created to load selection.. Back to the Layers tab and drag the selected area to your document above the Background layer. Go to Edit > Transform > Flip Vertical and position it near to the top right corner. Step 2c – Forming the Header: Now will need to extend the length of the top bar. Using the Rectangular Marquee tool, select a small portion of the top bar. Press Ctrl+C to copy then Ctrl+V to paste. You may need to repeat this several times. Align all the pasted bars with Move tool as shown in the diagram. Step 2d – Forming the Header: Now we have the top part of header ready. Let’s move on to the bottom. I found another nice curve at the side of the car. Using the Pen tool, I repeated the similar steps I did in Step 2a and 2b except for flipping vertical. Step 2e – Forming the Header: Place the cropped part under the top header to form something that looks like a frame. Use Soft Eraser tool to blend the two images if need to. Normally just fade the edge a little will do. Step 2f – Forming the Header: Similar to Step 2c, we need to extend the bottom part of the header. Using Rectangular Marquee tool, select 1 px of the lower bar. Go to Edit > Free Transform and stretch that selected area towards the left. Step 2g – Forming the Header: Now comes to the last part of the header. Use Pen tool to crop one of the wheels out. Remember to include some body parts as well because they will be useful for blending later on. Step 2h – Forming the Header: Drag the wheel into the document and position it as shown in the diagram. Use Soft Eraser tool to blend the edges again so all the three images looks as one piece. Step 3a – Forming the Sidebar: I cannot find a really suitable part on the images to form the sidebar. So I created a new layer, named WhiteBars, below the header and drew 3 vertical bars. The colors I used are (from the left) #BDC0C5, #FFFFFF and #DAD7E0. Step 3b – Forming the Sidebar: Create a new layer above WhiteBars. Name this new layer as BlackBars. I drew in a black bar with color #222222. This is to create a contrast where the white areas are exterior casing covering the black interior parts. Step 3c – Forming the Sidebar: Found another great part that can be included as part of the sidebar. Crop the desired area with Pen tool and drag it into the document. Step 3d – Forming the Sidebar: Go to Edit > Transform > Flip Horizontal. Use Free Transform tool to rotate the piece so it fits beside the BlackBars nicely. Step 4a – Forming Navigation Bar: We need to enclose an area for navigation buttons. Using Pen tool, crop out the handle as shown in the diagram. Step 4b – Forming Navigation Bar: Position the handle as shown on the left. Using Rectangular Marquee tool, select 1 px of the handle. Go to Edit > Free Transform and stretch that selected area towards the left. Step 4c – Forming Navigation Bar: Merge all the layers (except for Background) created. Duplicate this merged layer and go to Edit > Transform > Flip Horizontal. Adjust the two sides according to the width you wish to have for the interface. Create a new layer, named Base, below the interface. Fill in the empty areas with boxes of colors. The colors I used are (from top) #000000, #8E352C and #131315. Step 4d – Forming Navigation Bar: Create a new layer above Base and name it as Lines. Draw in the double lines to separate the buttons. The colors used are #BA594A and #5C0000. Step 4e – Forming Navigation Bar: Create a new layer above Lines and name it as Shadows. Using the Soft Brush tool with color #000000, paint in some shadows around the navigation buttons as shown in the diagram. Optional: Now add in some images and titles to complete the interface. I’m using the logo and screenshots of Midnight Club 3 in the example. This tutorial only show the basic methods used to create interface with car images. You can do the same with motor bikes or even trucks. Anyway thanks and hope you enjoyed this tutorial! Click here to view the final image.