Tuesday, May 8, 2012

Blog Design 101 - Resizing Images

Untitled

Hi all! This is the second installation of Blog Design 101 where I give mini design tutorials to help you spiffy up your blog. Last week we covered links - what they are and how to write them in different formats. This week I plan to give you a powerful and easy trick when it comes to resizing images.

TODAY I AM GOING TO COVER:
How to adjust the size of your images proportionally so that they can neatly align on your page.

When I asked for some design questions a few of you wanted to learn how to make images all the same width so that they align cleanly on your sidebar, posts, etc. Additionally, some asked to learn how to proportionally resize images - especially when it comes to buttons. Easy enough. Both go hand in hand!

To start out with
A basic image html tag is as follows:


-----------------------------------------------------------------------------------------------------------------------

TO RESIZE YOUR IMAGE
First you need to figure out what size the original photo is in pixels. You can do this by viewing the image in a photo editing program and looking at the photo's information (for example - mac users open in preview > tools> adjust size > pixels).

uploadme

Once you know the original size of the image you uploaded (^ the above image is 550x365), determine the size you want the image to be either in width or in height. For this example - I want the image to be resized to 300 pixels in width. I then use the program I opened the original photo in to adjust the proportions. Typing in 300 pixels wide should automatically resize the image to it's proportional height. If you are great at math - by all means do the calculations yourself - I just find doing this way easier for me.

Untitled

In this case it was a 54.5% image reduction making the height 199 pixels. Take the new size adjustments and simply paste them in to the following code.

uploadme

PROPORTIONAL IMAGE RESIZE:


EXAMPLE:


With this code you can now resize images so that they all are the same widths and align properly in your posts. This code is also extremely useful when you need to resize a button to fit the width of a friends sidebar and don't have the time to redesign a new one.

-----------------------------------------------------------------------------------------------------------------------

If you need further help or clarification please let me know and I will be happy to answer them in the comments section. Also - if you have any other design questions you would like answered in future posts please let me know. Have a great Tuesday everyone!!

16 comments:

  1. Thank you for showing this! It's great to hear tips and tricks on blog design...I'm a real novice so this has helped! Please post more of these!
    dimplesdiaries
    x

    ReplyDelete
  2. hmmm i will probably save all these bloging posts under bookmark. a younger boy would call you noona, but you are older than me allison, so i would call you unnie. that is what my sister has called me her whole life, if she ever calls me michelle, it feels so weird lol.

    ReplyDelete
  3. Great tutorial! I'm already ok with blog design, but this will be really helpful, especially if you are posting photos which are all different sizes & want the photos the same. xx

    www.almostdelightful.com

    ReplyDelete
    Replies
    1. Thank you. I hope this helps them :]

      Delete
  4. This series is definitely going to be super helpful for a lot of people. I'm excited to see what you cover next!

    ReplyDelete
    Replies
    1. :] I need to figure out where to go next with it. I also really want to get in to photoshop and graphics.

      Delete
  5. Thank you for showing me (a mac user) where to go to do this. It sounds like no big deal, but I would have been stumped as this computer is SO different than using the PCs I've been accustomed to since...forever.
    Again, thank you for these tutorials. Honestly, this is one of my new favorite things about your blog - it's so informative! :)

    ReplyDelete
    Replies
    1. :] I am glad I could help you find where to look for it! I felt a wee bit bad that I couldn't include the steps for a PC because I haven't used one in a bit. I am sure there is a program though with similar features.

      Thank you! I hope they can get more in depth. I know these seem pretty simple right now. I just thought I should start with the basics though first.

      Delete
  6. I'm pretty decent at html/photoshop, but I love that you are sharing these because a lot of people need help and simply don't understand and your blog is so beautiful, who wouldn't want to take tips from you!?

    ReplyDelete
    Replies
    1. Aw, thanks! Yeah, I am hoping to help out those beginning right now. In the future though I want to get in to some more advanced html and photoshop techniques.

      Delete
  7. fab tutorial! :) Love your re-design, it looks ever so lovely.

    ReplyDelete
  8. This is great, and so nice of you, I'm such a novice! I wish I could make the pretty collages that are floating around too, without photoshop though...if I get photoshop I can see all my time being chewed up! xx

    ReplyDelete

Newer Older Home
Related Posts Plugin for WordPress, Blogger...