Anyone got a favourite tool for this? Mainly simple stuff like measuring the size of images, sliders, panels, sidebars etc. in pixels.
I’m currently looking at this - https://getpixelsnap.com/
but wondered if the team had any other apps they use and would recommend.
TIA
Rob
I normally use a screenshot command then esc so not to save it
I use Euclid as my on screen measuring tool after trying out quite a few different ones.
That’s nice, Aidy, thanks for the suggestion.
I’ve been using PixelStick for years. It costs next to nothing, and because it floats over your work, it works with all apps (RW, Ps, etc). I love it. https://plumamazing.com/product/pixelstick/
I’ve always been using Art Directors Toolkit from Code Line (http://www.code-line.com/artdirectorstoolkit/). It consists of many functions—one of them is pixel measuring tool. It floats above all windows.
I like PixelStick, thanks @dave
It never ceases to amaze me when this question is asked how people use extra apps or complex workflows when the browser has it all built in with just 2 clicks.
Well, I’m one of those people that goes to outside software because I’m more of a design type than coder. I’m sure some day I’ll get under the hood, but right now I’m just trying to learn the software and all of the conventions associated with web design. For those in the same boat, I recommend either xScope https://xscopeapp.com 50$ (awesome but pricey) or QuickLens http://www.quicklensapp.com 10$ (awesome and very reasonable). Currently using Quicklens. I like putting a guideline up on a long web page to make sure things align to a grid, I use the angle measuring tool when I’m setting up perspective drawings (not really a RW tool, but still). Generally a lot of bang for 10 bucks. That being said, Ill check out the others mentioned above.
That was really the point of my post as I’ve been told this many times before. I still do not understand however why clicking and reading off a size in a browser is something that fills designers with fear whilst doing EXACTLY the same thing on a layer in Photoshop is just fine and non techy?
I would also point out that I virtually never need to measure the size of something on a web page. I think that is is a symptom of over thinking the layout and responsive sizing and/or not doing it in the most efficient and sensible manner.
I’m not having a dig here - I just believe in simplicity and not overcomplicating things wherever possible.
Cannot recommend “PixelSnap” enough: https://getpixelsnap.com
A bit pricey, but a great tool which I’m using daily a lot of times…
@wolf Both PixelSnap and CleanShot look like great apps. My reluctance is solely that a license covers only 1 Mac and I have 2. I know I save a little money by purchasing for two Macs, but …
Can you write a little more about why you find it worth the money? Ditto for CleanShot if you have purchased and used.
Totally agree here! I never measure anything, only consideration I may think about is a max size.
It never ceases to amaze me when this question is asked how people use extra apps or complex workflows when the browser has it all built in with just 2 clicks.
Well that’s fine - although I’m new enough that I looked at your screenshot and had no idea how you got to where you did. I’m also new enough that I’m concentrating on the ins and outs of the software and web design in general; it doesn’t make sense to burden myself with code while trying to get a handle on these other other things. That was the initial attraction to RapidWeaver for many if not most of us - wysiwyg / drag and drop / templates etc.
I think the real issue is that with all of your expertise and experience, you may have forgotten what it’s like to be a beginner. I’m also working under the assumption that you came to this first as a developer / coder than a graphic designer. I have tendency to do the same thing - I’ve been a design professor for 27 years; hearing myself, semester after semester, year after year, saying the same thing, over and over… at a certain point it seems like the simplest thing in the world and there was a period where I started to think that students were just getting dumber and dumber (we can use another post to discuss millennials and post-millennials, lol) but it was me turning into the crotchety, angry, un-empathetic teachers that I sometimes had. A side-effect of mastery if you will.
Some of will measure, in a way that we understand, until we find we don’t need to anymore. This is funny / timely as the other day, while working on a website I was getting tired of the trial and error of not having much of a sense of what my margin dimensions actually looked like - I don’t have much of a frame of reference for pixel size the way I can estimate in inches or mm. I broke down and made a ruler that I printed out based on my screen resolution. I can look at that and have a sense that I may want margins of 20 or 50 or whatever.
I’ve attached it below for those who feel they can benefit from internalizing these general dimensions. Note - we may be working with different screen resolutions, so if you print it out, please scale up (or down) the ruler to have it make sense with your screen resolution. I hope it helps people that are still making their way up the totem pole :)
Just as per the screenshot - right click on what you want to know the width of and then read off the width in the area of the window that appears where it says width, Sorry if that was not clear.
I absolutely was not intending to burden you with code. My answer had nothing at all to do with code - just reading off a width value as per the original question - I was merely pointing out that this can be done without the need to purchase additional software.
I did all this for free and spend several hours a day answering complete beginner questions - most of which are not about my products but are general in nature.
I refute the suggestion that my answer was complex - it in fact arguably was the simplest solution. offered using the software that the viewer is already viewing the web page with and only requiring 2 or 3 clicks.
I am not a designer - I am originally a university academic but the most notable web designer present here (@Justin) seemed to agree that we should not be concerned with measuring elements on the page. I think this is the most important point in this thread.
No sense going back and forth and no ill will was intended. Actually just a roundabout way to remind you that you are so expert that you may have forgotten what it’s like to be one of us :)
Just as per the screenshot - right click on what you want to know the width of and then read off the width in the area of the window that appears where it says width, Sorry if that was not clear.
I believe the full directions for people that are as new as myself is that I have to click on ‘inspect element’ and suss through the jungle of stuff that shows up. I also think (but I’m not sure) that you have to have the developer’s menu turned on. Just learned about that in a tutorial this morning while on a treadmill.
I absolutely was not intending to burden you with code. My answer had nothing at all to do with code - just reading off a width value as per the original question - I was merely pointing out that this can be done without the need to purchase additional software.
I apologize if you thought I was talking about you - I stand by my statement of most people getting into Rapidweaver are here because of its wysiwyg / template nature - at least initially. I look forward to the day when I feel limited by the options I have and decide to go under the hood.
I did all this for free and spend several hours a day answering complete beginner questions - most of which are not about my products but are general in nature.
Safe to say that many of us are aware of all of the contributions you’ve made to the Rapidweaver ecosystem - I don’t think any reasonable person would be able to find fault here!
I refute the suggestion that my answer was complex - it in fact arguably was the simplest solution. offered using the software that the viewer is already viewing the web page with and only requiring 2 or 3 clicks.
I don’t think your answer was complex - there’s a natural tendency, I think, that when something seems complicated to someone learning the information, they tend to complicate the solution, at least until things are learned and become second nature. That’s true mastery. I teach perspective drawing and I see it every day - 10 steps to do something that could be done in two. They get it when they get. I believe the saying is - the teacher arrives when the student is ready.
I am not a designer - I am originally a university academic but the most notable web designer present here (@Justin) seemed to agree that we should not be concerned with measuring elements on the page. I think this is the most important point in this thread.
One of my colleagues explains this phenomena nicely - he’s been a professor for 40+ years (product designer) and he calls it ‘Grandma’s Rice’. When he was learning how to cook, he noticed that his grandmother never measured the rice and the water - it always came out perfectly nevertheless. Every time that he tried to do the same, it was a miserable failure. He asked his grandmother how she did it… she just had so much experience doing it that, after 50 years of cooking, she was basically on auto-pilot. That’s the point that I’ve been trying to make. My wife can’t make rice without a measuring cup. My mother? In her sleep :) Maybe that’s Justin, and a million other people around here.
I think your initial response was more about an easy way to measure, not that measuring was rarely if ever necessary, but either way I’m sure many have and will appreciate the tip.
At this point, I think we can both agree that this horse has been beaten a few times around and is becoming unrecognizable :) No disrespect was ever meant. If that wasn’t obvious, I’ll blame the lack of ‘tone’ associated with the written message. Off to the store - believe it or not, off to buy some… rice. Cauliflower rice (blechh - my wife’s palate needs an adventure)!
@mark180 Just to be clear - no animosity on my side and certainly did not take any of your comments as personal. The nature of a forum is that many people can read these threads and so more options and broader answers are often appropriate. Support tickets can be answered in a different and more direct way, more akin to some of your suggestions.
Hi @mitchellm ! Sorry for answering so late, but I’ve been away for a few days and just got back to the office. No time currently to elaborate on why I’m loving these tools so much (especially PixelSnap). I have only one Mac, so it’s no issue for me that the license only covers one machine. Most often I use PixelSnap to measure distances between(!) certain objects/parts of the site, which I cannot see when I look at the code.
