The effect packs a lot of information into a tight space. But it can get ugly if the text and imagery are at odds with each other.

Designers can steer clear of disaster by keeping their purpose in mind: expressing the idea clearly should trump the “wow” factor of the technique.

Setting images directly in text mixes the straightforward communication of words with the emotional effect of photos.

Words state, and photos express. But when images get lost or text becomes muddled, or both, we get conflict. Images and text can be harmonized seamlessly, but only if we follow some guidelines that balance the readability of both. Read on to find out how to effectively mix text and imagery.

Balancing Text and Image Readability

Think of letterforms as picture frames… albeit unusual ones. Setting an image in text requires that you remove chunks from the picture. To retain the readability of the image, you’ll have to decide which parts of the image matter. It’s best if the letterforms don’t intrude too much on the picture.

Above, two triangles cut into the photo from the top and bottom. That’s good for the text, which is now a recognizable “N,” but bad for the photo, because some detail has been removed from the focal point of the image (i.e. the flower).

To figure out how images and text can (and can’t) mix, we begin with the letterforms. The obvious starting point is choosing the right type weight.

Myriad Pro Light is legible at the point size shown above. The edges of the letters are clear, and most of the colors contrast well against the background. But the photo is reduced to an abstract texture.

Changing the typeface to Myriad Pro Black reveals more of the photo. The text is harder to read because there’s more detail to catch the eye, but the word “Spring” is legible.

Choosing a thick typeface isn’t enough. We can improve image legibility another step by tracking the word, thus applying Gestalt principles—specifically “reification,” a term from Gestalt psychology that describes how we make whole images and shapes with our minds even when our eyes are given only pieces or hints.

Above, the letters are kerned together to create a more coherent “stage” on which the photo can appear.

In detail 1, the letterforms are deliberately overlapped to show entire shapes within the photo—but not so much that they obscure the word.

In detail 2, three letters with vertical sides are spaced far enough apart that you can recognize them as letters, but are close enough to let the flower’s petals “hop” across the white gaps. The black lines show implied lines that people connect subconsciously. At least one more Gestalt line of sight hops across letters in the word above. If you see it, leave a comment below.

Tight kerning tends to create solid blocks, which look interesting but can be cumbersome. The solution is to leave gaps between matching (or parallel) lines but to tighten areas that don’t naturally fit together.

Here, letters with matching lines (such as the vertical sides of “r,” “i,” and “n”) aren’t as easy to read when pressed together. That open space is good for photos but bad for letters. Of course, attaching letters whose shapes match isn’t always a bad idea, but they should be as legible as possible.

Mo’ Photos, Mo’ Problems

One photo and a short word is easy. Multiple photos across two lines requires more effort.

“Active summer” conjures a certain kind of imagery. The composition above has some merit. It shows a variety of photos: portraits, macros, landscapes. The text is set into an even block. And the typeface is thick enough to show most of the imagery. But there are problems.

While a few things work well, the composition is riddled with problems. Specifics are labeled in the diagram above, but most have the same cause: the letters and photos interfere with each other. We can resolve the issues by making slight changes.

Our major changes here include:

• The image of the person in “S” is moved to the “e” in “active.”
• New images are set in the “m,” “e” and “r” in “summer.”
• The image of the person in the “e” in “summer” is moved to the “u.”
• The river image is moved from the “i” to the “S” in summer and is shrunk to reveal its source.
• The diving board is moved to the “i,” and the diver is fit into the dot above.

It’s better, but not perfect. The second “m” is still lost in the background. Also, adding photos with vibrant colors widens the color palette, which can be a problem. Let’s try again.

We can give thin borders to the “e” in “active” and the second “m” in “summer.” The borders here are deliberately kept faint (45% opacity) to avoid drawing attention to themselves. We can also give the “S” in “summer” a border, but only where necessary (on the whitewater). Borders are necessary only where light-colored elements meet the white background.

The “r” in “summer” features white clouds that blend into the background. But the designer decided that the “r” shape was still legible, so a border was unnecessary.

Sometimes solutions appear when you are looking for problems. During our third round of changes above, for example, the designer isolated the cannonball diver from the background, which creates a more direct interaction between the image and text.

The final touch is to blend the colors. This unifies each word.

From slight shifts in hue to outright monotones, each word above receives varying degrees of tint. Despite the variety of subjects, scales and angles, similar colors helps each word stand on its own. Is this necessary? It depends on one’s goals.

If tying the words together is more important than having realistic color, then the technique above could work. But tinting is a solution that should be applied only if there’s a problem—that is, only if the intended meaning is getting lost.

Reduce, Reuse and Recycle Photos

One last problem with this composition is the sheer number of images used. Each letter seems to contain a distinct photo; if purchased as stock art, 12 photos could run up a big tab.

In fact, only seven photos were used in this composition. Two of the seven were used only once. One was used three times. Take a look:

Setting photos into letterforms always requires cropping, so busy images—like the photo of the four people—can be cut in different ways and reused many times.

Changing Text to Fit Imagery

The two words we just dealt with, “Active Summer,” are set in the same typeface but in different point sizes to keep their edges consistent. When using one letter per image, the design decision is arbitrary. When dealing with a single image, however, the shape of the text is critical; keeping the overall text shape as close to the image’s proportions as possible is best. For example:

“Espresso House” is a long phrase, poorly suited to a 4×3 image. The solution is to adapt the text to fit the photo:

• The words are stacked to create a block.
• The word “house” is enlarged so that its left and right edges match those of “espresso.”
• The “H” in “house” is uppercase, but shrunk to match the height of “ouse.” As little space as possible is left between the two words.
• Though not always desirable, here the descender in “espresso” is allowed to meet the “o” in “house.”

Legibility is important but to some degree subjective. Certain techniques favor the image, and others favor the text. This interplay is left to the designer, who understands the goals of the task.

We can emphasize the text by increasing contrast around the edges of the letters (left). To emphasize the image, we show the faded image in the white space between the letters (right). “Ghosting” muddles the text but shows the image as a whole.

How to Set Images in Text with Photoshop

There are many ways to overlay images onto text, but these examples were created with a recipe developed by trial and error.

First, set the text in a Photoshop document. This composition is 615 pixels wide because that fits Webdesigner Depot’s specs. When creating your own, fit the size to your project.

To see the edges of the letters clearly, start with black text on a white background. When you’re finished, set the text layer’s opacity to 20%.

Above, the Photoshop layers palette in the first step.

Second, flatten the word into the background to create gray letters on solid white. Then retype the letters, one per layer, using the background as a guide.

Above, the Photoshop layers palette in the second step.

Third, add photos or parts of photos to the composition as separate layers. “Clipping” the layers (Layer → Create Clipping Mask) lets the top layer (in this case, each photo) appear only where the underlying layer (each letter) appears.

Above, the Photoshop layers palette as we add photos.

Repeat as needed.

Adapting the Idea

Any photo, illustration or texture can work with text in this way. The key is to strike the right balance of clarity between text and imagery.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you manage the collision of type and imagery? Please share your thoughts below…

Never Ending WordPress Business Bundle – only $14!

While we all use both sides of the brain, each of us has a dominant side, and this dominant side makes up for a huge part of our personalities.

Each individual thinks a certain way, has more interest in certain areas, and above and beyond all — is most effective in certain ways. An accurate understanding of the left and right brain can help one to become more productive, efficient, and creative.

This article will cover a basic understanding of what the left and right brains are, and each of their traits. We’ll also go into how we, as creative people, can harness this understanding of the left and right brain to be more creative, as well as succeed in other work-related tasks.

What They Are, and Their Difference

Some may have heard of this, others may have not. Before we get too into specific examples to aid in our benefit, let’s go over exactly what the left and right brain are, and their associated characteristics.

Our brain is divided into two halves, as most of us know: the left and right side. Each side processes information very differently than the other, and the biggest difference is the visual aspect.

