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

02 Dec 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:

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.

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.

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.

Step 4 a):

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

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.

Step 5:

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.

Step 7:

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

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.

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.

Step 10:

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

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.

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.

Step 13:

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

Step 14:

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

Step 15:

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/