Advertise here via BSA

We all hit points in our work, especially as designers, that seem a little hopeless. Whether it’s from the creative design aspect or from the technical coding side, or even the flow of business, there’s no way around it – we will have a few dull moments. But, dear reader, never fear – there are always ways to minimize these low points, and allow our high points to reach new heights.

First off, a warning

This warning goes for anyone really, both designers and non-designers; be careful when defining just what being “productive” really means. We often can mistakenly equate productivity with the amount of money or the number of jobs we receive; productivity, in all reality, is a much broader term than we give it credit for. Productivity, in its most natural form, is the verb form of production; it basically means the act of producing, and creation. With that said, productivity is often measured conventionally in order to assess the different methods and practices we employ, and that does deserve the respect it requires. So, don’t throw away your benchmarks just yet, but do realize that it will benefit you to redefine your holistic view of productivity. Examples:

• Learning about your area of practice can be very productive.
• Learning about surrounding areas of practices that are related to yours can also be very productive.
• Taking time off can be very productive.

Say what? You mean, I can walk into my boss’s office and let them know I’m not coming in for the rest of the week, and they will give me a raise?

No.

The world isn’t quite that easy. Here’s a few ways to increase your productivity.

Note: As you can see above, some of these “productivity tips” may not necessarily be what your boss believes to be productive (unless, of course, he’s as high-class as you and is reading FUEL blogs…). Be careful in the application of the following, and remember that sometimes you do have to follow the definition of productivity as outlined by your boss’s standards. Of course, if you’re your own boss… This is article may just change your life. Or not. Let’s find out, shall we?

On to the list…

1. Become an Expert

We’ve said it before, folks – it makes much more sense for you to find an area in which to focus (whether that is design, front-end development, backend development, or even just creative production) and hone in on it. Don’t just get to the point where you know your stuff pretty well… Instead, know it so well you could teach it from front to back.
Memorize things. Read through jQuery documentation or tutorials in your downtime, or practice with pro bono work to sharpen your production skills. Find your niche, and sprint towards that direction.
The why: Being an expert will allow you to move forward in your job unhindered. Having the knowledge available to you will cut out the unneeded “guess and check” time, and will open up your freedom for creative expression.

2. Exercise

Bet you didn’t see that one coming. Don’t worry, I’m not giving you a workout plan and a bottle of overly-priced herb pills… It’s a well-known-fact that exercise will help your productivity. In particular, exercise has been studied and shown to increase your ability to learn. There’s quite a bit of science behind it, but the proof is in the pudding… What does that even mean? Anyway, just try it out yourself. “Exercise” doesn’t mean that you have to kill yourself in the gym for 3 hours a day. Listen to the latest YayQuery podcast while you take a jog around your neighborhood (or on a treadmill if it’s too cold) or go get a cheap bike from Wal-Mart and ride around town with a few friends. Even if it’s thirty minutes a day, exercise can drastically improve the way you work and the way you feel about yourself.

3. Get a Google Calendar

A much more specific example, admittedly… It’s a well known fact around FUEL that the tools Google offers are pretty great. Specifically, Google Calendar is very useful, especially if you already have a Google account.

Here’s the big deal: Google Calendar syncs via CalDAV, which means it comes automatically to your iPhone or Android, iCal, Outlook, and any other calendar program worth its salt. We know you may already be using some kind of calendar that you love. Google allows you to import calendars from feeds and local files as well. There’s no way we could list every feature here, but this would mean that you could create a collaborative calendar between you and any specific employee/coworker/family member/client/you-get-the-idea; these shared calendars also can be controlled to be “only viewable” or “show only busy/free” or “completely editable.” The flexibility is incredible.

Oh, and don’t forget, Google users… with so much of your information available on Google already as a Google account holder, integration is pretty simple with your other everyday tasks, and Google is making it a point to consolidate functionality across their different products.
Note: Don’t forget to back up your appointments before moving them to Google, just in case your computer you all of a sudden for something.

Okay, so why is this such a big deal?
Once you get in the swing of using your Google calendar, it will be accessible from anywhere you are. You don’t have to worry about downloading or adding the same entry multiple times. If you are an employer/supervisor, this could be the solution to scheduling, or any number of other things.

A Few Other Tools

Surprise for Windows users!

Since we’ve admittedly been a bit biased towards Mac OS X in the past, we figure it’s about time to throw Windows users a bone or two. (Oh come on, you can take a joke.) GNOME Do is a similar program to Blacktree’s Quicksilver for Mac users. This will change your workflow forever! Be sure to read up on its capabilities. Also, take a look at this Flickr set to see some of GNOME Do in action.

A Little bit of 7 in your X

For mac users, you may want to check out Cinch. One of the cool features introduced in Windows 7 is its window resizing shortcuts. If you haven’t seen it yet, just give it a glance at least.

What are ways you’ve employed that have made you more productive?

Advertise here via BSA

Today’s three-minute-tip will again revolve around Photoshop. We will take a look at a few ways of working better with smart objects. For this tip, you will need both Illustrator and Photoshop. I’ll be working in CS4.

Vector vs. Raster

A smart object is basically a vector object inside Photoshop’s (mostly) raster world. If you don’t know the difference between vector and raster, a basic rundown goes like this;

Vector images are created by using calculated lines. This essentially means that the curves, shapes, lines, et cetera are displayed as a result of a lot of calculations on the part of the program you are using (in this case, Illustrator and Photoshop). It’s kind of like an extended version of what you learned with point-plotting, sine waves, and function graphs in geometry, mixed with colors and transparency values.

Raster images are basically plots of color on a pixel map. This means that each pixel in your image is assigned a color, and depending on what kind of file, sometimes an alpha value.

If this still doesn’t make sense, the best thing to remember is basically that vector images can be blown up or shrunk to any size and will not lose quality; a raster image will lose quality if blown-up above its original size. Vector, thus, is the preferred format for logo design and typographically based design. However, vector images are somewhat limited in their ability to be manipulated in Photoshop. Be sure to check out the last tip in the article for a possible workflow-based solution to this problem!

What is a smart object?

A smart object in Photoshop can be one of two things.

1. A version of a raster layer that doesn’t lose quality when it is transformed down and then back up
2. One or multiple vector lines/shapes/information

Today, we will only be dealing with the second variety.

Traditionally, vector images are created inside Illustrator; however, as many designers have found, it helps to be able to move from Illustrator to Photoshop fluidly. One of the easiest ways to do this is by using – you guessed it – copy and paste.

So, say we need a striped design we have created inside Illustrator for a design we’d like to finalize in Photoshop. What is an easy way to get it into Photoshop? Cmd or Ctrl + C, of course! With the document open, copy either with the copy keyboard shortcut (Cmd or Ctrl + C) or by going to Edit > Copy.

Switch to your active document in Photoshop and either use the keyboard shortcut for paste (Cmd or Ctrl + V) or choose Edit > Paste. You are given the option to paste with different forms. Smart Object is one of the choices. Make sure the radio button next to smart object is selected, and press OK.

You then have the option of transforming the object in the same manner as you would if you chose Edit > Free Transform. Here, you can scale, skew, etc.

Once you have made any transformations you’d like to make, press Enter to accept the transformation. In your layers palette you will see a smart object layer.

If you decide later that you’d like to change something about the object, simply double-click the layer thumbnail. This will open an Illustrator editing window. Once you have made any changes you’d like to make, choose File > Save and exit the window.

The Photoshop document will automatically reflect the changes.

Tip: It helps to duplicate smart objects up front so that if you decide to use any kind of filters or warping on the layer that requires you to rasterize it, you will have a copy of the original vector object. An easy way to duplicate layers is to first select the layer you’d like to duplicate, then press Cmd or Ctrl + j. After doing this, you can place it in a folder, such as the “Originals” folder below, along with any other layers you’d like to preserve the original version of. This is mostly effective when using effects or filters that “destroy”, or change the value or location of, the actual pixels in the layer.

Advertise here via BSA

For today’s Three Minute Tip, we will once again take a look at a very effective technique in Photoshop that just about anyone could master.
Many sites are adorned with wonderful looking, full color button sets (look for some possible freebies in the future!). A popular and effective practice in interface design is to have a button that has multiple states (hover, inactive, down, visited, etc). These different states help the user understand how they are interacting with the interface.

One of the easiest ways to create a color state is to use an adjustment layer in Photoshop. In basically one step, you can create great looking buttons for your interface!

Let’s get it done.

