Thursday, December 13, 2012

Photoshop: Tips and Tricks

I have spent a lot of time working with Photoshop this semester. editing and reediting my pictures to make them work for each of my designs. It takes a lot of time and effort, and many of the images never even get used in the final design, but the end result makes the endeavor worthwhile. Here are a few tips and tricks that I use to help with my images.
  1. Watch tutorials. Remember that Google is your best friend. There are hundreds of tutorials for all sorts of tasks on Photoshop, so if you're not sure how to do something, look it up. YouTube is another great resource and there are several Photoshop tutorial sites here as well. 
  2. Experiment with Photoshop tools. One of the best ways to learn the program is through trial and error. Playing around with the program will help you to familiarize yourself with the software and may even help you come up with new ideas for future projects.
  3. When selecting an object in Photoshop, I try to do as much as I can with the magic wand and magnetic lasso tools, but if that doesn't work, I try outlining the image with the eraser tool and then going back to the magic wand tool to clean it up. It seems to make it go a bit faster, but I recently found a few tutorials, such as this one, that have even easier ways to accomplish this. Also, try using the refine edge button at the top of your toolbar to clean up the edges and make changes to the image.
  4. Knowing shortcuts can also make life easier. Some of the most important ones include:
  • F, F, F | Cycle through Screen Modes 
  • Tab | Remove Tools and Palettes 
  • Ctrl+H | Hide Extras (Grid, Guides, Slices, etc
  • Ctrl+R | Hide Rulers 
  • B | Brush Tool
  • Right-Click and Select or F5 and Select | Open condensed or full Brush Palette
  • or . or , or Shift+. or Shift+, | Cycle through brushes or jump to first or last brush
  • [ or ]: | Shrink or enlarge brush radius
  • Shift+[ or Shift+] | Decrease or increase brush hardness
  • {Numeric Input} | Change brush opacity (e.g. ’5′ = 50%, ’55′ = 55%)

Breast Cancer Awareness Poster

This poster is a clever, yet simple way to create awareness about breast cancer. The design draws the eye to the image before it is even clear that the image is made up of text. 

The words in the ribbon are not the main focus of the design. The ribbon is. Even if the viewer never actually reads the words that make up the image, chances are they will still know that it was meant for breast cancer. However, because the design is so visually appealing, it encourages a closer look.

If the viewer does take that time to examine the phrases on the ribbon, they are treated to some humor. Breast cancer is a very serious subject and looking at this poster without reading anything, it is easy to assume that the message and the words in the ribbon are serious to go along with that. But, in fact, the designer took a much lighter and humorous approach by using slang and synonyms.

The design is limited to black and shades of pink, which helps to make the eye follow the ribbon down to the message at the bottom. This also allowed allowed the designer to change style of the type. Normally, using this many font styles and sizes would be distracting and difficult to read. However, it is not the case in this image because it is made up of text alone. The background is also a solid black, which prevents the design from becoming too busy.

Tuesday, December 11, 2012

Poster with a message


The Barack Obama "Hope" poster was designed by Shepard Fairey and used in the 2008 election campaign. While Fairey did not design the poster specifically for the campaign, it was widely distributed with the support of the committee, though independently. 

It is a fairly simple design, utilizing the colors of the Obama logo. O
bama is centered in the frame, gazing pensively into the distance, which makes it a very powerful image. In various representations of the design, the word at the bottom is changed. While "hope" is the most popular, "change" and "progress" are also used. The use of the powerful single word in all caps makes a strong statement about what the image represents.

Although it was initially designed as a poster, the image was also distributed as paraphernalia during the campaign, which made it one of the most recognized symbols of  Obama's election.

Like any decent iconic symbol of culture, the image also has some controversy behind it. It was found that Fairey used a photograph taken by Mannie Garcia, a freelancer for The Associated Press. He tried to destroy documents and create others to cover up the crime, but eventually pleaded guilty and was sentenced to two years probation, 300 hours of community service, and a $25,000 fine. 

Today, a stenciled version of the image hangs in the Smithsonian Institution's National Portrait Gallery. Laura Barton, a writer for The Guardian, equates the image to that of Jim Fitzpatrick's Che Guevara poster and poses the idea that the poster may be found on the walls of future college students. Whether that is the case or not, it is undeniably an iconic symbol of today's culture.

Brochure

Out of all of the projects, I think this one may have taken the longest for me to complete. I tried to go many different directions with the design and considered changing the topic a few times, but once I started, I was determined to come up with something.

My first step was to incorporate the text. I chose my favorite sweet wines from five local wineries on the Niagara Wine Trail. I visited each of the winery websites to get the descriptions of the individual wines and included them underneath the name of the wine and the winery where it can be found.

The fonts and layout of the text in the center of the brochure came naturally and I had a picture of wine being poured into a glass, which is where I got the text color. I had initially put the image on a transparent background to use for the front page, but the background of the glass did not match and I decided the image was not the right fit for the design.

The rest of the text came from the Niagara Wine Trail site. I included the contact information for each of the wineries I used in selecting the wines and the description of the general wine trail.

My next step was to Bing images of wine. I found the corks and the grapevine almost immediately and cropped them to fit on the center flap and back page. However, I struggled for a long time on what to do with the background. I had a vague idea of what color I wanted the brochure to be and what the design could look like, but every photo I found did not have the proper resolution to be used as the background.

I then began to search for any kind of tutorial I could find for making a terracotta texture or parchment paper. Finally, after days of searching, I stumbled across an old paper texture tutorial and created the background I used for the finished product. The transparent background image of the wine and grapes was easy to find from there, but I struggled with the front cover. It is still a bit plain for my liking but overall, I am happy with the result.

Color Inspiration

The link to the color palettes inspired by master painters has provided a great deal of inspiration in my designs. One of the things I seem to struggle with most at the beginning of a design is color. I feel that color is one of the most important parts of a project for me, so taking the first step toward a particular palette can be a challenge. Perhaps it has to do with the season, but I tend to like my designs to feel warm and I try to use deep reds or vibrant oranges to accomplish this.

I find that it is much easier to create a color scheme if I have a photograph to work with because I can use the eyedropper tool to select colors directly from the image. However, when I am just beginning a design, that is not always the case, so the website provides an excellent resource for getting started My personal favorite palettes are William Adolphe Bougereau's Nymphs and Satyr, Leonardo da Vinci's Mona Lisa John William Waterhouse's Lady of Shallot.

There are also a couple of other sites I use to help come up with a color palette. Color scheme designer is an excellent resource for finding colors for pairing and offers options such as mono, complement, triad, tetrad, analogic and accented analogic to test out various color schemes. There is also an option to test dark and light websites for a particular color scheme, which provides an opportunity to see how the colors work together.

Unfortunately, when I have decided which colors to use on one of these sites, I generally don't know how to put them into Photoshop or InDesign without taking a snapshot and using the eyedropper tool. Instead, I use ColorHexa to find the CMYK or RGB code for the colors. This site also provides color scheme combinations, but they aren't as easily customizable as the color scheme designer.

Huntington's Disease Awareness Poster

I feel that this project is probably the most professional looking of the pieces I have done. I tried to keep the design minimal because I really wanted to emphasize the message.

Huntington's Disease, a genetic, neurodegenerative disease, is in my family, so it is an issue that is very close to my heart. I wanted to keep the tone serious, but hopeful and I feel I have accomplished that it the final piece.

This project started with just the blue color of the Huntington's Disease awareness ribbon. I wanted to incorporate the organizations that are highly involved in the development of a cure and the color was a way to symbolize them. However, having the dark blue background made it difficult to put anything on top and it reminded me of the old loading screen on a computer when it was shut down wrong. Instead, I put another box over the top in white, leaving the blue as a border.

I knew right away that I wanted to include the fact that every child of a parent with HD has a 50/50 chance of inheriting the gene. To really illustrate that point, I included the hand flipping a coin, because the odds of heads or tails are the same as the odds for the having the HD gene. To further emphasize the point, I also made the coin and the 50/50 gold, while the hand and the text are both black and white.

Once I had the bottom half of the poster completed, I had a hard time figuring out what to do with all of the leftover blank space. I tried to incorporate the logo in the center, but it was far too busy and took away from the message. Eventually I settled on the logos in the top corners and wrote the message in the center, emphasizing the two organizations once again through the use of the blue text.

Using Internet Resources

I don't know what I would do without Google. From downloading books for my classes, to converting a recipe, to finding lyrics to a song, I rely on Google for the answers to all of my questions. It has become especially invaluable in design. Whenever I have an idea for a project, but don't know how to execute it, such as in the flip book when I wanted to make a parchment paper background, I Google it and look for ideas and tutorials that could help to get me started.

The tutorials that I find on YouTube are often extremely helpful and teach how to use tools that I would not otherwise have known were available. Sometimes when I have free time, I watch the tutorials just to get an idea of some of the possibilities for other projects and it allows me to practice my skills with the software. I never would have thought to brighten eyes or whiten teeth in a photograph, but now that I have seen the tutorial, I am able to use those tools to greatly enhance my pictures.

I also rely on the search engine to help develop ideas when I am stuck. When we had to make the magazine layouts, I started by googling "magazine layouts" and found some examples of spreads that I really liked. I was able to build off of those ideas to develop my own project.

Finding images online is a vital part of design as well. I am not thrilled with Google images anymore because they removed the size constraints, so I often go to Bing where I can place size requirements on a search, as well as a filter color for images, which makes it easier to sift through all of the content.

These resources are integral parts of the design process and offer more possibilities than most of us even realize.

Crate and Barrel


The other day I saw a commercial for Crate & Barrel that made me stop and think about the effect design has on advertising and branding. As soon as the commercial started, I knew exactly what it was for, despite that fact that there were only two words on the screen and neither of them was the name of the company. The ampersand in the center told it all.

The Crate & Barrel logo features the Helvetica font in black on a white background with an ampersand in the middle. It is amazing that such a minimal logo can have such a big impact. I don't really shop at Crate & Barrel and I didn't know how intuitively I could pick out the brand until I saw the commercial.  

The commercial itself is very well done. According to the New York Times, the campaign was designed by a German company, Otto, which seeks to filter through the clutter of today's advertisements with the simplicity of the Crate & Barrel brand. By placing the ampersand in the center of the screen and moving pairs of words in and out of the frame around it, the ad tells a story in Crate & Barrel logo form. 

The simplicity of the design really did catch my attention. It made me look forward to the holidays and made me think about stopping in at Crate & Barrel. If I like the style of the advertisements, I may like the style of the products I find in the store.

While it is a very basic logo, it may be one of my favorites. It is perfectly kerned and looks very clean, which is also what I want my house to look like, so already it is selling the product. The fact that there are ascenders on the letters at the beginning and near the end of each word, but no decenders adds to that clean look. Everything is perfectly aligned.

Flip Book



This project was probably the most fun. Despite the few limitations, we really had a lot of freedom to experiment with our own ideas. It was the first time I was able to get started right away because I was immediately inspired. When Amy demonstrated in class how to fold the book, she mentioned that when it is opened to the center, the reader will find a treat inside. I then thought, why not put an actual candy treat for people to find at the end?

I was a pirate for Halloween, so the theme was on my mind for the story and any story involving pirates needs treasure. I then realized that there are chocolate coins that are flat and would fit easily into the center of the book and thus began the treasure hunt story.

Because all of the images and text had to be our own, I decided to use my study abroad photos. I had plenty of images from different places around Europe that Captain Jack and his crew could visit. The photos took a long time to edit because I had to cut out all of the details to place the images on a transparent background, but the end result proved to be worthwhile.

No treasure hunt is complete without a treasure map, so I learned how to make an old parchment paper effect using Photoshop filters and then added the lines and x's in InDesign with the pen tool. The result gave the effect of of moving along the map as the crew went from place to place.

The actual story was one of the last things I added to the book. I wrote it in limerick style because when I think of pirate literature, I think of stories that rhyme. Once I got started, it came along fairly easily. The only thing left to add was the piratey font.

Overall, I was happy with the final result and I may even use flip books in the future as gift ideas.

To double space or not to double space?

I have heard arguments over this question more and more frequently in recent months. People rant about it on blogs or in articles and many seem to have a clear opinion on the subject. A google search of spaces after periods yields hundreds of posters condemning the double space after the period. But the question is, does it really matter?

I have heard valid arguments from both sides and there are people all over the internet willing to offer their own two cents. Personally, I learned to type with the two space rule, likely because my mom learned how to type on a typewriter and she is the one who taught me. While it is probably one of the few times I took technology advice from my mom, I felt she had a point. The use of the double space made my papers easier to read because it broke up the big blocks of text, which made it easier to find where sentences began and ended.

However, after hearing some of the points that one spacers make to defend their view, I have begun to reconsider my stance. The article One Space After a Period, Not Two makes some valid arguments regarding the history of typography and its influence on the spacing. He points out that in the past, professional typographers new the exact spacing required for each letter and the amount of kerning that had to go between various letter combinations. It wasn't until the invention of the typewriter, which uses monospace fonts, that the use of two spaces at the end of a sentence became necessary to find the break in the text. Now that we have computers and the fonts have become proportional again, the extra space creates an unneeded blank spot in the text.

In the end, I'm not sure how much it really matters, as long as the final product is easy to read, but I have now fallen into the one space habit.

Helvetica


I have thought a great deal about typography since watching the movie Helvetica. It may even be safe to say that the film changed my life.

Before watching this film, I never thought much about typography. Typically for papers we had to use the requisite Times New Roman or Arial, so there wasn't much opportunity to choose anything else. Any time I wrote something for my own use, I would use any font that didn't remind me of term papers, but I didn't really consider the work that went into creating those fonts or the intended use of the type.

The film pointed out how much Helvetica is used in our everyday lives. I never realized it before, but Helvetica is everywhere. From shop windows to our phones, our lives are constantly impacted by this type.

I have to admit that at the beginning I was skeptical. These people seemed utterly insane going on about a font like that. As if it could make that much of a difference. But it really can. It is just a clean, easy to read, attractive font that is so subtle that most of the time it can go unnoticed. It is a font that can communicate a message without getting involved, unlike other fonts, where you notice the type before you notice what the message says.

Initially, I agreed with some of the naysayers who encouraged thinking outside of the box instead of following the cookie cutter use of the same type. To an extent, I still agree with them. Designs should be creative, and if a different font works better for a project, then by all means use it, but it shouldn't be pushed too far off to the side because the results that come from using Helvetica can be surprisingly good.

I was was having trouble selecting a font for the magazine spread, the first project we worked on after we saw the film, so I decided to give Helvetica a try to test the theory. I ended up loving the way the spread turned out and have used Helvetica somewhere in every project I have done since.

Magazine Spread



As someone who will not eat or drink anything that remotely tastes like coffee, it is surprising to me that I even stopped to look at this spread, but something about it immediately caught my eye.

Perhaps the element that first captured my attention is the proportions. While the photograph extends beyond the margins of the page, the text remains small and enclosed in boxes that begin significantly further down the page.

This technique serves to emphasize the photo, but the layout still remains unified through the use of color. Black and white, as well as shades of blue and brown taken from the photo, are the only colors needed to make the design successful. The browns of the coffees make up the colors of text boxes on either side of the photo, which provides a balance, despite the fact that the column on the right is much wider than the one on the left. 

The blue of the photo's background is used as the subhead color for each of the text boxes, which serves as a subtle way to move the viewer's eye around the page. Each of the text boxes is also different shape and size and two of them even overlap the photograph. This variation keeps the layout interesting and once again helps the designer direct the eye of the viewer.

When it comes to magazine spreads, I typically like large, two-page photos with limited text, like those found in many travel magazines, or warm colors and dark backgrounds, such as those found in Taste of Home, but in this layout the brown provides a balance to the cool blue, which gives it that warm feeling that typically makes me read magazine articles. Overall, it is is a creative and attractive way to include a fairly large amount of text.

Monday, December 10, 2012

Image and Text


I was thrilled with the result of this project. I knew immediately which article I wanted to use, and had several ideas in mind, but once again, when it came time to create the layout, I found it difficult to get started.

The first thing I came up with was an orange background. The color actually came from a picture I found during the demonstration for altering photos in Photoshop before importing them into InDesign, and I ended up using it for my final design.  Later in the project I added a gradient feather to the background, but the initial orange was a harsh color and it was hard to look at. I knew I wasn't going to leave it like that, but it served as a basis for the design.

My biggest concern was making sure the text fit in the two page spread. Almost immediately, I placed it into the document and played with different column sizes, fonts and layouts until I found one that fit and looked pleasing to the eye. The body copy ended up being Helvetica – I guess the movie really inspired me – and because Helvetica is a sans-serif font, I used Adobe Garamond Pro, a serif font, for the title.

Once I knew how everything would fit into the spread, I was able to add the photo. The picture alone was a little bit plain, so I put I border around it, which also ended up going around the title text. The design then began to feel a little asymmetrical because there was so much on the left page, but nothing but text on the right. That is when I added the gradient to the background and found the leaves to put underneath the overlay.

At that point I felt great about the result, but there was still something missing in the bottom right corner. Amy suggested I add some kind of autumn dingbat and helped me find the leaf. I added some rectangles with a gradient on either side to dress it up a bit and this was the final product.

Exercises

As we began to delve into the projects for the course and work with the software, it was a bit daunting. I have some experience with Photoshop from my photography classes, minimal experience with InDesign from working on the yearbook in high school and no experience with Illustrator.

The exercises from the textbook really helped to refresh my memory and I also learned about tools and tricks that I wasn't aware of in the past. It made it much easier to accomplish the technical portion of the projects and it provided an opportunity to play around with the programs.

The first exercise, Dynamic Composition, was a bit challenging at first because it was difficult to see where the blocks needed to go to form the design. It would seem as though I had everything the right size and shape and in the right postion, but then I would get to the other side of the page and realize that I was completely off. It was just a matter of going back and tweaking the shapes over and over until it looked like the painting. It was frustrating, but the end result was worthwhile, which is probably a lesson to keep in mind for future projects.

Exercises 2 and 4 were both fairly self-explanatory and focused on the tools of each of the programs. Exercise 3, as shown in the picture, did the same, but at the end we created an attractive layout that I can use for other projects. Making changes to individual letters was something that I always wanted to learn and I hope that I will be able to utilize this tool in the future.


Initials Project

Beginning this project seemed to be the hardest part of the whole endeavor. I started by making a list of things that could be used to describe me, such as family-oriented, ambitious, loves change, persevering, and adventurous. The whole list ended up being about a page long and covered everything from color choices I could use to things I like to do. However, even after I finished, nothing really stuck out as a starting point for my design.

When I got to class to work on the assignment for the first time, I spent most of the two hours playing with color palettes, trying to decide which colors define me most. The first combination I settled on was maroon combined with a deep green and gold. I loved the colors on their own, but when I started to create a design, they really didn't fit with what I wanted the final product to look like.

Then, instead of focusing on the colors, I began to experiment with different shapes and layouts. I used some of the words from my list and placed them in a line from the top of the page to the bottom and then tried to align them around a circle by using longer words for the bigger spaces between the margin and the circle and shorter words for the smaller spaces. I still didn't like the way the design was turning out, but I did find that I really liked the idea of using circles.

I created several templates with circles of various shapes, sizes and colors. As soon as I put my initials into the layout with one large circle, I realized that was the way to go and the color decision seemed very natural after that. After getting some input from the rest of the class, I attempted to put different quotes underneath the circle, but it became far too crowded. I had to once again take a step back and think about how to best represent myself. 

I kept one strong quote that really captures who I am. Family, friends and traveling are the most important things in my life and sometimes I wish I could be in two places at once. By avoiding the clutter, I was able to emphasize that point and I am very happy with the result.