In this tutorial we will be showing you step-by-step how to create a photo realistic illustration of Apples latest crowning achievement, the beautiful and inconceivably thin new MacBook Air.

The finished result

Step 1

We start off, with a new document; its size set to 1000 x 750 pixels, an increased resolution of 120 pixels and a white background which we’ll delete later for a transparent background.  First off, switch the foreground colour to #eff0f2. Now, select the Rounded Rectangle tool (U) and on the tool’s Options bar, set the rectangle’s radius to 20 px and click on the little square icon “Fill Pixel” to automatically fill the shape to be drawn. Draw a rectangular shape and name the layer ‘Panel.’

Step 2

Double-click on this layer to add Layer Styles to the shape. Select the Gradient Layer style and adjust the Gradient’s Color Stops and other parameters as shown below:

Follow up with an Inner Glow Layer style and make the necessary adjustments as shown below:

The Layer styles result for a reflected effect.

Step 3

Create a new layer under the previous layer and draw another rounded rectangle just slightly larger than the first. Also have the shape’s radius set to 22 px.

Step 4

With the Burn Tool (O) selected and its Exposure set at about 50%, darken selected edges of just the second rectangle.

The burn result:

Step 5

Being on the ‘Panel’ layer, select the Rectangular Marquee Tool (M), and make a selection across the rectangle and hit the Delete key to clear the selection.

Press Ctrl+D to ‘deselect.’

Step 6

Back to the second rectangle, add an Outer Glow Layer style.

The result has the edges of the panel defined.

Step 7

The panel appears too smooth here, we must add a subtle touch of grain to it by applying a Noise Filter effect (Filter > Noise > Add Noise).

Step 8

In a new layer, draw a rectangle for the screen and fill with the colour #828384. I also enabled the Guides (Ctrl+’) to aid my positioning of the screen.

Add a Stroke Layer style to it. Afterwards, add a Guassian blur with a raduis of 1.5 pixels to the rectangle. It softens the Stroke effect a bit which previously was too sharp. This will form the backdrop upon which the main screen will be placed later.

Step 9

For the flat base of the Macbook, select the Pen Tool (P) and click with the tool to create these Anchor points as shown below.  You may also use the direction keys on your keyboard to conveniently adjust the positioning of selected points.

Step 10

For a little gloss for the base of the laptop, add an Inner Glow, Inner Shadow and Gradient Overlay Layer styles with the settings below:

The result:

Step 11

Draw a 2 px rounded rectangle right on top of the base to form something of the rim on the base. Burn its edges sparingly on both its ends.

The new outlook of the base:

Step 12

Add a soft shading to the rim applying an Inner Shadow Layer style with a reduced opacity of 45%.

Step 13

Pick the Pen Tool yet again and map out an outline shown below. This is to form a shallow inward curvature on the base of the Macbook.

Step 14

Fill the outline by right-clicking within it and selecting ‘Color.’

Step 15

Apply both a Gradient Overlay and Inner Shadow styles to create a resulting appearance of an inward curve,

Step 16

For th hinges of the Macbook, use the Rectangle Tool to draw a flat rectangle and then fill with a white colour.

Step 17

Set up both Gradient Overlay and Inner Shadow Layer styles for the hinges with the parameters below:

Step 18

Saving time drawing a second hinge, just press Ctrl+J to duplicate the ‘Hinges’ layer and position the hinge copy to the right of the Macbook.

Step 19

With a rounded rectangle set at 2px, draw an opening or slot on the right of the Macbook and fill with a black or if your Tool’s shape has “Fill Pixels” set on its Options bar, just hit ‘D’ on the keyboard to set the foreground colour to black before drawing.

Step 20

Select the Type Tool (T) and bring up the Character Panel (Window > Character) to make other adjustments not available on the Type Tool’s Options bar. Set the Font to Verdana ts size to18 pt and color to #4b4b4b. Also use the scaling options to scale vertically and horizontally at 41% and 31% respectively. You’ll get something almost close to the real thing.

Step 21

