Graphics and Templates

Building a Web Page in Adobe Photoshop

Posted on: May 5, 2011

Mostly Adobe Photoshop is used for editing photos and images but at the same time it has a number of other uses as well. For example, Adobe Photoshop is used for designing web page layouts. Using Photoshop for this purpose allows user to use a number of tools, options and other available functions. If you are also interested in creating a professional looking Web page, you can use Adobe Photoshop for this purpose. Are you thinking how? Here are some simple steps that will explain you how it can be made possible:

  • If you like to add photos, images, drawings and logos in your Web page, then load them onto your computer. This can be done by copying the image from camera, CD or any other sources.
  • Now open Photoshop and select New from the File menu. A dialog box will appear in which you will enter the height and breadth of Web page. This can be done by entering these numbers directly or choosing them from preset drop-down menu. The resolution should be at 72. Now you are required naming document as Web page one and then you will click OK.
  • To make a selection on the canvas, you will select the Rectangular Marquee tool. Now use paint bucket tool to fill banner selection with your desired color. In order to create all shapes which you want to add in your Web page, continue using the Rectangular Marquee.
  • From the File menu, select Open. A dialog box will come into sight in which you will locate the images which you wish to use. Open all the images and in each open photo document, right-click on the layers in the Layers palette. Choose duplicate layer from the options and in the dialog box, you will require choosing Web page one as Destination. You will replicate this procedure to bring all images which you desire to be used into Web page document.
  • Go to Web page one document and select Edit from menu and then choose Transform. Choose Scale from the options and use tool to resize each picture and place it where you want it to place on the page.
  • Choose Type tool palette and then choose font style, size and color from the options at the top. Type your preliminary text for page. After that, you will type in all other text which you want to include in your Web page.
  • From the tool palette, choose Slice tool and use it to cut page into slices. These slices will reflect elements of page.
  • From the menu, select File and choose Save for web or Devices. In the dialog box that will become visible, select GIF as a file type and click Save. Give name to your file and save it in the dialog. Adobe Photoshop will keep your image slices and as well as an HTML Web page that you can load onto your host.

These were simple steps to create a Web page in Adobe Photoshop. Hopefully these will help you a lot.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: