Making a diaganol Patter for Background… NEED HELP!

CM
Posted By
Christian_M._Holes
Nov 1, 2003
Views
394
Replies
9
Status
Closed
Sorry but my problem is different and more complex then the other post. I have tried a couple suggestions and would like to know if anyone knows how I might accomplish this???? Thanks…

Ok I am making a patter for my background, and I want it to be a diagonal shape. The hilarious thing is, I did not realize how much of a problem it was going to be.

ok first of all making backgrounds is easy… I first make a 30×30 pixel pallet and add a small dot or shape right in the middle to give it a pattern… make the background a different color. Then go to edit and then define pattern, name it whatever. The way I test my patterns is then open up new document and make it 500×500… then go to fill and then fill with the patter I just made. My new document then fills like a charm and is an exact indicator on how my webpage will look with a single jpeg or gif file that is only 30×30 pixels big. Because the pattern repeats itself. And there in lies my problem….

I saw a cool design that was a diagonal pattern. However, when I made a patter in PS it was all straight lines by simply adding 1 pixel brush tool with shift to constrain straight. I did that and as long as the lines are horizontal or vertical, it works perfect. Again however, I then rotated the lines and made them diagonal and the pattern gets all messed up when making it into a pattern and then filling it into a bigger document. It simply looks like a bunch of repeated square diagonal designs. HUMPPFFFF… I know this logical makes sense, but is there something I should do or some type of work around?

thanks in advance.

Christian

"Don wrote
I think your problem is with the repeat not matching up. You can
check whether or not your repeat will work by using the >>>>>>>>>offset filter with a value of about half the width of the work. If a repeat gives a bad fit, undo the filter, then use the image/canvas >>>>>>>>>>size to remove
1 pixel of width. Test with offset again, and repeat until the pattern matches.

You will have to do the same with the height."

I tried doing this but did not notice or understand
the effect?
Related Tags
background help

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

DM
Don_McCahill
Nov 2, 2003
Okay. Here it is, step by step.

I made an image 1 pixel high, and five wide. I left the left pixel, white, made the next two black, and the last two stayed white. Select All, then Define Pattern.

I make another image that is 142 pixels x 142 pixels. I select all, then fill with that new pattern. I get vertical stripes. I rotate this canvas 45 degrees.

I then use image/canvas size and reduce to 30×30 pixels, with the material removed equally from all sides.

I next use the filter other/offset with the settings both to 15 and repeat turned on. This moves the edges of the shape to the middle and you can see if the pattern is perfect. Mine was, but:

If it is not perfect, undo the filter, then use image/canvas size to change the image to 29×29 pixels, anchoring the preserved material to any corner. Then do the offset again, to see if the image is corrected. You may have to do this as many as four times, but somewhere along there you should get a perfect diagonal pattern that will tile seamlessly on a web page.
O
Ol__Whozit
Nov 2, 2003
Well, first of all, if you want it to work SMOOTHLY, start thinking in octal. Don’t make images of 30, or 29 pixels. stick to 8×8, 16×16, 32×32… it’s the way your PC processes. You’ll get better results faster if you don’t unnecessarily tie up your resources.

If you are using PS6 or earlier, the Ditherbox will give you perfect patterning with a simple 8×8 square, but if you are version 7 or above, you will have to work a bit harder at it, since you can’t use the paintbrush because of edge feathering.
P
Phosphor
Nov 2, 2003
Got me working my left brain, trying to figure out an equation for minimum tile size for any given line width and angle. Gotta reinvigorate my Pythagorean and trigonometry muscles.

On on the right track, but I’m bogged downn right now…
DM
Don_McCahill
Nov 2, 2003
Go for it Phos … I’d be interested to know if you can work it out quicker than I could do my trial-and-error method of using offset, then canvas size, up to four times.

(I know with my math skills, I couldn’t.)
CM
Christian_M._Holes
Nov 3, 2003
Ol Whoozit. Could you explain yourself a little bit better. Your idea seems good but not detailed enough to do anything with it. I.e. step by step instructions.

Don, I tried your method but my patter is just not working. I did everything you said step by step. but once I take my pattern i.e. the 30×30 rotated line image, it fills a larger canvas i.e.. a 300×300 as a bunch of squares with a diagonal design in them.

When I experimented I took a 30×30 pixel image and placed them on a separate layer so I could move them around. I found that 17 nudges to the right would give perfect alignment for the diagonal shape. However that would not work for multiple pictures and what not…. I am stuck right there.

And another problem I had with your steps was using the offset filter. DO you leave that filter on or do you just use it to reference where you are? The reason why, is because when I applied the filter it had the patter shoved down into a little corner in the lower right side with straight line colors protruding from the diagonal lines going both vertically and horizontally. Don’t understand what that is supposed to do?

Maybe I am doing something wrong. Please let me know.
CM
Christian_M._Holes
Nov 3, 2003
See the problem is this. The html and adobe use patterns kind of the same. one image will repeat itself perfectly over and over producing a pattern going horizontally and vertically. So, in a square, straight forward fashion this works beautifully in creating a nice background with a complicated look and feel. Albeit, your design is vertically and horizontally correct. You can even add dots with different levels of separation going closer to further apart. However, my problem and challenge lies in creating a repeated diagonal pattern. Since the web translates one small jpeg, png or gif image as a repeated square image you can only make your designs following those parameters? right? well that is the way it looks to me.

Theory:
But, could this be wrong. in theory, could you create a gif or PNG, utilzing it’s trancparency capabilties to create a design or pattern that would repeate itself but in a diaganol fashion? like a /// slants following eather other? hmmmmm. Let me know what you guys think? and how we might be able to create something?
CM
Christian_M._Holes
Nov 3, 2003
Please don’t give up I think we are getting close. Anybody have luck solving the problem. I think this issue should be addressed by adobe. In part, because even when you do make diagonal lines they get so aliased it is horrible. Why? hmmmm, perhaps PSCS 9?
CM
Christian_M._Holes
Nov 3, 2003
Alas, I will never accomplish this problem…. I will pray tonight
CM
Christian_M._Holes
Nov 4, 2003
One last try? anybody please. Tell me something anything. Tell me go to hell, no don’t, but please tell me something that might help?

LOL, I know you are out there somewhere. Show yourself.

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections