billbailey.co.nz Articles Client side Coding Downloads Server Side Coding Tutorials Web Design Web Development | billbailey.co.nz http://www.billbailey.co.nz SEO, Affiliate Marketing, Graphic Design, Web Development Thu, 01 May 2014 11:09:06 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.23 Web Design: HTML CSS Design Contact form http://www.billbailey.co.nz/web-design-html-css-fluid-form-layout/ http://www.billbailey.co.nz/web-design-html-css-fluid-form-layout/#comments Sat, 14 Jul 2007 13:56:00 +0000 http://www.euphorish.com/2007/07/web-design-html-css-fluid-form-layout/ Well I’m back.., Its Been a hell of a rough ride down here in New Zealand lately, Storms, Floods, Tornadoes, boy that Winter season does come around Fast! some say global warming, I say WINTER!! , But all that Weather drove me indoors to a labor of love this Web and Graphic design blog, so I sat here and wondered whats a good article to write which led me to a wee problem, I need a poll so until I sort that out Ill choose for you as long as there are free give aways at the end, looks like its CSS again!

lets start with one of the most important parts of your site, the contact form or Registration form. Generally people don’t put a lot of web design effort in this area, Ive always had trouble with forms and trying to make them work and look a little different or even tie them into my web site theme design, things are getting easier now with all these cool people who give away their knowledge and code to help us all break away from those all to easy tables. You have to start thinking what do the blind hear when they go to a table Tag ridden site using their screen reader, well its going to get mighty confused, lets think about it for a second, is your form really that user friendly, probably not! “God…, the net must be a boring place with all those tables Tags to read and yes people with disabilities also want the freedom of the net power to the People.

Help the internet community and start designing for the future, CSS is the way to great end results for all parties

Below is a nice form that I designed with curved corners the box around the inner Box is showing off (also a great hack called the Box model Hack browser compatible )this can be set to show or not, every part of this form is versatile.

A great way to Change your CSS ON THE FLY with your Mozilla Browser is to use the Web Developer plug in for Mozilla firefox Download Mozilla Plugin and your tool bar will now show a new tool bar at the top above the google tool bar, “What no google tool bar.., for Mozilla Download google toolbar then click on the >> CSS OPTION >> Ctrl+ Shift+E I have included the same form also with no style sheet well a very basic one still fluid though

A text editor will now be available at the bottom of the browser pull it up with you mouse and start changing the style sheet if you break the style just refresh the page and all is back to normal when you get it how you like save the style code and paste it into your site CSS template nothing better then seeing the changes occur right there be careful though IE Browser being what it is make sure you check the changes in that browser A lot of People use it but that will change

>>> Below is a Basic CSS HTML fluid 2 Column form very little styling but still tidy

Basic CSS HTML web design form layout

XHTML Code for form above is Below 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Table-free form layout</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="basic_CSS.css" />

</head>

<body>

<h1>Example User Form</h1>

<form method="post" action="your processing script here">

<p>

<label for="name">Full Name:</label>    <input type="text" name="name" id="name" class="txt" />

  </p>

  <p>

    <label for="username">User Name:</label>

    <input type="text" name="username" id="username" class="txt" />

  </p>

  <p>

    <label for="email">Email Address:</label>

<input type="text" name="email" id="email" class="txt" />

  </p>

  <p>

    <label for="paswd0">Password:</label>

    <input type="password" name="paswd0" id="paswd0" class="txt" />

  </p>

  <p>

    <label for="paswd1">Confirm Password:</label>

<input type="password" name="paswd1" id="paswd1" class="txt" />

  </p>

  <p>

    <label for="Comments">About your self:</label>

   <textarea  cols="30" rows="8" name="Comments" id="Comments" class="txt"></textarea>

     </p>

  <p>

    <label for="level">News Letter:</label>

<select name="choice">

      <option value="Yes">Yes</option>

      <option value="No">No</option>

    </select>

  </p>

  <p>

    <input type="submit" name="btnSubmit" id="btnSubmit" value="REGISTER!" class="btn" />

  </p>

