10 of the Best Banner Mockups for 2016

best-free-product-packaging-mockup-templates-2015

Banners. They’re everywhere — hanging along street lamps, outside your nephew’s school, and broadcasting specials at your favorite falafel place. They’re a critical tool in the advertising world, and likely something you’ll run into at some point with a client.

Let’s take a look at some of the best banner mockups to make 2016 awesome!

  1. Free PSD Fully Editable Mall Banner Mockup PSD — Want a mockup that looks realistic, but doesn’t detract from your design? Nothing will beat this download! While the background is a mall setting that lets you and your client view your hard work in a realistic setting, the focus is entirely on the banner design, letting your hard work shine through, while still letting your client envision what their placement options are.
  2. Trade Show Booth Mockup PSD — This wildly sleek and contemporary mockup option gives you a multitude of viewing capabilities for your end product. The show booth genre is a great one to look at, as it’s going to fo us entirely on your design product and showing it off in the best possible light — and this mockup does just that!
  3. City Lamp Post Banners Mockups — Clients who want to view their banner products on a lampost for every driver and walking civilian to see will fawn over these mockups! This package offers a number of different angles, sizes, and positioning options for your design. A series of background images lets you choose the sky colors that will most complement your final design, letting you show off your work in the best possible light.
  4. Banner and Poster Mockup — A wildly versatile mockup that gives you a crazy amount of creative freedom. We love this mockup package because of how real it feels — your end result will look like something straight from a  professional photo shoot because that’s where these mockup images started. Put your designs in a busy urban setting populated with people, architecture, and bright cityscapes — any client will love these mockups!
  5. Free Street Banner and Booth Mockup For Advertisement — This sleek mockup lets you put your design right in the middle of a contemporary urban setting. Clients can easily view their end product in a street-side boxed-in banner on a dark and slick sidewalk, a great way to illuminate the design you’ve worked so hard on.
  6. Trade Exhibition Mockup — A great mockup for those who want to really blow up their design and show off what they’ve created to their clients. This mockup lets you alter both the banner image — which appears as a larger-than-life banner — as well as the background image, letting you place your design in any setting you desire.
  7. Outdoor Advertising Mockups — Sometimes, clients need to see their mockups in the most tangible, real-world setting possible. This is likely to be the best mockup set for that client! Offering you four different camera angles, this mockup set lets you put your design in a bus terminal, two sidewalk ads, and a billboard. What better way to let your design shine and show off to your client than a real-world application?
  8. Rollup with Stand Vector Mockup Template — Want to give your client a clean and simple vector image? This mockup is for you! Offering 6 different setups for your design, this option lets you lay out your banner on a stand or free-float it for your client’s viewing pleasure.
  9. Indoor Advertising Poster Mockup — A perfect mockup for those who want to put their design into a real-world setting! This mockup lets your client see your work and their product in a viewable mall area, giving them context for what they’re getting when they work with you.
  10. Rollup Mockup — Clean and simple, we love that this mockup gives you 9 different angles to put your banners on. A trio option lets you break your design into a stylish and chic tryptic, or combine three different designs that work together for your client.

Whether you chose to put together a more traditional looking banner mockup for your client or throw together something completely contemporary and unique, we know they’ll be impressed by any one of these stellar mockups!

Master Illustrator with the Best 10 Tutorials Out There

New Year, New Resolutions! We love to see when people decide to jump onto amazing design tools like Illustrator and Photoshop — but where to begin? Whether you’re a newbie or a veteran, these are 10 of the best Illustrator tutorials on the web today.

