SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    texture: half grunge, half tech

    Here's a tutorial on how to create a cool texture that is kind of grungy, kind of techy, and works great for collages and backgrounds. [img]images/smilies/smile.gif[/img] Permanent Location at SitePoint.com

    STEP 1

    Create a new document, 300x500, with a white background. Set your colors to the default by hitting the “D” key on your keyboard. You want black as your foreground and white as your background.

    Next, go to FILTER > RENDER > CLOUDS.

    Last edited by Adam P.; May 9, 2003 at 16:16.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    STEP 2

    Go to FILTER > BLUR > MOTION BLUR, and use these settings:

    Angle: 0
    Distance: 55 pixels

    Click OK. You should now have something that looks about like this:



    STEP 3

    Next go to FILTER > LIQUIFY. Select the “Shift Pixels Tool” from the left hand toolbar and keep the default settings, Brush size: 64 and Brush pressure: 50. Now, using quick and sweeping strokes, begin at the top of your image and sweep back and forth across your image with slightly overlapping strokes. This should take about 8-10 overlapping strokes. If you mess up, don’t panic! Simply click the “REVERT” button on the right side of the window.



    If done correctly, you should get something similar to the following. Don’t try and be exact – this is an experimental step that you can have fun with.

    Last edited by Adam P.; Jan 13, 2003 at 09:33.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    STEP 4

    Now we need a little more contrast. Go to IMAGE > ADJUSTMENTS > BRIGHTNESS/CONTRAST and use the following settings:

    Brightness: 15
    Contrast: 55

    Click OK



    STEP 5

    Now let’s add a little color. Not too much, because we’re trying to keep a sort of metal/steel look, but enough to add some interest. Go to IMAGE > ADJUSTMENTS > HUE/SATURATION (Ctrl + U) and select the “Colorize” checkbox. I used the following settings to give it a cold steel look, but feel free to experiment.

    Hue: 218
    Saturation: 13
    Lightness: 0

    Click OK.

    Last edited by Adam P.; Jan 13, 2003 at 09:33.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    STEP 6

    This step is optional. I used it to accentuate the highlights and shadows. Simply go to IMAGE > ADJUSTMENTS > REPLACE COLOR. With the eyedropper tool, go to your image and select a pure black. Then, in the “Replace Color” window, change the “Lightness” to -40. Leave Hue and Saturation alone. Click OK.



    STEP 7

    Go to FILTER > SKETCH > WATER PAPER. Keep the default settings and click OK. There you have it! A cool, simple, and fun texture that you can use almost anywhere. Be sure to experiment with your own settings – I guarantee you’ll find something even cooler along the way. If you’d like to use this as a corner background image on a webpage, continue to the next step:

    Last edited by Adam P.; Jan 13, 2003 at 09:33.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    STEP 8: Optional

    If you’d like to use it as a corner background on a webpage, simply select the Eraser Tool, grab a big 200 px feathered brush, and erase around the bottom and left or right side. You should get a nice image that you can place in the corner of a webpage.

    Last edited by Adam P.; Jan 13, 2003 at 09:34.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  6. #6
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great tutorial. You could also use this to make an aged paper/papyrus texture by desaturating, sepia toning and liberal use of the blur and smudge tools.

  7. #7
    Non-Member Siltrince's Avatar
    Join Date
    Aug 2001
    Location
    Belgium
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one Adam

  8. #8
    BoOm-Rocka! Smarky's Avatar
    Join Date
    Jun 2000
    Location
    England
    Posts
    1,319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanna see this effect but your images are broken :P
    Garlic bread, I've tasted it, it's the future

  9. #9
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adam, your images are still broken


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
  •