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.

Designing for Brands on Social Media

Posted on March 26, 2015 by vgrunewald

Disclaimer: This blog and its author are not affiliated with discoverlosangeles.com or the Los Angeles Tourism & Convention Board in any way. Designs featuring their likeness are for educational use only.

Social media continues to be a growing marketing platform for brands seeking to engage with the most consumers possible and to promote themselves to targeted groups of users. Despite the rising number of social media platforms, Facebook, Twitter and Instagram are considered three required social networks in which brands should actively participate. This week, I created a potential Summer 2015 brand awareness campaign for the Los Angeles Tourism & Convention Board and their LA tourism website, discoverlosangeles.com. I wanted to create a social media campaign targeted at young professionals and millennials, encouraging them to seek out a more exciting summer vacation and visit Los Angeles this summer. The title of the campaign is “Not your ordinary summer. Discover the extraordinary.”

My Facebook cover photos are set to 851 x 315 px. In my first design, I kept the text simple, horizontal across the middle of the image while on my second design I chose to stack the text on the right side in all caps. I added a drop shadow to the text for both to help it pop. Either design allows ample space for the Facebook profile picture. I also included the Discover Los Angeles logo on two of my Facebook designs, however on my third Facebook design, I included a hashtag, #discovertheextraordinary, instead as another way to promote engagement with the brand on social media. When the logo is not included in the cover image, it could appear in the profile picture. My third design is also drastically different from the prior two, using a grayscale photo with white text in pink text boxes. This pink color is a part of the discoverlosangeles.com color palette, adding another element of the brand to the campaign. Black and white color palettes featuring pops of color are a popular design for brands marketing to my same target audience. I created layer comps of my different Facebook designs and exported them as a PDF so they could easily be shared and seen in one document with the client, even if they don’t have Photoshop.

To build on my Facebook campaign, I would design a profile picture to complement the accompanying cover photo, tying in the respective color palette and typography. I would also create related Facebook timeline posts featuring information on upcoming exciting summer events in LA, as well as design additional sunny, enticing photos and graphics with the hashtag #discovertheextraordinary. To increase user engagement, we could create a more interactive aspect of the campaign with posts asking “How will you make your summer extraordinary?” that could even include a contest to win a trip to Los Angeles this summer, sponsored by the LA Tourism & Convention Board.

My Twitter cover photo is set to 1500 x 600 px. According to a 2015 Pew Research Center report on social media use, the majority of Twitter users are between 18 and 29 years old, so I decided to feature a cover image that would appeal more to this age group. I also opted to carry over the typography design and pink color from my third Facebook cover photo, including the hashtag to encourage user engagement. The result is an image that overall has a young and summery feel that would surely appeal to my target audience.

Finally, I created a simple banner that could be used on the discoverlosangeles.com Instagram page on a variety of photos. The banner features the logo (rotated vertically) and the statement “this isn’t your ordinary summer,” again reinforcing the campaign that Los Angeles is a more exciting place to be than any other this summer. I kept the banner text-based with a transparent background so it could be easily overlaid onto any Instagram photo, without taking away from the photograph itself. The text is in white with the pop of pink, adding just enough emphasis while remaining aesthetically pleasing.

Across my designs, I included enticing photographs of Los Angeles that would appeal to my target audience, including references to technology, music, and activities such as surfing and skateboarding. I used a contemporary sans serif font, Avenir, in various forms, across all of my designs and overlaid the text in white for a modern and trendy feel. To create a sense of integration across all of my social channels and follow the best practices of IMC, I used this same typography style and photographs with the same general look and feel. I used the same pop of pink in one of my Facebook banners, in my Twitter banner and in my Instagram design. If my client were to choose one of the Facebook banners without the pink, I would work with them to see if they would want to include the pink in that banner or to remove it from the Twitter and Instagram designs completely since I believe these designs would also work well in all white.

If I were to expand my social media campaign for the LA Tourism & Convention Board and discoverlosangeles.com, I would recommend including Pinterest and Snapchat. According to an article posted by TechCrunch, Snapchat is the third largest social network among users 18 – 34 years old (my target audience), behind Facebook and Instagram. Twitter comes in fourth, and Pinterest is fifth. Both Snapchat and Pinterest are built on the concept of sharing photos and re-sharing photos, which would fit in well with my current campaign. On Snapchat, my campaign can feature photos of the cool and interesting sites in Los Angeles, such as the iconic street art and unique individuals that represent the hipness of the city, along with our campaign hashtag and variations of our campaign copy. On Pinterest, we could create a board specifically for our campaign featuring photos and graphics that relate to the theme of “how to have an extraordinary summer” in Los Angeles. If my client chose to incorporate the pink color in their Facebook, Twitter and Instagram campaigns, I would want to incorporate this color in all of our graphics in some way (either in text or using the color replacement tool in photos or graphics) as a signature of the campaign.

