How To Draw an iMac G5 in Photoshop

How To Draw an iMac G5 in Photoshop
  • 15 September 2010
  • Web Design
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (31)»

Hi! Welcome to another tutorial at PV.M Garage. In this tutorial, we will draw a nice iMac G5 in Photoshop. We will combine layer shape and manual drawing to get a realistic result.

Preview

Before we continue, please take a look at what we’re creating below. Looks interesting? Good. Let’s move on to the tutorial.

Photoshop Tutorial How to Draw an iMac G5

Step 1: Drawing G5 Side

Start by drawing a gray rectangle. Activate pen tool then add some points on its top and bottom. See picture below for reference.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 2

Select middle points, hit Ctrl + T and pull it closer.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 3

Hold Ctrl and move top left and bottom corner until we have a nice perspective view.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 4

Using pen tool modify points on each corner. See picture below for reference.

Photoshop Tutorial How to Draw an iMac G5

Step 5

Create new layer, hit Ctrl + Alt + G to convert it to Clipping Mask. Paint white on top left and left side to add highlight. Paint black on bottom corner to add shadow.

Photoshop Tutorial How to Draw an iMac G5

Step 6

Double click shape layer to open Layer Style dialog box. Add Gradient Overlay.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 7: Front face

Let’s draw front face of the iMac G5. Draw a rounded rectangle shape. Inside it, draw another smaller rounded shape and select Subtract from option bar.

Photoshop Tutorial How to Draw an iMac G5

Step 8

Hit Ctrl + T, place it next to the iMac. Right click and choose Perspective, move top right corner until we have a nice perspective view. See image below for reference.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 9

Add layer style Gradient Overlay to add highlight on the shape.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 10

We still need to add more highlight and shadow. Create new layer and convert it to Clipping Mask (Ctrl + Alt + G). Paint indicated areas with black.

Photoshop Tutorial How to Draw an iMac G5

Step 11

Duplicate shape and transform it to smaller size and put it behind.

Photoshop Tutorial How to Draw an iMac G5

Step 12

Draw a rounded rectangle. Use pen tool to delete indicated points. Convert points on left side to corner using Convert Point Tool.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 13

Perform another perspective transformation until we have the shape in the right place.

Photoshop Tutorial How to Draw an iMac G5

Step 14

Let’s add another highlight and shadow. Create new layer and convert it to Clipping Mask (Ctrl + Alt + G). paint top and lower areas with black.

Photoshop Tutorial How to Draw an iMac G5

Step 15

Add highlight by painting white using soft brush.

Photoshop Tutorial How to Draw an iMac G5

Step 16: Add Dots Pattern

Create a new file with size: 30×30 px. Create two circle selection and fill it with black. Click Edit > Define Pattern to save it as a pattern.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 17

Create new layer. Click Edit > Fill, choose Use: Fill and select dots pattern we have just created.

Photoshop Tutorial How to Draw an iMac G5

Step 18

Perform another perspective transformation to place the pattern on the front face.

Photoshop Tutorial How to Draw an iMac G5

Step 19

Ctrl-click front face shape layer to create a selection based on its shape. Click Add Layer Mask icon. Now, the pattern is perfectly inside the shape.

Photoshop Tutorial How to Draw an iMac G5

Step 20

Create new layer. Draw a marquee and fill it with reflected black to white gradient.

Photoshop Tutorial How to Draw an iMac G5

Step 21

Hit Ctrl + T, right click and choose Skew. Transform the shape until it fit perfectly on lower side of the front face. Change its blend mode to Overlay. Ctrl-click front face shape and click Add Layer Mask icon. Reduce its opacity to 20%.

Photoshop Tutorial How to Draw an iMac G5

Step 22

Repeat previous step and apply it to top face. This time use bigger Opacity, 80%.

Photoshop Tutorial How to Draw an iMac G5

Step 23

Let’s add 3D effect on the face. Draw a rounded rectangle (a). Inside the rounded rectangle draw smaller rounded rectangle path and select Subtract from the option bar (b). Perform another perspective transformation, see picture c for reference.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 24

As you can see in close up picture below. This thin shape add 3D effect.

Photoshop Tutorial How to Draw an iMac G5

Step 25

Add Gradient Overlay to give the shape highlight and shadow.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 26

Draw a rectangle shape. Hit Ctrl + T, right click and select Skew. Transform it until it match the front face perspective. You need to move lower right corner to make sure its perfectly match to the front face. Double click the shape to open Layer Style dialog box and add IIner Shadow, Gradient Overlay, and Stroke.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 27: Add Apple Logo

Search for apple logo, you can find it easily in google image. Trace it in Photoshop manually using pen tool. After finish, you can just delete the image. Use black for its color.

Photoshop Tutorial How to Draw an iMac G5

Step 28

Perform perspective transformation, do it until the logo it is perfectly placed on iMac G5 side.

