A guide to showing off our work to the world.

Case Study Production

Getting Started

Before doing anything, please download our Case Study Starter Kit which includes a PSD template, animated logo templates, and a Featured Image template.

Name Your Project File

Duplicate the PSD template you found in the Case Study Starter Kit and give it an appropriate name using the following format:

M&A-CaseStudy-[Project].psd

Create a working folder

Make a folder in our Case Studies Directory on Dropbox and give your folder a unique name. This is where all of your working files will live for the remainder of your case study project.

Make a plan for exporting images

Exporting images for case studies can be time consuming work, especially when you have multiple galleries, product images, and device screens to produce. To save time, our template for creating case study assets uses a feature in Adobe Photoshop called “Generate Image Assets”. This allows you to create export files as you go through a really simple trick.

All you need to do to take advantage of this feature is to name your images or image groups as if they were files. For example, if you want to export your isolated product image at the top of your page, including all adjustments you’ve made to it, all you need to do is group the layers you want exported as an asset, and name them something like “brand-product-lineup.jpg” and Photoshop will generate an asset from these layers. Any time you make an update to these layers photoshop will save a new version of the asset in the background.

File Naming

While its tempting to name files with numbers to keep them in order, it’s important for your file names to be descriptive of the content of the image they belong to. The file name structure we like to use for our case studies is the following:

brand-product-descriptor.jpg

Filling out the template

In most cases, if you are using the “Generate Image Assets”  feature, placing images in the .PSD will consist of masking them to preset image masks. As you go through be sure that you are clipping your images down to the prescribed mask area so that they export at the proper size. This is the case for the hero image of each case study, as well as all gallery images.

Creating a product lineup image

When creating a product lineup image, be sure to include a solid background color in your image export to make the drop shadows on the image export smoothly. Product lineups should be no taller than 1000px tall including background.

Make sure that the total width of your image is kept to a minimum in order to allow the image to scale well for mobile devices, too wide of a background on your image will make the product look small when viewing your case study on a phone or tablet. Be sure when sizing your background image to include all of your drop shadow as to not make it appear cut off in the final export.

Creating an image gallery

To Create image galleries, place your desired photos in your template and clip them to the appropriate masks, make sure to give each image a unique name in order to have them export correctly.

Preparing Logos for Animation

When saving SVG logos, be sure to use these settings when creating your image:

Using this layer organization to make the logo animations to render correctly:

Other Image Placements

Images like iOS device screens, desktop webpage images, brand mockups, and brand logos are all based on smart objects that should be updated and saved separately from the “generate image assets” workflow. In some cases web and device images are for placement only as they represent a single frame of a video hosted on our Vimeo account.

Before proceeding further in the steps outlined below, make sure that your final approved case study design has final copy.

 

WordPress Workflow

Prepare your assets

In most cases, image optimization can be done by visiting http://tinypng.com/ and dragging your files from your project into the web app. In cases where you need to optimize images that have smooth gradients, drop shadows, or transparent backgrounds, tinypng is not a suitable option because of how aggressive its compression method is. For more information on how to optimize images for the web, read our image optimization tutorial.

Recommended Image Sizes

For most images on our case studies, you will be able to upload images with a size limit of  800kb. The only exceptions to this rule are for especially large images that require a larger file size, these should not exceed 1mb in file size.

No image placed in your case study should exceed 2880px wide.

Log in to wordpress

Once your images are compressed, it’s time to upload them to WordPress. Go to makersandallies.com/wp-admin and enter your login credentials to get started.

Navigate to Media Library

WordPress keeps all images for a site organized in a centralized media library, before uploading your images, make sure to make a folder with the name of your project to keep all of your images in.

Before proceeding any further, make sure to perform a visual check of all of your images before uploading them.

Set Up Your Project

Case studies can be added by navigating to the Projects tab in wordpress and clicking “add new project”

Before doing anything else, name your project in the text field at the top of the page.

Next select which categories are relevant to your project.

Add a feature image

Add a feature image from your media library folder, this image is what will appear on the makers and allies “Work” page when the project is published. It will also serve as your hero image unless you choose to upload a separate hero image to your case study.

It will also serve as your hero image unless you choose to upload a separate hero image to your case study.

Fill out Overview

Before being able to save a draft of your project, you will need to fill out the case study overview page. Navigate to the “Overview” tab and fill out this information, if you don’t have copy yet or are unsure, use a placeholder set of copy before publishing, make sure to have real copy before pushing your project live.

After filling out this section, Save a draft of your project

Layout Blocks & Spacing

The rest of your case studies will use one of the many “Layout Blocks” developed specifically for M&A case studies. To add a block just click the “Add Layout Block” button in the “Project/Case Study Blocks” modal.

Layout blocks are named to be easy to identify and have different uses depending on the layout of your mockup.

Maintaining consistent spacing is important to the pacing of your project, follow this guide on choosing spacing and container sizes for each layout block to give a consistent look to your case studies.

 

The following is a quick guide to layout blocks that you will use in your case study designs:

Text Block

