Make your own MacBook Air Icon with Photoshop
  Make your own MacBook Air Icon with Photoshop
User Tools
2D Graphics
3D Graphics
Web Design & Development
Business Applications
Business Development
Databases
Desktop Programming
Operating Systems
Video Editing
Miscellaneous
Newsletter
User Login
  • Username
  • Password
Stats
  • Tutorials: 39,018
  • Categories: 572

Photoshop Tutorials : Make your own MacBook Air Icon with Photoshop

In this tutorial we will be showing you step-by-step how to create a photo realistic illustration of Apples latest crowning achievement, the inconceivably thin new MacBook Air. 0Share 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 Related Questions * What is the easy method of learning photoshop in a step wise manner? * How to measure px in photoshop? * How to create a light streaks in photoshop CS5 in mac? * Please help me.. How can I enable to use 3D in Photoshop CS4. Cause it is disabled . I'm trying to use it but I can't. What must I do? * Can you download photoshop for free? 3 Comments * Make your own MacBook Air Icon with Photoshop | Lively Design Tuts Jan 5, 2011 [...] Direct Link [...] * Marco Slooten Jan 6, 2011 Very nice, looks pretty realistic. Only thing I would do differently is the bottom of the MBA, it looks like its curving up quite a lot. * Chicago SEO Specialist Jan 6, 2011 Great Tutorial on how to make a MacBook Icon. Thank you for sharing this information, and I love your web site. If you ever have any question regarding SEO, please let me know. Leave a Comment Logged in as Chris. Logout » Save time and make sure you're on top of things.WordPress Themes by Template MonsterQuality Coding for Creative DesignsAdvertise Here Advertise on Design Reviver 10,003 Subscribers * Subscribe to RSS Feed * Follow @DesignReviver on Twitter * Get Updates via Email (mt) mediatemple Design Reviver on Facebook Popular Questions * Fill in the blank: Design is _____? * What is your favorite code editing software? * Can you download photoshop for free? * Could you refer me to the best color scheme tools? * Do You Prefer to Code Your Site by Hand or Use a WYSIWYG Editor? * I am looking for a brand name for clothing (t-shirst, jeans...etc) and a logo.... Should be very simple. Eg.. Nike, reebok................. Thanks? * Do you ever charge a client for the actual amount of time spent on a project? * Where do you go for web design inspirations? * I designed 50 logos fro a client that first loves each one, then.... Should I fire the client? * What resolution do you recommend for an image on the web? * HTML5, CSS3, AJAX, PHP, MYSQL, APIs, js (jQuery, Mootools), .net, .psd to CMS (WP, Joomla and others), the Adobe Suite, wireframes, boilerplates, the never ending stream of tutorials and resources ... How do you begin to organise your learning? * Please help me.. How can I enable to use 3D in Photoshop CS4. Cause it is disabled . I'm trying to use it but I can't. What must I do? * What is inline style? * Do you end your URLs in a forward-slash (/) or not, and does it matter? * What top 5 things should I consider if I want a basic website now, and expect it to accommodate excellent growth in my business this year, next year, five years from now? * How to make my nose smaller? * What was the first website you worked on? * Hi, I'm want to learn web design but dont have the money to do a course right now. What web site can i go onto to start learning how to design web sites? What would be the best course to learn web design? * I need help figuring out how to allocate more memory for drupal? * Do Any of You know a Good Reputable HTML5 CSS Reset? Latest Questions * I have one header.php which has image and css. Now this header.php is place in root and there are pages that called this header.php now when this header will be include from the root it work fine and when i call this header from some child folder? * What's the best way to download an entire website into static html pages w/ all links intact (to be uploaded on a host without server side scripting support)? * License requirements for using the calendar date picker and where should it be put? * What is best css? * What is the easy method of learning photoshop in a step wise manner? * How to use layers to create an effect over sketches and other things? Thanks. * I am trying to find how other developers deal with grey gradients. I find on some monitors they appear dark, some appear near hard to see. Is there some sort or methods you deal with this for finding the appropriate gradient colors to use? * How to use brushes? * How to measure px in photoshop? * How often do you consider accessibility when developing a project? * Do you ever charge a client for the actual amount of time spent on a project? * I want to add "stylish" horizontal lines between various sub-headlines in my blog posts, how do I customize the HR tag? * What is the best free program or web-app to create stylish photo albums? * I wish to write a book of serious subject. What is the best font type to have it easy to read? Thanks. John * What's the best text editor on the mac? * Need image caption sliding hover on image as in www.zinio.com? Please provide me with the full code asap? * We are developing a tool for making dynamic websites and therefore I'm very interested in learning more about designers' preferences. What kind of a tool would really be a dream come true? * Hi, I'm want to learn web design but dont have the money to do a course right now. What web site can i go onto to start learning how to design web sites? What would be the best course to learn web design? * What was the first website you worked on? * What books should I read to learn the basics of web development? Talented Designers Wanted! We are always on the look out for talented designers willing to share their work (icons, wordpress themes, photoshop actions) or write design tutorials. By contributing to DesignReviver you’ll be financially rewarded and will gain exposure to a large audience. For more information about contributing please contact us. Recent Comments * watch superbowl online Oh my goodness! a tremendous article dude. Thanks Nevertheless I'm experiencing ... * Michael Very impressive designs...one has to wonder how they come up with them in the fi... * Magento Themes Wonderful. Especially the first and the last two are the best with unique lighti... Recent Articles * Influence of Print: Incorporating Newspaper & Magazine Layout Design * Mac App Store: Our pick of the best launch apps * Make your own MacBook Air Icon with Photoshop * Create Virtual Business Cards with Identyme.com * 20 Top Invoicing Tools For Freelancers Tags Answers apps browser brushes code color css css3 design designer design news developer flash fonts framework Freebies graphic design html icon illustration Illustrator Inspiration javascript jquery logo design mac navigation photography photoshop photoshop tutorials php textures Tips tools tutorial Tutorials twitter typography usability user interface web web design web forms wordpress wordpress theme More Useful Stuff * Check reviews of the top web hosting options online. * Best Hosting: Justhost Reviews * Wholesale MP3 Players * Brochure Printing * Vistaprint Coupons * Design Gallery * Graphic Design Jobs * Ask Question * James Child Photography * Apple & Tech Q&A * Graphic Design Blog * Cheap Printing * Printing Services * Web Design Resources * Car insurance comparison Copyright © 2011 Design Reviver. All rights reserved. Ask a Question on Design Reviver Answers Make your own MacBook Air Icon with Photoshop tutorial
    View Tutorial

Detailed Information
     Tutorial: Make your own MacBook Air Icon with Photoshop
     Date Listed: 2011-02-12
     Submitted By: dreviver
     Total Hits: 1164
     Rating Tutorial Rating 2.77Tutorial Rating 2.77Tutorial Rating 2.77Tutorial Rating 2.77Tutorial Rating 2.77 (31 votes)

  •  Discuss Tutorial
  •  Comment On Tutorial 		  •  View Tutorial
  •  Report Broken Link

 





© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap