Graphics For Bloggers [Series - Part 1]

By
Education & Training with Tech Training for You!

Time to start a new blog series! (BTW, I will continue the Picasa series, not done with that one quite yet) Let's change "channels" for a little while and talk about graphics in your blog! Take a look at different blogs and how graphics can be used well to catch a person's eye and then engage them to stay to read the content. In the figure on the right, notice the difference and how much more interesting the article with graphics is (exact same textual content).

This series is going to dive a little deeper into the waters of intermediate to advanced topics and may not be for everyone... but, I'm going to teach you what I know and you can decide if you want to go for it! I'll do my best to break down the steps so you can get how to do it.

When it comes to graphics, use your own original content whenever you can and you won't have to worry about the copyright issues. If you want to use graphics from the web, search ActiveRain for articles about best practices for getting graphics. This series is not about where you get your graphics, but what you can do with them once you have them.

One tool that I have on my computer always that helps me with graphics is a cool little app that you might think has a funny name. It is called Irfanview (ir-fan-view, it is named after the author of the app, Irfan Skiljan)

It is a FREE app and you can go to this page to download it. It is not bloatware, adware, spyware, nor malware... it has been in the top downloads list for years (download count 52+ million) and I've used it for a LONG time and can highly recommend without question. It starts instantly (unlike photoshop) and I have it assigned to my hotkey Ctrl+Alt+F to call it up in a snap whenever needed (which is extremely often).

Three things in graphics get used frequently for me (1) crop (2) resize (3) convert/saveas type. Ifranview does all these with amazing simplicity.
To crop something, drag a bounding box and press Ctrl+Y
To resize a graphic (to blog size), press Ctrl+R and enter the desired pixel sizing
To save, click the save button and save the file and pick type you need (JPG, GIF, PNG)

Let me illustrate a typical task sequence for me with a listing presentation graphic. First I'll create a photo collage in Picasa (click here for that "how-to" blog article). Once the collage has been finished (i.e. "create collage" button), I right-click on the image and choose "Open With" > "Irfanview" (once you have the app installed, it will become available to use in this way). You can see this step illustrated below.

For best practice, the very best first step is to do the  "save as" command. You can very easily do this by pressing S or by clicking the saveas button on the toolbar. You will want saveas, because you don't want to overwrite your higher-resolution original with a lower-resolution web copy. Pick a destination folder and name and you'll be all ready to upload the graphic into your blog post.

The next step is to get a nice tight crop eliminating all the extra white space around. Once you have the graphic open in Irfanview, you can drag a bounding box of where your crop lines will fall. Don't worry about getting it precise when you draw the boundary, you can adjust the edges of the crop lines after in order to get them exactly where you want them to fall. Once you are ready to crop, press Ctrl+Y (shortcut for crop)

By the way, another great shortcut in Irfanview is by pressing the F key. It will toggle between "Fit to screen" and regular size. If you have a huge graphic, you'll want to see it in Fit to screen mode

Now if you are thinking about using the graphic in a blog, you'll want to resize it down to "web sized" proportions. Press the Ctrl+R shortcut to "resize". You will get a dialog box like is shown below and you can type the target pixel size. When I create blog graphics, I target the width value. I aim for 600-640 pixels width for a full width graphic and about 350-400 for a graphic that I will wrap the text around. (I'll get more into these metrics on a next part of this series, but for now there are some numbers to work with)

Finally press Ctrl+S to save all the changes that you just made (remembering that you had already done 'saveas" in the step above so you are not altering your high resolution original)

Stay tuned... this blog series will be continued! (new subscribers appreciated!)

I've tagged this series so that you can click here to see a list of all the articles in the series so you won't miss any. :)

Posted by

craig and his family

Hi! My name is Craig Daniels and I'm glad to have you visit me on my tech blog. I enjoy teaching technology and hope that you learned something new today! :) Be sure and check out my website where you can look up my posts by category. Be sure and also check out my new "Tech Tutor Video Series". It is a great way to learn as you get to watch as I explain AND demonstrate how to do various technologies that can help you. My material is not behind any paywall thanks to your voluntary support - learn more at my two in two patronage page.

if you enjoy subscribe subscribe

close

This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
Topic:
ActiveRain Community
Groups:
30in30 Showcase
Active Rain Newbies
Addicted to Active Rain
Tech Corner
Technology
Tags:
graphics for bloggers
graphics
irfanview

Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the envelope to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the scissors to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Show All Comments
Ambassador
272,695
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Coleen - not a mac user so I can only help with concepts but what about this ... 
(since Irfanview is a pc app) - set up your chart on the screen so it is nice and clear and then do a screen capture (there was a little conversation on this post with David about that). From there save the file. Next resize the file down using "Preview" app down to blog size (about 640pixels I recommend)
would that help?

September 26, 2010 09:12 AM #121
Rainer
80,902
Wade Kawahara
Dominion Real Estate Partners, LLC - Phoenix, AZ

Craig, thanks for the information.  I will try it out.

September 26, 2010 01:09 PM #122
Rainmaker
155,826
Tina Gleisner
Home Tips for Women - Portsmouth, NH
Home Tips for Women

Craig, THis is a great tutorial and I want to try the tool you suggest as Photoshop does take too long to open although I also like being able to eliminate things from photos & change graphic colors when needed. 

