Monday, 5 September 2016

Lusus Saule

An Introduction To Paint.Net

When people begin working with images in Second Life they are often new to graphics editing, so the more complicated software options can seem both daunting and expensive. Rather than over enthusiastically jumping into the deep end, a good programme to start with whilst learning the basics of image manipulation is the free to download and use Paint.Net. 

Since Paint.Net is not as complex as other graphics software such as Photoshop or Gimp it can be much easier and more intuitive for the novice to work with. Because of this, editing techniques can first be quickly learned in Paint.Net and later transferred to other applications that have a steeper learning curve.

This tutorial is intended for those completely new to image editing and will explain the basics of working with an image in Paint.Net. It will cover what any Second Life image creator needs to know to improve the quality of their pictures, and will explain how to open an image, edit its brightness and contrast, its colour saturation, and how to crop the image. Finally, we'll cover how to Save the edited image.

If you haven't installed Paint.Net yet you can download it here. You may also need to install the latest version of .NET Framework. Paint.Net needs this to run, and it isn't malware, so there's no need to be wary when asked to download it. Once its installed .Net Framework can be left and forgotten, and it won't harm your PC.

Paint.Net Layout and Tools

When Paint.Net is opened it will look something like the above image. The white area is where your image will appear and the grey area is the canvas. The three windows within the canvas area can be moved around to avoid getting in the way, and they can also be dragged outside of the canvas area. Above the canvas area are two button bars, and the essentials of these will also be explained.

The Colour Window

Use this to add colour to a shape, text or fill an entire layer. The lower part of the window has a series of preset colours, whilst the wheel can be used to choose a more specific colour. The Black and white squares to the upper left show the foreground and background colours. Clicking on a colour will make it the active colour.

The Layers Window

Learning to work with layers should become second nature when editing images. Use one layer to complete one task, and another layer for the next task. For example, if you wanted an image to have text, add the text on a separate layer to the original image. It makes correcting mistakes much easier.

Areas of the Layers window have been colour coded here:
  • Red: Click this to add a new layer
  • Blue: Delete a layer
  • Yellow: Duplicate a layer
  • Green: Merge layers
  • Orange: The tick box hides/shows a layer
The active layer will be highlighted in blue. To select a layer to work on click it in the layer window.

The Toolbox Window

Like the Layers Window, the main features of the Toolbox Window have been highlighted in colours. Only the few tools relevant to this tutorial will be mentioned here, but to get an idea of what the others do, hover your cursor over them in Paint.Net and a tooltip will appear.

  • Red: Rectangle Select 
  •  Purple: Move
  • Yellow: Ellipse select
  • Green: Zoom. Enlarge the view of the image.
The shapes at the bottom of the Toolbox window indicate shapes that can be drawn in the image area.  Select and drag your mouse to draw a shape.

The Button Bars

Again, only the buttons relevant to this tutorial have been highlighted here. Most of the other buttons will give an idea of their function by hovering the cursor over them so a tooltip appears.
  • Red: Open a new window to start work on a new project. When clicked a small window will appear so the size of the new image window can be selected.
  • Blue: Opens a window that allows you to navigate to  a picture on your hard drive so it can be opened in Paint.Net.
  • Green: Saves the image. If you do not want the edited image to overwrite the original image select File > Save As (Ctrl+Shift+S) and in the window that opens enter a new name.
  • Dark Blue: These are the standard cut, copy and paste tools most software has.
  • Purple: Crop. Allows you to trim the image.
  • Brown: Deselects any part of the image that may be selected. 

Image Editing 

Now that we have described what some of the basic tools do, we can put them to use to edit and save an image.

1/ Click the Open icon in the buttons menu and navigate to the image you want to work on. Alternatively select File >  Open (Ctrl+O).

A window will appear that will enable you to navigate to the image on your hard drive, (in pretty much the same way any software allows you to navigate to a file you want to open). Once you find the image click on it, then hit the window's Open button.

Cropping The Image

2/ The first thing we're going to do is crop the image. This is a way of removing the part of an image we don't want to improve the framing of the subject matter, which is a fundamental part of good photography and image editing. Click the Rectangle Select tool from the Toolbox (highlighted in red) then drag your cursor over the image, roughly framing the area you want to keep

3/ The selected area of the image will be blue-ish with a marching border. Select the Move Selection icon from the toolbar, (highlighted in purple). Now the edges of the blue selected area can be positioned more accurately. Move the cursor over the border of the selection, hold down the left mouse button then drag the edge into place. Do this with all four border edges.

