Visual Campaign for Orlando Harpist Christine MacPhail

Table of Contents

A. Company Analysis
B. Banner Ad Designs
C. Social Media
D. Email Design
E. Wireframe
F. Web Page
G. Misc Graphics
H. Summary

A. Company Analysis

Christine MacPhail is a well-established, professional harpist in the Orlando, Florida area. As a small business, she mainly provides harp music for corporate and other specialty events and weddings, ranging from ceremonial music to reception. Besides viewing her current website and Facebook page, I found Christine MacPhail very easily on theknot.com, with an impressive 5-star rating out of a whopping 83 votes. It’s clear from the voters that she is very talented and has a tremendous relationship with her clients. I feel very fortunate to have the opportunity to redesign the campaign.

For the past four months, the importance of an Integrated Marketing Communication (IMC) has been absolutely drilled into me. In summary, having a brand with an IMC means that your messages along all communication channels will be consistent and clear. Doing this will help your brand appear unified, and will help potential clients remember your brand. I have learned that it is especially important to achieve ubiquity in a campaign because it takes “7 different touches” for someone to notice or respond to a brand; being consistent in the ways that a client may come in contact with your campaign (through different sources of media) will create that recognition and trust you need to drive traffic. To learn more about the importance of IMC campaigns, feel free to click here.

Christine’s main clientele are 20-something women planning their weddings. Even though I have never been married and have no personal experience in wedding-planning, these women were my main inspiration for the way I designed her campaign. Because Christine’s business resides in Central Florida, a hotspot for destination weddings and just a beautiful, scenic area in general, I definitely wanted to take advantage of color to attract soon-to-be brides. Elegance, beauty, and romantic: three words every woman wants to exude on her wedding day; three words that could easily apply to the sound of a harp. It was my mission to create imagery that gave off that vibe.

B. Banner Ad Designs

I designed four banner ads for this campaign. I chose to do the same large image throughout of a bouquet with a bridge in groom blurred in the background. I think this imagery would easily catch the eye of a young woman surfing around for wedding inspiration and ideas. I chose the same slogan, “You found your prince, now find your song,” throughout every ad. I purposely used this slogan to market the company for what it is. More than a wedding advertisement, it has to advertise music. You also get a preview of my logo design as well. You can view them below.

Leaderboard
Leaderboard design.
enhancedleaderboard
Enhanced leaderboard design.
Cube
Cube design.
Button
Button design.
bannergif
Animated leaderboard.

Finally, I also designed an animated version of one of the banner ads. I chose to use the leaderboard, because I thought it most visually interesting.

C. Social Media

Social media is such an integral part of a campaign. You can never underestimate the value of reaching out to potential clients through all different channels and giving your clientele the option of how to connect with you. Below you will see that I developed three Facebook cover options, one Facebook timeline image, one Twitter cover option, and one overlay for Instagram. You can view them below.

fboption1
Facebook Cover Option #1
fboption2
Facebook Cover Option #2
fboption3
Facebook Cover Option #3
timeline
Timeline cover photo.
twitteroption
Twitter cover photo.
instagramexample
An example of how the instagram overlay would look on an actual image.

 

As you can see, I decided to continue with the blurred, mostly green, outdoor theme. Because the business is centralized in beautiful sunny Florida, I thought what better way to showcase what a typical wedding could actually look like. I also mimicked the same overlay banner in white with a lowered opacity, with the same font as in the banner ads, Raleway, in a variety of weights. You can clearly see the similarities between the social media and designs and the banner ads, this goes back to the “integrated” part of the campaign. 🙂

D. Email Design

Next, I created a “Dedicated Email” style e-mail. This means that the email was styled toward someone with a specific purpose: to get them to respond to a call to action. As you can see from this email design, I continued to use wedding-inspired imagery. However, I also wanted to integrate the colors of your new logo design into the email. You can see that I included a promotion to contact you for an event the new person may be interested in. I also added a small tidbit on the bottom for people who may be interested, but have no experience in classical instruments. The result is below.

email.jpg
Potential email design for a new subscriber.

E. Wireframe

From the e-mail design, I dove into the wireframe. This is simply a mock-up of how I envisioned your website to look. It gives you a basic foundation of the concept.

