Here’s an iframe for you:

Play a jigsaw puzzle in your popup with a random image collected from the image sharing site Flickr. The images will be always safe, thanks to the Flickr pandas. Every time you close and reopen your popup, you will get a new image set. From there you can select one of the 5 images to make into a jigsaw puzzle. This is done with the new and amazing HTML5 canvas element.

Double-click on the text to see where the data is privately and securely saved. You can, of course copy and paste that link to show people your text via any messaging service.

The extension is very light and fast, it will load and save your pastes immediately without any delay.

Get it from the Gallery
Source Code

You can change the piece that a pawn becomes when it reaches the other side, and the computer’s difficulty level. You can also set the buttons for Undo/Swap in the options. By default:
U: Undo,
S: Swap,
S: Save game,
L: Load game.

Update 1.0.1:

• Fixed bug with linux

update 1.0.2:

• Added the feature to load/save the game. L loads, S saves.
• Added a notification of stalemate/checkmate.

update 1.1.5:

• Option to change chess icons.
• Option to change background and tile colour.
• Bug fixes.

Get it from the Gallery
Source Code

With this extension you can see the rainfall in and around Belgium. The rainfall will be indicated by clouds on a map. You can zoom into the Netherlands or Belgium. The feed will be updated whenever you open the popup.

Get it from the Gallery

You can get it from SVN.

That worked well and with the knowledge learned I created the wikiHow Search Widget. This was easy and fun to do. After some weeks, I thought how cool it would be to create a widget for imgur.com, I went and did that. That turned out pretty well.

After creating three widgets I started to expand and tried to develop something for another desktop dashboard. Since I have Windows 7, it came installed with Windows Sidebar. Developing on that is quite hard, it’s a lot messier to debug. I picked a simple task and created something for wikiHow editors again.

I also tried to work with Google Desktop, it’s better than Windows Sidebar, but I still prefer Konfabulator.

The wikiHow Editor’s Toolbar is a Firefox extension that gives power editors a few extra tools to track and improve wikiHow. wikiHow has had a toolbar for quite some time, but now Illyism has created an entirely new toolbar, based off the coding of the old toolbar. This is an unofficial toolbar, meaning that it was not created by a paid wikiHow staff member, although a number of people, including paid staff members, are now using this great tool.

New Features for the toolbar:

• Toolbar customization: With this new version, you can now customize the toolbar like you want to. Delete a few buttons, add some and rearrange them.
• Changes to icons: Some icons now have opacity instead of a white background to support other firefox skins. Some icons are completely replaced by newer versions.The Unpatrolled Edits-icons are changed, as are the search icons.
• Advanced search:You can now choose precisely what you want to search for with advanced search. You can look for templates, images, videos, users and more.
• Support for languages:There is now support for languages, allowing for more languages than English.
• RSS feed bar:You can now quickly see and navigate to featured articles.
• Quick Links:This new button allows you to quickly check on wikiHow Policies, and it also displays links to the ANB, IRC and the forums.
• Custom Sound: This allows you to change the sound for the featured article patrol warning. Only WAV files are currently supported.
• Online indicator: This new button allows you to see your total amount of edits, and it also checks if you’re logged in. It even gives you several links.
• NAB Count: Two buttons that allow you to see the total count of New Articles that are awaiting to be boosted and the total articles you boosted in a specific time.
• News: A button that replaces the wikiHow logo. Which can be changed for events and news.

• Option to load url in same page or in new tab
• Option to open in new tab or not
• Added Stats panel when right-clicking on news button

wikiHow Plus Improvements:

• Scripted site improvements: You will see some changes to NAB. It now shows when the article is written, and the amount of revisions. Buttons to quickly deal with copyright violations and quick-post templates. It also adds some minor improvements scattered around the site.

Get wikiHow Plus

You can get the latest development version on SVN or wait for Yahoo! to confirm it for the gallery.

The art of producing 3D images is an evolving process for any artist. There are many different kinds of software you can use, and some of those programs are free. If you have Photoshop, however, you can use that to make 3D images as well. This article will show you how to make anaglyph images, which are the kind that can be viewed with 3D glasses.

1 Steps

1. Take photos. Follow the guidelines in How to Take Photos for 3D. If your pictures are digital, just open them up in the software. If your pictures are hardcopies, transfer them to a computer using a scanner, or drop them off at a photo developing store and ask for digital files (any file type will work).
   • After downloading the images into your computer, you will probably want to rename them to more easily recognize them when bringing them into Photoshop. Develop a naming scheme for your workflow, and stick with it. The form or naming scheme you choose is unimportant, so long as you develop a consistent style that works for you. Left camera eye image file names should contain the letter “L”, and right eye image file names should similarly carry an “R”.
2. Get a 3D viewer. As you’re going along, you’ll want to be able to see the images in 3D to see how they’re coming along. You can buy or make 3D glasses, or use a program like PokeScope®’s 3D viewer.
3. Create template files that you can use over and over whenever you want to create a new 3D image. This will make the process more efficient. You can make your own templates or use these:
   • Click here to download a two-image template for processing the left & right 3D images.
   • Click here to download a single-image template to transfer and save the individual left and right images, once produced.

1.1 Processing the Images
You don’t have to do this section. If you are confident enough in your skills, you should be able to create the anaglyph image correctly without these steps.
-> Go to the Anaglyph Section

1. Prepare your Workspace
   1. Make sure that the Layers palette and Tools are open. If you don’t see it there, click above on Window, Show Tools. You’ll also need the Layers palette. If it’s not open, click on Window, Show Layers(F7), and move it to your preferred position.
   2. Be sure that rulers are showing. You’ll need to be able to use guidelines, which means you’ll need to have rulers showing on the template. If there are not rulers at the top and left of the template, click (View, Show Rulers) OR (Ctrl+R).
   3. Click once on the top bar of the template, then click on (View, Fit on Screen) OR {Ctrl+0}. This should enlarge the template for easier viewing, or at worst leave it at its current size.
2. Open the template. Once in Photoshop, open (File, Open) OR {Ctrl+O} the two-image template’.
3. Next open the left and right files for the image you want to process.
   • (Note: you can open all three of these at the same time if they’re in the same folder.
     • Click on one, and hold down the {Ctrl} key while clicking on the others).
4. Drag the left image to the left side of the template. It should reproduce itself there, likewise with the right image to the right side of the template.
5. You can now close the left and right original images. Depending on the size of the images, they will take up either a small part of the template, most of it, or will considerably overextend the template.
6. Work on the adjacent part of the template. There are two main, touching, adjacent left and right areas within the guidelines of the template. It will become your task to fill these areas completely with two nearly identical images.
7. Manipulate the two images to reach to the edges or more likely overextend these areas, and then crop them to the guidelines to exactly fill these areas.
8. It’s important to understand that in working with the two (left and right) images, sometimes you need to perform a function on the two images simultaneously, and at other times you need to modify one image, leaving the other alone.
   • Be thankful that there’s an Undo command (Edit, Undo) OR {Ctrl+Z}, because you’ll probably need to use it frequently.
   • Each image represents a “layer”. Altogether there are three layers (one is the background, which is blank).
   • If you look in the Layer dialog box, one of the layers is always selected, and that’s the one at any given moment you’re working on.
   • Clicking on a photo does not change which photo you’re working on. Clicking on a layer in the Layers dialog box does.
9. Link the two if you are going to perform simultaneous functions. To perform functions (i.e. resize) on the two layers (images) simultaneously (both at the same time), you’ll need to link them.
10. Unlink them for singular functions. After layers are linked, to perform functions on only one layer at a time, you’ll need to un-link them.
    • Suppose Layer 1 is highlighted in the Layer’s dialog box (if you first dragged the left image up, then the right, the left image is Layer 1, the right is Layer 2).
    • To link them for simultaneous modifications, check the box in Layer 2 to the right of the eye symbol. A chain symbol will appear, and now whatever you do to Layer 1 you’ll also do to Layer 2. This includes repositioning (moving) the images, resizing the images, rotating the images, etc.
    • To un-link them, so as to work on the images independently, click on the chain symbol, and it will disappear; they will be un-linked.
11. Line up the two images so that they are positioned vertically as identically as possible. It is assumed that the image sizes of the two images are the same. If you were at the same distance from the subject in both shots, and didn’t change the zoom, the subject/s of your images should be practically the same size on the two images.
    • Note: macro shots often need to be first resized, but you’ll need to experiment and play with this on your own.
    • For the moment suppose that you’ll leave the left image as it is, and manipulate the right image to line up with the left one. If you’ve linked the two layers, un-link them.
12. Look for two clear reference points (spots on each photo that can be seen clearly on both images). These two points should be well separated horizontally from each other (i.e. one toward the left side of the left image, one toward the right side of the left image).
13. Choose the pointer tool on the toolbar (top, right, looks like an arrow) and drag horizontal guidelines down to pass through these two reference points on the left image.
    • To drag down a guideline, place the cursor onto the top ruler, click and drag down – later you can click on a guideline, and drag it back up to the ruler to get rid of it.
14. Select the layer of your right image on the Layers dialog box (if you don’t know which one it is, click on and drag an image and see which one moves, there’s always the undo option).
15. Select the pointer tool, and move the right image until its left reference point lines up vertically with guideline that goes through the left reference point on the left image.
    • You may notice a difficulty in lining them up, in that the top or bottom of the image you’re moving may “want” to keep aligned with a guideline. To stop this from happening, click on (View, Snap to Guides).
    • This is an on-off, checked or unchecked option, telling PhotoShop to grab the edges of an image onto guidelines if they’re close. Later on, when cropping the photos, it’s essential that it be turned on, but when lining things up, you generally want this option unchecked (off).
16. Start working on your right reference points. Now that the left reference points of both images are lined up vertically, what about the right reference points? If they are perfectly lined up, great. This is where you’ll be glad if you used a tripod to take your photos. If one is higher than the other, the next step will be to rotate the right image so as to be able to get the to images to register vertically the same on the two reference points.
    • This is done by clicking (Edit, Transform, Rotate). By making small adjustments in rotation, and then vertically repositioning the right image, you should eventually get the two to match up on the guidelines.
    • Try using guidelines. Using guidelines is only one of a number of techniques available to line up images.
    • Another option is to bring up a grid, click on (View, Show Grid). Grid lines can be effectively used for lining up the images. Another excellent technique is to temporarily modify the Opacity of an image. In the Layers dialog box Opacity defaults to 100%. Modify it to 50% (more or less OK), and then when you drag one image over the other you will see a phantom of one image over the other, making for a fairly easy lining up of objects. After your vertical positioning is correct, change Opacity back to 100%.
      • Note: you may find that the translucent image drops behind the solid image, and need to indicate that the translucent image go in front of the solid image. To do so click above on (Layer, Arrange, Bring to Front). Bringing a layer to front or back is helpful in many other manipulations.
17. Link the two images and resize them together so that each image takes up at least as much space as the main areas of the template, or more likely each image extending beyond the spaces. Move the left image as you wish so it is framed nicely within its template area. Look to see that the right image will also at least cover its template area without leaving blank areas at the top or bottom. Now you’re ready to crop the images.
18. Make sure that Snap to Guides is checked (View, Snap to Guides). Un-link the layers (chain symbol disappears). Choose the layer for the left image. Select the cropping tool on the toolbar (square, dotted symbol, top left).
19. Place the cursor on the top left guideline of the template, click on your mouse, and drag the cursor to the bottom center guideline of the template.
20. Click above on (Layer, Add Layer Mask, Reveal Selection). The left image should be cropped to the template guidelines (if the wrong image gets cropped, choose (Edit, Undo), select the other layer on the Layers dialog box, and repeat (Layer, Add Layer Mask, Reveal Selection).)
21. Choose the layer for the right image. Change its opacity to 50%. Select the pointer tool, hold down the {Shift} key, and drag the right image over the left image so it matches up as horizontally closely as possible (holding the the {Shift} key when moving an image will keep it’s movement in a straight line, either vertically or horizontally).
    • The two images should already be lined up vertically, but if not, line up the right image vertically again to match the left image. Again, select the cropping tool, place the cursor on the top left guideline of the template, and click and drag the cursor to the bottom center guideline of the template. The right image (for the moment in the left spot) should now be cropped to size.
22. Hold down the {Shift} key, and drag it to the guideline on the right side. Change its opacity back to 100%. If you have a PokeScope® viewer, you will be able to see your 3D image in all its glory, and know if it’s going to work as a good 3D image.
23. Click on (File, Save As), and choose a name for the image. It will be saved as a PhotoShop .PSD file (i.e. PineTrees.PSD). You can go back at any time later and rework/modify the images in this file. No information is lost. You can knock off the layer masks (cropping) you’ve done, and perform any further reworking of the images you may wish.
24. Decide how to further process the image. Processing the image from this point forward is a matter of choice. You can quickly produce a single .JPG file of the two side-by-side images (File, Save a Copy) select JPEG in the Save As box, enter a filename (i.e. PineTrees, resulting in a file named PineTrees.JPG). Initially save these in PhotoShop’s best image quality (level 12).
25. Open the single-image template. Select the pointer tool, and drag the left image into the single-image template. If properly cropped to the margins in the two-image template, it should fit exactly. Nudge it into place. To save the left image (File, Save a Copy) enter a filename (i.e. PineTrees-L.jpg) and select JPEG, best image quality (12). Then remove that image from the single-image template (Layer, Delete Layer). Click on the top of the two-image template, select the other layer, drag the right image down into the single image template, and repeat the save process, labeling the saved file (i.e. PineTrees-R.jpg).
    • If you have StereoPhotoMaker or PokeScope®’s software, you can bring in these two images, manipulate them in a number of ways, and produce them into an outstanding online or print format, print them, or save them in side-by-side or anaglyph format as a single bitmap or .jpg file.
    • You can later go back to PhotoShop® and re-size these files to fewer pixels (or inches), or re-save them into a different filename or location, or with a lower image quality for faster sending or loading.
