Storytelling takes many forms. In the past, stories were told orally, with people telling and retelling myths, fables and even histories. As writing technology became more prevalent, we began to record our stories, and we told them in the pages of books. Now, our society is awash in different devices and technologies, and those traditions of spoken stories and printed stories are blurring.

Multi-screen narratives are being told across all kinds of platforms, pages and devices, making for truly immersive experiences. We are watching them, tapping them and learning from them. They immerse us in the storyteller’s world. This article outlines what I believe are the five essentials of telling multi-screen stories.

How I Fell In Love With Interactive Storytelling

First, a little background. My childhood was spent in Nigeria, West Africa. I am a member of the Tiv tribe, a group of about 6 million people clustered in Nigeria’s Benue River Valley. As a child, I heard a lot of Nigerian folktales, about animals, humans and even magic. In Nigerian narrative tradition, stories are often told orally, in front of a gathered audience. During festivals and cultural events, men even dress up in elaborate costumes and perform stories for the crowds. I have vivid memories of these stories and have always been curious about how they could be translated into something digital and interactive.

The Kwagh Hir, or Thing of Magic, my tribe’s largest cultural festival (Image: Naptu2)

Those fables are a piece of my cultural inheritance. They always seemed to contain essential truths about humans. Take the story of the Ear and the Mosquito. One day, the Ear steals food from the Mosquito and refuses to pay it back. In anger, the Mosquito visits the Ear every evening, demanding the food to be returned, annoying Ear all night with his buzzing. It’s an old tale, with many versions, but the moral is consistent: don’t steal from your friends.

Creating modern, interactive versions of these stories is possible, but how exactly do we do that? Let’s begin by talking about what I mean by the word “multi-screen.”

A Bit About Context And Screens

When speaking about multi-screen storytelling, remember that screens have different contexts, not only different capabilities. The same screen on which you carelessly watch videos at home becomes a closely guarded viewport when you’re watching a movie on a crowded train. The context in which people view stories is more important than the device’s specifications. When we tell interactive stories, we need to be aware of this, and embrace it.

I like to focus on the following screens:

• Sensors (Twine, GPS, Arduino, motion detectors, etc.)
• Mobiles and tablets (phones, tablets, laptops and everything in between)
• Flat-screens (desktops, TVs, etc.)
• Public and immersive displays (store kiosks, large stadium screens, projectors, Kinects, etc.)

Not all of these need to be used at the same time, because they won’t all be appropriate to the story you are telling. Context is extremely important.

Now, as promised, here are the five essentials of multi-screen storytelling.

1. Divide Your Story Into Separate Content Blocks

When we create multi-screen narratives, we need to find natural breakpoints in the story, places where the visual or narrative content can easily be separated. This enables us to deliver different segments to different devices, in different contexts.

Kolobok is a Slavic children’s story about the adventures of a round yellow cake. For the Moscow International Festival, a large team of designers and animators from SilaSveta Studio incorporated it into a truly fascinating demonstration of storytelling. Before the show, the team set up a large touchscreen at the children’s height. With their hands, the kids could manipulate parts of the animation by adding movement and color.

A public display for children to play with

For the show itself, the full story was projected onto the facade of a large building, allowing the crowd of adults and their children to watch the narrative unfold. Along with sound, it made for another discrete content block, one that closely resembled a 3-D movie.

The full animated story in front of a large festival crowd

While the touchscreen and the movie were different views of the same content, they could exist as independent pieces and did not have to appear next to each other. The SilaSveta team found the natural breakpoints in its story and created two separate visual experiences to match them.

Questions to Ask

• Where are the breakpoints in the story? Divide your content so that it makes sense in context. The practice of responsive design gives us numerous guidelines on how to do this.
• Can those content blocks exist independently? Sometimes, the answer is no, but it depends on the story. In the Kolobok example above, they can. In other interactive stories, such as Snow Fall from the New York Times, the blocks are chapters in a single story and should be kept together.

2. Offer People Multiple Perspectives

Bear 71 is an award-winning multi-screen experience created by Jeremy Mendes and Leanne Allison. The creators tell the story of a bear living in Banff National Park in Canada. It feels like a cross between a role-playing game and a TV documentary, and as a linear narrative with a non-linear interface, it works beautifully.

The Bear 71 story is told in a highly abstracted interface.

Multiple viewpoints are accessible. Online, you roam in a stylized landscape, watch crittercam footage from the forest, and otherwise live as bears do — freely. Even though it may look like a game interface, you are not so much “playing” as you are participating in a story. Watching real crittercam footage, you see what the forest silently sees. You also have the option to turn on your webcam (“stealth mode”) to see other users around the world, all watching the same story online.

During shows and installations, the team responsible for Bear 71 set up augmented-reality applications and motion-detection cameras, so that visitors could experience what it’s like to have their pictures taken with one. By playing with the augmented-reality apps and the motion-detection cameras at the installations, users got a bit of the same physical experience that the bears had.

Questions to Ask

• Does the narrative change when viewed from a different perspective? A variety of perspectives can make a narrative much more fascinating. Bear 71 forces us to see the world first from the bear’s perspective and to sympathize with its loss of habitat, but other viewpoints take a slightly different angle. The voyeurism common in our digital sharing culture takes on a different meaning when used for animal surveillance.
• What data sets can be used in the narrative? Bear 71 cleverly combines crittercam video, GPS data, cell tower data, augmented reality, and topographical data. The photographs of visitors to the installation provide an additional emotional layer of data. The data we bring into our stories helps to define additional viewpoints and characters.

3. Redefine A Tradition

As Western culture has moved more deeply into Nigeria, Nigeria’s traditions are weakening. I wanted to take a piece of my culture and put it in the cloud, instead of leaving it locked in the heads of our oral storytellers. That meant redefining how the stories are relayed, how they are saved and, most importantly, what messages they convey to the audience.

In 2011, I started a project named Pixel Fable in which I take those traditional stories and reinterpret them online. In essence, I’m creating an interactive archive of Nigerian stories. As mentioned earlier, the oral histories of Nigerians are rich, but capturing them and translating them into digital stories means they will reach a wider audience. About 25% of my website’s visitors come from the US, while another 25% come from Japan. Canada, France and Germany also send a fair amount of traffic.

Pixel Fable uses responsive websites, iOS apps and augmented-reality animations to reinterpret Nigeria’s oral history.

An introductory screen from “Cricket and Mud Brick,” a new Pixel Fable story built with the Tapestry app

I’ve relied on two primary contexts to reinterpret the old Nigerian storytelling tradition. The first is people on their tablets and phones, clicking on and reading the stories. The spread of mobile devices makes this inevitable — why not tell African fables in a more accessible context? The second is my attempt to update the moral lessons for our modern age. While the original story of the Ear and the Mosquito may be a funny tale about annoying insects, the lesson can be updated to speak about how mosquitoes spread malaria in Nigeria. There’s room to redefine our old myths for the 21st century.

Questions to Ask

• Will people love or hate the reimagined version? Not every fable or myth can (or should) be recreated digitally. However, if people have an emotional reaction to a story that you have designed and pushed out to multiple screens, that is usually a good sign.
• If people talk about your narrative, will it bring about change in society? Each Pixel Fable story has a message. Most fables do. Some revolve around love triangles, others around the wisdom of elders, and there’s even one about why you shouldn’t get angry at your friends. They are small messages, but put together, they force us to reconsider how we treat the narrative history of people in Nigeria and West Africa.

4. Immerse People In The Narrative

The Walking Dead, the famous comic and now TV show, used a polling Web app (AMC’s Story Sync, if you like marketing-speak) to ask viewers questions and show related content as an episode was being broadcast on TV. While the app was simply timed to each scene, it was an experiment in multi-screen storytelling that invited audience participation, not just audience attention. Polling has a gimmicky feel to it, but that probably came about as a result of Hollywood pressure and doesn’t reflect the value of the concept in general.

Polling and syncing apps extend narratives from the TV to the couch.

The creators also added mobile gaming to the mix, bringing viewers “into” the story in a completely different way, in different contexts.

