textured background

Hello,

I’m a complete Freeway newbie, being just about to create my first Freeway site.

My first site was made with iWeb, and I’ve got the following question: is it possible to fill the background to the page not with ‘just’ colour but to also create a slightly textured look ?

I’ve been browsing the manuals but actualy have no idea where to look.

I also have Pixelmator, and was wondering whether I should create an inage there and import it …or whether this would slow down the site’s loading time, if the complete background to every page was a graphic.

Please fill me in on the possibilities.

Thanks, SeaDream


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The normal method to do this is to create a background image - in something like Pixelmator - but not as the full size of your page.

Instead create an image that is either 25px wide and the height of your page or 25px high and wider than your page.

Then in the page background settings you either tile your image horizontally or vertically. This way your image size is kept as small as possible.

You can also use a lot of jpeg compression on a bg image to further reduce the file size.

This page has an example http://deltadesign.co/background.html

If you right click on the image and open it in a new window/tab you might get a better idea. Not a great example I know but…

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK.
I’d read about tiling an image but hadn’t grasped the full significance. Do you mind if I ask for further clarification: why should the image be wider than the page ?
Thanks for answering,
SeaDream


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

hy should the image be wider than the page ?

Because a background image will stretch the full width of a browser window - beyond the width of the page size you set in FW.

So if you want the bg to continue either side of the page then it has to be wider than the largest screen likely to view your site. A 27" iMac screen can display 2560 pixels wide even though your page may only be 960px wide.

Of course it does depend on what effect you are trying to achieve.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here is another v quick example showing the bg image inset into the page (at a reduced size) http://www.deltadesign.co/backgroundmetal.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I thought I’d post a couple of links to sites showing the kind of thing I had in mind:
http://marcodevincenzis.com/
-here there seems to be a paper-like texture as well as the mottled effect.

http://www.none-design.de/
-the slightly mottled effect in the boxes on the RH side, and the blue strips on the LH side.

SD


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The marcodevincezis site uses quite a big step and repeat graphic (50kb) in the background - http://marcodevincenzis.com/images/bg.png The non-design one uses a small (0.34kb) step and repeat graphic -http://www.none-design.de/wp-content/themes/secrettribune/images/bg.jpg and here’s the blu bar at the bottom of the content boxes - http://www.none-design.de/wp-content/themes/secrettribune/images/post-bot.jpg

One of the best ways to see how other sites are built is to use FireFox with the Web Developer Plugin

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 12 Jun 2011, at 05:49, Helveticus wrote:

One of the best ways to see how other sites are built is to use FireFox with the Web Developer Plugin

You can also use the Developer tools in Safari—just right-or-Control click on the page and choose ‘Inspect Element’. You may have to enable them in Preferences first.

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul and Marcel, thanks for you input.

What really interests me is how the graphic effect of the original smallest image was achieved: by a gradient ? or gradient + somehting else ?

Can you suggest anything here, which I can then try out ?

My experiments with gradients have given me a smooth surface, and not one which looks as though it has some texture, as in both of these.

On the none-design site, if this is only a gradient, then one can see individual ‘points’ or dots’ but I haven’t been able to reproduce this.

Bye for now, SD


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What really interests me is how the graphic effect of the original smallest image was achieved: by a gradient ? or gradient + somehting else ?

The texture is just part of the image same as the gradient. If Photoshop is used to create the gradient you could also easily add texture to it via a layer effect.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Chuckamuck,

I have Pixelmator where I’ve gathered that there are similarities with Photoshop. I’m using that for the first time too. Again, my reading of the manual+tutorial watching hasn’t yet shown me where to begin, to create a texture like this.

Would it be using filters ? If you can point me in the right direction I’d be very grateful.

Thanks,

SeaDream


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Would it be using filters ?

I a word, yes. I haven’t spent much time with Pixelmator to give you a definitive method, but after playing around for a few minutes I can suggest a way to get a simple brushed metal pattern on a gradient.

  1. Start a Pixelmator doc and apply a gradient to the background layer.
  2. Add a new layer above the first and fill with white. Change Blending mode to Multiply.
  3. With white layer selected pull down the Filters menu and select Stylize, Noise. Set noise amount to 50% and check the Monochrome box and click Ok.
  4. Once again pull down the Filters menu and select Blur, NI Motion. Set Angle to 90 degrees. Set Radius where it looks good to you, I like it around 40. To get a bit of waviness to the blur set the Pixel Aspect Ratio low, around 0.35 and click Ok.

That’s it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks a lot, Chuckamuck


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options