semi-transparent and/or image background for all posts in blogspot

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:

Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:

Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background

From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background

From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.

3- Edit HTML

Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,

find,

.date-outer {

in it there is a line like this,

background-color: $(post.background.color);

replace it with this line changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

For people with Background in the previous step,

find,

$(content.background.color.selector) {

in it there is a line like this,

background-color: $(content.background.color);

replace it with the following changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

.................................................................................................................................

finally! a good looking flickr widget!

If, like me, you have a flickr feed you will be wanting to show it on your blog. There are quite a few flickr widgets around, except that most of them look horrible enough to make you want to run as far away from them as you can, getting you stuck with nasty looking backgrounds and borders and huge big type.

Just stumbled upon one on Flickr itself which actually lets you modify the layout in such a way that you can get rid of all the text, backgrounds, borders, buddy icons and whatever else and only show photos of your choosing. The whole stream, or a set, or a group... And at perfectly decent sizes at that! And if you want to you can get this as a flash thingy also - although that one seemd a tad too small thumbnailwise. And yes, they actually give you the code, so you could modify this even further should you wish to do so - but why bother really? Looks decent enough to me as it is.

Note: I made the screenshot above on the dummy easy peasy site, which currently has a very dark background. The thumbnails float on whatever your background may be, so do not be misled by that.

Check it out here:

http://www.flickr.com/badge.gne

.................................................................................................................................

web image formats

There seems to have been some confusion amongst you about this. So, just a very quick post on which ones to use and when:

GIF: Will only use up to 256 colors when saving, so this works best for solid colored things (preferably with aliased edges) that have few colors and no gradients. You can also have transparency with GIF, however it will hardly ever look right, will give you some very nasty jagged outlines unless you are using it on straight edged shapes such as bitmap fonts.

JPEG: The one which you will probably end up using the most, works very well with all types of images, in that it uses millions of colors when saving - except that there is no transparency.

PNG: There are two types to this  - PNG8 and PNG24. Avoid 8 like the plague! Use GIF instead, works the same way, with only 256 colors. The one to go for is PNG24, which is a fabulous image format that also works with millions of colors + transparency. So, you cannot go wrong with this. Downside: Will create large file sizes when used on large, complex textured images, in which case JPEG is a much better option.

.................................................................................................................................

chaoscope: a great application to create website backgrounds

Download and play! :-D

http://www.chaoscope.org/

 (Tip:   Start out with the stuff from the projects folder and take it from there. Pick different fractal formula from the very top of the panel. Choose different render modes. Drag your cursor to rotate the fractal. F3 makes a new shape, F4 renders it for you. Also remember to click on the gradients at the bottom to get random color schemes.  ) 

.................................................................................................................................

image tracking

Here it is folks:

http://www.picscout.com/

This site lets the owner of an image find out where and how their images are being used. It also lets web designers locate the owner of a photograph to contact them about licensing. 

If you link back to an image by right clicking and copying the URL (inline linking), then you are OK, since the software would only track the image back to the original website. And in any case, there seems to be no plagiarism involved when you do inline linking as this article on wikipedia tells us.

However, if you download an image into your computer, play around with it a bit (resize, crop etc) and put it back online - then you are toast! Or could very easily be if the owner of the image were to set their mind on checking on things.

I am not sure if this would also work with highly processed and manipulated images, however I would err on the side of caution and stay away from such practices altogether. For one thing, regardless of whether you get caught or not, it is not the right thing to do. Second, why take the risk when there are literally millions of images online, which you can use under the proper creative commons licenses? Read more on where to find them here.

.................................................................................................................................

can you resize a full background image on an HTML/CSS website?...

... one of my students wanted to know last week. Well, seems that you can:

http://css-tricks.com/how-to-resizeable-background-image/

And you can see a demo of it in action here:

http://css-tricks.com/examples/ImageToBackgroundImage/

Apparently this works with just a few lines of code which you insert directly into the CSS:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Very very nice indeed! Lots and lots of other really cool code snippets (as they call them over there) to check out on their huge site. So, thank you Chris Coyier and CSS-Tricks!

 Note:  I have been thinking, and in order for this to give a good result your image aspect ratio would need to be 4 x 3 so that it reaches down effectively at sizes like 1024 x 768 or 1600 x 1200. However the width would need still need to be 1920 so that it also stretches to 1920 x 1080. Which makes the vertical value 1440. So, 1920 x 1440 is what you need. Which is pretty big and may be difficult to bring down to 300KB, which is the limit on blogspot background images. Read more on browser sizes and background images here  ) 

................................................................................................................................

ajax/javascript/flash image galleries

Here are some really good and popular image galleries that you can use in your web pages. All of them are free, however some do have Creative Commons licenses, so read carefully if you are thinking of monetizing your sites in future. All websites contain step by step tutorials on how to setup and customize the galleries, however most of them will require you to get your hands dirty, meaning you have to go into the code.

Ajax Galleries 

MiniShowCase

GreyBox

Lightbox (most popular, slick and cool design)

Javascript Galleries

Highslide (personal favorite, very customizable, probably requires the most coding among these)

Flash Galleries

DF Gallery

Flash XML Gallery

FlShow

Will be updated... Check back for more soon.

.................................................................................................................................

perfectly clean images at all sizes for blogspot

A small but highly annoying problem comes along when you upload images from your computer to your blogspot blog. Linking images from other sites will not do this by the way, with that you don't have to worry at all. However when you upload directly from your computer, the code will look like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s320/faststone.jpg" width="320" /></a></div>

Your image will be 320 pixels wide. The height can change depending upon your image aspect ratio, but the width is always 320 - no matter what, even if the width of your post is 1000 pixels! This is the default state and should be fixed, of course. Which needs to be done by hand in the Edit HTML tab of your post editor:

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="406" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGqMgqN_at_AzT8hWn4upnn527C6Wq9-2lIg2HY_dGm91vO3_Dv_e3AIWmvtqaXD9HxkNXUDsKTiHnDQXUO5mv2APbiV56hNmy8PCUaD97kXWlnyjvgt8sdi76ZS4pRVaZkbvjvXN_mjo3/s1600/faststone.jpg" width="500" /></a></div>

The bits you need to tackle are highlighted in black in the above code snippets. You obviously change the height and width. However, there is another little thing you need to change also and unless you take care of it your images will look really bad and blurry. This is the s320, which needs to get changed to s1600. Don't ask me why, this is how you get it to work.

 (Tip:  Need to know how to get the correct measurements when you resize your images? You can of course do it in photoshop by going to Image > Image size and pretend that you are resizing the image from the pixel values on the top. And then you can also install the opensourced Faststone Image Viewer (greatest app in the universe - please make a donation!), right click on the image, and...  ) 

.................................................................................................................................

auto-cycling backgrounds

If you want to have multiple backgrounds on your blog that randomly appear on every refresh, then you should add the following javascript code in this way:

Go into design, then into page elements, choose add a gadget, from the pop-up menu select HTML/JavaScript, there is no need for a title, into the content area copy/paste the following code:

<script type="text/javascript">
var banner= new Array()
banner[0]="image1.url"
banner[1]="image2.url"
banner[2]="image3.url"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

Additional important notes:

• image1.url, image2.url etc. shouldbe changed with the actual url of your image.
• if you have more or less images you can adjust the number accordingly, keeping the same style in mind either by deleting extras or creating "banner[3], banner[4]" etc. You also have to adjust the number in red and make it equal to the number of images that you are using.
• if you are using small images which should repeat themselves such as textures for backgrounds, then you should replace "no-repeat top left" with "repeat center center"

.................................................................................................................................

tutorial: making a big background image and/or seamless tiling

Note:  I found out since I wrote this post that pixlr (a free online editor) also has layer masks. Which means  that you can do the exact same thing that I am describing below over there as well. True, the mask works a bit differently, but it will take you no time at all to figure it all out. 

Photoshop tutorial only I'm afraid... :-\. I really tried to find a way of doing this which does not involve buying software but couldn't. The only good news is that photoshop elements, the vastly cheaper 'lite' version of photoshop, lets you use layer masks also it seems...

OK, so you found an image but it is smaller than 1920x1200. Here is what you do (and please click on the images to see all the instructions nice and large):

Open the image in photoshop. Double click on the image icon that you see on the layer palette. This will turn the background into a layer.

Next step: From the top menu, go to Image > Canvas Size. Make sure you place the little anchor square on the top left and then change the canvas size values to 1920 and 1200. Once you have done this you will see that the image is now sitting on the top left and you have a transparent background to the bottom and to the right. These transparent areas are what you need to fill.

Once you have the canvas size in place, drag the layer onto the little page icon at the bottom of the Layer palette and duplicate it. Next, go to the top menu Edit > Transform > Flip Horizontal. Then, holding down the shift key (very important this!) drag the top layer to the right. Photoshop will give you a tiny 'stop' when you hit the document border and this is exactly where you stop if you want an image is perfectly symmetrical and can also be tiled.

Next, you go back to the top menu and go to Layer > Add Layer Mask > Reveal All and add a layer mask. (You will see the layer mask icon appear next to the image icon on the layer palette after you have done this). Then you go to the gradient tool in the tool box. Make sure from the tool options palette that you have the linear gradient, going from black to transparent. Then, again holding down the shift key, give the layer a few soft horizontal strokes, until everything is nicely blended.

Remove the layer mask by going back to the top menu, Layer > Remove Layer Mask > Apply.

Merge the two layers into one by using the layer palette (tiny arrow on the top right will take you there). However, do not Flatten Image, but Merge Visible!

Then duplicate the merged layer (again) and this time flip it vertically by going (again) to Edit > Transform > Flip Vertical. Move the layer down, until you get the tiny 'stop'. Repeat all steps above with the layer mask, except that this time you stroke vertically, still holding down the shift key.

And there you have it. This is now exactly the right size and is also tile-able, since it is symmetrical as well. All you need to do now is to save it in a web format. File > Save for Web > Jpeg or whatever and you are done! 

 (Tip:  If you upload a background image into blogspot via the template editor, it has to be below 300KB. So, check this as you are saving from photoshop.  ) 

................................................................................................................................

logistics: images - where to store them...

If you are using blogspot all the images that you upload into your blog will be automatically stored in Picasa Web Albums. Which is all very nice - except that Picasa only gives you 1GB of storage, which is large enough I suppose, but not infinite. A highly bothersome thing however, is that Picasa resizes your large images to fit their own standards. So, while it may be OK to use Picasa for smaller sized things, when it comes to larger stuff you need to look elsewhere.

Image Shack seems to be a decent enough place to store images, if you can live with the ads and popup windows that want to predict the day you die (absolutely no kidding!). I am linking the grass image below from there. A free account does not give you unlimited bandwidth, and there is a file limit of 3MBs per image. But it is free and I guess you get what you (do not) pay for in the end. Which is a nice full sized image, after all:

However, if you are creating your own images, then what I would most definitely advise you to do, would be to go via creative social sharing domains, which will give you not only upload space but also exposure: First, you can create a pro Flickr account: This costs 25$ per year, and gives you unlimited storage, even at ultra large sizes. Second,you can upload photos onto stock.xchng, which is free. Flickr, will give your work more exposure than stock.xchng since sharing on Flickr works through groups which will spread the word about your stuff very rapidly. Like most good things there is a price tag - but well worth it I would say... And then, of course, a third place is deviantart, where again you can create a free account and upload your work as well as share it with the deviantart community.

 (Tip:  And here is a word to the wise: There seem to be a lot of these free online storage domains around these days. Before you get sucked in with big promises and 10GBs of free space and so on, read the small print! The terms and conditions, in other words! Here is one called Cloud Experience. Sounds great, right? Well, read on and you will find out that all of the stuff that you put in there becomes their property!

grrrr...  ) 

................................................................................................................................