I already talked about it a few years ago but since so much has changed here on the blog and many new readers don’t dig that deep in the archive I’m reviving this post inspired by Jason Santa Maria’s lastest post about his first website.

We have to go back to 1996 when we owned a Tektronix Phaser 140 printer that had a little bit of trouble communicating with AppleTalk. You gotta love those Mac OS 8/9 days, where a crash a day was on the menu. In those days we had a pricey support contract with an Apple dealer Compuvision that charged us money to just do the following: "I'll look on the Internet to see if a new driver is available". That's when I started to get fascinated with that mystery thing called the Internet. So, I went to a computer store and got myself an account with a service called Netlink, and got myself a Farralon 14.400 modem that I soon after exchanged for a 28.800 one. My first baby steps to browse on the Internet was with a browser called Mosaic and only showed text. The first advanced browser that I used that was able to show a bit of the potential of the Internet was Netscape 1.0 alpha. You can't believe how buggy it was on the Mac, but we didn't know any better so it was cool too, if you know what I mean. I still hear the modem dial tone while connecting to the Internet and it felt like somebody scratching their nails on a chalk board :)

When I started out with HTML I remember some of the names of the applications, but I'm not 100% sure anymore in what order I used them. If memory serves me right, I think I've started out with Claris Homepage, and soon after that, I jumped to Adobe Pagemill. Once I got the hang of coding, I've jumped to World Wide Web Weaver, an application that isn't a true WYSIWYG editor, but a bit of a mix. Later I moved on to BBEdit, GoLive and DreamWeaver.

With all the geek talk out of the way, let's return to the actual site. You got to give me some credit for having a sharp vision in anticipating the hatred towards frames :o) The site has it all, moving gifs, music, and ShockWave. I remember that I was so proud of my hip animations. In that period I was complete intoxicated by Macromedia Director and the possibilities it offered. As you notice, the design shares some of my other favorite tools as well such as KPT Bryce, KPT Power Tools, and KPT Vector Effects for Illustrator. Kai Krause was one of the first people to experiment with interface concepts, something that wasn't really common back then.

I'm guessing you are curious by now to see it, step back into the time machine and before you know it you are looking at my first website. I've also found the second one that went online in 1997. I'm sure you'll laugh when you explore around a bit :)

I've set up a group on Flickr called '20th Century Web Sites' to share all our lovely work from back in the day. All you need to do is become a member and post your screenshot in the group pool. Hopefully this will become a nice museum where we can go to have a good laugh about the old days :D

I’m currently testing a Wacom Cintiq 12WX. I’ve never used a Wacom or any other tablet before, and I’ve always wondered how this would work for me as a left-handed person who is used to work with a mouse right-handed for more than 15 years now. I’ll write down my thoughts in more detail later, but first I want to pick your brain if you use a tablet as a lefty too:)

My situation is a bit complicated I guess. I am left-handed, but I do certain things, such as writing and cutting with a pair of scissors, with my right hand, because teachers taught me to do so when I was little. Drawing happens with my left hand as well as playing tennis or bowling for example.

Jono from I Love Typography actually gave me the idea to do a poll. There are a few questions that are keeping me busy while testing this tablet:

How is your display set-up when you are using a Wacom with built-in display? Is your computer display the main screen? Or do you move the Finder menubar to the Wacom display?

If you use a tablet with built-in display and your computer display is rather big, let's say 24" or 30" inch. On which display do you work mainly? When do you decide to switch?

Are there any left-handed people like me that are using the mouse with their right hand and use the Wacom with the left hand? Any tips for me on how to overcome the learning curve?

On the Wacom you have these Touch Strips and ExpressKeys that you can configure to use as keystrokes (and other options). Mine are configured for the command, shift and option key. I use the combination of these keys a lot while I'm designing in Photoshop or Illustrator. E.g. I need to horizontally duplicate an object. So I need both shift + option key to do this. I also have to press the command key because I usually have another tool selected at that moment. It means I have to use the Pen with left hand while pressing all 3 buttons on the Wacom with the right hand (see picture below). What's your experience with these kind of situations?

Some questions are aimed to left-handed people, but if you are right-handed don't hesitate to share your tablet experience as well.

Adobe is now shipping the CS4 suite so that means all new applications and new things to learn. Judging from the amount of questions that I receive about Illustrator or Photoshop there are a lot of people who didn’t discover the Community Help yet. It’s something new that was launched together with CS4. In the past it was hard to find relevant help, but this is a step in the right direction.

This help system is a whole new direction for Adobe because as the name suggests, it's no longer only Adobe that is updating the help files, it's now with help from the community. This new help taps into the regular Adobe Help, Support, Design Center, Developer Connection, Forums, and online community content. This way you get access to the most up-to-date resources such as this blog for example. Adobe is using a Google technology called Google Custom Search Engine. You can also comment on their content and Adobe has active community members to act as moderators by responding to comments and adding quality content so that they improve the user learning experience.

I'm proud to say that Adobe also asked me to be an Illustrator moderator. In case you are wondering what a moderator does the following list should give you a better idea.

• Links to external websites in Help
• Inclusion of external websites in search results, through the Google Custom Search Engine service
• Inclusion of non-Adobe personnel in the group of folks with the ability to moderate LiveDocs comments and submit to the search engine.

It was with sadness in my heart that I had to decline this offer, because there are only so many hours in a day. I'm already so busy with work and my blog, that there isn't just any time left to help users there too. You are probably thinking, what a shame. Fear not, I'm still going to do my fair share for the Illustrator community. The reason why I don't have time is because I'm already helping users out who e-mail me or ask questions in the comments of my blog when I post tutorials. I'm going to keep this up and you'll find the Adobe Community Help very useful as my content is included in the Community Help. This way people who don't browse blogs get to benefit from it too. I'm looking forward to doing more tutorials about Illustrator CS4 and Photoshop on my blog so that the Help feature has good content to add :)

I recommend that you take it for a spin and see what you think. Most Creative Suite 4 products have the in-product search field. You can type your query in the product and launch a custom search. As time marches on, the Adobe Community Help will grow and become better and better. Don't be afraid to comment if you have suggestions for making it even better.

A reader asked me if I could write a tutorial about how I created the Cecif.com logo icon. It is the perfect icon for learning certain basic Illustrator techniques. We’re going to use the Pen, Reflect, Scissors and Gradient tool, and of course we’ll also use the beloved and super timesaving Transform again technique.

First of all, we need to analyze the shape, and search for patterns or drawing steps. What do we see when looking at this shape? We see 5 equal parts. I'll call them leafs. Secondly, we see that each leaf is also perfectly symmetrical. Thirdly, there is a seamless rainbow gradient fill that connects them together. Last but not least, a tricky one, the lines of the icon overlap each other.

These are the steps I'll take:

• Draw 1/2 part of a leaf using a stroke
• Reflect and duplicate this 1/2 part and turn it into a perfect symmetrical leaf
• Duplicate rotate the leaf at 72°
• Repeat this 3 times to complete flower shape
• Connect the 5 leafs at the center area of the flower
• Turn strokes into fills
• Apply the gradients
• Check the overlapping lines and correct where (and if) needed

This 1st step is tricky and might be a bit hard for a beginner since it involves drawing a perfect curve using the Pen tool. Though I'll try to explain and show this as good as I can so you'll be able to follow. If things don't go well in this step, I suggest you to try out these Basic Pen tool Exercises first before moving on.

First of all, select black as stroke color and none as fill. I'm using a tick stroke of 10 pt. This value depends of course on how large you're drawing this shape. Make sure Rulers are visible (View > Show Rulers or cmd/ctrl + R). Drag a vertical guide. This guide is the line that divides the leaf into 2 perfect sides, left and right. Select the Pen tool and start your 1st curved point somewhere on the right of the guide as shown in the picture above. Click and drag downwards to the left.

Draw the 2nd point a bit lower on the left of the guide. Hold down Shift while drawing this point. Drag vertically downwards. Draw the 3rd and last point again a bit lower, right on top of the guide. Again Hold down Shift while drawing this point. Drag horizontal to the right. Hold down Command/Control key and click once on your canvas to deselect the path. Use the Direct Selection tool (white arrow) in case you think the curve needs a bit of tweaking to make it perfect. Just make sure the handles of the last point are perfectly horizontal, otherwise you could run into trouble. The left and right part of the leaf will not match perfectly and a small gap or you'll end up with a small overlap.

Select the Selection tool (black arrow) and select the shape. Select the Reflect tool, Hold down Alt/Option key and click somewhere on top of the guide. Make sure you click precisely. This is important to avoid gaps or overlaps. In the Reflect window that appears, choose Vertical as Axis and click Copy.

Because the lines are overlapping, we can't join both sides of the leaf. Select both shapes and select the Rotation tool. Hold down Alt/Option key and click somewhere on top of the guide a little bit above the shape as shown in the image above. Make sure you click precisely. In the Rotate window enter an Angle value of 72° (360/5) and hit the Copy button. Now hit Cmd/Ctrl + D (Object > Transform >Transform Again) 3 times in a row to complete the flower icon shape.

Zoom in on the center of the icon. Select the Direct Selection tool (white arrow) and drag a selection around 2 neighbor points and hit Cmd/Ctrl + J to connect them. Repeat these steps for the 4 gaps.

You should end up with something that looks a bit like an upside down star shape in the center. This star shape depends on the center point you have chosen before to rotate and duplicate the leafs. Select the entire object using the Selection tool (black arrow). Go to Object > Path > Outline Stroke to turn the strokes into fills.

I have already prepared 5 different colors in my Swatches palette: yellow, red, purple, blue and green. From these global color swatches I've created 5 different linear gradients:

• green blue
• yellow green
• red yellow
• red purple
• purple blue

Select a fragment using the Selection tool (black arrow) and fill it with the first gradient.

Select the other 4 fragments one by one and give them their proper gradient as shown in the image above. Make sure you apply the gradients in the proper order so you can connect each one of them using a smooth transition.

Select the first fragment and select the Gradient tool. Define start and ending point of the gradient by dragging a line as shown in the image above. Select the 2nd fragment and do the same again.

Do the same for the other segments.

You should end up with an almost perfect icon. If you take a close look and compare it to the original, you'll see that we have 2 mismatches. So we need to do some fixing here.

Let's start by moving this segment to the back. This way we have 1 problem out of the way. Select the fragment and go to Object > Arrange > Send to Back. The only way to solve the 2nd problem is to divide the shape into 2 pieces so we can have the purple line go on top of the blue line and also have it go under the red line at the same time. We can change the stacking order of the 5 shapes to try to fix this problem, but what you do is just moving the problem to another fragment. So in the end there will always be 1 line where things don't match and where we have to correct. Select the Scissors tool and cut (click on the path) the path somewhere in between the intersection with the blue and red line. Cut the path on both sides of the fill as marked in the image above.

Now join both opening ends of the shape. Select the 2 endpoints of 1 segment and hit Cmd/Ctrl + J to close the path. Lock this shape by hitting Cmd/Ctrl + 2. Select the other 2 opening points and hit Cmd/Ctrl + J again to close the other fragment.

Selecting 2 endpoints can be a bit tricky. Sometimes you run into trouble by having more than 2 endpoints selected. Illustrator will then show a message 'To join, you must select two open endpoints...'. Here is what I usually do when this happens: I click once on one point (which probably sits on top of the endpoint I want). I use one of the arrow keys (e.g. up key) to move this point from its position. Then chances are you can select the proper endpoints to join them. After the path is closed you move the point back in its original position using the arrow keys (e.g. down key). Sometimes more than 1 point needs to be moved from its position.

Once both paths are closed, unlock the shape you've locked before by hitting Cmd/Ctrl + Alt/Option + 2. Move the purple fragment shape under the blue line by sending it to back: Object > Arrange > Send to Back. Now all there is left to do is applying a solid purple color to the fragment that lays on top of the red line and the icon is complete. There you have it! Hope you enjoyed it ;)

The Cecif.com icon, part of the Cecif.com logo, and created by Duoh! n.v. is property of Cecif.com. It is used in this article for educational purpose only and may not be used or copied in any form or by any means.

In case you’ve missed it, we finally launched our business site duoh.com and talked about the creation process last week. The feedback has been overwhelmingly positive and educational.

The general goal of our new site was, of course, to reach out to potential clients and show who we are and what we do. But, to do that, and have it reflect who we really are, we needed to explore some new territory and be a little experimental along the way. Some of you may think that it is easy to be original but that's not the case, I'm afraid. Geert and I opted to not go for the 'safe road' because that's just not us. It was never our intention to create something that would be well liked by everyone; if we did that Geert and I think that it would lack personality. This design conveys our joy and passion about what we do, and the fact that it got people talking about design in general makes us happy.

After shifting through the feedback via Twitter and on this blog, we learned that the feedback was largely positive and a few commented on the 'busyness' and the backgrounds on the right. Critiquing a design isn't easy as we discussed in the past because it takes time and thinking. When you analyze feedback it's important that you try to see through the personal attacks and only focus on what is of value and that's exactly what we did when we took another good look at the design. Nothing is ever perfect so we took a few things back to the drawing board.

Let's highlight the changes we made to the design. We started by having another look at the homepage to see if we could do something there to make it a little less overwhelming without compromising too much on its originality. In the original version you have the green shapes on both left and right and after some tinkering we ended up with re-coloring the green shape on the left side of the page and creating some breathing room between the main content and right shapes. This tweak brings the focus back to the 3 examples of work and makes it less overwhelming at the same time.

Next on the examination list is the portfolio page. In the original version, the background of the main section was the same background color as on the left and right with only subtle shadows and gradients to indicate the beginning of a new project. We both found that this was too close and could complicate the visual differentiation of the projects so we reworked the main section to a different background as you'll notice in version 1.1.

We also tweaked the look of the text in this section, in terms of colors and spacing, and created some more room between the projects; we also made the color bar twice as thick as before. With this iteration it is now more clear where the main content is and you notice more easily when a new project starts. The final tweak to this page was at the bottom where we reworked the navigation a bit and reduced the transparency of some of the bubbles. In the initial version there was the 'GO' bubble button to go to the next page. This looked kinda fun, but a little voice inside me told me I went just one step too far with this, breaking the consistency. There wasn't a previous link either and I was aware of this problem.

With all the different resolutions out there it is hard to make things ideal for everybody and as you might recall this is a bit of experimenting as well to accommodate the bigger screens. The biggest change that we did is shifting the art with text in it a bit further to the right so that users with a 1024x768px don't see the start of it. We decided that users that can't see the art should be rewarded as well so we've created desktops of the illustrations.

• Error 404 Page Not Found
• Adieu!
• Is this Art?
• Grafiek Grafik Grafico
• Design is so simple
• Graphic Design
• Hello
• Space Time
• Cubes
• Swiss Graphic Design
• Stay Hungry. Stay Foolish.
• To Hell With Bad Browsers!

Since this is a huge job to do all resolutions, I decided to go for the highest resolution, so you can scale it down to match your screen resolution.

• Error 404 Page Not Found
• Adieu!
• Is this Art?
• Grafiek Grafik Grafico
• Graphic Design
• Hello
• Space Time
• Cubes
• Swiss Graphic Design
• Stay Hungry. Stay Foolish.

As soon as the site was online we took an account at Crazy Egg to track how visitors use the site. As far as we can see, people are clicking where they are supposed to click and they are scrolling down to the bottom of the page as well. The only concern we saw on the homepage is the RSS feed subscription. Not many people clicked on it yet. The location clearly didn't work as well as expected. I placed it there purely for aesthetic reasons, but wondered if it would work. We've now moved the icon to a more visible and logical location and will probably label it in some way.

The image below shows the home page in 'Confetti' view. Each dot represents a click of a visitor and each color represents a referral. Click the image or the links below to see this in detail.

• Homepage
• Portfolio top
• Portfolio bottom

