The Blog

2016 Electoral Map Coloring Page

Election results are coming! Election results are coming! I didn’t like any of the blank electoral coloring pages I found, so I made my own. Download a PDF here.

electoral-map-2016

Introducing the make something awful every day sticker pack for iOS 10

msaed-sticker-pack
msaed-poppers

Do your iMessage conversations lack bad internet art? That no longer needs to be the case with the brand-spanking-new make something awful every day sticker app. Get it in the App Store today!

Celebrate National Coloring Book Day belatedly with this podcast coloring book!

Did you know yesterday was National Coloring Book Day? Neither did I until 7pm last night! It was good motivation to finish a beta version of this podcast coloring book I’ve been idly working on for awhile.

Featuring some your favorites and mine:

Download a black & white PDF for printing and coloring fast, before this whole adult coloring trend finally collapses in on itself.



How to make any photo work as a 360 photosphere on Facebook

Facebook recently rolled out the ability for anyone to upload a 360 panorama or photosphere that can be clicked through on desktop, viewed with certain VR headsets, or viewed by moving your device around  on mobile. Flickr introduced a similar feature last December when it launched Flickr VR. I’ve been using that to upload 360 panoramic screenshots from ActiveWorlds, so was looking forward to doing the same on Facebook.

basement

Unfortunately I quickly discovered Facebook wasn’t automatically recognizing the screenshots from AW. Some googling revealed that Facebook requires images to have this meta tag to work:

<GPano:ProjectionType>equirectangular</GPano:ProjectionType>

I can view that this is missing from the raw metadata in Photoshop, but Photoshop doesn’t let you directly edit the raw meta data. There are some software tools to do this, but I found a simpler method. By extracting the raw metadata from properly formatted panoramas, I was able to create an XMP template I can now import in Photoshop to make Facebook read any photo as a 360 photosphere.

How to add missing equirectangular photosphere metadata in Photoshop (CC 2015)

  1. Download the XMP template with required projection meta tag and unzip it.
  2. Open the photo you wish to make into a panorama in Photoshop. 6000 x 3000 pixel images work well (this is what AW produces)
  3. Go to File > File Info and select the Raw Data tabmeta-rawdata
  4. Click “Template” and choose “Import…”
  5. Navigate to where you saved the XMP file in step 1 and click “Open.” In the dialog that opens, choose “Keep original metadata, but append matching properties from template”
    meta-append
  6. The new metadata with the equirectangular tag should now be added.
    meta-withdata
  7. Click OK. You can now save the photo and upload it to Facebook. If everything worked, your post dialog will say “Say something about this 360 photo…” and a globe icon will appear on the thumbnail.
    Screen Shot 2016-06-19 at 5.56.42 PM
  8. Congrats! You’ve now manually created a 360 photo.

As a sidenote, if you’re interested in capturing 360 photos in the real world, new versions of the Android camera app have the feature built in. If you’re on iOS, you can download Google’s Street View app, which has a 360 capture mode. Street View has supported uploading photospheres for a few years now.

If you’re looking for a simple app for uploading and viewing photospheres using a headset like Google Cardboard, I recommend Round.me.

Update: 08/14/16

If you’re having trouble getting iOS panoramas to upload as photospheres to Facebook, I’ve found Facebook often requires the panorama to be the full width, meaning you can’t stop early. If you have a differently sized image, you can try working from an image template instead.

  1. Download this image.
  2. Copy the image you’re trying to get to work as a panorama into a new layer in this document.
  3. Save the image as a jpg.

Update: 09/21/16

I’ve uploaded a basic template for full 360 photospheres. Add your images on top, keep the document the same size, and save as JPG, making sure to retain metadata.

Facebook’s published some extensive documentation for editing 360 photos and injecting metadata, but I think my solutions’s simpler. They also have some templates of their own which are useful.

Why I make something awful, every day

I just published my first entry on Medium, detailing some of my thoughts behind the last five years of making something awful.

Why I make something awful, every day

Back Trove: The Crystal Caverns on Kickstarter

My brother-in-law Patrick Leder just launched (and already successfully funded) a new tabletop boardgame Kickstarter. Designed by him and David Somerville with art by Kyle Ferrin, Trove: The Crystal Caverns is the ultimate asymmetric cave-crawling adventure where you become the brave Knight, Goblin horde, massive Dragon, or malevolent Cave. I’ve been helping with design and layout and also put together the Kickstarter video, featuring Kyle’s amazing art.

Check it out! And back, if you’re so inclined.

Exploring off canvas nav menus with Bootstrap

I’ve been stuck in the weeds figuring out navigation patterns for a major project at work, so I thought I’d quickly share some examples I’ve been referencing. The site Adventures in Responsive Navigation has been a godsend, along with the navigation patterns in Brad Frost’s This Is Responsive.

Off Canvas Menu Resources

Off Canvas Examples

Mega Menu Resources

Additional Resources

Some link highlights from this year’s SXSW

I saw lots of great (and some not so great) panels once again this year in Austin at SXSW. These are their stories.

Interactive Long Scroll Features
http://alcalde.texasexes.org/mondaymonday/
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/
http://pitchfork.com/features/cover-story/reader/janelle-monae/
http://pitchfork.com/features/cover-story/reader/savages/

Pitchfork mentioned that working on these interactive features has improved the design of their festival sites and made other projects work better

Prototyping Tools
http://macaw.co
http://www.adobe.com/products/muse.html
https://creative.adobe.com/products/animate
http://www.invisionapp.com
http://www.axure.com/
 
Photoshop Extract
http://www.adobe.com/creativecloud/extract.html
https://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

Hot New Apps
http://meerkatapp.co
http://gawker.com/my-14-hour-search-for-the-end-of-tgi-fridays-endless-ap-1606122925

Style Guides / Style Frameworks
http://trulia.github.io/hologram/
http://styleframework.com
http://styletil.es

Some Session Highlights 
http://amccrim.com/mtglessons/
http://designforpros.com

Weird Internet Art
(It’s recommended you play this with the volume muted while listening to this instead.)

SXSW Keynotes
This year’s aren’t up yet, but they will be eventually and you can watch last year’s here:
http://sxsw.com/interactive/conference/keynotes

Bruce Sterling’s 2013 closing keynote remains a landmark for me:

Recommended permissions setting for WordPress in MAMP PRO

After unsuccessful googling for how to resolve the issue of WordPress asking for FTP credentials on local installations, I finally arrived at a set of working permissions for MAMP Pro in OSX. Screenshots below  are from MAMP Pro v3.0.7.2 on Yosemite OS X 10.10, but the process is still the same in MAMP Pro v4 and in El Capitan 10.11 and macOS Sierra 10.12.

WordPress recommends CHMOD / file permissions of 755 for directories and 644 for files, but what I didn’t know of the top of my head was how that correlates to MAMP’s settings. I figured that out, but WordPress still wasn’t updating correctly. Then, I found this WordPress support thread where people said electronicink’s solution worked for them. Yosemite File Sharing Permissions no longer gives an FTP sharing option. Back to the drawing board! The missing key was who the Owner and Group should be. www! Duh. I’d likely changed it to myself and admin in my failed attempts at manually granting access through Finder’s Get Info feature.

Anyway, here’s the combination that finally worked for me. This dialog is accessed in the Hosts tab of MAMP PRO by clicking the people icon next to the folder icon where you choose “Document root.”

wordpress-mamp-pro-permissions

Adobe releases Creative Cloud 2014 + everything new is new(ly broken) again!

17 updates available for Creative Cloud Yesterday, following Adobe’s announcement of Creative Cloud 2014, I excitedly tried to update 17 apps at once on my work computer.

In my haste, I forgot to first close out of the programs I spend most of my day in: InDesign, Illustrator, Photoshop, and Dreamweaver. And sometimes Fireworks. Poor Fireworks. That, naturally, led to this fellow popping up:

Please close the following applications to continue: Photoshop

I closed Photoshop and all the other programs and tried clicking retry. It. Kept. Popping. Up. Then Creative Cloud crashed. Uh-oh! After relaunching, the Apps tab of Creative Cloud said “Download Error” with a giant triangle exclamation point warning sign with a button I could click to try reloading applications. That button did not work. There was a link telling me to contact support. Since Creative Cloud had just launched, support was down. Joy. After taking twitter, user @phostershop suggested I try the Adobe Cleaner Tool.

I uninstalled Photoshop, After Effects (the app the update process choked on), InDesign, Illustrator and ran the cleaner tool, selecting ALL applications (I wouldn’t recommend this, though it did free up 20 gigabytes of hard drive space… and remove all of my Adobe apps). After several restarts, I was still having no luck. Luckily Adobe Support had returned in the meantime, so I got on chat to talk to a support tech.

The tech had me open the Finder, click on the GO menu > go to folder, and type “~/Library” (my user folder). I then navigated to Application Support/Adobe and renamed ‘AAMUpdater’ and ‘OOBE’ to ‘AAMUpdaterold’ and ‘OOBEold.’

Then in Finder he had me click on the GO menu > go to folder, and type “/Library.” Then I had to navigate to Application Support/Adobe and rename ‘AAMUpdater’ to ‘AAMUpdaterold.’

I then relaunched the Creative Cloud app which unfortunately froze. After restarting my computer for the umpteenth time… success! The Apps tab had returned to functioning. It lists apps I still have installed as able to install. I’m worried if I click the install button my computer will explode, so I am holding off for now.

Cloud_Message

Also, I recently started having an issue where after turning my computer on, Creative Cloud would tell me “administration rights are required to complete Adobe add ons.” A google search lead me to this Adobe Support Community post. After changing the permissions for the folders as directed and restarting the message went away, which is great because now I can use Photoshop again where the TIFF options menu now looks like this for some reason:

Photoshop CC (2014) TiFF Options Menu