Here’s how we like to look at them — if you’re already a seasoned Illustrator user, take each of these 10 tutorials as a challenge to reproduce them as best as possible (or to do better)! And if you’re new to the game? Go through each one step by step, and take in how to manipulate every tool, every stroke, and every feature that the incredibly powerful Illustrator has to offer you. We promise you won’t regret it!

  1. Create Detailed Spa Stones and Flowers in Adobe Illustrator — This tutorial is great for covering a few basic ideas on texture and color with natural objects. If you’re looking for a few good methods on creating vector stones, flowers, and leaves, then this tutorial will serve you well!

  2. How To Create a Colorful Vector Landscape Illustration — This is one of those great tutorials that takes something that looks more complicated than it actually is, then breaks it down into totally manageable steps. Gradients will soon become one of the design elements you find yourself putting in many of your finished products!

  3. Experiment With Color in Adobe Illustrator to Create an Abstract Rose Illustration — Don’t let the finished product intimidate you! While this may seem like a design project that is out of reach for beginners, it’s one that you should absolutely consider undertaking. This tour in texture, color, and shape is really a rudimentary exploration of how to best use Illustrator to master your brightest and most intense design productions.
  4. How To Create Geometric Stripy Line Art in Illustrator — More abstract and geometric designs will likely become a part of your design repertoire. Learning to create unique pieces that are aesthetically pleasing and which still manage to evoke an emotional response (all without text or obvious imagery) is a powerful design tool. Get your toes wet with this tutorial!
  5. Tips for Guilloche Pattern Vectors in Under an Hour  A Guilloche pattern or technique is most often seen in printed currency to help make counterfeiting efforts more difficult. It can also be seen in some kinds of pottery work, like ceramic or enamel. Needless to say, it’s a highly intricate pattern that takes a little skill and a lot of attention to master — get on it!
  6. How To Create Outstanding Modern Infographics — It doesn’t look like infographics are likely to go anywhere anytime soon. Companies are comfortable using them in annual reports that they send to consumers, small business owners are creating them to tell stories about their products, and designers everywhere are being faced with the challenge of coming up with unique ways of showing off those layers of information.
  7. How to Create an Identity Package in Illustrator — Whether you use an identity package to hone and present your own design identity, or to help a client visualize their upcoming design elements, this is a great way to do it. Illustrator isn’t often thought of as the strongest tool for the job, but their multiple art boards make it easy to see how each piece (letterhead, magnets, business cards) fit together and mesh — or clash.
  8. Learn to Create a Variety of Script Lettering — At some point, you’ll get bored with font options. You’ll want to make something new. Something different. Something that says ME! A script lettering is often the way that designers go, as it can fit fluidly into a formal or more contemporary informal design space. Get your teeth cut with this tutorial, and don’t look back.
  9. Create a Variety of 3D Lettering Effects for Poster Design — Clients are going to forever be asking for ways to make their designs “pop.” A 3D lettering effect is a powerful and amazingly simple way to do just that — with the bonus of working for just about any client, and any project, and any end-game.
  10. How To Create a Cubist Style Logo Design in Illustrator — This is a tutorial that you can really grow with. After mastering the few basic stylings and techniques for creating the cubist style, you can find all sort of new applications for this hot and chic texture.

Regardless of which tutorials you chose, you can rest assured that you’ll be mastering the foundations of Illustrator in no time. After a few of these great tutorial creations, you’ll be more than ready to venture into the world of freely designing your own stellar images. Happy drafting!

7 Creative Photo Manipulation Tutorials

Following are seven creative photo-manipulation tutorials and their summaries. You can view the linked tutorials , and this article briefly explains below each picture. Below is an example of some exceptionally creative Photoshop-ery:

It takes imagination to make this design, and imagination is the core ingredient in producing high quality photo manipulation. Proper imagination can manipulate photographs with elements of nature like fire, water, and lightning. Photoshop has a ubiquity of brushes and techniques for enhancing/changing pictures. The advertising industry is famous for its use of manipulated photography. Magazines, posters, package designs–all use the techniques that will be explored shortly. These tutorials will give you the information you need to most fully utilize program functionality. You’ll learn to add effects, edit images, incorporate natural elements, and so much more.

Compose a Concept Piece With Gorgeous Effects Using CS6

The maker of this tutorial shows acolytes how this exceptionally gorgeous picture was put together using the CS6 iteration of Photoshop, and stock images. Text effects were added, and layers were adjusted; as were filters–all of which requires patience. The tutorial for this picture is two hours long, and viewers are lead through the complete process. The best way to learn is from professionals, and in this tutorial, the best manipulation techniques the artist uses are revealed. Things like lighting effects, masking, shadows, general composition, smart objects, layer management, coloring of a selective nature, and so much more. Finally, the manipulation explored in this tutorial is advanced; so know it’s worth it, don’t rush things, and there’s no reason not to share the work of this artist!

Composing an Illustration of Skin-Tearing in Photoshop

It’s become en vogue for models in advertisement and film to “pull away” their skin, showing something strange, frightening, or sensual beneath. Apparently the Ars Thanea team developed and popularized this effect several years ago in 2013. They used a number of different images pertaining to the Sao Paulo Football Club. Ever since, this style has been on the rise in popularly; and with the frequent tutorial requests, it only made sense someone would put something up eventually.

