How to Use Mockup Everything

Mockup Your Designs!

Back in September of 2012, Go Media launched the site called Mockup Everything. We have received some great feedback on the site and a slew of great template suggestions.

How Do I Use the Site?

Now some of you have asked, “How do I use the site?” So in order to answer that question, we have created this post to give you step-by-step instructions so that next time you log into Mockup Everything, you will breeze through the mocking up process! Also don’t forget to check out our “support” page to get answers to our most frequently asked questions.

Step 1:

Go to the Mockup Everything website.

Mockup Everything

Step 2:

Click on the purple button called “select a template” (it is on the far left of the screen).

Click on the button called "select a template"

Step 3:

Select a category from the drop down after you have clicked the purple button called “select a template.”

Select a category from the drop down

Step 4:

Once you have selected your category, click on a product inside that category.

***(please note that products are either flat or perspective with perspective meaning that the object is angled or curved)***

Select a product in that category

Step 5:

Once you have selected which product you would like to see your designs mocked up on, you will see a blue highlighted area.

That highlighted area is where you will upload your image file from your computer.

Click highlighted area

Step 6:

Click on the blue highlighted area or mask to upload an image file from your computer.

Click on highlighted area to add your own image file

Step 7:

For a flat product like the laptop, your image file will drop into the blue highlighted area or mask automatically.

***(go to Step 10 if you chose a perspective product)***

Adding images to a flat product

Step 8:

Once you have chosen your image file to add to the highlighted area, you will want to position your image file within the highlighted area or mask.

Position your image file within the highlighted area

Step 9:

If you do not like the image file you just uploaded to the blue highlighted area, click the image file and then click the “delete” button on your keyboard.

How to delete an image file you uploaded

Step 10:

For a perspective product like the angled ipad, once you have clicked on the blue highlighted area to upload your image file, a dialog box will pop-up where you can position, enlarge or shrink the image file you are adding to the highlighted area or mask.

Once you have positioned and sized the image file you have uploaded and are ready to add it to the highlighted area or mask, click on the green “save” button in the dialog box.

If you do not like the image file you have uploaded then click on the purple button called “upload new art” to upload a new image file to see mocked up on the product you have chosen.

***(please note that once you have pressed the green “save” button and aren’t happy with the positioning or size, just click on the image file you just added and the dialog box will pop back up so you can modify or change)***

Adding images to a perspective product

 Step 11:

If you would like, you can change the background color.

Click on the purple box with a smaller white box in the middle of it (the farthest button to the right from the “select a template” button).

When you click on the purple box a color-picker will drop down and you can choose which color you would like to change your background color to. Click the color you would like to change the background color to.

***(please note that for many of the outdoor templates you will not be able to change the background color)***

Choose a background color

Step 12:

If you are looking for more color options than what is shown when you click on the “background color-picker” button, click on the “multicolored circle” button that is in the upper right corner of the “background color-picker” drop down box.

You can also input RGB color values as well as change the hue, saturation, and luminosity for more color customization options.

More color options with the multi-colored circle buttonMulti-Colored Circle Dialog Box

Step 13:

You can also change the color of the product by clicking on the white box with a smaller purple box in the middle of it (the button directly to the right of the “select a template” button and just to the left of the “background color-picker” button).

When you click on the white box a color-picker will drop down and you can choose which color you would like to change the color of the product to.

***(please note that the color will change in the blue highlighted area only)***

Click to change the color of the product

Step 14:

If you are looking for more color options than what is shown when you click on the “background color-picker” button, click on the “multicolored circle” button that is in the upper right corner of the “background color-picker” drop down box.

You can also input RGB color values as well as change the hue, saturation, and luminosity for more color customization options.

More color options with the multi-colored circle buttonMulti-Colored Circle Dialog Box

Step 15:

Once you have chosen your background and product color and have your image placed in the right location within the highlighted area, it is now time to save out your work.

Once you are ready to save the final image, click on the button called “save image” (the green button on the far right).

Click to save jpeg image file

Step 16:

After you click the green “save image” button, there will be a pop-up that asks whether you would like to “crop” the final image file or to “continue.”

Click "crop" or "continue"

Step 17:

If you click on the “crop” button, your cursor will change to a crop tool and you can select the area you would like to crop.

Use your cursor to select the area you would like to include in your final saved image.

Once you have highlighted the area with the crop tool, press the “save image” button again, and a dialog box will pop up, prompting you to choose a location to save your jpeg image file.

Then click “save” in the dialog box to save your jpeg image.

If you choose "crop" after you press "save image"

Step 18:

If you click on the “continue” button, a dialog box will pop up, prompting you to choose a location to save your jpeg image file.

Then click “save” in the dialog box to save your jpeg image.

***(please note that you will only be able to save out a jpeg image, not a PSD file and that Pro Users will get a higher resolution jpeg image at 1000×563 pixels and Free Users will get a lower resolution jpeg image at 540×305 pixels)***

Save your final jpeg image to the appropriate folder

There you have it! You have now seen how to successfully mockup your designs on one of our many templates within Mockup Everything!

Other Questions You May Have

In case there are things that weren’t covered in this how-to tutorial, please read the questions and answers below for further clarification.

When I save my image do I get a PSD file?

When you click on the “save image” button, you will be prompted to save out a jpeg, to use as you wish. If you are a Free User you will get a 540×305 pixel jpeg and for Pro Users you will get a 1000×563 pixel jpeg. If you would like more control over the actual templates, we suggest checking out our online store called The Arsenal, where you can buy the Photoshop (PSD) files for individual templates.

Can I try Mockup Everything for Free?

Why of course you can!

  1. All you have to do is click on the button called “select template.”
  2. Then choose which template you would like to see your designs mocked up on.
  3. Click on the highlighted area to add your image to the canvas.
  4. Change the background and product color if you wish.
  5. Once you are finished click the “save image” button.
  6. After that a dialog box will pop up for you to chose to either save out a: higher resolution jpeg image file (1000×563) which means you would have to sign up for the FREE 7-day Pro Version trial or save out a lower resolution jpeg image file (540×305) for FREE!

How to use Mockup Everything for free

How do I upgrade to the Pro version?

Upgrading is easy, especially from the homepage. You’ll see a Go Pro link in two places up top, there’s a banner on the right and Sign Up gives you the same opportunity to enjoy a 7 day free trial! Upgrading to Pro requires a PayPal subscription. The fee is charged monthly, securely through PayPal. Cancel any time!

How to go Pro

If you’re already a member, you can upgrade to pro any time! Once you’re logged in, go over to My Account and you’ll see an Upgrade to Pro link. It will take you over to PayPal to process the subscription.

How to upgrade

How do I cancel my Pro subscription?

Downgrading back to the Free version is easy! Be sure you’re logged in.

How cancel Pro subscription - part 1

Next, click on My Account where you’ll see Account Info in the right column. Click the Cancel Pro link.

How to cancel Pro subscription - part 2

You’ll be taken to your PayPal account. Scroll to the bottom of the page and you’ll see the Cancel Subscription button at the bottom.

That’s it! Your account will be automatically downgraded after you end your subscription. You can upgrade again at any time.

When I click on an image in the Template Library, why doesn’t take me to the template I’ve chosen?

I know this has been confusing for some of our users. The Template Library just shows you image files of the variety of templates we offer (if you are a Pro User you will have access to every template in our library; however if you are a Free User, you would only have access to the following templates: ipad-angled, men’s crew neck shirt flat-front, men’s distressed shirt ghosted-front, women’s crew neck shirt ghosted-front, women’s distressed shirt flat-front, poster with hands, and the magazine cover).

So when you click on one of the template images in the library, it will not take you to the actual template.Our mockup system was built in Flash so we don’t have the ability to link the image files to the actual templates. We apologize for this issue and know that it is not the most ideal user experience, but we have noted the issue and will keep that in mind for future improvements.

Advantages of Becoming a Pro User

Have you been asking yourself, “Why should I upgrade to the Pro Version of Mockup Everything?” Well, here are the reasons why the Pro Version rocks!

  • You will have access to every template we have in our template library.
  • Each month we will be adding a minimum of 5 templates and you will have immediate access once they are published.
  • Save 1000×563 JPEG images, versus 540×305 in the free version.
  • Your saved image won’t have the Mockup Everything watermark.
  • Advertisements will be blocked.
  • It’s only $12 per/month (you know you spend more than that per week on coffee).
  • Priority access to Customer Support.
  • Priority consideration for template requests.

No hard feelings if you aren’t ready for the supped up Pro Version, you are always welcome to use Mockup Everything as a Free User.

How to Contact Us

If you have any template requests, suggestions or improvements, please don’t hesitate to send them our way. You can get in touch with us either through the Mockup Everything contact form or through our Get Satisfaction Community page where you can share your experiences with the product and send us improvements and suggestions. All you have to do is click on the “feedback” tab in Mockup Everything. We welcome any and all critiques, praise and comments on how to improve the product for users like you.

How to access get satisfaction community page

You can also stay up-to-date on additions to the template library through the Go Media Facebook page and posts on the GoMediaZine. You can also sign up for our free newsletter to get notifications of template releases and other happenings in the Mockup Everything world. You can also email us at [email protected] to chat with us directly.

Everything You Need to Know About Dealing with Difficult Clients

Whether you are a freelancer or run your own company, we have all dealt with difficult customers. It can be an arduous undertaking to deal with the idiosyncrasies of different clients, but it is a must for any business owner or designer to properly handle difficult customer interactions. The consequence of handling a customer incorrectly will not only cost you money but will also create the possibility of bad word-of-mouth, which can affect future sales and money in your pocket.

If you don’t believe us, just check out our post about the book “Thank You Economy“. The in-depth review tells you about the importance of guiding your clients through the design process and ensuring that their needs are met from the beginning to the end. Brushing off a clients’ issue could lead to a nasty review on a social media site like Facebook or Twitter, which could in turn could deter future clients from contacting you for design services.

Handling Difficult Clients

When you don’t know where to begin, it is best to start with the experts and we don’t believe there is any industry that deals with more difficult customers than the airline industry. Go Media recently had the opportunity to speak with a manager at a major US airline who deals daily with difficult customers and knows the do’s and don’t’s of how to handle them. There is also advice on how to correctly tackle a demanding client interaction and the best way to resolve the issue so the person walks away with a smile on their face.

Read below for the Q & A:

GoMediaZine: 

How often do you deal with a difficult clients/customers?

Airline Manager:

In my current position, I deal personally with probably one difficult customer/passenger per day. As a department, the Passenger Service group handles a few dozen during the course of a day, I would estimate. These are people for whom something has gone terribly wrong in the course of their travels and who are looking for some sort of resolution. They are looking for it now, and they are looking for it loudly.

GoMediaZine: 

What is the best way to handle a difficult client/customer in a face-to-face interaction?

Airline Manager:

While this is certainly something that varies by industry, I would say that there are a number of effective strategies that are more or less universal. In general, the calmer you are able to remain, the more rapidly you will see your customer bring the tone of the interaction down. You can only yell at someone for so long before you realize that he or she is not yelling back and you change your behavior, if for no other reason than out of embarrassment.  In an airport environment, and in particular in a hub station with the high volume of connecting traffic and increased probability that you will experience some sort of service disruption, this is even more critical. When you get a sandwich you don’t like or your movie freezes or your bed is not made-up to your liking, you are upset and looking for someone to remedy the situation. However, when you are stranded in a foreign city, missing family or friends or important business or a cruise, you tend to go a little insane pretty quickly.

