As a freelance website designer, creating dozens of websites over the course of a year can start to challenge your creativity. Finding inspiration to break-out of a comfort zone is something the professional website designer struggles with most every day. On a psychological level, the freedom of a blank canvas is filled with so many possibilities that a designer can become overwhelmed at the options. When this happens it is not a question of, how to design a webpage, but …how to design a webpage that follows certain design guidelines, while still breaking all the rules.

Below are 10 website design tips to help professional designers looking for website design inspiration, or the beginner designer looking for free website design tips:

1. Use a gradient background instead of a solid color. One method is to use a reflective gradient that has a very subtle color change. For example, the gradient might start out a dark blue, transiting into a similar, but lighter blue, that transitions back into the same dark blue. Also, try changing the direction of the gradient to go from corner to corner instead of top to bottom.
2. Instead of starting the design and then getting the photos, first find a photo you really want to use in the design. Then, create a color pallet from the photo by color sampling different colors in the photo. This will build a color pallet that includes three to five colors.
3. Include a sidebar to break up a horizontal layout.
4. For accent colors, use blending modes in photoshop to add subtle effects to horizontal bars and boxes. This works well when the top layer is a solid color, with a gradient layer underneath. Make sure to add the blending mode to the top layer to create interesting color combinations.
5. Instead of the header being framed by two horizontal bars, use a shape to add interest to what would be a boxy layout. To keep the design balanced, copy the shape and flip it. This reflective shape can be added to the footer.
6. If you usually design with a background color, use more white space. Or, if you usually design with whitespace use a background.
7. Center your website to display in the middle of the browser, instead of the top left corner. This can be done in the HTML and CSS. First create a, div id=”wrapper”, that wraps around the entire layout. In the CSS, for the id, “wrapper”, set the box width according to the width of your design. Next, in the CSS for the wrapper id, set the left and right margins to “auto”. This technique is cross browser friendly and will center you layout (left and right margin) according to the browser window.
8. Use a different navigation bar technique: folder type, drop-down menu, sliding menu, accordion, two columns …etc. Also, consider changing your typical navigation from vertical to horizontal; or visa-versa.
9. Use a limited amount of animation to add subtle movement and interest to a stagnate page. This can be a slideshow, or a flashing button.
10. Stay up to date on the latest software. This will provide new techniques from new tools that you can incorporate into your designs.

These 10 website design ideas can change a design into something new and fresh. Using Photoshop and blending modes to create new color pallets will add pop to the typical solid background. Also, use a photo to create your color pallet, it will inspire new color combination’s that otherwise might be lost. Don’t be afraid to add shapes and sidebars to headers and footers, combining these elements with a horizontal navigation bars instead of a vertical navigation bar; adding interest to an otherwise boxy layout. Finally, keeping up with new software and using new tools and techniques will push your designs beyond your imagination.

Clike Here To Social Bookmark It

read more | digg story

Clike Here To Social Bookmark It

This is a Fee Adobe Photoshop Tutorial that uses curves for making selections. The technique is perfect when the “wand” does not get the selection you want.

In this tutorial I show how to select a sky with trees on the horizon.

Photoshop tutorial on making a selection

Step 1. open image.

Step 2. copy background to new layer.
on copy layer go to: Image/Adjustments/Desaturate.

Step 3. on desaturated layer open curves: Image/Adjustments/Curves -slide the left (white) input triangle toward the middle. Slide the (black) input triangle toward the middle. In my example I wanted to keep the phone line  deselected (it is located on top left of my sky). So I kept an eye on how my selection was as I worked toward the middle with the triangles. Hit Ok when you get a decent black and white image.

Step 4. Use the magic wand to select the sky. Turn off contiguous. Turn the tolerance to a low number like 10.  With contiguous turned off the area between the trees and sky will be selected, but you will also get some minor selections in the grass -no problem. With the selection still active enter quick mask mode (short cut is Q). Select the brush and paint over the grass area adding to the mask (use black to add to mask).

Exit quick mask mode (short cut is Q) and save selection (name it sky on a new channel) -Select/Save selection …click ok and deselect the selection.

Step 5. Delete the desaturated layer. Now you only have the original background.

Step 6. Click on the original background layer and load the selection: Selection/Load Selection/ and under Source Channel use the fly out menu to select sky.

Step 7.  With the background layer active and the selection active go to: Layer/Layer Via Copy (Apple J) -this will create a copy of the sky on a new layer.

Step 8. With the background layer active, load the selection “sky”. Go to- Select/Inverse. and then go to : Layer/Layer Via Copy. this will create a copy of the land on a new layer.

You now have three layers. The background. One layer with the sky and One layer with the land.

After a few color adjustments here is my final image. I even save my phone line.

There are a number of tips and tutorials for using Photoshop to make a selection and depending on the photograph some techniques will work better than others. This tutorial is another technique to add into your selection tricks.

Clike Here To Social Bookmark It

To illustrate lets start by looking at a before and after:

Step 1. In Photoshop open an image that needs correcting. I have the info pallet next to the image to demonstrate the area around the subject is not a true white. If it was true white the numbers circled would be 255.

Step 2. Using the text menu, goto: Images/Adjustments/Curves (shortcut on a mac is to hold down the apple key and press M). Use the horizontal slider and slide it to the left. As you move the slider to the left, you will see the light gray start to fade from the surrounding area. Below are the curves settings I used:

Step 3. Here is the image after the curves, I have the info pallet next to the image to demonstrate the area around the subject is a true white. The numbers circled are now 255. You do have to be careful because you will clip some of the light gray from the image.

Step 4. You can see how I lost some of the midtones on top of the image. But this technique is about speed with acceptable results.

Step 4b. Here are the results using a selection

So next time you have a gray tint in a white area around a photo, use this Photoshop tip to turn the gray into white.

Clike Here To Social Bookmark It

• Ink Jet Printer (typical at home printer): 200-240 ppi
• Color Copy (kinkos style): 180-240 ppi
• Digital Printer or Variable Printing (usually used in small print runs): 240-300 ppi
• Going to press (usually used in larger print runs): 300-350 ppi

I know the suggested ppi I outlined above are general and there are many other factors to consider when printing a photograph or a document; so when going to press you should contact your printer for their suggested specifications. However, there are times when you don’t know where to start and you just need a quick reference. For those that are interested here are a few more guidelines:

• Newspaper Ad 170-200
• Average Magazine & Brochure 200-266
• High End Magazine & Brochure 250-350
• Annual Reports 260-350
• Fine Art & Coffee Table Books 300-350

The reason many people do not just print everything at 300 ppi is the file size can become unnecessarily large. This can make working on the layout more difficult as the computer struggles to render the layout. Also, delivering the layout can become more difficult the larger the file. However, making the file too small, or reducing the ppi to a level that makes the file size too small, will make the final design, or photograph, loose details in the final print.

Clike Here To Social Bookmark It

This is not a exercise in Photoshop, but a demonstration of how images and color can effect a layout. On the right, I have put the two fictional sites side-by-side. Both site’s use the same layout and text.

Use your images and color wisely, have fun and keep that color wheel handy to develop interesting and dynamic color schemes.

Clike Here To Social Bookmark It