Week 10 Summary

Common Mistakes Print Designers Make on the Web

The Dao of Web Design

Five Principles to Design By


You can open files in Photoshop with Mini Bridge.

It is preferable to take your photos in raw format and do the editing in raw. Raw files have more data than jpegs, and when you edit the file the original file is not permanently altered.
Clicking on a photo in Mini-Bridge will open it in Adobe Camera Raw (or in regular Bridge you can right click and select ‘open with Photoshop’ and it will open in Camera Raw.

When editing photos for the Web, convert the color profile to sRGB.

After editing in Camera Raw you can make further non-permanent adjustments in regular Photoshop by editing with adjustment layers and filters instead of editing the file directly.

Filter–>Convert to smart Filters :Converts your layer to a smart object which allows you to apply filters from the filter menu.

Always resize a photo first and only sharpen after it is the final size. The sharpening is dependant on size, and info will be lost if you change the size afterwards.

When resizing for the web change the drop-down to ‘Bicubic Sharper (best for reduction)’

Sharpening only effects one layer. If you need to sharpen a document with multiple layers you can make a composite layer which duplicates all the layers below it in a single top layer. To make a composite layer, select the topmost layer you want included in the composite. Hold down the ALT key while you select ‘merge visible’. Instead of merging the existing layers it merges a new layer with duplicates of the layers below it.

If you convert the layer to a smart object and use a smart layer you can come back later and re-edit the sharpening, instead of the sharpen being a permanent change.

To sharpen: Filter–>Sharpen–> select either ‘smart sharpen’ or ‘unsharp mask’. (The 2 options are similar but Smart Sharpen offers a larger preview and more settings to sharpen with.) Smart Sharpen also lets you have different settings for sharpening the highlights separately from the dark areas.


Resizing with the 9-slice scaling tool will change the size of the image but not the size of the document. Click the ‘fit to canvas’ button (or Modify–>canvas–>Fit Canvas) to resize the entire document to make the resized image.

When using the selection tools you can switch back and forth between the different tools (like the magic wand and lasso) without losing the selection. Use the magic wand to select large similar areas, and then use the lasso to add or subtract refinements. Hold down ALT while you select with the lasso tool to subtract from the selected area (don’t unclick while drawing with the lasso). Make sure you set all selection tools to the same type of edge (ie anti-alias, etc).

You can add a mask to a bitmap by selecting an area with the marquee tool and clicking the “add mask” button on the bottom of the layers panel (it looks like a circle inside of a square.)

You can add effects like drop shadows, etc, to a masked item. In the properties menu click the filters drop-down and select “Photoshop Live effects” to get the type of filters available in Photoshop. Selecting “stroke” from this part of the menu will add a border to an image. ‘Outside’ will give the stroke rounded corners. ‘Inside’ will give sharp corners.

To use a vector shape a s a mask:

A mask with a fade:
Select object.
Commands–>Creative–Auto Vector Mask.
Brings up box with 8 options to control the direction of the fade. After you apply the mask there will be a line running through the image. You can use this line to control the fade. You can tell a layer is a vector mask is there is a pen icon on the corner of the mask box that shows in the layers menu.

To make a regular mask with a vector object:

Place the vector shape over the bitmap image.
Cut the vector shape out of the document (control + X or edit–>cut)
Select photo
Edit–>paste as mask
The vector will mask the photo.

Here are comps of the portfolio website I am designing for my final project:


Interior gallery page:

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s