Advertisement

Quick Tip: Create an iOS 7 Inspired Flower Icon Using the Rotate Tool

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

Here are a few quick tips for rotating objects in Adobe Illustrator. We'll be using these tips to recreate the new Photos App Icon in iOS 7.


1. Set Up Your Document

Create a New document in Illustrator that is 1024 x 1024px. This is the largest size of an app icon that Apple requires, so we'll work at this size. Once created visit View > Smart Guides (Command-U).

chris-flower-1-1

2. Create Your Petals

Step 1

Enable the Rounded Rectangle Tool and click on the Artboard and create a rounded rectangle that is 280 x 420px with a Corner Radius of 140px.

chris-flower-2-1

Step 2

Navigate to the Transform panel (Window > Transform) and adjust the "X" and "Y" axis as seen below.

chris-flower-2-2

Step 3

With the petal shape selected visit the Appearance panel (Window > Appearance) and remove the stroke and add a gradient to the background. We will also be adjusting the Blending Mode as outlined below.

chris-flower-2-3

Step 4

Switch to the Ellipse Tool (L) and create a circle that is 56 x 56px and align it to the exact center of the Artboard.

We won't actually need this circle for our icon but we'll use it as a center guide for our upcoming rotate steps.

chris-flower-2-4

Step 5

Switch to the Selection Tool (V) and select the petal shape once again. With that selected enable the Rotate Tool (R) and hover over the small circle we created. You will see a small "x" and a tooltip will read "center" to indicate you are over the exact center of the circle. While holding down the Alt button on your keyboard, click on this "x" in the middle of the circle to open the Rotate dialog window. From this window enter an Angle of -45º and click the "Copy" button to duplicate and rotate our petal shape.

chris-flower-2-5

Step 6

We'll now repeat this duplication/rotation by visiting Object > Transform > Transform Again (Command-D). Do this six more times so you have a total of eight Petals.

chris-flower-2-6

Step 7

You can now select the small circle and delete it.

Now select each petal and adjust the gradient colors. We'll only be using eight colors. to create the different gradients. Basically the color that starts at the top of the gradient is the same color from the bottom color of the gradient in the petal before it.

chris-flower-2-7

Photo Finish!

I hope I was able to show you a new technique for rotating an object around another. A few simple steps can yield beautiful results. Please feel free to test it out yourself and let me know what you use it for!

chris-flower-600
Advertisement