Design Oahu

Web design blog from the middle of the pacific.

Radials, Rays, and Bursts

Whether you call them radials, rays, or bursts this technique is a great way to make your design pop. Unlike the sun which you are not suppose to stare at, you cannot help but focus on the center of a radial which makes radials a great addition to a design. Radials can range from mild to wild. If you want a subtle addition to your website header perhaps a burst that uses transparent gradients can help you add depth. If you want to draw attention to a specific element such as a logo, or a product for an advertisement you can use a brightly colored radial in the background with the product in the center. This adds depth and provides a faux 3D look.

Before you start to create your radial, plan out the colors, gradients, thickness, center, and shape you wish to achieve. The radial will be created in Photoshop by defining a pattern, filling a canvas with the pattern, then adding a Polar Coordinates distortion filter. Before applying the Polar Coordinates filter your canvas should be filled with vertical stripes. The top of your vertical stripes will become the center of the burst.

Lets get started by creating a simple two solid color radial.

  1. Create a new file with dimensions of 20×20, and fill the left half with the color of your choice, and the right half with another color.
  2. Select Edit>Define Pattern, and name the pattern whatever you wish.
  3. Create a new file with the dimensions of your choice. For this example I am using 400×400. Fill the canvas with your new pattern by using the paint bucket with the pattern setting.
  4. Select Filter>Distort>Polar Coordinates, and make sure Rectangular to Polar is selected. Hit OK and VoilĂ ! you have your radial in its simplest form.

Something you will notice is that the center looks a bit jankey, this is not a problem if you are going to throw an image of a product, or a logo in the center to cover it up, but this time lets make a radial that is a little cleaner. After creating this example you should have enough ammunition to start firing off your own radials and incorporating them into your projects. The final effect that we are going to achieve is alternating violet, and blue rays in our radial.

  1. Like last time the first step is to create the pattern that will fill the canvas with vertical stripes. This time we need to make sure the pattern is as tall as the final canvas, so the height will be 400. The stripes will be 5px, so we will create a new canvas 10×400 pixels, making sure that the background is set to transparent.
  2. Select the left half of the canvas and fill with a linear gradient of violet (#290a59) to transparent. Leave the right half transparent and define the pattern, Edit>Define Pattern.
  3. Create a new canvas 400×400 pixels, also with a transparent background, and fill the canvas with the pattern previously created.
  4. Select Filter>Distort>Polar Coordinates, and make sure Rectangular to Polar is selected to create the radial.
  5. Create a new layer and drag to the bottom to create a new background. Fill the canvas with a Radial Gradient of White to Light Blue (#3d64f4).
  6. Now add your element to a new top layer, add an outer glow and drop shadow to help give a three-dimensional look.

Thanks go to Neno Design for the use of their Winged Skull vector art.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

6 Comments

  1. Comment by Ajith on June 15, 2008

    Dude you are just amazing..

  2. Comment by Jeremy on July 24, 2008

    Thanks a lot Ajith!

  3. Comment by Tony - Neno Design on October 2, 2008

    Hey, Great tutorial! Way to make my skull look awesome!
    Neno

  4. Comment by Eugene on October 21, 2008

    Nice article. Thanks. :) Eugene

  5. Comment by Nathan on November 28, 2008

    I need a website for a plumbing business I am starting – can you design it? I live here in Hawaii!

    Much Aloha,

    Nate

  6. Comment by NYUB on April 22, 2009

    awesome..thanks for the tutorial!

Leave a Comment

Trackbacks

  1. Radials, Rays, and Bursts « llbbl
7 Comments and Trackbacks »