The right side of the brain looks at visual reference as a whole, whether it be a landscape, object, or piece of artwork, and then works its way into noticing finer details.

The left side on the other hand, first sees the details and puts them together to form the bigger picture.

Our brains use both of these sides, mixing and matching each side’s abilities for a fully-functional human brain. However, each of us has a dominant side that leans more towards the behaviors of that respected side.

There are a number of characteristics, many of which could be considered personality traits, that a person with either type of dominate side has:

Right Brain

Those with a right-side dominant brain depend more on visual references for understanding and are often times visual learners.

They are more emotional, swayed by feelings, and are able to better understand and reflect on these feelings. Furthermore, right-brained thinkers are very intuitive and curious about the world.

Finally, as a down side, they tend to be disorganized, lacking in time-management, and unable to prioritize well.

Left Brain

The left brain is the side that handles organization and logic.

Because of this, those that have a dominant left side are also very organized; they prefer schedules and deadlines, and love rules and regulations. They are more auditory learners, and are better at using words to remember things rather than visual aids.

They process ideas in a step-by-step, algorithmic way, and are therefore less prone to error.

Their Relation to Art, Design, and Creativity

As one may have probably already guessed, those with dominance in the right brain may be more naturally creative.

It’s easy to assume this because for one, right-brained thinkers are less common than left, so it seems as though one would be seeing the world differently from everyone else.

Also, the natural heightened visual nature and curiosity tend to make the mind never stop thinking of the alternative — as well as how it can be applied visually.

Those with a dominant left brain are far more common, and far more analytical. They may feel at disadvantage for not having that ‘natural’ creativity. Realistically, though, left-brained people can be just as creative; they just come about it in a different way.

To better understand the artistic nature of both sides, let’s take a look at a few examples of artwork.

Abstraction = Right Brain

Right brained people may lean more towards abstract art, because of its lack of order and disorganization. Abstraction also gives no boundaries, so it can be considered more ‘outside-the-box’, or creative.

Abstract art is also known to portray emotion, even with no hard visual evidence. A right brained person may more easily be able to pick up on an abstract piece’s deeper meaning.

Orderly Art = Left Brain

In contrast to abstraction, left brained people may be more attracted to a more ‘orderly’ form of art — either photo-realistic, or otherwise. As long as it is artwork with guidelines, form, and sense, it works.

Below is a painting, with plenty of creativity — but also with little abstraction.

Find Your Dominant Side

Before discovering how to harness one’s own creativity, one must find which side of the brain is dominant. As we know ourselves best, we may already have a good guess based on the definitions above. However, for more accurate results, there are a number of quizzes one can take online:

• Right Brain/ Left Brain Quiz for Artists
  This quiz is targeted at artists, with the questions concerning painting. Even if you do not paint for your practice, you can relate them to similar practices. For example, if you are a web designer, apply the questions to your digital workspace, and your online tools to your painting supplies, etc.
• Right Brain vs Left Brain Creativity Test
  This is a more generalized test and may be more helpful to a wider audience. Furthermore, upon completion, this test gives you very detailed, highly accurate results, as well as further information.

Take the quizzes above and read through some more information. It may be surprising what you find, and you will probably already begin to brainstorm ways of making your work better based off of the results.

Benefit Your Work

Let’s now look into some further ideas of how we can specifically better our work by understanding our own psychology.

After taking the tests above, you may have found out that we are not either 100% right brained, or 100% left brained. We are a mix of them both, while some traits may lean far to the opposite side, and other may not.

Also, in certain traits, we may only be a certain percentage right/left brained, while the remainder of the percentage leads the opposite way.

We each have such unique characteristics, and an in-depth analysis of each (second test listed above) can help. Let’s now look over a few strategies that can help anyone with any combination of traits:

Understand Your Style

As shown above in this article, right brained people tend more towards abstraction while left-brained people tend more towards realism. If we have mixed characteristics, we may tend towards mixes in these forms of art as well.

Find your style, and your preferred mix of abstraction and realism. Adding more form may be for those with stronger left sides, but with hints of right-brained thinking.

Abstraction with a hint of form may be for those who lean right, but have a bit of left-brained thinking. It’s really a gentle balance, with an associated art/design style to go with that balance.

View a number of different types of art, and make note of which interest you the best. Save them in a collection, and review them later to find out their similarities, to test for their amount of abstraction, and to analyze how they relate to your own way of thinking. Then, reflect on that in your own work.

Abide by Your Brain

If you like organization, then use it in your art. Don’t feel the need to be more creative by being more quirky, different, or strange.

One can be just as original by using measurements, form, pattern, and rules. For left-brained people try this trick: create one rule to abide by for an entire design, and then come up with varying ways of altering that rule throughout the design to bring more variety.

For example, use only one shape and turn it into a large picture, use only one color in different shades, or try isometric artwork (below).

If you don’t like form, and would rather try out extreme abstraction, then go for it.

Don’t hold yourself to limits because you feel that artwork needs organization — it doesn’t. It can, but doesn’t have to. Right brained people should try experimenting with different colors, patterns, textures, and whatever else, all while keeping the big picture in mind.

Because right dominance means seeing the big picture and then the details, imagine the outcome first, and then detail along the way. (For right-brained web designers, this is one more reason as to why wireframing is so important.)

Work Around Your Faults

Because we can now better understand our positive traits, we can also better understand our faults. Identify them, and think of ways to build upon them.

Instead of fighting disorganization everyday (both in artwork and business/life), use tools and resources to make it easier, and try to make certain organization habitual.

If one has trouble finding creativity because they are overly analytical, like above, don’t fight your natural instinct of order. Instead explore new methods for harnessing creativity and practice new techniques.

Remember, nobody’s graphic design or artistic talents are perfect at first — no matter what their natural traits may be. Both sides must work at it, and must be better able to accept their faults and work on them to better themselves.

Wrapping Up

Understanding the right and left sides of the brain is a great way to better your work, and to obtain a better understanding of who you are as an individual. Often times, the path to better creativity lies in science and logic — in this case, psychology.

As we can better understand ourselves at this deeper level, we can better understand what we are naturally good at and what we should put our focus on.

In contrast, we can also better identify where we’re lacking, and think of smarter solutions for combating our faults.

Written exclusively for WDD by Kayla Knight.

Feel free to share your thoughts on this matter, as well as any recommendations to fulfill our natural faults, or strive in our natural talents.

Never Ending WordPress Business Bundle – only $14!

And trying to find related content can also be difficult, depending on what data you’re looking for.

But data visualizations can make all of that much easier, allowing you to see the concepts that you’re learning about in a more interesting, and often more useful manner.

Below are 50 of the best data visualizations and tools for creating your own visualizations out there, covering everything from Digg activity to network connectivity to what’s currently happening on Twitter.

Music, Movies and Other Media

Narratives 2.0 visualizes music. Different music tracks are segmented into single channels that are then shown in a fan-like structure.

Liveplasma is a music and movie visualization app that aims to help you discover other musicians or movies you might enjoy. Type in the name of a band, artist, movie, director or actor and liveplasma will show you related people, bands or movies.

Tuneglue is another music visualization service. Just type any artist or band into the search box and hit enter. A circle comes up representing that band. You can then expand from there, clicking on any new additions after each expansion to expand further. By click on “releases” you can order their albums from Amazon.

MusicMap is similar to TuneGlue in its interface, but seems slightly more intuitive. Search for an artist or band and a list of albums will come up. Once you choose an album a circle pops up on the map. From there you can expand to get related albums, remove that album, or get more information.

Last.Forward is a downloadable, open-source tool to visualize any Last.fm user’s social network, including relationships between other users.

Fidg’t is a desktop app that uses Flickr and Last.fm tags to let you visualize your network and their tagging activities. You can see what your network’s predispositions are toward different tags and types of content.

Digg, Twitter, Delicious, and Flickr

Looks Del.icio.us is a collection of different Delicious bookmark visualizations. They’re created with a python-based graphics library and layout engine.

Arc is a product from Digg Labs that shows the latest Diggs, and the relationships between the users submitting and digging them. There are two different speed modes, the slower of which is great if you actually want to read the story headlines.

Stack is probably the most useful of the visualization offerings from Digg. Stories with the most recent activity load across the bottom of the screen and then ‘Diggs’ seemingly fall from the sky to land and create a real-time graph of what stories are popular. Whenever a ‘Digg’ hits a story stack, the title of the story is shown at the bottom of the screen, pushing previous stories down, and eventually off the screen.

Swarm has one of the cooler user interfaces of all the Digg Labs offerings, with stories and users flying around on the screen. When someone ‘diggs’ a story, they fly over to the circle representing the story itself and are briefly linked up to it. Hovering over a story or user shows its name and allows you to click. You can also download Swarm as a screensaver.

Research Chronology shows the relationships between one student’s research paths via Delicious bookmarks over the course of a semester. It’s an ongoing project and includes bookmarks for more than 270 websites.

TwittEarth shows live tweets from all over the world on a 3D globe. It’s a great visualization tool to see where tweets are coming from in real time and discover new people to follow. It’s also fascinating just to sit and watch.

Tag Galaxy lets you search for Flickr tags and have them shown visually in a mockup of a star system. Clicking on any planet (tag) within the first representation changes the image and recenters that tag as the star and pops up new related tags as planets. Clicking on the sun itself brings up a globe covered in images tagged as you’ve specified.

The Flickr Related Tag Browser allows you to search for a series of tags and see related tags. Clicking on a different tag brings up new related tags. You can zoom into the tag selected in the center of the screen by hovering and see images tagged with that word. It also gives a total image count and lets you browse by page.

Internet Visualizations

Mapping the Blogosphere is a collection of maps of the blogosphere, including hyperbolic maps, as shown here.

The Twingly Screensaver visualizes the blogosphere worldwide in real time. You get a continuous feed of blog activity straight to your screen.

Web Trend Map 4 shows a visualization of current trends online. This is the fourth iteration of this map and the most detailed one yet.

The Bloom Diagram is a project from the IBM Watson Research Center that visualizes the contributions of individuals to open source projects.

Akami Real-time Web Monitor shows a map of the world with real-time information about internet traffic, latency and current network attacks. The maps are color-coded and easy to read, but only give very generalized information.

The Mapa de Conocimiento (Map of Knowledge) is a schematic of knowledge involved in any given idea or project. Built in Flash, this tool visualizes a group of URLs organized under main ideas. The map is available in English and Spanish.

Akami Network Performance Comparison shows the packet loss and network speeds between different cities around the world (to showcase how their technology is better than the standard “public” internet). It also shows graphs of the information.

Internet Health Report shows the latency, packet loss, and network availability of the major ISPs and backbone providers worldwide in a color-coded grid format. Hovering over any of the cells in the grid gives more information about the health of that particular connection.

The Hierarchical Structure of the Internet was a study that looks at how the Internet is organized, both in terms of structure and connectivity. It shows how the central core of the Internet is made up of about 80 core nodes, but that even if those nodes failed, 70% of the other nodes would still function via peer-to-peer connections.

Rootzmap—Mapping the Internet is a series of maps based on data sets provided by NASA and created by Philippe Bourcier. There are a number of different maps available.

Websites as Graphs shows the structure of different websites based on the tags used in their code in a color-coded map that grows on the screen as you watch. Tags are somewhat intuitive in their color-codes, with blue for links, red for tables, and gray for any tags not specifically given a color.

Schemaball visualizes SQL database schema. Relationships are shown based on foreign keys within tables. It’s capable of showing schemas with hundreds of different tables and relationships.

The Opte Project aims to map every class C network on the Internet from a single computer and a single Internet connection. The overall goal is to create a map of the entire Internet.

Miscellaneous Visualizations and Tools

Visualizing Information Flow in Science includes a set of four visualizations showing relationships between citations in scholarly journals that are used to evaluate the importance of each journal.

The Micro Fashion Network: Color visualizations show the continuous change of styles in fashion, with a particular look at the basic elements of color. It was created by using a fixed camera and special software to map the colors of clothing people in Cambridge were wearing.

The TED Sphere shows videos from the TED conference in a spherical format with 3D navigation. You can view the sphere from inside or outside and the layout of videos is based on semantic compatibility.

Visualizing The Bible gives a visual overview of more than 63,000 textual cross-references within the Bible. It’s intention is to be more beautiful than functional.

Walrus is a visualization tool that allows you to interact with massive graphs in a 3D interface. Interaction is based on selecting any node and then having the graph zoom in to expand on that point.

We Feel Fine is one of the most interesting visualization tools I came across. It provides visualizations on the general feelings populating the blogosphere on any given day. You can filter results based on age, location, gender, weather, and other criteria. There are six different visualizations available: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds, each of which give a different portrait of the general feelings abounding on the internet.

One Week of The Guardian is a visualization of the stories from The Guardian newspaper. It focuses on the relationships between headlines, authors, pages, and categories.

Nemulator is a project that aims to visualize “nemes,” or different fragments of states of mind. It also aims to serve as a starting point for discussions relating to the scalability of nemes.

Voyage is a web-based RSS reader that visually displays RSS feeds on a timeline. It’s a great way to explore the different feeds you subscribe in a completely different format.

Blooming Numbers is the 2006 CGD MFA Thesis Project of Yuri Lee. It’s goal is to show the relationships between preferences of numbers and cultural contexts in an interactive way.

CIA World Factbook Visualization shows a visualization of relationships between different countries and continents based on data from the CIA World Factbook. It shows semantic relationships for each country, including neighboring countries, languages, water and terrestrial boundaries, and more.

TextArc Visualization of The History of Science is a static visualization of the book The History of Science. It was originally displayed at the NYPL Science, Industry, and Business Library in New York.

This Newspaper Map is a visualization of the rules of the daily production of a newspaper is a striking graphic format. The closeness of words signifies their relationships with each other as do lines traced between words.

GraphNews is a news visualization browser from the Libero WebNews service. It shows news stories in a mind-map-like format. Clicking on one node recreates the graph with the clicked item as the focus.

Newsmap shows a visual representation of current headlines on Google News. It shows the relationships and patterns between different news stories across cultures and within different news segments. Be sure to click to the new JavaScript version for the best features.

FreeMind is a Java-based mind mapping software that allows you to build your own data visualizations quickly and easily. Finished maps can be exported into clickable XHTML files as well as other formats.

Resource System Reference Database was presented as a poster at InfoVis2004, IEEE’s annual conference. In this visualization, line weight shows the strength of relationships.

Is the New documents instances of the phrase “is the new” and shows the relationships between the subject and object of that phrase. Examples include “Purple is the new pink” and “Technology is the new religion.”

WikiMindMap is a tool to visually browse Wiki content in a mind-map format and includes the ability to download any of their mindmaps in FreeMind format.

How Scientific Paradigms Relate shows the relationships between more than 700 scientific paradigms based on how they were mentioned in more than 800,000 scientific papers. Relationships are also based on how often different papers were cited by each other and by authors of other papers.

Universe is a great app for visualizing the “universe” of particular search terms. There are sample terms available or you can input whatever you choose. The visualization given is reminiscent of astronomical charts.

visualcomplexity.com isn’t strictly a visualization software, but rather a collection of visualizations already created and categorized. Categories include business networks, art, internet, knowledge networks, biology, transportation networks, social networks, and more.

The Strengths of Nations is a visualization of the scientific advancement of ten different nations, including the United States, United Kingdom, France, China, and Australia. The map analyzes 23 different scientific areas, including math, biochemistry, and astrophysics.

Written exclusively for WDD by Cameron Chapman, a freelance writer and designer.

Which 0nes are your favorites?  How important is the way we visualize data? Please share your comments with us…

Never Ending WordPress Business Bundle – only $14!