Text blocks are used to introduce which service each section of your design pertains to. They consist of a subtitle, title, and a text blurb. Text blocks are used for case studies with two or more services listed and can contain a text blurb in certain cases. There are four pairings of title and subtitle that you will use to introduce each service that we offer to our clients:

Subtitle Title
Branding Strategy & Identity
Packaging Product Design
Packaging Brand Assets
Digital Website Design
Digital Photo & Video
Activation Social Media
Activation Advertising & Campaigns

 

RECOMMENDED SETTINGS

  • Activate read more on description
  • Spacing: Top

 

 


 

Horizontal Scroll Block

The primary use for the Horizontal Scroll Block is when showcasing our Branding capabilities. This section shows the full branding slide showcase from your exported template by moving it horizontally from left to right.

RECOMMENDED SETTINGS

  • Spacing None [Bottom if no logos]
  • Position: 40

 

 


 

Brand/Logo Grid

Logo Grids use the magic of SVG animation to bring our logo work to life. To use this layout block you will need to have specially formatted SVG files as outlined above. Be sure to select appropriate colors for each component of your logo grid in order to make the work really stand out.

RECOMMENDED SETTINGS

  • Spacing: Custom: Top [0] Bottom [20]

 

 


 

Single Image Block

Single Image Blocks are a versatile Layout block that can either be a single photograph, or a brand asset that appears on a solid background color. They can conform to a specific size within your overall design or be flexible based on the size of the browser window, depending on the settings you choose.

RECOMMENDED SETTINGS – PRODUCT OR STUDIO IMAGES

  • Spacing: None
  • Container: Depends on asset [fit in view port]
  • Container Size: Depends on asset [fit in view port]

RECOMMENDED SETTINGS – BRAND ASSETS

  • Spacing: Both
  • Container: Depends on asset [fit in view port]
  • Container Size: Depends on asset [fit in view port]

 

 


 

Single Video Block

Single Video Blocks function like the Single Image Block but plays a looped mp4 without sound.

RECOMMENDED SETTINGS

  • Spacing: Custom
  • Custom spacing bottom: 10
  • Container: On
  • Container Size: custom

 

 


 

Gallery Block

This layout block lets you show off a tiled gallery for viewers to scroll through. Images in this gallery can either be full width or set next to one another. The way this works is by setting the width of each image in the gallery and letting the browser do the rest of the work. Images adding up to 100 will fill a row of the gallery completely, so if you have an image that uses a width of 70, you will need an image with a width of 30 to accompany it. A typical gallery will have the following rhythm or something similar.

100-70-30-30-70-100

RECOMMENDED SETTINGS – FULL WIDTH

  • Spacing: None
  • Container: Off

RECOMMENDED SETTINGS – FULL WIDTH

  • Spacing: None
  • Container: On

 

 


Browser Video Block

This Layout block lets us show a static image or animated tour of a website design in the context of a desktop browser window. Link in your website animation from Vimeo and choose a window color that best suits your design.

RECOMMENDED SETTINGS

  • Spacing: Both
  • Container: On
  • Container Size: Large

 

 


 

Devices Group Block

Devices can be used to show off our website designs and activation work in tablet and mobile devices, and can either show off static images or videos. There is a range of device colors, orientations, and layouts that can be achieved with this layout block.

RECOMMENDED SETTINGS [iPad]

  • Spacing: Bottom
  • Container: On
  • Container Size: XL
  • Alignment: Center

RECOMMENDED SETTINGS [iPhone]

  • Spacing: Bottom
  • Container: On
  • Container Size: Large
  • Alignment: Staggered

 

 


 

Slider Block

This block should be used when a minimum of 3 photos are being showcased in a rotating gallery. Simply place the images in the layout block in the order you want them to appear in the gallery.

RECOMMENDED SETTINGS

  • Spacing: Custom: Top [10] Bottom [5]
  • Arrow Color: Contrast with background color

 

 


 

Video Modal Block

This layout block features a looping video that has a play button. When the button is clicked a modal will launch and play a linked video of your choosing. If the video that appears in the modal contains text of any kind be sure to have a different looping video without text to take its place in the layout block.

RECOMMENDED SETTINGS

  • Spacing: Custom: Top [10] Bottom [5]

 

 

 


 

Putting it out there

Before proceeding further make sure that you have manager approval to publish your case study.

When you’ve got your case study ready for the world to see, its time to publish your work. The first step to doing this is to hit the “Publish” button in the Publish module on the top right of the WordPress UI

After doing this, you will need to navigate to the “Work” Page in the Pages tab of the WordPress UI. After arriving on this page, navigate to the “Case Studies” tab, and find your project in the lefthand column of this modal.

Once you’ve done this, click your projects name and it will be added to the published work on the “Work” page of the makers and allies website. The page will automatically be sorted to the bottom of the list of work we showcase on the site, so if you want to edit this order scroll down to the bottom of the righthand column and click and drag your project to the desired spot in the list. You should only move a project higher up the list if it is considered a featured project. Once this is complete, you’re ready to update the Work page for public viewing. Click the “Update” button and then check to see that your work is appearing at makersandallies.com/work

Last Updated: Oct 12, 2021 by Brooke Mattingley