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

Friday, 11 March 2016

Lusus Saule

Share Buttons For Second Life Social Networks

Blogging about Second Life is a popular activity, especially for residents who have a defined interest in-world such as the arts, music and fashion etc. Along side this there are some prominent social network platforms that cater specifically for online 3D worlds, although for some reason it is not as easy to connect the two in the same way it is with, for example Facebook where share buttons are now part of the norm for any blog.

Although no platform owner has yet developed share buttons that enables blog readers to add their favourite content to these social networking sites, there is a work around. The idea is simple. Buttons placed are on a blog, much like Facebook, Twitter and Google+ buttons, and when clicked a small pop-up window appears so readers can quickly add the page to their Second Life social network site of choice, without leaving the blog. To get a better idea how these buttons work click on the ones at the bottom of this page.

There are two ways to add these share buttons to a blog. The first is the much simpler method of adding them to the sidebar and the second is to add them to the blog template where they will automatically appear in each blog post.

Adding The Share Buttons To The Sidebar

To add the buttons to your blog follow these steps:

1/ Sign into Blogger and then click on Layout for your blog.

2/ Drag your cursor over the following code then right click on your mouse and select copy.
    <th style='border:none: width:100%;'>
 <a href="#" onclick="'', 'newwindow', 'scrollbars=yes, toolbar=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatarbook' src='' style='padding-left:-5px; padding-right:3px' title='Share to Avatarbook. Opens in a new window'/>
<a href="#" onclick="'', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatar Social Network' src='' style='padding-right:3px' title='Share to Avatar Social Network. Opens in a new window'/>
<a href="#" onclick="'', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='SL-Space' src='' title='Share to SL-Space. Opens in a new window'/></a>
                        <!--please do not remove this credit -->
<th style='border:none; padding-bottom:10px; font:10px Roboto,arial,sans-serif; color:#666; width:35%'>Created by <a href="">SL-Inspiration</a></th>
 3/ Now in the sidebar section of the blog layout, select Add a Gadget. In the window that opens select HTML/Javascript.

 4/ Another window will open and in the Content area paste the code, then give it a title if you wish to. Click Save, and the share buttons should appear on your sidebar.

 Adding The Share Buttons To The Blog Template

Before making changes to any blog template it is important to download a backup of the original, so it can be uploaded again later if needed. To do this:

1/ Sign into Blogger again and then choose Template from the drop down menu for your blog.

2/ To the top right of the template page click the Backup/Restore button, and in the Save window that opens give the template a meaningful name and hit Save. Your backup is complete.
To add the buttons to your template follow these steps:

1/ Sign into blogger, click on Template, then click the Edit HTML button.

 2/ Click anywhere inside the template window, and then hit Ctrl > f to bring up a search window. Use this window to find this line of code:
<b:include data='post' name='post'/>
As you can see from the example above this code can change from template to template, but search for something similar to the above.

3/ Now drag your cursor over the following code. Hit the right mouse button then select Copy.

                          <!-- SL Social Share Links-->
    <th style='border:none; width:35%; padding:0px;'>
      <a href="#" onclick="'', 'newwindow', 'scrollbars=yes, toolbar=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatarbook' src='' style='padding-right:3px' title='Avatarbook Opens in a new window'/>
                      <a href="#" onclick="'', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='Avatar Social Network' src='' style='padding-right:3px' title='Avatar Social Network. Opens in a new window'/>
                      <a href="#" onclick="'', 'newwindow', 'scrollbars=yes, width=700, height=600'); return false;" rel='nofollow'>
                        <img alt='SL-Space' src='' title='SL-Space. Opens in a new window'/></a>
 <th style='border:none; width:55%; font:11px Roboto,arial,sans-serif; color:#666; padding:0px; '>Share to SL social networks</th>
                        <!-- please do not remove this credit-->
<th style='border:none; padding-bottom:10px; font:9px Roboto,arial,sans-serif; color:#666; width:35%'>Created by <a href="">SL-Inspiration</a></th>
                          <!-- SL Social Share Links ends-->
 4/ If you want the share buttons to appear above each post content then paste the code above the line you searched for. For the buttons to appear below each post, paste below.

5/ Save the changes to your template and the buttons should now appear on your blog.

As all blog templates differ, it may be that your blog has more than one b:include data='post' name='post' line of code. If the buttons do not display in the correct place on your blog you may need to search for a second b:include data='post' name='post' in your template and add the share buttons script there.

 Displaying the Share Buttons Only On Blog Posts

Many templates will not show the standard Facebook, Twitter and Google+ share buttons on the blog homepage. If this is the case with your blog and you would prefer for the SL share buttons not to show on the homepage also, you will need to find the following line of code:
<b : include id='sharebuttons' var='post'>
1/ Once you have found this line you should see a black triangle to the left of it. Clicking it will reveal more code.

