Special Photo

Happy with Photoshop in Blend it like Beckham

Layer blend modes are a powerful, but often overlooked, feature of Photoshop. This month we're going to use layer blend modes to correct under or over exposures in your digital photograph collection....

We'll begin with overexposures. The first thing you need to do is duplicate the layer that holds your overexposed photograph. To do this, right click on the layer and chose "Duplicate Layer" from the drop down menu.

You should now have two instances of your photograph. Choose the topmost layer and switch the blending mode to 'Multiply' (located at the top of the layers palette). If you like you results, you are done!
If your photo is still a little light, keep duplicating the topmost layer until you are satisfied; however, if the picture is too dark now, lower the opacity of the top layer until you get the desired color saturation. For the image below, I used two duplicates with the second duplicate set to 15% opacity.

Make your website fit different screen in resolutions

Labels: article website 0 comments

Common Question

One of the most common questions I'm asked on the Pegaweb forums is "How can I make my site look the same on different screen resolutions?"

The simple answer is—you can't. There are no snippets of code or special settings that allow your images to stay the same size, relative to the screen (without making your images look really bad.) You just have to design your website to look good on any screen resolution, even though it will look different.

Design for 800x600 Users

It's still the case that the majority of people use 800x600 resolution, but it's now only just more than the number who use 1024x768 resolution. The number of people using 640x480 resolution has dropped so low now that they're not worth worrying about. Those people will be very used to using their horizontal scroll bar, so they won't be too irked by your site being too wide for their screen.

Make your images no more than 779 pixels wide. This allows space for the scroll bar and borders on an 800x600 screen.

Fixed-Width Pages

The easiest and most common option is to design your page at a set width. You set the width of your main table to 779 pixels, and put everything inside that (remember to set all the page margins to 0.) If the user is viewing the page at 1024x768 resolution or higher, there will be white space at the right of the screen, but that's okay. Everything will just look a bit smaller to them.

Slivers

A "sliver" as I call it, is a thin piece of your image that you can repeat endlessly to fill up space, so that your web page fills up the whole width of the screen.

To make a sliver, just take a one-pixel vertical slice of your image, and save it separately. If your image is a photo, or other complex image, you may have to take a wider slice, and edit it to make the ends match up. (With some images this won't work at all.)

Make a table, of width 100%. Put your main image in the table, and set your sliver as the background image for the table. It will then repeat itself as many times as is needed to fill up the table—and the table will be as wide as the screen.