</form>

</body>

</html>

>>> Below is a the same basic form from above the XHTML has few simple lines of code but the style sheet is a little more complex I have included a zipped folder with both sets of Style sheets and XHTML pages Muck around and see where you can take it

CSS HTML web design form layout

XHTML Code for form above is Below 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Rounded Corners</title>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="CSS_form.css" />

</head>

<body>

<div id="box">

<div class="roundborder c1"></div>

<div class="roundborder c2"></div>

<div class="roundborder c3"></div>

<div class="roundborder c4"></div>

<div class="roundborder c5"></div>

<div class="roundborder c6"></div>

<div class="roundborder c7"></div>

<div class="roundborder c8"></div>

<div class="roundborder c9"></div>

<div class="roundborder content">

<h1>Example User Form</h1><form method="post" action="your processing script here">

<p>

<label for="name">Full Name:</label>

<input type="text" name="name" id="name" class="txt" />

</p>

<p>

<label for="username">User Name:</label>

<input type="text" name="username" id="username" class="txt" />

</p>

<p>

<label for="email">Email Address:</label>

<input type="text" name="email" id="email" class="txt" />

</p>

<p>

<label for="paswd0">Password:</label>

<input type="password" name="paswd0" id="paswd0" class="txt" />

</p>

<p>

<label for="paswd1">Confirm Password:</label>

<input type="password" name="paswd1" id="paswd1" class="txt" />

</p>

<p>

<label for="Comments">About your self:</label>

<textarea  cols="30" rows="8" name="Comments" id="Comments" class="txt"></textarea>

</p>

<p>

<label for="level">News Letter:</label>

<select name="choice">

<option value="Yes">Yes</option>

<option value="No">No</option>

</select>

</p>

<p>

<input type="submit" name="btnSubmit" id="btnSubmit" value="REGISTER NOW!" class="btn" />

</p>

</form></div>

<div class="roundborder c9"></div>

<div class="roundborder c8"></div>

<div class="roundborder c7"></div>

<div class="roundborder c6"></div>

<div class="roundborder c5"></div>

<div class="roundborder c4"></div>

<div class="roundborder c3"></div>

<div class="roundborder c2"></div>

<div class="roundborder c1"></div>

</div>

</body>

</html>

So without Making this page any longer here is that zipped folder I promised with the two forms and accompanying Style code sheets, I hope somebody actually downloads this It will save a lot of work!

>> Download zip file Examples for XHTML Forms with CSS style sheets

I will add more to this Post if you need some Help to understand things leave a comment

Regards Admin

]]> http://www.billbailey.co.nz/web-design-html-css-fluid-form-layout/feed/ 1 HTML & CSS Article Overview http://www.billbailey.co.nz/html-css-article-overview-lay-out/ http://www.billbailey.co.nz/html-css-article-overview-lay-out/#comments Mon, 02 Jul 2007 13:44:54 +0000 http://www.euphorish.com/2007/07/css-fluid-3-colomb-page-lay-out/ How I Started CSSI remember the day the CSS seed was planted by My Good friend Al Hall from Earthfirst, of whom I regard Highly in the web world, said…. “Bill, CSS is the way!” and I thought at the time what the hell does CSS mean, 5 years later who doesn’t Know about CSS, the benefits have started to Stack up in its favor in many ways .CSS has gone on to be of real interest to me and I have now moved on to a point where I have several templates that can be used all the time. I will Continue to add a resource of free Code at the end of this article.So the Journey began, and I soon realized that XHTML was what I need to learn to keep the code as clean as possible and web standards applicable, only then I was able to to get my Teeth into the true CSS learning process and start future proofing my sitesHTML OR XHTML ?

The problem With HTML is that presentational elements will be removed in future specifications and so will not be able to be used under the STRICT DOCTYPE such as HTML 4.01 strict or the XHTML 1.0 strict. Don’t be alarmed though your page will still be valid, if you use a transitional DOCTYPE, although it is a good idea to start making the change away from these deprecated presentation elements. Another major drawback is all the tags involved just to get the font type and color right throughout the page and then add in the table tags UUUGGHH messy and boring, and what happens when you want to change the font style you have to go thru some mammoth effort, say good by to any plans you had for the next 2 days. So its XHTML all the way and it is now time to move on.

For the non believers this example below is a full XHTML / CSS WEB PAGE as is this site your now using

This New Plymouth accommodation site Below is controlled thru CSS


CSS XHTML Web page example

CSS (Cascading Style Sheets)

The basic purpose of CSS is to allow the website designer to define a style and apply it to one or more portions of the XHTML web page. Sounds Scary but in reality is not, it will become the industry Standard and one of the best tools available to serious standards orientated web-designers. CSS is a language used to define the formatting applied to a Website including Color, Background images, Type faces, Margins, and indentation.

There are many benefits such as easy to manage site wide Changes(huge benefit) as well as reduced file size resulting in faster Page load times, but to my mind the optimization of the page is as equal a prize, take for instance a Google robot or spider reads the page from the top left of the web-page to the right just Like a human so, by minimizing the code tags this allow us to put key words nearer the top of the page allowing for quicker indexing of keywords and content, believe it or not Robot and spider software is designed to move on if its having to bash thru endless HTML presentation tags so reduced indexing time for the search engines is massive plus, I use meta tags they do work and all of those additional keywords in the head has to be a plus!

A great book on CSS is

Now Who wants free Web-standard XHTML 2 column with footer Web page….!

>> Download zip file Example for XHTML page with CSS style sheet

Muck around with the code and the style Sheets see how the style sheet is called to duty Via the <div id =”example”> tag. you can also EDIT CSS on the fly with webdeveloper tools in Mozila Firefox , that is really a cool feature of the Mozila browser Do your self a favour and use this Web Browser.I’ll be back soon to add some more CSS / XHTML Web-page templates, and some really cool CSS tips and tricks

Articles on HTML | CSS | Graphic Design & Development


]]> http://www.billbailey.co.nz/html-css-article-overview-lay-out/feed/ 0 GTD: Time Management For Web Designers http://www.billbailey.co.nz/time-management-for-web-designers/ http://www.billbailey.co.nz/time-management-for-web-designers/#comments Mon, 07 May 2007 21:02:41 +0000 http://www.euphorish.com/2007/05/time-management-for-web-designers/ Time management is more then just a term used by those in high offices with high paying (stressful) jobs, it is an essential tool for anyone in charge of their own income. This is especially true for Web Designers as well as for Web Developers and Graphic Design Artists. We are going to focus mainly on those in the Web Design field but this can be applied to any other related profession whether you do this freelance or work for a corporation content management is all the same.

As web designers, we are usually met with strict deadlines while juggling two, three, four (or more!) other projects. It can be tough to keep yourself balanced enough to accomplish everything within the time allocated. This is where time management steps in.

If you’ve ever been lectured on time management then you’ve probably heard about the “80:20 rule.” I can’t think of a better application then when applied to web design. The 80:20 rule is simply as follows: 80 percent of unfocused effort only results in 20 percent results, while 20 percent of effort can result 80 percent of results. Simple, yes, but what does that mean? Well take for example you have some free time between projects (when does that happen?). You could be doing something of other interest but apply that free time to researching current design trends, content and just browsing design site galleries for ideas. In effect you are applying effort to your business which can be counted as “focused effort.” This will also be apparent when you start that new project with fresh ideas instead of just following up with the same ideas you had in your last project. This results in growth while a simple task like that can produce more result. Try to find any way to use focused effort during your daily routine. You could be our driving, socializing, or shopping. While doing this, you could be taking mental notes of product layouts and/or color schemes which then could be applied to your designs later on when you get home (or to work). Do your best to become “obsessed” with your work and you can improve and cut the amount of time it usually takes you to finish all the content with in project.