Open your color button in Photoshop. It is important that your button has a transparent background; you will likely be opening a png image unless you have a layered PSD file. If you do have a layered PSD file, it would be easier to put the button layers into a layer folder.

Next, click the “Create a New Fill or Adjustment Layer” button at the bottom of the Layers Palette. This will give you a flyout menu with multiple options, some of which you may be familiar with from the Image > Adjustments menu. For this tutorial, we will select the Hue/Saturation option.

Adjust the settings in the Hue/Saturation window (the screenshot is of Photoshop CS4, but the options are very similar in other CS versions) until you are happy with the result. I’ve chosen to desaturate the button entirely, and add a bit of lightness into the button (value for saturation: -100; value for lightness: +20). These aren’t the only settings possible, of course; perhaps you only want to desaturate the button slightly, or even just add lightness? This is the place where your discretion is in play.

So your final result will look something like this if you chose the options suggested.

The Best Part is…

But wait! It gets better. There are a few perks with using this technique. Adjustment layers are non-destructive; this basically means you can always change your values later if you don’t like the result. This also means you always keep the original button underneath the adjustment layer.

Also, you can always drag adjustment layers between multiple Photoshop documents; you can even take all of your buttons and place them beneath a single adjustment layer in one Photoshop document, and voilà! You’ve created another button state for all of your buttons with just one layer. From there, all you have to do is save as a PNG with transparency, and you’re set!

We could go on, but…

There are a million things we could say about adjustment layers in Photoshop, and how effective and time saving they are; but hey, we’re trying to get this done in three minutes, right? Don’t worry, you can always come back for more FYI tips in the future. Follow use on Twitter for the latest information!

Advertise here via BSA

We are really excited today about the first of many of a brand new posting series that we hope you will love as much as we love creating it. Officially introducing (drumroll, please…) Three Minute Tips!

Three Minute Tips are going to offer quick advice to help you. These ideas may be mini-tutorials, or quick concepts about user experience. Today, we will actually pack in about nine minutes worth of tips with these three quick tips for Photoshop techniques that you may not already know about.

1. Steal Some Color

Sometimes, you want to take color from something that isn’t inside Photoshop. Perhaps you like a certain color scheme in another application you use, or even a specific color you find in a picture on the web. Sure, you could take a screenshot of the app or the browser window and open it in Photoshop; but why would you do that when Photoshop can read color no matter what application you are using? To steal color from, say, kuler.com quickly and easily, follow these steps.

1. Create a new document if you do not already have a document open.
2. Open the color picker by clicking the foreground color (bottom left)
3. Make sure that the window that has your target color is visible behind Photoshop’s open window
4. Click inside the open Photoshop document and, while holding the mouse button, drag out of the Photoshop window to the target color.

See the illustration below for the technique described.

2. Enlarge Layer Panel Thumbnails

I’ve been using Photoshop for years, and for years I have wanted to know how to increase the size of the tiny little layer thumbnail representations in the layers palette. This in particular is important for being able to see a layer mask. I never took the time to look it up, but I finally took the time to figure it out when I (inevitably) got frustrated with it. Hey, we love Photoshop, but sometimes… there’s a few flaws there. (Sorry Adobe. No one is perfect.) It’s oddly quite a simple little setting tweak, but one that will save me (and hopefully you) a lot of upsetting effects that result from tiny-thumbnail-stress-syndrome.

What you do:

1. Open the layer palette.
2. Click the flyout menu on the right side, and choose “Panel Options”
3. Click the radio button next to your desired thumbnail size
4. Press Ok

3. Make Selection from Alpha Information of a Layer

This one may be the fastest of them all. Maybe even two minutes. Or really, as long as it takes for you to make a click. That’s how long it takes to make a selection from the alpha information of a layer in Photoshop.

For those of you who are unfamiliar, alpha deals with the amount of transparency of a given pixel. So, a pixel’s information includes both color (for screen, RGB) and alpha (a). This is where we get RGBA images from. Saving as a PNG allows you to preserve the alpha information of an image created in Photoshop.

So, how do you do it?

It’s as simple as CMD+Clicking on the layer’s thumbnail (or CTRL+Click for PC’s). This simple shortcut gives a marquee around whatever alpha information is held within a given layer.

Conlusion

