3.19.2011

"handwritten" fonts

I was going over my student's homework blogs and there seem to be quite a few of them who want to use handwritten fonts for post titles and headers. (Quite a few available on the blogspot template editor - ouch!).

Most graphic designers will probably agree that for the largest part handwritten fonts are problematic design elements. And the reason is pretty much right there in the word "handwritten". Well let's face it, they are not, are they? They are artificial constructions which try to imitate something that is quite impossible to imitate since it is so organically individuated.

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:
______________________________

And now I will make this quite big, so that it really stands out from the body text.
______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

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

3.18.2011

embedding a flash file (swf) into a blog post

You might need this for all sorts of things, but especially for stuff like flash based photo galleries. All explained beautifully, right here:
http://www.aleosoft.com/flashtutorial_blogger.html

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

well done Onur!

One of my students has just thrilled me by designing a really cool, minimalist homework blog. Only one post and one page so far, but already there are beautiful details, like the tiny bit of black highlighted text on the page, the typography/colors of the header, (a great color scheme on the whole site, by the way), a gorgeous favicon at the top...

I am well impressed:
http://onuroral.blogspot.com/p/about-this-blog.html
:-D

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

structure: having the best of both worlds?

Ahumm... All these pull-down menus and so forth... Very nice and everything, but let's face it, what use can they possibly be on a blogspot site unless you can have an infinite number of pages and nested sub-pages?

A regular website and a blog both have their shortcomings but also their advantages. Could there be a way to combine the advantages and minimize the shortcomings?

3.17.2011

all kinds of menus

You can find some very nice custom menus at http://bloggerhowtotips.blogspot.com/






























The image above shows you a selection from the available styles which you can generate on the site. On the left are vertical HTML/CSS menus and on the right are drop down vertical menus. Both pages give you the codes for all of the different design styles and also tell you exactly how to use them, which incidentally is through yet another HTML/CSS gadget - love these things!















And then there is also a smoothly animated multilevel drop down menu; again you can obtain the code for this from here, and again, this too works through the HTML/CSS gadget.

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

HTML codes for the ASCII

or simply put, how to get any symbol, letter etc. to show up properly on your website.

Writing simple blocks of text into your site is no problem at all, but what happens if you want to use symbols or letters such as; ¢, ¥, ¼, æ...

On some platforms such as Blogspot, you are in luck, you can open your character map or search the web for the symbol you want to use (which is a huge waste of time) copy/paste it and there it is. However you won't be so lucky if you decide to hard-code your website which will result in these symbols appearing jumbled up when you put them online. So here is the solution for both coders and those who don't want to waste precious time looking up the symbol.


Look up the symbol you want and copy either the html-name or html-number (both works) and paste it into your code to wherever you want it to be.

This next part is for those who will use it on Blogspot: While you are on the "New Post" or "Edit Post" Screen, where you have the title box and the text box, there are 2 options towards the top-right end of the text box; originally you always have Compose selected. Whenever you are going to paste one of these codes, select Edit HTML and paste it, then return to Compose and it should be there. You can keep on writing normally back in Compose and switch back and forth whenever you want.

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

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.

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

3.16.2011

bitmap/pixel fonts

http://www.dafont.com/bitmap.php

Now that we are beginning to speak about image based menu items - the above link will take you to one of the best collections of free bitmap fonts online.

 (Note:  Since bitmap fonts are based upon an exact pixel count they need to be used at the exact specified size which you will see all the way to the right on the red bar above the font preview. (Typographic point sizes correspond to the pixel size at 72 ppi screen resolution by the way). So, be sure to have the right size - anything less or more will make the font break up in really ugly ways.  ) 

 (Also:  Remember to set the anti-aliasing value to "none" from the pull down menu on the font palette, as shown in the screenshot below, since this value is what will give you the crystal clear sharpness that you want from a bitmap font.   ) 



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

image based menus

Look on the left column right here on this site and you will see that the pages menu now has image buttons with rollovers instead of just plain text ones. This was done with a code generated here:
So easy it is almost ridiculous!

































Once you have the code, go to Design and add an HTML/CSS gadget to one of your columns, paste the code, save - and you are done!  (Tip:  Needless to say, you can make more than just 3 buttons. The generator gives you 5 to begin with anyway. However if you have even more than that, simply copy paste the lines from the script and change the image and destination URLs in the added lines.  

Some other nice stuff too on this site by the way, such as a pull down menu generator, a pop-up window maker, a story generator - gotta love this one! :-), lots of image effects, text effects, and and...

http://javascript.internet.com/

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

3.15.2011

for slideshows...



Absolutely fabulous!

All you need to do is go to http://web.photodex.com/ and create a free account. This is an online version of the famous proshow slideshow application. These people are simply the very best in their field, so naturally what they have now developed for the web stands head and shoulders above all the competition as well. There are beautiful themes to choose from (I didn't even touch the one which I used, it was that nice to begin with), but you can customize them as well. Add music from your computer or their library. Again, I was lazy, used their music...

