T&S Web Design

So I was looking around the other day on Adobe’s website and found that there was a beta release for Fireworks CS4!!! So I downloaded and installed it and am currently using it. What’s even cooler is that as long as you own Fireworks CS3, you can use the serial number from your old Fireworks to keep the beta until a month after the actual product come out. Pretty sweet, eh?

Anyways, I really like Fireworks CS4. Honestly, I think it’s far, far better than CS3. The first thing I noticed when loading CS4 for the first time is that its layout is much more like Photoshop, Illustrator and Flash CS3. Instead of having all of your pallets open at once and crowding your screen, you can keep them into their own sections, and show them as needed.

You can even collapse them into single buttons, if you’re that good, or keep it the old way if you’d rather.

Also, Fireworks CS4 now allows the tabbing of different documents, so if you’re working on multiple documents they can be tabbed into one window, instead of have like 5 bajillion windows open at the same time… IE6 anyone??

Both of these features are excellent organizational tools, that will give you more room to design without the clutter of open panels.

There seems to be more options throughout CS4 as well. For instance you can space objects evenly by a certain percentage or pixel amount. There are a ton more path editing tools available, so that will make working with vector objects much easier.

Fireworks CS4 also has a ton more styles! Styles are organized into different categories on a dropdown menu, and there or tons of them! My favorite is the diagonal styles, which will make my job a lot easier if I want to make diagonals quickly.

I’m sure there is a ton more new features the CS4 has that I have yet to discover as well.

I have been using the beta for about a week and am convinced that the final of Fireworks CS4 will be superior to CS3.  I have found a few bugs here and there that I’m sure they will iron out (after all, it is a beta). Sometimes selecting things can be a pain, for some reason it takes two or three clicks to select objects most of the time.

The more I use Fireworks, the more powerful I realize it is, and with this update Fireworks will become an even greater tool for designing sweet websites.

Since Dave reviewed his mouse he’s only had for a week or two, I thought I’d go ahead and comment on my no-frills red Logitech V200 cordless mouse I’ve had for about six months now.

This is my third mouse in about two years, and it’s finally the one I think I’ll be sticking with. It’s simple and usable, and goes fantastic with my other red desk accessories. I use it on my desktop, and it’s only a hair smaller than some of the desktop mice I’ve used.

As you can see, the USB receiver isn’t nearly as small as Dave, but if you’re using it on a desktop instead of a laptop, it’s not a big deal at all. And if you do use it on a laptop, the receiver snaps on the bottom with no problem.

Unlike some of the other mice I have, this one will go a couple months before I have to swap out the batteries. I’ve literally had zero problems in the six months I’ve owned it.

I have always wondered what open source tools are out there for web design just in case I decide to boycott Adobe or Adobe goes bankrupt or something. It turns out there are some pretty good options for web design. None of them are quite as good as Fireworks or Dreamweaver, but they do get pretty close at least for the classic Apache, MySQL, PHP setup.

The best PHP editor actually turned out to be the best CSS and Javascript editor I could find as well. They are actually plugins to one of the best open source IDEs (Integrated Development Environments) available, Eclipse. Eclipse can be downloaded from www.eclipse.org.The plug-ins for PHP, CSS, and Javascript are PHP Development Tools, CSS Eclipse Plug-in, and JavaScript Editor Eclipse Plug-in, respectively. The PHP Plug-in was designed to work with XAMPP, a cross-platform Apache, MySQL, PHP, Perl distribution.

Last, but not least we have the GIMP. It is by far the most popular open source image editing application. It lacks many of the features of Photoshop, but most can be accomplished using either plug-ins or a combination of steps. Exporting images using slicing is much more difficult than using Fireworks, but it can still be done.

Using open source software would not be my first choice, but if something happened where I did not have access to Adobe products I would still be able to be productive.

The process of designing is obviously different for everyone, and it’s also hard to reflect on your own method. I often find myself alternating between routines and never sticking with one in particular. One of the most important things for me to remember is the resources that are available to me. I would say my three primary outlets for design inspiration are subscriptions to blogs, design websites and magazines. Whenever I find myself in a rut, I realize that I haven’t resorted to these. It’s vital to constantly reach out to others’ work in order to improve your own style and make it as versatile as possible.

My number one inspirations include:

Blog: Just Creative Design http://justcreativedesign.com/

Design Web Site: Design Meltdown http://designmeltdown.com/

Magazines: HOW Magazine and Communication Arts http://www.howdesign.com/GeneralMenu/ http://www.commarts.com/

Recently I decided to buy myself a new mouse, since my old one was getting, well, old. After some research, I found that the Logitech VX Nano got really good reviews, so I ordered one. I eneded up getting it in the mail about two weeks ago, and I have to say that this mouse is awesome!

The features of this mouse are awesome, a scroll wheel that you can change between hyper fast scrolling and precise scrolling, side scrolling, forward and back buttons (programmable), another button for switching programs (also programmable), low battery indicator, side grips, and best of all, the nano receiver. You know that usb receiver you use to get signal for your wireless mouse? If you’re lucky, then it might be the size of a thumb drive. How about the size of a nickel? The nano reciever is so small, you can stick it in your laptop and never take it out, since it can fit in the bag just as well with it in as with it out.

It can also be stored inside of the mouse and can be ejected with a little button which I thought was cool.

When I first got it, I tried scrolling it noticed how the scroll wheel spun all by itself which is awesome. I didn’t realize until later that it could be changed to the standard clicky scroll wheel until I pushed it down and it changed. At first I though I broke it! Pretty cool feature. It also came with Duracell batteries (always good), a USB extender dock thing for easy access to a desktop usb port and a nice mesh protective case. The only very small issue I have with this mouse is its size. While it’s not a tiny mouse, it still is not a full size mouse either. For someone with smaller hands it would be perfect, but I prefer larger mice. When I ordered it I knew that it was going to be smaller, so I don’t want to say that this mouse isn’t good because it’s small, it’s meant to be that way. If I want a bigger mouse for my desktop I would probably go with a Logitech MX or Logitech G5. Anyways, that’s my two cents. If you are considering getting a portable mouse, I would definitely recommend this mouse first.

Earlier this month, on August 5, we helped sponsor and participated in a miniature golf fundraiser for The Kids’ Place, an Edmond-based center that helps children and their adult family members cope with the loss of a loved one. About 80 participated in all and about $1,600 was raised.

Thanks goes out to Natasha Baird of Baird Agency of Farmers Insurance who organized the whole thing.

Leann, Hanna, Dave and I went to play golf. Leann and I also brought Josh, our four-year-old, and Jackson, our 19-month-old. Let’s just say we all did equally well.

While I snapped a few photos, the picture below that appeared in the “My Edmond” section of the Oklahoma City paper is what garnered the most attention.

Have you ever wanted to create rounded corners with alpha transparency, but didn’t think you could get it to work in IE6? Believe it or not, it can be done. It requires quite a bit of HTML, but this is a sacrifice that must be made in order for the alpha transparency to work.

First, we must separate the box into three sections: top, middle, and bottom. The top and bottom must be separate from the middle if you plan on having a full background behind all the content in the box. This way the transparency on the corners will not show the background from the middle section. I divided this into three separate DIVs:

<div class="ContentTop"></div>
<div class="ContentMiddle"></div>
<div class="ContentBottom"></div>

Next, we need to add several DIVs inside the top and bottom sections that will act as the corners and center section(s). (We may need more than one center section if there is a repeating background with a shadow as shown in the image on the right.) We also need to apply styles to these corners and sections. For starters, we know that the left and right corners must be the same size as the background images, since this is the only way to get IE6 to properly display alpha transparency. We will use absolutely positioned DIVs to achieve this. Listed below is the code for all browsers except IE6. The code for IE6 will be shown last. However, we still need to consider the shortcomings of IE6 when designing the rounded corners.

<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle"></div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>

<style>
  .ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
  .ContentTop { position: relative; padding: 0px 42px 0px 38px; }
  .ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
  .ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
  .ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
  .ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
  .ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>

Optionally, there may be a shadow on the right or left of the content. This can be pretty tricky, especially when trying to get it to work in IE6. In fact, it won’t work completely in IE6 when javascript is disabled. I used a shadow on the right. Here is the code:

<div class="ContentMiddle">
  <div class="Content"><!-- Content Goes Here --></div>
  <div class="ContentRight"></div>
</div>

<style>
  .ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 5px; }
  .Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
  .ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 6px; }
</style>

Now, to add in all the IE6 code. We basically replace all the transparent background images with the filter property. We also add in some javascript code to make the right shadow the full height of its container.

<!--[if lt IE 7]>
<style>
  .ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
  .ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
  .ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
  .ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
  .ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
  .ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->

Finally, putting it all together we have:

<div class="ContentTop"><div class="ContentTopLeft"></div><div class="ContentTopRight"></div><div class="ContentTopCenter"></div></div>
<div class="ContentMiddle">
  <div class="Content"><!-- Content Goes Here --></div>
  <div class="ContentRight"></div>
</div>
<div class="ContentBottom"><div class="ContentBottomLeft"></div><div class="ContentBottomRight"></div><div class="ContentBottomCenter1"></div><div class="ContentBottomCenter2"></div></div>

<style>
  .ContentTop, .ContentTopLeft, .ContentTopRight, .ContentTopCenter { height: 47px; }
  .ContentTop { position: relative; padding: 0px 42px 0px 38px; }
  .ContentTopLeft { background: url(images/contenttopleft.png) bottom left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentTopRight { background: url(images/contenttopright.png) bottom right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentTopCenter { background: url(images/contenttop.png) bottom left repeat-x; }
  .ContentMiddle { height: 1%; overflow: auto; position: relative; padding-right: 4px; }
  .Content { background: url(images/contentbg.jpg) top center no-repeat; padding: 30px; }
  .ContentRight { background: url(images/contentright.png) top right repeat-y; height: 100%; position: absolute; right: 0px; top: 0px; width: 4px; }
  .ContentBottom, .ContentBottomLeft, .ContentBottomRight, { height: 52px; }
  .ContentBottom { position: relative; padding: 0px 42px 0px 38px; }
  .ContentBottomLeft { background: url(images/contentbottomleft.png) top left no-repeat; left: 0px; position: absolute; top: 0px; width: 38px; }
  .ContentBottomRight { background: url(images/contentbottomright.png) top right no-repeat; position: absolute; right: 0px; top: 0px; width: 42px; }
  .ContentBottomCenter1 { background: url(images/contentbottom.png) top left repeat-x; height: 47px; }
  .ContentBottomCenter2 { background: url(images/contentshadow.png) top left repeat-x; height: 5px; }
</style>

<!--[if lt IE 7]>
<style>
  .ContentTopLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopleft.png', sizingMethod='scale'); }
  .ContentTopRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contenttopright.png', sizingMethod='scale'); }
  .ContentRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentright.png', sizingMethod='scale'); height: expression(this.parentNode.clientHeight + 'px'); }
  .ContentBottomLeft { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomleft.png', sizingMethod='scale'); }
  .ContentBottomRight { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentbottomright.png', sizingMethod='scale'); }
  .ContentBottomCenter2 { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/contentshadow.png', sizingMethod='scale'); overflow: hidden; }
</style>
<![endif]-->

Happy Coding!

Probably one of the most important pieces of knowledge a designer could have is understanding the difference between CMYK and RGB color modes.

CMYK (Cyan Magenta Yellow Black) -for printing (subtractive color)
RGB (Red Green Blue) - for screen display (additive color)

Say you have white paper with black dots, and you allow 50% of the paper to show through: you would have a shade of gray. Depending on the concentration of the dots is what gives you different shades. CMYK works the same way with Cyan, Magenta and Yellow, and this is how you get different colors (1,000,000 options). By changing the shade of your paper, you can also achieve different colors.

Rather than using dots, RGB color shades are produced with different levels from the electronic source. Unlike the 100 variations per color using CMYK, there are 256 shades/levels of brightness per color using RGB, which means 16, 77,216 colors total.

Knowing the difference between the two is vital and the change is very apparent in your work.

So as an aspiring designer in the digital world, I am always looking for ways to increase my knowledge about the programs I use to design, mainly Photoshop, Illustrator and Flash. Personally, I got my footing through school, and then started reading books and looking at tutorials online. All of these have helped me gain knowledge, but recently I found out another excellent source for learning about these programs. Podcasts!!

The other night I was looking through the free podcast directory for some videos for my ipod, when I stumbled upon all sorts of podcasts that had video tutorials for pretty much anything I would ever need! There are hundreds of these video podcasts that have tips and tricks from professionals and they are all free! So if you are ever in need of some Photoshop knowledge in advanced layering on 3D objects or just need to know how to touch up an image, check out the free podcasts!!! Here is a link to get you started with Photoshop, it will open up itunes and send you to the podcast directory (you don’t have to have an itunes account to get podcasts).

I frequently get asked questions about domain names by small business owners. Here are some of those questions, along with the simple versions of the answers.

Q: How do I pick my domain name?

A: The easiest thing to do is find a short version of your business name. So if your business name is, for example, Texas Concrete, you might see if the following is available:

• texasconcrete.com
• txconcrete.com

Q: What if the domain name I want is already taken?

A: Maybe you’ve settled on the perfect domain name, but it’s already taken. The good news is, the domain may be for sale. If you go to the site and there’s an offer to sell the domain name, you just have to be willing to either pay what they’re asking, or to bargain with them.

On the other hand, someone may actually be using the website. In that case, it can’t hurt to ask them if they’re interested in selling it. But if they aren’t, you’ll need to pick another domain name.

Websites like GoDaddy.com that sell domain names will often suggest other domain names if the one you want is taken. However, there’s other sites like Domainsbot.com that are a bit more flexible and dynamic in their suggestions. That’s the tool I generally recommend to clients.

Alternatively, you can just do something like appending your city or state to your domain name, or just pick something associated with your industry. You might use your product instead.

Let’s look at an example. We’ll talk about a hypothetical company, J.R. Technologies, that primarily sells and repairs laptops, and is located in California. Well, jrtechnologies.com is already taken, but the owner really wants a .com. Some other options might include:

• JRLaptops.com
• CALaptops.com
• LaptopsInCA.com

Hopefully you get the idea.

Q: How much does a domain name cost?

It varies. Currently the most expensive is .tv, which tends to run around $35. Another, .me, is $20. The more common ones, like .com, .net, .org and so on tend to run under $10.

Q: Is it better to get the .com?

Good question. The .com, .org, etc. (called top-level domains or TLDs) actually all have meanings. For example, .com is short for commercial, and is typically used by for-profit businesses. On the other hand, .org is for organizations, and is typically used by non-profit organizations.

There are also many TLDs created for specific countries, including .us for United States, .uk for United Kingdom, and so on. Some countries have TLDs that have a more common meaning that they’ve chosen to capitalize on. The country of Tuvalu’s number one export is their TLD, .tv. Montenegro made their domain, .me, available after just over a year of being an independent country.

So if you are a for-profit business, it’s customary to get the .com. If you are a non-profit organization, it’s customary to get the .org. If you run a television station or program, the .tv TLD is appropriate.

Q: If I get the .com, should I get any others as well? And will that make it more expensive?

The more you get, the more expensive it will be. However, gone are the days (back in the 90’s) when domain names were $70+ per year. So it’s pretty affordable to purchase domain names just to make sure others don’t get them first. Even if you purchase the .org as a commercial business, this will keep your competitors from buying that domain name and redirecting it to their own site. It will also keep a “domain squatter” from purchasing it with the express purpose of selling it back to you for profit.

Hopefully that answered some of your questions about domain names as well.