26. Now you have the images in the correct size and place. You can continue to make these into anaglyph images. That will enable you to see the 3D image using 3D glasses.

1.2 Making Anaglyph Images

1. Once the left and right eye pictures are open, convert them both to grayscale by clicking on the ‘Image’ menu bar and selecting ‘mode’ then ‘grayscale’.
2. Assign the left eye image red, green and blue channels by going back to the ‘Image’ menu bar and selecting ‘mode’ then ‘RGB’(the image will still appear gray). Do not repeat this step for the right eye image.
   • Now you are ready to merge the left and right images. To begin, make sure the left eye image is still selected ‘Open the channels display menu’ by clicking on the ‘Window’ menu bar and choosing ‘channels’.
3. Only the blue and green channels should be shaded blue.Highlight the blue and green channels. Press the shift key to highlight both at the same time.
   • An alternative to this step is to use only the blue channel instead of the blue and green when pasting into the left eye image.
   • Important: only the blue and green channels should be shaded blue.
   • At this stage it doesn’t matter which boxes to the left of the channels show eyeballs (eyeballs indicate which channels are displayed).
4. Go back to the right eye image, select the whole thing (go to ‘Select’ menu bar, then press ‘all’ OR press Ctrl+A) and copy it (go to ‘Edit’ menu bar, then press ‘copy’ or press Ctrl+C).
5. Switch back to the left eye image and paste (go to ‘Edit’ menu bar, then press ‘paste’ or press Ctrl+V).
6. Highlight the RGB color channel. An eyeball should appear in all four channel boxes. At this point, you should see a blurred red and blue picture.
7. You are almost done. But first the left and right eye images need to be better aligned. Start by highlighting only the red channel in the channels display menu (it should be shaded blue).
8. The next step is crucial because it allows the red-tinted picture to be shifted over while the blue-tinted picture is still visible. Go to the RGB channel and click only on the square box to the left. An eyeball should appear in all four boxes, but only the red channel should be shaded.
9. Pick a point in the center of the picture to match up; for example, if a person is your subject, eye pupils are a good target. Zoom in on the target by selecting the magnifying glass icon in the tool bar then click on the target until it appears fairly large.
10. Select the ‘move’ tool located in the upper right corner of the tool bar. Using the up and down arrow keys, slide the red-tinted image over until your target matches up and no longer shows any rings of color.
11. Zoom back out. Objects toward the outside of your picture should still be haloed in red or blue. In other words, the overall goal in this step is to limit the colored tints as much as possible.
12. Cut out excess red or blue at the far edges of your picture, crop it using the crop tool, also located in the tool bar (once you’ve outlined your picture with the tool, go to the ‘Image’ menu bar then press ‘crop’).
13. Your creation is ready to be viewed! Just don your 3D glasses (the left eye should be tinted red) and watch the picture jump out at you from your monitor screen or a printed picture.

2 Video

3 Tips

• You don’t have to follow “Processing the Images”. If you are confident enough in your skills, you should be able to create the anaglyph image correctly without those steps.

4 Warnings

• You might not be able to see if your image worked if you don’t have 3D glasses. But you can view the images side-by-side by using PokeScope or a similar program.

5 Things You’ll Need

• Two images; left and right.
• An image editing program.
• 3D glasses.

6 Related wikiHows

• How to Make 3D Photos
• How to Take Photos for 3D
• How To Make 3D Images Using StereoPhoto Maker
• How To Use Adobe Photoshop Tools
• How To View Stereograms

7 Sources and Citations

• This article has been shared with permission.
• NASA

Article provided by wikiHow, a wiki how-to manual. Please edit this article and find author credits at the original wikiHow article on How to Make 3D Images in Photoshop. All content on wikiHow can be shared under a Creative Commons license.