For the web cam, use the Ellipse Tool to create a small circle holding Shift to constrain its portions and fill with black. Add a soft glow around it with an Outer Glow Layer style.

Step 22

Follow up in a new layer, with two other small round points. Of course, adding an Outer Glow Layer style as well.

Step 23

For a nice and shiny screen complete with abstract graphics, we will creating create something intricate. Select the Rectangular Marquee Tool and make a selection and then pick the Gradient Tool (G) and change the Color Stops of the Gradient. Make a diagonal sweep across the selection with the Gradient Tool.

Note: place or resize the screen within the grey rectangle in a way a thin margin is formed around the screen.

Step 24

For other elements within the screen, use Polygonal Lasso Tool (L) to create the shapes below. You can on the Tool’s Options bar, select “Add to selection” to create multiple selections. Fill the selection(s) with the colour #e2eef2 using the Paint Bucket Tool (press Shift+G if not already selected). Ctrl+D to deselect afterwards.

Step 25

On the Layer Palette, reduce the opacity of this layer to about 70%. Proceed to add a Layer Mask by clicking on the third icon from the left at the bottom of the palette. Fade the shapes with a black soft brush. You’ll also have to vary the brush’s opacity when fading certain areas of the shape.

Step 26

With the Elliptical Marquee Tool (Shift+M if not already selected), create a flat ellipse selection. Fill with #e2eef2 and on the Layers Palette, set the layer’s Blend mode to Soft Light and Opacity to about 38%. Create another Layer Mask and with a brush (Opacity; 25%) fade the base
of the ellipse.

Step 27

Create two other ellipses in a similar fashion as the previous steps. Again, use the Polygonal Lasso Tool to create another shape and then fill. Right-click and select Transform Selection and then select the Warp Transform Tool to make a curve on one side of the selection.

Step 28

Hit Enter when through and of course, set the layer’s Blend mode to Soft Light and reduce its Opacity to about 85% and add a Layer Mask to make the necessary adjustments.

Step 29

As always, create a triangular selection with the Polygonal Lasso Tool and fill with the usual colour.

Step 30

For a curve, Use the Warp Tool in Free Transform mode.

Step 31

Change the layer’s Blend mode to Soft Light and Opacity to about 58%.

Step 32

The Polygonal Lasso Tool for another shape - you should know the drill by now; fill, warp and deselect!

Step 33

The layer’s Blend mode here is set to Soft Light definitely and its, Opacity reduced to about 62% as you see fit. You might as well create group your shapes for organization and reducing excessive scrolling within the Layers Palette. Select the little folder icon at the bottom of the palette and drag your shape layers into it and collapse it.

Step 34

Select the ‘Screen’ layer and add the Layer styles, Inner Shadow and Outer Glow making the following adjustments below:

Step 35

As an option, you may download one of the numerous Mac OSX icon set for windows. These images were in JPEG format and were edited in a separate window and moved to the working document. Like I said, you may skip this step as its okay for the ‘Air’ to be clutter free.

Step 36

Create a new layer, ‘Shadow,’ below all other layers and with the Ellipse Tool, draw a very flat ellipse.

Step 37

Go to Filter > Blur > Gaussian Blur and set the Blur Radius to 3.5pixels.

Step 38

Draw a rounded rectangle and Press Ctrl+T to enter Free Transform mode and select the Distort Tool and splay the shape outwards. B. Add a Layer Mask and with its thumbnail selected, use a Gradient Tool (black to white) to draw  a vertical gradient.

There you have it, a slick and realistic Macbook Air to say the least.

A Macbook image without the dock. This might be the ideal icon; though it all boils down to your preference eventually.

Also delete the background layer for a transparent layer.

Here’s a rather bland but clean Macbook Air icon.

Downloads

Photoshop PSD file
png files

For today’s news we have collected our favorites design and development related freebies from the the past week and thought they were that good, that we simply had to share them with our readers.

“Buddycons” – Vector Social Media Icons

The icon set is called “Buddycons” and includes 126 vector social media icons. Included in the set are PNG versions of all 126 icons in both circular and rounded variations as well as a vector source file for easy resizing. The icons are free to use for personal and commercial usage, however, redistribution is not allowed.
“Buddycons” – Vector Social Media Icons

Free PSD Templates: vCard Personal Portfolio Minisite

This PSD design comes in 4 pages: Homepage (About), Works (Portfolio), Portfolio Pop-Up, and Contact.
All the pages are in Photoshop (.PSD) format with all layers neatly organized in layer groups for easy identification and editing of the logo, text and graphics.
Free PSD Templates: vCard Personal Portfolio Minisite

Modernist: Free WordPress Theme with Focus on Typography

This theme supports widgets, is SEO optimized and has clean and documented code. It loads very quickly, and has various WordPress 3.0 features. Works in IE 6+ and all versions of Safari/Firefox/Opera. The theme is absolutely free to use in private and commerical projects.
Modernist: Free WordPress Theme with Focus on Typography

Typominima: Free typography based minimal WordPress theme

Typominima is a free typography based, gorgeous, minimal WordPress theme fit for the writer inside you.
Typominima: Free typography based minimal WordPress theme

Coda Shortcuts Cheat Sheet (PDF)

Coda Shortcuts Cheat Sheet (PDF)

By Paul Andrew (Speckyboyand speckyboy@twitter).

There are not many iconsets that can match the quality nor the quantity of icons that we feature in todays design news roundup. The first set, released this week by WPZOOM, has over 500 icons for every social network service you could possibly think of. And the second set, also released this week, has over 170 crafted icons perfect for web design brought to you by WooTheme.

500 Free Icons Social Networking Icon Set from WPZOOM

This awesome icon set includes 100 icons of popular social networking websites. Every icon from WPZOOMs Social Networking Icon Set is available in 5 different sizes: 64×64, 48×48, 32×32, 24×24 and 16×16px (PNG & PSD format), which means you get 500 beautiful icons!

You are allowed to use these icons anywhere you want, however WPZOOM would appreciate linkback.
500 Free Icons Social Networking Icon Set from WPZOOM

WooCons – 170 Free Web Icons

This huge icon set, designed by Janik Baumgartner exclusively for WooThemes, consists of 170 icons, sized at 32x32px and are in PNG format.

This icon set has been released on the GNU General Public License.
WooCons – 170 Free Web Icons

By Paul Andrew (Speckyboyand speckyboy@twitter).

Nothing gets a web designer more excited than a good high quality and (especially) FREE icon set. And that is exactly what we have for you in today’s design news round-up.

You will find five fresh sets that that are perfect for web and mobile app developers, and all are completely free.

200+ Exclusive Free Icons: “Reflection”

You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.
200+ Exclusive Free Icons: “Reflection”

Free Mobile Berries

This set contains 80 icons, sized at 64x64px and are in .png format.
Free Mobile Berries

Content Management System Icon Set

This CMS Icon Set is made up of 12 high quality icons sized at 48×48px, and available in .png-format. The set was designed to be used in content management systems, but can also be useful for other user interface designs. You can use the set for all of your projects for free and without any restrictions.
Content Management System Icon Set

Designer Icons – Professionally Hand-Crafted Free Icon Set

12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32x32px with a transparent background.
Designer Icons – Professionally Hand-Crafted Free Icon Set

Tron Legacy Social Icons

This social media set has been inspired by the classic movie Tron. In total there are 20 icons, and the download package has the PNG, BMP, GIF, ICO and AI versions.
Tron Legacy Social Icons

By Paul Andrew (Speckyboyand speckyboy@twitter).

Icons are one of the most sought after design elements within web design, and the great thing is there is no shortage of new and creative icon sets that are freely released for general consumption and satisfy our design appetite. In today’s news round-up we have collected five fresh icon-sets specifically designed for web designers, developers and bloggers.

gCons – All-Purpose Icons for Designers and Developers

gCons are a set of free all-purpose 32×32px icons for designers and web developers consisting of 100 icons. The icons come in 12 different colors and are available in PSD, PNG, JPG and GIF formats.
gCons – All-Purpose Icons for Designers and Developers

