How To Design A Simple Radial Elements

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

radial-step1.jpg

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

radial-step2.jpg

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

radial-step3a.jpg

Step 3 – Make A New Layer For The Radial Canvas

radial-step3a1.jpg

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:

radial-step3a2.jpg

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

radial-step3.jpg

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

radial-step3a3.jpg

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

radial-step3a4.jpg

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

radial-step5.jpg

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

Final Result After Some Element Of Text And Block Added

radial-step6.jpg

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 🙂

Scroll to Top