Time management is simply self-management. You have to be able to manage your own time, both personal and ‘professional’. There are many ways of doing this. It can be as easy as creating your own schedule on your workspace, be it on your wall or as software on your computer. Either way, this is a basic essential tool to have as a web designer. With this, you could also track time spent on each project (which helps if being payed hourly) as well as for reference later on. You can track how you spend your time, find ways to improve, and put those in to effect. Being able to close the gaps between unfocused effort and focused effort can result in more contracts and projects which results in more money! Do you best to stick to the schedule and only apply modifications if really necessary.

Alright, we’ll theres some good ideas but what are some real ways I can apply these ideas? Good question johnny, the answer is in organization. Organization is by far the most powerful tool to any web designer. There are many ways to become a better organized web designer. Let’s review some of these…

Track Your Ideas / Create Task List

If your like me, ideas come to you at random times and without any warning whatsoever. Also, these ideas that hit you in the middle of the night are usually the best ideas you’ll ever have. Keep track of them! As a web designer, you will spend most of your day sitting in front of a monitor so it is not hard to open up notepad and jot a few things down… but there is a better solution.

Instead of trying to keep all your .txt documents organized (more work!) just download FusionDesk. I cannot go a day without this handy program. I recommend the free version as it contains almost everything you need minus the time tracker (read on for a replacement for this feature). This program is lightweight and wont take up many resources that you’ll need for things like Photoshop, Dream weaver. If you have an idea you can simply use ‘hotkeys’ (key shortcuts) to create a new task no matter what program has focus. As a side note, by default the hotkey for creating a new task is ctrl + shift + n which is the same for creating a new layer in package_go.png Photoshop , so to avoid the aggravation change this once it’s set up.

Once you’ve created a new task you can quickly add notes (see image below), keep a task list, set deadlines, add attachments, track progress etc. This is a must for any GTD enthusiast, which we will discuss later.

FusionDesk

Organize Your Files!

Organization of your Content and files is probably the most important step you can take when it comes to shaving off some time when it comes time to bare down and get to work on a project. There are countless ways you could do this. You could create an extra partition on your hard drive for just your work files (if personal computer) which has many advantages. It not only distinguishes your
work from your personal life, it also can create an easy way to back-up everything in the case of a hard drive failure. For more information on partitioning see this article.

Set up a skeleton template. I work a lot with templates such as wordpress templates so one day i sat down, created a new folder in my “work” directory/drive and made each file i would usually use and applied all the redundant code. This included headers, doctype, simple css and necessary PHP code. Needless to say that this saved me a lot of time. This can be applied to almost any type of template you use (and if you don’t use them… START!).

Organize Your Workspace

It’s not just about an organized virtual workspace, it is just as (if not more) important to have your physical workspace just as tidy.

It is perfectly fine to take a day off to simply organize your workspace. It will pay off in the end! Many people will let their work area become so cluttered they constantly joke about having “their own system”… they’re lying to themselves. A clean and organized workspace will give you a much better advantage then you would assume. It is not just being able to find things quickly… it’s proven that a cleaner environment will create a better mood, a more productive day, and an overall better sense of well being. Try to get rid of anything you don’t really need. Minimalism is key here. Only keep what you really need, if you don’t want to throw it away then move it to another room and away from your personal workspace.

But don’t spend more than a day on this, it is more important to get your projects done!

Stop Procrastinating

I used to be infamous for procrastination until i realized that i could be making a lot more money if i just got my act together. Now I’ve leaned to “manage” my procrastination though things like inspiration. I will put something off as long as i can but if i stumble across a very well laid out rich interface i suddenly find myself opening up notepad(2) and photoshop and actually start working! It sounds simple but it actually works. If your saying to yourself “i don’t really feel like coding or designing but i know i should” then take a look at some css galleries and see how quickly you become motivated.

TimeBoxing

