Having found my orders in a Dead drop location some where in the city of Salt-Lake and with THE MAN hot on my heals. I have finally shaken the henchmen and come to you all...
My mission seemed simple enough, to debrief you all on the proper setup and usage of Thumbnail Images when linking Much larger images to the Headquarters of the Blender Underground. But it seems my simple mission was actually a much bigger endeavor in and of itself.
Still ever Dedicated to the cause and Determine to better us all in defiance to The Man, I come to you today with this detailed report.
So lets talk about thumbnails and bandwidth for a moment.
Since the Dawn of the internet, Image sharing for all sorts of reasons has been key. back in the day Internet was accessed over a phone line only and many people had slower is not out right crawling Internet connections. Even today, many people use dial-up connections. Our Fearless leader Apollos is one such person who uses a dial-up connection. Dial-up has a limited and usually small amount of bandwidth.
Think of bandwidth like a 8 inch wide pipe. and Internet like a set of Pong balls shooting from you to the net and from the net back to you. with small bits of info little streams of Pong balls can travel back and forth with little to no obstruction. the transfer is smooth and clean.
No let say some one else starts to use that same pipe and sends and receive their own pong balls in that pipe. it gets a bit more crowded. Now lest say you go some where that starts slamming you with a huge amount of those pong balls coming at you at such a high volume starts clogging up the pipe and takes much much longer to get the over all mass of pong balls.
when you go to a site, it starts to download images and other data needed to display the Sites page. Images are often much bigger then texted based pages. The bigger the image the more data that must be downloaded before it ca be displayed.
People with High Speed internet are give a lot of bandwidth and can afford to view sites in a very rapid manner. Bigger images, streaming video and large download size files in the hundreds even thousands of Meg's for a single file.
But while the internet is getting more advance. Dial-up users and those who share a single high speed connection with several people (me) are suffering sometimes long waits for page loads.
One thing that the old days brought about, and may have forgotten about, is the use of Thumbnail images. A thumbnail is a much smaller version of the base image that takes the place on the site. Since it is much smaller and it is much quicker to grab off the net. If someone really wants to see the full detailed version of your image, they can click that thumbnail and wait for the bigger image to fully download.
MAKING A THUMBNAIL:
This is also a good thing not for just speed issues. This forum only has a strip of actual visible site about 811 pixels wide. and that remains the same no matter what screen resolution to set. I am looking at it with a viewable window size of 1279x971 and the middle area is still only 811 pixels wide.
When you plug in an image to this small space greater then 632 pixels wide. the right side of the Forum frame must stretch in order to contain it. The thing is, this can be stretched on and on to the far right and force the viewer of the page to can to scroll back and forth to get a full view of the image.
Lucky we have the ability to make an image link to another, Larger image. or thumbnailing if you would.
But how does one go about making a thumbnail? well that is the mission I was given so Here we go...
As any good informant through agent of the Blender Underground knows, there are a lot of way to get the job done, and there are a lot of tools that can be employed to do this job.
Adobe Photoshop is one such tool. But the fact that Photoshop in my mind is the tool of The Man and since it has a price tag of about 500-600 many cant afford this tool. Some agents might be temped into stealing this software in defiance of the man. that is a trap laud out to catch you. I will never advocate theft of any kind for any reason. Lucky for us, we have options and it don't involve theft.
Gimp (GNU Image Manipulating Program) is one such option. It's Free and I'm about to teach you how to at least use it to rescale images, so there should be no excuses left to you about "I don't know how to make Thumbnails" or "I can't Afford Photoshop" or the like.
This tutorial is will cover HOWTO based on Gimp. While the Steps are pretty much the same as in Photoshop. so lets get on the same page, shall we? I will start using thumbnails all over the document now.
first if you don't have Gimp yep, we're going to have to get that. It can be found here:
http://www.gimp.org/
you will be Greeted with a page that looks like this.
With a little navigation we can hit the "Downloads" Page.
a lot of Linux distributions come with Gimp preinstalled with them. On the off chance that Linux does not. this page will give you info on how to download and install Gimp as easy as possible. Chances are however you are not even running Linux, but rather running Windows XP or maybe Vista. This is not a problem as One key feature about open source is that it not limited to just one operating system flavor.
Scrolling to the bottom of the downloads page you will find a link to Windows Downloads.
This in turn will lead you to this page....
You will also find a lot of good documentation on how to install Gimp on windows. you might actually need a pair of files to fully install Gimp. these are small and easy download.
The default setting on the install process will be good enough to get the job done so just install and get it going.
once it installed Go ahead and open Gimp.
You may notice that (A) I am using Linux. I don't even have Windows install on this machine for any reason what so ever. Further proof of my Dedication to opposing The Man, LOL. but this works the same way as in Windows or Mac OSX. (B) Gimp shows up with a few Windows one with tools and settings, another with layers, color pallet and texture patterns settings. And when you open an image there is a third Window all about the image.
This is very alien to many first time users of gimp and many people complain at this fact. but to be honest its a very nice feature of Gimp. and adds a lot of flexibility to the program. I'd suggest you leave the Layers and what not windows as it is and leave it open. if it bugs you, Minimize it, don't exit.
Now this, HOWTO is not about how to use all of gimps tools and setting and what not. With as much power and features as Gimp has, that would be an entire Book series worth of information, and this is going to run long as is. No we're going to use Gimp just for making thumbnails.
To make a thumbnail of a Larger image, we're going to need a Large image to start with, right?
For my example subject I've chosen to use a snapshot of my screen while visiting the blender Underground Forum Index page. My screen resolution is 1280x1024px. thats actually both the recommended and maximum Screen resolution on my CRT monitor. Some once i took the screen shot I load it up into Gimp.
OK so now we have our subject. in it full sized version. if it look a lot smaller then it should be, this is not just you. you see if a image get to a certain size compared to your screen. it will automatically zoom itself out to fit the entire view into a window. As you can see.
On my machine. you can see that it is Zoomed Out 67% of the whole image. To see the image in it full sized 1 to 1 scale. click where it says 67% or what ever scale you may or may not have. and pick out 100%. Not the image is much larger.
OK now zoom it back out to 67% or where it started at. We are going to actually have to scale the image down. to make the thumb nail. what you are seeing is actually an approximation for aiding in the development of an over all image.
OK so you don't really need to resize the zooming back to start. But not that i never put it into 100% zoomed in. so this will look a bit different. Really different if you not using the same base image, which you'll like not have.
Moving on.
For some reason, I can't take a screen shot while maneuvering in a Menu so this I will just have to guide you thought via text.
This image shows there the menu in question is. there is no default Hot-key for this function that I know of. you can set one but that is beyond the scope of this HOWTO.
Moving along...
Having followed along so far you should not see this dialog screen. this is the Scaling dialog, If you did this for the entire image it would resize the entire image to what you tell it to be. the layer Scaling dialog is very much the same but it just rescales the layer leaving the image as a whole the same size.
Since I told you to go to the image menu tab. This will be the entire image that gets rescaled.
If everything went according to plan, and the Man not hot on you trail, you should see two Entry field at the mid top end of the dialog. Beside these is what look like a chain link. Clicking this chain link will sever the relation between the two values of width and height. But we want the resulting image to be the same shape, only smaller so leave this connected. you'll know if it's severed if there a gaping hole between the two links. if not it's linked together and that what we want. By default these will be linked.
This linking make the job really easy. When you enter, picking an arbitrary number here, 640 and plug that into the Width entry field. pressing tab will make the Height change. this is to respect aspect ratio. In most screen captures that generally 4:3 (that 4 units wide 3 units tall) and all resolution are adjusted accordingly. But in my case my screen is not set at 4:3 so my resulting image is 640x512, well fine then.
when scaling the image there are a couple of ways to interpolate the the image between full quality and the scaled down version. When Scaling down you will loose pixels and details the full image has. some smaller thing like little tiny text will blur out and fade away. This is fine because this is a thumbnail showing what there will be but not what is. Interpolation is the method these decisions are automatically made between full quality and the new quality.
If you don't know or don't care much about the difference between, use cubic. It works well trying to keep everything as clear and good looking as possible.
once all this is take care of and you are happy with the new size values. Press the lower right hand button. The one with the word "Scale" and a white dotted box with a blue something in the upper left hand corner.
Give it a moment to work all the changes through and then change the displayed image.
Presto! the image is smaller. but we are not done yet. For one, you don't want the base image to be that small. or do you? We for this tutorial, no we do not want that. so Save As. and Append _SML at the end of the title or something like that so you'll know which one is the smaller version.
save in any image format you wish. So long as it will be displayable on the net. jpg gif and png are three of these. I'm not going to choose one for you. thats up to you... I usually use jpg formats but if I need transparency (see through) images? I use gif or png. jpg just can handle that.
OK moving right along.
After all this you should now have two versions of the same image. One smaller then the other, both in appearance and in file size hanging out some where on your hard drive. You do know where these file are at right? good. if not you better go looking for them and know just where to find them. because now we're going to have to upload both images to a location that you can link to.
Gimp is now no longer needed so feel free to close it out by clicking on the Red-X on the tools window. not the layers window. this will totally exit out of Gimp.
So choosing a Image hosting service is not in the scope of this HOWTO. Everyone has a different idea of what they need from an image hosting service. me I like my Photobucket.com and have had it for about 2 years now? maybe a bit more. It's free and it also makes some things easy for me like giving me a box under the preview image that i can click and have automatically copied to my clipboard. no matter what service you choose. up load both images and be sure you can find them both and know the URL address for each. if possible make it really easy for yourself and make it so that you can easily grab that URL and copy and paste that URL.
Now in forums. this is where it's going to get fun. trust me, this how too is almost over.
this is just me, but it works well for me. I don't use the buttons to place Forum tags for me automatically. aside from the Quote button.
When building up a thread reply with a thumbnailed image. I start with the left most tag and work my way over.
We start with an opening bracket "[" to tell the forums this is a code for it to something special.
So what is special? We want the over all effect to be a Link to another page or directly to the full detailed version of the image. Not the smaller version the bigger of the two.
i start by typing this.
You cant see it but I used a special forum code tag for displaying code, be it forum code or c++ or Java.
if the URL you enter is a valid URL this will go strait to the image when completed. but as it sits right now. it know where to go but you wont see anything special or any after it will be a link over to the image. thats not good. so lets keep going.
To display a image in a forum we need to start with another special tag. the image tag in fact. many of us use this tag to display the image int he first place but if you don't know how to use it, I'm about to explain.
Placing the tag [img] at the beginning of an images URL. you tell the forum this is the start of the images URL and this is where it goes in relation to the post i am building. you then paste in the images URL just directly after with out a space and then close the argument with a closing tag.
The closing tag is [/img] not the / there. that denotes a closing if you are not HTML savvy.
So let see the pattern?
now the smaller image is displayed and clicking it will send you to the bigger image in a new tab or window. but theres a catch. so well anything else past that image. we need to close that argument.
HINT: you can hit -ENTER- and add a little text under it saying some like "Click image for larger view" and then close the argument at this point. I do this a lot but it is optional.
We close the URL tag just as we closed the image tag. with a [/url] at the end of everything that needs to be in the link.
you can make a URL link with out an image but with out showing the URL eigther like so.
This code will come out looking just like this.looks like this:
"HOT NINJA GIRL LOVING YOU!"
So what does all this work with my image look like?
well honestly you've been looking at a lot of examples already through out this HOWTO. But to show you the actual image I've been working with?
Well agents, thats it... No really, we are done. yeah I know...
Long long Mission, Huh. Took me hours to write this and prep for the op. But I feel this was important enough, that it just had to be done.
Now you all know one method of doing this. The excuse of "I don't know how do to this" can't hold water. it really not hard took me along time to explain it but i wanted to make sure it was accurate. so. Do with this as you may...
Penix1 or anyone please Sticky this thread so that it can be found and refer to no matter what. Thank you.
Now if you'll excuse me. I need to Ditch the Man's Goons again. take care and be safe y'all...
Login
Register
FAQ
Search
