Free web site designing tips & tricks

Discussion in 'Design & Development' started by webdesigningtricks, Feb 13, 2012.

  1. webdesigningtricks

    webdesigningtricks
    Expand Collapse
    Junior Member

    Joined:
    Feb 13, 2012
    Messages:
    1
    Likes Received:
    3
    This is a Photoshop tutorial on how to create a beautiful photo film strip, as seen in Apple’s iLife package design (’06 version) and DigitalMash website. The warp tool will be used to create the twisting effect (so, you need Photoshop CS2 or above to complete this tutorial). With the completion of this tutorial, you will be able build a photo strip with your own photos or artwork. Don’t miss out this fantastic feature!
    View Final Image
    Download Photoshop File
    1. Create a Strip (Vector Shapes)

    First, create a strip with the Pen tool (either in Photoshop or Illustrator). We will use these shapes as a guideline and for masking purposes.
    [​IMG]
    2. Photo Stack

    Choose 3 photos of your choice and stack them together.
    [​IMG]
    3. Warping (Photoshop Warp Tool)

    Adjust the layer opacity to 40 or 50% so you can see the guideline underneath. Go to Edit > Transform > Warp. Now you should see a grid and 4 anchor points in the corner. To bending the image, simply drag the anchor points, direction points, or grid lines.
    [​IMG]
    Repeat this step for the rest of the strip. Since this step is relatively simple and repeatitive, I’m not going to get into the details. Here are the screenshots of the steps:
    [​IMG]
    [​IMG]
    [​IMG]
    4. Masking

    Organize the layers into groups (ie. strip 1, 2, 3, 4).
    [​IMG]
    Load selection from the shapes you created in step 1 and add a layer mask for each group (so you get a perfect smooth curve).
    [​IMG]
    5. Shadows

    In masked group 1, create a new layer above the strip. Use the Gradient tool and drag from the top to bottom to create a black gradient.
    [​IMG]
    Repeat this step for the other strips.
    [​IMG]
    6. Highlights

    To make highlighted and glossy areas: create a round glowing circle, compress it, and rotate it in the angle according to your strip’s direction.
    [​IMG]
    7. Line Strokes

    To make line strokes: load a selection of the mask, create a new layer, fill it with black, shift the selection to the left by 1 or 2 pixels, delete the selected area by pressing the Delete key.
    [​IMG]
    8. Final Touches

    To make the image look more interesting, desaturated the two strips in the back.
    [​IMG]
     
  2. madelinekim

    madelinekim
    Expand Collapse
    Junior Member

    Joined:
    Jul 13, 2012
    Messages:
    24
    Likes Received:
    1
    All the above tips are useful. You first must organize your target and intention of the site. Bear in mind, you next have to examine your goals group of users and agree on the kind of image you are trying to portray.
     
    Michael James Swan likes this.
  3. Samuel

    Samuel
    Expand Collapse
    Admin

    Joined:
    Dec 20, 2011
    Messages:
    5,576
    Likes Received:
    71
    Very useful tutorial! Thumbs up! :)
     
    Michael James Swan likes this.
  4. Michael James Swan

    Michael James Swan
    Expand Collapse
    Active Member

    Joined:
    Jul 28, 2012
    Messages:
    114
    Likes Received:
    27
    A very pretty "photo strip".

    Thanks for the Tutorial! -- Bookmarked , Facebooked and Tweeted :D

    Thumbs Up!
     
  5. MikeMano

    MikeMano
    Expand Collapse
    Junior Member

    Joined:
    Jan 3, 2012
    Messages:
    33
    Likes Received:
    3
    Fantastic, Thanks alot!
     
  6. Jason Martin

    Jason Martin
    Expand Collapse
    Junior Member

    Joined:
    May 25, 2012
    Messages:
    182
    Likes Received:
    11
    Woooo great tips ....!! For a new web designer these tips can be a base which can help them to create successful web design.
     
  7. G H Kemal

    G H Kemal
    Expand Collapse
    Junior Member

    Joined:
    Aug 17, 2012
    Messages:
    5
    Likes Received:
    0
    Very interesting tips for everybody. :)
     
  8. jordenstive

    jordenstive
    Expand Collapse
    Junior Member

    Joined:
    Jul 13, 2012
    Messages:
    8
    Likes Received:
    0
    Wow..really thanks for great tutorial related Photoshop.Its really usefull for me to do this kind of different work so that you really thank for sharing knowledge to everyone.
     
  9. Jennifernew

    Jennifernew
    Expand Collapse
    Junior Member

    Joined:
    Sep 11, 2012
    Messages:
    4
    Likes Received:
    0
  10. john paul

    john paul
    Expand Collapse
    Junior Member

    Joined:
    Nov 7, 2012
    Messages:
    4
    Likes Received:
    0
  11. SteveJackson

    SteveJackson
    Expand Collapse
    Junior Member

    Joined:
    Nov 7, 2012
    Messages:
    3
    Likes Received:
    0
  12. mariajhonson

    mariajhonson
    Expand Collapse
    Junior Member

    Joined:
    Oct 19, 2012
    Messages:
    278
    Likes Received:
    4
    Wow really amazing tips. You have provided great tutorials through a mind blowing representation. Ans the information you have provided is very useful. Thanks for sharing...
     

Share This Page