Edited site template with PS & IR, exported to HTML, works but too small.. HELP!

A
Posted By
Allegro
Oct 2, 2004
Views
241
Replies
2
Status
Closed
Hi,

I’ve been working with PhotoShop for some time now, and decided i wanted to design my website with it. Or at least try what i could accomplish. So, in order to have an idea how to create a site, i downloaded a template (a editable PSD, a exported site from that PSD (layout.html/images) and the primary index.html which i can edit with a webeditor.

I checked the template out, and edited some stuff and exported as a new layout.html. All looked ok. (However, i noticed the site/page in the layout.html is much smaller than the index.html page.. Not full screen.. Maybe it’s just a preview?)

So, i decided to create my own design. Background, buttons, shapes, different layers.. All worked ok, sliced it and saved. Then used Image Ready CS to get the buttons to work (rollover-effect).
That worked great, so i decided it was time to export/save it as HTML. It saved it as the layout.html and the images directory.
It seems to work ok, but it doesn’t look like a site yet. If i open the page, it’s just a small but working version of the site. The buttons, etc seem to work but it’s not filling the screen like the index.html did.

Did i miss something? Any way to export it correctly from Photoshop or Image Ready to create a correct, editable index.html instead of a preview??

Or do i need to use another program to create a full correct index.html?? (Webeditor maybe? Tried opening layout.html with a few editors, but it is still a small version of the site.. How to display/export it correctly??

Or do i have to edit another thing with a webeditor instead of the layout.html?? The PSD itself??

If someone could tell me how i could get the site to display correctly, that would be great..
I’m almost done, but this keeps bugging me..

Thanks,

Allegro.

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

B
bogus
Oct 2, 2004
It seems that when you worked on the images in PS, you were zoomed in (the window will tell you what percent you are viewing the image). So when you exported the html and the images were 100% size, they looked too small.

Open your files in PS. Go to the menu File>Image size. Take note of the pixel dimensions. This is the actual size of the image. Photoshop can zoom in but web browsers can not.

I believe the standard for web pages is 800 pixels wide by 600 pixels high. You can increae the image size by entering higher numbers or a larger percentage in the boxes in Image Size. Just be sure that constrain proportions and resize image with bicubic is checked. This may make the image a little blurry if you increase the size a lot.

PS and ImageReady are exellent web tools.

Allegro wrote:

Hi,

I’ve been working with PhotoShop for some time now, and decided i wanted to design my website with it. Or at least try what i could accomplish. So, in order to have an idea how to create a site, i downloaded a template (a editable PSD, a exported site from that PSD (layout.html/images) and the primary index.html which i can edit with a webeditor.

I checked the template out, and edited some stuff and exported as a new layout.html. All looked ok. (However, i noticed the site/page in the layout.html is much smaller than the index.html page.. Not full screen.. Maybe it’s just a preview?)

So, i decided to create my own design. Background, buttons, shapes, different layers.. All worked ok, sliced it and saved. Then used Image Ready CS to get the buttons to work (rollover-effect).
That worked great, so i decided it was time to export/save it as HTML. It saved it as the layout.html and the images directory.
It seems to work ok, but it doesn’t look like a site yet. If i open the page, it’s just a small but working version of the site. The buttons, etc seem to work but it’s not filling the screen like the index.html did.
Did i miss something? Any way to export it correctly from Photoshop or Image Ready to create a correct, editable index.html instead of a preview??
Or do i need to use another program to create a full correct index.html?? (Webeditor maybe? Tried opening layout.html with a few editors, but it is still a small version of the site.. How to display/export it correctly??
Or do i have to edit another thing with a webeditor instead of the layout.html?? The PSD itself??

If someone could tell me how i could get the site to display correctly, that would be great..
I’m almost done, but this keeps bugging me..

Thanks,

Allegro.

A
Allegro
Oct 2, 2004
Hi,

Thanks for the reply.
But i think it’s someting else..
It’s 100% (not zoomed), and the original is 760×600 pixels. The edited is about 800+x600 pixels (i might change that if i got it exported alright.) So, that should be ok.. Still, it isn’t exported the way it should..

Thanks,

Allegro16.

"bogus" schreef in bericht
It seems that when you worked on the images in PS, you were zoomed in (the window will tell you what percent you are viewing the image). So when you exported the html and the images were 100% size, they looked too small.
Open your files in PS. Go to the menu File>Image size. Take note of the pixel dimensions. This is the actual size of the image. Photoshop can zoom in but web browsers can not.

I believe the standard for web pages is 800 pixels wide by 600 pixels high. You can increae the image size by entering higher numbers or a larger percentage in the boxes in Image Size. Just be sure that constrain proportions and resize image with bicubic is checked. This may make the image a little blurry if you increase the size a lot.

PS and ImageReady are exellent web tools.

Allegro wrote:

Hi,

I’ve been working with PhotoShop for some time now, and decided i wanted to
design my website with it. Or at least try what i could accomplish. So, in order to have an idea how to create a site, i downloaded a template
(a editable PSD, a exported site from that PSD (layout.html/images) and the
primary index.html which i can edit with a webeditor.

I checked the template out, and edited some stuff and exported as a new layout.html. All looked ok. (However, i noticed the site/page in the layout.html is much smaller than the index.html page.. Not full screen.. Maybe it’s just a preview?)

So, i decided to create my own design. Background, buttons, shapes, different layers.. All worked ok, sliced it and saved. Then used Image Ready
CS to get the buttons to work (rollover-effect).
That worked great, so i decided it was time to export/save it as HTML. It saved it as the layout.html and the images directory.
It seems to work ok, but it doesn’t look like a site yet. If i open the page, it’s just a small but working version of the site. The buttons, etc seem to work but it’s not filling the screen like the index.html did.
Did i miss something? Any way to export it correctly from Photoshop or Image
Ready to create a correct, editable index.html instead of a preview??
Or do i need to use another program to create a full correct index.html?? (Webeditor maybe? Tried opening layout.html with a few editors, but it is still a small version of the site.. How to display/export it correctly??
Or do i have to edit another thing with a webeditor instead of the layout.html?? The PSD itself??

If someone could tell me how i could get the site to display correctly, that
would be great..
I’m almost done, but this keeps bugging me..

Thanks,

Allegro.

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections