Use Photoshop to Design a Website

There are many ways for creating websites, Photoshop is one of them.

Steps

  1. Download and install Photoshop
  2. Open your Photoshop version on your personal computer and create a new document with the height and width set to what you choose (normal width is 800px-900px, normal height is 1200px-1500px).You can name the folder (optional).
  3. Create a header for your site (from an existing image or from scratch) and with your website's logo embedded into it.
  4. Create your site's menu buttons (shape and color, space between them, as an upper menu, bottom menu, right or left side menu or a combination of two or three sets of menus, etc...)
  5. Create the content area, the footer area, a place to put banners on, a place for a photo gallery and so on, until you have finished the general looks of your site.
  6. Now for the hard part: in Photoshop, slice and export your finished site, by giving names to all the slices before exporting (for example: mark the area that is the header with the slicing tool and name it "header", mark the area of the Home button and name it "home button" and so on to every separate part of the website).
  7. It is advised to leave the content area empty as you are only saving it as image slices and the text will show up as a part of the image, when empty, you can add each page's content separately.
  8. Export it to a new file on your desktop, the export will create an HTML file (which will be your internet page, not yet centered and without content), a CSS file, and an Images folder with all the different slices and images inside it.
  9. Open the HTML file with OneNote or Notepad and make your changes in HTML (center the whole page, set a background color to the whole page, put the content in a div tag where the content image is sitting, or create a few paragraphs by using the P tag inside the div tag, create the meta data for key words, content and so on...).
  10. Copy and paste the same HTML page as many times as the number of the webpages you have, but then be careful to rename them to the related pages (ie.Home.html, AboutUs.html, ContactUs.html and so on...).
  11. Create internal links for the pages in the HTML files (or do it before creating more pages so you won't have to repeat yourself) where the button image code is by creating divs and giving the buttons link addresses.
  12. Upload your finished site's files to the host.

Tips

  • Photoshop is easy, just learn it well, you'll do great things.

Related Articles

Retrieved from "https://kipkis.com/index.php?title=Use_Photoshop_to_Design_a_Website&oldid=315624"