Add Grid To Image

This is a simple tool that will add a grid overlay to any image. 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.

Apply Grid To Image Reset Image

Grid Scale Decimal places accepted
Grid Thickness Decimal place accepted
Grid Color Hex color codes
Image Format

 

 

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.

Related Articles

Related Questions

C# How to pass ulong argument to unit test via TestCase decorator

I have a unit test where I want to pass some arguments into the test method via the TestCase decorator. The argument I need...

Can google home turn on my smart tv?

If I purchase a Google hub and set up everything I need to use Google Home to turn my house into a smart house....

Can amazon smart plug work with google home?

I am looking to purchase some smart plugs and I see that there is an amazon branded smart plug. It is advertised to work...

85 COMMENTS

  1. 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.

  2. 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.

  3. 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.

  4. is all good with the tool? it doesnt make equidistant grid (squares) but differences between lines are different for me now

  5. 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?

  6. 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.

  7. 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!!

  8. 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,

  9. 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.

  10. 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.

  11. 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!

  12. 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.! πŸ™‚

  13. 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

  14. 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.

  15. 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?

  16. 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!

  17. 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.

  18. 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!

  19. 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.

  20. 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

  21. 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!

  22. 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.

  23. 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

  24. 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.

  25. 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!

  26. 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

  27. 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

  28. 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.

  29. 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.

  30. 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!

  31. 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.

  32. 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.

  33. 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

    • 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?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Bitrate Converter

Below you will find a bitrate converter. This tool will allow you to enter a bitrate value, in one of many different formats and...

Aesthetic Text Generator

There are various ways to make your social media profile seem more unique, some of which are not as easy to implement as others....

Aspect Ratio Calculator For Images

Aspect ratio is the ratio between the height and width of an image. If you want to resize an image by 100 pixels, you...

Add Text To Image

Use this free tool to add text to an image. Simply select the image file that you want to overlay text onto and you...

JavaScript Multi-line String Builder

Javascript did not always support multi-line strings. If you attempted to create a string variable using quotes, putting a line break into the source...

GUID Generator

GUID generation is relatively simple. It is a system that is used to generate unique values without having to keep track of the IDs...

Latest Posts

Latest Questions