Almost everyone is familiar with Photoshop and the amazing things that can be created using it. With so much knowledge, tutorials, and endless information on the Internet, you would think everyone would have Photoshop down by now. It never ceases to amaze me how few Websites I see that actually utilize the endless design possibilities and incorporate it into their sites, though.

Don’t get me wrong; I do see a lot of incredible Websites out there.  Music-related Websites seem to have great designers behind them.  BUT - I feel bad for so many companies that have some horrible Websites that probably cost them at least $500 that probably are worth $10.

Before you read further, keep in mind that the point of this article is to get your mind thinking about Website design in a slightly different way using Photoshop.  I’m not going to dive into the complex design options in Photoshop; there are plenty of tutorials out there to help you.

Every Website isn’t meant to have incredible artistry.
Simplicity often works better than intricate designs.  Really think about your target audience and your demographics before diving into a big Photoshop project.  Sometimes people take things too far, causing the Web page to load slowly or not function at all.  I highly recommend sticking with basic HTML, ASP, and PHP for most Websites.  Flash is great, but the functionality is almost always lacking in some way.  For example, this Website is just overkill.  It’s really creative and interesting, but the functionality isn’t the best.  Remember: just because your computer is rock-solid with the fastest connection doesn’t mean everyone else has that same luxury.

•   Image size and format for quick page loading

•   Color matching and brand consistency

•   Choice and use of fonts

•   Keeping the design simple and effective

•   Take advantage of using layers

•   Some designs are hard to transfer from paper to the computer

Always keep page loading time in mind.  While Photoshop can be a great resource to create exciting layouts, it can also cause a major increase in how long it takes to pull up the Web page.  After about 3 seconds, your visitor is going to turn away.  Web surfers expect things almost immediately.  Instant gratification is the name of the game, and your goal is to be on top of your game at all times.

Drawing a design by hand is always a great first step, but it doesn’t always match up with a computer’s capabilities, especially if you are new to creating layouts in Photoshop. Drawing up your idea in Photoshop allows you to see what you can actually do digitally.  Photoshop is the perfect starting point for any Website, even if you don’t decide to use the design you end up creating.  In some cases, you can take that exact design and lay coding over it, which is a great way to build Websites quickly.  This is a great technique if you need to build a lot of Websites or want to give your visitors a choice in the background they see while they view your site.  After all, who doesn’t like a change of scenery every once in a while?

Start basic and work your way up.  Know the ideal dimensions for your Website and literally start with a rectangular box.  Photoshop lets you build layers and show/hide layers easily.  Take advantage of this option as you design.  If you have mixed feelings on a particular part of your design, don’t delete it; just hide it and come back to it.  You might like it later or have a new concept that you can add to it later.  This will cut down on your time dealing with coding and let you focus more on the aesthetic features.

Photoshop is a great place to experiment with color.  In most cases, three to four colors is plenty for your Website.  Don’t overdo it, but put a little color on your site to add some character.  Always think about branding as well.  Don’t create business cards that are blue and have a red Website.  Consistency will really pay off when someone tries to recall your company.  Think about some big companies and the colors you think of when you see their name – Coca Cola, Best Buy, Pepsi, Wal-Mart – your goal is to maintain that kind of consistency, even on your Website.

A big advantage to using Photoshop is your control and choice of fonts.  While you probably won’t be able to control all of the fonts your visitors see, you can control the ones that matter most, whether they are using IE 5.0 or browsing on a Mac.  Your Website’s header is the main one.   You can also add a footer to give it a little extra spice and character.  It’s harder to control the coding over different browsers than it is to control the overall look and feel, so you might as well be in complete control of the aesthetic design.

The best thing about designing in Photoshop is the ability to use that same frame of reference and create multiple Websites from the same basic concept.  If you create a nice Website template and find general coding that works on top of it, you have yourself a great start to any Website.  You can change the look and feel of each individual Website using Photoshop, and leave most of the coding the same.  The hardest part is getting everything to line up properly; once you get it down, though, you will be able to use it over and over.

I’m going to let you in on one of my favorite Website building tools:  the inline frame.  An inline frame, or iframe, is really just a box (or frame) that you can place anywhere inside your current HTML page at almost any size.  The thing that I like about the iframe is that you can make it transparent and it really works well using a Photoshop-created background.    Here is a great example I found that uses this concept of the inline frame and a single background image to create the entire Website.  Many people aren’t fans of frames, but with this kind of layout, your visitors don’t have to scroll down entire pages and the menu, header, footer, and logo are constantly visible.  It’s a quick and easy way to create Websites that are aesthetically appealing.

So break out the Photoshop tutorials and start your design ideas.  You’ll be amazed at what works and what doesn’t.  Your world of design will open up and you will look at Web design in a completely new way - even if you don’t end up using your Photoshop creations.