4/ When you are satisfied with the placement of the edges hit the crop icon on the buttons menu (highlighted in purple). The image has now been cropped. If you don't like the look of the cropped image hit Edit > Undo (Ctrl + Z) and try again.

Adjusting Brightness and Contrast

It seems to be a common problem that snapshots taken in Second Life tend to be too dull, but this can be quickly fixed with the brightness and contrast controls in Paint.Net.

5/ Above the Button Menus hit Adjustments > Brightness/ Contrast (Ctrl + Shift + T). A window similar to the above will open. Simply drag the sliders to the right or left until you get the levels you like. Then hit OK.

6/ Another method which is generally considered better practice than using the Brightness and Contrast tool is to use Curves.  Hit Adjustments > Curves (Ctrl + Shift + M) and a window similar to the above will open.

7/ Grab a point on the diagonal line and drag it subtly to the left to brighten the image. Grab another point on the line and drag it to the right to add contrast. Click OK when you are done.


8/ If the colours in your image look a little dull then their saturation can be tweaked. Hit Adjustments > Hue/Saturation (Ctrl + Shift + U), and a window similar to the above will open.

9/ To adjust the colour of the image move the Saturation slider to the left or the right a little. Moving it to the right will increase colour saturation.

Moving the Lightness slider will of course change the lightness of the colours, and the Hue slider will change the values of the colours, probably not in a very pleasing way.

10/ When you are ready, hit OK.

Resizing The Image 

Once you are happy with how your image looks it may need resizing, especially if it is going to be uploaded to Second Life. Its just as well to keep in mind that Second Life resizes images by a factor of 128px, 256px then 512px and 1024px. An image as large as 2048px can be uploaded to Second Life although it will be resized to 1024px. Anything larger than 2048px can't be uploaded.

The proportions of your picture should also be considered. For instance, if your image is 1024px X 800px, when its uploaded to Second Life it will be automatically resized to 1024px X 512px. An image will always be resized to the nearest 512px, so your original 1024px by 800px image is going to look odd at 1024px X 512px.

To resize your image hit Image > Resize (Ctrl +R), then in the window that opens, add the width and height in pixels in the spaces provided. Then hit OK.

Its worth mentioning here that whilst an image can be reduced in size, trying to increase its size will result in a terrible looking picture.

Saving The Image

11/ Once you have finished editing the image it can be saved to your hard drive. To do this hit File > Save As (Ctrl + Shift + S). In the window that opens you can navigate to the folder you want to save the image to and name it. Below the space where you name the image, there is a drop down menu of file extensions.

12/ Selecting .pdn will save your project as a Paint.Net file, which means it can be reopened in Paint.Net later so you can carry on working on the image from where you left off. In fact it is important to save your work in this way regularly, so that if anything goes wrong, such as your PC crashing, your work will not be lost. It also gives you the opportunity to go back and make other changes to the image at a later time.

Once your image has been saved as a Paint.Net file in this way hitting the Save icon in the buttons menu again will re-save your work along with any changes.

To save the file as a completed image hit Save As and from the drop down menu of file extensions choose an image extension rather than the Paint.Net file extension.

A Note On Image File Extensions

The three most useful file extensions for Second Life are BMP, PNG, and JPEG. Some creators save clothing texures as TGA Files, but I see very little advantage of this over PNG.

BMP is a lossless file format which really should not be used if the image is going to be uploaded to Second Life (except perhaps for artwork), because the file size will be huge and will contribute considerably to sim lag issues. For similar reasons this format is also of limited use for websites.

The BMP file format is still very useful however. For example, when I save snapshots from Second Life to my hard drive this is the format I choose, because it provides high quality images as a starting point for any editing I may want to do.

PNG. This is a good compromise on the BMP file extension as the images in this format will remain good quality, and along with being mindful of image size, it can be useful in helping to moderate lag on a Second Life sim.

JPEG. This is pretty much the old work horse file extension for websites etc. Its a good choice where the highest quality image isn't a priority, even though the average JPEG image will still look pretty good. JPEGs are good for general event posters in SL and for websites. Even so, my file extension of choice remains PNG and its the one I use for most projects.

Returning to the Save procedure, after naming the image and selecting a file extension another window will open, and how this looks will depend on the file format. However, at this point its all very intuitive, so when you're ready hit OK and your image will be saved to your hard drive.

