Blog Comments

Thanks sammi

thanks for nice comments

Nice work, Boo0. I don't have any criticism for you, but good work making the folder-over/transparency look work with this design.

As Rossable states, you are not limited to this one technique to create a textured bakground.

A simple gradient will provide a more interesting background than any unstyled background, and pure CSS3 backgrounds will be covered in following tutorialss I am preparing.

To me textures differentiate themselves from gradients as much as that textures are more fabric/material related, a blind person can differentiate wood textures from stone and fabric, and my textured backgrounds try to recreate that same sensation.

Although gradients do play a very strong role in recreating the right textured effect, a single color can never represent a complex subconsious awareness.
There is a need for intelligent use of colors and creating the proper gradients.

"texture" can be added with a simple gradient. the term applies to anything that adds depth or intrest without being subject-matter. doesn't have to be a pattern or overly complex stylistic element. study "washes" from stage lighting...

6. Add filter to lower layer.

Select the layer 1 in the layers window and go to the Motion Blur control panel.





This time you angle the Motion Blur 0 degrees (horizontally), and maintain a similar distance as used on the previous layer.

Press OK and save your file.

You will not see anything happening with the main image right now, this last effect was added to layer 1 and only the layer 2 is visible at the moment.

7. Add transparancy to the top layer

Once again select the top layer in your layers window.



Now you need to change the opacity from 100% to 50%.



That is it, as you can see you now have a textile textured tile.

8. Create a background in HTML and CSS

Save your tile in Photoshop as tile.jpg, to your dedicated layout folder inside your website's root folder.
( I store all layout images in a folder called "layout" to keep things organized )

In your external stylesheet (CSS) add the following code:

body {
background-image: url(layout/tile.jpg);
background-repeat: repeat;
}

And you are done, your website now has an textured background created by you.

I recommend to play around with the many effects/filters that Photoshop has to offer, you can create fantastic backgrounds and other graphic elements to enhance and personalize your website designs.

I hope this was helpful and that I explained this technique in a way that you could understand, as one of my first tutorials I still need to find the right flow and your comments will help me improve my tutorials.

Peter hamilton
More tutorials and CSS on my website
Grab that code

4. Duplicate layer

After adding the film-grain effect you need to duplicate the layer.



These two duplicate layers will each be given a different effect in the following steps, now is a good time to save your file as a PSD before proceeding.

5. Add motion blur

Select the top layer from your two layers in the "layer" window, you need to add another filter to this layer.



Select "Filter" >> "Blur" >> "Motion Blur"



You are now redirected to the motion blur control panel.



Recreate the variables as in my example above to create an almost woodgrain effect on the chosen layer.

Notice that the angle of -90 degrees makes the grains appear vertical.

Now is a good time to save your PSD before proceeding.

Continued in next article.

No worries Paul, be sure to keep posting your work here, it might end up in my next highlight list

Thanks for that

Really chuffed my work is mentioned, thanks! :001_tongue:

I missed the gun door handles. Those are awesome, thanks for pointing them out.

Good blog post, nice to see people using this feature might start my own

This is my first attempt to make a blog post, I hope that the article made sense.
please comment on how I could improve, both my code and my tutorial.

Nice threads. I like the "The first ever website"

Test Comment

Sounds like a good idea

The key is not to try fooling them

SEO sounds a bore

Amaing skills

interesting.... I never gave that thoughts!