How to Weave a Stunning Header for a Healthcare Website using Minimal Images

How to Weave a Stunning Header for a Healthcare Website using Minimal Images

How would you start if your creative brief is to employ minimal or no imagery, but still create an effective header?

Whether you’re a curiosity struck, aspiring web designer or an experienced one, you can’t wait indefinitely for inspiration to strike.

For instance, if your client is a Health practitioner, your design can’t be too jazzy, but it should still stand out.

Here we’ll undertake a simple experiment to create an attractive header for Healthcare Center website for Chiropractic and custom Orthotics.

Let’s take it from the top-:

Step 1:

step01

Create a fresh Photoshop document of size 1366px , 729px

 

Step 2:

Now you need a background image in PNG format. We’ve used an image of clouds for demonstration.

step02

Step 3:

To blend the layers, we’ll go to the Layer Mask option & select Reveal All. Here you have to apply the “layer mask effect” on the left and the right hand side of the cloud layer, to blend it with the white background.

step03

Step 4:

Now we’ll create a base on which the Navigation menu will stand. To create such a base, you’ll have to select the pen tool and make a random shape. We made a shape given in the picture below.

step04

Step 4 a):

Fill up this random shape with color #00a4a4. Then create a new layer of 1379 px width & 74 px height.

step04_a

Step 4 b):

Now we’ll create a Navigation Menu structure (and make it stand) on the layer colored #00a4a4. We’ll do it with the help of pen tool again.

step04_b

 

Step 5:

step04_c
Fill the navigation menu structure with black gradient.

 

Step 6:

Now draw two vertical parallel lines from the black navigation menu using the pencil tool & fill light blue color (of the cloud) between them and apply layer mask effect to blend it with the background.

step06

Step 7:

Ensure that you blend it perfectly, more bluish at the top & lesser at the bottom, just like it is in the clouds.

step07

Step 8:

Now put the brand logo (provided by the client or created by you/your design team) between the parallel lines, on the left hand side.

step08

Step 9:

Now create two strips One for the Phone no. & one for the Address. Place these strips on the right hand side corner. Join them together.

step09

Step 10:

Now go to Photoshop’s Blending Options & apply shadow and border effect on both the strips.

step010

Step 11:

Write the text Call for Appointment on one strip & the put the contact no. on the other. You may also put the menu texts on the black navigation menu structure.

step011

Step 12:

Now you need to find an image of the Spinal cord. Use the pencil tool to trace the spinal cord and remove it from its existing background to use it as an object.

Also, create a smaller sized copy of the traced spinal cord and place it beneath the main (bigger) image, as shown in the figure below.

step012

Step 13:

Now place both the images on top of the black navigation menu structure we had created.

step013

Step 14:

Place the bigger spinal cord’s shadow at the bottom.

step014

 

Step 15:

step015

Add the banner name on the right hand side of the page, just above the bottom end of the spinal cord. And the design is ready. And here’s the final website http://backsinaction.ca/

Tags: