Step 1: Make a striped background
Start a new image, whatever size you'd like, then give it some horizontal stripes. It works best if it's as wide or wider than it is tall.My favorite method is to just set your background color as something pretty, select a stripe across your image with the rectangle select tool, and hit delete. Any stripe pattern will work!
I went to my favorite website for color palettes to find this fun combo, titled Cafe 1950 by áfrica*.
Tile & rotate
First, pay attention to the height of your image in pixels because you'll need to know that later. My image was 100 pixels high.Now use Filters > Map > Tile and tile your image by at least 300%.
Rotate the image 45 degrees, using the rotate tool or hit ctrl+r
Crop
Now it's time to get your diagonal pattern to the right size, so it tiles seamlessly.Remember your original image height? I hope so!
Go to Image > Canvas Size.
Get out your calculator! Multiply your original image height by the square root of 2... about 1.41. My original image was 100 pixels high so now I'm cropping it to 141x141.
Under "offset", just hit the center button.
And for "layers", use the "resize all layers" option.
Now you have a diagonal pattern that will tile seamlessly - you can go to Filters > Map > Tile to test it out!
Turn diagonal stripes into chevrons
But we were going for chevrons weren't we!1) Layer > Duplicate layer
2) Filters > Map > Tile - now set the width only to tile to 200%
3) Layers > Stack > Layer to bottom
Now select your top layer in the list and flip it horizontally using the flip tool, or ctrl+h
Combine the layers using Image > Flatten Image.
And now you have one tiny part of your tile-able chevron pattern... use filters > map > tile to see how pretty it looks as a background!
Love the tutorial, but I can't get my patter to tile to get the final chevron, it only does one layer. How do I get it to tile both layers? I'm new to graphic design.
ReplyDeleteThanks
Oh you're right I forgot a step!
DeleteSorry about that, after your layer is flipped go to image > flatten image to combine them. I'll go add that in.
Mine isn't seamless but is slightly misaligned. :(
ReplyDeleteGreat tutorial, thank you!
ReplyDelete