It’s been a while since I provided an update to this blog. I’d like to share some work that I’ve done for my clients and go over some of the basic technologies.

1. Xtown.ca

Xtown is an extreme sports facility located in Quebec, and they have an excellent indoor track for motocross, ATVs and more. For Xtown we’ve provided web design work, as well as PHP/MySQL programming work in order to allow them to manage members, bookings and payments on the website through the front end and back end. It is an intricate system which is fully custom developed just for this business!

Visit Xtown.ca for Extreme Sports, Motocross, ATV, SNOX and more in Quebec!

2. BrockSmeaton.com

Brock’s website needed a re-design, so we got to it to simplify and clean up the site. The menus were re-designed, and we switched to a side navigation with fixed layers on top and side for a frame-like look, but without the frames. We all know that frames are not good for SEO, right? Also we nixed the landing page, which has been a long tradition among realtor websites (and other industries) to make a grand first impression. Instead we have an index page that is part of the regular design template, with a cool javascript slideshow going through it.

Visit Brocksmeaton.com for West Vancouver Real Estate listings!

3. Alta Pacific Logo and Branding

Alta Pacific - Investing in Canadian Mortgages

Our newest clients, Alta Pacific Mortgage Investment Corporation, wanted a brand new logo as well as business cards designed for their new business. They provide impeccable services in investing your money into mortgage securities, which is a much more profitable, safe, and viable investment in these volatile markets we’ve seen recently. We also did a brochure for the company as well.

Alta Pacific Brochure - Investing in Canadian Mortgages

Visit Alta Pacific’s website for more information on Investing in Canadian Mortgages. We have not designed their website yet, but we hope to do that soon as the company grows!

1. You can buy a nice high-rise condo in downtown Vancouver, mortgage free.
2. You can buy 3 Lamborghinis with that (depending on model and price, but I found one brand new at 133,xxx GPB).
   
3. At the current stock value, you can get over 1,500 shares of Google. (Right now, $515.49)
   
4. Or. You can get this ugly ass logo.
   

Look at it. That’s the official logo for the London 2012 Olympic Games, as revealed on Monday. Since its revelation, here are the results :

• 50,000+ have signed an online petition to scrap it.
• It’s been condemned as “hideous” by the public and politicians, and even the Mayer of London Ken Livingstone said he wouldn’t have paid for such a thing.
• Several members of the British Parliament signed a motion to ditch the design.
• To add, the campaign video contained too much flashing of light, which has already caused 23 reported case of seizures (epileptic).

Yes, $800,000 or so in Canadian dollars can go quite a far way…

Right now, as you can see in the other sections of my website, I’m re-designing everything on my site. It will be a much cooler site that is easier for me to update later. I will reveal and explain the CSS code and what not later as a tutorial.

This new website incorporates a lot of CSS tricks I learned through Wordpress, and will be a hell of a lot better than the last design which took me very short time.

I was surprised at the poor results Google returned when I searched for “difference between vector and bitmap” on Google.com. Every single first-page results were either not clear enough, lacked the proper visuals for explanation, or were too complicated (such as discussing the file size and performance ratio for vector and bitmap files). So, for once and for all, I will define on the internet, what the difference between vector and bitmap images are.

1. Bitmap Images (also known as Raster Images)

Bitmaps are the more common type of images that you see on the web. Bitmaps are a map of bits, literally. It defines the color of each dot as it goes across and down a photo.

Red Red Red Red Green Green Green Red
Red Red Red Red Blue Blue Blue Red
Red Red Red Red Green Blue Green Red

Would produce an image like this (I put the white lines in just so you can see properly, but they don’t actually exist) :

This is perfectly fine for computer monitors because they define the screen’s display by pixels, so each of these cells constitute 1 pixel. Screen resolution is usually 72~96 DPI (dots per inch).

Here’s what happens when you enlarge a bitmap image. Because they are simply dots after dots in a sequence, the dots become visible and the image blurs.

2. Vector Graphics

Vector graphics do not rely on dots, but instead, rely on the actual math of it. This is basically how a Vector graphic file is written, in plain english :

Anchor 00001 starts at point 100 from top, 100 from left. This anchor has no curvature.
Anchor 00002 connects to Anchor 00001, and is located at 50 from top, and 200 from left, and has a curvature of 50, in a 0 degree angle.
Anchor 00003 connects to Anchor 00002 and 00001, and is located at 100 from top and 280 from left, and has no curvature.
Anchors 00001~00003 constitute a filled shape aaa and the fill color is red. It has no stroke.

This will show you something similar to this (once again note that the blue lines don’t exist - they are there to show you the angles and locations etc) :

So, as you can imagine, when Vector files are enlarged, they still look just as clear and crisp. There are no dots that emulate the shape - the shape is physically defined!!!

How should they be used?

Bitmap and Vector have their place. Vector takes longer to calculate and process to show on the screen, and is more complicated to make. Also, note that due to the nature of the images, real photos cannot be vectorized whatsoever. Because of the complexity of the image, vectorizing it would only result in a bunch of dots after dots - which is in essence, a bitmap image anyhow. Vector graphics are used for simpler shapes, or simplified photos (like that daisy above) and is great for logos. Also, all text for print should be vector, so that they do not show jagged edges when they are printed. In short, anything that needs to be printed (which has a much higher resolution than the computer screen) MUST be in vector format (with the exception, of course, of the embedded photos and images, which should be at 300 DPI for optimal results).

Adobe Illustrator is what I use to generate vector graphics (note this tutorial using Illustrator’s live trace feature). The file formats can be AI, PDF, EPS. My recommendation is PDFs (make sure you turn on the “Preserve Illustrator Editability” when you save it).

Bitmap is used for photograhpy, and the web. To show things on the internet, or on computers, things need to be in bitmap. Even on print, the photos are still in bitmap because it’s simply impossible to vectorize a real photo without quality loss. Any major file formats used on the internet (jpg, gif, png) are all bitmap files, and my primary tool for editing these is Adobe Photoshop.

So, your client wants to have a logo or a design made of a flower. Obviously, you do not want to actually put a picture of a flower as the logo - that’s just unprofessional, and the resolution will limit the ability for larger scale prints without loss of quality.

What you need is a fully vectorized version of a flower - but how do we do that without actually drawing it out? Well, we all know about the trace tool. But Adobe Illustrator CS2 has the best live-trace tool ever made in my opinion, and I’ve used it to successfully create an illustration of a flower within minutes. Here’s how you do it.

First, you need a photo of a flower to start with. If you can find one without a background, it’s even better. If not, you’ll have to cut it out using Photoshop first. Here’s my pick - a red rose.

Now, using Photoshop, let’s cut out the white background to make it all transparent. Use the Magic Erasor tool for this one.

In this photo, note the black spec at the bottom-right corner - I used the marquee tool to select that edge and cleared those extra black pixels. Save this as a Photoshop file to preserve the transparency and the layer factor.

(more…)