Designing an email for shoe lovers in Photoshop

Posted on March 20, 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.

Building upon the banner ads I created for DSW last week, this week I designed a branded email DSW could send to it’s female customers. The main promotion in the email is the spring sandal sale previously advertised in the banner ads. I decided to keep the promotion largely the same so as to follow best IMC practices. It’s commonly said in marketing that a customer needs to be “touched” by or exposed to a company’s message seven times before they engage with the brand. By keeping the messaging consistent between my banners and email campaign, DSW already has two of those touch points covered.

I got inspiration for my email campaign from an Express email I received with the subject line: “The 6 must-have festival accessories.” While I don’t often open promotional emails, I clicked on this one because of the term “must-have” and the reference to a specific number of items. Thanks to Buzzfeed, I’m automatically drawn to lists as quick ways to gather information, and by inferring that I “must have” these particular items. I’m sure I’m not the only one who felt compelled to open this email, which is why I would try to replicate it’s success for DSW with a subject line: “Your must-have sandals are here and on sale.” As a shoe lover, I know I would want to know what sandals I “must have.”

Promo email from Express – my inspiration

For my design, I opted for a 620 px width (500-650 px is standard). I started with the elements that should come first in a well-designed email: a header and navigation. For brand consistency, I mimicked the header layout of dsw.com and DSW promotional emails. I included links to view the email in a browser and to forward the email to a friend at the top of the page, since these are two actions DSW would encourage. As I explained in my previous post, DSW keeps a minimal design in order to keep the focus on their products. I continued the color palette I used in my banners: black and white, with a pop of pink. I used two fonts in my overall design: Prata (from Google Fonts) for a stylish editorial-like serif that is similar to the DSW logo font, and Myriad Pro for body text and readability.

Since my customers will click on my DSW email expecting to see the promised must-have sandals, I wanted to make this promotion front and center. I used the “Think open toes” copy from my banner ads and referenced the same sandal sale and offer code. I used the same button style for consistency.

I kept my shoe images (cleaned up with the magic wand tool) and accompanying text large so the reader could fully appreciate them on their computers and mobile devices. It was difficult to decide just how large to make my promotion because I wanted there to be enough content “above the fold.” I researched online for common email heights, however found discrepancies in the answer. I decided to make 600 px my “fold” and design enough content above it so readers would automatically want to scroll down. With my main sandal promotion starting at the very top of the email body, the reader will see at least part of it regardless of screen height.

To show a clear start and end to my main promotion, I used a double line similar to the border I designed for my banner ads. I also used this line style to frame a smaller promotion. For easier coding purposes, I designed my email in a series of boxes so that it could be easily sliced in Photoshop and imported into Dreamweaver.

I created three smaller promotions below my main. All are designed for women, my target audience. I continued the pink color I used earlier and the same fonts. To me, DSW is a retailer strictly focused on promoting it’s products, so I created smaller promotions featuring other products of interest. Since this email will be sent out in Q2, the spring season, I wanted to highlight Mother’s Day and wedding season, to encourage customers to think ahead and make these purchases now. In the gift cards promotion, I created my own version of a DSW gift card using shapes since online images were limited.

In my footer, I included a couple smaller features, including a link to the store locator and the option to sign in to your DSW rewards account. I also added basic social media icons in black to keep with the overall color palette. At the very bottom of the footer, underneath the copyright and contact information, I included the required link to unsubscribe from the DSW email list. It’s common to find this link, in small print, at the bottom of emails, since the brand doesn’t really want you to unsubscribe. I kept with this web standard so in case someone does want to unsubscribe, they will know exactly where to look.

Overall, I believe my email design fits in with the current DSW brand standards and is consistent with the look and feel of the banner ads I created last week. Together, my banner ads and email would be a great start to a DSW spring sandal marketing campaign – one of which I know I and other shoe lovers would definitely notice.

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.

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!

Vicki Grunewald: Portfolio

My Design Portfolio

Tag Archives: typography