Once your show is done, you can get the embed code and paste it straight into the HTML editor of your post here. (Or wherever else you are creating your site, of course). And another neat thing, which I just discovered is that if you edit the show at photodex it will automatically refresh itself to the new version wherever you have linked it to, since the original URL doesn't change.

 (Tip:  The show is rendered 640 pixels wide and unless you post column is wide enough for it, it will hang off the side if you do not resize it properly. Simply resize by changing the values from inside the code, just like you do with images.  ) 

A free account has its limitations, obviously - such as that you can only use 15 photos per slideshow, your videos (yes! you can in fact embed videos into this!) have to be below a certain length, and your upload space is limited to 100MBs in total. And also I do not think that you can have HD.

I splurged and got a yearly plus account since I know that this is something that I will probably make quite a bit of usage of on my many blogs, but to start out with the free plan certainly gives you enough to play with as well.

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

content = design: fireworks!

One of your classmates just sent me the link to her blog: From what I could gather from her mindmap she is thinking about designing a site on all the things that inspire her in life. Fair enough, I guess... But then in her very next post she is talking about a specific thing which inspires her - fireworks!

So, here is the thing: If you don't know her at all (which, obviously most of her readers will not), what would you rather read about? Fireworks in particular, or a medley of all the things which inspire her? My choice would be fireworks. A fascinating subject where she can go in-depth - and that is what makes the big difference here:


"Fireworks at Swindon", courtesy of Stephen Gunby

As she is building the site she will also be learning - which is at least half the fun when creating a website. There is a whole history there for one thing. Local customs which I am sure must have developed around fireworks all around the world, fairy tales and myths which they have probably brought about. There would have to be writers and artists and musicians who featured them in their work. Not to even mention the whole technological aspect. Huge big industry, after all. Must some active technologically there.

So, she has a subject there which would allow her to develop a specialized site, which people who have a specific interest in this subject would bookmark and put on their RSS feeds in a nano-second. She would get re-blogged by them and even more people would come to read and see what she has to say. It is a subject which she can take as far as she wishes, there is certainly enough material there for that. It will also involve doing research and rooting out information online, all the good stuff which I think of as good web design to begin with: In other words, she will be able to focus.

And the importance of focus in terms of design is that if you have a focused subject - such as fireworks - then you also have a great opportunity to focus your visual elements. Good design is about visual continuity. It is about creating a visual language where every component of your structure goes with everything else. Focused content will bring this about almost naturally. Images of fireworks, videos of fireworks, background and typography which complements them...

So, in many ways (if not in fact all-ways!), content = design. Brings about design...
YAYYY! Fireworks! Go go go!

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

3.14.2011

creating a good color scheme

A color scheme is a number of colors which are expected to work together as a unit. A scheme can be pure black and white, can be made up of gray tones, of different values of one hue, or it could be made up of many different hues.

A widely held (and hugely mistaken) assumption is that this is a random thing, based upon personal preferences. In truth there are physical laws which determine the harmonic relationships between hues and these involve the color wheel:




The above screenshots come from one of the greatest online applications around, the Color Scheme Designer, which lets you work with the color wheel - for free!

There are three tabs on this: The first one shows you the full spectrum of hues and lets you make your initial choice, based upon the relationships between the hues. These are monochromatic, complimentary, triadic, tetradic, analogic and accented analogic (which is actually just a variant of complimentary). Of these, my advise to all beginners is to use pure analogic relationships. This works with hues which are closely grouped upon the wheel and this set up will usually give you the easiest results to work with. 

The second tab lets you adjust the contrast and the saturation and brightness values of your scheme. Again, if you are a novice stay away from high contrasts for now and go with saturation and lightness values only - trust me, much much easier...

The third tab will then let you copy paste all of the hex codes of your colors into an image editor or into a CSS/HTML code. And if you look on the top menu there is even an export option which will create different things like a photoshop palette or a CSS list.

 (Suggestion:  Color wheel apps for designers (which, in the end, do the exact same job) usually cost a fortune whereas this hugely useful service is provided for free. So, why not make a donation also?   ;-) 
http://colorschemedesigner.com/

And then, another cool place for color is colorlovers, a social networking community revolving around color and patterns. Here you can download/upload color schemes and patterns to share with others. Very nice too! 

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

adding a favicon to your site








A favicon is the tiny image which sits on the tab of the browser, right next to the name of your site. At blogspot you will get the fat orange "B" as a default, and wordpress will give you their blue "W". At other places, if there is no designated favicon, you will get a nasty little blank page icon. Not very cool at all! Somehow gives an impression that you don't really care about your site very much?

