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 🙂
