Can Some One Teach How To Make These Pixel Pattern?Cross Hatch ...

Menu Photoshop Gurus Forum Log in Register What's new

Search

Everywhere Threads This forum This thread Search titles only Note By: Search Advanced search…
  • Forums New posts Search forums
  • What's new Featured content New posts Latest activity
  • Members Current visitors New profile posts Search profile posts
Everywhere Threads This forum This thread Search titles only By: Search Advanced search…
  • New posts
  • Search forums
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • Log in
  • Register
  • Forums
  • Main Forums
  • General Photoshop Board
You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots etc..
  • Thread starter Thread starter zoe20
  • Start date Start date May 2, 2015
  • Tags Tags diagonal hatch pattern patterns teach
  • 1
  • 2
Next 1 of 2

Go to page

Go Next Last Z

zoe20

Power User
Messages 250 Likes 95 Hi Gurus please teach us how to make these pixel pattern which we we see regularly on web sites? Cross hatch, diagonal, dots patterns? Usually i do by 100*100 canvas and draw a diagonal line and save as a transparent png and define it as a pattern. How you gurus do .Please give me your expert views and tutorials . Thanks in advance. See the below image.There's a Diagonal patterns used. Please teach us how to do it and achieve the similar effects z1.JPG z2.JPG z3.JPG z4.JPG MrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et They're pretty simple....you shouldn't have much difficulty with them. A 'Pattern' can be created for use with the 'Pattern Fill' option in Photoshop....either as a 'Fill' layer or as a 'Pattern' overlay fx. You'll need to create your 'Pattern' in its own document. Black Pattern, White background. Make the document square although it can be made any size......whatever size gives you room to work in really. Once you have your' Pattern' you save it as such.....it will then be available from the list of other 'Patterns' you already have as default in PS. One thing to remember is that the 'Pattern' is really a tile, and will be laid out as such so your pattern needs to join at the edges in a continuous manner. Filling a layer with your 'Pattern' will tile that pattern across the layer, whereby you can do whatever you want with it....change opcacity, colour, drop shadow etc etc. If none of that make sense I can explain deeper but someone is probably already doing a whole bunch of images for you......and if not, I will. You can always find a YouTube tutorial on 'Custom Patterns' in Photoshop. Regards. MrToM. Last edited: May 2, 2015 dv8_fx

dv8_fx

Retired Administrator
Messages 12,219 Likes 3,713 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et If I'm correct, that has to be a small, no background png image tiled across the main or background image on the webpage you got that screen grab. Load that page, right click on the image to view image. You may have to try this in other places if you don't get to view that png. If not, sane the complete webpage and open the file. look for that png. Use the png as a pattern fill. If you can't get that image, you can create a pattern fill by creating a small png (10x10 pixels) with thin diagonal lines properly positioned so that the pattern fill will tile properly to fill the page with lines properly aligned. dv8_fx

dv8_fx

Retired Administrator
Messages 12,219 Likes 3,713 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
MrTom said: They're pretty simple....you shouldn't have much difficulty with them. A 'Pattern' can be created for use with the 'Pattern Fill' option in Photoshop....either as a 'Fill' layer or as a 'Pattern' overlay fx. You'll need to create your 'Pattern' in its own document. Black Pattern, White background. Make the document square although it can be made any size......whatever size gives you room to work in really. Once you have your' Pattern' you save it as such.....it will then be available from the list of other 'Patterns' you already have as default in PS. One thing to remember is that the 'Pattern' is really a tile, and will be laid out as such so your pattern needs to join at the edges in a continuous manner. Filling a layer with your 'Pattern' will tile that pattern across the layer, whereby you can do whatever you want with it....change opcacity, colour, drop shadow etc etc. If none of that make sense I can explain deeper but someone is probably already doing a whole bunch of images for you......and if not, I will. You can always find a YouTube tutorial on 'Custom Patterns' in Photoshop. Regards. MrToM. Click to expand...
You're unholy, MrT..... :bustagut:. Beat me again.... by 2 minutes.... dv8_fx

dv8_fx

Retired Administrator
Messages 12,219 Likes 3,713 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et zoe20 It's something similar to this (discussed in another thread) dotfill.jpg Except that the png pattern fill was something like 2x2pixels . Z

zoe20

Power User
Messages 250 Likes 95 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
dv8_fx said: @zoe20 It's something similar to this (discussed in another thread) View attachment 55453 Except that the png pattern fill was something like 2x2pixels . Click to expand...
Thank you let me check that thread MrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
dv8_fx said: You're unholy, MrT..... :bustagut:. Beat me again.... by 2 minutes.... Click to expand...
Ah.......the mighty Mystic MrSam taught me well did he! Regards. MrToM. chrisdesign

chrisdesign

Guru
Guru Messages 4,269 Likes 6,330 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et Make your own pattern like this: 1.jpg 2.jpg 3.jpg 4.jpgMrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et Thanks dv8_fx I always forget it can be a transparent background.....DOH! Here ya go... Regards. MrTom. dv8_fx

