Basically, I love how people use textures in web design. But as most website designs are "fluid", how do you make them work for all monitors and make them seamless? For Example, on the website http://amazorize.com/ they have the "triangle" effect at the bottom of the main section, how would you go about making something like this seamless?
Answer
Patterns are made using tiny elements that join seamlessly when they repeat. Most site backgrounds are made in this way. The advantages are: a) you're just repeating a tiny image, so the page remains light, and b) the background automatically adapts to the browser window. This is really what Photoshop is doing when you fill a selection with a pattern: the same tiny image is repeated multiple times until the area is filled.
The Amazorize site uses the principle for the content background and the sawtooth edges (which repeat only on the x-axis -- "repeat-x" in CSS).
There are dozens of tutorials showing how to make a pattern in Photoshop. This one covers all the bases quite well, but if you Google "seamless pattern +Photoshop" you'll get pages and pages of them.
Take the single image from which the pattern is built, and use that as the background for any element that has a "background-image" property. In CSS, use repeat, repeat-x or repeat-y to create the pattern.
No comments:
Post a Comment