We hope that you have enjoyed this first installment of Three Minute Tips. This will be (affectionately) hashtagged as 3MT in the future, in case you want to make sure you don’t miss out on any future Three Minute Tips! As always, we would love to hear your feedback. Do YOU have any three minute tips to share of your own? Let us know!

Advertise here via BSA

In the last post, we talked a bit about using color to get into the heads of our users. In this post, we will take a look at a company who we all know a lot (maybe more than enough) about. Google has been around for quite a while, and have obviously legitimized their brand and interface design by their popularity and widespread use.

Quick sidenote – Google is now passing out invitations to try out Google Wave. If you have not yet signed up, be sure to do so. We will be checking out Wave soon and showing you some really cool stuff that it is capable of. But for now, back to what we were talking about before…

Google.com is perhaps one of the most important destinations that people have, for years, pointed their browsers to. We have all come to know the minimalist look of the Google homepage, with its simple search and its signature “I’m Feeling Lucky” button. Today, we will look at a few things that Google has done with their homepage.

Google is, obviously, meant for a very large target audience. The image of Google is known to be very simple, and doesn’t follow any specific “trend” or “style”, per se. Rather, Google has designed their products (like GMail, Calendars, Docs, etc.) by using color and a white backdrop. In particular, Google uses primary colors (blue, red, and yellow) as their main branding color scheme, and one secondary color (green). This emphasizes Google’s elemental emphasis.
Note: this is separate for iGoogle, which allows for more customization and a “homepage”

But let’s look again at Google’s homepage.

Google has, without making it completely obvious, made blue their primary branding color. If all we do is take away the letters other than the two g’s, we are left with neutral (grayscale) and – you guessed it – blue.

Note: This image has been manipulated, and is not a product of Google

It’s pretty easy to see in this context that Google relies heavily on a blue color scheme for their image. Studies have shown that blue is calming and suggests reliability; two things which users who come to Google probably need. I don’t know about you, but I usually go to Google for one of two things: either I have a question or problem that I need an answer to, or I am browsing the Internet. These two activities call for reliability and reassurance, both of which Google has subtly cognitively offered.

So, why include the other colors?

First of all, not everything about blue is positive. In fact, if Google were entirely blue, we as users would most likely get a cold, uninviting feeling from the home page. The red “o” and “e” help suggest the brevity of using Google, while the yellow “o” serves to grab attention. The substance of the word “Google” is increased by including the yellow. The green “l” breaks from the possible monotony of using only primary colors, establishing a sense of permanency.

What can we learn from it?

This study, albeit short and limited to Google’s front page, shows us how easily we can make effective decisions without going overboard. These subtle decisions were most likely intentional. In fact, we’d bet on it. What are some ways you can make subtle decisions in your interface? Check out a few of our other posts to see some of the best practices in interface design!

Advertise here via BSA

It’s happened to all of us before.

We’re surfing around our favorite sites, reading up on the latest (coughFuelcough) articles, and maybe even Stumbling, Digging, or linking out from Tweetdeck, when all of a sudden we land on a site and immediately hold onto something nearby to keep from keeling over in agony. How can someone put something so horrifying up on the web?

We can come to expect out-of-date, un-styled pages around the web from people who don’t know any better, or haven’t touched their site in five years. But what about people who claim to be professionals in their fields, especially when their field is interface design or web development?

As we said in a previous post, people form an opinion about your site within the first few seconds of seeing it. This is before they get to see who your clients are, what your mission statement is, or even what your name is. With this being said, the easiest way to legitimize your site is to make it look great. And we don’t mean just putting in a few hover effects and a pretty picture or two. We are talking about up-front beauty; take the time to make your website immediately and unforgettably beautiful, and you will see the rewards. Any good business knows that they should trust and use their own product; if you create a less-than-amazing looking site for yourself, your potential customers will naturally expect the same quality to be given to them.

Okay, enough of the concept… how can you go about actually getting this done? There are generally two options to choose between.

Do it Yourself

This is probably the most chosen option, simply because most designers have some kind of base knowledge about coding and design principles. There are many different ways information is presented and styled on the web; the most popular way is CSS, or cascading style sheets. CSS works with HTML markup and styles it according to what you have declared in your CSS file. It is a very powerful way to “beautify” your site. Along with CSS, it would probably be beneficial to learn some JavaScript or jQuery. These languages will help make your sites more interactive, and the quality of your interface will increase greatly from a well thought-out implementation of them. Although not as effective or cross-media friendly, Flash is also a very popular platform on which to build a great looking website. Many times, all of the above methods will be used to create a website.

