Remember a couple weeks ago I mentioned I would be making a website for a chiropractor? Well, here it is. I finally got my client to approve the hosting and the domain. I’m using JustHost for the hosting and I installed a preliminary wordpress template. It’s the easiest way to start up a website. I used a free template I found online.

My client does not wish to have a blog, of course, so I’ll be creating a static website soon enough. Anyways, one of the things my client wants me to do is make coupons, so let’s do that!

My plan is to hopefully create a nice vector coupon design in illustrator, make a PHP script that will send it to a recipient’s e-mail with THEIR name on it. I’m not sure how I’ll be able to do that cross-browser and all that but we’ll make it together!

Coupon

Let’s start with the design. I want it to be large enough so that it basically renders a print page useless. If it’s too small, I always feel like I’m wasting a lot of paper just to print one thing so if it’s large enough, it doesn’t feel like such a waste. I’m thinking it should be about as large as an index card, maybe a bit larger.

Document Setup

I created the new document with a 4×6 dimensions (6×4 when viewed this way). I started up with the little rectangle that signifies the size of my image. Now, let’s turn on the grid by going to view > show grid, and view > snap to grid.

Rounded Rectangle Tool

Next, let’s make an actual rectangle in the image. I used the rounded rectangle tool. Because of the “snap to grid”, you’ll be able to start exactly on the top-left corner and drag all the way to the bottom-right corner in one single stroke. Leave your mouse clicked and press either the top or bottom arrow to make the corners more or less rounded. I like them rounded just enough so that they leave one square of the grid uncovered in the corners. Let go and you’ll have a nice rectangular base we can start working on.

no fill

Click on the rectangle and switch to no-fill (the circled square above) while clicking on the fill palette. This makes sure there will no background. Make sure your stroke is black (palette to the right) and 1pt wide. This should be your result so far:

progress 1

Ah, the hard part is over! Haha, just kidding. Alright, well you see the square grid? Let’s add a couple of elements. I want to include a small text on the bottom that will explain limits of the coupon. I created a guide that’s two squares from the left and another guide two squares from the right. To create a guide, go to view>rulers and then simply drag from the left or the top, right or down, and you should see a guide. Leave it where you please. I started typing the small texts four squares from the bottom (no guide required). I used Myriad Pro and a 12pt font with a center alignment. Tip: start typing where the middle grid-line is. I typed two lines of text and here’s my result:

small text

Next let’s add the title of the company. I created another guide that’s right where the first grey grid line from the top is or the 3-inch marker. I started the text one square below the top and the text-box one square from each side. Text is center-aligned, Myriad Pro, and with a 36pt value. After I added the title, I added a second part of the title. The name of the company is”Georgia Chiropractic Group”, and the name of the practice is “at Sixes Road.” I added this text one square to the left of the center vertical line and one square above the guide. I used Myriad Pro, left aligned, and with a 24pt font. Next, I added a circle with its origin five and a half squares to the left of the right side and on the guide line and it’s three and a half squares long in its radius. Here’s the result:

title

Let’s add the name part. I want to create a custom coupon for each customer (using a php script and some CSS in my next tutorial) so I need to create a name field. Originally, I intended to have the name above a line, but I found it cumbersome, especially with the use of CSS and PHP so I think all I need for now is just a place holder. I used a rectangle with a one point stroke and placed it one square below our horizontal guide and started the rectangle two squares right from the left side (our left vertical guide). The box reaches the second thicker grid-line left from the right side. I added a name and the underline for demonstrational purposes only. Here’s the result:

name box

So far so good, now let’s added the phone number and the address of the business. If, for some reason, your business does not have a single address or a phone number, you can add  mock barcode. If you need the barcode AND the address, you’ll probably have to shrink the box where the name goes, and shrink the “purpose-text” of the coupon as well. I want the coupon to say “$25 Adjustment”, if your coupon is supposed to say “$25 off”, it will take up less space and thus allow you to fit in the barcode. Another alternative way is to shrink the logo, or put the logo as a background to the name box, or any other part of the coupon, such as the “purpose text” itself.


Anyways,  I added the address two squares below the textbox and the phone number two squares below the address. And again, I followed the left vertical guide we set up earlier. Here’s the result:

address

Also, note that I don’t remember the address nor the phone number of the business, and I’ll have to change that later. Now to the right, I propose I add that “purpose text” I was talking about. As you can see so far, I don’t want to add any color nor any special effects. I might later on, but not at the moment, it makes it easier this way. It’s far too hard to describe where I placed the text so just check the picture below.

purpose text

It’s done with a 40pt font, Myria Pro, center-aligned. Now let’s add some “fun” to the coupon because now all it is is just text and a circle that will become a logo later on. Go to a barcode generator. Use any barcode mode you wish to, I used the default and its default settings. Click generate, and open the picture below in PNG (click on PNG right above the barcode), transfer the picture into Illustrator. Next, stretch and shrink it, making it non-usable but still just as much fun, and put it under the purpose-text. Here’s what I got:

barcode

And here’s my final result:

final

That’s it though, save the picture as a .png file and upload it to your website. In my next tutorial, I’ll cover how to add custom names through some PHP and CSS knowledge. Don’t forget to erase the textbox and the name from the coupon. (ie Alexander, the line below it, and the box around it) We’ll add all that with CSS later.
I hope you enjoyed my tutorial!