It's clear that people find their way and click through to either the different categories in the portfolio, to other sections of the site or scroll down and click the next button.

A reader named Laura had the following concern about the direction that we chose, in terms of looking business-like.

If you read the full blog post we wrote about designing the site, you'll see that we intentionally didn't choose the typical business look. Businesses are made up of real people, and we wanted to talk to them on this site in a way that really shows who we are as a business and as people. We didn't want to be fake, and dress up in business suits, and talk with the usual business jargon. We never like to read sites like that, though each company is different. Our old site also didn't accurately say or show who we are now and what we do. People want to know when they look at our site or any other business site if we are credible. Can we be trusted, and can we deliver what they want? Can we make their site stand out in a sea of other business competitors? Do we have a process that makes sense, and would they like to work with us? Can we do an enormous variety of work, each one suitable for each business, and is that available in the portfolio? We think our site answers these questions and then, in the about page, says who we really are.

Just because most other people have a certain look for a business site doesn't mean that we should stay in those boundaries, especially because our creativity is our 'product'. We wanted to answer all those questions with our design and our words, but break through all the falseness and be ourselves. We think, so far, we've been proven right, at least for us. (We can't speak for other design companies). Since the redesign, our mailbox has been full of requests for work, and we're already made preparations to start new jobs.

Geert and I worked very hard and are very proud to finally announce the launch of the new Duoh! website — our business site. It took us a lot of time to finish it due to the heavy workload of the past couple of months, and the fact that any spare time I could find during the weekends was always spent on writing articles for the blog. Actually, much of the design itself was already finished in November 2007! That was right after I wrote about designs that didn’t make it. From then on, our minds were made up and we both felt that this is what we wanted.

At first when we were working on the designs that didn't make it, we thought that adding a lot of illustration style would be the right fit for us, but in the end it resulted in a style that was too "girly." It didn't fit at all. Looking back, I realize I took the wrong road; I just chose the wrong type of illustrations. There was the question, too, of whether to use a white background. The design felt all a bit too pastel colored to me, not strong enough, and so I tried a dark background later on. In the end it felt as if we were a bit stuck with this dark background version. It didn't feel right, as if something was still lacking.

First I've tried to solve the problem of a dark versus white background by coming up with a design where I use both: white for parts with much of the copy, dark for most of the presentation of work. I can't help it, but when it comes to presenting your work, darker backgrounds just work better for me. The colors pop and create a nice contrast.

Geert and I are both inspired by Swiss graphic design and we felt that this would be the right direction for us. On the other hand, it wouldn't be Duoh! if we didn't add our own style to it. Looking at the current design, you see a lot of bright colors and attention to details. Using straight lines and simple forms and shapes gave a Swiss graphic design feel to the whole site, but we added a lot of our own typical style to it. I thought it would be cool if we could achieve a site that just breathes graphic design. When people come to the site the first time I thought it should be obvious what we do without having to read a single word.

During the design process Geert came up with this wonderful idea of using illustration backgrounds to place in the body of the webpage as a surprise. One for each section. Just a nice surprise for people using screens with higher resolutions. This way they get to see some interesting illustration work Instead of a plain background when stretching the window. We added a few other surprises, too, as you may discover.

Another idea was to work with quotes from people we look up to and who inspire us. You'll find a quote from Paul Rand, "Design is so simple that's why it's so complicated." Can't agree more with that. So strong and so true. Then there is one from Steve Jobs "Stay Hungry. Stay foolish." Isn't that the best advice ever? We always try; it keeps the creative spirit alive. And of course I couldn't resist Jeffrey Zeldman's quote "To hell with bad browsers." I have the same spontaneous reaction whenever I bugfix CSS. :)

After vertical filing the previous designs (or as you might say, circular filing them—they're trashed!), and idea brainstorming with Geert, I let the Swiss graphic design inspiration enter my mind. I started off with a blank slate. Just our logo, nothing else, not even the colors I picked before. I believe in most cases this is the best option. It's better not to look back. Just clear your mind, fill it up with happy thoughts and start all over.

I often start by choosing my color palette first, and so I did. Vivid colors work well on a dark background. So I picked a dark brown, very close to the brown I used before, but this time I added some grey to it. This way it felt like a more neutral color than the previous brown and suited our logo well. While playing around with the colors the idea came to mind to create a vertical color bar, a bit like my blog but still different, by using some gradients. Later on I experimented a bit with lines, squared rectangles, layer modes, etc. and I ended up with the composition of the color sidebar.

At that stage I tried to figure out how I could use a white background in my design. Our logo needed to be on a white background, so my decision was made. Then came the idea of working with a vertical navigation and sidebar and have all the content on the right on a white background.

I worked out a basic grid — just very basic, because I didn't want to tie myself down yet. Having a grid usually helps me to find patterns and positions for everything while keeping things in balance, but sometimes, if I go too far, it tends to limit my creative thinking a bit — thinking that I need to follow my own strict lines of the grid. The freedom to move things around and experiment usually leads to new ideas. It's a bit like thinking out of the box: no boundaries, only freedom, not thinking about conventions, etc., if you know what I mean.

But my grid worked and helped me just fine. I came up with the idea of having a different sidebar for each section page. These sidebars are the only thing that have been tweaked a few times over the past couple of months. The initial ones were a bit too busy. The thing is, I started with them before I started with the actual content. The problem you have by doing this, is that you can end up with a too overwhelming and busy design. Once I started adding the content, it was as if the sidebars were taking over and got all the attention, and the content was pushed away. So I reworked the sidebars by toning them down so everything was more in balance. From there on I got it all worked out. What took the most time was the initial idea of the sidebar, navigation and content using white, etc. together with, of course, all the illustration work that covers the site.

Maybe this sounds like a weird process, starting with one element and not knowing how the rest will follow. This might even sound illogical to some of you, but my design process is just never the same. There isn't one method for me that I can report "this works, or this is how you do it". Most of the time I just follow up the ideas that pop up in my head. They are just never in the same order or have the same logical sense. Sometimes I see the whole picture and the last phase is adding the details. I bet a lot of web designers work this way. A bit like the outside in, just like with CSS styling. For me this isn't always the case; it wasn't the case with this design. My creative thinking path is never linear. Maybe it's just because inspiration often creates chaos in my head. Guess I'll never know because I find it the hardest thing to explain and to figure out :)

Content is king or in our case, is design king? Well, I think both are. What's the use of having a beautiful site without good content, without perfect sentences that express who we are. If you tell your customer that you must have both good design and good content, then you should follow your own advice. And so we did. We didn't have to think twice about who to contact. Carolyn Wood, once interviewed me and we also knew her reputation on the web and through web design friends, and thought she would be the perfect person for the job. Here is what she had to say:

Creating text for a website is pretty much the same process as designing, and it doesn't matter if you are writing for a pharmaceutical company, a cruise line, or a designer—it's just a whole lot more fun with Veerle and Geert. :)

Like a designer, you learn about the company, the intended audience, and what both want to achieve. Here we have an interesting twist: Duoh!'s content and its design are, to a degree, the same thing. People come to see what Duoh! can do, and there it is: powerful, colorful, intelligent, precise design. What then is the role of the text on the Duoh! site? What facts do people need? When do you pop up and speak; when do you stop and let Duoh!'s work speak for itself? And what exactly is the Duoh! voice?

In their first email, they were clear that they didn't want jargon or the usual "markety" approach, such as the standard bio. My reaction? "Perfect!" Geert and Veerle exude joy in their lives, their relationships, and in their work, and at the same time are design professionals. They take their work seriously, but they are real. Somewhere along the way, "professional" became confused with "pretending to be dull, stilted grownups." You won't find that at Duoh! My goal, too, is lively authenticity. This is true when writing for a small, smart, famous design shop or a major corporation. Say what you need to say, then strip away any dead weight, and make it something people want to read — whether they are skimming or seeking more.

You assemble everything you need and start the text version of sketching. Then (you hope) you reach that indefinable moment that many designers have, when inspiration, experience, and problem-solving come together and a creative spark ignites the work. The aim is to deliver an experience that is narrated in a very specific voice, one that clearly reflects the "brand" and subliminally conveys the company's personality, while helping people discover, learn, or get things done. Interwoven with great design work, it all creates an experience that wins the user over.

We discovered that our opinions and work styles were virtually the same. We're into details, we laugh a lot, we work iteratively, we're picky as all get out, we feel confident and "at home" doing what we do, yet we are uncomfortable advertising ourselves in the usual ways. Our similar attitudes quickly built trust, and Duoh! unleashed me and said, "Have fun!" This doesn't mean they accepted everything without question, but we both enjoy collaboration and worked in synch, finessing the details. By the way, thanks to Geert for tolerating all the "girl talk." :)

We haven't met in person yet, but it felt as if Carolyn has known us for years. Working with her was a real pleasure. Sometimes I truly wondered if she was psychic, as if she had a sixth sense. No kidding! Her ability to translate who we are, what we stand for, and our way of thinking is, without a doubt, a true gift. She dances with words like we breathe air. Carolyn did a splendid job. Looking back at all our iChat conversations I see a newborn friendship. :)

It took us a very long time to launch, but I do not regret it. We've made some smaller improvements in the past weeks that made a difference. The work you'll find in our portfolio doesn't date back further than 2007 and it only shows the work we wanted to show or can show. I think that's not bad for a two-headed design studio. :) Actually, we sometimes considered ourselves a team of three because we had a secret design guru named Mark Bixby help us out on several occasions with logos and some other work for clients. Mark is a wonderful guy to work with and is as picky and neat in his work as we are. Geert and I always got very excited when Mark showed us his work. The thing is, when you are that good a small studio can't compete when you get an offer too good to refuse and that's exactly what Mark got. It's true, Mark left us for MySpace, oops, sorry, I meant Facebook :D Anyway, Mark, we have a spot reserved for you here, whatever the future brings. ;)

