Advertisement
Icon Design

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

by

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
Related Posts
  • Design & Illustration
    Icon Design
    Create a Set of Flat Precious Gems Icons in Adobe IllustratorGem pw diamond
    In this tutorial we will learn how to create a set of simple yet trendy flat-style gems icons in Adobe Illustrator! Using basic shapes and Blending Modes, we will make our precious gems shine and sparkle. You don’t need any special drawing skills or devices, so let’s get started!Read More…
  • Design & Illustration
    Illustration
    Create a Traditional Russian Khokhloma Ornament in IllustratorKhokhloma round tut 400
    In this tutorial we are going to create a shiny pendant with a Khokhloma design – the famous traditional Russian ornament, which was widely used for ware and furniture decoration. We'll be using simple yet spectacular effects, blends and self-made brushes in Adobe Illustrator. Let's bring folk art to the masses!Read More…
  • Design & Illustration
    Illustration
    Create Simple Flowers With Gradient Mesh in Adobe IllustratorDiana tut meshflower 400x400
    Follow this tutorial and learn how to create beautiful flowers with the help of the Gradient Mesh function in Adobe Illustrator. We will start with the shape of the petal then using the Gradient Mesh we will add the mesh points and color it. After this, we will compose the flower followed by the stamens in the center. For them, we will use a custom Scatter Brush along with the Transform effect and the Gradient Mesh of course. We will continue with adding details on the petals with the help of the Blend Tool, Pucker & Bloat and Transform effects. We'll finish with adding shadows and trying other color versions. Let's begin! Read More…
  • Design & Illustration
    Typography
    How to Create a Holiday Themed Typography Piece in Adobe IllustratorChris holiday 400
    Tis the season to be jolly, so why not spread some of that joy and cheer around? This tutorial will teach you a few techniques for altering fonts and manipulating their alternatives in Adobe Illustrator to create a unique, holiday inspired typography piece. Read More…
  • Design & Illustration
    Icon Design
    Create an iOS 7 Inspired Tab Bar Icon Set in Adobe Illustrator Chris tabbar 400
    With the release of Apple's latest mobile operating system iOS 7 I thought it would be great to create some custom tab bar icons styled for this new OS. In this tutorial we'll be making some icons in the flat, thin-line style used throughout iOS 7. We'll be creating both normal and selected states for these icons in Adobe Illustrator, so feel free to follow along!Read More…
  • Design & Illustration
    Illustration
    Create a Nautical Tattoo Style Design for a Craft ProjectChris totes 400
    With this tutorial I would like to show you how to create a pattern for a seamstress to use to decorate a tote bag. We'll be using our previously created Nautical Alphabet as well as simple shapes and a lot of the rotate copies tool to render various nautical themed elements that will adorn a tote bag beautifully. Read More…