Hire Someone Else

Let’s face it; not every interface creator is incredibly gifted with coding ability. You know your way around Illustrator and Photoshop all day long, but when it comes to taking your interface to the web, you’re without a map. In fact, this may even be the reason your site would fall into the pit of un-styled ugliness that we are trying to avoid. But there are some great coders out there who can efficiently take that un-styled ugliness and turn it into a beautiful work of art. If you are more of a problem solver or designer than you are a coding genius, this option is probably your most cost-effective best bet.

Conclusion

As always, it is very important that you seek the help of others in the process of interface design. There are no hard, fast “rules”, but there are definitely best practices. While your opinion may be the most important when it comes to making your own site, it isn’t the only opinion that exists. Remember, there is more to it than the way you think it looks. Employ the concepts of design, and remember the practices such as were mentioned in earlier posts on FYI (like this one, this one, and this one).

Advertise here via BSA

Textures are a wonderful tool to use for all kinds of design. Not only can textures make something look more interesting, they also add a sense of material realism that people can connect to. There are very few materials in the “real world” that do not have some kind of texture to them.

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)
This removes all hue properties, and leaves only luminance (grayscale) properties.


Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. (We will get to how to make the edges more affected after we bring the texture over onto our main composition.) First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M) The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture. This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.



Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.


The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

• Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
• Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
• Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.
• Contact FYI through Twitter @fuelinterface if you have any questions! We love to help.

Advertise here via BSA

If you’re serious about interface design, you are serious about the tools you use to do it. But if you are anything like me, you also like to get the most out of every dollar (or euro, or peso, or seashell…) that you spend. And let’s go ahead and reveal the elephant in the room – Photoshop is expensive. Don’t get us wrong here… It’s a fantastic tool to use. But you don’t always have to shell out hundreds of dollars for great tools.

Enter Pixelmator, the image editor “for the rest of us.” The Pixelmator team was kind enough to allow us to take a look at their program to let you know what is up. The very first thing is the beautiful interface (of course). With it’s sleek dark windows, the program itself is very classy in feel and on the heavy end of professional. The Pixelmator team also included some very cool animated elements during regular use of the program that make the user experience more enjoyable while increasing the functionality.

Note: Pixelmator is for Mac users only – sorry PC. This is definitely a request that we’d push to the Pixelmator team.

Upon downloading and installing Pixelmator, we first noticed the fantastic icon. Illustrative and clean, the icon fits nicely with our other Apple program icons.
Next, we decided to take it for a little test run, just to see some of the main features and get a feel for the application and interface. There is a whole lot to love about Pixelmator, ladies and gentlemen.

Get It Started…

After opening Pixelmator, you are nicely welcomed with the option of opening an existing project/picture, creating a new document, or simply going to a “no-document” mode. This is often how I personally leave my image editor, which allows me to quickly open a file without waiting on the program to start. Very nice route to include, indeed.

If you create a new file, you are given the option of making it one of quite a few presets, or going with a custom size. Also nice for making sure you get the dimensions right. One thing that is lacking here, however, is the option of setting a CMYK color profile. This isn’t largely important for interface design, but still a consideration if you ever work in print.

The full interface includes windows that are easily draggable. The only thing we didn’t like about this setup was the inability to dock the windows. It is very sleek; all of the windows disappear except the document window when the desktop or another application is selected/active.

Perhaps the most impressive part about Pixelmator is the quality and number of great effects/filters. Quite a few that are not seen in Photoshop can be found here in Pixelmator. Some filters and other effects that we noticed in particular are common transition effects (like a page curl), image manipulation effects, and generators.



Pixelmator also has support for Quartz Composer effects.