September 26, 2010 01:37 PM #123
Rainmaker
386,343
Diane M. Phillips
Frankly Real Estate Inc. - Manchester, MD
Realtor 443-286-4365

Craig ~ good stuff! Thanks for sharing! Kind of a bummer it a PC app only.

September 28, 2010 09:36 AM #124
Rainmaker
132,587
Liane Thomas - Corona & Riverside Real Estate
The Jet Team, Keller Williams Realty, Corona Real Estate - Corona, CA
Bringing you Home!

Oh boy, do I need some serious help! I subscribed to your series and look forward to figuring this out. Thanks!

October 02, 2010 08:18 AM #125
Rainmaker
169,003
Menlo Park Real Estate and Homes for Sale
Wende Schoof - Menlo Park, CA
WendeByTheBay.com - 650.504.0219 - SF Peninsula

Thanks, Craig!  This is helpful, and I'm off to apply what I've learned with my next post.

October 03, 2010 08:17 PM #126
Rainmaker
384,765
Robert Schwabe
Keller Williams- First Coast Realty - Orange Park, FL
Orange Park Real Estate

Craig - Great tutorial. What are you using to get all the little red arrows on the pictures.

October 08, 2010 10:58 PM #127
Rainmaker
261,430
Wayne B. Pruner
Oregon First - Tigard, OR
Tigard Oregon Homes for Sale, Realtor, GRI

Thanks for the post. I've bookmarked it for future reference.

 

October 17, 2010 08:04 PM #128
Rainmaker
142,363
Mike Mayer
Mike Mayer, Broker/Owner - i List For Less Realty, LLC - Lafayette, LA

Had to subscribe as well as bookmark this information. You offer a wealth of tips and advice that are practical and in a format that is easy to understand.

October 19, 2010 11:28 PM #129
Rainmaker
283,551
Eva Aliaga
Keller Williams Realty Boca Raton IdealFloridaLiving.com - Delray Beach, FL
South Florida Real Estate - Boca Raton Real Estate

Hi Craig, got this bookmarked. Quite abit of info to digest.

October 20, 2010 12:43 AM #130
Rainmaker
233,907
Kim & Kristine Halverson
www.KimAndKristine.com, Santa Monica Real Estate :) - Santa Monica, CA
Realtors, Santa Monica Real Estate, CA

Super cool and simple.  Thanks for sharing.  It's great to learn about quick simple techniques that have a big impact.

 

Kristine :)

October 21, 2010 07:17 PM #131
Rainmaker
173,321
Betsy Schuman Dodek
Washington Fine Properties - Washington DC Area Real Estate - Potomac, MD
SearchPotomacHomes.com

Craig - you  are a fantastic teacher. I will keeping reading your top 10!!!

January 01, 2011 03:19 PM #132
Rainmaker
76,402
Jimmy Gilley
Gold Star Realty - Niles, MI
(269) 362-4841 - Search Niles MI Home For Sale

Excellent post!  Thank you for sharing, bookmarking for future use.

January 03, 2011 11:29 PM #133
Rainer
32,633
Ron Wood
HTR/Wood Realty Group, Inc - Benson, NC
Johnston, Harnett, Sampson & Wake

I have been using Irfanview for several years and even though I am not the best at graphics software it is easy to use.

Ron Wood

January 04, 2011 01:44 PM #134
Rainmaker
187,925
Larry Atkins
State Wide Realty Co. - Farmville, VA

This looks awesome, I've downloaded it and am going to try it today....looks like a big time saver.

January 06, 2011 10:40 AM #135
Rainmaker
126,586
Jeremy Joslin
Coldwell Banker Residential Brokerage - South Windsor, CT
Professional Real Estate Marketing and Sales

I played a little and seems like a great easy to use photo editing software.  Surprised this one is free.  Thanks I will use it.

September 05, 2011 09:08 PM #136
Ambassador
391,250
Mimi Foster
Managing Broker EPIC Real Estate Group - Colorado Springs, CO
Realtor - Colorado Springs

So I downloaded Irfanview and I am pulling my hair out trying to figure it out.  The two things I need most are watermarking (or adding a caption) and resizing.  I have always used Picnik.  I thought this would be a good solution, but how the devil do you figure it out????????????? :)

February 26, 2012 09:42 AM #137
Ambassador
272,695
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Mimi - you have questions, I have answers! I'm going to see you in class right??? :)

February 26, 2012 09:56 AM #138
Ambassador
391,250
Mimi Foster
Managing Broker EPIC Real Estate Group - Colorado Springs, CO
Realtor - Colorado Springs

Will class answer those questions?  Yes, I was actually just signing up

February 26, 2012 10:09 AM #139
Ambassador
391,250
Mimi Foster
Managing Broker EPIC Real Estate Group - Colorado Springs, CO
Realtor - Colorado Springs

What I had been reading was that you did a long series on Picnik.  Obviously that is not going to be the case now.  I'm excited and frustrated at LEARNING CURVES :)  I thought I read somewhere that you had a Picassa class.  Help me, Craig, help me :))))  I am signed up.  NOW WHAT???   LOL

February 26, 2012 10:15 AM #140
Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the cloud to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Show All Comments
Ambassador
272,695

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the tshirt to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Additional Information