Hopefully, this quick tutorial will help those new to image editing to get started as quickly and as painlessly as possible. Paint.Net may not be as feature rich as for example Photoshop and Gimp but it is nevertheless a good application to have at hand, especially for those quick tasks.
Read More

Wednesday, 24 August 2016

Lusus Saule

Add An Animated Favicon To Blogger

Adding a standard favicon to a blog is a good way to make it instantly recognisable, but this can be taken further by adding an animated favicon. Unfortunately not all browsers will show the animated favicon but for those that do such as Firefox its worth making the effort to add an extra touch of style to your blog.

Creating The Favicon

The first thing you'll need is a small animated gif to use as the animated favicon, and this can be created in a number of ways. If you'd like to create a rotating logo style gif for your favicon then as a SL resident why not make use of the tools within Second Life.

As an example, the image above shows a cube created in Second Life with a texture of the SL-Inspiration logo added to all the sides. If a rotation script is added to the cube, then this can be used as the basis for an animated favicon. Your own animation doesn't need to be a cube, in fact it can be anything you want to create, although it pays to remember the animation will eventually have to be no bigger than 32 X 32px.

If you don't have a rotation script to add to a prim then copy and paste the script below and add it to the object's contents.

 Changing the value of the '1' will change how quickly the object will rotate.

Recording The Animation

If you are creating the animated gif within Second Life then possibly the most effective way to record it is with gif creation software rather than using something like Fraps. It will just save  a lot of time and effort.

There are a number of gif creation tools available, some are free and some cost. My personal choices are firstly GifCam which is free, and Giffing Tool, which is also free if you don't mind small credit text at the bottom of the gif, otherwise pay what you want for it to remove that text. Of these two Giffing Tool is much more convenient to use and worth paying a small price for to remove the credits, and it is the software used in this tutorial.

Before starting up the gif recording software it can be helpful to rez a prim in front of your rotating cube and focus the camera on it, then before recording make the prim transparent. If you need to refocus on the prim you can use the viewer's hide/show transparencies feature [Ctrl+Alt+T]. I find using the prim is an easier way of centralising the camera on the cube, which can be tricky when its rotating. (The image above doesn't show the camera focused correctly, the angle has been changed to show the arrangement of the cube and the prim).

When you are ready, start up (in this instance) Giffing Tool and a window as above will appear. Click on New and a rectangle will appear which can be sized to the area of the screen you want to record. Hold down the left mouse button and drag to create the area to be captured. Once the left mouse button is released Giffing Tool will start recording. To stop recording hit the Esc key on the keyboard.

It may take a little while for Giffing Tool to load the recorded gif, but it will eventually look something like the image above. The important areas have been highlighted in different colours.

The yellow area shows the play/stop/rewind controls.

After recording your SL cube the resulting gif will probably contain far too many frames to make it practical to use as a favicon. The area highlighted in red shows the tool for removing frames. A typical use would be to remove every other frame from the entire gif. Ideally the maximum number of frames should not exeed 60. Also, the animated gif should not exceed 100kb if its to be used as an animated favicon.

Once frames have been removed from the gif you can test how it looks by using the playback tools. The chances are it will look wrong, but this can be adjusted by changing the frame rate, highlighted in dark blue. Removing frames and adjusting the frame rate can be something of a balancing act.

The next step will be to crop the animated gif to remove any unwanted background space. The more of the gif the logo takes up rather than the background the clearer it will be as a favicon. To remove some of the background, use the crop tool, highlighted in pale blue. Click it and drag it around the area you want to keep. It can be adjusted after you release the mouse button.

The last step is to resize the animation to use as a favicon. The prefered sizes are either 32X32px or 16X16px. Use the area highlighted in purple to resize the animated gif. Before you do so however save a copy of the gif full size in case you want to make other changes later. It is also worth mentioning there is no undo button in Giffing Tool, so saving a number of gifs (with different names so they don't overwrite each other) maybe a good idea.

Finally save the animated gif by clicking on the icon highlighted in green, then name the gif and click OK.

The appearance of the animated gif can be tested by right clicking on the saved gif, selecting  Open With and then choosing your preferred browser from the drop down list.

Adding The Animated Gif To Blogger

Once you are happy with the animated gif you've created its time to add it to blogger as an animated favicon.

1/ Firstly, upload the animated gif to your favourite image hosting website such as Photobucket, then copy the code for direct layouts. Now paste it into Notepad (or similar).

2/ Now paste this code also to Notepad:
<link href='YOUR FAVICON URL HERE' rel='icon' type='image/gif'/>
 3/ replace 'YOUR FAVICON URL HERE' with the direct layout code, keeping the quotation marks, then copy the entire line of code you just edited.

 4/ Go to the Blogger Dashboard and select the template option. Make a backup of your template just to be safe.Then click on the Edit HTML button.

5/ Just below the Meta content tags towards the top of the template paste the favicon code, then click the Save Template button. Your animated favicon should now be visible in your browser when you next view your blog. Thats all there is to creating an animated favicon for your blog!

Extra Information

A rotating cube is not the only possibility for an animated favicon as the above gif demonstrates. If this is something you would like to explore, then you'd need to look at other software options.

One reasonably priced option is  Xara 3D Maker which after a cursory look seems good value. However, if all you want to create is one animated gif, it might not be too economical.

A very good website that allows you to create animated favicons online is conveniently called It won't create an animation as stylish as the one above but it will allow users to upload a logo that will be transformed into a favicon with scrolling text. Follow the onscreen instructions to create the favicon then scroll down to the 'Get it now' button to download.

The animated gif will be downloaded as a zip file. Once its been uncompressed look for the gif file in the folder, then add it to your favourite image hosting site. Then use the direct layout code as described above.

If you would like a personalised animated favicon created especially for you and your blog then feel free to contact me and I will be happy to discuss what you would like. But for those who would prefer to get creative, enjoy adding your own favicon inspirations to your blogs.
Read More

Wednesday, 27 April 2016

Lusus Saule

How To Remove The Background From An Image Using Gimp

In an earlier tutorial I explained one method of removing an image background using Gimp, and here I'll show an alternative way of achieving the same result. Although this is a quick and easy way of removing the background, the quality of the final result may depend a lot on the image you start with. For instance, it is best to start with a large picture and resize it later. As a guideline, the image I used for this tutorial was 3000 x 3000px. 

One more thing to keep in mind with this method is, you'll need to start with a background that has an even, uniform colour rather than something scenic. There is also a video version of this tutorial at the bottom of the page for those that find videos easier to follow. Now to get on with the tutorial

1/ Open Gimp and load the image you want to work with.

2/ From the Toolbox panel select the Colour picker (the eye dropper icon), then click on the background of the image. 

3/ Under the Toolbox icons there are two overlapping squares, one black, the other white. As you selected the background colour from your image, the upper square now will show that colour. Click on this upper square and a window similar to the above will open. Drag your cursor over the HTML colour notation and copy the six digit number. You can now click on OK.

4/ In the image window select Colors > Color to Alpha and a window similar to below will open.

The colour to alpha default is white so we want to change it to the background colour of the image. To do this click on the white area in the window, which will bring up another window, as below.

5/ In the HTML notation area of this window paste the number you copied earlier. The result should be the background from the image becomes transparent.

As you can see from the above image this process removes the selected colour from the entire image, and not just the background. However, we can re-add that colour to the subject.

Re-Adding Colour To The Subject

6/ The first step we now want to take is to give the subject a solid appearance. This will make the colours seem very wrong but right now thats not important. Make sure the layer is highlighted and hit the copy button  (the icon third from right at the bottom in the image above), several times. For this image I created a total of nine copies. 

7/ For the last two layers click on the eye icon to hide them. Now place your cursor over one of the visible layers and hit the right mouse button. From the drop down menu select Merge Visible Layers, (Its towards the bottom of the drop down menu). In the window that opens click the  Merge button. 

You should now have three layers, and in the image window a rather discoloured looking image.

8/ Ensure the Merged layer is the active layer. Right click on it and from the drop down menu select Alpha to Selection, (see image below).

9/ Now create a new layer by clicking on the first icon below the layers window and create a transparant layer. Make sure this new layer is now the active layer. The merged layer can now be deleted.

In the Toolbox panel you should see that the active colour is still the background colour we just removed from the image. Select the Bucket Fill tool highlighted above. Now click within the outline you'll see in the image window to fill it with the colour.

In this example I wanted the filled colour to be as solid as possible, so I created copies then merged them, following the same process we used earlier. We should now have three layers: the layer filled with the background colour, and two layers of the subject.

10/ Now make one of the hidden layers visible by clicking on its eye icon in the Layers Panel then move it above the filled layer by using the green arrows just below the layers area. Right click on the top layer and from the dropdown menu select Merge Down. You should now have two layers.

Removing Remnants Of  Background Colour From The Image

Once the background has been removed you may still see around the subject a slight outline of the original background colour, but the next few steps will fix that. The image should still have a selection around it (the dotted line) and we'll need this. If however you've already hit Select > None, just create another alpha to selection using the same method you did earlier.

11/ From the image window menu click on Select > Shrink.

12/ The small window that appears allows you to shrink the selection area by a given number of pixels. In this example one pixel should be enough, but this may be different for your image, so a little trial and error may be needed. After you've chosen the amount of pixels to shrink the selection by hit the OK button.

13/ Now go back to the Select menu and this time hit Invert from the drop down menu. This will mean that everything that was outside of the original selection is now selected. Hit the Delete key on your keyboard to delete the selection. Any unsightly outline to your subject containing the background colour has now been deleted.

Touching Up The Completed  Image

This is essentially all that is involved in removing the background from a Second Life image, but you may find there are still some areas that need touching up. In this example, looking closer at the hat feather shows that it still contains the green from the background. In the next few steps we'll see how this can be fixed.

The following images have been given a white background to make them clearer. When you follow these steps however, the background in the Gimp image window will have the checkerboard background that indicates transparency.

14/ From the Toolbox Panel select the Eraser tool, then in the image window zoom into the area you want to work on, in this instance its the feather. Carefully erase the feather trying to keep a clean outline to the hat.

15/  In the Layers Panel hide the layer with the erased feather by clicking its eye icon, then make the remaining layer visible and ensure it is now the active layer. From the Toolbox select the Paths tool as shown above.

16/  In the image window use the Path tool to create a path around the feather, clicking your left mouse button when you want to change direction, and finishing where the path began. From the bottom half  of the Toolbox Panel hit the Selection From Path button and the selection should turn into a line of what is known as marching ants, (it will essentially look the same as the dotted line from the earlier alpha to selection we made).

17/ From the image window menu hit Select > Invert and then hit the delete key. The area you originally selected should be all you see of the layer. You'll see the colour of the feather should be quite clear, but to give it more strength you can create a copy of the layer and merge them both.

18/ In the Layers Panel place the feathers layer below the subject layer then merge them.

Although this process may seem quite involved, this  is in fact a very quick and dirty way to remove a background from an image, although bear in mind the image will probably need working on afterwards.

Read More

Thursday, 17 March 2016

Lusus Saule

How To Hide Share Buttons On A Blogger Homepage

In a recent post I mentioned how to add share buttons for Second Life related social networks to Blogger, and I also mentioned in passing that not all Blogger templates hide the standard share buttons on the homepage. If this is the case with your blog, then this quick tutorial will explain how to hide the share buttons on Blogger, so that they only appear on a blog post.

Before making any changes to a template it is strongly recommended that you download a backup. If you don't know how to do this, then the earlier post linked to above will explain how. Now just follow these steps:

1/ Sign into Blogger then select Template then Edit HTML.

2/ click inside the template area, then hit Ctrl >f to bring up the search window. Now search for ShareButtons. You should see something similar to the above.

3/ Click on the black triangle to the left of the ShareButtons line to reveal more code. Place your cursor after the closing bracket of the ShareButtons line and press Enter to create a blank line.

4/ Copy the line of code below then paste it into the blank line you created.
 <b:if cond='data:blog.pageType == &quot;item&quot;'>

5/ Scroll down to the end of the share buttons code and you'll see it ends with '</b:includable>'. Create another blank line just above this and paste a closing
statement. Save your template and you are done. The share buttons should now be hidden from your blogger homepage and should only show on each blog post.

Hiding the Second Life Social Network buttons

If you have added the share buttons for the Second Life related social networking sites, you may want to hide these from the homepage too. To do so follow this extra step:

6/ Paste the code for the social networking buttons in the space you created for the closing '</b:if>' tag (the code can be found on the earlier tutorial linked to above). Now paste the closing '</b:if>'  tag directly after the code for the Second Life buttons. Save your template and all the share buttons should now only show on each blog post.

Editing a template can seem a little daunting, but so long as you have a backup of the original no lasting damage should be done, so feel free to give this tutorial a try.
Read More