Hi everybody,

 

I hope you are having a great day. Can anyone please let me know how make a background like the one found at http://mancub.net/? (http://www.mancub.net/wp-content/themes/ribbons/images/bg2.jpg)

 

I would really like to know how to make the the image fade on the edges and how to add a pattern just like the one found there. Any help would be greatly appreciated.

 

Thanks in advance!

All you need is a graphics program such as photoshop or fireworks (or GIMP is a free program many people recommend on these forums).

 

Then just get the pic for the background and then layer a black gradient on both sides.

You'll be able to find some patterns on SquidFingers, or a search with Google should pick some good ones up.

Hey Mody,

 

Atleast you need to know photoshop for creating these type of effects. So that after downloading the pattern thumbnails you can atleast implement it upto your requirements..

I would suggest Adobe Photoshop for this..

Thank you very much Mike, Rob, and Subhajit. I do know basic Photoshop (I use Flash and illustrator for most things and I am just a beginner). I know how to tile patters in Flash but not in Photoshop. Ill be trying to figure that out. The real ''problem'' I'm having is how to fade the edges of the image into the background. I've found a few tutorials but none was clear. Can anyone please guide me in the right direction? Is there any image fading tutorial you can recommend?

 

Thank you very much. I really appreciate it.

Thank you very much Mike, Rob, and Subhajit. I do know basic Photoshop (I use Flash and illustrator for most things and I am just a beginner). I know how to tile patters in Flash but not in Photoshop. Ill be trying to figure that out. The real ''problem'' I'm having is how to fade the edges of the image into the background. I've found a few tutorials but none was clear. Can anyone please guide me in the right direction? Is there any image fading tutorial you can recommend?

 

Thank you very much. I really appreciate it.

 

Hey Mody I think this is very easy and handy tutorial to fade images using Layer Mask. Please Click Here for the tutorial.

Hey Mody I think this is very easy and handy tutorial to fade images using Layer Mask. Please Click Here for the tutorial.

 

Thanks a lot Subhajit, I will check it out. Meanwhile if anyone else has any recommendations, please let me know. Any help is much appreciated.

Hi Mody,

 

I use fireworks which is very easy to fade images as there is a command for it. It fade out the edges while leaving the middle visible...

 

I would just create a container the width of the screen and center it by setting left and right margins in the CSS sheet to 'auto'. Then I would insert a div tag nested inside the container with a width of your faded image and set to relative (again centered) with the css background image as your design (eg. it may be about 500x500 pixels looking at it)...

 

Then, you can nest another div tag called (content) inside the tag that will be the main container for the rest of your iste etc...

 

Hope that helps.

 

Paul.

Hi Mody,

 

I use fireworks which is very easy to fade images as there is a command for it. It fade out the edges while leaving the middle visible...

 

I would just create a container the width of the screen and center it by setting left and right margins in the CSS sheet to 'auto'. Then I would insert a div tag nested inside the container with a width of your faded image and set to relative (again centered) with the css background image as your design (eg. it may be about 500x500 pixels looking at it)...

 

Then, you can nest another div tag called (content) inside the tag that will be the main container for the rest of your iste etc...

 

Hope that helps.

 

Paul.

 

Thanks bigdog. I do know how to code it and my only problem was creating a similar image. My GF has Firworks so I will check it out. Thank you for your help.

Hi Modi

I only joined this forum recently and I yhink this might be the first gtime I may be of some help.

I have been learning about photoshop more and more. I get a lot of help from www.talk-mania.com

There are lots of tutorials and just like this forum, there are lots of friendly helpful people ready to give great advice.

 

I hope this has helped in some way.

sorry for the bad spelling, i think someone else was controlling my fingers

Thanks sipaul, and don't worry about the spelling. I am not a native speaker so anything that looks like English passes for me. I will check the site out. Thanks again.

Hi Mody,

 

That's my site you have pointed to, thanks for visiting I am glad you liked the background. As for how it is made the posters above are more or less right. I used photoshop but I would imagine a similar effect is possible in other software. The image is made using a pattern (I got the image of the pattern from a web site unsure where I think I got there from searching damask patterns on google). Then I made a layer with a lighting effect (filer > render > lighting effect) and set it to overlay. I think i copied this layer a few times and used a few different blend modes, can't remember which I just experimented until it looked nice. When I got it looking how I wanted I added another layer with a radial gradient fill from the dark colour to transparent in the middle so that i could let it blend into the colour from the css background.

 

I have been using PSDTuts [http://psdtuts.com/] as a great resource for tutorials and got a lot of inspiration for the effects there.

 

Sorry if this is a bit rushed, I hope it helps in some way.

Woo, how cool is that? Someone posts a website as a reference and the owner turns up? I love WDF!

 

And welcome mancub

 

I was thinking that another way to do this, which would keep the file sizes down a bit would be to use two images.

You could have the pattern you wanted (not repeated) as a small gif or jpeg which is repeated on the html element.

 

Then you could have a second image which has the gradient fade from black to transparent and and back to black again, this could be just a pixel high and as wide as need be, and would need to be a PNG. This could be repeated on the y axis on the body element.

 

The draw back would be you wouldn't get quite the same effect with a window of pattern but a fade in fade out across the page, and that it wouldn't work in IE 6. But conditional comments could remove the background image from the body element so IE 6 would just see the pattern repeated and no fade.

 

The benefit would just be the lack of need for one large background image, which I tend to dislike using

What Eris said is a very nice way to do this, as it will be much more optimized than to use a single big image...

Regarding the IE6 issue, The PNG image can be displayed in IE6 by using Filters of CSS. See Below

This Code is for a background repeat PNG.

div {
background:url(example.png) 0 0 repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='example.png');
}

 

The Below code is for background no repeat PNG

div {
background:url(example.png) 0 0 repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='example.png');
}

 

Slight Description

 

The only change is in sizingMethod for making repeat or no-repeat.

Here the filter is given for IE6 and the backgroud property is used for other browsers.

 

Hope this helps you.....

Thanks Eris (that wouldn't be an Illuninatus Trilogy reference would it?)

 

Yeah that is a really interesting way of creating the effect, not quiet the effect I was after but certainly something I will find an excuse to use in the future. I love the possibilities of png transparency.

 

Subhajit: I am currently using javascript to achieve png compatibility with the oh so troublesome ie6, I have tried a couple of different versions, but have not come across a solution that allows for repeating backgrounds, especially not in as simple and elegant a form as yours above. Could you tell me if there are any issues in doing it in the way you suggested. I have currently had to resort to different images using conditional comments to get around repeating images in ie6 so would be really interested to know about this. I think that filters do not validate but as this would only be in an ie6 style sheet, if this worked perfectly I think I could live with that!

Hi Mody,

 

That's my site you have pointed to, thanks for visiting I am glad you liked the background. As for how it is made the posters above are more or less right. I used photoshop but I would imagine a similar effect is possible in other software. The image is made using a pattern (I got the image of the pattern from a web site unsure where I think I got there from searching damask patterns on google). Then I made a layer with a lighting effect (filer > render > lighting effect) and set it to overlay. I think i copied this layer a few times and used a few different blend modes, can't remember which I just experimented until it looked nice. When I got it looking how I wanted I added another layer with a radial gradient fill from the dark colour to transparent in the middle so that i could let it blend into the colour from the css background.

 

I have been using PSDTuts [http://psdtuts.com/] as a great resource for tutorials and got a lot of inspiration for the effects there.

 

Sorry if this is a bit rushed, I hope it helps in some way.

 

Hi There! Your site is beautiful, very nice work buddy. I use Flash more than anything else for images (it's the first program I started learning) and after posting here I found out an easy way to do something like your background. I got my pattern, broke it apart, picked it up with eyedropper tool and created a rectangle with the repeated pattern as the ''color''. Then I created another layer above the pattern layer and used a radial gradient with three swatches, played with the Alpha transparency and done. I got a good image that blends nicely into the background. Only other thing I did was playing with the gradient direction.

 

However while your background weighs around 60 KB, mine could not weigh less than 200 no matter how hard I tried to optimize, and it is significantly smaller in dimensions. I uploaded it at http://img2.freeimagehosting.net/image.php?bded57fb78.jpg. It looks a bit pixelated and outdated there (happened after uploading), but you can have a good idea from it. I also tried to do something very similar to yours just to see if that has anything to do with the filesize (used the same colors and a similar pattern), and the best result weighed 100 KB. Still too much. I will have to try Photoshop.

 

Thank you VERY MUCH for helping and giving instructions. I really appreciate it. I have also been following PSDTuts, but I've been focusing on XHTML, CSS, and JS during the last two months or so and I did not get time to play with Photoshop.

 

Take care and good luck with the site!

Woo, how cool is that? Someone posts a website as a reference and the owner turns up? I love WDF!

 

And welcome mancub

 

I was thinking that another way to do this, which would keep the file sizes down a bit would be to use two images.

You could have the pattern you wanted (not repeated) as a small gif or jpeg which is repeated on the html element.

 

Then you could have a second image which has the gradient fade from black to transparent and and back to black again, this could be just a pixel high and as wide as need be, and would need to be a PNG. This could be repeated on the y axis on the body element.

 

The draw back would be you wouldn't get quite the same effect with a window of pattern but a fade in fade out across the page, and that it wouldn't work in IE 6. But conditional comments could remove the background image from the body element so IE 6 would just see the pattern repeated and no fade.

 

The benefit would just be the lack of need for one large background image, which I tend to dislike using

It IS cool!

 

This is very interesting, thanks for sharing. I am already using conditional comments (using an AJAX effect that (un)suprisingly get messed up in IE7 when I use a transparent PNG anywhere in the page).

 

I will try it out today. Thanks again.

What Eris said is a very nice way to do this, as it will be much more optimized than to use a single big image...

Regarding the IE6 issue, The PNG image can be displayed in IE6 by using Filters of CSS. See Below

This Code is for a background repeat PNG.

div {
background:url(example.png) 0 0 repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='example.png');
}

 

The Below code is for background no repeat PNG

div {
background:url(example.png) 0 0 repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='example.png');
}

 

Slight Description

 

The only change is in sizingMethod for making repeat or no-repeat.

Here the filter is given for IE6 and the backgroud property is used for other browsers.

 

Hope this helps you.....

Thanks Subhajit, I will check it out. I do not think this would validate but it can be useful since I am having an extra line of code for IE6 anyway.

Hi everybody,

 

I hope you are having a great day. Can anyone please let me know how make a background like the one found at http://mancub.net/? (http://www.mancub.net/wp-content/themes/ribbons/images/bg2.jpg)

 

I would really like to know how to make the the image fade on the edges and how to add a pattern just like the one found there. Any help would be greatly appreciated.

 

Thanks in advance!

 

Hey, I wouldn't mind some ideas on how they made the navigation banner on this site! It's absolutely ace! Simple, elegant - and not made in flash! hmmmmm.

 

Don't get me wrong - im also an actionscript 3 developer for flash - and could do this easily - but avoid making flash links usually for obvious reasons....

 

Paul.

Hey, I wouldn't mind some ideas on how they made the navigation banner on this site! It's absolutely ace! Simple, elegant - and not made in flash! hmmmmm.

 

Don't get me wrong - im also an actionscript 3 developer for flash - and could do this easily - but avoid making flash links usually for obvious reasons....

 

Paul.

 

I think he used something similar to this one: http://gmarwaha.com/blog/?cat=8.

 

There is also a Mootools version that does the same thing. You can find it here. I hope this helps.

Another thing to try regarding png images that I've used is to save the image in png8 format with alpha transparency selected.

Still large files but IE6 can semi-render them (slightly pixelated edges)

Thanks Mody, glad you like it and that I managed to help. I think in terms of image optimization photoshop, fireworks or imageready will be able to get your file sizes down, I tweaked a lot of settings trying to get the size down and even now I would like it to be less. As it seems you are developing you skills with HTML/CSS I would definitely recommend the method mentioned by Eris, would love to see what you come up with.

 

@mrbigdog: Yeah Mody is absolutely right about the navigation. It's a really great script, and it is really easy to customise it to make some interesting effects. I am planning to write up a tutorial documenting the changes I made to the style to get it like my navigation and also coming up with some other variations.

Another thing to try regarding png images that I've used is to save the image in png8 format with alpha transparency selected.

Still large files but IE6 can semi-render them (slightly pixelated edges)

Thanks for sharing ElanMan. And nice avator.

 

Thanks Mody, glad you like it and that I managed to help. I think in terms of image optimization photoshop, fireworks or imageready will be able to get your file sizes down, I tweaked a lot of settings trying to get the size down and even now I would like it to be less. As it seems you are developing you skills with HTML/CSS I would definitely recommend the method mentioned by Eris, would love to see what you come up with.

 

@mrbigdog: Yeah Mody is absolutely right about the navigation. It's a really great script, and it is really easy to customise it to make some interesting effects. I am planning to write up a tutorial documenting the changes I made to the style to get it like my navigation and also coming up with some other variations.

 

You're very welcome and thanks again. I tried the same steps I used in Flash and got the same result with a file size of 50KB! Huge difference, and that without even tweaking settings and with too many unnecessary layers (I was trying the lighting effects you recommended). I can probably get it down to around 30-40 KB without losing quality, and that is good enough for me. I really have to start using Photoshop more, but Im always put off by the difference of what I see in Photoshop and the final product it produces that Ive always encountered when working in it. For example this background looked horrible when I was making it, but I decided to try saving it anyway and the result was very different from what I saw in PS. I find that pretty annoying. Is it just me or do you guys notice the same?

 

I am not sure when I will be trying the method Eris suggested, I decided to keep it for later. I will let you know when I try it though.

Hi Mody glad to hear you got your file size down. I only noticed that you had posted a link to your original one you did in flash last night, sorry must have missed it before. That's looking great and will be all the better if you've got it down to 30-40k, good work!

Hi Mody,

 

I am new here and saw your post - thought I would recommend a few things since I don't detect a clear answer below to give you enough direction. First, go to that page link you send and right click -- view background image. That will tell you a lot. The image I am seeing is an entire block of a graphic made in an editing program such as Photoshop.

 

If you want to get the background to have that "shadow" effect to when you set it on a black background and it appears "seamless", (which is what I think you are hoping to achieve), you may want to try a few things.

 

If you have CS3 - you can simply make a graphic and choose Vignette from the FILTERS/LENS CORRECTIONn option in the tool bar. Drag the Vignette Amount to the left and the Midpoint to the Right. And hit OK. This should give you a nice black shadow on the edges.

 

If you have earlier versions. Create a new layer, fill it black. Select the elliptical marquee tool and give it a 100 px feather and draw an oval in the black layer. Now go to SELECT/INVERSE and hit delete. This should feather the vignette look. Change the BLENDING mode for that layer to Saturation and that might be enough. But experiment with this.

 

Let me know if this is the directed answer to your concern.

 

-Awakening

Hi everybody,

 

I hope you are having a great day. Can anyone please let me know how make a background like the one found at http://mancub.net/? (http://www.mancub.net/wp-content/themes/ribbons/images/bg2.jpg)

 

I would really like to know how to make the the image fade on the edges and how to add a pattern just like the one found there. Any help would be greatly appreciated.

 

Thanks in advance!