This week’s tutorial was inspired by a story I heard about recently where alienware is debating the prospect of entering the phone market. That got me thinking what would an alien where phone look like. It had to be something unique. So hear it is:
Open a new document and set the size to 1024×768. Then add a Gradient Overlay set the start color to #000000 and the end color to #3a3a3a.
Next Grab the Alienware logo by searching for it on your favorite Search engine. Remove the logo from it’s background and add it to the document.
Now Download this free alienware wallpaper here. This is going to serve as our phone base. Next using your pentool cut the alien head from the wallpaper and drag it into our document. Then hit CTRL+J to duplicate the layer. Now to keep this tutorial organized go to your layer pallette and click the folder icon to make new layer groups. make two for now call one “Open” and the other “Closed” then move one alien head into each folder and hide the open folder for now. Finally scal the alien head in the Closed folder down 75% and hit OK. Then umove it to the upper left side of the document.
Next Make a new layer in the Closed group and use your eliptical marquee tool to make a small mic on the lower right of the head. Once you have that fill the selection with black and set the fill to 20%. Now we are going ot add some blending options. First add an Inner Shadow at 75% Opacity, Distance 0, and Size to 2. Then a Bevel and Emboss, set the bevel to Outter, the Technique to Chisel Soft, the Direction to Down, the Size to 1. Finally add a Pattern Overlay. We are going to use the pattern from last weeks tutorial. If you are new here or have forgotten here it is again:
Now we are going to create a new pattern. Open a new document that is 100×100 with a transparent background. Then Take your Eliptical Marquee Tool and make a circle selection in the center of the document that is 20×20. Hold Shift while you drag to make a near perfect circle. Once you have the selection fill it with #333333. Finally add an inner shadow Set the distance to 2, the choke to 0, and size to 1. Hit enter.
Once you have the first you need to duplicate the layer CTRL+J. Once you have the layer duplcated move the new circle to the left so there is a 4 pixel space between each. Then do the same this time on the right. Now take the middle and Left circle and duplicate those layers. This time move them above the original row with a 2 pixel space and center them them. Do the same to make the lower row. You should have something like below:
Using the Move Tool Drag out some guide to the center points of the circle in the top and bottom rows. Once you have those guides take your Rectangular Marquee Tool and Make a selection of the inner rectangle. Finally Go to Edit > Define Pattern and name it Mesh and hit OK. You can close that document now.
Set the Pattern to The Mesh and set the scale to 15% and hit OK
Next Download the free font Pocket Calculator here. Install the font on your machine. Then go back to the document and Select the Type Tool and Choose “Pocket Calculator” as the Font, Set the color to #21f01c, Set the Size to 20 px and type out “Incomming call… (line Break) 405-555-5512”. Then add an Outter Glow, set the Opacity to 75%, the color to #196513, the spread to 0, and the size to 3 and hit OK.
Next make a new layer and make a selection with you Rectangular Marquee Tool just above the incomming call text. Make the Selection roughly the width of the text at a wide screen aspect. Fill the selection with black and set the fill to 10%
Next find a picture of any person you like. Scale the image down to fit inside the box you just created. Mkae sure to leave a 1 – 2 pixel buffer from the edges. Set the Opacity fo 75%
Make a new layer. Drag out some guides, the first horizontal 10 pixels below the top of our phone, the second 5 pixels below that, The place a vertical guide in the center of the phone, and another vertical guide 25 pixels to the left of the center. Then grab your Rounded Rectangle Tool and draw a selection within those guide. Then go do your work Path and CTRL+Click to make a selection. Fill the selection with black and follow the same steps as before on the mic. Once you have that grab your move tool and move it 2 pixels to the left. Then hit CTRL+j to duplicate the layer and move it 2 pixels away from the center on the right.
Make a new layer and grab your Single Column Marquee Tool and make a selection using the center vertical guide. Then grab your brush tool and fill in the selection only over the phone itself. Set the fill to 20%
Next go to your favorite search engine and look for Battery Indicatiors. Find one you like if it is not the same color as the font that is fine. Cut the battery out from it’s back ground and add it to the document. Then make a copy of the battery and put one in the open folder. Now scale the visible on to fit on the right side under the call text and between the center and the eye. Now if the color the battery you chose does not match hit CTRL+U and adjust the settings till you get a match.
Now we are going to add the Accept and Decline buttons to our phone. So grab your pen tool and make a selection of the Right eye. The go to your Work Path and CTRL+Click to make a selection. Then go to Select > Feather and feather the selection 5px. Fill the selection with back. Then add a Gradient overlay. Set the overlay Opacity to 75%, the angle to 120, and the start Color to #062e00 and end color to #1a9236.
Now Using your Type Tool Type out ACCEPT in the same font we have been using. Then Rotate the font at a 45° anlge and place it in the center of the eye. Set the layer Blend to Overlay.
Next CTRL+Click the Eye layer to make a selection. Make a new layer, fill it with black and set the fill to 0. Then add a Bevel and Emboss. Set the Depth to 42%, Size 27, Soften 14, and the highlight Opacity to 42%. Then add a Contour
Follow the same steps on the left Eye as the right only this time set the gradient colors to #2e0000 for the start and #921c1a.
Now we are ready to begin on the phone as if it were open and you were browsing the net and listening to music. So make your open folders visible again. Now we need to do is cut the alien head in half and put a 435 pixel space between each piece. Now add a dropshadow on the left part set the angle to -180, the distance to 5, and the size to 5. Now the left use the same settings but make the angle 0. Now Grab your Round Rectangle Tool with a 4px arch. Draw out a selection 450 px wide and 290 px high. Then add a draopshadow with angle to 90, the distance to 5, and the size to 5. Then add a gradient overlay set the start color to #49464b and the end color to #bcb8be.
Now that we have the base of the Open version created let’s flesh it out. Let’s start with the keyboard since it is the most time consuming. Make a new layer. Using the Rounded Rectangle Tool make a selection in the bottom pannel and give it 20px padding on all sides. Fill the selection with black. Now add a bevel and emboss set the Direction Down the Size to 4. Then add the same gradient as the base background.
Now let’s build some buttons. Again to stay organized make as many folder as you need as we go along. Let’s build the space bar and work our way out. First draw out some guides within the keyboard display area. Make them about 5px in on all sides. We will be using the Rounded Rectangle Tool for the bulk of this section so keep that in mind as we go along I am going to be calling it the RRT. Grab you RRT and make a selection in the bottom center of the display 45px tall and 210px wide. Then add a Gradient Overlay set the start colo to #555555 and the end Color to #fcfcfc.
The font we will be using within the Display is “BankGothic Md BT”. Grab Your type tool and write out “SEARCH” make the font size 24px and color Black. Now move the text to the center of the spacebar. Now we need to add some blending options. Add a Bevel and Emboss with and 80% depth, directed down, and at a size of 1. Finally add the same gradient overlay as the main background.
Next we are going to make the search and Number keys. Using the RRT Draw out two boxes on either side of the spacebar aligned with the bottom. Give each new box 5px padding between it and the spacebar. Fill the selection with black. Thank add a New gradient overlay with the starting color #565c68 and ending #8890a2.
Follow the same steps on the the font for these as you did on the space bar. Only this time make the font size 16 and the gradient go from #b0b0b0 to #ffffff. Set the font to .?1234 on the left and search on the right
Follow the same steps to make the next set of buttons.
Now let’s create our alphabet button. Grab your RRT and make a box 25px wide and 30 px tall. Create a new layer. Make it a selection and fill it with black. Copy the layer style from the spacebar and add it to our box. Move This box roughly 40px above the previous buttons.
Next grab your Type Tool and using the same font as the space bar type out “Q” center it in the button you just created. Now copy the layer style from the space font and paste it on the Q layer.
Rince and repeat till you have all 26 letters. I chose to set my alphabet like a modified QWERTY keyboard but you can set your anyway you like.
With the space left over the alphabet keys we are going to add a home button and Progammable hotkeys. Make a new layer and grab your RRT. Now draw out a box 50px wide and 40px tall. Fill the selection with black and move the box to the top center. Now we are going to add some blending options (These will be roughly the same for the hot keys as well). Add a Dropshadow (34% opacity, color #606864, distance 1, size 3), an Inner Shadow (Opacity 85%, color #828385, distance 11, choke 25, size 22), an Inner Glow (Color #3a3a3a, Opacity 50%), a Bevel and Emboss (Technique Smooth, depth 100%, direction Up, Size 11, soften 3, angle 90°, altitude 67°, Highlight 17% Opacity, Shadow 0% Opacity. Add a Small Arch Contour), a Gradient Overlay (Start color #cecdd3 and End color #f6f7f8), and a Stroke (Width 1px, Position Inside, Opacity 10%, and color #000000).
Next do a search on your favorite Search engine and find a white alienware head. This will serve as out home button icon. Once you have cut the head from it’s background using the pen tool add it to our documents. Scale the head down to fit comfortably in the home button. Now we need to ad just a bit of blending to it. Add a Dropshadow (distance 0, size 3) and a Bevel and Emboss (Technique Smooth, depth 100%, direction Up, Size 2, soften 0, angle 120°, altitude 30°, Highlight 75% Opacity, Shadow 75% Opacity).
Next we are going to add some Programmable hotkeys on either side of the home key. Be sure to give 5px padding on either side of the buttons. Make a new layer and draw a box 40px by 40px using the RRT and fill it with black. Add a Dropshadow (34% opacity, color #606864, distance 1, size 3), an Inner Shadow (Opacity 85%, color #828385, distance 11, choke 25, size 22), an Inner Glow (Color #3a3a3a, Opacity 50%), a Bevel and Emboss (Technique Smooth, depth 100%, direction Up, Size 11, soften 3, angle 90°, altitude 67°, Highlight 17% Opacity, Shadow 0% Opacity. Add a Small Arch Contour), a Gradient Overlay (Start color #12438f and End color #26a3ff), and a Stroke (Width 1px, Position Inside, Opacity 10%, and color #000000).
Make a new layer and grab you Eliptical Marquee Tool and draw out an oval shape above the top half of the hotkey. Fill the seletion with black. Now CTRL+Click the blue hotkey layer to make a new select then go back to your new layer. Right click on the document and choose “layer via cut” and delete the excess layer. Now set the new layer fill to 0 and add a Gradient Overlay. Set the Overlay to White to Transparent.
Now Duplicate those layers until you have 8 total, 4 on eache side of the home button. Then grab an icon for OpenOffice, iTunes, FireFox, and Thunderbird. We will use these to show the functionality of the hot keys. Cut each icon from there background and ad it to our document. Then in the first 4 hotkeys move the icons into place over each key. Scale them down to fit inside the key. Next add these options: Add a Dropshadow (distance 0, size 3) and a Bevel and Emboss (Technique Smooth, depth 100%, direction Up, Size 2, soften 0, angle 120°, altitude 30°, Highlight 75% Opacity, Shadow 75% Opacity). Finally change the gradient on each new button to make them look different from the default.
Whew that was a long section. but we are dont with the keyboard so now let’s begin on the multimedia display and audio diplay. Begin by making a new layer. Grab your RRT and draw a Selection in the top panel and give 5px padding on left and right sides and 10px on the top and bottom then add a the Same Gradient Overlay as the as the base layer. Finally add an Inner Stroke 3px thick in color #545252.
Then grab a screenshot of your favorite website and scale it to fit within the display window. Makesure to have the image bleed over a bit. Then CTRL+Click the Display layer to make a selection. Then go to Select > Modify > Contract and Contract 4px. then cut the webpage from that selection.
Next Reselect the display layer, make a new layer and fill it with black. Set the layer fill to 0%. Add a Bevel and Emboss (Technique Smooth, depth 42%, direction Up, Size 27, soften 14, angle 90°, altitude 80°, Highlight 15% Opacity, Shadow 0% Opacity. Add an Arch Contour).
Next let’s add the Mp3 Display. Drag out a guide 20px from the edge on the face Grab your Type Tool and select the “Pocket Calculator” font, align the font to the right. Then in 30pt type “iTunes” then hit enter to start a new line. Type the next line at 20pt and type “04:25 Played” hit enter again and type “4 Stars”. Finally copy the the layer style and color from the incomming call text from earlier.
Repeat the steps this time on the right side and align the font to the left. this time make the first like “Epica” Second line “Valley of Sins” and the third line “The Score”
Next let’s add the Mp3 Display. Remeber the iTunes icon you found? Well we are going to use it again. If you closed the icon reopen it and again remove it from the background. Then add it to our document and scale is to fit over the “iTunes” text. Then set the laryer fill to 75%
Now do a search for the band Epica and the CD cover art for the Score. Follow the same steps as you did in the last step. Only this time over the right font.
Next ad the Mic on the open phone using the same styles as on the closed phone.
Then follow the same steps as you did to make the left speakers but scale the to a larger size and give a 2px padding from the edge.
Repeat for the Right.
Next make the battery for the open phones visible again and make it fit just like on the closed version.
Next make some Unique buttons to go inside the eyes for playback. Put Back and Stop on the left and Forward and Play/Pause on the Right. Set the layer fill to 0% and add these Option. OutterGlow (Set the color to #196513) then add an InnerGlow (Set the color to #21f01c).
Now we are on the last six steps. Now we are going to add the phone’s Name, A Slogan, Tech Specs, and Sponsors. The font we are going to use is “MicrogrammaDB”. Type Out BREED at 100pt then rasterize the layer. Using your Rectangular Marquee Tool Cut out the second E then go to Edit > Transform > Flip Horizontal. Then merge the layers and add these blending options: DropShadow (Uncheck Use Global and set the anlge to 90, set the distance to 0, and the size to 29), an InnerShadow (Opacity to 50%, Uncheck Use Global and set the anlge to 90, set the distance to 2, and the size to 7), an OutterGlow (Color to #000000, and the Opacity to 50%), InnerGlow (Opacity to 15%, color to #ffffff), a Bevel and Emboss (Technique Smooth, depth 100%, direction Up, Size 1, soften 0, angle 90°, altitude 70°, Highlight 0% Opacity, Shadow 50% Opacity. Add an Ring Contour), and a Satin (Blend to Color Burn, Color to #8087a2, Angle 0, Distance 12, Size 50, and a Larger Hump Contour), and finally a GradientOverlay (Start color #646464, end color #e9e7e8, and the scale to 131%). Then type out a new section at 30pt and type “THE” align it with the top of the BREED font and paste the style you just created.
Make a new layer and Draw and Oval over the Breed font and fill it with white. Hit D to deselect. Then go to Filter > Blur > Gaussian Blur and set the blur to 9 – 10 radius and hit OK. Then CTRL+Click the Breed layer and remove the ecess like before. Then set the layer fill to 20%
Using the same font type out “The World’s Most Powerful Mobile Device” using the same settings as the “THE” font. Place it Below the Brand.
We are almost finished. Using the same font this time in white type out as follows in 14pt:
* 8GB Memory
* Flash Enabled
* 10 Hour Battery Life**
* NVIDIA® GeForce® Inside
* 1TB Storage with Smart Bay
* Extreme High Def Video and Audio
* AlienFX® Digital Keyboard Interface
* 2.8GHz Intel® MiniCore™ 2 Extreme
And Finally do a search for an Ubuntu Logo and an Nvidia Logo. Remove them from their background and place then above the specs side by side with a 20px pdding between then merge those layers then add these Options. DropShadow (Set the distance to 0, and the size to 9), an InnerShadow (Set the distance to 0, and the size to 13). And you are Done. What did you come up with?