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

Blurred screenshots

  • 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
  • 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.
  • I use Irfanview to resize images

    Al
  • 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.