dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: simple image opacity question

  1. #1
    Senior Member
    Join Date
    Aug 2003
    Posts
    541

    simple image opacity question

    http://www.squidfingers.com/

    How does he get the edges of this site (where the brown meets the drop shado meets the pattern) to hang?

    The brown looks 50% transparent on the edges. But how does he get the tiling pattern to shine through?

    Cool little detail.
    seapod00

  2. #2
    That could be duplicated by simply applying that pattern to a layer that sits above that solid color (which itself sits on a layer above the patterned BG and to which a dropshadow has been applied) and mask it from either side. Each patterened layer should be aligned.

    I'm sure there are other approaches.

  3. #3
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    It's the aligning the transparency with the tiled background that seems tough to achieve.
    seapod00

  4. #4
    That you mention it...that would probably be a nightmare.
    Maybe instead of trying to define the space that pattern should lie
    on the transparency - simply duplicate the BG and move that layer above the layer containing the solid color and then apply the mask to the transparency by defining an area just a bit smaller then the
    solid color. The fade into the mask could be done with either a gradient or possibily with a blur.

  5. #5
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    I'm thinking that he just used 50% opacity on that side bit and the background tiled under it? But then there's a dropshadow.

    ? I'm gonna email him!
    seapod00

  6. #6
    ok...I just did this...so
    here it is step by step:
    • First open your new document and fill your BG with the desired pattern
    • Second, create a new layer (above the BG pattern) and in the new layer use the rectangular marquee tool to lay down a solid color
    • Third, double click on this new layer to open the layer styles palette and select your drop shadow (make sure the shadow angle is set to 90 degrees to have the shadow span to entire height of the solid color.
    • Fourth, once you've accepted all you drop shadow effect settings go back to your layers palate and right click on the shadow effect layer and select "Create Layer".
    • Fifth, now that the shadow has its own separate layer we need to remove the center portion of the shadow to reveal the pattern below...so...ctrl left click on the layer containing the solid color, then, make sure that the shadow layer has been selected and press delete.
    • Sixth, to create the faded edges which reveal the pattern below use the layer mask. Select the solid color layer, then select layer mask from the layer palette. To make sure the faded edge is uniform it's probably best to use layer guides. Use the rectangular marquee too to define and area from either edge into your colored field approx 1/2 inch (or whatever looks best), then apply a gradient consisting of a solid color to completely transparent. Repeat this step for the other side and ya have it.

    It seems like it will work best if the BG color of the pattern is the same as the color used to define the solid field.

  7. #7
    Senior Member
    Join Date
    Aug 2003
    Posts
    541

    nice work...

    just want to make sure I'm clear: with this method, there will be no tiling in the background of the html page?

    wow. great directions too. i'm not sure i write things out as clearly as that for people. awesome.
    seapod00

  8. #8
    Thanks, yup...once saved and optimized you'll have a flat image you can use as a BG.

    I've been trying to attach the PShop file I created but it's too big...gotta run to a meeting now...let me know how you make out.

    Regards

  9. #9
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    dial-up users might find such a page large to load and the clients for this site will be on dial up mostly.

    I may do a different simplified version.
    seapod00

  10. #10
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Maybe I'm not completely understanding some hidden issues here, but couldn't you just incorporate the transparent portion into the background tile itself? Below is an example of what I mean. And here is a page I put together using this backgound image.

    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  11. #11
    RUSHvision - I don't think you're missing anything at all. I feel a bit silly. Seems I made a mountain out of a molehill.

    You're approach makes way more sense.

    seapod00 - sorry to lead you in a less productive direction.

    Regards to all.

  12. #12
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    Pefect.

    RushVision: cheers mate.
    seapod00

  13. #13
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Glad if I could help.
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  14. #14
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    I see the code and know it works, but why does it work?

    Specifically, on the right side of the table, why does the tiled image 'flip around' so that the transparency is on the left? Make sense?
    seapod00

  15. #15
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    No magic trick. I made only a single image in Photoshop, but I exported both a left and right side version. This was done by simply flipping the image horizontally and saving with a different name. Below I have placed three images together...

    1) the left side image

    2) in the middle is the solid color 'chip' that I used as a background for the html page and all the cells so the colors would match better than using a hexidecimal value. I made this 36x36 to match the height of the tile.

    3) the right side image, which is just the left side after being flipped horizontally



    Here are the same images, but I've separated them a little bit to more clearly illustrate the individual parts. So to sum up, it has nothing to do with the code. You're just working with several columns, two of which have separate/unique vertically tiling background images. Does that make sense?

    ....

    While I'm here, I might as well post this little example I made earlier but decided not to put up regarding your original question about how to create the transparent transition between the solid color and the tiled background. This is just a little additional information that you might already know, but could be useful for someone else who wants to do something similar. Not everyone might be aware that you can not only add additional color stops to your custom gradients, but you can also add opacity stops to create gradients with transparency inbetween two solid colors.

    In the example below you can see the original background (screenshot of the squidfingers site) and in the middle is the new gradient I made to match the existing effect. You could make the shadow to the right by giving the gradient layer a drop shadow layer style, but personally I opted to create a relatively narrow selection just to the right of the 'fold' and then used a black-to-transparent gradient to add the shadow in another layer. This way you don't have any of the shadow coming through the transparent part of the gradient. Again, just some more info for those who might be interested.

    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  16. #16
    Senior Member
    Join Date
    Aug 2003
    Posts
    541

    mine doesn't look like yours

    I can't seem to get the left right pieces in place. And I'm noticing a bit of tiling on the edges of my page.

    I'm guessing that you'll spot my error quickly. (Attached.)
    seapod00

  17. #17
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    The dimensions of your tile images are 210x14, but you have the table widths set to 225. Try changing the table widths to 210 and you should be good to go.
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  18. #18
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    that helped a little, but this is really the problem: my browser window is smaller than the total table width. given that, the left background tile is appearing a particular way. the left side of the left tile is showing, but not the right. so the gradient isn't showing at all on the left tile....just the pattern. whereas on the right side of the table the right side tile gradient shows, but not the pattern.

    so on the left side of the table, you just see a pattern and on the right side of the table, you just see a gradient...it's not framing the main section of the page correctly.

    i could make my tiles less wide, but when I look at http://www.squidfingers.com/ and resize the browser window, this problem doesn't occur.

    what would you suggest?
    seapod00

  19. #19
    Senior Member
    Join Date
    Aug 2003
    Posts
    541
    does my explanation make sense?
    seapod00

  20. #20
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    I see what you are talking about, but unfortunately I don't have a good answer for you. HTML isn't my forte, so I can't pull a solution out of my hat and he's using css for his layout so I'm not sure what he's got going on under the hood. Perhaps someone else has some insight.
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center