wireframe.jpg
Wireframe for the homepage of the website.

F. Web Page

Following the wireframe, I constructed the actual home page. As you can see more easily, I decided to have a rolling image gallery of photos of you in action, Christine. Your current website has many images of you, and I think it helps to connect potential clientele to a real person instead of a business title. For that reason, I decided to showcase you playing the harp at various venues.

As for everything else, I thought a simplistic, clean design in the logo colors would work best. Of course, I also wanted a music player on the homepage to give clients a taste of your work. (Side note: I love Jason Mraz, so I had to put him first!)

webpage
Web page design.

G. Logo Design

Finally, we get to my favorite part: your new logo! I designed this image as a vector, which means it can be transformed to any size without pixelation. I know that you requested a “flowy harp” image, and so I designed a harp in one of Pantone’s new Color of the Years, Serenity, a tranquil blue-purple. I thought it was such a beautiful color and would work perfectly in the music and wedding industry. As I mentioned in my company overview, when I think of a harp, I think of elegance, beauty, and romance. I chose Serenity because it embraces all of that and more.

The secondary color I chose is a beautiful orange-yellow. On the color wheel, orange mirrors blue and purple mirrors yellow, so to offset Serenity I chose this color. Because it is an inviting, warm color, they pair nicely together. They are both vibrant and eye-catching, and I know that any bride-to-be will be drawn to them.

I decided to make your name in a script font called Daydreamer. I was drawn to it for many reasons, but I think it works well again because it looks like an actual signature. I wanted your webpage to feel like an extension of you and your work, and to feel cozy and intimate to invite young women to contact you for your services. “Orlando Harpist” is in the same font used throughout the entire campaign: Raleway, in a variety of weights.

An optional slogan can also be included: “Fairytale music for your happily ever after!”

logo1
Original logo without slogan.
logooriginal
Original logo, with slogan.
logoreverse
Inverse logo option.
logograyscale
Greyscale logo option.

 

H. Summary

For additional ideas to promote your integrated marketing campaign, I would highly suggest continuing to utilize your social media on a weekly basis (at the bare minimum). Utilize your channels like Instagram and Youtube with new music.

Many believe that print is a dying media, but I advise you to consider mail and flyers. People like to see things in person, and there are many ways to capture a person’s attention. You could attend bridal shows with goodies, like magnets, pens, or stickers.

This about wraps it up on my end. I hope you enjoyed this potential new design for your business. I sincerely appreciate the opportunity to create this campaign for you.

 

Creating an iOS app for Old Navy

Hello, faithful viewers. We have already reached week 13, can you believe it?

This past week in class, we learned about mobile design and the guidelines specifically associated with iOS design. We were tasked with creating an iOS app for the iPad, for any shopping app we wished. With Thanksgiving and–ahemBlack Friday approaching, it seemed natural to get in the spirit of shopping so I was happy to oblige. 🙂 I chose Old Navy, a company that I enjoy and more importantly think needs an app redesign.

ipadwithapp

So, the first thing I did was decide that I wanted to make my app vertical, because I personally dislike having to turn my app sideways to use an app. I created a document at the standard 768×1024 for iPad. Next, I turned the grids on for this document. I copy and pasted a status bar that I found online, and tweaked it to look more like the iPad interface that I use, instead of just a standard iPhone. (I have the outdated second generation iPad that only has wifi capabilities, which is why I designed mine without a carrier.)

I quickly realized that Old Navy has a versatile logo. The colors are a very clean: blocked white text on a navy blue background. I liked this because it meant that I could easily translate simplicity to my app design! I love simple, effective designs. I chose to use Helvetica and Arial because both are featured on Old Navy’s website, and because they have a variety of weights.

I pulled the main promotion and the main promotion image right from Old Navy’s website, which you can see below. I also pulled four images of their different new arrivals for the second promotional section.

Screen Shot 2015-11-22 at 6.21.18 PM

Something interesting I noticed on their website is that every image with text is just that, an image. In my web design I had been told so many times to not do this, and to set the text in the HTML, that I thought this worth pointing out. 🙂

