Building a Website with Photoshop 7 - Part One, the Photoshop Imageready Connection

How it Works: One of the best features of Photoshop 7 is the ability to conceptualize, design and execute a websites from scratch. Photoshop 7 in conjunction with Imageready is arguably one of the most elegant software combination for efficiently producing beautiful websites. While it's true that these 2 software are just as effectively integrated in the later Adobe Creative Suite lines, the down-side is that from Photoshop CS1 to CS3, Adobe has consistently upped the memory ante in both hard disk space requirements and in terms of RAM use. The venerable Photoshop 7 is forever slim, speedy, efficient and reliable. Surprisingly, this sweet union was dismantled by Adobe, when Imageready was unbundled from the latest version of Photoshop CS3! Adobe's official line is that the features of Imageready is merged into CS3, but where I sit, I think Adobe is taking step backwards with this move!

Photoshop 7 and Imageready are 2 separate programs that can be toggled back and forth via a button below the tool bar. This physical separation acknowledges the intellectual difference between designing an artistic website and creating functional html code. Keeping Photoshop and Imageready separate allows you to seamlessly concentrate on two very different thought processes. It's probably more effective for me to demonstrate the effectiveness of building a website using the Photoshop 7/Imageready tag team than to verbally describe it.

First, you need to decide on the dimensions of your website. Today, most computer user's have monitors that are at least 1024x768 pixels in screen dimension. To account for all the tool bars you should design your website at 915x352. I've set up a sample website just to take you through the process.

Websites today are of a different size, shape and configuration but the majority fall under some flavor of this common configuration:

Header, Navigation bar and content. They sometimes have a footer at the bottom. There is a very specific reason why websites are configured this way. There have been scientific research done to track how people quickly skim over a website before they decide to spend time on a it. Researchers has found that the upper left quadrant is considered the sweet spot that receives the most attention. That's why all the content of significance is clustered in that upper corner. There is an area called the "fold" which is the bottom of your monitor. Most web developers prefer to put all the content of significance above the fold.

Once you've designed a website to your liking, you should scroll down to the toolbar and click on the Imageready button. This is where the fun begins!

You are now going to jump over to Imageready to start your web magic. First scroll up to the preferences button. You want to set up where all your slices are going to go. Go to File/Output Settings/Save Files. You'll find a checkbox that says, "Put Images in Folder:" the default name of the folder being "Images". This tells you that when Imageready slices your artwork it will put it in a fiolder called "Images" or whatever you specify.

Next go to Windows/Optimize, this is the optimize panel. The optimize window is very important because you can specify which file format to save your slices for maximum image quality while making the files size as small as possible. Look at the illustration above, For demonstration purposes I set the .jpg compression to 20 which is very low. You can see the problem with artifacting. You should set your image to the highest quality possible while keeping in mind that you need to keep the file size sufficiently small to accomodate for quick downloading time. The .jpg file format as a rule is an image compression which is very good for photos and illustrations while .gif is good for typography and the .png format is good if you have an image with a transparent background.

After you are happy with how you have optimized all your slices now all you have to do is click on the "Save Optimized" button under the file menu. Just remember where you put the file. You should go to the file where you saved all your slices and the html file and viola, there is your website. The look of the website is great because you spent a lot of time designing t9 in Photoshop 7 and Imageready lets you slice the image to develop your website without having written a line of html code! I've included a miniature version of the website on this article so you can have an idea of the final result. If you want native files to play with you ca click on this link, www.photoshop-how-to.com/sample-website.zip

How Photoshop Can Simulate Depth of Field or Santa Claus Needs a Vacation

How it works: Photoshop 7 tutorial simulates the depth of field effect so Santa looks natural in this beach scene. Depth of field is a visual effect that is peculiar to a single lens reflex cameras where objects closest to a camera lens appear to be in sharp focus while objects at a distance appear blurred. The tools that we will be honing our Photoshop chops on are the layer masks, and layer duplication.

Step 01 - How I accomplished this effect is that first I had an image of a beach scene with some lounge chairs. Next I duplicated this layer by dragging the image to the “create a new layer” icon on the lower right of the layers palette. (this is good practice because it gives you an extra duplicate layer if you want to try a very complicated technique to ensure that you have a copy of the original file.)

Step 02 -I applied a Gaussian blur filter to this duplicated layer. A setting of 5 will usually do the trick. Next I added a layer mask to this particular layer. Layer mask are one my most favorite tools. With layer mask, if you use a brush or a gradient tool, the darker image will allow the image in the layer below to show through while the lighter image will allow the top layer to appear. If you use the gradient tool, the mask will blend in a smooth manner. So the grey area will show both top and bottom layer depending on the darkest. If you apply it onto the blurred layer it will give you the illusion that foreground is sharp and the background will become blurry as you recede further into the vanishing point.

Step 03 -Next I found an image of Santa Claus. I used the lasso tool to roughly select Santa. I copied this image and then pasted it onto the beach scene. I usually press CTRL-T (Command-T for the Mac), which allows me to scale, distort or rotate. After I adjusted the position and the size, I pressed the enter key to commit the change. Again, I use our friend the layer mask. I used the brush tool to brush out the background. This is called non-destructive editing meaning my changes do not destroy the image. You can go back and forth until you have the silhouette exactly the way that you want it. Now, Santa is on his favorite lounge chair on the islands!

Step 04 -The crowning touch is to add the text, which gives it that postcard look. I used Caflisch script. Ordinarily in previous versions of Photoshop, you don’t actually know what the typeface look like. If you're so fortunate to have the most recent, Photoshop CS3 version, you're able to get a sampling of the type on the right hand side of the menu. I chose Caflisch script because it feels like a script that would go nicely with Santa in the islands!

I hope you enjoyed this special tutorial. If you want to play with the source file, you can right click on this: Depth of field source file

Photoshop - Advanced Saturation Without Artifacts

Here's how it works: Have you ever wanted to boost the saturation in your photographs but when you start to adjust the Hue, Saturation and Lightness settings, the image starts to look pixelatted and unnatural? Here's a technique to make your photograph look juicer and richer and still maintain a natural look. If you would like to watch a step-by-step video demonstration, you can click on this link on Advanced Saturation-Avoiding .jpg Artifacts . You can also get the Photoshop .PSD exercise files by right-clicking on this link.

Ah, Venice, a beautiful, romantic city that's full of color and vitality! Unfortunately, this photograph was taken on a grey overcast day which kills all the splendor of this city. We will work on this photo to bring out the true beauty of Venice!

Step 01 - To begin this technique, I duplicated the first layer of the Venice image. You can either right click and press "duplicate" or drag the first layer to the "new layer" icon. This is the second button to the right on the layers panel. (I sometimes even make yet another copy and then put it in a separate layer folder for safe keeping in case anything goes drastically wrong!)

Step 02 - Next, I clicked on the adjustment layer button. This is the 3rd button to the right on the Layers Panel. The, I selected the Hue, Saturation, Lightness panel. We're mostly concentrating on the Saturation option which adjust how much concentration of color is on a an image. If you over saturate an image the colors will look very bright while if you desaturate the colors, the colors will eventually go away until the image is a straight black and white.

**Now here is a little know trick, hold down the alt-key, option key for Mac user and then drag it to the affected layer. It should look like the illustration on the left.This action tells Photoshop to only affect the immediate layer below this adjustment layer. Otherwise it will affect all the layers below it..

Step 03 - I boosted the saturation to +78. It looks a bit garish and exaggerated now but trust me all this will work out! You'll also notice that in certain area it's starting to look a little pixellated. On the affected layer, just the HSL adjustment layer, you should apply a Gaussian blur on the image. Just a little bit, maybe just a 1.5 pixel blur will do. This action will smooth out the boxiness of the image.

Step 04 - Now I clicked on this image layer that's been oversaturated and blurred to select it. Then, I went to to the color blend mode, the window that's on the upper left of the Layers panel and the I selected the color blend. The color blend mode takes the gray information in the base image and blends it with the the hue and saturation information of the layer that you select. of the blend color. This blend mode is very useful for coloring monochrome images and for tinting color images.







Step 05 - And viola, here is the resulting image . . . Venice in all of it's beautiful glory! Notice how the blues of the sky and the water is popping out and you get a better sense of space and perspective!

