Complete Brand Identity Design: Catered by Patti Caces

Posted on April 24, 2015 by vgrunewald

COMPANY ANALYSIS:

Catered by Patti Caces is an established professional catering company in Central Florida that has thrived on its solid reputation. Although there is not a significant digital presence, the company maintains a successful business with both wedding and corporate clients. Their mission is simple: to take care of their clients. They do so by serving high-quality (and delicious) cuisine while providing high-quality service. Based on their reviews, I’m not surprised they’ve been successful with little digital marketing — word travels fast when you have happy clients. Establishing the brand online, however, will certainly help the company reach and engage a much larger audience of potential clients.

The company’s current goal is to further expand their list of corporate clients in the film industry by providing on-set catering and craft services during local productions. With this in mind, the target audience of their new brand identity campaign should be these corporate clients, while still being inclusive of their wedding clients. In order to reach this diverse group of clients, I recommend the company follow best integrated marketing communication (IMC) practices. IMC is the development and execution of a cohesive multi-channel identity campaign that immerses the target consumer in a consistent experience every time they encounter the brand. We want every consumer who encounters the name “Patti Caces” to immediately associate the name with professional catering, quality customer service and delicious products.

Currently, the company appears to go by a few different names online, including 1st Choice Production Catering, Catered by Patti Caces, and simply, Patti Caces. Fragmentation in the company name might create confusion among consumers. According to a Bloomberg Business article, fragmentation is the number one enemy of successful brand marketing. The solution? IMC. Catered by Patti Caces needs to promote a cohesive identity across all of their marketing channels, including consistent use of company name, messaging, visuals and voice, in order to build a solid, recognizable brand.

MY STRATEGY:

To relaunch the Patti Caces brand with a wide online presence, I’ve designed an IMC campaign that will help establish a modern visualization of the brand. I designed the company’s brand identity with the name “Catered by Patti Caces” in order to take advantage of the company’s existing name recognition while keeping their services obvious to new potential clients. The overall feel of the brand design is bright and crisp, appearing well-established yet energetic and fresh. I kept the designs flexible, focusing more on the company’s dedication to product and service than the types of clients they serve. The campaign successfully draws attention to the Catered by Patti Caces name while highlighting their on-set catering business, a service that might not be immediately known to their other established clients and so needs further promotion.

DESIGNS:

Logo:

The logo should encapsulate the brand’s essence while still being simple and flexible enough to appear in a variety of print and digital forms. I designed the logo in two parts: a symbol and a text portion. The logo could be used as a whole or split depending on need, and can also be arranged vertically (as it appears here) or horizontally. The color palette is bright, fresh and appropriate. The symbol is telling, yet simple. Each circle represents a tier of the Catered by Patti Caces business: professional service, baking and cakes, and quality cuisine. The circles link, representing the business being built on all three of these values. The text portion of the logo features a modern font pairing that places emphasis on the Patti Caces name. I created the tagline, “Motivated by quality, inspired by you, since 1988,” to again highlight the values while emphasizing the well-established nature of the business. To remain flexible, the tagline need only accompany the logo when appropriate. The logo provided is currently set to a digital-appropriate resolution (72 dpi), however a higher resolution image appropriate for print could be easily provided at the company’s request.

Full color logo for Catered by Patti Caces

Grayscale logo

Reverse/dark background logo

Banner Ads:

The banner ads I created utilize the logo and continue its color palette and typography in order to remain visually consistent. These banners are for use on the Catered by Patti Caces website and could also be used to advertise on other appropriate websites. The specific promotion focuses on both the quality nature of the company’s products while highlighting the on-set catering service. The ads are simple, featuring large, enticing images and bold type. The call to action here is to learn more about the film catering arm of the business that many clients or potential clients might not think of when they think of “Patti Caces.”

Leaderboard banner

Enhanced leaderboard banner

Cube banner

Button banner

Animated cube banner (if not playing, please click to reopen in new tab)

Social Media:

I created a social media branch of this campaign as these platforms are known for potential high levels of engagement with brands. I’ve provided several cover page options for Facebook, as well as an option for Twitter. I also designed a transparent overlay that could be used on images posted to Instagram or Pinterest. To promote engagement with the brand, I created a hashtag (“#closeupready”) users could add to their own posts and share back with the Patti Caces social media pages. Despite differences in design, the overall look and feel of each is consistent with the brand identity I created.

Facebook cover image (Option 1)

Facebook cover image (Option 2)

Facebook cover image (Option 3)

Twitter cover image

Overlay graphic for use on Instagram or Pinterest

Potential graphic to share on Facebook

Email:

I designed an email to accompany this campaign that could be sent out to the company mailing list. Again, the promotion draws attention with gorgeous food photos, while inviting recipients to learn more about the film catering services. To be inclusive of other types of clients, I’ve included a smaller promotion related to weddings, a recent client testimonial, and a call for clients to follow the company on Pinterest, an important IMC channel for businesses such as this one (more on that to come). As you can see, the email continues with the color palette and bold typography inspired by the logo for visual consistency.

Sample email featuring my campaign

Website:

Now that I’ve created these various “touch points” where consumers can encounter and engage with the Catered by Patti Caces brand, there needs to be a central point where these consumers can ultimately learn all they need to know about the business. Today, that point is overwhelmingly a functional and updated website. The website homepage is designed very much like other pieces of the campaign with large photos that can draw in potential clients. Although bright and colorful, with color palette and typography consistent, the content is provided in a simple, easy-to-use fashion. A rotating image gallery would include current promotions (such as the one I’ve designed for the on-set catering business) while the body of the site would direct potential clients to various pages featuring services the company provides. Client testimonials on the homepage can also help attract potential clients by giving them just enough to convince them to reach out to the company for more information. The footer of the website would also provide potential clients with various ways to engage with the company, including basic contact information, signing up for the mailing list, or following on social media.

Website wireframe design

Full color webpage design based on wireframe

SUMMARY:

Aside from the various marketing channels I’ve designed for above, there are several other opportunities for further visual IMC out there. An e-newsletter that includes recipes, information about new products or services, photos and reviews could help remind potential clients of the company’s services so that they think of Catered by Patti Caces first when they have a special event. As mentioned before, Pinterest is a great place for visually interesting companies such as this one to subtly promote their business through the posting of photos, recipes, decor or event planning ideas. This could be a great opportunity for the company to not only show off their expertise, but to attract new clients.

In summary, it was a great pleasure to design a brand identity for Catered by Patti Caces. After reading through their entire website and seeking out reviews of the business, I knew a dedicated, client-focused business such as this one needed to have a greater brand presence not just for the good of the company, but for the good of those potential clients out there. With this in mind, I tried to design a visual identity and brand campaign that would appeal to a wide audience and portray the company as one that is experienced, welcoming and attractive to work with. Through this creative process, I learned a lot about designing for a real client and look forward to similarly challenging work in the future.

Experimenting with lighting and typography to create an e-card

Posted on April 16, 2015 by vgrunewald

I can’t believe it’s my last week as a formal student of Photoshop. Of course, there’s much, much more to learn, however I feel that I greatly improved my skills over the past semester, especially in training my designer’s eye to recognize the best practices for marketing and digital design. To finish off the semester, this week I created a digital e-card that the University of Florida Alumni Association would send out to their upcoming Spring 2015 graduates.

Following best e-mail practices, I kept my design width between 500-650px at 600px. I kept the design square so to be a more flexible design. I found a University of Florida graduation photo and decided to duplicate the image so that the background of the image would be in grayscale while the student in the foreground would remain in color. I cut out the student using the quick selection tool, cleaning up edges with the eraser.

Almost at the same time, I worked on the right portion of the image that would contain my text. I decided to create a curved line between the image and the text portion using a blue ellipse so as to appear more visually interesting. I found a free alligator skin texture online and applied it to the blue ellipse with a clipping mask in the Overlay blending mode, opacity level about 70%. This gave the ellipse a subtle texture that wasn’t too busy to overlay with text.

Back to my photo, I applied lighting effects to the student using three spot lights: one streaming light from the upper left corner towards the bottom right (down the student’s left arm), one streaming from the upper right corner towards the bottom left (down the student’s right arm), and one streaming down directly onto his head. I upped the intensity and dulled the absence slightly so the student appeared to glow from the front. This reminded me of that feeling you get when you graduate, the feeling that you’ve finally reached the light at the end of the tunnel. It feels so good. Since my image is rasterized (not embedded), the lighting effects do not appear as fx smart layers on the student cut-out layer. Instead, to better understand the lighting effects I used, one would have to compare the original photo (included in my submitted Photoshop files) with the cut-out layer.

I added the UF Alumni Association logo to the top right corner of the e-card with some cleaning up by the magic wand tool.

Finally, I added my text. I used free font, Bree Serif to write my main header of “Congrats!” and added various layer effects including a slight bevel and contour, a soft white stroke, and a subtle drop shadow (in gray), to give the text more depth. I then kerned the font (+75) between the ‘R’ and ‘A’ since the letters appeared to be touching. With my header evenly spaced, I added my subhead and additional copy in Droid Sans, to provide typographical contrast.

As a call to action, I included a button asking recent graduates to update their profiles with the alumni association so the association can keep track of them and keep them up-to-date on the goings on at UF. Social media icons courtesy of Font Awesome complete the card.

Overall, I am pleased with the way this card turned out. I consider typography to be a personal weakness, so this was a particular challenge for me. The lighting was also difficult at times, with my Photoshop program crashing a couple times before I finally got it right. I learned so much this semester and can’t wait to learn even more as I continue towards my goal of achieving a master’s in web design and online communication.

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

Posted on April 9, 2015 by vgrunewald

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.

Using Photoshop to create static and animated banner ads

Posted on March 12, 2015 by vgrunewald

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

My class continues to dig deeper into the practical uses of Photoshop in the creation of various marketing materials. Whether you’re measuring impressions or click-throughs, banner ads can be an extremely cost-efficient form of advertising. Although there is active debate over banner ads and their overall effectiveness, one thing is for sure — banner ads can reach an enormous amount of eyeballs, and that’s never a bad thing in advertising. This week, I created a proposed Q2 marketing campaign for shoe retailer, DSW and designed a set of banner ads in varying sizes to promote the campaign.

Banner ads can be tailored and displayed to a specific target audience. In my DSW campaign, I envision the ads being shown to female users who visit online retailers and fashion sites. Since Q2 covers the spring season, and with much of the country recovering from a hard winter, I created a campaign around a sandal sale to get women thinking about what they’ll wear in the (hopefully) upcoming warmer weather: “Forget frozen toes. Think open toes.”

DSW’s current brand standards are completely centered around their products. Their slogan, “Where’d you get those shoes?”, puts the conversational focus right on your feet. Their logo and website design is based on a black and white color palette, allowing their trendy and colorful shoes to be the central focus. Advertisements (see examples below) typically feature large images of shoes, not always accompanied by models.

Screenshot of DSW website (dsw.com)

DSW’s advertising method is to entice viewers with the latest foot fashion trends, followed by the lure of discounted prices. This was the basis for my campaign. I chose to use stand-alone images of DSW’s colorful new sandal arrivals, taken as screen shots from the DSW website and cleaned up using the magic wand tool. I kept the rest of the color palette minimal to correspond with the ad’s destination, the DSW website. I did use a pop of pink to draw attention to certain text.

To keep consistent with the DSW website, I used the same typography: Myriad Pro for the body text, and, because I could not find a quality ready-made logo online, I used Trajan Pro to recreate the DSW logo (as verified to be the correct font by whatthefont.com). I also created the sandals button, identical to those used on DSW’s website to direct users to various departments, to give viewers something familiar to click on and lead them to the women’s sandals department page.

When creating each banner, I had to focus on size, margins and proportion of each piece of content so that all banners appeared balanced. The order of the content did not vary much. Font sizes were adjusted for each banner, ensuring the text was legible, correct in proportion with appropriate line-split. The “frozen toes” line is always a couple points smaller than the “open toes” line. The spring sale promotional text is formatted and sized so that it is aesthetically pleasing on the eye, with no awkward overhangs. For the images, they, too, had to be resized from banner to banner, and were realigned vertically for the taller skyscraper banner. For the button ad, only one shoe image was used and the sale promotion text dropped due to the limited size. Regardless of size, I used guide lines to ensure there was enough white space and margins around the content and that content was balanced on the left and right sides of the ads.

Leaderboard: 728 x 90

Rectangle: 300 x 250

Skyscraper: 160 x 600

Button: 320 x 75

I also created an animated GIF of my skyscraper banner in Photoshop using the Timeline panel. I created three sets of different shoes so that each slide of the GIF would display a different set. This way, a targeted viewer would see a wider range of DSW products and hopefully be that much more enticed to click on the ad. Click on the GIF below to open in new window and view animation.

A Restaurant Website Redesign using Wireframes and Responsive Design

Posted on February 26, 2015 by vgrunewald

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

One of my favorite local Seattle restaurants is Sitka & Spruce, an intimate restaurant artfully serving seasonal Northwest cuisine, located in a small warehouse turned chic indoor marketplace.

Image from sitkaandspruce.com

Everything about this restaurant is fantastic…except it’s website. Sitka’s homepage is based on an unusual horizontal scroll that is not responsive. The mobile version homepage displays only one photo at a time without any restaurant information, leaving the user with just a hamburger menu icon. That’s why I chose to redesign their website, via a wireframe, in this week’s assignment.

To model good responsive design, I organized my website in a single column with “fluid” content boxes that could easily resize and stack depending on the dimension of the user’s screen. I also created my website to be 800 px wide, considered, by some, to be an ideal size for a responsive website. I referred to Mediaqueri.es for inspiration.

When a user purposefully seeks out a restaurant’s website, it’s typically to find a few basic pieces of information: menu, reservation information, hours and contact information. I chose to put these pieces of information in prevalent places on the website using an F-shape layout. Based on user behavior studies, it’s been proven that users first look at a website at the upper left corner and move right across the top line, proceeding to look increasingly towards the left column and downward the further down the page they read. This means, the most important information should fall in this F shape. You can see an example of this layout below – the warmer the color, the more users eyed that specific content.

F-Shape Layout. Image from http://webdesign.tutsplus.com/

To follow the F-layout, I placed the restaurant logo and navigation bar on the top line, so the user could quickly access the information they’re looking for. I then placed the an Open Table reservation widget directly below the logo, giving the user an immediate call to action (after all, the goal is to convert the user to a customer). I placed a rotating photo gallery of food and restaurant images next to reservations, so as to further entice the user to make that reservation.

Continuing with the F-layout, I put a linked Menu feature below the reservation box on the left, further enticing the user to visit the restaurant in person once they view the menu. Clicking on this would lead to a separate page containing the full menu. I added additional features the user might find interesting or useful, including an introduction to the chef and information on how to book a private event. I paired these links with illustrations (not photos) to match those on the restaurant’s current website, forming a consistent theme.

Sample illustration taken from sitkaandspruce.com

I added Special Events in boxes below, creating a basic grid. Each special event header would be placed over a faded or blurred image, adding more color and interest to the page. This information would be considered less important than some of the previous, which is why I placed it further down the page. The “Events” tab in the navigation bar would also reveal this same information.

Finally, to complete the F-layout, I added a footer with Sitka’s address, phone and email, as well as their restaurant hours. I also added social media links, as most users, I think, are accustom to looking in the footer for this information. I found faded/distressed social media icons here (along with a ton of other social media icon freebies).

Looking forward to the overall aesthetic design of the website, I wanted to keep the current color palette, inspired by colorful, detailed nature illustrations, including flowers and animals, used on their current website. The larger illustrations (see below) include reds, golds and greens. By keeping the same antique beige background and black text as on the current website, my redesign would provide brand consistency and not confuse users accustom to the current site. My website, however, would be easier to navigate and more functional on a variety of screen sizes. The goal of my redesign is to essentially have the design itself become invisible, shining the real spotlight on the beautiful restaurant, its cuisine and the information about them that users want and need.

Image from sitkaandspruce.com

Designing an original moodboard for StreetTreks.com

Posted on February 18, 2015 by vgrunewald

This week, I designed a moodboard for a brand/website I will be developing in another graduate class: StreetTreks.com. The idea behind Street Treks is to create a series of informative, fun and easy-to-use self-guided walking tours of a particular city so residents, especially those new to the area, can explore all of the unique neighborhoods and see everything their city has to offer. Besides promoting new experiences, my website will also promote an alternative activity to traditional hiking. While Seattle offers many mountainous trails, the city sidewalks can take you to views just as breathtaking.

Street Treks will be a website that combines both the rugged, earthy aesthetic of traditional hiking with the sleek and modern feel of the city. To convey this feeling, I designed my moodboard with a natural color palette, contrasting rustic with city images and mixing sleek and handwritten fonts.

Before I began my board, I searched for stock photography that fit my theme. I used Unsplash and pexels.com, as well as a few other resources that can be found here.

I loosely used this tutorial to help design the layout of my moodboard using the rectangle shape tool. I used my grid and guides to help with even spacing between boxes. Once I had a layout I liked, I placed my images and applied them as clipping masks to each rectangle so each box acted as a frame. Once all images were placed, I added image adjustments to various image layers as needed, including photo filters to help cool the tone of warmer images, and decreased brightness to correct washed-out images. Because my images are embedded as smart objects, I had to double-click each image to open it as a separate file, make edits and save.

Per the project instructions, I needed to incorporate three Pantone colors of the year into my board. To add 2015’s Marsala, I selected the image of the woman holding a camera and used the color replacement brush at a high tolerance to change the color of her watch, fingernails, and bracelet. To add 2013’s Emerald, I selected the image of the woman wearing hiking boots and used the color replacement brush to change the color of her jeans from grey to green.

Finally, to incorporate 2006’s Sand Dollar, I took the image of a grayscale city skyline and added a layer of the color above the image using a “Multiply” blend mode, tinting the overall image.

Original image

Sand Dollar layer applied

The last image adjustment made was to the image of the woman holding the camera. I found a free downloadable Photoshop action called “Portrait Action” and applied it to my image. The action helps desaturate an image and comes in two parts. A couple steps must be manually done in-between Parts 1 and 2 as indicated in the instructions.

Original Photo

After Color Replacement and Portrait Action

I added two sets of text, one in modern “Coolvetica” and the other in handmade “Moon Flower Bold,” both free from dafont.com. I purposefully tried to create a contrast by placing the more modern font on a rugged image, with the rougher handmade font on the modern city skyline. I also added a few dashed boxes and compass custom shapes to make the board more interesting and balance the white text. Finally, I added a color palette sampler that I felt reflected both the natural and city beauty of Seattle.

I like to think my final moodboard conveys to the viewer the StreetTreks.com goal: to take the scenic and woodsy activity of hiking and apply it to the city you’re already living in. A forested mountain hike isn’t always close by, but a city hike, exploring new neighborhoods and discovering new viewpoints, can be right outside your front door. So bring your camera, and your map (to be provided digitally by StreetTreks.com, of course) and start trekking!

Understanding Logo Design … in (gasp) Photoshop!

Posted on February 12, 2015 by vgrunewald

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.

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).

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.

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.

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 on reverse background

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.

