common object example

Summary:

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.


Learn About:

Slice Tool in Photoshop Save for Web and Devicesindex.htmlmargin: autoinline .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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Begin Slicing your buttons, header, content area, everything …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #4: Where? Root Folder ~

Find the Root Folder for your web site and save it there …

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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 …

replace


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.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Select that id by clicking on it …

table id


Step #8: New CSS ~

Open the CSS Styles panel by going to: Window > CSS Styles or hit Shift+F11

CSS

Click on New CSS Rule.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #9: Create a Tag ~

If you select the id in code view before you create the new CSS rule, the Tag creates itself …

table id

Hit OK and then click Box

Set margin to auto

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Remember: margin: auto centers your composition in the middle of your page …

centered web page


Last Step: Save and Attach ~

Save your document and attach.


Other Resources: