Re-Creating This Graphic?

[TW.87]

Hello,

I hope this is the right forum category to post this topic in, but I'm looking for some help with a project I'm working on.

I have found a graphic (shown below) that is used as a tiled background on a website, and I really like the effect of it on the website, and so, I would like to use something similar for a new website I am currently designing. However, the problem is, I don't know how to do it!

So, I was hoping that someone with the know-how could provide me with some instructions and tips on how to create a similar graphic that can be tiled for a website. A floral pattern like what is shown below, or something with an equally 'grunge' look to it, is what I'm after.

The original image is:

Any and all help would be greatly appreciated!

[rossable]

that seems more retro than grunge to me. retro-glam to be precise.

[Toon]

How to make a seamless web page background

[TW.87]

Originally Posted by Toon

How to make a seamless web page background

Thank you for the link.

Although it helps, I am still lost on how to properly make the retro-glam background (thanks for clearing that up, 'rossable') like the one in my previous example.

Can anyone provide any pointers, or ideas, on how to do this?

[ryng]

You should open it in Illy & redraw it using the pen tool... it might ake a few efforts to get it right but you shoulw get there in the end.

From there you can edit it & make it your own.

[TW.87]

Originally Posted by ryng

You should open it in Illy & redraw it using the pen tool... it might ake a few efforts to get it right but you shoulw get there in the end.

From there you can edit it & make it your own.

Sorry to be such a nuisance on this one - but I'm not overly good at drawing (at all). If at all possible, would someone be able to help me by doing a little design that's similar?

[docsharp]

Originally Posted by TW.87

Sorry to be such a nuisance on this one - but I'm not overly good at drawing (at all). If at all possible, would someone be able to help me by doing a little design that's similar?

I don't know how many people will be willing to do this free. It would take some time to get this drawn in Illustrator.

[LaurenMarie]

You might also try using the wand tool in Photoshop and selecting the background. You'll probably need to set a low tolerance since the flower shapes are so similar in color to the BG. Also, uncheck the box that says continuous. After you've got the selection, invert it (with a selection tool, right click to get the contextual menu and go to Invert Selection). Then, right click again and get the option that says convert selection to path. Now, this is not perfect but it's fast. You'll probably have to go back and fix some things.

Alternatively, you can use the ornaments in Photoshop. They won't look exactly the same, but maybe you'll find something you like. Then just create a pattern with them. Access the ornaments by using the custom shape tool. Go to the top contextual menu and where it says Shape: and has a picture next to it, click on the drop down arrow. then there's another little arrow in a circle in the upper right corner of that new menu, click it and go down to where it says Ornaments. Append those to the current list of shapes. See if you like any of them! They're not as fancy/frilly/flowery as those ones you showed, but again, fast, less work!

Try Obsidian Dawn's PS brushes, too. There are some really nice ones and they're free.

[TW.87]

Thank you very much for your help, and particularly that link - there is some fantastic stuff on there!

[...Gav]

deviantART: where ART meets application!

search for photoshop shapes / brushes

find a set u like

set ur background on your PS canvas to one color

then set your brush / shape color to the same color but slightly darker

BOOSH u got urself a background
dont make it MASSIVE then in ur css:

body {
background-image: url("images/backgroundImage.gif");
}

if you want it to repeat across your screen then:
body {
background-image: url("images/backgroundImage.gif");
background-repeat: repeat-x;
}

to repeat down your screen
body {
background-image: url("images/backgroundImage.gif");
background-repeat: repeat-y;
}

to repeat it all over your screen leave it blank