How to Build Website With Photoshop

By Elizabeth Smith

  • Overview

    Adobe PhotoShop is a powerful photo and graphics software program that can be used to develop complex websites. It allows you to choose color, imagery, and text, allowing you full creative control.To get PhotoShop, visit Adobe's website; if you are a student or teacher, be sure to look for the education pricing, which can be significantly less than the regular price.
    • Step 1

      Create a website document. From the File menu in PhotoShop, choose "New." In the window that pops up, choose the size of your website from the Preset drop-down menu, or enter your own dimensions in the Width and Height boxes. Common website sizes are 800 x 600 pixels and 1024 x 768 pixels. Keep in mind the size of a common browser, and be sure not to make a website that will be too wide. Save your document in a location that you will remember.
    • Step 2

      Lay out the basic structure. When working in PhotoShop, the amount of options can be overwhelming; it is often helpful to sketch your design first. Use the "Text" tool to create areas for type; consider filling the area with placeholder text to better imagine what the page will look like. Insert images by selecting "Place" from the File menu. To create shapes, use the "Rectangle Tool" or other shape tools from the Tools palette. To change the colors of an object, double click on the colored box next to its layer in the Layers palette. When designing your home page, remember to create a navigation menu to direct users to different pages on your website.

    • Step 3

      Create a content page template. Once your home page design is in place, create a content page template by choosing "New" from the File menu and selecting the same size. Alternately, you might want to save a copy of your home page to preserve your header, footer, colors, and text styles. Use the Text tool to create a space for new text, and place images where you would like them to appear. Make sure that your content page looks like it belongs with the rest of the website.
    • Step 4

      Slice your website file. Once you are satisfied with your website home page and content page, you will need to slice the files. Slicing creates a set of smaller images which you can import into a web development program such as Adobe Dreamweaver. To slice your file, choose the "Slice" tool from the Tools palette. Click and drag to create separate slices. Choose sections that are reasonable and easy to line up, such as a header image, navigation bar, content area, and footer. To export your images, choose "Save for Web" from the File menu, choose a location, and hit "Save."
    • Step 5

      Import your images into a web development program. To create an HTML file, you will need to build a table using your sliced images. The table will line up your files, and you will be able to create links that turn a button image into a functioning button, add text, and insert video. Website building programs to consider are Adobe GoLive and Adobe Dreamweaver.
    • Skill: Moderate

    Trending Now

    © High Speed Ventures 2011