Help with creating a rounded rectangle

[dthomas31uk]

Hi, How do I go about creating the rounded rectangle in the following link

http://www.breezemedia.co.uk/

Is it possible to use a gradient on a stroke of a rounded rectangle, to create a shading effect.

I presume that the rounded rectangle is created to acheive the example on the website and then it gets sliced up to suit.

Any advice how I can acheive the round rectangle with a shaded effect all the way around???

Cheers guys

 

[rhyno2k]

dthomas,

If you're referring to the white rectangle that's framing the site... it simply appears to be a white rounded rectangle with a soft drop shadow created in Photoshop, and sliced up in Dreamweaver.

You can apply gradients to strokes in Illustrator (just select the object's stroke and click a swatch), but this would be much easier made in Photoshop.


--rhyno

 

[dthomas31uk]

Cheers for that. Thanks

 

[itchybug]

D:

(Before starting, set your Raster Effect settings at 72 dpi, and make sure you're in RGB mode and have "Pixel Preview" on)

Start with a large block of the BG color and a white rectangle:

Next, round the corners, Effect>Stylize>Round Corners:

Add a new fill (From the Appearance Palette flyout, choose "Add New Fill"), then drag the new fill down below the original fill, and make it Black. I included a pic of the Appearance Palette so you can see what it's supposed to look like:

Leave the Black fill line item selected, and go to Effect>Distort & Transform>Transform, enter a -1 px value for Vertical Move, then go to Effect>Blur>Gaussian Blur, set at 2.5 px. Also, in the Transparency Palette, set the opacity at 50% and Multiply:

Lastly, set your crop marks to cut a small portion around the top left corner, repeat for all 4 corners, and crop a small chunk of each side:

Use CSS to position them in such a way that you have a division with those chunks as corners and sides (repeat the side chunks), on the colored BG, filled with a white BG.

Hope this helps a little to get you started.

Bert Philippus -

http://www.itchybug.com

 

[dthomas31uk]

wow thanks bert will give that a try cheers

 

[itchybug]

Here's a quick example (using a Table, but you could also use Divs) of a page with that particular 'look':

http://www.itchybug.com/shadowbox/

Bert Philippus -

http://www.itchybug.com

 

[dthomas31uk]

cheers for that itchbug thats great mate. thats just what I am after. gonna have a go later...cheeers. will let you know how I get on

 

[itchybug]

It's not the best css (I'm sure it could be streamlined by any expert) but it'll do. My main point was to show you a way to do it that's not too heavy on the file-size end, and in this case you're actually only working with 4 20x20px corners, and 4 2x20px sides (very quick), as opposed to slicing and using a 600x400px block of useless wasted space.

HTH

Bert


Bert Philippus -

http://www.itchybug.com

 

[dthomas31uk]

Thats a good point. Will show you my link when I get it done. Thanks mate