Solved

Creating 800 by 600 image

Posted on 2004-07-31
30
341 Views
Last Modified: 2011-10-03
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.
0
Comment
Question by:Sethi
  • 14
  • 8
  • 5
  • +2
30 Comments
 
LVL 30

Expert Comment

by:weed
ID: 11684370
How exactly does it appear big? Sure you weren't just viewing at at 50% or something in Photoshop?
0
 
LVL 18

Author Comment

by:Sethi
ID: 11684395
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
 
LVL 30

Expert Comment

by:weed
ID: 11684407
Your HTML may be specifying a larger width. Make sure you dont have your image width and height set to something larger.
0
 
LVL 18

Author Comment

by:Sethi
ID: 11684426
Everything in HTML is ok :-) Nothing is set to larger size.
0
 
LVL 30

Expert Comment

by:weed
ID: 11684488
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
 
LVL 15

Expert Comment

by:will_scarlet7
ID: 11684722
Any chance you want to share the image so we can try to duplicate the problem?
0
 
LVL 18

Author Comment

by:Sethi
ID: 11685006
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
 
LVL 15

Expert Comment

by:will_scarlet7
ID: 11685040
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
 
LVL 18

Author Comment

by:Sethi
ID: 11685051
Sure...I will do that first thing in the morning....Thanks for your patience.
0
 
LVL 2

Expert Comment

by:japly53
ID: 11686338
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
 
LVL 18

Author Comment

by:Sethi
ID: 11686366
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
 
LVL 30

Expert Comment

by:weed
ID: 11686696
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
 
LVL 18

Author Comment

by:Sethi
ID: 11686774
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
 
LVL 30

Expert Comment

by:weed
ID: 11686834
Nope, you have to put it on an web site and post a link to it here.
0
 
LVL 2

Assisted Solution

by:japly53
japly53 earned 100 total points
ID: 11686842
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 18

Author Comment

by:Sethi
ID: 11686990
Thanks for the help japly53...I am outside at the moment and will upload the file once I get back home
0
 
LVL 15

Expert Comment

by:will_scarlet7
ID: 11687153
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
 
LVL 18

Author Comment

by:Sethi
ID: 11687516
Here my friends is the link where I have uploaded the image:
http://img35.exs.cx/img35/8427/imageforee.jpg
0
 
LVL 30

Expert Comment

by:weed
ID: 11688000
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
 
LVL 18

Author Comment

by:Sethi
ID: 11688174
I agree. The image looks fine when uploaded like this, but in the code that I have posted above it breaks the boundaries.
0
 
LVL 30

Expert Comment

by:weed
ID: 11688202
Nothing wrong with your code. Not sure what else to tell you until you can show us the real web page.
0
 
LVL 18

Author Comment

by:Sethi
ID: 11688209
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
 
LVL 30

Assisted Solution

by:weed
weed earned 100 total points
ID: 11688234
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
 
LVL 18

Author Comment

by:Sethi
ID: 11688476
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
 
LVL 3

Expert Comment

by:DCS092999
ID: 11688617
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
 
LVL 18

Author Comment

by:Sethi
ID: 11688649
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
 
LVL 15

Expert Comment

by:will_scarlet7
ID: 11688718
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
 
LVL 18

Author Comment

by:Sethi
ID: 11688737
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
 
LVL 15

Accepted Solution

by:
will_scarlet7 earned 300 total points
ID: 11688958
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
 
LVL 18

Author Comment

by:Sethi
ID: 11690213
Thank you all for this great help.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now