Editing: Crop, Rotate, Flip.
Color Manipulation: Exposure, Saturation, Tint, Black and White.
Filters: Sketch, Soft Focus.
Effects: Vibrant, Pop, Border, Vignetter Blue, Warm Vintage, Rainbow, White Glow, Soft Black and White.

As sales of Apple’s popular iPhone have steadily risen, so have the development of numerous applications for everything from map directions to tip calculators. Though Photoshop’s more advanced features such as 3D modeling are a few years in the works, Adobe has stepped in the right direction entering the mobile marketplace.

for more information please visit: www.adobe.com or

What I’m trying to say here is, by choosing to solely create your design solutions via computer graphics programs, it can limit your possibilities for producing truly unique and original work. There can be better solutions to a visual problem out there that might not even cross your mind if you are only working in Illustrator all of the time. Looking through the recent Computer Arts Projects issue 124 on “The Art of Typography,” I discovered some inspiring work from designers who are taking a different approach to design through tactile and hand constructed typography to environmental, anamorphic typography. I feel that because so much work is created on the computer today, designers are trying to find unique solutions by going back to the basics and getting more in touch with a hands on approach.

Here are some inspiring creatives who are taking this approach of design outside of the computer screen:

Craig Ward

Project: You Blow Me Away
In this project, Ward screenprinted type onto 20 sheets of 7mm glass and used a catapult to fire various objects through the glass while photographer Jason Tozer captured the shots.

Project: Creative Review
Ward uses anamorphosis inspired by work from Swiss artist Felice Varini and creates the letters CR out of tape.

Project: Hairy Alphabet
Ward was inspired to create this typeface while getting a haircut. He noticed the fallen hairs on the floor created a vague shape of a letter. He asked the barber for some hair, bagged it, and scanned hair into in the computer. This project first involves a hands on approach—gathering actual hair clippings before creating them into letterforms on the computer.

Axel Peemoeller

Project: Eureka Tower car park signage
Way-finding signage for the Eureka Tower car park in Melbourne, Australia using anamorphosis.

Karina Petersen

Project: A Three Dimensional Typeface
Another project applying anamorphosis to typography.

Marian Bantjes

Project: Flaunt Magazine cover
Marian Bantjes goes back basics and uses a fine art approach to designing the cover of Flaunt magazine with an oil painting.

Project: Stephen Sagmeister: Sugar
Bantjes was asked by Stephen Sagmeister to contribute to his “Things I have learned in my life so far,” and creates tyopgraphic work out of sugar.

Yulia Brodskaya

Brodskaya does typographic work out of paper cut illustrations.

Jonas Valtysson

Project: Sequences
In collaboration with Siggi Odds, Sven Davids, and Mundi, Valtysson used real-time art to create this typographic poster for a multimedia real-time art festival in Reykjavik. Valtysson poured milk to create the letterforms.

I know there’s tons more of examples of designers out there who are doing cool hands on work, but this is all I can think of right now. Do you know of any designers doing experimental design with a hands on approach that you would like to share? I hope this post can give designers a few new fresh ideas and inspire them to come up with new ways to approach projects.

“Rather than being eclipsed by new technologies, modern typography has become a powerful medium for visual experimentation and personal expression.  Creativity alone, however, is not enough to ensure the success of typographic communication. To transform even the simplest piece of information, the graphic designer must grasp theories and aesthetic principles that have informed visual communication for centuries.”  (Kunz, intro)

To illustrate what I am talking about, I have created some examples of how different typographic variations affect the visual quality of typography.  You can see how even the smallest adjustments will affect rhythm, legibility and the overall visual quality of the message you are trying to communicate.

Here’s a list of more variations that will affect visual quality:

Background (shape, color, surface)

Letter (Case, Face, Slant, Weight, Width, Size)

Word (Letter space,  Kerning, Baseline)

Line (Word space, Length, Direction)

Paragraph (Alignment, Interline space, First line)

Column (Number, Width, Placement, Interline space, Length)

Related Articles:

Seven Principles of Effective Typography

50 Typographic Inspirations

5 Principles and Ideas for Setting Type on the Web

However, although it seems everything is moving toward the internet these days, it’s far from over for print which is fighting back with high quality printing. Designers and printers are bringing innovation and experimentation to print design through the use of print finishes which can intensify the aesthetics and tactility of a printed product. Thus, creating more memorable work with an edge over web.

Through this blog, I hope to create a resource for designers like myself who aren’t very familiar with print finishes and are wanting to further their possibilities with print design.

“Although the application of print-finishing techniques signals the end of the production process, these techniques should not be considered as afterthoughts, but as an integral part of a design, and one that needs to be considered during the planning stage (67, Ambrose/Harris).”

Listed here are explanations of the various print finishes that you should know about. These are a compilation of the information I found in Computer Arts magazine issue 163 (pgs. 48-52), and Print & Finish by Ambrose/ Harris.

The Finishes You Should Know:

Die Cut

The technique of cutting a desired design into a substrate using a metal block called a die. The die is used to cut away specified sections of the design in order to create a decorative and tactile effect or to reveal a part of the proceeding page.

A die can cost anywhere around $100-200 bucks and up. You might want to consider wisely what you create a die for. It is most useful to invest in one if you are planning to create many reproductions of a project involving the die.

Varnishes

You may be familiar with varnishes in relation to wood finishes on furniture and decks. Essentially, varnishes for print are the same thing. It is a colorless coating that is applied to work to protect it from scuffing while also enhancing the visual effect of the design or elements within it. Varnishes can be matte, gloss, or silk/satin, and can be applied to wet or dry ink. When applied to dry ink, varnishes tend to be absorbed less.

• matte – typically used with text–heavy pages to diffuse light and increase readability. Gives a non­–glossy, smooth finish to the printed pages.
• gloss – a gloss varnish reflects back light and is frequently used to enhance the appearance of photographs or other graphic elements.
• satin/silk – this varnish is a middle option between gloss and matte varnishes. It provides some highlight, but is not as flat as a matte varnish.

Spot UV

Ultraviolet varnishing is a way to really make colors pop in a design. It is a clear liquid that is cured instantly with ultraviolet light. This treatment can make colors appear more vibrant when used as a spot covering to highlight specific areas of a design and also gives off a different texture.

Emboss and Debossing

An emboss or deboss is type of treatment where a die is used as a stamp that impresses a part of a design into a substrate to enhance that particular part in the design. This creates a three-dimensional, decorative and textural element to a design.

An emboss is a raised impression while a deboss is a recessed impression. Embossing and debossing can be done with ink, foil or without either which is called a blind emboss/deboss. Embossing and debossing typically work better on thicker paper weights than light ones.

Blind Deboss

Foil Blocking

Foil blocking is a process where a colored foil is pressed onto a printed piece with a heated die. This separates the foil from its backing and allows it to adhere to the printed material. A foil block can also be known as a foil stamp, heat stamp, hot stamp, block print and foil emboss.

You might want to try out some special types of foil blocking like a holographic foil or a mirror foil which can help emphasize surrounding colors in a design. A mirror foil can add a nice shine in contrast to dark imagery.

holographic foil

A cheaper way to achieve a similar effect to foil blocking is to use metallic inks which have a reflective property, however, it is less reflective and eye catching.

Overprinting

This is the process of printing one color on top of another creating an interesting visual effect by having the colors interfere with one another.

Designed by Delicious Design League

Lamination

A thin film applied to one or both sides of a printed stock. Lamination can be gloss or luster and has several benefits. It helps increase sheet stability or rigidity, protect work from moisture and handling, and can make work waterproof and tear-proof.

Helvetica 50 project workbook. Designed by Breakmould design agency

Folds

You don’t always have to do the typical valley fold (folding your paper in half). Different folding methods can help present your work in creative and visually interesting ways. Think about what would appropriate for your project and your budget.

• French Folding – In a French fold, the paper is printed on one side and then it is folded horizontally and vertically to create a four-sided, uncut document or section.
• Throw outs – A folding and scoring technique that is bound into a publication to give extra space to showcase a particular image or visual element. Usually found in magazines.
• Gatefold – When a sheet is folded into four panels and placed into a publication so that the left and right panels fold parallel and inward to the spine without overlapping. This kind of fold is useful if the spread has a large key image or a lot of content to be displayed.
• Accordion / Concertina Fold – This fold comprises two or more parallel folds that go in opposite directions and open out. This folding method enables many pages to be collapsed into a smaller size publication. (88, Ambrose / Harris)
• Roll Fold – A roll fold is composed of a series of parallel valley folds, which are further folded into one another. (90, Ambrose / Harris)

French Fold

Self Promotional Book by Nikolaus Schmidt

Designed by Davidesign

Gatefold

Triple Darkness Music Packaging by Sawdust

Roll Fold

Designed by AV Browne

Accordion / Concertina Fold

Multi Concertina Folding by Clinical Print Finishers (U.K.) LTD

This site found on The Designcubicle, provides instructions for properly folding using these techniques.

Perforation

Perforation (or perf cutting) is a process that creates a cut-out area in a substrate, which weakens it for detaching. (108, Ambrose / Harris)

The dos and don’ts of working with combination finishes (52, Computer Arts issue 163):

1. Spot UV and Embossing
   Spot UV combined with embossed elements can look great, because it seems to lift the embossed portion off the page.
2. Heavy gloss lamination and light stock
   Light stock that is only laminated on one side can cause curling. To solve this problem, change to a heavier stock or laminate both sides.
3. Spot UV and lamination
   Unfortunately, spot UV won’t work with lamination because the heat process interferes.

How to prepare your file for a print finish

Generally speaking, from my own experience and from what I have heard from other designers, I have found that schools aren’t really preparing design students well enough with the knowledge of the printing process and how to prepare files before sending them to a printer. Learning how to prepare your files properly will make things run more smoothly when working with a printer.

If you ever feel unsure about how to accomplish a particular treatment in a design, it is best to sit and talk with a printer. It is important to communicate with your printer to ensure that a project will come out as planned.

Liz Anderson, from AlphaGraphics on Michigan Avenue in Chicago, gave me some valuable advice about working with a printer. She suggests to:
• Involve a printer as early on as you can when working on a project. You can send the printer a PDF of your work in progress just to see if what you are planning to do will work with what the printer can offer and also can give you an estimate of the cost of the treatment(s) you may have in mind.

Setting up your files for many of these print finishes is easy to do and they are pretty much done in the same fashion. For example, you can set up a diecut, emboss/deboss, foil stamp, and varnish all in the same way.

There are a couple of ways you can go about doing this:

1. The first method consists of making separate files for the design content. For whatever treatment you are planning to do, make a file that only has the element(s) that will have the particular print finish. Then, make a separate file that contains the rest of the design EXCLUDING the element(s) meant for the print finish.
   Example: Lets say we want to make “Push” embossed in this poster.
   
   Make a two separate files. One file containing “Push” for the emboss and a second file with everything else.
   
2. The second method involves only one file and is simply done by separating the area to-be-treated from the rest of the design by putting it in its own layer. Just indicate to the printer that the particular layer is meant for the print finish.

In this image, “Push” is in its own layer to distinguish it as what will be embossed.

You can ask the printer if he or she has a preference on which way to approach preparing your files.

Setting up for a fold or perforation:

If you are planning to have a score made for a fold, or perforation in your design, it seems easy to go with the second technique mentioned above to set up your file. In the native file, just create lines as guides on a separate layer and name them as score guides/perforation guides/ or whatever so that the printer knows what they are for. Keep the visibility of this layer with these guides off  because you don’t want them to appear on the finished product when printed.

Good luck, and I hope this gave you some insight on some techniques you might not have known about. Feel free to contribute any advice you may have on this topic or any sites you feel are good resources. If any of this information presented is inaccurate, please correct me. This article is supposed to be a resource for those like me who are learning. Thanks.

Related articles:

8 print finishes to spice up your print work by Brian Hoff of thedesigncubicle
Print Finishing from fullcolorprinting.co.uk

Sources for examples of beautifully made print work.
Take a look at these and find more implementations of print finishes.
Print Inspiration: 40 Hidden Gems by Francesco Mugnai
GraphicExchange > Print
Beautiful Brochures and Booklets by Smashing Magazine
Stationary Style

Sources for this article:
Ambrose, and Harris. Print and Finish. Switzerland: AVA Publishing, 2006.

Walsh, Jason. “The Finishing Line.” Computer Arts Magazine. July 2009: 48-52

Liz Anderson, from AlphaGraphics on Michigan Avenue in Chicago

Many of my students are stumped when they come across applying perspective to a simple vector object in Adobe Illustrator (in this case, CS3).  Using the “Free Distort” filter seems to be the solution that many use.  However, those of you who have tried this solution before know that it takes a lot of trial and error.  It can also produce unwanted results.  The simple, yet unfamiliar, answer is using the Free Transform tool (E).

Free Transform Tool (E)

The reason that so many designers do not know how to use the Free Transform tool is because of the extra keys that are used with the tool.  The option, command, and shift keys are needed to use the Free Transform tool correctly. Below is a step by step tutorial on how to apply perspective on a logo:

1. Select your vector logo with the Selection tool (V).
**If you are using type, it will need to be outlined  (shift + command + o).

Below are more examples of using perspective.

Thanks!  I hope this helps fellow designers!

Useful Links:
More on the Free Transform Tool
Warped Perspective
Drawing Perspective
Vectorizing

View the Demo
Get the Source Code

Design a Unique Grungy Website Layout
The web is filled with grunge web tutorials well here’s one. We like this not so much for the overall result but it is a good tutorial that can be used in many different ways.

Real-time Face Detection in Flash 
Now this is just cool. The future is here. 

View the demo
Grab the source here

43 Creative Examples Of High Quality Free Icon Sets

Other Great Articles:
11 Non-Traditional Uses of WordPress 
Avoid the Apple Tax – Cash in on the value of Windows 
Using CSS Zen Garden As A Teaching Tool For New Web Designers
Blog comments design considerations
App Review: Amplitude — Your iPhone as a Covert Surveillance Tool
101 Design resource sites

Anatomy of a Web Page

The elements of a web page are like organs; they are vital to a properly functioning and aesthetically pleasing web page.

These are the main elements of a web page. There are many different ways to organize them but this is perhaps the most common basic layout used online.

Container

All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies. For example, the body tag or a div is most commonly used. In the past, even a table has been used (do not use a table as your page container, it is a depreciated method). Think of the container as the external walls of your house in which your bedrooms, kitchen, living room, etc. are then placed.

Types of container:

1. Liquid: Expands to fill the width of the browser window.
2. Fixed: A specific width you choose which does not change regardless of browser window size.

Header

The header isn’t really a specific element although some may consider it to be. It is more generally used in referring to the top section of your web page where your logo, navigation, tagline, etc. are located. Many people prefer to keep these elements contained within a div for easier page styling, element separation and/or element containment. The header would be considered a container so it would have two types to choose from: liquid or fixed as mentioned above.

Logo

Your logo is your identity and branding. The most common placement for the logo is within the header, aligned left. We read from left to right, top to bottom, so your logo will most likely be the first element your visitors look at.

Navigation

Page navigation is one of the most important elements; your visitors need it to use your website. It should be easy to find and use, which is why it is almost always located within the header or at least near the top of the page. Sometimes both types of navigation are used for high content websites.

Types of navigation:

1. Horizontal: A series of links displayed inline, usually referred to as “navigation”.
2. Vertical: A series of links displayed as a vertical stack, usually referred to as “menu”.

Main Content

As everyone knows (or should), content is king! When people visit your site, this is the element they will be looking for primarily. It should be the main focal point of a web page so visitors find what they are looking for quickly.

Sidebar

The sidebar is the element with your secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc. This element isn’t necessary although many websites use it. It is most often right aligned but can be left aligned or both (two sidebars) so long as it doesn’t disrupt main content viewing. For websites that use horizontal AND vertical navigation, the sidebar is often replaced with the vertical navigation element.

Footer

The end of a web page should always use a footer to let your visitors know they have reached the completion of your web page. Like the header, the footer isn’t really a specific element but more of a containing section. Within your footer will be copyright, legal and contact information primarily. It’s a good idea to include a few links to the most important sections of your site such as the top of the page, home page, contact page, etc. Some websites use this area as an opportunity to mention related material or other important information.

“Whitespace”

This is any area of the web page that is not covered by typography or other content. You may feel the strong urge to fill as much empty space as possible but don’t do it! Empty space is just as important to a good web page design as the content to be used. You can see how the blueprintds.com site uses empty space very effectively to help guide visitors through content, create page balance and give a good sense of content separation.

So that covers the anatomy of a web page. 

Source: NETTUTS

Below is the most comprehensive list of links to many different business card design posts. These unique designs can help you get started thinking of your own design and make your card stand out amongst the rest.  

Click the links/pics below to visit many design posts.

Link #1

Link #2

Link #3

Link #4

Link #5

Link #6

Link #7

Link #8

At Blueprint, we consciously implement certain design principles that further promote and assist our clients in creating more revenue. Depending on their goals, I tend to place an emphasis on certain things. By working on designs for Augustino’s Rock and Roll Deli, Morgan’s, St. Andrew’s Inn, The Original Mitchell’s, Real Time Sports, and Howard Street Inn, I understand the importance of menu design. The other day, we stumbled upon a great article that confirms this. (Thanks, Stephanie)

From www.restaurant.org:
Reading Between the Lines: The Psychology of Menu Design
Does your menu attract or repel diners? Experts offer suggestions for effective design to help unlock your menu’s selling potential. By Beth Panitz Read More.

And for more info on our services, including web design, feel free to drop us a line.

We’ve finally removed the dust from our preview site.  After years of updating a single HTML file every time we started a new project, we’ve caught up to our clients, and our main site.  We’ve switched over to a WordPress powered portfolio.  Even though we’re all quite competent at mucking around in HTML and FTP, WordPress is just easier.