Could anybody please advise steps in Adobe Illustrator for creating a greenish background with "rays" emitting from its middle?
- I.e. which tool to use for creating the rays?
- How to create the "inner" shadow on the rectangular border?
- 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
Answer
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
- 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.
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.
No comments:
Post a Comment