This is a simple tool that will add a grid overlay to an image or photo. This can be great for drawing if you want to break a larger image up into smaller portions. Use a larger grid size and thickness if the image is large and not rendering correctly. Simply select an image file from your device and it will overlay a customizable grid onto the image for you to view and download.
Apply Grid To Image Reset Image
Grid Color Hex color codes
Select the image format from the dropdown to save an exact copy of the image in the window to your device.
I built this tool to add a grid to an image file and kept it super basic. If anyone has some additional requirements they would like added to this tool to make it more useful, please let me know and I will see what I can get done. I am not an artist, so I am not sure what people might use this for. For me, it was a simple case of adding some squares to an image so I could break up the contents of the picture to make it easier to draw the same image on paper. Hopefully this tool is as useful for you as it was for me.
Suggest a New Tool! – If anyone has the need for a free and handy online tool like this one, feel free to reach out and It may be something I can build and add to this site, please let me know using this contact form.
Thank you! This tool is really helpful!
Thanks for making this Dan
Take
Hola, kind sir. Thank you for the tool. As far as use cases go, I use it to add a grid onto an image of a textured build plate for my 3D printer. This enables a quick sanity check on model scaling with sub-mm level accuracy, quickly and intuitively – https://i.imgur.com/u68Bf9s.png . Thank you.
A couple feature Requests:
1) add an option to offset the origin of the grid by some pixel count
2) add options to bound grid generation, respecting origin and size
Thanks Again.
~MHz
Thanks for this grid tool Dan. Everything else I’ve tried to date has been too complicated. I use it to draw accurately and I like the square grid pattern. However I wonder if it ‘s possible to change the size of the squares using metric measurements, e.g. to create a grid of say 1 cm squares? That way I could use my gridded photo reference (using your grid) to draw the image onto graph paper, which already has 1cm squares printed on it. I could also then enlarge the image to 2 or 3 times the size accurately. The drawing on the graph paper then would enable me to transfer the drawing onto my good paper.
It can be tricky converting pixels to cm since it depends on the users screen resolution. For example, a high definition 4k screen may have 500 pixels over 5cm but a 1080p screen of the same size would have the same number of pixels over 10cm. You could then have a monitor twice the size but also 1080p and 500 pixels would be 20cm. So it is not possible to use metric measurements in this way
Hey Dan! Love this tool. I do agree that in the next version a manual input of how many squares across/down would be very useful. I’m trying to divide a pixelart image into more clearly defined squares, and I know it is 25×25. It would be very helpful to be able to tell the app this, instead of guess and checking with the grid scale currently offered
This is just what I was looking for for my artwork! Thank you so much!
Hi Dan, I’ll be using this to add grids to images for D&D rpg combats….
I’m not sure I understand what the “grid scale” value means?
If I wanted a grid of say, 40×20 squares over an image, what’s the grid scale for that?
I guess I’m trying to understand the math here, does it go based on the image resolution we upload? How do you control the number of squares the grid generates?
The tool is only designed to make a grid of squares. If the aspect ratio of the image is 2:1, you should be able to configure the slider to create what you are looking for. I have had others ask for a grid that is not squares, it is something i am hoping to add to a v2 of this tool
Thanks! This is just what I needed to plan out a garden design. I took an image of the existing landscape using Google Earth and then added the grid lines with your grid tool.
THANK YOU SOOOO MUCH !
I DID MY FIRST SKETCH BY APPLYING GRID TO THE IMAGE AND IT WAS EASY FOR ME TO SKETCH
AND THE SKETCH WAS STUPENDOUS
Hi Dan, just wanted to thank you for this wonderful tool. Thank you! You saved me a lot of time.
I don’t know how to change the color
tell me please،
Just a followup, as I saw one of your comments – by squash and stretch it doesn’t mean make the literal grid-lines width & height being different, it means the option to change the shape of the overall grids (from squares to rectangles). This would mean that your grid may be wider than it is tall, but the actual lines are all the same height and width pixels.
Grid Thickness doesn’t work in my browser. I prefer – 1 but, there is 5 and i can’t change it 🙁 Does anyone has the same problem?
Thanks for reporting this. I have found the cause and fixed the issue. It was only impacting images larger than 1500 pixels wide. It should be working correctly now.
I have just pushed another update for this tool. I have removed the scale slider and instead, this is now an input that you can modify to 1 decimal place e.g. 10.1. This should solve the issues some of you are having to try to get the grid to line up perfectly as the slider did not allow perfectly precise values. The new field will make this much easier.
I have seen the suggestion of wanting the grid width and height being something you can configure. This is possible but I am not sure this would be much good. A grid is made of squares, if you have a grid of 5px high and 3px wide, it will mean the grid is wonky and will make it more difficult to render cleanly. Sure, it will mean you get a perfect grid from top to bottom and left to right, something that is hard with a square grid due to aspect ratios not always being perfect multiples but this feels like a feature that would make the tool far more difficult to configure. I will keep it in mind and if it is something more people want, I can consider adding it.
is all good with the tool? it doesnt make equidistant grid (squares) but differences between lines are different for me now
Could you explain further, a picture perhaps? I’m not seeing any issues
Thank you! I’ve tried another website tool and it was overly complicated for a grid. This was much easier! My only suggestion, and maybe it’s just I don’t know how to do it..
My tracing grid I set up for drawing is basic Imperial 0.5″ squares for 8.5*11 paper. Can I somehow set my grid here to match?
i am a artist, i make portrait of people so few weeks i was search for website that we can insert image of what we want and we can draw using grid method so it makes drawing easy and better. the best of all is we can save the image and it is totally free.
Love the adjustable grid! Was just embarking on this project, but you have already done it! One small request. I’d like a less dense grid at the maximum point. Any way you could make the range larger? Maybe have it be non linear at the coarse end?
Thanks for this!!
Hi, it is a wonderful tool. I have one suggestion for you, you should incorporate to set user’s reference distance, as a grid pixels. Like 1mm or 2mm in your image will be 25 pixels in the grid. That reference will be set by the user,
very ez and useful
I saw that you’re updating this tool. I am gridding a geological outcrop and matching it with scale. To do this I am trying to get the grid size and position to line up exactly on the scale of the image i am processing. Lots of manual work. I ended up using GIMP (free photoshop software), however their overlay is kind of unfortunate so a lot of screen capture was used.
If you really want some feedback ideas for this awesome public service I would recommend the following features:
1) Decimal grid scale
2) Grid shift in X & Y axis
3) Manual input of these features (not just a scroll bar)
Thanks for working on this! It would be very beneficial for many people working with photography, mapping, drawing, or extraneous digitizing purposes such as mine.
Hey guys, I have just updated the tool to support decimal places in the grid thickness. I know some of you wanted to go below 1 or just wanted 1.5. If you enter a value with a decimal place, it will update once you hit enter or just move out of the input and it will apply to the image right away.
I have also updated the grid scale to up to 300px. Up from 200px as this was another suggestion.
I have been reading over the other suggestions such as being able to set a number of rows and making the tool do the math with the scale. Shouldn’t be a problem but my worry is that if I start adding too many features like this, the tool will stop being the basic and simple tool it is now. I am thinking I may create an advanced grid tool and keep this one as is. The advanced tool will have all of the features you guys are asking for without sacrificing the simplicity of this one.
Feel free to drop any other suggestions you guys have. If there are any other useful tools you guys would like to see me build, be it for art or anything else, please let me know. I am happy to work on some new stuff if there is a need for it.
You’re the best! so easy and very cool website design so Professional! i think it will be more better if Grid Thickness is counted to .5 i want more thin and this grid tool have no like 20×25 like that feature i mean its only px scale by the way super thanks!
Thanks John, I have just released an update that allows for decimal places to be set in the grid thickness.
Thank you so much! This has been very helpful for my art projects!
🙂
I just wanted to say Thank you, This website has been so helpful. I am using it to help me draw Portraits better and it has helped me so much.! 🙂
Would love to see grid thickness drop below 1 feel a little bit thick and it can be hard to see through to the image itself. Otherwise, extremely helpful for D&D battlemaps. Thanks for putting this out here for us to use!
Hey Tyler, glad the tool is useful. I have just implemented a change that allows grid thickness to have a decimal place. You can now enter 0.5 or 0.1 into the box and once you click out of the input, it will apply. Hope this helps
I agree with @nelu nelu – a label feature would be fantastic. Thank you though for this regardless!
Great..it works like a charm. I will use it to draw a portrait, so the grid helps getting the proportions more or less right…
(…To improve it ? Maybe 2 colours instead of 1 ? So every 2nd line a different colour. But quite frankly, not sure it that would improve it…Different colours might distract.
But..maybe the option to change the colour of the grid ? On a black and white photo a red grid maybe ? ) Just speculating. Great tool. Thank you for sharing.
this is the best website I have ever found
THANK YOU! I was looking for a SIMPLE online grid tool, all the other ones sucked and it was always complicated! tysm!
Would it be possible to have it so it’s a set number of elements on each axis instead of pixels between grid lines? Like say a 4 by 4 grid or a 10 by 15 grid?
Thank you for this easy to use app! We don’t need to print it out and save on paper and ink — the reference can be viewed digitally!
Can the grid lines be in colors or are they strictly within the black/white range? Also, provide a list of the 3-digit alpha codes in your very brief instructions. Or, better yet, create a drop-down box for the selection of grid line colors. I had no idea what color FFF was, so I started going the alphabet. Figured it out, but don’t want to do that every time.
Great tool, thanks. It would be helpful to be able to input the number for the scale grid as well as using the slider.
Thank you thank you thank you!!!!! I have to copy paintings for work and this tool is perfect for that and so quick and easy! Thank you a million more times!
Where do you list what the codes are for the line colours??
The color codes are hexadecimal colors. I may change this to be a color picker but for now, the hex code will work
Wow this is such an amazing tool thank uuu
if you could “number” the grid, in X / Y coordinates, it would be perfect.
Like from “left bottom” to “left top” ( 0, 1, 2, 3… N ) and from “bottom left” to “bottom right” ( 0, 1, 2, 3… N ), this tool would be amazing.
If you need directions: Search for How to make a drawing bigger using the grid method on YouTube in a video by Liz Chaderton
https://youtu.be/gkc2_7ElVJg
Hi Dan, thank you for this. I’ve just done a YouTube on Gridding and recommended people use this: https://youtu.be/gkc2_7ElVJg (scheduled for 2pm 19 Dec). Can’t promise you thousands of visitors but hopefully a few will head this way.
Many thanks Liz, glad this was helpful
Thanks Dan! Dan the man, Good lad you are.
This is super useful – thank you. The other online gridding tool I used to use has disappeared so I was delighted to find yours. I am just about to do a Youtube film about gridding, so I will point people in this direction (if I may??) Thanks! Liz
Wow. This is great. So easy to use and so helpful. As a fitness trainer I use this as an overlay on photos of my clients so I have a reference for non-ideal posture and movement. Thanks!
Thank you. This is exactly what I was looking for. The variable spacing and thicknesses of the lines are perfect. You have really helped this artist.
this is an awesome grid for art, yo thank you
thanks very much for this Dan. I have been using a different website up to now to get grids and they are no longer available. It would be useful if, as well as the slider to scale the grid, you could just say how many squares (across) you want, like 6, and it would do that for you.
Agreed, id have to work on the math for that. I think I may come up with a V2 of this tool that does a lot more advanced stuff. I would keep this tool live since it is the simple grid to image tool and then have an advanced one that is going to be more difficult to use but has way more options for advanced stuff
Bro, why don’t you just allow us to pick the number of rows and columns we want?
I found this way easier. Sorry if numbers are hard for you to deal with.
I am a art teacher and used to use another webtool for grid drawing but it went offline and I had to find another one. Very nice tool.
Can you make it possible to make the grid larger (more than 200px). Usually want like 7-10 squares only.
I have increased the limit from 200px to 300px. I hope this helps
bruh, am i the only one who has no idea how to use this? or am I just beyond idiotic
Master, you did a good job! Congratulations!! A simple and easy to use application. It would have been exceptional if the rows of squares could have been numbered as a chessboard: A1, B2, C3 … Anyway, it is a useful thing for drawing. Thanks!
why Dan answer every question
Because it’s my website and I built this tool?
this is great! i needed this for my dnd setting! thank you so much for putting this into the universe lol.
wait is Dan the helper he ansewer every question
tooi wrote the tool
the grid is really helpful and useful it help my class thank you grid for helping
it would be good if you could drag the grid to where you want it to be.. i use this to adapt a picture to a knitting pattern, so then it would be easier to get the colour where the stitches will be.. great tool
a grid offset would be helpful
I was going to write an app like this myself, but then I thought surely someone must have done this already :). So thanks. One suggestion that would really help me: let me choose the number of lines horizontally or vertically for the grid rather than choosing a pixel size. E.g. If I have a piece of paper 11 inches wide I would like to draw 10 lines at one inch intervals.
This is very difficult as an inch and a pixel aren’t comparable. 1 inch could be different depending on your device and screen resolution. I’d likely introduce so many bugs trying to do this and it would still not work correctly
So simple..
Perfect solution.
Thank you for sharing.
this is so cool! I do this everyday for my kids that are in primary school right now. They absolutely love doing this!!! Thank you so much for uploading this for me.
Thank you! been trying to figure out how to get the picture of a Nudibranch into a knitting pattern.. perfect tool you have here
I was making grid lines manually in Paint. So time consuming, this is amazing for someone just learning to draw by hand! I appreciate the “hacking” explanation. I practically navigate blind in the IT world and don’t know the first thing about Java, and was wondering whether I would be handing over the image or not.
make it so I can have a bigger grid please
by far the best and most convenient grid making site though
Would it be possible to do diagonal grids? Either diagonal on their own, or both square and diagonal.
Great tool.
Thanks
This is amazing- I print out a ton of maps for DnD, but lately the software I use doesn’t show the grid lines super well on paper. This has been a complete Godsend in fixing that issue!
Awesome. If there are any suggestions for how this can be tailored for d&d let me know. I can make a dedicated tool for it
Wow. This is just so incredibly useful. Thank you so much!
You could add a check button that overlays the image with a black image or like an inverse color of the grid color so that it would just show the grid.
How many inches are each grid?? 1 inch per grid?
Very useful tool. Thank you.
the grid is pixel based so it is hard to convert this to inches as it depends on screen size and resolution
This was super useful for me as I began a dog portrait, a subject that primarily as a landscape artist, is way outside my comfort zone. I found the weight of the lines and colors of the lines particularly useful! Bravo for making such a simple to use tool available.
This does not work properly for an iPad.
Downloads as a ‘document’ with no extension.
Had to rename and add extension, before it would work.
Other than that all goods, thanks
I.e…. image.png
I dont own an iPad to debug this unfortunately, sorry for the trouble ill see if I can fix it somehow
Shame there is no proportional fill option
Can you explain what this is and I may be able to implement it
thanks lot . I search some many websites But they don’t support webp file format . this websites support webp file (image)
Just want to say THANK YOU! Your tool to add a grid to my image was very helpful and so simple to use. You’re a legend.
Glad you found it useful!
good
Does ur website hack?? If no how can I be sure??
What kind of question is this? First things first, you cant hack someone from uploading an image. Second, its a javascript based tool so my server doesn’t know a single thing about what you upload or do, it all happens in your web browser. Lastly, if this was some kind of sneaky plan for me to hack people, do you think someone would admit it because you asked?
You are a godsend this is the best grid image overlay tool I could find, period. Incredibly useful for mapmaking.
Glad i could help 😀
Be great to be able to fade out the image uploaded
I think this may beyond my understanding of image editing but I will look into it next time I make some changes to this tool