Photoshop and Dreamweaver Tutorial for Creating an Expandable / Stretchable, Rounded-Corners Table To Place Your Content in a Content Box (Page 4)

PREVIOUS PAGE (3)

(5) I suggest that you hide the path so that you can see the way the rectangle is looking without the annoying path showing up. This might already be hidden on your settings, but if it isn’t, go to the top Photoshop menu, and click on ‘View’ and drag down to ‘Show’ and if ‘Target Path’ has a ‘checkmark’ next to it, select it so that this path will be hidden. (A check next to an option, means that it is on.)

This is What the Rectangle looks like so far.

(6) Now it is time to slice and cut up our rectangle so that we can bring these pictures over to Dreamweaver and eventually the web. Go to the Photoshop ‘Toolbar’ and select the ‘Rectangle Marquee’ tool pictured below:

At the top of your Photoshop screen, you will see a box that says ‘Feather’ (pictured below). Make sure that it says ‘0 px’. If not, type in ‘0′.

(7) Drag and select a section of the top part of the rectangle. You need to get the entire rounded part of the corners selected, like I did below. You don’t need to select further than where the shadow (glowing edges) stop.

After you have selected the top portion of the rectangle, go to the top Photoshop menu and click on ‘Edit’ > ‘Copy Merged’.

Now go to Top Photoshop Menu and click on ‘File’ > ‘New’. A new Photoshop window will open at the same window size that the picture you just copied. Go to the top Photoshop menu and click on ‘Edit’ > ‘Paste’. Now the image you just copied is pasted in a new Photoshop Document. Now Click on ‘File’ > ‘Save for the Web’ in order to save and optimize your web graphic properly for the web.

The ‘Save for the Web’ Window will open up. Under Settings, scroll down to ‘GIF’ and for Colors choose ‘16′. Click on ‘Save’ to save your images to a folder.

Save your file as ‘tabletop’, ’save as type’ should already have ‘gif’ selected. Hit Save.

You can either do the same thing again for the bottom border of the table or you can simply flip the canvas (image) over. Go to the top Photoshop menu, click on ‘Image’ > ‘Rotate Canvas’ > ‘Flip Canvas Vertical’.

Save this bottom image as ‘bottomtable.gif’

(7) Now we are going to save the background image that will be tiled later in the center of our table. This will be the part of the table that allows us to expand it without losing the border’s continuity. On the Photoshop toolbar, click on the ‘rectangle marquee tool’ again. On the top of Photoshop screen, you will see the options that are pictured below appear. For Style, scroll down and select ‘Fixed Size’. for width, type in ‘455′ and for Height, type in ‘1′.

Below is what this will look like after you type in these options.

Now you should select ‘Copy Merged’ again, by going to the top Photoshop Menu and clicking on ‘Edit’ > ‘Copy Merged’.

Open up a new Photoshop Document and Paste it in by clicking on ‘Edit’ > ‘Paste’. And this is what it will look like (below).

Save for web as ‘middle.gif’.

(8) Now it is finally time to use Dreamweaver. Create a New Dreamweaver Document by Clicking on the top Dreamweaver menu and select ‘File’ > ‘New’. You will be taken to the ‘New Document’ Window. Select ‘Basic Page’ under Category and ‘HTML’ under Basic Page.

(9) Go to the top menu bar of Dreamweaver and click on ‘Modify’ >’Page Properties’.

A new window will open up, where it says ‘Background Color’. Type in the same background color as our Photoshop document used…”#E9DAB3″.

NEXT PAGE (5)

Our Sister Sites : Graphics Tutorials Search - All Web Design Resources Portal - All Graphic Design Resources - Education Directory - All Schools & Learning - All Traveling Family Vacations  - Graphics ’N Graphic Design Blog

DID YOU LIKE THIS DESIGN POST? IF SO, PLEASE HELP US BY ADDING US AS ONE OF YOUR TECHNORATI FAVORITES AND BY ADDING OUR ARTICLES TO YOUR FAVORITE SOCIAL BOOKMARKING SITES (BELOW)