Color calibrating monitors is an issue that’s existed in the design community for decades. But a recent Twitter debate between Amy Hoy, Peter Cooper, Thomas Fuchs, and Thijs van der Vossen about the subject raised a crucial question: is color calibration necessary in web design?

Thumbnail: Colorful Graffiti, available on Photodune

What is the Precedent for the Debate?

Color calibration began in the days of print design, and is still a very important issue for many designers working in the medium. Given the variability of color output in screens, combined with the differences in printers, designers have to calibrate their monitors and color profiles within the OS to match a standard in order to ensure proper color selection. This is where Pantone comes into play, as they provide an industry standard for color output. If your displays and printers are calibrated to the Pantone standard, then the color output (should) be accurate between the two.

OSX monitor calibration settings

As more print designers migrate, the question of standardized color output becomes more prominent. Does every monitor adhere to some standard akin to the Pantone standard? Should we calibrate our displays to meet the qualifications of this standard?

Thankfully, Microsoft and HP helped establish the sRGB color space, which has been adopted across most consumer level devices and is endorsed by the W3C. However, there is a lot of variability in device output; which ties back to the issue of calibration.

The Argument for Calibration

The greatest factor supporters of the principle bring to light is the importance of standards. We try to standardize everything (both as designers and developers), so why shouldn’t part of our design process (color selection) be standardized as well?

Chris Coyier posed the question to CSS Tricks readers recently, with a number of excellent responses in the comments. However, I feel the best argument for calibrating devices was presented by Shane Parker:

I don’t understand how this is even a question? Of course you should calibrate your monitor using known standards via a hardware calibration device. Will the majority of people who view your site also have a calibrated monitor? Of course not. BUT, it’s not like all uncalibrated monitors view the same way. Uncalibrated monitors are all over the place in respect to color, and that’s the biggest reason you should calibrate! At least you’ll know that you are calibrated to correct color so that those who are calibrated (or are using monitors that aren’t horribly off calibration from the start) will see the colors you intended them to see.

Garbage in = garbage out. If you start with garbage, you’re more likely to end up with garbage. As professionals, monitor calibration is one of the first steps in setting up a design environment (I’m a web dev and photographer, so it’s even more important for me to stay calibrated).

I agree with his argument: you should strive to be at the middle of the spectrum to reduce the offset from your audience’s devices. If your monitor is unwittingly skewed in one direction, then the results are going to be even more staggered on a device with a different calibration. At least when your devices are calibrated for the middle, the output will be “less wrong”.

The vast majority of designers seem to agree with his statement as well. The arguments against color calibration in web design are not admonishing the practice, but instead state that there are greater issues at hand than color tonality.

The Argument Against Calibration
(Rather, The Argument for Contrast)

The debate regarding color calibration cannot simply be defined as a “yay/nay” situation, because it comes down to an issue of priorities. Those who argue against calibration note the importance of contrast over proper color tonality in web design.

In a sense, if you know your display is adequate and “reasonably calibrated”, then you should not worry about achieving true color calibration. Instead, focus on accessibility and place precise and accurate colors as a secondary concern. Designs are meant to be easily readable and accessible. By focusing on color tonality with expensive and professional-grade equipment, the priorities of the designer are shifted in such a way that the user ends up suffering. While it can be argued that choosing the wrong tone of a color can change the user’s reaction to a design, there are two greater arguments which take precedent:

• People with bad displays are used to things being “incorrect”, because that’s the environment they work in. (Which Aaron Silber elaborates on quite nicely).
• With a focus of artistry, you can end up with a low-contrast palette which actually hurts your design upon execution.

Accessibility should always be at the forefront of site design, and focusing on color palettes based on subtle tonal shifts does not usually fit this ideal. Numerous examples can be seen at Contrast Rebellion, and it has been discussed many times on this site.

This one especially hurts because I love everything else about Reeder.

Interview With Patrick Kovacich
UI + UX Designer

I was able to interview Patrick Kovacich, a user interface and experience designer who also has a lot of experience with print (not to mention some of the coolest shirt designs I’ve seen) on the subject, and he was able to elaborate on the variability of device output:

It takes a certain level of genius and madness to come up with ideas like this.

I got my start in print layout before the web was much more than academic in use (mid-90s), and so I have a great deal of experience there. Even after moving over into web design and native application UI design, I have continued a lot of print projects on the side. I do primarily work on the web/screen, and the print work is the vast minority.

Visually, Adobe Fireworks and Adobe Illustrator. If I’m doing web work where the visuals are actually browser rendered I’ll use a plain text editor or Dreamweaver.

Mainly MacOSX 10.6, stock 17 inch Macbook pro screen (matte.) I do use a Windows 7 machine about 25% of the time, with a 20 inch Acer monitor and a Wacom Graphire tablet for some more artistic work. Most design work I do is not using a tablet, however.

No. The vast majority of my work is consumed by people who do not calibrate their monitor, and so I take deliberate care to not rely on contrast details that will only work on a perfectly calibrated cinema display or high-contrast-ratio plasma panel.

My target audience varies from iMac all-in-one displays to XP laptops driven by very cheap LCD panels, and so the value in me adhering to a set color profile and rigorously calibrating my display is not shared by my audience in the way it is by my print shops. I find that seeing proofs and sharing color profiles very easily resolves any issues I have had in working with them.

I tend to actually flip color profiles around to A/B test different configurations, and most critically, different brightnesses/LCD tilts. As more and more of my audience moves to laptop LCD displays and mobile devices, some of which have very narrow viewing angles, the hinge position of a laptop or positioning of a mobile device can actually alter a perceived color. This kind of real world experimentation lets me make sure that the critical parts of designs work regardless of the device and work environment my audience is in, and is more useful than assuming they will all adhere to my idyllic design conditions.

As I said, in print work there are ample tools to “translate” and verify we are on the same page with the end result, and print shops are generally capable of speaking a higher design language with me to get to a mutually satisfactory result. I do not have the luxury of demanding my on-screen audience go through this, and so I don’t worry too much about having my displays tuned to a standard that is meaningless to them.

Interview With Ian Yates
Webdesigntuts+ Editor

Ian Yates (our editor here at Webdesigntuts+ for the newcomers) was gracious enough to provide his thoughts on the subject, which I feel are essential to the discussion given his print-heavy background:

These days I work primarily in web design, though my first job within design was at a small ad agency in Rotterdam and definitely more print biased. I’ve been focused on the web for the last five years or so.

Owing to my roots being in print design and illustration I’m most comfortable with vectors. Sit me behind Adobe Illustrator and I’m a happy chap. Photoshop keeps me busiest where web design is concerned, which is odd as you’d expect Fireworks to have been a more logical home. I still always start out with pen and paper though – can’t seem to shake that habit

I have a quad-core Mac Pro with two Dell 22″ screens (which are great value). The Mac is only a couple of years old and was the logical upgrade from my old power PC, though if I’d have waited I might well have opted for a massive iMac instead. A nice, fat Wacom tablet is high on my wishlist, but there always seems to be something more sensible to spend my hard-earned pennies on.

When I was occupied with print, a lot of my work revolved around identity: logos, headed paper, stationery, exhibition stands, promotional materials etc. and that involved a lot of careful color work. A properly laid out visual identity package includes a specific Pantone palette, often fairly restricted, as more colors make for higher printing costs. Working with Pantone colors in your documents (instead of CMYK, for example) means that the printed result is a dead-cert; it will look exactly the same as any other printed products with those colors (assuming the printer does the job properly.)

When working for print, it’s advisable to calibrate your monitors so that what you’re seeing is as true to the actual printed output as possible. Personally I was hopeless at it. I was forever holding Pantone swatches up to my screen thinking “am I really using the right tone here?!”

In terms of the web, I’m not sure it’s so relevant. I haven’t really given it much thought before, because there’s no way you can emulate precisely how users see your work. These days, I go for default, out-of-the-box calibration.

I’m not sure you can. You have to accept that users have many different screens, different devices, and different calibrations. There’ll even be discrepancy between identical screens of a different age. It’s a fact that the majority of users probably won’t experience your work exactly the way you intended. Go for the mode average – most people will use their devices as they come off the shelf.

Conclusion

The Pantone standard works because the print industry widely adopted it, and practitioners consistently maintain their devices to ensure calibration. But the same cannot (and should not) be expected from most web users; some devices may never have been calibrated at all. This is where the “dirty window to the Internet” argument is most valid: the problem of your site not rendering properly on a display is generally a greater issue with the display itself.

If you have the time and resources to calibrate your device, or if having a wide color palette is essential to your work, then you should calibrate your monitor. However, in most cases, color calibration becomes a non-issue once a designer comes to terms with the fact there is no standard output on the web like there is in print. Instead, strong color contrast and accessibility are much more important factors which must be considered in web design.

It’s been a pleasure to write this article, and I hope everyone enjoys reading it as much as I enjoyed writing it! As always, feedback is greatly appreciated.

Webdesigntuts+

I would like to dedicate this tutorial to typography, which are the methods of processing printed text for better legibility and beauty. Typography is composed through the graphic design of printed text using the specifics for that languages rules. In this Basix tutorial will be apply the typography methods and rules using Adobe Illustrator. Materials for creating this tutorial were kindly furnished by Roman Kuznecov, aka Asat, who has many years of publishing experience.

Step 1

Let’s take a look at the designing of the printed text in the example of the sandwich recipe that we’re working with today. This kind of text contains a variety of items that will help you to develop the theme of this work. For the experiments, you should use text like this one here.

First, define the basic parameters of textual information:

• Size of text block
• Name of the typeface
• Font size
• Line spacing

Choosing these typographic parameters depends on many factors, in particular: on the format of the publication, style of the text, designer’s personal preferences, etc. I will leave these issues outside of the scope of this tutorial, as it covers books and monographs. Based on personal taste, I decided that the block of text will have a size of 150 by 300 mm (Type > Area Type …)

Step 2

Type text with the Garamond Pro font, size 12pt, and leading 13pt. Change these parameters in the Character palette (Window > Character).

For your information: the font size is the size of the height of the letter; typographic point is the unit of measure of the font size.

Step 3

Now align the text. There are two basic types of text justifying: Justify with last line aligned to the left and Justify all lines. The first method is quite simple, so use it for formatting. To do this, click on the button “Justify with last line aligned left” in the Paragraph palette (Window > Type > Paragraph).

Step 4

Next, we must configure the hyphenations. It is important to keep a balance between the number of hyphenations in the block of text and the amount of empty spacing in the rows. On one hand a lot of hyphenations create a feeling of the “fence” and affect the readability of text, on the other hand, long gaps also make it difficult to read.

Adobe Illustrator allows you to adjust this balance yourself with a Hyphenation dialogue window which opens from the fly-out menu of the Paragraph palette. Moving the slider to the better spacing position, we reduce the length of the gaps by increasing the amount of hyphenations, and vice versa. You must choose an optimal value that satisfies the design.

There is also an option that allows you to customize the appearance of the paragraph. In the fly-out menu of the Paragraph palette there are subsections "Adobe Single-line Composer" and the "Adobe Every-line Composer". When hyphenating, "Adobe Single-line Composer" analyzes just a single line. "Adobe Every-line Composer" analyzes the preceding lines; usually this allows you to get a better result.

Step 5

Thus, the general composition layout is already determined. Now let’s proceed to designing the individual elements of the text. I decided to highlight the main title of the text, so I’ll write it in capital letters. To do this, I’ve highlighted the title and in the fly-out menu of the Character palette I chose the option All Caps.

Here you need to pay attention to one point of interest: when designing the font tracking between the capitals is chosen on the basis that next to it there will necessarily be a lower case letter, so if you type the text in capital letters alone, the text feels cramped. Graphic designers recommend expanding slightly the letters of such text. With the text selected, in the Character palette in the tracking field set the value to 20.

Step 6

Now apply Kerning. Kerning is the process of adjusting the spacing between the character pairs to improve the appearance and readability of the text, it serves to justify the distance between adjacent letters or other font characters.

This option involves working individually with each character pair and how to find their relative position depending on the selected font, drawing letters themselves, and so on. The value of kerning is set in a percentage of the width of the space of the font being used, it can be either positive (when the characters are spaced apart) or negative (when the characters come closer to each other).

It is easy to see that the distance between pairs. See how “AV” and “WA” look different, but formally it is the same.

In order to make the distance between any two characters look visually the same, Kerning is applied. In Adobe Illustrator, there are 3 types of kerning:

• Zero Kerning – when kerning is not applicable.
• Auto Kerning – kerning set in the font by its creator. If the font is well designed, this type of kerning fits well in most cases.
• Optical Kerning – is good for kerning of titles or large freestanding signs, such as text for logos.

Set Auto Kerning for the entire text.

Step 7

Now I want to decorate a little bit the first few lines of text. I’ll do it with small caps. Small caps in typography are uppercase characters that look like reduced lowercase characters. Small caps are used to create titles and first lines of the sections following large initials, to write names, titles and abbreviations, and for bolding in the text.

It is not recommended to use small caps in long (more than two or three words) phrases and sentences; it impairs the readability of text. So, select the first few words after the title and select Small Caps in the fly-out menu of the Character palette.

Step 8

Now we need to separate paragraphs visually. This separation can be done in many ways, the most common of which are: break line (indent at the beginning of the first line of a paragraph) and the spacing between paragraphs.

In this text, I decided to make a space between paragraphs, but not just by line spacing, but by setting a blank space after each paragraph. To do this, in the Paragraph palette set the Space after paragraph value equal to 10pt.

Step 9

And now I want to talk about some ways to work with numbers in the text. There are 2 kinds of numerals: text numerals and all caps numerals. It is considered good form to use the first one along with lowercase letters, and the second one – with uppercase letters.

How to key in such numerals? There is one secret: both sets of numerals should be present in the font. The presence of two sets of numerals is one of the hallmarks of a good font. If these numerals are in the font, then key them in using the Glyphs palette (Type > Glyphs), find the necessary character in the table and Double-click to insert it in an active text block.

Our text has two groups of numerals. In the first case the numerals are in the ingredients section – leave them unchanged, I mean all caps numerals. The second group of digits are Fahrenheit temperature figures and the temperature character is in the main text. With the help of the Glyphs palette make them lowercase.

Step 10

Our text there has a bulleted list of several items. Replace the hyphen at the beginning of the list on the bullet with the help of Glyphs palette. It is important to properly arrange the indent. To do this, select the space between the bullet and the word and press TAB. Do this in every line of the list.

Check whether there is a tab symbol anywhere, and there are no extra spaces. To do this, go to Type > Show hidden characters. The tab character should be represented by an arrow (space is represented with a point, there should be no spaces).

Select the rows with the elements of the list and open the tab panel (Window > Type > Tabs). Place the marker of the tab on the rule box at the place from where the list items start.

Note: that bulleted lists should be formatted with the help of the Tabs panel, but in no way using multiple spaces.

Step 11

Your text may contain dashes. It is a gross mistake to put a hyphen or double hyphen instead of a dash! There is a character for the dash that we can type by clicking Option + Shift + _ for Mac (Alt + 0151 for Windows). Replace hyphens with dashes where needed.

There are two types of dashes – short (en dash) and long (em dash). “En dash” is keyed in by a combination of keys Option + _ for Mac (Alt + 0150 for Windows). It is used to denote the spacing between the dates.

Step 12

Now I want to tell you about such text formatting as Roman Hanging punctuation. In this text for more visual use of the Roman Hanging punctuation, we used the alignment of text to the right “Justify with last line aligned right” in the Paragraph panel.

To apply Roman Hanging punctuation, go to Type > Optical Margin Alignment, then in the Paragraph fly-out menu select Roman Hanging punctuation. With these actions, Adobe Illustrator takes all the extreme right punctuation characters behind the side lines and optically aligns the entire text.

Conclusion

To add authenticity to the text, you can change the shape of some letters. To this, in the OpenType panel (Window > Type > OpenType) press the buttons shown in the picture below.

The program will automatically replace the characters with the Ligatures (Ligature (from Lat. ligatura) – is a character of any system of writing, formed by joining two or more letters). Characters that have contextual alternates will be replaced by their alternatives. Ligatures and contextual alternates, unfortunately, are not available in all fonts.

As a result of our transformation we got the following text.

Note: the entire described above can be used for formatting text in Adobe InDesign.

Vectortuts+

All over the Web, at any given moment, something is going wrong. It’s not an issue we take lightly, yet it still occurs! No I’m not here to talk about our over dependence upon third party tools or IE6 (specifically), I’m here to talk about site glitches, and how to avoid them.

Occasionally these bugs are small visible glitches, occurring as a result of mismanaged code; or in many other cases, Internet Explorer. Other-times they result from the natural aging process of a site and its ever growing collection of pages. In this article we’re going to explore the world of site-based hiccups and how we can ensure that our sites don’t become associated with the fail whale!

Introduction

In recent years, we have placed a great deal of effort as an industry, following the topics that get lots of attention. Fashionable subjects include responsive design, user-experience, psychology and the buzzword infused languages we use daily like HTML5 and CSS3. Yet while this is going on, one of the fundamental parts of site ownership, the maintenance process, rarely gets much attention. It’s central to usability, it’s critical to design, and without it, sites would be a mess. Yet when it comes to reducing error ratios, many sites (even smaller, easier to maintain ones) fall quite short of the mark.

What is Defensive Design?

Combatting these evil forces, be they bugs or reoccurring errors, is an on-going battle that cannot be won overnight. In much the same way as Ash from the Evil Dead franchise, we endlessly charge into action with our trusty code chainsaws and bug bashing boom-sticks to save the day. The process of cleaning sites and ensuring that they’re as user-friendly as possible is referred to as defensive design.

Essentially, our goal is to support our sites in times of trouble, purge those errors relating to lost files or the unavailability of resources, ensure that our layouts do what they’re supposed to, help the user complete actions, and avoid throwing visitors into a bottleneck of confusion. Defensive design is as much about reducing user confusion as it is about iterating bugs out of the system.

Why does this Matter?

Given that most of the Internet’s users are mortals, unwise to the issues that geek superheroes are able to traverse with ease, we need to take care to help avoid causing them undue stress. Visitors are temperamental creatures that could ditch your site in search of an easier to browse option upon suffering one too many errors. If you can provide a site that loads quickly, works effectively, handles errors (as best as can be expected) and avoids alienating the user with roadblocks, you increase your chances of success. After all, a happy and contented user is more likely to remain a customer!

Legacy of the Lost

If there’s one thing I can’t stand, it’s obtrusiveness online. When things go seriously wrong, it can put you off visiting the site in the first place; or if you frequent the domain regularly, bothering to return later on. In this modern age of 24/7 global Internet access; issues like downtime, missing resources or pushy sites that complain because the user doesn’t have JavaScript enabled or Flash available on their iOS device shouldn’t still be happening. So let’s see how you can reduce these issues.

Server Outages

At some point or another, we’ve all encountered server related mishaps. Whether it’s down to DNS issues, overspending your allotted bandwidth, downtime for maintenance, or a simple malfunction that’s resulted in the Twitter fail whale. It’s the kind of error we cannot afford to ignore because unless we do something, the site becomes unavailable to everyone, s which is quite a scary thought!

Consider the following:

• Backup religiously: This is a simple consideration, but it’s the most critical. File corruption, data loss and more can happen (to you!), and those who don’t backup have the most to lose. You should if nothing else carry out this action on a weekly or monthly basis consistently.
• Offline Access: Even with Internet availability as widespread as it is, we cannot expect our users to have access to our sites 24/7. Ensuring that your pages work if a connection is lost, allowing downloads, and offline access will aid those with terminally unstable connectivity.
• Use a CDN: Content delivery networks are amazing. They cache stuff that needs repeating and they can reduce your bandwidth costs. If you don’t want to suffer an outage because of your host declaring you’ve used all your bandwidth, this can certainly help your sites.
• Status Pages: If you take a site down for maintenance, obviously this should only be done in extreme situations. Whenever a planned or scheduled downtime period occurs, let your users know the score, and provide a status page with timeframes and progress reports.
• Social Updates: Social networks like Facebook and Twitter have become extensions of our own sites. Therefore, if the idea of backup hosting isn’t your thing and you don’t require a 100% uptime safety net), ensure that you keep visitors updated with tweets and comments.

Missing Resources

The dreaded 404 error has become a part of our culture, with pretty much every site suffering one at some stage or another, and every user having met one during their time online. This could include a link to an image that’s disappeared since redesigning, or a page that no longer exists in the archives. Ensure that you seek and destroy these broken beasts and fix regular user invoked errors.

Consider the following:

• Seek and Destroy: Dealing with missing pages or files begins with hunting down the gremlins on a regular basis. You may spot them when you’re clicking through your pages, or you can look to tools like your analytics package or automated error finders like Xenu Link Sleuth.
• Information Architecture: If there’s one-thing designers are guilty of, it’s not maintaining their sites’ archives and allowing old pages to fall into disrepair. If you redesign a site or make any significant updates, ensure that dead links redirect appropriately to their new location.
• Third Party Links: This is one of the primary causes of link rot. If you link to someone else’s site and they choose to redesign (or spring clean), links to pages may evaporate. While we cannot force others to follow our lead, be ready to delete dead links or remap their location.
• User Created Bugs: Love them or hate them, your user dictates their journey around a site. If a visitor tries to access pages that don’t exist by making a typo, errors will occur. Friendly URL’s and redirects can help avoid this, as can monitoring your traffic logs for error trends.
• Friendly 404 Pages: As we all know, the default browser error messages aren’t very friendly. Most people won’t understand what a 404 error is, let alone how to resolve it. By building custom error pages, you can point them in the right direction and offer some useful advice.

Unsupported Technology

While languages like HTML have provided an open, mostly compatible way to ensure that our work functions for everyone, other technologies have not been so lucky. In some cases, the issue is down to the adoption levels of a proprietary system, in others; it’s just down to the fact that the thing we rely upon can be disabled. In all cases, we cannot afford to ignore the problems this can cause.

Consider the following:

• Beware of Flash: While HTML5 is helping to provide a good solution to this issue, Flash isn’t as popular as it used to be. With Adobe cutting development from many handheld devices and iOS having nothing to begin with, gracefully degrading alternative content is required.
• Unobtrusive Scripts: We have become addicted to JavaScript. Beyond the lovely surprise that scripting didn’t have to be used for evil (anti right-click scripts) and the crazy success of jQuery, we now depend on it daily. Just ensure that those without it can browse the site too.
• Image Alternatives: A picture might say 1,000 words, but to the visually impaired or a search engine, it’s going to be about as useful as a chocolate teapot. Ensuring that all your images contain alternative text is essential if you want to be safeguarded against such usage issues.
• Visitor Feedback: Maintaining a site is a tough job, because in the majority of cases, bugs are unintentional after effects that we fail to notice before going live. Encourage your users to let you know if they spot bugs or errors, as they’ll likely spot things you’ll miss entirely.
• Document Formats: Defensive design isn’t just about patching code. Ensuring that your files continue to remain visible in future years is also essential. Always offer multiple formats for your text and multimedia and don’t be afraid to upgrade the selection as you upgrade a site.

Sustainable Layouts

It seems that many Web designers are secretly cheating on their spouses, huddled in front of their computer monitors giving doe eyed looks at responsive Web designs and thinking about how much they’re in pixel love. In this age of design lust, it only makes sense to cover some of the issues we need to defend our visuals against.

Responsive Flexibility

Defensive design isn’t just about the obvious bugs that annoy our users to the point of drawing their computers a nice warm bath. It requires us to think outside of the box and try to avoid the kinds of common complaints, which can break a layout or render a design unusable. There are many general issues relating to the aesthetic of a page, which can be resolved with just a little common sense.

Consider the following:

• Avoid Device Design: We live in an era in which all sorts of tools are being used to access our sites. From tablets to televisions, phones to PDA’s, we need to ensure that our sites work on as many platforms as possible. To reduce issues, make your site responsive, it really helps.
• Suitable Multimedia: Audio and video can bring added layers of depth to your site and help to portray content in a more engaging environment. If you do offer such functionality, be sure to offer transcripts for those lacking the ability to use the media or lacking bandwidth.
• Printer Friendly: It might shock some of you but people still print pages! Yep, for all of those tree burning masses, you’ll want to ensure that you offer a print friendly layout that will trim away all of the stuff that’s useless and non-functional on paper: like adverts and navigation.
• Inconsistent Views: How people experience your site may differ depending on what they’re using to browse the Web. To avoid layouts breaking on devices like phones supporting tilting content in portrait and landscape mode, be sure to use media queries to adjust as necessary.
• Confusing Objects: Underlining text and coloring it blue is never a good idea if that object is not a clickable link. Additionally, hiding a clickable link amongst a bulky mass of text is equal in its ability to confuse users. Ensure that visitors can identify where they need to click next.

Cross-Browser Support

Web browsers have become the bane of many designers’ lives. We spend days putting some code into a beautiful format, only to on occasion spend additional hours, frustratingly pleading with the browser that won’t do as it’s told. If you’re the designer, you might want to say “to hell with it”, but if you’re a user and you follow the same philosophy, that’s one visitor you’ve lost to a visible glitch.

Consider the following:

• Popularity Rules: If a site is going to withstand the test of time, it must ensure that it works amongst the variety of browsers available to users. Always test your site within the most common ones (Chrome, Firefox, Safari, Opera) and the annoying ones (Internet Explorer).
• Unsupported Code: When dealing with languages like SVG that suffer persistently mixed levels of support, ensure that you include relevant alternatives. This may require including another language (like VML for IE6-8), but it’s worth the effort to avoid missing features.
• Web Standards: More of a best practice than anything else, it pays dividends to validate the code you write and separate structure, style and behavior. Not only will it help reduce the likelihood of code glitches occurring, it’ll also help you maintain pages with relative ease.
• Legacy Support: We’ve already mentioned the need to test in popular browsers, but if you use Internet Explorer, you’ll know that each version behaves like a totally different browser. Ensure you maintain a support cycle for old browsers (if there’s enough people using them).
• Broken Scripts: If you use server-side scripting, beware of the error messages that can pop-up on the user’s screen if something glitches in the code. It would be more useful for scripts to email you any error reports generated and provide a friendlier user error notification.

Accessibility Needs

While user-experience design seems to be hogging most of the glory in respect to getting coders and designers alike excited about how to keep the customers happy, accessibility in many cases often gets swept under the rug. It’s a scary statistic that the majority of sites today are still inaccessible and this has to change. Especially as such issues could block an entire demographic from your site.

Consider the following:

• Text Only Situation: Ensuring accessibility credentials requires effort, but a good start is to ensure that everything falls back to a textual alternative that can be read by screen readers. Download the text browser Lynx and see how your site works in an extreme environment.
• Sympathetic Design: One of the reasons why sites tend to fail to help users achieve goals is because the emphasis tends to be upon glossy visuals. As you fortify your site, critique and justify everything on the page, removing or simplifying what fails to do its job smoothly.
• Helpful Alternatives: Accessibility dependent users tend to have a lower margin for error in site defensiveness. If something fails to be accounted for, it can render a critical part of a site totally useless. If you can offer more than one method of achieving a required task, do so!
• Documentation: When things go wrong, visitors will demand answers, they don’t want to feel like they’re alone and helpless. If your site is quite complex or if you’re providing a Web app, ensure that you document every feature and provide useful aids for resolving errors.
• Usability Testing: When you launch a new site or service, the opportunity for bugs to occur is often greater because large parts of the property have not yet been put through their paces. To iron out initial bugs, invite beta testers and undertake regular usability testing by default.

Reducing Input Errors

While the aesthetics of our site are important, it goes without saying that issues relating to form input and page interaction are often the most damaging to the user. We can get away with a site not looking its best in IE6, but if a visitor can’t even utilize a contact form without errors occurring, you may as well turn yourself into the usability police to be arrest without bail. Dealing with input issues may seem scary, but as you’ll now discover, it’s really just about thinking in terms of practicality.

Intelligent Feedback

Computers aren’t very smart, let’s be honest. In terms of Web development, the closest we can get to achieving intelligent feedback is to examine what the user is doing, and try to make a prediction based on how others have used the service. The principle behind this technique is simple: if you can identify where errors commonly occur, you can assist the user by forcing them to take extra care.

Consider the following:

• Auto Completion: As search engines have proven, the power of the people can reduce the potential for spelling mistakes. If you provide a site-based search, help users find what they are looking for by suggesting potential matches and previews for what they’ve typed so far.
• Auto Correction: If you’ve spent much time looking at YouTube or Facebook comments, you probably already fear for the future of the English language. When asking for data, try to fix common typos and be forgiving of the caps lock and spaces in things like credit card entry.
• Error Highlighting: When asking users to enter a specific type of information, accidents will happen from time to time. Whether you use JavaScript or a server-side solution, or both if you want maximum compatibility, be sure to point out exactly where the issue resides!
• User Confirmation: Some things that a visitor undertakes are more important than others. Changing a profile picture for example isn’t as worrisome as paying for something. In cases where errors can’t be afforded, request users check their entries in a post-submission page.
• Alert Messages: The biggest mistakes often occur in an instant, like clicking on the wrong button. If a site has a delete (or other critical) feature that could be disastrous if erroneously activated, always ask the user to confirm the action. Especially if there is no undo button.

On-Page Assistants

While providing users with some feedback during the input process is helpful, it also makes sense to provide additional support to users to help them understand what is required of them before they commence data entry. While intelligent feedback focuses on spotting and resolving errors as and when they occur, assistants try to explain the process better, to avoid it occurring in the first place.

Consider the following:

• Data Shortcuts: In recent years, there has been an upsurge in the number of browsers and products offering auto-completion and helpful aids to ensure that accurate form filling takes place. Ensure that your form inputs have suitable ID’s that these products will recognize.
• Content Hinting: This is a very straightforward route to ensuring users don’t make mistakes. All you need to-do is pre-populate fields with a default value that disappears upon click or data entry, and offer a descriptive explanation of what the field requires (not just a label).
• Link Whitespace: Especially on small screens, mistaken click are quite common. If you’ve got big fingers and try tapping with precision on a tiny object, it makes sense that you may miss the mark. Ensure links have suitable whitespace to avoid accidents (like deletion) occurring.
• Selective Entry: One of the things I admire about drop-down (select) menus and checkboxes is that they limit the potential for mistakes by offering a selection, without the user needing to type a specific value into a box. If you can use these in preference to text entry, do so.
• Digital Signposts: While form filling takes up a big part of the input error spectrum, poor quality links can also make errors more frequent. To avoid sending users to a page (or site) they didn’t intend to reach, label links appropriately and avoid mystery meat navigation.

Delayed Correction

As we’ve stated before, errors happen and no matter how much assistance you give a user, they will always find a way to either ignore your helpful hints or cause a glitch that puts them in a pickle of a situation. As such, in addition to the pre and post data entry process, it’s important that visitors can amend their details, undo mistaken actions and be empowered to “help themselves” when possible.

Consider the following:

• Undo Actions: When we make a mistake like hitting a delete button and ignoring the alert asking us to confirm an action, we immediately feel guilt, shock and fear that we’ve lost the data forever. Offer an undo button to return to a previous state to avoid permanent loss.
• Default Resets: When users are given the ability to configure something, they seem to have a tendency to play with the interface or functionality and learn by trial and error. Due to this admirable browsing trait, you should let defaults be restored from a session or template.
• Post-Production: How many times have you signed up for something, only to find that you made a mistake on the form and now cannot seem to remedy the situation? Rather than just blocking entry fields, allow users to alter (and if needed verify) and rectify issues they spot.
• Back Button: Every browser has one, and we use it regularly. The back button has become the ultimate undo feature for the Web generation. Sites that block this button, except in cases where transactions like payment might reoccur, need to stop and let this tool to-do its job.
• Contact Details: When all else fails and bugs occur, users want to be able to get in touch to report the problem. If you don’t have a contact method (or worse, don’t monitor it), ensure you fix this situation, as it’s usually the final port of call before a visitor abandons your site.

The Neverending Story

If you talk to a software developer, one thing they’ll inevitably tell you is that no product, no matter how simple is ever 100% bug free. The second someone makes that claim, a user somehow manages to break the application, even if it is as simple as “hello world”. Inevitably, you cannot defend your site against the on-going issues of errors in one single swoop. As your site evolves, you will need to keep revisiting and repairing as you work to ensure that what was here today isn’t broke tomorrow!

The truth is, we live in a digital universe that’s infested with link rot, missing content, broken and obsolete code, and the situation only seems to be getting worse. While there isn’t much we can do about the sites that time forgot, you could and should improve the situation for your users. Take the time to spot check your site, look back through those archives, keep cross-browser testing and never take anything for granted, especially as your users will critique you for serious failings.

In terms of customer service, you can be forgiven for having errors in your products as regardless of how hard you try, things can go wrong. But don’t take that as a sign to give up and let the bugs keep coming, as it’s how you deal with them that matters the most. If you work quickly to resolve an issue, visitors will likely feel better about you and your site; as you’re rewarding their feedback with fixes rather than punishing them with continued errors. But if you don’t make your site defensive, you might silently lose visitors, and that’s not something any of us should be willing to settle for.

Webdesigntuts+

Well, it’s not technically the weekend, but we’re heading towards the end of the week, so that’s reason enough for a quick giveaway! Alex from Moople Apps has given us 5 CSS3Toolkit purchase codes to giveaway to Webdesigntuts+ readers – leave a comment before Sunday and one of them could be yours!

CSS3Toolkit is a Macintosh utility app that lets you build CSS3 styles visually.

Own a mac? CSS3 fanboy? Prefer to work visually? CSS3Toolkit is just what you’re looking for! In typical OSX style, CSS3Toolbox offers a straight forward interface allowing you to perfectly sculpt your CSS3 effects. Once you have the effect you’re looking for, simply copy the syntax into your CSS file

Winners Announced!

I’m afraid the draw has already taken place! Congratulations to the five lucky winners! Nevermind if you weren’t one of the lucky few, keep following Webdesigntuts+ on Twitter, Like our Facebook page, or add us to your Google+ circles, and you’ll hear of plenty more giveaways soon

Thanks again to Alex for stumping up the prizes!

Webdesigntuts+

Final Cover Preview

Shown below is the cover art for the album. The cover was the catalyst for the rest of the design elements that were created. Read on to get a more in-depth understanding of the process involved.

Project

If I Were A Mountain… was in need of a design for their debut album. The sounds that they produce needed to be communicated visually. The design needed to present their growth as a serious force to be reckoned with, yet still appeal to their non-traditional, indie-rock fan base. The design needed to be professional yet approachable, and modern yet non-mainstream.

Pre-concept Preparation

Before creating any visuals for this project, it was important to have the fullest understanding of the music that my client produced. I made sure to listen to the entire album to get the best understanding of what the client was all about. Check out the links below to hear for yourself!

With any project there is the opportunity to extract ques and information that can provide insight into the best creative execution for a project.

1. Sunny Day Driving – 2:55
2. Victimized – 5:20
3. More to Accomplish – 5:18
4. Renaissance – 4:48
5. Dr. Jekyll Envies Me – 4:04
6. Untitled – 6:40

With any project there is the opportunity to extract ques and information that can provide insight into the best creative execution for a project. In addition to listening to each of the songs, I took a close look at the album name, song titles, lyrics and physical appearance of the band to determine more information that helped frame in the identity of the artist.

First, based on the album name I deduced that the overarching take-away that he wanted his listeners to feel was a sense of wonder.

Second, the song titles echoed the album name with titles such as “Sunny Day Driving,” “More to Accomplish,” and “Renaissance.” This further communicated the uplifting nature of the album.

Third came the lyrics. The client provided the lyrics to all the songs, which made it even easier to quickly reference what a song was about.

Last but not least was my client’s physical appearance. Artists of all types have physical characteristics that set them apart from everyone else. This was the case with my client too. I made sure note any unique qualities.

Evaluating all of these factors individually helped solidify the visual look the album needed to encompass.

Concept Brainstorming and Sketching

Armed with all of the information I had learned and discovered, I took to brainstorming and sketching.

I knew from the beginning I wanted to create a unique representation of the album title. I wanted it to be somewhat literal without being trite.

One of If I Were A Mountain’s… main visual characteristics is his curly brown hair. This is an extremely obvious feature and his fan-base has come to associate this look with him. With this in mind I found it very fitting to work that characteristic into the concept.

From there I knew I wanted to weave in his name into the execution. I decided that I would use his curly hair as the focal point of the art. The curls of his hair would double as the peak of a mountain!

With the framework of the design in place I took to drawing a quick sketch to solidify how this concept might play out on paper.

While sketching the initial concept I knew there were things that would be better left to further exploration when it came time to design the artwork at the computer level, which was the case with the artist and album name. I left these items very loose during the sketch phase.

Since creating an illustration is a much more complex and time consuming undertaking, I wanted to first verify with my client that this concept met his expectations. It’s much easier to come up with another concept, versus spending time illustrating something only to discover that the client had something else in mind, then going back to square one. Clients many times change their minds, so it’s better to be safe than sorry.

In this case, fortunately, the client did not have any changes after I described the concept. From there it was on to the fun part, creating the actual design!

Executing the Cover

I first started with illustrating the curly hair, as this would require the most time and attention. I illustrated about seven locks of hair… enough to provide some variance for the amount of hair that needed to be built up. Below are a couple examples.

Next, I tediously layered each lock of hair on top of one another to build up a convincing pile of hair. I made sure to pay close attention to create something that looks like a head of hair AND a mountain. To accomplish this I made the head slightly less round and made it form somewhat of a peak, as a mountain does. It was important for the shape to first look like hair and second to suggest a mountain.

After the basic shape of the hair was in place, I decided to work on incorporating the text. I knew I wanted something eclectic and fun to match the whimsical nature of the illustration. To give the letters their hand-drawn charm, I did exactly that, drew them by hand.

As for the album name, I wanted that to complement the free flowing nature of the artists name so I used a more rigid and vertical font there.

Once these items were in place I knew I had successfully placed the correct hierarchy on the way the album cover was viewed. It’s easy to start adding in other design elements before the more important elements are in place. For this reason I held off on adding clouds and other design enhancing elements so that I wouldn’t have to work in the essential elements around the non-essential ones.

To finish off the cover I added color and depth to the hair, drew in clouds, the background ribbon and small design enhancing elements like the music notes.

Creating the rest of the pieces was easy once the cover was complete. Obviously all of the design elements need to work in tandem, so I used the cover as the jumping off point for the rest of the elements.

Client Review

After all the elements were designed it was then time to show the client the finished design. I felt confident after all the background information I had done and was provided with, and due to the fact that I had verified the concept with him beforehand that there would likely not be many changes, if any.

And I was correct. The client had no changes to the design, so I finished making everything print ready.

Result

The client was very pleased with the finished piece and is currently working on assembling a CD release party to celebrate this step in his career! Check out the full design below.

Connect and Purchase

Like If I Were A Mountain… on Facebook and follow him on Twitter!

Vectortuts+

Yet, in the middle of this digital era, the best allies of a web designer are common tools that can be bought with the change under your couch cushions. I’m talking about making pen, pencil and paper a part of the creative process that other “non-digital” designers have been using for ages: sketching.

With this article we’ll treat an argument that certainly many of you will have at heart: we’ll see in fact how sketching can help us arrange the ideas, design an effective layout and – why not- give a fresh and original touch to our design.

Step 01: Sketching As Part of the Planning Process

Imagine this scenario: We have just finished an exhausting briefing with our client and now it’s the moment to rearrange the ideas. We know the preferences and needs of our client; On this basis we should be able to set the layout we have to design. The problem is the quantity of information we have to consider! We defined that in the homepage we have to put a slider and a visible call-to-action which invites to a contact, the pages of the site will be seven and we must also include the latest news in the homepage and so on.

At this point, I assure you, opening Photoshop with the pretension of creating an effective layout is useless; without a plan for what you have to draw in the detail, you’ll be blocked and forced to essentially design without enough foresight to make intelligent decisions. This often means more work later on, fixing what could have been done right the first time with just a bit of work sketching.

Sketching offers something unique to web designers… it helps us organize large amounts of information into manageable pieces that we can design around.

Instead, if you have the fortune of being able to metabolize concepts and ideas in a design, most likely you’ll forget something important, with the result of having to put your hands on the layout again for the second time. And, you probably also know that there are layouts that even with a small change get completely altered and lose their communicative and aesthetic effectiveness… a really frustrating result indeed.

A few pieces of advice on how to proceed without losing your head? Get pen and paper…

1. Mark the key words that must distinguish the company and that you want in front of your eyes during the project phase, so that not to lose the focus on want you have to represent graphically. Avoid complicated phrases and concepts, be organic: the more immediate you are, the more your mind can process the information quickly and easily.
2. Always in a schematic way, possibly as a list, write down the information useful for the design phase. What you have to do is record on paper only the information and concepts that you’ll need once you open the graphic program.
3. Ration out the information in stages, so that every phrase is as straightforward as possible. If you still have to design the layout of the homepage, don’t take notes on the contents to be included in the contacts page: avoid confusion and distraction. Note the information on different sheets of your notebook, so that you can be concentrated on one single step at a time.

This first phase of sketching regards the elaboration of the information in a schematic and simple way. You’re probably thinking that all this rigor and discipline has nothing to do with creativity and imagination and you want a change of scenery? Okay, let’s move up to the next step.

Step 02: Sketching As Part of the Creative Process

We said that the sketching is a creative process, but want does this mean in practice?

We can consider the sketching as a “middle land” between the information in our possess and the layout we’ll end up planning. In this territory, hostile and magic, we find colors, fonts, boxes, ideas, inspiration, textures, images, sensations, doubts…and much more. Useless saying that in the middle of all this it’s easy to be confused and to find the right idea, the idea that works and that makes us proud to be a designer.

I think that there’s nothing more irritating than finding oneself in front of a blank sheet, waiting for inspiration that is supposed to come from who knows where, and winding up with creating ugly layouts (then if you’re really lucky like me, you’ll be engaged with a colleague that takes the most of the situation to tell you that your work sucks without bothering to sweeten the pill so that it doesn’t hurt your sensibility as a creative).

One of my own sketchbooks… we’ll revisit this later.

Personally I passed some rough times with a few clients: inspiration didn’t want to come and my graphic proposals made me be ashamed of myself. I passed hours looking at gallery sites, feeling even more depressed because it seemed like everybody were able to create beautiful layouts, the only person who wasn’t able to put two rectangles together in a nice way was me.
In my case the ease of the pressure was made easy with the help of a pencil.

Give the kicking start to one’s creative process on paper frees in fact your imagination, allowing you to work in a more spontaneous and stimulating way.

Especially if the project you’re working on is huge and rich of technical details, considering all this, the first phase can certainly be castrating for the creative flux, not to mention the debilitating fear “to fail” that affects many designers: caught in the craving to do fast and well, we often remain paralyzed in front of the monitor unable to rearrange the ideas and channel them in the right direction.

Therefore, before starting to work on whatever kind of graphic program, get pen and paper and… sketch! Scribble, jot down a couple of ideas, start tracing a kind of abstract design to get familiarity and after free your intuition. You’ll analyze afterwards the ideas, now just let yourself go and avoid logic and rationality, they won’t help you in this phase.

Outline the layout, put down a couple of notes , erase it all, start again: during this process your mind works fast and frenetically, so take note of everything before this intuitive phase dims down! You’ll discover that giving complete freedom to your ideas is pleasant and relaxing, besides useful.

Make Mistakes… on Purpose

The first idea will rarely be the right one, be prepared to accept it. Sketching helps you to unblock yourself and seize different graphic opportunities that could be right for you immediately and lightly, but this doesn’t mean that you won’t commit mistakes in this phase. The positive thing is that even if you make mistakes in this phase you can always tear the sheet, sharpen the pencil and start all over again on a new sheet. Throwing away a layout created with Photoshop, just because you realized that it’s not the best solution for your case is without doubts demotivating.

Sketch, Don’t Wireframe

At such matter, I advice you not to confuse sketching with the creation of WireFrame: we’re talking about two different things, even if I see there’s some confusion about the argument. A few days ago a web designer told me, quoting his exact words “ah, you use pen and paper? I do everything online” , mentioning a site that permits to create mockups with a mathematical precision, with a complete control on colors and typography.

Well, this is not sketching, this is completely another thing. Clicking with the mouse on some buttons to make appear some rectangles doesn’t permit you to give a shape to your ideas and free your creative flux, try to believe. With this statement I don’t doubt the utility of a good wireframe, I just want to underline the differences between these two approaches.

Embrace Chaos

Put away your craving for precision, ruler and compass! In this phase there’s no room for order and rigor, so don’t limit the creative flux, blocking yourself on margins and white spaces, you can think about them later. In the same way, don’t worry if you’re not particularly artistically gifted and your manual abilities hardly allow you to hold a pencil: sketching is used for reordering the ideas not for forming gifted artists.

At this regard we must add that even if sketching was born as a free mean of expression of imagination and creativity apart your graphic abilities, this doesn’t mean that the sketch doesn’t also have, in a certain way, an artistic value. Let’s see together what I’m talking about.

Step 03: Sketching As Part of the Design Process

The tendency of many web designers to sketch has given the kicking start to a real graphic style that recalls somehow the aesthetic aspects of the sketching: we have brushes that mime its spontaneity and lightness, not to mention hundreds of fonts in hand-written style easily found in the web. Thanks to such resources creating today a layout in sketch style is quite easy, but besides this designs that use this graphic style usually have a touch of originality that make them appealing and out of the common run.

The sketch style, just because it’s associated to an activity common to many creatives, is often used in sites of freelancers or of communication/design agencies that want to transmit this concept graphically.
Anyway, even the combination of some sketch elements to a more traditional graphic can give a fresh perspective to otherwise ordinary designs.

Let’s see how some sites have used this style in an effective and original way and how this has influenced the aesthetic and the effectiveness of their layouts.

Kunal Chhajer

http://www.kunalchhajer.com/

The site of the web designer Kunal Chhajer reflects exactly the concept of the sketch style. The graphic is light and pleasant, it’s enriched in an original way by some designs that make the layout unique. The style is also recalled in the use of a hand-written font in the navigation menu. All these details give to the design the creativity that a designer wants to express in his personal site.

Creative With a K

http://www.creativewithak.com/

In the Creative with a K site there’s a massive use of sketches and doodles, just to clearly show the “creative nature” of the site. In this case even the peculiarity of the layout, so atypical, makes the site special and unusual, even if it’s difficult to consult.

Lega-Lega

http://www.lega-lega.com/

The site Lega-Lega is an online store of shirts with prints a bit out of the ordinary and it’s aimed definitively at a young market. The addition of some sketch details give a creative and perky cut to the site.

Beavory

http://beavory.com/

Beavory is the site/blog of Karen Mack, Israeli illustrator. The style of her site is deliberately based on a style that recalls her creative nature in a pronounced and original manner. Every detail, from the structure of the layout based on irregular lines – as if they were drawn with a felt pen- to the icons of the social network traces completely an effective sketch style.

Bowtie

http://bowtieperiod.com/

Bowtie is a digital studio that decided to represent itself really in a creative way on the web. The animations of the site, together with cute, uncommon drawings, make the layout attractive and strongly extravagant. They call themselves “creative” and, to prove it, they use elements in sketch style.

MakoMako

http://www.makomako.cz/home/

The layout of the band MakoMako is completely created in sketch style, so that the same structure of the page is based on a sheet of paper with irregular lines, and in the homepage as part of the design, we find besides the usual graphic details based on sketches and hand-written fonts, a pencil. A curious and a very unusual look for a band.

Stan The Snowman

http://stanthesnowman.com/

Now that’s almost summer a lot of its charm vanishes, but the graphic effectiveness of the site Stan the snowman however is out of the question. In this case the addition of stylized images and of a calligraphic font gives a spontaneous style to the layout, playful and informal. And it traces the concept of activity, based on writing greeting cards.

Greenaway Pro

http://www.greenawaypro.co.uk/

The festival Greenaway Pro 2011 site combines in a particular and attractive way the sketch style and the grunge style, giving to its layout a really original imprint. Also in this case the choice of this particular graphic style tends to express an informal, spontaneous and eccentric look . Perfect for a festival that deals with music and surfing, right?

Julian Laval

http://www.julianlaval.com/

Julian is another freelance web designer that wanting to highlight his graphic skills, exploited the communicative power of the sketch in a really creative way. Of course, it’s not only this that makes his site special, but even the curious and deliberately uncommon nature of his drawings. Like many other sites in this style, colors are limited to a gray scale, to make the illustrations more realistic.

Little Creatures

https://www.littlecreatures.com.au/

The site Little Creatures is completely designed in sketch style and thanks to the peculiarity of its sketches, so little refinished, the page is so attractive.

Le Carnet Ordinaire

http://carnetordinaire.com/

Carnet Ordinaire is a site that is like a diary, with travel notes, annotations and personal considerations. Considering the eccentric and intimate nature of the site, the sketch style is the most appropriate one: the layout is based on the image of an opened moleskine, enhanced by sketches and stylized drawings. Even the background is made more original with some cartoons inserted in opacity and by the presence of a pencil , left casually near the moleskine.

Wing Cheng

http://www.wingcheng.com/

The Wing Cheng portfolio is a perfect example of the fresh perspective that the sketch style can give to a layout. The page structure is based on an ajar moleskine, from which the pages fall down. The effect is made more dramatic thanks to shadows that frame the design and the use of calligraphic fonts for every content of the layout, from the titles of the projects to their description. But the real peculiarity of this site regards the exposure of the projects, also sketched in pencil in a really creative way.

Kuztown University

http://www.kutztown.edu/acad/commdes/faculty/

The Kutztown university of communications and design couldn’t find a better way to address effectively to creatives or aspiring ones. The layout is certainly unusual for an academic reality: the background in water color style, the page based on a page of a book, the illustrations in water colors, the particular fonts of the navigation menu… all original and certainly expressive details.

Dan Whittaker

http://www.dannwhittakercreative.com/

Dann Whittaker in his site shows a graphic style common to many web designers. A casual and spontaneous look, based on a page book layout and on a consistent use of details in sketch style. In the complex, the layout is very effective and pleasant aesthetically.

Chernobyl Heart

http://www.chernobylheart.org.uk/

In the case of the Chernobyl Heart site the sketch style is used to highlight graphically the concept of childhood: here we’re talking about children and we see it through some small stylized sketches that copy their way of drawing. Effective and pleasant.

Demain j’arrete

http://demainjarrete.stpo.fr

The sketch style is perfect to present on the web comics and illustrations, so that the layout represents visually and creatively the nature of the site. In the Demain J’arrete case, the whole site has a “charcoal” graphic style, starting from the gradient of the background to the irregular lines that contain the layout and the navigation menu.

Nature Shop

http://www.natureshop.co.nz/

Adding a couple of sketch details in apparently casual way, can give that special creative touch to a minimal and essential site. The result, visible for example in the site Nature Shop, is extremely pleasant.

Ready to Market

http://www.readytomarket.net/

The layout of the Ready to Market is an example on how mixing a modern style with some stylized and comic details can give a new and stimulating result.

Cou Cou Shop

http://www.coucoushop.ch/

The Cou Cou Shop is very nice and pleasant to see. One of the most particular elements of the layout is without doubts the footer, that shows a stylized landscape of Switzerland. Even the sketch of the bag from different angles is a very original detail.

Upside Down-Town

http://upsidedowntown.me/

Colorful, unusual and whimsical: the site of the learning center Upside-Down Town invests a lot on the originality of the sketch style. Every element of the layout, especially in the heading, points to the visual effectiveness of drawings, sketches and colors that highlight graphically and in a pleasant way children’s world.

Conclusions

We saw how the sketching process can help us to process ideas in a creative way and at the same time, how some sketches can give a different and original perspective to our layouts. Make sketching a habit when you start to work on a new design project – and not only- can come extremely handy also in other fields, like in the copywriting – and in time you’ll develop a flexibility of mind that will turn useful in your work. Therefore to conclude: turn off the computer and get paper and pen!

I finish sharing with you two personal sketches: a sketch of my current portfolio and the first ideas I put down for this article, during a really boring train ride.

Now, it’s your turn, I want to see your sketches!

Webdesigntuts+

Step 1 – What is abstract photography?

Handily, there isn’t really a defined meaning or explanation of what abstract photography entails, and in the same regard to abstract art, the content of the work is essentially unimportant and often entirely ambiguous. What does take precedence is the form, colour, line and texture within the composition, to create a piece that is visually stimulating. With regard to abstract photography, you don’t need any sort of special equipment, just a camera, any camera you like, and your imagination.

Step 2 – It’s all in the approach

So how does one go about taking abstract photographs? The first thing to remember is to keep your eyes open for interesting and engaging subject matter. Whenever I shoot abstract shots, I’m always attracted to the subject matter instinctively; something about it will catch my eye and draw me in. React emotionally to the subject, consider why you were attracted to it and how it makes you feel and this will inform how you photograph it. Spend time with the subject, think outside the box and approach it in a means that you would not really approach it, from different angles and regardless of it’s usual purpose.

There aren’t any given camera settings to recommend as each subject and circumstance will vary greatly, but don’t be afraid to stick your camera on manual and try out different shutter speeds and f-stops in order to reveal the true potential of your subject.

Step 3 – Break the rules!

It’s important to consider what elements of your subject that you want to engage with in order to enhance your shot. Use your imagination, stop thinking about the subject in it’s literal form, forget all the photographic preconceptions and get creative. It can be quite a challenge to do away with established photographic concepts, the rules regarding composition and exposure, but instead use the subject as an artistic means, almost as if you had a blank canvas in which to express yourself artistically. It’s now time to think about how you can maximise the features and detail within the subject, the line, texture, colour and form.

Step 4 – Pattern & Line

The first key element to look at is the pattern and lines within your subject. Look carefully at your subject and consider whether there are any reoccurring shapes or themes with the object and use these to your advantage. I always like to try shooting an object very straight and symmetrical; to get a clinical structured feel that I feel would enhance the affect of a pattern, but you can also try shooting at angles that counter the pattern. Also look at the lines and edges of the subject, are they straight or curvy, do they lead into the shot, through the shot or away from the shot. Line can be used very effectively in photography as the eye will tend to follow a line through a shot from it’s origin to it’s end, so consider how you might want to engage the viewer and where you’d like to lead them.

Step 5 – Form

The form or shape of a subject will play a crucial role in how you approach your subject. Assess the form carefully and think about which aspects of the subject you want to exploit, for example, is it very straight and formulaic, does it lots of curves and imply movement or is it a natural object whose form will change over time? Decide whether you want the form of the subject as a whole to be within the image or whether you want to focus in on one particular area of interest. Also think about whether there are any recognisable shapes that you can work with, be it circles, triangles or hexagons, use them to your advantage!

Step 6 – Colour

Colour is probably the strongest visual element to an abstract shot, it draws the viewer in and the colour of a subject will immediately inform the viewer as to what they are looking at and form assumptions and a mood setting in their mind. Try and use colour as an expression, it’s the best and easiest means to make your shots attractive to the eye and just as in a painting, think carefully about how you use colour to bring certain aspects of the piece to the fore.

Step 7 – Working with architecture

Architecture makes for extremely interesting abstract subject matter, especially commercial buildings and modern structures designed for public use, as they often have distinctive shape, form and lines which are very easy to exploit. Older buildings tend to appear far more structured and are often symmetrical in nature, but this can be used to your advantage as you try to pick out patterns to use in your shot. Newer buildings are likely to be far more diverse, with odd angles, curves, large planes of solid colour and far more glass. Ensure you spend time with a building, explore it inside and out (you may have to ask permission to shoot inside) and take advantage of the architects design work!

Step 8 – Abstract & Macro

Another technique that works very well when trying to achieve abstract shots is working in macro. Many abstract shots are of subject matter that would be totally recognisable if it were shot from a distance, but the photographer has chosen to close in on a specific area of interest, maybe because of it’s texture or colour. In this case, ensure that you fill your viewfinder with the subject matter; you don’t want any blank spaces in your shot. Again, think about the angle at which you approach the subject, for example, the most common way to shoot a flower is from above, to see the detail in the centre, but maybe you could try shooting from below up towards the light and see what results you get.

Step 9 – You’re an artist!

As I mentioned previously, abstract photograph is quite different to most other types of photography in that it’s centred on the artistic expression of the photographer, which is worth bearing in mind, especially with regard to the fact that it’s not always going to be obvious what your shot is of. Don’t expect people to see your abstract shots in the same way as you do. I love it when people have to ask me what the content of an image is or think it’s of something totally different to what it is actually of, because they’re seeing it in a totally different way to me, it’s an intriguing insight into them and their approach to the work. I find my abstract work to be very personal, I’ve picked out that subject, the approach, the angle, the exposure and the beauty of it is that few people would approach it in the same way, it’s a very personal expression.

Step 10 – Get out a give it a go!

So now it’s time to get out there and give it a try for yourself. Plan a couple of photo trips out to places you’ve not been to before and keep your eyes open for subjects that catch your attention. In a new place you will be surrounded by new photographic opportunities, so take your time and really engage with the subjects you choose. I always like to use my 50mm prime lens for outings such as these, purely because it’s quick and has a nice wide aperture that really helps when trying to achieve artistic results. Failing all this, just make sure you have a camera with you at all times so you’re ready to snap away at anything of interest that you may find on your travels!

Phototuts+

Lilly by Kinkei

Kinkei‘s work reminds me of Disney’s playful and cartoon style and this piece is one of many which uses it to create an elegant and colorful princess illustrations. What’s appealing and doll like about her illustrations are the big eyes and the feminine dresses, which are common elements throughout her pieces.

Princess of Power by FlashParade

Hands up if you were a fan of He-Man and She-Ra as a child? I loved She-Ra and so this piece by FlashParade grabs me straight away. Great 80s fan art rendered in a character style that again utilizes the use of big eyes to create a doll like impression.

Pesadilla by Alejandra Colunga

I remember seeing this piece for the first time and I fell in love with it straight away. I personally think of the bizarre style of “Ren & Stimpy,” a little demented and a little quirky, yet still ever appealing to a young audience. This piece unites human with a comical creature to help children imagine how big the character would be in person and what it would be like to interact with it.

Jellyfish by Drud Studio

This type of piece you could easily see either in a children’s book or even on children’s clothing. The latter is mainly due to its great use of limited colors and its cheerful style. Definitely a piece young toddlers could connect to and make them smile, which is partly due to the simple structure of the faces and the use of curves.

Group Birds by Endangered Dragon

Imagine a poster above your child’s wall with these cheeky chappies on it! All of them smiling down upon him/her and introducing them to the colors of the rainbow. What I love about this piece is how every bird has its own character, it’s own persona, which are wonderfully rendered in monochrome colors and line art to match.

Study and Fun by MrBumbz

One theme is common throughout these illustrations and that’s of bright colors and a positive atmosphere, which is very true of our next piece by MrBumbz, even his name shouts friendly and cheerful! This piece shows how creative a child’s imagination is and what could be on her mind. I love the use of gradients in this piece.

Fox in the Snow by Sibelian

This piece draws influence from the folk tales of “Watership Down”. This illustration is full of little delicate details, such as a the shine from the moon and stars, the tribal markings on the fox and the intricate details in the trees. Again, this is a great illustration using gradients – this time to create atmospheric snow details in the hills. Beautifully done!

A Bright Idea by Owaikeo

Owaikeo‘s work is always inspiring and this piece is the tip of the iceberg with his more conceptual work. Although the initial impression is that it’s not really a children’s illustration (Where’s the bright primary colors? Where are the adorable characters?), I’d beg to differ. In fact, this sort of illustration is the type a child and adult alike could sit staring at. An illustration that expands the imagination is a great theme for any children’s illustration!

The Journey by CQCat

I’m a big fan of animals, and in illustration the more bizarre looking to our standard domestic pets the better. They’re more recognizable if they’ve got a long trunk, horns or even a long neck. These sorts of animals stick in the imagination of children because they don’t look the same as a cat and a dog. They look different and they endear themselves to children. I know so many people who have grown up with giraffes and elephants as their favorite animals. This piece of course, plays itself to the young children who favor animals (although not on purpose). It’s been delicately done and would appeal to a young girl.

Asiana by Sun2197

Sun2197 has combined shapes and a drop shadow effect to create this Asian inspired paper craft styled piece. With a subtle texture over the top, it gives it a more authentic paper feel. What I love about this illustration is the simple shapes, almost like putting together a piece with felt boards you’d get as a child… or maybe I’m showing my age here!

Just a Bad Dream by AlphabetHater

Taking Big Bird to the next level with a childhood game of “Hide & Seek”. Great character design and the use of primary colors have created this charmingly devious scene.

Tetis by Limkis

Although they say blue is for boys and pink is for girls, I think this illustration would appeal to both alike. Limkis has used her unique vector techniques and creative character design to craft this elegant and playful children’s illustration, which as a grown up, I’d be proud of display on my own walls!

The Cat Who Talked by Vicutu

I love how the simple objects stand out on this piece against the patterned background. Again with the animal theme and playing on the many lives or should I say the “lies” of a cat! I’d imagine seeing this dramatic illustration in a children’s book or even the cover. It’s simple and memorable.

Ogrest01 by Ntamak

My breath was taken from me when I saw the amazing rendering skill in this piece. Mixing gradients and possibly feathering/masks to create this delicately detailed illustration. Like the piece before, I love how the simple colored birds compliment the background, they definitely help both elements stand out and make them easy for a child to visually grasp.

Kawaii Sushi and J Cuisine by Valentina Crespo

As children, we often are afraid to try new things and new foods from different cultures. By turning this platter into anthromorphic illustrations, Valentina Crespo has a friendly way of introducing new things into a child’s life.

Squeaky Under the Tree by Squidpig

Staying on a similar “kawaii” style, Squidpig has created a cheerful scene. An inspiring style is shown here, with the bold line art and shapes mixed with a textured/pattern fill to give it that extra bit of refinement.

Sleeping Bunny by Oborochann

Sleeping Bunny wouldn’t be out of place in any child’s bedroom as even looking at it instills calm to the most hyperactive of bodies. What I appreciate most about this piece is the way the moon has been rendered. The layering of transparent shapes give a unique texture to the moon.

Rainbows and Stars by PixelledandDead

PixelledandDead‘s use of bold and bright colors are a common theme in her work and Rainbows and Stars is no exception, in fact probably one of her most bold pieces. What young girl doesn’t love horses? Especially one as flamboyant as this! I love her use of blurs in this piece which only exaggerates the wonderful dreamy atmosphere.

Interstellar Friends by Shiropanda

Although darker in saturation than the piece before, Interstellar Friends is still just as bold and varied in color. This is a prime example of a charming character design not requiring the bright primary color palette to enforce a children’s theme. You have to admire the use of gradients in this piece, it’s a unique piece!

My Emo Puppy by Zzanthia

So maybe there is a slight adult theme within this illustration, however the overall composition and use of colors would appeal to children. The nature of the characters and the way it’s been rendered reminds me of Pixar movies, which typically contain some humor which would appeal to parents. Zzanthia‘s style is always inspiring, using feathering and gradients she creates soft and vibrant vector illustrations.

Conclusion

I hope today’s feature article has inspired you to create a piece that would be perfect for children. Sometimes remembering what you enjoyed as a child and putting stylus to tablet can create illustrations all generations can appreciate and make people smile.

Have you created an illustration children would love? Do you know any pieces that remind you of your childhood? Show us, we want to see!

Vectortuts+

Catwoman #53 Adam Hughes

For our first feature we take a trip to the DC Universe to check out this stunning Cat Woman cover. Artist Adam Hughes used an incredible angle mixed with some great color
combination. The neon blue colors from the skyscrapers perfectly set the tone for this cover.

Detective Comics #626 Michael Golden

Another breathtaking angle is used for this Batman comic cover. Just the cityscape in the background mixed with the thought of The Batman leaping through the city of Gotham makes for an amazing cover. The illustration and art design used for this cover is top notch and therefore deserves to be on this list.

Watchmen #11 Dave Gibbons

Simplicity speaks volumes in this case. As one of the most iconic graphic novels ever published, The Watchmen has been praised for its amazing story as well as art direction. These 3 covers feature different scenes throughout the book which are pivotal moments in the story. Each has its own meaning and its more symbolic than anything, 3 amazing covers from an
influential comic.

Batman #1 Bob Kane

The debut of Batman is another iconic cover, in this very first issue we are
introduced to a very popular color scheme that was constantly used. On top of that we are given some in-action shots of the protagonist and his sidekick. No reason why this shouldn’t be featured, this influenced many covers that came after it.

The Walking Dead #48 Charlie Adlard

This symbolic and ominous cover really portrays the comics’ contents perfectly. A single character in a graveyard surrounded by nothing but darkness and despair. The artist took the premise of the comic of a zombie wasteland and turned it into a visually stimulating cover.

Astonishing X-Men #2 John Cassady

Most of us who aren’t familiar with the specific story this cover is trying to tell can still appreciate the wonderment of the incredible design for this comic. The single blue tone that envelopes the whole cover sets a very specific mood which is then added to by the characters. There is a whole other level of symbolism in this comic when you look at the positions of the characters and the beams of light breaking through the hands of the female character.

Batman #648 Jock

Angles seem to really work out when you are dealing with characters that effortlessly fly through the air. The specific way that this artist is trying to show Batman’s course of action is very interesting. On top of that we usually don’t see Batman while its bright out, which adds another level of awesome to this cover. The painting looks realistic enough to mimic an actual photograph, which is another great element to an awesome cover.

Y The Last Man #14 J.G. Jones

This is the first of a few Y The Last Man comics featured for their amazing art direction. A cover like this can tell the viewer a whole story itself without even opening the comic up first. The whole position of the featured character mixed with the visuals going on over his body make for a classic cover.

Catwoman #55 Adam Hughes

Without even heavily featuring the main character Cat Woman this cover simply takes over the viewer with the beautiful neon lighting and dark cityscape. The expression of the woman on the cover also paints its own story that leaves viewers anxious to know what this whole scene is about.

X-Men #44. Andy Kubert

This is another brilliant cover that features incredible design and detail while putting on some symbolism for the viewer. The sheer
destructive force seen in this cover by Cyclops even seems to disrupt the X-Men logo which is seen to be all crooked and disassembled. A lot of emotion is felt when looking at this cover making it one of the best ones featured in our list.

Meathaus S.O.S. Tomer Hanuka

This is not a traditional comic cover with characters that are easily recognizable but we don’t really care. This comic features an incredible illustration, which has a top half that features an almost whimsical childlike scene and then drops down to a dead body in between all of that. The simple painting style this artist took really brings out the purpose of the story this comic is telling.

The Amazing Spider-Man #633 Chris Bachalo

We don’t usually see covers with the main hero’s being crushed to death, but that is why we picked this one. It takes a much different approach in showing us what this comic is mainly about. The painting is flawless and instantly captivates the viewer with its dark presence.

Spider Girl #20 Ron Frenz

We are used to seeing Spider Man in his futuristic dark costume but this cover takes a little different approach. The artist figured not to include any cityscapes or soaring angles to enhance the scene that is to be set with a cover. All that we see is the daughter of Spiderman in the future wearing one of his many iconic costumes, enough said.

Y: The Last Man #60 Massimo Carnevale

Readers of this comic can instantly understand all of the messages this artist is trying to convey with the final issue of this graphic novel. But for those who are just appreciating the art there is still a lot to appreciate about this incredible cover. The artist painted this flawlessly, the gritty scenery and the rays of light that converge with the man in the straight jacket to form the letter “Y”. There is so much more here to look at in wonder,
truly a great cover.

Wolverine: Flies To A Spider Tim Bradstreet

The irony of having a huge light display of the words peace mixed in with a blood spatter and
Wolverine of all people in the center makes for another stunning comic display. The painting style used here almost looks like a photograph, but then elements are added like the grit of the background to make this a lot darker to fit into the theme of the comic. Great art direction taken on this one.

Thing #5 Andrea Di Vito

The colors of this dark damp city really bring out the focal point of this comic. The Thing, standing amongst the citizens of this poor looking setting. There is obviously a story to this that without reading we
wouldn’t know, but we can always look at and enjoy the stunning imagery and detail of this painting.

Black Panther #9 Trevor Hairsine

Another cover where we see the main character in a scene of peril and hopelessness. The Black Panther being attacked by Dr. Doom, the artist decided to go with a simple cover that conveys a lot of emotion which we can see in the eyes of Dr. Doom and the position of the Black
Panther.

Sweets #2 Kody Chamberlain

I wasn’t really sure what this comic was about when I saw it but that didn’t really matter to me when I added it to this list. The art direction is fantastic and once again we see a full shot of
what’s going on in this comic from an unusual angle. The coloring and gritty textured painting make this crime story almost come to life.

Popgun, Vol. 4 Ben Templesmith

The artist who created this unique cover used a fantastic painting style to illustrate this futuristic comic. There is no sense of realism here, it looks like a traditional painting but with very cool visuals. The digital dragon
tattoo is one of the coolest things I’ve seen in this whole list, and the way the robot is pictured here gives it a very calming soft mood.

The Marvelous Land of Oz #3 Skottie Young

This comic was made to look something along the lines of a revolutionary poster. The basic elements of a revolution are
definitely in this comic cover, the design style is simple yet rough and textured. This
vector zed comic cover just screams Revolt, and it definitely deserves to be on this list.

Joker Lee Bermejo

The instantly noticeable grin of this villain makes for a simply gruesome comic book cover that just screams awesome. There was
absolutely no need to sully this incredibly gritty painting with any typography
describing this comic because everyone already knows what it is going to be about. This painting perfectly depicts the Joker with the rough and dirty painting style. An amazing cover with some amazing color selection that
definitely tie into what the comic is all about.

Batman #682 Alex Ross

Right after we feature the Joker its only right to bring out the Batman. This cover has an unusual color scheme but we can’t be helped but to be amazed at how this was brilliantly painted. With a flurry of classic heroes and villains meshed in the back interacting with the bright and loud neon signs and Batman logo make for a pretty perfect cover that has everything one can ever want in an illustration about the Gotham Knight.

Marvel Zombies #9 George Roussos

This series of comics definitely feature some of the coolest illustrations out there. What would we do if our favorite heroes turned into insane flesh eating zombies? Yea, a
Captain America Zombie! Although this was a semi old cover it still featured some
gruesome half dead illustrations of our favorite heroes just undead.

Amazing Spider-man 592 Paolo Rivera

The last two covers featured are definitely some of the more original ones that we have in our roundup. Marvel and the artists took
Wolverine and then meshed him with many classical artists. Dali’s famous surrealism is up for display here with a little twist from the adamantium man. Anyone who loves art can appreciate the quality of this comic cover.

Uncanny X-Men 508 Laura Martin

Lastly the artist that created this cover decided to mimic the painting style Van Gogh while still keeping it badass as
Wolverine always has. Who doesn’t love that he has a person’s ear on his claws, this cover is just pure
genius on so many levels. Bravo to those at Marvel and the artist’s who came up with this idea. There are a lot more of these types of comic covers so follow the link to see the rest.

Psdtuts+

This tutorial will outline how to shoot a basic product shot. The emphasis will be on background, lighting, and the positioning of the product itself. The subject chosen to work with is simple – a shoe – it offers a great example to highlight the basics of lighting and shooting an isolated product photo.

Step 1: Gather Your Equipment

Table

Anything will work. You can use two sawhorses and a damaged door or your kitchen table. Most product shots are outlined in Photoshop (called “white seamless” shots) and the background is eliminated anyway (as you’ll see in some of the photos below, It doesn’t matter what is in the surrounding area!)

White Background

I’m going to use a large 4′ x 8′ foam board for my background. You can make anything work; a bed sheet, picture frame matting, two white cards, or anything flexible.

Stands

I am going to use four Century stands and one background stand. One Century stand has an extension arm on it and the background stand has an extension arm on it. Whatever stands you have should be fine.

Flashes

Any flash system with three heads will do. I am using Alien Bees (800 and 1600 heads).

Tripod

Make sure your tripod is sturdy enough to hold the camera at any level or angle. Don’t skimp here. I don’t use a level for most product shots so don’t worry if your tripod doesn’t have one.

Clamps

You will need at least 5 strong clamps with protective rubber covers. If all you have are the cheap plastic ones, you should wrap the ends with duct tape so they grip better.

Lens

The lens you use really depends on how big your product is and how close/far away you are to it. For this, I am using a 24-85 and will be shooting at f11 – approximately 4 feet from the shoe.

Camera

I shoot with a Nikon D-300. I take it off of the ‘auto’ setting and use ‘manual’ only. My focus is set to AF/AE button (not the shutter release button). This keeps the camera from re-focusing each time it takes a photo. Since each camera is different, I encourage you to read the section in your manual titled “Auto-Focus”. My aperture is set to f11, the shutter speed is 125th/sec and ISO is set to 200. I have my camera set to a custom white balance, but since that is a matter of preference, you can set it to “auto white balance” or a “flash white balance”…

The more stable you build your set and all that goes with it, the fewer problems you will have doing any shot.

Step 2: Preparing the Background

Get the background stand with the extension arm and position it on the rear side of your table. Swing the extension arm into a 90 degree angle and tighten so that the arm can support the background.

I took my 4′ X 8′ card, folded it in half from top to bottom (making a 4′ X 4′ surface – but you can use 2 cards or fabric). I now take one section of the card and lay it flat on the table and clamp securely to the table (this is your horizontal surface).

Unfold the card so that it now becomes your background and clamp it to the extension arm on the stand we positioned behind the table.

The horizontal surface and the background need to be completely flat and smooth with no wrinkles or creases so that the lighting will cast evenly. If you have sand bags, place those on the feet of the stand to prevent the stand from moving.

Step 3: Positioning the Product

Get one Century stand and an extension arm. Position the extension into a 90 degree angle and tighten. Place the stand left or right of the table so the extension arm is over the center of the background.

To hang the shoe, use a piece of fishing string (cut long enough so that it is twice as long as the distance from the table top to a height of one foot above the arm), and some duct tape.

Then get a piece of wire (I used a coat hanger and cut it to the same width as the inside of the shoe)

Next, find the center of your string and wrap a small piece of duct tape around it.

Tie the string into a knot around the tape so the tape will not slip out of place on the string.

Now tape the wire to the knot of tape on the string in the center so that the wire and the string are coming out both sides of the duck tape equally.

This is the finished ‘rig’ that will suspend the shoe.

Get the shoe and clean it well. Securely fasten the rig into the bottom heel of the shoe so that the ends of the rig have a good grip on the inside walls of the shoe.

Gather the strings coming off the rig and lift the heel of the shoe off the table to test if the rig has a good grip. It is important that it is secure, so do whatever it takes (bend the rig, push it around to get it in place).

Make sure the shoe looks good by using paper to fill the toe and keep the tongue up and in place. Tuck the shoe strings into the shoe to give it a clean look.

Now place it on the table just below the extension arm.

Take one end of the string and wrap it over the extension arm which will pull the heel of the shoe off the table to the desired height. I suspend it about 3 inches off of the table to help light the bottom of the shoe – important when shooting a product of any type.

Now while holding the string to the arm, wrap the string 3 or 4 times around the arm and clamp it securely to the extension arm.

Now that the shoe is hanging unevenly, get the other end of the string and wrap it over the arm so that the heel of the shoe is level, Now clamp the second string to the extension arm and place sand bags on that stand.

Step 4: Lighting the Shot

Basic product shots require 3 lights (top/overhead light, and front/side umbrellas).

The Top Light

Take one head and mount it on a boom arm to the Century stand. To diffuse the light, I am using two sheets of wax paper cut long enough so that I can tape them loosely over the reflector (I do this rather than use a soft box because I only have an 8-foot ceiling here).

Position the light over the top of the shoe and place a sand bag on the stand.

To set your top light exposure, place the light meter over the shoe, test your flash and keep adjusting until the meter reads f11. Once it is set, turn the top light off.

The Umbrellas

Get two century stands and dress each of them with a head, reflector and umbrella. Place the umbrella lights at a 45-degree angle to the shoe and towards the front of the table approximately 3-5 feet from the shoe.

Turn power on to both of the umbrellas. Again, place the meter over the shoe and adjust the power so that both heads are equal and the combined exposure is around f/11. As you can see, mine is at f/8.9 but that is close enough… the important thing is that both lights are equal!

Now turn on all of your lights.

If you don’t have a light meter, take test shots with your camera and even visually through a trial-and-error process.

Step 5: Setting the Camera

Take your camera, set your preferred white balance, set the aperture to f/11 and the shutter speed to 1/125, mount it on the tripod and place it approximately 3-5 feet from the table directly in front of the shoe. I adjusted the tripod so the camera sits just above the table height.

Fill the frame with the shoe, focus, then plug in your sync and take the photo.

Step 6: The Final Product

The final photo needs to have the background stripped to white. I do this in Photoshop with the selection tool, but I am not going into detail in this tutorial on how to do that. Here is the final shot:

The shot will always need fine tuning in some way or another:

1. If one head appears to be putting out more power than the other, adjust as necessary (you’ll know if there are shadows or one side of the shoe is darker than the other). Also make sure the umbrellas are set at the same distance.
2. If the top of the shoe is too bright, adjust that power down.
3. If you are over exposed check to be sure the ISO on the camera is the same as what was measured on the light meter.
4. If the color seems to be off, you may need to adjust your white balance.

Now that you’ve put the setup together, you can have fun, experiment, and try different products. Turn on/off and move around the different lights to see what exactly each light is doing and this will give you a basic idea of how the outcome can be adjusted.

I covered flat lighting first since this is what most e-commerce sites are using. Feel free to experiment – remember that knowledge is king and practice makes perfect, even if it is a little boring!

Phototuts+

Space

Space is described in two ways. Negative Space, which is the space around the subject, and Positive Space, which is the shape of the subject matter.

In the image below you can see that the positive space has been used to create depth and focus in the image. The hair creates further depth and cuts away into the background to add contrast between the decorative area of the face and the subtle area of the background. Through the use of the flat dark purple color, the positive space of the hair is made into a negative space.

Non Cadenza Album Cover for Sweet Content by Jared Nickerson

Line

Line is a continuous mark made by a tool such as the pencil and brush or the edge of a shape. Line can be curved, zigzag, horizontal, diagonal, vertical, dashed and dotted. Line is an element that’s more interesting than people first think. The visual impact of a line can be changed with rhythm, length and weight.

The image below has a playful appearance created with the use of repetitive curves made into a shape. The hand at the top is poised in such a way that the viewer is lead to believe the image could be unraveled like a knitted sweater.

“Line on Bike and More” (part of a series) by Jonathan Calugi

Color

Color is in every image you see. Different moods and temperatures can be conveyed with the use of color. An example would be red tones for hot and blue tones for cold. Contrasting colors are used to draw attention to areas of an image, and Monochromatic colors are used to create harmony. For more information on color theory, see Open the Door into the Science of Color Theory by Iaroslav Lazunov.

The Monochromatic grays in the image below accentuate the atmosphere of the image and add emotion to the figure. If the illustration was full color it would convey a different mood and perhaps confuse the message.

Bad Habits Never Die by Cronobreaker

Shape

Shape is a geometric or organic element that stands out from the space around it. Shapes can be used in ways such as layering or groups and can be textured, colored or outlined.

Below you will see an example of the ways shape can be used to create an image. Each element of the castle is made from geometric shapes balanced with color and repetition. The contrast between the dark background and the bright colors also creates visual interest.

The Decemberists (gig poster) by Dan Stiles

Texture

Texture is a representation of surface and medium. There are two kinds of texture – Implied Texture, which is used visually to communicate the way an object would feel, such as rough pencil to represent stone or smooth brush strokes to look like silk. Tactile Texture is the finish on a real object, such as a spiky sculpture or a smooth piece of pottery.

The image below uses different textures to emphasize the cold, scary atmosphere of a graveyard at night. The Crow is different and has a smooth texture to make it stand out as the main element of the image.

This image is available as a Vector Premium tutorial.

Night Landscape by Iaroslav Lazunov

Form

Form is the use of 3D. It can be illustrated or made as a real object. In illustrative terms, form is the use of tone and shape to make an object appear three dimensional.

By now you will have noticed that many of the design elements can be used together. In the illustration below, you will see how the artist has used highlights and shade to make the form of the object, and then used shape and texture to create the illusion of mass.

Ogrest01 by Nzinzi Fabrice

Value

Last but not least, we have Value. Value is also referred to as Tone. Value is used to show the relationship between light and dark on a surface and is used to emphasize form and depth.

The Illustration below uses value/depth to create a figure that appears to rise out of the background. Varying contrasts of the shade is used to show some elements in the foreground and others in the background. The shapes also overlap to create a visual hierarchy.

MTV + 55DSL / Touch (project) by Alex Trochut

Get Involved!

As an extension to this article I invite you to submit your own examples. Find an illustration that you admire and write down why you like it and which design element it would fall under, then leave it as a message in the comments section below.

Vectortuts+

Over the years, I have wondered why some of my illustrations are more popular to others, and exactly what makes a good illustration. There’s more than a few answers to this question, sometimes it’s the subject matter, and other times it’s promotion, but more often than not it comes down to the design.

Over the past few days I have looked at literally hundreds, if not thousands, of illustrations to see exactly what it takes to make a winning piece of work. The one factor I kept coming back to was design. The following is a list of design principles and how they can be used to enhance your illustrations.

Proximity

Proximity is the arrangement of elements that relate to each other to make a visual grouping. By placing different elements in close proximity a relationship is implied. The example below shows how the different symbols of music, food and activities, have been placed in close proximity to make a larger image. By looking at the arrangement you will see that each item works together to tell a visual story. If you placed the elements side by side the message of the illustration would be lost.

Terras Gauda Contest by L.E.GRÁFICO

Visual Hierarchy

Visual Hierarchy is achieved by creating a focal point by arranging elements so that the strongest concept is seen first and then subsequent elements are seen in order of importance. The illustration below is a good example. A pyramid shape is often employed to show hierarchy by placing the most important item at the top and implying a relationship with the elements below based on their position. The closer to the bottom the element is, the less important it becomes. The “Colonel” emblem at the top of the pyramid could be used as an image on its own, but though the use of hierarchy, the concept, and visual impact is emphasized. In fact, the image is only Suisse with the inclusion of the top element and the meaning of the illustration would be lost if you were to only show the bottom line of elements.

Highest Rank by Glenn Jones

Symmetry / Asymmetry

Symmetry and Asymmetry places elements in relation to one another to create unity and balance. The first example below shows how mirroring the image vertically brings balance and a sense of stability to the image. The geometric shapes work together and create additional elements of symmetry within the main focus point.

The second example shows how asymmetry works. The figure on the left is balanced out by the three stacked figures on the right. Although they may be different in appearance, the similar width and height of the left and right side creates a visual harmony.

Gazelle Poster by Kronk

Jolly Cream by Henriquepl

Repetition

Repetition uses repetitive elements to enhance meaning and bring visual interest to an image. The illustration of the bike wouldn’t be quite as interesting without the birds. By using the bird as a repetitive element, the bike takes on a new form and invites the viewer to ponder the meaning.

Birdcycle by Robert Lee

Unity

Unity is best described by a combination of elements that create a visual harmony. The illustration below uses unity as a way to bring a collection of elements together in a seemingly hap hazard way, but on closer inspection you will notice that it’s a pattern. The repeating elements within the design create balance and tie the items together in a visually pleasing manner.

Drinks by Konstantin Shalev

Contrast

Contrast is used to highlight a specific part of an illustration or design though the use of opposing elements, such as light and dark or large and small. In the example below the contrast is achieved by adding color to the focal point on a black and white image. The red emphasizes the face of the figure and is supported by smaller elements of a slightly darker red that moves the viewers eye around the image.

Hiddenmoves x Machine56 by Rajaya Yogaswara & Rhys Owens

Dynamics

Dynamics is used to suggest movement, flow and direction, it is also used to create emotions such as restfulness, anger or happiness. The image below has a strong focus on dynamics though the use of line and light to bring a free spirited and energetic feel to the image of a dancer. The dynamics of the illustration makes it very easy to imagine the dancer springing to life and moving across the page.

The Dance by Tony Ariawan

Emphasis

Emphasis is the use of a dominant focal point within a composition. The illustration below uses the monster set against the dark background of the cave as the main focal point, then the supporting elements of the gold and the miners are used to give the illustration meaning. Both elements support each other to create an interesting composition, with the element of emphasis helping to convey the meaning of the image in a way that’s simple to understand.

Deadly Goldmine by Andreas Krapf

Get Involved!

As an extension to this article I invite you to submit your own examples. Find an illustration that you admire and write down why you like it and which design principle it would fall under, then leave it as a message in the comments section below. Have fun!

Vectortuts+

3D: History and Methods

Though current filmmakers use fairly advanced methods and technology, the practice of creating three-dimensional illusions from flat imagery has been around for a long time. In fact, 3D photos were quite popular in the early to mid 1900s in a form known as the stereogram.

Method 1: Stereoscopy

Stereoscopic images are the oldest form of 3D photography. An inventor and scientist named Sir Charles Wheatstone created the practice of stereoscopy over 170 years ago in 1838. Wheatstone was studying the principles of binocular vision and how human eyes combine and process two separate images into a singular perception of shape and depth.

Wheatstone set out to reproduce the effect of our binocular vision with a flat image, the result was the combination of a stereogram and a stereoscope. The process that he used was fairly simple and continued to evolve slightly over the next 100 years.

Basically, a stereogram utilizes two separate but very similar images. The goal was to try to mimic what your eyes see by taking a photograph of the same scene from two slightly different perspectives. The images were placed right next to each other, usually on a card like the one below.

The card is then inserted into a device called a “stereoscope.” This optical mechanism uses lenses and/or mirrors to project the two images towards your eyes via a goggle-like setup. The resulting combination of the two perspectives makes some parts of the image appear to stick out further than others. It’s an impressive illusion that has always fascinated me. You can still find stereoscopes like the one below at antique shops or possibly even your grandparent’s attic!

Today, stereograms are typically viewed without anything other than your own two eyes, which is a fairly easy task once you get the hang of it but seemingly impossible until you train your eyes correctly. The trick is to learn to focus your eyes as if you’re staring at something in the distance even though you’re really looking at an image that is close to your face (it’s the reverse of crossing your eyes, which brings the focus closer to your nose).

You can use this method on the stereogram of the workers shown above and you’ll suddenly perceive an impressive amount of depth. Try staring at a wall in the distance above your monitor and then moving your head down without refocusing so that your eyes are looking at the screen. Alternatively, stick your nose up close to the screen and back away, keeping your focus fixed, until the 3D illusion takes effect (if your eyes start to hurt, take a break).

You also use this technique when viewing of autostereograms, which were popular in the 1990′s under the brand name “Magic Eye”. Here’s one from Flickr user ClintJCL.

These images use variations in a repetitive pattern to hide shapes within the image. Only when viewed properly can the secret be revealed. Can you see what’s hidden in the image above? If not, here’s a modified version to try out. This time I’ve placed two large circles on the bottom, try to focus your eyes in such a way that you see three circles instead of two (if you see four, you’re on the right track, keep going).

Later on we’ll learn a super easy way to make your own stereoscopic 3D photos, but for now, let’s take a look at a second method for creating 3D images.

Method 2: Anaglyph 3D

Anaglyph 3D is a similar but modified way to view 3D images developed by Wilhelm Rollmann in 1853, a couple of decades after Wheatstone created stereoscopy.

As with the previous stereograms, an anaglyph image utilizes two photographs taken from slightly different angles. However, this time the two images are stacked on top of each other and viewed through special colored lenses, typically one red and one blue.

This will make more sense as we make our own later, but for now you should know that the two images are filtered in a special way as they are stacked on top of each other. When combined with the colored lenses of your typical cheap pair of 3D glasses, which filter out certain colors, each of your eyes perceives a different perspective. The result is an illusion of depth very similar to that seen on the stereograms above.

If, like me, you’re enough of a nerd that you just happen to have a pair of 3D glasses lying around, check out the image below with them on. As you can see, a really impressive amount of depth can be perceived instantly with no frustrating techniques to learn.

Method 3: Wiggle Stereoscopy

The third method of creating a 3D illusion from a flat photograph is commonly referred to by several different names: wiggle 3D, wiggle stereoscopy, wigglegram, etc. All of these are different names for the same technique.

I can’t quite decide if wiggle stereoscopy is the most or least impressive of the three techniques. The truth is, it has both pros and cons. The positive side is that you don’t need any special glasses, lenses or eye tricks to see it, just a computer or television screen capable of playing an animation. The downside is that the effect is jumpy and a bit disconcerting, and the results aren’t as solid as the other two methods.

Again we start with the same resources: two photos from slightly different angles. As with the anaglyph, wiggle images are stacked on top of each other, but this time the image simply flashes back and forth from one photo to the next. Since you’re seeing multiple perspectives in such a short amount of time, you get a strong sense of the depth of the scene.

Here’s a nice example from Wikimedia commons created with a couple of NASA images.

Make Your Own!

Now that we know all about the three common types of 3D illusions, let’s make our own shall we? Fortunately, with a little time and patience, you can pretty easily create all three types of 3D photos using only a camera and Photoshop!

Taking the Photos

No matter which method you want to attempt, the technique for creating the initial photographs is the same. All you have to do is take two pictures and you’re done.

For my setup, I didn’t use a fancy photo studio or any expensive specialty equipment, just a tripod, my dining room table and a fairly random assortment of objects that I could use to show depth. Notice that all of my light is natural and comes in from the windows surrounding the scene.

The reason I used a tripod is that it makes it much easier to stay consistent between the two images. You can do this by hand, but moving the camera horizontally without accidentally moving it vertically is really hard.

From here, set your camera on the tripod, meter the scene and focus. It’s often a good idea to use a fairly deep depth-of-field (close your aperture down to around f/10 or higher). Remember that you’re simulating depth and the result tends to look a little cleaner if all or most if the image is focus. This is only a general rule though, if you can produce a great-looking result with a shallow depth of field, go for it! As you’ll see, I set my camera to f/10 so my background is still a little on the blurry side but no where near as much as where I typically shoot around f/3.0. You’ll definitely want to experiment with this a little to discover what type of results you prefer.

Once your settings are all ready to go, snap your first photo. Next, slowly slide your tripod to the right, moving the camera only a few inches. The goal here is to simulate your eyes so what I did was shoot the first photo while looking through the viewfinder with my left eye, then slid the tripod far enough that the viewfinder was in front of my right eye and shot another photo. Here’s a cropped version of one of the resulting images:

Keep in mind that my scene was shot indoors with a 50mm lens, so the objects were fairly close to me. If you’re shooting an outdoor landscape, the gap between photos can be significantly larger, some photographers report moving up to several feet! In these situations, it’s best to give yourself several options when producing the final image. To do this, take your first image, move over a little, take another, move over a little more, take a third image and repeat this process until you have a decent range to choose from once you’re back at your computer.

Now that we have the two photos that we need for the project, let’s take them into Photoshop where all the magic begins.

Method 1: Stereoscopy

Creating a basic stereogram is by far the easiest of the three methods. Nearly all of the work is done by your camera and all you need to do is throw the images together.

Once you import the images, open them both up in Photoshop. Now simply create a new document that is equal to the height of one of the images and the width of both of the images combined. Toss both photos into this new document and align them side by side. Make sure that the leftmost photo is on the left side of the canvas and the rightmost photo is on the right side of the canvas, otherwise you’ll get weird results.

With that, you’re all done with your first 3D photo! It’s not much use if you can’t make your eyes see it but with time and practice you should be able to learn, even it it takes a few hours on MagicEye.com to master it.

For those that have mastered the technique, here’s my finished version. I was extremely pleased with the result. With very little effort I was able to produce a significant amount of illusory depth! If you find it difficult to fix your focus far enough, try backing away from your monitor. The more distance you put between yourself and the two images, the less effort you’ll have to put forth to blend them together.

Method 2: Anaglyph Image

There are actually several techniques for creating anaglyph images in Photoshop. You can use Curves adjustments, copy and paste channels, and a whole bunch of other really involved methods that I think are far too lengthy when a great result can be achieved with almost no effort.

To begin, open both of your images in Photoshop and drag them on top of each other into the same canvas. Put your leftmost photo on the bottom and your rightmost photo on the top. At this point your layer setup should look like the one below and only your rightmost photo should be visible.

It can be a little tricky to line the images up. I usually change the blending mode of the top layer temporarily to Multiply so that it bleeds through and I can visually line up the edges (it might be easier to just perform the alignment as the last step). Since the two images are from different perspectives, not everything will line up so you’ll want to find a focal point near the center. When you move the top image into place, make sure to crop the image so that there aren’t any areas of the bottom layer showing through that aren’t being covered by the top layer.

When everything is nice and lined up the way you want, it’s time to make the magic happen. All you have to do is double-click the top layer to bring up the Layer Style dialog. From here, simply uncheck the red channel check box below to disable the red channel for this layer.

With that one small step, your images should be perfectly filtered so that when you view them through your red/blue 3D glasses, a 3D illusion bursts forth! The final effect doesn’t feel as clean as with the previous method, but it’s a lot easier to show off to other people as long as you have the proper glasses.

Method 3: Wiggle Stereoscopy

You can produce the last method using just about any tool with which you’re comfortable building brief animations. The easiest method that comes to mind is to use Photoshop’s animation panel to export an animated GIF.

To accomplish this, stack the two images using the exact steps that we used in the previous method, sans the channel selection step at the end. Now bring up the Animation Palette, found under the Window menu. The default animation style in the latest versions of Photoshop is an AfterEffects-style timeline. If you’re comfortable using this, go for it, but if you’re new to animation try converting it to a frame-based animation. The “Convert to Frame Animation” option can be found under the dropdown menu on the right side of the animation palette.

Once you’re in frame mode, your timeline should look like the one seen in the image below. Turn off your top layer so that only the leftmost image is visible, then click the “Duplicate Selected Frames” button as indicated by the arrow in the image below.

Now, with your second frame selected, turn on your topmost layer. This should make it so that frame one shows your bottom layer and frame two shows your top layer. Make sure the time between frames (shown at the bottom of each frame) is set to 0.1 seconds and the loop (bottom left) is set to forever. Then hit the play button to preview your animation.

From here you simply go to File>Save for Web & Devices and save the image out as a .GIF. To see the .GIF in action, either embed it into a web page or simply drag it straight to your browser.

3D wiggle images can be a little dizzying. They’re fun for a few seconds but you quickly reach a point where you just want the jiggling to stop! I think the lesson I learned building this image is that the simpler the subject the better for wiggling. My image was a lot more complex than the sun shown above and was therefore more likely to induce a feeling of motion sickness after prolonged viewing.

Now that you know how to make your own 3D images the hard way, let’s look at a few products that simplify the process.

3D Cameras

Are you interested in taking 3D photos but don’t want to mess with all that shooting and moving stuff? If you’ve got the budget, there are a few cameras currently on the market that do all the work for you. All you do is point and shoot just like you would with a regular camera.

Fujifilm FinePix REAL 3D W3: 6.59

This little camera is quite impressive. It’s super thin and compact just like your basic consumer-grade digital camera. However, as you can see from the image above, it has not one but two lenses. 3D cameras use this setup to accomplish taking both the left and right perspective photographs with the click of a single button.

The FinePix REAL 3D W3 is a 10MP camera with a 3.0x optical zoom and an ISO sensitivity of up to 1600. It is capable of taking both photos and full HD video in 2D or 3D. Here’s the kicker, the display actually shows you the resulting image or video in lenticular 3D, no glasses needed! When you’re at your kid’s soccer game and the other dads see your amazing 3D display, you’ll instantly be a celebrity.

ViviCam T135: 9.95.

In many ways, the Vivicam T135 outperforms the Fujifilm camera we just saw. This camera has 12.1MP, a 5x digital zoom, both photo and HD movie modes and can shoot 2D and 3D. At just under 0, it’s also much cheaper than the previous camera we saw.

The downside is that I can’t find this little guy for sale anywhere! Vivitar products are usually sold at major retailers like Target and Wal-Mart, so keep an eye out for this and other cool Vivitar 3D cams in the near future.

Holga 120 3D Stereo Camera: .99

Since 3D photography is more of a niche market at the moment, you probably don’t want to run out and spend hundreds of dollars on one of these products. One of the cheaper solutions coming in at just under a hundred bucks is Holga’s 120 3D Stereo Camera.

Unlike the last two cameras we saw, this one is pure analog, meaning it uses 120 slide film (that’s right, film!). It’s also comprised primarily of plastic so it’s not exactly a professional-grade camera. However, it is tons of fun and creates perfect side-by-side stereogram images like those we created in Photoshop using method one above.

Have You Gone 3D?

As the technology currently stands, I don’t see 3D photography as much more than a gimmick. I’m sure many of you are opposed to 3D’s sudden takeover of the film industry and probably have no desire to see this trend continue into photography.

However, creating your own 3D images is admittedly a fun way to kill an afternoon if you’re looking for something new to do with your current camera. With two slightly different photos and minimal Photoshop skills you can create some amazing results.

Leave a comment below and let us know if you’ve ever tried to create 3D images before. What techniques do you use and how do your results compare to those seen above? Also be sure to leave a link to any 3D photos you have online!

Phototuts+

Gestural Sketches

One incredibly useful function of the Variable Width Stroke Tool is giving character to your lines. By varying the width of the line you add flair, movement, strength, personality and lots of other adjectives that don’t visually describe a line. Basically, you take something flat and boring and give it life! Let’s just take a look at a few examples of how the Variable Width Stroke Tool adds a gestural character to an otherwise boring line:

Step 1

OK, now that I’ve convinced you how great the tool is, let’s look at a real-world example of how I put this tool to use. I recently had a client (let’s call her Brenda – the name has been changed to protect the innocent) that needed a logo for her blog; “Living Brenda.” The project description I got had a kind of Martha Stewart vibe. Her blog was natural, organic advice on how to live life. The client described the logo as a woman’s head with a variety of objects springing out of it – like recipes, love and advice on healthy living.

I knew immediately that I could draw a woman’s head with stuff exploding out of it – that’s no problem, but I also knew that the style of the drawing was critical. It needed to feel loose and gestural. The Variable Width Stroke Tool was the perfect way to achieve the look I was after. OK, so let’s take a look at how I created this logo.

The whole thing starts with my pencil sketch. Now unfortunately, I can’t give an entire lesson on drawing here, but I’ll show you the steps I took to create this pencil sketch.

Step 2

Whenever I draw a head it always starts as an oval. Then I try to imagine the oval in 3D – like an egg. On that oval (egg) I sketch a vertical and horizontal line. You should be able to imagine how those lines are wrapping around the shape of the object.

The vertical line will be used as a center line – as if you drew a line down the center of your face. So, naturally, the nose would land right on top of this center line. The horizontal line represents where the eyes will go. Even in this rudimentary state I can already see the face. The more you practice this, the easier you’ll see it.

Step 3

The obvious next step is to draw on the eyes and nose. It’s important to stay mentally in that 3D space. I also roughed in where the top of her head would be popping off. I don’t know if I’ll show this so clearly in the final logo, but it’s a good reference to have.

Step 4

Next, I roughed in where I saw the hair wrapping around her head. I thought Brenda’s hair style would work for a loose gestural style mark. Her hair had a loose flowing quality about it.

Step 5

Finally, I’ve added a few objects to represent the things that Brenda will we writing about on her blog. The client gave us a list to work off of. And there you go, that’s the sketch I will use to create my gestural logo.

Step 6

The next step is to scan our pencil sketch into the computer and get it into Illustrator. Now, once in Illustrator I like to set my logo file up by creating three layers. The pencil sketch will go onto the bottom layer. I lock that layer so my art doesn’t move and so I don’t accidentally grab it while I’m working on the design.

On the second layer I will eventually put my solid blocks of color in. I want to do that last, so for now I’ll leave my second layer blank.

The top layer is where I’m going to put my gestural lines. Now, I know I’m going to use my Variable Width Stroke Tool to give these lines their character – so I just need to create a center lines, not shapes. Here are the lines I made in illustrator over my pencil sketch.

Step 7

Once I have those lines drawn, I grab my Variable Width Stroke Tool and put it to good use. Once again, the basics on this tool are taught in part one of this tutorial series. When you’re adding character to your lines, make sure to emphasize the more important lines. For instance, the line that makes up her jaw bone is much thicker. It represents the bottom of her head, so it’s thickness gives her head stability. Also, it is located where there would naturally be a shadow, so the thickness of the line helps create that shadow.

Step 8

Here is a little detail shot for you. What a HUGE difference the Variable Width Stroke Tool makes.

Step 9

Next we need to drop back down a layer and add in our solid blocks of color. There is nothing special about this step. I just used my normal Pen Tool to draw these shapes. I kept the colors natural and light so they didn’t overpower my gestural lines, which I want to pop. You can see how much these basic shapes help define the face and hair.

Step 10

Now I need to add in the various subjects that Brenda is writing about in her blog. In this case, I ignored my pencil sketch a little.

Step 11

Last but not least, I need to add in the shapes behind each of the subject objects. This was a good opportunity to work in some color. But even with these more colorful items, I kept the saturation of the colors subdued. I wanted this mark to feel a bit more natural.

Step 12

And as a very last step I’ve added a logotype to go along with this mark. I made sure to pull colors from the mark for use in the logotype so the whole thing worked together. For a font I’ve selected Century Gothic. I thought its sharp geometric style was a good foil to the looseness of the mark. I thought these contrasting styles would work together well in a website design.

Step 13

Now, I know what you’re thinking, “But BILL! I’m not an amazing and talented illustrator like yourself. What if I can’t draw?” No problem! Making these types of gestural marks are very easy to create using photos instead of drawing. Using photos does limit you a little, but it’s a great alternative approach if you don’t have drawing skills. Let me run you through this process real quick without any commentary.

Digital Inking

Alright, now for our very last part in this tutorial – digital inking. If you are an illustrator, whether that be a comic book style illustrator, cartoony illustrator, tattoo artist or graffiti artist the Variable Width Stroke Tool is a great asset for inking your pencil sketches.

Step 1

Let me quickly show you how you can use this tool to do your digital inking. Now, once again, this process begins with a pencil drawing. And again, I am unfortunately not going to be able to give you a drawing lesson in this tutorial. That’s for another day. So, let’s take a look at the pencil sketch I’m going to ink:

Step 2

This is a drawing I did for fun in my spare time. The concept was a kind of super hero with a samurai motif. Now, this is certainly too large to ink fully in this tutorial, so let me zoom in on his face, and then we can ink a part of that.

Step 3

There we go, much better. Now the first step in inking is just creating the center lines using our Pen Tool. Now, again, these are going to be our skinny, boring, flat lines. Here is the first set of lines I created:

Step 4

I am going to do this in a bunch of little parts so you can see the progress. Once we’ve created these simple lines, it’s time to add the character (using our Variable Width Stroke Tool of course).

Step 5

Wow! What a difference. Now, inking like this is a little bit more intensive of a workflow than using a brush or crow quill pen, but the control and crispness you gain is amazing. I don’t know if this inking style will take over the comic book industry because it’s a bit slower, but for one-off splash pages and design projects it’s certainly worth trying.

Now you’ll notice that some of the thick ends of the lines end kind of funny. In cases where one line doesn’t match up nicely with another line, we need to do a little manual correction. First, we need to select, then Object > Expand Appearance the offending line. This will convert it into a shape. Then we can use the Pathfinder Tool to subtract and add the bits of shape that we need. Here is the next step, I will make my changes and additions in green so you can see what I fixed and what I added.

Step 6

You’ll also notice in green I have added a few standard vector shapes (like the eye brows). Hey, I didn’t say the Variable Width Stroke Tool would be the ONLY tool you use to digitally ink this pencil sketch.

Step 7

This is more of the same. I’ve taken my standard lines and given them that beautiful character using the Variable Width Stroke Tool. Then in green I’ve added some more lines.

Step 8

So, that’s about as far as I’ll take the digital inking portion of this tutorial. You can hopefully see the process I’m following. I’m sure you’re dying to see the final art, so I’ll throw that in here just for the fun of it. Believe it or not, I actually colored this entire piece of art in Illustrator! Believe it! If you’d like to see how I did that, I have a video tutorial coming soon to Go Media’s Arsenal.

Conclusion

Well, that’s it folks. Hopefully, another useful tutorial. I’ve certainly found a ton of uses for Illustrator’s new Variable Width Stroke Tool and hopefully now you can also see its many uses.

Where to Find GoMedia

This tutorial was written by William A. Beachy, partner at Go Media Inc. Go Media is a creative agency based in Cleveland, Ohio. Besides writing tutorials for the GoMediaZine and Vectortuts+, we also work for clients and sell stock artwork and design files on the Arsenal.

• Portfolio Site: Gomedia.us
• Blog: GoMediaZine
• Resources: Gomedia Arsenal

Vectortuts+

A galaxy is a massive collection of stars, stellar remains, gas, dust, and planets. Galaxies can contain as few as 10 million stars, or as many as 100 trillion. Astronomers believe that there are about 170 billion galaxies in our universe, each varying in shape from spiral, elliptical, to irregular. In today’s tutorial, we will demonstrate how to create a spiral galaxy of your own and will depict a fleet of ships making its way through the universe to find a new home.

Today’s tutorial is part of a 4-part series depicting the journey of the inhabitance of a dying world that must travel into the unknown to find a new world to call home. In this series, we will explore the cosmos from the perspective of this fictional civilization making their way through the universe and will demonstrate the techniques that you can use in Photoshop to depict your own cosmic scenery. In addition to written content, this tutorial also includes about 90 minutes of video instruction to help you along the way. So what are you waiting for? Let’s get started!

Step 1 – The Galaxy

We will begin with the main feature of this image and the most important. This is a very long step because of all the settings and clicks you have to go through, but its not complicated its just a matter of following it and you will see soon enough how we will progress through it and how each steps provides us with valuable content. Let’s begin by creating a document where we will be generating the base for the galaxy not the main image document; so go ahead and create a new document with the settings as shown here.

Now select black and fill in your canvas.

OK next create a new layer on top and go to the clouds filter and generate some.

Then you will go to difference clouds and generate some on the same layer twice.

This is what you should get after these steps.

OK now let’s create another layer and fill it up with black.

This time we will be using the fibers filter with the settings shown below.

Now just setup this new layer to overlay so it mixes nicely with the clouds we did before.

Next we will reduce the opacity of the cloud layer as shown to make the two blend even further, and then just flatten all the layers.

Now we will create a new layer, drag it to the bottom and fill it up with black.

OK perfect, now we will have to define a big circular selection with a feather of about 50px over our texture.

Then you can either copy and paste it to a new layer or inverse it and delete what its outside to end up with a big soft circle of the texture we created.

OK next up to give some twist and form to this we will apply the warp filter a couple of times with the twist option as shown below.

As soon as you select the twist option you will get its options in the top bar so let’s type 100 for the bend setting.

This is what you will see in your Photoshop screen, so hit apply and repeat the process once more.

Once both warp distortions have been applied let’s use yet another filter; this time the twirl and use the settings shown below.

OK great now let’s duplicate the layer so we can add some more detail.

And in this new layer let’s apply a spatter filter with the settings shown here.

Here is what you will get from this last filter.

Now set this new effect to screen and reduce the opacity a bit to about 61%

Very good now make a duplicate of this last layer and apply some levels to it as shown below, so we get nice intensified highlights.

Perfect we are done with this filter bonanza, now select all the layers excluding the black background and merge them together.

OK now we are ready to create the document for the image we will be working on, so select new file and create it with the settings below.

Now fill the canvas with black.

Next we will copy and paste our galaxy work on to this new document and in a new layer, then we will use the distort command so it fits inside the top and bottom boundaries of the new document as shown below.

Before going any further let’s duplicate the layer and hide one of them by clicking on the visibility icon.

Then let’s distort the layer further as shown here so we get the appearance of perspective and also to adjust its size to what we want.

Once we have the image of the galaxy base setup let’s create on top of it a new gradient layer.

Let’s choose for the gradient a standard white to transparent gradient, and for the first color to the left let’s double click on it and select a blue color as shown below.

Now let’s setup the gradient to radial with an angle as shown here and while this dialog its open drag the center of the gradient to the center of the galaxy base.

Then set the scale to 127 and click OK. And now set this layer mode to overlay.

And now let’s distort the gradient layer itself to adjust its shape to our galaxy, so rasterize the layer and distort it as shown below.

Next just create a clipping mask so the gradient affects only the galaxy base and then merge the two layers together.

Now create a layer mask for the resulting layer.

And to proceed we will select a soft brush as shown below.

Then we will mask off sections of the galaxy as shown here to make it more dynamic and less disk like.

Now before we move on we will duplicate the galaxy layer once we are happy with the mask and hide the original for safe keeping.

Then on the visible galaxy layer right click on the mask thumbnail and select apply layer mask.

Now its time to start making this galaxy our own and unique at the same time so let’s go to our smudge tool and set the brush size as shown below.

We will start smudging some new flow and features to it as shown here.

Then let’s reduce the size of the brush quite a bit and start working on more tiny detail all around the galaxy introducing new features and detail, but at the same time following the established flow.

Here you can see what we are after by smudging our way through it, yet this is quite personal and its up to you how far we want to go here.

Next up let’s make a copy of our “safe” hidden layer, and once again apply the layer mask.

Now let’s bring this new layer copy all the way to the top.

Then apply a Gaussian blur filter to this layer with the settings shown here so we get the results below.

Also set this top layer to linear dodge.

And let’s adjust the levels directly for this layer as shown here

Here you can see the results of the process we have followed, looking quite nicely so far we have a detailed good looking galaxy base to work on.

Step 2 – Stars and Glow

Now all galaxies are made up mostly of stars, of course every star has planets, yet what we visually see is the stars, hundreds of billions of stars. So to try and illustrate this we will need a special brush just for it that will help us paint all these stars without spending the rest of the decade making them. Let’s make a new document as shown here, and fill it with black.

Now with this brush here and with 100% white we will click some defined dots randomly spread like shown below.

Now let’s drag a selection around these and invert the image so we get black dots on a white background.

Now just define the brush preset as shown here.

Now let’s go back to our image and scroll down the brush list to find the new brush. Now let’s setup the brush palette, first enabling scattering with the settings below.

Then enable shape dynamics with the pen pressure option and in the brush tip shape section let’s adjust the settings as shown.

Now let’s reduce the size of the brush a bit and start painting some stars in a new layer as shown below, that follow the flow of our galaxy. Don’t mind the fait look they have now we will fix that in a second.

Once we have covered the galaxy let’s select the layer and duplicate it twice.

You can see here the look of the stars gets intensified, now grab all the layer copies and merge them together.

Now we will randomly erase some of our stars by using the eraser and selecting for it a brush as shown below.

Now just adjust the settings below in the brush tip shape section.

Once we are happy and made the stars randomly distributed, let’s duplicate the layer once more and merge them. My results are shown below, at this point you can erase a bit more if you like or if you see any patterns that never look good.

In this image you can see the flow we are trying to enhance and accentuate by eliminating some of the stars.

Now we will start working on the central nucleus of stars. Every galaxy has its most accumulated stars in the center so for this let’s make a new layer.

We will now increase the brush a bit to make the stars more evident, and start working on the center of the galaxy building up the nucleus. You can disable the rest of the galaxy layer so you can see more clearly what are you adding.

Once satisfied with what we have we will duplicate the layer 3 times and of course then merge them all.

Now we can move scale and distort this layer in place plus I also erased some of it shown in red below.

Next up we will use the gradient tool and select the gradient I have included below and set it up to circular.

Now let’s drag this from the center of the galaxy as shown here.

Now setup this layer mode to hard light and you can see the results below.

Now let’s distort this gradient a bit so it fits nicely in our galaxy center.

Now in a new layer let’s make another gradient, this time set the layer to linear light.

And also distort it into place.

Now if needed just soft erase any hard edges that the gradient gets.

Next just reduce this layer opacity to around 64%

OK then we will create a new layer on top and select an almost white blue color.

Select our custom star brush again and enable shape dynamics with the pen pressure setting enabled. Then paint a bunch of new stars to add to the center of the galaxy.

Now grab a soft brush of about 50px and create a layer mask on this latest layer.

Now with black selected just mask off this layer as shown here, again following the flow of our spiral galaxy.

Great, now let’s make a duplicate of our original galaxy shape we have hidden

Right click on the layer mask and select “apply layer mask” then drag it all the way up below our last layer.

And set this layer mode to hue.

Now we will alter this layer color by setting up the hue saturation as shown below.

This is the result we get so far.

We will then add a layer mask here and make sure we have our soft brush still selected and at about 50px

Now mask off this layer influence as shown just leaving some streams of this golden yellow hue. Adapt the brush size if you need.

Now let’s select a dark brown as shown here, and make our brush very small about 2 or 1 px.

And then in a new layer let’s paint some dark matter streams as shown here.

Now let’s grab the smudge tool, also with a very tiny brush as shown.

Let’s go around smudging our dark streams a bit, to eliminate the stroke look they have.

Next with our tiny brush still selected we will choose a bright yellow color as shown here and add a bit of highlights to the strokes we have been working on as shown below.

Perfect, we have reached the end of this step and these are the results we have so far.

Psdtuts+

We’ve also got an exciting giveaway as well, with 3 subscriptions to this magazine up for grabs as well as 3 t-shirts. Jump into this interview to find out more.

I went to Arizona State University, in perennially sunny Tempe, AZ. It’s intensely warm, and there aren’t a lot of magazines out there, so I headed to the sea and the action. I’m always pulling in new influences, I’d rather read than eat, and I remember sitting on lots of library floors when I was younger. I may still owe some past-due fines somewhere.

Anyway, the magazine requires searching out established writers and new ones, artists and photographers, dreamers and realists. A lot of wading through water, but it’s pretty much my dream job, so I’ll go as far out through the waves as I need to.

Oh, and it requires lots of tea drinking. Lots.

Alex Storch, Editor-in-Chief of Carson Mag

David and his company are heavily influential, both in mindset and in the design. We’re trying to live up to his standard as a designer with our content, keeping things experimental and atypical. We’ve got some names in the first issue like Neil Strauss, Mike Doughty, Les Stroud and Mary Roach that are very familiar to people, and then some newer (published) authors that are soon to be.

A view inside the C A R S O N magazine offices.

God knows. A lot. David interprets the article visually, so as the words speak to him and are filtered through his incredibly unique and talented brain, they come out on the page. Illustrations vary in style and size, and we’re not looking to box ourselves in to any one style. Each issue is themed, and so that theme is what binds all of this variety together beneath the C A R S O N banner.

C A R S O N magazine cover

Every day is a new challenge, and it’s quite a change to go from the logical mind required for negotiation, legal issues, and critical thinking about everything from distribution to office furniture — to the creative side, thinking about articles and marketing and hiring new employees. It’s nice to have a good team around you, though, and I’m fortunate for that on all sides.

Carsonmag.net website

Here’s a shot of David’s desktop, just for reference.

Carson’s desktop

You mean other than David Carson’s talents? Each issue is themed, and so everything from Fame to Power will be covered from all angles. I think the tangibility of print, the necessity of really holding the pages in your hands and looking at every nuance, in addition to the words, are really what keeps this from the iPad. I’d rather not be just another app next to Angry Birds. Those birds are addictive.

Success is that people like it as much as we do. I think at the point where it becomes something that people know, that you find in places like colette in Paris (already on our distribution list) and that people talk about… I think that’s success.

A view from the editors desk.

Giveaway – Enter to Win

We have 3 one year subscriptions to C A R S O N magazine, as well as 3 T-shirts to giveaway! The magazine really speaks for itself and the T-shirts are a collaboration with David Carson and Badcock Apparel. Be one of three randomly chosen winners to pick up both a one year subscription to C A R S O N magazine, as well as a massively cool T-shirt. We’ll have three lucky winners this week!

This contest starts today and ends Friday, March 11th at midnight Eastern Standard Time, so be sure to enter soon. We’ll update this post with the chosen winners the week after the contest concludes and Envato employees are not eligible to enter.

Jump over to the Vectortuts+ Facebook Page to Comment/Like to Enter. You’ll need to answer an intriguing question and like the Contest Facebook post to be considered.

Vectortuts+

This is especially helpful if you wish to achieve a bokeh effect in the background, and you happen to be in an indoor environment lacking light sources best for bokeh. Adding artificial bokeh can create a very interesting and visually-pleasing effect for your photos.

What Is Bokeh?

Bokeh is essentially blur. Many people take it as referring to the out-of-focus area of a photograph, which can be impacted and enhanced by sources of light and color behind the subject.

I am a huge fan of creative bokeh in photography, and because of my busy schedule, I end up having to shoot a lot of my photos at night in my house. I found out that shooting in this environment was very limiting, and that forced me to use other resources that you would not normally use in photography during the day or outside.

This quick tip will show you step-by-step the process of creating your own artificial bokeh out of Christmas lights for indoor photography. This effect is particularly useful if you are taking photos of a small inanimate objects or shots of pets and people.

What You Will Need

• The Right Lens: To obtain the highest quality bokeh you can get, it is recommended that you use a lens with a very wide aperture, such as f/1.8 or f/1.4. For this tutorial, I will be using a Nikkor 50mm f/1.8 lens. Other lenses you could use include the Nikkor 50mm f/1.4, or Canon’s 50mm f/1.8 or f/1.4. If your lens is f/2 or smaller, you can still create bokeh, but your bokeh’s size and quality will suffer.
• Christmas Lights (Any Color Will Do)
• Tripod (Optional)
• Flash + Flash Equipment (Optional)

Step 1

Set up your camera as you normally would for indoor shots, but set your camera’s aperture to the widest setting, preferably f/1.8 or f/1.4 (depending on your lens).

For this tutorial, I will be using a Nikkor 50mm f/1.8.

Step 2 (Optional)

If your indoor lighting is sufficient enough, you do not have to use flash. Try to set up your flash off your camera, aimed towards your subject. If the area in which you plan to place your lights has reflective surfaces, you could also aim your flash towards the background so that the light’s reflection off those surfaces create bokeh as well.

If you do not have a flash and your lighting is poor, you should use a tripod, and set your camera to a slower shutter speed.

For this tutorial, I will be using a Nikon SB-600 shot right of camera, diffused.

Step 3

Set up your Christmas lights. Try to spread the lights evenly across the background you plan to use, or arrange them to your taste. If you cannot find a way to prop up your lights, you can use a plain bookshelf and use binder clips to fasten the lights onto the shelves.

The Christmas lights that I used for this tutorial are automatically changing lights that go from white to blue.

Step 4

Set up your subject. I find that my bokeh turns out better if I place the subject at least four to five feet in front of the Christmas lights. The farther away you place the subject, the better.

The first image represents bokeh taken from 4-5 feet away, and the second image represents bokeh taken 1-2 feet away.

Of course, if you prefer your bokeh to be smaller, that’s up to you. It is just my personal preference.

Step 5

If you are not using a fixed lens, zoom your lens in all the way. This shot was taken using my Nikon Zoom Lens (55-200mm) at 95mm (the most I could zoom in the space I was in). Although my aperture was only set at f/4.5, I was able to achieve a better bokeh effect than if I had not zoomed in at all.

Step 6

Focus on your subject. Try to stay close to the subject, because if you are too away from it, your bokeh will suffer and appear smaller. This shot was taken with the same 50mm lens used in the final shot, but taken farther away, resulting in smaller bokeh.

Step 7

Release your camera’s shutter, and voila! You have produced a photo with artificial bokeh obtained from simple Christmas lights.

Artificial Bokeh Inspiration

Phototuts+

If you are a basketball fan you’ve probably witnessed some nail-biting games, monster dunks, upsets, and other exciting events. From a designer’s prospective basketball is a great medium for artwork. Companies like Nike, Reebok, Adidas, ESPN are always looking for artists to create new ads for their products. That is where this roundup comes in. Today, I have compiled some awesome graphics from a few different basketball sources. For instance we have an interesting collaboration between ESPN the magazine and Marvel Comics in where the artists from marvel made a superhero-themed comic for every NBA team. We also have some fan made covers for the video game NBA Elite 11. There is a lot of well designed basketball material in this post, so if you are a fan take a look and maybe you’ll get inspired to create something for your favorite player.

Lebron James & Kobe Bryant by Justin Maller

In our first design Justin Maller takes Kobe Bryant’s nickname “The Black Mamba” and brings it out visually with some cool snake images mixed with 3D components. The colors match perfectly and the concept really works with the player and the Nike Concept.

The second design featured fellow NBA All-star Lebron James in a magazine spread for client Acclaim. In this design Justin simply mixed some amazing looking 3D renders with an image of James, the renders really bring out the intensity of the image itself coupled with the strength and intensity of James as a player.

Various NBA Players for Nike by Pete Harrison

Next up we are featuring a set of designs from Pete Harrison, which were commissioned by Nike. In these designs Pete adds some accompanying graphics to in motion shots of players like Kevin Durant, David Lee, Lebron James and more. The in motion shots coupled with the explosive designs added to these posters really give off a feel equivalent to watching one of these players just land a monster dunk. The fireworks and steam seen on the Lebron design are small additions that really take the designs to another level. Overall these are some quality basketball related designs.

Kobe Bryant Digital Painting by Caio Cacau

This awesome digital painting features Kobe Bryant mid-dunk. Any well-executed design of a basketball player who is in the act of dunking or shooting will look awesome because we all know what Kobe does when he gets up in the air like that. So this is the perfect motion to freeze in time and paint. The execution of this painting is also top notch and the details like jersey wrinkling and sweat just take it up another level.

Fan Made NBA Elite 11 Covers

This next set of designs feature some fan made covers of video game NBA Elite 11, although the game never got released this fan took the original cover with NBA star Kevin Durant and
mimicked the distinct style to feature some of the other notables who could have gotten this honor. Below are just a few of the nicest ones out of the set.

ESPN The Magazine & Marvel NBA Edition

If you are a fan of the NBA and Comics as well then you are going to love this latest collaboration between ESPN the magazine and the artists at Marvel comics. For every NBA team the amazing artists at Marvel created a super hero alternative, and on top of that drew and colored it to turn it into an official comic book. Every NBA team has its own story, whether it’s injuries or your star player leaving for another team; just like in the super hero world. So the artists decided to look for similarities between the Marvel world and the NBA, then they incorporated those superheros and NBA stars into one cover. The result of that idea was 30 awesome covers, you can see a few of my favorites below and check the rest out at ESPN’s website.

Some notables include Kevin Durant of the Thunder mixed in with Thor the God of Thunder. There are too many awesome covers to pick from so check them out yourself.

Psdtuts+

Getting Started

Before the margins are defined, it is important to understand their function. Visually margins cage the content and support the structure of a layout. They provide a resting place for the readers eyes as well as supporting the tone of design. Also there are some common practical functions to consider:

• How much room is needed for holding the print, so the reader doesn’t obscure any content?
• How is the print going to be finished? ring bound, stapled etc
• Are there any safe zones set by the print house. One example would be a street poster/advertisement where the print is held in a large frame, requiring oversized margins.
• When designing training manuals and text books should room be left for notes to be made? By appreciating the affect your margins have on printing and finishing, you will instantly become your printers best friend.

OK, lets begin.

Facing Pages

When defining margins for facing-pages, the two pages should be treat as one document and appear together. This layout will typically be used for newsletters, reports, magazines etc. For this tut I will set a double page spread for a magazine.

As a starting point we will set the size of our margins in the following size order: inside (smallest), top, outside and bottom (largest).

Start by going to File > New > Document. Within the floating palette three quarters of the way down is the margin section.

I am going to start by setting the outside margin to 15mm. The Inside margin will be half the size of the outside at 7.5mm. The bottom margin will be three times the inside at 22.5mm and finally the top is half the size of the bottom margin at 11.25mm. If the ‘make all the same’ chain is activated click it once to deactivate.

As a designer you should use this technique as a starting point only. Use these methods to find the best margin set up that fits your brief requirements and functions.

Single Page

A single page layout can be a poster, flyer, sign, advert or similar design. For the purpose of this tut I am going to set an A4 poster, which will be displayed within different sections of an large office on notice boards etc.

Again start by going to File > New > Document.

For the top margin I am going to be generous and give the reader a bit of lead in space, about 12.5mm. As this is a single page layout I want to retain the balance so I will set both the left and right margins at 15mm. Finally the bottom margin will be set at 25mm. These margins will act as a safe zone and I will not be placing any important information within this area. The safe zone will lend itself to practical use, for example the poster might be held up by drawing pins or clipped into a frame.

Once the margins are set, define the other boxes as I have done in the screen shot below or set them to your own requirements.

Changing Margins

Once you have set your margins using the new document palette, it is possible to redefine them. Make sure you select the pages you want to edit. Check this by opening the Pages palette, if it is not open go to Window > Pages.

When the palette is open hold down Shift and Click the pages you need and go to layout > Margins and columns. Within this option box you can edit your measurements.

Conclusion

Taking the points from this tut into account, it is ultimately up to you, the designer, to decide on the best structure for a project. Remember to give some careful thought to the function of the margins and in turn they will strengthen your designs.

Vectortuts+

1999 – My Final year of High school – I was teaching myself Photoshop 5 (editable type was a new feature!)

Feeling Left Behind?

If you’re not up to date with the latest software packages, you may feel left behind. For example. back when I was a Jr Graphic Designer, I graduated from university at a time when QuarkXpress was the software package of choice, four months later when I started looking for work, knowledge of InDesign was minimum requirement for all applicants. This made it extremely hard to break into the industry.

Unable to find myself employment, I spent the next year developing my style in Illustration. In 2006 I enrolled in a Post Graduate Design class and spent as much time as I could asking questions and producing the best projects I could.

If you feel that your skills need some sharpening, short courses, further education (such as post graduate degrees) and online tutorials can help. Assess your current skill set in relation to what you would like to learn and how fast you would like to learn it. Online Tutorials are always a great resource, if you need an extra boost Premium Tutorial Subscriptions and short courses can help. If you’re looking to learn something completely new, you may consider further education.

2000 – 2004 – I was an Undergraduate of Multimedia Design – Software Overload! I was Learning Photoshop, Dreamweaver (before CSS) Illustrator, Flash, Premiere, After Effects, Lightwave, Director, Fontographer and QuarkXPress!

Is There Such as Thing As Future-proof Design Skills?

While you cannot predict the future of Design Software (10 years ago, who would have guessed that Adobe would purchase Macromedia?) you can guard against industry change that will leave you behind.

The following tips will help you keep an eye on the industry while preserving the common sense and best practices of timeless design.

Good Design is Timeless

If you look back over the history of Design and Illustration, you will see that the art of good design is timeless. What ultimately makes good design, is a well thought out concept and a visually pleasing composition. There are many blog articles that claim computer aided design and crowd-sourced feedback has made Design School unnecessary, I don’t completely agree with this. Attending a Design class or learning from a mentor is a great way to build the foundations of your design knowledge. Many people may disagree with me, but I believe design is an art form and it helps to learn from masters.

No matter what medium you’re using, you should strive to have the best layout skills and creative concepts possible. This is a great way to stay relevant in the field of Illustration and Design. Technical skills can be built on and improved, design sensibility takes time to master.

Keep One Eye on the Industry

If you had to apply for a job tomorrow, would your skills be in demand? Regularly check employment ads in your field to stay up to date with the kind of employee people are looking for. Its easier to learn new skills at your own pace than trying to learn as much as you can when you need to. You can also attend industry events and conferences and sign up to industry leading blogs and newsletters. To stay up to date with the software package of your choice, you can follow it on Twitter or join a Facebook Group.

Never Stop Learning

Once you join the workforce, you shouldn’t consider your education finished. Always push your skills, always try new techniques and never stop learning! If you’re reading this, then you will already know how easy it is to find a great wealth of tutorials and case studies online. If there’s a particular skill you would like to learn, formulate a plan, start with the basics and work from there. It may seem simple, but with the variety of subjects available, it’s extremely easy to become sidetracked. If you make a plan you can stay focused and track your progress. You can find a great selection of basic to intermediate tutorials via the Tuts+ Network, if you’re looking for advanced tutorials, check out the Tuts+ Marketplace!

2006 – I enrolled in a Post Graduate Communication Design Course – Back to Basics, Photoshop, Dreamweaver (CSS) Illustrator, InDesign (Night School)

Comments or Questions?

Do you have any comments or questions? If so, we would love to know about them. Share your thoughts and ideas in the comments section below.

Vectortuts+

Diving Into Frameworks

Chances are good that you’ve already heard of or used some sort of CSS framework already… but just in case, let’s review the key benefits of using a CSS framework (aka grid system) in any web project:

• Provides a “framework” that’s designed to look good on all monitors.
• Streamlines the design process by defining exact measurements.
• Reduces development time by providing pre-coded HTML/CSS.
• In a perfect world, it helps designers and developers communicate better – smoothing out the process of moving from Design to Coding.

Ultimately, a CSS framework should help establish some basic guidelines for content columns, while still providing designers with full control over their designs.

In this article: I’m going to explain what a CSS framework is, and why I chose 960. Then, I’ll go over the basics of how to apply the 960 Grid. To wrap up our discussion, I’ll show you a few sites that are using the 960 grid, and how they are structured.

CSS Frameworks: A Brief Overview

A CSS Framework is a series of stylesheets created to make a web developer’s life easier. They account for the various quirks of browsers, are easily adaptable, and apply basic design principles (such as establishing visually pleasing margins between elements).

Oftentimes, these frameworks also have typography stylesheets, which can act as a great place to begin working on your site’s typography (for more information about Typography, check out this article).

There are two major CSS Frameworks at the moment: Blueprint and 960. Both are perfectly capable frameworks, with great features and ease of use. It simply comes down to a matter of preference of which Framework you feel most comfortable using.

Before you begin the design phase of a project, it’s important to discuss the selection of a framework with the person who is going to code the site. Often, developers will have preferences towards a particular CSS framework, and as one of the main reasons we use frameworks during the design phase is to smooth out the transition from design to coding, it’s a major decision. If you’re coding the project yourself, just make sure you are comfortable with the grid framework you pick – there’s nothing worse than design an entire site based on a framework that you end up disliking.

960 GS: The Gritty Details

Personally, I found the 960 Grid suits my needs better, so that’s what I’ve adopted and that’s what we’ll be discussing in this article. However, the overarching principles that we’ll be discussing will apply to any framework, including Blueprint.

960.gs is based around putting all of your site’s elements in a 960px wide (clever girl) container, and dividing that container into 12, 16, or 24 equally sized columns. They provide a tool to use alternate widths, but 960 is what the entire system is developed for and it happens to look pretty sharp.

The CSS Generator at 960GS

Why 960px? Because 960px is a width that is suited for the wide number of platforms on which we browse the web. It essentially allows for a 1024px wide monitor to show the site accurately and without horizontal scrolling, accounting for the width of the browser chrome, scrollbars, and a bit of padding for legibility. There is always a 10px margin placed at the right and left of the main content column, which means that smaller browsers will always be able to read the farthest left content without the text butting but against the browser window.

Additionally, all numbers in the 960GS are whole numbers based on the golden ratio – there are no decimal points or funky spacing issues. If you’ve read our article on Mathematics and Web Design, you know how important getting these numbers right is.

One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.

How is Blueprint Different?

I won’t go into too much depth here, but let’s briefly discuss the key differences between 960.gs and Blueprint. First, Blueprint is a CSS framework that’s based on 950px – it’s very similar to 960 in the way that it handles the basic layout stuff (BP uses 24 columns with similar approaches to padding and ratios)… but that’s where Blueprint stops being similar.

Blueprint does allow for form-specific styling and notifications, something I wish 960 would implement.

Blueprint is a much more complex, robust, and comprehensive framework system. It’s been built as a full fledged stylesheet for pretty much every element that you can think of (radio buttons, tables, etc.). There are things I like about Blueprint, the most notable being its styling for form elements and built in notification classes. Additionally, it includes a full suite of styles for:

• Typography – BP provides typography size and spacing defaults for all elements.
• Form Element Styling – Styling for forms and some classes that can be used to add to forms (like required fields).
• Print Styles – Print stylesheets for when surfers hit the print button.
• UI for Plugins – Pre-built CSS (and sometimes images) for buttons, tabs, and sprites.

The problem that I had with Blueprint is that it’s just too complex to use at the design phase… creating a design from scratch means re-formatting everything that they provide, and it’s often hard to keep up with the sheer comprehensiveness that BP provides. In contrast, 960.gs offers just a layout – perfect for letting a designer get creative within realistic boundaries.

Using the 960 Grid System

The 960 Grid is almost frighteningly easy to use (in fact, you may start to ask yourself: “Why wasn’t I using this earlier?”), with only a few simple rules you need to abide by.

Download the 960 Grid from 960.gs

After you download it, take a look inside the directory you just unzipped. I want to draw your attention to two folders: “sketch_sheets” and “templates”. The “sketch sheets” folder contains a PDF of the various grid sizes in a within a browser window, and the “template” folder contains templates for almost every graphics program under the sun (such as GIMP, Fireworks, and Photoshop).

Sketch Sheets: Making Your Life Easier…

The purpose of a CSS Framework is to make your life easier, and you should always be looking for ways to help you decrease the time it takes to create a design. Use these templates when creating a design in Photoshop, print off copies of the “sketch sheets” when discussing the details of a project with a client (and make sure to look at this before you go!).

Example of a printed out Sketch Sheet… with some sketching on it.

In fact, I would suggest using these sketch sheets every time you start a project: they’ll allow you to experiment freely before locking yourself down to any layout. It will only take you 5 minutes of sketching to realize a design will or won’t work, as opposed to 50 minutes+ if you had been designing and coding it.

Designing With the 960 Templates

Once you’ve come to a basic agreement on the sketched out concept for the site, it’s time to crack open the template files. This is probably the central reason why I like using the 960 system… it comes pre-packaged with templates for just about any program you can think of. I happen to use Photoshop, so here’s a screenshot of the provided template:

The key benefit here is simple: The template has pre-built guides for all of the main content columns that directly correspond to the CSS framework on the coding side of thigns. It’s easy to quickly draw your main content columns and keep everything in your design clean and organized.

Experienced designers might see this as “design with training wheels on”, but frankly, there’s nothing wrong with having a simple overlay system to help guide the framework for a web design.

You still have to design everything on the site (of course!), but by keeping your design in line with the guides, it’ll make the development side of things much easier. As as added benefit, having a uniform approach to padding between content cells is a great way to make your design look more professional. Read more about why “Pixel Perfect Comps” here.

Setting It Up

Now that you’ve gotten a design nailed down, it’s time we talk about the 960 grid syntax. As I mentioned at the intro, you can find a lot more information about using and prototyping with CSS frameworks at Nettuts, so I’m just going to cover the basics here.

First, you’ll need to reference the appropriate CSS files into your design: reset.css (the reset file that accounts for browser quirks), text.css (the built-in typography stylesheet), and 960.css (or 960_24_col.css if you are using a 24 columns grid). Usually, I place all of my site-specific styling in a separate file (usually called style.css), to ensure I don’t break anything in the Framework.

Quick Tip: Reference your own stylesheet after you reference the Framework, so that you can adjust specific aspects of the framework without altering the Framework itself (and if you make a mistake, you don’t have to re-download and overwrite the Framework’s files). With these 4 files, you’re now ready to begin to design your site.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>

        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

The first div is your container, what your content will be stored in. By defining it’s class as “container_12″, you’re saying: “I want this container to have a 12 column grid” (The same practice applies when using a 16 and 24 column grid).

Now that you’ve defined the container as a 12 column layout, you begin to structure your site in such a way that it fits within the layout. If you look at the next div elements in the hierarchy (as noted by the tabs), you’ll see the syntax for their definitions. “Grid_7″ and “grid_3″ are easy enough to understand: you’re saying that this div element is going to take up X number of columns. However, 7+3 = 10 < 12, which means you’ll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of “grid_x suffix_y”, you’re saying: “I want this div to take up X columns, and for there to be Y number of empty columns after it.” (This also applies to prefix). So, since “Grid_7″ has a prefix of 1, and “Grid_3″ has a suffix of 1, 7+3+1+1 = 12!

By now, I know you’re wondering about the Div elements nested in the “Grid_7″ div. Well, you can nestle divs which take up a specified number of columns inside another div, so long as it does not exceed the size of its parent grid. Furthermore, the first and last elements must have “alpha” and “omega” appended to their class definition, respectively. So, in our sample code: “grid_2 alpha” is the first div nested within “grid_7″, the next element “grid_3″ is in the middle (and therefore does not need an “alpha” or “omega” appended to it), and finally “grid_2_ omega” is the last div nested within “grid_7″. And since 2+3+2 = 7, the definition is proper.

Putting It All Together: A Short Example

For the purpose of illustrating this whole process, let’s go through a quick example of using the 960 Framework during the design phase of a personal project of mine.

The design itself is pretty simple, but it’s the perfect way to show you how the framework can act as a tool through the design process.

The Cerberus Website: The Example that We’ll Use

Mass Effect 2 is one of my favorite games of the past 5 years, and I felt creating a site for the fictional organization “Cerberus” would be a challenge. The main aspects of the organization are: professionalism and technological prowess, which I wanted to convey with a clean design that used their entire color scheme. To start, I sketched out the design for the site (it would be hypocritical for me to act otherwise, right?).

As I looked the design sketch, I saw how to make the design work in the 960 Grid.

Below is the HTML skeleton for my site:

<div id="container" class="container_12">
	<div id="header" class="grid_12">
		<div id="logo" class="grid_2 alpha">Logo</div>
		<div id="subHeader" class="grid_12 omega">
			<div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
			<div class="grid_8 omega">Navigation</div>
		</div>
	</div>
	<div id="content" class="grid_8">
		Content
	</div>
	<div id="sidebar" class="grid_4">
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
	</div>
	<div id="footer" class="grid_12">Footer</div>
</div>

If you noticed, I had the logo only cover 2 columns, while the sub header took up all 12 spaces. Since the header div was 12 columns long, any sub elements can up to 12 columns long. This trick allowed me to make the header, as the logo was took up 2 columns, and left the rest empty (the image is actually the background image for the header div). And since the sub header was 12 columns wide, it filled up the entire width under the logo (since it couldn’t fit all of its content inside the 10 spaces left after the logo).

This is actually an important distinction to make, and is another design tool you should utilize (and to be safe, you could use “prefix” or “suffix” to ensure a certain amount of space is reserved). The rest of the site is pretty cut-and-dry: 8 columns for the main content and 4 for the sidebar. Each sidebar element is a separate div element; they stack on top of each other because they are constrained to the width of 4 columns.

To illustrate how the site is set up, I’ve taken a screenshot of the site and clearly marked the columns:

Examples of The 960 Grid in Action

Now, my own example might not be the best way to really inspire you to go out and create some killer web designers, so here are just a few examples of the 960 system in action. You can find more at the 960.gs site.

The Keynote Wireframe Toolkit website, which uses the suffix aspect of 960, along with a background image via CSS to list the compatible programs.

The 5by5 podcasting network uses the 960 Grid to align its latest episodes in an appealing manner.

With the 960 Grid Framework; Hugh Griffith was able to present a clever bullet-point list of himself, and a more detailed explanation of his expertise side-by-side. Furthermore, he uses the bottom half of his site to present the 3 most appealing parts of his portfolio (each being 4 columns wide).

Closing Remarks

One of the most appealing aspects of a CSS Framework is the convenience they offer to designers. However, like any other tool, you have to ensure that you are using it in a relevant and worthwhile manner. Don’t try to use it if it doesn’t fit the design, and don’t let it restrict your creativity. For most projects (especially those for complex newspaper or blog-inspired layouts), a CSS framework can be a great time-saving tool, not just for spitting out quick HTML/CSS, but for the entire design process.

Want to read more about coding with CSS frameworks? Check out Nettuts library of articles on the topic (scroll to the bottom for more advanced tuts).

Webdesigntuts+

Why Developing a Concept Matters in Web Design…

In my last article, The Gestalt Principle: Design Theory for Web Designers, we established the need to start any design with the containing shell design first before going into the details, in this part we will discuss the methodology of coming up with a shell design.

Any containing shape should have a concept behind it – but sadly, lots of designers focus only on a nice-looking shape that really has no meaning behind it. Or worse, they design an entire website based on pre-existing frameworks without even a moment’s thought for how an original design might bring some realmeaning to the project.

Truly great design has meaning behind it – it’s not just pretty shapes, filters or typography – each element should actually say something about the underlying project.

At this stage, if you followed the methodology of creative requirements gathering (How to Get the Right Creative Requirements From Your Client), you should have enough input to build upon and work out what container shape or style your design will fit in.

Start By Collecting a Library of Reference Images

One of the easiest and simplest ways to find ideas is to have asked your client to give you some keywords to describe how he wants people to feel about his site…. energetic, fresh, young, solid….etc, by simply entering these keywords in any image search such as Google or Bing.

Choosing from these images the ones you like, you will easily find yourself with a large library of brainstorming ideas to start from.

Design Begins With a Brainstorm

Similar to any brainstorming exercise, don’t dismiss any ideas… however strange they are. It’s always easier to tone down a design than to try and spice it up… sitting down in front of your library of ideas, get a pencil and paper (which are excellent tools at this stage) and start sketching out concepts that come to your mind by looking at your library, sketching helps because ideas tend to fade away as fast as they pop into your mind

For example, if a client asks me for a “fresh” design, I will simply enter “fresh” in Google for example (or your preferred search engine) and checkout the image results.

Here is a sample of what I came up with:

How would these images inspire me? What would they tell me about the direction of the design?

Well, simply knowing that my client wants a fresh design and by using this method in interpreting the images I would understand that:

• I should mostly go for organic or curved shapes
• Light “fresh” color shades are preferred (more on color in a later article)
• Use of “crystal” style and semi-transparent components.
• Have a lot of white space and no over-crowding of components

I usually prefer to do this exercise with 2 or 3 other designers together as it helps bounce different ideas off each other, I would ask each one to search for images alone for 15 or 20 min, then sit together and start saying what we see in each image, you will be surprised how other people may see something totally different than what you think or see, and this may open up a totally new idea for you.

It’s important to talk during this stage in the design process! The word “fresh” means different things to different people – so don’t rely solely on the initial search of image results or your own interpretation to be the definitive source of inspiration.

Don’t Copy Ideas, Steal Them!

Good artists copy, Great artists steal,
- Pablo Picasso (1881 – 1973)

My interpretation for this quote is this: Copying another idea will make you a good designer, however, “stealing” an idea or concept from within another design and using it wisely (without blatant copying) will make you a great designer.

Stealing an idea is hard – much harder than copying – you need to truly understand the concept to lift it from one place and move it into your design.

Case Study: Stealing the Pyramids

In a recent project, I was working with a team on a site for an Egyptian Tourism portal. They did not want a straight forward “Pyramids, Karnak, Pharaonic” style site that most people would go for… They wanted something modern, yet they wanted to keep an Egyptian identity that would literally say “this site is from Egypt”.

It was a real challenge, but by going through the above methodology we came up with images like these:

Now the client didn’t want cliché designs showing straight forward hieroglyphs or images of ancient Egyptian temples and stuff like that, but by looking at the images we started building on the idea that we can use some elements such as the slanted walls and the ancient Egyptian portals and how they would relate to the site being a portal to Egypt.

The problem is that the only style that’s unique to Egypt is Pharaoh-style. If we went with Arabian art, for example, it would not be unique to Egypt. If we show diving or beaches, it is not unique. If we go with any other style, it will not be unique to Egypt and that was a strict requirement.

At the same time, we were told not to use clear Ancient Egyptian images or hieroglyphs as the client wanted to promote all types of Egyptian tourism, not just temples or pyramids. A tricky design brief, to be sure.

In the end we came up with a sketch like this:

We simply took part of the entrance “portal” pylons in Karnak temple, using only the slanted lines to identify the walls, the area in the middle was used to animate different images from Egypt and we used the left area for the logo and navigation while the whole right area was used for the content.

It was a very simple concept, yet it fulfilled all the requirements. Such an idea would have been hard to come to mind if we had not watched the photos and images that came up from a simple “Egypt” search query.

We were able to steal the ideas behind the Karnak Temple and the Pyramids, and then use them in our design.

Good Concepts Speak For Themselves

Some people argued that this concept may not be very clear when people look at the site, and this may seem strange, but concepts don’t need to be “understood” from first look at a design… nor do they need to be visually clear at all – this is not a must. This may be easily understood by looking at logos, take the Mercedes logo for example:

At first glance for most people, it is just a 3-pointed star. However, the concept behind this star is that it represents its domination of the land, the sea, and the air – having the top arm representing the air and the 2 bottom arms representing land and sea.

Who knew? Very few people outside of the company… but that’s not the point, now is it? A good concept speaks for itself – even if people don’t immediately understand exactly what it means, the intentional shapes and ideas underneath will always take on a life of their own. Concept-less designs don’t have that kind of life… they just sit there.

Finding Inspiration for Concepts

Another great source of inspiration is to try and stay away from your screen. Many designers tend to visit design inspiration sites, which contain daily top designs. While this is a good exercise in other phases (such as requirements gathering and in component details), it probably won’t help much when you’re trying to come up with your own core concept.

It’s often better to look at other off-screen sources – Billboards, Magazines, Posters and TV Commercials are very good sources if you have time, especially because the rules governing web design differ greatly from print design or TV Ads, they give you a unique perspective that help you come with up with very original ideas that you can work into your design concept.

Architectural designs also can be good and unique sources of inspiration:

Depending on your client and your goals, each of the above buildings can give you new concepts and ideas to use for your web site “container shell” design as in the following examples (in the same order):

Notice how each of the architectural photos from above can easily be turned into viable website shell designs.

The trick is to always keeps your eyes open and use everything as your source of inspiration, don’t narrow down your options by sticking to looking only at other web designs or trying to come up with something on your own.

Conclusion

Seeing comes before words. The child looks and recognizes before it can speak.
- John Berger, Ways of Seeing

If you haven’t come across John Berger’s, Ways of Seeing, it’s worth finding a paperback copy (or at least an e-book version!). I won’t dig too deep into the details, but it’s a book that explores the ways that people see the world around them. The underlying message is that seeing is a vital and primal instinct to us humans – we “see” before we read, before we speak, and before we walk.

As such, we as web designers can take some special meaning from this truth. We should be careful to craft the concepts behind our designs because they are the first thing that people “see”. Before the words on the page or the flashy image slider that we’ve been working so hard to code, people see the shell – the concept – that creates the overarching impression of the site. Details are important, don’t get me wrong, but you can’t really nail the details until you’ve got a meaningful design to put them into.

Read more great “theory” articles in our Web Design Theory Session!

A special thanks to Ahmed, who turned in this article in the midst of the chaos happening in Egypt.

Webdesigntuts+

Vectortuts+

Since the Super Bowl has been around for almost 45 years, there have been a lot of posters made for this occasion. During the early years, there was no such thing as digital art. This means that the methods used to produce these designs were quite different from decade-to-decade. Take note of how these posters have changed throughout the years and let us know which one was your favorite.

Super Bowl I

Our first poster was the first ever used for any Super Bowl, this classic poster
doesn’t feature any digital work at all. It features a close range photograph of what looks to be a football player mold. As you can see this one dates back to 1967 so there wasn’t much they could have done at the time.

Super Bowl II

The next poster takes a more colorful approach to illustrating this epic showdown. The artist who created this decided to make a collage of an ultimate athlete using the stars of the NFL at the time. This was a very creative approach and can be looked at as one of the best posters in this collection.

Super Bowl III

The third Super Bowl took place in 1969 and this poster is a painting of two players from the apposing teams that would play
each other, the Baltimore Colts and New York Jets. Not many posters after this one actually showed real players from each team, so this is another classic one with some simple yet effective art direction.

Super Bowl V

Next we skip to the fifth Super Bowl and take a look at the program from the event. Another unique way of illustrating the showdown that would occur on that night, this time it looks like a sculpture was made and then photographed. The details on it make for a fantastic sculpture and one of the best Super Bowl posters in this set.

Super Bowl X

The tenth Super Bowl was one of the first to have its poster feature the coveted Vince Lombardi
trophy, many posters after this followed the pattern of having the trophy in the posters. This very simple yet elegant shot of the flag and the
trophy make for a good color combo that is pleasant to the eyes and gets its point across.

Super Bowl XII

This poster was one of the earliest to follow the formula of Trophy + Location. A lot of the posters that follow will illustrate the location of that year’s Super Bowl and mix it in with a shot of the trophy. This one takes a very colorful approach of illustrating New Orleans with a parade going on in front of the place where the game would be played, the Superdome.

Super Bowl XIII

Super Bowl Thirteen took a more modern futuristic approach to the poster, the neon gridlines and soft skyline gradient made for a very original poster. This type of design style is used by many artists now so it is very interesting to see that it was used in 1979 in this specific context.

Super Bowl XIV

Hollywood was the setting of the next Super Bowl and the artist who created this poster
definitely did the right thing by incorporating the Lombardi Trophy into the California skyline. Famous landmarks like the Hollywood sign were also painted into the scenery to give it an authentic look, and finally the warm sunset ties in perfectly with everything else.

Super Bowl XVI

The sixteenth Super Bowl took an abstract turn with its poster design. This elegant poster featured the Lombardi Trophy as a centerpiece that is surrounded by other intricate and ornate silver statues. This painting was done extremely well, as the quality is perfect and the colors really mesh together well. This abstract look definitely worked and did not require the use of any scenery or football related items aside from the trophy.

Super Bowl XVII

The year after the Super Bowl was back in California and the poster that was created
definitely reflected that. I guess having in it California was a big deal and so a lot of flashy painting was used. This great color scheme with neon lights and the purple sky blended perfectly with the
trophy again. This was another solid poster that utilized the common formula used by these Super Bowl posters.

Super Bowl XX

The twentieth anniversary of the first ever Super Bowl came in 1987. The tagline featured in this simple poster already says a lot and does not require an
intricate design like the rest of the posters. The point was easily made with that tagline and a simple shot of the
trophy and the “XX” logo.

Super Bowl XXIII

Three years after that anniversary the Super Bowl was set to be played in Miami, Florida. If you are not aware Miami is known for its beaches and the artist was fully aware of that when he painted this poster. The
trophy is standing on a beautiful beach in front of another sunset. Nothing too original but the detail and quality
definitely take it that extra mile.

Super Bowl XXIV

New Orleans was the setting for the next year’s event and this setting is famous for its yearly Mardi Gras parade which was illustrated in that years poster. The artist did an amazing job of painting an abstract take to this annual celebration.

Super Bowl XXVIII

This poster didn’t use the traditional methods like painting or photography; it took a more digital approach. Mixing the location, the Super Bowl itself, and some ornate decoration this artist created a visually astounding poster. Georgia was the setting for this year’s showdown and it was illustrated beautifully in the main logo of the poster.

Super Bowl XXX

Three decades had passed since the first Super Bowl was played and this poster used a different type of art direction than the last anniversary. The desert of Arizona was the home of this game so it was fitting to have the
trophy incorporated in a very colorful and wonderfully painted desert.

Super Bowl XXXIII

Miami was chosen again to host that year’s game but this time there was some diversity with the poster. No sight of a beach or a sunset, which was a good thing because a repetitive image would make for a bad poster. The artist surrounded the Lombardi trophy with some well-known animals and figures of Florida. The art style used here was also very unique and a nice alternative from the paintings used earlier.

Super Bowl XXXIV

Atlanta, Georgia is famous for its Georgia Peaches and that was the clear theme that was used by the artist who created this Super Bowl poster for the event held in Georgia. This might not have been officially used but the realism and detail in the painting makes it an amazing example of
incorporating location and the coveted trophy.

Super Bowl XXXV

The Tampa Bay skyline was illustrated in the next poster featured. The art direction used took a more modern turn away from the
extremely detailed paintings, the more digital approach created a colorful scene using simple shapes and shading.

Super Bowl XXXVI

Patriotism was the theme of this poster and it was warranted because of the year it took place (2002), only a few months following the 9/11 attacks. Not much needed to be done here as a simple reflection of the flag provided its point
clearly.

Super Bowl XXXVIII

One look at this poster by a designer they can easily tell you this one was made in Illustrator, this vector made poster of the Houston skyline makes for a very nice addition to the collection of Super Bowl posters over the years. This is one of the earlier ones that feature some of the newer programs that we are accustomed to using.

Super Bowl XXXIX

Another cartooned version of the event takes place in this poster; a great set of colors was used for the whole environment. Everything in this poster fits together and it is all centered around the main goal of the night which is the trophy. All in all the idea is heavily used but the execution is top notch.

Super Bowl XLI

Another Florida Super Bowl means more posters with palm trees, water, and the bright sun. This one is no exception, although instead of a painting we have a manipulated photograph of a pool and some common south Florida imagery.

Super Bowl XLII

This Super Bowl was held in the desert and like the last one held in Arizona the poster features the same types of setting. The execution is a tad bit different this time around but the whole point being made is the same.

Super Bowl XLIV

Yet another Super Bowl was held in Florida, but this time we see an unusual approach to the poster. No sun, not even a palm tree in sight. This is a fresh take on the poster because it has nothing to do with its location. Just a quality design, which is a photograph in this case, all centered around the Lombardi Trophy.

Super Bowl XLV

Lastly we have the poster for this upcoming Super Bowl that is to be played in the Dallas Cowboys newly built stadium. A very cool Illustrator made logo is the main focus of this poster and right under is the newly build mega-stadium that has gotten the chance to host its first Super Bowl.

Psdtuts+
Print / Web Design Company India

Handle color changes and variations with ease by following this intermediate level tutorial. This is a special tutorial sponsored by Astute Graphics that incorporates the use of their high-quality Phantasm CS range Illustrator Pugins. We’ll work with Phantasm’s color shifting tools: Hue/Saturation and and Shift to Color, while we learn to contrast shapes when composing natural, vector scenes!

Final Image Preview

Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4 and Phantasm CS range (Designer, Studio or Publisher) Plugin
• Difficulty: Intermediate
• Estimated Completion Time: 1 Hour

Here is the illustration I’ll be creating. Click here to see the larger version. And keep in mind, while I’m using Phantasm CS Studio in this tutorial, the options we’ll be covering are available in any version of Phantasm CS.

Step 1

Using the Pen Tool (P), draw straight lines to create the basic shape of a tree.

Step 2

Draw other tree shapes that are even more simplified and varied.

Step 3

An important concept to keep in mind when creating the first dominant shapes in your illustration is that these shapes will create the foundation and overall flow for the illustration. So, pay attention that the layout is looking good from the start.

Step 4

I can make branches that extend from the trees using triangles. To make a triangle select the Star Tool (found under the Rectangle Tool). With the Star Tool selected, click and hold down on your artboard, then press the down arrow until your shape has three points. In addition, and after your shape has three points, you can press and hold the Shift key to make the triangle sit perfectly flat. Release the mouse then release the keystroke you’re holding.

Step 5

Using the Selection Tool (V) squish the triangle so it’s much pointier. Place the triangles throughout the trees sparingly.

Step 6

We’ll now use the Ellipse Tool (L) to create the leaves on the trees. Start with a simple circle.

Step 7

Grab the Convert Anchor Point Tool (Shift + C), then click the top and bottom points that make up the circle. This will immediately convert them into angles. After that, use the Selection Tool to squish the shape into that of a leaf.

Step 8

Place the leaves throughout the trees and on the branches.

Step 9

I’ll use the Polygon Tool to make the foundation of the flowers. Using the same technique that I used for creating the triangle, this time pressing the up key to give my polygon more sides.

Step 10

Select the polygon and go to Effect > Distort & Transform > Pucker & Bloat. Give the shape a Bloat of about 20.

Step 11

Place the flowers throughout the trees.

Step 12

I’ll add a little more interest to the trees by giving them some subtle texture. I use a series of triangles to accomplish this. I adjust their transparency so they don’t stand out too much.

Step 13

Now that I have a bit of the foreground in place I can move on to adding some background elements to get a better idea of the landscape. Using the Pen Tool, draw a pleasing curved shape that will become the mountains.

Be patient and ensure you have a visually pleasing flow for the mountains. The curve of the mountains contrasted by the very angular shape of the trees complement each other. This complementary effect is in play throughout the entire illustration.

Step 14

Finish drawing the shape of the mountain.

Step 15

Give the mountain a tenuous blue to bluish-green gradient.

Step 16

There is no real process for creating the background elements. My shapes are more random than calculated. As long as you’re maintaining a nice harmony and flow for the elements then you’re good to go.

Step 17

Add a blue box to the background to create the sky and send it to the back by going to Object > Transform > Send to Back.

Step 18

The shrubs have been created using the base shape of the flower. To create a slight sense of volume, copy and paste the shape on top of itself. Scale the shape down slightly, set the Transparency to Multiply and bring the Opacity down to approximately 45.

TIP: Copy the shape and press Command +F to paste it directly on top of where it was copied from.

Step 19

Create bunches of shrubs, then place them throughout your illustration.

Step 20

Put some of the shrubs behind other elements to enhance the effect of depth.

Step 21

Certain trees have been created using the same shape as the flowers and shrubs. Using the same shape for various objects creates continuity but should be used in moderation. If your layout starts to look too repetitive draw new shapes for those elements.

Step 22

I’ve decided that I want to create even more contrast between the background colors and the trees so I’ll adjust the color of the trees to create a more dramatic landscape. One of the most effective ways to select objects that share a common characteristic is to select the first object, in this case, it’s the brown trees, then go to Select > Same > Fill Color.

Now that all your trees are selected, we’ll use the Phantasm CS range plugin to manipulate the color. Go to Effect > Phantasm CS > Hue/Saturation. This keeps the application Live as with all effects, and therefore editable. If you want to apply it permanently then go to Object > Filters > Phantasm CS > Hue/Saturation.

Step 23

I’ll simply change the brown to a much darker brown. To accomplish this, adjust the Lightness slider to the left as highlighted below. You can also apply the color change to either the fill or stroke of the object. Even though our trees only have a fill, we can leave that option checked in the dialog (the choice is yours.)

Step 24

Now, the trees have more of an impact on the overall illustration.

Step 25

Next will adjust the color of the shrubs and tree-tops to be a little more icy blue. Using the same selection technique that we used for the trees, select the shrubs and tree-tops then go to Effect > Phantasm CS > Shift to Color.

Step 26

I’m creating more of a monochromatic feel for the landscape so I’ll select blue for the Color and bring the Shift down to about 18%.

Step 27

This is what your illustration should look like right now.

While shifting the color of the shrubs and tree-tops can be done without the use of Phantasm CS, the cool part about using the plugin is that the effects can be removed at any time. Similar to Photoshop, the effect is non-destructive. In the Appearance Palette you can remove the effect or turn it on and off at your leisure!

Step 28

Use the Ellipse Tool to create a circle and give it a radial gradient to suggest that it has a shadow.

Step 29

I’ve decided to use a circle because this object should appear farther in the background – the detail that it shows should be reduced.

Step 30

Next we’ll create the illusion of snow on the top of the mountains. To do this, first copy and paste the mountains and work off to the side of your main illustration. Draw another shape over the top of the mountains that closely follows the top edge of them.

TIP: I find it easier to keep my main illustration intact and work on a copied version of a shape if I need to manipulate it with the Pathfinder.

Step 31

Select both shapes and in the Pathfinder Palette click Divide.

Step 32

Go to Object > Ungroup. Ungroup the objects until you can no longer ungroup them (this usually takes four applications of the ungroup command). Get rid of all the extraneous shapes other than the shape that you’ll use as the top of the mountain.

Step 33

Reposition the shape and adjust the color and transparency so it blends with the mountain behind it.

Step 34

To create the bright white snow on the top of the mountain, use the Pathfinder again. As before, copy the mountain shape and work off to the side of the main illustration.

Step 35

To create the clouds use the Ellipse Tool and overlap several circles in varying sizes.

Step 36

Merge all the circles together by clicking Unite in the Pathfinder Palette.

Step 37

Position the clouds in the background. Give them a black to white gradient and in the Transparency Palette set the mode to Screen. This will make the clouds fade from white to whatever color is behind them!

Step 38

Add more atmosphere (highlighted below) by drawing a random wave shape and again filling it with a black to white gradient and setting the mode to Screen in the Transparency Palette.

Step 39

To create the sun draw a shape with many sides using the Polygon Tool.

Step 40

Go to Effect > Distort & Transform > Pucker & Bloat. Give your shape a Pucker of about -85%.

Step 41

Now that we have a source of light defined in the illustration we can take the detail one step further. For this illustration I’ve decided that I want to create a more whimsical use of light. While the objects near the left edge of the landscape cast shadows to their left, items near the right cast shadows to their right. In real life this is only the case when the light source is very close. Again, I’m going for a more whimsical effect so I’ll take some creative liberties with my illustration.

Draw elongated shadows that extend from the trees and shrubs.

Step 42

I don’t want the shadows to overpower the landscape so I’ll adjust the Opacity and give them a gradient that has more of a blue tint to it.

Final Image

You landscape illustration is now complete! This is what the final illustration should look like. Click here to see the larger version.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

But this tutorial is going to focus on the technique of the detail shot. By getting up close and personal with our subjects, we can show our audience things they rarely experience.

Defining Detail

I’m going to try to dispel some common beliefs about details shots. I believe they can have entire people in them, be shot with a wide angle lens and that they don’t always have to be taken with a 00 macro set-up. So for the purposes of this tutorial I’d like to propose three broad aspects of detail shots in order to define the subject.

First, a detail shot can be image with any subject matter that is small size or small in overall relation to the general subject. Detail shots often tell the story of the situation by focusing on a relatively small portion of it. Details shots also can be images that, through compositional techniques, draw attention to a specific detail of a subject that might otherwise have gone unnoticed.

Using Macro Lenses

I don’t want to limit detail shots to macro images, but I also don’t want to ignore them. A macro lens lets you focus on something that is very close to your lens. Some lenses have the function built into them. You can also purchase extension tubes or bellows to achieve this effect with any lens.

The last option is to purchase macro filters that screw onto the front of your lens. Lenses labeled as “macro” are like any other lens in the fact that you get what you pay for. A cheap “macro” lens may allow you focus as closely as half a meter. An expensive macro lens may allow you to focus much closer.

Bellows, extension tubes and filters can all work well, too. But when you’re using them, your lens will not be able to focus on things in the distance. You’ll have to take the device off to do that. Finally, keep in mind that the closer you’re focusing, the less depth-of-field you will have.

Creating Layers

Layers are what gives your image depth and creates interest of the viewer. Many detail shots just show one thing close-up and ignore the background. You’ll see a few of those in this tutorial, but it’s often good to include the background in your image. It gives the viewer something else to look at and places the subject in a context.

In the situation pictured below, I was hunting for good light at a concert like you would do while taking shots anywhere. When I saw the guitar lit so nicely, I decided to take a nice detail shot of it. As I was snapping away, I zoomed out slightly and shifted my position to include the drummer in the background who was bathed in yellow light. It added a nice contrast and a new layer to the photo.

In Your Face

You don’t see many close detail shots of faces, and even when you do, people don’t typically consider them detail shots. The next time you’re shooting a portrait or a photographing people, try to set your mind in detail shot mode and see what happens. I think you’ll be pleased with the results.

The following image is a posed portrait. Shooting photos during an actual poker game might get you in trouble. I used a really deep depth-of-field to attempt to get everything in focus. I was happy with the result. I’ve been accused of putting the chips and cards in the image with photoshop, but the image was made completely in-camera.

Non-Close Up Details

As I said earlier, I don’t think of detail shots as simply an image where you’re extra close to your subject. I also try to make photos that just emphasize a detail through my composition. I call these detail shots as well. They have the quality of getting to view something up-close with the added bonus of shooting at a normal distance and including background information.

You can emphasize your detail in a variety of ways. Try selective focus, panning with the detail while it’s in motion, or emphasize your subject with light by having it lighter or darker than then background. The image below was made in a dance studio. In the photo, you can see the detail of the older dancers shoes, while the out-of-focus background shows the young dancers looking on.

Hands

Hands are a classic subject of detail photos. For hands, be careful with your exposures. What the hand is doing is often just has important as the hand itself, so lighting can be tricky. In most cases, you want the details of the hand to be exposed the same as the whatever the hand is doing.

The same theory applies to focus. When working up close with a shallow depth-of-field, remember that it might be hard to get both the hand and the other subject in focus. You can stop down to increase your depth-of-field or you can adjust your position so both are the same distance away from your camera.

Reflections

Utilizing reflections is a great way to show people a scene in a different way, but in order for it to be a detail shot, the object doing the reflecting must add something to the story of the image. In the poker image above, the sunglasses add more information to the story.

The following image was taken at the scene of an accident. A car had been struck by a train. As a newspaper photographer this is not an uncommon scene to shoot. Instead of showing the whole scene, I focused in on the cracked windshield and allowed the reflection to tell the rest of the story. You don’t see a car or a train, but you can immediately figure out what happened.

Flora

Flowers are also a classic subject for macro photography and detail images. There are so many of these photos floating around that it’s very hard to make your images stand out.

Using the techniques above of backing off just a little to show the background and using selective focus to emphasize the detail I choose, I think that this image (while by no means groundbreaking) is a little more special than your standard flower shot.

Another good way to make these kind of detail shots stand out is to over-emphasize the light. This could be mean waiting for the perfect time of day or using an off-camera flash to really make your photos pop.

Fauna

I am by no means a wildlife photographer, but I have on occasion been required to shoot animals. Unfortunately, I haven’t made my voyage to Africa just yet, so I’ve mostly photographed birds and insects. These are small and usually fall into the detail shot category.

The first “fauna” image I’d like to show you is of a small bird being nursed back to health. In situations like this, be patient, move slowly and shoot a lot. When dealing with moving object and shallow depths-of-field, it’s can help to over shoot and be sure that you’re going to nail that perfect image.

Butterfly photos are almost as prolific as flower images, but I find them exponentially harder to shoot. Pardon the pun, but butterflies are flighty. Their movements are unpredictable, and just when you think you’re going to have all the time in the world to set up a shot, they just decide to fly away.

Utilizing fast auto-focus really helps when shooting butterflies, but what takes the image to the next level is when you can catch them interacting with people. The same goes for other insect and animal images as well.

Texture

Using the detail approach is a great technique for capturing texture. Wood, fabric, skin and food are all great subjects for texture. The most important thing to remember when shooting texture is that the light will drastically affect how the texture appears.

Side light will emphasize flaws in smooth textures, but also brings out detail in very curvy ones or those with deep valleys. Front lighting can hide flaws, but it also makes things look flatter.

The other important aspect of light in these shots is shiny spots on reflective objects known as specular highlights. For the image below, I utilized side, almost back, lighting to really emphasize the texture of this food dish. You can also see the specular highlights on the sauce.

Silhouettes

In the same arena as lighting texture, there is the silhouette shot. Again, the technique of silhouette can be used for any type of shot. But in relation to detail shots, I find them useful with when trying to emphasize bold lines. The image below could have been shot in any number of ways, but by emphasizing the lines and shape of yucca plant, it places the viewer in a specific part of the world and bestows a certain feeling.

Keep in mind that silhouettes often involve a very distant background, so in order to shoot a close detail shot you’ll either need to have an out-of-focus background or use an extreme f/stop in order to create as deep a depth-of-field as possible.

Framing

Framing a larger object in a small detail can be tricky and even for me, it borders on not being a detail image, but it’s something to think about when shooting close up.

You can create a comic look by making things appear to be inside another small object, or you can attempt to create repetition of form by repeating the shape of something small in the foreground with something larger in the background. Imagine the windows of dollhouse framing a real house. In the image below, I decided to show the handle of the gas pump and within it frame a person actually pumping gas.

Easily Passable Details

The most enjoyable part of shooting details for me, or shooting photographs in general, is finding those little moments in the world that go unnoticed. I hunt for them. It’s almost a bad habit. When driving in the car, I often try to point out fleeting bumper stickers or odd buildings to my friends instead to paying attention to the road.

But if you slow down and keep your eyes open, you’ll notice all sorts of things. Take this tiny plant pictured below. Without getting too dramatic, I was awe-stuck to see it make such a pronounced mark a sheet of metal.

This next photo of abandoned shoes makes me want to become a detective and try to figure out why they were just left by a park bench. Hunting up these tiny details that others might pass by is one of my favorite things to do and why I love shooting detail shots like the ones in this tutorial.

Training Your Eye

While I do think some people catch on to photography more quickly, I do not believe that it’s some sort of talent that some people have and some people don’t. Looking back at my early work, it is anything but impressive. In fact, I feel that I still have a lot of room for improvement. I think almost anyone can be taught to think visually and to notice things, and those are the most important parts of photography.

The last tip I have for you is to always stop. Anyone sees at least ten things a day that are worthy of a photo. Always take the time to stop and shoot them. Don’t just pass them by in a hurry. If you’re running five minutes late for a meeting, I doubt being six minutes late is going to make that much difference. Always stop and shoot. This last photo was taken during the Memorial Day for Police.

Phototuts+

Introduction

“Unfortunately, the power and adaptability of the Web is not always fully utilised”

The World Wide Web is an incredible resource and it has opened up exciting new possibilities. Many more people are now able to access information and entertainment previously unavailable to them through traditional forms of media. The World Wide Web is especially significant for those with disabilities as the vast amount of digital information stored can be manipulated to meet differing requirements. Unfortunately, the power and adaptability of the Web is not always fully utilised and those with disabilities can find it difficult to navigate websites and have a negative experience with the Web in general.

There are numerous reasons why you should aim to improve the accessibility of your site, one of which is that it is the law in many countries. In the UK for example, web accessibility falls under the Disability Discrimination Act and if your website fails to comply, legal action could be brought against you. Legal issues aside however, why would you not want to open your site to the widest possible audience by making it accessible to everyone?

The Web Accessibility Initiative (WAI) was set up by the W3C to promote accessibility on the Web. The WAI attempts to educate people on how those with disabilities use the Web and has created guidelines for web designers and developers to follow. You will find that many of the guidelines are easy to follow and implement. Below we will discuss some easy methods that will help you meet these guidelines and improve the accessibility of your site.

Tip 01: Consider Your Colors

It is estimated that around ten million men suffer from some form of color-blindness in the U.S. The most common types are Protanopia and Deuteranopia; and those who suffer from these have trouble distinguishing between red, green and similar colours. With such a high prevalence of this condition, it really is worth considering when designing and coding your website.

For the most part, there are no radical measures that need to be taken when designing with color-blindness in mind – as is the case with the majority of the suggestions within this article. A well designed website will generally not cause any major problems for color-blind users. It is worth taking extra consideration however, when designing interactive or call-to-action elements. For example; a simple text link, styled red with no other decoration may be impossible to see if it is within a block of grey or black text. No one is suggesting that you need to stick with default link styling, but it is helpful to use more than one type of decoration such as an underline or background-color.

A useful tool for designers can be found at colorfilter.wickline.org which provides several different filters that mimic how different types of color-blind users would perceive a website. Simply type in the URL of a website and select the filter you wish to use – it does take a bit of time to load however so you will have to be patient.

It is also worth taking into account the level of contrast between foreground and background elements of your website. A high level of contrast will benefit everyone, not just those who are visually impaired. The Web Accessibility Guidelines suggest a minimum contrast ratio of 4.5:1 and an ideal ratio of 7:1 for standard sized body text. Obviously the safest option is always black text on a white background or vice versa.

You can check the contrast ratio of multiple elements on a site using Juicy Studio’s Color Contrast Analyser Firefox extension. It will analyse each element on the page and provide a report on whether or not it conforms to the WAI’s guidelines.

Tip 02: Contextual Links

Those who use screen readers will often have the option to navigate a web page by skipping through the links to find something of interest. In the case of text links, the user would simply hear the word in isolation, regardless of the content that surrounds it. It is therefore extremely unhelpful when all that the user hears is ‘click here’ or ‘more’ – these types of links provide no information of where they direct the user or to what they are referring to.

A much better option is to provide a more descriptive link. A link that takes the user to the complete article on a blog could read ‘learn more about S.E.O’ or ‘click here for the full article on S.E.O’.

Tip 03: Alternative Content

One of the core principles of the Web Accessibility Initiative is to make content on the web available to all regardless of any disability they may have. There are a number of techniques, such as the ones discussed in this article, which will help towards the WAI’s goal. There will always be some types of content however, that cannot be made accessible to some users, such as audio to those who are deaf. In this scenario, you should always provide alternative content where possible.

Web Content Accessibility Guideline 1.1:

Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, Braille, symbols or simpler language.

For example, if you have a video of an interview on your site, you could consider including a transcript of the conversation for users to download or read on the site. Another method is to add captioning to the video – a method that YouTube is experimenting with using speech recognition software.

An even more complete approach is to provide a link to a text-only version of your website. This method will also make your site a lot more accessible to those with slow internet connections such as those still using a dial-up connection or browsing for a mobile device.

Tip 04: Tab Indexes

The Tab Index basically establishes the order of elements that a user will cycle through when using the ‘Tab’ key. In the majority of cases, if a page design follows a logical order and establishes a strong hierarchy using headings, sub-headings etc. then you need not worry about this too much. It is with the use of forms however that this function is really valuable.

Forms can incorporate many small elements such as checkboxes and radio buttons that can require precise movement and clicks of the mouse. Someone with a motor disability may not have the control needed to perform such precise actions. With a correct Tab Index established a user will be able to cycle through and interact with each form element using simple presses on the keyboard. A Tab Index will also benefit those who do not have access to a mouse and rely solely on the user of a keyboard to navigate a website.

Tip 05: Proper Use of the Alt Attribute

We all know about alt text. It’s that text that we need to add to images in order for our site to validate. Everyone uses them right? Actually there are plenty of websites that don’t and those that do often use them incorrectly. In fact, there is much debate about the correct use of the alt attribute.

The alt attribute serves three main purposes:

• Assistive technologies such as screen readers use alt text and read it aloud to the user.
• Alt text is displayed instead of the image when images have been disabled by those with a slow internet connection or those using a text-only browser.
• Search engines also use alt text to store information about the page as they cannot read the content of images.

“The truth is that alternative text for images depends on the context in which it is placed”

So essentially alt text is the text equivalent of an image or other media source and it is used when the image cannot be accessed for various reasons. So what information exactly do we use for the alt attribute? Some people place detailed descriptions of the image while others load it up with keywords in an effort to help their search rankings. The truth is that alternative text for images depends on the context in which it is placed.

For example, it is common for a relevant image to accompany a blog post, such as a typewriter for an article about freelance writing. The article itself makes no reference to the image so therefore it is pretty superfluous. Some people may give the alt attribute the value of ‘typewriter’ or ‘image of a typewriter’ or perhaps they would give the value of the title of the article. All of these methods are wrong however. Let us see why.

Firstly we need to imagine that we cannot see the image. So if the value of the alt attribute was ‘typewriter’ we would see the title of the blog post, the word ‘typewriter’ on its own then the main text of the article – this makes no sense when viewed as text and it would be even more confusing if you were using a screen reader and randomly heard ‘typewriter’.

As a general rule, it is best that you do not use phrases such as ‘an image of’ or ‘a picture of’ when providing alt attribute values. The alt attribute will only benefit those who cannot see the image for various reasons so therefore telling these users that there is an image there offers no real value other than clearing up some of confusion caused by the above method.

Lastly, giving the alt attribute the value of the title of the blog post would only result in the title being displayed twice as text or repeated twice when using screen readers. Alt text should not repeat any information that is already provided as text, it is simply unnecessary and potentially confusing.

The best option in this scenario is simply to provide a blank alt attribute value. A blank value ensures no potentially confusing or irrelevant information is communicated and there is no detriment to the understanding of the article as the image is not essential to this. Some may argue that since the image is purely aesthetic, then it is not content and therefore does not belong in the HTML and should be displayed using CSS, there are differing views on this however.

As you can see, providing correct alt attribute values can be tricky and very much depends on the situation. The best advice is to asses each scenario individually, deciding on whether the image is required for understanding and use your best judgement.

Tip 06: Access Keys

Like Tab Indexes, Access Keys are a valuable feature for those users who rely on a keyboard to navigate a website. Unfortunately, Access Keys are one of the least used HTML elements, primarily because a lot of people are not aware of them and those who are choose not to implement them despite it being extremely simple.

Access Keys are basically keyboard shortcuts that help a keyboard user navigate to certain sections of a website quickly. Access Keys can be used by holding down a function key (usually Alt on Windows or Ctrl on Macs) and pressing a specific letter or number key that corresponds to a section of the site.

As I mentioned earlier, Access Keys are incredibly simple to implement. All it involves is a simple piece of HTML code added to the navigation anchor tags of your site –

Home

Simple.

A problem with Access Keys is that there is no universal set of assigned keys that users can expect to be utilised and combined with no real standard of informing users of the ones that have actually been used results in Access Keys being pretty ineffective.

The UK government does however have a set of recommended Access Keys to assign, they are as follows:

• S – Skip navigation
• 1 – Home Page
• 2 – News/Updates
• 3 – Site Map
• 4 – Search
• 5 – Frequently Asked Questions (F.A.Q)
• 6 – Help
• 7 – Complaints Procedure
• 8 – Terms and Conditions
• 9 – Feedback Form
• 10 – Access Key Information

Final Thoughts

As you can see, many of the above methods are very easy to implement and only require a basic knowledge of HTML. Making your website more accessible need not be time consuming, require massive modification or be detrimental to the appeal of a website.

I believe it is important for designers as well as developers to be knowledgeable about accessibility and consider it within the various stages of building a website. The earlier in the design process that attention and thought are paid to accessibility, the easier it will be to incorporate these methods and achieve better results.

It is also important to remember that the majority of the methods detailed above will not only help those with disabilities, but will benefit all users of your website. Some of the tips may even improve your rankings with search engines.

We have discussed just a few tips that will make your website more accessible, but if you are really committed, you may want to check out how you can conform to the full list of Web Content Accessibility Guidelines.

Webdesigntuts+

Who this Article is Written for:

This article is written for people that are just starting to learn formal design principles. It is not meant to be a comprehensive study of how to apply color to a design (we’ll have plenty of those in the future), but rather, it’s an overview for those looking for practical advice that will help them approach color theory within the context of a web design project.

I’m writing this because I’ve always found it difficult to decide on a color scheme that works well for a project; it’s probably one of the toughest decisions that I have to make as a designer. However, by learning the basics of Color Theory and some excellent tools available on the web, I’ve been able to strengthen my designs and account for this weakness.

A Few Candidates for the Target Audience:

• A programmer looking for advice to help them create a visually appealing prototype.
• An aspiring designer who wants a brief overview of the subject
• Someone who doesn’t understand the difference between Web Development and Web Design.

In A Nutshell, What is Color Theory?

Color Theory actually covers a number of things, but at the most basic level it is the interaction of colors in a design through complementation, contrast, and vibrancy.

The interaction of colors in a design through complementation, contrast, and vibrancy.

While the first part of this definition is straightforward (and admittedly bland), it is the last 3 terms which define the basic Color Theory:

Complementation

Complementation refers to the way we see colors in terms of their relationships with other colors. When colors occupy opposite ends of the color spectrum, they lead people to consider a design visually appealing by establishing a happy medium the eye can reside in. Rather than straining to accommodate for a particular area of the color spectrum, the eye is provided a balance. There are two common uses of complementation: the Triadic and Compound color scheme that we will be discussing later. Complementation can take you to new heights of design sophistication when you can begin to master the intricacies of color combinations.

Contrast

Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background and text color, as shown below:

If you’re ever in doubt, the best practice is usually to choose a very light color for the background, and a very dark color for the text itself. This is one area where color theory is crucial to the usability of a web design; In most projects, large text areas aren’t a place to try to be really creative – so keep it simple and legible.

Along with establishing readable text, contrast can also draw the viewer’s attention towards specific elements of a page. Think about highlighting a textbook: when you want to draw your attention to a specific portion of the page, you make the surrounding area look different than the rest of the text. The same principle applies to Web Design: Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements.

If your website has a dark background, focus on the main content with a lighter color.

This principle also applies to Analogous colors (which we will discuss later):

Vibrancy

Not to sound silly, but vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things. A great example of this is a comparison between CNN and Ars Technica:

CNN’s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website).

Ars Technica utilizes a darker color scheme for its background and header to relax the user and focus their attention towards their content. By doing so, their technical and detailed writing is considered the forefront of the site. And more importantly, the user is allowed to transfer the mental energy traditionally reserved for responding to vibrant colors to understanding the article’s contents.

How Do I Select an Effective Color Scheme?

Here are 3 of the commonly accepted structures for a good color scheme: triadic, compound, and analogous:

Triadic Color Scheme

Composed of 3 colors on separate ends of the color spectrum. There is a very easy way to create a Triadic color scheme:

1. Take a color wheel, and choose your base color.
2. Draw an Equilateral Triangle from this point.
3. The three points of the triangle will form your tri-color scheme.

By using an Equilateral Triangle, you can ensure the colors have equal vibrancy and compliment each other properly.

Compound Color Scheme (aka Split Complimentary)

The Compound color scheme is based on providing a range of Complementary Colors: two colors are chosen from opposite ends of the color spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colors.

Analogous

An Analogous color scheme is based on a careful selection of colors in the same area of the color spectrum. Usually the colors are differentiated by their vibrancy, and their contrast when compared to each other.

Two examples of an Analogous color scheme are:

1. Shades Yellow and Orange
2. A Monochromatic Selection (Shades of a base color)

Just the Beginning…

The beauty of where we are in history right now is that we can benefit from centuries of scientific and artistic color theorists. There are entire volumes that have been written about the minutia of color theory, so I’ll encourage those of you who really want to dig deep into the subject to find one of the numerous academic books available to harness some of the deeper concepts. We’ll also be releasing deeper articles on “color theory for web designers” in the future here on Webdesigntuts+ .

Now let’s look at some great tools that you can use to experiment on your own:

Ways to Make Your Life Easier

Thankfully, there are a few tools at our disposal that make color selection extremely easy when utilized properly. And best of all, they will further our understanding of Color Theory.

By experimenting in a guided environment, we are able to learn how to apply these principles without becoming frustrated when things are not working perfectly. Think of these tools as a sort of “color theory safety net”, to help you explore your own creativity without ever needing to stray far from the established rules for pleasing color combinations.

Kuler

A tool developed by Adobe, Kuler is aimed at providing an intuitive way to create a color palette. Every color on the palette can be individually modified, or chosen as the base color, with a few simple clicks. Palettes can be saved and published, and there are a number of great community entries available on their site. Under each color, the export codes are provided (including hexadecimal). However, the interface can be cumbersome at times, adjusting the vibrancy of a specific color can alter the entire palette (I wish they had a “lock” feature which prevented other colors from shifting). Overall, I would recommend this tool for those with a decent grasp of the concepts and patience for when things don’t run as smoothly as they would hope.

Color Scheme Designer 3

This tool is quickly becoming my preferred choice for absolute beginners, those with little patience, or people on a deadline. By providing a very simple and controlled selector, Color Scheme Designer provides a very low barrier of entry, and its choice of color principles present a variety of options. While it doesn’t teach its users why the colors work well together (Kuler’s dynamic color wheel is much more effective in that regard), its results are great as a starting point or to finish a prototype.

Its more advanced options are very useful: features such as the ability to adjust an entire palette’s saturation and contrast, color blind overlays, and sample website previews are things I hope Kuler implements very soon. However, I feel this tool shouldn’t be the primary tool used by those who want to learn Color Theory- as it does too much of the work for the user and does not allow them to intuitively experiment while maintaining the basics of each color principle.

Yes, there are lots and lots of other sites where you can find great color schemes… and we’ll actually be rounding these sites up and analyzing them in the near future (search the site for our resource roundups when it comes out).

Case Study: Gamers With Jobs

To finish this article, let’s examine a website using some of the principles that we’ve discussed. Gamers with Jobs is a website devoted to a higher analysis of videogames, through its features, podcast, and forum.

• The grey page background with the white content background focuses the user’s attention towards the center of the website.
• The dark bar across the page (usually reserved for advertising) “frames” the user’s view into the content.
• The use of orange-red in the headers draws the user to the categories, feature titles, and aspects of the website.
• The neutral color scheme provides enough visual stimulation to keep the audience interested, while still allowing them enough mental freedom to enjoy the site’s content.

Closing Remarks and Summary

One of the hardest aspects of working with colors is that sometimes when colors have not yet been arranged in a design, they do not appear to work well together. However, once they are applied, their visual harmony usually becomes apparent. I’ve caused myself a fair amount of frustration by adjusting the colors chosen in Kuler before applying them to a design, only to find that the color scheme was altered just enough to be unappealing.

Trust in the theory! Apply the colors chosen through a color principle, and then adjust as needed. Doing so will save you a lot of time, and strengthen your design skills as you’ll begin to see color in more refined, artistic, and even scientific ways!

Summary

• Choosing colors on opposite ends of the spectrum creates a visual harmony for the eyes.
• A high contrast between elements makes text easily readable, and guides your reader’s attention.
• The brighter the colors, the more mental energy they will consume.
• Don’t be afraid to use tools such as Kuler and Color Scheme Designer 3, they only make your life easier and prevent you from becoming frustrated with the learning process.

Thank you for reading my first article, I had a ton of fun writing it. Please provide some feedback in the comments section if you feel so inclined, I want to make these articles as useful as possible.

Oh! And if you’re eager to read more, check out another great theory-based article that relates to what we just talked about: “Understanding Visual Hierarchy in Web Design”.

Webdesigntuts+

In this tutorial, we’ll show you how to make a cool, or should we say geeky, glasses icon. You should be versed in Adobe Illustrator’s tools to complete this tutorial. You’ll learn how to take creative license and create an illustration that uses a photo reference, but differs a bit in the final design.

Step 1

Start by taking a photo of some glasses. Make sure to take it at a high enough resolution so it won’t be pixelated when viewed at larger sizes while you’re working.

The end result is much more cartoonish and geeky. If your glasses are not exactly as you would like the illustration to appear you will need to improvise while you are making the illustration. After all, the photograph is just a reference anyway. We will be deviating from the actual photo in the final icon.

Step 2

Place the photo on its own layer and lock the layer. Using the Pen Tool (P) and draw around the edge of the glasses frames. Give the stroke a thick weight. We will convert the stroke to a shape in a later step. This will save us the hassle of drawing two different rectangles to make the frame of the glasses.

Step 3

Trace the arm of the glasses next. Give this stroke a Round Cap by clicking on the option highlighted below.

Step 4

When you are finished tracing both arms and frames expand your strokes by going to Object > Expand…

Step 5

Using the Direct Selection Tool (A) move the points around to make the arm of the glasses thicker toward the front, where they connect to the lens area.

Step 6

You can also delete points if they are hindering you while you move other points around.

Step 7

Since I am going for a dorky look I decided to make the middle part of the glasses much bigger. This area is completely made up in terms of how it looks. Don’t be afraid to deviate from the photo. You have to know when to follow the rules and when to break them. Right now is the perfect opportunity to break them.

Step 8

This is what your icon should look like right now.

Step 9

Zoom in and make sure your lines are all smooth. This step goes a long way in the end result. Spend a little time now to save a lot of headache later.

Step 10

Give the glasses depth by duplicating each section of the glasses. Hold down Option while you click and drag the shape to duplicate each shape.

Step 11

Using the Pen Tool draw in the left side of the glasses that connect the frame to the arm.

Step 12

Now draw the right side. Notice again that the illustration is a little different from the photograph. Since the arms of the glasses are much larger, the shape connecting the frames and arms will need to be bigger too. Also keep in mind the the final result we are achieving is that of an icon. Most icons have simple shapes so don’t get too concerned with following every detail of the photograph. It is very much a balancing act that you will learn over time and experimentation.

Step 13

Give the connecting shape depth by duplicating it as well.

Step 14

Draw the top and side to finish off the connection.

Step 15

Observe how the basic shape of the icon differs from the photo.

Step 16

Make the lens of the glasses by duplicating the frame, drawing a shape behind it and using the Pathfinder to Divide the shapes. Once you divide the shapes go to Object > Ungroup to select just the lens area. Delete the unused portions that are leftover.

Step 17

Position the lenses over the frames.

Step 18

Select both lenses and give them a gradient. Play around with colors and the angle of the gradient until you find something that you like. In the Transparency Palette adjust the opacity of the lens to about 50%.

To fine tune the colors you can select Edit > Edit Colors > Adjust Color Balance… and alter them more (as indicated in the bottom screenshot).

Step 19

Next we will create a piece of white tape that will wrap around the middle of the frames. For arbitrary shapes I find it easiest to use the Pencil Tool (N) to draw the shape. The Pencil Tool lets you draw as if you were actually using a pencil, in one continuous stroke. Since the piece of tape should have a more natural look this works perfectly. Tip: When drawing with the Pencil Tool, you can close the shape anytime by pressing Option then releasing the mouse button.

Step 20

Give the piece of tape a detailed gradient. Notice that the bottom of the tape has a highlight that suggests light is bouncing from off of the surface that the glasses are sitting on.

Step 21

Give the tape a dark Inner Glow by going to Effect > Stylize > Inner Glow.

Step 22

Last, give the tape a slight drop shadow by going to Effect > Stylize > Drop Shadow.

Step 23

Small details go a long way. Add a dark inner glow to the lenses by going to Effect > Stylize > Inner Glow… I decided to use a dark blueish green for the inner glow so it will blend better with the color of the lenses.

Step 24

Next we will accentuate the frames of the glasses. Select the sections one at a time and give them complex gradients. Pay attention to where light will hit each area of the frame. Try to get your gradient to be lighter in those areas. In the image below, I’ve indicated the area of the arm of the glasses that should be the lightest.

Also, give each section of the area you are highlighting an inner glow by going to Effect > Stylize > Inner Glow… This inner glow should be delicate as to not impeded too much with the gradients you apply.

Step 25

Select another section of the frame and give that a complex gradient. Again, the area that should have the most highlight is indicated below. Note that there can be multiple areas that have highlights.

Step 26

Give the shape that connects the frame and arm of the glasses a subtle gradient as well.

Step 27

The entire face of the glasses has a very simple gradient that almost goes unnoticed. When it comes to the face of the glasses, since it’s all flat my use of the gradient is arbitrary. Just make sure it’s subtle.

Step 28

Add some well-placed highlights that help define any visually uninteresting areas or areas that obviously would be reflecting light.

Step 29

A slight highlight on the edge of the lenses is a must. Instead of tediously drawing a highlight along the edge of the lens use the Pathfinder to your advantage. Duplicate the lens and click on Subtract from shape area, as highlighted in the bottom screenshot.

Step 30

To add another level of dimension to the lenses, draw an arc shape and blur it by going to Effect > Blur > Gaussian Blur… Adjust the opacity of the shape if you need to.

Step 31

The shadow will add a nice finishing touch to the glasses. The shadow is comprised of the two shapes that make up the arms and another horizontal line below. Select the shape and go to Effect > Blur > Gaussian Blur.

Step 32

You will notice that the tip of the arms of the glasses are curved slightly upwards. Reposition the points using the Direct Selection Tool to give the indication that the tip of the glasses do not sit flush with the table.

Step 33

Select the shadow. In the Transparency Palette set the mode to Multiply, so the shadow will blend better when you place a background behind it.

Step 34

Using the Rectangle Tool (M) draw a rectangle and give it a faint gradient.

Step 35

Round the corners of the rectangle by going to Effect > Stylize > Round Corners.

Step 36

Give the rectangle an inner glow by going to Effect > Stylize > Inner Glow.

Final Image

Here is the final vector glasses icon! As you will notice, the final result is a little different from the photograph. That’s the beauty of illustrating something, you can make it exactly as you want it.

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Vectortuts+

My parents were both in the navy, so we moved around a bit when I was younger. No matter where we lived though, I always loved comics and drawing super heroes (what little boy doesn’t?) My dad was always really good about nurturing my artistic leanings. In fact, he bought me the comic that really convinced me that I wanted to do art for the rest of my life — the short-lived Image series Nine Volt.

When I started college, my aspirations took a bit of a detour when I decided to pursue something “more practical”. I studied computer science. After a year and a half of more math than I could handle, I switched back to art. I ended up getting a BS in Art at UW Madison with a certificate in Graphic Design. I initially went into design to satisfy the question: “How do I make a career out of art?”

I’ve been out of school for almost 5 year now. It took me a couple months to get my first design job which was in Utah. After working there for a couple of years, my girlfriend (now wife) and I wanted to get back to the Midwest. I got a job at an animation studio in Minneapolis, where we currently live. My upbringing made those moves easy on me. It almost feels like I have to make a big change every couple of years just to feel normal.

I think the constant moving prevents me from becoming stale. I’m always looking to explore new ideas. I’m not satisfied with doing the same thing over and over again.

I wish I had a really great story about the name Ocular Invasion, but it’s just something I thought sounded really cool in my sophomore year of college.

My desk is littered with mechanical pencils, scraps of paper with lists on them (my organization system), and a pile of books I’ve been meaning to read. I use a scanner, a Wacom Cintiq, and an iMac.

Typography was the weakest aspect of my designs for a while. Until one day, a teacher told me to stop thinking of typography as a group of letters. Think of typography as more lines and shapes to incorporate into my design. Typography shouldn’t be an afterthought. So I spent a lot of time just working on my lettering until it didn’t feel like work anymore. It became fun. I no longer think, “How can I fit lettering into this illustration?” because it’s hard for me to even separate the two anymore.

I want viewers to be struck by the initial look of my work, to have a visceral reaction to the style. Then, on second glance, I want them to see that there’s a story there. The piece has a voice and is trying to say something. It’s like when I watch a good sci-fi action movie. The first time I watch it, I get excited by all of the explosions and lasers and what-not. But on the second viewing, I’m able to look past the punches and aliens to realize that there is a message there.

I always start with pencil and paper. The pliability of the medium is very conducive to the early stages of the creative process. When you use a computer, you’re instantly limited by what a program can do. A group of people wrote a program to follow a specific set of rules and perform a specific set of tasks. With pencil and paper, there are no rules. It ensures that your idea shines through. Your concept isn’t obscured by filters or gradients or whatever is the latest tutorial floating around the internet.

Only after I have a very solid sketch will I scan it into Illustrator or Photoshop. From there it’s about building a look that aids the concept: not using a style just because it looks good.

Since I am concerned with telling stories in my work, I tend to watch a lot of movies. I do mean a lot of movies. I’ll watch basically anything — it doesn’t matter if it’s good or bad, you’ll learn something about story telling either way. I also try to read as much as I can. It’s an interesting challenge to try to pace a viewer through a piece in the same way that an author creates a very deliberate pace for the reader.

My two favorite illustrators are Geoff Mcfetridge and Frank Chimero. They have this way of boiling down a piece to its bare essentials without losing any impact. Almost like they’re revealing truths as opposed to trying appeal to what most people already accept as truth.

Trying to create visually what was initially a vague glimpse of an idea is both the most rewarding and frustrating part of illustration. Sometimes an idea will shoot straight from my brain to a finished piece and other times I have to really wrestle with a concept before it becomes concrete. In the end, I don’t really know how a piece will be received, but that’s OK. The satisfaction comes from the creation, not the reception, of a piece.

In terms of what I try to do with my work, I think “It’s Too Soon” is my most successful piece. At first, it seems like this really cheery piece showing a young couple surrounded by a whimsical environment. That could be the end of the story. But, you realize it’s in a coffin frame and the saying It’s Too Soon refers to one of them having passed away. It’s really bittersweet.

I’m working on a couple of projects that I’m really excited about, but can’t talk about yet (some character design and music related stuff). As far as what I can talk about, I’m working on a nautically/ocular themed zine. An ocular invasion by sea, if you will. I’m also trying to get more into print making.

Don’t get discouraged if you feel like you haven’t found “your style.” The more influences you take in and the more you create, the quicker you’ll find your voice.

Emory Allen on Web

• Portfolio
• Twitter
• Facebook
• Flickr

Vectortuts+