Before you create your perfect UI tabs, you'll want to think about how you'll use the tabs on your web  site. Think about the different types of information on your web site (or web application,  if you're designing software). If it's not clear what information might go where and you can find a few people willing  to  help, you might try a card-sorting exercise to  untangle your categorization. 

So you've designed your site and figured out the labels and order of your tabs. Next  you can actually start designing your tabs, and deciding what they should look like. Most sites that use tabs show the tabs in  3 different states:

• a selected tab, which shows that  "you are here"
• a regular tab, positioned behind the selected tab
• a mouseover state for the tab, to indicate the tabs are clickable

So, let's grab some colors and rock and roll with the gradients,  right?

Not quite. We're going to be a little more  thoughtful with these tabs, and look at some subtle design decisions about how these tabs will look. We'll save designing the mouseover  design for last, since generally the mouseover (or hover) state has a brighter, more intense look, and that would be distracting at this stage of the design.

We're going to do mockups, just like real graphic designers do, and experiment with light and dark and placement. 

Read the rest of this entry »

Share This

I just got around to trying this trick out in Photoshop and I wish I'd done it earlier. I've carped about how each update to Photoshop increases the complexity of using Photoshop exponentionally, as users paddle through palettes and muddle through menus in order to find what they're looking for.

 By coloring various menu and palette items, your eye will be quickly be drawn to them. Out of a long list of commands, the one you use most frequently can be color coded easily. You can also toggle the visibility of commands. You'll want to be careful with this one because the menu or palette item will be gone if you turn off the visibility.

To get to this nifty trick, Select Window > Workspace > Keyboard Shorcuts & Menus. Click the Menu tab, and browse through the Application Menu Commands to find the commands you want to highlight. When you find the menu command you want to colorize, click the word None to reveal a dropdown of different colors.

Share This

 This tip will make looking at everything on the computer easier if you're using a CRT monitor. This tip won't improve LCD (flat screen) displays, but if you have a big boxy monitor this could prevent headaches. On your Windows desktop, right-mouse click and select Properties. Select the Settings tab, then the Advanced tab at the bottom right of the  dialog box.

 After Clicking the Advanced button, you'll see several new tabs at the top of the dialog box. Select Monitor. If the screen refresh rate is below 100, you'll want to tweak it to a higher setting if you're able. There's a checkbox on the screen that you'll want to keep checked to prevent you from selecting a setting  that might do damage to your hardware. The refresh rate is how many times per minute your  screen repaints. Higher refresh rates means less eyestrain.

Sorry, Mac friends, but this is a Windows only tip.

Share This

I truly understand the wonderfulness that is Firefox. It's environmentally friendly, aesthetically pleasing, and will lengthen my lifespan. I do use it whenever I can.

However, I recently took a job where all the computers are locked. IE is installed by default, and users can't install additional software. Thousands of users, as a matter of fact, cannot switch to Firefox.  The company controls the desktops so that they can roll out mass updates and patches, security fixes, and so forth. It's a question of budgeting support. They had to choose a browser to support several years ago, and that browser was IE. I'm not advocating their choice, I'm just living with the consequences, and if you are a web designer, so are you.

I'm shocked at how many pages refuse to support IE. While browsing the web, I'm amazed at how often I'll hit a page that tells me I can't see a site unless I upgrade to Firefox. It's often a lazy designer's site who doesn't want to even try to work things out so they look at least legible on IE.  It is, of course, everyone's right to choose to display their content, and I certainly understand that IE is not easy to accomodate. But are website designers and owners aware that people in large corporations often don't have a choice? I didn't until I took this job.

Share This

When I work in Photoshop, I have to admit that I'm a bit of a perfectionist when it comes to pixels. It was just recently that I was introduced into the Dark Arts of Pixel Perfection using Photoshop Shapes. I'd like to share that knowledge with you.

To create the standard rounded corner tab in Photoshop, select the Rounded Rectangle Tool from the toolbox by clicking and holding the Rectangle tool down to reveal the other nifty shape tools available.

I have to make a confession. When the shape tools first came out, I was wary. They were new and we hadn't been properly introduced. Like any first date, there were fumbles and awkward moments before we were comfortable with one another. One thing I had to reconcile myself to is that the default setting, Shape Layers, confounded the heck out of me. Shape paths were a little easier to understand, but when I want to work in Illustrator, I'll work in Illustrator. Working with shapes as pixels - ahhhhh, that was the ticket to shape happiness for me.

So, once you've selected the Rouned Rectangle, select Fill Pixels. The one disadvantage with working with pixels rather than Shape Layers or Paths is that it doesn't automatically create its own layer. Next, you'll want to select the size of your rounded corner. I've put together a guideline for selecting tab roundness for you, and you can even download it as a layered Photoshop file.

Ready to rock and roll with our rounded rectangle? Not yet. First, we must use the Secret Sauce for Pixel Perfection. On the toolbar, next to The Blob shape, is a nearly hidden menu named Geometry Options. Select the downward facing menu to open the Geometry Options. The very last checkbox on this screen says "Snap to Pixels" and that's the secret. Click that checkbox. This forces the pixels to act correctly, so you don't get half-alisased edges and corners as seen in the not perfect vs. perfect pixel examples.

Share This

Before you create your perfect UI tabs, you'll want to think about how you'll use the tabs on your web  site. Think about the different types of information on your web site (or web application,  if you're designing software). If it's not clear what information might go where and you can find a few people willing  to  help, you might try a card-sorting exercise to  untangle your categorization. 

So you've designed your site and figured out the labels and order of your tabs. Next  you can actually start designing your tabs, and deciding what they should look like. Most sites that use tabs show the tabs in  3 different states:

• a selected tab, which shows that  "you are here"
• a regular tab, positioned behind the selected tab
• a mouseover state for the tab, to indicate the tabs are clickable

So, let's grab some colors and rock and roll with the gradients,  right?

Not quite. We're going to be a little more  thoughtful with these tabs, and look at some subtle design decisions about how these tabs will look. We'll save designing the mouseover  design for last, since generally the mouseover (or hover) state has a brighter, more intense look, and that would be distracting at this stage of the design.

We're going to do mockups, just like real graphic designers do, and experiment with light and dark and placement. 

Read the rest of this entry »

Share This

I just got around to trying this trick out in Photoshop and I wish I'd done it earlier. I've carped about how each update to Photoshop increases the complexity of using Photoshop exponentionally, as users paddle through palettes and muddle through menus in order to find what they're looking for.

 By coloring various menu and palette items, your eye will be quickly be drawn to them. Out of a long list of commands, the one you use most frequently can be color coded easily. You can also toggle the visibility of commands. You'll want to be careful with this one because the menu or palette item will be gone if you turn off the visibility.

To get to this nifty trick, Select Window > Workspace > Keyboard Shorcuts & Menus. Click the Menu tab, and browse through the Application Menu Commands to find the commands you want to highlight. When you find the menu command you want to colorize, click the word None to reveal a dropdown of different colors.

Share This

 This tip will make looking at everything on the computer easier if you're using a CRT monitor. This tip won't improve LCD (flat screen) displays, but if you have a big boxy monitor this could prevent headaches. On your Windows desktop, right-mouse click and select Properties. Select the Settings tab, then the Advanced tab at the bottom right of the  dialog box.

 After Clicking the Advanced button, you'll see several new tabs at the top of the dialog box. Select Monitor. If the screen refresh rate is below 100, you'll want to tweak it to a higher setting if you're able. There's a checkbox on the screen that you'll want to keep checked to prevent you from selecting a setting  that might do damage to your hardware. The refresh rate is how many times per minute your  screen repaints. Higher refresh rates means less eyestrain.

Sorry, Mac friends, but this is a Windows only tip.

Share This

I truly understand the wonderfulness that is Firefox. It's environmentally friendly, aesthetically pleasing, and will lengthen my lifespan. I do use it whenever I can.

However, I recently took a job where all the computers are locked. IE is installed by default, and users can't install additional software. Thousands of users, as a matter of fact, cannot switch to Firefox.  The company controls the desktops so that they can roll out mass updates and patches, security fixes, and so forth. It's a question of budgeting support. They had to choose a browser to support several years ago, and that browser was IE. I'm not advocating their choice, I'm just living with the consequences, and if you are a web designer, so are you.

I'm shocked at how many pages refuse to support IE. While browsing the web, I'm amazed at how often I'll hit a page that tells me I can't see a site unless I upgrade to Firefox. It's often a lazy designer's site who doesn't want to even try to work things out so they look at least legible on IE.  It is, of course, everyone's right to choose to display their content, and I certainly understand that IE is not easy to accomodate. But are website designers and owners aware that people in large corporations often don't have a choice? I didn't until I took this job.

Share This

When I work in Photoshop, I have to admit that I'm a bit of a perfectionist when it comes to pixels. It was just recently that I was introduced into the Dark Arts of Pixel Perfection using Photoshop Shapes. I'd like to share that knowledge with you.

To create the standard rounded corner tab in Photoshop, select the Rounded Rectangle Tool from the toolbox by clicking and holding the Rectangle tool down to reveal the other nifty shape tools available.

I have to make a confession. When the shape tools first came out, I was wary. They were new and we hadn't been properly introduced. Like any first date, there were fumbles and awkward moments before we were comfortable with one another. One thing I had to reconcile myself to is that the default setting, Shape Layers, confounded the heck out of me. Shape paths were a little easier to understand, but when I want to work in Illustrator, I'll work in Illustrator. Working with shapes as pixels - ahhhhh, that was the ticket to shape happiness for me.

So, once you've selected the Rouned Rectangle, select Fill Pixels. The one disadvantage with working with pixels rather than Shape Layers or Paths is that it doesn't automatically create its own layer. Next, you'll want to select the size of your rounded corner. I've put together a guideline for selecting tab roundness for you, and you can even download it as a layered Photoshop file.

Ready to rock and roll with our rounded rectangle? Not yet. First, we must use the Secret Sauce for Pixel Perfection. On the toolbar, next to The Blob shape, is a nearly hidden menu named Geometry Options. Select the downward facing menu to open the Geometry Options. The very last checkbox on this screen says "Snap to Pixels" and that's the secret. Click that checkbox. This forces the pixels to act correctly, so you don't get half-alisased edges and corners as seen in the not perfect vs. perfect pixel examples.

Share This

Before you create your perfect UI tabs, you'll want to think about how you'll use the tabs on your web  site. Think about the different types of information on your web site (or web application,  if you're designing software). If it's not clear what information might go where and you can find a few people willing  to  help, you might try a card-sorting exercise to  untangle your categorization. 

So you've designed your site and figured out the labels and order of your tabs. Next  you can actually start designing your tabs, and deciding what they should look like. Most sites that use tabs show the tabs in  3 different states:

• a selected tab, which shows that  "you are here"
• a regular tab, positioned behind the selected tab
• a mouseover state for the tab, to indicate the tabs are clickable

So, let's grab some colors and rock and roll with the gradients,  right?

Not quite. We're going to be a little more  thoughtful with these tabs, and look at some subtle design decisions about how these tabs will look. We'll save designing the mouseover  design for last, since generally the mouseover (or hover) state has a brighter, more intense look, and that would be distracting at this stage of the design.

We're going to do mockups, just like real graphic designers do, and experiment with light and dark and placement. 

Read the rest of this entry »

Share This

I just got around to trying this trick out in Photoshop and I wish I'd done it earlier. I've carped about how each update to Photoshop increases the complexity of using Photoshop exponentionally, as users paddle through palettes and muddle through menus in order to find what they're looking for.

 By coloring various menu and palette items, your eye will be quickly be drawn to them. Out of a long list of commands, the one you use most frequently can be color coded easily. You can also toggle the visibility of commands. You'll want to be careful with this one because the menu or palette item will be gone if you turn off the visibility.

To get to this nifty trick, Select Window > Workspace > Keyboard Shorcuts & Menus. Click the Menu tab, and browse through the Application Menu Commands to find the commands you want to highlight. When you find the menu command you want to colorize, click the word None to reveal a dropdown of different colors.

Share This

 This tip will make looking at everything on the computer easier if you're using a CRT monitor. This tip won't improve LCD (flat screen) displays, but if you have a big boxy monitor this could prevent headaches. On your Windows desktop, right-mouse click and select Properties. Select the Settings tab, then the Advanced tab at the bottom right of the  dialog box.

 After Clicking the Advanced button, you'll see several new tabs at the top of the dialog box. Select Monitor. If the screen refresh rate is below 100, you'll want to tweak it to a higher setting if you're able. There's a checkbox on the screen that you'll want to keep checked to prevent you from selecting a setting  that might do damage to your hardware. The refresh rate is how many times per minute your  screen repaints. Higher refresh rates means less eyestrain.

Sorry, Mac friends, but this is a Windows only tip.

Share This

I truly understand the wonderfulness that is Firefox. It's environmentally friendly, aesthetically pleasing, and will lengthen my lifespan. I do use it whenever I can.

However, I recently took a job where all the computers are locked. IE is installed by default, and users can't install additional software. Thousands of users, as a matter of fact, cannot switch to Firefox.  The company controls the desktops so that they can roll out mass updates and patches, security fixes, and so forth. It's a question of budgeting support. They had to choose a browser to support several years ago, and that browser was IE. I'm not advocating their choice, I'm just living with the consequences, and if you are a web designer, so are you.

I'm shocked at how many pages refuse to support IE. While browsing the web, I'm amazed at how often I'll hit a page that tells me I can't see a site unless I upgrade to Firefox. It's often a lazy designer's site who doesn't want to even try to work things out so they look at least legible on IE.  It is, of course, everyone's right to choose to display their content, and I certainly understand that IE is not easy to accomodate. But are website designers and owners aware that people in large corporations often don't have a choice? I didn't until I took this job.

Share This

When I work in Photoshop, I have to admit that I'm a bit of a perfectionist when it comes to pixels. It was just recently that I was introduced into the Dark Arts of Pixel Perfection using Photoshop Shapes. I'd like to share that knowledge with you.

To create the standard rounded corner tab in Photoshop, select the Rounded Rectangle Tool from the toolbox by clicking and holding the Rectangle tool down to reveal the other nifty shape tools available.

I have to make a confession. When the shape tools first came out, I was wary. They were new and we hadn't been properly introduced. Like any first date, there were fumbles and awkward moments before we were comfortable with one another. One thing I had to reconcile myself to is that the default setting, Shape Layers, confounded the heck out of me. Shape paths were a little easier to understand, but when I want to work in Illustrator, I'll work in Illustrator. Working with shapes as pixels - ahhhhh, that was the ticket to shape happiness for me.

So, once you've selected the Rouned Rectangle, select Fill Pixels. The one disadvantage with working with pixels rather than Shape Layers or Paths is that it doesn't automatically create its own layer. Next, you'll want to select the size of your rounded corner. I've put together a guideline for selecting tab roundness for you, and you can even download it as a layered Photoshop file.

Ready to rock and roll with our rounded rectangle? Not yet. First, we must use the Secret Sauce for Pixel Perfection. On the toolbar, next to The Blob shape, is a nearly hidden menu named Geometry Options. Select the downward facing menu to open the Geometry Options. The very last checkbox on this screen says "Snap to Pixels" and that's the secret. Click that checkbox. This forces the pixels to act correctly, so you don't get half-alisased edges and corners as seen in the not perfect vs. perfect pixel examples.

Share This