SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fireworks -- reducing size of image

    For all the images on this site, I reduced the size by going to File > Export Wizard. If you'll notice as you click each link in the navigation, the header takes too long too load. How do I reduce the size of the images even more?

    I remember someone helped me with another site awhile back (for CSS) and used MS PhotoEditor or some other free program and reduced the images by at least half of what mine were using Export Wizard.

    Thanks so much in advance!

  2. #2
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the format of the file used? Is it GIF?

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The files are jpegs...they're the headers on this site. Thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2002
    Location
    Vancouver, USA
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you check other settings, like lower quality JPG, PNG 8, etc?
    Halbrook Technologies - Web Hosting &
    Zikula Application Framework Services

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean when I was using the Export Wizard? Did I check the option for lower quality? Not sure....

  6. #6
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The quality/size looks about right. What I noticed though is that you have the images saved as a seperate image for each page of the website. I'm not sure what you are using to create your website but you could avoid the reloading of the header image by linking all of the pages to the same version of the header image. The browser recognises that the image is the same location and same name and so it uses the cache version and doesn't re-load it - thus eliminating the delay you see.

    Example: on the forms page the link to the header image is:
    http:// ...temp/http-pac/forms/images/header.jpg

    Change that link to the same location as the home page version which is:
    http:// .../temp/http-pac/images/header.jpg

    If you really want to just crank down the settings in the Export menu of Fireworks you could. Looks like you have quite a bit of wiggle room because the images are nice and clean.
    Last edited by Slackr; Oct 11, 2009 at 16:05. Reason: turned off auto url

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion. If you'll notice, all the headers have a different title and the text that's used is not a standard font (Opera SF - or at least I didn't think it was), so the title needed to be an image. At first, I tried using the same top section of the header as you suggested and just change the title section (the bottom rectangle with text) only, but I am so bad at slicing or cutting images, it looked terrible. What would you suggest?

    A couple of questions:
    Is Opera a standard font?

    Even if it's not, how do you get it so that you slice the PNG or PSD design so that they line up?

  8. #8
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Yep my bad, was in a rush and didn't notice. Having said that the files are a pretty good size. You can optimise a little more by playing with the quality setting on your jpgs. Because of the photographic content you'll probably want to stay away from GIF, you could try as a PNG though.

    Unless you have a good asthetic reason to run with a different font for your header you could get away with using a standard font. Typographically you want to maintain consistency and use as few different fonts as possible. Use colour and style to differentiate. Because the website is small it is purely an asthetic decision because visitors are unlikely to get lost.

    You should be able to leave your header image in the same position and just alter the text layer by turning them on and off to export the header images. Then the image will remain a constant size and position while your text is the only thing that changes. "Long hand" you could save an individual header file for each page being careful to only replace the text and not move anything else.

  9. #9
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Oh and if you haven't discovered it already there is a slice tool in Photoshop, alternatively if you work with guides you can generate slices off the guides.

  10. #10
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use FW. Whenever I have a PSD file, I open it in FW. I've tried guides and something else and still doesn't come out right.

    Probably need to look into a course on Lynda.com.

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would I do this:

    You should be able to leave your header image in the same position and just alter the text layer by turning them on and off to export the header images. Then the image will remain a constant size and position while your text is the only thing that changes. "Long hand" you could save an individual header file for each page being careful to only replace the text and not move anything else.

  12. #12
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sculley View Post
    How would I do this:

    You should be able to leave your header image in the same position and just alter the text layer by turning them on and off to export the header images. Then the image will remain a constant size and position while your text is the only thing that changes. "Long hand" you could save an individual header file for each page being careful to only replace the text and not move anything else.
    Specify your header.jpg as a background image using CSS (then it's loaded once only and will appear on every page without having to code it for each page - the magic of CSS!). Put the title of the page in a <h1>. You could centre that using CSS too.

    EDIT: Also I noticed that there is an area of black space at the bottom of the header image. If you crop off that black and specify that the background is the colour black using CSS, you'll reduce the size of the image (by about 20&#37; when I tried).

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Hooperman. Is this what you mean?

    #header {
    margin-left:23em;
    background:#000 url(../images/header2.jpg) no-repeat;
    width:595px;
    height:204px;
    text-align:center;
    }
    .title {
    padding-top:160px;
    text-align:center;
    }

    <div id="header"><!-- TemplateBeginEditable name="header" --><img src="../images/title.gif" width="508" height="43" alt="People's Acupuncture title" class="title" /><!-- TemplateEndEditable --></div>


    I noticed a space at the top of the header. How do I get rid of that? Negative top margin in header rule?


    EDIT: Also I noticed that there is an area of black space at the bottom of the header image. If you crop off that black and specify that the background is the colour black using CSS, you'll reduce the size of the image (by about 20&#37; when I tried).
    Not sure what you meant by the black on the bottom. Is it okay to do it like this or is it cleaner to do as a background?

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scratch that last sentence on the last line.

  15. #15
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How difficult would it be to add a drop shadow to this site like this: http://cli.gs/9WZRYq. Or, do I need to go to the CSS forum?

  16. #16
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's close! The text really ought to be html text though - not an image.I would replace the header div with <h1>The Peoples' Acupuncture Of Asheville</h1>. You'll probably need to do a bit of tweaking to get it to line up.

    Better to have text in the html than in images for various reasons (you can then search the page for text, search engines can index it, you can select and copy it etc.)

    It looks like you sorted the black bit I was gibbering about.

    Adding drop shadows to an image is easy enough, but you'd then have to slice it up and export it as a web page. That's the stop where I get off and the FW manual gets on

  17. #17
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm...I already have an h1 set up for the titles in the content. And, the font for the titles isn't a standard font, I don't think. Could I use the span class=hidden text?

    <span class="hidden">
    <p>The People's Acupuncture of Asheville</p>
    </span>

  18. #18
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any thoughts about the space at the top of the header?

  19. #19
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually you find that people use one <h1> for the primary heading for the page and then lower level headings for sub headings (though that might be up for debate, not sure). I tend to use one <h1> and then multiple lower level headings just because it makes structural sense to me - and it would make sense in your case.

    As for having an image replace a textual heading, I think image replacement with CSS might be what you need. I'm not sure what the best method is, but those links might help.

    I can't see any space at the top of the header. Do you mean the space above the whole design?

  20. #20
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gotcha. Is Opera a standard font? If not, do you know what's close to it that is standard?

    Right between the top of the images and the black top border, there's something. It doesn't look flush.

  21. #21
    SitePoint Wizard bronze trophy hooperman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    4,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, OK, I can see a gap to the right of the header in internet explorer (I was using firefox).

    Not sure how to fix that, but if you can't find a solution yourself, the CSS forum will probably know what to do.

    Don't know about the font I'm afraid. I think this is my stop.

  22. #22
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •