Press Color Separation

Understanding colour for press.

Color separation process

The process of color separation starts by separating the original artwork into red, green, and blue components (for example by a digital scanner). Before digital imaging was developed, the traditional method of doing this was to photograph the image three times, using a filter for each color. However this is achieved, the desired result is three grayscale images, which represent the red, green, and blue (RGB) components of the original image:

The next step is to invert each of these separations. When a negative image of the red component is produced, the resulting image represents the cyan component of the image. Likewise, negatives are produced of the green and blue components to produce magenta and yellow separations, respectively. This is done because cyan, magenta, and yellow are subtractive primaries which each represent two of the three additive primaries (RGB) after one additive primary has been subtracted from white light.

Cyan, magenta, and yellow are the three basic colors used for color reproduction. When these three colors are variously used in printing the result should be a reasonable reproduction of the original, but in practice this is not the case. Due to limitations in the inks, the darker colors are dirty and muddied. To resolve this, a black separation is also created, which improves the shadow and contrast of the image. Numerous techniques exist to derive this black separation from the original image; these include grey component replacementunder color removal, and under color addition. This printing technique is referred to as CMYK (the “K” being short for “key.” In this case, the key color is black).

Today’s digital printing methods do not have the restriction of a single color space that traditional CMYK processes do. Many presses can print from files that were ripped with images using either RGB or CMYK modes. The color reproduction abilities of a particular color space can vary; the process of obtaining accurate colors within a color model is called color matching.

– from Wikipedia

The interface

I have developed a small interactive interface that will be able to help understand this process.

Try to match the images to create the CMYK composite.

--> Click to launch the Trinker//CMYKinterface <--

Advertisements

101.a Defining an Interface // Exercise

101.a The Exercise.

Building a basic website.

Through this exercise we will be building a basic website.  At this stage we will not be covering any scripts or codes for it, all we need to do is understand how these interfaces work and perhaps start planning and defining our design methodology and process.

The Mind Map

The first thing that we have to do is to define what are we going to present, this could be our main subjects or areas for our website.

What I recommend to do is to create a mind map of all the possible linkage in between our subjects or areas.  For this you can use a simple piece of paper.

As you can see we have 4 main topics or areas.

  • Home
  • Portfolio
  • Clients
  • Videos
  • As external links we will be using Flickr and Apple.

I have also defined the linkage in between our areas.  If you look closer into the arrows, we can see that Home is capable of connecting to Portfolio, Clients, Videos, Flickr and Apple.  Portfolio can connect to all the areas except Flickr and Apple.  We have to be very careful when we design the mind map to be as close and accurate as our main website or at least closest to what we have planned for our interface.  Make sure that you won’t leave anything out!

After defining our main areas, the next step in our methodology will be to assign file names to each of our areas.

If you remember from the previous post, we have to create .html or .xhtml documents. The easiest or more logical (for me at least) thing to do is to name our pages with the same or closer name of what we have already defined.  This is also very important to integrate into the mind map, since it will be our reference for all our linkeage.

Here is where we start using our first rule: Our first page has to have the filename of index.html so the browser can identify the first starting page for the website.  If you call it home.html, the browser will not find the appropriate document to render the information.

The second rule and recommendation for naming your areas or pages will be not to use capital letters, special characters or spaces.  The main problem with using special characters or capital letters is that later on it will be more complex to remember which name started with capital letters and which ones don’t.

The problem of using spaces will be that if you are working on a Mac computer and you use a space, when you translate that name with a space into a windows machine, that space will be transformed into a different character because of the way the Windows systems read the file formats, which means your file will have a different name in Windows and your browser will not be able to find it.

The next image shows the names I assigned to the areas of my mind map above.

As you can se above:

  • Home = index.html
  • Portfolio = port.html
  • Clients = clients.html
  • Videos = video.html

Making our first website

Now that we know the pages that we require, we can start creating them using Dreamweaver.

Before actually starting to create the pages we need to define the website.  This process means that we will map all our files towards a folder, hard drive or location in the computer, so when we place it on a server or any other location, all the files will be linked properly and we will not be having any missing links.

Define a website on DW welcome screen

When you launch Dreamweaver you will get the welcome screen.  In there you can find the Dreamweaver Site shortcut.

If your Welcome screen does not open, you can define the site from the files palette. Window-Files (shift+cmd+F).

Manage Sites will allow you to visualise the different projects that you are currently undertaking on your local or network folders, and you can be able to preview them as green folders with the name of your managed site.  Make sure you don’t just start storing files on any location on your machine.

If you start to work on a different computer, you will also have to manage your website in relationship to those files again.

When you click on Dreamweaver Site / Manage Sites, you will be able to see the new Site Setup Window.  I am working with with Dreamweaver CS5.

Go to Site tab and where it says Site Name, go ahead and type: Exercise01.

Now go to the finder and create a folder on your computer and call it Exercise01 and then use that path on the Local Site Folder, you can use the folder icon on the Site Setup Window.  The Servers, Version Control and Advanced Settings we are going to leave them alone.

Lets start making the pages!

We will go to File-New, we will create a New Html with no layout.

Make sure you are on the Design view, by clicking on Design on the top left corner of you Dreamweaver interface.. At any moment you can change your view to Code, Split (Code/Design) or Design only.

Go ahead and type some content on that page which will become our Home, and lets save it as index.html.  We will repeat the process of creating the rest of the files by going to File-New; and create new Html with no layout and create your Portfolio, Clients and Videos pages.

If you want to visualise what you just wrote on a browser, you just have to click on the Preview/Review in browser button located on your tools palette.

Placing content

To start placing content like images or buttons on our website, what we have to do is open our Insert Palette and make sure that palette is on the Common tab.  From there we can be able to insert different types of media.

Basic Linkeage

There are three basic ways how we will be creating hyperlinks on our website.

By typing the name of the file on the property inspector, by pointing to the file or by browsing to the file.  This process can be also reproduced with images like jpg, png, or gifs.

Here is a video showing the way to create the hyperlinks.

Placing images

The most commonly used image formats for web are jpg, gif and png. Jpg have the widest colour range and is the most recommended one for pictures.  Gif is a very old format that allows us to create some animation with it, it can also contain transparency, the only issue is its compression which is not great.  Png is quite a not so old format that most browsers support now and can offer us an excellent compression, transparency but with no animation, This is perhaps the one you want to use for your logos and vector images.

The next video will show you how to place any kind of image into your website and centre it.

Web Custom fonts

Typography and the Web.

When we design a website, the browser will access the fonts that are installed in the computer of our user.  A website is basically text, images, videos and ornaments arranged through an xhtml or html document.  We use tags to assign format to certain type or ornament elements of our design.

Through html or CSS2, we have been able to use downloadable fonts for our websites, now its lack of interoperability  has been forcing this WebFonts to be less and less common.

Step 1

The basic website.

We will start with a basic website.  With our basic tags, or you can create your own.  At this moment I will be working with my <h1>, <h2> and <navigation> tag where I gathered the navigation links with a <div>.


Step 02

sorcu (Simo Kinnunen) and Cufón

I will start this next step by introducing Simo Kinnunen and a beautiful type renderer for the web called Cufón.  This is one of the most basic and simple ways to embed fonts on to our websites.  It is basically compiled of to essential parts.  The font generator in which fonts are transformed to SVG fonts and then to VML paths.  The second part will be the renderer which is completely engineered in JavaScript.

• Get cufón.

It is recommended to use the YUI-compressed version of cufón. You can download it from the cufón website.  Download it an make sure you host it on your server on on the same folder project.

• Generate a font.

We can use any font and transform it using the font generator.

This will generate a file which in the name of the document we can notice the weight of the font with a numerical value,  400 is equivalent to normal as 600 is to bold.

For example: Once we convert Kelvinized font, it will result in Kelvinized_400.font.js The name of the file is not really that important as the number next to it.  That way we can identify our fonts easier.

Step 03

Apply the fonts

Basically now what we have to do its to apply the JavaScript code to our website.  We have to place it in between the <head> tags of our html document.

• Start by loading cufón and loading the specific font that you are looking for

http://js/cufon-yui.js
http://js/Kelvinized_400.font.js

• Now we initialize the script.


Cufon.replace(); 

• We can now start to personalize our script based on the tags that we used.
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('#navigation a');

Taking it a little bit further.

• We can use specific colours, shaders or gradients for our fonts, just add them to your selectors!

Cufon.replace('h1', {color: '-linear-gradient(blue, white)', textShadow: '1px 1px rgba(0, 0, 0, 0.2)' }); 
Cufon.replace('h2', {color: '-linear-gradient(white, 0.5=##fff, 0.6=#fff, teal)' }); 
Cufon.replace('#ligas', {textShadow: '1px 1px rgba(0, 0, 0. 0.2)'  });

101.Defining the interfaces (Introduction)

What is an interface?

At the moment we start interacting with any system and perhaps try to communicate with it, we have to define the method or context in which we will be interacting with it.  This method/context will create some boundaries in between user-system/system-user.  The interface will be the channel through which the user will interact with this system.

In computer technologies, there are several types of interfaces:

  • User interface
  • Software interface
  • Hardware interface

The main goal is to produce a user interface that will make the experience for the user mainly efficient, easy and enjoyable.  This is based on the main concept of providing a design specially focused on Usability.  Merging interface design and usability design, we start introducing concepts from ergonomics, psychology and of course all the standard design theory used for static and dynamic design.

What is the interface for?

One of the most important thing that we have to do, is define what is going to be the main usage of our interface.  At the moment there are millions of interfaces developed everyday.

ArcadeFor example the arcade console has been around us for a long time and not many people actually stops to analyze the concept behind this interface.  We have a visual output which is controlled by a user using a mechanical input (joystick and buttons) inside a software interface (game).  At the same time the user needs to provide a payment through another interface, this one is quite simple: the coin slot.

From these millions of interfaces, we have to understand what is the objective or action that we are trying to complete. Playing music on a mp3 player, playing a dvd, playing a game, browsing a website, teaching a subject, telling a story, visualizing data, making a phone call, performing a task, etc..

One of the first things that we have to do, is to define the need of the interface, what is going to be the purpose of it.  There has to be a need which this interface will be filling

The peripherals of the interface.

After we defined the main usage for our interface, now our next step will be to define the input/output method for it.  In the modern world or at least in what we are going to be focusing on these series, will be designing interfaces which will be interacting with a software and a computer.  This means our main input peripherals are going to be items like: keyboards, mouse, touch-screens, joysticks, etc.  Knowing this, we can start planing and visualizing what kind of options we are going to have and what kind of restrictions too.

If you are going to design a game, then you need to know what is going to be your platform: PC (keyboard, mouse), XBox (controller),  Wii (Remote), so this way we have the main concept and idea of how many buttons, movement restrictions, maneuverability and/or distance to the output that we are going to have for each one and that starts defining our key concepts of what we are going to be using or needing.

Planning our new interface.

In this introduction we will start with one of the most commonly known interfaces: a website.

First of all we have to understand how a website works and how it is going to be interacting with our user.

A website is basically a text document formated with hypertext markup language (html), that also may contain images, videos, animations or any other sort of information that embellishes the document.

This document will be hosted in a web server wich can be accessed through the internet or a local network. We access the information through a Uniform Resource Locator (URL), which contains the address.  The transportation of the information with the Hypertext Transfer Protocol (HTTP), which finally sends the information to our web browser/interface where all the information is rendered.

Anatomy of a website

Designer

This is the person in charge of developing the graphics, web pages, scripts and any content necessary for the page. He will be providing the content to the hosting company.  The designer has to be in charge of choosing the proper visual communication procedure and techniques in order to have a successful website.

Registar

This is the company that creates the link in between your domain name and your hosting company where your files are going to be hosted. Through this process you pick your .com, .org, .co.uk., etc, depending on your business needs.

Hosting Company

They are in charge of hosting your files on their servers. Sometimes they can act as the registrar company to provide your an easier management of services. You can access these files using any FTP software.

Technologies and software.

Through these series we will cover several applications and programming languages.  Just to get us started and getting familiarized with these applications I will list some of them.

Html/Xhtml/Css/XML Editors

Mainly we can use any text editor to create and modify any website.  Mostly we will be working with Dreamweaver which is a web page creator software.  Dreamweaver allows to work as a WYSIWYG or as a code inspector, the software can be purchased through the Adobe Website.

In the other hand Text Wrangler, provides us a free option for developing these type of files.  It has been developed by a company called Barebones, which allows you to download this app. for free!  Then we can use any web browser to visualize the information.

One of our last resourses, we can use notepad or any text editor to modify or create the content for our websites.

FTP Managers/Software

The Hosting company will provide storage for our files, these files are not on our computer but on a remote hard drive  somewhere in the world.  We need to access these files somehow.  We can use the web browser to access this remote hard drive (remote server).  Dreamweaver is capable to connect to the hosting server and work directly with these files, so if you already own Dreamweaver, then perhaps you won’t need anything else.  Personally I sue CyberDuck, a free Mac application that allows to connect and transfer your files and the best of all is that its free!  There are other options for mac/pc like Captain FTP, Smart FTP or Cute FTP.

It is recommended to work on your computer and once your documents are done, then you can upload your files directly to the hosting.

Designing a Scientific Poster (Part 02)

Part 02. Layout and Design Issues

Layout.

There is going to be several ways to arrange and layout the content of our poster, but there is going to be several key elements that we don’t want to look over before making any decisions of where to place our objects.

Reading Process

By default at least in non-Oriental cultures, we will start reading from left to right and then from top to bottom. That is why we have to be very clear the way we arrange our elements and the spacing between them.

In this example on the left we can see how a simple landscape page can be divided into four quadrants, showing us the reading sequence of our audience. This means that the first area in where our audience will look for information will be the quadrant no.1

Now that we know that the audience will start on the top-left of the page, then we can start to sub-divide our content depending on the amount of information and type of imagery to be used.

The illustration on the right shows us that now we have two main elements: The Title placed on the top left ant the rest of our quadrants placed right after the title, allowing us now to subdivide the rest of the page into sections, which will be containing the rest of our elements..

When we start defining the positions of the elements on our poster, remember to be creative! Perhaps you want to start by sketching some ideas or placements of your elements before you even start creating the layout or placing the elements on the canvas.
Remember we already had placed the title on the top.

Grid for the Layout.

The grid can become a very helpful ally that will guide us to divide the spaces of our canvas, that way all we have to do is place the elements on the cells of our grid.

The first thing we have to do is to start sub-dividing on a continuous division of the canvas in the ratio 1:1414. Using our canvas as a guide, we can maintain the proportion throughout the grid, this will give our design elements a relationship towards the paper size and the grid. By using the size of the paper as a guide we can divide using that ratio to begin creating the grid.

GridsTrinker

Try1

Placing the elements.

At this moment we have divided our canvas into several cells and columns. Now is the time for us to start placing our elements. At first, looking at the grid, it seems quite contradictory to have creativity on what it seems to be such a rigid layout. The grid systems will help by providing a framework and recommended positions for our elements. Remember at any moment you can sub-divide even further any of the areas of the grid that you already have. Experiment with your elements but keep in mind the sequence for your information.

Approximate size: 1m X 1m
Number of parts: 10 maximum
Lines per part: 10 – 20 maximum

Typography.

Type is one of the most important elements, not only for the final aesthetic result but also to provide the a better accessibility to the information.

There are two main concerns related to type:

  • Readability
  • Legibility

Readability is the result of the complete process of presentation of the text material in order to communicate the message clearly. Readability will relate to a whole paragraph or sentence, a text as a whole and its accessibility

Legibility focuses on each individual character or glyph making sure it is distinguishable from all other characters in the font. Legibility is including on the design process in which we pick the appropriate typography that is not only easy to read or to identify, but also that contains the personality that we are looking for.

We have to take these two concepts into consideration while we are introducing type to our poster, since there are going to be several elements that will affect either the readability or the legibility of our text.

tont

Avoid using serif fonts for the title, but is recommended to use them on the main body of your text.
Do not use bullets on your main headers, use bold type and follow a proper hierarchical sequence for headers and sub-headers.
The width of the text boxes should be approximately 40 characters, having on average 11 words per line.
Avoid blocks of text longer than 10 sentences.
Do not underline, use italics instead.fontcolor
Avoid using dark backgrounds or element saturated backgrounds.

Recommended fonts:
Titles: Helvetica, Arial, etc..
Body of text: Times New Roman, Palatino, etc…

Sizing, it is recommended to use the font size to 40pts. This is because we have some considerations towards the audience:

Poster reading time: 2 minutes
Distance to be read: >2 meters

Colour.

Although colour can enhance the content of our elements, it can also work against us. We have to be aware which combination of colours we are going to be using so we won’t affect either the legibility or readability of our text content and make it friendly and appealing to our audience at the same time.

We already have some typography based restrictions for the colour. Now, we will get more into detail to check what are going to be our best options.

Contrast.

In typography, colour contrast its what is going to make it stand out. Here are some examples and recommendations for the colour contrast:

contrast

This is an example of how colour contrast is used to stand out text. Red text over the white background jumps out from the screen straight away, meanwhile the dark colour sits more quietly enclosing the whole concept.
Using white or a light colour is easier to deal with, since it is a very noble or friendly color, which allows us to combine it easily.

contrast2

Another option would be by changing the colour of the type. This will allow also some words to stand out, without disturbing the rest of the content. Although we will be using a colour change on the type, it is recomended to continue with a simple pattern or stick to the color swatch that we will define for the poster.

After these examples we can start experimenting a little bit more and perhaps use colour and contrast to enhance the visual appeal of our text or titles by using our basic colours from our colour swatch defined for our poster.

contrast

Choosing the colour palette.

There are several tools that we can use to pick the basic colour paletes or swatch collections for our designs. But firs of all lets understand which colours will work best for our readability and legibility according to how they relate or how much contrast they generate in between them.

The first thing we need to do when we picking a colour palette is to define a theme. This theme of course has to have a personality, which at the same time is directly related to a colour. We will pick that colour and then apply the several colour combination rules, which are:

  • Analoguous
  • Monochromatic
  • Triad
  • Complementary
  • Compound
  • Shades

Lets imagine we will be presenting a poster related to the ocean. As we know on a big scale the most predominant colour is blue. Now, lets use that colour and start applying some combination rules…

color

There is an free web application created by Adobe called Kuler. This application is also in Photoshop CS4. What this application does is to help us to device colour schemes through the several color theory rules.

If you load the Adobe Kuler application, go to Create – From a Color and then pick the base colour.

We will start by picking the blue colour, wich contains 100%Cyan, 100%Magenta, 0%Yellow and 0%Black. Now all we have to do is to pick the rule that we want to apply. Make sure once you pick a rule to apply as your colour scheme, don’t start combining other color into the main colour scheme of your design.
On the bottom of the colour swatch, you will be able to see the RGB, CMYK, HSV, Hex and LAB colour values, so you can be able to apply this colours properly if you need to present your poster as a digital version on the web or any other digital media output.

Analogue Rule.

analogue

Monochromatic Rule.

monochromatic

Triad Rule.

triad

Complementary.

compleme

Compound.

compound

Shades.

arrow

Part 01 – Basic Concepts (Scientific Poster)

Bibliography.

Block, S. 1996. The DOs and DON’Ts of poster presentation. Biophysical Journal 71:3527-3529

Briscoe, M.H. 1996. Preparing Scientific Illustrations: A Guide to Better Posters, Presentations, and Publications, 2nd ed. Springer-Verlag, New York

Advice on designing scientific posters. Colin Purrington, Department of Biology, Swarthmore College, Pennsylvania

Alley, Michael, The Craft of Scientific Presentations (New York: Springer-Verlag, 2003), pp. 211-217.

http://www.writing.engr.psu.edu/posters.html

La alegría de publicar 3. Las presentaciones de carteles en congresos científicos. Carlos Alfonso Reyes, M.D.1, Guillermo Llanos, M.D

Five simple steps to designing grid systems, Mark Boulton

Recomendaciones en la elaboración de un cartel.

Color and Typography in Good Desing, ColourLovers.

Requisitos Para Carteles. UAM, Mexico

Readability Test, Juicy Studio.

Designing a Scientific Poster (Part 01)

Part 01: The Content

Defining a Poster.

A poster is a graphic material devised to deliver a message, it integrated as an aesthetic unity by high impact images and brief text. The message of a poster has to be global integrating each one of the elements in a single blended aesthetic unit.

DataVis02//JavierPeredaTrinker

There are two types of posters: Informative and formative.

The Informative Poster, is meant to communicate events, conferences, courses, social reunions, shows, etc.

The Formative Poster, is used as a channel to inform the audience about a specific topic or even explain activities.

The Scientific Poster.

The scientific poster is a formative poster. As we know already, the poster is meant to communicate a message Through the scientific poster, we will be presenting work to an audience who could be on a hall, an exhibition or even on the outdoors. It is common for the presenter to be standing next to the poster allowing and inviting the audience to engage into one-on-one discussion about the message or in this case the subject presented. Some exhibitions will require the poster to be standing alone, this means the presenter will not have the opportunity to explain the content or to establish any direct conversation with the audience, which will make the information fully dependable from the poster.

Quick contents for the poster.

  • Header
    • Title
    • Authors
  • Short description
    • Introduction
    • Methodology
    • Results
  • Discussion (optional)
  • Conclusion
  • Bibliography

Header.

Tilte.

  1. Make sure the title is the most visible text area of the poster.
  2. Do not use capital letters for all the typeset.
  3. Try to use short words (of, from, with, an, and and) to separate details in the title, and it is correct not to capitalize these words.
  4. It is recommended to locate the title on the top.
  5. The Authors can be placed just underneath the title.
  6. According to the kind of audience you are focusing, the title should be catchy in order to drag more interest.

Short Description.

We should try to make the audience recognize what is the poster about and of course its purpose; the audience should be able to do so within 20 seconds, so let’s try to keep it simple.

Introduction.

Do not include the abstract on the poster! Most of the time the abstract will be sent for different uses like: the conference catalog. Although this is not a rule, make sure you ask the organizers the requierements (if any) for the poster.

We will try to get the audience interested in the project straight away by providing only the essential information and definitions, and straight away place the issue in the context. This is also the perfect place to present your hipotesis and perhaps provide description and justification of general experimental approach. (200 words)

Methodology and Materials.

Briefly, describe your materials and methods, although remember this is not a manuscript, so, be brief. Use graphics or graphical ornaments to explain the experimental design if possible; use artistic visualizations to represent the experimental procedures. (200 words)

Results.

You will have to basic answers: Success or Fail. Make sure you mention at first whether the experiment worked and the details of it ( 90% of subjects survived ), and describe qualitative and quantitative results.

After this content proceed to show the data analysis that directly addresses the hypothesis; refer to data visualization design concepts. (200 words without legends )

Conclusion.

Discuss what are your results and their relevance. Perhaps explain how are your findings relevant to real organisms and future directions. (200 words)

Bibliography.

In this case is recommended to place the most relevant citations and sources from your project. Keep in mind that all content that has been quoted from other authors, needs to be properly acknowledged.

Part 02 – Layout and Design Issues

Bibliography.

Block, S. 1996. The DOs and DON’Ts of poster presentation. Biophysical Journal 71:3527-3529

Briscoe, M.H. 1996. Preparing Scientific Illustrations: A Guide to Better Posters, Presentations, and Publications, 2nd ed. Springer-Verlag, New York

Advice on designing scientific posters. Colin Purrington, Department of Biology, Swarthmore College, Pennsylvania
Alley, Michael, The Craft of Scientific Presentations (New York: Springer-Verlag, 2003), pp. 211-217.

http://www.writing.engr.psu.edu/posters.html

La alegría de publicar 3. Las presentaciones de carteles en congresos científicos. Carlos Alfonso Reyes, M.D.1, Guillermo Llanos, M.D

Five simple steps to designing grid systems, Mark Boulton

Recomendaciones en la elaboración de un cartel.