Home » Tutorials » You are reading »

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 ๐Ÿ™‚

Related Topics:

Tutorials
Best Method for Taking a Screenshot on Mac
Tutorials
How to Take a Screenshot on Your PC or Laptop
Tutorials
Responding to a Hacked WordPress Website
Snippets
How to Get Facebook Page Like Count Without Access Token
http://cdn.dezzain.com/1/2008/01/radial-step1.jpgRichie KS TutorialsDesigns,radial elements,tutorialtoday 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... DEZZAIN.COM
Enjoy This Article?, Follow us or Share it smiley
viral and buzz WordPress theme

5 Comments Already

  1. Thanks for this tutorial, now its time to implement it on my blog . ๐Ÿ™‚

    Public CommentUserThanks for this tutorial, now its time to implement it on my blog . :)
  2. Nice tutorial, i was looking for this on the net and got it on the first link hit

    Public CommentUserNice tutorial, i was looking for this on the net and got it on the first link hit
  3. sorry jes
    i got your email tho ๐Ÿ˜‰
    will be working on tweaking the site for a while …

    Member of DEZZAIN.COMAdministratorsorry jes i got your email tho ;) will be working on tweaking the site for a while ...
  4. nice tuts rk

    ps
    i love your site header with the title and all
    can i contact you for some work?
    keep up the good work

    Public CommentUsernice tuts rk ps i love your site header with the title and all can i contact you for some work? keep up the good work

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


You can wrap php, js or style css code with [PHP]..your code...[/PHP]