Online Web Design Degree

Monday, 14 March 2011

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.

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

Sunday, 13 March 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!

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

Saturday, 12 March 2011

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.

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