Once you have established that you will not elevate your tone to match that of the irate customer, you need to do a few more things. You have to listen to the problem and try to see it through the eyes of the customer. He or she will tell you everything you need to know. The actual incident is never at the root of the behavior. The more you are able to convey your empathy for the situation the customer is in – “I was late coming in from New York and I missed the connecting flight to San Francisco, where my sister is getting married tomorrow morning.” – the greater the trust that will develop between you and the customer. More than anything, customers want someone from your company to understand the unfortunate circumstances they have been left in. They want to vent, they want to feel that you have understood and cared about their predicament, and they want a genuine apology. Lastly, they want a solution. They want to see you try to find a fix for their problems, and even if the result is not ideal, they will be brought back to a calm state by your efforts and communication. Maintain good eye contact, let them know what you’re doing, and try to deliver a solution that addresses their concerns. It is not always possible to do this, and companies generally employ a Customer Relations department to handle transactions such as refunds or compensation for situations where the employee and the customer were unable to reach an acceptable resolution at the first point of contact.

Difficult Client

GoMediaZine: 

What is the best way to handle a difficult client/customer who has posted disparaging remarks on a social media platform about you or your company?

Airline Manager:

It cannot be overstated the extent to which the social media world has turned the world of customer service on its head. It used to be that you had to be really, really unhappy to actually go home and write a company to express your dissatisfaction. In today’s world, a passenger will post a comment about a service experience while walking down the ramp to board an airplane. The immediacy provides a second of instant release for the customer needing to vent, but this can translate into a week of headaches for the company as they scramble to figure out what went wrong and try to fix it.

Many larger companies now have departments that do nothing other than this exact function – they monitor the internet for content posted about the company or its workers, whether it is positive or negative. My company is no different. We have a Facebook page and a Twitter feed and these are monitored constantly. Passengers post their experiences all the time, and the positive ones are passed along to the stations to share with the employees. The negative posts are generally removed pretty quickly from our sites, and if posted elsewhere efforts are made only to have falsehoods removed from other sites. It is not advisable to engage directly with the complainant in an online forum. If he or she provides a means for making direct contact, this is a better approach. You are able to understand what is at the heart of the issue and to provide resolution, if appropriate, utilizing the same techniques described above.

Difficult Client

GoMediaZine: 

How do you teach your employees how to successfully treat clients/customers especially difficult ones?

Airline Manager:

As I mentioned, the dynamics of a hub airport environment will supply an endless train of spectacularly angry customers as the weather, air traffic, maintenance and any number of other external forces conspire to wreak a unique brand of havoc on the prospect of successful completion of one’s journey. There is no place quite like the airport when it comes to disappointment and rage, and every one of the positions staffed by an airline worker provides a fresh opportunity to send the upset customer happily on his way or to see him led away in handcuffs. I believe there are very few customers that simply cannot be helped, and this is typically because alcohol has been introduced into the equation.

I paint the job of the airline’s Customer Service Agents, Supervisors and Managers as follows: In no industry do you have the opportunity to direct such a massive swing of emotion with so little effort. If you genuinely care about the customers you are interacting with, you have the absolute ability to make someone’s day, every day. Every one of us has seen a lunatic having a nervous breakdown at the airport.  It is loud and messy and tends to be littered with profanity. However, if we can keep this person from escalating to physical violence or making any threats, we can send him away apologizing to us for his behavior and thanking us for taking the time to help. This seems like a fantasy, but it happens every day. You have to like this. You have to find some personal satisfaction in seeing this happen. You can’t take anything personally. People lose their minds with the way they allow themselves to behave in an airport. The ground staff has no security whatsoever beyond their podium and the blind faith that you don’t want to get arrested, so you probably won’t jump across the counter at them. I talk to my employees about this, though, and I try to frame it as an exciting opportunity to make someone’s day. I can discuss it this way because I believe it completely. I find few things more satisfying than taking someone who is screaming and cursing and throwing paper and making a spectacle in the middle of the terminal, settling them down, listening to the problem, talking it through and finding a solution. 100% of the time, I get an apology and a “thank you”, even if they are still upset.

Difficult Client

GoMediaZine: 

When you are dealing with a particularly difficult client/customer, how do you calm your own nerves in order to better deal with the person?

Airline Manager:

I do not take anything personally at all. I am able to absorb the bile they  spew in the course of the rant and I try to remain as level as possible. I focus all of my energy on looking at the person and listening. I do not feel nervous or tense or stressed. I think there is a lot to be said for being able to hear through the insults and cursing and ignore it. If you do not feel defensive, you will not act defensively and you will have a successful interaction.

GoMediaZine:

How do you teach those techniques to employees so that they can successfully interact with these troublesome clients/customers?

Airline Manager:

This is a complicated question. To a large extent, it is difficult to teach people not to be defensive. This is a very natural reaction, and one that is more comfortable, particularly for our younger employees. Your company has to have a genuine commitment to providing excellent service, and this has to be communicated to your employees carefully and thoughtfully. Many companies have annual training programs that review policies and rehash the same tired cliches, such as “It’s not what you say, it’s how you say it.” I submit to you that not a single person who has written one of these generic customer service training curricula has worked in an airport.

There are a couple things you can do:

  • Set clear expectations for your employees as far as service standards. Make sure that they understand the way that the company (and, by extension, you, as their supervisor) expect from every interaction with a customer.  Make it a part of the company dialogue, all the time. If you advertise, use these advertisements to focus on the importance of the service your employees provide. The more publicly you shout this, the more clearly your employees can see that service is a value to your company. They feel a sense of pride. Operational performance metrics are good to discuss in order to involve the employees and illustrate that each of them owns a stake in the success of the company. However, you have to tell the story all the time – through examples both good and bad – of what is expected of them as far as service. Otherwise, they will default to operational success because, if nothing else, that keeps them from being disciplined.
  • Personalize any training or discussion about service. This is true of many industries, but the airlines employ a good number of people that do not travel – whether by choice or otherwise – with any regularity. It is a job. Therefore, it can sometimes be difficult for these employees to truly empathize with the person melting down in front of them, since they just look insane. Use examples in your training, in your discussions. Any training should center around participation. You should conduct role-plays, where each person has a chance to be the customer and the agent. The employees will learn from each other, as well, if you hold group discussion sessions and review complaint letters and swap stories. Everybody, from every background, knows what it feels like to be treated well and to be treated poorly. Work some Mr. Rogers stuff on them. It works.
  • Recognize outstanding service, and do it publicly and loudly. Have programs that recognize great service. Share compliment letters from customers with the employees. Compare it to complaint letter, where a passenger was in the same situation but the employee handled it differently. The thinnest of lines exists between a complaint and a compliment, and there are a few very small actions that can change the whole interaction. Have one-on-one discussions with your employees as often as you can regarding service standards, but especially when they have received a complaint letter. Review the letter with a focus on the customer’s perception, as opposed to the details of the incident. Have the employee come up with a way that something could have been done differently to prevent the letter, even if it would not have provided complete resolution.
Difficult Client

GoMediaZine:

What are some of your tips and tricks to not letting negative interactions with clients/customers unravel your whole day

Airline Manager:

I don’t know. I don’t really have any. These things have never stayed with me on a personal level. The only time a passenger interaction stays with me is when I know that the person is still in the station and I follow them throughout the day to see if they make it out on one of the next flights.

GoMediaZine:

How do you translate these methods (from question above) to your employees?

Airline Manager:

I tell them to step away. Go take a break for a few minutes, let your supervisor handle it for a bit. Some employees take these interactions very much to heart and they are stuck with the feeling long after the passenger has left. I have had passengers say horrible things to my employees. Even after we have sent the customers away, denying them transport on us, the emotional affects of the incident linger. There is no single strategy for making this better, but I think escaping for a few minutes is generally a good place to start.

Difficult Client

GoMediaZine: 

What are some ways you distress after dealing with a particularly difficult client/customer?

Airline Manager:

In many of these situations, the ways that people allow themselves to behave are fairly absurd. While I do not generally become stressed from the interaction, I find it helpful to tell the story and laugh about it once I am back in an office or break room, out of sight of customers. It is a good way to blow off steam, if nothing else.

GoMediaZine:

I think most of us can agree that people in the airline industry have to deal with more difficult customers/clients than people in other industries, so how does the advice you give translate to other industries?

Airline Manager:

I think most of it translates fairly well to other industries. Customer service is pretty standard – it’s just the level of crazy that our customers reach that is pretty unique.

19 Inspiring Designs From Our Friends on Pinterest

Howdy Readers!

Welcome back to the 6th edition of the “Go Media Guest Pinner Gallery Showcase.” If you aren’t a fan of ours on Pinterest click this link to start following what we pin. This showcase features the best pins from our Go Media Guest Pinner Gallery, so these images are the ones that you all found and shared with us. If you would like to be added to the gallery send me an email at [email protected] Happy Pinning!
Follow Me on Pinterest

The Showcase

Source: amicahsmith.com via Adam on Pinterest

Source: media.tumblr.com via DAN on Pinterest

Source: whois3.com via Adam on Pinterest

Source: shahirzag.com via Elise on Pinterest

Source: behance.net via Orpha on Pinterest

Source: ollymoss.com via Maarten on Pinterest

Source: liliribs.com via Elise on Pinterest

Source: liliribs.com via Elise on Pinterest

Source: boingboing.net via DAN on Pinterest

Go Media Podcast – Episode 5: 2012 Year in Review

This edition of the podcast is our 2012 Year in Review. A look back at our successes and failures of the year, what we’ve learned, and what we have in store for 2013.

Listen to the Podcast

[powerpress]

Show Notes:

Sponsor of this Episode

Header images features image files from our new Arsenal product Texture Set 5

This episode is sponsored by Mockup Everything. With Mockup Everything, you can produce high resolution, photo realistic mock ups of your designs. There are 5 new templates released every month. From iPads to billboards to t-shirts: if you have to mockup anything, use Mockup Everything.

Go Media Quick Tip: Put Together A Monthly Report

  • Every month at Go Media, we produce a 1-page document that recaps hours, cash flow and “boos and bravos” for that month.
  • Don’t drive yourself crazy by trying to analyze your data every day.
  • With monthly reports, you can get a good idea of what you’re doing well and what you need to improve on.
  • It’s important to remind yourself of what you’ve accomplished.

What’s Go Media Been Up To This Year?

  • Go Media’s failed attempt at only working with larger companies. It lead to some horrific months, however it lead us to rethink our pricing model and it pushed Bill to go back to school to get some business education.
  • When you’re only trying to hit home runs, you miss the base hits, and those can be crucial when times are tough. We started using some different metrics to decide what type of work to bring in based on how empty our schedule is. If we don’t have any work planned in 2 weeks, then we’ll adjust what our project price minimum is. Be willing to negotiate if your plate is empty.
  • We assigned staff members to be “owners” of our revenue stream properties. For example, Marissa took over Mockup Everything and Liz took over Arsenal. That way, the work isn’t just on one person’s shoulder, and we can treat them more like clients rather than something we worked on when we had some free time.
  • We redesigned the entire Go Media brand. New GoMedia.us, Mockup Everything and Go Media Zine designs were rolled out, and we’re planning on releasing the rest in 2013.
  • The birth of the Go Media Podcast.
  • We moved most of our hosting over to Amazon CDN, which gave us a better, more reliable service for about $600 less a month.
  • We launched “Lorain”, our new WordPress theme. We wanted to be able to provide a better solution for clients looking for a custom theme but without a large budget. Building our own theme also allowed us to ensure that we could fully support it when there are changes in plugins and in WordPress itself.
  • We installed a full gym in the second floor of the building.
  • We lost a few dear staff members. Adam Wagner moved to San Francisco, Adam Law moved to Seattle and Heather Mariano is having a baby later on this year and will be focusing on her photography career.
  • We brought on some new staff members. Bryan Garvin was brought in as front-end developer. Jenny Kelley was brought in to build the new Account Services department. Lauren Prebel was also brought in to help Jenny grow the sales team. Aaron Roberts was brought in as a Junior Designer. Sarah Traxler was brought in as our new project manager.
  • We have some internship opportunities available.
  • Weapons of Mass Creation Fest and On The Map Cleveland were both successes.
  • Networking and “getting out there” is now a priority. Jeff spoke at and coached fellow entrepreneurs at Bad Girl Ventures. Jenny and Bill set up a booth at the COSE Small Business Convention.
  • The release of Bill’s book has been delayed until the middle of 2013.
Bill Beachy excited for the Go Media Podcast.

What’s Upcoming in 2013?

  • New Arsenal site, rebuilt from the ground up. It will also be a marketplace for artists we admire and trust.
  • Improving the gym, and cleaning up the second floor in general.
  • The store front renovation project will continue in the Spring.
  • WMC Fest Benefit Show happening in March at the Beachland Ballroom.
  • We will be launching our in-house design management suite. It’s been available for beta testers, but we’re ready to make it live for everyone. A new Prooflab.us will be launched in early 2013 to support and sell it.
  • WMC Fest 4 will take place at Cleveland Public Theatre in August.
  • On The Map Cleveland 3 will take place in November.

Links

Credits

Hosts: Jeff Finley and Bill Beachy
Producer: Bryan Garvin
Recorded at: Go Media

Sponsorship Opportunities

Interested in sponsoring the Go Media podcast, either episodically or exclusively? Well, hit us up at [email protected] if you are interested in advertising your business.

What Do You Think?

We want to hear what you think about the latest episode of our podcast and what topics you would like to see covered in upcoming episodes. Comment below with your suggestions.

Ready for More?

Keep learning and listening to more Go Media podcasts!

Vintage Typography Tutorial

“Historiaster”

To illustrate the word “Historiaster” with the meaning of the word reflected in the design. The meaning of the word Historiater is a petty or contemptible historian, and my idea is to create a petty (yet respectable) attempt to recreate the vintage type treatments.

Research

As the idea is to make a petty remake of a classic styling of a historic lettering, it’s paramount to remain faithful to the styling of the period. The International Association of Mater Penmen, Engrosser and Teachers of Handwriting (or IAMPETH for short) has a collection of scanned rare books on penmanship and engrossing in their online collection that is free to the public.

One book in particular called The New Zanerian Alphabet has fantastic type specimens within it and we shall use a couple specimens from the book as the starting points for this piece.

Research - New Zanerian Alphabet

Sketch

From those two specimen you can create a rough composition in Photoshop by cutting and pasting each letter together to see whether the combination would work.

I sketched out a rough of the composition to resolve the details and tighten everything. There is some legibility issues with the capital H and the lower case t.

A quick preview to the client and she recommended adopting some of the stylistic approach of the Sanborn Insurance Maps for the background. I quite like the look of this particular design for St. Joseph Missouri.

Historiaster

Sketch

Ok, with references collected, we’re ready to jump on the computer.

Step 1

Open up a New document (⌘+N) on Illustrator and Place (File>Place) the reference image and change that layer setting using the option menu from the layer panel into template. Create another layer and call it “Type Build”, this is where we’ll construct the letters and general storing area for elements that we want to keep but remain hidden.

Place reference

Set layer to template

Open up the ruler bars (⌘+R) and place some guides over the top and bottom of the letters to help us trace the letters.

Set Guides

Step 2

Start with a red rectangle and set the transparency to multiply to trace the letter O and give it a round corners effect through the menu Effect>Stylize>Round Corners and give it a value of 2mm in this case.

*quick tip: You can give similar commands through the Appearance panel Fx option, and you can turn effects on and off here*

Step 2 part 1

Draw a couple of small circles with the Ellipse tool (L) and with the line tool (\) draw a line between the centre of the two circles and set it 1.5 pt, now we roughly have the letter O. Make a copy of this letter by dragging and holding the option+shift key. Expand the line and the rectangle on one of the O’s you’ve just created using the menu Object>Expand and place it over the letter S here and draw a diagonal line using the line tool again to create the letter S and expand these line as well.

*quick tip: set up your keyboard shortcuts so menu commands are just a multi button press away to increase productivity. Expand is a command that I often use so this is assigned a keyboard shortcut*

Step 2 part 2

Step 3

Erase part of the middle line by selecting it and using the Erase tool (shit+E). Tidy up the anchor points between the corresponding diagonal and vertical lines using the direct selection key(A), once you’ve done that select all the white elements and click Unite in the Pathfinder panel then create compound path out of them (⌘+8)

Select both the white and red elements and click minus front on the pathfinder menu to create the basic shape of the S. Copy this across by dragging and holding the option and shift key.

Step 3

Step 4

Select one of the S’s and give it a rounded corner effect Effect>Stylize>Round corners (or through the Appearance panel) and give it a radius value of 1 mm and click ok. Expand this appearance Object>Expand Appearance.

Step 4 part 1

Select the other S that hasn’t had the effect applied to it and with Erase tool (shift+E) erase its middle section by selecting it, holding option and dragging the selection you want to erase. Once you’re done select both S’s and with the Align menu click Horizontal Align Center to put one shape on top of the other. Select them both and click Unite on the Pathfinder panel.

Step 4 part 2

Step 5

