Create Web Page using Photoshop

Written by AJSPM on November 25th, 2009

While there are a number of different ways to create websites, the best way to get a professional graphic look is by using Photoshop. Cincinnati Websites also offers expert service in Photoshop. Cincinnati Web Designers do various Photoshop driven website designs. Photoshop throws a wide range of possibilities at you. Pick the necessary tools and work around the layout most suited to your product. This has many add-ons, plug-ins and additional tools for creation and editing of the images. The plug-ins and add-ons can be easily downloaded from various online sources for free. Photoshop itself is fairly complicated software and expertise comes with practice. However, these basic steps allow you to create a simple and straightforward web page design.

Go to File menu and select New. Enter the width as 1024 pixels and height as 768 pixels. This is the default window size and is universally accepted in all browsers. Set the resolution to 72 pixels/inch and the color mode to RGB color, 8bit. Background contents have to be transparent. Click OK.

Create a header and a basic navigation design. Ensure that you include the company logo, a banner, some graphics and navigation buttons. The header height has to be at least 150 pixels with about 30 pixels for buttons. The logo, graphics and text can be placed in the remaining area based on your design. Add only placeholders for text. This will have to be later updated in some web development application like Dreamweaver.

To edit or resize graphics go to Edit > Transform > Scale. Resize the image with the resizing handles provided around the image. To scale proportionately press down the shift key and resize.

Buttons have to be created for navigation within the website. Select the Type tool from the Tools window. Click and drag the text box on the screen and type a name of the button such as Home or Contact Us.

The contents in the body area of the website have to be designed and placed in the required slots. Ensure that your layout is clear enough and meets the requirement of the product offered in the website. If your website has to provide many links, add additional links on the left column. Use the Type tool to place the body text in main content area of the canvas. Add some dummy text as a place holder. This can be replaced later when the content for the website is ready.

Add footer contents below the main contents. These will include your company’s logo, copyright information and some of the important links from the header. The right column of your web site layout can have latest news, announcements or advertisements. Optimize all the images that will be published on your website.

Click on the File menu and select Save for Web. Ensure that your quality is adjusted to the right amount of clarity and size. Click Save.

Double click on the HTML file which will be in the same directory as your image. Check the designed webpage layout in your browser window. You should have a completed webpage design on your screen.

This entry was posted on Wednesday, November 25th, 2009 at 6:13 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.