Understanding Integrated Marketing Communication by creating my own web ad

Posted on February 6, 2015 by vgrunewald

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

This week, we discussed integrated marketing communication (IMC), a brand’s development and execution of a cohesive multi-channel identity campaign that immerses the target consumer in a consistent experience every time they encounter the brand. In this week’s assignment, I am highlighting the new visual IMC campaign launched this week by Epicurious, a recipe website owned by Condé Nast.

I really like using Epicurious to help find new recipes and I always enjoy the expert cooking tips they provide for those trickier dishes. Their previous website was pretty cluttered, a little bit too much for the user to focus on at one time. This week, Epicurious relaunched their entire brand, including a new, better website, promoting it across multiple platforms including social media and magazine advertising. Instead of just being a recipe website, Epicurious wants to be known as a “food utility” — an invaluable tool for home cooks to not only find new recipes, but to be inspired to push themselves to try even more.

Epicurious’s visual IMC campaign features this message and refreshed new logo. For consistency purposes, the brand chose to keep with their same color palette of red and white. Not only did they post a detailed article on their rebranding on their website, Epicurious also posted the announcement and new logo to their Facebook, Twitter, and Instagram pages.

The inspiration for my own Epicurious web advertisement came from a print ad they placed in Glamour magazine and a promotional video they created for the rebrand posted to their social media.

Full-page ad in February 2015 Glamour magazine

Post by Epicurious.

In my own web advertisement, I wanted to play off the branded message that Epicurious is more than just a recipe website, they are a valuable all-in-one resource – a “food utility.” When I thought of the word ‘utility,’ I thought of another all-in-one tool, a swiss army knife. This image became the basis of my design.

I started with a red background, sampled with the eye dropper from the Epicurious logo. To make my version of a swiss army knife, I created the custom shape in Illustrator for the handle. I then copied this shape into Photoshop. For its tools, I used a free cooking themed set of wingdings called Cocinitas (from dafont.com). I placed each cooking icon on its own layer and rotated and resized accordingly. I also converted each letter layer into a shape layer so they could be resized without having to adjust font size. Because I could not find a good high-resolution image of the Epicurious “epi” logo, I traced it in Illustrator before placing it into Photoshop. I then added two circles to form the handle screws. I selected all of the layers involved in the swiss army knife and linked the layers so I can resize them all at the same time. Finally, I added drop shadows to the handle and tools to add depth. I kept the shapes white, to keep consistent with the print ad.

Free wingdings from Dafont.com

I then began to place the text. For the top message (“Introducing the first ever FOOD UTILITY”) I used Helvetica, the same font used in the original ad, in order to keep visual consistency. I took the bottom slogan (“Get Inspired. #NewEpi”) from their video. I was also able to use the same typography here, Helvetica and a free font, Southpaw, from dafont.com.

For the footer text, the full Epicurious logo, I found a larger image that I placed into Photoshop, however I had to select the background of this logo with the magic wand tool and discard it since the color did not exactly match my existing background. I then tried to clean up the white lettering of the logo by using the Sharpen Filter, and by using the paint bucket tool to fill in the lettering with more white. For all of the actual text in my advertisement, I added a slight Outer Glow effect so it appeared brighter against the red background.

Finally, I wanted to add some texture to the background. I started with a high resolution wood background image from Flickr and placed this behind my red background. I then added a layer mask to the red background layer and shaded in grey so to appear opaque, revealing the texture of the wood below.

Background images used

To make the footer appear more interesting, I added another layer between the red and wood backgrounds with an image of berries (from Flickr) and added a mask with a black/white gradient so the berries would appear to fade into the wood. To improve the blending of the wood and the berries, I applied a Desaturate style to the berry layer and adjusted the opacity of the mask on the red background where the berries show through.

By keeping the messaging, color scheme, typography and general design consistent, I believe my advertisement would fit in well with the current Epicurious integrated marketing campaign. In my opinion, it may even better illustrate the message that their website is meant to be an invaluable tool to all home cooks, not just another recipe website.

A Valentine’s Day chalkboard sign using layer styles & typography

Posted on January 29, 2015 by vgrunewald

This week, I created a chalkboard sign in Photoshop using free downloadable layer styles and various typography. For my design, I chose to create a sign for local Seattle coffee chain (and a personal favorite), Caffe Vita for an upcoming fictitious Valentine’s Day special.

Before I started my project, I added the already-created layer styles simulating a chalk pattern provided by my instructor to my layer styles. I went to my Styles panel and selected “Load Styles.” I then chose one of the instructor-provided chalkboard backgrounds, set at 600 px by 800 px, as the base layer of my sign.

I wanted to use a variety of fun fonts in my design in order to replicate popular chalkboard sign styles, so I canvased my favorite free font website, dafont.com, for new typography. For my text, I chose GrutchShaded (a hip serif for the name of the coffee shop), Moon Flower (a skinny hand-drawn type for that homemade flare), and Handy Handy (an obviously handwritten font to add to the realism of the sign). For consistency, I chose to only use two fonts for the majority of the design.

Typography used in this project

After I typed out my text, I added the chalk pattern layer styles I added to my panel earlier. I went to Window —> Styles to open my panel and went through each layer of text and added a colored chalk pattern. In order to vary the roughness of the chalk, I opened up the Pattern Overlay layer style menu and adjusted the scale of the pattern to fit my desired appearance for some layers.

Adjusting the scale of the chalk pattern overlay

I wanted to add some pictorial elements to my sign as well. Per my assignment instructions, I was only allowed to introduce pictures by way of wingding fonts. Again, I scoured dafont.com to find wingdings of coffee cups and hearts, to go along with the Valentine’s Day theme. I found New York, New York 2 (‘Z’ is a coffee cup), and heart-themed My Valentine’s Love.

When placing the coffee cups, I did so in two separate layers and flipped one cup horizontally (Edit —> Transform —> Flip Horizontal) in order for them to appear facing one another. I then joined these two layers so I could move and resize both cups at the same time. I also adjusted the scale of the pattern overlay.

When placing the hearts (in this case, “M”) I rotated the pictorial text about 45 degrees and adjusted the scale of the pattern overlay in order to appear like steam rising from the coffee cups.

I placed my instructor-provided decorative ornaments last by going to File —> Place Embedded and resizing the images (and my text) accordingly. I added the chalk pattern layer styles to these layers as well.

Finally, because I had so many different layers of text, I decided to group relevant layers into folders to improve my file organization.

See my final sign below! I really like the overall effect the chalk pattern layer style gave the typography and I think with the right choice of fun and handwritten fonts, the effect comes across fairly realistically. Now to crack how those baristas actually hand-draw those cool signs without any help from Photoshop!

Using Photoshop adjustment layers to manipulate color & tone

Posted on January 22, 2015 by vgrunewald

This week, we learned about various Photoshop tools as well as how to use adjustment layers and layer masks to edit parts or all of an image without making permanent changes to the original.

From the photos provided by my instructor, I chose an image of a woman’s arm and hand holding a wedding bouquet. I decided to think of this project as preparing an image for a high-end wedding magazine editorial piece, similar to those in the annual Vogue wedding issue. I searched online for photo inspiration and found that many of these glossy wedding photos have a cooler tone, with the models skin taking on a “porcelain doll” effect:

In my original photo (see below), the woman’s skin appears very warm in color, and the bouquet, the focal point of the photo, is too dull to compete with the bright white of the wedding dress behind it.Before I tried to replicate the lighting and color tone of the inspirational photos I found, I watched this Photoshop tutorial on adjustment layers in order to refresh myself on how each of them work.

Original instructor-provided image

To begin editing my photo, I used the clone stamp tool and duplicated some of the flowers in a separate transparent layer above the original image in order to double the size of the bouquet. I cleaned up the edges of the cloned portion with the eraser tool, creating one cohesive bouquet. I then merged those two layers into one titled “Base Image”, however I kept an original version of the image and original clone layer, grouped in my layers panel, turned off, just in case.

I essentially split my image into three different layer masks using adjustment layers:

Mask #1: Bouquet Adjustments:

Vibrance layer: I masked off everything except the bouquet itself. I turned the vibrance up a little bit to get the flowers to “pop” without appearing too fake.
Selective Color layer: I created this layer as a clipping mask to the Vibrance layer/masked image below it. Adjusted the Greens in the image, turned down the Yellow in the image so the leaves appeared a deep green in color.
Brightness/Contrast layer: Bumped the brightness up just a few points to improve the overall vibrancy. Created as clipping mask to the layer below.
Hue/Saturation layer: Increased saturation +30 points to finish off the bouquet. Created as clipping mask to the layer below.
I used the dodge tool to lighten the shadows on the far left pink roses and the sharpen tool to bring out more of the details in the inner rose petals.

Mask #2: Outside Bouquet Adjustments:

Vibrance layer: I used Cmd+I (on a Mac) to invert my layer mask so that I could make adjustments to everything outside of the bouquet without having to create a new mask from scratch. I turned the vibrancy all the way down to zero. This drained the colors so the bouquet’s vibrancy became starker in comparison.
Selective Color layer: In order to cool off the overall tone of the background and woman, I adjusted the Whites, Neutrals, and Blacks in this layer, experimenting a lot, but typically increasing Cyan and Black. With the Neutrals, I decreased black in order to allow some of the peachy skin tone to remain. This adjustment layer added just a hint of a blue tint to the photo. I created this layer as a clipping mask to the Vibrance layer/masked image below.
Curves layer: I used Curves for further tone adjustments, bowing the graph’s curve down just slightly to further deepen the blue tine of the shadows in the photo. This effect created an even starker difference between the bright bouquet and the rest of the photo. Created as a clipping mask to the layer below.
I used the sharpen tool to bring out more detail in the pearl bracelet.

Mask #3: Skin Adjustments:

Selective Color layer: On top of the changes made to everything outside of the bouquet, I created a layer mask for just the woman’s arm in order to further adjust her skin tone to complete the “porcelain doll ” effect — skin that appears cool to the touch and whiter in tone. I adjusted the Whites, turning the Black down to -100, decreasing Magenta a few points to remove more of the pinker skin hues, and bumping up the Cyan to cool the tone until it was the appearance I desired. I also toned the Neutrals very slightly, turning Black down about 15 points.

With all of these adjustment layers turned on, the resulting effect is one I believe makes a solid attempt to mimic the look and feel of a wedding magazine editorial photo, perhaps accompanying an article about wedding bouquet trends.

My final edited image

Here is a side-by-side comparison of the original photograph (left) and my edited version (right):

As part of my assignment, I also added a Black/White adjustment layer on top of all of my layers, turning down the opacity to 50%. When this layer is turned on, the effect on the image is almost that of a vintage color photograph, with a slight antique coloration to the flowers in the bouquet.

Black/White adjustment layer engaged at 50% opacity

Previous to this project, I did not often use adjustment layers in my personal Photoshop projects, however now that I know how to use them, I believe implementing them (instead of the Image –> Adjustments menu options) promotes much more creativity and experimentation, without the fear of having to start over with the original image file. In my experience, it’s the vast number of opportunities for experimentation in Photoshop that makes image editing so much fun!

Vicki Grunewald: Portfolio

My Design Portfolio

Category Archives: VIC5325