Logo design, the process.

Posted on May 9, 2008
Filed Under Design | Leave a Comment

I want to show you a logo. Actually a few different versions.

Ok so think of this my requirements were to create a logo for the Richmond Music Festival. site found here . As you can see the logo is a little dated. It was created a few years ago and has no vector file, no PSD nothing to work with. I am also re-designing the website. So of course with a new website you need at the very least a tweeked logo.

Now if you think logos are quick and easy to design you are wrong. They are probably harder than a website simply because you have to include everything the company/organization is about in a single simple image.

Here is my first version:

And it took me over a week and about 8 versions before we came to a conclusion on the final version. But in the end I was able to explain exactly what the association was about in a few words and an image.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

3 way Linking???? Is it worth it?

Posted on May 2, 2008
Filed Under SEO, Website Promotion | Leave a Comment

I don’t know about you but I am getting a ton of emails from supposed Webmasters trying to exchange links with me. It’s usually a three way link exchange. It’s gone as far as when I declined, the webmaster emailed me again telling me that it would be in my best interest to exchange links with him as his website gets alot of traffic. Of course I again declined. To be honest I don’t have a need to exchange links with other websites. Not because I don’t want the traffic or I don’t think it will be beneficial. It’s because managing those links is time consuming….

Back to the topic of three way links. There has been some discussion on the web about whether they are relevant and whether Google can see them and counts them. The discussion on SE Rountable today: http://www.seobook.com/archives/000467.shtml   and a discussion on SEOBook.com http://www.seobook.com/archives/000467.shtml back in August.

Now some people say it’s bad and some say it is good. But the facts are that, there are pitfalls and advantages.

The advantages (if done properly) 

1. Relevant visitors and traffic

2. Link in from a good site.

3. Can build site authority and promote your website

Everyone and their dog is using the technique simply because they think it’s effective. In SEO once a god technique is found and people start over using it and it becomes automated, it is less effective. Google then figures a way out to track it. It may not yet be a bad thing but soon enough it will be.

Disadvantages 

1. It has become automated

2. People are only doing it to manipulate the search engines

3. Google will eventually penalize people for it.

So to three way link or not?

My opinion is not to always go with the crowd, do it the old fashioned way. Hard work. I tend to plan for the long term. For example if I leave my website, www.beseenwebdesign.com alone for  6 months, my ranking will remain the same and so far that’s worked. Actually it’s gone up.

If you have ideas on three way link exchange please leave a comment, would love to hear others opinions.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Self Plug: Launch Richmond Music Festival

Posted on April 29, 2008
Filed Under Design, Random Thoughts | Leave a Comment

Just launched the Richmond Music Festival Society. Visit the new site: www.rmfs.org

“The Richmond Music Festival is a registered, non-profit charity dedicated to music development through the areas of performance, instruction, appreciation and presentation. The Festival was founded in 1998 by a group of local music teachers and presented the first Richmond Music Festival in 1999 as a weeklong event in Piano, Voice and Strings.” Read more

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Google’s new Blackle. Saving energy.

Posted on April 23, 2008
Filed Under Random Thoughts | Leave a Comment

If your worried about the environment like many of us are. Use Blackle. http://www.blackle.com/.

It’s the energy saving Google search engine. Sounds fancy right?  Wrong, it’s actually just a black screen with a Google search engine. Google uses a white screen which takes more energy to display then the black.

Let’s save the world, one white screen at a time.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

The easiest javascript form validation

Posted on April 16, 2008
Filed Under Design | Leave a Comment

Logo design tips

This week, I have been been creating an online form for a current client and I was looking for a Javascript form validation script. Surprise, Surprise I found the easiest one! And I thought I should share it.

This form validation script is so easy, it’s done in four easy steps.

