A Marketing Web Design Tutorial By Kidino

Spice Up Your Website

Simple Tricks That Makes Your Websites Look More Professional And Get More Responses

This is a tutorial about spicing up your website with some web graphics. First I want you to know that I am using all the graphics from the Marketing Graphics Pro.

If you have similar web graphics package, you can use those to follow through this tutorial. But be sure to check out Marketing Graphics Pro because they are just so good looking, nice and professional.

I am only using a few of the 6700+ web graphics that is available in the package. Do check out Marketing Graphics Pro to know more about the types of graphics they have.

[ Check out the Marketing Graphics Pro ]

So let's just get on with it...

Tutorial #1 - The Drop Cap

Let's start with the easy ones. I am sure that you have heard it before. Using a drop cap can get more people to read your letter. If you don't know what I mean, it's where you make the first letter of the paragraph really big, that it takes the space of three to four lines.

ake this as an example. I replaced the letter "T" at the begining of this paragraph with an image. And that image pushes the rest of the lines in this paragraph to the right. What you see here is a drop cap.

Drop caps are normally done with a serif font like Times New Romans or Georgia. To get an effect like this, you need an image of the letter. And then, when you use the image in your paragraph, don't forget to use the alignment property and set it to left.

See the code below:

<p><img src="your-drop-cap-letter.gif" align="left">Continue with paragraph here...</p>

This is simple enough. Let's proceed with the next one.

Tutorial #2 - Working With Transparent PNG Graphics

I love transparent PNG graphics because the transparent effect is smooth, not like a GIF graphic. And it's great when you want to put it on a place with colored background, or with patterns.

If you have seen the WOWPopUp.com, you know what I am talking about.

But older versions of Internet Explorer may not support PNG file format very well. Internet Explorer tends to ignore the transparent features of the PNG graphic.

That is why you need this simple Javascript fix.

All that you have to do is download the Javascript file below, and extract the ZIP file. And then, put the file where your website can access it.

[ download javascript file here ]

Here's how you link to that Javascript file:

And that should do it. So the next time you find a PNG file, you should be happy, because now you can have effects like this.

All that you have to do now is add in your image like how you normally do. Here's a typical <IMG> tag that you use to add image to your website.

Transparent PNG On Yellow Background

I am using the simple <IMG> tag to call this transparent PNG seal. And no matter what the background color is, everything is smooth. Transparent GIFs can't do this because it will show some rough color edges.

Transparent PNG On Light Blue Background

Believe it or not, this is SAME PNG IMAGE FILE. As you can see, everything is clean and nice. No rough edges like GIFs.

The are some really nice PNG graphics in Marketing Graphics Pro. And there are blank PNG graphics too like this seal star and also badges. You can use Photoshop (or any other graphic software that supports PNG) to edit the blank PNG graphics and put any text you want.

Make sure you save back as a 24-bit transparent PNG file. It's as good as working with a real PSD Photoshop file.

Tutorial #3 - Putting a Functional Print Icon

In there some really nice icons in the Marketing Graphics Pro package too. Check out Bonus #4. I thought I'd show you how to use those icons and make your website more user-friendly.

For example, you can take the printer icon and put it up on the top right corner of your web page and write "Print This" next to it. Well, something like this... (go on and try it)

Print This

And then, you can use a simple javascript code to make the printing dialog box appear. Here's the code that I use.

<a href="javascript:none;" onClick="window.print();"><img src="img/fileprint.png" width="22" height="22" align="absmiddle"><strong>Print This</strong></a>

Tutorial #4 - Using Tables For Numbered Info

Sometimes you need to show people a step-by-step process, or a certain number of benefits. And you can have those nice big numbers on the left of each step. Well, the easiest way to do that, is to use the <TABLE>

First, you need those big font numbers as images. I am using one from Marketing Graphics Pro, of course.

And then, you want to create yourself a table, with 2 columns and X number of rows, depending on how much that you have. The left column is for the numbers and the right column is for the information. Obviously, you need to have the right bigger than the left.

Here's a typical code of a table like that.

<table border="0" cellpadding="5" cellspacing="10">
<tr><td width="60" align="top">For Numbers</td><td width="390" align="top">For Details</td></tr>
</table>

As you can see, we apply a "0" value to the border so that no border is visible. Of course, you change a number of things like the cellpadding and cellspacing properties. And you have change the text font and color to anything that you will is suitable.

Here's one style that you can have.

3 Steps To Bla, Bla...

	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec orci nunc, sodales quis, congue sit amet, sodales sed, tortor. Mauris nulla justo, feugiat id, placerat vitae, accumsan adipiscing, turpis.
	Curabitur fringilla dui. Praesent in sem. In libero elit, pellentesque ac, malesuada in, dictum id, urna. Nunc pede sapien, scelerisque at, imperdiet eget, vehicula id, velit. Aenean pretium fringilla urna.
	Praesent id leo at purus fermentum malesuada. Suspendisse scelerisque nisi in eros. Mauris non lacus a elit lobortis consectetuer. Pellentesque consectetuer. Integer velit. Sed at libero id arcu luctus pharetra. Phasellus vitae velit vel pede cursus luctus.

Tutorial #5 - How To Change Bullet List With Images

There's this little trick that you can do with bullets. Using Cascading Style Sheet (CSS), you can change those boring black squares with images, without using tables.

Now, here's a typical code for bullet list:

<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three </li>
</ul>

And here's how it looks like:

item one
item two
item three

But you can apply this simple code and your list will look at lot different:

<ul style="list-style-image: url(bullet.gif);">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three </li>
</ul>

And now it looks like this...

Item One
Item Two
Item Three

Well, that's the simplest way to do it. However, it doesn't really look nice. If you take a really close look, you will see that the images don't really align nicely with the text.

You can settle for this, but for a better result, there's a better way to do it. But it is a little more complicated. First, you need to copy this code, and put it somewhere between the <head> ... </head>

This method does not replace the old bullet, but rather defines an image as the background to each list item. Don't worry about the technicality. Just copy and paste the code.

And then, with your list items, this is what you do... You add a class property to the <ul> tag.

<ul class="nolist">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three </li>
</ul>

So here's the result. But of course, I added some more content to it. You can scroll back a little bit to compare with the method earlier. You can easily see that this is a lot nicer.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec orci nunc, sodales quis, congue sit amet, sodales sed, tortor. Mauris nulla justo, feugiat id, placerat vitae, accumsan adipiscing, turpis.
Curabitur fringilla dui. Praesent in sem. In libero elit, pellentesque ac, malesuada in, dictum id, urna. Nunc pede sapien, scelerisque at, imperdiet eget, vehicula id, velit. Aenean pretium fringilla urna.
Praesent id leo at purus fermentum malesuada. Suspendisse scelerisque nisi in eros. Mauris non lacus a elit lobortis consectetuer. Pellentesque consectetuer. Integer velit. Sed at libero id arcu luctus pharetra. Phasellus vitae velit vel pede cursus luctus.

Start Applying These Tricks Right Now

Alright, I guess that's all that I can share for now. It's almost midnite right now (the time I am writing this) and my eyes are getting sleepy.

Last reminder, if you want to get the web graphics that I am using in this tutorial, it's from the Marketing Graphics Pro package.

I am only using a few of the 6700+ web graphics that is available in the package. Do check out Marketing Graphics Pro to know more about the types of graphics they have.

[ Check out the Marketing Graphics Pro ]

Iszuddin Ismail (Kidino)
- OptinDesign.com
- MoneyClicking.net