Creating 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.




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.


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.


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.


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.


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.


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%.


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.


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.


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.


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.


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!


Here’s how a site with your collage can look:


 Download .psd collage
 Download free Website Template N°014