Bedrich Rios

As a web designer, I spend countless hours designing web pages in Photoshop. Of course, this happens only after thoughtful consideration with regards to the site’s layout and several sketch iterations, otherwise know as the framework. In any case, this process may get overly repetitive as you begin to receive a more steady work flow. So, wouldn’t it be nice to automate some of this process? If you are anything like me, you are thinking: “yes it would be.” Therefore, it is time to turn our attention to one of the greatest features in Photoshop, actions. Photoshop actions can record any given set of steps and store them for later usage. Thus, we can use actions to create a simple yet read-to-use Photoshop file for our web design purposes. This file will contain the “scaffold” for our design. In other words, this file will free us of the mundaneness that comes from setting up a Photoshop environment every time we begin a new website’s design. Note: I use Photoshop CS2. So, some of the steps demonstrated here may vary depending on your software’s version.

Creating My Photoshop Action

So, let’s open Photoshop and get to work. Here are the steps that I’ve taken to create my own action:

1. Go to Windows -> Actions.
2. Create a new set and name it Web Design Actions.
3. Now, create a new action and name it Framework. From this point on the action will begin recording your every move until you press the stop button.
4. Create a new document (I usually work with an 800×600 to begin with) by going to File -> New. Also, unlock (double clicking it will do the trick) the background layer, and name it Background.
5. Create groups for all the necessary sections of a regular site and name them appropriately.  I usually start with a group for the header, navigation, content, sidebar, and footer.
6. Now, give yourself some guides. Simply click on the left side ruler and drag to your desired position. I usually create two initial guides 25px away from the side edges of the canvas.
7. Finally, stop the action recorder. This will automatically save all the steps previously performed.

Make Your Own and Use It

Now that you know how to create a Photoshop action, make your own and use it every time a project comes your way. Soon you will realize the convinience of having a basic framework action. Furthrermore, by automatizing this routinary process you will save yourself valuable time. Enjoy!

Saving for the web is always a tricky business, specially when it comes to transparent images. At one point or another we have all been there, wondering why our GIF image has rugged edges and does not seem to be all that transparent.

The Problem

Because IE6 does not handle PNG images very well, GIF images are your best option for a transparent logo background or image. But your image has rugged edges, why?

The Solution

One thing that nobody seems to tell you when saving a GIF image is that you need a matte color. In simple English, the matte color is the color of the background where the GIF image will be placed. So, lets say I am placing a logo with a transparent background on something with a white background, then my matte color would be white.

How To

Once you have your PSD file is open in Photoshop do the following:

1. Go to File > Save for Web
2. Under the Preset menu you will see a drop down menu which contains different file formats, select GIF
3. Make sure the Transparency box is checked.
4. Click on the Matte box and select the color of the background on which the image will be placed.
5. Save.

This should have done the trick.

Photoshop Expert?

By no means am I the best Photoshop user out there. However, I can tell you this works. I have been using this method for all my web work for quite a while now. If you have any problems or a better solution, please let me know. Hope this was of some help.