Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Horizontal Patterns

Status
Not open for further replies.

anywhereigo

Technical User
Nov 22, 2001
24
0
0
CA
How do I make multiple horizontal (or vertical) patterns as you can see on this website. Look at the green bar with horizontal pattern. It's a cool effect that I always to incorporate on my web design, but don't know how...


Thanks,

Rob

Rob
 
Quite an easy thing to do.

If you want to make the image fade away the same way, create new file, size width="100" height="2", then use the gradient tool, select the colors you want using the foreground color and the background color,(this determines the gradient pattern), hold shift and drag the gradient tool acrross you pallette to make a fading line.

Second, flatten the image, or choose merge visible, then select all and go to EDIT-Define pattern (if you are using Photoshop 6, it asks you to name the pattern if you are using a lower version of Photoshop then it might not.

After you have defined the pattern, open another new document size width="100" height="100" then goto EDIT-FILL in the contents pulldown highlight PATTERN (if using Photoshop 6, you need to select one of the saved patterns, the little scroll is right below content pulldown), select your pattern then go to the BLENDING pulldown and select Normal, push okay and the pattern will tile Vertically.

The widths and heights are examples, but when making your first line choose height between 1-5, I suggest staying between these guide lines, also you can add a background layer and choose the color if you wish using the fill tool.

Once your vertical pattern is done, then if you wish to tile it horizontally, do the same method as descibed above except your final image will have a greater width than height.

Hope this helps, and I think this is what you are after.

PS- After you have created a long bar, you can paste it into a new document and add layers or bevel it etc.

Nate(0598792469)
 
I must be doing something wrong here... I exactly followed your instruction but when I came to a point where I have to flatten or merge visible, these options are grayed out (not available). I proceeded to select all and define the pattern with a name, then I opened another file with 100 and 100 (pixels) and filled it with the new pattern. Guess what, it didn't appear to look like what I wanted.

Here's another example of what am I trying to accomplish.


See the blue bar on top with the IBM logo on it? it's got this nice thin horizontal lines that fades to the right.

I was able to do the fading but not the "line" part there...

Thanks again,


Rob
 
What version of Photoshop are you using?

I looked at the IBM page and what they have done is this.
They used two colors, they foreground color is blue and the background color is black (this is on the tool menu).

They created a long image approx (width=500-600 pixels X height=2 pixels)
They have two layers the bottom layer is the fading aspect the top layer is just a plain line of blue all the way across from left to right.

Then the whole document was flattened or merge visible (as for having those options greyed out, I don't know why that is, make sure both layers are visible using the EYE button on the layers palette).

Then select all and define pattern, make a new document size width=500-600, which ever you choose to make one single line and then height on the IBM page looks like 40-50pixels.

Then (I will add something) fill your empty document with a plain color (black with fill tool), then go EDIT- FILL -PATTERN -NORMAL and the single image you created earlier should tile vertically on your new document width=500-600 height 40-50.

Hope this works
If not please send me an email, and I can do it for you, and can give you multiple pictures so you can see the steps and hopefully reproduce it yourself.

Nate (0598792469)
Email: lapdswatagent@hotmail.com
 
Hi Nate,

I'm really sorry but again, I still can't seem to get the right effect. By the way, I'm using P6 and this time, both merge visible and flatten options are ok. Yet, still not able to produce what I wanted... I'm beginning to hate myself :=(.

If it's not too much for you, would you mind sending me an email or perhaps with illustrations and see if I'm following you correctly...

'Really appreciate it!

Rob
 
After I wrote my last reply to your request, I immediately tried to do what you wanted, and did it in about a minute. I have all the files you need, in .PSD format with layers so that you can see the layers, but I can't send them to you unless you give me your email.

That is why I gave you my email so you could give me yours. It doesn't matter if you email me with your address or post it, I will check both.

Nate (0598792469)
again my email is :
lapdswatagent@hotmail.com
 
Hi Nate,

My email address is anywhereigo@hotmail.com

I was able to produce something which comes very close to what I wanted.

I opened a 600x2 file with white background and drew a blue solid line (1X) across, flattened, and defined pattern.

I opened a new file 600x50 and filled with the new pattern. I created a new layer and filled with solid color and adjusted the opacity until the bottom layer becomes visible enough, then applied a gradient effect.

The result? It's good enough and I think I can live with it.

I still would like to see how you do it though. I appreciate it...

Thanks,

Rob
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top