Make multiple page proof printing better in InDesign!

— No Comments ↓

A couple tricks I want to share that I’ve recently added into my workflow when I print proofs using InDesign.

So when I design products with two sides like business cards or postcards, I always want to print both sides of the product on one side of paper, should be simple right? Well it is but InDesign doesn’t have a good native way to print multiple pages on a single side of paper without scaling.

Here’s the trick! Create a new document and choose the size of paper you intend to print on. Hotkey: CMD + N

Place the pages from the orignal document (in this case, a double sided business card) on this new document. Hotkey: CMD + D

Screen Shot 2013-02-19 at 12.05.38 PM

Check “Show Import Options” as above.

The below window will display. I choose “All” and “Bounding Box” for this example but if you want to specify pages. Choose Range and if you want to see bleed, do that instead.

Align the inserted pages however you like and Print!

Wait! One more essential step! Notice in the document below that you can’t see the business card’s borders. The white of the card bleeds into the background. Add a .25pt border to each placed item and boom! Now you can see the bounding box! This is really gold since you’re not modifying the original document and chancing accidentally sending it to the printer with a rogue border hanging around! Some may say to set layers to not print but this is a safer way in my opinion.

YAY borders!

This saves me lots of paper and I can layout the sides as I wish when printing proofs. This works for business cards, brochures, signs, etc. As long as you have the paper real estate to handle multiple versions of a document.

InDesign will place almost all types of documents, as well – multi-page or not. PSD, PDF, EPS, JPEG, etc…

Now you can enjoy printing proofs again by not wasting paper, viewing comps side by side, and adding temporary borders safely.

You’re welcome!

Tagged with: adobe indesign, indesign, print design
Posted in Creative

Quickly Do some math in OSX with Spotlight!

— No Comments ↓

How do I use spotlight?

Simply press : CMD + SPACEBAR

Brings up a gloriously blue search box, Oh the things you can do here!

Here’s one thing, DO SOME MATH!!!!

Type away! In this example I used a silly math problem but you get the idea.

Pretty awesome and quick right? You’re welcome!

Posted in Mac OSX

Quick Annotations Explained – Mac OSX & Preview, FTW!

— 1 Comment ↓

I was looking for a quick and dirty solution to annotiate PDFs, images, screenshots, photos, etc and send to clients.

Since I’m a photoshop expert, I usually just fire it up and started making shapes, outlining paths, etc. Although, I use Photoshop like it’s an extension of my person this is still a lengthy process for something so simple.

So now I use Preview!

Preview (wikipedia) to the rescue!

You can find the Preview application in “Launch Pad” or in Finder under “Applications”

Also, use preview in finder by using the spacebar on any unopened document or image, love this trick!!

Thanks, Ali Green for that one!

Preview has some great quick tools!

Below is a quick example of a way to use it, notice the red arrows and chat bubbles? Super quick and easy way to show someone your thoughts or give directions on how to do something. This is a screenshot of my company website Kickstand Creative.

PC folks, I’m sure you have a great way to do this. Feel free to chime in, in the comments below!

Posted in Mac OSX

WordPress Twenty Twelve Image Shadow Removal

— 27 Comments ↓

If you’ve been using or upgraded to the new wordpress theme Twenty Twelve you might have noticed the small shadow that’s automatically added to to ALL images in posts and pages. It’s a nice addition for normal photos but not when the intention is to be seamless. It’s truly subtle on normal photos, so that’s cool, but notice how obvious the shadow appears on the image below.

Let me show you how to remove that pesky box-shadow!

This is made possible by way of a CSS3 property called box-shadow. Add this line of CSS to the style.css file or preferably a child theme of Twenty Twelve.


.entry-content img, img.wp-post-image noshadow{
     box-shadow:none;
}

This way, you can target any image by adding the CSS ‘noshadow‘ class to it as seen below:

End result, no border!

Boom, You’re Welcome!

Posted in Markup

Why does my iDevice skew the color of PDF proofs?

— 1 Comment ↓

Look how OVER-SATURATED and DARK this image is, hurts my eyes! Take it down! So I wanted to send this litte hint out there for those who send clients CMYK proofs. Have you noticed the exported files look skewed on mobile devices?

Many clients (unfortunately) will use their mobile devices to proof your beautiful design. Some of these mobile devices (such as the iPhone and iPad) do not or cannot convert the document into RGB. So the recipient ends up seeing a much different color mix than intended. Notice how over-saturated and dark the colors are. That’s not how it’s suppose to look at all, so much detail has been lost!!!

Here’s the fix, Export for the destination intended!

Sounds logical enough? (This example is using InDesign)

Export as PDF > Output Tab >

Color Conversion: Convert to Destination - What is the receipt’s intent? In this case, they are going to view it. Destination: Document RGB – This is an RGB color profile which will convert the color space to RGB. This is compatible with an RGB display or really the color engine of the PDF application in this case.

Now all is well in the world, at least in the color profiling world!

This quick workflow tip allows clients to view much more accurate colors on their mobile devices and we all want that! Notice how the image (exported as RGB ) contains much more detail and has correct saturations, BOOM!

Bonus: RGB vs. CMYK

This also reduces the file size since you’re only sending three channels of color instead of four, bonus!

Get exporting my friends! Thanks for reading!

Posted in Creative

Software I rely on

— 1 Comment ↓

This is a list of programs I currently rely on as a developer:

Sparrow Mail App
Chrome Browser
- 1Password
- Resolution Test
- Speed Dial 2
Adobe Creative Suite
Skype
Rdio
Things
Sublime Text 2
Github
Soundflower
Jing
Balsamiq
DNS-Crypt
Dropbox
iPhoto
Harvest
Little Ipsum
MAMP
Mint Quick View
Join.me
Mac Office 2012
Cloud.app

Posted in Creative

WordPress & IE Compatibility Mode

— 8 Comments ↓

I think some would call it – job security?

Thanks for that Microsoft!

Microsoft seems to slam a stick into my bicycle spokes once I’m cruising down the hill. You may have found this post by googling “WordPress + compatibility mode” then again, maybe not. Either way.

If your site renders well in IE 8 Standard and IE 9 Standard and you want to remove the compatibility button and forget it ever showed it’s ugly little face.

Place this at the VERY top of header.php:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

ABOVE

<?php

If you are using the Twenty Eleven Theme then the start of the themes header.php file would look exactly like this:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
<!DOCTYPE html>

Also use “!doctype html” so you can start using HTML5.

Please comment below and let me know your thoughts!

Posted in Markup