Grabbing measurements to speed up your workflow

- Hello friends, I'm Sue Jenkins and welcome to Productivity Tips for Web Designers. In this lesson I'll show you how easy it is to customize the Photoshop workspace for quickly grabbing measurements of design elements. You can then use those measurements to easily convert into pixel values for CSS on the web. So where do you start when it comes to converting a PSD mock-up into a fully functioning website? Which elements in the design mock-up should become CSS and which parts should become graphics? Most new web designers really grapple with these questions and for good reason.

There's nothing worse than spending hours on a web layout, only to discover later that you are unable to build it using standards-compliant code. As you design think about which parts of the design can be set in CSS, like colors, fonts, horizontal and vertical rules, borders, background graphics, and so forth. This will help you determine which elements within your design you should measure and then convert into CSS. So that's where this training begins. I'm going to show you how to quickly grab measurements from your design in Photoshop, so you can gracefully pop on over to your preferred web editor and add your dimensions to your CSS.

This is a massive time saver and a huge productivity booster. Let's start by taking a look at this simple web mock-up in Photoshop and discover what we can do to set up the space for taking measurements. The first thing to do is to turn on your rulers, either with your keyboard shortcut, cmd or ctrl + r, or through the View Rulers menu. Since we work with pixels on the web it's important to verify that you have your ruler set to show pixels by right-clicking on the ruler and choosing Pixels. If you haven't already set up guides, now is the time to do so.

The fastest way to set up your guides so that they snap to the objects in your layout is to select each object and then drag a guide to snap to that object's edge. One of the tricks that I love to do is first you'll select your Move Tool, then go up to the control bar, turn on Auto-Select and change the drop-down menu from Group to Layer. Once you do this, anytime you click on an object in your layout, the Layers panel will automatically show that layer selected.

For example to add a guide to the bottom of the navigation bar first I'll click on that bar to select that layer, then click and drag on the ruler and you should feel it as you're dragging, you should feel the guide snap to the bottom edge of that object. So I've already created all the guides for the rest of my layout and now I'm ready to start taking measurements. The first thing I'll do is open up my Window Info panel, this Info panel will display all my RGB and CMYK values, as well as my XY coordinates, along with some tool tips and the Width and Height of every selected object.

So to take a measurement of an area within your layout, you'll start by grabbing the Rectangular Marquee Tool and then use the guides to make a selection, so for instance, if you need to know the size of your banner image, you'll drag out a rectangle around that area, like so, and then you'll look to your Info panel to get your measurements. In this layout for instance, my banner image is 1140 pixels wide by 350 pixels high, so we can deselect once we have that measurement.

Now if you want to see the RGB values of selected elements in your layout, select the Eyedropper Tool from your toolbar and then hover your cursor over the desired color. For example this yellow has a RGB value of 239, 185, and 56. Of course, if you would rather get the hexadecimal value you can use the Color Picker dialog box, so select the color and double-click to open the Color Picker. Here's your RGB values, as well as your hexadecimal value.

Or another way to do it is to go up to your Color panel and use the drop-down menu on the top to change what's displaying on the Color panel. So right now I'm seeing RGB Sliders, but the CMYK Spectrum. So if I want to see a RGB Spectrum since I'm creating graphics for the web I'll just switch it to RGB. You can also change what's displaying on the Info panel by clicking on the Info panel's menu, choose Panel Options and here you can choose what will be shown on the readout.

So the first is Actual Color, since we're in RGB mode, but since we don't need CMYK Color we can actually switch over to Web Color, once we click OK not only are we seeing RGB values, but we're seeing RGBA and hexadecimal values in the second column. For instance the RGB value is 246, 190, and 56 for that particular color, but the hexadecimal value is F6BE38. Once you've taken all of your measurements and jotted down all of your colors you can easily translate these values into CSS.

If you happen to be totally finished with your design this is also the perfect time to optimize your web graphics for your website. In other words only save any graphics that you plan to insert onto a web page or that you'll be using as background graphics in your CSS. Then when it's time to grab your measurements try using these techniques with the Rectangular Marquee Tool and the Info panel. It's super easy to grab your measurements and then convert them into CSS for the web.