45 Apple-Inspired Photoshop Tutorials

Advertisement

For years, Apple has had a huge impact on designers and graphic artists across the globe. The simplicity and sharpness of the Aqua interface in Mac OS X strongly influenced the way new products were being presented and designed. It’s not only the design of products that makes Apple’s products different, it’s also their appearance on the Web and in print.

No other company has managed to come up with such a crisp and brilliant style of presenting its recent designs as a new breakthrough innovation that will change our lives for a long time. Apple has found an extremely effective way to deliver its message to a wide audience, and Apple’s look and feel has played a major role in shaping that way.

In this post, we present a collection of beautiful Apple-inspired Adobe Photoshop tutorials. We collected them not because we are religiously in love with Apple, but because you may find these tutorials useful; for instance, if you are developing a new Mac or iPhone application or designing a concept for a new product. In these cases, you may want to consider the article on A Designer’s Guide To Icon Design For Mac OS X1. Please feel free to suggest further tutorials in the comments to this post.

Mac Photoshop Tutorials

Creating a Vector-Style MacBook from Scratch2
A long tutorial on making a MacBook Pro in Photoshop using shapes and different blending techniques.

Photoshop Tutorial Screenshot3

Create a Slick Black iMac4
What would a black iMac look like? Being a Photoshopper, you can see for yourself.

Photoshop Tutorial Screenshot5

Creating the Apple Mouse6
Simple and elegant: the Apple mouse. Create the mouse in Adobe Photoshop.

Photoshop Tutorial Screenshot7

iPhone

Apple iPhone Mobile Phone Design8
Design the modern mobile phone using these easy-to-follow steps.

Photoshop Tutorial Screenshot9

iPhone-Style Icon Tutorial10
Apple has posted some guidelines for making Web applications. Learn how to make an iPhone icon.

Photoshop Tutorial Screenshot11

How to Create an iPod Touch12
The easiest way to create an iPod Touch.

Photoshop Tutorial Screenshot13

iPhone Tutorial14
This tutorial describes in detail how to create the shapes, apply the effects, and make your own iPhone in Adobe Photoshop.

Photoshop Tutorial Screenshot15

iPhone GUI PSD16
A Photoshop file that has a fairly comprehensive library of elements, all fully editable. More iPhone GUI source files at iPhone PSD Vector Kit (Photoshop)17.

Photoshop Tutorial Screenshot18

Designing for the iPhone: Resources19
Here are some resources to get you going with your iPhone design project.

Photoshop Tutorial Screenshot20

iCons and the Web

Create the Glass-Shelf Dock in Leopard OS21
In the new MAC OS X Leopard operating system, the application bar has a new sleek look. This tutorial shows you how to create the glass-shelf dock used in the OS.

Photoshop Tutorial Screenshot22

Apple Leopard Text Effects23
The Apple operating system’s GUI for Leopard shows an “inset” effect for text, along with a new chrome finish for windows.

Photoshop Tutorial Screenshot24

Design the iTunes Icon25
This tutorial shows you how to create the iTunes icon.

Photoshop Tutorial Screenshot26

iTune Icon27
Use various blending modes and techniques to replicate the iTune icon.

Photoshop Tutorial Screenshot28

Jaguar Style Folder29
In this tutorial, you will learn how to cover an object in a jaguar fur pattern.

Photoshop Tutorial Screenshot30

iPod

iPod Shuffle from Scratch31
In this tutorial, you will learn how to create the Apple iPod Shuffle by using an original image as a reference.

Photoshop Tutorial Screenshot32

Apple Remote33
In this tutorial, you will learn how to make a shiny Apple remote.

Photoshop Tutorial Screenshot34

Realistic iPod35
Learn how to create a realistic fourth-generation iPod.

Photoshop Tutorial Screenshot36

iPod in Photoshop37
The black version of the iPod.

Photoshop Tutorial Screenshot38

Creating an Apple iPod39
Save yourself some money and create an iPod-style image in Photoshop.

Photoshop Tutorial Screenshot40

Logo and Wallpaper