With the Pen tool draw up some accents on the tips of the letter S, the best thing about this is that if you add a rectangle on one side and delete the the accent I’ve just made and unite them using the Pathfinder menu I would get a letter a and e by simply reflecting them using the reflect tool (O).

Step 5 part 1

Step 5 part 2

Step 6

Copy another one of those rectangles with the Rounded Corners effect applied to them and place it over the i and expand it’s appearance Object>Expand Appearance in the menu. Using the direct selection tool (A) select all the points on the right hand side and drag it over to the left. Draw a circle right on top of it and you’ve got the letter i.

Note: I have to say at this point that it’s within the designer’s personal preference to add character to each of their letters. Each letter that we’ve drawn here are starting points, if you wish to alter any elements and can justify it then feel free.

Step 6

Step 7

My solution to solve the problem of making the letter t legible is to work within the reference and add elements together. In my research folder I also came across another reference that has a solution that I’m quite happy with.

Step 7 part 1

Draw a rectangle that corresponds with the letter i’s stem and copy that over to the letter t. Trace the ascender and descender of the letter using the Pen tool and combine them with the rectangle that we drew just before.

Step 7 part 2

Grab one of the rounded rectangles and copy it across, make sure that they are touching and combine them using the Pathfinder menu. Draw another rectangle above them and click Minus front on the Pathfinder Menu.

Step 7 part 3

Now rotate that shape and combine all of the elements together. I added some extra points to give it a bit of character, once you’re happy combine everything using the Pathfinder Menu.

Step 7 part 4

Step 8

Copy the stem of the letter i over to trace the letter r, with the Pen tool trace the letter.

Step 8 part 1

Copy the resulting shape (⌘+C) and delete a part of it using the Eraser tool (Shift+E), Offset the remainder shape with 0.5mm value.

Select the result and the stem and subtract the shape using the Minus Front button on the Pathfinder menu, Paste in front (⌘+F) the original shape. Use the eraser tool (shift+E) and delete a point, and combine everything using the Pathfinder Unite option.

Step 8 part 2

Step 9

Combine all the letters to create istoriaster in the Artboard in your desired size, set the kerning here and give them a white fill and a black stroke colour (D). Set the align stroke setting on the outside, the corner settings on round, and the stroke 3pt.

Group everything and give it a flag effect Effects>Warp>Flag with the value on -16. Save your file if you haven’t.

Step 9

Step 10

I wanted to create a more detailed filigree ornament so I printed the reference of the capital H and traced it on an A4 tracing paper with pencil and pens making sure that all the lines joined together. I scanned the sketch at 300 dpi and seeing the result in context I wasn’t too happy with the H because it looked like a lower case h.

Step 10 part 1

Open the drawing in Photoshop and select the white area using the magic wand tool (W) you should be able to select the entire white area all at once. Create a mask layer from the selection, and paint using the the brush tool all the parts that you want to mask with black and in white to reveal.

Step 10 part 2

Click and hold option on the layer mask and create a new colour fill with a grey colour, move the masked sketch layer to the top and set it to multiply. Create another layer and call it shading, option click the fill layer mask and with a soft brush draw the shading using shades of grey and black at 50% opacity.

You should end up with something like this, save the file as a tiff and place it on to your Illustrator file on a new layer called H ornament.

Step 10 part 3

Step 11

Create a new Layer called main H, I used a typeface by Arthur Vanson through Letterhead Fonts called Hindlewood as reference. Create a new calligraphic brush through the Brush the window with the below settings.

Step 11 part 1

Start with loose brush strokes to get the feel of the shape making sure that it fits with Filagree ornament, once you feel confident tidy up the lines or retrace it with a Pen tool as I’ve done here.

Step 11 part 2

Step 12

Select certain points and Copy it (⌘+C) and Paste it in front (⌘+F) and delete the unnecessary points but keep the ones that would flow into the next shape. Reduce the stroke weight on the bottom curls to 0.25 pt to suggest some foreshortening and expand everything Object>Paths>Expand.

Step 12 part 1

After that Simplify the paths to make it manageable through Object>Path>Simplify and tidy up the shapes. Copy the entire Shape (⌘+C), Paste it to Front (⌘+F), Expand Appearance, and Combine it all using the Pathfinder Unite option and give it a black fill. Send it to the back (Shift+⌘+[ ) once you’re done.

Step 12 part 2

Once you’re happy with everything give it the default appearance (D) and change the stroke to .2 pt, give it a custom grey gradient and position it accordingly to suggest the light and shade.

Step 12 part 3

Step 13

With the rectangle tool (M) option click the art board and create a 5x5mm square. Rotate it 90 degrees and copy the shapes using the squares and the line tool create these two patterns. Group them separately to have a long one and a short one. Make copies of these patterns and create an Envelope Mesh (option+⌘+M) with these settings.

Step 13 part 1

Manipulate the Mesh by skewing it using the Free Transform Tool (E), click the middle right handle of the bounding box and then hold both ⌘ and option together. Then use the Direct Selection Tool (A) and the Convert Anchor Point Tool to wrap the patterns around the corresponding individual shapes that make up the capital H.

Step 13 part 2

You can modify the shapes within the Mesh by double clicking it and coming back to the Mesh by clicking the Envelope Mesh Dialog. I made one of the vertical lines thicker in this case to further suggest foreshortening. You can also expand the Mesh altogether (Object>Envelope Distort>Expand) you can then manually adjust the shapes therein.

Step 13 part 3

Once you’re happy with how everything looks, Copy (⌘+C) individual shape that Meshes are wrapped around and Paste it in front (⌘+F) and send it to the front (Shift+⌘+] ). Select the shape above and the Mesh and make a Clipping Mask (⌘+7). Repeat the process to mask all the Meshes and group everything together.

Step 13 part 4Step 13 part 5

Step 14

