Web Based Workflow: Tale of The $0 Studio!
{ February 19th, 2008 }
In the past few years we’ve seen an explosion of free, web and open source alternatives to popular, often expensive, design programs. I recently raided my del.icio.us to round up all the $0 overhead design resources that I use on a daily basis. With this workflow it’s all pure profit!
Before I begin, this list is not meant to be comprehensive, it’s meant to show you my workflow and how it makes me money by saving me boatloads on software. For a more comprehensive list of all the things out there you may want to try this post…
ONLINE WEB DESIGN
1. Wordpress Theme Generators
One Request I get from a lot of clients is for custom Wordpress Templates. TemplatR and Yvo Schaap’s Wordpress Theme Generator both offer quick WYSIWYG options for designing themes. Depending on your skill level you can create themes from the very basic to the very complex. I tend to use these sites for the basic skeleton of a good Wordpress Theme. Since I’m fairly knowledgeable of xml, I’ll go in and tweak my layouts on the client’s server.
These fantastic tools have helped me build a very elaborate portfolio of Wordpress ready ’sketches’ in a very short period of time. They’ve also helped me understand the inner workings of Wordpress as I can see how each produces themes differently.
2. Rounded Corners
One question every designer this millennium has been asked is “Can you put rounded corners on my blog?” You might already know how to do that using CSS but in the case that you don’t, try some of the following links: Spiffycorners, Cornershop, Roundedcornr, and Curvycorners. While there are plenty more sites that offer similar tools, these are the four that I use most.
3. HTML Templates
Why design from scratch when you can draw inspiration from the work of others? As long as you credit the creator, there’s nothing wrong with using web templates and modifying them. The problem most people have is when someone doesn’t chage a thing and tries to pass a design as their own work. That said, there is a huge movement of ‘open source web designers’ offering up their code to the masses. Among them TemplateWorld, Open Web Design, and Open Source Web Design are my favorites. Most of these designs can usually be easily ported over to your favorite CMS with a little work and coding on your part.
4. Validation
Once you’ve finished that new web-created website you’ll need to validate it to make sure your code is well formated and browser universal. Although I tend to use this extension for Firefox, if you’re going to validate online use Validator.W3.Org or some of these other W3 validation tools.
WEB BASED GRAPHIC DESIGN TOOLS
1. Fonts
For the most part I use two sites solely for my font needs: Dafont and WhatThefont.
2. Vectors/Illustrations
Sites like Vecteezy and VectorStock offer hundreds of free vector images for your graphic design needs. Got a picture or logo you need converted into a vector? Use the entirely awesome VectorMagic! I couldn’t find any useful online Vector applications but these open source alternatives are free alternatives to Adobe Illustrator or Corel Draw. Try out Xara, Inkscape and Skencil. The platform based Synfig might be worth looking at.
3. Stock Photography
Ofcourse every design studio needs a good library of stock photography. Personally I use FlickR for just about everything, making sure I click “Advanced Search” and selecting the right options to find photographers who are graciously freeing up their work to the public. If I do use work from Flickr, I always send the author a quick note letting them know where it’s being used and for what purpose.
There are literally hundreds of photo-sharing websites these days. Of them, Stock Exchange, Dreamstime,Stockvault and ImageAfter the ones I tend to frequent for free work. Of course, there are plenty more sites when you’re ready to pay but for now we’re pretending we don’t have a dime to spend. NOTE: when using these sites make sure that you pay attention to Attribution and CC Licensing. Just because it’s free for you to use in some cases doesn’t mean it’s free in ALL cases! When in doubt, consult the owner directly.
4. Stock Icons
My favorite tools for stock Icons are FamFamFam, FreeIconsWeb, IconFactory and PixelGirl
![]()
ONLINE MOTION GRAPHICS, AUDIO, ANIMATION and VIDEO
1. Java
If you read my blog on any kind of regular basis you’ll know that Proce55ing is my favorite tool for visual and interactive programming. You can create anything in proce55ing from Web Apps to 3d Animation, to interactive media. All of your processing sketches can also be exported as Java applets and embedded into any web page. Take a look at some of the amazing things you can do in in Processing here. Read more about the project here.
2. Web Based Flash Resources
There aren’t really any good web based alternatives to Adobe Flash but if you’re going for rich media development I would have to reccomend Open Laszlo. There’s also a number of sites that give a away FLV files like FlashVillage and FlashMo.
3. Audio
No one’s come up with the web equivalent of Digidesign’s ProTools or Apple’s Logic Pro yet but there are some great free, open source options. My favorite (as a longtime Protools HD user) is the impeccable Ardour. If you don’t need the complex features of a professional application go with the more basic open source solutions Audacity or Wavosaur. All Macs come with Garageband so you’re somewhat covered there.
4. Web Based Video Editing
My web based solution for editing video is JumpCut. The desktop based open source alternative I use is Cinelerra. Both are good for editing client footage or creating quick video spots for a page.
5. Animation
Synfig and Proce55ing can both be used to achieve Flash-like vector animation or 3D Modeling.
EDITING ON THE WEB
1. Online Image Editors
Fauxto is a web image editor that attempts to rival Gimp and Photoshop in it’s complexity and functionality. It’s out of control. Picnik is the one I actually use the most because it’s quick and integrates well with Flickr. Ones that I haven’t tried but keep hearing about are Pxn8 and SplashUp.
2. Online HTML Editor
Occasionally you’ll want to edit HTML online as well. I like FCK Editor, Squarefree and W3 Schools
FREE WEB STORAGE
1. Storing Images Online
One thing that you may be wondering is where I store all the files that I work with online. Images I usually store on Flickr where I deeplink them (this is apparently against the Flickr/Yahoo TOS so don’t get caught!). I store everything on Flickr from photos, to logos, banners etc. It’s like an online harddrive for me. Another great storage solution is box.net which quite literally aims to be your online hard drive.
2. Free Web Hosting
Occasionally (not often) I’ll used free web servers that allow FTP access to host temporary projects or for sharing downloads. There aren’t many good ones but I swear by NetFirms. Freehostia, Div Share and Bravenet come highly recommended.
3. Sharing Large Files Online
I use MediaShare for all my large file storing and sharing. Hands down. Nothing else has come close to impressing me. If it’s too big for e-mail, MediaShare it. They even have password protection options allowing every file you’ve uploaded to have different permissions! Their facebook app is pretty slick as well.
WEB BASED INVOICING AND PROJECT MANAGEMENT
1. Invoicing
BlinkSale is my online invoice application of choice. I’ve used it to bill for thousands of dollars. Hint: to get around paying for the upgrade, select the option to print your invoice and save it as a PDF to your desktop. Then print your PDF file normally! Of course after I used that trick a few times and started making real money I bought a subscription.
2. Project Management
The 400 Pound Gorillas of the project management world are definitely the people at 37Signals! From garage start-ups to multi-million dollar corporations, people love their services and I’m one of them. Of their solutions Basecamp and Campfire are the most useful for me.
3. Spreadsheets, Documentation and Notetaking
Whenever I need to write anything down for a project, if I’m not already using Basecamp, I’m using GoogleDocs. There are other solutions for this, but to try to minimize the growing list of sites I have to log in and out of, this is my choice solution.
There you have it. This is what I started with and I was able to pocket a few thousand dollars before I had to actually buy some real software. The truth is, it takes next to nothing these days to become a creative entrepreneur, all it takes is motivation!



Jon Gos is a web developer and social entrepreneur.

May 8th, 2008 at 5:43 am
fantastic collection of resources, thanks for sharing!
May 8th, 2008 at 5:45 am
a few more for the invoicing section: http://www.lessaccounting.com and for those of us in the UK http://www.freeagentcentral.co.uk
May 8th, 2008 at 10:14 am
Thank you very much, pretty interesting resources!
May 8th, 2008 at 7:38 pm
[...] Web Based Workflow: Tale of The $0 Studio! | Gosdot (tags: design) [...]
May 11th, 2008 at 1:40 am
[...] Web Based Workflow: Tale of The $0 Studio! [...]
May 30th, 2008 at 10:57 am
[...] the growing use of web apps for professional work (see my other article “Web Based Workflow“), it’s inevitable that Adobe enter that realm. Bookmark It Hide [...]