Slice a Webpage Background in Photoshop
● There are many ways to build web pages, even in Photoshop!
● Create a background in Photoshop and make a webpage out of it by using the Slice Tool.
✓ Slice Tool in Photoshop ✓ Save for Web and Devices✓ index.html✓ margin: auto✓ inline .css
• This tutorial is part of the Run and Jump Game Project.
Step #1: Open your Background in Photoshop ~
✗ Hopefully you've done this tutorial first …
✗ Get the Slice Tool which is behind the Crop Tool
✗ Begin Slicing your buttons, header, content area, everything …
Step #2: Save for Web ~
✗ Go to: File > Save for Web …
✗ Set your Optimisation options to medium.
Step #3: Save as HTML and Images ~
✗ Click the Save button and select HTML and Images
Step #4: Where? Root Folder ~
✗ Find the Root Folder for your web site and save it there …
Step #5: index.html ~
✗ Lastly, your home page must always be called index
✗ You probably already have an index page - go ahead and replace it …
Step #6: Open your index.html page Dreamweaver ~
✓ Open Dreamweaver and Double-Click the index page
Step #7: Table #id ~
✓ Photoshop makes Tables out of your sliced .psd file.
✓ Click Split in the menu bar
✓ Look for the id of the first Table.
✓ Select that id by clicking on it …
Step #8: New CSS ~
✓ Open the CSS Styles panel by going to: Window > CSS Styles or hit Shift+F11
✓ Click on New CSS Rule.
Step #9: Create a Tag ~
✓ If you select the id in code view before you create the new CSS rule, the Tag creates itself …
✓ Hit OK and then click Box
✓ Set margin to auto
✓ Remember: margin: auto centers your composition in the middle of your page …
Last Step: Save and Attach ~
✗ Save your document and attach.