dcsimg
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs
SEARCH SITE / SITE MAP : BOOKMARK US! : GRAPHIC DESIGNER JOBS : GRAPHICS SOFTWARE TUTORIALS : GRAPHICS SOFTWARE : : GRAPHIC DESIGN BLOG : DESIGN EDUCATION
 


 

Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.
 

AddThis Social Bookmark Button

Search Design Schools

Zip Code:

Subject:

Degree:

Online Campus Both

home > Web Design Tutorials >How to Content Box that Expands with Rounded Edges - Tutorial for Photoshop and Dreamweaver

Photoshop and Dreamweaver Tutorial for Creating an Expandable / Stretchable, Rounded-Corners Table To Place Your Content in

Have you ever wondered how other web designers have created those neat tables with rounded-cornered borders that expand as content is added within them? The Ones that look like the table below.

 

 

 

If I were to type into this table you would see that the table's border expands with it. Look below, this is the same exact table:

 

This is the same exact table as the table above. This stretchable table expands as I type. The tops border and bottom border are images. The entire middle of this table is a background image that is being tiled behind our text. We have a table with 1 row and 3 columns pasted over the background image.

 

No. This table isn't magic, it is actually quite simple to create if you follow this tutorial carefully. If you don't have Dreamweaver, you can copy and paste the html from here into your html editor. Also, if you feel like skipping the Photoshop section, I have zipped the images that you need into a folder. You can download them here.

How to Create the Amazing Stretchable Table with Rounded Corners

(1) Open up Adobe Photoshop or a similar image editing application. Before we open up a new document, we are going to set the background color to #E9DAB3. This will be our background color. Click on the Toolbar's Foreground color square, this is the box that is circled in red below.

Photoshop's Color Picker will open up. Next to where you see the "#", type in E9DAB3. This will be our background color. Obviously after this tutorial, you can change the background color to meet your needs, however, for the purpose of this tutorial, please use this color. Click the 'OK' button to select the color.

Click on the 2-sided curvy arrow next to these color squares to switch the foreground color to the background color.

In Adobe Photoshop, switch the foreground color to the background color

(2) Open up Photoshop and Create a New Document by Going to the Top Menu and Clicking on 'File' > 'New' as shown below.

Adobe Photoshop New

The 'New Document' Window Appears. For both the Width box and the Height box, type in '500' For Contents, click on the 'Background Color' radio button. This will open up a new document with the background color that we just selected in number 1 (above).

Adobe Photoshop New Document

(3) Now we are going to start making the rectangle with rounded corners. This will be what our expandable table will be created from. Go to Photoshop's Toolbar and Select the 'Rounded Rectangle Tool'. If this tool isn't present, hold down your mouse on the icon 2 above the magnifying glass icon (look below) and a little screen will open up, from there you can select the 'Rounded Rectangle Tool'.

Adobe Photoshop Toolbar with Rounded Rectangle Tool Selected

(3) On the very top of Photoshop you should see a toolbar that opens up that looks like the below image. When you find it, type in '15' for Radius, 'no style', and 'white' for the color.

Rounded Corner Rectangle options of radius, style, and color

The radius is to tell Adobe Photoshop how much of a curve you want on your rounded corners. The lower the radius number the more that the rounded cornered rectangle will look like it has corners ....and the higher the number, the more your rounded cornered rectangle will look like a circle.
Here is the difference. This one has a radius of 60 rounded corner rectangle with radius of 60 looks like a circle and this one has a radius of 5 rounded corner rectangle with radius of 5 looks like a rectangle

(4) Click on the Photoshop Screen and drag down to the size that you want, making sure to leave some room around the borders for the glowing edges that we create later.

This is what our rounded rectangle looks like so far.

our rounded rectangle example

(5) Is your 'Layers' window open yet? If not, go to the top menu bar and click on 'Windows' > 'Layers'. Now the below window will open up. You will see a new layer above the 'Background' Layer. Double click on the name of the layer, and rename the layer to 'Resizable Table'.

rename photoshop layer

An alternate way of renaming this layer is to click on the little triangle that is pointing towards the right and a new window will open, drag down and click on 'Layer Properties'. Here you will have the option to choose another name for the layer.

photoshop layer properties to change layer name

