Solved

displaying banner in different browsers

Posted on 2004-03-20
10
185 Views
Last Modified: 2010-08-05
I had made in photoshop 6 a banner that I want it to be displayed in the full width of the browser, the banner size is 500x60 and its resolution is 72 pix/inch and it is in jpg format>
I tried to set the width and hight property in the html file, but the image was destroyed, also I tried to change the image size in photoshop but also the image was destroyed...
can somebody tell the solution and tell me also how to make the image fet all browsers????
0
Comment
Question by:romram
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 30

Expert Comment

by:weed
ID: 10641453
Any time you resize an image with HTML itll look UGLY. No real way around that one.
As for resizing in photoshop, NEVER resize up. If youre going to resize, resize down.
There's really no way to take a raster image, and have it resize nicely so that it fits ALL browsers. If you want something that resizes nicely, youll have to do it as a vector, flash, or SVG.
0
 
LVL 3

Expert Comment

by:echobravo316
ID: 10642824
Resize each layer in PS individually in order to maintain as much resolution as is possible.  You can make one size that is pretty close to "fits all browsers" however with so many variables like screen size/resolution etc it wont be 100%.  
0
 
LVL 30

Expert Comment

by:weed
ID: 10642835
resizing each layer individually makes NO difference in the resulting quality. Nor is it going to have anything to do with the resulting rez.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:echobravo316
ID: 10642959
Well its better then resizing the picture with HTML.
0
 
LVL 30

Expert Comment

by:weed
ID: 10643030
Not really. The problem is that the image doesnt "grow" to fit larger browsers. Resizing it in Photoshop (all the layers at once, not one at a time which achieves nothing different than doing them all at once) will give you a slightly better image, but you've still hosed your quality. If you resize down in photoshop your image will look better than a resize up, but you've just gotten farther away from having it fit all browsers.
0
 
LVL 3

Expert Comment

by:echobravo316
ID: 10643580
Oh I see now.  I misunderstood the question.  Well I dont see why you couldnt find a JavaScript code that would resize the image accorgind to browser, screen resolution etc.  Try www.javascriptsource.com.  If your a more advanced web designer, try setting up several IF statements
0
 
LVL 9

Expert Comment

by:j3one
ID: 10644150
If you are just wanting it to not look odd, you could make it expand and collapse with the browser. you would just make a table and insert a small slice of the end of your immage (lke 10 px) as the background img for the table. Next nest another table inside the first one with your img in it. The code would look somthing like this...

<table background="images/exp2.gif" width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table id="Table_01" width="735" height="173" border="0" cellpadding="0" cellspacing="0">
      <tr><td><img src="images/YOUR.jpg" width="500" height="60" alt=""></td></tr>
</table></td></tr></table>

the end result would be that no matter ther screen resalution or browser size, your banner will streach all the way accross the screen.
0
 
LVL 1

Accepted Solution

by:
snapdragon030500 earned 125 total points
ID: 10689418
The majority of browers on the Web are still using 800 x 600 resolution.  I like to design headers that are 760 pixels wide, then fill in out to 1024 pixels wide with prettiness that is not important information.  That way, people with 800 x 600 resolution are missing nothing, and people with 1024 x 768 resolution see something all the way across.  People with smaller resolution than 800 see most websites cut off horizontally anyway because their monitor is just too small for modern times.  And people with larger resolution than 1024 x 768 are used to websites not filling their screens.
0
 
LVL 1

Expert Comment

by:snapdragon030500
ID: 10689419
The majority of browers on the Web are still using 800 x 600 resolution.  I like to design headers that are 760 pixels wide, then fill in out to 1024 pixels wide with prettiness that is not important information.  That way, people with 800 x 600 resolution are missing nothing, and people with 1024 x 768 resolution see something all the way across.  People with smaller resolution than 800 see most websites cut off horizontally anyway because their monitor is just too small for modern times.  And people with larger resolution than 1024 x 768 are used to websites not filling their screens.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to correct colors in Photoshop using the Color Balance adjustment Open a photo for editing in Photoshop: Open a photo for editing in Photoshop: Select "OK" on the dialogue: The Color Balance adjustment works b…
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.

726 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