Yesterday Andrei Herasimchuck of Design by Fire wrote an open letter to Adobe with regard to typography on the web. The idea was since Adobe is a license holder of several classic typefaces to motivate them to release some of these into the public domain. Andrei suggested eight to twelve core fonts. Of course this would mean that Adobe loses some revenue but I also think that it wouldn’t have a significant impact on Adobe’s bottom line.

But first a thank you is in order

Abobe has such an important role in my life as a designer. My first Adobe program ever was Illustrator and I think it was Illustrator 88. It was my first introduction into the world of vectors. It was so impressive back then to do those things on a computer instead of paper. The second program was Photoshop 2.0 and if my memory serves me right it was pretty overwhelming and I took an evening class to get the hang of it. If it wouldn’t be for Adobe I wouldn’t be doing what I’m doing now. You have no idea how grateful I am for that.

Imagine more font options

Design is communication and as it stands now we only have very limited choices in typefaces for the web. If Adobe would do such a thing, a big “if” I know, the next step would be to get them included in the next updates of Windows and Mac OS X. I for one would love to have more options when it comes to typefaces for the web. It’s one aspect of the web that bothers me sometimes and also limits me creative wise. By doing that Adobe would surely become part of the next generation websites and this would create a huge positive message to designers world wide.

Andrei’s list

• Adobe Caslon Pro
• Adobe Jenson Pro
• Franklin Gothic
• Frutiger
• Futura
• Gill Sans
• Helvetica Neue
• Univers
• Warnock Pro

My list

Dear Adobe, this would be my preferred choice:

• Frutiger
• Myriad Pro
• Warnock Pro
• ITC Avant Garde Gothic Std 1
• ITC Galliard Std 1
• ITC Officina Sans Std
• Futura
• Gill Sans

So spread the message and set the grassroots in motion for more options in our designers arsenal. What fonts would you like to see released by Adobe?

When I was playing tour guide for some friends here in Belgium, I was really disappointed that I couldn’t tell them that Belgium has a strict smoke free policy. When reading Peter Forret’s post from today I got reminded of something that me and my friends discussed also. I wasn’t sure anymore when the law of non-smoking restaurants would be in place so that one can really enjoy a meal without being disturbed by people who don’t give a damn about you still eating.

125 days to go

Just like Peter, I'm also counting down the days until January 1st 2007. From that day onward it will be forbidden to smoke in Belgian restaurants. We had to put up with it long enough! So far the good news because in our little country there is always a but...

Not in bars, cafes and snack-bars

You've guessed it, there is a compromise! Why in God's name can people still smoke there? According to the minister of public health it's because those places have a social and cultural role to fulfill. Excuse me? What's social about smelling like an ashtray when you get home and your longs full of smoke that you didn't want in the first place? So in those places it will still be allowed to smoke for a period of minimum 3 years. After that they can ask for a renewal. I don't know about you, but I am all for a total ban of smoking in all places. It's disturbing to read that more than 2,500 people die each year because of passive smoking in Belgium. That figure is more than double the amount of people that die from traffic accidents. So we can only hope that our government will see the light some day and wises up a bit and vote for a total ban. I'm sure many people would enjoy a smoke-free night out.

Time for a small Expression Engine tutorial (further referred to as EE). When I tried to add the pagination links on my Approved page I ran into trouble and my XHTML code didn’t validate. You always have to think carefully on where to put a particular closing tag or your code (and your layout) could get messed up.

EE code for the Approved links

Each Approved link is contained in a list element

Roger published an interesting discussion on “Light text on dark background vs. readability" . I think that most accessibility/usability experts have no clue how hard life of a designer really is. We constantly have to battle in our mind coming up with something creative and if not we fail in our profession and will likely not convince any clients. The thing is, where do you draw the line? It is about making the right choices and that’s what I did when I designed this site.? I know that some things fail on this site with the color analyzer but they only contain 1 or 2 lines of text tops. My main concern was the article section and I made sure these were within the recommend guidelines. Because that’s were you are likely to stay the longest.

Everybody has advice

What also strikes me is that everybody has advice what to do. But I can’t stop wondering if the people who give that advice have any clue how hard it is to be a designer? To me it also seems that some take the usability and accessibility too far that they tend to forget about aesthetics and visual design. Like I said in the intro we constantly are under a certain pressure to stay on top of the design game. If we stay within the rules of what is acceptable and what has been proven as working we will not be perceived as a good designer or only end up being mediocre. How many times did you read something along the lines “It looks like a blog and it’s boring" or “colors have been done before boring", that’s the stuff we as a designer have to deal with all day. So what do you do to solve that? You explore new territory and try to use some new colors and a grid. So yes sometimes these things ruin something for somebody but that’s what life is all about. Life is a trade off and you do what you think is best.

So are dark backgrounds really that bad?

To me personally they aren’t. My advice is when you use them, use them wisely in a circumstance that warrants them. For a newspaper website it is a no go for example but a personal website or client website why not. Just try to think about readability in the sections were there is a lot of text. That’s exactly the area that I did a check on. Other important aspects are aspects like leading, tracking and font-weight. It’s amazing how much these little things can affect the usability. My leading was to small at first too on this site and it made it much more easy to read.

Making an alternative stylesheet

It is still on my agenda to do so but this takes time. First I need to explore colors because I still want things to look nice. Doing a rush job to just get one out there is totally wrong in my humble opnion. When I first started designing this site I explored a lot of things and it is not easy to come up with something that is considered the holy grail.? It comes down to making choices and now I rather spend my limited amount of time in doing some tutorials instead of not publishing something because I’m making an alternative stylesheet for the very few people that complained so far (only 2). There are other options they can use like the RSS reader or making a user stylesheet in their browser.

Computer Screens

In the bigger picture of the discussion I think computer screens are a very important factor. I’m always amazed when people starting to talk about colors they see. Clients that say I don’t like that red color but in reality it is orange, or I don’t like your black background on this blog when it is a dark green. That should tell you something about their complains isn’t it? To me the calibration of most screens are way off. I personally feel that a designer or anyone for that matter can’t be blamed for people that decided to buy a crappy screen because the price was right. If you did that, well sorry then you have to deal with your bad choice. I’m not the one to fix or compensate for that. And believe me there is a huge difference in screens! All Apple screens for example are great for online reading, Dell has some fantastic screens too if you choose the “UltraSharp” ones. Color calibration isn’t easy but there are many tools that can help in creating the best suitable solution. But that’s something that we could use for another article all together.

Conclusion

It’s impossible to make it work for everybody, 100% perfection is utopia. Colors can be so personal that it is impossible to get it right for everybody. I’m considering myself lucky if I get right for 80% of the people. Usability and accessibility advice tends always to be black and white but for a designer there is a lot of grey too. If you’re already thinking about readability when designing you are doing something right. So don’t stop being creative!

Sigh! When you have a huge pile of work it is not a good time to sort out hosting trouble let me tell you. But I kinda got forced into it because the site had been down twice in such a short amount of time. There were moments that I wished that I was on the beach away from it all! After some research and the real good experiences that I already had with the folks at pMachine I decided to park my blog at the most logical place that I could think of pMachine Hosting.

pMachine hosting

It came recommend by a few people too and I’ve got to say I’m pretty pleased with the results so far. Julie did a marvelous job in helping me out and explaining the technical details of it all. Your brain can turn into spaghetti from listening to all the server and DNS terms. Today the DNS is also moving over and I’m keeping my fingers crossed that from now on it will be smooth sailing.

index.php

When my blog launched some people pointed out that it would be nicer if I removed the index.php part from my url. My previous host didn’t allow me from doing that so this was the perfect opportunity to start clean :) The team did a super job in testing out things. My blog isn’t exactly easy and you have to keep a lot of things in mind, for example the four different blogs when fiddling with server settings. The old ones still work because of all the links that are archived and people linking to them.

Expression Engine contest

I’m also glad that I can announce that I will gave away a few licenses for Expression Engine in a little creative game that I’m planning on doing. A little bird told me that version 1.5 is on it’s way and when it officially launches I’ll write about it and combine that with the contest. So start building up the creativity :)

Not sure about you, but when I create buttons for a web site, I always use shapes, especially if the button has rounded corners. These vector shapes have the advantage that they are easy to scale or resize. Combine them with effects and you have the most flexible button ever. Not sure what I mean? I hope I can share something useful with you here…

Drawing the button using the rectangle shape

Select the Rounded Rectangle Tool, enter 4 or 5 px as radius for the rounded corner and draw your rectangle button shape. Double click the layer name, enter a name and then double click to the right of the layer to active the Layer Styles options.

Adding styles

Adding a drop shadow effect

Check the Drop Shadow style and enter 8% opacity, 90 degrees for the angle, 5 px distance and 0 px size (in case you don't want a blurry shadow). Feel free to enter what you think is nice.

Adding a gradient overlay

Check the Gradient Overlay option and click the gradient image. That will bring up the Gradient Editor. Click the first Color Stop and click in the Color below to change it. I used #a4cee6. Do the same for the Color Stop to the right. I've used #56add6. Now add a Color Stop in the middle by clicking right below the gradient in the middle. If it's not 100% the middle you can correct it by entering 50% in the location field. I've used #468bcc for this Color Stop. Now add another Color Stop at this same location. To do this just link to the right of it (below the gradient). I've used #81b3e2 for this new Color Stop. Now change its location to 50%. You should now get the effect shown in the image above.

Adding a border

Check the Stroke style at the bottom and select 1 px for the size and white as color (or the background color you are using).

Adding an extra glow

To finish the button off I added an extra glow on top by drawing a path using the Pen tool. I've filled this path with white and added a little mask to make it fade a bit and less hard. I set the transparency to 50%.

If needed, change the tone of the color

Sometimes you come to the conclusion that the color of the button is not exactly what you had in mind. You can experiment by using the Hue and Saturation Adjustment Layer. I de-saturated the button to make the button less blue and more grey. If you command/control + click on the Layer icon in the Layers palette of the button layer, your button will be selected. If you then select the Adjustment layer and click the Add vector mask option at the bottom of the Layers palette, only your button will get effected and not the rest of your layout.

This is just one way of doing things, it's one way of adding certain effects but there are a zillion possibilities and things you can try out.

PS: in case you have multiple Photoshop documents open, try this : hold down shift + command/control + space and click in the active document. You'll see that you zoom in on all of the documents. If you hold down shift + option/alt + command/control + space and click you'll zoom out on all of them. This is a tip I got from Roger Johansson who accidentally hit the shift key when he was zooming in.

First of all let me apologize for the downtime earlier today. As it turns out there was some sniffer program on or watching the server to scan for passwords. Don’t ask me how it came there in the first place since I am not a technical person and I certainly didn’t put it there. It is the second time since the launch of my redesign that I had major down-time.?

So I am on the look out for a new hosting partner so that this doesn’t happen anymore in the future. With moving to another physical location some more down-time will be needed until name servers are updated. I’m very sorry for the inconvenience that this may have caused and I’ll do anything in my limited powers to prevent this from happening again. Any hosting horror stories to share to make me feel better? :)

Oh man! Never let me design something again for somebody who’s into accessibility, those guys are a major pain in the ass… JUST KIDDING!! :o) Maybe there is a little bit of truth in the fact that it is more difficult to design something really nice and take as good as all accessibility factors into account. So it was quite a challenge because I also had restrictions in what I could change and what I could not…

The scope

As a designer it’s hard to leave things alone. There is always the urge to brush up, replace that, move things around… in other words make drastic changes. Just ‘improve’ a little was the job, and sometimes that’s more difficult than starting fresh. I see it a bit like designing with my hands tied :)

What to keep

The first thing that came up in the conversation was the grasshopper. I see this as the trademark of 456 Berea Street but Roger wasn’t sure he wanted to keep his grasshopper. He was a bit bored with it and wanted to change it, but I advised him not too. He showed me a mockup of the new header he made and it was like “Honey I shrunk the grasshopper” :) It was nice though, but all the beautiful details of his grasshopper were gone. I thought if I would change something it would be the position of the grasshopper and manipulate the background a little bit. Here is the before and after:

The old header

The new header

Organizing

When I looked at the current design (previous as of now), my first impression was that it needed some organizing. There is so much text that I had a bit of trouble differentiating the separate posts and sections. Especially with the text ads, it felt like everything looked too equal to me. My first area of focus was to get things organized in an easy and light way. Adding a bit more space and a bottom line in between sections did the job combined with some typographical changes. For example bigger titles in a new color and font. The Google ads in between articles got a light background to better distinguish them from the posts and making them less obstructive in the process I think.

Tweaking and compromising

And with every design there is tweaking and compromising. As a designer and color lover I like to believe that I’m good at picking the ‘right’ colors, but what seems right to me, doesn’t always seem right for everybody. As an accessibility advocate, Roger puts my choice of colors to the test. A few adjustments needed to be made in terms of contrast. But let me assure you that these are really tiny changes.

The navigation, the initial version

The navigation, final version

We both decided to use the color for the active button as a mouse over effect and give the active button more contrast.

Titles

I always try to take contrast in account, but if you design very strictly to make sure “all” colors are within the limited range of what is ‘generally’ allowed, you’ll have a hard time to make it attractive and nice. Your choices are rather limited. It’s like Roger says in his article too, it’s all about compromising, but I’m gonna be honest here and I wouldn’t like to do it in every design, at least not in every element of the design. The rule of thumb is think about it and make it as good as possible but don’t cut yourself short and try to stay creative design wise. Roger’s site shows the perfect balance, especially since his focus is not on design like my site, but on the subject of accessibility. Knowing your target audience is the clue.

Finishing touch

I guess I always have to add at least a few icons to finish things off and to put my stamp on a design ;) It’s those little details that makes a difference or set a site apart. Of course the whole package needs to be good or this wouldn’t make sense.

Colors of links and icons

A strong complimentary duo

Working on this with Roger was really fun and I learned a lot. We learned from each other since we are very complimentary and we are both perfectionists. You may think we are like the perfect duo and never disagree, but our different areas of work engage some nice discussions :) The funny thing is that mutual respect brings out the best of both worlds. I wish each web project could be like this.

Also read Roger’s post about the redesign.

It’s unbelievable how the rumors are flying again in the anticipation of Monday’s start of the WWDC. It’s that time again where everybody starts daydreaming about iPhones, Tablets, Home cinema appliances, some are new and most of them popup every time there is an event. I’m not focusing on making an educated guess in what’s coming hardware wise but like to think a little of possible interface changes in 10.5 Leopard. I have been wondering what direction Apple will take a few times already. I always postponed writing something about it but this post of Brent Simmons sparked my interest again.

First a little bit of history

I still remember standing in line in Paris to get the first Mac OS X public beta! So before going any further let’s see what changes Mac OS X has had over the years.

Mac OS X Public Beta

When this was launched it was a huge change from Mac 9 and to some it was too drastic. I never had that feeling and wanted to stay away from OS 9 as soon as possible. When you look now at it I’m amazed how overwhelming the stripes really are.

Mac OS X 10.0 - Cheetah

The most visible change here was that Apple dropped the button look in the finder and introduced some new icons along the way.?

Mac OS X 10.1 - Puma

Mac OS X 10.2 - Jaguar

In 10.2 the brushed metal look appears for the first time in some applications like address-book for example. The finder still had the striped look.

Mac OS X 10.3 - Panther

Panther saw the most changes and marked to me also the point that Mac OS X was getting at a mature age. This marks also the introduction of the brushed metal Finder. But one of the best things in Panther was that the pinstripes in the menu background and anywhere else in the OS were nearly invisible. Title bars lost the stripes completely.

Mac OS X 10.4 - Tiger

Tiger didn’t match Panther in terms of the number of graphical changes. One of the changes was in the Apple menu icon, It became a bit brighter and consisted of a flatter shade of blue. It’s now a brighter, flatter shade of blue. The biggest graphical change then was the new unified titlebar/toolbar. Mail for example had the icons in the glassy button look which I really hate.

Windows Vista lessons

Let’s say that I would be very disappointed if Apple took some lessons from the Windows Vista look, where glass and transparency is everywhere. I can’t shake the feeling that it is a bit like when bevel filters first appeared in Photoshop. Everybody was like “look what I created”. I have that same feeling when I look at the Vista interface, they used it too much and all subtleness is out of the window. John Gruber said that he thought Apple was setting out to make Vista look like a toy when compared to a more refined and professional OS X. My thinking exactly. To me Vista is like a theme for ShapeShifter, something fun for awhile. That’s what I have with most themes by the way, I always go back to simplicity and the original look Apple created.

Mac OS X 10.5 - Leopard

I wouldn’t be surprised if Apple introduced bigger icons then 128x128 pixels because I guess they are thinking about what to do with the growing trend of bigger screens and higher resolutions. I think it would be wonderful if the system is smart and detects your resolution and adjusts everything accordingly. Some new icons could be added because I’m bored with the blue default folders.

The Brushed Metal Look

Personally I really hope they will get rid of the brushed metal look, I didn’t like it from the start. First introduced in 10.2 and since 10.3 almost in all parts of the OS. The new iApps could be an indication of the path Apple is following. That look isn’t available anywhere else in the system. Maybe something along the lines of the UNO look.

What I would like

Another welcome change to me would be more subtle shadows. When two windows are on top of each other I find them too hard when the background is white. Most of the icons in the toolbars could also benefit from softer shadows. What I would prefer, is that the windows or any UI elements that are visible but not on top are a bit shaded so that the top ‘active’ window’ stands out more. My guess is that the new UI will have a more subtle use of 3D, shadows and other effects. I’m thinking of a more flatter look but still with a bit of shininess left, maybe a bit like this? (something that I quickly designed):

What bothers me a bit is that Apple has so many different window styles now in the system that I sometimes dream of more consistency. We could benefit from it aesthetically I think and it would end the critique that Apple is no longer eating its own dog-food. Maybe Apple will come up with 2 variations: a dark one and a light one. Black MacBook Pro’s have the dark UI as default and the white ones the lighter one, but both ‘themes’ are available. Apple likes to work with either black and white these days and they like to reflect the look of their hardware in the UI. They used these stripes and a lot of aqua in the first OS X UI which suited perfectly with the look of the Macs back then.

The Finder could learn a thing or two from Path Finder in that regard, so I am kinda hoping that “tabs” will make into 10.5.

I’m also wondering what Apple will do with the aqua effect: the scrollbars, the 3 top left bullets etc. My guess is that they will dump it, or let’s say reduce the effect to make is less bubbly. What I’m saying would mean a drastic change. It’s a very wild guess I know. I could be totally wrong :) Although my guess is that Apple is thinking ‘we had this, it was cool for that time, it’s passé now, let’s move on’.

So what’s on your Leopard list?

Have you ever wondered how you create a seamless pattern in Photoshop? It’s easy and it’s fun. Let me show you how…

Step 1 - Create a Color Fill

First of all create a vector illustration in Illustrator CS2. It might be just a simple dot or circle. Copy this object. Go to Photoshop and create a new document of 300 by 300 pixels. Select the Rectangle Selection Tool from the Toolbox and drag a squared selection (hold down shift) in the center of the document. Leave enough space around the square. Click on the Create New Fill or Adjustment Layer in the Layer's Palette and select Solid Color. Select a color you like and click OK.

Step 2 - Paste your Illustrator object

Paste your Illustrator object. Select Smart Object in the Paste options. In the View menu, make sure that Smart Guides are active (Show > Smart Guides). Snap and Snap to Layers should also be checked.

Step 3 - Place your object over the border

Drag your object over the border of the Color Fill. If you see the Smart Guide and feel the object 'snapping', release the object.

Step 4 - Drag a 2nd object on the other side of the border

Duplicate the layer (drag the layer in the Layer's Palette onto the Create New Layer icon). Now drag the object over the bottom border of the Color Fill holding down the shift key. Again, when you feel the Snap effect release your mouse.

Step 5 - Drag other objects on the other side of Color Fill borders

Repeat step 3 and 4 for the left and right side of the Color Fill.

Step 6 - Fill up the 4 borders of the Color Fill

Make sure the border of the color fill is nicely filled. Play around with the shape by transforming it (command/control + t) and using different Layer transparency values. Just make sure that each shape on either side is still the same, so that in the end the pattern will match seamlessly.

Step 7 - Fill up the middle of the Color Fill

Now fill up the middle of the Color Fill. Make sure you have enough variation. You might need to turn off Snap and Smart Guides. Once you're finished, click on the Layer Mask of the Color Fill Layer in the Layer's Palette holding down the command/control key. The Color Fill is now selected. Go to the Edit menu, select Define Pattern and give your pattern a name. If the option is greyed out, you just need to select another layer. Now do the test by creating a new document (make sure it's big enough to see the effect), hit command/control + a and go to Edit > Fill and select your pattern.

Step 8 - Play around and experiment

As you can see, my example with the flower is rather flashy. Because we've used Smart Objects, we can change the pattern in a rather quick way. Double click the Smart Object icon on one of the Layers. This will open the object in Illustrator. Now change the shape into something else, use other colors etc. Save it and close the document. Go back to Photoshop and you'll see that all Smart Objects will change to the new one. Change the color of the Color Fill. Go to Edit > Define Pattern and save your new pattern. Create as much patterns as you like, all in a rather fast and smart way :)

See? This is fun. Still, make sure to use patterns like the one I made here with caution, don't overload your design, make sure there is enough breathing space. Otherwise it could be too flashy and playful... unless that's exactly what you are looking for of course.

Design means so many different things for so many different people. I remember many years ago when I was designing a logo, a client said “Can’t be that hard, just let the computer do the magic”. Yeah right! What started as a simple desktop has become a meme… Oh no! Call 37signals, it wasn’t me, it was Jon :D

Here are my two desktops contributions to download:

Download (2560x1600)

Download (2560x1600)

Other Design is… desktops

• Jon Hicks
• Shaun Inman
• Wishingline
• LuxuryLuke
• Superfluousbanter
• Elektronaut
• Anton Peck
• Marko Mihelcic
• Bryan Veloso
• Christian Heilmann
• There is a Flickr pool now too

That was fun and a nice distraction :D

I am a bit late to the party but ExpressionEngine 1.5 is out. This weekend I updated this site without any problems. Only a .1 update but just look at the change log to see what great work the programmers at pMachine did. The added list is where you need to look and I’ll try to dig in a little deeper about what’s brand spanking new.

The Simple Commerce Module

Most notable in this 1.5 release is the inclusion of the Simple Commerce Module if you have a personal and commercial license. In essence every entry can be defined as an item to purchase and it also means that you design your store the way you like by using the templating engine. When you click Add Item you see the entries to choose from. It integrates Paypal functionality into your site and you can create customizable email notifications for each product. The Simple Commerce Module supports PayPal Encrypted Payments, a secure shopping experience. Following what’s going on with your store is easy thanks to automated purchase tracking through PayPal’s Instant Payment Notification service. You could use Paypal to control a website subscription model with content only available to members after purchase for example.

Template Preferences Manager

This is definitely a great feature. Now you can mass change options for your templates, even if they’re in different template groups! For example changing member access permissions for multiple template simultaneously.

Template Access Restriction

Also new is password protected RSS feeds. The setup for this is done in Template Access Restriction where you can define who can view or not. New for templates is HTTP Authentication, when enabled, users will be prompted to login with their username and password to view the template using a standard HTTP Authentication dialog box. You’ll see a little key next to the template when it’s switched on. However keep in mind that passwords are in clear text format using this method unless you are using an SSL connection.

Discussion Forum Module

The forum module now has user-side theme switching along with a host of minor enhancements. The Forums Module offers two professionally designed forum themes, and a bare-bones developer theme to help you create your own forum themes. If the user is a logged-in member, the theme choice is saved in their profile data, if they are not logged-in, it is stored in a cookie.

Wiki Module

The module now adds support for Namespaces, they are set on a per wiki basis and allow you to divide your content up into logical, semantic divisions while also placing restrictions on who can edit and administer that content. For example if you had a wiki dedicated to learning languages you might have a Spanish namespace and a German namespace as a way to organize and separate your content. You could have a different Member Group as the admin for each namespace. You can see the EE Wiki in action because it is now hosted at pMachine.

Contest

This will get you a pretty good idea of some of the new features in version 1.5. Next week I’m holding a contest to celebrate its release and I will be giving away 3 licenses for ExpressionEngine, StyleMaster, the Westciv CSS editor for Mac and PC, Inquisitor and NewsFire. All in all great prices don’t you think? You have to be a little creative to win because I’m planning on doing something fun with photo manipulation. You’ll see next week, spread the word :)

Let’s do something boldly and step into the duoh.com time-machine. I’ve searched our archives and found some interesting material. I’ve first started to make my feet wet in the Internet world back in 1996. We didn’t even have a domain name back then. First a bit of history on how I discovered the magical powers of the Interweb :)

How did I discover the Internet

In 1996 we had a Tektronix Phaser 140 printer that had a little bit of trouble communicating with AppleTalk. You gotta love those OS 8/9 days where a crash a day was on the menu. We had a pricey support contract with an Apple dealer Compuvision that charged us money to just say “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 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 very first website

Some things are better kept buried but I’m not afraid to show you my old work :) No seriously, this also serves as a great reminder that we all started somewhere and got wiser along the way. So before you start laughing, try to remember that line ;) You also have to agree that I had a sharp vision for already anticipating the hatred towards frames back then :o) You’ll also notice my hip animations made with Macromedia Director, I was complete intoxicated by that program back then. My other favorite tools were KPT Bryce and the KPT Power Tools and KPT Vector Effects for Illustrator. Kai Krause was one of the first to experiment with interface concepts, something not really common back then.

So without any further delay I present you ”My first company website”.

This isn’t a job board here but I’m helping out a friend and maybe along the way a reader to a new job. AOL is looking for some talented designers to help shape the AOL.com portal page. If you ever thought this could be better well here’s your chance ;) These jobs are both in the United States.

Below you'll find the job descriptions for the available positions.

Senior Designer description

We are looking for a senior visual designer to join our Dulles-based group. This is a full-time staff position, offering Time Warner's full benefits package. Seize this exciting opportunity to develop and maintain designs for AOL.com, the portal page for all of AOL's web sites, attracting millions of visitors.

Creativity

• Grounded in design fundamentals including composition, color theory, typography, identity systems, concept development and motion design.
• Designs and executes graphical interface treatments for on-line multimedia software products resulting in clean, tight, screen designs. Articulates multiple concepts and ideas quickly with good storyboarding skills.
• Works closely with Art Director to create and design visual treatments that meet AOL and client specifications.
• Provides creative leadership in the development of the look and feel of the assigned project and for the designers of the project team.
• Understands information architecture, user interface essentials, interaction design, brand image management and style guide creation.
• Uses knowledge associated with Bachelor’s Degree in design or equivalent experience.

Technical Excellence

• Minimum 5 years of directly related experience including screen and interface design.
• Expert level knowledge of design tools and applications such as Adobe Creative Suite, advanced knowledge of Flash and CSS/HTML preferred.
• Understands the importance of web site performance and is motivated to design for extreme optimization.
• Solves complex design problems through research, analysis and a strong understanding of technology tools. Designs what can be built with relevant publishing systems.
• Possesses sufficient knowledge to constructively challenge current practices or approaches.

Personal Performance

• Uses communication skills to influence decisions. Actively solicits feedback to ensure that all activities and deliverables meet expectations.
• Demonstrates attention to detail with work and process.
• Is a great team player and possesses a solution-oriented attitude.
• Demonstrates AOL’s vision, values, and principles.
• Thrives in a highly collaborative, agile, fast-paced, exciting work environment.

Associate Designer (two open positions)

We are looking for an Associate Interactive Visual Designer to join our Virginia-based design studio. This is a full-time position, offering Time Warner's full benefits package. Seize this exciting opportunity to maintain designs for AOL.com, the portal page for all of AOL's web sites, attracting millions of visitors. Candidates should demonstrate a strong focus in the interactive field with up to two years of experience. Bachelor's degree or higher in Graphic or New Media Design preferred.

Candidates should:

• Exhibit a solid understanding of design fundamentals including color theory, typography, composition, photo retouching, as well as branding and logotype skills.
• Exhibit ability to execute design tasks in alignment with style guides and standards.
• Exhibit a thorough understanding of optimization and production of art assets for the web.
• Exhibit fluency in standard interactive design software tools: Adobe CS, Microsoft Office and above-beginner Flash level, as well as entry level understanding of Action Script 2.0, HTML and CSS.
• Be independent, proactive and able to perform under very tight schedules.
• Work well with design direction and be comfortable within team environments.
• Demonstrate attention to detail, a solution-orieinted attitude and be a great team player.
• Thrive in a highly collaborative, agile, fast-paced, exciting work environment.

If you are interested you can mail your resume to cindylidesign@aol.com

My recent tutorial about creating pattern backgrounds sparked some questions from readers if I could do the same for something that is referred to as “grunge”. The pattern tool is ok for repeating items but the grunge look gets it effectiveness just from the randomness I think. So I think it would be better if I show you how to make a grunge brush instead. I know several of those are available for download but there is nothing more rewarding then creating your own :)

So in this article I'll show you how to create 2 types of brushes that can be used to create the grunge effect. Like always this is just one way of doing things as I'm sure there are others also. In a next tutorial I'll explain another way to create a similar effect in Photoshop if you just want borders. A brush is better because you can apply it everywhere and it gives you more creative freedom then the other technique.

Creating a random grunge brush

Choosing and preparing the image

First of all you have to find a perfect suitable photo to start from. I've found a lot of good material on the TextureKing website to start from, but you can start from any image you like. Next you desaturate your image : Image > Adjustments > Desaturate (command/control + shift + u). Then you play with the levels : Image > Adjustments > Levels (command/control + l). The values shown are different for each image and each result you want to achieve, but in most situations you'll have to drag the outer sliders more towards the middle, so you get a more back and white effect. Make sure you don't exaggerate, make sure there are some grey areas left.

Select a suitable area and clean up

Now select the Lasso tool from the Toolbox and select an area which you think would be perfect to create the brush. Copy this selection and past it into a new document. Now select the Erase tool from the Toolbox and select the Rough Round Bristle brush from the Brush palette. If you have removed the default brushes you need to reset the brushes to get to this brush. Now, clean up the borders of your selection so you don't see the edges. Reduce the size of the brush if needed.

A grunge brush is born

When you're done, go to Select > All (command/control + a) and go to Edit > Define Brush Preset and name your brush. The brush will appear in the brush palette now (last one in the row). Now you can test the result, by selecting a color and choose the Brush tool from the Toolbox and click in your document.

Creating corner brushes

You can also create corner brushes. Just select another area from the image that would suit as a grunge corner and repeat the same steps. You can rotate your image to create similar other corners.

The final result of my grunge design

Save your brushes

Creating these brushes requires a lot of experimenting, but it's fun. You can create your own set of brushes by saving them in the Brush palette located in the Options Toolbar. This is of course important since your brush will be saved permanently as a Brush Set (.ABR file), so don't forget this. Otherwise as soon as you reset your Brush palette, your brush will be gone. Click the little arrow button on top right and select Save Brushes from the menu. You have to make sure that only your brushes are loaded in the palette, otherwise the other default brushes are saved as well in that set. By saving them in an .ABR file you can create your own collection of brushes.

A new week started and I hope the creative batteries are fully charged because it’s competition time boys and girls. Told you about it a week or so ago that I would do a creative contest to celebrate the launch of Expression Engine 1.5. Don’t worry if you are not that creative because everybody can join in. A good sense of humor is all you need to make a chance too.

What do you need to do?

The basic concept of this game is to manipulate one of the 4 pictures and to come up with something creative or witty. Geert and I had some fun coming up with those four pictures :) So you decide which one you use and you can do whatever you want with it: place it in a new background, add some text, move me to another planet... let your imagination run free. This way everyone has a fair chance of winning some of the great prizes

So what can you win?

Thanks to some great people I was able to gather a list of attractive prizes to win. Be sure to check the sites of the sponsors and let me know what prize you would like to win the most.

• 3 Expression Engine licenses
• 5 copies of Christian Heilman's book "Beginning JavaScript with DOM Scripting and Ajax"
• 2 licenses of StyleMaster, the CSS editor for Mac and PC
• 1 license of Inquisitor
• 1 license of NewsFire

Where to put your art work?

Preferably you upload your artwork to your Flickr account and post in the pool that I created for it and make a text link to it via the comments. If you don't have a Flickr account you can join for free. Becoming part of the pool is easy just click join on the right. If you do it like that I can follow all new submissions by RSS. In case you do not want to join Flickr you can join by uploading the artwork to YOUR OWN server and linking to it via the comments here.

But watch out if you use the "img element" in the comments, it CAN'T be wider than 560 pixels or it will break my lay-out and I don't want that. You'll not win if you do it, so you are warned :D

The files to download

Choose one of the 4 images to work with.

• Download 1
• Download 2
• Download 3
• Download 4

I'll be the judge and jury :)

I'll base my final judgement on a lot of factors, like creativity, placement of things, good copy, etc. So like I said before you don't have to be a creative genius to win, just make something orginal and funny and you'll get a fair chance too. So all you need to do is:

Join via Flickr (preferred method):

• Choose one of the 4 images
• Create your masterpiece
• Upload it to your Flickr account and place it in the pool "Veerle's photo imaging contest" and text link to it in the comments (preferred method)

Update: Don't forget to add your entry to the Flickr group/pool. It is very easy to do so: just go to your picture and above it you'll see the second item “send to group”. When you click on it it will load the groups you are part of. Just look for “veerle’ s imaging contest” and selected it. That’s all, it should now be in the group/pool.

In case you don't want to use Flickr:

• Upload to your OWN server and use the img element "" in the comments (max. 560 pixels wide)

Further info:

• Add your preferred prize along with your submission in the comments
• More then one entry is ok
• Entry must be submitted before Wednesday 27th September

I’ve been terrible busy the last couple of weeks. Mostly because business has never been that hectic and we’re also on the verge of moving to a new place. A lot of time goes into arranging stuff you have no idea :) If things go as planned I’ll be moving boxes and furniture in about 3 weeks from now. So I haven’t been able to write much or prepare for another in-depth or step-by-step tutorial. Hopefully you don’t mind that I share the following short Illustrator tips with you…

Did you know that...

• there is an easy and fast way to delete individual points that are not connected to other anchor points?
  Deselect all objects. Choose Select > Object > Stray Points.
• when you hold down the shift key while dragging a guide, the guide will snap to each line shown in the ruler?
• when you hold down the control key or your second mouse button in the Rulers that you can change the units of the Rules?
• you can easily turn objects into guides? And that you can make them objects again?
  View > Guides > Make Guides (command/control + 5) or View > Guides > Release Guides (command/control + alt/option 5)
• you can switch fast between fill and stroke by hitting the x key?

Last but not least, did you know that...

you can create interesting effects by adding multiple fills and strokes within the same object? With the Appearance palette you can

I think the image is self-explanatory, but it basically comes down to adding new Strokes on top of each other using different transparency values and modes. You can of course do the same with Fills. Imagine the effects you can achieve by stacking different types of gradients on top of each other.

It has taken a while and some serious thinking, shifting, doubting… but eventually I’ve managed to get a list of winners. You guys and girls certainly didn’t make things easy for me. It’s so great and rewarding to see all those creative minds here :) Never in my wildest imagination would I have thought that the quality of entries would be that high, I totally underestimated this ;)

Before we go over to the list of winners some good news from the folks at pMachine. Since there are so many great entries I can give away a total of 5 instead of the announced 3 licenses for ExpressionEngine.

Without any further delay I present you the masters of this competition.

Winners of an ExpressionEngine license

• Erika
• Hyunlab
• Mellou
• Adam Wermuth
• Mike with two great entries

Winners of "Beginning JavaScript with DOM scripting and Ajax"

• Paul Redmond
• Luxury Luke
• Pierre
• Bogie
• Brian Middleton

Winners of a StyleMaster license

• Mark Forrester
• DeaPeaJay

Winner "Inquisitor"

• George

Winner "NewsFire"

• Orlando

There are too many notable entries to sum them up here. Like I said I'm so proud of all the creativity that was going on here, very rewarding! You all brought me a lot of joy and laughter too. It was hard for me not to add a comment here and there on Flickr, but now I finally can.

If the winners could mail me (veerle at duoh dot com) with all the necessary details like your address so that I can forward all that to our great sponsors of the prizes. A special thank you goes too:

• Leslie Camacho from pMachine to offer us 5 licenses of Expression Engine (the CMS my blog is using)
• Christian Heilmann for his book from Apress
• Maxine Sherin from WestCiv to offer us 2 StyleMaster licenses
• David Watanabe to offer us a license of NewsFire and Inquisitor

Hope you had as much fun as I did and it's certainly something we will have to repeat in future either in something like this or something new.

Ever wondered how you draw a ribbon in Adobe Illustrator? A while ago a reader e-mailed me with this question. A prefect tip for a step-by-step tutorial, I hope you enjoy it :)

Step 1 - draw the first part of the ribbon

A basic knowledge on how to use the pen tool and how to draw bezier curves is needed to get started with this tutorial.

Draw a curved line that looks similar to the illustration above. Hold down the shift key while dragging the handles in the last point of the curved line. Drag a vertical guide onto the curved line as shown in the picture above. To make it snap to the exact position, make sure that Smart Guides is checked (View > Smart Guides or command/control + U).

Step 2 - break the curve into 2 parts

Because we'll have to apply different shades and we need to create depth into the ribbon, we need to cut the ribbon into different segments.

Select the Scissors Tool and click on the location on the path as shown in the picture above. With the Smart Guides active you'll get the 'intersect' text when your cursor is at the right spot. Now the path is cut into 2 segments. Select both segments, hold down the shift + option/alt key and drag/copy the paths vertically as shown in the picture above.

Step 3 - close the paths

Close the paths as shown in the picture below, so the ribbon exists of 2 segments. Select both segments, select the Rotate Tool and click while holding down the alt/option on the location as shown below in the picture, enter 180� and click the Copy button.

Step 4 - rotate and duplicate the 2 segments of the ribbon

Advanced users will probably just click on the exact location, hold down the alt/option and shift key while dragging the segment to the correct location as show in the picture below.

Chances are that both segments don't perfectly match. Select the 2 new segments, zoom in, and drag them to the exact location. With Smart Guides still checked it'll snap and you'll see the word 'origin' appearing.

Step 5 - merge the middle segments of the ribbon into 1 segment

Select the 2 middle segments of the ribbon and click on the "Add to shape" option in the Pathfinder palette. This way Illustrator will treat these parts of the ribbon as 1 object which will make it easier when we give this segment a fill.

Step 6 - giving the ribbon segments a gradient fill

Our ribbon is now divided into 3 segments. All we need to do now is give each segment its own fill. To add dimension and depth we need to use a different (linear) gradient on each segment:

First segment gradient consists of : 50% cyan and 7% magenta, 32% cyan and 4% magenta, then again 50% cyan and 7% magenta followed by 69% cyan and 10% magenta.

Second segment gradient consists of the following swatches : 67% cyan and 15% magenta, 50% cyan and 7% magenta, then 23% cyan followed by 31% cyan and 5% magenta.

Last segment gradient consists of : 50% cyan and 7% magenta, then again 50% cyan and 7% magenta followed by 31% cyan and 5% magenta.

You probably have to use 'Send to back' or 'Bring to front' on the different segments to get them into the correct perspective.

Step 7 - fine tuning the centered curve of the ribbon

As you probably have notice, the curve in the center doesn't look that natural. That's because I drew that part holding down the shift key, but this was needed to make sure the rotated ribbon would match perfectly on the original one. I can correct this very easily, but first I need to expand the 2 merged segments. Select both segments and click 'Expand' in the Pathfinder palette. This way the vertical line connecting the 2 segments disappear and we have only 2 bezier points left. Now it's a matter of dragging the handles into the preferred position to smooth the curve of the ribbon.

Ah! Much better don't you think? :)

You can make the ribbon larger by copying the entire ribbon and paste it next to the ribbon. You can also merge the middle segment that connects the 2 ribbons. Then you can select the entire ribbon and use the Free Distort Filter to achieve extra depth. Last but not least you can rotate the ribbon. That's what I did in my illustration. In the picture below you see the result:

The preparations for the big move have began and it’s now becoming clear how much stuff people gather over the period of several years. In other words high time to clear out some of our inventory.

Garage Sale

All material is in perfect working conditions.

PowerMac G4 466 MHz (Digital Audio)

• PowerPC 466 MHz
• 1MB L2 Cache
• Bus Speed 133 MHz
• Digital audio sound system
• ATI Rage 128 Pro AGP 4X 16 MB of SDRAM
• 640 MB SDRAM (2 x 256 and 128 MB) 1 slot free
• 2x 30GB Maxtor HD's
• 8X/4X/32X CD-RW drive
• 2x USB
• 2 FireWire 400-Mbps ports
• Built in 56k V90 modem
• 10/100/1000BASE-T
• Apple 15" Cinema Display (1024x768)

Price is 220 Euro

PowerMac G4 733MHz (Digital Audio)

• PowerPC 733 MHz
• 1MB L3 Cache
• Bus Speed 133 MHz
• Digital audio sound system
• NVIDIA GeForce2 MX with 32MB of SDRAM
• 1 GB SDRAM (2 x 256 and 512 MB) 1 slot free
• IBM 60 GB HD and 30GB Maxtor HD
• SuperDrive
• 2x USB
• 2 FireWire 400-Mbps ports
• EXTRA FireWire ports 400-Mbps port + 800-Mbps port
• 10/100/1000BASE-T
• Built in 56k V90 modem
• 19" Philips 190S5 Screen (1280x1024)

Price is 450 Euro

Canon PowerShot G2

• 4-megapixel (2272 x 1704)
• 3x optical zoom/3.6x digital zoom
• Auto and manual focus
• program and manual exposure
• JPEG and RAW file format
• ISO range 50-400
• Proprietary Lithium-Ion battery
• Movie mode with sound
• 32 MB storage card

Price is 150 Euro

If you are interested in one of these devices sent me an e-mail to veerleatduohdotcom