These effects have a really cool interactive interface. “Cables” connecting from the effects window to the document window allow you to move the target point to have more control over different aspects of each effect. (There’s really not a great way of explaining this interaction; download the trial, or continue reading. We’ll include this link again at the end of the post.)
We noticed while working with the effects in Pixelmator as well as some of the tools (such as the selector wand, paint bucket, and gradient) that the image updates live. This means you can see the gradient form as you drag the gradient tool across the canvas. A cool feature to the selection and paint tool is the ability to “click and drag” to change the tolerance level. The resulting fill or selection is updated as you drag, so that you know exactly what tolerance to use. This is one of the best and most profitable features in all of Pixelmator. The live updating far exceeds the trial-and-error style of Photoshop. If you’ve ever had to use Command+Alt+Z (back one step) and Command+D (deselect) in Photoshop 100 times in one session, you will find Pixelmator to be a breath of well thought out, fresh air.
Another great feature that Photoshop users have come to require is the use of blending modes. Pixelmator comes equipped with blending modes for your layers as well as blending modes built-in to some of the effects.

One of Pixelmators most important features, however, is not within the creation of the file itself or the effects, but rather in its ability to read and export to 59 different file types including its native .pxm and, quite importantly, .psd files. For those of you who are unfamiliar, .psd is the Photoshop filetype. This means that a Photoshop user can send a Pixelmator user a PSD file without worrying about whether or not they can open the file.

More Features

The best way for you to learn about the features of Pixelmator would be for you to go ahead and download a copy. After you install it, check out Pixelmator’s website for tutorials, forums, and plenty more! Here are some more features we liked in Pixelmator:

• Color correction tools, including curves, contrast, etc. Some auto-correction tools as well
• Similar shortcuts to Photoshop
• Quick masking
• Apple color picker (may be more familiar to non-Photoshop users)
• Easy to use image slicer for web
• “tool options” panel changes according to what tool you have selected
• Create a new layer from iSight camera
• Cost: $59

Take the Bad with the Good

Okay, we would be cheating you if we said Pixelmator was perfect. No software is perfect. But there are a few things that we’d love to see implemented into Pixelmator that are not currently available.

• Layer groups
• Lockable layers
• Better color correction tools (for picking black, mid, and white points)
• Increased functionality of curves
• Editable Adjustment layers
• More support for vector, Smart Objects
• Layer styles (drop shadow, etc)
• Better control of sliders and menus – up and down arrows to change between fonts or increase or decrease a slider amount

Conclusion

Pixelmator may not be perfect, but it is a wonderful image editor that has powerful tools for interface designers. There are a lot of things about Pixelmator that are better than Photoshop. Overall, Pixelmator is easily worth the measly $59 it will cost you. Don’t take our word for it – try it out yourself before you buy it. Pixelmator’s website is loaded with examples, so you can se what is possible with the great image editor. We find it to be a great compliment in a lot of ways to Photoshop, and will keep Pixelmator in the dock from now on.

Advertise here via BSA

It’s no secret – we love jQuery. There’s always a reason for these things, you know! If you haven’t ever used jQuery, don’t get too scared. We’ll show you just a small bit so you can get started using it ASAP! There is a lot of documentation, tutorials, cheatsheets, more tutorials… need we say more?

Including jQuery.js

• Step 1: Go to jQuery’s website and download the latest version of jQuery.
• Step 2: Place the “jquery.js” file in your site’s root folder or in a subfolder (like “/scripts” or something similar)
• Step 3: Include the script with the following code (replace the name of “jquery.js” with the name and directory that you have selected). Place this line in your header.
  [html]<script src="scripts/jquery.js" type="’text/javascript’"></script></li>[/html]

Now, you can readily write with the jQuery library by opening a script tag in your header below your jQuery include.
Note: to include a plugin, follow the same process, and be sure to place the plugin include below the jQuery include.

The Plugins

Thickbox

Developed by Cody Lindley, Thickbox offers an easy-to-use lightbox for almost any kind of content. There is extensive instructions on its use, but the easiest way to get it working is to simply add a class of “thickbox” to a link to an image or content to activate the plugin. To create a gallery of images (or other content), add a rel of “gallery” (it doesn’t have to be gallery – it can be anything you choose). So a simple image gallery may look like this.
[html]
<a href="largeimage1.jpg" alt="largeimage1" class="thickbox" rel="galleryname"><img src="thumbimage1.jpg" alt="thumbimage1"></a>
<a href="largeimage2.jpg" alt="largeimage2" class="thickbox" rel="galleryname"><img src="thumbimage2.jpg" alt="thumbimage2"></a>
<a href="largeimage3.jpg" alt="largeimage3" class="thickbox" rel="galleryname"><img src="thumbimage3.jpg" alt="thumbimage3"></a>
<a href="largeimage4.jpg" alt="largeimage4" class="thickbox" rel="galleryname"><img src="thumbimage4.jpg" alt="thumbimage4"></a>
[/html]
This would generate a set of thumbnails that whenever clicked would open the corresponding larger image in the Thickbox. Thickbox is a beautiful, simple lightbox. Check it out.

