Add your website to the Xemion web designer directory and gain highly-targeted traffic and new leads.
| Post Reply |
|
|
Thread Tools |
|
#1
May 27, 2006
-
Administrator,
120 posts
|
||||||||||||||||||||||
|
If you like this tutorial, please register. It encourages me to make more.
If you have any questions about this specific tutorial, just post on the thread. If you have questions about web or graphic design in general, feel free to ask any questions (newb questions or difficult ones!) in the web designer forums. This tutorial is sponsored by the Xemion Web Designer Directory. Step 1 Start out with a 400x300 black background canvas. First create a layer set and name it Laptop, You need to put all of the layers in this layer set. Select the round rectangle tool, set the radius to 10px and draw a #535969 round rectangle. Size does not matter as long as its realistic. ![]() ![]() Step 2 Add the following layer style settings:
![]() Step 4 Set the foreground color to #252432. Select the Polygon tool then select fill pixel at the top, set the sides to 3 and the polygon option to match with the picture guide below. When drawing the shape, hold shift and click on the first point which will be the center edge of the shape. While holding shift and the first point in place, drag your mouse to the right. Remember this will be a #252432 colored shape. Cut out the pieces thats outside the screen. ![]() ![]() ![]() Step 5 Add the following layer style settings:
Step 6 Create a new layer and duplicate the previous shape you just made, Merge the new layer and the duplicate. Now rotate and position on the other side of the screen. Why did we do this? If you just duplicated the previous shape with all of the layer styles in tack, you would have to re-edit some of the settings. ![]() Step 7 In a new layer were going to make a similar alienware type logo, for copyright reason the logo wont be exact. Use the same technique as step 4 when creating the shape. Apply the following layer styles:
Step 8 In a new layer use the Ellipse tool to make the eyes of the alien head logo. Rotate through Edit > Transform, Fill path #252432 and finish it off with a stroke layer style. Duplicate the first eye to make the other eye. See picture guide for visuals.
Step 9 To make the back side panel use the round rectangle tool with a radius of 6 px and color code #5C6271. Apply this layer style settings:
![]() Step 10 Same as the last step, use the round rectangle tool to make the piece that connects the back side panel to the screen. This time set the radius setting to 2px, #7F838D for the color and this layer style settings:
![]() Step 11 Now for the connectors, first the plug for the speakers, mic etc. Select the Ellipse tool with a black foreground. Draw a small circle and apply this layer styles. To get different colors, just edit the satin color setting. Here are my other color codes: Orange type: #FF6600 ' Yellow type: #FCFF00.
![]() Step 12 To make the plug for the printer, monitor etc use the round rectangle tool with a radius of 4 px and black as the color. Draw two round rectangle shape in different layers and apply the same outer glow and stroke layer styles settings as step 11 but this satin settings: Satin: - Blend Mode: Normal + Color: #7D7D7D - Opacity: 100 - Angle: -90 - Distance: 1 - Size: 5 - Contour: Picture below + Anti-aliased: Uncheck + Invert: Uncheck ![]() ![]() Step 13 To make make the adapter plug use the ellipse tool. Same outer glow and stroke setting as step 11 but this satin settings: Satin: - Blend Mode: Normal + Color: #7D7D7D - Opacity: 21 - Angle: -90 - Distance: 6 - Size: 3 - Contour: Picture below + Anti-aliased: Uncheck + Invert: Uncheck ![]() ![]() Step 14 Add some text on the back of the screen and the back side panel. The font i used are eurostile for the back of the screen and small font for the back panel. Apply the layer style settings below to your font to blend with the laptop. Once you have all of the elements together, duplicate the layer set and merge. Go to Edit > Transform > Flip Vertical and set it apart from the original about 3px. Take a soft eraser brush, preffered a big one and erase the bottom part to make a reflection effect.
![]()
James Paden - Xemion.com
Quote
|
|
#2
September 8, 2006
-
Junior Member,
9 posts
|
|
I would never have dared to try this kind of drawing and finaly it's done !
I think it's a bit difficult since the exact size of each shape can modify mainly the result of the blending options. When you can reach the end, it is easy to add other ports (Ethernet, USB...). I specialy had troubles with the steps 6 (where I had to reedit blending options anyway) and step 11 (where i never had a colored circled with these settings). |
| Post Reply |
| Thread Tools | |