Time boxing is a simple idea. Give yourself a certain amount of time to finish each task and stick to it the best you can. This can also be used in your personal schedule.

Keep Track Of Your Time Online

There is a great free online web app called “toggl” which is an online timetracker. This allows you to always keep track of time you spend on certain tasks no matter where you are as long as you have an internet connection and a browser! This has been a much needed service for any web designer. You can visit there site here

Set Goals

Always set goals for yourself, whether it be short time goals or long time goals. Make sure you stick to them! Defining goals can give you something specific to aim for which will not only help you be a stronger web designer but a faster web designer! The term “time is money” is more true with Web Design then it is with almost anything else! So set your goals… create a separate folder or file (if you decide not to use fusiondesk) and map them out and keep track of your progress.

Start With Biggest Task

Always start everyday with your biggest task for that day. If you don’t you may find yourself with many small projects done without the energy or motivation to finish the one true thing that matters. If you finish your biggest task first, you will be motivated to finish everything up seeing as how everything else pales in comparison to what you’ve just accomplished!

Getting Things Done

I couldn’t complete this article without writing about the phenomena that is Getting Things Done (GTD) which is an amazing book that has taken the internet by storm for its “geek friendly” appeal. Author David Allen outlines a proven structure on just how to manage your time, projects, and ideas in a stress-free way. I won’t go into deep detail here because many of you have read it (if you haven’t Getting Things Donebuy it… now, its cheap). This book is a must-read for anyone in charge of their own income such as web designers.

There are so many ways to put this system into place as a web designer. I would of written some of my own ideas but there are countless articles about this already so i will just lead you away from my wonderful site…

]]> http://www.billbailey.co.nz/time-management-for-web-designers/feed/ 1 Web and Graphic Design Tips and Tricks. http://www.billbailey.co.nz/things-that-should-be-avoided-when-designing-a-website/ http://www.billbailey.co.nz/things-that-should-be-avoided-when-designing-a-website/#comments Mon, 02 Apr 2007 21:20:31 +0000 http://euphorish.com/2007/04/things-that-should-be-avoided-when-designing-a-website/ Everyone makes Web design and or Graphic design mistakes. Even those who’ve been web designers for many years still fall victim to the many traps set out for us along the way. Whether its a tempting special Graphic design effect or a way to boost some (short term) revenue that either way probably isn’t good for all of our visitors right? Right.

I can tell you from my experience that there are many Web sites out there with great Web content that I will skip simply because of some of its slighty annoying tendencies. I’m not the only one either… I’m the majority. It can be something small like a top frame added to every outgoing link or intruding ads… maybe it’s the We Design navigation. Either way these things should be avoided at all costs. Remember, this is not a lengthy list as it only points out only the most important of these things…

1. Flash

Don’t start writing the hate mail just yet. I am not saying that your flash site is obsolete or un-useful, but there are many times when flash just shouldn’t be used as a Graphic design hi light. While flash Websites can be both beautiful and innovative they can just as easily be both bulky and intrusive.

Flash intros

Flash intros should be, in my opinion, a thing of the past. Studies show (yes, someone actually did a study) that 80% of visitors will simply “skip intro” or just as well navigate away from your website. It is a waste of our time… we want to get the information as quickly a possible and move on.

Full Flash Sites

Please, if you have a portfolio of web sites thats fine. If it’s used as a showcase for work, I understand… but you wouldn’t make a company website using powerpoint would you? So, if it is at all possible avoid creating full fledged flash sites. Why? Where do I begin?!

  • Many users do not have flash installed
  • Many browsers controls (back button, bookmark) are useless with flash sites
  • Screen resolution: You are going to alienate at least 40% of your viewers somehow
  • Search Engines cannot read flash. You want to be found don’t you?
  • Loading times: is it really worth the wait?

Even well designed graphic Flash sites are like bad movies- you see them once and never want to see them again. Think about it… how many flash sites do you visit daily? Most likely the pages you visit are constructed in only CSS and HTML. Sorry flash designers!