In my previous article I talked about how you can apply a line pattern effect on text in Illustrator where I showed 3 different techniques. The last technique bugged me because it wasn’t a really ideal one. It involved a lot of tweaking. In the comments Jesse and Amanda suggested an interesting approach definitely interesting enough to investigate and try out…

• Type your text
• Select the text using the black arrow
• Create outlines/paths of the text: hit command/control + shift + o

• Select the text using the black arrow
• Go to Object > Path > Offset Path
• Check Preview option and enter Offset value and click OK
• Go to Object > Path > Offset Path again
• Check Preview option and enter the same value, click OK
• Go to Object > Path > Offset Path again
• Check Preview option and enter the same value, click OK

• Select the outer path of each letter (using the Shift key for multiple selection)
• Apply the color of your choice

• Select the 1st inner path of each letter (as shown in the image above)
• Apply the color of your choice

• Select the next inner path of each letter (as shown in the image above)
• Apply the color of your choice

• Select the most inner path of each letter (as shown in the image above)
• Apply the color of your choice

It's an efective technique, but as you can see the colors are applied in a different way than they are in version 1 of my previous article. They are applied from the outside in (double) and not from left to right. If I want the colors to be applied in the exact same way than this is still not the solution. There is a way to use the Offset Path technique and change the way the colors are applied, but it will only work for uneven numbers of lines. When you apply Offset Path it's impossible to end up with 4 strokes for a letter that has a compound shape such as the O. You always end up with an uneven number of lines. Even then you'll have to release all compound shapes and create new ones so you can color the lines in a different order (from left to right).

You can achieve the same results using the Appearance panel with multiple fill and offset path effect. Big advantage, is that the text remain editable, you can save the results as a graphic style, and it remain editable easily for last minutes tweaking.

Thank you, Jean-Claude Tremblay, for this valuable information that I bluntly overlooked :) In CS4 the Filters menu has been removed from the top menu and moved into the Appearance palette. In CS3 or older versions (up to version 9) you can achieve the same effect using the Appearance Panel, you don’t need CS4. Once you have the text, go to the Appearance Panel and click on the Flyout menu and choose add new fill. Double click the swatch for the fill to select a color. Then, add another fill. Choose a color for it. Then, with the fill still selected in the Appearance Panel, go to Effect >Path >Offset Path. Repeat the addition of new fill and Offset Path effect for each successive band of color.

A reader told me she used my command shape technique on a logo she was creating, but asked me if I knew a way where she could apply the lines inside the shape of the letters instead of applying them as a brush stroke. If you have no idea what I’m talking about. Let me explain 3 different technique on how you can apply a line pattern effect on text in Illustrator.

This technique works with letters that have a prefect equal weight. Because the lines are applied on a stroke you'll have to draw the shapes of the letters first so the lines can be applied as a stroke which represents the weight of the letters. Here are the steps to follow

• Draw the brush using 4 squares each with a different color
• Group the 4 squares (command/control + g)
• Drag grouped object into Brushes palette
• Choose Art Brush and click OK
• Change the orientation of the brush to vertical (upwards arrow)

• Draw the letters using the Ellipse, Line and Pen tool

• Apply a Stroke to the letters
• Select the Brush from the Brushes palette to apply it on the Stroke
• Adjust the Stroke weight if needed

This is a totally different outcome, but also a way to apply a line pattern on text.

• Select the text using the black arrow
• Create outlines/paths of the text: hit command/control + shift + o
• Ungroup the letters: command/control + shift + g

• Draw the 4 lines
• Select the 4 lines and group the lines: command/control + g
• Cut the lines: command/control + x
• Paste behind the 1st letter: command/control + b

• Select both lines and letter
• Apply the letter as a mask: command/control + 7
• Paste the lines again behind: command/control + b
• Select both lines and letter
• Apply the letter as a mask: command/control + 7
• Repeat the steps to apply the mask for the other letters

For some reason I couldn't get the text masked all in once.

The most complex of all 3 is to apply the lines inside the outlines of the letters and have the lines adjusted to the weight and curves of the letters. As an example we use the same typeface as we used in previous version, Helvetica Neue Black Condensed. This is another story, one that doesn't end perfectly. At least that's my opinion...

First I copied the letter 'o' I created in version 1 and I expanded the stroke into a fill: Object > Expand Appearance

I moved my text in a separate layer on top of the lines, I adjusted the transparency of the layer to 50% and I locked the layer. Then I resized the circle with lines to match the letter '0' as best as I could using the Selection tool.

Next step is most difficult and time consuming. I tweaked the nodes on the path so the lines follow the weight and curves of the letter 'o'.

As for the letters 'l' and 'a' I draw a line following the lines and curves of the letter. I applied the brush stroke, expanded it into a fill and tweaked the nodes one by one. All very time consuming, except for the letter 'l' of course. I'm not sure I the result, because I have the feeling that these kind of typefaces aren't well suited for this technique. This is of course my personal opinion.

The result is not 100% to my liking but it's the best I could do... Actually no. The 'a' has imperfections. I gave up on it. I simply just didn't want to spend any more time on this. It makes me wonder if there isn't any other way to achieve this result? Maybe the Make with Mesh technique could work, but it would mean a lot of work and node handle tweaking just like the technique I just used. If you have any ideas, please don't hesitate to share them in the comments. Thank you.

Today we are going to talk a little about a recent logo design I did but first a little background info. On June 25th Maxine Sherrin, one of the founders of Web Directions, asked me if I would be interested in designing the first magazine for their web conferences. I was thrilled by this invite and also honored they asked me. The tought alone, to design a magazine for print for a client on the other side of the world sounded very exotic and challenging. Since I know both John and Maxine pretty well I didn’t need extra time to think about it. My answer was yes of course…

The name of this magazine is Scroll. People who've attended Web Directions South held at the end of September have had a chance to hold the magazine in their hands. I haven't, but a copy has been sent my way and I'm very curious to see and feel it.

Scroll is a collectable 64 pages magazine for people who love web design and who are intrigued by the endless possibilities of the web. Each edition of Scroll will be tied into a Web Directions conference. The content of Scroll would be articles and stories by web designers, developers and thinkers, detailed conference session descriptions and speaker bios, micro articles/mini photo essays relating to web life, and sponsor advertising. Scroll is a magazine that has to evoke a feeling of excitement. It should be beautiful, elegant, timeless and sophisticated.

