Create a Slick Black iMac in Photoshop

Dec 7th in Effects by Collis
Some months back before the latest iMacs were released, I was musing as to what a black iMac might look like. Being a Photoshopper, I decided to try making one. After posting it on a blog, the image went viral and started appearing on Mac and technology blogs and my site was inundated with traffic. Today if you look up Black iMac in a Google search you'll see lots of sites using my image. Today I'll show you how I made that picture.

Author: Collis

Hello! I started PSDTUTS because years ago reading Photoshop tutorials was how I got into design. I hope the site helps and inspires others! You can find me on Twitter!

Step 1

The first thing we need to make our black iMac is a regular one to base it off of. I used the previous model because when I originally did this, that was all that was available. Here's an image I found off Google Images of a front facing iMac. It's a pretty standard product shot.

Step 2

Now the first thing to do is create a new layer on top, so grab the Rounded Rectangle Tool (U) and draw a black rectangle with a curve matching the base image. (I believe I used a 20px Radius)

Step 3

Now for the moment we'll leave the screen and focus on the stand. So zoom in and using the Pen Tool (P), draw around the stand like shown. With the Pen Tool, it's a good idea to use as few points as possible as you will get a smoother line. This can take some practice and a few attempts. Also try to mirror where you place the points so that even if the line is a little wonky, at least it's symmetrical.

Step 4

Once you have the path, right-click on it and choose Make Selection.

Step 5

Now before I go any further, I wanted to note that the black that Apple uses is a sort of matte or dull black. In photos it has a slightly blueish cast. Rather than trying to guess what exact colors to use, I just found a picture of a regular black Mac laptop and then using the eye dropper picked out a few shades (shown below).

Step 6

Anyhow, so back to the stand, with the selection still made, I created a new layer and then used the Reflected Gradient and a dark and light black from the previous step and filled in the stand as shown. You can see that the light part of the gradient is in the middle. I did this because when you look at the stand in the white version, it has the same sort of light and shade but inversed.

Actually, in almost all the steps in this tutorial, the idea is to look at how the photo looks and then emulate the effect using dark greys and blacks instead of whites and light greys.

Step 7

Now the gradient wasn't that strong, so I grabbed a large fat Dodge Tool (O) brush, then while holding Shift down to keep my brush exactly horizontal, I went over a couple of times to get that highlight looking stronger.

Step 8

After dodging the curve, I then used the Dodge Tool on the very bottom of the stand so that it gets lighter there too (as shown below). It's already starting to look like a stand now: amazing what a bit of light and shadow can do!

Step 9

Next I again got the Pen Tool out and this time drew a shape that captured the area at the very front of the stand (see below). This part should have a different coloring so that when you look at the image, you can see that this part is at a different angle than the other part of the stand.

Note that the base of my pen selection in the image below shown is all wonky. That's because it doesn't really matter about that part, I just want to get that curve at the top.

Next we right-click with the Pen Tool still selected and choose Make Selection again. Then create a new layer above the stand layer and fill it with a dark grey.

Step 10

So as you can see in the image below, I have my weird shape just on top of the main stand. So now we Ctrl-click the stand layer to select its pixels and then press Ctrl+Shift+I to invert the selection. Then hit Delete so that all you are left with from our weird shape is the intersection of the two shapes.

Step 11

Now grab the Dodge Tool (O) and again with a soft brush, add a highlight where shown. Then hold down Alt and brush the right-most edge. Holding down Alt with the Dodge Tool changes it to the Burn Tool (and vice versa). So you can quickly brush dark and light without changing tools.

Step 12

Finally, to complete the stand, we duplicate the front part of the stand, hold down Ctrl, click that layer, and then press the down arrow once and hit Delete. This should leave you with a 1px thin line (shown in selection in the image below). Set this layer to Overlay and 30% Opacity, and it'll give a really faint highlight.

Do the same thing again, except this time instead of the down arrow, press the Up arrow so that you are left with a 1px selection at the base. Place this layer below the stand, move it down 1px, and use the Burn Tool to darken it up. This will be a faint shadow beneath the stand.

