New Imac Mini Icon Design Tutorial

In this detailed tutorial I’ll walk you through the process of creating a realistic looking new imac mini, you’ll be able to use the imac as an illustration or an icon. In this tutorial you’ll be getting to grips with photoshops shapes and smart objects.

In Icon Design

What We’ll Be Creating

New Imac Mini Icon

Resources Used In This Tutorial

For this tutorial I’ve gone ahead and pre-made the Apple Logo for you to use, you can get it from the link below.

Lets Get Started, Creating Your Document

Create a new document (Ctrl + N) 800 x 600 pixels with any background color. Select the gradient tool (G) with a linear gradient as your gradient type.

New Imac Mini Icon Tutorial

Drag the linear gradient from the top of the canvas down towards the bottom.

Quick Tip:

Holding down the shift key on keyboard whilst dragging will ensure the gradient is 100% vertical.

Use the color #878787 as your foreground color and #ececec as your background color. You should have something like this.

New Imac Mini Icon Tutorial

Creating The Imac Mini Top

Select the rounded rectangle tool (U) with a radius of 40px. Make sure your selection type is set to shape layers.

New Imac Mini Icon Tutorial

Drag out the rectangle in the middle of the canvas, once your happy with the rectangle go to “Edit > Transform > Skew” and/or “Edit > Transform > Distort”. Distort/skew the rectangle until you have something like this.

New Imac Mini Icon Tutorial

Now that you have your rectangle label your layer “imac top” then right click the layer and go to “Convert To Smart Object”.

Quick Tip:

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.

Double click the “imac top” layers thumbnail from within the layers window.

New Imac Mini Icon Tutorial

Once you’ve double clicked the thumbnail a new canvas should open containing your shape. Double click the actual layer and add the following layer styles to your shape.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

Close the recently opened canvas saving on exit. The layer styles you just added should now be reflected in your original canvas. Were now going to add some noise to the “imac top” layer, make sure the layer is selected in the layers window then go to “Filter > Noise > Add Noise”. Use the settings below.

New Imac Mini Icon Tutorial

Creating The Imac Mini Front/Bottom

Right click your “imac top” layer and select “New Smart Object Via Copy”. Double click the thumbnail on the layer to access the layers original content, once the canvas has opened right click the layer and go to “Clear Layer Styles”. Once the layer styles have been cleared exit and save.

Rename the duplicated layer “imac bottom” then drag the layer to the bottom of the stack above the background layer. Select the move tool (V) then move the “imac layer” downwards a couple of times.

New Imac Mini Icon Tutorial

Double click the “imac bottom” thumbnail to access the original content then select the rectangle tool (U) with the following settings.

New Imac Mini Icon Tutorial

Zoom in onto either the left or right bottom corners of the shape then select the shape whilst holding down the Ctrl key on the keyboard

Quick Tip:

When you click the shape whilst holding down the Ctrl key the shape selection is represented by a black 1px stroke with black anchor points.

Once you’ve selected the shape hold down the shift key on the keyboard and drag out a rectangle shown in the image below.

New Imac Mini Icon Tutorial

Repeat the same step for the other side of the shape. Once you’ve finished adding the rectangles to either side of the shape re-make the selection by selecting the shape whilst holding down the Ctrl key. Now select the move tool (V), hold down the Ctrl key and move the bottom anchor point over towards the right.

Quick Tip:

When moving anchor points and the Ctrl key is down on the keyboard the arrow allowing you to move the anchor point turns white.

New Imac Mini Icon Tutorial

Repeat the same process for the other side. You should hopefully have something like this.

New Imac Mini Icon Tutorial

Still inside the “imac bottom” smart layer double click the layer then add a gradient overlay using the settings below.

New Imac Mini Icon Tutorial

Exit the smart layer saving on exit then add some noise to the bottom layer using the same settings as we did for the top.

New Imac Mini Icon Tutorial

You should have something like this.

New Imac Mini Icon Tutorial

Creating The CD Slot

Select the rounded rectangle tool (U) then drag out a small rectangle about 430 – 435px wide. Drag the CD Slot layer above your “imac bottom” layer.

