treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Logo distortion

  • Can anyone please tell me what I need to do in order for the logo to keep it's perspective?
    Thanks
    http://www.wotcdc.com/
  • I don't see a logo... Unless you're refering to the 5-6 on the bottom?
  • I would not put a logo right next to other logos, I never seen "your logo" next to everything else.

    so in that sense to keep its perspective to the site, take it away from the line of other logos
  • 1) I don't really understand the question

    and

    2) If guessing at what the question is, it looks like you've distorted the image yourself?
  • Assuming you are working with Photoshop, if you hold down the Shift key while you are resizing the logo, it will keep the correct proportion.
  • Doh, falken got it.. I didn't even realize your logo was on the left there.. at first glance it looks like sponsor links or something.
  • Actually I listed all of them because we are designing for all of those companies and the round logos does not come out completely round. I have tried to resize then in Photoshop but no luck with that. Do they have to be vectors because the client provided them to me as .jpg's. The only one that appears to look ok is the one for the Orchid, but the others are still distorted.
  • Did you receive a different .jpg for each logo?

    Were they distorted when you received them?

    When you edited them in PS, did you hold down the shift key when you resized them?
  • Yes, I received a different file for each logo and they were not distorted. When I place them on the page that I am designing it does not appear distorted. However, when it is uploaded then the distortion begins. But I must admit that prior to me placing them on the page that I did not resize them that way that you are recommending. I will give it a try and see what happens from there.

    So I just want to make sure that once I do that, no matter what size screen that the visitor has, is should keeps its proportion.

    Thanks
  • Well yes, they will... Especially since your background is just one large image. You see, even though you have multiple logos on there, once you save an image as a file, it is just one image.

    Now, if resizing isn't intuitive, you can always have each logo open separately and then go to Edit > Image Size...

    Set the top values to Pixels(I prefer pixels always but it works for any measurement) and make sure at the bottom the checkbox with "Constrain Proportions" is checked. From here, edit the values and both numbers will change, thus keeping all the pixels clean. =)
  • So that means that I should not design the page in Photoshop, because once I flatten it, it would lose distortion again...correct?
  • I'm guessing you aren't the actual designer, so this is hard to fix without giving you step by step instructions to an extremely simple problem.

    The fact that you are using a generator to create the code is probably what is causing most of the problems.

    Actually, come to think of it, if you use the generator, I'm not sure there's anything I can suggest.
  • "TheDoc" said:
    I'm guessing you aren't the actual designer, so this is hard to fix without giving you step by step instructions to an extremely simple problem.

    The fact that you are using a generator to create the code is probably what is causing most of the problems.

    Actually, come to think of it, if you use the generator, I'm not sure there's anything I can suggest.



    lol I was just typing that...
  • Please help me, this is why I posted it on the forum
  • we are trying it just seems with every post that you need more of a lesson in image manipulation.

    Your website has a green background with one image. That image is:

    http://www.wotcdc.com/_wp_generated/wpcdd499c2_0f.jpg

    if the image looks distorted there is only 2 options as to why this has happened...

    1) you have used the height and width on your img tag to give it a size that is not in proportion to your actual image size, so its had to sqeeze down.

    2) you have made an error in photoshop.

    Lets look at number 1 first:

    you code for that central image is:

    <div style=\"position: absolute; left: 0px; top: 17px; width: 1024px; height: 724px;\">
    <img height=\"724\" width=\"1024\" border=\"0\" alt=\"wpcdd499c2_0f.jpg\" title=\"\" name=\"pic_3\" id=\"pic_3\" src=\"_wp_generated/wpcdd499c2_0f.jpg\"/></div>


    Notice you have set the height and width - but is this causing your problem? no. because your image is 1024px by 724px. So if that is not the issue we have to move on to option 2.

    There is no advice we can give here on website code that will make your image display without distortion if you have made the error in photoshop in the first place.

    Photoshop advice

    Now you might have reized the image to make it fit 1024x724px after you had set up the image, if this is correct, then your image would have been sqeezed to fit the canvas size. That would account for your distortion problems.

    to fix the problem you need to learn how to use photoshop - or whatever image editor you are using.

    If you can post all the logos that are in the image there seperatly up here, I can make you an image that isnt distorted that you can just swap out for now.

    Does that help anymore?
  • Great post Robski! But will it work...
  • Yes, this does help me out tremendously. I misread the original message when I was told to do them individually. At first I understood it as the complete page, that's where I got confused at. Because it appeared to be something different.

    Thanks a lot. I'll give it a whirl.