How To Design A Simple Radial Elements

Written by Richie-K in January 14th, 2008

Don't forget to leave your comment and rating

(1 votes, average: 4 out of 5)

Loading ...

today we going to design a simple yet stylish radial element for your header site or sidebar elements. First thing first, what is radial elements? radial is a random line stripe that give an advantage attention for your visitors and it is also been pratice by web designer to add some spice to their site to give more in view to a more important intro text in their site.

First Step - Make A Header Sample

create a canvas for your header, usually around 900px width and 180px height and make sure it has a resolution of 72px and 8bit RGB colour

Second Step - Choose A Background Image

open any images that larger than your original header images and copy paste to the radial canvas, it should similiar like this:

Step 3 - Make A New Layer For The Radial Canvas

Select Top Navigation of your photoshop and go to Layer > New > New Layer and now there are a new layer top of the layer panel similiar to below:

Step 4 - Drag The Radial Shape So It Fit Your Header Images

select a shape similiar to above and drag it across the content. you can zoom out your canvas so it can fully covered all area of the header image, sample below

and it will look like this when you released the shape control

Step 5 - Ok Now You Got A Simple Radial Shape In A Header, Let’s Retouch It

ok after this step, you can be creative on how to make the radial blend with your background image, below are just a example what i would do to make the radial more subtle with current images.

Choose the radial shape layer > blending options

play around with colour blend in gradient overlay and blend the backgorund accordingly and set the blending option to 50% - 70% opacity

Final Result After Some Element Of Text And Block Added

There you go but keep in mind that this is a simple way to make a radial element in header. Try experiement with diffrent kind of images and blending option to get more optimized radial element for your site header.

You can download the sample psd here for your own practice purpose only.

thank and hope you enjoy this tutorial