WooThemes?

WooThemes started as a WordPress theme shop, but is now also expanding to Drupal, Magento and ExpressionEngine, the system my blog and my business site is using.

My process

Read about my process on the Duoh! blog. If you like reading these kind of articles and like to get background information on our design work, plus get some interesting links along the way, you should follow the Duoh! HQ twitter feed.

The final design

I baptised my theme Abstract because not only did I like the naming, I also thought it goes well with the illustration.

This was a very fun project to work on because I could entirely do my thing. It was an honor creating this theme.

As soon as you know how to solve them, you see things clearer and differently. Today I though I share a solution to a few problems I encountered myself recently or in the past :

Photoshop CS4

Problem

When you move layers from one document to another in Photoshop, the angle of styles are changed to the default value of 120°.

Solution

Make sure the checkbox 'Use Global Light' is unchecked in the styles options before you start dragging the layers to another document. By default this option is always checked and so Photoshop changes the angle to the default angle is 120° if you drag the layers into a new document. If you're using another angle in your document and you leave this option checked then Photoshop will assume that the value you've entered is the global light angle for your entire document. Dragging layers with this option checked will change the angle to the value that is set in this document.

Problem

When you add a Layer Mask to a Layer that has Layer Styles applied to it, the styles are applied to the way the object is masked, but what you want is that the mask also hides the effects.

Solution

In the Layer Styles options, you can check an option 'Layer Mask Hides Effects' under the Blending Options.

Problem

Hm, maybe not such 'small' annoyance' is when you hit cmd/ctrl + option/alt + shift + S (or go to File > Safe for Web) and you get an error message 'The operation could not be completed'

Solution

I haven't found yet what causes this error because it pops up out of the blue. The only solution I've found so far, well, if you can call it that, is saving your document and relaunching Photoshop. Maybe this is just a bug I don't know?

Problem

When you duplicate layers in Photoshop the name of the layer will be changed with the word 'copy' at the end.

Solution

I don't have a 'good' one I'm afraid. At a certain version (not sure which one, CS maybe?) Adobe didn't touch the layer naming when you duplicate layers, but then in the next version they undid this change and I really wonder why. Why the hell would you want the word 'copy' (plus a number) in the layer name? Not sure about you, but I find this annoying. I always name my layers and keep things very organized. What I sometimes do now to avoid this from happening is: create a new document, drag the layers I want to duplicate in the new document and then drag the layers from this document back into my original document. Ridiculous, right? Call me obsessive, but I just can't stand the 'copy' in the naming and so I do this extra effort if if need to duplicate a bunch of layers.

Illustrator CS4

Problem

For some reason you don't see the gradient annotator anymore and you have no idea why and you don't know how to get it back.

Solution

Choose 'Show Gradient Annotator' under the 'View' menu. For a while I didn't know this was there (was looking in the wrong place, the palette options) and it drove me crazy because I didn't understand why it suddenly didn't show up anymore. I think I was just accidentally hitting cmd/option + G somehow while I probably thought I was ungrouping an object, I'm not really sure. Anyhow it's good that you can hide and show this as it can be in your way sometimes.

Problem

You're trying to join 2 anchor points but you get an error message saying that you must select 2 open end points.

Solution

It is annoying when you get this message, but the message is right: 2 open anchor point is what you need to select otherwise this won't work. If you have selected more then 2 points because there are 2 or more anchor points on top of each other, than here is what I usually do: I temporarily move this extra point out of the way by using the arrow keys, then select the 2 points I want to join and join them, and then move the other point back into its position using the arrow keys. Another option is to temporarily lock (cmd/ctrl + 2) the other anchor points or to hide (cmd/ctrl + 2) them. To unlock hit: cmd/ctrl + option/alt + 2 or to reveal hit: cmd/ctrl + option/alt + 3. Another thing, you can check the 'Don't Show Again' checkbox in the message, but I never do because I want to be informed when this happens.

Interaction between Photoshop and Illustrator

Problem

When placing a SmartObject from Illustrator into Photoshop via copy and paste, some transparent effects are gone. Transparency in gradients are opaque and some transparent modes are changed to normal (instead of multiply, overlay etc.)

Solution

The solution I found is to simply select and drag the illustration from Illustrator directly into your Photoshop document instead of copying and pasting it.

There you have it. Hope some of you had an 'aha' moment when reading this. I'm sure there a lot more of these little problems where it took you a while to get around them. Please don't hesitate to share them with us.

Blogs, Mad about Design

Don't know how exactly to translate it into words but a thick 500+ pages hardcover makes me excited. Something real in your hands, the smell of print it makes such nice user experience that can't be replicated online. Awesome content in high quality print on high quality paper, a real pleasure to wade through.

The content is about being online

However the content of this big inspiration book has everything to do with being on the web. As the title of the book suggests it is about blogs that are all mad about design, more than 250 of them to be precise (including mine).

This is a book to look at rather than read as it is an inspiration book. Every blog in the book gets a double page spread. The layout is really nicely done: lots of white space, nice little touches like the grey corner at the top left and subtle color coding (if you can call that) to easily scan what is what. Per spread you see the name, the founder and the URL, white text in a black box, a short description of the blog in a white box with grey border and 3 favorite blogs in a grey box. Everything is connected with a grey dashed line. I'm sure this is a book I'll look into from time to time.

Where to buy

I've been searching the web to find where you can buy this book, but haven't found any site so far. I've looked up the ISBN number (ISBN 978-981-245-715-8) on Amazon, but no luck so far.

The current icon

I hear you thinking 'this is over the top'. OK, I guess, but I'm just picky and easily annoyed by things like that. Then again I am a graphic designer after all, who also does icon and GUI design work. As a graphic designer you just notice these things.

Maybe a lot of you don't know the application. On the left you see the current icon. It's very flat and not something to get excited about. The application is great. It is a stand-alone version of the W3C Markup Validator and because it is a stand-alone (Mac) application you can use it on local files, even via drag and drop if you want. In other words, an indispensable tool in the armory of every professional web designer (using a Mac).

How it could look

I guess it's easy to say 'hey that's an ugly icon' and not come up with an alternative, right? If people say nothing more than 'I don't like it', I always have this reaction of saying 'well, what are your suggestions?'. I think it's good to give critique but always try to keep it valuable otherwise it's better to say nothing at all in my opinion. Anyhow, this is a subject that has been discussed already here. Not that I don't know what to do these days, but I was in an unstoppable mood and just couldn't help myself. So I came up with a few icon designs myself that I wanted to share them with you today.

Version 1

Version 2

Version 3

Version 4

Donation to the community

They might not be the best looking icons around, but I believe one of them might be worthwhile to replace the current icon. So I'm donating the icon to the community. In case you like one of them you can download the icon set for Mac (it's a Mac-only application).

UPDATE: Download the 512 X 512 px transparent PNG files.

Applying the icon

In case you wouldn't know how to apply a new icon: hold down the Control key or 2nd mouse button on the application icon, choose Show Package Contents, choose Contents, then choose Resources. Replace the Validator-SAC.icns with the new one.

I was happy with this icon for so many reasons. Most of all it is simple. Simplicity is always something I try to achieve in a logo design and it's often the hardest thing. Circles are my favorite shapes in general. The geometrical style of this icon is exactly what I was looking for. It's also ideal to create a favicon from. The three circles also have an underlying meaning because they represent the three different directions I would go with my new blog (yes, I'm working on this). The number three is always nice to work with, geometrically speaking. The icon kinda reflects my love for colors as well, as it does remind you a bit of the typical RGB model where three circles overlap each other. There wasn't really anything negative about it. I was convinced. Until I bumped into a very similar icon.

This will not be my new icon after all

Guess my happiness didn't last very long. After seeing this icon it's clear I can't use my icon as it is now and I need to either completely redesign it or at least modify its shape so it doesn't look similar to this icon. This is actually the second time something like this happened. Without my knowing I create something that looks scarily similar to what somebody else has created. Then again, this shape is really simple, it's just three circles after all. The other situation had the same problem, so simple that you wonder if anybody else hasn't thought already of this idea. Luckily I was able to change things in time. There are of course these other situations as well where people take my design, change a few tiny details, but definitely not enough to call it being inspired, and claim them their own.

Who's behind the other icon?

For people who wonder where I saw this logo, well stupidly I don't have the URL anymore :( I've been searching and searching in my NetNewsWire's feed archive and couldn't find it, sigh. It was via via, I'm 90% sure it was via Graphic Hug, you know how it goes and I didn't think of saving the URL. Anyhow I can assure you it is out there, so for me it means I'm back to the drawing board.

Blend and Mask Yourself a Great Poster

In this tutorial, we'll be creating a poster with a strong geometric central design, which utilizes flowing blends, masks shapes, and subtle gradients, to create a sophisticated final piece. Learn each detailed step in creating this poster by following the 30 steps. Let's get started!

Drawing a pawn all wrapped in a movie

As usual, there are probably different ways in doing this, but I'm happy to show you mine. Hope you enjoy the movie and learned a thing or two.

• Download the video tutorial (1130 x 860 pixels)

Be inspired, but don't steal or copy

The way the shapes are organized in the example of the Devia logo icon may not be copied or used. The Devia logo and its icon is copyright protected and may not be copied or used in any way. Being inspired by this technique is fine, but do not steal or copy. Inspiration should lead to new ideas, new creations.

Create new document

Create a new document (File > New or hit Cmd/Ctrl + N) of 640 px by 140 px using pixels as Units and RGB as color mode (which can be found under the Advanced options).

Create first swatch

Select the Rectangle tool and click once on the canvas. In the Rectangle dialogue box enter a width and height of 20 px. Click OK. Give the square a color. I've used a dark purple.

Move first swatch into place

Make sure Smart Guides are enabled: View > Smart Guides or Cmd/Ctrl + U. Select the square (which will we will refer to as 'swatch' from now on) and move it into the top left corner of your document.

Duplicate swatch

Go to Object > Transform > Transform Each or hit Cmd/Ctrl + Option/Alt + Shift + D. We need to copy the swatch and move it 620 px towards the right, so it sits in the top right corner of our document. Enter the value of 620 px in the Horizontal option under Move. Click the Copy button to copy the original swatch.

Create gradient effect using the blend tool

Give the swatch a different color (no stroke). I've used a very bright red. Select the Blend tool from the toolbox. Click the bottom right point of the first swatch. Hold down the Option/Alt key and click in the bottom right point of the other swatch.

In the Blend Options box choose Specified Steps and enter 30 steps. Click OK.

To know this specific value is a matter of simple calculation. Our document is 640 pixels wide and we're using a square of 20 pixels. 640 divided into 20 gives us 32, minus the 2 squares that area already in place (first one and last one), gives us exactly 30. You should get a similar result like the image below.

Duplicate the blend

Select the blend by grabbing the top border of the first swatch using the Selection tool (black arrow). Click to start dragging the blend vertically down. Hold down the Option/Alt key (to duplicate the blend while dragging) as well the Shift key (making sure it's 100% vertical) while dragging. Release the mouse once you've reached the bottom border of the original blend as shown in the image above.

If all went well you should end up with 2 nicely adjoined rows of blends as shown in the image below.

Now hit Cmd/Ctrl + D 5 times in a row to duplicate this action 5 times. You should end up with a similar result as shown in the image below.

Adjust color swatches to your liking

Select the Direct Selection tool (white arrow) and select the first or last swatches of each row one by one and change the color slightly to create a subtle vertical gradient effect. In my example at the beginning of my article, I've gone from very dark purple towards brown for the first swatch and from red towards yellow-orange for the last swatch.

Try to only make very subtle change to each swatch, this way you'll end up with a nicely gradual change of colors instead of abrupt changes of colors.

Hope you've enjoyed this one ;)

Placing a CSS background image horizontally right on an h2 element

If you align a background image horizontally right in a block element, such as a heading, the image will appear on the right, like this:

Check out this real example.

The h2 styling consists of font-size, some extra padding (30 pixels on the right, which is the space that is needed for the background image), margin at the bottom, a border at the bottom and color:

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 30px .4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. }

The HTML code of these 2 headings looks like this:

1. <h2 class="clock">Suspendisse nec dolor proin sodales</h2>
2. <h2 class="star">Class aptent taciti sociosqu ad</h2>

Adding 2 different background images by using a class for each and have both images aligned vertically centered to the right:

1. h2.clock {
2. background: url(images/icon-clock.gif) no-repeat right center;
3. }

1. h2.star {
2. background: url(images/icon-star.gif) no-repeat right center;
3. }

What if we want our background image lined up to the right of the text?

What if we want to achieve is this (see image below)?

Placing a CSS background image horizontally right on an h2 element, adding 'display:inline'

We could try adding 'display:inline' to the h2 element. This will change its default behavior from being a block element into an inline element.

We add 'display:inline;':

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 30px .4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. display:inline;
8. }

Check out this real example.

However doing this may cause some layout problems, because headings are meant to behave as a block element.

Problem: collapsing margins

One of the problems is that the following item will float next to the heading if this element is an inline element. Another problem is that the margins of a block element such as a paragraph will collapse.

Placing a CSS background image horizontally right on a h2, using a nested span element

A solution to this is adding a span element in the h2. Give the span the necessary padding (especially on the right) and add the background image to the span instead of the h2.

By nesting an inline element such as a span, we keep the block behavior of the heading.

1. <h2 class="clock"><span>Suspendisse nec dolor proin sodales</span></h2>
2. <h2 class="star"><span>Class aptent taciti sociosqu ad</span></h2>

We go back to our original CSS styling, so we remove the 'display:inline' and we also leave out the 30 pixels for the right side padding:

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. }

Instead, we add the right side padding and the background image to the nested span element:

1. h2.clock span {
2. padding-right:30px;
3. background: url(images/icon-clock.gif) no-repeat right center;
4. }

1. h2.star span {
2. padding-right:30px;
3. background: url(images/icon-star.gif) no-repeat right center;
4. }

Check out this real example.

First some background

The two events that trigged this post are that Flash template shop and a site that promotes a cool initiative in Kortrijk (Belgian city) where they we will use small spaces of land in the city that have been neglected and turn them into a nicely designed garden by well-known landscape architects. If one of those spaces disappears due to a project, the garden moves to somewhere else in the city. A very cool way to make a city and its hidden and neglected places more attractive. When I saw an article about it, my interest was big enough to check out the website for more info. The project is called 'Secret Gardens' (In Dutch sorry). My enthusiasm was quickly cooled down when I saw that this site was completely built in Flash, and for what? This site serves as a perfect example of wrong usage of technology. Most content is just text and it completely breaks the user experience by hijacking the browser's scrollbar so that my scroll wheel doesn't work anymore and I have to use that green Flash scrollbar instead. IMHO there is nothing in this site that warrants the usage of Flash. I thought we would have been evolved past this point by now.

Education

Big part of the problem I believe lies in the education that students receive. I am pretty sure that some teachers still preach that it is ok to design a site in Flash. Don't get me wrong, it is, but only when the project warrants it and it adds to user experience. I've talked about this before. Recently I also saw two examples of the poor state of web design education here in Belgium. Both are examples of people that teach in higher education. It saddens me to see things like: double 'id's', using left and right in 'id' naming, a link around a heading instead of inside, leaving the title element empty, no doctype, rather unstructured than structured, using double breaks instead of paragraphs, etc. I spotted a lot of inline styling which is a sign of sloppiness (when there is a external stylesheet), but if you start using wrong inline styling, it's even worse. I mean, what the hell is this? <div id="navtext" style="height:12px;" height="12"/>. These people are experts according to their colleagues and students, sigh. I'm not trying to be an elitist here, but those people shape the future generation, so I believe it is needed to be extra picky on them.

Teach it right by using the available resources

There was a time that there weren't any centralised resources around. Those days are gone and with a little effort you can use these in class without any additional cost. I'm hoping that this post will contribute and spread the news that there ARE resources out there to help teachers use best practices.

Opera Web Standards Curriculum

The Opera guys did a super job by creating the Opera Web Standards Curriculum. This tutorial course takes students from complete beginner to having a solid grounding in standards-based Web design, including HTML, CSS, and JavaScript development. The course is supported by top companies and organizations such as the Web Standards Project (WaSP) and Yahoo!.

Split into more than 50 focused articles, students can follow the curriculum from start to finish or simply read articles that interest them the most. Each article contains essential theory, practical examples, and exercise questions. The first 41 articles are now published, and roughly ten ones covering JavaScript basics will follow ASAP, to complete the course.

WaSP InterAct Curriculum

The next resource was launched not so long ago during SXSWi. The WaSP InterAct Curriculum is an initiative that aims to unite industry, educators, and practitioners with one common goal: to improve the quality of education that the next generation of web professionals have available to them. It is a framework that tries to bring Web standards and best practices to educators and students worldwide. They set this up because they know how difficult it is — as a full-time educator — to remain current in this rapidly changing field. It has a set of courses divided into 6 disciplines:

1. Foundations
2. Front-end Development
3. Design
4. User Science
5. Server-side Development
6. Professional Practice

If you are an educator you should use these resources as a reference point from which to develop and maintain your courses and programs. Both of these (Opera Web Standards Curriculum and the WaSP InterAct Curriculum) should be required material imho. Of course these are not enough, since the learning process actually never stops. We work in a fast evolving sector so there is a high dosis of passion needed to keep the self education going as well.