6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Need help resizing an image for my header

by Zachary R. Skinner
5 replies
  • WEB DESIGN
    • |
Hey gang,

Here is the site i'm working on now

I'm having trouble getting the size right for the logo featured in the header. I'm not sure how to size the image so it fits in the space allocated for it.

In addition, I'm not sure how to resize the image so that it retains it's resolution

The original image size is 228x221 and its a png file

I would really, really appreciate any help

Thanks!
#header #image #resizing
  • Profile picture of the author 2WDHost
    Hi Zachary.

    Few suggestions:
    1. Don't change the aspect ratio of your image just by changing it's width/height.
    2. Your image and it's allocated space have different aspect ratio. Change the allocated space aspect ratio to fit the aspect ratio of your image.
    3. Don't resize the image in HTML. Resize it using the image editor.

    Few questions:
    1. What image editor do you use?
    2. Do you have any other versions of your logo image (with different aspect ratio)?
    {{ DiscussionBoard.errors[10064938].message }}
  • Profile picture of the author Jurrie
    hey Zachary;


    your Original image is too small and it's a png file, wich usually means when you resize this file you will have loss in quality.
    if you don't have a vector file of it , i suggest you do it like this : use image software like photoshop or if you don't have that , use Gimp ( that free to download and install )


    what you do , is create a new file using the right dimensions for your header and simply place the png file onto that. your png file will now be surrounded by a white border . save it as a new png and use that to put into your header , your logo won't be bigger , but at least it will not be distorted by resizing the Original


    good look and feel free to ask should you need more help


    regards


    Jurrie
    {{ DiscussionBoard.errors[10064942].message }}
    • Profile picture of the author Zachary R. Skinner
      Thanks everyone for the respones.

      I'm using perfect resize 9 for the image editor.

      I just downloaded it yesterday and I'm still not completely sure how to use it.

      So how can I be sure what dimensions to change it to?

      When I look at the code, it says the image area is 256x79 but somehow that doesn't seem correct
      Signature
      "The successful man is the one who finds out what is the matter with his business before his competitors do"
      {{ DiscussionBoard.errors[10065000].message }}
      • Profile picture of the author WPThemeGuru
        Originally Posted by Zachary R. Skinner View Post

        Thanks everyone for the respones.

        I'm using perfect resize 9 for the image editor.

        I just downloaded it yesterday and I'm still not completely sure how to use it.

        So how can I be sure what dimensions to change it to?

        When I look at the code, it says the image area is 256x79 but somehow that doesn't seem correct
        Your logo size is good. Mostly logos are small. They are wide but in height they are mostly not bigger than 100px. Because mostly header are not big. Just remove the drak shadow image in .header class and i think it looks ok. Just change the font in logo and your logo looks will look good.
        {{ DiscussionBoard.errors[10066692].message }}
  • Profile picture of the author JosephI
    Not sure what you're trying to achieve.
    The header space on the theme is 960x155 and you're only utilizing a portion of it.
    You already have a header image loaded, header.jpg which is white background with vertical shadows on the 2 sides, that's where those shadows on each site of the logo come from, header space is shrinking to your logo.
    Your logo is on top of the header.jpg

    if you replace the header.jpg with same size image, you should be good.
    If what you have now is what you want, go for it.
    {{ DiscussionBoard.errors[10066088].message }}

Trending Topics