Anyway, I found this free shopping-themed UI icon set on Dribbble.com. I used the magnifying glass icon for a search button, a heart icon to be used for favorites, a shopping cart icon for products added to the shopping cart, and a speech bubble icon for a contact option. I changed the color by adding a stroke and setting the stroke to my desired color and setting the stroke to “inside.”

Something you may not know is that iOS apps have strict guidelines! I found it helpful to review the guidelines for inspiration, especially for things such as spacing and alignment. I can’t tell you how many times throughout this assignment I used Layer>Alignment and Layer>Distribute to make my shapes and text even. I also turned on my grid and made multiple guidelines. It’s pretty much impossible to try to line up elements by eye alone, so I was glad to have a helping hand!

Below you can view my final home page screen for my Old Navy mobile app design:

showcase13-regular.jpg

And again, below, you can see what my mobile app for Old Navy looks like when something in the side navigation is selected:

showcase13-selected

As you can see, I overlaid a dark grey color and changed the opacity so you can still see through it to the design beneath. I repeated that step with the new white display box, just in white.

Something I really wanted was to give enough space for fingers! Nothing annoys me more than when you’re trying to click one thing on an app, and keep clicking on another because they didn’t put enough space around the link. The iOS guidelines recommend an 88px square for touch points, so I tried to do that whenever possible, especially in the main navigation, the header, the footer, and the additional selections in the navigation.

I did not wireframe for this project, but again, I could see how it would be useful for a more intricate mobile app design. I just had a vision for a simple design, so I went with it and I’m pleased with the way it came out. Overall I believe I successfully utilized many of the recommended iOS guidelines, including (but of course not limited to) spacing, grids, layers, alignment, touch points/targets, and typography.

I hope you enjoy my mobile app design! 🙂

Disclaimer: I am in no way affiliated with Old Navy, I am simply a student who used the company for educational purposes for this design showcase.

Winter Campaign for EF College Break

Hi everyone! This week in class we talked about all the options for utilizing social media. There’s  so much to take in with all the various networks, and from what I have learned it is a simple, effective way to draw attention to your brand without much cost.

My showcase this week was to design winter-inspired social media campaign for a brand in the travel industry. I immediately chose EF College Break, a company that offers overseas trips at discounted prices for people between the ages of 18-28. As the name suggests, EF College Break is a company geared toward adventurous college students. I have been following them for a little over two years now, and although I’ve never participated in a trip personally, I think it would be a great opportunity for students to travel the world without committing to an expensive travel abroad program. They offer all different kinds of trips for a variety of lengths (7 days to 30–what an opportunity) and  excursions. They even give you a specific travel itinerary so you can be sure to see it all.

Since it was a winter-inspired campaign, I wanted to do the opposite and play up the idea of being warm over New Year’s. I came up with a variety of slogans, which I featured in all three cover photos you can see below. “Get a tan this winter break,” “Have a warmer New Year,” and “Take your break in paradise.” You guessed it, I went for a tropical, anti-winter-blues campaign. 🙂 I used the font Tornac Regular from TypeKit and added an outer glow and a drop shadow on the text for all three designs, since the the various colors in the backgrounds made it difficult to see. For the top version I created a rectangle in black, changed the layer style to Overlay, and changed the opacity to about 50% to make the type stand out more on the various sky colors.

We also learned about Layer Comps this week, which are really amazing if you’ve never experienced them. I did not know that something like this existed before, but I can already see its value. The easiest way to understand Layer Comps is to think of them as a snapshot of a current layer panel. It allows you to change different aspects of a document, like toggling on and off specific layers and changing the text, and create a new Layer Comp or “snapshotting” a way the layers panel looks. You can then change things in the image, but you’re still able to go back to that original Layer Comp if necessary. This technique made displaying my different cover photo options SO much easier than creating different documents for all the options! I can see how useful this will be for future clients.

Below you can see my Facebook cover options (all backgrounds were pulled from EFCollegebreak.com):

option1
Facebook Cover, Example #1

option2

Facebook Cover, Example #2

 

option3

Facebook Cover, Example #3

 

Next I created a Twitter cover photo option. I kept the text exactly the same, but used a larger, more high-resolution photograph I found. Even though it does not use any of the cover photos from my Facebook options, I think you can easily tell it’s from the same campaign because of the font styling and paradise feel.

 

twitteroption
Twitter Cover Option

 

