Hi all,

 

I just joined this forum because I encountered a situation that is really starting to buzz me. I consider myself an intermediate webdesigner and have the following with which I would like some help.

 

A friend of mine build a multilayered psd weblayout that has a total width of 1600px. The centre is approx. 900px and is the actual content part. Now I know how the slicing and exporting is done from photoshop to dreamweaver, but I don't want my page to be 1600px wide. I tried several things, like croping the psd (but then I have to use part of the layout as a background image, and since it is a gradient top with a pvc look, it doesn't blend well).

There must be something I missed (probably something simple ).

 

What is the best way to make this work?

I added a jpg of the layout for reference.

 

p.s. I would like the white part of the layout to have a variable height.

 

Thanks in advance,

Ee-Djee

In photoshop, open the Image menu, select 'Canvas Size'

 

Make sure that the units are set to 'pixels', make sure that 'relative' is unchecked.

 

Set the width to 900, leave the height as it is. In the 'Anchor' grid make sure the square in the very centre is selected so that an arrow goes out in each direction around it like a compass (should be as default). Click OK.

 

That should evenly trim off that excess that you have.

 

Remember that the aim when converting a PSD is that the majority of the .psd should be replaced by css that gives the same effect. So if you need a white box you use css rather than a white slice. If you have a background that is 800px high by 900 wide then you make an image that is 800px high and 1px wide and use css to repeat is horizontally.

 

Avoid having images that match or exceed the entire width or height of the visible pane. For example if you have a banner that needs to appear 900px wide then you have a section on the left that might be 200px wide and a section on the right that might be another 200px wide. This middle section should be made up of a repeated 1px slice so that there is room for the layout to expand and contract depending on the users device/screen size.

Thanks, I will go and try this

In photoshop, open the Image menu, select 'Canvas Size'

 

Make sure that the units are set to 'pixels', make sure that 'relative' is unchecked.

 

Set the width to 900, leave the height as it is. In the 'Anchor' grid make sure the square in the very centre is selected so that an arrow goes out in each direction around it like a compass (should be as default). Click OK.

 

That should evenly trim off that excess that you have.

 

Remember that the aim when converting a PSD is that the majority of the .psd should be replaced by css that gives the same effect. So if you need a white box you use css rather than a white slice. If you have a background that is 800px high by 900 wide then you make an image that is 800px high and 1px wide and use css to repeat is horizontally.

 

Avoid having images that match or exceed the entire width or height of the visible pane. For example if you have a banner that needs to appear 900px wide then you have a section on the left that might be 200px wide and a section on the right that might be another 200px wide. This middle section should be made up of a repeated 1px slice so that there is room for the layout to expand and contract depending on the users device/screen size.

 

Hi DesignerX,

It worked like a charm. Thanks a lot for the advice.

Why not to press a small white plus on the green button at the bottom right corner of DesignerX's helpful post ?