Finals Week with Photoshop

It’s hard to believe that I’ve already arrived at the end of the semester, and I am almost done with my VIC 5325 course. Coming into this class, I had very little prior experience with Photoshop, and my web design knowledge was limited. Fifteen weeks later, I feel that I have learned so much and I cannot wait to further develop my skills and continue my training.

For my final Design Showcase, I was assigned to create a e-card that the University of Florida could send out to its students. Our focus this week was in lighting effects, which I didn’t even realize you could utilize in Photoshop before this week. This has been one of my favorite lessons, because working with light effects gives you so much more flexibility with an image and can really transform your final product.

Instead of focusing on a holiday, I wanted to take a different approach with my e-card. Because I know so many students (myself included) are pushing to get through that end-of-the-semester workload, I decided to create an encouraging e-card wishing students good luck on finals. As just about every college student has experienced, finals week is brutal: from balancing projects to cramming for exams, all-nighters are almost a necessity, and coffee becomes your new best friend, even if you don’t normally drink it.

I began by finding an image that I wanted to use for the base of my card. I found a great image on Unsplash of a coffee cup next to a bed, which felt like a great finals set-up. After a while, I know I take to my bed, hunched over my textbooks, to get everything done. The image was a little bright, so I applied an adjustment layer and lowered the saturation until I felt that the image had a nice feel. I also used the color replacement tool to make the coffee cup orange, keeping in line with the gator colors established by the brand. To create a nice, contrasting space for my greeting, I applied a blue gradient at the top of the image, and mirrored it with a smaller one on the bottom for balance.

Mundo-Design-Showcase-15

I chose to use the typeface Palatino because it is the standard font used in the university’s logo and wanted to ensure that my e-card looked like it came from the school. I placed my greeting on two lines, off-centered, making the “Good luck” text the largest to make it stand out. I applied a drop shadow to all of the text on the card, excluding the logo, to help with readability. On the logo, I used an outer glow. I felt that an inspiring quote would be a nice touch to give students a small token of support in the last minute stress of the week.

Once I had placed everything accordingly, I added my lighting effects. I  first used a white, three-spotlight effect, angling all three to highlight the coffee cup. I adjusted the ambiance to a high degree, ensuring that you could still see the entire image. I also used a soft omni light on the quote, but this one I tinted a slight orange color. This second lighting effect just slightly adjusted the image’s tone, making it slightly warmer.

Advertisements

Video Editing in Photoshop: Ojai Olive Oil Company

Disclaimer: I am in no way affiliated with the Ojai Olive Oil company and this is for solely educational purposes.

Everyone knows that Photoshop is the premier program for editing images, but what fewer know is that you can also edit videos within the program. This is something that I had no knowledge of prior to this week, so learning about Photoshop’s video capabilities was interesting for me. I have very little video editing experience, so this week’s Design Showcase proved valuable, giving me some insight into video editing with software I’m becoming increasingly comfortable with.

I was provided with a video clip from lynda.com  about the Ojai Olive Oil company and a tutorial on how to edit the video. After being given the basic guidelines, I was assigned to rebrand the company and enhance the video as I saw fit. My only requirements were that it needed to have a title, lower-third element, and closing slide with information about the brand.

After viewing the video, I began by designing a new logo for the company. I wanted to create a brand that felt approachable and kept the family-owned feel while also modernizing it. I chose a trendy sans-serif font, Dolce Vita, for the main logo and Mistral for the “Extra Virgin Olive Oil” text. I also wanted to incorporate a graphic element, so I found a free vector image of an olive branch online. I placed a right branch in alignment with the cross of the A in Ojai and a left one along the bottom of the O. I edited them to take some of the leaves out and put in olives that I created, finishing the logo.

Mundo-Design-Showcase-13-Logo

Never having done much video editing, I found working with Photoshop to be a neat experience. I liked that I was able to use elements I am familiar with, such as the marquee tool, text tool and smart objects to impose new graphics over the original video. I decided to shorten the video, as the original was a bit long and the entire second half felt like it should be its own video on a different topic. I did, however, use a piece of this to create an end slide with different music and a semi-opaque background to entice the viewer to learn more about the company. I personally like simple transitions because I feel like they are less distracting, and so I primarily used fade outs and minimized the use of motion.

Autism Speaks Continued: Email Marketing

Disclaimer: I am in no way affiliated with the Autism Speaks organization and this is for solely educational purposes.

Let’s be honest: Most of us ignore the dozens of promotional emails that flood into our inbox each day. For users with Gmail, they’re automatically stored in their own neat little folder where they’re hardly ever opened. This being said, when I do decide to take a look, I really only pay attention to them if the subject line catches my eye and I like the design inside.

For Design Showcase 11, I was assigned to create an email to accompany the banner ads I designed last week to promote Autism Speaks’ Walk Now for Autism events. To recap, Walk Now for Autism Speaks is series of walkathon events that raise money and promote awareness for autism research. Because I had so much fun working on the banner ads last week, I knew that I would enjoy creating the email marketing.

I began my design process by writing out all of the requirements on a sheet of paper and sketching out a basic rectangular template for the email. I found some good promotional images on  Autism Speaks’ website, and decided from there that I wanted to use the three images to divide separate areas of text. To carry my theme from the banner ads over, I decided to use the phrase “always moving forward” written down the page imposed over my images. I sketched this out, adding lines to represent copy and filling in the blank space with squares for images. I designed it to be read vertically, optimal for email structure.

SLIDE_1 SLIDE_3SLIDE_2

Once I had my basic plan, I moved into Photoshop and measured everything out to the exact proportions I wanted. I put in the three images and began designing the text in between. I wanted the email to not only promote the walk, but also give some basic background on the events so that recipients on the mailing list could forward it to friends to stimulate new interest in the walk. I also added several features in the bottom panel where readers could get more information about the organization itself, share the email and contact the company.

My color choices came from the logo itself, and I also wanted to use the same colors as those in my banner ads. I also repeated the Sanchez font over the images to keep consistency between the two. I used flat, iconic imagery, including the recurring shoe print.

Mundo-DesignShowcase11

I actually found this Design Showcase to be easier than some of my past assignments, but this may also have been because I was truly motivated and excited to work on it. The most difficult part was making sure that all of my text and shapes were properly aligned and spaced, as well as organizing all of the individual layers into groups.

Creating a Series of Banner Ads for Autism Speaks

Disclaimer: I am in no way affiliated with the Autism Speaks organization and this is for solely educational purposes.

Autism Speaks, a science and advocacy organization dedicated to furthering autism research, has always been a company that is close to my heart. My brother was diagnosed with Asperger Syndrome as a young child, and so I grew up around autism support groups and lots of individuals facing the the autism spectrum.

One of the primary ways that Autism Speaks raises money and promotes awareness is through their annual Walk Now for Autism Speaks events. Across the country, groups organize to walk for the cause, and it is all supported through volunteers, families and local businesses. I have been to numerous of these walks and I have seen the impact that they have on the community.

That being said, I was excited to focus my Design Showcase this week on a worthwhile cause. I was assigned to create a series of banner ads that a company could use to advertise their current campaign. Since many of the walks take place during the second quarter of the year, I felt that this would be a perfect opportunity to promote them.

I began by looking at the company’s current branding and color scheme, deciding that I wanted to achieve a simple style that matched the colors of the recognizable logo of the brand. Since the silhouetted puzzle piece is commonly associated with autism, I decided that I wanted to focus on that and other similar flat imagery.

ASLogo

Because the walk is a known annual event, I wanted the promotion line to convey a sense of establishment while also showing the organization’s devotion to progress. I decided on the tagline “10 years of progress and still moving forward.” I also decided to use a line of shoe prints as my main imagery to symbolize continuing forward while also literally referring back to the walk itself.

ASBanner300x250


ASBanner728x90

ASBanner320x75

ASBanner160x600

In making each ad, I had to adjust the recurring elements to display them in the most appealing format for each canvas size. For most of the designs, I made the logo the most prominent piece, though this approach worked better on the horizontal ads. I changed the size and arrangement of the text to effectively cover the blue space and draw the viewer’s eye across the banner. I also kept the shoes in a right-facing horizontal pattern, only changing this for the skyscraper to keep the flow with the other ads and draw the viewer down the banner.

The final part of my assignment was to make one of the ads into a changing GIF. I decided to animate the skyscraper into three panels: The blank with just the logo, the added text, and the final completed banner with the call to action.

ASBanner_Final_Gif

Moving Into Web Design: Wireframing

Disclaimer: I am in no way affiliated with the LaSpada’s brand and this is for solely educational purposes.

In starting any new design project, the first step is to really think about the goals of the finished product. The most important part of any graphic or web design is to effectively convey information. Functionality is king, and when you’re designing, it can be easy to get lost in typefaces, colors, graphics and illustrations, and lose track of where you were going in the first place.

This is particularly important when you are designing for the web. A company’s website really shows the face of a company, and it is one of the primary places that consumers can interact with a brand and make decisions about it. If a consumer visits a website and finds it difficult to navigate, unprofessional, or overall poorly designed, they will lose interest and may form negative opinions about that company, even if their products and services are good.

For these reasons, a very important and early step in the web design process is wireframing. A wireframe is a basic layout, created with boxes and placeholder text to plan a website’s features and elements. Wireframes are important because they give a true feel for what an end website will look like and allow for changes early on. They ultimately save time and money, especially if there are multiple clients and designers involved in the process.

My Design Showcase this week displays a wireframe that I created for LaSpada’s Original Hoagies, a local sub sandwich chain located in South Florida. Lines that span the entire length of the restaurant are a daily occurrence at LaSpada’s, and everything about the restaurant is top quality. Where LaSpada’s lacks, however, is in web presence. The chain lacks any form of social media and its website is outdated–it hasn’t been changed since 2008.

laspadas

Tests have been done and it is proven that when scanning a website, we tend to read in an “F” shaped pattern. We begin at the top corner, move across the page to the right, and then move downward. Effective web design places important information in places where users are likely to read and lays out the elements in a way that makes sense to the reader. Keeping this in mind, I designed my wireframe to convey important information while also creating a layout that is graphically pleasing.

Mundo_DesignShowcase8

I started with what I felt are most important elements and gave them priority placing: the logo, the navigation and the Contact Us section. I placed the logo in the top left corner because it is the first place the reader looks when they open the website. I created several layers in Photoshop so that I could leave blank space for the logo or put it in, depending on how I wanted to look at the layout. I then placed the navigation along the top so that users can easily find what they are looking for. For me personally, nothing is more frustrating than going to a website knowing exactly what I am looking for and being unable to navigate the site. This thought also links why I put the Contact Us section in a prime location. Whenever I look up restaurants online, it’s usually because I want to call them, find the hours or find the exact location. To make sure that the user only has to deal with relevant information, I designed the layout so that a user could click on a location, and a pop-up with all of the details for that restaurant would appear.

Mundo_DesignShowcase8_withPOPUP

For the rest of the elements, I arranged them in the way that I felt best made the best use of visual hierarchy. I chose my color scheme based on the LaSpada’s logo and the overall tone of the restaurant. Although LaSpada’s currently does not have social media, I also placed in icons for future developments.

Creating a Mood Board for Spotify

This week’s Design Showcase has definitely been the most fun to date. My favorite thing to do in design is arrange elements on a blank canvas (why I love typography and collaging), and creating a mood board allowed me to do exactly that. I was assigned to select a brand and create a mood board for a campaign I would like to see executed in the future. The goal of a mood board is to convey the general emotions one hopes to evoke with a campaign, setting an aesthetic, color scheme and sample type choices. Someone working in advertising or PR may use a mood board to pitch a campaign concept to their company or client.

I chose to create a mood board for online music-streaming service Spotify. Music is a huge part of who I am, and Spotify is a service I use daily. It allows users access to 30 million songs for free with ads, or offers Premium service for $9.99 a month.

Spotify

When you look at Spotify’s website and it’s imagery, the tone is youthful, energetic and slightly rebellious. There are lots of images of young adults having fun with their friends, partying and exploring the world around them. To keep with this feeling, I centered my campaign around the concept of adventure. In pitching this idea, I would say that the goal is to persuade the target audience to create playlists for their own personal adventures, and thus they should use Spotify.

I began creating my mood board by gathering images that fit with this adventurous theme. I also wanted to keep some of the images directly related to technology and music, since Spotify is an entirely virtual product. I gathered my images from Unsplash and Pexels, which provide free high-res photos for designers to use. I also went to dafont to find some appropriate new typefaces for my board.

As part of my assignment, I also incorporated three Pantone spot colors into my design. I used the CMYK equivalents of this year’s Marsala, 2006’s Sand Dollar and 2003’s Aqua Sky.

Pantone-Colors

I originally began integrating these colors into my final design by using them as color replacements and semi-opaque overlays with some of my images. In the end, I also included rectangles with the hues themselves, as I felt that it tied my whole design together.

I also applied the Helga Action that I downloaded from SpoonGraphics to the following concert scene, giving it a slightly more subdued look that I felt matched with the tone of the rest of my mood board.

unsplash_52c319226cefb_1

In the layout process, I used a variety of Photoshop tools to achieve the sense of excitement and adventure that I wanted to display in my final product. I had a lot of fun experimenting with different effects and placement of imagery, and was very happy with my final composition.

Mundo_DesignShowcase7