(5) You should still have your 'Layers' window open. There should be 2 squares in the 'Resizable Table' layer. Now you should right click on the square that is on the left of the 'linked' icon. (it might be on the right in your Photoshop) A window pops up...you should drag down and select 'Blending Options...'.

right click on the layer box and click on blending options in layers window

A new window opens up called 'Layer Style'. Click on 'Outer Glow' so that it is checked and highlighted, like the picture below. Now you should set the Blend Mode to 'Normal', Opacity to '30', Noise to '0', Technique to 'Softer', Spread to '44', Size to '16', and Range to '100'. Then click 'OK'. When you finish this tutorial, I suggest that you come back here and create your own special effects with this tool. The images that you can create with the 'Outer Glow' and the other 'Layer Styles' are limitless. Try it out when you get a chance (although I have a feeling that you already have in the past).

Layer Style Photoshop Window, click on Outer glow and set measurements

(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.Rounded Borders on a Resizable Rectangle

(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.

Picture of selected portion of rounded cornered rectangle

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

Photoshop copy merged window

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.

Photoshop Save for the Web Screen

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 for the Web Screen 2

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'.

Photoshop Rotate Canvas Flip 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'.

fixed style rectangle marquee options

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

Adobe Photoshop Fixed Size Option Rectangle Marquee

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".

(10) Now it is time to insert our table. Go to the top Dreamweaver menu bar and click on 'Insert' > 'Table'.

The 'Table' window will open up. Enter '3' for Rows, '1' for Columns, and '455' for Pixels. Make sure that the cell padding, border, and cell spacing are all '0'.

(11) Now it is time to save our Dreamweaver file, otherwise Dreamweaver will give you a warning message when you try to add images. Go to the top menu bar and click on 'File' > 'Save as'.

The 'Save' window opens up. Where it says 'File Name', type in expandabletables.html.

(12) Now click in your table within the top row as shown below. Now go to the top Dreamweaver menu bar and click on 'Insert' > 'Image'.

The 'Insert Image' window will open up. Find the image that you saved from Photoshop, called 'toptable.gif', and select the file. Click on the 'OK' button.

Now click in the table's bottom row. Repeat the above step to find the image called 'bottomtable.gif'. Now your table will look like this.

(13) Now for the tricky part of this tutorial, the part that most people don't know how to do. For the middle of the table we are going to use the 455 pixel x 1 pixel image that we created in Photoshop called 'middle.gif'. We are going to tile 'middle.gif' within the table's middle row. If this table gets larger, this image will repeat itself and expand from top to bottom and appear as if that 1 pixel wide image is as big or as small as the table gets.

Is your 'Properties' toolbar opened on the bottom of your Dreamweaver screen? If not, go to the top Dreamweaver menu bar and click on 'Windows' > 'Properties'. The Properties bar will now open. If there is a triangle pointing downwards at the far right of the 'Properties' bar, then click on it in order to expand the bar further. The arrow will point upwards if you do this correctly.

(13) Now click in the table's middle row and then find the folder next to the 'Bg' as shown below. (This folder will allow you to browse your computer for the image we are going to use as the tiled background). You should then find the image 'middle.gif' and insert it.

(14) Your table is starting to come together. Look at it, it looks just like the first image that I showed you in the beginning of this tutorial.

(15) Now all that is left to do is to insert a second table within the middle row. This will allow the text to stay within the table as you type. Otherwise, without this embedded table, the text would go outside the border walls. So put your cursor in the table's middle row and go to Dreamweaver's top menu bar and click on 'Insert' > 'Table'. When the 'Table' window opens, create '3' columns, '1' row, and a width of '100%'. You will see 2 draggable column borders. Drag these towards the outside of the table (drag the one on the right towards the right, and the one on the left towards the left). You can drag them as close or as far away to the border as you want, It depends on how much padding you want around your text. In the picture below, you can see what these draggable column borders look like.

That's it!! You've created your very own expandable table with rounded corners.

Below is the HTML to use if you don't have dreamweaver. Just put your cursor in the box below and click on 'Ctrl' A to select all and 'Ctrl' C to copy it. You can then press 'Ctrl' V to paste it into your HTML Editor.

You can download the images here (zipped).

SOME OTHER ARTICLES AND TUTORIALS FOR CREATING EXPANDABLE ROUNDED CORNERS, BOXES, TABLES

CSS and Round Corners: Build Boxes with Curves - One of the main reasons why designers use images on a Web page is to create curves and round corners. It's currently impossible to create any kind of curved shapes using pure HTML, so images need to be applied. The problem? Putting these images into an HTML document with a table layout can create a large amount of superfluous code. In this tutorial, we'll use CSS to create this box with round corners, without an <img> tag in sight!

How to Create an Expanding Header for HTML and Photoshop - If you thought that tutorial was cool then you will love this expandable header tutorial.

Design a Coded Box - This tutorial uses Adobe Photoshop and Dreamweaver as well. Keep in mind this tutorial will not give you every color used. Allthough source files will be provided if need be.

Slicing and Coding a Content Box in Photopaint and Dreamweaver - This tutorial will show you how to slice up a basic content box and use DreamWeaver to create the tables and format the box to accept content without displaying a mess whenever the content is too much or the size of the browser window is changed etc.

Advanced Slicing - A tutorial for advanced ImageReady slicing. Learn how to cut up and slice an rounded box in ImageReady in order to create a content box and bring it into any HTML or text editor to use it for content.

The Trick to Rounded Corner Tables - One technique that has always been of interest to new Web designers is building rounded corners for the tables in their site.

Adobe GoLive Rounded Corners - This tutorial is going to explain how make a nice curved border around some text. The trick is to make the border look the same in all the common types of browsers, which is not as obvious as it might seem.

Free! Fireworks Basics: From Navigation Graphic to Stretchy Table - In this free tutorial Joyce J. Evans author of many well-respected books including Macromedia Fireworks MX 2004 Zero to Hero, takes us through some basic Fireworks manipulation to build an effective curved navigation graphic. Then Joyce extends this to show us how we can use the graphic to build a stretchy table in Dreamweaver

Flash Tools and Utilities - Flash Software and Shareware

Flash Clipart / Flash Graphics
Flash Galleries / Flash Portfolios

Flash Tools and Utilities - Flash Miscellaneous

Flash Tools and Utilities - Flash Organizers and Viewers
Flash Tools and Utilities - Flash Browsers and Addons / Extras
Flash Tools and Utilities - Flash Audio / Sounds / Voices / Lipsyncing
Flash Tools and Utilities - Flash Screensaver Tools
Flash Tools and Utilities - Flash Projectors Files
Flash Tools and Utilities - Flash slideshows
Flash Tools and Utilities - Flash Optimization Tools
Flash Tools and Utilities - Flash Navigation Tools
Flash Tools and Utilities - Flash Graphics and Animations Alternatives and Tools
Flash Tools and Utilities - Flash Encryption and Protection
Flash Tools and Utilities - Flash Chart Makers
Flash Tools and Utilities - Flash Actionscript Editors and Generators
Flash Tools and Utilities - Flash Desktop Wallpaper Tools
Flash Tools and Utilities - Flash Video Convertor Tools
Flash Tools and Utilities - Flash Text Effects Tools
Flash Tools and Utilities - Flash Server-Side Tools
Flash Tools and Utilities - Flash Screensaver Tools
Flash Tools and Utilities - Flash Prentations, Demos, and Simulations Tools
Flash Tools and Utilities - Flash Mobile Development Tools
Flash Tools and Utilities - Flash Extraction and Decompiling Tools
Flash Tools and Utilities - Flash SWF Conversion Tools
Flash Tools and Utilities - Flash 3D Tools and Engines

 

AddThis Social Bookmark Button


[CaRP] php_network_getaddresses: getaddrinfo failed: Name or service not known (0)

DESIGN DIRECTORY : PORTFOLIO FREE : GRAPHIC DESIGNER JOBS : GRAPHICS SOFTWARE TUTORIALS : GRAPHICS SOFTWARE

WRITE ARTICLES FOR US & FREE PROMOTION OF YOUR GRAPHIC DESIGN BUSINESS

We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. AllGraphicDesign.com gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here

 

 

Please click here to visit our sponsor

Graphic Design Menu


[CaRP] php_network_getaddresses: getaddrinfo failed: Name or service not known (0)

BOOKMARK THIS PAGE! :: MAKE US YOUR HOMEPAGE  :: SIGN UP FOR NEWSLETTER :: ADD YOUR PORTFOLIO FREE :: DESIGNER JOBS :: FREELANCER JOBS

OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2016 QuinStreet, Inc.