BLOG

Subtract from a Shape using Illustrator’s Pathfinder Palette

Feb
05

Subtracting one shape from another with Adobe Illustrator is a matter of clicking a button: the “subtract from shape area” button in the pathfinder palette. This simple button holds vast power, as do all the buttons in the pathfinder tool.

To make our subtraction, we’d follow these simple steps:

Draw 1st shape

I’ve drawn a simple red circle as an example.

Draw 2nd shape

I’ve added an icon of a high heel as my second shape. Don’t ask why I picked the heel.

Click the Subtract from Shape Area Button in the Pathfinder Palette

With both shapes selected, click the Subtract from Shape Area Button in the Pathfinder Palette. Bam! Easy Breezy. The results for my high heel icon example are at the top of this article.

Digging in to HTML5 Boilerplate

Jan
03

“The way that a lot of the HTML5 spec worked was just to standardize what browsers already did.” – Paul Irish, Creator of HTML5 Boilerplate

In this post, we’ll dig in to HTML5 Boilerplate and explore some of the awesome things it has to offer.

If you’ve got about an hour to kill, then check out the embedded video of Paul Irish, the creator of HTML5 Boilerplate, explaining the features of Boilerplate and walking through the code line-by-line. The notes below are largely taken from this video.

Read More »

Non-Destructive editing with Photoshop Adjustment Layers

Dec
25

Photoshop adjustment layers are much like any other Photoshop layer. They sit somewhere above or below the other layers in your layer stack and can be used with effects, masks, and filters. An adjustment layer will affect all layers below it. So, for example, if we applied an orange solid color adjustment layer to our layer stack, then all layers below it would have an orange-ness to them.

An adjustment layer can be applied either by either clicking on the adjustment layer button in the layers palette () or via the Photoshop menu (Layer > New Adjustment Layer…).

We can adjust the settings of an adjustment layer by double clicking on it in the layers palette. We can switch to a different kind of adjustment layer by choosing Layer > Change Layer Content…

Read More »

Photoshop Type Time Savers

Dec
20

Check out this video for some quick, simple, but possibly significant time-saving techniques to use with text in Photoshop.

In this video, we’ll discover how to:

  • Quickly convert between point type and paragraph type
  • change fonts on multiple layers at the same time

Quite useful! Video tutorial by Peyton Crump.

Jump into HTML5 with HTML5 Boilerplate

Dec
16

Why is HTML5 Boilerplate awesome?

  • Cross-browser compatible (IE6, yeah they got that.)
  • HTML5 ready. Use the new tags with certainty.
  • Optimal caching and compression rules for grade-A performance
  • Best practice site configuration defaults
  • Mobile browser optimizations
  • Progressive enhancement graceful degradation … yeah yeah they got that
  • IE specific classes for maximum cross-browser control
  • Handy .no-js and .js classes to style based on capability

These are taken directly from HTML5 Boilerplate’s Why is it Awesome list. The list actually goes on an on. In short, HTML5 Boilerplate provides a set of starter HTML, CSS, and JS files to make your site both backwards-compatible and future-proof. The files give your site a jump-start on compatibility for older browsers. There is even a prompt Chrome frame for users of IE6. And for future browsers, well that’s were HTML5 and some handy CSS defaults come in.

HTML5 Boilerplate is packaged with scripts that make it HTML5 ready. It is packaged with Normalize.css to provide useful CSS styles to standardize browser styles. It is jQuery-ready, Google-analytics-ready, mobile-ready… there are just too many cool features.

HTML5 Boilerplate can be downloaded with useful hints and links commented throughout the code, which can be a great way to learn more about how it works. Alternatively, it can be downloaded without commentary or even as a custom download (you pick which files you want to include in the download).

HTML5 Boilerplate for Mobile Devices

The HTML5 Boilerplate stylesheet comes packaged with a series of medie queries devised to prepare your site for mobile devices. That said, to truly make your site mobile-ready, you probably want to consider using Mobile Boilerplate. The Mobile Boilerplate website is worth checking out, even if you don’t end up using the template files for your mobile website. There are all kinds of handy resources, like a list of Mobile Emulators.