It's a magazine for web designers and developers looking to learn the very latest, and quite sophisticated, thinking on web techniques and technologies, as well as visions for the future of the web.

On the question to describe the look and feel using adjectives or short phrases, my client mentioned: timeless/classic, elegant, minimal, concise, sophisticated, warm, lush, luxurious, tasteful, graceful, refined, and collectable.

As for timing, my deadline was to complete the entire magazine by August 15th.

One of the first things I always do when I start a logo design job is sketching. The other thing I do is analyzing: analyzing the letters in the name and their shape, looking for ways to do something creative with them. The fact that the name of the logo is very compact is of course a plus. My attention went to the 's' the 'o' and the double 'l' at the end.

Secondly I was thinking of the meaning of the name and I thought of scrollbar. Then again that thought was there for only a few minutes because if you picture scrolling in your mind, you think of scrollbars. To me this was a dead end and not the right angle to approach a logo like this. Scrollbars are sometimes associated in a not so positive way of browsing the web, plus there is no way you can translate this into a logo. My thinking was to leave the meaning and go for a pure typographic styled logo.

There were 2 of these 4 sketches (see image above) that I though had potential. My thinking was that the top left one was OK but not good enough to proceed and play further with. The one on the bottom left felt a bit too blocky and less legible. Also, I don't see any possibilities to do something special with the 's', 'o' or double 'l'. The logos on the right let me do just that. With the top right one I can play with the 's' and maybe try out even more different things. With the other one I was thinking I could play with the length of the double 'l' and have them go all the way to the top of the magazine, creating a more vertical effect using a condensed typeface.

Once I have made my decision which sketches have potential I fire up my Illustrator.

For the first logo I didn't start with any typeface, I just drew the letters using the Ellipse tool or Pen tool. First I drew the black parts using a tick stroke. Then I added a thin white stroke on top using the Appearance palette. Wait a minute, this is not a tutorial ;)

Once I drew the letters separately I start playing with the position and transition between them. In my sketch I already played with that idea, but a sketch can sometimes give another impression and isn't always a bullet proof representation of the outcome. In my Illustrator version I use black and white. My logo has a black fill. My sketch uses an outline, so the 's' can be distinct from the 'c', same for the 'o' that overlaps the first 'l'. With an all black fill this might not work very well.

Next step was pure experimentation until I found a well balanced and compact logo. The white centered line helps to make the logo more legible and elegant. It makes the logo look minimal, modern and yet timeless at the same time. The thickness of the stroke gives the logo enough weight and visibility, just perfect for the cover of a magazine or maybe a t-shirt.

• 1) my initial design with the 'o' touching the double 'l' and the 'r' connected to the 'o'
• 2) reshaping 'c'
• 3) moving the 's' on top of the 'c'
• 4) connecting the 'c' to the 'o'

For the second version I was thinking of using a condensed typeface. I chose to go for the FF Rosetta and add my own personal touch, by tweaking the 's' and 'r' just a bit and making the double 'l' longer.

Next I was thinking of adding a little icon that looks a bit like the shape of a leaf, but then very abstract. It's a square repeating the combination of round and sharp corners exactly like the letters. It would be a great fit to put the issue number in.

Since this logo's main purpose is to fit on the cover of a magazine I thought I present it to my client using a fictive cover photo. Depending on the cover illustration or photo I thought of using the logo either in black or in white.

• 1) design proposals
• 2) final version with actual cover of issue number 1 (illustration by Carla Hackett)

Logo version 2 is elegant but compared to version 1 it has less impact in my opinion. The image shows 3 different cover layouts and were part of a set of template pages that I showed John and Maxine for my first proposal. This was without a doubt one of the most exciting projects I've worked on the past couple of months and John and Maxine are amazing people to work with. More about the magazine layout process itself in one of my later articles, I promise. So stay tuned :) If you can't wait you can check out the Scroll Magazine website and order a copy.

One of the things I’ve seen around quite a bit lately is a transparent rainbow gradient effect on a dark background. It seems to me that flashy transparent gradients are in these days. They make me think about magic. Today I’ll show you how you can create a magical rainbow color flame. OK, maybe I’m using too many words in a row here, but it’s the best I can do to describe this.

I should tell you upfront that for this tutorial basic knowledge of Photoshop is needed.

First we start with the creation of the smoky lines by using the Pen tool. Use a white fill for each shape layer and an Opacity of 40%.

Double click on the right on one of the layers to open the Layer Styles. Add a white Drop Shadow of 100% Opacity and set the Blend Mode to Overlay. Distance and Spread is set to 0 and Size to 11. Now check the Gradient Overlay in the styles palette. Choose Overlay as blend mode. Double click the Gradient thumbnail to edit the color stops in the Preset window. Select white as color for the left stop and give it 0% Opacity do the same for the right stop. Now add a stop at the Location of 50% (right in the middle), select white as color and give it an Opacity of 100%. Click OK to apply these Layer Styles to the layer. Select Copy Layer Style from the dropdown menu in the Layers palette (arrow on the right of the layer next to the fx icon). Now select all other smoke line Shape layers and select Paste Layer Style from that same dropdown menu. The style should be applied to all these layers now.

First we'll create a rainbow gradient preset. Select the Gradient tool in the Toolbox and go to the Gradient picker in the Toolbar at the top. If I'm not mistaken there should be a gradient called Transparent Rainbow by default in there. Double click to edit it. Remove the orange and yellow stop and move the the green, aqua, dark blue and hot pink stop so the colors are more equally divided over the length of the gradient. Give the gradient a name, for example 'Cold Gradient' and click the Newbutton. Click OK to close the window. Set the Opacity of the gradient in the Toolbar to 50%.

Create a new layer, select the Elliptical Marquee tool and drag a circular selection (hold down shift while dragging) towards the bottom of the smoky lines. Make sure the circular selection is big enough so you can add a Feather 85 pixels: Select > Modify > Feather. Now select the Gradient tool and drag a perfect horizontal line from the left of the circle and release the right of the circle (see image to the right above).

If all goes well your gradient should look more or less as in the image below. To be extra save, create a copy of this layer first just in case. This touching up and reshaping needs a bit of work and the result could be too messy. This way you can come back and give it another try.

Select the Smudge tool to reshape the gradient a bit so it looks a bit more like a colored flame. I've used a very big brush to reshape the area at the bottom and a smaller one to smudge out some colors so it looks a bit like they follow some of the smoky lines.

Add a second gradient effect in a new layer on top of the previous one. Just like before, select the Gradient tool in the Toolbox and go to the Gradient picker in the Toolbar at the top. Select the gradient called Transparent Rainbow from the dropdown gradient list and double click to edit. Remove the dark blue and aqua stop in the gradient. Rearrange the stops so the colors are equally divided over the entire length. Give the gradient a name, something like 'Warm Gradient' and click the Newbutton. Click OK to close the window. Make sure the Opacity of the gradient is set to 50% in the Toolbar.

Apply the gradient just like the previous one except create the selection a bit smaller and place it more towards the top of the smoky lines instead of at the bottom. Touch up and reshape the gradient using the Smudge tool. Make sure to make a copy of your layer (just to be safe) so you can always come back to it in case the result is not looking good.

To add some extra magic effect, we'll add some sparkles. In one of my previous tutorials I've already showed you how to create glowing sparks. Anyhow here is it again to refresh your memory (but with slightly different settings). Open the Brushes palette (F5 or Window > Brushes). Choose the 21 sized feathered brush. Check Shape Dynamics and Scattering. Select Brush Tip Shape and in the sliders at the bottom, set the Hardness to 0%. Check Spacing and drag the slider towards 403%. Select Scattering, check Both Axes and put the Scatter to 775%. Select Shape Dynamics and change the Size Jitter slider to 100%

Create a new layer on top of the other layers and set the Layer mode to Overlay. Select the Brush tooland select white as Foreground color. Now draw a random line. Duplicate the layer with the sparks once or twice depending on the glow effect you want to achieve. Then merge these layers back together (command/control + e).

Here is my end result. I've added some stars as well in 3 different colors each as a Shape layer: hot pink, aqua blue and bright green. They where drawn in Illustrator and pasted into Photoshop as a Shape layer.

A while ago I showed you how to create the Apple command shape in Illustrator where I created this dotted pattern version of the shape in the background. A bit later I wrote about who you can recolor your artwork using Illustrator’s LiveColor. Today, I want to share some insight on how I created this dotted pattern and how you can recolor your artwork using a wonderful Illustrator plugin called Phantasm CS.

About a year ago I had the chance to test this plugin. I use it mostly when I want to recolor my illustration; if I thought the color palette could do with a bit more contrast or when more or less vibrant shades were needed. This plugin lets me easily change my colored artwork to grayscale in 1 click. No offense to Adobe, but if I want to change the color of my artwork I prefer using this plugin over the LiveColor feature. To me it feels more natural because it works and behaves the same as in Photoshop. To be honest I find the LiveColor feature a bit too overwhelming. I tend to loose more time when I go via the LiveColor feature. Usually all I want to do is changing the hue, the levels, the curves, the contrast or change from color to grayscale. LiveColor to me is more appropriate for experimentation in case you have no idea which colors to use. If you are very used to the Adjustments options in Photoshop such as : Brightness and Contrast, Curves, Levels, Desaturate, Hue and Saturation... You'll love this plugin. It works and feels exactly the same as in Photoshop. There are 3 versions of this plugin: CS, Designer and Studio. The Studio version, the one I have been testing, comes with these features:

• Brightness/Contrast
• Curves
• Desaturate
• Duotone
• Halftone
• Hue/Saturation
• Invert
• Levels
• Shift to Color
• Swap Channels
• Temperature/Tint

There's a ton you can do with these features. One in particular caught my eye after reading some of the tutorials on the Phantasm CS website, it's called Halftone. After looking at the Halftone settings I've downloaded these predefined settings so I could use them and experiment a bit more with these.

After the plugin is installed in the Plugins folder of Illustrator, I've loaded the Presets I downloaded via the Load button in the Halftone window.

The Phantasm CS Studio options are stored in both the Filter and Effects menu in Illustrator (CS2 or CS3 is required). You can either choose to apply them via the Effect menu or the Filter menu. The difference between these 2 is that a filter will be applied without the possibility to edit the settings later on in the process. While if applied as an effect, you can edit your settings at any time. The paths of your applied effect will be the paths of your original object and not those of the effect. You can however expand the effect at all times (Object > Expand Appearance), but of course once you do this you can't edit your settings anymore and so the effect will then be applied permenantly. Anyway, the difference between these 2 won't be of your concern anymore since the Filter menu won't be there in CS4. Filters will be replaced with Effects. I always wondered why Adobe decided to have both of them, since it only confuses the user IMHO.

Call it cheating but I used a plug-in for the creation of the dotted pattern in my Apple command shape design. While designing an illustration or a composition, a lot of time is spent in experimenting with different compositions, colors, shapes...

Once the settings are loaded in the Halftone window you can apply them via the drop-down menu that is under the arrow button on the top right.

I chose to go via the Filter menu: Filter > Phantasm CS Studio > Halftone...

Then I clicked the arrow button on the right that stores the presets and I chose for Halftone Rosette. Then I experimented until I came to these settings:

• Type: Sampled (colors of the object will be used)
• Pattern: Grid Regular
• DPI: 10
• Grid Angle: 0°
• Origin: Relative to Selection
• Dot Properties: Circle, Width and Height at 100%, Tint Adjusts: Width and Height, Angle 0°, Blend: Normal
• Dot Gain: untouched

Here I chose the Abstract preset from the Presets menu.

After experimenting I ended up with these settings:

• Type: Sampled (colors of the object will be used)
• Pattern: Grid Regular
• DPI: 3
• Grid Angle: 45°
• Origin: Relative to Selection
• Dot Properties: Square, Width 350%, Height 40%, Tint Adjusts: Height, Angle 0°, Relative: checked, Blend: Normal
• Dot Gain: untouched

Here I chose the preset called Alphabet Soup from the Presets menu.

After experimenting I ended up with these settings:

• Type: Sampled (colors of the object will be used)
• Pattern: Radial 5 Spoke
• DPI: 5
• Grid Angle: -90°
• Origin: Relative to Selection
• Dot Properties: Character, Width 80%, Height 80%, Tint Adjusts: With and Height, Angle 0°, Relative: checked, Blend: Normal
• After clicking the Options button I chose URW Puiseux D Light as font and 'dance baby' as characters to use and opted for Repeat Text
• Dot Gain: untouched

If you choose to apply the Halftone effect via the Effect menu, you can edit your settings via the Appearance palette by double clicking the Effects icon (fx). As you can see in the image, the paths of the original image stay untouched. Only after expanding the effect (Object > Expand Appearance) the effects will become the real paths.

Each filter is highly customizable and you can experiment until you find the right thing. This plugin doesn't stop with vector objects also as you can apply the filters to text and embedded images as well. This allows you to get even more creative and maybe save some time along the way. You can also opt to customize only portions of your objects because you can select to apply the filters only to the fill, stroke or both. As you can tell there is more you can than just the things I've shown here so I think it's best that you experiment yourself with the free trial. I'm usually not a big fan of plugins but this Illustrator one is really an exception to my own rules.

In the January/February ‘08 edition of Layers magazine I wrote an article called “Get the grunge out”. Today I want share that article with my readers that didn’t get a chance to read it. Grunge is a popular style that has been around now for a couple of years in graphic design. A touch of grunge can easily be added to your artwork with a set of custom brushes. Once you create your set of brushes, you can save them and call them up at any time to achieve the grunge style. In this tutorial, we’ll use both Photoshop and Illustrator to create the brushes, and then you’ll learn how to apply the brushes in Photoshop.

One way to create your own set of grunge brushes is by first experimenting on paper. Creating a grunge style means you can go wild—the dirtier the better. In the first example, I used watercolors on a piece of rough-textured watercolor paper. If watercolor painting is out of the question, try coffee. All you need is paper, coffee, and a straw. With the straw you can create nice splatters if you suck a tiny bit of coffee into the straw and blow it onto the paper. It’s a simple and fun technique, and it’s really effective for achieving the perfect grunge splatters. You could also start from a digital image—just look for concrete or rusty structures.

Next, scan your watercolor or coffee artwork at a high resolution. Open your scanned artwork in Photoshop, and desaturate it (Image>Adjustments>Desaturate). Click the Create New Adjustment Layer icon in the Layers panel and select Levels. The values will be different for each image and will depend on the result you want to achieve, but in most situations you’ll have to drag the outer white and black sliders toward the middle to create a black-and-white image. Make sure you don’t exaggerate it too much, though, and that there are some gray areas left.

Command-click (PC: Ctrl-click) both the artwork and Levels adjustment layer in the Layers panel to select them and press Opt-Shift-Command-E (PC: Alt-Shift-Ctrl-E) to merge and copy these layers to a new layer. Now we have the final grunge artwork in a separate layer, and we still have our original artwork and adjustment layer as a backup.

Select the Polygonal Lasso tool and make a selection around one of the splatters you would like to use as a brush. Copy and paste this selection into a new document. Depending on your selection, you might need to do some touching up. Select the Eraser tool (E) from the Toolbox and select the Rough Round Bristle brush from the default set of brushes in the Brushes panel (if you don’t see it, choose Reset Brushes from the flyout menu). Clean up the borders of your splatter document so you don’t see any straight edges. Adjust the size of the brush if needed. For more heavy erase work you can change to Soft Round Brush to speed things up and switch to the Round Bristle Brush to finish things off.

Now you could go ahead and convert each splatter into a Photoshop brush, but we’re not going to do that just yet; we’re first going to convert the splatters into vector images in Illustrator. This will make them resolution independent. That’s a big advantage because you’ll be able to create your brushes in Photoshop as big or as small as you need. This keeps things very flexible, so it’s worth the extra step. Now save each Photoshop document somewhere on your hard drive.

Create a new document in Illustrator and place (File>Place) the first splatter you saved. With the image selected, choose Tracing Options from the pop-up menu next to the Live Trace button in the Control panel. Check the Preview option, choose Black and White from the Mode pop-up menu, and make sure Fills is checked. Play around with the settings. I’ve reduced the Path Fitting and Minimum Area settings to create more details. Check the Ignore White option so any gaps will be transparent. (Note: There is no Ignore White option in CS2, so you need to select the white areas with the Magic Wand tool [Y] after you trace and delete them.) Hit the Trace button when you achieve the desired result, then click the Expand button in the Control panel.

Select the traced splatter in Illustrator and copy it. Now go to Photoshop and create a new document. If the brush is for print, you’ll need to create a high-resolution document (File>New) at 300 dpi. I’m copying the big coffee stains into a document of 2600x2245 pixels. Now paste the Illustrator object into your Photoshop document. Select pixels in the Paste As options. In the end it'll be converted into a brush, so we don’t need to keep it vector-based (just make sure you save your original Illustrator source files). Resize the splatter to fit the document and press Enter.

If you want to save your own set of brushes, it’s a good idea to make sure that you start with an empty Brushes panel. To clear your Brushes panel, go to Edit>Preset Manager. Select the first brush, then hold down the Shift key and select the last brush. Now that all brushes are selected, click the Delete button and then click the Done button. Your Brushes panel is now empty and ready to add new ones in. This way, when you export the new brushes to a set, you save only your custom brushes.

Hold down the Command (PC: Ctrl) key and click on the top layer’s thumbnail in the Layers panel to create a selection around the splatter. Go to the Edit menu and choose Define Brush Preset. Enter the name of your brush and click OK. Now you’ve created a Photoshop brush. Repeat the same steps for all other brushes you want to create. (Note: If you’ve created a corner brush, it’s easy to create brushes for the other three corners. Just flip the brush horizontally (Edit>Transform>Flip Horizontally) and then define the brush. Now flip the brush vertically and define it again. Flip it horizontally one last time and save it again.)

If you’re going to create a whole set of brushes, it’s best to keep things nicely organized in the Brushes panel. In the Preset Manager, you can move brushes around just by clicking-and-dragging. You can also rename your brushes by double-clicking on them in either the Preset Manager or in the Brushes panel.

After all your brushes are nicely ordered and named in the Brushes panel, the only thing left for you to do is go to the panel’s flyout menu and choose Save Brushes. Enter a name and click the OK button.

Now if you reset your Brushes panel to the default brushes and you want to use your set of grunge brushes, you can easily load them. Go to the panel’s flyout menu and choose Load Brushes. Browse to the file you’ve just saved and select it. If you saved the file in the default location, Photoshop will add the set to the bottom of the Brushes panel’s flyout menu next time you launch the application. Just select the name of your set in the menu and Photoshop will ask you whether you want to append or replace the currently loaded brushes.

The hard work is done and the real fun can begin. While you’re clicking away with the brushes, here are tips that can come in handy:

• Use separate layers for each grunge effect to keep things flexible.
• Play with the layer blend mode, opacity, and color of the brush. Needless to say, the possibilities are endless.
• If the spot or splatter is too heavy or too big, you can use a mask on the layer and hide parts of the grunge effect using another grunge brush.

If you like you can download my set of brushes. You are allowed to use them for personal or commerical use. However if you use them commerically, please consider giving my Amazon wishlist a peek ;)

It’s a struggle to find the right application that makes office live a bit easier. For starters I am designer and not a sales person so it’s only natural that I want to limit the amount of time being the sales person. In my search for the best application that was one of the criteria that had in mind. I’m not the kind of person that falls for features but for usability instead. After the jump you’ll find out what had a large weight in my decision-making.

I don't know if it is an obsession or not but the first thing I look at even before trying an application is the interface. The features can be easy to use but if the interface blows I'm not interested because I know myself and I will stop using it anyway. The design factor and if it doesn't look overwhelming is what will make me decide if I want to try it or not. That's where Daylite 3 draws me in.

I'm already using a Marketcircle application called Billings with great satisfaction. The only thing missing in Billings is a network feature imho. I reviewed it some time ago. Anyway let's get back to Daylite. Like I said in the intro it's the well-designed interface that makes me want to try it out. When I got the chance to review it I jumped at the opportunity. As far as I know this is the best looking organisation tool for the Mac. With that out of the way let's look if it is intuitive to use as well?

The installer is usually a first indication to see if the makers care for details or not. You'll need admin account because things are being placed in the root library. It's the heart of the application that gets installed namely OpenBase SQL, the database that the application will use. The installer keeps you informed of what's going on. Once the installing process is done and you start the application for the first time you'll be asked if you are new and would like to create a new database, connect to an existing one or if you want to connect to a sample database. I've opted to connect to the Print & Design sample database because that seemed the most logical choice and closest to what I do.

If you explore the sample database like me you'll get a pretty good overview of what the application has to offer. I liked some the examples in the Print & Design sample that I thought why not create a new database and set it up in a similar way.

When you create a new database you fill in your details and you will also get the option to import information from Address book and iCal. In step 4 you choose from which template you like to proceed. Once you've selected what you need and click finish you'll have to add your admin password to finish the import. It seemed that all my contacts and organizations are in there and the set up is like in the Print & Design sample. Daylite is a single window application, which means whatever you click or do you'll always remain in that window. We are using it in a multi-user environment but it can also operate in a single user mode. So one user is one license and from there on it's as many licenses as the number of users who will be logged into Daylite concurrently.

You'll see icons for Calendars, Contacts, Organizations, Projects, Opportunities, Groups, Tasks, Appointments and Notes. The interface doesn't look overwhelming and you don't get the feeling you sometimes have with other applications that you don't know where to start.

You'll also recognize the purple icons that represent smart filters like in the Finder. Daylite calls them source list capabilities and they are available in every category of information and you can customize them to your preference.

The first thing I did is enabling the syncing feature in the preferences so that my contacts in Address book en iCal stay up to date. That's needed because iCal can give alerts when it's not running and Daylite can't. It's important that you start out right or you rip your hair out like me. This syncing is complex and you can screw up pretty quickly. I’ve ruined all my contacts and organisations with doubles when trying to sync with the local iCal and Address Book on my Mac that wasn’t the master database. Eventually I've turned off syncing with iCal and Address book on my Mac because I was afraid things would go haywire again. On the master Mac the syncing with iCal and Address book works flawlessly. I think it's best to start from one Mac that has the correct Address book records and make that Mac the master and on the others start fresh with no data so that with the first sync data will flow over. The more machines for syncing the higher risk that something can go wrong I suppose.

Calendars are a visual representation of appointments, meetings, and events based on the criteria you determine (i.e., users, category, kind). Calendars and appointments play an integral role in managing schedules. Daylite features 3 different ways to view your calendar: day, week, and month. A handy feature that you can toggle in the calendar view is the due list pane. Daylite adjust the due list according to the date range that you are currently viewing in your calendar.

The concept of contacts is easy to understand as it represents a person or individual. That can be someone you know personally, a customer or a business lead. You can take this as far as you want in what is stored there. You can put in date of birth, middle name, hobbies, phone number, electronic address, and many more. What I like about it is that you can create notes and keep a chronological record of your interaction with a contact. If you send a letter to a contact in your database, Daylite stores a link to the letter in the Details panes Activity tab of your contact record. You can also add files and URL's to a contact as file references and web references respectively. You have flexibility in classifying contacts by assigning a category and single or multiple keywords. For example, a contact can have a category 'client' and keywords such as 'loyal client' or 'long term client.' This way you arrange your contacts into meaningful groups when your database gets bigger.

An organization could be a company, business, family, association, or any legal entity comprised of a collection of contacts. It enables you to manage information and relationships specific to the company or from a company perspective. You also have a number of fields that you can use such as size of the company, ticker symbol, industry, region, employee hierarchy, the company's affiliates, and many more. When you start linking a person to that organization you understand the role of that person in that organization. For example you tag someone as a 'Decision Maker'. Just as in Contacts you can link notes or files from hard drive to keep as reference to that organizations (invoices for example).

The Projects part isn't something I used all the time because we use Basecamp as well for communicating with clients about their projects. As far as I am aware of there is no support for Basecamp inside Daylite. It would be nice if they took advantage of the Basecamp API and let you import the things that you have online. Not everything should be possible but it would be nice if there was a collaboration between the two. However if you aren't using Basecamp the Projects part can be helpful. It does what you would expect like planning, keeping track of relevant information that help manage the multiple objectives in team or on individual basis. A project has many fields that record the status, due date, start date, completed date, pipeline, objective, and owner of the project. Daylite allows you to guesstimate how much time a project might take for completion. This helps you to compare whether your calculations are realistic or that they need improvement. Here you also have categories and meaningful keywords at you disposal. I use things like 'website design' or 'logo design' so I can filter out projects. The pipeline feature is handy because you can visually track how a project is organized. This way we can easily see what stage the project is in.

Opportunities is one of that features that we really needed because before Daylite we didn't track any of the pile of requests we get. So we had no real clue how many opportunities became real projects. Everything was just guesswork :) Now we can put in a forecasted close, reason why we didn't won, percentage of the probability of winning etc. Opportunities are a potential for new business. When you create a new opportunity, you can record the state, type, category, keywords, owner, and much other information. I have set this up so that my services that have a flat price are in there so it is fast to send out an estimate to Billings. We also use the pipeline feature here to track the sales cycle. We have several categories like GUI design, templates, branding + identity that we use to differentiate the different opportunities. Opportunities can be linked to contacts, organizations, groups, tasks, appointments, and notes in your database.

A group is a collection of contacts, organizations, projects, and/or opportunities that have something in common, as defined by you. You could use Groups to send out an offer to a bunch of organizations or contacts. Groups can also have any number of subgroups. That make it possible to organize responses from those you have campaigned to.

We all have work that we want to accomplish. Some days are busier than others. In Daylite, you can create tasks to maintain a record of what work needs to be completed within a certain time frame. For example a quote that has to send out by Friday. When you create a task, you can record information such as start date, complete date, due date, estimated time, category, etc.

Appointments are there to remind you that you agreed to do something at a certain time on a specific date. If you have appointments that span multiple days (such as a conference or seminar), you could use the multi-day event feature to create a banner in your calendar. Typically, you would create appointments for your contacts, however, in Daylite, you can also create appointments that are linked to projects and opportunities for giving them a more powerful context. For example all my invoice due dates are in there as events so we can follow up payments. One thing for to remember for this to work is that Daylite must be running when you create the invoice in Billings. The appointment window records many specifications about where, when, how, and with whom the appointment will occur. For those who travel on business, Daylite gives you the ability to customize time zone by matching the default system time or select a different time zone than that used by your computer for creating appointments. You can create many kinds of appointments such as event, outbound call, inbound call, chat, meeting, and video. When you link other users to an appointment, it becomes a meeting; Daylite notifies all the linked users about the meeting through the Notifications window. Before you actually create a meeting, you could use the Schedule button to determine conflicts between the users linked to it. If you have appointments that are repetitive, you can repeat them either daily, weekly, monthly, or yearly until you reach a finish date. However setting up a recurring alarm endlessly is not as easy as in iCal because Daylite wants you to give in an end date and there is no option to choose never like in iCal.

A note is a brief record of information that can be created on its own or linked to a contact, organization, project, opportunity, or group in your database. This allows you to attach the full power of Daylite's linking and tracking capability to your small bits of information. Notes are ideal for bits of data that don"t fit anywhere, but are still important and can't be lost—for example, a contact's history. You can assign a category to the note which is useful for filtering Smart lists or performing quick searches. If you are using Daylite Mail Integration (DMI), the contents of an email can be stored in Daylite as a note and linked to the appropriate contact. Ideal for storing stuff that you have agreed (like price or a deadline) on and that you want to keep around for when there is a discusion and want to prove it in black and white :) In a multi-user environment, Daylite gives you the ability to customize the visibility of notes. For instance, a supervisor can create a private note for a public contact record, so that only he can access and modify the note.

A very useful addition to the application is called Trash. Let's imagine that I put in a project and my colleague Geert deletes it together with all contacts on his end. Luckily it is not lost forever because under the menu 'window' you'll find Trash. Trash is the place where you can check what has been deleted by who and when and easily restore it. You can restore any item you delete in Daylite, as long as it is available in the Trash window. If you delete an item in the Trash window permanently, you cannot restore it back into Daylite. It's a good extra security because the more people have access the higher the risk something will go wrong eventually.

The truth is that Daylite is one of the best CRM applications that I found so far, but to be honest it still is a complex application. I fully understand the complexity to create something that pleases everyone because everyone has different needs. Still when I first start using it, I was very impressed but after a few weeks I sometimes got baffled by the complexity. It strokes a bit with the philosophy of the application if you need to hire professional training to fully take advantage of it. Much could be approved by creating some example videos that explain features like projects, opportunities for example. There are videos but they stay too much on the surface of things you find out yourself. I would set up a fake graphic design agency and show the user how it would work in a day to day basis to fully utilize the features found in the application. It wouldn't have to be complicated just show the feature how it would be used so that you grasp the beginnings. If you still want more after that than it would make sense to hire pro help. I believe many more users could be convinced this way to use Daylite. The investment in time would be worth it I believe.

There are a few things that don't really work as they should imho. The first one is when you create a new contact in Daylite. You can watch the movie (QuickTime) below to see what I mean exactly.

As you have seen it's hard to get out of that box because there is no visual indication that there is a way of cancelling the action. I hear some of you thinking why not just use the 'escape' button? I did try that and the funny thing is that this doesn't cancel the action as you would think but act as an enter instead. So when you do that you end up with a new organization again.

Another one is when you try to use Daylite together with Billings. For example: I want to add a client in Billings using Daylite. So I click the Add client button and in the dropdown I choose 'From Daylite'. In the search field I enter the company name and as a result I either get nothing (if there are no contact persons connected to this organisation) or I get the contacts listed. That's not what I want, I want to add the organization, not its contacts, since you don't invoice contacts, but the organization, in other words legal entities (e.g. I invoice Nike, and not John who is the VP of Operations of Nike). Now I'm forced to go via Address book, but there I want to avoid to use the checkbox to mark a vcard as a company. This behaviour makes the 'From Daylite' import option useless for me in Billings. I now avoid this by adding a companies and persons separately in Address book. The organisations are there in Daylite so I'm baffled why you can't add them in Billings and I hope this get fixed in an update.

In closing even with the complexity and the annoyances it still is one of the best CRM applications for Mac. For the time being I am sticking with it and I am hoping that most of these will be fixed in a 4.0 version and that Marketcircle will invest in setting up a fake company to show how to use the app daily and everything that comes with that in a screencast series. This application isn't for everybody and some of you will have enough with what Apple or Google is already offering but if you want more I still would recommend that you try it out. I think I'm not too far off when I say that it is really situated toward small businesses like me. There is a 30 day demo that you can download. I just feel it is missing a bit of the Apple ease of use. You know what I mean, we don't look at the manual don't we, we want to jump right in and forget all about it :) Pricing starts at $189 for a single user with the integration plug-in for Apple Mail.

For our next part in the inspiration series we point our direction towards the big white screen. For long time opening credits where just a boring obligated part. Luckily people start realizing that more was possible in the late 1950s and it became a form of art. There is one graphic designer that made several credits mini movies a work of art and his name is Saul Bass. He is solely responsible for a turning point in the movie credits world. What follows is a small selection of what I found inspiring.

Watch it

Watch it

Watch it

Watch it

Watch it

Watch it

Watch it

How it was made

Watch it

Watch it

Watch it

Watch it

Watch it

Watch it

W