BLOG

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.

CSS3 Gradients

Dec
03

CSS3 Gradients currently enjoy wide browser support, including from Safari, Chrome, Firefox, and Opera. Of course, Internet Explorer is behind the game. Even IE version 9.0 lacks support for gradients. To provide support for IE 9.0 and lower, we must use proprietary Microsoft filters. Even then, the gradients often don’t work or look as good as they do when implemented with CSS – so your just as well off using a background image to apply gradients for IE.

Nevertheless, it is still worth the effort to use CSS gradients. Browsers that support CSS Gradients will not use any fallback code. This means a faster load time for the majority of users of your website. CSS is also a lot easier and quicker to edit than background images.

Read More »

Getting Started with SASS

Nov
10

SASS makes CSS fun again, so claims www.sass-lang.com. In this article we are going to go through the steps necessary to set up and get started with SASS/SCSS. If you’re running OSX, then you already have Ruby installed. If you are a Windows or Linux user, then consult the documentation at Sass.com. With Ruby installed, SASS can be installed by running the following (on a Mac, you’d use the Terminal App):

sudo gem install sass

Read More »

Trimming away excess pixels with Photoshop

Nov
09

This is just a quick tip describing how to trim away pixels that are locate off-canvas from a layer in Photoshop. Deleting the area within a selection of a layer is often not enough because it can leave behind any pixels located invisibly off-canvas. To delete these pixels, you will want to use Photoshop’s Trim command, located from the top menu under Image > Trim…

Unfortunately, this will also trim away the pixels located off canvas for ALL layers – so be careful!

The trim command can also be a useful way to auto-crop an image.