www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Enlightened Triangles Learn how to create a very unique abstract triangle effect. User Requested! read more...
Join our Mailing List to receive:
  • Site Updates
  • Photoshop Tutorials
  • Webmaster Tips
  • Hot Site Reviews
  • & much more...

  • Mailing List: Privacy Policy


    Affiliates
    Your Link Here

    www.VidPit.com: Funny, Cool & Sexy videos!



    9 tutorials - Photoshop tutorials , Flash tutorials, PHP tutorials and much more







    Link to us
    ( Link to PhotoshopTower.com )



    wholesale computers

    PhotoshopForce.com - Photoshop Tutorials

    Site By: Coastal Web Innovations

    Some web hosting solutions you can find yourself on WHG and a list of
    web hosting companies.
    Hand Held Interface
    Go To Page: [ 1 2 ]



    In this tutorial l will explain the techniques used to create an MP3 player/handheld style interface. You can use the techniques taught in this tutorial to create an interface layout or even to create icons for your website.
    Page 2 of 2

    Step 8.)
    Create a new layer, go to Filter->Render->Clouds
    go to Filter->Render->Difference Clouds
    Press CTRL + F on your keyboard one or two times to repeat the filter.

    Change the blending mode of this layer to 'overlay' and drop the opacity down to 75 percent
    Press CTRL + G on you keyboard to group this layer with the previous.
    Here is how your layer pallet should look after this:


    Result:






    Step 9.)
    Create a new layer. Get out the elliptical marquee tool and make a selection similar to this:


    Set your foreground color to white (#FFFFFF), get out the gradient fill tool, and fill this selection with a gradient like so:

    Drop the opacity of this layer down to 26 percent, and press CTRL + G on your keyboard to group it with the previous layer:


    Result:






    Step 10.)
    Create a new layer. Next hold down the CTRL key on your keyboard and click the layer named "screen base" (it should be three layers down) to make a selection on the canvas with it's contents:



    Go to Select->Modify->Contract with a setting of 8 pixels:


    Set your foreground color to: #4D5898
    and your background color to: #389EDF


    Using the gradient fill tool, fill the selection with a a similar gradient:


    Press CTRL + D on your keyboard to deselect the area, double click this layer and apply the following blending options:
    Inner Shadow:


    Outer Glow:


    Result:






    Step 11.)
    Create a new layer, get out the elliptical marquee tool and make a selection similar to this:


    Fill this selection with a white to transparent gradient as we have done in previous steps.

    Change the blending mode of this layer to "overlay" and drop the opacity down to 73 percent.

    Result:





    Step 12.)
    Now we'll add the buttons to the interface. Create a new layer, and get out the elliptical marquee tool and make a selection similar to this:


    Set your foreground color to: #424A4F
    and your background color to: #74818B


    Get out the gradient fill tool, and fill the selection like so:


    DO NOT DESELECT





    Step 13.)
    Create a new layer, go to select->modify->Contract with a setting of 4 pixels:


    Using the same colors, fill this selection with a gradient, only going the opposite direction:


    Double click this layer, and apply the following blending options:
    Outer Glow:


    Bevel & Emboss


    Stroke:


    Result:






    Step 14.)
    Create a new layer. Get out the elliptical marquee tool, and make a selection like so:


    Set your foreground color to (#FFFFFF) white, and fill this selection with a transparent to white gradient form bottom to top.

    Press CTRL + D on your keyboard to deselect the area.

    Change the blending mode of this layer to "overlay" and drop the opacity down to 45 percent.

    Press CTRL + G on your keyboard to group this layer with the previous.
    Your pallet should look like this now:


    Result:


    And that completes all the techniques in the tutorial.
    Here l've duplicated the steps and created another button. I've also added a small over-snap on the top with a speaker looking circle on it. (this is just another button, with a smaller button inside of it, nothing new). The vents were also added to give the interface a little depth, you can learn how to create these in the interface vents tutorial if you are interested, or if you can't figure it out by looking. Here's how my piece turned out after playing with it for a few minutes:


    Like l said, just continue to use the same techniques to add as many little panels/pieces you'd like.



    I hope you enjoyed this tutorial, and that it's inspired you to create some great looking interface layouts for your next application or web site design! Thanks for reading.





    Related Tutorials:
        View Glossy Buttons Glossy Buttons
    In this tutorial you will learn how to make quick and effective looking round gl ...
        View Interface Vents Interface Vents
    This tutorial will show you how to add a techno depth to your layouts with the u ...
        View Render Layout Tutorial vol. 5: Content Boxes Render Layout Tutorial vol. 5: Content Boxes
    In this tutorial you will learn how to create an entire layout by using an exsis ...


    Home | Tutorials | About Us | Services | Contact Us | Affiliates | Search | SM | Top^