Creating 800 by 600 image

I am an expert in VB area but absolutely new to Photoshop. To create my own website, I created an image in Photohop having a size 800 by 600. But when I use this image in my asp page, it appears big. (I have sliced it using Image Ready.)

Please help.
LVL 18
SethiAsked:
Who is Participating?
 
will_scarlet7Connect With a Mentor Commented:
Glad you got it worked out! Not for any points or that, but just an example for later use check out how they did the title bar on this page:
http://faqs.ign.com/articles/388/388423p1.html

A similar process can be implemented on a larger scale.

Good luck with you web work!

Sam.
0
 
weedCommented:
How exactly does it appear big? Sure you weren't just viewing at at 50% or something in Photoshop?
0
 
SethiAuthor Commented:
I have confirmed it many times in photoshop and I am sure that the image size that I have used in Photoshop is 800 by 600. When I cut and slice the portions of these images in my HTML page, a small portion of image goes off the screen. To take an example, the image being displayed in HTML is 900 by 650 instead of 800 by 600. In other words, it is displaying a larger image in HTML than 800 by 600.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
weedCommented:
Your HTML may be specifying a larger width. Make sure you dont have your image width and height set to something larger.
0
 
SethiAuthor Commented:
Everything in HTML is ok :-) Nothing is set to larger size.
0
 
weedCommented:
It's gotta be. There's no other way an 800x600 image could be resized up. Either it's bigger in photoshop, or it's been enlarged in HTML. There arent any other options.
0
 
will_scarlet7Commented:
Any chance you want to share the image so we can try to duplicate the problem?
0
 
SethiAuthor Commented:
Sharing the image would not be possible as it contains the logo and some important stuff that is not possible to share at this stage. However, I can definately post the code of the HTML file here:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<Table>
      <TR><img src="Images/Top.JPG"></TR>
      <TR>
            <TD><img src="Images/Left.JPG"></TD>
            <TD><img src="Images/Right.JPG"></TD>      
      </TR>
</Table>
</body>
</html>

The image has been 100% created with following specs in Photoshop:
Image size: 800 pixels Width and 600 pixels Height
Document size: 5.33 inches width and 4 inches height
Resolution: 150 pixels/inch

Hope this makes my point more clear.

0
 
will_scarlet7Commented:
What about making a dummy image with the same specs and seeing if it does the same in your code, and then if it does you can post that and we can try it on our end?
0
 
SethiAuthor Commented:
Sure...I will do that first thing in the morning....Thanks for your patience.
0
 
japly53Commented:
Hi Sethi,

When ever you are creating an image for the web or to be viewed on the monitor you need to use   "72 pixels/inch" NOT "150 pixels/inch" The only time you will increase the resolution from 72 pixels/inch is when you are going to print the image.  The higher the number, the better quality the image will be printed.

Also, I'm assuming your monitor resolution is 800x600, since you said,"a small portion of image goes off the screen."  This is because the web browser has a scrollbar (right side), which takes about 50 pixels (depends on the browser) from the screen, which means there is 750px left for the 800px image to be displayed in.

So, next time you create an image for the web make sure:

1. 72 pixels/inch
2. the image is a little bit less then 800 pixels.

I hope this helps.
0
 
SethiAuthor Commented:
japly53,

This looks very logical that the browser takes some place, but is there an exact size that experienced programers follow in photohop for creating web templates or images that fit HTML page?
0
 
weedCommented:
Actually the DPI of the image doesnt matter because it's all ignored by the browser, and most of the web file formats dont store that info anyway.
0
 
SethiAuthor Commented:
I have croped a portion of that image for experts who wanted to use it. How do I upload it here? There is no way to that in EE?
0
 
weedCommented:
Nope, you have to put it on an web site and post a link to it here.
0
 
japly53Connect With a Mentor Commented:
Just upload your image to www.imageshack.us (no sign-up required)then just copy the link they provide you and post it here.

For the image width, I don't know what experienced programmers use, most experienced web developers design the site so  the site will fill the whole width of the screen (i.e. EE) no matter what resolution the vistor has.  I would say 766px, this fits pretty good in Internet Explorer, but there is space using Mozilla Firefox (pages look different on different browsers), and you should also center it, that way if a vistor has a high resolution, he would see the page centered, and not small and to the left like hotmail.
0
 
SethiAuthor Commented:
Thanks for the help japly53...I am outside at the moment and will upload the file once I get back home
0
 
will_scarlet7Commented:
Sethi, just to throw my 2 cents worth in on the resolution issue... Weed is right that the resolution will not affect the size that a picture is displayed, but the reason that most web programmers use lower resolution graphics as Japly53 pointed out is that they tend to download faster, enhancing the overall load time for your page.
0
 
SethiAuthor Commented:
Here my friends is the link where I have uploaded the image:
http://img35.exs.cx/img35/8427/imageforee.jpg
0
 
weedCommented:
Image looks fine to me. We're going to have to see it in the web context in order to know why it's being a weird size.
0
 
SethiAuthor Commented:
I agree. The image looks fine when uploaded like this, but in the code that I have posted above it breaks the boundaries.
0
 
weedCommented:
Nothing wrong with your code. Not sure what else to tell you until you can show us the real web page.
0
 
SethiAuthor Commented:
Infact I would reverse my comment mentioned above. When I uploaded the image it looked fine, but not it is not. I am surprised as to what has happened? I am uploading another image that show what I see at my end:
http://img33.exs.cx/img33/1516/actualview.jpg
0
 
weedConnect With a Mentor Commented:
The image you posted earlier, and the image in the web page you just posted, are exactly the same size. The difference is that you have a small margin on the left hand side that is introduced by the web browser. You can eliminate it by using topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" in the body.
0
 
SethiAuthor Commented:
I have tried that also...but it still breaks the boundry...I think this link that I have just found at google looks good and explains this problem:

http://www.humboldt.edu/~storage/basics/image_ready.html
0
 
DCS092999Commented:
Sorry if this comment is too basic, but after reading the above I have to ask just to rule out the possibility...

You said the image is only slightly goes off the screen when viewed in the browser on an 800 x 600 display, and that you had created the image at exactly 800 x 600, which is pretty darn tight planning of real estate for images on the screen.  Any chance you simply didn't account for the width of the browser frame when creating your images?  
0
 
SethiAuthor Commented:
Yes...indeed. I didn't take into consideration the browser frame and width etc. and after reading the comment that I have searched from google I think it is required.
0
 
will_scarlet7Commented:
Sethi, what about cutting up your image and having it sized by the browser? What I mean is you make your buttons on the right seperate and your bar accross the bottom you cut so that you have one part that has your text "About Me" and the rest is just a small image that you tile, this would free you from the constraints of the browser window and fit the page no matter what resolution the user has set no?
0
 
SethiAuthor Commented:
will_scarlet, thanks for the suggestion. As this issue looks now resolved by the link displayed above, I will look into all other aspects and re-design the page keeping this in mind.
0
 
SethiAuthor Commented:
Thank you all for this great help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.