Dave PC Guy » fonts

Coupon design

Admin — Sun, 11 Oct 2009 00:32:39 +0000

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!

Share and Enjoy:

CSS: Lesson 2 Fonts, Padding, and Border

Admin — Fri, 25 Sep 2009 21:23:46 +0000

CSS Lesson 2

In lesson 1, I talked about backgrounds and text. Let’s move on, I’ll start out by expanding on the text manipulation with fonts and continue by the introduction of what I call “general formatting.” General formatting includes the definition of padding, borders, margins, and outlines. At the end of the lesson, you should know how to create the above banner and more

Here’s an overview of what you’ll learn in this lesson:

Fonts
Padding
Border

Fonts

We’ve already learned that there are multiple ways to manipulate the text in your HTML document through CSS. You can add text-decoration, align the text (text-align), change the line-height, word-spacing, and a lot of other stuff. Now let’s look at the font.

The general idea with Fonts is to use CSS to specify a group of fonts you’d like to use in HTML. If the browser does not support the first font, it will fall back on the next available font, and so on. There are three different general groups of fonts. There is “Serif”, “Sans-Serif”, and “Mono-Space”. Serif is the group of fonts with those little lines at the end of characters. Here is how you write it:

p.sans {font-family:Arial, Helvetica, sans-serif}

Sans-serif

p.serif {font-family:”Times New Roman”, Times, serif}

Serif

p.monospace {font-family:”Courier New”, Courier, monospace}

monospace

Let’s continue. When you use fonts that have multiple words, use quotations as shown above. You can mix and match different fonts but try to stick to fonts that look similar. Here are some basic properties:

hello

Font-size is self-explanatory, you can use “pt” for points, “px” for pixels, percent, and “em” which is a CSS unit of measurement, usually equaled to about 16px. It’s a unit of measurement that depends on the browser, the default browser size would be 1em, so if you want one and a half that size you’d use 1.5em. Font-variant only controls if the text has “small caps” or if it’s going to be “normal”. Font-weight specifies the font weight, obviously, or the boldness of the font. You can use values such as “bold, “bolder”, “lighter”, “normal”, and then go by “100″, “200″ etc.

Let’s look at Font-style. Font-style has the values “normal”, “italic”, and “oblique” (don’t use this one).

Finally, let’s look at Font itself, under the property font, you can declare all the different values at once.

body { font: bolder small-caps italic 2.4em/3em Arial, Helvetica, Sans-serif }
This is the modified text

As you can see, you can modify a lot using just the “font” property. There are some additional font values such as “caption”, “icon”, “status-bar”, “small-caption”, “message-box”, and “menu”. All of these modify the font to correspond with the font usage. “Message-box” for example, uses the font that’s used by form/dialog boxes. “Caption” is used by buttons, drop down menus etc.

Padding

For every content area, like a box, there are four different sections. There is the content, the padding, the border, and margin in that order from the middle to the outside of the box. We’ll start with padding first, which is the area directly around the content. It “clears” the area around the content, let’s say text, for the background and under elements.

Let’s try to define some padding:

Padded text

Well that didn’t work out as I planned, it seems as if WordPress has its own formatting that I cannot bypass. Here is a better example you can play around with by W3Schools. Let’s learn the short-hand. To express the above, you could have written it as the following:

or

You have to express all the values otherwise, your CSS will be interpreted wrongly. Let’s say you have four different values:

a, b, c, and d

where a is the top, b is the right, c is the bottom, and d is the left (clockwise):

padding: a b c d

Let’s say “b” and “d” are equal:

padding: a bd c

“bd” would be a single value. In this example, the following is short-hand: “top”, “left and right”, “bottom”. If you input only two values such as “ac bd” then it’s: “top and bottom”, “left and right”. A single value “abcd” would apply to all padding. Oh and when I say “abcd”, I don’t mean the multiplication but rather that it applies to all values. For example, if a=15px, and so does b, c, and d. You’d have to only write:

padding: 15px

You can use any other lenght-specifying measurements such as em and %.

Border

Let’s look at Borders, the next area around content. We specified the padding already which is affected by the background element of the content area. The border can have its own style and its own background and color.

Let’s start with border-style:

p.bordernone {border-style: none}

p.borderdotted {border-style: dotted}

p.bordersolid {border-style: solid}

p.borderdouble {border-style: double}

p.bordergroove {border-style:groove}

p.borderridge {border-style: ridge}

p.borderinset {border-style: inset}

p.borderoutset {border-style: outset}

p.borderhidden {border-style: hidden}

These are all the borders available for your own use. As you can see, I coded the code so that the code itself is an example. If you want to use the above for your own purposes, look in the source and type in “border-style” into the search bar. You can change the width of the border line with border-width. Which, in addition to normal measurements, also accepts the values “thin”, “medium”, and “thick”. Another property you can define is border-color.

Now, let’s say you want the width, color, AND the style different for each side of the border? Here’s how you do it:

p.complicatedborder {

border-top-style: solid;

border-top-width: 5px;

border-top-color: black;

border-right-style: dotted;

border-right-width: 10px;

border-right-color: white;

etc….

}

I’m not going to write it all out, but you get the idea. Where it says “top” or “right”, substitute it with “bottom” or “left” and you can apply it to the bottom or left sides. It works the same for all of the sides. Here’s the short-hand:

p.lesscomplicatedborder{

border-left: 15px groove blue;

border-bottom: 7px double red;

}

The shorthand is used the following way: “border-(side): width style color;” You can use this method on all sides by declaring “border: width style color” and not including the side tidbit. One last thing, let’s say you need to only define the border styles but are too lazy and will instead resort to shorthand?

p.borderstyles {

border: dotted solid hidden inset;

}

This part works the same as the shorthand for padding. If you have four values they’ll apply to : top right bottom left, respectively. Three values: top right/left bottom. Two values: top/bottom left/right. One value: top/bottom/left/right.
That’s it! In my next tutorial, I’ll address outlines and margins.

As always, here is the code for the header:

CSS Lesson 2

Share and Enjoy: