Frequently Asked Questions:

How do I create 980 x 250 px images for the header?

Some people get confused when trying to create images that are 980 pixels wide by 250 pixels high for the header area masthead or Flashfader images.

One common thing I hear is that people can’t figure out how to get them sized that way, because whenever they try to set one of the dimensions, it screws up the other dimension.

Basically, you’re not just resizing when you’re trying to make images into these dimensions, you’re cropping.  If you try to just resize and leave the box “constrain proportions” checked, you’ll never get it to work, because most photos are a 2:3 ratio, and 980×250 is a different ratio.

So, if you’re trying to make a single image into a header image, I would recommend FIRST just resizing the image so that the width is 980px and let the height be whatever it will be.  THEN use the crop tool to crop out a 250px tall section of the image.  Here’s what the crop tool looks like in Photoshop:

This will create a very “panoramic” look, and can be quite cool. You get some unique crops when doing this, like below, from Joel Llacar’s website:

Or, if you want to make a collage-type multiple-images-in-one-image look, then resize a bunch of images to 250px tall and let their width be whatever.  Then create a new file in Photoshop with the dimensions of 980×250px, and copy those image into it and play around with it in there.

Below is an example of such an image I created in Photoshop.  Click on it to view and/or download the full-sized version.  You can see that even though it looks like one image, it is actually several images made into one.

Some people get confused when trying to get their Flashfader to look like this and think they can upload a bunch of little images of varying widths, but you can’t.  You have to create composite images out of the small images first, like the one shown above, with the exact dimensions of 980px by 250px.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Saturday, March 1st, 2008 and is filed under Flash Header, Frequently Asked Questions. You can leave a response, or trackback from your own site.

21 Responses to “How do I create 980 x 250 px images for the header?”

  1. On July 17th, 2008 at 7:45 pm christian said:

    I changed the code to allow the masthead image to be 980X500px, however for some reason the image seems to get skewed back to the 250px hight (although the proportions are still 500px).

    Anyway to get the masthead image to be higher than the default if you’re just using a static image?

  2. On July 18th, 2008 at 6:18 am Jared said:

    @christian: yeah, you’ll need to go into your header.php file and find the line that looks like this: (about line 94=)

    <!–delete next line/chunk if using FlashFader –>
    <img src=”<?php bloginfo(’template_directory’) ?>/images/header-masthead.jpg” height=”250″ width=”980″ alt=”<?php bloginfo(’name’) ?> header” />

    and then change the height to whatever you want it to be.

  3. On August 25th, 2008 at 5:04 pm photoTristan said:

    I have a question about this. How do I crop (in the first example above) so that it’s exactly 250px high? When I goto the crop tool, I’m not figuring out how to actually see how many pixels I’m cropping to.

  4. On August 26th, 2008 at 6:04 am Jared said:

    @photoTristan: i can’t tell you exactly because i’m not sure what program/OS you’re on. in photoshop you can usually open an area on the right called “info” i think that will show you the measurements of what you’re cropping…

  5. On September 14th, 2008 at 12:36 pm terrell said:

    I still can’t get this to work. when i upload to the site alls i see is empty space/

  6. On September 15th, 2008 at 4:48 am Jared said:

    @terrell: i need a little more info. what do you mean? you can’t create the images? you can’t upload them in the flashfader manage panel? what’s your blog address?

  7. On September 25th, 2008 at 8:16 pm Desiree said:

    Hi Jared – I was able to created the masthead in the larger size. Thanks! Now I have a question about the color that comes up when my blog first loads. The area where the masthead is shows a bright aqua color. I have no idea where to change that! Help!

    Thank you!

  8. On September 26th, 2008 at 5:45 pm Jared said:

    @Desiree: what’s your blog address?

  9. On September 26th, 2008 at 9:56 pm Desiree said:

    oops… meant to give you that!

    http://tandemimagesdesign.com/blog/

  10. On September 27th, 2008 at 7:32 am Jared said:

    @Desiree: in your header.php, in the line where the flashfader script is called (not the one in the head section, the second one), yours says this:

    <script type=”text/javascript”>FlashFader(’<?php echo bloginfo(’wpurl’) ?>’);</script>

    change it to:

    <script type=”text/javascript”>FlashFader(’<?php echo bloginfo(’wpurl’) ?>’, ‘#FFFFFF’);</script>

    and that should go away. (don’t just copy paste that line, as the quotes got turned to curley quotes, which will screw things up)

  11. On September 27th, 2008 at 8:21 pm Desiree said:

    Hi Jared…appreciate your help with this. I tried to type the line just as you instructed, the color went away, but so did the masthead. now i can only see the background color at the top. can you see if I typed it wrong? sorry to trouble you!

    Des

  12. On September 28th, 2008 at 5:40 pm Desiree said:

    jared, I kept playing with it, and finally got it to work. thanks again, you are always so helpful!

    Des

  13. On October 16th, 2008 at 7:32 am Kristina said:

    Hi.

    I’m not sure this is where I should post this, but I’m having trouble with the header-logo and masthead files on my blog.

    I’ve uploaded new versions and when I view and refresh my blog it’s about 50% of the time that I see them and 50% of the time I see the default versions. I’ve viewd the files in my /images folder on my ftp and they are definitely the new files. I deleted the default ones when putting up the new ones.

    I’ve tried different browsers, emptying cache… nothing is working.

    Any advice?

  14. On October 16th, 2008 at 11:14 am Jared said:

    @Kristina: what webhost do you use?

    i can only see your new images, not the default ones. are you still having trouble with this?

  15. On March 27th, 2009 at 2:22 pm Annie said:

    Hello,
    Well, I searched dutifully for the answer to my question before contacting you..but was no avail!

    Its just a little thing..

    When I click on my menu item (to bring up bio, contact, etc) the links work, but the actual word, for example: “About Annie” disappears when I click on it. How do I get the menu words to remain solid when clicked on?

    Thanks!

  16. On July 2nd, 2009 at 4:47 pm Alinta said:

    Hello
    I dont know if this isnt working for me because i would have the new version of WP, but i cannot find those manage flashheader settings anywhere to be able to change the height? Could you please point me in the direction of where it would be.
    Thankyou!

  17. On December 16th, 2009 at 7:28 am Lora said:

    Hi Jared! I finally got the prophoto blog, and I’m so excited! I want t make my masthead height longer, and I read Christian’s comment above and your reply, and tried to figure it out myself but I didn’t see the code you mentioned in the header.php Please direct me to the right area. thanks!

  18. On November 6th, 2010 at 1:26 am Dbol said:

    Delighted i discovered , this excellent website, Another good site is Dbol will be sure to bookmark it so i can drop by frequently.

  19. On December 6th, 2010 at 1:24 pm günlük burç said:

    very good \o/

  20. On December 31st, 2010 at 10:54 pm Andrew A. Sailer said:

    I asked my parents to put on some music. My dad then proceeded to put on lady gaga. #twilightzone

  21. On May 8th, 2012 at 8:09 pm Siti web gratis said:

    Siti web gratis…

    [...]» How do I create 980 x 250 px images for the header? Jared’s ProPhoto Tips[...]…

Leave a Reply