Free Adobe Photoshop website templates by Colorifer.com. Adobe Photoshop tutorial: Creating eye-catching hi-tech collage
Colorifer.com - free Adobe Photoshop website templates / web page templates. Logotype
Contact UsSite Map

Adobe Photoshop TutorialsCreating eye-catching hi-tech collages

This lesson shows the process of making a hi-tech collage for a car website.
Below you will find a step by step description of building a hi-tech collage, suitable for websites of any theme.
This lesson is aimed at designers with basic Adobe Photoshop skills.
Hi-tech collage. Step Final. This lesson shows the process of making a hi-tech collage for an car website. Below you will find a step by step description of building a hi-tech collage, suitable for websites of any theme. This lesson is aimed at designers with basic Adobe Photoshop skills.

Create a new document, 800x200 pixels in size.
Apply black and white gradient to the new layer, indicating the line of the horizon.
Set transparency to 60%.
For the background you can use any very blurred image, color or monochrome.
Hi-tech collage. Step 1. Create a new document, 800x200 pixels in size. Apply black and white gradient to the layer, indicating the line of the horizon. Set transparency to 60%. For the background you can use any very blurred image, color or monochrome.

Create a new layer and fill it with a black- to- transparent gradient, from right to left.
Hi-tech collage. Step 2. Create a new layer and fill it with a black- to- transparent gradient, from right to left.

Create a new layer and fill it with a black- to- transparent gradient, from left to right.
Hi-tech collage. Step 3. Create a new layer and fill it with a black- to- transparent gradient, from left to right.

Select a suitable picture of a car or any other object fitting your theme.
Hi-tech collage. Step 4. Select a suitable picture of a car or any other object fitting your theme.

Paste the picture of the auto in the document, adjust its size.
Hi-tech collage. Step 5. Paste the picture of the auto in the document, adjust its size.

Apply a mask on this layer.
Use a brush tool to conceal the borders between the picture and the background.
This one is the shadow layer.
Hi-tech collage. Step 6. Apply a mask on this layer. Use a brush tool to conceal the borders between the picture and the background. This one is the shadow layer.

On the initial picture of the car, separate the object from the background with the help of Polygonal Lasso Tool.
Hi-tech collage. Step 7. On the initial picture of the auto, separate the object from the background with the help of Polygonal Lasso Tool.

Place the cut-out automobile in the document, over the shadow layer, then unite the images.
Hi-tech collage. Step 8. Place the cut-out automobile in the document, over the shadow layer, then unite the images.

Create a white 50x50 pixels large-celled grid under the layer containing the cars, with the help of Pencil Tool, 1px in diameter.
Hi-tech collage. Step 9. Create a white 50x50 pixels large-celled grid under the layer containing the cars, with the help of Pencil Tool, 1px in diameter.

Apply a mask to the layer with the grid.
Conceal the parts of the grid with the help of a large soft brush, if necessary.
Hi-tech collage. Step 10. Apply a mask to the layer with the grid. Conceal the parts of the grid with the help of a large soft brush, if necessary.

Likewise, create a smaller 10x10 pixels grid.
Apply a mask to the layer, conceal the parts of the grid with a brush.
Set the blending mode for the layer “Lighter color” and interior capacity 10%.
Hi-tech collage. Step 11. Likewise, create a smaller 10x10 pixels grid. Apply a mask to the layer, conceal the parts of the grid with a brush. Set the blending mode for the layer Lighter color and interior capacity 10%.

On the crossings of the grid lines, draw blurred 3x3 pixels dots.
Apply a mask to the layer and work a bit with the brush tool.
Hi-tech collage. Step 12. On the crossings of the grid lines, draw blurred 3x3 pixels dots. Apply a mask to the layer and work a bit with the brush tool.

Take a picture of a lightning.
Hi-tech collage. Step 13. Take a picture of a lightning.

Convert the picture to grayscale.
Create a clear contrast of the image with the help of Brightness/Contrast.
Separate the lightning from the background with the help of Select > Color Range.
Drag it under the layer with cars, rotate it and adjust the size.
Set the blending mode «Vivid Light» and interior capacity 30% for this layer.
Hi-tech collage. Step 14. Convert the picture to grayscale. Create a clear contrast of the image with the help of Brightness/Contrast. Separate the lightning from the background with the help of Select > Color Range. Drag it under the layer with automobiles, rotate it and adjust the size. Set the blending mode Vivid Light and interior capacity 30% for this layer.

To create the effect of glowing, copy the lightning background and blur it.
Repeat the operation.
Set a higher degree of blurring.
For these layers, set a «Normal» blending mode and Fill=100%.
Experiment with the blending mode and transparency to achieve greater effect.
Hi-tech collage. Step 15. To create the effect of glowing, copy the lightning background and blur it. Repeat the operation. Set a higher degree of blurring. For these layers, set a Normal blending mode and Fill=100%. Experiment with the blending mode and transparency to achieve greater effect.

Take a picture of a car speedometer.
Hi-tech collage. Step 16. Take a picture of a car speedometer.

Cut light-colored pixels and place them in the document (the way you did with the lightning).
Hi-tech collage. Step 17. Cut light-colored pixels and place them in the document (the way you did with the lightning).

Highlight parts of the car, «switch on» the headlights.
Hi-tech collage. Step 18. Highlight parts of the car, switch on the headlights.

Add the title of the site in large letters, select the font, add smaller writings and a dividing line.
Your hi-tech collage is ready!
Hi-tech collage. Step 19. Add the title of the site in large letters, select the font, add smaller writings and a dividing line.

Here’s how a site with your collage can look:
Hi-tech collage. Step 20. Your hi-tech collage is ready!

Download .psd collage
Download free Website Template N°014

2007-2014 © Copyright colorifer.com. All Rights Reserved.
Free Adobe Photoshop templates.
Terms of Use