Smashing Magazine just listed a ton of great logo design tutorials.  This is great timing because there are a couple of different logos I need to design and I really don't have much experience with that sort of thing.

I'm probably going to spend the weekend directly following the instructions from the tutorials that look particularly interesting.  As you can see, I already tried the vectortuts one out.  Now I know what to do if some eco-friendly company comes knocking on my door.

The point here is to pick up some tips and tricks.  With this tutorial I learned about the split, union and intersect path tools in fireworks (or illustrator).

Once I get the hang of things, I'll make a logo or two for myself.  If I come up with anything good, I'm going to post a tutorial on this blog.

Here we go...

Vector tuts+ is now one of my favorite sites.  They have hundreds of awesome design tutorials.  I've been thinking about taking a graphic design class in Salt Lake, but this site seems even better than a class.

I just ran through this tutorial and learned how to draw a cup of coffee.  One thing I like about the styles of these past two tutorials is that they look realistic enough that it's obvious what I drew, but they also have a fun web 2.0 feel.

I was planning on going through the logo tutorials from the Smashing Magazine post, but I might just keep searching Vector tuts+.

Stay tuned

I'm horribly off topic this weekend.  I meant to work on my logo design skills but different things kept drawing my attention.  Despite my lack of focus, I'm pretty pleased with what this design weekend turned into.

I just made a website mockup for a fictional company based in park city (click here to see it).  This is inspired by some websites I've seen recently.  I've never made a site based entirely off a vector drawing but I think it's pretty sweet.  Kinda cartoony but still professional enough to keep people from dismissing you.

Anyway, check out the design.  I still need a lot of work on my vector skills, but this is the first step.  I'd love to hear any ideas on how I could improve this.

For those of you in Park City, this is based off the Sunrise run with Jupiter in the background.  I ended up changing things around enough that it looks nothing like the real thing now.  Maybe I should add a couple people hiking Jupe.

One of the open thread questions on Lifehacker this week asked how to begin learning "web development".  I pretty much agree with all the answers, but I'm going to explain in a little more detail how I would go about learning everything I now know about web development.

The #1 thing that I think is most important when learning any new topic is to use projects to teach concepts.  I'm terrible at reading through a book and retaining any information, but if I walk through a tutorial (which I did a lot of this weekend) I normally learn concepts instead of facts.  That way I'll actually remember everything.

With that said, here's a list of projects I'd make myself do in an order that would logically build on itself:

Client-side Projects

There's a big difference between writing code that runs on your server and code that runs on a clients machine.  The main different is that client-side code doesn't require you to have your own development environment built.  I think you should learn a ton of client-side stuff first because it's so much easier to get started.  Also, many people don't understand the difference between javascript running on a browser and PHP running on a server.  This process will help make it obvious.

HTML Project - Obviously, HTML is a nice place to start.  The project needs to cover tables, divs, spans, anchors, paragraphs, linebreaks and images (maybe I missed a couple, but you get the idea).  I'd probably try to make a web site where the home page is a calendar view of my week and have each event on the calendar link to a page with more information.

CSS Project - I think there are two steps to learning CSS.  One is learning how it can style pages, and another is learning about using CSS for layouts.  With this project, I'd just take the calendar I already made but add background-colors, different font sizes, etc using CSS.  I'll save the layouts for later.

Graphic Design Project - I don't think there's any point in being a good coder unless you can use images well enough to make a decent looking web page.  I'd take the calendar I made and add nice gradient background images using Fireworks/Illustrator and CSS.

Basic Javascript Project - I'd add to the calendar using some simple javascript.  It doesn't matter what it does, but I'd probably add a "more info" link on the event details page that causes more information to show on the page.  This is very simple but it's important  to understand that javascript loads with the page and runs on the clients computer.

Server-side Projects

Now it's time to get into the hard stuff.  The first step is setting up PHP, Apache and MySQL (or ASP, JSP, ColdFusion, whatever).  It's hard to make a project out of this, but downloading the most recent version of WAMP is pretty straight forward.

PHP Project - Let's make the calendar aware of the current date.  Take the existing web page we made but have it start by showing the current day and always show the next seven.  This involves learning the date and strtotime functions which are key.  It's also a good introduction to loops.

MySQL Project - This calendar is about to get good.  Use MySQL to store the events in the calendar.  PHP should call a MySQL function to get the events for the next 7 days which will then be displayed.  You'd also want to add a page to add new events and edit/delete existing ones.

Advanced Projects

At this point we have a working calendar.  There's actually not much more to it, but we need to add some features to make the user interface a little bit nicer.

jQuery Project - Javascript is basically useless without a nice library like jQuery.  I'd use jQuery to add a date picker so you don't have to just look at the current week.  I'd also take the old javascript animations and make them smoother.

CSS Project - This calendar needs to have a month view and a day view.  This is a great time to learn CSS layouts.  I'd implement all three views (day, week, month) using divs and CSS instead of tables.  The jQuery date picker from before should include a way to decide which view you want. 

AJAX (with jQuery) Project - You don't want to have to reload a page to do everything.  Use jQuery to allow adding events by clicking on a time on the calendar.  This should pop up a box where you can enter details and then the event gets added using jQuery AJAX functions.

MySQL Project - The existing database functionality hasn't taught anything about linking data.  Add the ability to create multiple calendars and link events to a certain calendar.  There's also some UI work to be done here, but the SQL lesson is what's important.

Well that's it.  After completing those projects, you'd have a calendar that has basically every important feature that gCal or any other calendar App has.  These projects would take a while to complete on your own, but I think you could realistically teach yourself to be a pretty decent developer by building this one calendar application.  That's how I'd do it if I had to learn everything all over again.

I'm passively thinking about turning this post into a series of tutorials on how to do all this stuff.  Let me know if you think this would help anyone out.