Website slicing in photoshop

Designing a website includes

  • Designing web layout in photoshop
  • Slicing &
  • Converting into HTML in dreamweaver

website-slicing-in-photoshop

A basic website has

  • Header must have the logo and name of the company.
  • Buttons contains the name of the pages for navigation with the link
  • Body area contains the content for the current page and the design.
  • Footer contains the content for copyrights of the company.

Website layout is designed in photoshop and sliced. Slicing in photoshop is a process where the website layout is cut into small images. Tool used for this process is slice tool (shortcut ‘K’).

Maximum width to design a website is 1024pixels to avoid horizontal scroll in the browser. We have done a web layout for pets at a size of 800 x 782 pixels. Images and graphics are sliced in photoshop whereas the contents can be recreated in html.

  • Open the web layout in photoshop.
  • Select slice tool(K) and draw over the area of website which has to be sliced.
  • After slicing, a blue line will be created around the sliced area.

website-slicing-in-photoshop

  • Only the images, different fonts and gradient are sliced whereas contents and solid colors are recreated in html.
  • Go to file > save for web & devices
  • Select the location and folder where the images to be saved.
  • Sliced images can be saved in different forms of gif, png and jpeg based upon our requirement. Animated slices are saved as gif files.

website-slicing-in-photoshop

  • Name the slices and select the type to be saved.
    • HTML & images – sliced are saved as images and HTML document is created with the slices.
    • Images only – saved as images only.
    • HTML only – saved as html document only.

website-slicing-in-photoshop

  • Select the settings to be default.

website-slicing-in-photoshop

  • Slices
    • All slices – save all slices.
    • All user slices – save the slices created by the user manually.
    • Selected slice – save only the selected slice.

website-slicing-in-photoshop

  • Save the slices.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>