Photo Montage Fun

A montage can make an excellent design element for nearly any type of material – print, web, or even a beautiful piece of displayed art. For the designer or artist, this type of project may be a little challenging, especially the first time. However, with a little practice and a keen eye, the final product can turn out to be a masterpiece.

I have been in the graphic/web design industry for over 8 years. One of my most challenging and rewarding creative endeavors was that of the montage. I found that the elements that go into the creation of a montage are far less important than the ability to place them and seamlessly blend each element into one another. After trial and error, I finally managed to get it right. I learned that I could take digitized photos, no matter what quality, subject matter, or else and combine them into an interesting piece of art.

In addition to skill, the designer must have the right tools. There are many pieces of software available to designers, I happen to prefer Adobe Photoshop for this type of work.

So, where do I begin? Photos. I like to select three to four photos to begin with. After selecting the photos, I place them on the stage. This is one of the important steps. When working with multiple photos, the designer must be sure to balance them. (fig. 1) There should be a natural flow in the focal points of the photos. If there is not, rearranging may be in order, or try selecting a more compatible photo.

Once the photos are posed, the fun begins – masking. Layer masks in Photoshop are an effective way to produce different results that can be manipulated on many levels. It might sound easy at first, but…there is a trick to it that a person must discover for their self through trial and error. Even now, it often takes me 2 or 3 tries to get each photo exactly the way I want it. I start by selecting the photo that I want the others to blend into. For this project I chose the center photo. On the other two photos, I added a layer mask and used the airbrush tool to create my blends. After airbrushing, I put a ‘screen’ on the middle image in order to complete the effect. (fig. 2)

So far, the composition is nice, but there is still something missing. Notice how the color differentiates between the photos a little too much and does not create the streamline effect I am looking for. At this point, I am going to merge and convert the photos to grayscale (fig. 3) so I can then add a filter, to get the “rustic” look I’m going for.

I’ve added the filter, and now have decided to add some text to the montage. At times, I may add only a word or a symbol or I may add a large quote, it all depends on the montage theme. For this piece I’ve included a small quote and title that fits well with the rustic theme I was going for. The text breaks up the piece as a whole and also adds a design element to the composition. (fig. 4)

In the end, my composition turned out exactly how I wanted it to. Any designer can realize the ideas in his or her head and at the same time have fun creating it. The end result is well worth the effort.

About The Author

Leslie Fredericks-Leamon has been in the web design business for 8 years. During that time she has freelanced as well as taken full-time in-house design positions. Currently Leslie runs a freelance operation under the name of Muz Media, located in Cedar Rapids, Iowa. What started out as primarily a web and graphic design studio, Muz Media has turned focus onto other aspects design and development, such as multimedia, SEO and online marketing, and integrated them into the business, bringing many important elements of web-presence to our clients without the politics of a large advertising agency. www.muzmedia.com

14_1

14_2

An Artistic and Resourceful Website

Introduction

The Drawing Center is a dedicated online art gallery that blends historical and contemporary art. This website can be a good resource for all creative artists.

Form

The front page invites the user to venture into the neat and clean website. The colors used in the site is very calming, check consisting of red and grey. The logo is text based and eye soothing as well. Navigating the site is a pleasure which can be simplified to match with the overall theme of the site. However, online I realized that the page alignment could be more effective in higher screen resolution.

– Simple and multi facilitated menu on top of the page for easy navigation.
– Vivid fonts with excellent color combination for titles, ambulance sub titles, links etc goes well with the theme.
– Consistent standard footer.

Function

The site is very informational. From exhibitions, publications to membership details, it basically covers everything that an artist would like to know. The intelligent use of images and photographs on different categories breaks the monotony of the site and gives extra value to the text. Though the contents are well presented, I would like to see abit of variation in terms of color or layout because after spending 15 mins reading the text, I felt abit bored.

The name of the web designer or design company at the footer could have been avoided. Let the work speak.

Conclusion

This website has succeeded in the artistic representation of the subject, giving full justice and launching pad to prevailing art in the ancient backdrop. However, more design elements could be used to spice up the site. I really hope to see more surprises.

www.drawingcenter.org.1

www.drawingcenter.org.2

Illustration in Adobe Illustrator

When I first began my own business, Short And Sweet Web Design, I needed some mock ups for my website to show my clients what I was capable of. As my business caters to both corporate and personal websites, I felt that a page of illustration and customised graphics would help sell the personal website services.

I decided to make up a page showing my baby’s first Christmas, which would allow for lots of colour and design possibilities. While I have been partly university educated in art, I usually find that I put paint to paper a lot less these days, especially when software programs such as Adobe Illustrator CS can help me do the job even quicker. So long as I remember to press the SAVE button…..but that’s another story!

Obviously, being a Christmas webpage, I thought I would use Christmas colours and a few complimentary colours. The first thing I did was to close my eyes and imagine a very colourful page. Initially, I tried experimenting with red and green page backgrounds but it looked a little too gaudy, so I finally settled on making the illustrations gaudy and the background a lighter blue.

As illustration takes a lot longer to do than almost anything else in design, I wanted to do something a little different. Instead of a traditional pine Christmas tree, I created a topiary tree and decided to follow the style of Bob Staake (www.bobstaake.com) which had interested me in the past.

After perusing Bob’s website once more, I decided to come up with the elements of the design (eg, Christmas tree, elves, holly etc) and drew up a few disjointed illustrations in Illustrator (see page of bits on right). My usual process is to sit, look and play with the bits until they form a coherent whole. For example, I believe it took an hour to make up my mind to have the topiary tree, the background and the elves as part of one illustration.

Once the separate parts I had created were combined, I was able to fill in the blank bits, such as adding the box of presents, the lollies and the plum pudding.

Illustration is one of the most relaxing forms of design, especially if you have time to do something for yourself! Often I find with creative projects like this that some sort of image comes to mind before I even begin (in this case it was a bit of a hazy image but worked in the end). I would definitely recommend using digital media as a medium as you can resize the images for print and web, and easily put them into any setting, especially if you don’t want to be bothered taking out the background!

12_1

12_2

12_3

Blister Packaging

One of the best things about working in an advertising agency is the variation of work available. I was able to work on blister packaging for Wattmaster tools as part of a product-launching campaign.

Questions I asked myself before starting the job included:

1. Was there any corporate branding or style manual I was to use?
2. What materials was the packaging to be printed on?
3. Were there any specifications/cost limitations regarding printing?
4. What size and shape were the items to be packaged?
5. Were there any other requirements for the packaging?

1. Style Manual

In this case, decease I was furnished with a style manual which provided me with CMYK corporate colours, the logo typeface and examples of how to implement the corporate banding (see image). Formulae were created to help adjust the corporate banding to the size of the package.

2. Materials

Printing was to be in Asia on a four-colour printing press as it was cost-competitive. The CMYK printing was on a card backing and the transparent plastic blister would seal the item to the backing.

3. Printing Limitations

I felt that by printing in the least amount of colours possible (ie, the corporate colours on the front and black on the back) would help cut additional plate costs, hence by converting all CMYK to spot colours, were were able to use two inks and two plates instead of four of each. This process can help with most printing jobs except digital ones. It is also handy to use spot colours to get the exact hue and shade of colour that is required.

4. Item Shape & Size

The client provided the actual items to be packaged, so it was easy enough to measure the items and create mockups to sit the items on. The main problem was fitting the subheadings aroung the blister packs, so we made some backing larger or text smaller and maintained the rest of the corporate style for all packs.

5. Other Requirements

The packaging was destinied for a retail environment and required barcodes, product line numbers and hooks. I used a simple program like Barcode Pro to create the barcodes (the client supplied the number) and designed the rest in Adobe Illustrator CS as it helped to have vector images available for resizing. I designed the hooks in white on the front and black on the back to help them stand out in mockups. The client provided the product numbers, which I typed in on the bottom of the packaging. For the final version, I removed the hooks after printing a draft for the printer, and also added bleed on all edges. The files were sent as Illustrator .ai and .eps files, along with a hard copy to the printers.

Packaging was a fun experience for me as it was the result of months of cumulative work for the same client and it was great to get mockups organised quickly by using formula and specifications for a change instead of free art. There was always an oddly shaped item which made everyone rack their brains for packaging ideas, but we got there in the end!

10_1

10_2

Nice Craft Site: Knitty.com

Introduction

Knitty, ambulance the quarterly publication, prostate is dedicated to the art of knitting. Members can find patterns, pharm articles, and tools related to the craft. Kitty.com is a nice website for the knitting artist or hobbyist and is packed full of information – though navigation the site may be a bit of a challenge.

Form

The Knitty brand is very effective for the particular subject matter at hand. The logo exemplifies creativity in a casual text, with a witty tagline “little purls of wisdom”. The logo and tagline are prominent on each page, creating a consistent brand. In my opinion, the name and presentation is an excellent choice and is easily remembered by a passerby.

As the user ventures off of the homepage, the brand encounters a few hiccups. The “Feedback” page, for instance is nothing like the other interior pages.

The design of the website is a 3-column design with top, left and right navigation. The homepage is predominantly allocated to a large photo, expressing a featured project in the current issue. In my opinion, this is a huge waste of valuable real estate. (fig. 1) I would recommend scaling down the photo and adding some descriptive text and links that correspond to the particular issue – similar to what is found on the “Features” page. (fig. 2)

There also seems to be unnecessary space separating the three columns. This type of padding actually breaks up the page and makes it seem incomplete. I would like to see a border on the right and left of the column, with the three columns flush to their respective anchor elements. For example, push the right hand column up, making it flush with the navigation bar.

The vibrant color scheme promotes the site objective and gives it a fun but dignified feel. The color scheme for the left and right columns, mainly black background with white text, could use some attention. Trying to read white text hosted on a black background puts quite a bit of strain on the eyes. The text itself is presented in a non-standard font and adds to the difficulty in reading. I do like the effect the black gives in relation to the remainder of the presentation; however, I think it can be placed elsewhere in a less important area to achieve the same effect. I recommend creating some section within the body, possibly to highlight a feature and use the black/white color combination. A little of this goes a long way.

The interior pages of the website follow the lead of the home page, with one exception. The “Feedback” portion of the site is nothing like any other page. (fig. 3) I highly recommend replacing this page with one that fits with the theme of the other pages.

Function

The navigation on the website is fairly straightforward and easily accessible. The top navigation links directly to interior pages without the need of dropdowns or sub-category menus. The left and right hand columns on the home page house additional ‘feature’ options as well as legal and other standard informational links.

Though the navigation is easy to understand, the choice of using non-standard fonts makes all navigation areas difficult to read. Even at a resolution if 800X600, words and links are difficult to decipher. (fig. 4) Though I like the choice of fonts, I would like to see their use minimized in order to create a more user-friendly interface. These fonts would be appropriate as attention grabbing text (in a larger font size) and would aid in the overall feel of the website.

Knitty does not show any type of self-promotional areas on the home page, or include any standard section on any interior pages. I would like to see more attention drawn to joining the members’ area and even submitting articles. The existence of the “Knitty Shop” is left to the user to discover. Simple advertisements are a great way to promote areas such as these, and one doesn’t need to be a master at marketing to develop them. For example, a simple ad with the words “Shop Knitty Now” with a nice little graphic and call to action would work well – especially if it appeared on each interior page in addition to the home page.

Advertising and promotion are very easy to accomplish. Self-promotion may not turn your business into a goldmine, but any advertising is better than none.

Conclusion

Knitty.com has the right attitude and outlook for creating a very nice, community driven website. With some attention to problem areas, such as fonts, lack of advertising, information flow (particularly for the home page) and some color considerations, the website could easily come together as a nice presentation for the art of Knitty. This website is loaded with information and any knitting artist or hobbyist would be in heaven.

www.knitty.com.1

www.knitty.com.2

www.knitty.com.3

www.knitty.com.4

Wow Website

Introduction

Lego.com is a reputed online toy store and community website with very handsome traffic. The journey throughout website is exciting and I am sure many kids will be attracted by it.

Form

At a first glance, the website looks very cool, giving the user a pleasant impression. Flash animation is part of the website, although the website is still loading very fast. The logo and graphics look awesome and striking. Anyone can understand what they are trying to say and the service that they are providing.

Lego.com brand is uniform throughout the website. The top menu is consistent for each and every web pages, providing a cool surfing experience. Relevant colorful icons are used in the top menu to enhance the navigation system. The web site is designed for English and Deutsch version and it looks extra-ordinary on each and every page.

Overall, the design is clean and neat. Creative Images and colorful icons drive the theme of the site. Flash Animation on the homepage shows that the website is updated on a regular basis.

The color balance is good and very effective for catching the user’s attention especially for kids. All the images are optimized very well and the positioning of each images are planned properly.

Function

The Navigation system looks very nice, but from SEO point of view, it is not suggested to use images in the navigation system. Alt tag is not used on images. But, other than that, it is awesome.

– The Quick links enhances the navigation system. It provides all the necessary links to user with different topics like products, club, shop and legoland.

– The Powerful search facility provides easy solution for users to find stuffs on website. There are 2 search boxes, one on top and the other at the bottom section of the site.

There are 2 sections on their homepage that are reserved for product promotion. The Featured product is packaged in an attractive flash animation, which is update regularly. “What’s New” is a section that includes promotional news with images and links which is again, another good example of product promotion.

Conclusion

Lego.com is very nice and the most professional looking website I ever seen. The navigation system is easy to understand, images and flash animation is extra-ordinary, simply awesome. If I were to give a rating to it, I would say 10 out of 10!

Design and Look Taking A Back Seat

Introduction

The Internet Society of Australia (ISOC-AU) is a non-profit society which promotes Internet development in Australia for the whole community. ISOC-AU is a chapter of the world-wide Internet Society

Function

This is a site that clearly embraces accessibility as a key concern, nurse stating right at the start that it supports international web accessibility guidelines – see http://www.w3.org/WAI/. Creating a site that is accessible is so important, not just so that disabled users can access the site, but also so that your message can get through to people no matter what computer, what browser, or what plugins they are using. The flipside of this is that accessible websites aren’t the most attractive of sites and can scream normality.

Accessible sites often means that a specific design or look has to take a back seat – text size, font, and hence layout need to be chosen by the user’s settings rather than the designer’s aesthetic sensibilities. That’s not to say that it’s impossible to create a beautiful and accessible site – it shouldn’t be an either/or situation – just that a lot more thought and flexibility needs to go into planning.

Form

So, how does ISOC-AU stand up to these challenges? Design-wise, the site does look very ‘normal’ – a very simple HTML text-driven site using simple tables and anchor points and bog-basic links. The choice of colours compliment the logo, and the few photos used add a feeling of friendliness, though hovering over images with the mouse doesn’t reveal an .alt tag – this is a very useful function for blind users as speciaised browsers can be set to read out the image descriptions.

The design, such as it is, is consistent throughout the main sections of the site, but on further browsing you find pages and documents with different looks and uses of typeface. A great deal of information and resources are available and parity seems very important – meetings are minuted and accessible to all. As the site is text-based with lots of links, Google ‘spiders’ (the little mites the search engine giant uses to index pages) will love every page and is more likely to give it a good rating. Interestingly, the Society says that a similar method is used by spammers to detect email addresses and as a result, the ISOC-AU site shows all contact addresses as ‘bill(at)hotmail.com’ rather than ‘bill@hotmail.com.’ This is all well and good, though it prevents you from simply clicking on a link to email someone.

Navigation is available throughout the main headings, but clicking for more information often leads to another page with no navigation. There isn’t much ‘flow’ to the site, and it is easy to inadvertently skip to other sections. Unfortunately, as there is no breadcrumb menu (eg. Home > About Us > Objectives of the Society) and the section being browsed is not highlighted, so remembering where you are can sometimes be difficult – especially when clicking to a link for another, very similar looking site. Other solutions to this could be using frames or opening some content in a new window, however both these options have accessibility issues.

Conclusion

Sometimes a victim of its good intentions, the site clearly communicates what it is about from the start. The main sections work well, though on further browsing things can get more labyrinthine. Adding a breadcrumb menu would really help matters, as would a clearer structure and a site map. For a society focused on the internet, it’s surprising that an enthusiast hasn’t created a more effective site.

Popular Digital Picture Frame Website

Introduction

Introduce the website. You can also write about other things like your initial impression, nurse the popularity of the site and so on.

Content

This site immediately reminded me of the adverts that fall out of your Sunday newspaper supplements, and rather appropriately it’s for an unusual gadget. Ceiva is essentially a digital photoframe, showing a slideshow of images that can be directly uploaded from a landline (USA only), receiving images from emails or mobile phones. Whilst they have taken great care to aim the marketing to all generations, the underlying message is that it is for grandparents who don’t want a computer in the house, but want to receive images from their family.

Given this subtext, I felt the site would benefit by being pared down to reflect the simplicity and ease-of-use of the product. Instead, I felt barraged by marketing information – there is a great deal to read here for one product, and they don’t miss an opportunity to sell, sell, sell. However, the site has obviously been put together by people who know what they are doing: there is a clean, consistent look throughout the site; the Flash transitions/animations are effective; and features such as registering and uploading images work quickly and efficiently. The light blue colour scheme goes towards opening up what could be a claustrophobic site, as does the choice of stock photography, though using these anodyne images loses some of the personal touch the site could really do with. There may soon be redemption as the ‘community’ page, which mainly contains newsletters, claims it will soon have a section where people can upload their own images – this would really boost the friendliness factor.

Functionality

Navigation through all the information works very well. Simple rollovers of the main sections are on the top of every page, revealing subheaders. There is also a listed site map at the bottom throughout browsing, making it easy to hop around. There is a comprehensive FAQ section with a search option and was easy to navigate in itself.

In the members section, you are able to send images to other emails and your contacts who own the Cevia – and so is an important portal for consumers. Uploading images is very easy and a very similar process to adding an email attachment, though the site doesn’t optimise files, so if a large image is sent through, it could take a very long time for the person owning the Cevia to upload via a dialup connection. The option to upload an image to send to an email address worked quickly, though you have to hit a link to their site and view a slideshow of the uploads (including a frame promoting the product), and it is difficult to save the files. This all seems somewhat superfluous as you can easily use your email provider.

Conclusion

The site is crisp, yet cluttered and would benefit from a good editor to create more focus on the product from the start, rather than the offers. The site’s corporate look and desire to sell sometimes overshadows the message of community and warmth that the product is meant to bring. Paring down the information and giving it space to breathe would go a long way.

www.ceiva.com.1

www.ceiva.com.2

Website With Professional Touch

Introduction

The British Council is an organization in the UK that builds mutual cultural relations with the UK and other countries, treat promoting education, ambulance art, science and culture. BritishCouncil.org is an excellent, user friendly website packed full of information and visual artistry.

Form

The British Council brand shows the prestige and interest of the organization without being presented as ‘stuffy’ or pretentious. The royal blue against a white logo is a nice contrast and sets the stage for an aesthetic theme throughout. The logo itself is simple in design yet gives the British Council a strong image.

The only brand element I would like to see, in addition to an attractive logo, is a tagline. On the home page, the words “Creating opportunity worldwide” appears to be the tagline to use, however the presentation of this may inhibit the message. (fig. 1) I specifically set out looking for a tagline and unconsciously ignored this particular header many times before finally reading it.

The design of the website, a standard 2-column throughout the website. On the home page, the addition of photos and design elements create an artistic presentation though do not distract from the purpose of the website. The balance of white space to design elements allows for proper flow of information. The user is able to visually move freely from section to section without confusion or difficulty.

The color scheme consists of royal blue and various shades thereof. As one of the most popular colors, blue is known to promote calmness and relaxation, as well as professionalism. As a branding principle, this color works very well for this genre of website.

The photos are professional and relevant to content available through the website. I would however, like to see the media component transition a little smoother. The ‘jumpiness’ of the transitions can be a little distracting.

Function

The navigation options are straightforward and contained in easy to find areas of the website. On the home page the top navigation bar is directed toward the user’s interest in the British Council opportunities and education. The bottom navigation bar is dedicated to the organizational aspect of the British Council. By separating the interests and the organizational aspects, the user can easily navigate to any desired section.

The JavaScript menus in particular are very nice and eliminate ‘link clutter’ that is found on other websites. The design is clean and the code seems to be well managed, producing a streamline, non-glitchy menu.

One element of the navigation that I particularly like is the very top text tools that give users frequently used options such as Print, Email this page, Add to favorites, etc. (fig. 2) This feature is very nice for this type of website, and the Text only option is superb – giving access to those who have dial up access, or just wish to navigate the page without being distracted.

Once the user has left the homepage, particularly through the top navigational menu (Arts, Science, Society, etc.) the website navigation changes to topic specific navigation. (fig. 3) I like the themes and variations on specific topics, however, the main navigation from the home page no longer exists, nor is there any immediately noticeable way to get back. I would like to see at least a link that specifies “Return to the British Council Home Page” or something to that effect.

The advertising and promotion on the website is predominantly found throughout. On the home page, there are four components that represent good methods of self-promotion. (fig. 4) Each of these mini-sections is effective in creating user interaction by allowing them to watch a streaming video, find out what countries are involved with the British Council, send an E-card, or other. Given the unofficial 3-second rule (the online standard of interesting the audience in 3 seconds or less), the user is immediately given something of interest to ‘click’ without feeling forced to read information.

Conclusion

Overall, the British Council website provides a clean, effective, and efficient presentation method for providing the wealth of information and opportunity they provide. The organizational structure is well managed and the entire site is aesthetically pleasing and user-friendly. With some minor adjustments to the navigation on interior pages (or interior sites, to be more exact) the user will have no difficulty exploring and learning.