www.PhotoshopTower.com
Return Home Tutorials About Us Services we offer Contact Us Affiliates Site Search
Hot Extras
Tutorial Spotlight:
Sleek Web Template Create a website template using a few fundamental design techniques that even a newcomer to photoshop could undertake with ease. Great Tutorial! 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!



    graphics, tutorials, softwares, designing, free training, downloads

    FSTutorials.com Photoshop Tutorials - Photoshop Cs Tutorials





    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 1 of 2

    Step 1.)
    Create a new document that is 500x500 in size, and fill the background with a dark grey color l'm using: #313131





    Step 2.)
    Get out the polygon lasso tool, create a new layer and make a selection on the canvas similar to this:


    Go to: Select->Smooth with a setting of 5 pixels:


    Set your foreground color to: #78818C
    and your background color to: #414648


    And fill the selection with a gradient from top to bottom like so:


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





    Step 3.)
    Double click this layer, and apply the following blending options:
    Drop Shadow:


    Outer Glow:


    Bevel & Emboss


    Stroke:


    Result:






    Step 4.)
    Next create a new layer, and go to Filter->Render->Clouds

    Now go to: Filter->Render->Difference Clouds

    Press CTRL + F on your keyboard to repeat the filter one more time.

    Press CTRL + G on your keyboard to group this layer with the previous layer.

    Finally change the blending mode of this layer to "overlay". Here's how your layers pallet should look now:


    Result:






    Step 5.)
    Next create a new layer, get out the elliptical marquee tool, and make a large oval selection over the top portion of the interface-base like so:


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

    Change the blending mode of this layer to "screen" and drop the opacity down to 50 percent:

    Next group it with the previous layer, by pressing CTRL + G on the keyboard. Here's how your pallet should look:


    Result:






    Step 6.)
    Create a new layer, get out the polygon lasso tool again and create a selection inside of the interface-base, notice l used the elliptical marquee tool to deselect a portion in the top right corner of the screen l did this by holding the ALT key with the elliptical marquee tool:


    Go to Select->Modify->Smooth with a setting of 5 pixels:


    Fill this selection with a white to transparent gradient just like in the previous step:


    DO NOT DESELECT

    Change the blending mode of this layer to "overlay" and drop the opacity down to 59 percent:


    DO NOT DESELECT

    Result:


    DO NOT DESELECT





    Step 7.)
    Create a new layer, name this layer "screen base".
    Go to Select->Modify->Contract with a setting of 4 pixels:


    Set your foreground color to: #10131F
    and your background color to: #78818C


    Get out the gradient tool, and fill this selection with a gradient similar to this:


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



    Go To Page: [ 1 2 ]
    Page 1 of 2
    Tutorial Index



    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^