1.You create the external .js file and include:

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: wsabstract.com | http://www.wsabstract.com */
function checkrequired(which) {
var pass=true;
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)==”required”) {
if (((tempobj.type==”text”||tempobj.type==”textarea”)&&
tempobj.value==”)||(tempobj.type.toString().charAt(0)==”s”&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert(”The “+shortFieldName+” field is a required field.”);
return false;
} else {
return true;
}
}

2. Then you add the link to external script tag into the head of your document.

3. In your form you add the following:

<form onSubmit=”return checkrequired(this)”>

4. In the actual “name” of each individual field in the form, you add the word ‘required’ with no spaces in front of the current name.

It was so easy I thought it would never work.

Original form validation script here

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Favicon for your site in 4 easy steps.

Posted on April 13, 2008
Filed Under Design | Leave a Comment

Logo design tips
What is a favicon? It’s actually the little icon that see in the browser.

Here’s how to create one for your website:

1. Open photoshop. Open a new document and set the size to 16 pixels by 16 pixels.

2. Create your icon. Save your icon let’s but save it as favicon.jpg

3. Rename it to favicon.ico

4. Upload it to the root directory on your website.

That’s it wasn’t it easy?

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Getting content for your blog

Posted on April 8, 2008
Filed Under Blog promotion | Leave a Comment

Let’s be truthful today, we are all very busy and have a hard time finding time for everything and sometimes, just sometimes your blog is the last thing on our minds.

So how do you find the time and the topics for your blog?

Today, I thought I would share some of my experience about how I come up with content. I don’t have any earth shattering ideas to share just some common sense ones.

1. Read blogs. And not to copy their topics. Sometimes, I will read a blog post and someone will discuss an issue which I may either agree or disagree. In the chance I disagree I usually write a post about my point of view. Obviously referencing the orginal poster.

This creates a conversation and people may comment on your post with their opinion or post in their own blogs.

2. Write your passion. Write your life. OK let’ s see you’re a stock broker, that’s what you do for a living well don’t try and write about Sweden on a daily basis. ( Especially if you live in Canada ). You have to blog about things you are either really passionate about or things you live-work and breathe on a daily basis.

If you do that, you will find topics on a daily basis that you should write about. For example, I am a webmaster and when I run into an issue that I think other people might also run into I blog about it.

As an example, I was reading a post over at Xemion.com - a place I also blog, about content for you blog and I thought it would be a good topic for me to put my take on how I get content on my blog.

I would love to hear other people’s ideas on where they get their content ideas!

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Zindex in IE7 Bug

Posted on April 1, 2008
Filed Under Design | Leave a Comment

Now I know I promised to do some more design tutorials but, I have been coding my current clients’ website.

During that time, I ran into a problem. It’s not a big problem, well at least it doesn’t seem like it now. I thought I would share. The problem was having two divs, one coming after the other in the code and needing one to overlay the other. Basically like being on two different layers. Now here is  example page.

http://www.beseenwebdesign.com/clients/music_festival/test.html

Example HTML code is:

<body>
<div id=”outer”>
<div id=”logo”>
<a href=”http://www.rmfs.org”><img src=”../images/RMFS_logo.png” alt=”Richmond Music Festival Society” width=”166″ height=”166″ border=”0″ longdesc=”http://www.rmfs.org” /></a>
</div></div><div id=”main_table”>

Example compliant CSS code:

#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;

}

#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}

#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;
}

IE specific CSS

#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}

#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;

}
#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;
z-index:-1;

}

Now on the test page of course before I fixed it, the logo was displaying under the main_table.

You can see the difference between the two style sheets is the negative z-index value in the IE specific style sheet. What do you need to know to fix this little problem. The lower layer on your page in IE needs a negative value.

For example if logo is valued at z-index:500 and main_table is valued at z-index:10o, in IE it will show which ever object comes later in the DOM structure. Now in Firefox the higher value is shown above no matter what comes first. To make the fix in IE you must give main_table a negative value like z-index:-500.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

How to create text with an image background

Posted on March 28, 2008
Filed Under Design | Leave a Comment

Here is a tutorial on how to create type with an image background. I am using Photoshop CS3 on Windows.

1. Open an image - any image

 

 

 

 

 

 

 

 

 

 

 

 

2. Duplicate the layer, so that it is not locked. You can duplicate a layer by right clicking on it and selecting “duplicate layer”.

3.You can then delete the original locked layer.

4. The next step is to create a text layer. You can do that by simply selecting the type tool and start typing! In the screen shot below you will see I have written the word, “Northern Voice” and have used an image from the conference.

inserting text

 

 

 

 

 

 

 

 

 

 

 

 

5. The next step is to select the text. We can do that by hitting Ctrl and selecting the type layer. Now the key to this is to hit Ctrl and select the actual box with the T in it, in the layer panel. This will gives us the highlighted outline seen below.

Selected Text

 

 

 

 

 

 

 

 

 

 

 

 

6. Now hear comes the fun part. Select the image layer while the text remains selecting with the racing ants. Then hit Ctrl and J - this commands actually inverts the selection, copies the image layer and deletes the unwanted image. But, don’t worry about that - Ctrl+ J is the easy way. Here is your result.

Result of text image

 

 

 

 

Good luck with your project and I hope this helps. If you have any questions with this tutorial, please let me know by sending me an email or by leaving a comment. I will be sure to help you as much as I can.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati

Upcoming and Article to share.

Posted on March 22, 2008
Filed Under Random Thoughts | Leave a Comment

First I just finished an article over at Xemion.com. I also blog over there on some advanced design issues. And I thought I should share it with my own blog readers as well.

View the article here: http://www.xemion.com/blog/information-architecture-101-64.html

Also, in the upcoming couple of weeks, I hope to have a couple of more design tutorials. If anyone has anything they would like to see, please leave comment.

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blinkbits
  • BlinkList
  • Fleck
  • Furl
  • Ma.gnolia
  • NewsVine
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati
keep looking »