Dave PC Guy » Design

This is a great idea for iPad

Admin — Tue, 07 Dec 2010 18:00:58 +0000

The idea is not to destroy it or burn it or harm it in any other way. Instead use your iPad as an informational screen.

Make the iPad post RSS feed, weather, maybe play news etc. BUT while it`s hanging on the wall. I would be scared too, to hang $600 piece of electronics on the wall, well not including my TV, I would be. However, Yanko design had solved this, or so they say.

Share and Enjoy:

Bracelet I would even wear

Admin — Tue, 07 Dec 2010 16:18:04 +0000

Imagine a cellphone display, MP3 player display just as simple as a bracelet. The information scrolls around on it. I can see this being useful to runners because who wants to run around with iTouch or any other big screen sized device.

Get a small cellphone, bluetooth, and the bracelet, and voila as compact as possible. I would get one just for the sheer annoyance of looking at my cell or MP3 player to see what`s going on, who texted me, what`s playing etc. If it had OLED screen, which I am sure that in future it will, then we are in for some crazy inventions, but for now this will have to suffice.

Share and Enjoy:

Futuristic All-In-One

Dave — Tue, 07 Sep 2010 15:01:42 +0000

AIO Scanner

This crazy idea, much loved, by Mac Funamizu has the ability to act as a scanner, a digital camera, and an internet-connected wireless device all in one package

Share and Enjoy:

RainyMood.com – A design breakdown

Admin — Tue, 09 Feb 2010 05:45:38 +0000

RainyMood.com.

Rainy Mood is a great, and relaxing website. What does it do? It plays a fifteen minute loop of rain OVER and OVER again. That’s it! How simple.

Why am I even bringing this page up? DESIGN!

Let’s look at this page. It has a great background that fits into the 500kb category, a simple image header that tells you exactly what the site is about, and then a BIG play button with sharing capabilities on the left and right.

If you scroll down, you’ll find a single add and some other stuff.

What I see

The beauty of the design here is simplicity. Just the background of a wet window gives the user the feel of really being there when it rains. The simple interface is amazing, because you know what? It doesn’t give you a million extra options that you wouldn’t use anyways, plus it auto-plays so that whenever you get on the sight, it’ll start up automatically.

It has a facebook fanpage on the left, great for PR, advertising, and all around marketing of the site. Facebook allowed the website to get 6000+ fans that visit the site regularly plus more as people try the site out. On the right is the “tweet” button, that will tell all your followers what a great site it is. I did that.

The big button has only one problem, its hover effect. It has an annoying greenish glow, I wish they would have soften that up and created more stylish buttons. It takes away from the all around “blue” experience.

Under the Hood

I took a look at the source code, the music is played through a javascript player made by voormedia.com and it has been hash encoded so that the ordinary users can’t just look through the code (it looks so illegible!). Of course, you can easily decode it but that’s not the point.

Next, the site uses no DIVs at all, nor a stylesheet. It’s all built into one file (except for the images) and uses tables. Now, people warn against using tables in webdesign but it does not matter too much here, it works well.

PROBLEMS: It’s not XHTML compliant. It has no true header that specifies the usual stuff. It is also not SEO optimized, it has a couple of keywords, no description (other than “rainymood.com”) and it does not have really descriptive alt tags.

The Point

It’s an easily navigatable website that has one simple feature that makes me go back to it over and over again. It has simple coding, though non-compliant, and it seems to work out quite well.

Visit it!

Share and Enjoy:

kuler – Adobe’s version of Color Scheme Designer

Admin — Sun, 07 Feb 2010 19:40:03 +0000

kuler

Kuler is a great tool for all designers. It’s really similar to the Color Scheme Designer in the aspect that it composes several colors for you to use in your design.

It has several other features that make it even BETTER than CSD but there are tons of features missing too. Let’s start with the good stuff

What’s good

pre-made themes including “random”, “newest”, “most popular”, and “highest rated” categories
RSS feed for the “highest rated”
Ability to create theme from an image (upload an image, or choose an image from flickr and select colors)
community
Presets for uploading an image (called “moods”)
Ability to register and sign in to save and share themes

What’s not so good

there are some reservations about the interface
rather confusing color picking interface

What’s missing

export features (you can’t export to PSD, CSS, or HTML as you can in CSD)
no example sites (CSD allows you to look at example coloring)
VERY limited color options
no permalink

“What’s missing” seems not to be such a big deal, but it actually is. The “example site” feature on CSD is amazing and very useful. It can kick-start your imagination and it’s just really cool.

I don’t use the export features but it’s nice to know they’re available. Also, the color options in CSD are virtually LIMITLESS. There are TONS of presets while Kuler does not really have any of those great presets.

Kuler is great if you’re looking for pre-made color schemes and themes but it’s nothing compared to the Color Scheme Designer.

One feature though, that could win me over, is the “Create From An Image” ability that lets you use an image for the scheme. I will definitely try that out and report on it.

Share and Enjoy:

Mobile Websites (tips)

Admin — Mon, 11 Jan 2010 23:28:37 +0000

I’ve recently started working on some mobile websites. You’ll notice that davepcguy.com has its own mobile alternative as do some other sites. Mobile devices are growing in number and gone are those days when internet was viewed only on the computer screen. WAP is not even used either so that old school coding is gone too.

These days, almost everyone has an iPhone or a BlackBerry, or a Palm device. Some of us even have other devices like PSPs, tablets, and others that require quite a bit different formatting. Here’s how to go about making your mobile website.

Step 1 – The Vision

First, you gotta have a vision of what you want. The best way to get a good vision is by picking up your phone and browsing the internet, looking through some popular websites such as youtube, flickr, facebook, myspace, and other sites that you know get a lot of traffic and are likely to have their own mobile version.

I recently saw a really nice blog post detailing some of the nicer mobile sites. The theme there is common:

Everything is single column. There are no side-bars, there are no fancy tabs. Everything is in a single column. Think of it as a letter. There are no columns in a letter, you have a header, the body, and the footer.

Header: Generally, you’ll use the header of the page to announce the website’s name and to show menu links. You may also place a commercial in this area (Google Adsense uses commercials). Here’s what I used on my Only A Quote mobile site: It’s a simple banner that effectively tells the user what’s going on.
Body: This is pretty self-explanatory, you put the meet of your site here. Try to use well organized information. Don’t just slap stuff there. Mobile users are more likely to leave your site than regular computer users. Also, keep the graphics swift! Not too much.
Footer: Use the footer for copyright info and other blah blah stuff but don’t over do it! I know huge footers are fashionable but not for mobile users!

Keep it all simple!

Step 2 – Design

Here are a few tools that will help you with your design:

Keep in mind that different phones will render your page differently so try to make it as simple as possible. To catch the widest possible audience, focus on the big three: iPhones, BlackBerries, and Palm phones. Samsung and Nokias are common too, especially outside of the US but BBs and iPhones capture most of the market. Android is coming up too, so watch out for them too.

A few simple rules:

Keep the site less then 400px wide.
Cross-browsing is a bitch on Computers, it’s worse on phones, render for Safari and Opera Mobile
Graphics should not exceed 20kbs
Keep the layout basic

There are tons more rules but those are the basics.

Step 3 – Coding

First of all, DON’T USE JAVASCRIPT! It works on a lot of phones, it’s gaining support, but it’s really bothersome (I know, I use my phone to browse the net a lot). There’s no need for it. Hover and other pretty stuff is useless too. Many phones don’t support it.

Use as little mark-up code as you can. If your original site has thirty divs, make it three in this one. There’s no need for all that on phones. If your CSS screws up, so will your divs.

Use the following doctype:

This will tell the browser that it’s meant for phones. It’ll help rendering and it’s the RIGHT thing to do haha. Once you start coding, again, keep in mind that your website should be the smallest possible.

Here are a couple of rules to keep in mind:

Don’t use px/em sizes, do everything in percentages, you never know what kind of a phone the user will use.
Keep all files as small as possible.
If your .PNG graphics do not use transparency, convert them to JPGs with smaller quality
If you use .PNG graphics WITH transparency, consider remaking them into JPGs or GIFs (for transparency) if at all possible
Keep all graphics less than 400px wide. I suggest 350px tops.
Use “ALT” for images, some phones may not render the text and it’s standard .mobi rule
Try not to use tables or javascript
Don’t use external resources (ie pictures from other sites, scripts from other sites, etc)
Define sizes for images with the width = “” and height = “” html tags
NO POP UPS!

That’s about it.

Step 4 – Testing

You’ll need to test your site, so use the resources mentioned in the emulator part. Use your phone as well!

Here’s another resource that will catch ALL of your mistakes:

Ready.mobi

This site checks your markup, the size of your site, and many other features. It will tell you if you did something wrong and will usually tell you what you can fix on your site. It also features five different phone emulators on the spot. It also ranks the speed of your site. Here are my stats:

Oh yeah, that’s a bad rating. It’s mostly because of all the graphics on my site, the CSS involved and inter-linking on my blog. It happens but it does pretty well on my BlackBerry so try to look at your rating positively especially after you do your own tests. As you can see, it tells you the different speeds with GPRS, 3G, and Wi-fi.

Step 5 – Implementation

Let me save you a few hours of searching. In implementation, you’ll have to figure out how exactly you’re going to redirect your traffic to the mobile version whence they use their phones. It took some time for me to figure out but here are a few options:

DetectMobileBrowsers – This is almost a fullproof method of redirecting your traffic. The problem? You can’t use it unless your site is COMPLETELY non-profit. Nope, not even ads are allowed. If you want the commercial version, it will cost you $50 a year to use it
LightWeight Device Detection – This is probably one of the simplest scripts you’ll find and it works really well. It also doesn’t have any restrictions as far as I’m aware.
Mobile Detect – This is a slightly more functional version of the above-mentioned Device Detection. They’re not related but work in a similar way

Let’s move on to actually using these scripts. I haven’t used number one but I’ll tell you how you can incorporate number 2 and 3.

Decide whether you want a separate site for the mobile version. I recommend creating a sub-domain such as m.onlyaquote.com (whence using sub-domains, remember that m.onlyaquote.com = onlyaquote.com/m )
If you did not create a separate sub-domain, you can place the whole thing in a loop but don’t forget to create a backdoor so that the user can switch between the desktop and mobile version.
Put all the script messy stuff into a separate file (so as not to clutter up your index.php file) except for the if/else statement found in number 2. If you’re using number 3, don’t worry about that at all.
Use include(script file ); to put the script back into your index.php file. Put all of your PHP before the tag

If you’re using Number 2, here’s what you do:

include ('scriptfile.php');
if($mobile_browser>0) {
   // do something
header( 'Location: mobilesite.com' ) ;
}

If you’re not using a different site do this:

include('scriptfile.php');
if($mobile_browser>0) {
 // place your mobile site here.
}
else {
   // place your desktop version here
}

You can also simply switch out CSS files with this method (make sure to put the loop inside the tag then). I don’t suggest you use the default CSS method of switching styling according to the device (ie. ) because it doesn’t work that well and most devices will try to read BOTH stylesheets.

For number 3, again place the following loop before the tag:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    // any mobile platform
header( 'Location: mobilesite.com' ) ;
}

With the number 3 method (ie. Mobile Detect) you can also specify which mobile device you want to do what. You can choose a separate site for an iPhone and Blackberry or separate CSS files. Well, whatever, you can do it all.

CAUTION: The detection system is NOT perfect. With newer phones, newer browsers, and newer software, the detection script may become obsolete. Be always on the look out for better versions!

Conclusion

That’s it, with these few tricks, you should be able to easily make your own mobile site. Here’s what mine looks like (I still have a TON of work to do!):

Share and Enjoy:

CSS3 Lesson 3: Background Information is Essential

Admin — Thu, 17 Dec 2009 02:34:41 +0000

Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

background sizes
multiple backgrounds
background origin/clip

I will provide illustrations as to what each property looks like and you can also view my CSS3 testing sample that features this tutorial’s properties (among others). The properties will be compatible with both webkit (Safari and Chrome) and the Mozilla engine. Internet Explorer, unfortunately, does not yet support most CSS3 properties. I’d like to also note that I use a Mozilla Firefox 3.5.2 (which apparently has tons of trouble using ANY of these properties) and Chrome 3.0.195.33 (which seems to render everything perfectly).

The background-size property is very straight forward. You simply choose the width and the height as the values. You can use percentages, pixels, and other measurements.

First, why do we use this? Well, let’s say you have an image that’s too big or too small and you want to resize it without using photoshop or another tool. There are few reasons why you’d want that. Let’s say you want the same image on one website to be 400×500 px while on another site, you want it to be 200×250 yet you don’t want to create the extra file.

In my example, I have a strangely sized logo that is 474 px by 185 px. Now, I want it to be about 90 px tall, so that’s be 231 width. Here’s what the code would look like:

background:url(background1.png) no-repeat center;
	-webkit-background-size: 231px 90px;
	-moz-background-size: 231px 90px;
	-o-background-size: 231px 90px;
	-khtml-background-size: 231px 90px;
background-size: 231px 90px;

This code should show up properly on the above-mentioned browsers. I’ve had no trouble with Chrome but my Firefox is being stubborn. The result should look something like this:

correctly rendered background

As opposed to this:

incorrectly rendered background

Note that I am creating these images as I go so whenever I add more backgrounds and use other CSS3 properties, my testing site will look differently.

Ever wished you could stack multiple backgrounds without having to create multiple divs? Well, that’s what this new background extension property does. You can stack multiple backgrounds and using the rgba () value, you can even change opacity of color-based backgrounds.

Here’s the concept. Okay, so on my example page, I want the background to have a greyish background with a slight gradient. I’ll make a pixel wide pretty long strip that goes from white to nothingness on top of an actual grey background. On top of all that, I’d love to add some kind of a swirl on the left and a nice swirl in the right corner. Let’s see how that’ll look in code:

.bgr {
background: rgba(115, 115, 115, .8);
background-image:url(gradient.png), url(swirl1.png), url(swirl2.png);
background-position: top left, top left, bottom right;
background-repeat:repeat-x, no-repeat, no-repeat;
background-attachment: fixed;
}

Easy concept. I used the original backbground property and used the new rgba() value for the background. Next I used the background-image property for the images, all separated by commas, don’t forget that. Next I declared the background-position and background-repeat the same way. The background-attachment is for fun.

Now since I’m really lazy and I don’t feel like creating my own swirls in illustrator, I used some wonderful free online brushes. Also, I had a lot of trouble making this work in short-hand (ie. background: url(gradient.png) top left repeat-x, url(swirl1.png) top left no-repeat, and so on). Unfortunately, it only works with Webkit (ie Safari and Chrome) and I haven’t been able to make it work on Firefox. It should work in coming Firefox releases. Check out my testing site for a live example.

Here’s what it should look like:

It looks pretty nice, doesn’t it? I like it. I’ll probably employ it in some future websites too.

Let’s look at background-origin and background-clip. The origin comes first in the title, so it will come first in my explanation. Basically, origin tells the browser where the background image should originate. Should it start where the border ends? Should it start where padding ends? Should it start where the content ends?

This concerns the box theory and adds to the complications of it. This also concerns the background-position property that I used in the previous example. CSS3 Info has a great article that shows all of the different results you can get with clip and origin properties. It’s useful, but not the best. I’ll be using the following image to indicate all the different background origins:

The different values you can use are border-box, padding-box, and content-box. While using this property add the “-moz-” and “-webkit-” prefixes to the properties. Once again, I’m having trouble making it work in firefox. It might work for you, but it didn’t work for me. Here’s the CSS I used:

background: url(swirl3.png) no-repeat bottom right;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;

Of course, I used different positions for different divs. I added some extra borders and padding for effect but go ahead and check out my example site. If it doesn’t work, here’s a screenshot:

Here’s the rundown of the properties:

border-box
padding-box
content-box

As you can see, border-box puts the background image into the border, padding-box sits right outside the border (or at the end of the padding), content-box puts the background inside the content area.

Let’s look at background-clip which has two different values, border and padding. Using border will enable the background to be visible ABOVE the border area. Padding box does the same except the background will be visible above the padding area and not the border area.

I’ll use the following swirl to show you how this works:

The first example with the green swirl used the padding while the next one will use the border value. You won’t see much difference in most of the swirls (ie between the green and the red) but when you look on the bottom left red swirl, you will notice that part of the swirl is visible in the dashed border. That is basically all the difference you will see between the border and padding values. Here’s a close-up picture:

Here’s the green swirl:

Once again though, this feature fails in Mozilla. Here’s the CSS for the last DIV on the page (where the advertisement is):


background: url(swirl4.png) no-repeat top right;
 -webkit-background-origin: content-box;
 -moz-background-origin: content-box;
 -moz-background-clip: border;
 -webkit-background-clip: border;
background-clip: border;

Well, here’s my conclusion. I found some great use for the multiple backgrounds on my testing site. Actually, all of them are pretty useful. I wish there was more support for it. I may have erred but it seems unlikely since all of the properties show up alright in Chrome. I hope you enjoyed my tutorial and look out for some more in the future!

Here’s the final website:

Share and Enjoy:

CSS Lesson 6: Intro to Divs

Admin — Sun, 25 Oct 2009 22:36:44 +0000

Alright, alright. So I skipped all that fuss with horizontal navbars but that stuff is easy so I’ll create a short article on it later.

Let’s start with the

tag. It’s what I’ll be covering. Making use of div’s with CSS. You’ll need to know the following before we start the lesson:

CSS Lesson 2
CSS Lesson 3
as well as basic HTML knowledge

If you don’t how to add CSS to your website, check out my CSS Intro tutorial and CSS Lesson 1.

What are “divs”?

A div is basically a section, a chunk of HTML that you can apply the same CSS to. It works similarly to but on larger areas and more complicated HTML. Also, it supports nesting.

A single DIVision can be used, for example, to make a header, another for the navbar. Divs are usually defined using the CSS properties: margin, padding, border, height, width, and float.

So what can you do with Divs? Well, that’s the best part. Using divs, you can create multi column websites, you can make the website aligned in the center, instead to the side. You can create rules for large chunks of stuff including text and pictures.

Divs largely replaced the use of tables for page layout, which is great.

Recognizing Divs

Now, let’s look at how divs should be structured, I’ll be re-making a template I did in PSD a while ago, you can find in Exan’s Corner.

Template

Right as I’m looking at it, I can already distinguish four different sections in the template. The first is the header that contains the words “A Chiropractic Group”. The second section is the nav bar and the third is the content on the right. The fourth would be the footer. But when you’re thinking of divs, you have to think differently. This page will contain at least five different divs, if that. I’d probably cut it up to six or seven different ones. Why? Well let me show you.

NOTE: These are only examples, I am not actually recreating the template above.

Div illustration

Way too confusing, eh? Haha, there are just so many sections. Let me break it down for you and explain why it is this way. Also note that I did not add the “footer” div which would be number 7 on the bottom. It works the same way as the top div.

1. Header – Just a standard div that you’ll put at the beginning of your

tag. It will always be on top unless you set another div for absolute position. First thing you want to do while setting this division up is giving it an id or a class like this: . Great thing about divs is that you don’t NEED to put anything in there so let’s set up the rest of the properties. Second step is to set up the width and height using CSS:


#header {
width: 100%;
height: 150px;
margin: 0;
background: url(header.png) repeat-x;
}

This is basically how we set up all of the divs. Using the “repeat-x”, we don’t need to slice large portions of the header (thus adding to the size of the images needed to be downloaded) and we create a continuous header that will show up the same on all web-browsers/monitors. You’ll need to separately define the classes and ids for the logo as well as the text inside the header to match the PSD template, you might also have to create another separate div for the logo and one for the text, just in case.

2. Wrapper – I’m sure you’ve encountered that term before. Whenever you need two or more divs to show up next to each other, you need to “wrap” them in another div. In this case, it’ll be the content area, the content footer, and the sidebar that will be wrapped together. With the wrapper, we can also set it up so that the content shows up in the middle using the property “margin: 0 auto;” which will automatically center the content. Here, though, we just need to set up the background and the width of the wrapper using CSS. Once again, assign a class or an id to the div.



Sidebar div
You’d have the top div where you would use the first five or six pixels to create the corners, the bottom div for the same purpose. Also, use only PNG because JPEG does not support transparency. The middle would use a repeating background again. Here’s how you’d set it up:







#sidebar {
height: 600px;
width: 200px;
float: left;
}
#sidebartop{
height: 10px;
background: url(topside.png) no-repeat;
width: auto;
}
#sidebarmiddle {
height: auto;
background: url(sidebar.png) repeat-y;
width: auto;
}
#sidebarbottom {
height: 10px;
background: url(bottomside.png) no-repeat;
width: auto;
}

Now you’ve set up the sidebar. Do you get the idea yet? All you do with divs is set up portions of the page. The problem with this is that the sidebar height will be based on the content inside. For template-making purposes, set the height and change the CSS afterward if needed.
TIP: Create a special class called “clear” with these attributes: .clear { clear: both; height: 1px; } and add it at the end of every div that has the property “float”
4. Content Wrap: Here’s another tricky part. You see how the content has two different sections? One above with articles and one below with a pseudo footer? They’re aligned together so that means, we need another wrapper. This one will how 5. Content and 6. Pseudo-footer. The set up is easy.






#contentwrap {
width: 700px;
height: auto;
float:left;
}
#content {
width: 698px;
height: auto;
}
#psfooter {
width: 698px;
height: auto;
}

7. The Footer – This is the easiest part and probably the most common on all websites.


#footer {
height: 20px;
width: auto;
margin: 0 auto;
text-align: center;
}

That’s it! This is how you create a website out of a PSD template, basically. And this is how you use divs. It’s all about setting up the height, width, padding, margins. Really, there is no magic to it.
Altogether, here’s the basic layout in divs:





 
  
  
  
  
 

 
  
  
  
 







Using the CSS, you can define the rest of the properties as shown at the beginning (ie. width, height, float, margins, background, border etc).
In my next tutorial, I’ll be covering the correct way to slice a PSD template for HTML/CSS use. Remember to use the same measurements in photoshop as in CSS and HTML!
Overview
A 
 or division, is a section of a webpage that shares the same properties. They’re easily recognizable, there is a div for a sidebar, for the content, the header, and the footer.
If you want multiple divs next to each other, create a “wrapper” div that will group the multiple divs together. Next, make the divs “float:left” to ensure they’ll be next to each other. After every “float”ing div, employ the “clear” div with the properties “clear:both; height: 1px”.
If you want to have rounded corners on your webpage and still retain a variable height of the division, create three separate divs nested in the original. One for the top, one for the middle, and one for the bottom. The top and bottom will contain the part of the background with the rounded corners. USE PNG!
s may look confusing at first but once you start working with them, you’ll appreciate the options they provide you with.
See you next time!





Share and Enjoy:

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:

What you can do in Illustrator with basic skills

Admin — Mon, 05 Oct 2009 02:21:52 +0000

I’ve been trying to come up with a great DavePCguy logo for a while. I’m not entirely sure on what to do. It will definitely have to feature the title of our website “DavePCguy: Computers and Technology” or maybe I’ll have to come up with a new title. Something to point out we’re online, and that we focus on both consumer and producer ends.
Anyways, I thought I’d prepare a short article on Logos and Logo-types. I started creating logos when I picked up on Illustrator CS3. One of my class mates in my Digital Arts class told me that Illustrator is a great tool for creating art and brushes for Photoshop. I’m a Photoshop fanatic so this peaked my interest. She showed me some of her works that featured custom made logos, and vector art. It definitely set me on a new path especially since I like to learn new things all the time.

I picked up Illustrator and went through a lot of the tutorials online to learn the basics. It wasn’t hard, it took me about two weeks until I got the hang of it. I still have no idea how to create 3D vector art in illustrator, which according to some of the tutorials, is possible. I checked out the 3D features but I still can’t get the hang of it.

Anyways, let me show you what you can do with the basics of Illustrator:

First attempt at logo-making

Any professional would laugh at this but it was my first true attempt at trying something artistic in Illustrator. The main feature I tried to figure out while making this piece was the grid. The Illustrator Grid, guides, and smart guides are crazy useful while making logos and other artworks that require precision.

A circular thought representation

a circular thought representation

Here are two more. They are very similar, I changed around a few things. I played with the circles, obviously, and the gradients in this piece to make an effect. I actually used these as illustrations for a poem I wrote a while ago. These are simple to make but they are effective and nice to look at the same time.

Water Mark project

When I saw my friend Lydia ask for a watermark for her photography, I volunteered to help. Now, what you’re looking at is a couple hours of work, at least. She’s a photographer and that’s where the idea of the bottom three watermarks came from. She uses a Nikon D90 so I copied the picture and created a vector-based silhouette with her name instead of “Nikon” where the flash goes. As you can see, I even cut out the shutter button, and the lens as well as the “triangle” where the camera holder is. The camera silhouette was all done using the “pen tool.” The top two were made as a joke, even though Lydia actually considered those as well. Her icon picture is always some kind of an apple, and usually armed with sharp teeth. Does the apple look familiar? Well, it should. I used the Macintosh’s Apple design (source). I copied the design (using the pen tool, mostly), added simple shadows and highlights, cut the mouth open, and finally added a small stem. I think it was ingenious to make the apple eat the name of the photography company it represented. The project was cancelled, unfortunately, for the lack of time and determination. I think we just need to use a different font but that’s alright.

A circle poem

Okay, so you know me. I love poetry. I have a couple of blogs (a Chaos Organized, Poetry and Prose of the Broken Mind) that are concerned solely with writing. I couldn’t help myself but use illustrator to add a new dimension to my poetry. And actually, I used this project to brush up on my guides setting up skills as well as text modification. The pictures look rather simple but then again, simplicity comes with power.

Tonight poem illustration

By far my favorite illustration. I used it to represent yet another poem. It’s simple and it’s rather intriguing. Have you noticed yet? It does not feature any color, and it’s all made up of basic shapes put together. I really like it because it somehow resembles the yin yang but it’s its own picture at the same time.

Well, I hope you enjoyed this quick over-view of my logo-type/logo making skills. None of the logos above feature anything beyond basic skills to create. All you need it is time and to have fun!

Share and Enjoy: