|
Seamless Background Logo Patterns
A background without a seam is a thing of beauty. Seamless backgrounds are not impossible, but they are tricky to perform. Thus far, I've found ImageReady to be the simplest program to work with in terms of seamlessness.
Let's assume you want to plant a logo in a pattern across your Web page. How would one place it so that it were staggered? You could cut and paste the image into quarters, place the quarters in the corners of the canvas, and plant the image back in the center. But it would be tricky to make the image seamless.
Step by step, here's what you do.
1. Assume your logo is about the size of my "thoughtful" logo. That would be 100x74 pixels.
2. Select the image (Ctrl A), copy it (Ctrl C), and paste it (Ctrl V) onto a new white canvas that is 200x200 pixels. It will paste itself into the center of the canvas.
>
3. To split the image into quarters, select Filter, Other, and Offset. Your image will automatically split into perfect quarters and be placed in the corners of the canvas.
4.Paste the original logo again, and it will appear in the center of your canvas.
5. Reselect the completed background and select File and HTML Background. Click View as Background. Then select Preview in and select the browser you wish to view the image in. The image background will then tile accurately in your browser.
Note the text at the top of the browser? That's the HTML code you need to copy and paste to set the image as your background. Just save your image, upload it to the Web server, and copy and paste the text. It's as simple as that.
For more information on backgrounds, check out this tip in our Tips and Tricks section.
Have a comment or question dealing with this article?
Write us!
Back to Tutorial Menu
Back to Artist Main Page
Back To HTML Stuff Main Page
|