Green Apple Design41
Learn in this tutorial how to create Apple-esque wallpaper.

Photoshop Tutorial Screenshot42

Apple Wallpaper43
Learn how to design an Apple desktop theme in this tutorial.

Photoshop Tutorial Screenshot44

Apple’s Brushed Aluminum45
Create a brushed aluminum texture similar to that of Apple’s products.

Photoshop Tutorial Screenshot46

Mac – Colorful Design47
Learn in this tutorial how to design wallpaper with the Mac logo.

Photoshop Tutorial Screenshot48

Lighting Effect49
Learn how to create that effect we saw on the screen at Macworld San Francisco.

Photoshop Tutorial Screenshot50

60 Most Beautiful Apple Wallpapers51
Showcase of 60 most beautiful Apple-related wallpapers, including the Apple logo, the Mac OS X, time machine, iPods and more.

Photoshop Tutorial Screenshot52

Video Tutorials

How to Make iPhone Icons53
A five-minute tutorial on how to make icons like the ones displayed on iPhones and iPod Touches.

Photoshop Tutorial Screenshot54

iPhone55
A video tutorial on how to create an iPhone.

Photoshop Tutorial Screenshot56

Coldplay/Apple Commercial57
This is a tutorial on how to make the new Apple/Coldplay commercial in Adobe Photoshop.

Photoshop Tutorial Screenshot58

iMac59
Create the new iMac completely in Photoshop.

Photoshop Tutorial Screenshot60

Apple TV Background61
Learn how to make an Apple TV-style background.

Photoshop Tutorial Screenshot62

Creating the iTunes Icon63
Create the iTunes iPhone icon in Photoshop.

Photoshop Tutorial Screenshot64

Mac Advertisement

Create an iPhone Advertisement65
Learn how to create an iPhone advertisement similar to this Nano ad with dripping paint.

Photoshop Tutorial Screenshot66

iPod-Style Brushes67
We’ve all seen the iPod commercials: trendy and just about cliché by now. Here is a great way to simulate the silhouette style with a brush.

Photoshop Tutorial Screenshot68

I See iPod People69
It is easy to simulate the iPod ads. The first thing you’ll need is an image of someone you can extract from the background without too much work.

Photoshop Tutorial Screenshot70

Design a Coldplay/Apple-Inspired Portrait71
Simulate the beautiful effect shown in the latest Coldplay/Apple ad.

Photoshop Tutorial Screenshot72

Creating an Apple-Style Advert73
A simple tutorial that shows how to make an Apple-style advert. It uses only a couple of effects. The source pack is included here if you want all the material.

Photoshop Tutorial Screenshot74

Make Your Own iPod-Style Photo75
The Apple iPod commercials on TV: crazy silhouetted people dancing around with white iPod’s. Learn how to create your own crazy ad.

Photoshop Tutorial Screenshot76

Attack of the iPod People77
Another silhouette-style ad tutorial, with the somewhat-semi-official iPod poster palette of colors.

