Header for Real Estate Website
Create a new file of 780*115 pixel. Fill the background color with #AFE0F0. Now, set the foreground color to #3FC0E0. Click on pen tool and draw the shape as shown in the following figures :
Press control+j to duplicate the layer. Move the layer 3-4 pixel upward. Use high feathered eraser tool to erase the lower part of image. Our goal is to have a curved line which is having colors only below the base of the line. Go to edit>transform>flip horizontal. Also change its layer mode from normal to multiply.
Duplicate and place this layer as shown in following figures.
Now, find a picture of buildings.
Press control+i to invert the colors.
Reduce the opacity to 24% and change the layer mode to Linear Light.
Now, select this autoshape.
Draw the shape at middle of the canvas.
Also add little drop shadow in it.
Add company logo at the left hand side of the header.
Now, below the mouse pointer, draw this shape with the help of Rounded Rectangle tool. Color is not important here because it will be changed after apply gradient overlay.
Now, apply gradient overlay as shown :
Create a new layer. Set the foreground color to white. Select high feathered brush and draw a line as shown in the figure.
I have drawn button separator by first selecting line tool, setting the radius to 1 pixel and foreground color to white. I than duplicate the line and change its color to dark gray. Finally, I group and merged these 2 layers and arranged them as shown in the figure below:
Add, custom icons and text in the button.
With the similar technique, draw a smaller rounded rectangle.
Add custom search icon and button.
Draw this white color shape.
Draw another dark gray color shape slightly bigger than the white color one and send it to back.
Add custom text :
Our header for real estate company is ready. Click the image below to enlarge it.