(Note this step isn't essential and sounds complicated, but is actually quite simple. If you do get lost in there, don't worry it won't drastically affect the final image)

Step 13

Ok, so we have a pretty cool black stand. Here it is on top of the main image, and you can see that it looks about right!

Step 14

Now we start work on the screen area. The first thing we need to do is get rid of the straight black shape and replace it with a gradient. So we switch that layer's visibility off and then holding down Ctrl, we click on it, create a new layer, and then draw a Reflected Gradient from the top-left corner to the bottom-right corner so that it's light in the middle and dark on the corners, as shown.

Step 15

Next, I grabbed a large fat Dodge brush and lightened diagonally across a little more as shown.

Step 16

Now once again Ctrl-click the screen layer to select its pixels, then go to Select > Modify > Contract and use a value of 1px. Then in a new layer fill it with a lighter shade of dark grey as shown.

Without letting go of the selection, again go to Select > Modify > Contract and this time use a value of 2px. When you're done, hit Delete and you should be left with a thin 2px line that goes around the screen.

This thin line will let us give a bit of highlighting and shadow to the screen edges. I did this because if you look carefully at the white iMac, you'll see a similar thin line around the screen, particularly in the top-right where it's quite highlighted.

Step 17

Now grab your large Dodge brush and strategically lighten the top-right corner and a little on the right-hand side and the top. Experiment with where it seems appropriate to highlight.

Step 18

Now switch off the black screen layers for a moment, so you can see the white screen behind. Then, in a new layer, use the Rounded Rectangle Tool with a very slight curve this time (I used 2px) to draw a rectangle where the display area is, as shown.

Step 19

Now you can switch the rest of the screen layers back on. Now Ctrl-click the display layer we just created, then create a new layer on top, go to Selection > Modify > Contract, and use a value of 2px. Fill this new area with straight black.

As you can see, what happens is the first display layer we created is actually a highlight around the main display area. If you look at your screen, chances are you'll be able to see a bit of this. If you wanted to make this very realistic, you could use a bit of Dodge and Burn to darken and lighten it appropriately. But for our purposes this will do!

Step 20

Next I placed an image on the screen. I wanted a nice abstract Mac-type background, and fortunately for us, we have a PSDTUTS tutorial on this. I basically just used the output of that tutorial, except I modified the coloring to be green. You can use whatever you want. Just place the image and press CTRL+T to transform it down to the right size. You might need to crop the image to make it fit.

Step 21

Now iMacs always have those little cameras at the top, so next I made a circular selection around the camera in the white iMac photo and copied it over and placed it in the same position in a new layer above the other black iMac layers.

Step 22

Now we need a dock! Once again I just went to Google and found a screenshot of someone's desktop, cut out the dock using the rectangular selection tool, and pasted it on top. The only problem is the background is blue! So we need to adjust that to green before we finish placing it.

Step 23

So I used the Magic Wand Tool (W) and clicked in the blue area to select it all. Then hold down Shift and click in any areas that get missed, like inside the Quicktime symbol. Basically make sure you get all the pixels. It's not terribly important for it to be a really nice selection because we'll be shrinking this down--thank goodness, because otherwise we'd have to use the Pen Tool!

Once you have the selection, go to Image > Adjustments > Hue/Saturation and move the Hue slider until it hits a light green color that roughly matches the green background (or matches whatever background you used).

Step 24

Now we place that dock over the wallpaper and press Ctrl+T to transform it down.

Next we need a little Mac logo to stick on the screen. Once again I found an image using a regular Google image search. This one is a nice silver color which should work well.

Step 25

The problem, however, is that there is a shadow behind the logo that we don't want. So grab the Pen Tool and trace out the edges of the logo as shown. When you're done, right-click and choose Make Selection, then press Ctrl+C to copy the logo out of its shadow background.

Step 26

Now to place the logo, switch off all the black layers so you can see your white iMac guide image again, then shrink down the logo so it roughly matches the size and position of the logo on the machine. Then switch back the black layers again!

Step 27

Almost there now!

Next we create a subtle reflection to make it look like the iMac is really standing there. So duplicate the stand layer, press Ctrl+T and rotate it 180'. Then fade the layer out to 20% and add an adjustment layer as shown so that it fades off into nothingness.

Step 28

Next we're going to add a really subtle shadow beneath the iMac as well. So draw an ellipse as shown in dark grey.

Step 29

Now fade the ellipse shadow out to about 20% opacity and go to Filter > Blur > Gaussian Blur and use a value of about 10px to get a good blur. When you've done that, hit Ctrl+T to transform and squeeze the shadow vertically only (so that it's not so tall, but remains the same width). We do this so that the shadow looks like it's on the same plane as the table or whatever the iMac is on.

Step 30

And we're pretty much done! I moved the iMac off to the side and added a bit of text to finish it off. In case you're wondering, the typeface is Myriad Pro Semibold which looks quite similar to the typeface that Apple uses (though not quite the same, unless I'm mistaken).

Conclusion

So there you have it, we have created a new look for the iMac! In the Sample PSD for this tutorial, I've included both the PSD for this tutorial and the original one that I created some months ago which is pretty similar but a lot larger and with some minor variations. Hope you enjoyed the tutorial!


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. ASJ December 7th

    That is fantastic!


  2. michael brito December 7th

    looks pretty cool. what i would like to see is a silver imac like to old powerbooks, that’d be champion.


  3. Brian Purkiss December 7th

    That is so cool….


  4. aj December 7th

    cool, never thought of that;p love the color black:)


  5. Arik December 7th

    Very nice tutorial, reminds of some of the ‘olskoo’ tutorials that were around a few years ago. You don’t see this all that often anymore.


  6. drx December 7th

    wow! looks so real


  7. Joefrey Mahusay December 7th

    Wow! Cool tutorial, I love it!


  8. Gino December 7th

    Amazing as always. I love how its do detailed even down to the little tiny web cam. This tutorial could work as a guide to recolor any product!


  9. Joe December 7th

    I can definitely see using this technique one day! Good stuff.


  10. Andrew December 7th

    I want one!


  11. Diego December 7th

    This looks suspiciously Vista-like! I bet the Microsoft guys went through a similar process to “create” the Vista look.


  12. I Haagen I December 7th

    Nicely done =] This technique can be used to make many gadgets


  13. pat December 7th

    Apple has a variation of Myrid Pro. slightly different Kerning pairs and weight. Hard core Type-Nerd and Apple fanboys would be hard pressed to tell the difference at screen resolution.


  14. pat December 7th

    Myriad pro…. rather.. .


  15. James December 7th

    You’re missing the menu bar at the top of the screen. :P


  16. Zach December 7th

    Awesome tutorial as usual. Maybe Apple should contact you about designing their promos. Awesome graphic. I’d love a custom colored laptop.


  17. Hamish M December 7th

    Great Job, Collis! There are some great techniques in this tutorial — and the end result is great!


  18. Mykii December 7th

    Hahaha, thats awesome, I googled it and yup… a BUNCH of your picture comes up!!


  19. James F December 7th

    You are my God! Amazing tut, good job!


  20. Eric December 7th

    Good good good… of course. :)


  21. pax December 7th

    Everything looks nice, except the iSight Camera. That one looks weak, but the rest is nice!


  22. Hooper December 7th

    Professional!

    Great job!

    Great web site!

    I check it out everyday!

    Thanx!!!!!!!!!!!!!!!!


  23. Brian December 7th

    Quite possibly the best tutorial I have seen - I love macs. I am going to go try and do this right now, absolutely beautiful and stunning.


  24. Constantin Potorac December 7th

    All the apple fans form out there say:

    Thank you Collis for the tut :)

    Also I can’t wait for my new iMac to arrive. :D


  25. AkzFire December 7th

    That is just amazing! Its great how you can just look at something and create an exact duplicate with your own modifications. Wow, simply wow! I’m gonna have to try this this weekend. ^_^


  26. bintek December 7th

    great tut Collis!


  27. Mark Abucayon December 7th

    I like this tuts, very useful… cool- Collis rocks thanks


  28. hkysj December 7th

    so cool


  29. PooM December 7th

    Awesome tut man! Actually looks like a real Apple advert too!


  30. Zenor December 7th

    Awesome (:


  31. oreo December 7th

    great tutorial!
    btw the exact font that Apple use is
    Myriad Apple, which is a slight twitch based on Myriad Pro
    in case you didn’t know.


  32. reezluv December 7th

    wow..what a nice tutorial..awesome


  33. Mr_LeE December 7th

    Collis you are a genius. Wish i worked for you. :)


  34. Christoph December 8th

    mac - come over to the dark site.


  35. Dannie December 8th

    Very good tutorial; however you’re missing some texture to the black surface. It looks like a photoshop gradient too much. Still top tutorial :) thanks.


  36. g0bez December 8th

    Total fake — PHOTOSHOPPED!!!

    heh… nice work!


  37. Mr.doob December 8th

    The reflection is wrong. Apart front that… nice :)


  38. Frank December 8th

    Myriad Pro is, in fact, the font Apple uses. You’re right!


  39. Thiru December 8th

    Very useful tutorial


  40. Thomas December 8th

    Hm…it’s a nice tutorial, but the resulting image just isn’t convincing. Nice attempt though, as I couldn’t do any better.

    P.S. How can I prevent the pen tool from simulating the resulting shape with every added point? This is really getting in the way because it often blocks out the image I’m tracing with the selected fill color.


  41. Νestoras December 8th

    thanks for this great tut. absolutely fantastic. Going to try soon


  42. sasha December 8th

    Great ,but this can be done with different approach in photoshop i mean faster….You can use for apple screen rounded rectangle tool and work with softh brush for black effect,also for logo you can use font on dafont.com for mac logo and do some paint with gradients,screen stand can be finish usign pen tool ;)..this is great tutorial but i guess hard for non-advanced users in photoshop…


  43. Dennis Plucinik December 8th

    Great tutorial. This really is a simple task for any experienced user but again - your tutorial looks great, reads well and strikes a nerve with a fanatic audience. You ought to consider writing an article on how to write a Photoshop tutorial because there are plenty of people who could use some guidance with that.

    Also I want to mention how nice it is to see proper Photoshop techniques being used. I’ll look forward to my getting next fix. Thanks again!


  44. Dennis Plucinik December 8th

    … I know it’s a couple months late but congrats on the 11k lol.


  45. Sebastian December 9th

    nice…


  46. Mark Abucayon December 10th

    very impressive tut.. Thanks again..


  47. kira December 10th

    That’s very nice. Creative. Thanks for the tutorial. =)


  48. rakzo27 December 11th

    Nice Tut, but… where is the HD icon? x xD


  49. Mr K December 11th

    Of course you could have simply used “inverse” in photoshop to turn the mac black and then put the image in the screen etc.

    Still a great tut :)

    Keep em coming


  50. Jonker December 11th

    Step 27: looks more like a layer mask then a adjustment layer to me.

    But a great tut anyway! Very well explained and displayed.


  51. faisal khan December 11th

    its Good & Cool :)


  52. Tymo December 11th

    Extra points for the gratuitous rock reference!


  53. Ahmadِ December 15th

    Very gooOood
    Thank you :)


  54. krazy3 December 16th

    This is really nice. Apple should start making these :) I’m a windows fan, but I’d buy one :)


  55. luke de duke December 20th

    very nice! but you forgot the menubar


  56. RAFi December 21st

    Very nice. ;-)


  57. PhilFreelance-Web December 24th

    A very nice tutorial… Nice one… hope you can contribute more on web 2.0 layouts


  58. chibone January 5th

    That will be cool to actually have a black iMac


  59. mohd January 7th

    that’s very nice tutorial thans so much


  60. Keast January 7th

    Nice! The only thing bad about it is that we can see your email adress (step 5 ;).


  61. Talkingtofu2 January 10th

    I luv it!!!

    I Need One Of Those Macs Too


  62. Jeba January 14th

    Hi,

    You could have easily achieved this effect by using Hue/Saturation :)

    Nice tutorial


  63. andy stewart January 14th

    http://www.andystewart-design.com


  64. shahram January 20th

    great job but i do not like mac !!!!


  65. Steake January 20th

    Good , but could be achieved more painlessly


  66. bratwurst January 29th

    u rule


  67. Richard February 5th

    Great job there mate, must have taken you a while that!


  68. TREZ February 9th

    YEAH, GREAT JOB, REALLY :D


  69. web design cheltenham February 29th

    good tutorial does anyone know where to purchase myrid apple font ? had a wuick hunt and could’nt find it. good turial real impressive


  70. Adam March 16th

    @cheltenham: Myriad Apple is basically a custom modification of Myriad Pro that was developed specifically for and is proprietary to Apple, Inc. No one outside their marketing/advertising team has access to it. Myriad Pro, which comes bundled with most editions of Creative Suite, is the closest font available to the public. (I’m fairly confident Adobe also retails it separately, but chances are good that if you have Photoshop, you have the font installed already). I defy anyone but the most hardcore of typophiles to detect the difference between the two.


  71. Melin March 27th

    I love this!


  72. baby_gurl17 May 1st

    WOW nice job! We do a project like this everyweek. I got to a vocational school and in my lab it is our job to design and sell our products to consumers. I just love looking at tuts and seeing what I can do. Photoshop of course is a huge help and at our school we have CS2 so it is nice. Our computers are top of the line too. We only have three macs though. One is kind of old. The other two are 2007 macs. Well anyway great tut. I learned a lot and to put it simply you did a wonderful job on copying the mac. We havent’ done anything this advanced though . The first week of school we had to copy out dell mouses and most people forgot that the E in the dell logo is turned and connects the D and L together. other than that everybody did a good job! Keep those tutorials coming!


  73. Al'Deny May 4th

    nice job =) awesome ^^


  74. Fasih Ullah May 26th

    Hey

    Great | Great |Great tutorials i love that effects


  75. serpentemx September 4th

    Great tut guys!! thanks


  76. dinesh October 6th

    very interesting :) Thanks for sharing.


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name December 5th

Arrow