dv8_fx

Retired Administrator
Messages 12,219 Likes 3,713 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
MrTom said: Thanks @dv8_fx I always forget it can be a transparent background.....DOH! Here ya go... Regards. MrTom. Click to expand...
That's it.... I count about 8x8 pixels? I think 5x5 will do... chrisdesigns ... THAT will also do.... So many ways... each to their own devices.... LOL.... Z

zoe20

Power User
Messages 250 Likes 95 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et MrTom dv8_fx thank you . chrisdesigns Did you use Motion Blur ?? Thank you !! Regards zoe MrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et It can be any size really.....just as long as its square. PS will 'Work Out' what the smallest size possible is and make a pattern from that.....the actual image you create is never used itself, so for once size doesn't matter. :thumbsup: Regards. MrToM. Z

zoe20

Power User
Messages 250 Likes 95 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
MrTom said: It can be any size really.....just as long as its square. PS will 'Work Out' what the smallest size possible is and make a pattern from that.....the actual image you create is never used itself, so for once size doesn't matter. :thumbsup: Regards. MrToM. Click to expand...
Awesome!! dv8_fx

dv8_fx

Retired Administrator
Messages 12,219 Likes 3,713 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
MrTom said: It can be any size really.....just as long as its square. PS will 'Work Out' what the smallest size possible is and make a pattern from that.....the actual image you create is never used itself, so for once size doesn't matter. :thumbsup: Regards. MrToM. Click to expand...
True... but if you need wider spaces in between the lines? I might be wrong with my visual calculation .... lol.... but I felt the spaces between the lines would be much wider..... just saying.... MrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et Yes mate.....you just make the image as big as it needs to be to fit your pattern into. You don't have to draw just '1' tile.....PS will work that out for you. If its much much bigger it doesn't matter....PS will 'find' the smallest size it can get away with that will tile to the pattern you drew and use that to create the patterns 'tile'. The actual pattern you create is not used although like the brush preset, if the 'pattern' or whatever is totally random then the 'whole' pattern is used as the tile as there isn't any 'repetition' in it for PS to 'find'. I had this problem when making a 'pattern' for graph paper. Because it had two axes of symmetry it kept Quartering my image which of course then didn't tile correctly. I may do a post on that as it was a right PITA to find out what the problem was and how to correct it. Anyways....off topic. Regards. MrTom. Z

zoe20

Power User
Messages 250 Likes 95 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et chrisdesign can you give me a step to step tutorial of your method please? Thank you!! regards Zoe IamSam

IamSam

Administrator
Staff member Administrator Guru Messages 24,211 Likes 13,734 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
zoe20 said: @MrTom @dv8_fx thank you . @chrisdesigns Did you use Motion Blur ?? Thank you !! Regards zoe Click to expand...
Yes Chris, what did you use for those of us who don't read German. IamSam

IamSam

Administrator
Staff member Administrator Guru Messages 24,211 Likes 13,734 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et I think this is what Chris did. He opened his image and added a color halftone I followed his settings. Screen Shot 2015-05-02 at 10.24.58 PM.png The result... Screen Shot 2015-05-02 at 10.25.07 PM.png Then he used the Motion Blur filter. I used his settings here. Screen Shot 2015-05-02 at 10.25.24 PM.png A little too blurry for me so I lowered the settings.... Screen Shot 2015-05-02 at 10.26.00 PM.png Still too blurry for me. This is using the same technique MrT described with the pattern overlay. Screen Shot 2015-05-02 at 10.29.33 PM.png Last edited: May 2, 2015 MrToM

MrToM

Guru
Messages 3,538 Likes 3,299 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et I don't think Chris blurred the whole image, just the halftone pattern. If you place a 50% (yeah, I know you can't have 50% grey but...), layer above the image, colour halftone filter to those settings and then motion blur just that layer....it kind of turns the dots into stripes. I'm guessing he then changed the blend mode to something like a Soft Light...maybe? Unless there is a way to add a halftone to a transparent layer....? Regards. MrToM. Z

zoe20

Power User
Messages 250 Likes 95 Re: Can some one teach how to make these pixel pattern?Cross hatch, diagonal, dots et
dv8_fx said: @zoe20 It's something similar to this (discussed in another thread) View attachment 55453 Except that the png pattern fill was something like 2x2pixels . Click to expand...
dv8_fx I didn't find this thread i have been searching for it :banghead: :neutral:
  • 1
  • 2
Next 1 of 2

Go to page

Go Next Last Post reply Share: Facebook X Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Email Share Link
  • Forums
  • Main Forums
  • General Photoshop Board
Menu Log in Register Install the app Install How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

  • Forums
  • What's new
  • Register
Back Top

Tag » How To Generate Crosshatch Background Pattern Photoshop