Again, if you would like to follow a similar tutorial step-by-step, you can check out a video of this technique here.

To find the complete portfolio of video tutorials on many diverse topics such as graphic design, web devbelopment and computer programming please check out, the VTC Online University.

I hope you enjoy this lesson in Photoshop 7 tutorials! If you have a question, please drop me a line or write a comment.

Photoshop 7 Healing Brush Tool Magic!

How it works: One of the best kept secrets in Adobe Photoshop 7 is the Healing Brush. This is the tool that is directly above the clone tool (it looks like a small band aid). Usually when we try to correct imperfections or discolorations in photographs, we usually work with the clone tool. While the clone tool is a very important and useful tool, sometimes, it's very challenging to match the affected area perfectly. In correcting problems such as facial blemishes, small differences in color and texture is very noticeable. This is where the healing tool shines!

How it works is that you use the healing brush to sample a smooth textured area in the surrounding area just as you would with the clone tool. The difference is that the healing brush also samples of the underlying area of the affected area. When you apply the healing tool to the affected area it smoothes it out the color and the texture, just like magic! The area that you correct is sometimes fixed in one try but often without the trial and error that you face with the clone tool!

Step 01 – Poor Mom had to spend many sleepless nights with her baby!

This photo was chosen because it highlights some of the challenges in photo retouching such as the matching of color and texture in skin tones. An added complication is the low contrast in this photograph. This adds a grayish cast, which makes color matching problematic.

Step 02 – To use the Healing Brush, select the fourth button down on the left column of your toolbox (again, this is a tool that looks like a band-aid).

The areas that we will concentrating on will be the bags under Mom’s eyes, the blemishes on her chin and brow and the laugh lines around her mouth.

Step 03 – With the Healing Brush selected, hold the alt key (option key for Mac user). This invokes the cross-hair icon for you to sample a smooth continuous tone in the surrounding area. After you sampled a “good” area, let go of the alt key and then apply the Healing Brush onto the problem area. The cross-hair icon turns into a circle icon. Don’t worry if the color and texture do not match, when you unclick the mouse, the Healing Brush will sample the underlying color and texture and then recalculate for the smoothest gradations.

Step 04 – Viola, like magic the bags under Mom’s eyes
are gone! So are some of the blemishes around her chin, eyes and brow. The results could have been achieved with the clone tool but would have taken a lot more patience and effort! (I have to admit that I did boost the brightness and contrast using the Levels Tool to add “pop” in this photo. (Right-Click for your bonus Photoshop source files!)

The benefits of movies as a teaching tool are numerous. For example, most Photoshop classroom seminars costs in the neighborhood of $350-450 per session. Plus the time that you have to travel, take time from your job and consume a meal, drink and snack could easily run you $600-$700! In eLearning companies such as VTC.com, a photoshop lesson on CD with video and audio typically cost below $100. That's a savings of $500 for the same material! VTC's Online University is even a better deal is even a better deal because this program shows you not one but many different aspects of Photoshop plus a treasure chest of graphics related tutorials such as Macromedia Dreamweaver, Flash, 3D modeling programs such 3D Studio Max or business applications such as Microsoft Excel! VTC's Online University costs about $40 per month. In today's competitive job market, you need every advantage that you can get. Here are but a few more advantages of online learning is a super business value

• Classrooms learning take time and money, online lessons especially video tutorials teaches you according to your schedule.
• With an online tutorial, you can learn and practice at the same time. Online tutorials allow you to start and stop a lesson at your convenience.
• In fact, eLearning companies such as VTC.com provides the original Photoshop source files for you so that you can follow the instructions step-by-step!
• A video tutorial is always patient with you. You never have to feel embarrassed that you're making the "instructor" repeat herself over and over again.
• A video tutorial often costs a fraction of a real time classroom yet it covers the same material.
• In classroom situations, it's a roll of the dice when it comes to the quality of the instructions. eLearning companies such as VTC.com provide you with instructors who have proven industrial track records and the most up-to-date instructions.
• The advantages of video tutorial over real time classrooms are numerous! Yet these lessons typically cost only a fraction of a real time classroom and the kicker is that it covers the same material!