Create a Slick Macbook - Design Your Desk - Part 3

In this third edition of PSVibes’ “Design Your Desk” series, we’re going to be taking a look at the creation of a laptop in Photoshop. More specifically, the creation of a white Apple Macbook.

In the next edition of this series, we’re going to be creating a neat set of wooden speakers for your desk, so stay tuned. Part four should be out in about a week.

Alright, as usual, the first step in creating your image is to create your canvas. I started with 673px by 500px, but pick what you want.

Next, you need to create the basic outline of your Macbook. For an outline, I used a combination of this image from Apple, and photos of my own Macbook.

You’ll note that right now, our Macbook only has four major pieces: The bottom, the keyboard & track pad area, the back of the screen, and the screen itself. We’ll add more stuff later, but this basic model will work fine for now.

Now we want to add some roundness, and correct color to the bottom of the laptop. Open it’s Blending Options, and set the Color Overlay to #f7f8fb. Then, set the Inner Shadow to 22% Opacity, an angle of -81 degrees, a distance of 2px, and a size of 8px. Once you’re done, click OK to exit the blending options.

Next we want to add a gradient to the keyboard area. Make sure you’re working with that layer, and open up it’s Blending Options. Go to the gradient tab, and apply a #dbdfe3 to #e0e5e9 linear gradient, with an angle of zero.

Now we want to apply that same gradient to the top of the laptop. Repeat the steps shown above, but this time, set the gradient style to reflected, and the angle to 90 degrees.

This step entails adding a small bit of styling to the screen. Apply a 8px Inner Shadow, with a distance of zero and an opacity of 50%. Then, add a black to white gradient, with a overlay blend mode, and an opacity of 50%.

Time to add a bit of a shadow to where the screen meets the bottom of the laptop. To do this, create a new layer below the bottom of the laptop, but on top of the screen. Then, draw a rectangle that’s parallel to the lid of the Macbook, and just a bit longer then the laptop. Fill it with black. Then, apply a 8px Gaussian Blur.

Now, select the back of the screen via Select -> Inverse, then do Select -> Inverse. Move back to the layer we created in the last step, and hit delete. Then, set the layer’s opacity to about 10%.

Let’s add the small latch to the front of the Macbook. Grab your Rounded Rectangle tool, and make a short “pill” shape that’s about 1/8th the width of the laptop. Then, rotate it to it’s parallel to the edges of the bottom of the laptop.

Now, apply the following layer style to the latch we just added:

  • Fill opacity of 0%
  • Inner Shadow: Opacity 15%, Distance 1px, Size 6px

Now, select the back of the screen, and apply a Inner Shadow, with a 30% opacity, and a size of 3px.

Then, repeat the last step, but with the keyboard area of the laptop.

Now grab your Rounded Rectangle Tool again. Set the radius to 6px. Then create a rectangle about the size of the track pad. Finally, distort it using Edit -> Transform -> Distort to the shape of the track pad, like shown below.

Then, apply the following Blending Options to the layer:

  • Fill Opacity: 0%
  • Inner Shadow: Opacity 12%, Angle -90, Distance 1px, Size 2px

Now we’re going to be adding some keys to our keyboard. Grab your Rounded Rectangle Tool again, and make a key, like the one shown below. Then, duplicate it to create a grid like shown.

Now, duplicate the bottom row down one row. Next, select the middle 6 buttons, and fill them in to create a spacebar, like shown below.

Then, using your Distort Tool (Edit -> Transform -> Distort), distort the keyboard so it’s the correct size and shape.

Now, apply the following settings to the keyboard layer.

  • Fill Opacity: 0%
  • Drop Shadow: Opacity 22%, Angle 90, Distance 2px, Size 0px
  • Inner Shadow: Opacity 100%, Angle -45, Distance 1px, Size 2px, Color #ffffff, Blend Mode Normal
  • Color Overlay: #dee3e7

Time to add your favorite background or wallpaper to the screen. Drag it into the file, and Distort it (Edit -> Transform -> Distort) it to fit the screen. Then, Copy the Layer Style from the placeholder screen, and Paste it onto the new wallpaper.

Now we’re going to add a CD drive. Grab the Rounded Rectangle Tool again, and make a short rectangle, and position it like the one shown below.

Then apply the following Blending Options.

  • Fill Opacity: 0%
  • Inner Shadow: Opacity 75%, Distance 0px, Size 4px

As with the past two tutorials, we’re going to make our laptop shiny! Create a new layer, and make a shape like the one shown below with the Polygonal Lasso Tool. Then, fill it with white.

Now select the screen layer via Select -> Load Selection, then Select -> Inverse. Move back to the shine layer, and hit delete.

To complete the shine, apply these Blending Options:

  • Opacity: 28%
  • Fill Opacity: 12%
  • Gradient Overlay: White to transparent, linear, 100% opacity

Time to Add the “Macbook” text to the bottom of the screen. Use Helvetica, with a -50 spacing, set to the color #666666. The font size will depend on the size of your image. Try experimenting until you get something you like. Then, transform (Edit -> Free Transform) the text, rotate it, to make it parallel with the screen.

The Macbook obviously needs an iSight camera. Grab the Rounded Rectangle Tool again. Set it’s radius to 2px, and make a small rectangle like the one shown below. Then, rotate it to be parallel with the screen. Finally, apply the following Blending Options.

  • Color Overlay: #2a2a2a
  • Outer Glow: Opacity 100%, Color #ffffff, Size: 3px
  • Inner Glow: Opacity: 20%, Color #ffffff, Size 4px

Finally, we’re going to add a shadow. Duplicate the layer which the keyboard and trackpad lay on, and move it to the bottom. Then, Fill it with black. Apply a 8px Gaussian Blur. Then, shift it around until you get results like this.

Ok, we’re all done! This Macbook is great for use on websites, flyers, business cards, etc. The list goes on and on. Have fun with it, and remember to keep practicing!

October 8, 2008

Great tutorial! One of the quickest and easiest i have seen! I noticed one thing. On the final “Design your desk” image, it says: “Part 2 of 7″ when this is actually part 3.

Keep the great tutorials coming!

October 8, 2008

Copy n’ paste fail.

Fixed.

NickHD |
October 9, 2008

Great tut!
Clean and simple.

The perspective on the keyboard however is a bit off.

October 9, 2008

Keyboards a little off perspective, but this is a great set of tuts… nice work!

November 6, 2008

Nice, thanks! I’m going to try it tow

December 25, 2008

Wow, awesome tut here! This is relatively short for the amount of work it *looks* like it needs.

Leave a reply