All of these facets of each story’s arc enabled people to immerse themselves in this apocalyptic narrative. Jason Spero of Google notes the need for a seamless experience as users move between devices. Other people, however, say that a second-screen experience can be extremely distracting, forcing viewers to miss key parts of the TV show. It is the opposite of an immersive experience, they say, and is confusing to use. In my opinion, each content block should work independently to avoid putting users in this position.

Questions to Ask

• Will people forget where they are? I’ll be the first to admit that this is not always a good thing. I can’t count the number of times that I’ve almost missed my train stop because my head was buried in my phone. Context, not only device capability, is key. Do you want users to get lost in the story or just engage in a manageable chunk?
• Do the screens you have chosen feel natural? By this, I’m not referring to pixel density. That is simply impossible to control, and if the story if good, it won’t matter anyway. The screens that people choose will depend a lot on the tasks they want to complete, so make your story feel natural for whatever content block they are interacting with.

5. Design Contextual Interactions

Recently, a number of storytelling apps have relied on location to serve additional content, much in the same way that Foursquare or Google Maps do. The Silent History is a dystopian science-fiction story about children who do not speak. The iPad app contains the whole story, but by visiting certain geo-tagged locations, users can access additional content.

For a novel about children all over the US, inviting readers to physically go to where the story’s kids are makes perfect sense. The additional contextual interaction makes the story more layered and thought-provoking, in a way that a simple app would not be.

We use map data every day, to look for restaurants, check the weather, see road conditions and even check for public transit delays. Other contextual interactions make sense when creating digital stories: taking photographs, texting, sharing and saving information, even body motion. Use these, along with your UI and UX skill sets, to devise new storytelling methods.

Questions to Ask

• Does the device matter? With the rise of responsive design workflows, our content should not be device-dependent. Some things, however, such as camera or GPS functionality, may be integral to a part of your story, and so the device would need to be factored in.
• Should the interface be designed as a seamless part of the narrative? As people who work on the Web, we really have a strength here. If we choose to make the interface part of the story, then we can rely on our experience in building websites and content management systems.
• Will your story “remember” anything? As a child, I folded over the top corner of the page when I had to put a book down. It was a simple way to keep my place. With a narrative split across multiple devices, it might be necessary to design an interaction that flags where you’ve gotten to and then returns you there when you visit again. That all depends on the content, but the question does need to be asked. Everyone hates losing their place on the Internet and having to navigate back, so perhaps we should enable a memory in our stories as well.

Conclusion

We have conceptualized different uses of multiple screens to tell stories. All of us, from every corner of the globe, have intensely rich cultures filled with stories and fables. Using them to create interactive narratives is another way to explore the power of the Web, to wow people and to record our cultural history.

I would love to see what you come up with, or hear about other examples of clever digital storytelling.

(al) (ea)

© Senongo Akpem for Smashing Magazine, 2013.

It’s all about presentation. Ideas and concepts are great, but mean nothing if they cannot be properly communicated. To help others understand them, we may create prototypes or sketch out an idea to get to a meeting of the minds. Fortunately, in graphic design, we do that by creating mock-ups.

Most times when we create designs, it’s tempting to send a flat graphic, as is, to our client or out to our intended audience. It can work, but it’s much more effective when we have a way for people to actually visualize a design in its intended environment. It’s easier to understand a mobile app when it’s being presented on an actual mobile phone, rather than just a standard graphic in a simple size.

It’s best to have some photo-realistic mock-ups, but if you have vectors, that will work as well. Today, we’ve put together a bunch of PSD’s and actions for great, professional mock-ups. It includes anything from corporate branding to shirts and more. We hope you find something useful and great to use for your next project.

Interactive design

MacBook Air 

Perhaps you want to show off a web design, application design or even just a desktop background. Whatever it may be, this is a great mock-up that’s fully scalable and can fit any project.

Blackberry z10 PSD mock-up

You’ll find a ton of iPhone mock-ups all over the Internet. However, this new Blackberry Z10 doesn’t get nearly as much love as the iPhone. Fortunately, we’ve found this mock-up to help you show off your app designs and such.

White smartphones mock-ups

What I really like about this set of mock-ups is the flat color design they’ve used. It gives off an illustrated/vector that’s not only great for mock-ups but for design elements throughout a design.

Safari browser PSD

I’m not a huge fan of Safari as a browser, but below, you’re able to download a PSD that you can use with your web designs. It will help your viewers and clients see and understand what your web designs look like in their rightful environment. 

iPod Touch PSD mock-up

The new general iPod Touch is now available for presentations with this mock-up. Great for featuring new music apps and how they’ll work in their new environment.

iPhone 5 PSD landscape mock-up

 This iPhone 5 PSD is made using smart layers and is fully scalable. Also, the iPhone comes in black or white. This is great for when you want to show how different mobile apps work or how responsive sites are seen on an iPhone.

HTC 8x PSD mock-up

Again, iPhones are all the rage. This Windows phone is great for those of us who work on different interfaces and need to present our work in such an environment. 

Samsung Galaxy SIII PSD mock-up

Considered the second most popular phone in the world, it’s probably a great idea to get this PSD in your stash. This white Galaxy PSD is all vector work, so it can be scaled for high resolution work.

MacBook Pro retina PSD mock-up

Sometimes, it’s not just enough to put our web design in side of a browser window. It’s very common for designers to create mock-ups using the actual device, whether it be a laptop or desktop. This time we have the new MacBook Pro.

iPad PSD perspective mock-up

It’s not evident what exact version of the iPad this is, but it shows it can be extremely versatile. Again, this is a vectored image that is fully scalable to fit in any of your designs. It’s great to give another, interesting angle for your responsive designs and apps.

Responsive design mock-up pack

Of major importance in responsive design, is to make sure you know and understand how your design is going to look in all browser sizes. This mock-up pack is great for putting all that together and helping visualize it.

Chrome browser PSD mock-up

As my favorite browser, this is a go-to of mine for when I want to present web designs to clients. It’s fully editable, scalable and all around wonderful for web designs. 

Identity and print

Magazine/Book Front Cover PSD

We’ll get started with a pretty simple magazine or book front cover. It’s high-quality and great for print and easily editable with smart objects. This is great for presenting covers with a fun bit of perspective, rather than just straight on. 

Fold Photoshop Action

This is a fairly simple action that transforms your one-dimension graphic into a tri-fold brochure. This is great for adding that depth to letters or brochures.

Flyer/Poster Mock-Up

If your flyers an posters are A4 or A5 sized, this may be the mock-up for you. You’ll be able to present your flyers with a bit of pizzazz to your clients.

Die cut business card mock-up

Create any shape business card with this Photoshop action. Not only do you get a neat car shape, you get a great angle and presentation as well.

Photoshop action for book cover

This is one of the most sought out mock-ups ever. Lots of people like to use these for e-books and physical books, rather than just looking at a one-dimensional presentation of a cover. 

Corporate identity mock-up PSD

Creating a corporate identity pack is probably something you’re familiar with. This pack features many different elements, including a brochure, letterhead, business cards and more to help present your ideas for an identity package. 

Magazine mockup

I like this mock-up because it’s a standard magazine size to help you show off advertisements, editorial design and more to your clients. This is a must-have for print designers. 

Magic 3D Photoshop action

Sometimes, it can be really hard to present a logo. It can end up being really plain and boring. This Photoshop action has created a way to add a little bit of excitement to our otherwise mundane logo designs. 

Paper fold Photoshop generator

This is another simple Photoshop action that just ads a bit of style to what we be a normal graphic. Great for posters, flyers and any other type of print work. 

Poster mockup template (PSD)

This is one of my favorites, mainly because it adds a bit of something else to what would normal just be a flat design. This is a great example of how one could present something differently. This PSD is also very editable.

Bifold brochure mock-up PSD

It’s often hard to find a realistic, professional way to show our brochures. Most times you lose a side of the brochure, but with this mock-up, you do not. It shows you how to set up your files and where to place them on this wooden background.

PSD business card mock-up

If all you’d like to do is feature your business cards photo-realistically, this is a great PSD for you. It’s also print-ready for creating more professional mock-ups for clients.

Mockup 4 panel accordion

We’ve talked about tri-fold and even bi-fold. Here we have a 4-panel brochure, that’s created by using a Photoshop Action.

Stationary branding mock-up (volume 1)

I found a PSD like this more than helpful for when you want to showcase all of your work in a portfolio. Often times, we don’t design and print every piece of corporate identity first, so this is a great way to show it off all at once.

Apparel

Hoodie template PSD

With this hoodie PSD, you’re able to customize colors and designs while keeping the highlights and shadows in the original. This is a must have for anyone creating designs for hoodies.

Men’s vest PSD

Again, with this mock-up PSD we are able to customize our colors and keep our highlights and shadows to go with any design.

Shirt PSD V2 mock-up

This is an extremely easy PSD to use to show off your shirt designs. The instructions are simple and easy to understand. Colors are easy to change and highlights and shadows stay in tact easily.

V-Neck shirt template PSD

V-Necks are my absolute favorite shirt to recommend to clients. They’re trendy without being too fancy, so when I’m ready to mock it up, I use this wonderful template. The colors are easy to change and it’s even easier to add the design. 

Flat peak PSD

There aren’t a ton of mock-up templates for hats or caps. Fortunately, TheApparelGuy is hooking us up with this flat peak template for caps. You can change colors and even keep the cap sticker, if that’s your thing. 

T-Shirt mock-up

What I like about this mock-up is there isn’t a whole person and it’s also not just a shirt there by itself. It’s a nice in between for those of us who want to show our shirts but don’t necessarily want to feature a model. 

Food packaging

930g steel can mock-up action

Of course, you can see this template being used for any type of coffee can out there. I think there are many uses for this piece, and it’s even better as a scalable action. 

Paper chip bag mock-up

 You may developing the brand design for a new line of chips, popcorn, pretzels or etc. This is the mock-up action for you.

Paper cup PSD and action

Well, we all know what this is for and how to use it. This coffee cup mock-up is great if you want to try new designs or if you need a realistic version of a brand already well known. 

Photoshop PSD packaging

This page features an ice cream carton, two food bags, an two types of jars. This is great for your food packaging and can be scaled, as they’re vectors. 

Wine bottle mock-up PSD

Designers are becoming more and more creative when it comes to creating wine labels. They aren’t just regular rectangular stickers any more. In order to get a good visual on them, here’s a great scalable mock-up for wine bottles. 

Wine Bottle Photoshop Action

Perhaps you don’t want a black bottle for your wine. Or perhaps you find a PSD too hard to work with. This Photoshop action creates a vectored wine bottle for any of your uses. 

Miscellaneous

Wallet CD Mockup

CD and DVD packaging is an extremely important part of print designing for some clients. Though this is a specialized version of CD/DVD packaging, it’s definitely worth having to offer a professional presentation and a new idea.

Visa credit card mock-up

You never know what you’ll get into designing as your career progresses. Your next project may just be a credit card design! Now, with this mock-up you’ll be more than prepared for that. 

13 free professional mock-ups vol. 1

If you’d like a little more consistency between your mock-ups, this may be a great pack for you. It’s great for corporate/branding identifications and includes mock-ups for business cards, CD’s, clear cards, boxing and more. 

3D box generator

This Photoshop action can transform your designs into a 3D box in a matter of seconds. This is great for those of us creating a simple package for anything from food to software. 

What are some of your favorite mock-up templates? Do you have any to share? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!

It’s all about presentation. Ideas and concepts are great, but mean nothing if they cannot be properly communicated. To help others understand them, we may create prototypes or sketch out an idea to get to a meeting of the minds. Fortunately, in graphic design, we do that by creating mock-ups.

Most times when we create designs, it’s tempting to send a flat graphic, as is, to our client or out to our intended audience. It can work, but it’s much more effective when we have a way for people to actually visualize a design in its intended environment. It’s easier to understand a mobile app when it’s being presented on an actual mobile phone, rather than just a standard graphic in a simple size.

It’s best to have some photo-realistic mock-ups, but if you have vectors, that will work as well. Today, we’ve put together a bunch of PSD’s and actions for great, professional mock-ups. It includes anything from corporate branding to shirts and more. We hope you find something useful and great to use for your next project.

Interactive design

MacBook Air 

Perhaps you want to show off a web design, application design or even just a desktop background. Whatever it may be, this is a great mock-up that’s fully scalable and can fit any project.

Blackberry z10 PSD mock-up

You’ll find a ton of iPhone mock-ups all over the Internet. However, this new Blackberry Z10 doesn’t get nearly as much love as the iPhone. Fortunately, we’ve found this mock-up to help you show off your app designs and such.

White smartphones mock-ups

What I really like about this set of mock-ups is the flat color design they’ve used. It gives off an illustrated/vector that’s not only great for mock-ups but for design elements throughout a design.

Safari browser PSD

I’m not a huge fan of Safari as a browser, but below, you’re able to download a PSD that you can use with your web designs. It will help your viewers and clients see and understand what your web designs look like in their rightful environment. 

iPod Touch PSD mock-up

The new general iPod Touch is now available for presentations with this mock-up. Great for featuring new music apps and how they’ll work in their new environment.

iPhone 5 PSD landscape mock-up

 This iPhone 5 PSD is made using smart layers and is fully scalable. Also, the iPhone comes in black or white. This is great for when you want to show how different mobile apps work or how responsive sites are seen on an iPhone.

HTC 8x PSD mock-up

Again, iPhones are all the rage. This Windows phone is great for those of us who work on different interfaces and need to present our work in such an environment. 

Samsung Galaxy SIII PSD mock-up

Considered the second most popular phone in the world, it’s probably a great idea to get this PSD in your stash. This white Galaxy PSD is all vector work, so it can be scaled for high resolution work.

MacBook Pro retina PSD mock-up

Sometimes, it’s not just enough to put our web design in side of a browser window. It’s very common for designers to create mock-ups using the actual device, whether it be a laptop or desktop. This time we have the new MacBook Pro.

iPad PSD perspective mock-up

It’s not evident what exact version of the iPad this is, but it shows it can be extremely versatile. Again, this is a vectored image that is fully scalable to fit in any of your designs. It’s great to give another, interesting angle for your responsive designs and apps.

Responsive design mock-up pack

Of major importance in responsive design, is to make sure you know and understand how your design is going to look in all browser sizes. This mock-up pack is great for putting all that together and helping visualize it.

Chrome browser PSD mock-up

As my favorite browser, this is a go-to of mine for when I want to present web designs to clients. It’s fully editable, scalable and all around wonderful for web designs. 

Identity and print

Magazine/Book Front Cover PSD

We’ll get started with a pretty simple magazine or book front cover. It’s high-quality and great for print and easily editable with smart objects. This is great for presenting covers with a fun bit of perspective, rather than just straight on. 

Fold Photoshop Action

This is a fairly simple action that transforms your one-dimension graphic into a tri-fold brochure. This is great for adding that depth to letters or brochures.

Flyer/Poster Mock-Up

If your flyers an posters are A4 or A5 sized, this may be the mock-up for you. You’ll be able to present your flyers with a bit of pizzazz to your clients.

Die cut business card mock-up

Create any shape business card with this Photoshop action. Not only do you get a neat car shape, you get a great angle and presentation as well.

Photoshop action for book cover

This is one of the most sought out mock-ups ever. Lots of people like to use these for e-books and physical books, rather than just looking at a one-dimensional presentation of a cover. 

Corporate identity mock-up PSD

Creating a corporate identity pack is probably something you’re familiar with. This pack features many different elements, including a brochure, letterhead, business cards and more to help present your ideas for an identity package. 

Magazine mockup

I like this mock-up because it’s a standard magazine size to help you show off advertisements, editorial design and more to your clients. This is a must-have for print designers. 

Magic 3D Photoshop action

Sometimes, it can be really hard to present a logo. It can end up being really plain and boring. This Photoshop action has created a way to add a little bit of excitement to our otherwise mundane logo designs. 

Paper fold Photoshop generator

This is another simple Photoshop action that just ads a bit of style to what we be a normal graphic. Great for posters, flyers and any other type of print work. 

Poster mockup template (PSD)

This is one of my favorites, mainly because it adds a bit of something else to what would normal just be a flat design. This is a great example of how one could present something differently. This PSD is also very editable.

Bifold brochure mock-up PSD

