Tuesday, November 30, 2010

Tutorial of Paper Texture Website in Photoshop Part 1

Tags : Tutorial to make website in adobe photoshop , Learn Web Designing , Learn to Make Basic Website in Photoshop , Learn Tutotorials to desing simple website in adobe photoshop , Learn to make paper texture website in photoshop , photoshop tutorial to make design create website . 

Part 1 - Creating a Paper Texture

There are three different ways you can get a textured paper look:
  1. Scan in your own paper
    Check out Bittbox’s Make an Awesome
    Grungy Paper Texture Tutorial
  2. Use someone else’s texture
    There’s heaps of sites that list textures around, check out these links:
    Bittbox | TextureKing | Psdtuts+ Textures
  3. Make it in Photoshop
    This is what we’re going to do!
Making a texture in Photoshop will generally result in a more stylized than realistic look, but it has its own charms. Also it means you don’t need any external images.

Step 1

So first we’ll start a new document, this canvas is 1200px wide x 900px high. Next we fill the background layer with a beige colour – #e8e8e2.

Step 2

Now create a new layer on top and make your foreground and background colours: #979a8f and #cfd1c5 which are variations of the original colour. Then go to Filter > Render > Clouds

Step 3

Now we run Filter > Artistic > Palette Knife with the settings shown in the image above. Palette knife turns our clouds into blobs … sort of, eventually this will give a slight crumpled feel to the texture.

Step 4

Next we’ll add some noise to the canvas by Filter > Noise > Add Noise using the setting shown. This should make our texture look rough.

Step 5

Now we take our noisy, crumply layer and set it to Multiply and 30%. This will tone it right back.

Step 6

Now create a new layer on top and make your foreground and background colours: #42433e and #cfd1c5 – which is a darker version of the last set so that we get more contrast this time. Then go to Filter > Render > Clouds

Step 7

Then we again run the Filter > Artistic > Palette Knife filter.

Step 8

And this time we set the new layer to Overlay and 60%. This should give our texture a bit more depth.
And that’s it! This is our texture!

Step 9

For this tutorial the light texture is perfect, but you can easily make other variations just by messing about with blending tools. For example to make this dark brown paper texture:
  1. Take the light version and press CTRL-U to alter the Hue/Saturation, set the sliders to -30, -10 and -5 respectively.
  2. Duplicate the layer and press CTRL-SHIFT-U to make it black and white
  3. Then still on the black and white layer, go to Edit > Adjustments > Brightness/Contrast and go to -30 and +30 respectively
  4. Now set the black and white layer to Overlay
  5. Then create another layer on top and fill it with #beac93 then change that layer to Multiply.
  6. Duplicate the Multiplied layer
  7. Then duplicate the black and white layer and pull it right to the top. Set it to Overlay and 20% and rotate it 90′ to get a bit more depth to the texture.

Step 10

If colour variations aren’t enough, you can also change the feel of the texture with the use of different filters. For example here we’ve made a more parchment-y feel by taking our light texture and:
  1. Grab the first crumply/noise layer and run a Filter > Texture > Texturizer and use Canvas, 75% and 2 for your settings
  2. Grab the second crumply/noise layer and run the same filter
  3. Now duplicate the second layer and rotate it by 90′, keeping it set to Overlay and 60%.
  4. Create a new layer on top and fill it with white – #ffffff
  5. Run a Filter > Texture > Texturizer and this time use Canvas, 200% and 16 then set this layer to Overlay and 20%
  6. Now create another layer on top and again fill it with white, this time change the layer blending mode to Color and 53% to get our texture a bit whiter.

Final paper texture notes

Now that you have a texture you can of course turn it into a seamlessly tiled background.
For this tutorial we will be using the first texture we made – the one from step 8

No comments:

Post a Comment