This is frustrating for web developers because most of their clients are blind to all this and will require full fledged flash websites because they still think its “the way to go.”

2. Requirements

No one should have to meet certain requirements to enter your website. They simply need a web browser and an internet connection. Don’t assume your visitor has everything enabled or installed to display your site.

JavaScript

I understand some javascript but do not make your site’s function rely on it. For security as well as speed issues, many people do not have javascript enabled on their browser at all. Keep that in mind.

Screen Resolution

Your Web site should be viewable on 800×600 and up (smaller if possible). You also must understand that half of your visitors browser windows aren’t maximized no matter what resolution they’re on. Horizontal scrollbars are never attractive.

3. Intrusive Ads

If you have ads that keep stealing my focus then I won’t be coming back… and i certainly wont click on them. Notice the ads above, they aren’t keeping you from the content of this article.

Pop-ups

If your website has even one pop-up, I will simply navigate away from your page and won’t return no matter what the content is. I’m not the only one on this. Most users will do the same! I use firefox as my default browser, and even the warning bar showing it blocked a pop-up is reason enough to keep this site off my bookmarks.

Floating Banners

These are the most annoying things ever… period. Don’t expect me to be a regular visitor with these on your site.

4. Sound

Like flash, there are some times when it may possibly be appropriate but don’t count on it.
Sound in ads, background music, whatever… it’s annoying. Unless you have a real reason for doing this (and I bet you don’t) then just simply avoid it.

    Runner-ups:

  • Frames
  • Colored Scroll Bars (IE)
  • Animations
  • Broken Grammar

Have I missed something? Let me know.

]]> http://www.billbailey.co.nz/things-that-should-be-avoided-when-designing-a-website/feed/ 9 Icons, Logos, Logotypes, and Typefaces. http://www.billbailey.co.nz/logos-logotypes-and-typefaces/ http://www.billbailey.co.nz/logos-logotypes-and-typefaces/#comments Wed, 14 Mar 2007 00:40:26 +0000 http://euphorish.com/2007/03/logos-logotypes-and-typefaces/ Every start-up company and website must distinguish itself from the crowd aesthetically. The most important way of doing this is to accomplish the great feat of creating a unique logo for yourself. This is no small job and it’s importance is immense.

A logo is the key to setting you apart while keeping you from being lost in the torrents of new start-up companies. Your logo must be recognizable and distinguishable while memorable enough to a person that he or she will automatically associate that logo with your company or website. It should, more importantly, be associated with quality. You’re not just creating content, you are creating a brand. It makes no difference if your product is sports shoes or technology reviews, you are still a brand.

Let’s discuss the current trend of new internet companies and web apps today. It’s labeled as “Web 2.0″ which means many things (the “re-birth” of dotcoms, Ajax enables web apps etc. etc.), but one thing that all web 2.0 companies have in common is design. While they all are somewhat similar, each are unique in many ways. You can recognize their logo as being “web 2.0″ but you also recognize its unique real estate within the crowd of this emerging trend. We are going to take a note of these designs as we discuss techniques of creating unique logos, logotypes, and typefaces.

The Logo’s of Web 2.0

While you can’t exactly define the style of Web 2.0 there are certainly some similarities…


(Click to enlarge)alllogos2.thumbnail
I don’t remember where i heard it said, but it was said best that the mainstream design of Web 2.0 is best accomplished by re-visiting your childhood… opening up a box of crayons and doing what comes natural. Its easily seen that the design usually consists of bright matching colors with stark contrast and a bit of detail. We have ditched the small text for big bold fonts and added more gradients and gloss than most likely needed.

The New Age of Typefaces

Typefaces are the most important feature of a logo and website. They should collaborate with the visual presentation of your content. Note that we are using the term “typeface” in place of “font”… The distinction between font and typeface is a font’s status as a discrete commodity with legal restrictions, while typeface designates a visual appearance or style not immediately reducible to any one foundry’s production or proprietary control. [Wikipedia, “Logotypes”]. As for fonts, there are many readily available to download and use for your logo if you are not willing to go down the path of creating your own. Below are some examples for download-able web 2.0 style fonts:

Delicious
del1.gif

Fontin Sans
fs8.gif

FF Clanâ„¢
clan_free_white.gif

NewMedia

newmedia.gif

Union
union.gif

JustOldFashion
justold.gif

The typefaces of today are bigger, bolder, and are usually high contrast. With some added brightness in color, some detail you can create a very unique and outstanding logo. Try some gradient overlays and add some gloss.

Detail Detail Detail

What do all great logos have in common? Detail. You don’t have to go overboard… in fact this is more of a practice in minimalism. One single detail in position to your typeface can really make your logo stand out. Contrast is key. Take this logo for instance:


antipart.jpg
Simple elegant typeface, detailed logo. Not too complex but care was given to each aspect.
Like i said Contrast is important. Make the difference of foreground from the background really stand out. Also, define lines. By this i mean highlight any curves you may use, bring shapes forward. I think you get the idea. Also as a side note to the logo above: it is a great logo for web use only but would you be able to scale it down? Turned into a vector graphic (and minus the gradient background) it could be a powerful logo for any use (see next paragraph).

Vector?… Raster?… Resolution???

A common question in logo creation is whether to create you logo as a vector graphic, or a raster graphic. There are multiple answers to this question. It depends on where and how you are going to use the graphic. Creating a Vector based graphic in a program like Adobe Illustrator or InkScape will usually be the better choice as it can be resized and printed always with its quality intact and without having to worry about resolution. They are also a little more daunting to create for many people, and if you are only going to use this logo on the web then using a raster based program like Adobe Photoshop is perfectly fine.

When is vector not a good choice? When your graphic contains photograph like imagery. Vector images cannot display the detail as pixel-based or raster graphics can. For logos, this is usually not a problem since most logos do not have a photograph of a house in the background and so otherwise Vector is the right way to go. The best practice for any logo is to make a Vector “master” graphic (in case you need it resized for business cards, letterheads etc.) and just save them in web style (.png/.gif) for use on your website.

Still going with raster? What about resolution? Well if you are going to create a master logo in a raster/pixel based program like Photoshop and you still plan on printing and using this logo outside of the web then it’s resolution becomes a factor. When creating an image in Photoshop (and most raster based paint programs) the default setting is 72 ppi (pixels per inch), which is perfectly fine for display on a monitor… but not on paper. When opening a new document, make sure you set the resolution to somewhere between 225 – 300 ppi. All printers are different and referring to the manual is always a good way to find exactly what ppi setting to use. Also note that the higher the ppi/dpi, the larger the file and the more memory it takes just handling the file.

The Process of Logo Creation

Don’t get frustrated if you cannot create or even think of the perfect logo right away. This usually takes some time. The best process is to first use a pencil and paper (remember those???) and draw out some sketches or ideas. Start small, start with the font/typeface then work your way to adding an icon and then throw in some detail. Sign up for an account at LogoPond and upload your work-in-progress… you will get some help and constructive criticism. Most importantly, if you get “Designers Block”… get off your computer, go outside, take a drive… do anything away from your monitor and you will see how quickly it will come to you.

Good Luck, and i hope this article helped you get a better understanding of the daunting task of logo creation! Check some of the resources below for some ideas and inspiration…

More resources:
LogoPond – Identity Inspiration
Thinking With Type
Brand of the World
InkScape
Miš i Pile: Logo Design Portfolio


Works cited:

“Typeface.” Wikipedia, The Free Encyclopedia. 16 Mar 2007, 09:40 UTC. Wikimedia Foundation, Inc. 21 Mar 2007 <http://en.wikipedia.org/w/index.php?title=Typeface&oldid=115521101>.

]]> http://www.billbailey.co.nz/logos-logotypes-and-typefaces/feed/ 3