September 15, 2010

Tutorial: Saving and Sizing Your Images for Blogging

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

This tutorial will show you how to resize and save your photos in Photoshop so they are sharp, crisp, and perfectly sized for your blog.

If you’ve ever posted photos on your blog or Facebook, you may have noticed they are not as crisp and clear as the original image.

This is especially frustrating if you’ve spent time editing the photo, only to have it not show up as well in the image you are sharing with everyone!

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

In my last photoshop tutorial, I showed you how I edit my photos. I almost always do these two steps:

1. Sharpen
2. Run an action (usually Fresh & Colorful from the Pioneer Woman actions)

But if I’m going to be sharing these images here on the blog (or Facebook or email) there’s one more thing I do to get them ready.

1. Determine How Big Your Photos Should Be.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging
Left: Internet Explorer. Right: Firefox.

Most blogs are between 400 and 600 px wide. This blog is 600 px. To determine the width of your blog, right-click on a photo that’s already on your blog. From the menu that pops up, click on Properties (if using Internet Explorer) or View Image Info (if using Firefox).

Photoshop Tutorial: Saving and Sizing Your Images for Blogging
Left: Internet Explorer. Right: Firefox.

Look at the Dimensions. The number on the left is how wide the image is. This image of my Cookies ‘N Cream Oreo Fudge Brownies is 600 px wide. That means we’ll want to resize our images for this blog to 600 px wide.

2. Resize.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Open the image in Photoshop and edit to your liking. For this image, I did a sharpen, Fresh & Colorful, then ran the Topaz Adjust Color Blast filter. Love that filter for fall pics! :)

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

When you’re done editing, click on Image > Image Size

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Change the width to 600 (or whatever your size is) and click OK.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Great! Now it’s the right size, but it’s not quite as sharp as the original image…

3. Sharpen.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

First click CTRL-J to create a duplicate layer.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Then click on Filter > Smart Sharpen…

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Change to these settings:

Amount: 60%
Radius: 0.4

And click OK.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Perfect! If it looks too sharp, you can always adjust the opacity until it looks right. (Another reason to always make a duplicate layer.)

4. Save.

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Now we’re ready to save. Click on File > Save for Web & Devices…

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

From the screen that pops up, make sure you are saving as a JPEG and that the quality is around 60. That’s a high enough quality for the picture to still look good, but not so huge that it will take forever to load on your page! :)

Here’s the before….

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

And then after we sharpened:

Photoshop Tutorial: Saving and Sizing Your Images for Blogging

Or roll your mouse over the image below to see the before and after!

It’s subtle. Look at the eyes…

Note: You’ll need to be here on the blog for this to work, not reading from the email or RSS feed.

That’s all there is to it! :)

BTW, If you haven’t seen these already, be sure to check out:

How I Take Pictures
How I Edit Pictures

Have a great day! :)



See More Posts About: Photoshop

66 Comments






1
ava-j September 15, 2010 at 8:20 am

thank you Amanda…i love your easy to follow tutorials! btw, i got your button on my page, thanks again!

Reply

2
Michelle September 15, 2010 at 8:23 am

I love your tutorials, they are so easy to follow and understand. I took an 8 week college course on Photoshop and still don’t feel comfortable using it. Thanks!

Reply

3
Southern Gal September 15, 2010 at 8:33 am

Thanks for another great tutorial. I’m saving these until I get my camera.

Oh, and I can’t get the picture to change and I’m on the blog??

Reply

4
Kelly Jo September 15, 2010 at 8:39 am

Thanks for a great tutorial, Amanda!
I have limited knowledge about PS and I really appreciate you taking the time to make this post.
I hope PSE 4 has these same options for me. I read your post and thought- I can totally do this too!!

Reply

5
Heather September 15, 2010 at 8:44 am

Love this tutorial!! You always have easy instructions, thank you ;)

Reply

6
lisa steiner September 15, 2010 at 8:54 am

wow! thanks so much!! i thought making my pics smaller and lower resolution was doing the job…but your tips and expertise are greatly appreiciated and i realize now i was doing it all wrong! thanks so much!! i am new to your blog…but am so happy i found you!!

Reply

7
Lynne September 15, 2010 at 8:58 am

I could read your photo tutorials every day! Love them.

Reply

8
carrie @ gingerlemongirl.com September 15, 2010 at 9:11 am

this is wonderful Amanda! Now, I just need a decent camera to use to take those pics!! :-) Love your blog!