Hide the H layer and open up the H ornament layer, Copy (⌘+C) that placed document and Paste it in front (⌘F). Click Live Trace and set it with the following settings, click Expand, convert it to compound path (⌘+8), send the result to the back (Shift+⌘+[ ) and fill it with red. You should be able to see a hint of red as shown below.

Step 14 part 1

Step 14 part 2

Step 15

Open up the H main layer again and extract the black filled H that we sent to the back a couple of steps back and copy it (⌘+C). Lock the H main layer and select the placed tiff file and create a mask layer through the Transparency panel. Double click the blank area on the right of the preview area and your selection should disappear which is what is supposed to happen.

Draw a white rectangle that should cover the image and your image would reappear. Paste to the front (⌘+F) the black filled H that we copied earlier and create a compound path out of it (⌘+8).

Step 15 part 1

Go back to the H ornament layer by clicking on the left preview window on the Transparency panel, select the vector tracing of the filigree and Copy it (⌘+C) to take to the Clipping Mask.

Head back to the clipping mask and Paste to the front (⌘+F) the filigree vector tracing, send the black filled H to the front (Shift+⌘+] ).

Step 15 part 2

Select both the H and the Filigree shape and click Divide on the Pathfinder Panel which will cut the shapes into sections. Ungroup the result and select the sections you wish to reveal by deleting them. After you’re happy with everything change the results the fill to black. You should have the following result where the vine seems like it’s curling through the H, once you’re happy hide the ornament layer.

Step 15 part 3

Step 16

Create another layer called “Drop Shadow” Copy the silhouette of the H and the istoriaster text into this layer using the (⌘+C and ⌘+F) commands so it is placed directly where it is on the other layers and re lock their respective layers. Expand the appearance of the istoriaster and combine everything using the Pathfinder panel’s unite button .

Step 16 part 1

Select the the entire Historiaster text and duplicate it using the Transform dialog (Shift+⌘+M), enter the following values and click copy.

Step 16 part 2

Select both shapes and create a blend (⌘+option+B), with the blend tool (W) hold option and click the blend image to bring up the blend dialog or go through Object>Blend>Blend Options and enter the following. Go to the menu command Object>Blend>Expand then use the Unite command through the Pathfinder panel.

Step 16 part 3

Step 16 part 4

Step 17

Let’s clean up this vector shape as there should be ragged edges. With the Lasso tool (Q) select the unnecessary points and then remove the points with the menu command Object>Path>Remove Anchor Points.

Step 17 part 1

*quick tip: set a keyboard shortcut for the Remove Anchor Points command. I’ve got (⌘+Shift+option+0) on my computer, you can set it to your own preference*

Step 17 part 2

These are the areas that you want to concentrate on, once you’re happy with the result turn on H main layer and the istoriaster layer to see whether you’re happy with the result.

Step 17 part 3

Step 18

Draw two horizontal lines on top of the shape we’ve just created and create a blend (⌘+option+B). Use the blend tool (W) to prompt the Blend dialog box again to select specified amount and enter 250.

Step 18 part 1

Prompt the Move dialog box (⌘+shift+M) and enter the following and click copy. Hover the Blend tool over the result to prompt the Blend Setting Dialog and reduce the amount to 200. Repeat the steps and set the blend amount to 150.

Step 18 part 2Step 18 part 3

Step 19

Turn on the H main layer again and select the H silhouette shape in the back and give it a white stroke, a 3 pt stroke width, and Align Stroke to the outside.

Step 19 part 1

Turn on the H ornament again to grab the filigree silhouette shape. Keep it selected and drag it to the Drop Shadow Layer on the Layer Panel. Fill it white and add a white stroke with a 2 pt Stroke Width and set the Align Stroke to Outside.

Step 19 part 2

Step 20

Create a new Layer called “Flourish” and draw a rectangle behind the H. Fill the Rectangle in red and give it a Round Corners Effect (Effect>Stylize>Round Corners) give it a 50 mm radius. Keep the rounded rectangle selected, right click>Transform>Scale enter the following values and click copy.

Step 20 part 1

Step 20 part 2

Open up the Brushes Library menu on the Brush Panel by clicking the lower left hand corner and select Borders>Decorative and select the Rectangles 2 brush.

Step 20 part 3

Select the outer rounded rectangle and Expand its appearance, delete right horizontal path and create the following using the Pen tool and draw a circle to create this shape.

Step 20 part 4

Step 20 part 5

Step 21

Select the inner rounded rectangle and prompt the scale dialog box (right click>Transform>scale) to create another rounded rectangle at 94% and click copy. Select both rectangles and create a blend (⌘+option+B) between the two, I’ve put 5 steps on the Blend option dialog. At this point you can manipulate shapes to get the right spacing between them, once you’re happy Expand the appearance so you have the rounded rectangles permanently applied to the shapes. Expand the blend (Object>Blend>Expand) once you’re satisfied with everything.

Step 21 part 1

Expand the outer most rounded rectangle and Expand its appearance. Give it a black stoke and your desired stroke width. Combine the ends using the Pen tool and create the following.

Delete the right horizontal path of the the inner rectangles and create these shapes. Try to correspond with the top shape as uniformly as possible. With the Pen tool and Ellipse tool create these shapes that were referenced from the Sanborn Insurance maps.

Step 21 part 2

Step 22

Create a vertical line using the Linte tool (\) and in the Stroke panel select a width profile 1. Give the line a Zig Zag Effect Effect>Distort & Transform>Zig Zag with the following settings. Draw up this shape using the Spiral tool, Ellipse tool, and the Pen tool. Expand both results and group them together.

Step 22 part 1

Draw a circle below the group and use it as a reference point to rotate 90 degree and copy the drawn objects. Rotate the result another 45 degrees. Create a tear shape by manipulating a circle and rotate it the same way and group everything together and give it a white stroke with the Corner setting set to Round and the Align Stroke setting set to Outside. Place this object on top of the red spiral we just made.

