Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Could anybody please advise steps in Adobe Illustrator for creating a greenish background with "rays" emitting from its middle?

enter image description here

  1. I.e. which tool to use for creating the rays?
  2. How to create the "inner" shadow on the rectangular border?
  3. Which tool to create the lighter spot in the middle

I wonder how to approach this in Adobe Illustrator, because I need a vector output - an .fxg file for my Flash game. I. e. I can not use Photoshop or Gimp here.

Thank you for any hints/directions

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

Your sample image was most likely created in Photoshop. Photoshop makes the inset rectangle a bit easier, but the rays more difficult to make. Either application will work though.

Rays

  • Draw one ray, a triangle. Wide at top, point at the bottom.
  • With the triangle selected choose Effect > Distort & Transform > Transform
    rays
  • Once you have the rays, you can either choose Object > Expand Appearance and then delete the rays you do not want. Or you can create a clipping mask to simply hide the rays you do not want.
  • Fill the rays with a gradient of your choice.

Background

  • The background is merely a gradient filled rectangle.

Inner shadow around edge

  • Select all, Group (object > Group), and then choose Effect > Stylize > Inner Glow and adjust the setting.

Lighter part in the middle.

This is simply a rounded rectangle with reduced opacity. There is a slight bevel effect on it. This is easily done in Photoshop but takes quite a few more steps in Illustrator. Essentially you want a dark stroke at the top inside edge of the shape and a light stroke on the bottom inside edge of the shape.

Inset Rectangle

  • Use the Rounded rectangle tool to draw the rectangle. Or simply draw a standard rectangle ad use Effect > Stylize > Round Corners to round the corners dynamically.
  • Fill with a simply dark to light, top to bottom gradient
  • Choose Effect > Stylize > Inner Glow and adjust the settings to your liking.
    glow

I didn't address color anywhere. The colors are all merely gradients. There's nothing special about how the color is applied to anything in that image.

share|improve this answer
    
Thank you very much, I will try this out –  Alexander Farber Mar 3 '13 at 12:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.