Create a Targeted Design

Set Up

We need to set up our document for the web. Turn our grid on and make sure it snaps to each 1px of our grid. If your unfamiliar with how to set up your Illustrator document for web work then read this article Building a Website Wireframe in Illustrator. This image will be used for branding the News content of AiBURN. The main image size of the preview area on AiBURN is 180px wide by 180px high. So set up your new document to those dimensions.

Polar Grid Tool

Select the Polar Grid Tool. It is shown in the Image Below. Choose width: 170px and height: 170px. Set Concentric Dividers to 6 (these are the number of rings) and the Skew to 0 percent (if you set the skew to something other than 0 it will move the rings closer In to the center or further out from the center). Then set the Radial Dividers to 6. I set the Skew to 0 Percent, but for this tutorial the Skew really doesn't matter because we will be adjusting this manually (so, feel free to play around with the Skew here to get a feel for it). Then I checked off the Create Compound Path From Ellipses and Fill Grid. Then hit OK.

Before we move on to the next step, lets make sure our new Polar Grid is placed directly in the center of our document so go to View > Actual Size or (Command/Ctrl + 1). Then Got to Select > All or (Command/Ctrl + A), cut it by going Edit > Cut or (Command/Ctrl + X), and then paste it by going Edit > Paste (Command/Ctrl + V). This drops it in the center of our document.

Turn Our Grid into a Target Design

Keep the grid selected. Rotate it until it looks like the top left frame of the picture below. Then grab the end point of a Radial Divider Line with the Direct Select Tool (A). Move each line individually until they overlap the last Concentric Ring and match the layout of the top right image below. Then Select All and in the Pathfinder Palette hit Divide.

Color In Our Target

As you might have figured out from my other tutorials I'm a big believer in keeping things editable. That's one of the reasons I love using illustrator. So, as we color in this design there are some empty spaces that we could delete. I'm just going to make them white instead to match our background color. This means that if I want to change this graphic in the future I can do so easily. I might decide to change this up a bit in the future. I think that it will serve as the news icon, but it could be flexible. I could add shapes or change the design up a bit and retain its iconic recognition.

Let's zoom in and start with coloring the negative space first. First Select All and then make sure everything is ungrouped. Go to Edit > Ungroup or (Shift + Command/Ctrl + G). Now make a selection that grabs some elements of our triangles. Match your selection to the image below. Group it Edit > Group or (Command/Ctrl + G) and then give it a Fill of white.

We will add some actual color next. Match Your selection to the image below. Instead of Grouping it we're going to use a Pathfinder Effect. Make a selection that matches the image below. Then in the Pathfinder Palette Under Shape Modes click on Add to Shape Area. Now we can apply a dark blue gradient to the shape and it will apply the gradient as if the whole selection is one item. The benefit here is that it is reversible if we want to change it in the future. We also gave it a 1px dark blue stroke.

Next we are going use the same techniques as above only we'll be adding a a light blue gradient instead and applying it to the remaining shapes.

Final Graphic

Go ahead and Turn off your grid by going to View > Hide Grid or (Command/Ctrl + Quotation Mark). Select the negative space and cut it Edit > Cut or (Command/Ctrl + X). Then paste it in back Edit > Paste in Back or (Command/Ctrl + B). This makes sure our white colored elements don't cover up any of our strokes. . Then we layout our text. And your design should look like the below image. Its scaled to 300 percent. You'll see the image at its final sized used for upcoming AiBURN News Content.

Let me know in the comments below if you have any questions or if you've used the Polor Grid Tool successfully on any projects.