It’s often hard to find a realistic, professional way to show our brochures. Most times you lose a side of the brochure, but with this mock-up, you do not. It shows you how to set up your files and where to place them on this wooden background.

PSD business card mock-up

If all you’d like to do is feature your business cards photo-realistically, this is a great PSD for you. It’s also print-ready for creating more professional mock-ups for clients.

Mockup 4 panel accordion

We’ve talked about tri-fold and even bi-fold. Here we have a 4-panel brochure, that’s created by using a Photoshop Action.

Stationary branding mock-up (volume 1)

I found a PSD like this more than helpful for when you want to showcase all of your work in a portfolio. Often times, we don’t design and print every piece of corporate identity first, so this is a great way to show it off all at once.

Apparel

Hoodie template PSD

With this hoodie PSD, you’re able to customize colors and designs while keeping the highlights and shadows in the original. This is a must have for anyone creating designs for hoodies.

Men’s vest PSD

Again, with this mock-up PSD we are able to customize our colors and keep our highlights and shadows to go with any design.

Shirt PSD V2 mock-up

This is an extremely easy PSD to use to show off your shirt designs. The instructions are simple and easy to understand. Colors are easy to change and highlights and shadows stay in tact easily.

V-Neck shirt template PSD

V-Necks are my absolute favorite shirt to recommend to clients. They’re trendy without being too fancy, so when I’m ready to mock it up, I use this wonderful template. The colors are easy to change and it’s even easier to add the design. 

Flat peak PSD

There aren’t a ton of mock-up templates for hats or caps. Fortunately, TheApparelGuy is hooking us up with this flat peak template for caps. You can change colors and even keep the cap sticker, if that’s your thing. 

T-Shirt mock-up

What I like about this mock-up is there isn’t a whole person and it’s also not just a shirt there by itself. It’s a nice in between for those of us who want to show our shirts but don’t necessarily want to feature a model. 

Food packaging

930g steel can mock-up action

Of course, you can see this template being used for any type of coffee can out there. I think there are many uses for this piece, and it’s even better as a scalable action. 

Paper chip bag mock-up

 You may developing the brand design for a new line of chips, popcorn, pretzels or etc. This is the mock-up action for you.

Paper cup PSD and action

Well, we all know what this is for and how to use it. This coffee cup mock-up is great if you want to try new designs or if you need a realistic version of a brand already well known. 

Photoshop PSD packaging

This page features an ice cream carton, two food bags, an two types of jars. This is great for your food packaging and can be scaled, as they’re vectors. 

Wine bottle mock-up PSD

Designers are becoming more and more creative when it comes to creating wine labels. They aren’t just regular rectangular stickers any more. In order to get a good visual on them, here’s a great scalable mock-up for wine bottles. 

Wine Bottle Photoshop Action

Perhaps you don’t want a black bottle for your wine. Or perhaps you find a PSD too hard to work with. This Photoshop action creates a vectored wine bottle for any of your uses. 

Miscellaneous

Wallet CD Mockup

CD and DVD packaging is an extremely important part of print designing for some clients. Though this is a specialized version of CD/DVD packaging, it’s definitely worth having to offer a professional presentation and a new idea.

Visa credit card mock-up

You never know what you’ll get into designing as your career progresses. Your next project may just be a credit card design! Now, with this mock-up you’ll be more than prepared for that. 

13 free professional mock-ups vol. 1

If you’d like a little more consistency between your mock-ups, this may be a great pack for you. It’s great for corporate/branding identifications and includes mock-ups for business cards, CD’s, clear cards, boxing and more. 

3D box generator

This Photoshop action can transform your designs into a 3D box in a matter of seconds. This is great for those of us creating a simple package for anything from food to software. 

What are some of your favorite mock-up templates? Do you have any to share? Let us know in the comments.

Create an HTML5 Browser Game from Scratch – only $19!

Micro-display LED tech could light up the next generation of face-wearable gadgets.

A tiny head-mounted display, like the one in Google Glass, will only be useful if you can see on-screen alerts and information clearly. And that’s tricky to achieve, especially without draining battery life—as Google notes, it can be hard to use Glass’s projected display in bright sunlight.