Photoshop Tutorial Screenshot78

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/04/04/mac-os-x-leopard-designers-guide-to-icons/
  2. 2 http://www.online-photoshoptutorials.com/2008/09/creating-a-vector-style-macbook-from-scratch.html
  3. 3 http://www.online-photoshoptutorials.com/2008/09/creating-a-vector-style-macbook-from-scratch.html
  4. 4 http://psdtuts.com/tutorials-effects/create-a-slick-black-imac-in-photoshop/
  5. 5 http://psdtuts.com/tutorials-effects/create-a-slick-black-imac-in-photoshop/
  6. 6 http://www.photoshopguidesign.com/tutorials/imouse_creating_apple_mouse.html
  7. 7 http://www.photoshopguidesign.com/tutorials/imouse_creating_apple_mouse.html
  8. 8 http://www.adobetutorialz.com/articles/2783/1/Apple-iPhone-Mobile-Phone-Design
  9. 9 http://www.adobetutorialz.com/articles/2783/1/Apple-iPhone-Mobile-Phone-Design
  10. 10 http://www.keepthewebweird.com/iphone-style-icon-tutorial/
  11. 11 http://www.keepthewebweird.com/iphone-style-icon-tutorial/
  12. 12 http://forum.crystalxp.net/index.php?showtopic=37215
  13. 13 http://forum.crystalxp.net/index.php?showtopic=37215
  14. 14 http://www.xenicore.com/index.php?option=com_content&task=view&id=14&Itemid=33
  15. 15 http://www.xenicore.com/index.php?option=com_content&task=view&id=14&Itemid=33
  16. 16 http://www.teehanlax.com/blog/?p=447
  17. 17 http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  18. 18 http://www.teehanlax.com/blog/?p=447
  19. 19 http://tutorialblog.org/designing-for-the-iphone-resources/
  20. 20 http://tutorialblog.org/designing-for-the-iphone-resources/
  21. 21 http://www.tutorial9.net/photoshop/create-the-glass-shelf-dock-from-leopard-os-in-photoshop/
  22. 22 http://www.tutorial9.net/photoshop/create-the-glass-shelf-dock-from-leopard-os-in-photoshop/
  23. 23 http://veerle.duoh.com/blog/comments/apple_leopard_text_effects/
  24. 24 http://veerle.duoh.com/blog/comments/apple_leopard_text_effects/
  25. 25 http://elitebydesign.com/design-the-itunes-icon-for-the-iphone-and-ipod-touch/
  26. 26 http://elitebydesign.com/design-the-itunes-icon-for-the-iphone-and-ipod-touch/
  27. 27 http://www.ndesign-studio.com/resources/tutorials/itune-icon/
  28. 28 http://www.ndesign-studio.com/resources/tutorials/itune-icon/
  29. 29 http://psdtuts.com/designing-tutorials/create-a-jaguar-style-folder-icon/
  30. 30 http://psdtuts.com/designing-tutorials/create-a-jaguar-style-folder-icon/
  31. 31 http://pshero.com/archives/ipod-shuffle-from-scratch
  32. 32 http://pshero.com/archives/ipod-shuffle-from-scratch
  33. 33 http://psdtuts.com/designing-tutorials/design-a-shiny-photorealistic-apple-remote/
  34. 34 http://psdtuts.com/designing-tutorials/design-a-shiny-photorealistic-apple-remote/
  35. 35 http://www.depiction.net/tutorials/photoshop/realisticipod.php
  36. 36 http://www.depiction.net/tutorials/photoshop/realisticipod.php
  37. 37 http://www.webdesign.org/web/photoshop/drawing-techniques/ipod-in-photoshop.15597.html
  38. 38 http://www.webdesign.org/web/photoshop/drawing-techniques/ipod-in-photoshop.15597.html
  39. 39 http://www.biorust.com/tutorials/detail/172/us/
  40. 40 http://www.biorust.com/tutorials/detail/172/us/
  41. 41 http://www.adobetutorialz.com/articles/2970/1/Green-Apple-Style-Design
  42. 42 http://www.adobetutorialz.com/articles/2970/1/Green-Apple-Style-Design
  43. 43 http://www.adobetutorialz.com/articles/2855/1/Apple-Wallpaper
  44. 44 http://www.adobetutorialz.com/articles/2855/1/Apple-Wallpaper
  45. 45 http://abduzeedo.com/apple-brushed-aluminum-photoshop-tutorial
  46. 46 http://abduzeedo.com/apple-brushed-aluminum-photoshop-tutorial
  47. 47 http://www.adobetutorialz.com/articles/3003/1/Mac---Colorful-Design
  48. 48 http://www.adobetutorialz.com/articles/3003/1/Mac---Colorful-Design
  49. 49 http://psdtuts.com/tutorials-effects/a-cool-lighting-effect-in-photoshop/
  50. 50 http://psdtuts.com/tutorials-effects/a-cool-lighting-effect-in-photoshop/
  51. 51 http://www.hongkiat.com/blog/60-most-beautiful-apple-mac-os-x-leopard-wallpapers/
  52. 52 http://www.hongkiat.com/blog/60-most-beautiful-apple-mac-os-x-leopard-wallpapers/
  53. 53 http://www.youtube.com/watch?v=IbVr3SNmud8
  54. 54 http://www.youtube.com/watch?v=IbVr3SNmud8
  55. 55 http://www.youtube.com/watch?v=wVT8UUZQPNM
  56. 56 http://www.youtube.com/watch?v=wVT8UUZQPNM
  57. 57 http://www.youtube.com/watch?v=ztEyIvx2xxc
  58. 58 http://www.youtube.com/watch?v=ztEyIvx2xxc
  59. 59 http://www.youtube.com/watch?v=11SACGYkf4s
  60. 60 http://www.youtube.com/watch?v=11SACGYkf4s
  61. 61 http://www.youtube.com/watch?v=arK41CUMfWc
  62. 62 http://www.youtube.com/watch?v=arK41CUMfWc
  63. 63 http://www.youtube.com/watch?v=Z4CwZnkeVSs
  64. 64 http://www.youtube.com/watch?v=Z4CwZnkeVSs
  65. 65 http://www.idotutorials.com/2008/09/29/create-an-iphone-advertisement/
  66. 66 http://www.idotutorials.com/2008/09/29/create-an-iphone-advertisement/
  67. 67 http://www.solidoxygen.com/ipodbrush.php
  68. 68 http://www.solidoxygen.com/ipodbrush.php
  69. 69 http://www.photoshopsupport.com/tutorials/jennifer/ipod.html
  70. 70 http://www.photoshopsupport.com/tutorials/jennifer/ipod.html
  71. 71 http://www.tutorial9.net/photoshop/design-a-coldplayapple-inspired-portrait-in-photoshop/
  72. 72 http://www.tutorial9.net/photoshop/design-a-coldplayapple-inspired-portrait-in-photoshop/
  73. 73 http://great-design.blogspot.com/2008/02/creating-apple-style-advert.html
  74. 74 http://great-design.blogspot.com/2008/02/creating-apple-style-advert.html
  75. 75 http://www.photoshoplab.com/make-your-own-ipod-style-photo.html
  76. 76 http://www.photoshoplab.com/make-your-own-ipod-style-photo.html
  77. 77 http://www.macmerc.com/articles/Graphics_Tips/260
  78. 78 http://www.macmerc.com/articles/Graphics_Tips/260

