Help Needed - How To Add A 'Spacer Image' To A PSD Layout?

Hi,

I really hope you can help me in exchange for some reps!

This has to be a super easy question, but I can't find an answer

I have a fixed size PSD web layout (800x600).

The content that will fill the page will be a lot more than 600 px deep, so I need some kind of spacer image which will repeat as necessary as I add more content to the page (please correct me if I have used the wrong terminology!)

Can someone please tell me how this is done, preferably in idiot proof language!

I hope the attached image will demonstrate what I mean better than I have explained it!

Thanks in advance,
A very confused Steve

 

I'll do my best to help you out and understand what you are trying to do. If you are trying to create a web page (which given the design it appears so), wait for adding your text content till you take your .psd layout and convert it to html. When you create your html (perhaps from Imageready slices) you can set the borders as repeating backgrounds to your tables with .html or .css.
If you want to do this in Photoshop alone, save a copy of your design first. Then go to layer, flatten image. Select your background from left to right with the rectangular marquee (you can make this as big or little as you want, even 2 pixels high works, but be sure to keep the width left to right so you get your background in there). Go to image, crop. You will have a long rectangular sized image. Click Edit, Define pattern. Save the pattern. Open your original layout or create a new one. Change the size as tall as you need it to be to accommodate your text. It's really helpful to keep your headers and footers in separate folders containing the layers you use. If you do this, it will save you time and hassle. You can easily move all the layers inside up, down, wherever you need them, which really helps when you resize your canvas. So lets say you have your header and footers in different folders. You can create a new box with the rectangle tool where your background needs to be. Right click on the layer, go to blending options, checkmark pattern overlay, select your pattern from the list. Be sure its set to 100% and centered properly.
Maybe i'm on the right track, feel free to ask any questions.
I hope this helps!

 

One more thing.. It's best to not use Photoshop layouts as web pages alone. If you save the whole thing in .jpg format and put it in a web page you technically can do that, but I highly don't recommend it.
Images are big in file size, full sized layouts without repeating borders, backgrounds, colors, etc. can take a lot of time for visitors to load, especially those on dialup. The number one reason is search engine optimization. When you have text in images (unless its a minimal amount, typically for 'prettier' pages) you will be essentially invisible to search engines. They need to be able to read the text on your website (text in html). There is no way for a search engine currently to read text that is in an image. When search engines are able to read the text on your website, you have a better chance of being indexed and ranked by search engines, which means more visitors to your site, based upon the text that is on your site.

I don't know if you know any of that, perhaps you do, if so, maybe it can help someone else.

Best of luck!

 

Wow, thanks for the swift and comprehensive reply, Design1

Reps added

I'll give your suggestions a go, and see how I get on!

Yes - sorry I didn't mention it, the PSD will end up as HTML, and the content will probably stretch to about 3-4 maybe more page lengths (it's going to be a long form sales pitch, essentially)

I have photoshop, image ready and dreamweaver, so I should be able to follow your advice.

Thanks again!
Steve

 

Thanks again - so what would be the easiest way to make the white space editable (as an html region) from within dreamweaver?

Sorry for the noob questions...

Steve

 

Thanks for the rep!

When you create your slices in imageready, try following what I mentioned about the repeating pattern/borders with your background. If you set your table background to the image that you create, that is approx 770 px wide and 2 px tall, you can keep your cool shadow effects all the way down the page for miles and it will load as fast as the code can be read, where a big bulky image will take awhile and increase load time significantly.
If there is anything I didn't explain very well, feel free to ask about. I'm pretty tired and not totally coherent lol..
I personally love using Fireworks for image slicing. It's very easy! I flatten the design in Photoshop and strip out all of the text, save it to a .jpg file. I then do my slicing. I then the export design to .html. You can choose the level of optimizing that you desire. I typcially output mine to .jpg better quality, which is at 80, depending on what you are working with you can take that down to around 76, which makes the file size a lot smaller while keeping the quality. Below that you will get a pixelated unprofessional look. I never use Fireworks created html, i always put the slices together in Dreamweaver myself by piecing it together and handcoding what I don't like. I know how to handcode the thing myself but Dreamweaver is awesome for making it faster and not messing up formatting or adding additional junk code (unlike FrontPage which is evil.. hehe).

 

I'll do it for you xhtml/css valid if you want, you have my msn. (free btw)

 

Feel free to have a look at this design I created doing what i have explained. I find that learning can be easier when you can see a something stage by stage and rip it apart yourself.

Sample Template

 

Wow, cool! Thanks Ryan! I'll jump on MSN soon! Does that mean you're free to talk, or you'll htmlalize (I clearly just made that word up!) my psd for free?

I'll have to pay you. Please name your price!

Thanks,
Steve

 

I'll do it for free

 

Thanks, Design1 - what a friendly and helpful board this is! I'll look at your example in detail!

Cheers,
Steve