This tutorial reveals how this effect can be created using Photoshop. It also shows the best way to light and shoot photography for this effect. Initially explored is extraction of the “model” from its background, removal of tattoos, and the way in which skin is pulled aside and mechanical things inserted.

 

Creating Magical Manipulation of Photos in Post-Production

Oftentimes, artists are known to ally themselves with a team of like-minded individuals for the completion of a project. Usually there’s a director of some creative capacity, an art director, a photographer, a graphic designer, a re-toucher, and of course the client for whom the project has been commissioned.

The tutorial explored in this link is a two-part series where the tutorial-maker teamed up with well-known photographer Natalie Fobes and put together an illustration of magic in photography as a child interacts with toys that are no longer static, but suddenly living. The tutorial shows not just which kinds of photos are needed, but how retouching is done, and how combining them with stock photos can create a work of art which closely resembles an initial sketch.

This link goes to Natalie’s tutorial in order that those interested can learn how the photography was shot. Check the photography section labeled Tuts+.

 

Designing That Particular “Distorted Lady” Effect Via Photoshop

This tutorial reveals the steps employed for creation of this strangely distorted female form via Photoshop. Metal and rock textures have been placed over the female body in order to facilitate the primary effect. A number of image adjustments and layer masks, in conjunction with various filters, are used to fine-tune this intermediate-level manipulation.

An Illustrated Watercolor/Ink Effect Applied to Photos in Photoshop

Many photo artists are interested in the application of watercolor/ink effects to pictures. Certain filters and effects can accomplish this aim, but the best way to do it is through hand-drawn illustration. This method provides the best end result, and the most flexibility. The following tutorial explores such an approach.

 

Creation of “Leafy Face” Photo Manipulation Effect Via Photoshop

This tutorial reveals steps taken to create this woman’s “Leafy Face” in Photoshop. Techniques used include layer blending, layer masks, the use of adjustment layers, and filter effects. This is an intermediate tutorial, so some steps can be difficult.

 

Composing Surreal Digital Art, Such As This “Dark Power Unleashed” Motif in Photoshop

This tutorial shows how this surreal digital art was put together through Photoshop. It begins with a simple city image soon combined with cloud, model, and a number of other objects to emphasize the picture’s surreal nature.

These tutorials reveal integral Photoshop picture-manipulation techniques. Hopefully you have learned some new techniques and tips to improve your own photo manipulation skills

 

Best JQuery Lightbox Plugins

Let’s face it, there are an endless number of competitors vying for the website creation market. In order to stand out from the crowd, you must go above and beyond by creating an extraordinary website not just a nice-looking websites. That is where plugins can help. With the correct plug-ins, you can create a visually stunning and immersive websites. Here are some of the best JQuery Lightbox plugins that will help you create a website that will keep them coming back for more:

1. Chillbox – Allows you to overlay a main image with a second one. This works great for rendering text, but could take more time than you’d like getting the transparency optimized.

2. jQuery lightGallery – Creating picture galleries and YouTube videos is easier with this plug-in. The number of effects is small but the quality is wonderful.

 

3. JackBox – Responsive Lightbox – The JackBox stylesheets and scripts will only load into your web page if the page contains a lightbox item. This means that on the pages where no lightbox items are used, no unecessary plugin files are loaded. When JackBox CSS and JavaScript filesare loaded, they load asynchronously, helping your web pages to load faster.

4. MetroBox – Responsive LightBox – MetroBox is a jQuery plugin for displaying photos/videos or anything you want with visitor/user comments ( like social network features ). This plugin does not have comment system. It only show comments you have.

5. Visual LightBox – This wizard creates pop-up galleries without needing to know code. The free version is limited, however, and you need to renew your license for the business version yearly.

 

6. Smoothbox – This plugin makes CSS3 transitions smoother. The only con is that there are no options related to javascript so you have to work with what is there.

 

7. Fancybox – Creates a floating “box” to display pictures and other media. This can be good for showing detailed images, but can potentially slow down loading time for a page.

 

8. Image Lightbox – A no-frills lightbox that works well with touchscreens or keyboards. It only works for images, however, not other media.

 

9. Tosrus – Creates slide galleries that are very easily accessed on desktops as well as portable devices. This only works on Windows 8 or above, however.

 

10. Colorbox – This slideshow creator is dependable and is in use on two million websites, The learning curve can be strong, but help files are available.

 

