Forum: Photoshop


Subject: working with a web template in imageready

shadowrelm opened this issue on Jun 10, 2005 ยท 8 posts


shadowrelm posted Fri, 10 June 2005 at 9:43 PM

I am working on a web template in imageready and I have a problem. When I want to convert the image back into html I am only able save the optimized version. Because of this I am only getting about half the information in the transfer. How do I convert the whole thing without any loss of image? Can someone help?


retrocity posted Sat, 11 June 2005 at 4:31 PM

What kind of work are you doing within the template? are you only changing the graphical "look" in the template? or are you changing the "layout" too? i would save the optimized version under a different name and just add the changed code by hand... are you familar with the html tags? :) retrocity


Hoofdcommissaris posted Sun, 12 June 2005 at 3:54 PM

You can choose just to save the images, not the html. So you will not loose the code that was embedded. When you do the 'save optimized', change the default settings to accomplish it. (but I think you have figured that out already, it has been two days... :-)


shadowrelm posted Mon, 13 June 2005 at 2:05 PM

I figured out that when I work with a psd file in image ready and save as html and images I get a working web page and the folder that holds the images for that page. When I save as optimized I loose some of the image and end up with holes as I stated earlier. When I work with a jpeg or bmp of the template instead of the psd and I save as optimized html and images I still get a working web page and the images folder and I do not loose any of the images. I still get the complete page but I have discovered another problem. When I preview the page in a browser the page does not fill the whole of the web window. I mean the page is in the upper left corner but there is a large white margin both below it and to the right. I figured this was due to the size of which I was saving the page so I increased it. I still get the white border on the top and to the bottom of the page (although it is very slight) and the page fills from left to right perfectly. I am getting a decrease of sharpness however. Since I am increasing the size of the saved page some of my images are becoming blurry around the edges so they look just a hair out of focus. My question is how do I increase the size of the page so that it fills the entire web window without loosing sharpness of the images?


Hoofdcommissaris posted Tue, 14 June 2005 at 2:12 AM

You can not increase the actual pixel information without distorting/blurring. Pixels do not stretch... And there is no such thing as a 'web window'. Everyone who looks at your page can decide their own window size, so there is never a design that will 'fill' every page size. It all depends on the viewer. The only way to achieve a completely filled page that adapts itself to the viewers size of choice, is to base your design on tables, or make your lay-out it css-driven with procentual values. But that is totally out of the realm of photoshop, we are talking GoLive or Dreamweaver here. The easy way to solve your problem is to choose a background color that matches your design, or complements it. Center the templates result (which is a non-stretching table) in the html page en take the border left right and bottom for granted. You will need some kind of html editor to do the centering (you can set the background color during the export if I am correct), but you can not make any web page without that. That html stuff is not as easy as one would want. The html & images Photoshop/ImageReady make does not have the same result in every browser. Especially if you have differnt numbers of slices in different rows and columns. Some browsers will tear your page apart :-( When you are building your page, remember to look at it with every browser you can get your hands on. And via the PC of your granny, you best friend from school and Harry, Dick & Tom from across the street. The compression is also important. You can choose a different compression for every slice. If you just choose Very High for everything, granny will dose off before the first page is loaded via her dial-up modem. There is a lot to consider when making things for the web. It is a wild adventure that will costs you some sweat. But if it works it is all worth it!


shadowrelm posted Tue, 14 June 2005 at 12:07 PM

Thanks for your responce. I am using dreamweaver to actually build the site but I am using photoshop to sub out their images for mine and then image ready to turn the resulting psd back into a web page for use in dreamweaver. I would prefer to do it all in dreamweaver but the big D is a new experience for me and I am learning as I go. I am still not sure what all it can do. I do apreciate all the help from you guys.


karosnikov posted Wed, 22 June 2005 at 10:30 PM

photoshop/imageReady is good for previewing a painting of what you want a page too look like. i like to slice it up the long old fasion way, make rectangular selections, cut, make new file, paste, save for web. if you insist on a background image make it a 'tile'.


Hoofdcommissaris posted Thu, 23 June 2005 at 2:34 AM

I like using guides (and then make slices from guides) to make nice economical slices. The nice advantage of slicing in the ImageReady document is greater flexibility when it comes to changing things or adding a chapter/button/icon. You can change the slices (whole rows or columns in one move) and save the resulting changed parts en see how it affects your html file in you editor of choice. When you cut and paste and the client insists on adding a 'my wifes quilts' section to the site, you have to re-cut and re-paste all parts that change. You can change the 'save-for-web'-settings per slice AND you can preview how that gif interacts with the jpg just beside it. Re-using images in different slices is done when working on the resulting html file (in GoLive in my case), as wel as adding backgrounds. What do you think are the advantages to do the slicing that 'old fashioned' way? I can not think of many. (just very curious...)