How to Create a Photorealistic iMac and Magic Mouse
Download Source Files
This tutorial is about using Adobe Illustrator’s Mesh Tool (U) and several basic techniques to create a vector style monitor and mouse, with a similar design as Apple’s brand new iMac 27″ with magic mouse. You can use these techniques to create other monitors and mouse designs as well. Let’s get started!
Final Image Preview
Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.
Tutorial Details
- Program: Adobe Illustrator CS4
- Difficulty: Intermediate
- Estimated Completion Time: 3-5 hours
Introduction
This is wide tutorial in which I am going to teach you how to use the mesh tool (U) to create nice simple gradients the way you would want to. This tool is a great one for creating photorealistic effects in vector format. You don’t need any stock photography for this tutorial except the one use for creating the screen content. This one you will need is provided from my collection and is completely free for usage without any restriction.
You should know at least how to deal with Illustrator Pen Tool (P) to complete this tutorial. If you are not familiar with using it, then get stared with this tutorial: Illustrator’s Pen Tool: The Comprehensive Guide.
Step 1
We start our tutorial with creating new artboard. Name the new document “iMac” and set the dimensions to 1024pt for width and 768pt for height. As this design is meant to be used for printed media we set the Color Mode to CMYK and the resolution to 300dpi.
Step 2
Start modeling with the display. The first thing to create is the side of the iMac’s display. Create a simple shape with the Rounded Rectangle Tool (my dimensions are 545pt by 440pt), color it to #807F83, and reshape with the Direct Selection Tool (A). Pay special attention to the corners.
Step 3
Now we use Illustrator’s Mesh Tool (U). Select the tool and create the anchor point on the borderline of the shape near the bottom-right corner. Be sure to create the point on the borderline.
Step 4
It’s time for practice and your creativity. Just play with the Mesh Tool (U) and try to create something similar to the image below. You can see more detailed image of the corners in further steps, or for Vector Plus Members just look into the AI source file for this tutorial.
Step 5
Here you can see a detailed image of the mesh corner. Use the Direct Selection Tool (A) and #D8D9DA, #807F83 colors to create this curved gradient. Just select a particular section of the mesh and apply color on it until you have the effect shown below.
Step 6
In this step just continue with the same colors in the top-right corner. The upper arrow shows the section for the darker one and the lower arrow shows the section for the lighter one. This is all for the side part as shown. In the next few steps we are going to create the display.
Step 7
Create another Rounded Rectangle (537pt by 441pt) and color it with #A1A1A4. If necessary, bring it forward and adjust the position to the side shape, which creates an extruded shape illusion.
Step 8
Use the Mesh Tool (U) with the colors #EFE9E5 and #A1A1A4, to create a gradient, as shown below.
Step 9
Duplicate the layer from the Step 8. Click on it with the Selection Tool (V) and change the color to #261C02. Then create two Rectangle Shapes (M) and deform them by moving their anchor points with the Direct Selection Tool (A). And now we are ready to substract them to create a black display frame. Now select the #1 rectangle and go to Object > Path > Divide Objects Below. Do the same with the #2 shape.
Step 10
Now we are going to use the spider photo. Just put it on the artboard and scale it to the necessary dimensions, just to have the upper-right corner near the upper right corner of the frame and do the same with the lower-left corner.
In the control panel, click on Mask and correct the shape with the Direct Selection Tool (A). The last thing with the photo is to put it backward with the Arrange Menu (Control > Arrange) to hide the borders behind the black frame.
Step 11
Now use the Pen Tool (P) for creating “the Apple,” or add your own creative branding. Bear in mind that it should be a little bit deformed according to perspective rules.
Step 12
With the Pen Tool (P) create the shape for a reflection gradient. You can create a completely new shape, or just duplicate the first layer of the display, and edit it with subtractions and Convert Anchor Point Tool (Shift + C). Then apply a semi-transparent gradient on it. The gradient is created with #fff color with 0% Opacity, #000 color with 100% Opacity and the angle is set to 81,82 degrees.
Step 13
And the last thing to create for the iMac is its leg. Create the shape below with Pen Tool (P) and apply #D8D9DA to it.
Step 14
Create a new rectangle (my dimensions are 102pt by 79pt) and use the Mesh Tool (U) to create two vertical lines. Be sure to click on the border lines not into the shape.
Step 15
Continue with the Mesh Tool (U) and create one more vertical line and then 8 horizontal lines. Again, be sure to click on the border lines.
Step 16
Use the Direct Selection Tool (A), Mesh Tool (U) and Anchor Point Tool (Shift+ C) to transform your shape into the one in the image below.
Step 17
So we are almost done with the iMac. Just use the Direct Selection Tool (A) to select the particular areas of mesh and #807F83, #C2CDC5, #EFE9E5, #A1A1A4 colors to create the shadows and reflections. Pay your attention to the areas indicated by arrows below, as they are particularly important.
Step 18
And the last step is to adjust the position of the shapes of the iMac’s leg and also to arrange it back behind the display. And voilá, we have a photorealistic vector of Apple’s iMac.
Step 19
I also prepared the Magic Mouse to practice the skills you have learned. The next steps which describe the creation process are more brief to let you see how much you understand the steps during creation of the iMac. If you are lost you can roll back and check the previous steps again or just play with the source AI file.
Step 20
Use the Pen Tool (P), Direct Selection Tool (A), Anchor Point Tool (Shift + C) and Mesh Tool (U) to create the base mesh shape for the Magic Mouse.
Step 21
Add two shapes (Pen Tool(P)) for reflections. #1 is #FFF color with 0% Opacity to #bfbfbf color with 50% Opacity, and angle set to -93,74 degrees. #2 is #FFF color with 0% Opacity, #DDD color with 100% Opacity, #bfbfbf color with 10% Opacity, and angle set to 175,71 degrees.
Step 22
Create a shape for the sideline of the Magic Mouse. Fill it with a gradient using the colors, angle, and positions as shown. The only exception is the 0% Opacity of the #ABABAB color in the middle of the gradient.
Step 23
The last image shows you the shape for the brand’s shadow. Apple is the top layer and is filled with #a1a1a5 color. The shadow as expected is the back layer filled with #162732 color.
Conclusion
Now you can put the iMac and the Magic Mouse together and we are finished. Thank you for your attention and I hope that this tutorial was useful for you.
Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Peter Kalous
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Vectortuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
sweet
Really nice and clean outcome :D
Step 16 could’ve be simpler though, correct me if I’m wrong:
- Select whole object (after step 15) and hit CMD + Alt + M (or: Object > envelope distort > make with mesh).
- I chose 3 rows, 2 columns. Now you could build your basic shape with this. After your basic shape is roughly similair to the example hit Object > Expand.
The inner mesh lines will not be as distorted, as they would’ve been when done manually (wich would be a lot more work)
Thanks for reactions guys. Yes every time there is a way to it in simplier way :) Next time I will do my best to avoid it :) cheers
Nice use of the mesh tool !
Nice outcome… like it a lot…
when saw the thumbnail to this tutorial before i even clicked it i thought maybe there was a giveaway of the new iMac… and was a bit disappointed to see that it was a tut instead :-p
Ah! maybe next time. Oh how i could use one of these new iMacs…
Great one dude.. keep it up
Excellent tutorial and great outcome.
I think this is a close as I’m going to get to the new iMac but I will give the tutorial a try and learn to use the mesh tool properly.
Thanks for sharing.
nice use of the mesh tool, great tut.
Great & very useful tutorial!
Thanks
great tutorial, love the outcome. thanks for sharing
I’ve always been really scared of the mesh tool, but this tut really streamlines things. Think I’ll give it another chance… :)
This is a good tutorial, but I’ve now got a major issue with the Vectortuts staff. I’ve sent in many tutorial pitches for recreating products and whatnot, and they are always turned down for the exact reason that they’re existing products that are copyrighted, and I was told that the Tuts+ sites only accept original design tutorials.
What’s the deal here?
Thie great tutorial but its dificult for beginer like me :D
Now if only it could magically replace my pc..haha
Absolutely brilliant – I’ve been waiting an age for a tutorial like this. Thankyou so much – words can’t portray how pleased I am to see this up on Tutsplus!
Thank you for this. I’ve always been really interested with learning how to do this very thing.
good tutorial
imac’s draw and Done on a pc!
Amazing!
Nice work.
The tutorial is very good, but the reference image has a broken link. Please fix it.
I got that fixed. Thx.
Just so awesome! nothing else to say!
new imac 27″ style – great stuff ;D
step 9
nothing happens when i click divide objects below
you should have two objects one over the other and then select the top one and use divide below and it should work. If not just make sure if you are working in one layer.
I have the same problem, so I’m stuck at step 9… Even if I select the path, when I hit divide objects below, nothing happens. I keep looking for an explanation because I’ve seen videos using this command and I seem to be doing nothing wrong. I have Illustrator CS4, maybe others have trouble with it too…
I retried today and it worked so I guess rebooting solved the problem.
Great tut anyway, thanks a lot !
Still nothing happens when i click divide objects below. I’m in one layer, tried to reboot. Didn’t help.
I click on the path of the smaller rectangle and it is on top of de black rectangle….
Is it posiible that it is impossible to divide a mesh. Because i can make a divide in the same file, when i divide just a path. Now i’m trying to divide a mesh. Can i make it a path instead of a mesh?
That is really nice, and looks so real! Great job!
Great tut! We are proudly using the result on our company header:
http://www.curbinnovative.com/
Cheers!
Wow. I could show this to someone and they’d totally be fooled into thinking it’s real! :D
Nice tutorial! Thanks for the clear layout – really well done.
A-Mazing.
I love you tutorial. It teaches me so many new techniques. Thanks.
very nice
I was going to write a tutorial similar to this when I got around to it; I knew it was only a matter of time until someone wrote one though! Excellent job! Looks real :)
nice~
Hi,
Nice tutorial! Thanks for the clear instructions –
really great job you have done.
Thanks
hey that’s great….tutorial
Great tutorial, and I must say thank to the author, who explained the article in proper steps and make it easy to understand .
Yay for proving that not everything in perspective needs the 3D effect to look good. :D
The mesh work is pretty unaccessible for noobs, so few explanations..
Man that mesh tool is hard to use, I only did the monitor/computer part, the stand in no way I can do that for now
still fresh in Illustrator
great tut though but I think there might be an easy way to do that BEAUTIFUL iMac of yours
Why doesn’t mine look as beautiful as yours :(
Really tight, man!!! Love this tutorial. It’s not simple, but how can you make such a realistic looking iMac ‘simple’? (If Illustrator CS30 takes place of CS5!)
how did you scale the spider image? i cant pull any corners of the placed image….im lost
this takes hours of work ??? unbelievably long time
mostly you can start sketching in black and white on plain paper,
scan that to photoshop or whatever app you use, and start coloring it
and you’re done.
the point? if you CAN draw (talented with your hand before even pc was even invented)
then you don’t need all this hassle , illustrator and similar software is designed with non-artists
in mind . for those who can draw , it is just waste of time.
nice tut however.