How to create graphics that "stretch" 2

[Quintios]

I'm very new to this (as you'll figure out when I attempt to explain this.)

What I'm looking at is the graphic that will appear at the (usually) top of a web page. For example:

http://www.thetemplatestore.com/vie...nk=http://www.thetemplatestore.com/glhorizons

What I see when I click that link is a blue bar that initially has 90 degree angles. A moment later, as the page loads, the angles are smoothed off into rounded off edges. Furthermore, when I change the size of the browser, the horizontal length of the graphic changes to accomodate the visible width, until the text at the left and right are almost touching. Then the graphic does not change as the browser width decreases.

What is being done here? Is there a technical term for this? How can I learn to do something similar?

Thanks in advance,

Onwards,

Q-

 

[Wullie]

Hi mate,

It is called a "liquid design" in this industry.

There are a few steps to doing this.

Instead of the using pixels for width, use percentages.

eg. <table width=&quot;100%&quot;>

In your images, stick to pixels as the page will look bad if the images stretch or contract.

To get the image to look like they are stretching, you dont actually stretch any images, it can be achieved by adding a background image to the table. As the table expands, the background image repeats and looks like the graphic has stretched.

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.mailtosanta.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

 

[cropc]

Wullie is correct. You say you are new to this so I thought I might clarify a bit.

&quot;liquid design&quot; is used to describe web techniques that stretch to fill the web browsers window. There are many different ways to do this, but the example you gave uses an HTML table.

An HTML table creates a grid like a tic-tac-toe board made up of rows and columns. Each square in the grid is called a &quot;cell&quot;. Each of these cells can be given a different background color and width.

The table stretches to fit the web browser window by setting the whole table's width=100%. The individual cells are given different widths. The left side column's cells are given an exact width in pixels. The center column's cell that shrinks or expands to fill the browser window is given a percentage width, probably 100%.

In the example you gave some of the cells where given a blue background color and others a white background color. The very top and bottom cells that have white fading into blue are done by using a repeating background image for the cells. As you noted, when the page first loads the corners are 90 degree angles. This is because the HTML table's cells are square. At each place a rounded corner is needed a image file is used to fill in the cell. The image file is of a blue and white rounded corner. The table is rendered first and the image files fill in as they are fully loaded.

I am not sure where there is a good tutorial on just this type of design. But you can easily find tutorials on tables, cells background colors, cell background images, and how to create rounded corners using image editing programs around on the web.

Hope this helps,

cropc

 

[Quintios]

OK, now I'm starting to understand. The point you made cropc, about a fading blue background in one cell, that opens things up a bit for me, now I understand how that was done.

The other part of my question, the right angles that became curved, how is that done? When I was in enginnering school I believe we called that a 'fillet', but I could be wrong. I know how to create a rounded corner in Illustrator, but I guess I'm wondering why it didn't show up rounded to begin with but instead was at a right angle and *then* rounded itself off...

Also, I'm familiar with repeating backgrounds for regular web pages but they usually seem to be something that is repeated horizontally. How would you get an image that would fade from blue at the bottom to white at the top?

Thanks! You were both very helpful!

Onwards,

Q-

 

[deecee]

well the image is the same height as the cell for starters, all it is is a rectangle with a white to blue gradient at 90 degrees

the way you get rounded corners in a website is you use imgaes to round off the &quot;square&quot; look of cells and tables

if you run your mouse and select everything on the page you will see that rounded part is just and image in a cell. thats it, its all about positioning and what not.

If you attack your page with a solid site that is drawn out well on paper and you have a visual that you draw up in photoshop then all it takes is some time and love
sleep is good