Finally, I had to create an Instagram overlay for my winter campaign. Since the name of the company is EF College Break, I decided to create an overlay called “EF Winter Break,” in the same font, Tornac, and put a small airplane shape in front of it. Again, I applied the Layer Style from the other images. Here is an actual Instagram photo with the overlay used:

instagramex2
Instagram Photo with Overlay

For this campaign so far, to further integrate the theme of a “warm winter break,” I would suggest promoting tropical-themed vacations in EF College Break’s Facebook timeline posts through November, December, and January. Perhaps suggesting that it’s not too late to book a vacation, or posting fun traditions that other countries do for New Year’s in banner ads would further attract attention from potential consumers. Honestly, I think this a very easy campaign to run away with! Everyone wants to escape for those few weeks they’re not in school… I speak from experience! 😉

As far as other social channels, Snapchat/Youtube would be obvious choices. While I am a personal fan of Snapchat and the different SnapStories, I know that not everyone carries around their phones when they go to the beach or are around water, so that might not be the best platform for this reason… However, GoPros are very “in” right now, so I think those personal videos of students zip-lining or snorkeling in the excursions would be a great way to promote all the fun people are having on these vacations. Using personal videos would also inspire students to post and tag EF College Break, so I think it’s a win-win all around. I also think that Pinterest could easily showcase the beautiful locations of these trips. EF College Break could easily create all different boards for their locations and make suggestions for the destinations by using pins (like packing lists, places to eat, must-sees, etc) within each board.

Disclaimer: I am in no way affiliated with EF College Break. I have never participated in one of their programs, either, though I think it looks like a ton of fun!

Dunkin’ Donuts Holiday Banner Ads

Happy Sunday, everyone! This past week in Digital Imagery, we discussed banner ads as a form of advertisement. Banner ads are pretty interesting way to market to consumers without them being able to just toss it aside (like the ads you find in your mailbox… does anyone look at those?). They are those sneaky little boxes you find as you browse random websites (CNN, Facebook, etc); they can be stagnate or animated, but most offer some kind of reward for clicking the ad and going to the advertiser’s page. They normally are pretty straightforward, too, containing the company logo, a simple promotion, and a button to link you to their page. They don’t always even need a picture! Most come in a standard size, such as “leaderboard,” “skyscraper,” or “button,” but there are others, as well.

This week I was assigned to make a banner ad series for a company in its fourth quarter (October, November, December). This is definitely my favorite quarter of the year, so it was hard for me to decide exactly which company to pick! 🙂 As an avid coffee drinker, I decided to go with a company that celebrates the seasons as much as me: Dunkin’ Donuts. We needed to make banner ads in the following sizes:

  1. Leaderboard: 728 x 90
  2. Rectangle: 300 x 250
  3. Skyscraper: 160 x 600
  4. Button: 320 x 75

So, the first thing I did was look for some photos I could easily edit. I found a nice large image with three differently flavored coffee bags and a nice large Dunkin’ Donuts logo. Using the magic wand tool, I deleted the white backgrounds around the coffee bags. Since Dunkin’ Donuts uses bright orange and pink as their colors, I decided to make the background of all of my banner ads a gradient of a bright orange to a slightly lighter orange. I started in the rectangle (it seemed like it would be easiest because of its nearly-square shape) and placed the Gingerbread coffee bag and the logo inside. I managed to find a similar-looking “Dunkin” font on dafont.com, so next I added the type “Introducing… All new HOLIDDAY flavors!” in white with the double “d” in “holiday.” As an avid consumer, I know that Dunkin’ Donuts likes to add the second letter, since it’s their alternate logo. I then created a pink button using the rounded rectangle tool, and added a 3pt stroke. Beneath the button I added a “Limited time only” caption because holiday flavors only last through the end of January (if I remember correctly). Finally, I added a drop shadow to all of the main promotional type and the coffee bag to give the image some depth, and a 1pt black stroke around the entire image.

For the other three banner ads, I did a variation of this advertisement. The size was quite constrictive of how many coffee bags I could use in each advertisement, how detailed I could get with the promotion, and of course placement for the logos, images, and type.

Here is my final ad series:

rectangle
Rectangle ad.
leaderboard
Leaderboard ad.
skyscraper
Skyscraper ad.
button
Button ad.

Last but not least, I was challenged to turn one of my banner ads into an animation. I chose to do the skyscraper because I thought it was the most interesting. I opened the timeline panel from Window tab, and set up five frames at 2 seconds with .2 second tweening between each. Finally, I set up a 3x loop. You can see my final product below.

ddanimation2
Skyscraper ad animation.

Thanks for stopping by, see you next week!

Disclaimer: I am in no way affiliated with Dunkin Donuts, I’m simply a consumer who enjoys their products and this was an educational exercise. 🙂

Moodboards and Imagery

This week in Digital Imagery we discussed ways to get inspired for imagery projects. Specifically we talked about moodboards and how you can use them to visually illustrate a certain style. They help flesh out ideas that may be bouncing around in your head so that other people don’t need to be psychics to know exactly what you’re thinking! 🙂

Our showcase assignment was to create a moodboard for a brand. I chose to do my own personal brand, because although in infancy, it’s growing every day. In another class I’m currently taking, Web Design Principles (a class which teaches the foundation of HTML and CSS), my semester-long project is to create my own portfolio website. I hope that this moodboard helps get, well, the mood of my website across and keeps me on track for the theme of my website.

It would be hard for me to dive into my moodboard without explaining my website idea first. It is a portfolio-based website, but because I like websites with a theme, I decided to make my website based around the idea of walking down a trail. I want the user to feel immersed in outdoor imagery: lots of trees, animals, dirt, etc. I want you to be “walking” and then end up at a “fork in the trail,” where you click the trail you want to follow to get to the various pages of my website.

With my theme for my project in mind, I went on various stock imagery websites such as pixabay.com and pexels.com and downloaded (way too many) images. I also wanted fonts that were very light and airy and reminded me of the woods. At first I went on dafont.com, but when I read the agreement that came with a font I had chosen, I realized it was not permitted for use on personal branding websites. For this project that would have been fine, but because I eventually want to use certain fonts for my branding website, I decided to switch to fonts offered on TypeKit to be on the safe side. I downloaded about five fonts to choose from.

After I collected my images and fonts, I opened Photoshop and began to construct my moodboard on a 10×8 inch document. We were not allowed to use templates, so I began by adding many different colored rectangles, and threw in a few ellipses just to spice things up a bit. moodboardlayoutTo the right you can see what it looked like when I was finished constructing the layout. I know it looks a little wild right now, but the colors help differentiate the shapes in my layers panel. From here I began to embed the stock images into the document by importance. I started with my favorite image, which I put in the very center, navy blue box. I situated the image’s layer behind the navy blue box, and changed the opacity of the box to ~60% so I could see the image behind it as I adjusted it’s size. The image was much larger than my square, so I had to free transform it (Command + T) to resize it to properly fit. Once I was happy with it, I moved the image’s layer above the box, changed the box’s opacity back to 100%, right clicked my image’s layer and clicked on “Create Clipping Mask.” This feature allows you to clip the top image to fit the bottom image, which I think is just too cool! The best part is, if it doesn’t fit perfectly after you click it, you can still adjust that mask and nudge it around until you get something you like. My description might seem complicated, but it was actually very easy.

pantones
Pantone’s Mimosa, Emerald, and Marsala.

After this first image, I repeated the process over and over until my moodboard came to life. I left a few boxes purposely free of images to leave room for some text and font use, and because we were assigned to use three of Patone’s “Color of the Year” colors, and I hadn’t quite figured out how I wanted to incorporate them. So, at this point I went over to Pantone’s website and found the “Plus” hexcode for 2015’s color: Marsala. At first when I saw the color I thought it was kind of ugly, but when I saved the swatch in my library I realized it actually worked well with my trail theme; it was actually a very pretty, earthy tone. I’m sorry I ever doubted you, Pantone! I also decided to use their 2013 color, Emerald, and their 2009 color, Mimosa. I thought the three would pair well together.

Marsala (R: 173 G: 101 B: 95 | C: 10 M: 67 Y: 49 K:23)
Emerald (R: 0 G: 155 B: 119 | C: 99 M: 0 Y: 69 K: 0 )
Mimosa (R: 239 G: 192 B: 80 | C: 0 M: 15 Y: 75 K: 5 )

So, the first thing I did was set an empty ellipse’s background as Marsala, and put white text over it. (Side note: fonts used were Metallophile Sp8 in one and Myriad Std Tilt in another; I did have to change the leading in one to make it fill the box more.) That left me to place Emerald and Mimosa. Because Mimosa is so vivid and powerful, I knew I wanted to leave that for something very minimal. I decided to create a custom shape, an arrow, and filled it with Mimosa. Emerald felt more subtle, so I decided to use the paint bucket tool to paint my background in this color and I loved it, however this made my images blend in since they’re quite close to emerald as it is. I decided to put a 10px white stroke effect on my images, and put a drop shadow on both ellipses to make them pop.

Finally, our last requirement for the moodboard was to use a Photoshop action anywhere on the board. In our discussion post I had linked to this site, which displays 45 free Photoshop actions. I went back on that article and scrolled around and thought it would be pretty cool if I made one of my pictures “Bold Black and White,” so I downloaded that action. After I applied the action I realized I didn’t really want black and white, because I thought it took away from the overall feel. So I deleted the actual black and white adjustment and just kept the other parts of the action and applied it to the entire moodboard. After adjusting specific parts, I felt that it made the picture brighter and more vibrant.

Here is the final image:

design7

Because I’m a little indecisive, I also have another option of my moodboard (below) without my Emerald background. Even though this means that it would not technically meet all of the requirements of my showcase, I still like it enough to add here. You can never have too many options, right?

design7white

Thank you for stopping by!

Kirkland’s and IMC

This week in Digital Imagery in Web Design, we learned all about Integrated Marketing Communication, or IMC. I had never heard of the term before this week (I have a science background, so I’ll be honest and admit most class content is completely foreign), but I learned that in summary, it is when a company has consistent messaging and advertising along all communication channels. I learned that I’ve been unknowingly enjoying IMC for quite some time through my personal social media channels, mailings, and TV advertisements. I actually enjoy when a company hypes a new product line this way, because I see it so constantly in different media, it strikes my interest.

football-turkey
Be honest: could you resist this face?

One company that always keeps me coming back for more is perhaps my favorite home store, Kirkland’s! I recently purchased my first house this past summer, and it was where I bought knick-knacks to turn my house into a home. If you’ve never stepped foot in a Kirkland’s, don’t. I’m serious, you will never want to go anywhere else for inexpensive decor. I’m not proud to admit that Kirkland’s all but forced me buy an NFL-themed turkey this year… in July, in 95-degree weather, the week it came out..

But I digress. Kirkland’s integrates their marketing year-round; I’m at the point where I look forward to their cover photo changing so I can see the new set of products. I follow Kirkland’s on Facebook, Twitter, and Pinterest, in addition to receiving an e-mail (and coupons) almost every day. When I received this assignment to create an additional image to match with their IMC campaign, I immediately thought of Kirkland’s and dove into their different social platforms. Here’s what I found:

screenshot-kirklands
An autumn-inspired advertisement from Kirklands.com.
pumpkins-fb
Pumpkins featured in their Facebook cover photo.
screenshot-dealoftheday
“Deal of the Day” screenshot from Kirkland’s website.
screenshot-twitter
Screenshot of their fall-inspired bg photo on Twitter.

I really love their “Deal of the Day” section and wanted to focus on that in my assignment a) because it changes everyday and b) they post about it on every channel. So, I started by opening the screenshot of the DotD in PS, and copied the stamp-looking image and pasted it into my document. At first I used the lasso tool to try and erase the box in the background, but I thought it looked too harsh, so instead I used the eraser tool with the hardness set at 40% to eliminate the crisp edge. I also did not like how the top part of the circle in DotD looked as though it had been cut off, so I selected another part of the circle, copy and pasted it onto a new layer, and turned it until I was satisfied with the way it fit. Then I softly erased some of the edges again to make it less harsh and blend easier. Next, I wanted to recreate the background rectangular box. Using the eyedropper tool, I selected the color from the screenshot and created a rectangle similar to the one seen in the original. I added a stroke (within layer styles) on the box.

Progress on my design.
Progress on my design.

The original also has a light, basket weave-like pattern. To mimic this, I selected the pattern stamp tool and looked through some of the styles offered. I chose the style group called “Artists Brushes Canvas” and selected the second one from the right. After creating a new layer, I then selected the inside of the rectangle (not including the stroke), and stamped everything inside this selection. Since the pattern was in black and white, I changed the layer mode to “Soft Light” which laid the pattern nicely over the color of the rectangle beneath. I’m actually surprised by how similar it looks to the original.

I chose which graphic I wanted to make my Deal of the Day: a cute Polka Dot Boo Wooden Sign. The photo had a background, so I added a mask to the pasted image and  painted the background black (this took forever, but it was a requirement to use a mask). From there I added a layer style, a drop shadow, to make the wooden image stand out more. The deals of the day always have a cute pun, followed by the details of the product. I chose “Fall into Halloween!” and then added the details of the sign and the price. The original photo has the text the same color as the circle in Deal of the Day, so I used the eyedropper tool to pick that up. Then I pasted in the Kirkland’s logo on the bottom so consumers would know where to buy the Deal of the Day.

showcase5Above you will see my final version! I’m very pleased with the way it came out and personally feel that it looks like something Kirkland’s could easily integrate on their website.

Thanks for stopping by, and please feel free to leave a comment or suggestion!

Disclaimer: I am no way affiliated with Kirkland’s, this was an educational exercise and I’m simply a fan of their merchandise.

Albert’s Grille Project

This week in class we dove into working with Photoshop by learning many of the basic tools and features of the program. Layers are one of the most fundamental features in both Adobe Photoshop and digital design, so I was eager to understand and begin.

For this design showcase, I was hired by a local company, Albert’s Grille, to create a BLT sandwich graphic for the company website.

Albert’s Classic BLT: Crispy bacon served on a bed of lettuce and tomato, sandwiched between toasted slices of white bread, mayonnaise and mustard. Mm-mm good. –Albert’s Grille menu

albertsgrill
Final image of my project for Albert’s Grille.

While the sandwich was meant to be the star of the image, I approached this project by first considering the look of the graphic as a whole. Albert’s Grille is a deli-styled restaurant whose staff prides themselves in serving timeless, traditional sandwiches for families of all ages to enjoy. Because of this, I knew I wanted to use a well-accostumed background, and went straight to the gingham tablecloth to contrast Albert’s classic white and blue plate. I used the Magic Wand tool to highlight the original white background in the plate document and delete it so the table cloth could be seen when I moved the plate over.

Next, after similarly deleting the background, I moved a transparent image of a slice of plain, white bread atop of the plate. Because Albert’s Grille describes their Classic BLT sandwich with toasted bread, I decided to “toast” my slice by using the Burn tool. Toasters usually toast bread unevenly, and there are normally a few lighter lines that run through the the toast from the mechanism within the toaster. I tried to achieve this look by first setting my exposure level to 50%. Then I used a larger-sized brush with 0% hardness to lightly “toast” the whole piece, followed by a smaller-sized brush with a 25% hardness to toast around where lines should be. When I was satisfied, I duplicated the layer (since there would be two slices) and hid the top slice by clicking on the eye to the right of the layer.

toast
A before and after image of my “toasting” process using the burn tool.

Using a combination of the magnetic lasso tool and the magic wand, I deleted the backgrounds from tomato, lettuce, and bacon images, then moved them to my new  graphic, between the bread slices. Next, I chose a subtle yellow/brown color that looks like classic French’s mustard and, using the Brush tool, I drew it in a swirl design, like I would add mustard as a kid. I also chose to double-click on the mustard layer and add a size 1 stroke in a slightly darker hue to eliminate a harsh edge. I repeated the process to add mayonnaise but instead of a stroke, added a bevel and emboss effect, and softened to 100%.

closeupview
Close-up of the effects on my mayonnaise and mustard layers.

Finally finished with the sandwich, I began to perfect the logo for the image. I used the eyedropper tool to pick up the color of the plate, but felt it was too dark and went with a slightly lighter version of blue. I chose to stretch the text as an arc to wrap around the bottom of the plate, then double-clicked and added a bevel and emboss effect as well as a drop shadow. Overall I am very satisfied with the look of this BLT image and hope Albert’s Grille will be, too!