Get Cooking with Photoshop and CSS - 3 Low-fat Recipes

The Curiously Strong Retro Flavor

Retro furniture, retro dishware, retro cars -- everything's going retro, so why not your site design, too? Some of the design elements we'll draw on for this screenshot include funky fun fonts, simple shapes, clean lines, and -- of course -- the thick outline.

I'll start with a striped background pattern. This simple pattern begins with a 1x2 pixel document in Photoshop. I zoom in as much as I can and give the background the same color as the logo (#334392). Then, I'll color one of the pixels a lighter blue (#5967AE).

I can immediately save this for the Web, to use for the background image (called "background.gif").

To apply this background to the screenshot, I hit Ctrl-A to make a selection of all two pixels. Then I go to Edit > Define Pattern (you can name the pattern).

Now that you've created the background, you can create another 750x550 canvas, insert your logo, and apply the background pattern you've just created. With the paint bucket tool selected, switch from Foreground to Pattern in the options bar, and select the pattern.

A simple click (with the paint bucket tool) on the background of the screenshot fills it with your new pattern.

I create a content background layer (in white, for now), and use the pencil tool to draw a dark blue border on each side of the content layer. Then I add a light blue rectangle for the left column. (Tools used: Marquee to select content area -- while looking at the Info palette to get an exact width, paint bucket tool -- set to foreground color, pencil tool for borders.)

I think I want to put an outline around the word "fictional," but not around "company," so I'll have to separate the elements, as they're currently in the same layer. There are a few ways you can do this -- I choose to duplicate the layer, and use the eraser tool to erase "fictional" from one layer and "company" from the other layer.

Now, I'm able to apply a white stroke to the "fictional" layer. I also lock the transparency for the "company" layer, and use the paintbrush to color the pixels a very light blue (#C5CCF0).

One design element often seen is the "sun ray" object. We'll create this very easily using the Polygon tool (hidden behind the Custom Shape or Rectangle tool). By clicking the options arrow, you can choose to make the shape into a star shape.

Then, change the number of sides to a large number -- I used 80, but you can experiment to find a number that works for you. I then drew the sun-ray shape in the same dark blue color as the logo text.

After choosing the Move tool, I move the sun shape up. Then, I go to Edit > Free Transform (Ctrl-T) and drag on the bottom center handle to "squash" the shape slightly, in proportion to the logo. Once I have the shape about the size that I want it, I double-click inside the square to apply the transformation.

The ray effect is a little too much for me, so I bring the opacity down to 50% to make it a little more subtle. Shortcut -- If you have selected that layer already, you can usually type in the number to adjust the opacity without needing to click and drag on the opacity slider.

I switch to the rounded rectangle tool to make some navigation buttons. With a five-pixel radius, I choose a bright shade of orange (#ECA908) and create a rounded rectangle, then apply a three-pixel white stroke to it. I duplicate and move the layer a few times to get a few navigation buttons.

I decide to apply a slight drop shadow to the layers. I try it out on one of the buttons, decide I like it, and copy the effect to the other buttons.

Now, I add a text layer. Using a darker color for the text (#8A4C03), I type the text and then use the Character palette to adjust the leading (the space in between lines) so the text aligns in the buttons correctly.

Now for the content area. I try using different shades of orange, and decide the darker shade (#D68321) looks better:

The "little details," like the stroke around the top part of the logo and the sun ray effect, are what will give this otherwise plain site a retro feel. With this in mind, I think I'll create some kind of graphic effect for headings. I'll start with text using the Brush Script font in dark orange (#9B5C11), with a light orange (#FFDE90) stroke applied to it.

Using the same color as the text, I create a few new layers and start drawing retro-looking custom shapes on them. (I draw each shape on a separate layer so that I can move them around later if needed.)

Photoshop comes with several shapes that can work. These are the ones that I used:

Note that I've moved the shape layers beneath the Heading layer.

For the text area, I'll add a white, rounded rectangle. I apply a white stroke to it, but change the opacity of the stroke to 40%. I also copy the drop shadow effect from the buttons to this content area.

In the last few steps, I add dummy text content, then experiment with more custom shapes to appear behind the text heading.

Click to view larger screenshot in a new window.

Slicing and Dicing

In the next several steps, I'll demonstrate a secondary way of cutting up your image to save them for Web, this time, using the Slice tool in Photoshop.

Select the Slice tool from the toolbar and draw a rectangle around the logo:

Double-click on the slice and change its name. This will be the same as the filename; for example, the Slice name is "logo," so the filename will be "logo.gif" or "logo.jpg."

I create more slices for each image that I'll need. (Note: I only create one slice for the vertical button).

• logo – The logo
• vertical – Just one of the vertical buttons
• title – Title area, with plenty of room for longer titles
• contenttop – The top part of the content area, including the drop shadow
• contentbg – A section from the middle part of the content area, the same width as contenttop
• heading – The heading graphics
• contentbottom – The bottom part of the content area, including the drop shadow, the same width as the other content slices
• bg – The blue and orange background area, not including the side borders

In the diagram below, I've marked where each of these slices is located.

Now comes the not-so-exciting part. You'll notice that Photoshop creates "auto slices," which are shown by gray numbers, in contrast to the blue numbers of the "user slices" that you created. Unfortunately, Photoshop will treat each one of those auto slices as an image that needs to be saved. What I'll do is to go through every auto slice with the Slice Select tool (behind the Slice tool), double-click it, and set it to "No Image."

You'll notice that the slice number now looks like a user slice, as it's blue, but also notice the "X" icon, which signifies that there is no image. (Contrast that to the "picture" icon for Slice 02, where the logo is located.)

Note: If you want to skip this step, just be aware that you'll end up with several "extra" slices when you export the image. You can delete those files, which may seem easier to you than going through and modifying all of the auto slices. I personally like to take the time to modify the auto slices, as I often find myself exporting the sliced images frequently.

Before I export the slices into images, I'll hide all the dummy text layers by clicking the eye icon in the Layers palette. I'll also modify the "Heading" text to depict the first title that I want to make.

Now, go to File > Save for Web.

At this point, you want to double-click on all the image slices and change the settings if necessary (if, for example, you want to save the images as .gifs or .jpgs, and at a particular level of quality). If you're going to make them all the same, you can Shift-click to select multiple slices and then change the settings all at once. I change all the slices to 32-color gifs.

Now, click "Save." The Save Optimized As dialog box will appear. Change the Save as type setting to "Images Only."

By default, Photoshop will create a folder named "images" and save all the images there. If you don't want to do this, select "Other…" under the Settings option and either uncheck the "Put images in Folder" (in which case, it will save all the images into your currently selected folder), or change the name of the subfolder to which you want the images saved.

Click "OK" if you're in this dialog box. Then, click "Save" to save the images.

Now, I'm going to create one more image for the hovered state of the vertical button. First, I'll make a duplicate of the button layer and hide the original one. Then, I'll hide the drop shadow effect by clicking the eye icon next to that effect in the Layers Palette.

Using the Move tool, I'll use the arrow keys to move the button layer down two pixels, and over to the right one pixel. This will help the button to look like it's been pushed down. Then, I'll rename the slice "vertical-over."

Again, I'll go to File > Save For Web. I'll select that slice, click Save, and this time choose to save only "Selected Slices."

After saving, you should have both "vertical.gif" and "vertical-over.gif" in your images folder.

Note: There's a different method of creating navigation buttons for CSS-styled sites. This other method ensures that you don't need to try to preload your images, which works well if you have buttons that might take a little longer to load.

Renaming slices and choosing to save only Selected Slices will allow you to create more Title graphics if they're needed. In fact, I just realized that I never moved the little flower graphic elements after I changed the title of the page. I'll do that now and resave the "title" slice.

And that's the Slice and Dice method of saving images for the Web from a screenshot!

In practice, I tend to combine both the Slice and Dice and Crop 'n' Save methods. For example, in this screenshot, I might have used slices for the design elements that don't change, but duplicated/cropped the title graphic. That way, if I want to change the entire color scheme, it will be easy enough to modify the screenshot and create all the new design images at once. But if I want to make more title graphics, I can use the crop 'n' saved "title" Photoshop file to edit and save without having to go through the different slice save options.