Link List, volume 46

More Photoshop and Web Design

More Grids.

A collection of grids for various screen sizes.

Based on the 960 Grid System, the Golden Grid is for those who like natural proportion systems.

Tips & Tricks

Pixel perfect alignment in Photoshop.

An overview of Photoshop features for web design.


Beginners Guide to Wireframes.

Making wireframes in Photoshop.

More wireframe tips.

Which is the best app for wireframing? InDesign?

Optimizing for the Web

Exploring the Save for Web interface.

Optimizing your PNGs.

Link List, volume 45

Photoshop and Web Design


Guides and Grids are essential for web design and there are a couple of plug-ins that make the task of setting up your framework much easier.

  • GuideGuide is my favorite Grid plug-in. I like that it works as a panel so I can easily access and view it.
  • 960 Grid is an action that allows you to quickly lay down a 12, 16 or 24 column grid
  • Modular Grid is an interactive tool that lets you see the grid you are creating and provides you with a .jpg to use in you Photoshop file as reference

The Grid System is a great resource on designing with grids, offering articles, templates, plug-ins and inspiration.


Here’s a very thorough tutorial on using GuideGuide to add columns and a baseline grid.

Another walk through on setting up you Grid & Baseline.

Tips & Tricks

Pixel perfect alignment in Photoshop.

Monday Link List, volume 2


How big should your body copy be on a web page?

Another Column Calculator:

Created Golden Ration columns for your layout

Cool Tips & Tricks:

A Dozen Cool Photoshop CS5 Features.

Save your settings, and even make a record of your work.

Photoshop Etiquette – best practices.


Using Text Frames:

Controlling text fields.

Mastering Layer Styles:

Mastering Layer Styles.

More Layer Style Tips.

Web Design, Layout Tutorials:

A whole bunch of layout tutorials.

Create a blog layout in Photoshop.

Web Design, Page Element Tutorials:

Buttons, navigation, type and other elements.

Page element tutorials and other resources.

More about the Deblur demo:

So, when can we see the Deblur filter in Photoshop? When they’ve perfected it.

Monday Link List, volume 1

Setting up Photoshop to produce pixel perfect web designs requires taking control of your application settings and tool options.

Controlling Your Settings:

Set up Photoshop for pixel perfect web layouts: Configure Photoshop for pixel perfect design

Making pixel perfect adjustments: Pixel Perfect Rotation & Nudging

Creating Grids:

Cameron McEfee GuideGuide a Photoshop plug-in to create custom guides.

960 Grid System a very good online tool for creating grids.

Online grid creation system Lets you save your grid as a Photoshop pattern.

Grid Designer Another online grid creation tool.

GridCalc Grid calculator and generator


How to create a sleek grid based website design

Photoshop web layout tutorials

More Photoshop web layout tutorials

Working with vectors

Not related to Web Design, but WOW!

The end of blurred images
And who needs to focus in the first place?