PixeloPhilia2

This set contains 44 beautifully crafted icons designed specifically for software and web developers.
PixeloPhilia2

ComFi Telecom Icons

ComFi Telecom Icons

Sketchy Social Media Icons

Every icon in this set are in .PNG format (making them easy to edit) and include four sizes for each icon: 16×16, 32×32, 48×48, 57×57.
Sketchy Social Media Icons

Rubber Stamp Style Social Media Icons

The Rubber Stamp Style Social Media Icons set contains 12 creative icons in .png format and sized at 256x256px.
Rubber Stamp Style Social Media Icons

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have two free large sets of beautifully crafted mini pixel icon-sets designed especially for web designers.
The first set (the spirit20 icon-set) has well over 500 icons for your every possible design requirement and the second set, Boolean, consists of 100 icons, all presented in a highly unique way. You’ll love them both!

spirit20 Mini Pixel Icons

The spirit20 icon set consists of almost 500 transparent PNGs at 20×20 pixels, and is completely free to use for both personal and commercial projects. No attribution is required.
spirit20

Boolean: The Pixel Icon City

Boolean: The Pixel Icon City set consists of 100 icons, all in PNG format and sized at 16×16px. These icons are licensed under Creative Commons Attribution 3.0 license.
Boolean: The Pixel Icon City

By Paul Andrew (Speckyboyand speckyboy@twitter).

Is there no end to CSS3s possibilities? In the past, would you have even considered the idea of generating a font based on an icon set, and then embedding it via @fontface? Or, even better, would you have thought it possible to create icons using only CSS and HTML? I didn't think so…

Ever Thought About Using @Font-face for Icons?

With the advent of font embedding and the realization that fonts are essentially a series of simple vector glyphs. Conceptually, if you placed all required icons for a particular site into a custom font, you would then be able to use those icons anywhere on the site with the option to change the size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text.
Ever Thought About Using @Font-face for Icons?

Font-Embedding Icons: This Is a Big Deal

From P.J. Onori's (resource author) view, it seems like the Font-Embedding Icons are the way forward. So, he generated a font set based on his personal icon set Iconic, and writes further about how to implement the icons and why we should all be using this method for displaying icons.
Font-Embedding Icons: This Is a Big Deal

Pure CSS Icons

As an experiment Zander Martineau built a set of pure CSS Icons, using lots of CSS3, border-radius being the most obvious but also rotation, gradients and transform (for when an icon is hovered over) and all dimensions are em-based so that all you have to do to change the size of the icon is just change the font-size of their containing element.
Pure CSS Icons

By Paul Andrew (Speckyboy and speckyboy@twitter).

There are hundreds and hundreds of social media icon-sets that you can choose to download. Most of the icon-sets are pretty basic and designed to be universally used on an average blog – but what if your blog is different, and in need of some social icons that are not only creative, unique and original but also darn right odd?

Well, that’s what we have for you today, a collection of the most creative and in some ways strange social media icon-sets, which I am sure you will love.

Hand Drawn Social Media Icons

Social Network Icon Set

Free Furry Cushions Social Icons Set

Extreme Grunge Social Icons

108 Free Retro Grunge Stripes Social Media Icons

Grass Textured Social Bookmarking Icon Set

Vintage Postage Stamps Social Media Icon Pack

20 Amazing 3D social icons

Jeans Social Media Icon Pack

Glossy Waxed Wood Social Networking Icons

By Paul Andrew (Speckyboy and speckyboy@twitter).

Graphical icons offer an opportunity to project to the user an instantly recognizable message – that is something that would normally take an entire paragraph of words. Of course the icons need to be well designed in the first place to successfully convey your message effectively.

In today’s news round-up we have five fresh tutorials that are both easily recognizable and certainly well designed.

How To Create a Detailed Apple iPad Icon in Photoshop

The Internet world exploded with the news of the Apple tablet launch last week. Named the iPad, it’s set to bring yet another revolution to the way people access and browse the web. An iPad icon would be a sensible addition to any web designer’s resources toolbox, so let’s fire up Photoshop and create our very own detailed iPad icon graphic.

How To Create a Detailed Apple iPad Icon in Photoshop

How to Create a Shiny Paint Bucket Icon

Learn how to create a simple three-dimensional icon of a paint bucket, complete with paint splotches, with this colorful tutorial. Harnessing the power of paths, layer effects and consistent lighting you'll obtain an effective, shiny icon.

How to Create a Shiny Paint Bucket Icon

Design Monitor Icon in Photoshop Video Tutorial

Design Monitor Icon in Photoshop Video Tutorial

How to Make a Professional Buddy Icon in Photoshop

In this intermediate-level tutorial, you'll be shown how to make an awesome icon from scratch using Photoshop. You will need basic knowledge of Photoshop and familiarity with the Pen Tool (P).

How to Make a Professional Buddy Icon in Photoshop

How to Create a Photo Frame Social Icon Set in Illustrator Tutorial

In this Illustrator tutorial you will learn how to create a social bookmarking icon that is wrapped in a photo frame and might just be good enough to hang on your wall.

How to Create a Photo Frame Social Icon Set in Illustrator Tutorial

By Paul Andrew (Speckyboy and speckyboy@twitter).

It does not matter how creative and efficient you are within Illustrators environment. It doesn't even matter if you have 50 years or even 5 days graphic design experience… there is always room to learn a new technique.

In today’s news round-up we have collected ten of the best and freshest Illustrator tutorials to do just that, learn something new and maybe help inspire you for your next art project.

Cafe Style Coffee Art in Adobe Illustrator

In this Illustrator tutorial, the author will explain how he created the "Delicious Coffee" illustration which was published in "1000 Restaurant, bar & café graphics" by Rockport Publishing.

Cafe Style Coffee Art in Adobe Illustrator

How to Make Super-Sharp, Vector Swords

In this tutorial you'll be shown to draw a sword in Illustrator, using the Rectangle Tool, gradients, and other Illustrator tools.

How to Make Super-Sharp, Vector Swords

How To Create A Slick IPod Icon Using Illustrator

This is a great little illustrator tutorial form Creative Nerds, which shows you how to create an iPod icon using Illustrator.

How To Create A Slick IPod Icon Using Illustrator

Create An Editable Metal Type Treatment in Illustrator

This tutorial is pretty similar to the Letterpress Font and Sketchy Font tutorials in that it uses the Appearance panel to create a type treatment that is fully editable when it is done.

Create An Editable Metal Type Treatment in Illustrator

Create a student character mascot with Adobe Illustrator

This is an intermediate Illustrator tutorial level where you can learn how to create a vector student character mascot from a sketch in Adobe Illustrator. The techniques can easily be applied to other character design, illustrations or icons.

Create a student character mascot with Adobe Illustrator

Create an Illustration of a Pearl-Filled Clam on an Ocean Bed

In this tutorial, you'll create a shell with pearls in a unique ocean scene, using various effects, such as: mesh, blend, warp, clipping mask, opacity mask, depth of sharpness, editing of swatches, and pathfinder box.

Create an Illustration of a Pearl-Filled Clam on an Ocean Bed

Free Adobe Illustrator Tutorials

In this tut you can learn hot to take advantage of Illustrator’s live effects and create a 3D pie chart to represent your data.

Free Adobe Illustrator Tutorials

Creating a Surrealistic Hand-Drawn Illustration

In this tutorial, you'll learn how to create a surrealistic illustration using fine liners, marker, an economic all in one printer, Illustrator and Photoshop.

Creating a Surrealistic Hand-Drawn Illustration

How to Create a Cute Vector Bear T-Shirt Design

In this Adobe Illustrator tutorial you will learn how to design a cute bear character and surrounding scenery in just two colours, ready for use as a cool t-shirt design.

How to Create a Cute Vector Bear T-Shirt Design

By Paul Andrew (Speckyboy and speckyboy@twitter).