SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would I recreate this dissolving drop shadow look ? (image file included)

    Kind of what the title is asking,

    Im trying to attempt my own version of recreating a 960px width by 390px height white rectangle, but it has an expanding drop shadow affect which disolves in the center but has sharp edges to the left and right hand edges.

    Take a look at the image file below and make sure you click on it to see it in full scale mode - Obviously all you will see is the drop shadow as the rest of the image is #ffffff.

    Any advice on recreation would be much appreciated as Id love to know how this was created. (I can use PS CS5 but Im sure how to get the dissolveed look with sharp edges seen elsewhere on the image)

    Thanks

    bg_slider.png

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    ok its not too tricky but might take a little practice till you get it spot on.


    First up use the grid overlay set to 10px x 10px to give you a working grid pattern.
    (enable snap to grid too)


    Start with the white rectangle on a new layer. Use the VECTOR shape rather than a raster marquee and drag out to the size you want.


    Duplicate that layer (CTRL+J) so you now have 2 white rectangles.


    Hide the top rectangle layer as we dont need that just yet.


    Change the colour of the remaining rectangle to black and select the pen tool and 'Add Anchor Point Tool'


    In the middle of base line of the rectangle, add a point (click where you want the point to be - try and get as close to the middle as you can)


    Select the 'Direct Selection Tool' from the menu or press A so that the white cursor arrow is selected.


    click on the point you just added and drag it down by a couple of grid lines. This should give you an arc shape at the bottom of your rectangle.


    Right click on the layer in the layer palette and select 'Rasterise Layer'
    Go to Filter > Blur > Gaussian Blur and set it to 2.8 0r thereabouts.


    Turn the top layer back on to visible and you should have a drop shadow effect.
    Use the marquee tool to make a full selection of the parts you dont need and delete them.


    Drop the base layer opacity down to 20% and nudge the layer up a couple of pixels to get slightly sharper edges.


    See if that helps.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,

    Many thanks for taking the time to reply, as my knowledge is somewhat limited to all of the adobe CS5 products, I have followed your step by step all the way through but I am obviously doing something drastically wrong, as I just end up with 1 white rectangle as the black rectangle has been rasterised.
    I will write each of my steps down stating what buttons Im clicking on at each step to try and weed out where Im going wrong.

    Thankyou once again, Ill post my step-by-step back imminently.

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike,
    Just wrote this out so you can see at what point Im going wrong:

    1. File
    2. New
    3. Width = 960px / height = 390px / background contents = transparent
    4. View
    5. Show
    6. Make sure Grid is ticked
    7. Edit
    8. Preferences
    9. Guides, grid and slices
    10. Gridline Every 10px and Subdivisions 10
    11. Using Rectangle tool (below path selection tool) draw 1 rectangle filling whole canvas in white
    12. Ctrl + j
    13. Hide top rectangle in layers tab
    14. Change the colour of the visible rectangle to black
    15. Select “add anchor point tool” and click a point in the middle of the baseline of the rectangle
    16. Press “A”
    17. Click on the point that I just added and drag down the rectangle by a couple of grids.

    Its at this stage I can see no anchor point, and when I do press “A” and drag down, I drag down the whole rectangle and there is no arc shape created..

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Location
    The land of nod
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Mike,

    Good news for me @ least! Ive cracked it and I must say Ive done quite a spiffing job :-) - I cannot seriously thankyou you enough for your time and knowledge.

    Thankyou

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Awesome, glad you got it working as you want it!
    Glad to have helped
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •