Creating infographics in Photoshop, with a little help from the pen tool

Disclaimer: This blog and its author are not affiliated with ThinkProgress in any way. Designs featuring their likeness are for educational use only.


I think this week’s assignment was the most challenging yet. This week, I created an infographic based on an article by ThinkProgress, “The U.S. Is The Only Developed Country Without Paid Sick Days. Obama Is Calling For That To Change.” The article discusses the proposed Healthy Families Act as well as the current state of paid sick leave access in the U.S. In summary, the U.S. does not have a good reputation for paid sick leave, with many working Americans having no paid sick leave at all. The Healthy Families Act would try to improve on this issue.

Before I opened Photoshop, I first read through the article, as well as several other affiliated articles that were linked to in the original, including a brief research study on paid sick leave in the U.S. There were a lot of statistics referenced throughout these articles, and it was difficult to choose which points would work well for my infographic. I decided to focus on the current state of paid sick leave in the U.S. and after printing out the articles I wanted, highlighted the core facts I wanted to include. I wanted my infographic to give a well-rounded overview on paid sick leave in the U.S. so I focused on a few facts I thought would best fit this purpose.

I then sought out inspiration on Pinterest, looking for infographics and graphic elements I liked. Afterwards, I drew a very rough wireframe of my design so I could stay focused when designing in Photoshop. To determine the dimensions of my infographic, I actually found an infographic about that very topic. While there are no real set dimensions for infographics, I chose the common width of 600 px. I then started with a height of 1000 px but extended my canvas as needed.

The infographics I liked had a clear organization, with different sets of data or topics separated by boxes or borders. I decided to separate my design into six parts: the header, a section comparing the U.S. to other countries, a section on U.S. statistics, a section on existing state laws, a section describing the proposed new law, and finally a section for my sources. I used two different background fills to distinguish these different sections.

I wanted to display my data in a variety of ways in order to keep the infographic visually interesting, but also to illustrate each set of data in an appropriate way I used human figures and flags to display different countries. I used bar charts to illustrate comparative percentage stats. I also used simple images and icons to highlight short snippets of information about state laws and the new proposed Healthy Families Act. Each section is distinctively different in data display, however the consistent typography and color palette helps to provide consistency throughout. I also ordered my sections in a way I thought made sense and told the story of paid sick leave in the U.S., starting with the big international picture and moving into more and more details, first at the national level and then the state.

I used the pen tool to add character to my infographic through the use of custom shapes. In Illustrator, I created my simple worker figures used in my second section so I could use the Pathfinder panel to merge the shapes. Once I moved those figures into Photoshop, I added some fun extras with the pen tool, including the wet sneeze from Ms. United States, and the tissue box Mr. New Zealand so helpfully provides. I also used the pen tool to create my blue background boxes with the uneven borders. I believe these boxes, instead of basic rectangles, adds depth and another element of interest to the overall graphic.

Grunewald_DesignShowcase14

Understanding Logo Design … in (gasp) Photoshop!

This week, we learned about logo design. Although logos are traditionally created using Illustrator, my instructor brought up a great point: what if (gasp!) you don’t have access to Illustrator? It was certainly a unique challenge but once I had my idea, I bootstrapped Photoshop to make it work.

We were given a choice of client and I chose “Company B”: A non-profit based in Los Angeles dealing in green initiatives and looking to partner with local businesses to spread awareness. After playing with a lot of different word combinations, I settled on the name “Conserve California.” 

We had overall freedom over the logo design, however we had to include at least one logo mark provided by my instructor. I decided on a combined logo mark and typographical mark, with the logo mark being an image of a tree. I decided on a tree because the image automatically symbolizes the environment. I selected a fragmented ball shape from the logo marks provided to be the leafy top to my tree. The ball just so happened to be green, a color symbolizing health, and in this case, the healthy environment my client is trying to create and preserve. The many different shapes in the mark could represent all the different initiatives my client works on.  Also, Los Angeles is notorious for smog, so a leafy green tree is the ultimate symbol for clean air.  Overall, I decided a tree would not only be an appropriate symbol, but one that is simple and with timeless meaning.

Logo mark tree

Chosen logo mark from those provided

Because the logo is for print and web, I worked with a 7” x 5” canvas at 300 dpi, to keep the image crisp. This resolution is too high for the web, but Photoshop’s “Save for Web” option helps to correct for that.

I wanted to use Photoshop’s vector graphics as much as possible when designing my logo so that it could be easily resized without losing too much quality. For this reason, I relied mostly on custom shapes. After cropping and clearing the background of my selected logo mark using the magic wand tool, I got to work on the tree trunk and roots. I very much enjoy logos that have hidden symbols (such as the FedEx hidden arrow (see more of these logos here)) because I feel the designer spent extra time thinking about how to make the logo more interesting. For my tree trunk, I used a rounded rectangle and a water drop shape in brown to form the trunk of the tree – the brown color being in the same tone as the logo mark’s green. I then placed a smaller white water drop shape inside the base of the brown one, creating (on a white background) the appearance of curved tree roots. The white water drop essentially becomes the hidden symbol – hinting that my client not only focuses on clean land and air, but also water. When it makes sense, I figure the water drop could be recolored to the color of the background if not white (but not black since that would imply dirty water).

Logo Tree

My tree logo mark – see the hidden water drop?

For the word mark portion, I used modern sans serif fonts with clean lines to reflect my streamlined tree: free font, Coolvetica, from dafont.com (a bit more of a modern take on Helvetica) and the thin version of Helvetica Neue. I used the thin font for the word “Conserve” because by the letters being thinner, you are literally conserving ink when printing.

Since my tree is vertically oriented, I decided to follow that direction by placing my word mark below the tree (however it could go to the right of the tree if a horizontal orientation is needed). I chose to share one letter ‘C’ between the words ‘Conserve’ and ‘California’ for two reasons: stacking the text in this way offers a contemporary feel (I adjusted the leading and kerning to align them just right) and by using just one ‘C’ instead of two, you are “conserving” C’s. This represents saving natural resources since ‘C’ is the chemical element for carbon and reducing carbon emissions is a hot topic in the green industry.

Conserve California word mark

Typographical mark

I created a tagline I felt would encompass all of my client’s green initiatives, current and future, by not focusing on one specific campaign, but on my client’s overall goal: “Preserving nature’s resources for the future.” I believe my logo is general enough for use in the green industry in order to stay relevant, even if the tagline changes.

Conserve California Logo Mock

Realistic-Business-Card-Mock-Up

Since my logo is fairly simply and uses smooth typography and minimal colors, I believe my logo will work well in a variety of formats, including in small form on business cards, on the web, embroidered on shirts, on a dark background or in grayscale. I resized my logo to a very small size to see what it would look like and I think the tree by itself would be effective as a favicon or app icon.

Logo Reverse Background

Logo on reverse background

Logo Grayscale

Logo in grayscale

As long as my client’s business stays within the realms of the green industry, I believe my logo would hold up, however outside of that, I’m not sure if the meaning behind the tree symbol would carry. Their company name is “Conserve California” so if they do decide to conduct business outside of the green industry, I’m sure they’ll need a complete rebrand, not just a new logo.