2/ Scroll down until you see this:
Paste the SL share buttons code after the closing </b:if>.

3/ Save the template and the buttons should now appear after each post but not on the homepage.

 A final Note

As we have already mentioned, blogger templates can differ and it may be that the buttons appear more clustered on your blog than they do below. If this is the case try tweaking the width percentages in the first two lines that begin with
<th style='border:none.....
Increasing the percentage will give more room to the line you edit, but keep the total of both percentages to around 90%. Leave the third <th style='border:none..... exactly as it is.

Adding buttons for Second Life related social networks is easier than you may think, and can help to increase not only your readership but also the exposure of your favourite  social platforms. If you like this tutorial then why not share it! Also, check out our new SL-Inspiration Facebook page...we appreciate each 'like' we recieve.
Read More

Monday, 28 December 2015

Lusus Saule

Creation Park

Creation Park is the brainchild of Barbie Alchemi set up to to raise donations for the  Michael J Fox Foundation for Parkinson’s Research, with the added aim of offering support groups and research into the positive effects of Second Life for people with Parkinson’s Disease.

If you think this all sounds very serious, well it is, but at the same time Creations Park has so much to offer visitors, including a dance club, a tropical beach, boutiques, horse riding and much much more. As well as all of the above, Creations Park is a beautifully crafted place to visit with lots of opportunities for Second Life photographers to take great shots.

The best way to discover more about Creation Park is to visit the location in Second Life by clicking on the link above, and exploring it for yourself. Also, watch the Drax Files video below (or watch it on YouTube) which explains so well what the Park is all about. 

If you would like to find out more about Parkinson’s Disease and to make a donation directly, then you can visit the Team Fox website.

The Creation Park Jigsaw Puzzle

Whilst visiting Creation Park I took the image at the top of the page and turned it into a jigsaw puzzle for you to download and keep. Simply click here to download the zipped file containing the jigsaw and then double click the jigsaw icon once unzipped. The file is stored on Google Drive so you can be sure it is safe to download. Enjoy solving the jigsaw puzzle and don’t forget to pay Creation Park a visit.

Your Own Image As A Jigsaw Puzzle

If you have a Second Life image you would like to share as a jigsaw then full details of how I can do this for you and host the link on this blog are included in the pdf document included with the download.

This jigsaw puzzle is a little challenging so grab a coffee and set aside around an hour to work on it, and enjoy.
Read More

Saturday, 26 December 2015

Lusus Saule

Managing Your Fonts With NexusFont

If you create logos or graphics for your Second Life business then you will often have to use fonts. Sooner or later, the more fonts that are used the more difficult it is to keep track of them, so having font manager software can save a lot of frustration. There are many font managers available, some paid for and some free, but the most useful I have found is called NexusFont.

NexusFont is a small and free application that will allow you to keep on top of your collection of fonts. One of the most difficult aspects of creating a design can be selecting the right font, but the time spent on this can be reduced dramatically with NexusFont because it enables you to sort fonts into folders and compare them.

Adding fonts to a folder is easily done:

1/ Right click on the font you want to add.

2/ Select Copy to Folder.

3/ From the drop down menu either select a folder name that's displayed, or select Browse.

 4/ When Browse is selected a window similar to the above will open. From here navigate to the folder you want to copy the font to.

Now each time you need to choose a font for a specific project you can use the folders as a guide to compare similar fonts. Fonts can also be copied to different folders if they fall into one or more styles.

Tracking Previously Used Fonts

Another time consuming aspect of using fonts is finding a font that has been used on an earlier project. If for instance a font was used on a particular logo some time ago it can be difficult to remember exactly what font was used for that design, and there can be little to jog the memory, except to run through all of your installed fonts..

However, in NexusFont a font can be given a number of tags. The example above shows the font used for the Chilly Bear Club logo, and it has clearly been tagged as such.

To add a tag to a font:

1/ Right click on the font in NexusFont, then select Edit Tags from the drop down menu.

2/ A window similar to the above should open. Type the tag name into the space provided and select either the Add or Replace options, depending on whether you want to keep or replace any existing tags.

3/ Click OK and thats it.

To find a tagged font simply use the search window to the upper right of the NexusFont window. So long as you give a font a tag thats relevant to the design it was used for, it should be easy to find when you need to.

NexusFont has a number of other useful features to help you manage your font collection, but the ones briefly summarised here will help you to get started and will probably be the ones you'll use most often. As mentioned earlier NexusFont is free to download and use with no annoying trial periods or nag screens, so why not give it a try.

Read More