Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 22 2013

11:57

Solutions for Creative Brand Marketing

Advertise here with BSA


There are only so many various methods for getting your company out there in the world. To be recognized among a global audience is spectacular, if you can manage to keep people interested. Running your own website is a challenge and branding is the key ticket for natural marketing. People who are able to associate with your website are more willing to share it around and jump on board.

In this brief article I would like to share a few different resources for creative branding. All of these ideas are more geared towards marketing, which can take a lot of time and practice to get it right. But when you start landing new interested people it is definitely worth the time. I hope that these resources may provide a good starting point for webmasters looking into brand marketing.

24 Hour Print

In the latest craze of online printing services we can find 24 Hour Print. This is a beautiful product with a truly honest turnaround time – one day for your product orders. It really is fantastic! I have been impressed with not just the design, but also the quality of their products. After going through some of the examples it is clear that you may select from a wide range of print marketing materials.

24 hour print printing services online internet shipping

With enough money you can have same-day business cards shipped right to your office. This is a brilliant strategy because you are paying for the expedited services while also managing your own overhead costs. The design work should be done ahead of time so that way you have branding which is already recognizable. If you want to get into deeper ideas why not purchase design brochures or bumper stickers?

Online Portfolio

Does your company have any products or designs to show off? It may be worthwhile to setup a small online portfolio on websites like Carbonmade. This is a brilliant open community for designers to setup their own portfolio of creative works. But it can also be used by companies and other businesses, too.

By generating an online portfolio you will have time to practice this branding. You can see what works and what doesn’t. Plus you’ll have the fun time of rooting around for older projects worth posting on the site. And then when people search your company name in Google, you can expect quite a few search results.

carbonmade portfolio website online theme projects internet

Targeted Advertising

The final big point you might want to try is webpage advertising. This means you would pay an agency or network a fixed price to run your ads on a website or group of sites. Many Internet marketers will swear by Google AdWords which is a fairly common solution. But it also requires a bit of planning to get your ads placed on the right websites.

Each payment is done by click, and you invest a certain amount of money into your AdWords account for this service. Then people are driven to your website and may check out other stuff online. It is a great marketing plan because you can directly implement the graphics/branding of your website into the advertisement.

Final Thoughts

The Internet is a large place with a whole lot of people. It can be tough to draw in crowds interested in your website. But just keep in mind how various marketing endeavors often end up running themselves with enough traffic. If you truly believe in your product then keep at it! Others will notice your determination and it will provide a lot of benefit to the community.

March 31 2012

17:00

Answering a Designer’s Question: Should I Choose Web or Print?

Print and web are both huge areas of design and mean a lot in today’s world. Print has been with us for more than 100 years and we know pretty much everything about it, while web is a new area of design that became mainstream about 10 years ago. Before this, web design was totally unknown and only experts and developers knew its potential and helped it grow to how we know it today. Both areas of design have advanced so much in the past 10-15 years that they started to cross each others paths and while this can be beneficial, it can also create problems. We will talk about the advantages and disadvantages in this article and also about how the two areas of design differ from a designer’s perspective.

Main difference

The biggest and easiest difference to spot is the experience you get from them, which are quite different from each other. Reading a newspaper is totally different than browsing a website. Even reading a book is different than reading an ebook, although the process is the same.

While web design is usually made to be displayed on a screen, which can vary in size, print designs can be huge such as posters or ads. And while the user interacts with a website, it is impossible to interact with a newspaper or a poster. While web design creates an experience based on the user movements (clicks and scrolls) and can’t exist without user interaction, print design creates the experience through readers’ eyes moving around and searching for information.

Image by josephbradleycooper.

Canvas versus screen

Both mediums take into account the demographics of the audience, as they are very important while designing, creating, advertising and selling content. A detail worth mentioning is that designers use the same elements and concepts in both mediums: fonts and colors are the best example. While it is easier to play with them on a computer, therefore easier to use in web design, don’t forget that newspapers are also created on computers before being printed out. This means that pretty much everything you can do on a computer can also be done in a newspaper. Yes, to some extent.

  • Monitors come in different sizes, therefore designs have to look good on all of them, or at least on most of them.
  • Moreover, there are even more browsers and operating systems, all with their own rules which influence the way the code is interpreted.

While those issues exist and don’t seem like they’re about to disappear anytime soon, all web designers learn to work around them and just move on. Being able to provide cross-browser websites is actually an asset for a web designer today.

There are, indeed, some restrictions on the web due to technologies such as HTML5, CSS3 or JavaScript, but great design is created within restrictions given by a client or by the medium. And there are constraints in print as well, such as the size of any given newspaper, book or canvas. You can’t scroll on it. While the print uses a lot of paper for only a newspaper, the online magazines use bandwidth, a host and a domain which need to be renewed periodically. Both have advantages and disadvantages, but since the web went mainstream, less and less people became fond of print.

Regarding the things that need to be learned, both industries have their own standards. I would however say that it is much more demanding to be a web designer than a print designer. While typography, colors and concepts such as negative space are as important in web as in print, the second one doesn’t have technologies like HTML, CSS, PHP, ASP.Net and so on. Sure, there is some Quark, InDesign or Photoshop to learn, but the technical part is more demanding for web designers. This is probably the reason behind graphic designers who work on web not knowing how to code: it is not possible for everybody to know that much stuff without a hell of a lot of work. Being a complete designer is not an easy task.

When a print designer transitions to web he has some tough challenges to encounter.

  • The first one is, as said before, learning to code.
  • But wait, there are more. The canvas is fixed in print – each newspaper or publication has its own standards.
  • It is quite different from the web, where experts debate for a long time what should the right width of a website be?
  • Making things appear on a website like they did in Photoshop can also be a challenge.
  • Doing this in InDesign is easy – you just move elements around with mouse.
  • Web design doesn’t work the same way, so knowing code is crucial, as WYSIWYG editors usually add lots of junk and unnecessary code to your files.

Image by bcmng.

Moving the other way around might also be a challenge.

  • There are no pixels anymore; print designers work in inches or centimeters, depending on the region or country standards. A new concept is introduced to them as well: bleed and margins, things that do not exist in web. Printing is also a challenge of its own and a job that needs to be mastered.
  • Navigation is also a new concept for print designers, as flipping through a magazine doesn’t need such a concept. In web design it is totally different. Not having navigation is confusing and makes a website useless. And just having navigation is not enough. Designers need to make it stand out, while making sure the content is still more visible and important in hierarchy. The general web architecture is different than the one in print, therefore a print designer would need time to learn and adapt if switching careers from print to web.
  • Typography is also huge in both disciplines. However, in print it has always been important, but it has been ignored in web design until five years ago. When typographers had a boost of inspiration and showed the whole web industry how well used type can change a website, then many web designers started to experiment and play with fonts.
  • In print it is quite different. Once a publication sets some standard fonts, they are pretty much used all over the place and in each issue. Changing them doesn’t happen too often in print; it does, however, happen on the web. Since the introduction of Typekit, a web font service, and Google Fonts, the restriction to the fonts on the computers stopped.
  • Although not difficult to get used to, size is also different in web and print. While a type of 10 or 11 is suitable for print, the web demands larger sizes such as 12 or even 14. But with so many designers out there, there is not really a standardized font size for the web. If the font looks good, the size doesn’t matter. The style is also important, as in print serif fonts are suitable for blocks of text, while sans-serifs are suitable for text on web.
  • Images are an important part of design too. But there are some differences between how we handle images on the web and how we do it in print. The first difference is the color format. CMYK (for print) and RGB (for web)  are the standards. CMKY stands for Cyan, Magenta, Yellow and Key (which is usually black) while RGB stands for Red, Green and Blue, which every monitor, TV or digital equipment uses to create color.
  • Images need to be formatted and exported in CMYK if they will be printed out, otherwise the colors will not be shown exactly as on the computer screen. While this is not a difficult process, when moving from a domain to another it might take some time to get used to.
  • Image compression is also something worth mentioning. There is no need to have an image with more than 72dpi (doth per inch) on web, with level 8 or 9 (which equals “high”) JPEG files or PNG. In print it is good to have images of up to 300dpi in order for them to look good and have high-quality.

Image by birdfarm.

Another disadvantage of the print industry is the lack of interactivity. The content on web is not only readable, but also interactive, which makes the experience better. While newspapers do not have any interaction at all, this can also be their advantage. Interactive elements are often not usable in all browsers; there is no such problem in print, where things are kept simple.

If something is clearly similar between the two industries, then the grid system is it. Now I know not all web designers use it, but it is something which is becoming more and more popular on today’s web. While in web design it is still not a standard, a grid system is crucial in print.

Mastering both

People usually throw the same question out there: is it possible to master both print and web? Well yes, I think it is. If you understand that both industries have their own standards and are quite different, then mastering both of them is definitely possible. However, mastering only one of them might be enough for a career as well, so if you are interested in both of them, go for it. Otherwise it will not be a big issue. The fact that you don’t know how the print industry works will not be an issue if you deliver your work for the web in time and your employer is happy with you.

Bottom line

Designing for print and web are two different things, although they are bound by the same concepts. If your background lies in one of them, I am sure you will have no problem in switching to the other one if needed. You just have to keep in mind that while the print industry stalls (or at least drives forward very slowly), the web develops itself a lot year by year and this will only make the whole industry more challenging. Both domains have their own advantages and limitations and understanding them will only make you a better designer.

Until next time… how do you see the web and the print industry? Do you see yourself working in both at some point in time, or one of them is just not for you? Why do you think that?

January 18 2012

09:05

Printed Web: Print Design Inspired Websites


  

It seems things are changing for website design. The minimalist style adopted by many websites is slowly being evolved into something a little more engaging. One of the main sources of inspiration for this change in the way website content is displayed has been print design, particularly newspapers and magazines. Here are some fine examples of print design inspired websites.

The Websites

Vogue

Placing an emphasis on striking photography and keeping text to a minimum, the Vogue website perfectly recreates the basic layout of its magazine, showcasing the latest fashion trends.

Armani

A stunningly beautiful website as sharp as the fashion wear, Armani’s site’s look pulled straight from a fashion photographer’s portfolio. A little text and huge exquisite images seize and hold the visitor’s attention.

Hollister

Before you even delve into the content of the Hollister’s website you have to admire their ingenious use of the dead space on either side, which looks like a sort of beautiful vintage Indian-style wallpaper. The rest of the site incorporates a wonderful use of shading and delicate colour textures.

Tommy

Digital creative agency Tommy has a fantastic website layout which mimics advertising boards of the past to great effect. Mixing bold headlines and strong colours, on close inspection the site almost has a ‘weathered’ or ‘worn’ look to it: retro brilliance.

Waltzing Mouse Stamps

The modest vintage design on the site cleverly represents the nature of their business and the products they sell. The slightly worn and torn Victorian-era wallpaper effect that is subtly added to the banners is one of the most eye-catching features.

The New Yorker

The New Yorker is an excellent example of a publication whose website retains the trademark aesthetic, most notably the famous typography, of its print magazine, from the features to the cartoons.

IDesign

We should expect a firm specialising in designing websites and corporate branding to have a stirring website and idesign’s magnificent eye catching art nouveau aesthetic lives up to expectations and more.

Roald Dahl

The website for the legendary children’s storyteller beautifully replicates the aesthetic of Dahl’s famous fun-filled children’s books, with the marvellous artwork drawn by long time collaborator Quentin Blake.

Protest Boardwear

Wonderfully recreating the print design of a high quality fashion catalogue, the Protest Boardwear website features large colourful photography showcasing the brand’s head turning slope fashion wear.

Urban Survivors

Using huge and beautifully composed photography, the charity’s website captures the feel of a photojournal or a series of striking billboards, displaying the plight of unfortunate people in third world countries.

Nike Vision

Nike is famous for pushing the envelope in terms of style, and their Nikevision website uses large sliding images to display their stylish range of eyewear, replicating a high quality catalogue you might pick up in an opticians.

Little White Lies

Little White Lies is a bi-monthly film magazine that shapes and themes its publication around a specific film. The website showcases their stirring graphic design and has digital editions of the magazine to browse.

Targetscope

Texas based marketing firm Targetscope really hit the mark with their website design, which is modelled on American World War II propaganda artwork, delivering the message that their creative team is ready to take command of a client’s brand and steer it to victory.

The Dollar Dreadful

Beautiful to look at, the Dollar Dreadful publication has been running since 1882 and displays its stories using the same layout and typography used in the original late nineteenth century mini magazines on the site.

UGS Mag

This independent hip hop magazine celebrates rap music using a clear and colourful magazine layout that balances graphics, photography and text to stunning effect, creating a cool and vibrant web experience.

Voyager

The minimalist aesthetic and clear layout of BMI’s Voyager website perfectly replicates the in flight magazine. Uncluttered and nicely balanced, the information and features are easy to access and read.

Rolling Stone

The famous showbiz magazine is another example of a website that accurately replicates their print publication. Showcasing the latest news in music, film and politics, the site is simple to navigate and has a clear layout balancing image and text.

CultureLabel

CultureLabel is a different kind of gift site that sells products solely from museums and art galleries. The design of the website mirrors the art focused aesthetic by letting the imagery do the talking. This is also accompanied by lush, matted typography scattered throughout the site.

I-D Mag

Extremely simple and effective, the online version of i-d magazine has a clear scrolling blog design that enables visitors to scan the news stories displayed with an equally sized photograph and introductory text.

Antique Piano Shop

The Antique Piano Shop is dedicated to raising awareness of the need to preserve pianos from the last two centuries as valuable historical artifacts. Their website’s layout, typography and artwork beautifully capture the look of piano and organ catalogues and brochures from the past.

Squint Limited

Squint Limited is a fine epitome of Shoreditch and the website does further justice to the products with its portfolio of images that do all the talking. The grey-on-grey text, coupled with the use of gradient in the menu and product boxes adds to the stunning minimalist feel throughout.

Bob & Blossom

Intricate spacing and light pastel colours complements the array of baby clothing strewn over the site.

The Astonishing Adventures of Lord Likely

Resembling a Victorian Viz magazine, The Astonishing Adventures of Lord Likely is a lewd tongue-firmly-in-cheek collection of a rather randy Victorian aristocratic gentleman’s adventures. The typography, layout and writing style of the fake diaries brilliantly mimic a Victorian very-broad sheet.

XLR8R

While styled like a blog, the website for alternative music and culture mag, XLR8R makes intricate use of its layering with subtle grey tones and compliments it further with awesome documentary style photography of featured artists.

Dazed Digital

The stunning looking website for Dazed magazine has a less formal magazine layout, abandoning columns in favour of a cloud of images and text on a scrolling page that resembles the continuously flowing manuscript of a Jack Kerouac novel.

(rb)

November 24 2011

15:17

How To Set Up A Print Style Sheet





 



 


In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Print style sheets are useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on, when they don’t have an Internet connection. However, print styles are often forgotten in the age of responsive Web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver just a slightly better user experience. So, how do we start?

Getting Started

Let’s look at the process of setting up a print style sheet. The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}

For this to work, we have to prepare two things:

  1. Include all screen styles in the separate @media screen {…} rule;
  2. Omit the media type for the condensed style sheet: <link rel="stylesheet" href="css/style.css"/>

In rare cases, using screen styles for printing is the way to approach the design of the print style sheet. Although making the two outputs similar in appearance would be easier this way, the solution is not optimal because screen and print are different kettles of fish. Many elements will need to be reset or styled differently so that they look normal on a sheet of paper. But the biggest constraints are the limited page width and the need for an uncluttered, clear output. Building print styles separately from screen styles is better. This is what we will do throughout this article.

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media="screen" and the media type for printing to media="print", omitting it for the first one if you want to build on the screen style sheet.

To illustrate, I have set up a simple website of the fictional Smashing Winery.

screenshot
Our example website.

Everything needed for a proper screen display is in place. But as soon as the environment changes from virtual pixels to real paper, the only thing that matters is the actual content.

screenshot
The two pages of the unaltered print preview. The header is not yet optimal, and both the main navigation and footer are superfluous.

Therefore, as a first task, we will hide all the clutter: namely, the main navigation and footer.

header nav, footer {
display: none;
}

Depending on the type of website, you could also consider hiding images by default. If the images are big, this would be wise, to save your users some printing costs. But if the images mainly support the content, and removing them would compromise the meaning, just leave them in. Whatever you decide, limit the images to a certain width, so that they don’t bleed off the paper. I’ve found that 500 pixels is a good compromise.

img {
max-width: 500px;
}

Alternatively you could also rely on the tried and trusted max-width: 100%, which displays images at their maximum size but not bigger than the page width.

You might want to use a simple trick to get high-quality images when printing. Just provide a higher-resolution version of every image needed and resize it to the original size with CSS. Read more about this technique in the article “High-Resolution Image Printing” on A List Apart.

Of course, we should hide video and other interactive elements, because they are useless on paper. These include <video>, <audio>, <object> and <embed> elements. You might want to consider replacing each video element with an image in the print style sheet, too.

screenshot
With the main navigation, footer and images gone, the actual text is getting ever closer to center stage. But work remains to be done, especially with the header.

Adjusting To The Right Size

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

@page {
margin: 0.5cm;
}

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

@page :first {
  margin: 1cm 2cm;
}

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. (thanks for the tip, Designshack)

Now let’s tweak some general settings for the fonts. Most browsers set the default to Times New Roman, because serif fonts are considered to be easier on the eyes when read on paper. We can use Georgia at 12-point font size and a slightly higher line height for better legibility.

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

However, to retain some control, we should explicitly set the font sizes below. The chart on ReedDesign gives us a feel for this; but with all of the screen sizes and resolutions out there, these are only rough estimates.

h1 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Apart from special cases (like the <h2> heading, which would otherwise be too close to the preceding paragraph), we don’t need to touch the margins or appearance of any elements, because they are handled quite nicely by the default settings. If you don’t like that certain elements are indented, such as <blockquote>, <ul> and <figure>, you could always reset their margins:

blockquote, ul {
margin: 0;
}

Or you could override the default bullet style in unordered lists…

ul {list-style: none}

…and replace it with a custom one; for example, a double arrow (and a blank space to give it some room):

li {
content: "» ";
}

You could also make <blockquote> stand out a bit by enlarging it and italicizing the text.

The Header

Currently, the remaining things to be dealt with in the header are the <h1> title and the logo. The first is there just for accessibility purposes and is hidden for screen display using CSS. While we could use it as a sort of header in the print-out to indicate the source of the content, let’s try something more attractive. Wouldn’t it be nice to display the actual logo, instead of the boring text?

Unfortunately, the “Winery” part of the logo is white and therefore not ideal for printing on light-colored paper. That’s why two versions of the logo are in the source code, one for screen display, one for printing. The latter image has no alt text, otherwise screen readers would repeat reading out “Smashing Winery.”

<a href="/" title="Home" class="logo">
   <img src="img/logo.png" alt="Smashing Winery" class="screen"/>
   <img src="img/logo_print.png" alt="" class="print"/>
</a>

First, we need to hide the screen logo and the <h1> heading. Depending on the relevance of the images, we might have already decided to hide them along with other unneeded elements:

header h1, header nav, footer, img {
display: none;
}

In this case, we have to bring back the print logo. Of course, you could use the adjacent sibling selector for the job (header img + img) to save the class name and live with it not working in Internet Explorer 6.

header .print {
display: block;
}

Otherwise, you could just use header .screen (or header :first-child) to hide the main logo. And then the second logo would remain. Keep in mind that in print layouts, only images embedded via the <img> tag are displayed. Background images are not.

Voilà! Now we have a nice header for our print-out that clearly shows the source of everything. Alternatively, you could still remove the second logo from the source code and use the header’s <h1> heading that we switched off earlier (in other words, remove it from the display: none line). Perhaps you’ll need to hide the remaining logo as we did before. Additionally, the font size could be enlarged so that it is clearly recognized as the title of the website.

header h1 {
font-size: 30pt;
}

As a little extra, the header in the print-out could show the URL of the website. This is done by applying the :after pseudo-element to the <header> tag, which unfortunately won’t work in IE prior to version 8; but because this is just a little bonus, we can live with IE’s shortcoming.

header:after {
content: "www.smashing-winery.com";
}

To see what else these pseudo-elements can do, read the description on the Mozilla Developer Network, or consult Chris Coyer’s excellent article on CSS-Tricks.

Another thing about IE 6 to 8 is that HTML5 tags can’t be printed. Because we’re using these tags on the example website, we’ll have to apply Remy Sharp’s HTML5shiv in the header. The shiv allows you not only to style HTML5 tags but to print them as well. If you’re already using Modernizr, that’s perfect, because the shiv is included in it.

<script src="js/html5.js"></script>

Unfortunately, the behavior of the IEs is still a bit buggy even when this shiv is applied. HTML5 tags that were styled for the screen layout need to be reset, or else the styling will be adopted for the print-out.

Some developers add a short message as a supplement (or an alternative) to the displayed URL, reminding users where they were when they printed the page and to check back for fresh content. We can do this with the :before pseudo-element, so that it appears before the logo. Again, this won’t work in IE 6 or 7.

header:before {
display: block;
content: "Thank you for printing our content at www.smashing-winery.com. Please check back soon for new offers on delicious wine from our winery.";
margin-bottom: 10px;
border: 1px solid #bbb;
padding: 3px 5px;
font-style: italic;
}

To distinguish it from the actual content, we’ve given it a gray border, a bit of padding and italics. Lastly, I’ve made it a block element, so that the border goes all around it, and given the logo a margin.

To make it more discreet, we could move this message to the bottom of the page and append it to main container of the page, which has the .content class. If so, we would use the :after element and a top margin to keep it distinct from the sidebar’s content. As far as I’m concerned, the URL is indication enough, so I would rely on that and omit the message.

Finally, we need to remove the border of the logo to prevent it from showing in legacy browsers, and move the <header> away from the content:

img {
border: 0;
}

header {
margin-bottom: 40px;
}

screenshot
The header shown two different ways, one with a logo and simple URL, and the other with a message and the title in plain text.

The Missing Link

Obviously, on paper, links aren’t clickable and so are pretty useless. You could try to build a workaround, replacing links with QR codes on the fly, but the solution may not be feasible. To put the links to use, you could display the URL after each string of anchor text. But text littered with URLs can be distracting and can impair the reading experience; and sparing the reader excessive information where possible is advisable.

The best solution is the :after pseudo-element. It displays the URL after each anchor text, surrounded by brackets. And the font size is reduced to make it less intrusive.

p a:after {
content: " (" attr(href) ")";
font-size: 80%;
}

We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector is perfect for this:

p a[href^="http://"]:after {
content: " (" attr(href) ")";
font-size: 90%;
}

The possibilities for links in printed documents seem to be almost endless, so let’s try some more. To distinguish all internal links, let’s precede them with the website’s domain (omitting all the other properties, to keep things concise and clear):

p a:after {
content: " (http://www.smashing-winery.com/" attr(href) ")";
}

Then, we can hide internal links (#), because there is not much to display:

p a[href^="#"]:after {
display: none;
}

Also, external links will be appended as is, like above. Let’s consider SSL-secured websites, too (i.e. ones that begin with https://):

p a[href^="http://"]:after, a[href^="https://"]:after {
content: " (" attr(href) ")";
}

But there is one thing to remember, especially with external links. Some are very long, such as the ones in the Safari Developer Library. Such links can easily break a layout, like at the screen output. Luckily, a special property takes care of this:

p a {
word-wrap: break-word;
}

This breaks long URLs when they reach a certain limit or, as in our case, when they exceed the page’s width. Just add this property to the first of the above declarations. Although this property is basically supported in a wide range of browsers — even IE 6 — it works only in Chrome when printing. While Firefox automatically breaks long URLs, Internet Explorer has no capability for this.

Finally, we set the link color to black to improve the experience for readers.

a {
color: #000;
}

screenshot
URLs, whether internal or external, now show up beside links with special treatment.

Aaron Gustafson went one step further and built the little script Footnote Links. According to the description:

This script builds a list of URIs from any tags within a specified container and appends the list as footnotes to the document in a specified location. Any referenced elements are given a dynamically-assigned number which corresponds to the link in the footnote list.

Aaron’s article on A List Apart “Improving Link Display for Print” gives more insight into the idea behind this script.

While we’re at it, letting readers know where quotes come from, such as those wrapped in <blockquote> and <q> tags, would be thoughtful. Just append the cite attribute (which will be the URL) after quotation marks, like so:

q:after {
content: " (Source: " attr(cite) ")";
}

Side By Side

We haven’t yet dealt with the sidebar content. Even though it appears after the main content by default, let’s give it some special treatment. To keep it distinct, we’ll give the sidebar a gray top border and a safe buffer of 30 pixels. The last property, display: block, ensures that the border shows up properly.

aside {
border-top: 1px solid #bbb;
margin-top: 30px;
display: block;
}

To separate it even more, we could set a special print property:

page-break-before: always;

This will move the contents of the sidebar to a new page when printed. If we do this, we can omit all of the other properties.

screenshot
The sidebar on screen (left) and printed out (right). I’ve grayed out everything else to make it more obvious here.

We could do the same for comments. Comments don’t appear in the example, but they’re still worth touching on. Because they sometimes run long, omitting them in the print-out might be reasonable (just set display: none for the whole container). If you do want to show the comments, at least set page-break-before. You can also use page-break-after: always if there is content to print on a new page. The page-break-before and page-break-after properties are supported in all major browsers.

We can also use widows and orphans properties. The terms derive from traditional printing, and they take numbers as values. The widows property sets the minimum number of lines in a paragraph to leave at the top of a page before moving them entirely to a new page. The orphans property sets the number of lines for the bottom of the page. The orphans and widows properties are supported in IE 8+ and Opera 9.2+, but unfortunately not in Firefox, Safari or Chrome.

Now that we have taken care of the sidebar, the print style sheet is ready! You can download it here. The file is fully documented and so can serve as a helpful reference or starting point.

screenshot
The completed print style sheet.

Just For Fun

You might be asking, “Why can’t we just put the sidebar next to the main content, like on the website itself?” Well, the screen and print outputs are a bit different. Unlike the former, print-outs aren’t very wide and thus don’t have much space to fill. But depending on the font size, the line length could exceed the maximum of 75 characters and so be more difficult to read.

In this case, we could, of course, limit the width of the main content (preferably not too much — we shouldn’t set the line length to fall below about 55 characters) and then absolutely position the sidebar just below it, just like in the screen display. But describing this method falls beyond the scope of this article, so please consult the screen style sheet of the example website (line numbers 112 and 141 and down).

In my humble opinion, avoid such experiments. While in principle, print layouts have endless possibilities, focusing on the content and removing everything else is better. The better way to ensure an optimal line length is just to shrink the page’s width or enlarge the font size.

Preview Made Easy

Print Preview by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function, but with one difference. Instead of opening a separate page, it shows a sleek overlay, with “Close” and “Print” buttons at the top. It also has the convenient “P” shortcut. You might want to check out the demo page, too.

A Missed Opportunity

Imagine that you were able to visit any page, hit “Print” and get an optimized version of the page to enjoy on paper. Unfortunately, we don’t live in this perfect world. Some websites still rely on JavaScript to generate print versions, and many other designers simply don’t care. But this is a missed opportunity. A carefully composed print style sheet could be used not only for printing but to optimize legibility for screen reading.

As the website owner, you can determine the images to display (if any), the optimal font and size, and the presentation of other elements. You could make the content more appealing than the versions produced by Instapaper and Readability by giving the print version the extra attention it deserves.

The Future

While using CSS3 for screen layouts is pretty common nowadays, it hasn’t quite established itself in the print environment yet. The W3C has an extensive description of “Paged Media,” but unfortunately support is very limited at the moment, Opera and Chrome being the only browsers that enable a few of its related properties. With decent support, it would be possible to use the @page rule to set the dimensions of the page, switch to a landscape view, alter the margins, and do much more. Even media queries are were conceived to respond to different page sizes.

Websites Designed Well For Print

Let’s take a look at some examples of websites optimized for print.

A List Apart
The slick multi-column design is simplified into a single column, full width, which intuitively mirrors the website’s sensible hierarchy. Article titles and authors are no longer active links. And beautiful clean typography is kept intact, thanks to the compatible fonts and simple colors; no font change is necessary, although the font-size value increases slightly. Advertising and affiliate styles are hidden, and the result is a simple, clean printed page that easily conforms well to any printer or page set-up in the document. A List Apart is exemplary, save for one important point: the logo does not appear anywhere in the print-out.

A List Apart

A List Apart

Lost World’s Fairs
The smooth printed page helps to carry the visuals of the website for Lost World’s Fairs. The main title and its colorful background are swapped for a simplified version in the print-preview style. However, some images could be removed to save some expensive printer ink. (Updated).

Lost World's Fairs

Lost World's Fairs

The Morning News
One would expect most news websites to employ the print-preview function, yet that isn’t the case. The Morning News has prepared its content for print without much concern, happily excluding background images and color, while still getting its message across.

The Morning News

The Morning News

James Li
James Li has designed his personal website exceptionally well for this purpose, carefully preserving all spacing and key elements. The logo is a part of the printed product, whereas the navigation links are not: very clever, because navigation has no value on a printed page unless it is informative in and of itself. Non-Web fonts are converted to simple printable ones (see “Other Stuff…”). Brilliantly executed for print.

Infinitum

Infinitum

TechCrunch
TechCrunch’s recent redesign tweaked not only the visual design of the site, but also the small details that have to be considered when the site is viewed on mobile or printed out. The print layout is very clean and minimalistic, without unnecessary details, yet also without links to the actual page that was printed out. The TechCrunch logo is omitted as well.

TechCrunch

TechCrunch

R/GA
Although the logo isn’t present in the printed version of this website, attention is paid to the spacing of the content within. While the Web version has simple lines and a clean space, the printed page tightens up elements in order to best use the space. A strong grid and effective typography add to the effect. In this example, some images could be removed as well.

r/ga

r/ga

Studio Mister
An excellent job of the print-preview function. The page has been meticulously designed to a grid and requires little in order to prepare it for print; some attention to the background color of text and not much else. Unfortunately, though, the logo is a background image and thus excluded.

Studio Mister

Studio Mister

Bottlerocket Creative
Although this logo isn’t represented in the print-out either, the folks at Bottlerocket Creative have done very well to adapt their typographic style for offline viewing. Assuming the design was created mainly with images would be easy, but meticulous attention to type is evident upon closer inspection.

Bottle Rocket

Bottle Rocket

OmniTI
OmniTI has optimized its content for print not by shrinking the main column, but by increasing the size of the text and not crowding the images together. The playful look adheres to good spacing. The only drawback? Many of the line breaks have been eliminated, causing some words and sentences to run into each other.

Omni TI

Omni TI

In Conclusion

There’s a lot to consider when preparing your website to be printed out by readers. The process forces you to scrutinize every element of your content like never before, all because someone will want a hard copy of your work. Yet most of all, it’s important to recognize the difference between printing and actually reading. Perhaps these techniques hold merit in helping you visualize content for mobile devices. What better way to kill two birds with one stone than to work out your layout for the mobile while considering printing view at the same time to make sure that your content prints flawlessly for offline archival? The time you invest could double in value.

For more information on preparing content for print, including by modifying CSS, check out the following articles:

(al) (vf) (il)


© Christian Krammer for Smashing Magazine, 2011.

Tags: Coding CSS print

October 03 2011

13:16

‘CSS for Print Designers’ book

Here’s the book all of you print folk have been waiting for: CSS for Print Designers. While I haven’t read it myself (yet), it’s been reviewed by a good group of friends I personally trust.

May 24 2011

04:01

30 Examples of Smart Print Advertisement

Advertise here with BSA


Print ads must be eye-catching and attractive to draw the viewer’s attention. In this post you will see some examples of smart print advertisements and clever messages that these ads present. Most of the ones listed here are funny and unrealistic which are the reasons why these ads are effective and interesting to look at.

Panasonic 3D TV: Dino

Panasonic 3D TV: Dino

Samsung: Optical Zoom, Dog

Samsung: Optical Zoom, Dog

Delsey Luggage: Tarmac

Delsey Luggage: Tarmac

Abramet: Tree

Abramet: Tree

Tag Heuer: Bird

Tag Heuer: Bird

Telepizza Extra Cheese: Giant Kong

Telepizza Extra Cheese: Giant Kong

AirWick: Bucket

AirWick: Bucket

Pastorini Toy Store: Pilot

Pastorini Toy Store: Pilot

WWF Bluefin Tuna overfishing: Panda

WWF Bluefin Tuna overfishing: Panda

English Mastery: Absurd Crosswalk

English Mastery: Absurd Crosswalk

Colgate Max White One: Guy

Colgate Max White One: Guy

Farmers Insurance: Work Injuries

Farmers Insurance: Work Injuries

Kawasaki: Skater

Kawasaki: Skater

Paladar Gastronomy Festival: Exchange 3

Paladar Gastronomy Festival: Exchange 3

Avis: Reunion

Avis: Reunion

Tiger Vacuum Bottle: Snow

Tiger Vacuum Bottle: Snow

Volvic: Plum

Volvic: Plum

Wikipedia: War

Wikipedia: War

Pampaverde: Extra big burger

Pampaverde: Extra big burger

Fabercastell Truecolours: Eggplant

Fabercastell Truecolours: Eggplant

Stihl: Bush

Stihl: Bush

Save the Rhino: Zebra

Save the Rhino: Zebra

Pepsi Diet: Unpimp your body

Pepsi Diet: Unpimp your body

Duracell: Ship

Duracell: Ship

Getty Images: Underwater

Getty Images: Underwater

Smart: Pollution

Smart: Pollution

TACA Airlines: Small San Francisco

TACA Airlines: Small San Francisco

ANCMA: To be noticed

ANCMA: To be noticed

Canal+: iPhone, Football

Canal+: iPhone, Football

Shriram Cement: Athena, Greece

Shriram Cement: Athena, Greece

About the Author

Tomas Laurinavicius is a blogger and designer from Lithuania. He’s interested in web design, Photoshop and WordPress design. You can follow him on Twitter @tomaslau. Get in touch with him if you have interesting projects you want to collaborate on.

May 23 2011

14:00

Print Loves Web

Advertisement in Print Loves Web
 in Print Loves Web  in Print Loves Web  in Print Loves Web

A recent power cut highlighted the fragile and dated way I access content on the Web. I sit in front of a computer which has a number of hardware elements like a keyboard, mouse and monitor — all connected to a black box which houses a number of other smaller more complicated bits of hardware. To access content on the Web, I rely on all of these layers working, not to mention the parts outside of my control-like cabling and remote servers. As soon as one of these layers goes down (the electricity in my case) I’m left with nothing. A mobile device allowed for some surfing but eventually my batteries died and I was back to darkness.

There was nothing for it but to pick up a book to try and satisfy my visual hunger. With all other distractions (the kinds that need juice from the wall) lying lifeless around my flat, I was able to really enjoy a book I’d been meaning to look at for some time. With many image filled pages the large hardback book (Supply and Demand by Shepard Fairey) was a real joy. Controlling the speed at which I let the pages flick with my thumb, the smell of the ink and paper and the subtle cracking noise of the spine as I opened the book wider, it was the best user experience I’d had in a very long time.

Smashing-book-smp2 in Print Loves Web

Reflecting On The Web

I started to think about not just the delicate nature of accessing Web content, but also what it feels like to look at and navigate websites and use applications via a computer. It’s clumsy to have to press keys to say what I want to say, then have to stop pressing the keys to hold onto a small bit of plastic which moves a tiny pointer on my screen, which I then have to click on stuff that makes other stuff happen. It also made me question my own trade of designing these sites that we expect people to use and enjoy.

All the effort that I put into styling buttons, spacing letters, creating harmony in colour and then building it to work in browsers I’m convinced don’t actually exist. A whole heap of work for a lousy user experience of clicking, typing, scrolling, then clicking again, then typing. A modern Web user is spending less time sitting at a desk in front of a screen and is constantly connected.

Web-loves-print-icon-smp1 in Print Loves Web

When Two Trades Go To War

In our industry, print design and digital/Web design are two very different trades. Print designers (or graphic designers if you want to get all old school) are seen to be folk that don’t have a place in a trendy digital agency with their mumbo jumbo talk of spot colours, bleed and ligatures, and Web designers are seen as a bunch of jack the lads that know nothing about typography and how to use colour, they simply talk of validation, hover states and hex values. This might be true in some cases but the real story is that these two trades better get together over a beer and make friends. The future of online content depends on it.

I don’t own an iPad or Kindle but I’ve used both and I do have an iPhone which I use a lot. If you take a step back from the technology of these types of device and just think about the function for a moment, it’s clear that they have been designed to be held and touched (haven’t we all) in much the same way as a book. Many apps that are available on the iPad and iPhone right now are based on physical objects that need to be touched to work like a piano or guitar. So what does this have to do with print and Web becoming best buddies?

Print-vs-web-thinking-smp1 in Print Loves Web

Web, Meet My Friend Print

I have a background in print and I’ve been lucky enough to work with some brilliant graphic designers who have taught me about paper types, printing techniques and good typography. These are skills the graphic designers have developed over a much longer period of time than the Web has existed. Good graphic designers are able to communicate a message visually in more than just two dimensions. Being aware of scale, environment, textures and light are all skills that are fundamental to graphic design.

Graphic designers were user testing their creative even before Tim Berners-Lee had even come up with the catchy mouthful WorldWideWeb. I’ve been involved in focus groups where participants have been asked questions about not just the message and content of printed direct mail campaign but also on the quality and finish of the paper.

Imagine creating a super team of forward thinking product designers, Web designers and print designers to re-think the way we deliver content online and digitally. Collaborative working with experts in these fields focusing on new ways to deliver and present a print style magazines in a digital format is an exciting prospect. Thinking beyond the faux page turn styles we’ve all seen in various book readers over recent years but moving more towards a device that can re-create fidelity of a printed page and content that can dynamically populate itself with location aware content and personalised messages.

Print-loves-web-thinking-smp1 in Print Loves Web

Future generations of the iPad could find a way of re-creating the sensations I experienced when I flicked through that book during the power cut. Tactile feedback and textures could be standard features and the way colours behave in certain lighting could be much more realistic. Devices will have a whole new approach to power consumption, too. Speech recognition is a dead donkey, and only ever used by sales reps who are happy to listen to sound of there own voice while weaving around on the M25. The ability for the device to connect to the users mind to cut out all the mundane key pressing and link clicking would be a wonderful feature — thinking and doing at the same time.

The Future Of Content Delivery

One thing most of us humans have in common is the ability to touch, talk, see and think so we should be designing for everyone. Hardware builders need to consider all environments on earth and think about things like battery life, connectivity and sustainability, too. I’d like to see the large hardware manufacturers that are celebrating massive financial profits exploring ways of making their devices usable by every human in every environment.

The information available on the Web should and can be available to everyone on earth. With a new breed of mobile device that delivers this content in a whole new way will ensure that each and everyone, young and old will understand and enjoy accessing this content. We need to think physical and we need to think touch but we also need to review the way we behave online right now and decide what goes and what stays.

It’s up to us, the designers (both Web and print), to be pushing and nipping the heels of the hardware manufacturers to encourage these new ideas. Apple’s App Store is good at this; it’s still not perfect but the Web as a whole will allow these ideas and thoughts to trickle out and be picked at and improved.

Asking The Pros

I asked our industry experts in both print and Web what they thought about a future where print and Web designers join forces to create new form of Web content. Can it work? Should the age old rules of print be used in the next generation of Web content? What Web design rules can we safely leave behind and what new rules should we adopt?

Brendan Dawes

Brendan-dawes in Print Loves Web

Brendan Dawes is Creative Director for magneticNorth, a digital design company based in Manchester, UK. Over the years, he’s helped realize projects for a wide range of brands including Sony Records, Diesel, BBC, Fox Kids, Channel 4, Disney, Benetton, Kellogg’s, The Tate and Coca-Cola. Brendan was listed among the top 20 Web designers in the world by .net magazine and was featured in the “Design Icon” series in Computer Arts.

“I think in many ways we are still tethered to romantic notions of how things were in the past; whether that’s adding filters to digital photographs to make them look like Polaroids, or typing notes into apps that are made to look like their paper counterparts. There seems to be something warm and more human when you add these analog layers on digital things; layers derived from the things from our past and how things used to be. But for me I think it’s short-sighted to let the past bully potential new thinking in this way. Personally I hate digital page-turn effects — why are we trying to shackle digital interfaces to old paradigms? You turned a page because that was how a book was/is constructed, but there are no pages as such in the digital domain.

If we’re talking about making a deeper connection from a user experience point of view then trying to emulate the past is not the way we should be going — we should be exploring entirely new techniques that are born from the exciting possibilities of the new rather than the old ways of the familiar. But there is comfort in the familiar; familiar is easier, whilst new is harder and often scarier. Yes, I love holding a beautifully printed book in my hands, the feel of the ink on the printed page and all that, but I equally love holding a beautifully crafted, often magical app in my hands, too. Surely, it’s more exciting to create new things rather than Xerox the past? I know which one I’m more excited about.”

Steven Heller

Steven-heller in Print Loves Web

Steven Heller wears many hats (in addition to the New York Yankees). For 33 years he was an art director at the New York Times, originally on the OpEd Page and for almost 30 of those years with the New York Times Book Review. Currently, he is co-chair of the MFA Designer as Author Department, Special Consultant to the President of SVA for New Programs, and writes the Visuals column for the New York Times Book Review.

“Whenever I hear print and Web mentioned in the same sentence, it is usually a downer. Print is dead. Web is alive and weller. Well, I think the marriage of the two may not last into the 22nd century, but for this century, there should be happy bedfellows. Can’t wait to see the offspring. ”

David Airey

David-airey in Print Loves Web

Graphic designer and design author, David has been featured in Creative Review, HOW Magazine, Digital Arts, LogoLounge, and more. He also has been mentioned on the New York Times website, and was interviewed live on BBC Radio. David’s graphic design blogs Logo Design Love, davidairey.com and brand identity showcase Identity Designed attract more than one million monthly pageviews.

“A future where print and Web designers join forces happened some time ago. Today’s designer considers every aspect of a project’s deliverables. S/he might not take full responsibility over each touchpoint, but there should at least be some level of knowledge acquired about the project’s bigger picture — the main goal.

Compare it to a jigsaw puzzle that was pieced together by five different people. Each person focused on one specific area, but at the same time, before they began, all five knew what the completed puzzle was going to look like. This insight helped them to streamline the process, placing the pieces they were responsible for in the correct area within the overall frame. They saved time and effort, just as designers of today who specialize are at an advantage when they stand back and view a project from every angle.”

Conclusion

It seems there is no place for the traditional print designer, but then again, nor is there a place for the traditional Web designer who ignores our print design history. The modern designer is much more than a Web, print, digital or visual designer. Perhaps the modern designer is one that embraces all forms of design to create content that ‘knows’ where it is and ‘lives’ and behaves in a way that brings us as humans much closer to it.

What do you think? Feel free to share your thoughts with us in the comment section below!

Further Reading

  • Mike Matas: A Next-Generation Digital Book (Video)
    Software developer, Mike Matas, demos the first full-length interactive book for the iPad with clever, swipeable video and graphics and some very cool data visualizations to play with. The book is called “Our Choice” — Al Gore’s sequel to “An Inconvenient Truth.”
  • Flexible Phone Made From Electronic Paper
    A prototype flexible smartphone which has been created by Canadian researchers with the help of electronic paper.
  • Microsoft Surface 2 CES (Video)
    A demonstration of Microsoft’s second generation of Surface.

(il)


© Mark Cossey for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: print, Web

March 08 2011

06:09

Mercedes Benz – Left Brain vs. Right Brain Advertising

The Mercedes-Benz. They’re sleek, stylish and sometimes glitzy and powerful. Their recent TV campaigns show big, boastful sedans, ripping donuts around their “legal” team in the middle of the sand. Their print campaign, is a touch different. It draws on emotional ties between the left and right brain. The beautiful illustrated spreads show creativity, free spirit and passion of the right brain vs. the familiar, accurate and linear. The campaign, is beautiful, articulate and creative. The copy is carefully crafted and works with each illustration. The campaign was created by Shalmor Avnon Amichay/Y&R Interactive Tel Aviv, Israel.

Music

music-72dpi-left

music-72dpi-right

music-72dpi

Paint

paint-72dpi-left

paint-72dpi-right

music-72dpi

Passion

passion-72dpi-left

passion-72dpi-right

passion-72dpi

But, all of this aside… The campaign is super creative, well created and technically sound. But, the problem that I keep reeling over is “is this Mercedes-Benz”?

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Mercedes Benz – Left Brain vs. Right Brain Advertising

September 08 2010

11:55

Designing and Producing Creative Business Cards: Techniques and Details

Smashing-magazine-advertisement in Designing and Producing Creative Business Cards: Techniques and DetailsSpacer in Designing and Producing Creative Business Cards: Techniques and Details
 in Designing and Producing Creative Business Cards: Techniques and Details  in Designing and Producing Creative Business Cards: Techniques and Details  in Designing and Producing Creative Business Cards: Techniques and Details

Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

General Advice

Content Goes First

I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks.

Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.

Why do you want metallic ink? Do you think your name would really stand out in gold, even though your message is all about technology and recent code developments? You may want to rethink that. Or do you sell hand-crafted jewelry and want a design that reflects your latest silver creation? Then the silver ink might be the perfect solution for you after all.

The back of a business card is often ignored, but it can be a great place for extras that make your card even more memorable. Make it relevant to what you do, and make it useful if you can. You could include tips or a quick how-to guide relevant to your product, offer a free consultation, add a reminder for a date when you will offer discounts, or invite loyal customers to collect a stamp every time they purchase from you. Think of something that would make them want to hang onto your business card and consult it often. If you think the back should be reserved for note-taking, why not mark a few dotted lines, titled “Notes,” rather than leave it blank?

Talk to Your Printer

No one knows more about the techniques and materials available—and new ones come out all the time. Generally, printers are more than happy to give you all the industry news and advise you on techniques and materials. (If yours isn’t, you might want to look for a new printer.) If you learn a little about how they operate, they will appreciate it and be even more willing to help.

Size

While this article focuses on custom shapes and sizes, keep in mind standard sizes, too. Card holders are made to fit standard size cards, and I have often heard comments like, “If a business card doesn’t fit in my wallet, I don’t care how beautiful it is, it’s going in the trash.”

The standard sizes are 3.5 x 2 inches in the US and Canada, 85 x 55 mm in the European Union and 90 x 55 mm in Australia, New Zealand and Scandinavia. Or you could use a standard credit card as a reference, which about 85 x 54 mm or 3.34 x 2.25 inches.

Unless you have some other use for your cards in mind (for example, a bookstore’s card that doubles as a bookmark), you’ll want to stay within those dimensions. Smaller is okay, but anything too big won’t fit in most pockets, so consider going bigger only if you have reason to believe your cards will not be stored in wallets or holders.

Do you have the perfect idea but don’t know what to do with it? Maybe you’ve heard about die-cutting, varnishes, metallic inks, letterpressing and special materials but are unsure what they are exactly or which one is for you? Let’s jump into the different techniques!

Die-Cutting

Any card (or any printed material for that matter) that isn’t a standard rectangle or that has holes in it is created by a technique known as die-cutting. A metal template is prepared and is used to cut the paper in the given shape. The easiest way to think about this is to picture a giant hole-puncher, except that the holes are not necessarily round, but rather whatever shape you want them to be.

This means that, in addition to the artwork, you will need to provide the printer with a custom shape to “punch out” your cards.

The result can be as simple a round hole in the center of your card or as complex as a three-dimensional pop-out.

Optimum in Designing and Producing Creative Business Cards: Techniques and Details
This simple and effective design makes use of the round hole on both sides of the card.

Bizcards03 in Designing and Producing Creative Business Cards: Techniques and Details
This card takes the shape of the product. Instant recognition!

Preparing the File

I’ll use die-cutting as an example, but most of these guidelines apply to the other finishes as well. The main differences are cited in the respective sections below, and I will provide links to help you read about the techniques in more detail. The guidelines below should give you a good starting point.

The best applications to prepare files for any special print finishes are the industry-standard Adobe Illustrator and InDesign. Photoshop is not suitable because it does not have the precision necessary for this kind of project.

As with any other print document, set up your file to the printed dimensions (i.e. whatever size you want your card to be, whether rectangular or a non-standard size), at 300 PPI resolution, using CMYK as the color space for all the elements of the artwork.

There seems to be a bit of confusion about DPI, PPI, CMYK and RGB. Preparing a file for printing with either Illustrator or InDesign is actually very simple.

In Illustrator, when creating a new document, click on the “Advanced” options tab (in some versions this is already visible). This brings up the options for both the resolution and color space. Set the resolution to 300 PPI and the color mode to CMYK.

Note that PPI, or pixels per inch, is often confused with DPI, or dots per inch. The latter refers strictly to printer hardware and its capability to reproduce dots on paper. When preparing files for printing, don’t worry too much about the DPI. 300 PPI is the magic number. Remember that and you’ll be golden. If you would like to learn more about DPI and PPI, see the link at the end for an article that explains it in much more depth.

Newdoc in Designing and Producing Creative Business Cards: Techniques and Details

InDesign documents are automatically created at 300 PPI. The only thing to make sure of is that the elements you insert in the document (such as photographs) are also at 300 PPI and use CMYK. Check this by selecting your image and bringing up the info window (hit F8).

For example, the image below uses the RGB color space; it should be changed to CMYK:

Info-panel in Designing and Producing Creative Business Cards: Techniques and Details

Even though you can use RGB images, it doesn’t mean you should. Yes, both InDesign and Illustrator are perfectly capable of converting the output to CMYK when you export a file as PDF, but if you ever have to submit your source files to someone or use the images for something else, this extra step could save you hassles.

And please-double check the resolution. Print out the card to check for pixelation. I know this sounds like a no-brainer, but so many people forget to check the printed result. What you see on the screen is not what you will see in print.

Another thing to check is your black text and line art, if you are converting any of them from RGB. They should be 100% K in CMYK color mode to avoid a muddy effect and color halos.

When your artwork is ready, create a new layer above the artwork. Call the layer something like “dieline.” You could be even more specific and name it “Dieline – DO NOT PRINT,” which would be especially helpful if you are not able to speak with the printer before submitting the file (say, if you are using a Web order form or your client is the point person for the printer.)

Now, create the guidelines for how your card should be cut. Make sure your outline for the die-cut uses a custom spot color, not CMYK; this allows the printer to extract the die-cut template when printing separations. To create a custom color, click on the little arrow in the swatches palette, and click to make a new swatch. In the dialog box that appears, choose any color that will stand out in your artwork, and then select “Spot color” from the drop-down menu next to “Color type.” The color can be anything you want. 100% magenta is quite popular because it usually stands out, but saving it as a spot color is important.

Custom-color1 in Designing and Producing Creative Business Cards: Techniques and Details

Also, remember to set the stroke (if it’s a custom crop shape) and/or fill (if you are cutting out holes) to “Overprint” to avoid knocking out the art below. You can bring up the options for Overprinting in InDesign by going to Window → Attributes, or in Illustrator by pressing F11 to bring up the “Attributes” window.

Overprint in Designing and Producing Creative Business Cards: Techniques and Details

Let’s say your logo is a cloud, and you want the card to be cut in a cloud shape (not a very creative example but easy to explain). Your file in Illustrator would look something like this:

Cloud-card in Designing and Producing Creative Business Cards: Techniques and Details

And your finished card would look like this:

Cloud-card1-mock-up in Designing and Producing Creative Business Cards: Techniques and Details

If you wanted to cut out the cloud shape, it would look like this:

Cloud-card21 in Designing and Producing Creative Business Cards: Techniques and Details

And the finished card would look like this:

Cloud-card2-mock-up in Designing and Producing Creative Business Cards: Techniques and Details

Notice how the logo has moved from the artwork layer to the dieline layer and is now also filled with the custom spot color.

Make sure your artwork has enough bleed (i.e. it extends well past the edge of the document if the shape is regular or past the die-cut guidelines if custom). Usually 0.125 inch, or about 3 mm, is enough, but I tend to add more to be safe. Both InDesign and Illustrator allow you to add bleed in the “Document setup” options.

I won’t go into too much detail here, because bleed is a rather complex subject that deserves its own guide. For those of you interested in learning more, a couple of links are at the end of this article that explain it more thoroughly.

On the same note, do not put any important elements (such as logo or text) too close to the edge. Leave a buffer margin (again, about 0.125 inch or 3 mm) around the dieline or document, to avoid the risk of something getting cropped.

Usually, either a native file (AI, INDD, EPS) or high-resolution PDF is acceptable as the final file for printing. (Always check with the printer before preparing the final file.) If you prepare a PDF, make sure your custom fifth color is kept as a spot color and is not converted to CMYK. You can check it in the “Ink Manager” window (Export as PDF → Output → Ink Manager):

Ink-manager in Designing and Producing Creative Business Cards: Techniques and Details

You can double-check that it appears in the Ink Manager list in the PDF itself (Acrobat Pro) by clicking Advanced → Print Production → Ink Manager:

Picture-1 in Designing and Producing Creative Business Cards: Techniques and Details

Printing It

Most big print shops have die-cutting equipment. Check first if you are printing locally. The best way to make sure everything goes according to plan is to ask questions, explain your requirements and look over the proofs in person. Small printers outsource die-cut jobs. If you want more control, look for one that does it in-house.

If you are unable to print locally (for example, because your client is remote), you have two options. One is to find a printer local to your client. Usually, the client will already have one lined up, but I strongly recommend you get in touch with that printer yourself, rather than just pass the files to the client and let them handle it. Ask questions, send over mock-ups, get a proof sent back to you—do what you can to make certain that the job prints the way it should.

Alternatively, you could find an online print shop that offers die-cutting. Again, get in touch with them personally, rather than just submit the file via an online form, and make sure all your questions and concerns are addressed.

Printer Checklist

Need help choosing a print shop and communicating with it? Here are some things to keep in mind.

  • Before you do anything else, get their phone number or email address and get in touch. Tell them about your project, and ask about technical specifications and any other questions you may have. (This is a good time to request a cost estimate as well.) If you have more than one candidate, rinse and repeat.
  • Ask to see samples of similar pieces they have printed. Examine them. This could lead to more questions—or inspiration to make your project even better.
  • The main criteria I use in choosing a printer is how responsive and knowledgeable they are. You want someone who will actually check your file and contact you if there are any problems or questions; because no matter how great a printing deal you find, if your file has an error, that’s money thrown down the drain.
  • To save some money, you can often do this by asking the printer for advice. Would making the file layout slightly smaller allow them to fit more cards on one sheet? Could you adjust the shape so that there is less wasted paper? How about using fewer colors? Your printer should know the options; just ask!
  • In my experience, PDF is one of the safest options for prepress. Native Illustrator files work well too, but be sure to check which versions of Illustrator your printer accepts. Always check which versions of any Adobe software your printer uses if submitting native files.
  • Ask the printer if they have .joboptions files. These files can be imported into Adobe applications and will give you presets for exporting to PDF or EPS. This is the easiest way to make sure that your final files are exactly the way your printer needs them. If they don’t have these files, both InDesign and Illustrator have presets for saving in PDF. Just make the necessary adjustments; for example, you will have to add the bleed to these presets manually (see the links at the end for step-by-step instructions).
  • If you are not able to speak with the printer, add an email message or a file with instructions. Don’t forget to include your contact information so that they can call or email you if they have any questions!

You’ve probably noticed that most of these tips emphasize the importance of communicating with your printer. I cannot stress this enough: every project is different, and communication is the key to getting the best result possible.

How Much Will It Cost?

While pricing depends on many factors, there is usually a set-up fee when using a die-cut or other special finishing technique. (Remember the giant hole-puncher mentioned above? They need to make one of those, just for you.)

The fee will be the same whether you print 50 or 500,000 cards, so printing larger quantities is much more cost-effective.

This may not be the case with certain popular formats (for example, rounded-corners business cards) because the printer would reuse the same template for multiple jobs, hence the special offers.

Special Finishes

I’ve devoted a big portion of this article to die-cutting because the file preparation and printing process described here is similar to many other techniques. But let’s look at some of them.

Spot UV Coating

This special finish is achieved by applying a clear varnish to an area of the card defined by you. The effect is a slightly raised design element, with a glossy, matte or satin finish. The example below shows a glossy finish:

Silk-laminated-business-cards-1 in Designing and Producing Creative Business Cards: Techniques and Details

File preparation is done the same way as for die-cutting, but instead of specifying a stroke, you specify a shape or area to apply the varnish to. This is still done by filling it with a spot color and, in this case, setting the fill to overprint.

Letterpressing

Letterpressing is done by inking a raised surface and then pressing it into the paper, giving the design both color and depth. This technique is suitable for vector images and text, using solid Pantone inks. An article linked to at the end of this article provides more technical detail. Here is an example of a business card done with this technique:

Letterpress-business-cards-06 in Designing and Producing Creative Business Cards: Techniques and Details

Embossing

Similar to die-cutting, a die is used to press the paper up, creating a three-dimensional raised effect.

Embossed-business-cards-5 in Designing and Producing Creative Business Cards: Techniques and Details

Foil stamping

With this technique, a layer of thin foil is applied to an area of the card you specify.

Foil-business-cards-15 in Designing and Producing Creative Business Cards: Techniques and Details

File Preparation for Special Finishes

File preparation for all of these effects is similar to that of die-cutting: you have to define the area to be coated, embossed or whatever the effect is. But you might need to submit two files: one with the artwork, and another with the area to apply the effect to.

Make absolutely certain these two files line up perfectly. The easiest way to do this is to use a file with separate layers: one or more for the artwork, and another for the special finish guidelines (as described for the die-cutting file preparation above). Then, simply save them as separate files by first hiding one layer and then the other.

When using photos for a special finish, create a clipping path in Photoshop before placing the photo in Illustrator or InDesign. Then you can use this same clipping path as the mask for your effect either by choosing to export the clipping paths to Illustrator or by right-clicking (PC) or Control-clicking (Mac) on the clipping path in InDesign and converting it to frame. (You might want to check the options first if it isn’t showing by going to Object → Clipping Paths → Options.)

For example, you can use different masks with this image:

Apples in Designing and Producing Creative Business Cards: Techniques and Details

This mask will apply the effect to the entire photo:

Apples-path1 in Designing and Producing Creative Business Cards: Techniques and Details

While this one will apply it only to the foremost apple:

Apple-path2 in Designing and Producing Creative Business Cards: Techniques and Details

Special Inks

Additional inks can be used to make your card stand out even more. Metallic, pearlized and fluorescent inks can produce interesting effects. (To better preserve metallic inks, consider putting a varnish on top.) The even more common Pantone colors give a different and more solid effect than their process equivalents because they are opaque.

This one is simple: just find a custom color you like by looking at the Pantone swatches, and add it to your document. Prepare your artwork as you normally would, but make absolutely certain that your output does not convert to CMYK if you are preparing a PDF (as described above).

Note: the easiest way to prepare photos with a special ink is to convert your image in Photoshop first to grayscale and then to duotone. Choose your ink(s) from the Pantone library, and tweak your settings as necessary. (Working with color channels is a complex way to get more control over the result, but I don’t recommend this to Photoshop beginners, and Photoshop experts probably already know how to do this.)

Picture-2 in Designing and Producing Creative Business Cards: Techniques and Details

Duplexing and Triplexing

This technique is about using two or more sheets of paper glued together. The effect achieved is commonly referred to as edge-painting or edge-tipping, because a different-colored sheet of paper that is inserted between the two main ones produces colored edges “inside” the card (triplexing), as seen here:

Triplexing in Designing and Producing Creative Business Cards: Techniques and Details

Using only two sheets (duplexing) gives a two-color edge—one on the front and one on the back:

Duplexing in Designing and Producing Creative Business Cards: Techniques and Details

It adds a touch of elegance and makes your card thicker than the standard stock. Combining this technique with die-cutting—budget permitting—gives an even more interesting result.

Scented Inks

You won’t find many examples of this technique on the Internet because it doesn’t exactly translate as a photo. Still, it is an interesting way to make your business card jump out.

Available scents range from chocolate to mildew. If that is not enough (and money is no object), you can create a custom scent for an extra fee.

Special Material

This is a vast subject because the options are countless. We will only touch on this topic. To see and feel the different kinds of material available, visit your printer!

Paper and Cardboard

There are so many varieties that I wonder why most people still use the same white or off-white cardboard stock for their business cards. From soft-as-cloth finishes to cold-pressed textured paper, there are enough options for everyone’s needs. The options are rather hard to describe; I recommend you make a trip to the printer (and give yourself an hour or so to ponder the choices)

File preparation is no different; except with colored paper stock, keep in mind that the colors will not display the same way in your software. To simulate the effect, use a layer of a similar color below the artwork, and set the artwork layer to multiply; or to about 70% opacity with darker color stocks.

Plastic

Transparent, frosted, stretchy—there are plenty of options for a plastic stock.

Viewzi-business-card in Designing and Producing Creative Business Cards: Techniques and Details

Poul-nielsen-business-card in Designing and Producing Creative Business Cards: Techniques and Details

Plastic is usually printed with a different process, such as screen printing. Check with your printer to see what colors you can use. Special printing processes usually require that you use Pantone inks. Remember to account for any special effects, such as transparency and stretch. Giving general advice on this one is hard, because each material has its own requirements.

Metal

If your service or product is related to a metal, you might want to consider using metal as a material. You could simulate a credit card or computer. Keep the design minimal for a more striking effect.

126896700 F6bf4e7b59 in Designing and Producing Creative Business Cards: Techniques and Details

WOZMetalProof1 in Designing and Producing Creative Business Cards: Techniques and Details

Again, check with the printer before preparing your artwork to find out what process they use to print on metal and which colors you can safely use.

Other Material

Other options are wood, plexiglass, cloth. You could combine these and use a special finish as well. Hopefully this article has given you some ideas, and you will know how to start researching: by speaking with your printer.

Customizing by Hand

Sometimes, printing a highly customized card is simply not worth it, especially if you need only a small quantity. Does that mean you should dismiss your creative idea and stick with a standard solution? Not necessarily.

All you need is some imagination and a lot of patience. An appetite for crafts or having crafty friends or relatives can be a big plus, too.

You could print a standard card as the base of your idea and then customize smaller quantities by hand. I recommend doing this with fewer than 500 cards, or you will be overwhelmed. If you have crafty friends or relatives who are willing to help, you could tackle more.

Again, keep it relevant to the content. For example, colorful hand-stitching to underline a key phrase or “stitching” your design would be fun for a textile or fashion business:

126896067 3f6dda5b8d in Designing and Producing Creative Business Cards: Techniques and Details

Gluing on an element would work for crafts stores. Or you could glue a piece of fabric or something else that characterizes your service:

126894242 09e4aa3da4 in Designing and Producing Creative Business Cards: Techniques and Details

Incorporating something relevant to what you sell is a great idea, and there are plenty of ways to do this. Here is an excellent example:

A364 C12 in Designing and Producing Creative Business Cards: Techniques and Details

A paper clip would work for a business supply store or even a business consultant, while a dried or plastic flower would work for a flower or gift shopt. Just about any kind of business can find something relevant to add on.

You could even invite the recipient to customize the card themselves; for example, by including cut and fold lines that transform your card into a unique shape. Simple examples are a paper doll for a children’s store or origami for a stationery store. Just make sure it’s relevant and fun, otherwise your recipients are unlikely to go through the trouble of cutting out and folding the card.

Hopefully this article offers enough information and inspiration for you to make business cards that are as creative as your imagination allows, and on any budget.

Want To Know More?

Here are a few articles that go into more detail on some of the topics covered:

Related Posts

You may be interested in the following related posts:

(al)


© Lisa for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: business, card, Design, print

April 19 2010

21:00

35 Tutorials To Get Your Awesome Design Print-Ready

Preview-print-design-tutorials

Print design is everywhere around us. You can see it everyday on newspapers, advertisements, brochures, business cards, T-shirt designs, posters. But you need some skills to create good looking, catchy print design and usually it’s not an easy task.

In this article you’re going to find some useful tutorials working with print products on Photoshop, Illustrator, InDesign, Acrobat Reader – print designing will not cause any more pain for you!

1. Design a Ready to Print Brochure in Photoshop

In this tutorial you’re going to learn how to create a ready to print three-fold brochure from scratch using only Photoshop. This tutorial is ideal for beginners and for people who want to know more about print design.

Ready-brochure-in-photoshop-print-design-tutorials

2. Making a Print-Ready Business Card Using Only Photoshop

In this tutorial, we are going to design up a simple business card in Photoshop and get it ready for print with crop marks and bleed.

Making-ready-business-card-using-only-photoshop-print-design-tutorials

3. How to Design a Print-Ready Flier with Photoshop and Illustrator

In this tutorial we are going to create 3D text and integrate it in a natural environment. We will not use any 3D programs, so all you need is Adobe Illustrator and Photoshop to create this effect.

How-to-design-ready-flier-with-photoshop-illustrator-print-design-tutorials

4. Create a Fun Print-Ready Doodled Business Card Design

In this tutorial you’re going to create unique doodle and sketch business card design. You’ll be drawing our doodles directly in Illustrator, and using the application’s print abilities to set up your business card document with the correct margins and bleed to build a complete print-ready PDF document.

Create-fun-ready-doodled-business-card-print-design-tutorials

5. Business Card Design Project Walkthrough

You’re going to look look back at Chris process for creating the final concept of James Clarksons business card, resulting in the finished printed product.

Business-card-project-walkthrough-print-design-tutorials

6. Design a Print-Ready Beer Label in Adobe Illustrator

This tutorial takes you from setup to production of a really cool beer label, although this could be useful for any bottled concoction of your choosing.

Ready-beer-label-in-adobe-illustrator-print-design-tutorials

7. Design a Print-ready Ad in Adobe InDesign

Want to learn how to make an ad that could go into a magazine? This tutorial is perfect for you if you’re familiar with Adobe Illustrator and want to get started with a layout program suited toward publication design.

Ready-ad-in-adobe-indesign -print-design-tutorials

8. Create and Print a Brochure with Photoshop, Indesign and UPrinting.com

This is a 2 part complete walktrough teaching you complete process of designing a simple brochure, getting it ready for print and then actually uploading it to a commercial online printer, checking the proof and seeing the finished product.

Create-brochure-with-photoshop-indesign-uprinting-print-design-tutorials

9. Make a Print Ready Easter Greeting Card from Scratch

This ir really simple tutorial, which will help you create nice, simple greeting card for friends or family.

Make-ready-easter-greeting-card from Scratch-print-design-tutorials

10. Design Slick Print Ready Business Card Using Photoshop

In this tutorial you’re going to see how to design your own double sided business card in Photoshop and get it ready for print.

Slick-ready-business-card-using-photoshop-print-design-tutorials

11. Create a Grunge Print-Ready Business Card

In this tutorial you’re going to be guided through the process of creating a grunge print-ready business card using Photoshop. You’re also going to find some information on how should a good business card look like.

Create-grunget-ready-business-card-print-design-tutorials

12. How To Create Old Grunge Style Print Ready Business Card

This tutorial will guide you and help you to create a cool old grunged business card in photoshop which is fully print ready with full bleed.

How-to-create-old-grunge-style-ready-business-card-print-design-tutorials

13. How to Make a Great Print Ready Business Card in Photoshop

In this tutorial you will learn how to get your business card print ready with crop marks and bleed.

How-to-make-great-ready-business-card-in-photoshop-print-design-tutorials

14. Creative Brochure Design Tutorial in Adobe Photoshop

Learn how to create simple 2 page brochure for technology and design company.

Creative-brochure-in-adobe-photoshop-print-design-tutorials

15. Create a Business Card in Illustrator and Print it with UPrinting

In this tutorial we’ll take the Rockable Press brand tutorials and apply it to create and print business cards with UPrinting.

Create-business-card-in-illustrator-it-with-uprinting -print-design-tutorials

16. Design a Print Ready Business Card for Designers

Follow this walkthrough in Adobe Photoshop, Adobe Illustrator and Adobe InDesign to create your own double sided business card design, resulting in a print-ready file to send to your favoured print firm.

Ready-business-card-for-designers-print-design-tutorials

17. Create a Five-color Magazine Cover using a Spot Metallic

This as an advanced tutorial where first you’ll be exporting InDesgn template in Photoshop and then creating the print with CMYK and spot metalic color layer.

Create-five-color-magazine-cover-using-spot-metallic-print-design-tutorials

18. Create a Grid Based Resume/CV Layout in InDesign

Use the power of grid based designs to create a structured and professional page layout in InDesign, which can then be populated with a range of information to produce a polished CV or Resume.

Create-grid-based-resume-cv-layout-in-indesign-print-design-tutorials

19. How to Design an Abstract Business Card in Photoshop

In this tutorial you will see how to design an abstract business card using a combination of Adobe Illustrator and Photoshop. You will be using Photoshop as a base for our business card, all whilst using Illustrator to create some clean, abstract shapes to use in our abstract business cards.

How-to-abstract-business-card-in-photoshop-print-design-tutorials

20. Creating a Colorful Vibrant Business Card

Design a vibrant business card for designer. You have already been given a template with bleed lines.

Creating-colorful-vibrant-business-card-print-design-tutorials

21. How To Create Print Ready Standard Size Business Cards

In this tutorial you’re going to be creating a simple and easy, not hard to follow business card design. You’re also goig to find out what are bleeds and what to take in account designing a business card.

How-to-create-ready-standard-size-business-cards-print-design-tutorials

22. Designing for Print – Setting Up Crops and Bleed

Learn how to set up crops and bleeds for any kind of print works.

Designing-for-setting-up-crops-bleed-print-design-tutorials

23. What Makes a Good Business Card?

This isn’t a tutorial, but if you’re creating a business card with intension to really use it, you should consider reading this article by David Airey.

What-makes-good-business-card-print-design-tutorials

24. Create and Then Shatter a Grid, while Making a Typographic Poster

Break the grid to create a dynamic and exciting layout. So grab the usual tools of the trade, Photoshop and Illustrator, and follow tutorials steps into creating your own solution.

Create-then-shatter-grid-while-making-typographic-poster-print-design-tutorials

25. Design a 6 Panel CD Package Tutorial

In this tutorial the artist will talk you through his workflow and decision-making process rather than focus too much on specific graphical techniques and he’ll also explain how to use printers’ templates to make sure your design comes up to their specs.

6-six-panel-cd-package-print-design-tutorials

26. How To Design A Movie Poster – With An Example

This is very detailed tutorial teaching you how to research materials for your project, creating various outcomes and the message your poster should send.

How-to-movie-poster-with-examplel-print-design-tutorials

27. How to Create a Retro Boxing Poster in Photoshop

You’ll be drawing inspiration from Poster Design from the 1960s, particularly Boxing Posters from that era. You’ll learn some things to keep an eye out for when mimicking graphic design from any decades past.

How-to-create-retro-boxing-poster-in-photoshop-print-design-tutorials

28. Magazine Cover Design in InDesign

In this tutorial, we’ll not only take you through the process of creating a cover, but also reveal techniques that designers use to make their covers stand out.

Magazine-cover-in-indesign-print-design-tutorials

29. Create Numbered Tickets the Easy Way in InDesign

In this tutorial, we’ll explain how to do an easy setup in InDesign for automatically numbered tickets. We will look at the handy “Data Merge Tool,” which is a great time-saver.

Create-numbered-tickets-easy-way-in-indesign-print-design-tutorials

30. How to Create a Music Magazine Cover in InDesign

In this tutorial, we’ll look at how to create a magazine cover in InDesign. You’ll learn how to set up a page layout and add text. This is an introduction to InDesign and no previous knowledge is required.

How-to-create-music-magazine-cover-in-indesign-print-design-tutorials

31. Publishing a Multiple Paged PDF Document Using Illustrator

One of Illustrator’s lesser-known functions is it’s ability to produce and publish multiple paged documents in PDF format. This tutorial will explain how it’s done, while discussing some grid layout theory to produce an Annual Report.

Publishing-multiple-paged-pdf-document-using-illustrator -print-design-tutorials

32. Getting Illustrator files Print Ready

Quick check list to do before getting file ready for printing.

Getting-illustrator-files-ready-print-design-tutorials

33. How to Create a Coupon in InDesign

In this tutorial, we’ll explain how to create a coupon, double-sided in InDesign. This is a beginner level tutorial and by no means meant for print. It gives you a small intro into tabs, style sheets and glyphs.

How-to-create-coupon-in-indesign-print-design-tutorials

34. Create an Adobe Illustrator Template for a Tri-Fold Brochure

This tutorial will help you understand how to set crops and bleed for tri-fold brochure. You can also download template.

Create-adobe-illustrator-template-for-tri-fold-brochure-print-design-tutorials

35. Design Artworks for Screen-Printing

In this tutorial you’ll learn how to colour up a four-colour design for screen-printing using Photoshop and Illustrator.

Artworks-for-screen-printing-print-design-tutorials

January 18 2010

06:48

Creative Spotlight: Un.titled

Un.titled is a creative agency. They are an enclitic group of thinkers, designers, programmers and artists. Their passion is to engage an audience; tease, tempt, entertain and compel with and elusive mix of big ideas and bold design. Never defined by one media, they move seamlessly between online and offline, creating astonishing brand experiences with some of the world’s most respected companies.

Name: Un.titled

Site: http://un.titled.co.uk

Location: Leicester, UK

Select/Notable Clients: Nike, Clarks, Agenda, Jockey, Lacoste Footwear, Mint Advertising, Sheridan & Co, NTU, Puma, Phoenix Arts, Speedo, Wembley Stadium.

Un

GAGA 2009

Screen shot 2010-01-17 at 10.31.23 PMScreen shot 2010-01-17 at 10.29.42 PMScreen shot 2010-01-17 at 10.31.35 PMScreen shot 2010-01-17 at 10.31.44 PM

Hickling & Squires

Screen shot 2010-01-17 at 10.43.39 PMScreen shot 2010-01-17 at 10.44.04 PMScreen shot 2010-01-17 at 10.44.18 PMScreen shot 2010-01-17 at 10.44.28 PM

NTU Art & Design Invites

Screen shot 2010-01-17 at 10.55.38 PMScreen shot 2010-01-17 at 10.56.05 PMScreen shot 2010-01-17 at 10.55.50 PMScreen shot 2010-01-17 at 10.55.12 PM

Web

Screen shot 2010-01-18 at 1.23.25 AMScreen shot 2010-01-18 at 1.23.39 AM
Screen shot 2010-01-18 at 1.23.12 AMPhotography

Screen shot 2010-01-18 at 1.25.23 AMScreen shot 2010-01-18 at 1.25.14 AMScreen shot 2010-01-18 at 1.24.58 AM

Sponsored by

Advertise on Fuel Your Creativity.
Fuel Your Creativity 2009 cc (creative commons license)

Creative Spotlight: Un.titled

December 09 2009

10:00

Crafting a Generation: Kim Blanchette

In an age where printing companies are going digital and competing on price, Blanchette Press continues to craft masterpieces with their offset presses and the passion for quality. The family-run company values the freedom to produce the best product and the ability to cultivate great execution.

Kim Blanchette in his office.

Kim Blanchette in his office.

“I learned from designers,” owner Kim Blanchette admits. “Creative minds taught me.” That’s how he describes how he learned how to print so well. Today, young designers learn from directly from the craftsman himself, who guides them with his innate sense of color and ink on every job they do on press.

Kim started in the business by selling color in the 1970s and became inspired by working with creative people. He began to see the possibilities while working with visionary artists, photographers and designers. Ever since then, the self-taught printer has been striving to look for client collaborators who challenge them to jump through hoops and achieve the unachievable.

Kim and Adam Blanchette check proofs on press.

Kim and Adam Blanchette check proofs on press.

Over four decades, Blanchette Press has evolved from a letterpress shop to an offset printing company that specializes in serving the design community. The company crafts their relationships with creative people just as carefully as they do with their work. Their collaboration list with industry greats reads more like a who’s who in graphic design legends, including Pentagram, Studio Hinrich, The Hill Group, Carbone Smolan, VSA Partners and more.

Blanchette Press believes that close human relationships create the best possible work. They approach every project from an artistic perspective rather than a technical process. That means the artist is key to the success of the work.

Client: Sandro Miller Photography / Design Firm: SamataMason

Client: The Hill Group / Design Firm: Terry Vine Photography

Client: AIGA / Design Firm: Weymouth Design

Client: AIGA / Design Firm: Weymouth Design

Client: Nichole Sloan Photography / Design Firm: Sasges Inc.

Client: Nichole Sloan Photography / Design Firm: Sasges Inc.

Client: The Hill Group / Design Firm: Terry Vine Photography

Client: Sandro Miller Photography / Design Firm: SamataMason

“That’s the intangible element that goes into a project,” remarks Nick Knowlden, Director of Sales. “To create a great project, it has to be well-designed, have great photography, have great typography and have great execution and production. We meet the execution part by working with people who value that part of the chain.”

The whole team works very closely with their clientele to help interpret what the designer is trying to achieve. Kim and his pressmen check the quality on every job before it ever leaves the plant.

Pentagram Typography Calendar / Design Firm: Pentagram San Francisco

Pentagram Typography Calendar / Design Firm: Pentagram San Francisco

Client: Rodney Smith / Design Firm: David Meredith Design

Client: Rodney Smith / Design Firm: David Meredith Design

Client: American Express / Design Firm: VSA Partners New York

Client: American Express / Design Firm: VSA Partners New York

And the attention to detail pays off. Blanchette Press has been recognized around the world for the brilliance of their talent. Apart from the accolades they collect from the printing community, they’ve also garnered recognition from the design community with multiple Mead Annual Report Show and Graphis gold and platinum awards.

Kim’s family helps to continue the printing tradition. The small but dedicated staff of 35 tries to keep it simple and limit the company’s growth in order to keep the focus on quality. There’s no fancy client lounges or elaborate client amenities at Blanchette Press. The operation is humble because they put all their passion into the craft of printing. And with that core value in mind, the company continues to prove that anything is possible.

Photography by Victor John Penner.

Client: American Express / Design Firm: VSA Partners New York

The long shelf of Mead Annual Report Show awards.

Blanchette Press' beautiful location in Richmond, British Columbia.

Blanchette Press' beautiful location in Richmond, British Columbia.

Sponsored by

Advertise on Fuel Your Creativity.
Fuel Your Creativity 2009 cc (creative commons license)

Crafting a Generation: Kim Blanchette

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl