Pages

4/2/10

Web Design Process - Photoshop

Designing a website in Photoshop is a good way to start as it enables you to focus first on the layout for positioning and mockups. Adjusting a design is quite a bit easier in Photoshop or other graphic software compared, to making changes in the code. With layer comps you can easily show different variations of the layout as well as use it to make different pages and rollover links.

When I worked for an online adverting company, ClickaCoupon.com, we built multiple websites we actually did most of the conceptual designs in Photoshop Elements (A stripped down version of Photoshop). We utilized the layers and groups to show different pages or versions for the owner to make decisions. Many times we would go back and move things around and make many adjustments. This would have been more difficult if it were done in code. Sometimes we would even find an existing site, which we would screen capture and utilized the grid and structure as a template. I actually did many sites for this company this way here are just to examples of websites that were laid out in Photoshop before they were coded.

In Photoshop once the site is designed, it can be sliced and exported for too. Many designers do not have extensive web coding knowledge and by using Photoshop these designers are able to produce working websites. Taking things even a step further designer’s can utilized the bridge and export web galleries without even knowing any html code at all.  These galleries are a quick and easy way to get samples live on a website. I actually designed a website for a client utilizing the bridge function. The client is a photographer and knows Photoshop and how to create the web galleries. I then utilized some code I knew to enable him to upload and change galleries continually without messing up his site. He also has a function for his clients where they type in their code he assigns and they can view their proof photos he has taken for them.  See this site at  www.alpinerose.com.

No comments:

Post a Comment