Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Top 3 Tutorials
Exploding Planet 2
Here is another tutorial that shows you how to create an exploding planet, a different approach to the previous tutorial..
Shiny Orb 2
This tutorial will show you how to create this shiny orb just by applying some layer styles to the shape. .
3D Tubes
This tutorial shows you 1 way you can use photoshop to create 3D looking tubes and use it to create other artworks..
Top 3 Tutorials
Interface Button
This tutorial will show you how to create a simple inset button for your user interface. The button is simple, but with some creativity, you can make some really cool interface with it...
Smooth Multi-layered Nav bar
This tutorial will show you how to easily create a nice hi tech looking nav bar for your user interface...
Animated Ad Banner
In this tutorial, i'll show you how to create a professional animated ad banner which you can follow and create your own banner to advertise your site...

Welcome To ProDesignHost.com Photoshop Tutorials Area - iPod Shuffle

iPod Shuffle
image 1 1. Create a new document with the following properties:

Width: 0.98 inches
Height: 3.3 inches
Resolution: 300 pixels/inch
Color Mode: RGB Color 8 bit
Background Contents: Transparent


image 2 2. Use the Rounded Rectangular tool with a radius of 35 pixels to draw a rectangle from the top left corner to the bottom right corner. Be precise. If you've made a mistake with the size, undo and start over; don't use the Transform tool to fix the size.

image 3 3. Create a new layer (Shift+Ctrl+N).

image 4 4. Select the Elliptical Marquee tool with the following properties:

Feather: 0 px
Anti-alias: Checked
Style: Fixed
Width: 0.9 in
Height: 0.9 in

Click on the stage to create a selection and fill the selection with black.


image 5 5. Duplicate the current layer (Ctrl+J).

image 6 6. With the new layer selected, use the Transform tool (Ctrl+T) to apply the following properties:

Width: 0.55 in
Height: 0.55 in


image 7 7. Create a selection from the top layer (Ctrl+click on the layer thumbnail), select the middle layer and press delete to clear the selections' area.

image 8 8. Ensure that Snap is enabled (View> Snap). Use the Move tool (V) to move the contents of the middle layer to the top right.

image 9 9. Apply an Offset filter (Filter> Other> Offset) with the following properties:

Horizontal: 0 pixels right
Vertical: 135 pixels down


image 10 10. Create a selection of the canvas (Ctrl+A) and align the layer to the horizontal center (Layer> Align Layers to Selection> Horizontal Centers).

image 11 11. Select the top layer and use the Move tool (V) to position the layer in the middle of the ring.

image 12 12. Select the bottom layer and add a Gradient Overlay layer style (Layer> Layer Styles> Gradient Overlay) with the following properties:

Blend Mode: Normal
Opacity: 50%
Graident: Black to White
Reverse: Unchecked
Angle: 0�
Scale: 150%


image 13 13. Add a Bevel and Emboss layer style (Layer> Layer Style> Bevel and Emboss) with the following properties:

Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 5 px
Soften: 0 px
Angle Light Source: 120�
Use Global Light: Checked
Angle Light Source Altitude: 30�
Gloss Contour: Half Round
Anti-aliased: Unchecked
Highlight Mode: Screen
Highlight Color: White
Highlight Opacity: 75%
Shadow Mode: Multiply
Shadow Color: Black
Shadow Opacity: 75%


image 14 14. Select the middle layer and Invert (Ctrl+I). Select the top layer and Invert (Ctrl+I).

image 15 15.

With the middle layer selected, add a Bevel and Emboss layer style (Layer> Layer Style> Bevel and Emboss) with the following properties:

Use Global Light: Checked (Apply this property first)
Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 35 px
Soften: 16 px
Angle Light Source: 0�
Angle Light Source Altitude: 50�
Gloss Contour:
image 16
Gloss Contour Left Point Input: 0%
Gloss Contour Left Point Output: 37%
Gloss Contour Right Point Input: 100%
Gloss Contour Right Point Output: 75%
Anti-aliased: Unchecked
Highlight Mode: Screen
Highlight Color: White
Highlight Opacity: 75%
Shadow Mode: Multiply
Shadow Color: Black
Shadow Opacity: 75%


