3.12.2011

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="http://3.bp.blogspot.com/-lhJuEXZkc70/TXlSn1-kKZI/AAAAAAAAAjI/VFD0mUPA1Z4/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="260" src="http://3.bp.blogspot.com/-lhJuEXZkc70/TXlSn1-kKZI/AAAAAAAAAjI/VFD0mUPA1Z4/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="http://3.bp.blogspot.com/-lhJuEXZkc70/TXlSn1-kKZI/AAAAAAAAAjI/VFD0mUPA1Z4/s1600/site-areas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="406" src="http://3.bp.blogspot.com/-lhJuEXZkc70/TXlSn1-kKZI/AAAAAAAAAjI/VFD0mUPA1Z4/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...  ) 


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

design: hierarchy / text / lightness values



Since a website usually has very little white space (space which is empty of informational content, that is) the hierarchical components of a site will often end up being placed very close to one another. 

The two images above should hopefully explain it: If you make all of your text one color (white in this case), it will be quite difficult for people to know where to look first when they come to your site. If however, you use various tones of gray then it will become far more obvious where the most important stuff is, and then what comes after that. As a rule, things on the side bars are less important than your post, these should be darker than the post. Inside those, visited links are less important than unvisited ones, and the rollover link should pop out the most.

Inside the post itself it is a good idea to highlight or make bold the stuff which you would like to stand out. (I prefer highlight since I do not like the way bold text looks on websites at small sizes - becomes smudgy).

Size is also an element that can be used for establishing visual hierarchies, however since most of the text will have to be on the small side you can only really use that for post titles and the header: When it comes to body text, a change from 13 pixels to 14 or 15 is not going to give you enough difference and will only make your design look 'ambiguous' - a term which designers fear like death! So, tonal values for type hierarchies are one of the best ways to go in web design, I think.

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

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"
.................................................................................................................................

homework: template mods

OK people - question: When I was checking your homework in class last week, the ones that I saw had done absolutely nothing to their blogs. I am amazed! How could you possibly have resisted? Something that is so easy and so much fun? And that is in fact a righteous introduction to web design? Which is the class that you are taking?

I am putting my money where my mouth is and setting you an example now:
http://easypeasydesign1.blogspot.com/2011/03/modifying-template.html
Please go to the above link and look at the examples that I am showing you which have all been made  using a blogspot template, by simply changing the background images, making simple header images and replacing the default header with them, and then going to the template editor and choosing different layouts, widths and changing values from the advanced tab. No coding, no nothing! Except in very simple cases, such as adding a background image to a single post, which I was talking about in the entry just before this one. There are cases where some advanced CSS editing will be needed to tweak these into a perfect state but (with Selim's help) we will get to all of that when and if needed.

This is your homework now! grrr... I want to see some action on your blogs! And I will be even happier if you keep experimenting and take different screenshots and put them into posts. And furthermore, I would like you to keep on doing this - not only this one time, this week, but always! This is how you will get a sense of web design - not by sitting around and waiting for a miracle to happen, you know? And ooops - sorry, the miracle has actually already happened: You have a fully editable template, courtesy of blogspot, for free! And if that isn't a miracle, I don't know what is!

Here are a few good tips before you start to play around - so that you actually have elements to play around with:

 1) Add gadgets  - a nice text box, even two maybe. Links (find some stuff to link up!). Make different link boxes, for different categories.... 

 And please delete the default gadgets:  Absolutely no point in having a follower box on a brand new blog where you have no followers yet - or so few that it is kind of better to not show them at all, you know? Same for 'About Me'. This one is almost impossible to make look nice and aligned. So, get rid of it, for God's sakes! Make an 'About Me' page and put a nice big photo of yourself and some nice text. Easy peasy... And also 'Archives'. Again, too soon, you have only been around for 5 minutes - what archive?

 2) Labels  (which you can rename as 'Topics' or whatever you like: Now these will only happen once you start putting them at the bottom of the label box of a post. So, create a 'dummy post' (you can call it 'for labels' or something) and put a lot of labels in it. This will give you the list which you can then use as a gadget box. Similarly, add pages and use a page gadget. (The page menu on the top looks pretty awful in its default state and you cannot change it unless you re-code it, so for now I would stay away from that and go with a side gadget instead). You don't need to write anything in them yet, simply give them a name and write 'under construction'. 

And, again, absolutely no kidding guyz - this is now your homework! ;-) 

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

