Grow your CSS skills. Land your dream job.

Logo distortion

  • # January 8, 2009 at 9:53 am

    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/

    # January 8, 2009 at 12:07 pm

    I don’t see a logo… Unless you’re refering to the 5-6 on the bottom?

    # January 8, 2009 at 12:16 pm

    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

    # January 8, 2009 at 12:37 pm

    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?

    # January 8, 2009 at 1:41 pm

    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.

    # January 8, 2009 at 5:26 pm

    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.

    # January 8, 2009 at 6:50 pm

    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.

    # January 8, 2009 at 8:18 pm

    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?

    # January 9, 2009 at 10:49 am

    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

    # January 9, 2009 at 11:43 am

    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. =)

    # January 9, 2009 at 12:43 pm

    So that means that I should not design the page in Photoshop, because once I flatten it, it would lose distortion again…correct?

    # January 9, 2009 at 1:19 pm

    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.

    Rob
    # January 9, 2009 at 1:20 pm
    "TheDoc" wrote:
    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…

    # January 11, 2009 at 10:37 am

    Please help me, this is why I posted it on the forum

    Rob
    # January 11, 2009 at 12:02 pm

    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:

    Code:
    wpcdd499c2_0f.jpg

    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?

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".