Form Validation Plugin

This is a very standard plugin that is fairly simple to use, and produces fantastic results. It goes a little more in depth, so head on over to Mike Alsup’s page to learn how to use it. If you’re going to be using a form for sign-up or contact on your site, this will provide instant feedback for both validation and submission.

Table of Contents Plugin (via FuelYourCoding)

This plugin allows for a lot of really cool automatic table-of-contents building based on h1-h6 tags. Read a bit more over on FuelYourCoding.

jGrowl

Awesome functionality here. If you’ve never used Growl, it is a very cool program that allows notifications to overlay at the top right part of your screen. jGrowl does the same thing, except with online content. Alerts can now be shown in a much more stylish fashion. Many options are included in the plugin. Check it out.

Kwicks

Kwicks is inspired by effects that are a part of MooTools, another cool (and small) javascript library. It’s pretty self explanatory – very cool fluid navigation possibilities. Obviously, you aren’t limited to using this just as a navigation plugin. Check it out!

Conclusion

There are a TON of plugins out there for jQuery. These are five we picked out of the bunch that we like. What are some of your favorites? How about JavaScript libraries? We’d love to hear from you!

Advertise here via BSA

As web designers and developers, we tend to use digital tools to start a web project from requirements to design. We often forget how useful and cost effective our analog tools actually are.

You Will Need…

In this article, I am going to run through the steps I take with pen and paper before I even go near Photoshop or Fireworks. So, if you want to follow along grab a thick marker, an inky pen, some Post-It notes and a lot of paper!

Post-It Sitemaps

A sitemap is always a good starting point to design and build from. I always write page titles on Post-It notes meaning I can create a visual sitemap quickly and cheaply by arranging the Post-It’s in a tree-like fashion starting at the homepage and working through the levels of the site. I find they are most useful when they are stuck on a wall in your office and you can take a step back and gain an overview of what you are looking to build.

This method is a good way of getting the client involved from the early stages of a project. It helps to involve them in arranging the site’s architecture using Post-It’s and it builds a realistic picture of what they can expect from the completed site.

Paper Wireframing

The best use for pen and paper in web design is in the wireframing stages of a web project. If done digitally, wireframes can be time-consuming and costly to your business, on paper however it allows for rapid production.

I usually start wireframing a page with a large marker and scribble down all the elements that will exist on the page including logo, navigation, strapline, content items and footer links. Then I arrange the items into a logical layout based on the priority of the content to the end user, if I don’t like it, I tear up the page and 20 seconds later I have a new wireframe!

Once I’m happy with the layout, I move to an inky pen and create more detailed wireframes featuring real content so I have a very good idea of how the end product is going to look like. This set of wireframes would be shown to the client for approval before continuing with the project. If the client wants a change now, it’s quick and cheap, if we didn’t take this approach and the client asks for a layout change near to the launch, it’s expensive.

Take a look at how UK web designer Mark Boulton uses paper wireframes to detail every page in the requirements phase in his redesign of Drupal.

More Fun

Apart from sticking to your workmate’s back, there are other uses for Post-It’s, take a look at this innovative calendar!

Conclusion

There is always room for pen and paper in web design, they are often forgotten about as a medium we have left behind to gather dust. Pen and paper exist to help us put our ideas across quickly and can help us get past the daunting designers block of staring at a blank “untitled-1.psd”.

Advertise here via BSA

Minimalism design reduces presentation to its bare-bones; goodbye are the flourishes and aesthetic elements. It is hard to find purely minimalistic design, and even harder to find well-executed examples of minimalistic design.

Minimalism is very underrated. Most don’t appreciate the beauty of minimalism in design. To most it looks too simple; however, it may be the most effective way for the designer to get his or her point across.

Most of the time, it is assumed that minimalism is very simple to create, and often referred to as laziness. Others, such as myself, believe that designing for the bare essentials is actually pretty difficult.