3.11.2011

putting an image into the background of a post!


Verrry nice indeed! Here's how it works folks: Place this line of code at the very top of the post:

<div style="background: transparent url('Your image URL') repeat scroll 0 0; padding:1em;">

Fill your post with whatever - photos, text... Then, close the whole thing with </div> And you can do the same thing for the title of the post also if you would like that to have a background as well - different images too, if you want. Simply change the image URL and the padding value at the very end to 0.5em, so that the title and the text of the post align nicely. Easy Peasy - except for a minor bug: For some strange reason sometimes blogpost wants you to save the whole thing as a draft first. So, no big deal, you save as a draft (even if the post is already published), close, re-open and then get the preview and publish...

Oh, and - if you want a border around the post and/or the post title - then here is the additional bit of code for that (you can change the color to anything you like, of course):

<div style="background: transparent url('Your image URL') repeat scroll 0 0; padding: 1em; border-style:solid; border-width:1px; border-color:#4E4E4E;">

The image on the background is only a little trial of course, but I have to say that my mouth is watering at all of the possibilities with this! :-D. And here is the blog where the original tip is coming from. Thank you so much Carissa Rogers!


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

starting to think about page structure


The diagram above shows you the three distinctive design areas, which are determined by the content of a website.

First off, the image is exactly 1024 x 768, however as you can see quite a bit of this area is taken up by the browser, so you are actually left with considerably less space to work with. What you do have left needs to be thought of as three distinctive areas: 

The header is where the site's information (such as the title, subtitle and so on) go. Also some buttons, such as 'contact' or 'FAQ' or 'Home' may go here as well. Essentially this is the area that will be initially visible when someone comes to your site and so this is the place where they are most likely to see things. Next, comes the area through which someone would access the (initially hidden) content, such as pages, things grouped together as labels (categories in wordpress), also links to other sites, and so on. So, in a word, this second area is the menu. It is highly desirable that this part (along with the header, of course) stays consistently visible throughout your site. And then third, is the part of your site that changes and is updated very often - the main window, or the content.

You should be aware that these areas do not need to be placed in the way that I have put them here but can be located quite differently as well. So, as an example, a menu could be on the right side only, or it could be on both sides (as it is here on this site), or it could even be on the bottom or the top like a narrow band running underneath the header. Again, the header could be on the side or even the bottom - in which case you would of course need a special frame so that it would always slide upwards and stay visible inside the screen. What is important is that you need to be aware of these three parts and that all of them are accounted for in your design.

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

3.10.2011

webtreats...

... is so nice that it deserves a post of it's own. You can get all sorts of things from here, including background patterns - but much more as well: Photoshop presets for one thing - brushes, custom shapes, really cool layer styles - and then even layered photoshop files for web sites and themes. Check it out - you will love it!



http://webtreats.mysitemyway.com/

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

seamless patterns for backgrounds

Why not? They will work very nicely, there is a huge selection to be found online and you can even make them yourself with special softwares and photoshop plugins.

First off, let us start with a few of the pattern libraries you can find online:



http://www.indrikov.com/pattern_violina/pattern_violina.html



http://www.squidfingers.com/patterns/10/



http://www.brusheezy.com/patterns (also lots of psd brushes)

http://www.deviantart.com/?order=9&q=patterns (of course!)



http://patterns.ava7.com/



http://pattern8.com/



http://www.noqta.it/dromoscopio/

And if you still cannot find what you are looking for, then you may also want to try your hand at making your own. Imagelys gives out a free photoshop plugin which makes seamless patterns, which you can download from here. I have not personally tried this, however I have an idea that for it to work at its best you may want to download the texture packs on the page as well and start off from those.

Richard Rosenmann (who has a great collection of free photoshop plugins by the way) has a seamless texture generator plugin called Tiler for photoshop.  Again, I have not tried this out myself, but you can download it from here (scroll all the way down the page): http://www.richardrosenman.com/software/downloads/

 (Tip:  Some of Richard Rosenmann's other plugins (such as 'Halftone', 'Pixelate', 'Scanlines' and even 'Ascii Art' also do a great job of creating seamless textures. Try them out for sure!  :-) 

And then there are of course the really nice ones, however they do have a price tag attached: Pattern Studio is one. And then there is a really great one called Mystica which is actually a software for generating textures for 3D. And then finally Genetica, is another a 3D texture software which can be used to generate seamless textures.

And then, if you want to go even further you can make a seamless background image by following the steps in this earlier tutorial here. Only difference would be that you should preferably use a square format rather than a rectangle and also that you pick an image (or crop a part of an image) which will look nice as a pattern The rest is very much the same: Flip, blend, merge, flip again, etc. And sometimes use a layer mask and sometimes not, depending on how things look... And remember that the strangest things can give you a result: Below I am linking a seamless image which I made out of an old master painting. So, basically use your imagination and experiment...






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

3.06.2011

design stuff: background images

A few useful hints on how to choose background images:

Your design will go in one of two directions: You will either have boxes inside of which you place your content or you will do a free floating layout, such as the one you see here on the easy peasy site. These are two distinct approaches which will also determine your background images. If you have things boxed then you can be far more adventuresome with your background since the boxes will see to it that the content of your site stands apart from whatever it is that is going on behind them. If you go for the free floating look however, then the background will need to have very very low contrast, it really needs to go all the way back, so that it doesn't interfere with your content, be it images or text.

However, even if you have boxes, it may still be a good idea to consider what sorts of visual material will be part of the actual content later on. If you plan on using lots of really colorful images then it may still be a good thing to have a background which will not interfere with that. If, on the other hand, your content is mostly text based with relatively few images, or always low saturated ones - then it may be a really good idea to have a strong background.



I created a dummy site for this course, so that I can show examples of what I am talking about without ruining the real thing. Here, I put boxes underneath the content and then placed very high contrast black and white images into the background. Since the boxes create enough of a separator this does seem to work.

Another thing is the subject matter itself: Going back to the scuba diving website which one class member is thinking of doing. In all likelihood most of his images will be underwater photographs and so forth. In which case a nice deep sea image, or an abstract image in strong blue hues will probably look really good as a background for that.

A word which you will hear me say a lot over the next weeks is Gestalt. Essentially what this means is that any design work has to be considered as a whole, every visual component has to be related to everything else through closure, through alignment, proximity, similarity etc. So, the background is only one component of a complex system which we will be building together. The good news is that in web design you can always go back and adjust things, change things, add and delete things if they are not working out. That said, it is still good work practice to think about future visual relations as you are putting some thought into a background for your website now.

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

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...  ) 

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

design + logistics: images - where to find them...

It is all very well to talk about nice background images, but where do you find them?

One obvious answer would be that you are an enthusiastic photographer and create your own content. Another one would be that you are a dab hand at image processing and assemble your own material on an image editor. (Which is, of course, a really cool thing to do and we will certainly be talking more about this later). But, let us say that you are neither - you do not take photographs and you do not make digital art either. In that case your best option is to look for online stock photography and vector art.

stock.xchng is a stock photography portal which makes its content available to you under various types of creative commons licenses. You first need to register and this is free. Once you are a member, the site gives you a brilliant advanced search menu through which you can find images which you can then also put under themed lightboxes, which hold up to 60 photographs each. Please make sure to read the terms and conditions of all the photos which you use. I actually went ahead and put together a few background image lightboxes for you, which you can look at also:
http://www.sxc.hu/browse.phtml?f=lightboxes&lid=603779
http://www.sxc.hu/browse.phtml?f=lightboxes&lid=603775
http://www.sxc.hu/browse.phtml?f=lightboxes&lid=603769
http://www.sxc.hu/browse.phtml?f=lightboxes&lid=603757
http://www.sxc.hu/browse.phtml?f=lightboxes&lid=603753

You can obviously search for images on google. However, when you do so, be sure to apply the correct licensing filter from the advanced search page:
http://www.google.com/advanced_image_search

Another very obvious place to look for images is Flickr. If you do not already have a Flickr account, I would advise you to start one immediately. However, I do not think that you even need to be a member to find photos on Flickr. The thing to remember is that not all of the content on Flickr is free to use, in fact most of it is "all rights reserved". So, when you search, you need to go to advanced search, scroll all the way to the bottom of the page and check the creative commons boxes. Flickr is absolutely massive and even with the cc restriction applied, it will give you far more results than just about any other photo sharing domain.




Above are two images that I found on Flickr, doing a creative commons search for "abstract background". Total search result was 11.211 btw. Certainly no shortage... One thing to be aware of is that some of these images are not large enough and so they may need some additional work in an image editor (more on what to do later) ;-)

A cool place to find creative commons images (and all sorts of other cool stuff) is wikimedia commons. These will be categorized under specific topics, so they may or may not be good for background images. However, if your site is on a specific topic for which wikimedia commons provides visual content, this may be a good place to look also. Going to the category for large images may find you lots of unexpectedly nice stuff:





The map is abstract enough that it could work with a lot of subjects. The ducks are more problematic, of course - but I can certainly see how a number of these old fashioned prints, nicely cropped and pulled up in random fashion (more on this later) could work with all sorts of subjects.

 (Tip:  Whatever you do as you are searching for visual material, do not use google or yahoo image search in their default state - but only with the correct licensing filters. You really have no way of knowing if the images you find are available for free usage otherwise. And there is certainly enough good stuff out there that you can use without having to resort to shady means.  ;-) 

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

starting out with some design stuff now :-): background images and screen sizes




OK! Almost ready for some design fun! 

I figured that it might be nice to let you guyz start out with something that should be quite enjoyable - adding a background to your site. But before we get there, I would still like to remind you of something which is actually quite obvious: Not everyone has the same computer set-up and so everyone sees things differently, depending upon how large their screen is. There is a top left bias in all of this, which means that everyone, always, sees the top left corner of the browser. All else that people see varies from resolution to resolution.


The screenshot above shows you how this site is seen at a 1024x768 screen resolution. As the site's content slides left, one of my pixelmen is actually placing himself very nicely behind the header, so I am quite pleased about that. True, folk can no longer see the big pink fellow to the right but since the image that I have is more like an abstract backdrop I can live with that.

 (Tip:  A very nice freeware application that lets you test out screen sizes is Sizer (PC only). I would advise you to make use of it and often check to see how your site looks to others.  ) 

The widest screen resolution which we need to take into account is 1920x1080 or if we think lengthwise 1600x1200. However, this is not as wide or as high as it gets, Wikipedia gives a very nice list going all the way from the smallest to the largest sizes.

Some older websites are designed flush left, but nowadays for the largest part we tend to favor a centered layout. As the screen gets smaller all content will slide to the left of the screen.

 Upshot:  Your background image needs to take all of this into account. It is of no use whatsoever having a gorgeous image where the main elements are on the bottom right since there is no way that someone with a 1024 x 768 display setting is going to be able to see the stuff. It is equally bad to have full background images that are smaller than 1920 x 1200 (1920x1080 - 1600x1200) since anything smaller will result in really nasty patches when viewed on a large screen. So, unless you are tiling a small image (more on this later), always make sure that your full screen background image is larger than 1920x1200 and that the nice parts of the image are located towards the top and left. That way everyone, small and large, will be equally happy!  :-) 

 Update:  While all info above is still valid for most purposes, there is also an update on making resizeable full background images, which you can read here:
http://easypeasydesign.blogspot.com/2011/03/can-you-resize-background-image-on-non.html

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