Sunburst Header Design in Photoshop - Digital Art and Design

In the last tutorial, we drew a sunburst shape in Illustrator^R using the Ellipse tool and the Stroke panel. We then copied and pasted the sunburst into Photoshop to finish our header design. Our sunburst is solid black so that we can use it in many different ways and designs.

If you travel the web, you will see that the sunburst is used quite frequently in header designs. Most of the time, it is semitransparent and used as part of the background with the more prominent design details in front.

Let's open our sunburst design element that we created in the previous tutorial into Photoshop^R. We already have the design set with a width to 800, height to 200, resolution to 72, color mode to RGB and a transparent background.

Add a new layer to the Layers panel and name it gradient 1. The colors in our gradient will set the tone for our header. For example, we can make a very cheerful header by using bold colors for our gradient. Set the Foreground color to 721c6a and the background color to f9e93d. Click on the Gradient tool. In the Options Bar, set the preset gradient to the first sample in the list (Foreground to Background). Set the gradient type to Radial.
To apply the gradient to the layer, click on the bottom edge in the center of the sunburst. While holding down the mouse button, move your mouse pointer to the upper right corner.

You should have the purple color in the center of the sunburst and the yellow at the outer edges.
Return to the Layers panel. Still with the gradient 1 layer active, set the Blending Mode menu to Screen.
Now we are ready to add the name of our website to the header. Your choice of fonts should reflect the tone of the header. In our example, I decided to keep the playful tone by using Curlz MT. I also wanted to contrast a curly font over the straight lines of our sunburst. Curlz MT is a small font so I had to set the size up to 72 pt.
My next decision was the color for my text. I intended to pick a darker purple color. While trying several dark colors, I realized that I really liked the look of black text against the sunburst. So I decided to set the text color to 000000.
Our header is looking good but I wanted to experiment with the Warp Text tool. I especially wanted to see how the text looked when warpped to the curve of the sunburst. I used the Arch setting and set the Bend to +29.
Finally, I added a Drop Shadow Layer Style with the following settings.

Blend Mode – Multiply
Color – Black
Opacity – 75%
Angle – 120
Global Light – yes
Distance – 0
Spread – 0
Size – 16
At this point, the header is bold, bright and simple. Just what my client wanted for his website. On the other hand, this header would also look good with more design details. We could add the popular swirls on the open yellow edges of the header, add texture to the gradient with filters or add a second color layer and paint in some color details.

Draw a Sunburst in Illustrator CS4

Join us in the Flash forum.

Join us in the Digital Art and Design forum.