↑ Back to topShare on Twitter

Dirk Metzmacher is a professional Photoshop trainer and book author with over 10 years of experience. He is also the creative mind behind (Photoshop-Weblog), a blog about techniques, tutorials and resources related to Adobe Photoshop.

Advertising
  1. 1

    Very cool photoshop tutorials! Thanks ;)

    0
  2. 2

    Like it!

    0
  3. 3

    Very nice… Thanks…

    0
  4. 4

    Nice roundup Dirk…. thanks for sharing!!

    DKumar M.

    0
  5. 5

    nice list. thx

    0
  6. 6

    I stumbled across the wallpapers. There was one awesome, original wallpaper there. The starring actor in Ice Age, grabbing the Apple. What a great idea!

    0
  7. 7

    Very awesome collection!
    Might a give a few of them a go to improve some areas I am lacking!

    Cheers

    0
  8. 8

    Webanddesigners

    March 25, 2009 3:10 pm

    Create an iPhone Advertisement, Link for this tutorial is not working, think there’s something wrong with that site. None of the link on that site is working

    0
  9. 9

    What a fantistic photoshop resource – I have always appreciated the ‘apple’ approach to design and let’s face it they have always been design trend setters!! Thanks for an excellent list!

    Gordon
    (Twitter: @morayweb)

    0
  10. 10

    Yes, i have one. That all coooool

    0
  11. 11

    Wow, this is an awesome post! I’m so happy for this right now, I’m in the middle of an iPod themed poster and this will definitely help!

    0
  12. 12

    For some reason, some of the links aren’t working…

    0
  13. 13

    Wow ! Really nice stuff.

    0
  14. 14

    I believe Apple is the biggest trendsetter. Everything they create, from hardware to software, still images to video, from website to marketing collateral, everything has stunning creativity yet they all are simple.

    0
  15. 15

    Nice collection…Good Work Dirk:)

    0
  16. 16

    Incredibly useful techniques for everyday use too. Awesome.

    0
  17. 17

    Well, there’re some cool tuts I’m gonna use for sure… Thanks a LOT =)

    0
  18. 18

    Very nice selection of tutorials – thanks for compiling them.

    0
  19. 19

    Great collection, thanks alot. I have to create an apple styled Web interfave next time, so this collection went right into my bookmarks. :-)

    0
  20. 20

    nice post .. !

    0
  21. 21

    I guess some of the results look okay, but what’s the point in recreating an ipod in photoshop?

    0
  22. 22

    Great collection!

    0
  23. 23

    Is that a ‘Windows’ reflection on the top left of the mouse illustration?

    0
  24. 24

    @soully
    Though I’m not a fan of Apple, I like their graphic design. By learning how to create an iPod, you learn a lot of techniques of GFX which can be used to create a WHOLE lot of other stuff. It doesn’t necessarily have to be used to create an iPod, ya see?

    0
  25. 25

    To my mind, most of these tutorials are popular, as they are quite easy, sorry but, playing with gradients and glassy surfaces is not that challenging.
    Do we realy need those similar designs you find everywhere? Shouldnt we be creative?

    0
  26. 26

    Whenever I have to design a website that includes products, I always take inspiration from the way Apple displays their products and from their websites and interfaces. I like the simplicity of the reflections and other subtle effects to give a clean, sleek finish. I agree it’s not that challenging, but sometimes the minimalist look can be the best solution.

    0
  27. 27

    Very true! Apple has always made a style statement which everyone followed. Thanks for these pictures!
    FIJ

    0
  28. 28

    Smashing mag is really rocking !………….. another cool post.

    0
  29. 29

    Some of these are pretty week, and of a bad quality. Cant help but feel this is quantity over quality. I’d of dropped some of the low quality repeats as they ruin the tone of the article a little (for an actual designer anyway).

    Mostly, whats with those iPalm ‘apple style brushes’ ??

    0
  30. 30

    Wow simply Superb! Thanks for sharing.

    Regards
    Tutzone

    0
  31. 31

    Thanks!!

    0
  32. 32

    Cool. Now I know how to add a $500 premium to my design projects. Just add some shiny effects and slap on that Apple logo! ;-)

    0
  33. 33

    These Effects Are Stunning !!

    0
  34. 34

    Thanks!!

    0
  35. 35

    Yawn.

    0
  36. 36

    these tutorials are for men who prefer their apple computers to a girlfriend…

    0
  37. 37

    An utterly pointless article. Poor tutorials, utterly useless. Why on earth do I want to create a “vector style” macbook? Really useful in the world of corporate web design i’m sure. An article filled with shameless mac love, low quality tutorials with pretty useless results.

    This is less smashing magazine and more pixel2life.

    0
  38. 38

    Thanks once again. I love Smashing Magazine. And you know what else I love? Apple products. They produce such awesome products.

    Smashing Magazine, grazie mille!

    0
  39. 39

    I agree with winst0n.

    Way too much MAC love, and what love is shown is portrayed through poor tutorials.

    We need to move past the day when slapping an Apple logo to the finished product of a tutorial is enough to give it a feature.

    0
  40. 40

    There is too much hate in this world. If people want to show a liking/love to a particular item, let them. Because they enjoy it. Yes, sometimes people may show too much love for some thing, but hey they’re not hurting anyone. Furthermore, a tutorial for you and me may seem rudimentary, but to someone who is a beginner might find that particular tutorial useful and informative. This site is not solely for professionals. If that is one’s opinion, then it is a myopic one.

    Grazie mille Smashing Magazine!
    A piu tardi

    0
  41. 41

    rex, I never said tutorials were a bad thing. All of us have needed to learn at some point and most of us still do. Your right – its fine to show a liking / love for an item (even if its an unjustified attachment to a company) but that doesn’t warrant a feature with 45 tutorials on how to add apple logos to things, or draw apple products in various applications.

    This site aims its self at professionals. Of course its not solely for them, but we make up a big part of the user base. Im more than happy to read good, high quality, tutorials. I don’t want to have to sift though 43 other nuggets of uselessness first. Furthermore, why does the person who put the article together not understand image optimisation? Or why did they deem it sensible to use very poorly optimised images on a site used frequently by creative profesionals?

    Your content is slipping smashing, your starting to let yourselves down.

    0
  42. 42

    winstOn, you do make a valid point. After reading my post, I might have gone a little too far. I know posts and or emails can sometimes sound stronger than they are… that wasn’t my intention. Again, I do agree on some of your points… like having to sift through 43 tutorials, some of which aren’t very useful… maybe a little better editing the content on smashing’s part would do the trick. :-)

    0
  43. 43

    Great Post!
    I was expecting some apple.com inspired navigation and typography tutorials as well.

    0
  44. 44

    45 old things I found on the Internet re # version 35,000!!!
    Time to widen the scope of articles SM allow more topics.

    Perhaps then I can write one.

    0
  45. 45

    very usefull, great!

    0
  46. 46

    bof 45 tutos pour faire un iphone…

    0
  47. 47

    The ‘Create an iPhone Advertisement’ website is broken. It’s a shame, I’d really like to learn to create that kind of effect. Does anyone know of a site offering a similar tutorial? I had a quick look around but couldn’t find much.

    Any pointers would be appreciated.

    0
  48. 48

    Man! When will this Apple hype end? I don’t get it. Congrats to apple for making their brand into a religion for the masses tough.

    0
  49. 49

    Another smashing post from smashing mag :) Brilliant!!!

    Regarding Apple been a religion e.t.c they deserve everything they get, because their products are far superior in quality, functionality and value to any PC pound for pound. Seriously.

    And their cooler. :)

    0
  50. 50

    Apple superior in value and quality? Apple use the *very same* components as a pc maker does, only difference is that they wrap it in white plastic and charge double. The main reason people buy apple products is without a doubt because they’re trying to buy into this whole “im-a-hip-cool-designer” lifestyle that apple is branding themselves with. EOD. :)

    0
  51. 51

    Either that or they like a user-friendly, intuitive OS that actually works because it’s made by the same company that made the hardware.

    I used to use a PC but got tired of my os freezing, crashing, getting viruses. URGH.
    Enjoy your ctrl+alt+del, son.

    0
  52. 52

    Very cool ;) tutorial i most like apple products tutorial …cuz i’m a apple crazy :P

    0
  53. 53

    Great Post!

    0
  54. 54

    Vinícius Novais

    March 31, 2009 8:03 am

    Great post.
    I see many tutorials.
    I’m brazilian, then I don’t know English very well.
    But, I like this post very well.
    See you.

    0
  55. 55

    Stop complaining, a tutorial is a tutorial! It’s okay to love Macs! It’s okay to love your PC! Just take the tutorial for what it is and be happy – stop bitching!

    Too much time is taken up with ‘why did you use this platform or subject matter’ instead of focusing on the design!

    Don’t like it?! Make your OWN BLOG!

    0
  56. 56

    Great post. Some really cool stuff here!
    Here’s another video tute on photoshopping those iphone glass icons.
    This one creates a really nice glassy icon.
    http://www.photoguides.net/photoshopping-iphone-icons

    Thanks

    0
  57. 57

    it is very nice magazine Ilike it verymuch!!!!!!!!!!!!!!!!!!!!

    0
  58. 58
  59. 59

    This is a great post! Thanks!

    0
  60. 60
  61. 61

    I would like to know how to create the same background and effects of me.com another apple product

    0
  62. 62

    so nice and attractive tutorial contains the site which I expected, well done carry on. Really nice !! Thanks for sharing!

    0

↑ Back to top