Reply

9
Nicole Gebhardt September 15, 2010 at 9:23 am

Wow, thanks so much Amanda! I really enjoy your blog for the fun of peeking into your life through some great photography! These how to tips have been wonderful. I now have hope for doing the same on my upcoming blog.
Live well!
- Nicole

Reply

10
Sarah Elizabeth September 15, 2010 at 9:28 am

Love your blog! those “babies” are precious! I want two that look just like yours! Great Tutorial today! Thanks Amanda!

Reply

11
Floppy Latte Designs September 15, 2010 at 9:30 am

Lovely tutorial! Actually, just a lovely blog altogether! And I have been to POSH in Blue Ridge! My Daughter is a nurse and she goes into Blue Ridge all the time! Those shops are addictive!

Reply

12
Amy C. September 15, 2010 at 9:32 am

I just love your blog, and your tutorials have inspired me to do more photography and blogging!! Thank you so much! And keep the tutorials coming! I definitely need them!

Reply

13
Beth September 15, 2010 at 9:37 am

Amanda I absolutely love when you do a tutorial!! I have a question though – I have a Nikon D60 and my night pictures are much to be desired! What settings should I use? Thank you again for all of your great tutorials they are so helpful and easy to understand!!

Reply

14
Carley September 15, 2010 at 9:55 am

Hi Amanda! I’m a newer reader to your blog and I just love it! Especially these tutorials. You have helped me a great deal! My blog and I thank you :)

Reply

15
Ann Daly September 15, 2010 at 10:04 am

This was so helpful. Thank you. ~Ann

Reply

16
Ann September 15, 2010 at 10:32 am

Again, thank you so much for taking the time to publish these tutorials.

Reply

17
Deanna September 15, 2010 at 10:34 am

Thanks for the awesome tutorial! I find photography & PS tutorials to be super helpful. Have a great Wednesday!

Reply

18
Christy T. September 15, 2010 at 10:52 am

Thanks for the sharpening tips. Seriously, it’s so helpful. I love your little nuggets of information. It’s not overwhelming and they are “do-able”. Thanks again. :) {have a great day}

Reply

19
stephanie September 15, 2010 at 11:04 am

Thank you for your tutorials! They are always so helpful & easy to understand, you’re awesome! :)

Reply

20
Frances September 15, 2010 at 11:18 am

I just recently came across your blog! I have learned so much! Your step by step tutorials are awesome!! Thank you for taking the time to pass your knowledge to us!

Take care,
Frances

Reply

21
Heather September 15, 2010 at 11:33 am

This is great Amanda! I love your tutorials. Thanks so much for sharing your knowledge with all of us.

Reply

22
Aimee September 15, 2010 at 11:42 am

Amanda, this has been driving me nuts about my own blog for years. THANK YOU. THANK YOU TO INFINITY!!!

Reply

23
Casey September 15, 2010 at 11:45 am

THANK YOU! I swear I have learned more from your blog in a week than I have in the last 2 years on my own! Your tutorials are super simple to follow. Thanks for sharing your knowledge! I appreciate it more than you will know.

Casey

Reply

24
Tami (pixeltrash) September 15, 2010 at 12:30 pm

Just thought I’d let you know… I get your email and the picture does change in my email. Great tutorial!

Reply

25
Karen September 15, 2010 at 12:47 pm

Do you read my mind Amanda or my blog?I have been toying with this very problem this week.I did a trial blog with resized pictures.I couldn’t work out from the PSE class,I have just taken how to find the size of the pictures for my blog.So thankyou for explaining that.I’ve now noticed the edge has been cut of all my horizontal pictures for ages.LOL

Reply

26
shannon abdollmohammadi September 15, 2010 at 1:36 pm

Again, thanks for such awesome photo tips. Your pics are always stunning.

Reply

27
Maria Babin September 15, 2010 at 2:37 pm

My eyes were instantly drawn to the eyes in that last photo! Yes, the sharpen definitely makes a difference! Only question, I don’t have Photoshop, do you know if I can do these tricks in Picasa?

Reply

28
Kristin September 15, 2010 at 5:19 pm

Thanks so much for these awesome tutorials! I am new to posting on your blog but I just love reading it! One of my favorites! Your tutorials are so easy and so informative! Thanks so much!!

Reply

29
meagan September 15, 2010 at 5:49 pm

thanks so much!