Step 22 part 2

Create accents on the other end of the rounded rectangle shapes as well using the Pen tool, Spiral tool, and the Ellipse tool.

Step 22 part 3

Still in the Flourish layer create a series of objects using the Line tool (\) and the rectangle tool (M), give it a white stroke and group it all together. Place it between the and the Drop shadow layer.

Step 22 part 4

Step 22 part 5

Step 23

Turn on the istoriaster layer and select the text. Open up the Offset Path dialog box Object>Path>Offset Path and enter the following settings. Cut (⌘+X) and Paste in front (⌘+F) the result and create a Compound Path (⌘+8).

Step 23 part 1

Give it a linear Gradient Fill and adjust it accordingly using the Gradient Tool (G). Once you’re happy with the result give it a Grain effect (Effect>Texture>Grain) with the following settings and set the Transparency setting to Multiply.

Step 23 part 2

Give the same effect to the gradient fills on the H main Layer.

Step 23 part 3

Step 23 part 4

Step 24

Go to the Flourish layer and draw a horizontal line and use the rotate tool by holding option clicking the lowest anchor point. Give it a 6 degree value and click copy, repeat this until you get the following and group it together (⌘+G).

Step 24 part 1

Use the rotate tool (R) again and give it a 3 degree rotation and click copy. Use the Scale tool (S) and give it the following value. Select the lowest line using the Direct selection tool and delete it. Group (G) everything together. Compose this flare around the composition.

Step 24 part 2

Step 24 part 3

Step 24 part 4

Step 24 part 5

Step 25

Create a new layer called Background or Bg in my case, draw a couple of vertical lines at 1 pt weight and create a blend between them. Prompt the Blend dialog box using the Blend tool (W) I’ve got 400 at this moment, but I later changed it to 600.

Keep the resulting Blend selected and bring up the Transparency panel to create the Clipping Mask by clicking that empty area again.

Step 25 part 1

Step 26

Access your Brush Library Menu and open up Elegant Curls and Floral Brushes Panel. Drag that flare shaped Scatter brush icon on to the working area, delete the bounding box around it and give it a white fill. It should also have lines within it, select it using your Direct Selection Tool (A) and give it a white stroke.

Step 26 part 1

Select the unnecessary Elements of this shape and place the remainder behind the flares we’ve made earlier.

Step 26 part 2

With the Brushes available from the Brush Libraries we’ve just opened draw around the letters, flourishes, and drop shadows.

Step 26 part 3

Step 27

I use a font called Penman Birds and Ornament by Intellecta Design. I grabbed a couple of selected glyphs Expanded it, Ungroup (⌘+shift+G) and give it a white fill and a black stroke at 4 pt width and Align Stroke Outside.

Step 27 part 1

Compose it around the layer and ended up with something like the following.

Step 27 part 2

Step 28

Grab a copy of one of the flares and rotate it. Create the following shape using the Pen tool to mask the flare. Before Masking it use the Direct Selection Tool (A) to select and copy it (⌘+C).

Step 28 part 1

Select the flare and masking shape to create a mask (⌘+7) paste the path (⌘+V) and give it a width profile 1. Add some more lines for character with the same width profile to get the following result.

Step 28 part 2

Step 29

Create a new layer and call it texture to place a paper image. You can download it here. Set the transparency of the image to Multiply. Create a rectangle on top of the Placed image and give it a circular Gradient fill and set it to multiply to create a soft Vignette.

Step 29 part 1

Step 29 part 2

Step 30

I gave the filigree ornament the same grain effect as the H and the istoriaster offset path. On top of that I added a drop shadow on the filigree, this left to the last minute to keep from having illustrator to render it every time you switch between layers.

Step 30 part 1

I also made a little mark for this fine fine zine. Good luck with it.Step 30 part 2

35 Striking Vintage Designs

Vintage Design

There has been a growing trend of vintage inspired designs. From packaging to typography, from posters to web designs, the vintage look is pervasive in the graphic design field right now. This is a showcase of the best vintage designs we could find on the web! Some are from yesteryear and others are inspired by those retro designs. You will see everything from packaging, to posters, to book covers, so checkout the showcase below for inspiration for your next design project.

The Showcase

Source: mr-cup.com via Go on Pinterest

Source: typeverything.com via Go on Pinterest

Source: bookpatrol.net via Go on Pinterest

Source: vintagemeohmy.com via Go on Pinterest

Source: vintagemeohmy.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: thedieline.com via Go on Pinterest

Source: thedieline.com via Go on Pinterest

Source: typedeck.com via Go on Pinterest

Source: vintag.es via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: flickr.com via Go on Pinterest

Source: vintageimages.org via Go on Pinterest

Flickr Pool Showcase – January 2013

Interested in Joining

If you are new to the Flickr Pool Showcase, check out the instructions below for how to sign up.

  1. Login to your Flickr Account (sign up if you don’t have one)
  2. Join the Go Media User Showcase Group (only group members can contribute)
  3. Upload your designs to your own profile
  4. Click on your newly uploaded designs then click the button “send to group” above your image and choose the Go Media group.

The January Showcase

Hello Cleveland Postcard 1
RLL: Urf Rider Corki
Beauty Specialists
When it rains,it Storms.
Calendar 2013 - January
Professor Moriarty
Black Swan by Daniel Norris - @DanKNorris on Twitter.
2013
Life of Pi by Daniel Norris - @DanKNorris on Twitter.
Rework ~///BLAÇK◊INDIÅ...
Wild Orchid
The Plan
Trapped @geeklangel
Geometric versions
Untitled
L' esprit de L' escalier, 1963 ―Vector Hugo
Murphy
Electrify Them
Glowing
Brooklyn II
Rock And Roll
Welcome To the Team
Sator Square
Wyoming
Stheart - Death