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. :)
Comments(140)