Showing posts with label Image. Show all posts
Showing posts with label Image. Show all posts

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:

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

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:

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:
And you can see a demo of it in action here:

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 
Lightbox (most popular, slick and cool design)

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

Flash Galleries

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

.................................................................................................................................
Subscribe to: Posts (Atom)