Wow… it’s been a while since I have revisited using seamless tiles, and for those of you looking for a sequel to my “Basics of creating seamless tiles” tutorial, I apologize for the delay.

In writing this, I realized just how much it takes to describe how to do it right, so I decided to break it into a 2 part tutorial.

What we are going to do with these tutorials is combine a seamless tile with a little bit of CSS to create the core of a site template with low bandwidth (because we are using the same image over and over) but high impact. I use pure CSS (no tables for layout) for all of the web work that I do, as there are tons of reasons why. Cleaner code, faster loading, and proper loading of the page in blocks down the screen. There are rumors that it even improves search ranks, as the engines dont have to parse through extra <table> <td> and <tr> tags to get to the content, but from what my SEO colleagues tell me, this is totally unfounded.

If you’d like to do some reading up on using pure CSS for layout, head over here: GLISH or W3SCHOOLS

Okay… so you’ve got your seamless tile that we created in the previous tutorial, right? I’ve got mine!

As this is just going to be another basic seamless tile tutorial to give you an idea of what can be done, we are going to keep things simple. What we are after is a strip of rusted metal overlapping a background of rusted metal centered in the screen, with a dropshadow for depth. This strip will expand to fit whatever content you choose to put in it, yet it will look like one large image.

To achieve this correctly, we’ll need to create the “rails” for the left and right sides of the center strip, which contain the drop shadow to create depth. First, we’ll need to start with the seamless tile in photoshop, and somewhat replicate what CSS does using an image as a background tile.

1. Open the tile, double click on ‘background’ in the layer palette, and make it an actual layer.
2. Go to IMAGE>>CANVAS SIZE and adjust this to 760px wide.
   (the typical ‘live’ area for a browser window)
3. Duplicate that layer directly left and right of the original, matching up the edges, thus creating a screenful of the texture.
4. Drag guides in 20px from the left and right. (or more, if you want a wider shadow effect)
5. Create a new layer called ’shadows’, and place a black to white blend inside those outer guided areas. Then set this layer’s properties to linear burn, and opacity to 40%+/-.
   (linear burn creates a more realistic drop shadow than multiply, IMHO)
6. Lastly, what we want to use is the photoshop “slice” feature, which only makes publishing easier. Click on the slice tool in the Tools palette, and drag a ’slice’ area out for each of the shadowed areas, outlined by the guides. The slice tool should ’snap’ right to the guides, ensuring you have the whole 20px wide areas. (make sure the slices are the whole height of your tile)
7. Now that the slices are created, select the ’slice select’ tool in the Tools palette. (click and hold the slice tool in the Tools palette, and you will see a knife with an arrow) With the ’slice select’ tool, double click on each of the left and right ’slice’ areas you defined, naming each. I used ‘leftside’ and ‘rightside’ for mine.
8. If you haven’t done so already – SAVE!

Now all we have to do is save the files to use in your page. Hopefully, you already have a folder created for this project to keep things tidy. Use FILE>>SAVE FOR WEB to bring up the web image preview. I have mentioned this before, but I have found this is the best method for saving files for the internet, as it strips out much of the ‘bloat’ you get with “SAVE AS” and picking the jpg option, thus resulting in smaller files.

By default, the ’slice select’ tool will be activated. All we want here is that left and right side, so, while holding the shift key down, select the left and right slices. Then set the options to the right to JPEG and about 40-60 quality. (varies depending on the detail in your tile) Once you have the quality adjusted to where its acceptable in the preview, hit SAVE.

Again, hopefully you already have a folder created for this project, which is where you want to save (be sure to put your original seamless tile in there as well, to keep it tidy) In the save dialog, select ‘IMAGES ONLY’ and ‘SELECTED SLICES’, as this is all we need. Leave ‘SETTINGS’ at the default, unless you want more control over the naming. The center and background areas will be filled in via CSS in a minute.

Got it? Good… now for part two with the CSS. >>PART TWO

This entry was posted on Thursday, May 31st, 2007 at 9:43 am and is filed under Photoshop, Seamless Tiles, Web Design Stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.