Archive | Design

5 Graphic Design Tips for Social Media (and Everything Else!)

So you want to be a graphic designer? It’s much more than just combining texts and words. It’s about using those texts, fonts and colors to design a brand.

American Apparel has their clean, Helvetica Black look. Unicef has its official, purposeful cyan. And Starbucks has their earthy tones that showcase their handicraft style. There is no way to paint a perfect painting, and likewise there is no way to craft the perfect graphic design, but every time I work with the Duke Office of News and Communications, from designing an Instagram story or an official Chinese New Year card for the university, I think about what story I want to create. What is the Duke that I want people to see?

Here are a few ways to get started:

Have a Consistent Look

There has to a be a point in our life when we all thought we were artists creating WordArt masterpieces with rainbow block font combined with circular text and wavy fonts. To create a brand, one must start with a consistent look that readers will view so that part of their brain will immediately register what they’re seeing as ‘Duke.’ This includes working with a one or two select fonts with a similar look, staying within a certain color palette, and making sure to align objects on the page. You can use Duke’s StyleGuide to get an idea of what these are for Duke.

Negative Space

Contrast is everything when it comes to making things stand out. If you have a light colored graphic or text, use a dark background and vice versa. A good way to do this is by increasing the opacity of a photo to create a lighter background or decreasing its brightness to create a darker background.

Here, I used a consistent font (official Garamond, Duke scholarly feel) and used contrast between dark navy words and opacity and brightness-adjusted background.

Typography

Be creative with your fonts and make sure they reflect the vibe you are trying to create! For originality, I like to use very distinctive fonts for big titles and more standard, easily readable fonts for subtitles and smaller text. Online free font databases include dafont.com, fontsquirrel, and urbanfonts.

Canva

This is a useful site for fledgling graphic designers. It allows you to select from a library of different templates for different needs, ranging from flyers to posters to social media posts. Everything is designed and aligned for you – but if you’re an artsy one and want to tap into your creative edge, it is easily navigable with drag-and-drop features: allowing you to customize fonts, colors and search for certain shapes and images. Free, easy and quick.

Photoshop

Here, we’re scaling it up by a little notch for the Photoshop beginner.

Rule of Thirds Grid

Sometimes a little cropping or moving objects around by a little goes a long way! You can easily display the rule of thirds grid on Photoshop and make sure that objects you want to highlight lay on one of the gridlines or at one of the intersections. This makes a photo’s composition more appealing to the eye.

Go to the crop tool and a toolbar will appear where you can select ‘Rule of thirds’

Design: Chinese New Year card to Duke’s Chinese audience

Here, you can see that I aligned the dog’s face, “Duke University” as well as “Dog” onto the gridlines.

Magnetic lasso tool

Want to cut something out from a picture? Most people use the lasso tool. Sadly, our hands can be shaky and most of us simply don’t have the patience to cut with surgical precision. The Magnetic Lasso tool is the solution to all your problems, especially when you have a bold contrast and well-defined edges. Click and hold your mouse over the Lasso tool until a fly-out menu appears, and select the last one with a tiny magnet on its icon. Click once on the edge of the object and just run your mouse along the edges of the object you want to select (like when you are using scissors to cut something out). This is how I cut out the turkey and gave it to the Blue Devil for Thanksgiving!

Play with opacity

A layer with 1% opacity is close to transparent, while a layer with 100% opacity is opaque. Whether you are brushing something over with the paintbrush or inserting another layer, you can adjust the opacity to make sure things blend in more naturally or so that certain objects do not stand out as much.

The Complications of 360 Degree Video

Before shooting with a 360-degree camera, I really had no clue what to expect. I didn’t know what the camera was going to look like, how it was going to work, or even how I was going to hold it. I thought to myself, “I wouldn’t consider myself to be an expert on cameras. Am I even going to be able to use this thing?” My first experience with a 360-degree camera was nearly a year and a half ago. I was privileged to be tasked with shooting footage of the Brodhead Center and thus, learning how to use a 360-degree camera. The problem is, as I said, that was over a year and a half ago and I haven’t touched the camera since. After my first shoot, I could successfully answer those questions that I previously had to ask myself. Now, I can barely even remember what the camera looks like, let alone how to use it. And so, with the new duty of filming the extravagant Trinity House, I was once again tasked with learning the ins and the outs of the 360-degree camera. Lucky for me, one thing that I do remember is that the camera itself was not that difficult to use. The application, on the other hand, is quite the burden.

The main problem wasn’t the camera itself. The camera that I was using was the Nikon KeyMission 360. It looks like a fist-sized cube and has two curved lenses and image sensors to capture footage from the front and from the back. If I’m being honest, I couldn’t even tell you which side of the camera is the front and which was the back. It has almost perfect symmetry. The directions appeared fairly simple. While the camera was off, it said to hold down the button on the top until the lights were flashing (to send it into pairing mode) and then connect the camera to your phone via Bluetooth. After pairing, connect to the camera’s wifi network and you should be all set up. Finally, you can use the app to remotely start and stop filming as well as view an in-app gallery of footage taken so far.

Now, let me recall for you my experiences with the camera’s pairing capabilities and use of the application. The day of shooting, one of the other interns (Katie) and I spent nearly 30 minutes just trying to get the camera to pair with our phones so that we could use the application. When we picked up the camera from the Office of News and Communications nearly a week before, we practiced pairing it with our phones to make sure that we knew what we were doing. After following the steps over and over again, for close to 20 minutes, the camera finally paired and we were on our way. We knew that there was a chance of these complications happening again but were just hoping that they wouldn’t arise when it came time to shoot. When we tried this in Trinity, it didn’t pair. We tried for a half hour with no luck. We didn’t think it ever would pair. So, we needed to come up with a workaround.

The workaround.

We hadn’t practice filming manually because we knew that if we did it this way, we would not be able to view our footage in real time. The camera doesn’t have a digital screen, thus, the only way to view the footage that you have taken is through the application. But, since the application wasn’t working, we had to just go for it. We started filming. We weren’t sure if we were actually capturing any footage because neither of us had tried manually shooting footage with this type of camera before, but had to go for it anyway because it was our only option. Then we realized, “the camera must have an SD card!” For those of you who don’t know what an SD card is, its basically a memory card used in portable devices such as cameras. So, we plugged it into a computer and viewed the gallery of footage. It was working! We were actually capturing footage. Now that we could finally see what we were recording, we wanted to make sure that the footage was visually pleasing. I’ll get into how we shot in a bit, but (through examining the footage) we basically realized that the tripod that the camera was on was sitting too low and needed to be raised.

Without the convenience of the app, we didn’t know whether or not we were getting footage. Even if we were, we didn’t know what it looked like. Eventually coming to the conclusion that the tripod needed to be raised became much more difficult and time-consuming than it needed to be. Although the camera’s specs and shooting capabilities are great (it shoots 360-degree 4K Ultra HD video), due to the inconsistencies and problematic nature of its ability to pair to your phone, I would not recommend it as the top choice for 360-degree video.

How we shot.

There were a few approaches to filming that Katie and I could have taken. The first was that we could walk around Trinity with the camera on an attachment and film the dorm as one continuous shot. There were a few problems with this option. The first is there would be a person, relatively close to the camera, in the frame at all times. This would take up a lot of space in the film. Also, if we were walking, there would be a lot of twists and turns trying to navigate around the dorm. If the camera is twisting, that defeats the purpose of the 360-degree video because viewers are supposed to have the freedom of doing this on their own. Lastly, although the dorm is glamorous, not all of it needs to be seen. There are some highlights such as the game room, common rooms, and movie theater, but we really didn’t think that people would care about the hallways and stairwells. To get from one noteworthy place to the next, we would need to pass through these boring places that would make the video long and drawn-out.

The second option was to set the camera down on a tripod, start filming, step out of the frame, leave the camera there for 10-20, and then come back in and stop filming. For the final video, we would then edit the parts with us in them out and stitch together this footage. This is the choice that we decided to go with. It would allow us to present the glorified parts of Trinity House and give the viewer enough time to pan around each room, all while leaving out the uninteresting aspects of the dorm.

Using Canva Animator to Make Even More Awesome Content

One of our social media secret weapons is the online tool Canva, especially since the advent of Instagram Stories last year. Our office relies pretty heavily upon the tool for stylized, easy to build graphics, and now, animated video content as well.

I recently had the opportunity to demo the new Canva beta animations tool on Duke’s Instagram Stories to highlight a very exciting partnership between the university and the American Ballet Theatre.

Canva is a great tool if you’ve got really visual content to accompany any text about your story or research that you want to highlight. In this case, we were fortunate to have some incredible dance photos at our disposal. I knew I wanted to highlight these images and push people to the story via Instagram Stories.

Enter, Canva. The great thing about this tool is its user-friendliness. I was able to login to our office account and design slides using photos and text, just as I would ordinarily. The difference comes in when it is time to export your slides. You’ll notice that there is a new option under “Download” in the top, right navigation bar. Select this new option, “Animated GIF/Movie,” then click “Preview Animation.”

This will open the Animator tool:

From here, you can select from any of the six options or “styles” on the right for your animations, which will be demoed on the slides you have created. Once you are satisfied with your selected animation form, you have the option to download them as either a GIF or .mp4 file. For example, @DukeUEnergy recently used the tool to create a GIF that they rolled out on Twitter:

Four @DukeAlumni dropped some powerful insights at the Women in Energy event we sponsored last month w/ @Duke_EDGE. #DukeWomen #WomensWeekend #ForeverDuke #GoDuke #energycareers

cc: @DukeU @DukeEnvironment @DukeEngineering @COEnergyOffice @DukeEnergy @EQresearchEQ @RTI_Intl pic.twitter.com/bvVx3ACExt

— DukeUEnergy (@DukeUEnergy) March 14, 2018

For the purpose of our Instagram Stories, I selected “Download as Movie.” Then the file will be downloaded to your computer. Here is our final product:

We’re not quite done yet. Because all four slides were created in one Canva document and not individually downloaded, they exported into one, 28-second long video. Instagram Stories will only allow 10-second long clips for each part of the story. So I had to do a bit of tedious editing on my end. First, I emailed the .mp4 file to my iPhone. Then, I went into my camera roll and edited the whole video down into separate clips featuring each slide. I saved each edited segment as a new video file, so as not to lose the original 28-second video. The end result was 4, 7-10 second long videos featuring only one of each of the animated slides. I was then able to upload these, in order, to our Instagram Stories.

The result when it played back was one seamless “video” on our Stories. With the video broken into 4 separate parts, I was also able to attach a link on to each segment of our Story that sent viewers directly to the Duke Today article about the partnership. The end result can be viewed on Instagram’s mobile interface as a feature on @DukeUniversity‘s account.

This whole process took me less than an hour. With a little creativity to work around the Stories time limit function, Canva Animator is a really great tool to easily make videos with a highly produced feel with (very little, at least on my part) video skill.

The Graphic Designer’s Toolkit: Essential Apps and Resources

Guest post by Meaghan Li ’15

Photo editing and manipulation: Adobe Photoshop

Photoshop is now a household name and an absolute staple in every creative industry that you can think of. It lets you enhance, retouch, and manipulate images for all of your everyday and professional needs, whether you’re amping up the contrast of a landscape shot, brightening the smiles in a family portrait, or tackling full-scale creative projects.

Vector art and illustration: Adobe Illustrator

Before I began working as a graphic designer at Duke, Adobe Illustrator was completely foreign and utterly intimidating. Once you’re familiar with the interface and functionality of Illustrator, however, it becomes a seamless and intuitive powerhouse for all of your graphic needs.

Experimenting with color schemes and palettes: colorschemedesigner.com