In order to have a favicon you need an .ico file and also a place which will host it for you. http://www.iconj.com/ lets you convert an uploaded image into an .ico file and then also hosts it for you - for free. Simply grab the url which you get once the conversion has been done, go to the HTML editor and place it directly above the line which says <b:skin><![CDATA[/*, underneath the <head> tag.

If you want your favicon to be a shape (such as the pink circle on this blog), you need to prepare a transparent png file first. I wouldn't get too fancy by the way, just stick to very simple shapes like circles, triangles or squares. Remember that this thing will be tiny and all detail will get lost. However, iconj seems to have a few nice extra bits and bobs such as making favicons out of photos, pixelations etc. I haven't checked these out but they may work very well, so try them out also of course.

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

3.13.2011

huge big GUI elements pack

There are some really nice people out there: All WebAlys asks of you is that you link back to the page from where you got these elements. This is a mega pack, containing icons, various types of GUI components, and a styles library for Adobe Illustrator.


The download page is here:
http://www.webalys.com/design-interface-application-framework.php

 (Important:  Once again, remember that if you use any of this the author will have to be credited through a link-back to the above URL.  ) 

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

online tutorials

Although I will of course try and show you as much as I know, you should not be limited to what I have to say but look at other sites for tips and tutorials also. There are quite a few good ones around, and here is a small selection:

Tripwire magazine's 160+ Webdesign Tutorials focuses on creating visual elements. There are a number of photoshop based tutorials which take you through the phases of creating things like buttons, dividers, menus etc. The page also takes you to even more photoshop tutorials on other sites. All very nicely explained, mostly with screenshots. Only glitsch is that you really do need to know some design fundamentals before you would know how/where to implement what they show you. However, in the upcoming weeks design basics is precisely what our class will focus upon and after that you will be able to get a lot of mileage out of these.

WebDesign Tutorials actually gives you much more than web design tutorials, it is a comprehensive site with tutorials covering a huge range of subjects from Maya 3D to Adobe InDesign, all of it going by name of software and mostly using videos to convey the content. Their HTML/CSS web tutorials can be found under the software name Dreamweaver. All in all, a really cool tutorial site!

quackit and W3Schools Online both work along the same principle, a try-it-yourself editor. W3 does give you a direct link for it on the home page, whereas on quackit the sub pages will take you there. As an example the CSS properties will lead you to the editor when you click on any of the properties. And on W3Schools things work very much the same way. Both are very user friendly and helpful domains which I use also.

Design Your Own Web is the tutorial site for a free HTML/CSS editor called Nvu, which you can download from their site as well.

2CreateAWebSite and How-to-Build-Websites both cover a whole range of topics for beginners, including tips on how to increase site traffic, basic structure, coding etc. Both quite useful.

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

lynda.com


lynda.com is one of the best (if not in fact the very best) software tutorial domains online. Lynda has been around for a very long time, is probably one of the pioneers of online software training. I learnt a lot of things hanging around Lynda many years ago. Today her site looks better than ever, with video tutorials covering every imaginable subject from 3D software to musical production to CSS. Although you can watch some of the videos for free, nowadays there is a monthly paid membership plan which gives you access to all of the content. Money well spent I would say.

So, this is one place that I would advise all of you to bookmark and take advantage of - not necessarily for this class maybe, but for software education in general. Especially the designers amongst you! And yes, even if it means that you pay a little for her services! She really is absolutely wonderful.

a very nice set of buttons


For those of you who want to build a website from scratch, these are crisp and clean vector files which you can download in Illustrator format, as a JPEG or as an SVG file. And bloggers might also make good usage of them inside posts or even with custom created widgets on the sidebar. 

So, go get them while they are hot: http://www.gosquared.com/liquidicity/archives/96

free vector editor

Speaking of free software, this seems very nice also. An opesourced vector editor called inkscape: http://inkscape.org/


Not an online application by the way, has to be downloaded and installed. But still definitely worth checking out!

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

free online image editors

You may or may not have a state of the art image editor such as photoshop installed on your computer. While I cannot say that the alternatives will do just as well, the following may still work as good stop gaps, especially for basic tasks.


Pixlr claims to be the most sophisticated online image editor and it certainly lets you do a lot with your images, including working with layer masks and so on. You can also import images from flickr, picasa and facebook,  edit them and save them back to their original locations. Very nice!


The same also goes for FotoFlexer, again you can import images from various web domains and then play with a lot of effects, as well as add type and shapes to them.


Sumo (my favorite after pixlr) is a free online image editor with some very nice plugins and a very easy to learn interface.


Phoenix is less sophisticated as far as plugins go however the company which puts out this image editor also has an online procedural filter creator which allows you to create some very impressive filters of your own. One of the really cool online image manipulators is Lunapic, which lets you also add animations to still images which you can then save onto your harddrive.

And finally, although not online applications, gimp and paint.net are completely free and very close contenders to costly image editors such as photoshop.

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