GuideGuide Post Mortem: What I Learned About Code Signing
December 10, 2012
I’ll start this post off by saying that I do not consider myself a skilled developer. I’m a front-end designer that is stubborn enough to know when things are fixable and believe that I’m skilled enough to fix them.
Some times I’m wrong.
This weekend the vast majority of CS5 and 6 GuideGuide users opened GuideGuide to find a blank panel. When they went to tried to reinstall GuideGuide they were met with an error telling them they could not install GuideGuide because it did not contain a valid signature. Trying to install any old version would do the same.
So what happened?
My code signing certificate expired.
When you publish an extension for Photoshop (or bundle most kinds of code) you go through a process called code signing. The short explanation is that doing so provides GuideGuide’s users with with the confidence that 1. I’m a real human being that has been proven to exist in a place, and 2. That I’m legitsies. Basically, signing my code with a code certificate says I’m not going to hack your computer and if I tried to, there’s an easy paper trail back to me to hold me accountable. It also means you don’t get an annoying “This is an unsigned application” warning when you install GuideGuide.
Last year I purchased a 1 year code signing certificate that expired this weekend. What I didn’t know up until last night is that if you don’t include a timestamp when you sign your code, any applications authored with the certificate will stop functioning when the certificate expires.
What am I doing to prevent this in the future
Now that I have a stable signed version of GuideGuide back online, I’m going to figure out how to timestamp future versions so they don’t fail outright when the certificate expires. Instead, they’ll continue to function as normal.
Seems like a pretty simple thing, but it’s a simple thing I didn’t know existed. Life is all about learning, and I certainly learned something this weekend. I hope all of you are back up and running and GuideGuideing your days away.
Photoshop Pseudo Color Variables
July 9, 2012
I can’t possibly be the only person who has wished Photoshop supported something like color variables. Sadly, it doesn’t. However, for those that aren’t terribly OCD about the organization of their layers, there’s a sort of ghetto work around: Photoshop CS6′s layer clipping masks.
The situation
Take for example this UI. There are a few elements in this comp that I’d like to have appear with a highlight color. My client tends to like to change things. I know that he’ll probably change the color of that highlight, but I’ve convinced him that the highlight color should stay consistent throughout the design.
In a variable-less world, both of the blue shapes as well as the blue text are separate layers and all have separate instances of the same blue color. If the client asks to change that blue to magenta, I’ll have to update all 3 layers. That’s silly.
Enter the pseudo variable
Since we can’t get all of the layers pulling from the same color, let’s get one color pulling it’s shape from all the layers. The trick? Layer clipping masks.
In CS6, Adobe has given us the ability to do the same tricks with layer groups that we’ve been using on layers. All we need to do is use all of our desired layers in a group as a clipping mask for a color fill layer.
1. Get all of your layers into a group and call it something like “mask”.
2. Create a new vector fill layer above your group and make it your desired color.
3. With your color layer selected, from the Layer menu, choose Create Clipping Mask.
4. Group your mask group and your color layer into a new group and give it a good name. Nerd points if you give it a variable sounding name. I’m going to go with “$hightlight.”
5. Celebrate. Now you can change your color variable by just changing your color fill layer.
That’s pretty much it. Of course, it’s not a perfect method. It isn’t a true color variable. It really messes with the orders of your layers. However, if you happen to not be OCD and you really like a quick, easily editable workflow, then this trick will probably save your life.
GuideGuide 2.0.2 and the Future
May 24, 2012
Today I’m making GuideGuide 2.0.2 available. This version has two major updates. New Logic The first is a major overhaul of the internal logic system. The tl;dr is that I rewrote things so that I’m no long relying on Photoshop for things like unit conversion. This fixes a few cases of GuideGuide freezing Photoshop for users trying to use certain grids based on millimeters. Multiple Margins The second and probably more interesting update is the addition of multiple margins. This can be achieved by entering a comma separated list in the margin fields. For example, to add two 20px top margins, enter The guides are created from outside -> in, so whatever measurement you put first will be the first one rendered from the border of the document/selection. The guides are additive, so if you were to do something like Updated site I’ve updated the GuideGuide site with some new sections. Most interesting, the How To section lists all of the things GuideGuide can do, including some of the hidden behaviors. There’s also a new section covering some of the more common installation errors that people have come across. GuideGuide is pretty awesome, but it could be way better. Unfortunately, the things that are way better aren’t possible in CS4. For this reason, 2.0.2 will be the last version of GuideGuide to support CS4. Going forward, the only updates to the CS4 version of GuideGuide will be bug fixes. GuideGuide will still be available for CS4, but it will lack any features added in future versions. Some features I’d like to add in the future: I make no promises as to if an when these features will be added, but they are things I’d like to achieve at some point.
GuideGuide 2.0.2
20px, 20px into the top margin field.
10px,-10px, you’d only get a 10px margin, because the first margin is 10px, but the second subtracts 10px which puts it back at 0. So lets say you want a margin at -10px and 10px. For that you’d need to do -10px, 20px.The Future of GuideGuide
Thinking About Tools
April 25, 2012
A quick Twitter search for “GuideGuide” generally shows two types of feedback: “Holy crap, this is great,” and “I can’t believe this isn’t part of Photoshop already.” A lot of people like to hate on Adobe for being slow to add print/UI design tools to Photoshop, but I feel like this attitude wrongfully places the blame. Photoshop’s true purpose is in it’s name. It is photo manipulation software. It was never intended to be good with type styles, pixel perfect vector manipulation, or grid systems.
When people complain about Photoshop not being a robust tool for design, they’re essentially saying “I’m very frustrated that this tool I’m using beyond it’s scope doesn’t live up to my manufactured expectation.” You wouldn’t use a screwdriver as a hammer and complain that it doesn’t do a good job of hammering nails. So why do it with software?
Rather than complain about our applications not performing functions they were never intended to perform, why not start asking why no one is building tools that are designed specifically to solve the problems we complain about? I’m not talking about Photoshop plugins like GuideGuide. Things like that are just hacked together solutions to ease our pain. We need to start demanding, or better yet, creating bespoke tools and natural workflows that are created specifically for us.
I’m sure you’ve heard the expression, “Your sword should be an extension of your arm.” I’d venture to say our tools should be an extension of our creativity. We shouldn’t have to tolerate, hack, or be limited by our software. Our tools should be catalysts to the realization of our ideas.
Where the hell is GuideGuide 2?
November 9, 2011
UPDATE: GuideGuide 2 is right here.
TL;DR: It should be done by Christmas
With the end of the year coming up, GuideGuide is slowly creeping up on being one year old. When I first posted it in the beginning of January, it was simply a labor of love that I created as an answer to the question “Why can’t Photoshop do grids?” I then had the amazing fortune of being hired by GitHub the next week. After they posted about hiring me, someone out there caught wind of GuideGuide and shared with apparently just the right people. It caught like wildfire. It’s both amazing and humbling to see how far it has gone.
The Quick Backstory
For the most part I haven’t touched the original GuideGuide post. I certainly haven’t touched the original GuideGuide. The original version was built using a trial of Adobe Flash Builder. In the span of the development of GuideGuide, I switched computers three times, each time having to rebuild my development environment. After the launch of GuideGuide, I switched to yet another computer. This time, however, something went amiss and corrupted my project files. Or so I thought at the time.
The New Face Of GuideGuide
As it turns out, the “corruption” I experienced, was merely the deletion of a few unnecessary (to me) files that Flash Builder needs to recognize the project as an actual project. Lucky for me, and the over all quality of GuideGuide, I was already a couple months into developing a new version from the ground up.
After seeing the future usefulness of GuideGuide I tracked down a real copy of Flash Builder and got to work redoing everything I hated and everything that didn’t work in the panel. GuideGuide 2 is a completely new animal, but is still every bit as awesome as the first.
Why Has It Taken So Long?
People are important to me. When given the choice between spending time with the people I care about or spending hours over a keyboard, I choose the people. GuideGuide is a hobby — something for my free time — and I try to make sure it stays that way.
So Show Us Something Already, Dammit
Ok fine, since you’ve twisted my arm. I haven’t shown screenshots up until now because the design has changed quite a bit as the development has come along. Features have been added or turned out to not be possible. Some times I just decide I hate an interaction. However, for the most part, I think GuideGuide will look the same at launch as it does now, so here’s the new face of GuideGuide.
What Can It Do?
GuideGuide still does everything it always has. GuideGuide 2 is all about adding pieces to the workflow that I wasn’t able to anticipate it needing until it got some real world usage. So here’s the new feature list:
• Completely new design
• Guide Presets
• Negative and 0 margins — Outline your selection or create a margin outside it)
• Clear Guides
• Exact pixel measurements — No more half pixel guides.
• Quick clear inputs
• Quick equal margins — Fill in one and click its icon. They’ll all get that value.
• Define column/row measurements
• Remaining pixel distribution settings
What Is A Remaining Pixel Distribution Setting?
Let’s say you have a document that is 4 pixels wide and you want 3 columns. Which column gets the extra pixel? Now let’s say you want to make a 3 column grid in a 5 pixel document. Which column only gets one pixel?
This setting determines which measurement among the columns is least common, or most likely to stand out, and puts it where you specify in the remaining pixel distribution settings
So When Does It Come Out?
Soon. I’d like to have it out by Christmas.
Baseline Grid with GuideGuide
August 19, 2011
GuideGuide 2 (which isn’t released yet which can be downloaded here) has the ability to create a baseline grid, but with a little creativity and math you can use the current version of GuideGuide to create one as well.
The row height calculation for GuideGuide looks something like this:
To create a desired baseline grid, think of the equation like this:
To figure out how many baselines will fit in your existing document or selection, consider this equation:
As an example, let’s assume I want a 30 row, 16px baseline grid. I’ll make my document height 480px (30*16) and then have GuideGuide create 30 rows.
GuideGuide 2 is mostly complete, but I still need to figure out a way to make it easy for non-coders to install. Until I can sort that out, I hope this technique will hold you over!
GitHub Issues App versions
August 10, 2011
GitHub recently launched their GitHub Issues iOS app featuring an icon I created. While the final icon is probably the coolest thing ever, I thought the original version would be worth showing as well. It was eventually rejected after testing it showed that it looked a little too much like the folders and not enough like an inset piece of technology like intended.
