How to create an iMac in Photoshop Tutorial

So i decided to make a tutorial on how to create an iMac in photoshop. I really like the new 27 inch iMac and i think there great for creating any type of media content on. I'm Using Photoshop CS4 but there isn't reason you can't create this iMac in CS3, CS2, Cs or even photoshop 7. Below is a preview of what the finished produect should look like.

Tutoial Preview

Step 1.

Ok so to get started download the PSD and support files here. Open the image of the iMac in Photoshop and it should look like this. Great.

Step 2.

Next we will use the 'rounded rectangle tool' to create the body of the iMac like below. I believe the radius is 13 px. Just trace the iMac as best as possible.

Step 3.

Ok now we have created the body of the iMac we will put a linear grey graident from left to right. The colours are as below. Open up the fx and create the gradient with #999a9f to #d3d5d9.

Step 4.

Great now make sure that you set the angle to '0' and leave the rest of the settings at they are.

Step 5.

Leave location the of the gradients as normal. The gradient colour #999a9f should be at ' 0' location and #d3d5d9 should be at '100' location.

Step 6.

Now that we have created the linear gradient we can start fleshing the rest of the iMac out. Duplicate the rectangle we created and take off the styles so that the colour is black or #000000.

Step 7.

Next click on 'Layer, rasterize' then 'shape'. A message should come up asking you 'You are about to rasterize this shape' click yes. Now the rectangle is a flat pixel graphic.

Step 8.

Next make sure you turn off the first layer we created the 'body' of the iMac and then bring down the 'opacity' of the new rectangle we flattened. So that we can see the iMac. Then with the 'rectangular Marquee' tool cut the bottom of the rectangle off.

Step 9.

Now you should be looking at something that looks a little like this.

Step 10.

With the 'opacity' still down, select the 'Rectangular Marquee' tool again and cut a rectangle out. With the help of the iMac image below this should be easy.

Step 11.

Ok so far we have created this much of the iMac. Pretty cool huh? But were not finished yet!

Step 12.

The next step is to create the 'stand' the iMac stands on. To do this select the 'Pen tool' and start tracing the 'stand' of the iMac.

Step 13.

Make sure that you trace the round corners of the iMac as best you can.

Step 14.

When finished it should look like this.

Step 15.

Now open the 'fx' up and add a 'Gradient overlay' on the 'stand' layer of the iMac. The gradient should have 5 colours. The location of the colours are below.

Step 16.

The angle for this gradient is '90'.

Step 17.

Here you can see the different gradient colours and the location of each one. The first colour is #939599 and the loaction is '0'. The second colour is #b2b3b6 and the location is '14'. The third colour is #75777b and the location is '43'. The fourth colour is #d7d9da and the location is '64'. The final and fifth colour is #727377 and the location is '100'

Step 18.

You should be left with this so far.

Step 19.

Great now duplicate the layer by selcting 'Layer, duplicate layer'.

Step 20.

This is me showing we have 2 layer, when they are ontop of each other you cannot tell if there are two there. Set this duplicate layer below the original and down slightly using the arrow keys on your keyboard.

Step 21.

Great now on this new layer we just duplicated, go to 'Image, adjustments' and then 'Hue/Saturation'. Make the 'Lightness' to about +29, you can change it however you want, this is just my preference.

Step 22.

Ok now go to the 'fx' on the layer we just changed the 'Hue/Saturation' on and add a 'Drop Shaddow'. Change the 'Distance ' from '5' to '1'. Leave the 'Spread' at '0'. Next change the 'Size' from '5' to '1'. Make sure the and is set at '90'. Click ok and apply the style

Step 23.

Ok now select the 'Pen tool' again and create two small 'semi-circles' at each end of the iMac 'Stand'. Like the image below.

Step 24.

Next go to 'Filter, Blur' and then 'Gaussian Blur'.

Step 25.

Set the 'Radius' to 2.3 pixels. You can make the pixel size smaller if you wish.

Step 26.

Great now that we have created that we can start on the next part. The 'Logo'.

Step 27.

I found this little trick when i was using 'short-cuts' on mac while i was on the type tool. If your on a Mac select the 'Type tool' and select the font to 'Helvetica'. Then Alt+Shift+k'. This should produce the logo you see below. If you are on a windows machine i am sorry i don't think this will work. But you are welcome to downlaod the 'PSD' and 'support files', where you can still use the logo and it will re-size too.

Step 28.

Turn off the layers you don't need and re-size the 'logo' the same size as the one on the iMac.

Step 29.

Now arrange the 'logo' so that is it directly on top of the 'logo' which resides on the iMac. Once you are finished you can click off the 'Type tool'.

Step 30.

Ok the fun part, wallpaper. Ok i googled this wallpaper, you can grab any wallpaper/photo you like and arrange it below the 'iMac bezel' layer. Then select the 'Rectangular Marquee' tool and cut or re-size the wallapaper to the dimention of the iMac screen.

Step 31.

This is what it should look like when you have placed the wallpaper correctly.

Step 32.

What does every Mac have a Dock! I used this 'dock' which is from the 'PSD and support files' which you can download here again.

Step 33.

Re-size the 'dock' and place it at the bottom of the iMac. Align it central.

Step 34.

I added some other parts to the iMac, like the menu bar and the Hard-drive icon.

Step 35.

Duplicate all of the layers of the iMac 'stand' we created. Group then by selecting all of iMac 'stand' layers and holding (if your on a mac) 'apple+e' (if your on a pc its) 'ctrl+e'.

Step 36.

Next go to 'Edit, Transform Path' and then click 'Flip Vertical'.

Step 37.

Next Align the duplicated 'stand' layer underneath the iMac so that it looks like its reflecting.

Step 38.

Turn down the 'opacity' of this layer. Select the rubber tool and using a soft round brush erase some of the 'stand'. Gently do this. Ctrl+z or apple+z if you make a mistake and go back and try again.

Step 39.

This is what the 'stand' looks like now. It might look a un-noticeable but when we add more parts it will look good.

Step 40.

Ok select the 'Rectangular Marquee' tool and hold ctrl, or the apple key if your on a Mac, and click the 'body' layer we first created.

Step 41.

Next go to 'Select' then 'Modify' and then 'Contract'. Set the contraction to '2' pixels. Now create a new layer with the selection still active.

Step 42.

Ok now were going to create a transparent gradient. Go to the gradient tool and select a white for the foreground. Make sure you have the 'linear' gradient setting applied and apply this gradient to the layer from top to botom, like below.

Step 43.

Using the 'Polygonal tool' start by make a diagonal line and finish by turning it into a selection like below.

Step 44.

Hold 'ctrl+x' or if your on a Mac 'Apple+x' and cut the 'Transparent gradient' out. It should look like this.

Step 45.

Next simply lower the opacity of the layer '29%' or if you have a darker gradient lower the opacity more.

Step 46.

The 'Text'. Ok add the text is easy just select the 'Type tool' and choose the font 'Helvetica'. Type in the words below 'The bew 27-inch iMac'.

Step 47.

Ok create a new blank layer and move all the way to the bottom of all the layers. Next click the 'fx' and add a 'Gradient overlay' set the 'Opacity' to '14%' percent and the angle to '90'.

Step 48.

This is what the finished product should look like. Just turn off the image layer we used to make this iMac and you have one fine looking iMac which you have created. Don't forget to comment and Digg, tweet and subscibe to our RSS to keep updated. Download the 'PSD and source files' below.