Reply

30
Amber Gusa September 15, 2010 at 6:39 pm

Now you need to do another tutorial to show us how you made the picture change when the mouse went over it!!??? That is AWESOME!!

Also, I’ve been blog stalking you for quite a while now, just thought you should know. :)

Reply

31
Angela September 15, 2010 at 7:01 pm

Thank you Amanda! Your tutorials are wonderful!

Reply

32
Kelly Seibert September 15, 2010 at 7:51 pm

Hey Amanda
this may seem like a very “basic” question, but how do you actually ‘get’ the photos on the Blog? I am now attempting to design my blog and nothing is ‘sticking’. cant get any of the free backgrounds to stay and I cant figure out how to get my pics from Photobucket, where i have them loaded, to the blog. FOR pics on the web, i read you need the url for the pic. where do you get that???

kelly

Reply

33
traci September 15, 2010 at 8:22 pm

thanks for this tutorial!!

Reply

34
Allison September 15, 2010 at 8:22 pm

I love your tutorials! You make me feel so much smarter after I read them! And you make it so simple to understand too! I’ll search a tutorial on another site and for the most part I’ll figure out what they are talking about and if not, I’m one of those who’s darned determined to do all I can to find out what they are saying before giving up, but I know that there are some people who can get totally lost and frustrated that the steps aren’t better set for them to understand.

But holy moly I LOVE the picture you took of your dog! The colors! The motion! The rustic look of the fence and trees! The color of the ball! I love it!

Everything you take a picture of, I want to frame it and hang it on my wall (yes, even that Oreo brownie thankyouverymuch). :P

Reply

35
Rachel September 15, 2010 at 8:44 pm

Great! Next tutorial: how to do the sweet roll-over!

And I’ll echo all the previous comments: your tutorials are so user friendly! Thanks!

Reply

36
Tara September 15, 2010 at 8:54 pm

What version of Photoshop are you using? I’m curious… :)

Reply

37
Mandy September 16, 2010 at 12:45 am

I too have been wondering WHY my photos didn’t look as good on my blog! Thank you for the tutorial!

And Wow – when you roll over the pic you can really tell by his eyes – what a difference!

Reply

38
kelly September 16, 2010 at 1:07 am

So helpful…I figured out some of the resizing on my own but the sharpening and other info was great! Wish I would have found this a few months ago…I might still have hair! Haha

Reply

39
Jen September 16, 2010 at 1:15 am

Thank you so much for this tutorial! I just do PW’s sharpen and define and than the bright and colorful but always wondered why my photos weren’t coming out as clear as yours. This is so helpful. I was starting to feel bad again about not being in the Canon or Nikon club (but the Olympus Club), but this boosts my self esteem back up ; )

Jennie Pie
“Capturing Sweet in the East”

P.S. Amanda, you should really check out my latest blog post about the Seoul fabric market…you would love the accessories! Let me know if you need me to send you something :)

Reply

40
Amy Jensen September 16, 2010 at 2:16 am

Thank you so much for the tutorial…Seriously, have you ever thought about writing a book? Even if you did it on your own and sold it here on the website? I know I’d purchase one in a minute. I’ve wondered how to get my pictures to look better on my blog and now I know. THANK YOU!!!

Reply

41
Ana September 16, 2010 at 12:26 pm

Awesome tutorial, thank you! I am finally at the point where I am ready to invest in a DSLR, and new photoshop tips are always great :o)

Reply

42
Christina September 16, 2010 at 2:50 pm

Thanks, Amanda! Your tutorials ALWAYS rock!! I loves these kind of posts too:)

Reply

43
HonestNiceWoman September 16, 2010 at 3:35 pm

Awesome job on the tutorial!
~Kelly

Reply

44
Rebecca September 16, 2010 at 4:08 pm

Thanks so much for this tutorial :) I had a play with it and posted my results here: http://www.twobecomefour.com/2010/09/just-look-at-those-eyes-now.html

Reply

45
Wendy September 16, 2010 at 4:17 pm

Amanda, Thanks so much for this info! I have a question related to this…I want to use a photo I edited in PS using your tutorial :) for a wrapped canvas from Canvas People dot com. I’d like to get an 11×14 size canvas. How can I use this to make sure my picture is sized right before I upload and order from a vendor?

When going through the steps in this tutorial, I saw the option for “canvas” in a drop down choice and it reminded me of this.

Thanks,
w

Reply

