g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Draw a Sunburst in Illustrator CS4

If you haven't noticed the explosion of blogging on the web, you're in the minority. As a web designer, this is another avenue to design for your clients. When a client comes to me with a request for custom blog graphics, I usually start with the header graphic. If the client likes the header, then we move on from there.

In the past there was a hard and fast rule that the header of a website should be in the ball park of 800 x 100 pixels. But with the advancements in image compression and broadband Internet access, the size of headers has grown considerably. I've recently seen headers that were 1600 x 300 and even larger.

As with everything else, finding a place somewhere in the middle works best. Depending of the logo and other preexisting graphics supplied by the client, I usually start with a basic size for my header of 900 x 200 pixels. Let's start there and make a beautiful sunbrust header in Illustrator CS4.

  1. Start a new project file in IllustratorR. Set the Width to 800, Height to 200, Resolution to 72 and Color Mode to RGB.

  2. I like to lock the bottom layer and start on a new Layer 2 in the Layers panel. Let's rename this layer to "sunburst".

  3. Set the Fill to null and the Stroke to black and 1 pt. Set the line to Basic and Style to null. In the Stroke panel, set the Weight to 1pt and the Miter Limit to 4. Using the Ellipse tool, draw a circle with the center aligned at the horizontal center of the header and on the bottom line.

  4. In the Stroke panel, set the Weight to 300 pt. Check the box next to Dashed Line and keep the default setting of 2 pt.

    There is our sunburst. You can save this file in case you ever need a sunburst again. We will copy and paste it into PhotoshopR.

  5. With the circle still selected, click Edit Copy to copy the circle to the clipboard.

  6. With Photoshop open, click File New to start a new project. Keep the settings in the New dialog box. They are automatically set to the size of our clipboard image.

  7. Click Edit Paste to paste the image from the clipboard. In the Paste dialog box, choose Paste As Pixels. Click the checkmark to finalize. Save this as a PSD file.

  8. Now, click File New to start a new project window at 800 x 200 x 72 x RGB. Copy or drag the sunburst image into this window. Click Edit Free Transform to adjust the shape of the sunburst. The center should be in the center of the bottom edge and the rays should touch the top of the header. You will want to leave a blank space on both sides of the header.

In the next tutorial, we will experiment with several ways to finish the header design.

Sunburst Header Design in Photoshop

Join us in the Digital Art and Design forum.


Add Draw+a+Sunburst+in+Illustrator+CS4 to Twitter Add Draw+a+Sunburst+in+Illustrator+CS4 to Facebook Add Draw+a+Sunburst+in+Illustrator+CS4 to MySpace Add Draw+a+Sunburst+in+Illustrator+CS4 to Del.icio.us Digg Draw+a+Sunburst+in+Illustrator+CS4 Add Draw+a+Sunburst+in+Illustrator+CS4 to Yahoo My Web Add Draw+a+Sunburst+in+Illustrator+CS4 to Google Bookmarks Add Draw+a+Sunburst+in+Illustrator+CS4 to Stumbleupon Add Draw+a+Sunburst+in+Illustrator+CS4 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Working With Shapes In Canva

Using Backgrounds in Canva

Quick Look - Affinity Designer

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor