1. Adobe illustrator

2. iPhones have changed a lot over time

3. Lesson Objectives
To understand how to create gradients to enhance images
All students will use linear gradients and create a mesh gradient with help
Most students will create original gradients and edit colour and direction
Some students will use mesh gradients effectively and independently. 1 2 3 4 5 6 7 8 9
To be able to apply an existing linear gradient to a shape
To be able to move the points on a linear gradient
To be able to add and remove points on a linear gradient
To create an original linear gradient
To create an effective linear gradient for the purpose
Identify the differences between a mesh gradient and a linear gradient
To understand how a mesh gradient works
Be able to create effective mesh gradient patterns
To use a linear gradient to reflect light and shadow

4. Today’s Challenge
You are going to create the next generation iPhone…The iPhone 7 or 8 or 9.
We’re not trying to duplicate a current iPhone. We’re trying to create a realistic looking future iPhone using gradients.

5. What is a gradient? Gradients are a seamless mix of colours.
They can be linear, radial or angular.
Illustrators use them a lot to make graphics look richer and more effective

6. Which ones of these images do you think is the most effective?

7. Let’s Practice Open Illustrator and make a blank A4 Page.
Draw a petal shape using the Pencil tool.
It doesn’t matter if it’s not perfect – it’s only to practice!
Duplicate your petal so that you have two identical ones

8. Two types of gradients
There are two ways to make gradients on Illustrator.
An easier way which creates a uniform gradient
A trickier way which create a more bespoke gradient.
While we’re working with gradients you can use either.

9. The Uniform Gradient On the right is the gradient tool.1 2 3 4
To be able to apply an existing linear gradient to a shape
To be able to move the points on a linear gradient
To be able to add and remove points on a linear gradient
To create an original linear gradient
On the right is the gradient tool.
You can select radial or linear
Double click the points at the bottom to change the colour. Add points by clicking in a gap if you want more colours
You can drag the points at the bottom around to alter where the colour goes
You can drag the points at the top to alter how blended the colours are.

10. The Mesh Gradient Select your 2nd petal.
Select the mesh tool from your toolbox.
You can now click on your petal to create points - a mesh that will cover the whole shape.
You might have to double click to close the shape
Create 3 points like this
(click where the red dots are to create it)

11. The mesh gradient
With the mesh tool selected you can now click on the points you have created (where the lines intersect – it will say “Anchor” when you hover over it”
Click the point, and then select a colour from your colour palette on the right.
You can add additional points to the mesh if you like. 6 7 8 9
Identify the differences between a mesh gradient and a linear gradient
To understand how a mesh gradient works
Be able to create effective mesh gradient patterns
To use a linear gradient to reflect light and shadow

12. Extension:
If you’re happy with your gradient, duplicate the image and rotate it to create a full flower

13. Step 1: Shape Create your iPhone shape.
Create a new A4 document on Illustrator
Use the rectangle or rounded rectangle to draw your iPhone shape

14. Step 2: Surround Select your iPhone.
Got to Object>Path>Offset Path
Change the Offset measurement to 3mm
Press OK

15. Surround You now have a screen and a surround.
We are going to make the surround look 3D and shiny

16. Gradients Drag the smaller rectangle to one side.
Select the larger rectangle and choose the gradient panel on the right
You want a linear gradient.
Choose your own variations of colour
Ensure you select colours of the same SHADE. Do not make it multi coloured at this point.
Tip: If you go into the swatches menu you can select a premade metallic swatch. This will help you get the shades correct

18. If you want to change the direction
Use the gradient tool from your toolbar.
Drag it across your shape to change the direction.
Whichever direction you chose, you must be consistent throughout the whole graphic.

19. Step 2: The glass Drag the smaller shape back on top.
The smaller shape is the glass screen and should be black.
Use a gradient to make it look shiny
Tip: make sure the light matches up. If its lighter on the surround it should be lighter on the screen.

20. Step 3: The screen
Add a rectangle to denote the screen. It should have the same gradient as the glass background

21. Step 4: Button
This has got a gradient pattern unlike others we’ve used.
It required us to create an additional shape.
Step 1: Draw a perfect circle (hold down shift)
Step 2: Duplicate it twice (copy and paste)

22. The Button Overlap two of the circles. Go to WINDOW>PATHFINDER
Click the intersect front icon, and it will leave you with a moon shape
Tip: If it is facing the wrong way, just flip it around

23. The Button
Use the gradient tools, and layer the images up to create an effective looking button

24. Template ready! You now have an iPhone ready to add Apps to.
Remember the Lesson Outcomes.
All students will use gradients to create a shiny new iPhone
Most students will create an interface using existing symbols
Some students will create an interface using original images

25. Existing Symbols In the symbols panel select the mobile symbols.
Place these on your mobile screen as Apps.

26. Enhancing and editing Symbols
Use the rounded rectangle to create a base for the symbol.
Add a suitable coloured gradient
Add a shadow (Effects, Stylize, Drop Shadow)
To edit the symbols select Edit Symbol at the top of the page. Double click on the area you want to alter.

27. Remember the outcomes
All students will use linear gradients and create a mesh gradient with help Most students will create original gradients and edit colour and direction Some students will use mesh gradients effectively and independently. Snip your final design and paste it into your work book.