Web Design: Old School is Old

This article on ITworld.com talks about three old school web design issues that used to be BIG issues in the day before broadband. The author talks about how, unless you are "building pages for your local Windows 95 user group" you need to move on from worrying about;

1. Limited Screen Resolution - the days of 640 x 480 pixels are long gone, the majority of Web surfers now use screen resolutions 1024 x 768 or higher.
   
2. The Browser-Safe Color Palette - also out the door are the limited number of colours you had to choose from. They were 216 colors that never seemed to include the colors you needed.
   
3. Multimedia Avoidance Syndrome - don't lose any sleep at night over whether your multimedia is going will fit down the phoneline. With many users connecting with broadband it's safer to add to Flash and video to your sites now.
   

Photoshop: Quick Tip - Use a new layer for retouching

If you are retouching a photograph, for the sake of safety (and your sanity if you accidentally erase something you didn't want to) , you should do all of your retouching on a separate layer above your image. By doing this you are only changing your new layer and won't damage your main image and you can play with blend modes and opacity to achieve different levels of retouching.



So if you are using the Clone Stamp tool (S) or the Spot Healing Brush (J) or the Healing Brush (J), in the Options bar at the top of the screen, turn on the Sample All Layers option. Now you will be sampling from your main image but painting onto the new layer you created above it.

Photoshop & Illustrator: Inspiration

Bert Monroy is an unbelievably talented and dedicated digital artist who specialises in photorealistic artwork. He is also a writer and I've read a couple of his books - Commercial Photoshop and Photoshop Studio and they are superb.

I was looking on his website today and in the fine art section there are some wonderful examples of his work. This particular piece http://www.bertmonroy.com/fineart/text/fineart_damen.htm was created using both Illustrator and Photoshop and in total contains 15,000 layers and 250,000 paths. Take a look and be inspired (and a bit scared at the amount of work involved!).

Illustrator: Inspiration - Adobe Illustrator in Action

I believe it's very important to look at how other people use design software - both in terms of seeing what the software can do in the hands of a pro and also for inspiration for your own work.

Todd Ferris is an artist and designer who uses Adobe Illustrator to amazing effect with his wonderful illustrations of classic cars. Have a look at http://www.warking.com/.

Photoshop: Quick Tip - Get Rid of the Slice Numbers

Although we love the Slice Tool and all it does for us, it can sometimes be a bit of a pain when the slice numbers appear on our images when we don't want them. For example when you accidentally select the Slice Tool, when you really wanted, say, the Move tool, you will notice that you have an unwanted number on your image. The good news is, it's really easy to get rid of them.



To remove the number, choose View > Show > Slices. Voila! the slice number has disappeared. If you want it back just choose View > Show > Slices again, and there it is.

Design Inspiration: Absolut Art

Absolut vodka began its involvement with art and design in 1985 with ABSOLUT WARHOL - Andy Warhol's dramatic and colorful depiction of the well known vodka bottle. The ads are now as famous for their design as for the product they are advertising. Absolut Vodka´s advertising campaign is the world´s longest ever uninterrupted one and to date, it comprises over 1,450 original ads.

Absolut has worked with painters and artists in all fields, including sculptors, crystal glass designers, photographers, furniture designers, architects and jewelry designers.

The Absolut website has some cool downloads including wallpapers and movies and screensavers based around the designs. Other Absolut-related websites include absolutads.com and a site with a wonderful gallery of the ads absolutad.com (yes, it is different than the other site!)

Design Resources: Lorem Ipsum

If you need some dummy copy (text) to slot into your designs while you are working on them, then use the classic Lorem Ipsum text that has been used by the printing and typesetting industry since the 1500s. Below you will find a "chunk" of Lorem Ipsum text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Although the text appears to be random latin gobbledegook, it is actually over 2000 years old and has its roots in a piece of literature from 45 BC - "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil).

OK, so that's all very interesting, but why is it helpful when designing?
Well, a person viewing a design or layout will be distracted by readable content and may miss out on elements of the design. Another reason for using 'lorem ipsum' is that it also has a fairly normal distribution of letters, as opposed to using 'This is dummy text, this is dummy text, this is dummy text" making it look like readable text.

So where do you get Lorem Ipsum text? Simply go to http://www.lipsum.com/feed/html.

Photoshop: Quick Tip - Combining Two or more Paths

This a question that I find comes up a lot in the classroom when we are covering the vector drawing tools in Photoshop. If you are drawing using the pen tool (P) and you have two or more paths that are completely separate, how do you join them and move them together?

If you want these paths to move as one unit — you can combine them. Click on the Path Selection tool (Shift + A to cycle through). Then on the Options bar at the top of the screen, click on the Combine button. All the combined paths will move together.

Web Design: Expression Web Designer - New Kid on the Block

Microsoft are getting rid of Frontpage from their Office 2007 ensemble. Replacing it, is a new program called Expression Web Designer. Unlike FrontPage, it doesn't belong to the Office family and isn't found in any of the Office 2007 bundles. This new piece of software is part of the "Expressions" line, which also includes Expression Graphic Designer - a rival to Photoshop and Expression Interactive Designer - a rival to Flash.

You can download demo versions of all three of these programs at this address: http://www.microsoft.com/expression.

Web Design: Inspiration

A great website for design inspiration is Netdiver - http://www.netdiver.net/. It is one of the sites I visit frequently and has wonderful portfolios covering Photography, Illustration, Web Design and Flash. It is updated regularly and highlights new talent with spotlights and interviews.

Photoshop: Quick Tip - Push Your Pixels x 10

When you have the Move tool (V) selected in Photoshop you can move an entire layer, or if you've made a selection, you can move the selection using the arrow keys on the keyboard Up, Down, Left or Right. Each time you press an arrow, your layer or selection will move 1 pixel in that direction. If you want to speed things up, you can hold down the Shift key and at the same time press an arrow and now the object will move 10 pixels at a time.

Dreamweaver: Quick Tip - Font Lists

Dreamweaver provides a fairly limited default list of fonts in the Properties Inspector and the various dialog boxes. If you’d like to make your own font lists or rearrange the order of the Dreamweaver lists you can do this by selecting Text > Font > Edit Font List. This opens up the Edit Font List dialog box where you can choose from Available fonts on your system to create a new list. You can also type in the name of any font, even if you don’t have it on your system in the field below the available fonts list. It’s a good idea to finish your list with serif or sans-serif – this is basically a catchall so that if you’re unfortunate enough to make a specific list of fonts that NOBODY has, you can still determine what TYPE of font will appear on your web pages.



Once you create a font list, it will appear in the places font lists usually appear and even in the code hints for CSS.

Web Design: Navigation - Models and Structures

There are several ways to set up your website navigation, depending on the complexity of your site. In the following paragraphs, I’m looking at the different models you might want to think about when developing a site.

The Parent / Child Model
This is a hierarchical model where a group of information is broken into various pages. One page is considered to be the most important and the most obvious introduction to the others. This page becomes the parent. The other pages are classed as children. The navigation flow is represented below.



So in this simple navigation system, users can browse from the parent to each of the three children and back. In this particular example, it is not possible to browse from one child to another without first accessing the parent page. This simplifies the navigational choices but increases the number of steps necessary to reach your destination. This model can of course take more complex forms, for example, each child can in turn become a parent, or even a grandparent, to another file.

The Linear Model
This model is based on traditional narrative structure, the idea being that the user starts at a certain place and follows the steps through until a conclusion is reached, for example you start reading a book at chapter one and move through the book chapter by chapter until you reach the last page.



It can be limiting on the Web and generally is only used in a context which calls for the user to carry out actions sequentially. For example, this may include completing a set of steps in a tutorial or taking a guided tour of an online art museum.

Free Navigation - Parent / Child Model

The advantage of using this model is the provision of links to virtually everywhere from everywhere else. The diagram below shows a grandparent / parent / child model with free navigation from one level back to the one above.



This works well on smaller websites with just a few pages, but it may not be the ideal solution on larger sites, as the information will be difficult to present without confusing the user.

The "Mystery" Model
Used mainly in experimental or artistic sites. Instead of providing the user with a clear path to roam around the site, there may be obscure links leading to pages whose content is not revealed before accessing them, and even then, exploration is often needed to uncover the contents. The idea is to encourage the user to play with the site. This is NOT a good model to use if you're making a site for a conservative business.

Web Design: Colour Perception

Colour perception, or how we interpret colours is an important but sometimes forgotten aspect of web design. If your website is intended for an international audience, are you aware of how people might react to different colours on your sites? Different colours have different meanings in different cultures. In the west, white is associated with weddings while in China it is associated with mourning.

Blue is generally thought to be a safe or uncontroversial colour across many cultures while purple is associated with everything from brothels in the Middle East to death and crucifixition in old Europe.

In 1931 the Swedish commercial artist, Haddon Sundblom created the image of Santa wearing RED which is now recognized all over the world. Santa originally wore green. This was part of the Coca-Cola Company advertising in 1931.



So lets take a brief look at some of the factors which influence how we interpret colours.

1. Gender: Research has shown that women are more likely than men to have a favourite colour. Generally women, like soft colours and men bright ones. Women prefer red to blue and men prefer blue to red. Women are often able to recognize more elaborate colours, that’s why you’ll hear a women describe a colour as Teal or Cyan while a man will call it Blue.

2. Religion: There are colour associations in every religion. For example Gold often stands for God's glory. Buddhists use gold to indicate sacred fire. Green is a sacred colour to Shiite Muslims and its use should be undertaken very cautiously.

3. Climate: People in colder climates have been found to prefer, cooler less saturated colours than those from hot climates who generally prefer warm, bright colours. And did you know, Eskimos have 17 words for white when talking about different snow conditions?

4. Age: Children love warm, intense strong colours. As we grow older, there is a tendancy for us to be attracted to softer shades and hues. Older people are attracted to more sudued colours, so it’s useful to remember this when designing a site for a particular age category.

So as you can see, there is so much more to colour than meets the eye. When we’re dealing with an international and diverse audience such as on the Internet, it’s something to keep in mind.

Web Design: Navigation Using Breadcrumbs

This metaphor comes from the fairytale of Hansel and Gretel, who left a trail of
breadcrumbs to find their way back out of the woods. In the context of Web
design, breadcrumbs are aids to help the user to understand where they are on a website, how they got there and where else can they go.



In the example above, I’ve taken a screengrab from Typepad. Each step that I’ve taken is hyperlinked, so I can easily trace my steps backward.

Breadcrumbs are a great way of letting your users know exactly where they are and where they’ve been.

Photoshop: Web Photo Gallery Templates using Flash

Photoshop CS2 has a Web Photo Gallery wizard which allows you to very quickly and easily create a web photo gallery. This feature also appeared in Photoshop CS, but new to CS2 is the ability to produce Flash-based photo galleries.

You can download the source files for these templates from Adobe and then customise them yourself using Flash.

Win: http://www.adobe.com/support/downloads/detail.jsp?ftpID=2961
Mac: http://www.adobe.com/support/downloads/detail.jsp?ftpID=2960

Photoshop: Quick Tip - Rename Your Brushes

If you don’t like the names appearing on brushes in the Brush Picker, for example you might like to rename “Airbrush Tilt Size and Angle 75” with a simpler shorter name, like “John” or “Mary”, or “Airbrush 75”, if you want.



All you need to do is Right-Click on the brush in the Brush Picker and choose Rename Brush from the pop-up menu. A dialog box appears and you can then type in the new brush name and click OK.

Design Resources - Fonts

There are loads of free font sites on the web. These are a list of the ones I like best. I will of course, continue to add to this list as I find more.

DaFont - A great and very popular site. Loads of good quality free fonts to download in a wide range of categories.

1001 Fonts - There are probably about, ehm, 1001 fonts on this site give or take a
few. Again there is a wide range of categories from brandname fonts to Western style fonts.

Fonteria - A large archive of fonts by several designers. All free to use.

Identifont - This is a tool which helps you identify a font from a sample by answering some
questions. It also has a section where you can download a selection of free fonts.

Design Resources - Colour Blender Tool

A great online tool to help you if you are "colour picking" challenged is colorblender.com .

The tool works by letting you pick a base colour, it will then create a "blend" of 6 colours which match or work very well with your chosen base colour. It's really easy to create a colour scheme for your designs. For example if you're working on a website you can see instantly "good" colors for text, links, backgrounds and borders. You can set the colour mode to RGB for screen based colours and get a suggested Pantone colour. When you find the colour set you like you can save your blends for Photoshop or Illustrator. Super easy to use and very fast.

Design Resources - Textures & Backgrounds

This list includes all kinds of goodies that I find useful and I'm sure you'll find something you like here too. All of this stuff I would consider to be a little bit special and even better its free!

The Inspiration Gallery - Unique and original borders, backgrounds, wallpaper.
These are not just the "usual" hideous backgrounds and borders you can
find on the web. There are some very beautiful textures and images
here.

Briar Press - Cuts and Caps
- Fabulous ornamenents and inital capital letters. You can download these vintage images for your personal use in print, web, or even letterpress projects.

Image After - Stock Photographs of Textured Objects
- This a huge collection of photographs. You can download and use any image or texture from the site in your own work. Covers everything from architecture exteriors to household objects.

Squidfingers Patterns - Over 100 different repeating patterns.

Texture Library - More photographs of textures of everything from wood to fabrics to metals.

Background Patterns - Lots of interesting, yet subtle backgrounds for use on web sites.