11. Nivo Lightbox – One of the most advanced lightbox plugins, this integrates easily with a variety of other plugins. It is free to use but the support license is a bit pricey.

 

12. Venobox – This plugin is responsive to the maximum width of an image and makes it possible to scroll and see the entire height. Other than that, it doesn’t have any stand-out differences.

 

13. iLightBox – One of the most advanced lightbox plugins out there. This one has all the bells and whistles you could wish for. It may be too intensive for most websites, however, and best saved for media intensive ones.

 

14. Swipebox – Great for touch screen devices but requires detailed knowledge of coding to properly install.

 

15. Magnific Popup – One of the few plugins that allow you to adjust images within the popup itself. Unfortunately, will not work on Windows 7 and below.

 

16. asPopup – Simple and responsive, but brings nothing new to the table.

 

17. Lightbox 2 – Updated version of the original lightbox plugin. Works on newer operating systems but doesn’t have any bells and whistles.

Regardless of your needs, jQuery has a lightbox plugin that will meet your needs. From the minimalistic asPopup to the bells-and-whistles laden iLightBox, and everything in between, you will find something that works to make your website professional-looking and a step above the rest.

You’re Vastly Underestimating the Importance of Color in Web Design

I’d be willing to bet that when you put together a website and are looking to choose a color scheme, you look for something that ‘looks good.’ That’s perfectly fine, but you’re missing an entire area of consideration when that’s the end of your color decision process, and that’s color psychology.

We dipped into this topic not long ago while discussing turning budget web design clients into real money makers, but it’s such an important topic it deserves its own article. It really can make a considerable difference for your client if you understand color psychology and how it affects the browsers, and can even help in the process of conversion.

So what is color psychology? The idea behind color psychology is that every color we come in contact with elicits a response in our brain and gives us an emotion. Managing those responses and emotions to help achieve a goal is a way you can make your web design that much more beneficial to your client.

Let’s look at some examples:

Using Green in Web Design

img_5643bf4cc6b6b

Green suggests to us power and growth, and should be used for more than just nature-related sites and environmental sites. It’s also a good color to include in sites such as TD Ameritrade, as it subtly suggests to the browser that the adviser can help their finances grow.

Using Blue in Web Design

img_5643bfa61d12d

When you think of the color blue on the internet today, one of the sites that probably comes to mind is Facebook. They clearly aren’t strangers to color psychology as the color blue suggests integrity, trust, and friendship, all things the site would like the browser to think of, though perhaps to varying success in their case.

Using White in Web Design

It can be easy to overlook white when thinking of colors, but in color psychology it provides a very important role. It suggests purity, or purity of intention. While it’s likely that many sites use it without color psychology in mind, it’s always a wise color to include in any business website.

Using Black in Web Design

img_5643c00ba4df3

Exclusivity is what’s suggested by black. This is one of the key reasons why many banks and credit card companies have done away with their platinum cards being without a limit, in favor of the black card. It suggests that getting a black card puts you in an exclusive club. A prime example of this in action is American Express.

Using Yellow in Web Design

img_5643c0c9e9ba3In the right setting, yellow can be a very important color. It suggests intellect and superior minds. University of California, Berkeley, for instance, has several insertions of yellow on their website, as well as blue.

Using Red in Web Design

vanguard screenThose who are versed in color psychology would probably suggest the color red is underused in the business world, as it seems to suggest everything a business should be going for: energy, passion, and action. All good things to look for in a mutual fund, which is why Vanguard mutual uses the color heavily.

 

Other Examples of Using Different Colors

Now that we’ve covered a few specific colors, let’s take a look at a couple websites and see how they put color psychology to use in their own marketing.

Wells Fargo‘s site is almost entirely white and red, with hints of gold which suggests they have a purity of intent and will take action for you. These are great traits someone looking for a bank should keep an eye out for, and they clearly know it.

 

 

reddit screenReddit, for those who aren’t aware, is a niche site, but has a huge audience and a very unique culture. Their homepage, or front page as they call it, is filled with white, blue, and a touch of black, suggesting they’re pure, a place for friends, but also exclusive. Those familiar with the site would likely attest to how accurate that is of the culture.

Putting the mind to use in creating the best site possible for your clients is important. While finding colors that look good together is obviously important, knowing what those colors suggest to the browser can help you go one step further in providing a quality site to the client that will work in ways they never imagined possible.

What are your thoughts about using different colors when you build a site?