Color Scheme Designer is an extremely simple and effective tool for creating gorgeous color schemes. Choose your base color, and the website will easily create a palette of complementary, analogic, or accented shades to match.

Creating photo mosaics: Fotor

Here at Duke Social Media, we love using collages and mosaics to showcase several student photo submissions and campus shots at one go. Fotor is my favorite tool for creating photo collages; not only is it simple and fast, but it also gives you several options to experiment with the style and composition.

[UPDATE] Facebook’s Cover Image Area

Facebook recently changed their cover photo rules. Facebook now allows brands to list contact information, calls to action, and product details in their cover photos. Read more about it here.

***

Starting on January 15, 2013, Facebook will regulate the amount of text included in your Page’s cover image and news feed ads to no more than 20 percent of the graphic’s area. The new year and the new policy is a good time for Duke University Facebook Page owners to check if our cover images are compliant with Facebook’s policies.

Facebook’s new policy on cover images reads:

Pages Terms Section III.B

Covers may not include:

i. images with more than 20% text;

ii. price or purchase information, such as “40% off” or “Download it on socialmusic.com”;

iii. contact information such as a website address, email, mailing address, or information that should go in your Page’s “About” section;

iv. references to Facebook features or actions, such as “Like” or “Share” or an arrow pointing from the cover photo to any of these features; or

v. calls to action, such as “Get it now” or “Tell your friends.”

Note that a logo with text in the cover image contributes to the 20 percent limit of text in a cover image. Facebook will provide a grid tool for Page managers to use to determine if they are within Facebook’s text restrictions for cover images and news feed ads. Also note that you can still post images with more than 20 percent text if they aren’t promoted posts in the News Feed. And, you can use these post images for ads as long as they are displayed in the marketplace area.

It seems like Facebook is trying to increase the quality of images in profiles and the News Feed. Images remain an important strategy for posting to Facebook and creating custom profiles, but our Duke pages need to use compelling graphics and photography instead of marketing jargon to communicate our messages.

The current cover image for the main Duke University Facebook Page is compliant with the new policies and can be downloaded by right-clicking the image below and selecting “save image as” from the dropdown menu. Please contact us on this blog or at socialmedia@duke.edu if you any comments or questions about these new policies.

Here are some resources to read more about the recent changes:

New Facebook Rules Limit Use of Text in Images, Entrepreneur

Facebook updates cover photo and News Feed ad policy, limits text to 20% of image, Inside Facebook

Duke Chats During The State Of The Union

The Duke community joined a Twitter chat during President Obama’s “State of the Union” address last night.

Several faculty and students participated in the chat, tweeting their reactions to the president’s speech using the hashtag #DukeChat. The chats provide an opportunity to have a “public classroom” about issues in real time. We had a ton of conversation. In fact, as of noon on Wednesday, Feb. 13, #DukeChat is still trending in Raleigh, NC on Twitter.

We had some fun promoting the chat on Facebook and posted a nifty State of the Union bingo graphic (credits to Jonathan Lee, Office of News and Communications).

And, here are some of our social media team’s favorite tweets from #DukeChat:

Check out the Twitter chat in its entirety here.

Duke’s Office of News and Communications has hosted a few politics-based twitter chats within the past year, including during the January 2012 “State of the Union” address and, last fall, during the presidential debates and both the Republican and Democrat conventions.

The Ultimate Complete Final Social Media Sizing Cheat Sheet

It’s really hard to keep up with the different graphics and sizing for social media accounts and profiles. Here’s a great cheat sheet from the folks at LunaMetrics. Save this one to your hard drive and never Google “Facebook Cover Image Dimensions” again!

The new @DukeU on Twitter

Twitter recently launched several features to make user profiles more engaging, including a new header image. To take advantage of these additions, Duke’s social media team designed new graphics to use for our Twitter background and header images. Here’s a walkthrough of the approach.

the new @DukeU experience

The header:
The header is a new feature Twitter introduced in September that gives users an additional element of customization and personal branding. However, there are a few constraints:

Size:

Twitter recommends 1200x600px with a maximum file size of 5Mb.

Regardless of what file size you are working with, your final product should have a 2:1 aspect ratio.

Effects:

Twitter will automatically apply a darkening gradient to your header image, and layer white text over that gradient.

Execution:

our recently redesigned undergraduate admissions site

Though the size constraints actually give users a great degree of freedom, allowing users to upload hi-res files, we kept our header simple, which gave us more flexibility when designing the background. More on that later.

For inspiration we referred to the subtle, but graphically intriguing backgrounds on the new Duke Undergraduate Admissions site, and designed the header image shown below:

Twitter also applies a wide white stroke to your avatar and layers that over your header as well. To undercut the off-putting boldness of this effect, we changed our avatar to the blue on white version of our logo. This way the stroke appears to be a part of the image rather than a boundary constraining it.

The background:

Backgrounds are a bit trickier to deal with because different users will see different swathes of your image based on their monitor’s resolution and what browser they are using.

Size:

There are two kinds of boundaries to operate within. First, Twitter allows backgrounds up to 2048px wide (no height limit), with a maximum file size of 800KB. However, regardless of the background dimensions, viewers will only see what portions of it their monitor and browsers allow. While Twitter’s allowances tells us which perimeters we should design for, browser data dictates where we should place important content:

99% of Twitter visitors have at least a 1024px wide resolution. Twitter’s own content occupies 865px, so that leaves you with 132px (a pair of 66px gutters on either side of Twitter’s content) to work with. This is enough space for a logo or a brand name to descend down the side of the canvas, but doesn’t leave much room for other graphic elements.

85.4% of visitors have a 1280px or greater resolution. This gives designers 372px (194px on either side) to work with, and is the option we pursued. (Browser data from W3Schools Jan 2012)

Alignment:

Earlier, Twitter allowed backgrounds to be left-aligned only. This could be problematic for some designs since graphics were anchored to side of the user’s browser rather than anchored to the content, making the right-hand gutter functionless for incorporating further information. With the most recent update, users have the options to left-align, right-align, or center their background images. Centering allows users to make full use of both gutters, and also fixes design to your content.

The various background alignment options Twitter now offers.

Execution:

We created a 1920x1520px background at 72 ppi. We used the left gutter to create a banner 180px wide. For a the rest of the background, we used a high-resolution photograph.
Using a photo can present a few challenges. When using the header image feature, the user needs to be sure that the background and header don’t clash and compete with each other (or the profile photo) for the viewers attention. To negate this issue, we used a subtly patterned header, though the inverse is just as plausible – highlighting a photographic header and utilizing a clean graphic background. Combinations of dual photos or dual graphics work as well; it’s just a matter of finding visuals that compliment each other.

Additionally, because Twitter limits background images to 2048px in width, viewers with a browser resolution higher than this (or than your photo) will see empty canvas space on either side of the uploaded background. Popular solutions include having your background fade into whichever color you set as the background color (or utilizing a background that strongly features that color). However, since our background photograph features a wide range of colors, we selected a clean black from the Duke Style Guide to accentuate and showcase the photo.

A quick look at the 'Save for Web' panel in Adobe Illustrator. Key elements are highlighted.

Lastly, photos are typically much larger files than other kinds of graphics due to their color depth. Our final image was 7.6MB, well over the 800KB Twitter allows. To get our file size under this limit, we used Adobe Illustrator’s “Save for Web” feature to decrease the quality of the image.

By decreasing the file’s quality to 61%, we reduced the file size to 794.1K – right below the 800K mark – while introducing minimal artifacts. Naturally, a user can shift the balance the other way, in which image quality would be prioritized over photographic dimensions – it’s just comes down to what aspect the designer would like to optimize.

For those interested in adopting this background, we’ve provided the following resources:

Duke Social Media Twitter Background

Duke Social Media Twitter Header

Happy designing, and tweet on!

– Jonathan

Prize Winners

Honorable Mention