One of the pros of minimalism design is that it reduces the amount of clutter in your user interface. Therefore, the focus is on your content: the main part of your site or application. Plus, simplicity is very easy to take in, captivating your readers’ attention quickly. Today, I’m going to go over some techniques to captivate your readers’ interest and make a wonderful minimalistic site.

There are many ways to enhance your minimalist design. Layout is a very important in your design. You want the readers’ eyes to be drawn from the other components of the site to your content. Typography is also great way to enhance important information. Animation-like effects are great – perhaps using jQuery to make some subtle animations.

Layout

Layout will really make the attention move to your content. A large content area will really make it feel like it is very important. Keep in mind that the human eye is trained to look up (which is tricky for web design). Try and make their eye first go to the logo, then to the content using typography.

Typography

Typography is a very important part of minimalist design as well. The use of type is widely regarded as a very good use of design in your site. Used correctly, it can help create a very good-looking site. If you use the correct combination of serif and sans-serif, then you will get an effective, beautiful result.
If you use large type in your logo and just a bit smaller type in your headers, it will automatically draw interest to that type. If you have a sans-serif, large font as the header, and a serif, small, font as the content, the eyes will go straight from the title to the content.

Simple Animation

And finally, a good technique to use in minimalism is animation effects. It will help make up for the “wow” factor that otherwise doesn’t really exist in minimalism. Add some fade-ins and -outs. Maybe some color-ins. Try and experiment and find whatever will fit your site best. Effects like these can be done with javascript libraries (like jQuery and accompanying plugins fairly easily.

These are only a few good minimalist techniques that exist. Here are a few resources to get you on the path to “less is more”!

Typography Resources:

I Love Typography
We Love Typography
MyFonts

Layout Resources

The Golden Ratio
The Golden Rectangle
60 Layout Tutorials

Animation Resources

jQuery Tutorials

General Minimalism

25 Beautiful Minimalistic Website Designs
“Minimalist” on deviantART

Advertise here via BSA

Make no mistake, designing a website in an F-shaped pattern is not only important, it is crucial. “Mr. Usability” himself, Jakob Nielsen, shows us that users view websites in an F-shaped pattern consistently across websites. There are websites that follow an F-shaped pattern, and there are those that most definitely do not. Then there are those times web designers don’t quite hit the nail on the head. For we UI afficionados, the culprits are easily spotted right away (in any given order and combination): clutter, E/T/I instead of F, or even the infamous mirrored F.

So today we take a moment honor just a few of these beautiful atrocities. Let’s delve right in, shall we?

Style Birmingham

Talk about overload, albeit gentle. Style Birmingham is actually a light sampling of F-gone-wrong. Its modern sense of style seems like it should be minimalist meets fashionista, but that message evidently wasn’t echoed to the web design team. This website suffers from a fairly common trend in websites as of late: it tries to accomplish entirely too much on the front page. Having a few samples from each category is a neat idea, but innovators in magazine-style layouts have gotten apparently lazy. Let’s step it up a notch, people.

Kosh Creative

Again, a magazine-style layout, but this time it’s obviously blog-inspired. Kosh Creative employs some neat ideas on their website, though the left-side menu appears to be navigation at first; users might find themselves quickly let down when it’s actually just an animated services banner. My main concern? Columns beget columns beget columns. Word to the wise: if you want to widget-ize your site, do so sparingly. Think of it this way: every time you split a load-bearing beam, its structural integrity lessens; just think of your columns & patterns as load-bearing, as well. Every time you force users to make binary choices about the more salient column, you take them one step further away from your load-bearing F pattern.

Modal Inc.

Ahh… the infamous mirrored F-shaped pattern. A truly rare specimen, indeed. Because of the smart use of white space and clutter containment, I don’t personally think Modal’s site suffers much from the mirrored pattern. On the other hand, the navigation menu is left-situated, and as such the user is forced to move their mouse against an F pattern, and much more than they’re used to in general. A simple relocation of the menu to the right might solve this.

The F-shaped pattern is by no means an end-all-be-all solution to make any site great. The only solution to that ever-changing equation is a talented, dedicated designer (or team of designers). Me, I try to encourage all my clients to educate themselves at least a bit in cardinal design rules like the F-shaped pattern. It almost always makes the process go more smoothly for both the vendor and the client.