How to Create a Web Page Draft Using Photoshop
Websites have been around since 1991, when Tim Berners-Lee created the very first, text-only webpage providing information on the World-Wide-Web project. Since then, websites have been wildly popular as personal, business, entertainment and education hubs. In the last several years, website design has made great leaps. Web design is now very sophisticated, and has advanced far enough to rival the centuries-old field of print design in quality and craftsmanship.
Other People Are Reading
Instructions
-
-
1
Sketch out your site with a pencil and paper. Although computers have become the standard way to create any visual media, the best way to start the design process is to sketch your ideas out and refine them manually. The sketches don't have to be anything fancy; scribbles will suffice, so long as they give you an idea of what the site layout will look like.
-
2
Download a Photoshop grid template. Grid systems in web design are as important as in print design. The standard width for websites, for compatibility across screen resolutions and browser setups, is 960 pixels. So find a good grid system that uses the 960-pixel width standard and download the Photoshop template. There are plenty of excellent website grid resources available online.
-
-
3
Begin setting up your layout. Align your content to the columns of your grid template. Navigation usually goes along the top or the left side of the page. The site logo usually goes in the top right corner. Twitter and RSS icons usually go in the top left corner. Site visitors like to find things where they expect them, so stick to standard placements for a successful design. When you are finished setting up your site just the way you want it, save it as a PSD (Photoshop) file format.
-
4
Select the "Slice" tool in the Photoshop tool panel. Click and drag to separate the main divisions of the site. Slices create sections of a site that will then be saved as separate images. This makes it easier to code the website into HTML and CSS and make it look the way it did in Photoshop.
-
1
Tips & Warnings
Keep it simple! Usability is your first concern. You want people to have an easy time browsing your site. A site can be beautiful and simple at the same time.
If you don't want to code your own website, it can still go live. There are many companies that will take PSD files of web pages and turn them into a functional website. The prices for this service are often reasonable and provide a good option for those who know what their site should look like but don't want to learn code.
It is a temptation to use every bit of available space. But the less space you leave between site elements, the harder it is to read and browse. Remember, it is all about creating a good user experience.
References
- "Adobe Photoshop CS4: Classroom in a Book"--Adobe Systems; 2009
- Mark Boulton--Website Grid Information