46
Wendy September 16, 2010 at 5:41 pm

http://shechosethebetterpart.blogspot.com/2010/09/teaching-old-dog-new-tricks.html

I used the edit tutorial and the resizing tutorial.

thanks so much!

Reply

47
EBPitcher September 16, 2010 at 9:11 pm

Can you next tutorial be on how you do the mouse roll-over trick?

Reply

48
Tricia Richner September 17, 2010 at 5:03 pm

Dang, I love that picture of the dog running with the ball in its mouth! Just had to say that none of the photo editing stuff makes much sense to me, but I sure did enjoy seeing that dog bolting through the yard on retrieve! Thanks.

Reply

49
Jess September 17, 2010 at 5:46 pm

Thank you for the GREAT tutorial. I’ve been teaching myself photoshop and I can’t wait to try this!

Reply

50
Katie Stutler September 22, 2010 at 6:11 pm

Thanks for the great info! Do you take these steps for each photo? Or did you make an action for this process?

Reply

51
AudreyS September 23, 2010 at 7:19 am

Thanks alot Amanda!! You’re so great at telling tutorials!! :D

Reply

52
Skrapkitty September 26, 2010 at 5:02 pm

Wow! So informative, yet simple and easy to understand. You rock!

Reply

53
the urban baker November 20, 2010 at 8:13 pm

i love this post. i love all your graphics and tips. it was great having lunch with you today!! have a safe flight back!

Reply

54
Maria - Greece April 1, 2011 at 4:05 am

Thanks, to easy and useful

Reply

55
Kim Neuendorff June 13, 2011 at 2:43 pm

O M G…I have loved looking at everything!!! I REALLY want to upload my handwriting and then be able to download it again! How do I do that?

Reply

56
Velma July 26, 2011 at 3:06 pm

Hi Amanda,
I wasn’t sure where to post this question :/
I recently ordered a collection of graphics online and they all came in gif format. These collections were made several years ago and so she’s not really that active any more and is not very good…actually, downright lousy….at answering my emails.
I don’t have a problem with the embellishments and such (at least so far) but it’s the background paper! Like one says that the dimensions are 4026 x 3600, but when I go to try to resize, it looks really blurred. What do I have to do in order to make it work for digital scrapbooking?
I appreciate any help or tips that you can give me. BTW, your tutorials have been very helpful…I so, SO appreciate them! I’m learning the one about the scrapbook background and am using gimp software. :)
Thanks,
Velma

Reply

57
Stacy August 21, 2011 at 4:04 pm

Does anyone know how to do this on a Mac (I use Safari for my browser and blogspot)?

Reply

58
Claire November 23, 2012 at 2:40 pm

very helpful. thank you!

Reply

59
adrienne January 8, 2013 at 9:24 am

VERY VER HELPFUL!!!! Answered my question THANKS!

Reply

60
Asia April 5, 2013 at 9:21 am

If somebody does not have photoshop let me recommend the tool I am using. It is free and super-easy to work with. Also availible for most of the operating systems. Hope will help:)
http://rawimaging.org/projects/image-resizer

Reply

61
Lindsey @ DishingUpHope November 16, 2013 at 1:49 pm

Love these tutorials! Yall make it easy…THANK YOU!

Reply

62
Gillian Semple November 30, 2014 at 7:05 am

Thank you for your informative videos and tips. I appreciate it. I was wondering if you knew the best way to upload videos to a Wordpress website? It takes a great deal of time to upload to Youtube and then inserting it into Wordpress. Was wondering if you knew a better and/or faster way to accomplish this task. Thank you!

63
Craig Parker January 23, 2014 at 12:29 pm

I try to leave the image width unset to begin with. My site’s columns shrink based on a visitor’s screen size, and a couple weeks ago I finally figured out how to make images do it too. Check out my home page (http://www.fossfolks.com) to see it. So far, I’ve only implemented it in excerpts. In short though…

My images are simple like this:

No floating, positioning, nothing. I should probably put in alt text, but one thing at a time, right?
They’re in a div called left-excerpt
Then in the stylesheet, I’ve got:
#left_excerpt img { width: 30%; height: auto; width: auto\9; /* ie8 */ float:left; position:relative;}

You can make it as much % of the div as you want though.

You probably don’t want to upload images that are huge (like 3200px wide); they’ll still resize, people on slower connections will curse your name.

Hope this helps.

Reply

Leave a Comment