Grow your CSS skills. Land your dream job.

Blurred screenshots

  • # January 23, 2009 at 6:13 am

    Hi,
    I am new at webdesign, so this is most likely a stupid question.

    While I try to make some screenshots of web sites they are all a little blurred. Especially text. I use Skitch.

    Another thing – if I resize or crop a screenshot it also gets unsharp. I use Pixelmator or Preview to do that.

    Can someone explain what is the right way to make screenshots and resize them?

    Thanks,
    Marko

    # January 23, 2009 at 12:11 pm

    I don’t use any special 3rd party programs myself. When on a PC I just do the ol’ Alt-PrtScn and then edit in PS.

    On my Mac I just use the "Grab" utility, and then again open it up in PS to edit.

    # January 24, 2009 at 9:27 am

    I use Irfanview to resize images

    Al

    # January 24, 2009 at 1:56 pm

    When you are resizing images some blurriness will happen. You just won’t be able to shrink an image down without some loss of quality.

    Some comments though, assuming you are resizing these thumbnails in Photoshop:

    – when you resize them, use Image > Image Size, and down at the bottom of that Image Size popup, there will be a dropdown with several options ("Bicubic" is the default). When making resizes, select "Bicubic Sharper" which will help improve clarity.

    – if you want to rotate the thumbnails a little to add interest, remember to rotate them first when they are large images, and then resize them down. If you wait to rotate the image until after you have resized it, there will be a significant loss of quality.

    – Finally, check your quality settings when you are using Save For Web… Perhaps you can also increase your quality setting slightly, and that will improve things as well.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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