layout thumbnails

Misc. tutorial

You have probably seen layout thumbnails in some blogs on several sites; showing a small piece of the full layout. Well, in case you're wondering how they do that, I'll teach you! It's not that hard really. You can make the thumbnails in any photoediting programme, but since everybody have 'Paint', I'll show how to make them there. As an example I will be using one of my layouts of Emma Roberts:


Step 1
First, open 'Paint'. Go to 'edit' and click on 'paste in from...'. Choose the layout or image you want to make a thumb of. Then you can move it around on your canvas. Move it so that the part you want to be in the thumb is in the upperleft corner.

Step 2
Then go to 'image' and click on attributes

Change the height to 100 and the width to 50, make sure that it's in pixels.

Step 3
Look on the screenshots below and match your settings to mine.

Now you are going to use the 'square-tool' from the 2nd screenshot to make a black border on the thumbnail. You should probably zoom before you do so though, as it will make it easier to do it correctly. Then you change the colour to white and make a white border inside the black one.
Mine ended up looking like this when I was done:


Step 4
You probaly noticed that my thumnail is clickable; when you click on it the full layout shows up in a new window. Here is the code I use to do that:
<a href="URL layout" target="_blank"><img src="URL thumbnail" border="0"></a>

Note! My 'Paint' is in Norwegian so my whole toolbar and all the terms that are used in it are in Norwegian. & although I've tried to translate most of them to English in this tut, I may have used the wrong terms.

Copyright © 2008 septemberdreams.piczo.com. All rights reserved.

<< back >>