image 17 16. Add a Drop Shadow layer style (Layer> Layer Style> Drop Shadow) with the following properties:

Use Global Light: Unchecked (Apply this property first)
Blend Mode: Multiply
Color: Black
Angle: 0�
Distance: 2px
Spread: 0%
Size: 5px
Contour: Linear
Anti-aliased: Unchecked
Noise: 0%
Layer Knocks Out Drop Shadow: Checked


image 18 17. Select the top layer and add a Gradient Overlay layer style (Layer> Layer Style> Gradient Overlay) with the following properties:

Blend Mode: Normal
Opacity: 15%
Gradient: Black to White
Reverse: Unchecked
Style: Linear
Align with Layer: Checked
Angle: 0�
Scale: 100%


image 19 18. Select the Text tool (T) with the following properties:

Font: Lucida Console
Font Size: 9 pt
Anti-aliasing: Strong
Color: #808080

Copy and paste this character into the text area: ?
Type in a space followed by a semicolon (;), highlight the semicolon and change the font to Webdings with a font size of 9 pt.

Use the Move tool (V) to position the text to the middle of the circle.


image 20 19. Use the Text tool (T) to add the following text with the following properties:

Text: +
Font: Lucida Console
Font Size: 9 pt
Anti-aliasing: Strong
Color: #808080

Use the Move tool (V) to position the text to the top middle of the ring.


image 21 20. Use the Text tool (T) to add the following text with the following properties:

Text: ? (Copy and paste)
Font: Lucida Console
Font Size: 9 pt
Anti-aliasing: Strong
Color: #808080

Use the Move tool (V) to position the text to the bottom middle of the ring.


image 22 21. Use the Text tool (T) to add the following text with the following properties:

Text: 9
Font: Webdings
Font Size: 10 pt
Anti-aliasing: Strong
Color: #808080

Use the Transform tool (Ctrl+T) to reduce the height to 50% then use the Move tool (V) to position the text to the middle left of the ring.


image 23 22. Use the Text tool (T) to add the following text with the following properties:

Text: :
Font: Webdings
Font Size: 10 pt
Anti-aliasing: Strong
Color: #808080

Use the Transform tool (Ctrl+T) to reduce the height to 50% then use the Move tool (V) to position the text to the middle right of the ring.


image 24 23. Use the Rectangular Marquee tool with the following properties to create a selection on the top of the canvas:

Feather: 0 px
Style: Fixed Size
Width: 100%
Height: 3 px


image 25 24. Create a new layer (Shift+Ctrl+N) as the top layer and fill the selection with the following color:

#d5d5d5


image 26 25. Use the Offset filter (Filter> Other> Offset) to apply the following properties:

Horizontal: 0 pixels right
Vertical: 825 pixels down


image 27 26. Reduce the opacity of the current layer to 50%.

image 28 27. Canvas size (Image> Canvas Size) with the following properties:

Relative: Checked (Apply this property first)
Width: 0.5 inches
Height: 0.5 inches
Anchor: Center


image 29 28. Canvas size (Image> Canvas Size) again but with the following properties:

Relative: Checked (Apply this property first)
Width: 0 inches
Height: 1 inches
Anchor: Top Center


image 30 29. Now we'll create a reflection for a sense of space. Create a selection of the canvas (Ctrl+A), copy merged (Shift+Ctrl+C) and paste (Ctrl+V). Move the new layer to the top.

image 31 30. With the top layer selected, Flip Vertical (Edit> Transform> Flip Vertical).

image 32 31. Use the Move tool (V) to position the current layer under the iPod Shuffle.

image 33 32. Add a layer mask (Layer> Add Layer Mask> Reveal All) to the current layer.

image 34 33. With the layer mask selected, use the Gradient tool (G) with the following properties to create a gradient from the top of the ipod to the bottom:

Gradient: Black to White
Style: Linear
Mode: Normal
Opacity: 100%
Reverse: Unchecked


image 35 34. Change the opacity of the current layer to 50%.

Final Results

iPod Shuffle Tutorial: Final Result

Author: FotoFects
Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com