dcsimg
A Flash Developer Resource Site

Results 1 to 14 of 14

Thread: Grunge Graphics Question

  1. #1
    Teckno Geek WandMan's Avatar
    Join Date
    Jun 2005
    Location
    The Internet or at the Computer Desk
    Posts
    399

    Grunge Graphics Question

    How do you make the sides on this site???:

    http://www.5000xzukunft.de/

  2. #2
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Hey WandMan ~
    Do you have Photoshop7 or later? What graphics program are you using?

    And do you want to know how to do that paint splatter effect or the ragged edges?...or both?
    Last edited by RUSHVision; 02-25-2006 at 07:18 AM.
    mrush


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

  3. #3
    Banned wbwd's Avatar
    Join Date
    Dec 2004
    Location
    Timisoara Country[EU]: Romania
    Posts
    860
    I would be interested in that too... I never was sure how it's done... And yes, I have photoshop CS2, i always thought it's done by slice-ing the "huge" bg paper img... But what if the site's dimmensions change all the time when clicking on dif link ( should there be a new bg make, that has bigger dimensions )? Hmmm...

  4. #4
    Teckno Geek WandMan's Avatar
    Join Date
    Jun 2005
    Location
    The Internet or at the Computer Desk
    Posts
    399
    I have Photoshop 7. I would like to know how the sides of the page is made???

  5. #5
    Senior Member
    Join Date
    Sep 2005
    Posts
    1,764
    Grunge Brushes dear.
    Burn tool, some selectionsand layers.
    Working on tute!
    In the mean time please check out http://www.rebel-heart.net/brushes/ for some grunge brushes.

  6. #6
    Senior Member
    Join Date
    Sep 2005
    Posts
    1,764
    Create a new document in photoshop.
    Short cut pc: Ctrl + N

    Work on about 5 layers, just to keep things ordered.
    The look here is torn and ink burned. You know how a page comes out of a copy machine when its got jammed? There we go.

    Start by creating a jagged selection to run down the side of your “page”
    Clear the bits on the side that you wont be using.

    Now, we are going to start “fraying” the edges slightly,
    Use your erase tool, choose a brush with a nice HARD edge, set it to uber small.
    Start erasing into the edges to give your page that jagged look.

    NEXT!

    We will be duplicating this layer and changing its colour, I worked in black and white.
    So, drag the layer to the “new layer” button in your layers drop down, it will duplicate the layer for you.
    Next drag the copy layer lightly to the right of the image, use CRTL + click on the layer, this selects it, and fill the layer with black.
    Now go to your filters, give the filled layer a guassian blur of about .5
    You have now created a shadow!
    Again, duplicate the BOTTOM layer and position it above the shadow layer we just did,
    We will be adding the scratches and burns ect to this layer and another layer on top of it.
    Look a the edges of the layer, they need to be burned, but we need to create a texture first.
    SO use one of the grunge brushes I used Rough Round Bristel, and set the opacity to 34%, then go nuts! Draw in the edges of your page bring the brush in a little and overlap areas, just make it look messy, and torn.
    When you are happy with this, use the burn tool, set it to about 50% and burn the EDGES slightly, we want them to stand above the pages under it.
    OK, so you get the idea with that layer, go crazy, zoom right in and out again to see what you did.

    When youre happy with the frayed and burned edges its time to put in some machine marks and lines,
    Create a new layer, use your lasso tool to select some straight lines where the paper would have been fed through the machine, fill them.
    Now we have 2 choices here, you can either drop the opacticity level of the layer or change the blending option to suite your needs, I duplicated the layer, changed the bottom of the two to darken, dropped its opacticity to 80% then dropped the upper copy to 65%. And moved the top one slightly to the left. (shadows and stuff)
    Tada!

    Next, New layer and go nuts with your brushes to add darker arias to the page itself, I used the coffee stain brush from Miss M and added a few smudges, then used the splatter brush to add in some ink marks.

    You can always add a grain filter to the finished thing to rough it up a little and make it look like old paper.
    If you want to a nice grain is : intensity 14 and contrast 50. Grain type : soft.

    This is how mine turned out.
    Thanks bye!


    Finished Product (black is empty space)

  7. #7
    Senior Member Black_phoenix's Avatar
    Join Date
    Oct 2000
    Location
    Leeds, UK
    Posts
    2,194
    Natsia, nice tutorial

    good work

    bp

  8. #8
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Yep, good goin', Nats!
    mrush


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

  9. #9
    Teckno Geek WandMan's Avatar
    Join Date
    Jun 2005
    Location
    The Internet or at the Computer Desk
    Posts
    399
    but not really looking like the example site. but thanks for the tuts and brushes!!!

  10. #10
    Senior Member Black_phoenix's Avatar
    Join Date
    Oct 2000
    Location
    Leeds, UK
    Posts
    2,194
    Hi you dont want it to look exactly like that, if you did just steal the graphic (and you will get spotted), get someting close to it, have some fun dabble and try a few new things out, you can always screenshot the background, paste into photoshop and build over it (turn layer opacity down to 80 so you can see)

    scan torn paper, there are so many ways to get to where you want to be

    bp

  11. #11
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    With the above tutorial and a better selection of brushes, you should be easily able to alter the outcome and come up with something just like that.

    all it is basically is a shape with brushes applied to the edge as well as a layer masks on the edges.



    Something I did in like 5 seconds, three layers in all - background, shape/edge brushes with a layer mask, and a duplicate layer for the under shadow, I'd rather make my own shadows as opposed to using layer effects.

    [ Hello ] | [ gerbick ] | [ Ω ]

  12. #12
    Senior Member
    Join Date
    Sep 2005
    Posts
    1,764
    Thanks guys, I just hope it helped.
    Gerbs, I'm liking yours, it has that whole "hand made" paper thing going.

  13. #13
    UnRegistered User
    Join Date
    Jan 2006
    Posts
    29
    Quote Originally Posted by wbwd
    I would be interested in that too... I never was sure how it's done... And yes, I have photoshop CS2, i always thought it's done by slice-ing the "huge" bg paper img... But what if the site's dimmensions change all the time when clicking on dif link ( should there be a new bg make, that has bigger dimensions )? Hmmm...
    Thats the bit I always struggle with! Any suggestions folks..?

  14. #14
    Senior Member
    Join Date
    Sep 2005
    Posts
    1,764
    well I'd use these as edges, and have a transparent area on the edges to blend with what ever I used as a back drop. I dont think that you'd need to make a new edge every time you change your stage aria.

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