New Imac Mini Icon Tutorial

Once you’ve made the rectangle add the following layer styles to your CD slot shape.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

You should have something like this.

New Imac Mini Icon Tutorial

Creating The CD Eject Button

Create a new layer above your CD slot layer called “CD Button”, select the rectangular marquee tool (M) and make a selection about 15px wide which covers the end of the CD slot.

New Imac Mini Icon Tutorial

Keep the CD button layer selected but load a selection around the CD slot layer by clicking the thumbnail on the CD slot layer whilst holding down the Ctrl key on the keyboard. Once you’ve loaded the selection go to “Select > Inverse” to inverse the selection then hit the delete key.

Now load a selection around the CD eject button and go to “Select > Modify > Contract”, contract the selection by 1px then inverse the selection and hit the delete key.

New Imac Mini Icon Tutorial

Its now time to add the layer styles to our CD eject button.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

Creating The Light

Create a new layer called “Light” above your CD slot layer. Next to the CD slot create a 3 x 3 px circle using the elliptical marquee tool (M).

New Imac Mini Icon Tutorial

Next add a drop shadow to the light layer using the settings below.

New Imac Mini Icon Tutorial

Creating The Imac Mini Shadow

Duplicate the “imac bottom” layer by right clicking it and going to “New Smart Object Via Copy”. Drag the duplicated layer down to the bottom of the stack above your background layer, then rename the layer “Imac Bottom Shadow”.

Double click the thumbnail in the layers window to access the smart objects original content. Clear the current layer styles on the shape then add a black #000000 color overlay. Exit and save.

Select the move tool (V) then move the shadow layer down a couple of pixels so you can just see the bottom poking from underneath the bottom of the imac.

New Imac Mini Icon Tutorial

Blur the layer by 2.0px by going to “Filter > Blur > Guassian Blur”.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

Now add a layer mask to the shadow layer then drag a reflected gradient from the middle of the shadow outwards to either the left or right side of the canvas. Make sure your foreground is set to white #ffffff and background black #000000.

New Imac Mini Icon Tutorial

The shadow should blend into the background on the left and right sides of the imac.

Creating The Imac Mini Reflection

Duplicate the “Imac Bottom” Layer by right clicking and going to “New Smart Object Via Copy”. Drag the duplicated layer down to the bottom of the stack above your background layer, then rename the layer “Imac Reflection”. Now nudge down the reflection layer like the image below.

New Imac Mini Icon Tutorial

Blur the layer by 2.0px by going to “Filter > Blur > Guassian Blur”.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

Now add a layer mask to your reflection layer then drag a linear gradient from the bottom of the reflection upwards towards the top. You may need to undo and redo a couple of times until you get the look you want.

New Imac Mini Icon Tutorial

Adding The Apple Trademark

If you haven’t already, download the apple logo which i made earlier.

Drag the logo onto your canvas, re size, distort and skew into place on top of the imac mini.

New Imac Mini Icon Tutorial

Now add the following layer styles to your apple logo.

New Imac Mini Icon Tutorial

New Imac Mini Icon Tutorial

Conclusion

That’s it folks you’ve finished the tutorial, hope you’ve learned something new. You can now resize the illustration and use it as an icon without loss of quality.

New Imac Mini Icon Tutorial

Download Source File

  1. December 13, 2010 at 3:28 AM

    sleek designs … easy to follow as well … thanks for sharing — Kathleen :)

  2. January 21, 2011 at 12:39 PM

    Great design thanks

  3. April 9, 2011 at 9:11 AM

    Thanks

  4. June 24, 2011 at 6:48 AM

    Great…!
    i have saved this page to be practiced at home.
    nice to see this site.. from indonesia

  5. June 24, 2011 at 6:49 AM

    sorry, wrong website i put on the form.
    nice tutorial..

  6. The_summmer
    July 18, 2011 at 10:07 AM

    GOOD CASE!

  7. October 18, 2011 at 6:36 AM

    Nice tut

    :)

  8. nkolona
    December 23, 2011 at 9:05 PM

    wondefull box (;-o

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 8 Comments On New Imac Mini Icon Design Tutorial, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php