Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Header for Real Estate Website

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 :

image 1

image 2

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.

image 3

Duplicate and place this layer as shown in following figures.

image 4

image 5

Now, find a picture of buildings.

image 6

Press control+i to invert the colors.

image 7

Reduce the opacity to 24% and change the layer mode to Linear Light.

image 8

Now, select this autoshape.

image 9

Draw the shape at middle of the canvas.

image 10

Also add little drop shadow in it.

image 11

Add company logo at the left hand side of the header.

image 12

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.

image 13

Now, apply gradient overlay as shown :

image 14

image 15

Create a new layer. Set the foreground color to white. Select high feathered brush and draw a line as shown in the figure.

image 16

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:

image 17

Add, custom icons and text in the button.

image 18

With the similar technique, draw a smaller rounded rectangle.

image 19

Add custom search icon and button.

image 20

Draw this white color shape.

image 21

Draw another dark gray color shape slightly bigger than the white color one and send it to back.

image 22

Add custom text :

image 23

Our header for real estate company is ready. Click the image below to enlarge it.

Header for Real Estate Website
Click to enlarge

subscribe to newsletter