Ads 468x60px

Pages

Showing posts with label screenshots. Show all posts
Showing posts with label screenshots. Show all posts

Monday, August 13, 2007

Making and editing screenshot

This is something I frequently do and sometimes I get questions where I have to request for screenshots, so might as well make a post in detail on making and editing screenshots.

Irfanview photo editor

To take a screenshot of the computer screen, press the "Print Screen" (Print Scrn|Sys Rq) key on your keyboard. This will copy the image into your clipboard. I like to use Irfanview (click BACK button to get back to this page). It is free, lots of features and very good. However, the creator of the program do accept voluntary donations. If you want that, just type or copy-paste "irfanview" into the search box above, tick the WEB radio button and search. You will find lots of sites to download Irfanview.

Once you have Irfanview in your program, open the program, click EDIT > PASTE in the menu bar at the top and the screenshot will be pasted into the photo editor window. If you want only a specific section of the screen, click and drag your mouse around the section. The section will be surrounded by a black box. Then click EDIT > CROP SELECTION in the menu bar and the section will be cropped. Then click FILE > SAVE AS.... and save it into a suitable folder in your computer. I normally save this in a folder I named "Temporary".

If you want to show the cursor (mouse) in the screenshot, first, make sure you are at the website of which you want the screenshot, then go to Irfanview. Click the "C" key and a screen capture set-up will appear:

Irfanview photo editor screen capture setup

At the top left, you will see the hot key for executing the screen capture direct into Irfanview, and by default, it is set to ctrl+F11. I suggest you leave it as it is unless you have used that for some other purposes. You can chose to capture the whole screen or only the foreground. The radio button to include the mouse cursor is ticked by default, and you should leave it as it is if you want to show the mouse cursor in the screen capture. Once everything is set to your satisfaction, click START and you will be taken to the page you were in before. Place your mouse where you want it to show. If there is a drop-down menu, and you want to show the choices, click the down arrow. If what you see is what you want in the screenshot, press simultaneously ctrl+F11 and the screen will appear in the Irfanview photo editor window. You can do whatever you want like crop, insert text, resize the image, etc, and when done, you can save it in a very wide range of file formats, the most popular ones would be .jpg or .gif

Windows Paint

You can also use Windows Paint which comes with MS Windows and is accessible via START > ACCESSORIES. You can same thing as above, that is press PRINT SCREEN, then paste into Paint. You can also crop, but the process is much more cumbersome than with Irfanview which I prefer.

There is one thing available in Paint that I can't do with Irfanview, that is, highlight a section with a colored circle or point to something with a line or an arrow you will have to draw yourself using line. To illustrate, I will make a screenshot of the post editor as I am preparing this post.

highlight part of screenshot with red ellipse

This screenshot was first done with MS Paint, the color red was selected by clicking on the red square in the color palette at the bottom left:

MS Paint color palette

clicking on the elipse icon in the left sidebar:

MS Paint icons for drawing lines, rectangles, ellipse

then clicking, drag and let go to draw the ellipse around the word "Windows Paint". The file was saved in the .jpg format, reopened in Irfanview, the section I want cropped, saved again and uploaded into this post.

Monday, March 12, 2007

Easy Social Bookmarking for your Blog

Social Bookmarking Icons

Found this site that offer an easy way for you to add those social bookmarking icons for a blog or a website. There are now so many social bookmarking sites, and adding as many icons as possible can make your blog or website look cluttered. For example, I found this in the sidebar of a blog:

Social bookmarking icon clutter

Now with AddThis, you can get just a single icon to put on your blog or website, and a visitor clicking on the single icon will get to a page where he can choose whatever social bookmarking service or services he is subscribing to.

I have added AddThis icon for both the blog as well as the individual posts of this blog: Dummies Guide to Google Blogger. You can pop over to that site and test them out.

I will just paste the note that I added as I tried to add those icon to the above blog (note: you can do it without having to register for an account, but I think registering for an account is useful because then you have access to statistics like how many people have bookmarked the blog, etc.)

http://www.addthis.com/
Choose Bookmark or RSS Feed
http://www.addthis.com/account.php
email: xxxx@gmail.com
username: manature
password: yyyy
Message: An account with this username already exist
ignore
signin
Click "Get the code for your button
Which kind of button? Bookmark button/feed button
Chosed Bookmark button
Click radio button to choose the button (chosed the largest one, more visible)
Where? Drop-down menu: "on a Blog"
Blogging Platform: Drop-down menu: chose "Blogger"
Want stats with that? tick "Yes"
Click "Get Your Free Button"
Code for Blog Button:

Note: The codes here are for illustration purposes only. You should get the codes direct from your own account in AddThis as otherwise, you will not be able to see the statistics as it will enter my account instead.

<!-- AddThis Bookmark Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php?pub=manature&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'addthis', 'scrollbars=yes,menubar=no,width=620,height=520,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" title="Bookmark using any bookmark manager!" target="_blank"><img src="http://s3.addthis.com/button2-bm.png" width="160" height="24" border="0" alt="AddThis Social Bookmark Button" /></a>
<!-- AddThis Bookmark Button END -->


To add to top of left sidebar of Dummies Guide to Google Blogger
Click "Add a Page Element" for the left sidebar in the Layout
Selected HTML/Javascript
Pasted in the script
Save
Done

Social Booking icon for the posts

This will involve tampering to your template, so a good thing to do is to backup your template first. If you are new to editing and backing up templates, refer to this post How to backup and edit your New Blogger template. To add the AddThis icon to the bottom of every posts, get into your template editor, tick the "Expand widget template", then look for this line of code:

<div class='post-footer'>

paste directly below the above line of cod this block of codes

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=enviroman&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s3.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->


Preview, and if satisfied, save the template.

Update 14 March 2007: I find it so useful, I think I will add them to this blog as well.

Update 21 March 2007: I got a comment which seem to indicate that the blogger didn't understand how AddThis easy social bookmarking works, so I thought I will do an update to explain further. When you install the AddThis easy social bookmark icon AddThis easy social bookmark icon, the icon include many social bookmarking services. When clicked on, it will open up a pop-up (see screenshot below, click to enlarge):

AddThis easy social bookmarking expanded pop-up

from which you can select a whole range of social bookmarking services. Try clicking on the icon just below this post or the icon at the top or the left sidebar and see what happen.

Tuesday, March 6, 2007

How to get screenshots of you blog in various browsers

As a blogger, you will like your blog to look good, if possible, in all browsers and at all screen resolutions, etc. You can check how your blog will appear in various browsers and at various settings from Browsershots. At this site, you can get screenshots of your blog in various browsers at various screen resolutions, select whether to enable Javascript, Macromedia Flash, etc. or not. What you have to do is to type in your blog URL (make sure to include a backslash / at the end of the URL) and click "Start". The first time I tried to get screenshots of my blog Blogger Tips and Tricks, nothing happen. In such cases, I probably have to wait. But I found out by doing a refresh, I could get the screenshots. The second time I tried it (on another day), the screenshots appeared almost immediately.

You can see the screenshots of my blog Blogger Tips and Tricks at Browsershots of Blogger Tips and Tricks.

Acknowledgement: Got to know of this interesting site from Vin (Panther) of Beta Blogger for Dummies