Photoshop Tutorial How to Draw an iMac G5

Step 29

Double click its layer shap to open Layer Style dialog box. Activate Bevel and Emboss with these settings.

Photoshop Tutorial How to Draw an iMac G5

Step 30

Reduce its Fill layer to 7%.

Photoshop Tutorial How to Draw an iMac G5

Step 31: Add Shadow

Activate big soft brushes and paint a big black shadow underneath the iMac. No need to be accurate on this, you can see the shadow I draw below.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 32

Click Filter > Blur > Gaussian Blur to soften the shadow. Use big radius to make the shadow is very soft. Reduce its opacity to 20%.

Photoshop Tutorial How to Draw an iMac G5

Photoshop Tutorial How to Draw an iMac G5

Step 33

Now, we need to add another shadow right under the iMac. Paint indicated areas below with black. This time make sure you use harder brush. Finally, duplicate the shadow layer (Ctrl + J), and add a very big Gaussian Blur.

Photoshop Tutorial How to Draw an iMac G5

Final Result

Here, you can see our finish drawing. I hope you like it. If you have any questions, fee free to ask in the comment area below. I’d be glad to answer it.

Photoshop Tutorial How to Draw an iMac G5

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

31 Comments

  1. Childmonster

    I throught its real image. Really nice. Great tut !

  2. Max

    Yeah, jeprie is really talented. Give this tutorial a shot.

  3. Lord_iMac

    This is not an iMac! It’s an Mac Pro.

    • Jeprie

      Oops! Sorry about this. I’m not a mac user, don’t know that.

      Thanks.

  4. Max

    Do they even make iMacs anymore?

    • Jeprie

      I guess it’s design is too old for todays design. I think its design is very cool, seems very strong. The front face is like a shield.

      • CMJ

        Yeah, I like it too, it looks very strong, like nothing can hurt it.

        To anser your question, Max, yes: they do still make this kind of Mac. It’s not called an iMac (That’s what the all-in-ones are called–like the one I’m currently using) they are called Mac Pros. You can get them with 12 cores and over 64 MB of RAM, so they aren’t just beasts on the outside, if you know what I mean. ;)

        They’ve gotten slight redesigns since the G5s, but they’re basically the same. The insides are just very, very organized. They have little cupboards for their various parts.

      • Jeprie

        Wow, 12 Cores. I guess its a perfect for 3D rendering.

  5. hendro

    Now i’got it, Thank’s buddy for the tutor.
    Cheers

  6. BlueBrat

    Nice stuff in this tut, some neat tricks. I like how you thought to construct the rounding handle things over the case, that was slick.

    Thanks.

    • Jeprie

      You’re welcome. Glad to know you like it.

      If you have any question with this tut, feel free to ask.

  7. Andrew

    Just curious, why wouldn’t you use Illustrator for this?

    Great work though!

    • Jeprie

      I have more experience with Photoshop. I also think that Photoshop is easier to use.

  8. dog training online

    I had hoped to do my Doctoral Thesis in Rehabilitation Psychology on a comparable topic, excepting, as it pertains to expert athletes who are no longer within the limelight. I definitely feel it is a valid and fascinating study!

  9. Jamee Eppes

    I like this web site its a master peace ! .

  10. facebook of sex

    Well crafted piece of content, and i also already understood that some groups are more inclined than others (since we’re all different) would share the same idea. I hope you save this blog working well.

  11. female hair loss

    emailemailYou made a number of nice points there. I did a search on the matter and found the majority of folks will agree with your blog..whiteiphone4freebiejeebies hair loss men spy watch

  12. farmville cheats

    Can I just say what a relief to find someone who actually knows what they’re talking about on the internet. You definitely know how to bring an issue to light and engage the reader. I cant believe I haven’t come across your blog before now. Keep up the good work and thanks!

  13. zero friction marketing

    Could not thank you adequately for the content on your web-site. I know you add a lot of time and effort into them and hope you know how deeply I appreciate it. I hope I can do the identical thing for someone else at some point.

  14. junk cars

    no matter what you are saying, you got it

  15. do follow blog list

    Thank you taking the time to write this!

  16. where to find employment application template

    Sweet internet site , super layout, rattling clean and employ friendly .

  17. Bingo

    Very great tuto, thanks ;)

  18. odliczenie częściowe

    I just figured out that my computer has this kind of trojan. I was running pretty much all of the Anti-virus things my computer has. The main one says there is nothing there and my Windows defender says I have two trojans so I’m not sure what to do. I’m thinking of buying or building a new one. . Right now I have intel. Im not sure which is best like Dell, Miscrosoft, etc. I need a gaming computer which can also be used as a school work computer. Any ideas?.

  19. coach outlet

    Fortunately for us lovers of timeless classics, the Chanel reissue 2.55 captures the iconic beauty of Coco Chanel’s creation and brings it to the modern day without any additions or omissions from the original.chanel purses

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US