Solved

displaying banner in different browsers

Posted on 2004-03-20
10
183 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
  • 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

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…
In this tutorial viewers will learn a few layer organization tricks and tips to improve their workflow in Photoshop. Open a multi-layer document in Photoshop: View all your layers by going Window > Layers:  To make sure your layers can be identified…

786 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