When working on a new web site design, I often have projects where a client is interested in having a nice background pattern or texture as a part of their design. I recently found a great tool that makes background images extremely easy:

http://bgpatterns.com/

With this tool, you can choose a background texture, image pattern, foreground color, and background color. You can adjust the opacity of the image pattern, scale the image pattern to change the amount of spacing between the pattern repeat, and rotate the pattern.

You can preview the background image and continue to tweak it. Once you have the look you want, just click the download button, and you will get repeatable .png.

It’s so easy! I <3 this tool!

To Slice or Not to Slice: What’s the Big Deal?

Let me start off by explaining the bigger picture a bit and why this issue is worth writing about in the first place. In the past, I have had to deal with badly organized design files where nothing is in any particular order, nothing is named appropriately, and there are no slices. Trying to sort through it in order to make a simple update is like a guessing game. It wastes a lot of time and can be very frustrating. Just because you know how everything works in the design file, does that mean when the client asks for a change months later that someone else will be able to come behind you, open the file, and be able to clearly discern where everything is and how it’s organized? Will you remember months down the road? I can tell you from experience that if things are not organized and named well in a design file, the answer to that question is an emphatic “No”.  Some design files can have 80+ layers containing hundreds of graphics and things can get pretty complex. Trust me, it always helps to find things in the file if the layers, groups, and slices are well organized and named accordingly… and it helps to have slices. This really isn’t an option, at least it shouldn’t be.

The Old Photoshop “Crop & Undo” Doesn’t Cut It

There are bigger issues than simple file organization and naming. I have had to make updates to websites that required updating the graphics. A basic example of this would be that the company logo has been updated and the new version of the logo needs to replace the current logo image on the site. This should be a simple change and will be if there is a design file with a slice path for the logo graphic. If not, this might not be so easy. This can especially be troublesome if the logo sits on a gradient background. In order to have the gradient line up when the logo is replaced, you need to know exactly where the logo image sits on the background. If you crop the logo out of the design and you’re just one pixel off, it will show because the gradient will not match up. One solution may be to save the logo out as a transparency, but what if that’s not an option? Because in some situations it won’t be an option for one reason or another. This scenario demonstrates the problem with the old Photoshop crop and undo method. Because with that method, there is no record of where the graphic elements were cut out of the design. This can really be a problem when you have to go back to the design file and figure out where and how something was cropped originally, because sometimes it is not so easy to get it to match up.

But What About Slices? What Are They Anyway?

Glad you asked! Okay, so obviously the slices I’m referring to have nothing to do with bread. Instead, it’s a neat tool for cutting a design up in smaller bits. Both Photoshop and Illustrator have a Slice Tool (formerly called “Knife Tool”). Of course, just like with most of the other tools Photoshop and Illustrator have in common, the Slice Tool works a bit differently in Photoshop than it does in Illustrator. I prefer Illustrator slices because in my opinion, they are easier to work with.

In order to make a website, you have to cut the design up in pieces sort of like a puzzle and then cleverly put it back together using HTML and CSS. In Illustrator, using the Slice Tool allows us to cut the design up in the necessary puzzle pieces. Basically, you use the Slice Tool to draw out rectangles (paths) over the graphic area you wish to cut out of the design. That is the sole purpose of slices, to carve the graphics out in rectangular pieces from the design file. The best part is that the slices are saved in the file, so you have a record of it. In Illustrator you can make a Slice Layer and have all your slice paths under that layer. This makes the slice paths easy to find, and allows you to maintain the exact dimensions of all the graphics that were originally cut out of the file. You can hide the slices so that you don’t see all the slice path outlines, show the slices when you need them, and you can lock the slices, which is usually a good thing to do to ensure you don’t accidentally move the slices around. So if you come back to a design file a year later in order to update some of the graphics, you can use the original slices in order to make sure the graphics are cut out exactly like they were when the website was originally developed.

Before You Slice…

Before you create slices it is a good idea to create a new layer at the top of the layer stack and name it “Slices”. The reason for this is that the Slice layer is a “special” layer and you should treat it differently than other layers. Once you make a Slice layer, you can then make slice paths and place them within that layer. I will explain more about this and why they should be at the top of the layer stack a little later on.

During the process of creating a website design there comes a point when screenshots are needed in order to present the design to the client for feedback and approval. This is the point where I always create a Slice layer in the design file. So often times, once I hand a design file over for development, it already contains a Slice layer at the top of the layer stack with a layer named “screenshots” that contains all the slice paths I used to make the screenshots within it.

Name That Slice!

Whenever you make a slice path, Illustrator gives it the name “<Slice>” by default. It is a good idea to rename the slice. To do this, double click on the path in the layers palette and a window will pop up where you can type a name for the slice.

What’s In a Name?

Meaning… names give things meaning. It does not make sense to use a name for a slice that is in no way related to what the slice is being used for. Just like with programming and development, typically it is a good idea to give variables, id’s, and classes meaningful names related to their purpose, so it is with slices in a design file. For example, if you are creating a slice path for a submit button, then a meaningful name for that slice might be “submit” or “submit btn”. Whatever you choose to name it, just be sure it is relative to the graphic that the slice is being used to cut out of the design. The reason this is important is because not only do some website design files contain tons of layers and graphics, but they will also need many slices in order to cut all the graphics out. Again, it is very difficult for someone else to open up the design file months later and figure out which slice goes to which graphic, and it only makes matters worse when there are 80 slice paths that are in no particular order, and they all have arbitrary names or even worse, they’re all named “<Slice>”.

Slices Are Special

Earlier I referred to the Slice layer as “special”. The reason for this is that you can do things specifically with slices that you cannot do with other graphics layers. In Illustrator you can choose to “Show Slices”, “Hide Slices”, and “Lock Slices”. When you choose one of these options, it only affects the Slice layer and slice paths. It does not show, lock, or hide, any other layers. The other thing that makes slices special is that they should be placed at the top of the layer stack in order to maintain your sanity. Trust me on this.

Where Did it Go?

The Slice layer containing slice paths should reside at the top of the layer stack. As a best practice, nothing should ever be placed on a layer above the Slice layer. This is because slices should always be above the graphics they are meant to cut out. Imagine trying to carve a space out of something located on a shelf above your head, but you cannot see it because you are unable to look up, you can only look down. That is sort of the way slices work, they cannot see what’s up above them very well, only what’s below them. Thus, the graphics you want to cut out should always reside below the slices. As a matter of fact, Illustrator sort of does it for you.

If you have a graphics layer selected and switch to the Slice Tool in order to create a new slice path, by default Illustrator will create a new slice above your current layer (the one you had selected before you made the slice path). That’s a neat trick and it’s great Illustrator does that for you, right? Sure it is. But it is also a great way for you to lose track of where your slice went. So keep track of where you create your slice paths in the layer stack and if you happen to accidentally create a slice path while you have a graphics layer selected, grab that slice and move it up under the Slice layer. If you don’t, you may encounter some puzzling side effects of buried slices. I’ll refrain from telling what those side effects are, I’ll let you figure that out on your own. If the problem ever presents itself you aren’t likely to forget it again. The best way to avoid it altogether is to make sure all your slice paths end up under the Slice layer!

Saving Sliced Images

With slicing, you can either save each slice as you go, or you can wait until you have all the slices done. When saving out slices, slice order matters, really matters. Generally it is a good idea to move the slice path you want to save to the top of the stack in order to make sure there are no overlapping slice paths above it. If there are overlapping slices, the topmost slice wins and this can produce some strange results. So put the slice you want to save on the top, that way it will win every time!

When you are ready to save your slices, you will need to use “Save For Web & Devices” instead of the traditional “Save” or “Save As”. When Saving For Web, you will be presented with various options. Different people like to set their Save For Web options differently. You can have Illustrator write out HTML for you (I don’t usually use Illustrator’s generated HTML), you can choose the file type (.jpg, .png, .gif) and specific settings for each type, have Illustrator save out multiple slices at a time, specify a naming convention for slices, a naming convention for the saved images, and also choose to have Illustrator save all the images to a specific place automagically. Feel free to explore all the options and decide which ones work best for you.

Extra Tips & Tricks

Now that you know how to use slices, below you will find some extra tips for a few of the peculiarities I have experienced when using slices.

Dealing With Decimal Pixels

Depending on how you look at it, or rather how you use Illustrator, one downside can be that Illustrator allows for decimal measurements and placement of graphics. This can be a problem with web graphics because in HTML and CSS, there is no such thing as a .5 pixel. If you make a slice and its x-position on the Artboard is at 100.725 pixels and its width is 200.256 pixels, well that does not compute in HTML and CSS. In order to resolve that issue, Illustrator forces the slice to use whole numbers instead of decimals when it is saved out. You will see your slice path outline, and then a second outline showing the actual size and location of the slice. This second outline is Illustrator compensating for the decimal numbers, and it always rounds up and chooses the ceiling of the decimal number for width and height values. So if you have a slice path 200.256 pixels wide, Illustrator will make the actual size 201 pixels. Also, if the slice has an x-position or y-position that includes a decimal, Illustrator will force the positions to be whole numbers as well. Again, you will see your path outline and a second outline showing the actual location/size of the slice.

In Illustrator, one of my favorite tool panels available is the Transform Panel. The transform panel makes it very easy to measure and place elements to the exact pixel needed. The thing I love the most is that you can do math right inside the Transform Panel. If you need to move an element to the left or right 20 pixels, then you can just add or subtract 20 pixels from the x-position. You can add, subtract, multiply, and divide in the Transform Panel.

The Transform Panel also works well with slices. If you create a slice and you see the slice path and a second outline showing the actual size and location of the slice, then you already know that the slice dimensions are not whole numbers, or the slice x & y positions are not whole numbers, or all of the above. You can use the transform panel to size the slice correctly and put it in the exact place you need it. In the transform panel, choose the registration point that coincides with the top left corner. Once you have done that, you can set your x-position, y-position, width, and height to whole numbers and the slice will adjust accordingly.

Missing or Blank Images

Sometimes you may try to slice out a graphic but when you save it out, either nothing is saved, or the image that was saved is blank. If this happens, try turning on the Artboard and see if the graphic you are trying to slice out is positioned outside the Artboard area. If it is, you can adjust the size of the Artboard to include the graphic you are trying to slice out. This should fix the problem.

The Creative Design aspect of website design is often thought of as making “pretty pictures”. Yet, there is so much about the design process that isn’t about making a website pretty. I’ve never had a client tell me they want an ugly site, so yes, it should be pretty. But it’s not that simple. There’s a lot to be considered when designing a website.

Besides being nice, clean, and “pretty”, a website needs to be functional. You might think that being functional means that a website isn’t “broken”, in other words there is some aspect of the site that does not do what it’s supposed to do. But that type of functional is not what I am talking about. Of course, it’s a bad thing if a website is broken, but what does it mean to truly be functional?

For me as a designer, it means that all aspects of the website should work, and they should work well. The colors of the site should play well together and not be overwhelming or jarring. The graphics should be eye-catching, but not distracting. The page layout should flow in a manner that allows the user to quickly find what they are seeking. Navigation should be intuitive, easy to use, and not require the user to play a guessing game. The process of finding information or products on a site should not be akin to going through a maze, where the user finds themselves doubling back to return to the beginning in order to choose another path.

But that’s not all. I believe that in order for a website to truly be functional, it has to enable the client to accomplish their goals, by way of enabling the user to accomplish theirs. So when we begin a new project, the most important questions we ask a client are:

Who is the intended audience for your website?

What is the purpose or goal of your website, in other words, what do you want the user to accomplish while visiting your website?

Once we know the intended audience and their goals, it allows us to customize the design to fit those needs. But we can go further than just knowing the intended audience and their goals.

If the client utilizes our Web Marketing services, I can go visit my friend Jeff Pickle, one of our Web Marketing experts. Jeff can gather up all sorts of cool information using Google Analytics. He can provide me with various reports containing actual user data from the client’s current website. I can use this data to see things such as what operating system the majority of their users have, what browsers they’re using, and their screen resolution, just to name a few.

I can take this information and use it to make some critical decisions during the design process. For example, I can decide how much screen real estate I have to work with based on user data. For a long time, we’ve been locked into a space of 1024 x 768 pixels, because this was the screen resolution size of the majority.  But the current data trend from various client websites shows that a large portion of users are now using screens with a resolution higher than 1024 x 768. Since screen resolution is moving up, that means the “fold” –the place where the page content is cut off at the bottom of the screen so the user has to scroll to see the rest– is moving down. I’ve been keeping my eye on this trend, because it seems to be picking up speed and changing quickly.

This fact is an important bit of information because so many clients are afraid that if their pages are too long, the user will not see all the content and so they want me to try to get everything above the fold, which isn’t usually possible unless 1) your site has very little content, or 2) the content you have is all crammed together so that it looks confusing or cluttered. The best way to deal with the fold is to make sure one thing is clearly visible to the user:

Look!  There’s more content down there!

This is accomplished by signaling to the user that there’s more content below. It’s like when reading the front page of a newspaper. You can see when a picture or an article is cut off and so you know you have to look below the fold or flip the paper over to see the rest of the article or picture. The equivalent to this on the web is scrolling. The problem is that on the web, the fold isn’t fixed for all users like it is on a newspaper, so in order to be able to pull off this signaling trick, it helps to know approximately where the fold sits for the majority of a website’s users.

As an interesting side-note, did you know that we computer users don’t read the bottom of the screen? We glance at the bottom and if we see something down there, we scroll –as if instinctively– in order to bring it more towards the middle of the screen. Pay more attention to your scrolling behavior, and I bet you’ll notice that you do it too!

Wait… but what about the pretty pictures?

As it turns out, pictures and graphics matter more than most folks might think. Beacon’s Web Marketing tools allow us to see what types of information on a site is popular and what types of information is not. For instance Nicole Tolbert, another of Beacon’s Web Marketing experts, discovered on one of our Web Marketing client’s website, that an overwhelming number of users clicked on a graphic containing a photograph coupled with copy, but the graphic didn’t take them anywhere because it wasn’t a link to more information. Obviously, the users were thinking if they clicked the image, it would link them to a page with more information, but that wasn’t the case. So in the process of creating a new design, we were able to take into account that their audience is drawn to graphics containing photographic imagery with text, so to capture their audience, we needed images with text that linked the user to more information.

So sometimes good web design IS about the pretty pictures!

It’s amazing to me how something you start doing for inspiration can become beneficial for clients. Since I was a child, I loved playing with color; primary colors, pastels, warm tones, cool tones—I used every crayon in my Crayola 64 box with the sharpener in the back. In high school art class I studied the color wheel and learned how to make colors from scratch—adding a dash of blue here, a little red there. Later on while majoring in both Fine Arts and Computer Science, I learned the principles behind utilizing color successfully in the digital world, for example how colors are translated on a brightly-lit monitor as opposed to printed materials, which colors are more or less irritating to the eye, and how different cultures view the same color.

I believe people are born with an eye for color, yet learning the basics early and understanding the varying tones of color aided me in honing my skills as a colorist, consequently enabling me to become Beacon Technologies’ resident color specialist. Dynamic color schemas that look great online were hard to find a few years ago, since computers and monitors had limited color space or range of colors available. But as technology advanced, color availability for the web changed too. As a testament to the possibilities of color on the web, Adobe Labs launched Adobe Kuler in 2006, a website for creating and sharing color themes. I first noticed Adobe’s online color tool in November 2006 and I created a few swatches just for fun. A few weeks later when I visited again, one of the color schemes I created, Herbs and Spice  was on the first page of the site dubbed as one of the highest-rated, most downloaded swatches. I’ve created more than 100 themes since then, mostly in spurts and always inspired by the world around me. For example, feeling sad stimulated the color swatch, Quiet Cry which maintained the top spot on the Highest Rated page for over a month, and was downloaded almost 100 times a day during its reign at the top. Last summer, Adobe Labs included Herbs and Spice, in a Kuler promotional campaign.Through my affiliation with Kuler, I’ve been able to network with artists and designers from around the world and some are now my friends on Facebook.

Through my use of Kuler, I’ve been able to create outstanding, beautifully colored website designs for Beacon’s clients in various industries, from law to furniture. And I’m not talking about just the standard corporate blue with black font, but chocolate brown gradients, accent colors of green and orange, and easy-to-read charcoal gray or brown text—all of which you can see in my swatch, Furniture and Fabric II that I created and used for the new design of AC Furniture’s website that the client felt was, “elegant and sophisticated.” If you want to learn more about how Beacon’s creative services can improve your site, contact us.