Join Michael Murphy for an in-depth discussion in this video Working with web colors, part of InDesign for Web Design.
If you're a print designer, you've probably been trained throughout your career to think of color in terms of CMYK or Pantone spot colors. On the web, however, there's no such thing as ink. You're working in an environment of color created by combinations of red, green, and blue light. CMYK doesn't enter into the picture, it's all about RGB. I'm in a Web Intended InDesign document right now. So when I look at my Swatches panel, I see all RGB equivalents of Cyan, Magenta, Yellow, Black, Red, Green, and Blue.
When I double-click any of these colors or create a new swatch, I'm dealing with RGB values. This is an additive color system where color is created by adding light. CMYK is a subtractive color system where color is created by putting more ink on the page, thereby subtracting away the background color or the paper color. So immediately this works in reverse of what you're used to. If I turn all the values for RGB up to their highest number, I get pure white.
If I did that with CMYK, I would get a very, very muddy saturated black. Likewise, if I bring them all down to 0, I get pure black. In CMYK, I would have no ink at all, and I would see the color of my paper. So already, it's the opposite of your mindset as a print designer, and it's not helped along by the fact that InDesign really lacks an intuitive color picker, something very comfortable and visual, kind of like what you're used to if you spend a lot of time in Photoshop.
I am going to switch over to Photoshop now and just take a look at its Color Picker. I have this image already open, and if I just click on the Foreground Color Swatch, it opens up the Photoshop Color Picker, which is a very comfortable environment for me to work in. I can get somewhere in the blues and settle on a range of colors that I like and then just drag over to any color within the gamut of that particular shade of blue. And once I have the color I like, I can click OK or add it to my Swatches.
Unfortunately, InDesign doesn't have anything like that. I am going to switch back to InDesign for a moment and take a look at my other alternative for working with web color, which is to switch the color mode from RGB to web. And what I get there is this finite list of predefined RGB swatches that are in the web safe color range, which is a very limited palette of 216 colors that are compatible with both Windows and Mac OSs, and pretty much any display that is limited to 256 colors.
The thing is those displays really aren't around anymore, this system was devised quite some time ago, and it was true for the web at that time, but in modern web design, this restriction really doesn't exist anymore. So switching your Color mode to web is unnecessarily limiting yourself to a palette that you probably don't want to work within, and it's going to limit your design flexibility as well. The other thing you're unable to do in InDesign is to specify color in hexadecimal values, which is the standard for defining colors on the web.
I'll go back to Photoshop for a moment, click the Foreground Swatch to open the Color Picker again, and you'll notice that for any color I select, I get my HSB, RGB, CMYK, and Lab colors, and I also get this hexadecimal value down here defined for me, and I also get a hexadecimal color value defined for the currently selected color. If I were to work only in the web color mode in InDesign, like I showed a moment ago, here is an example of just how limiting that palette is.
I'll check Only Web Colors, and you can see how this Color Picker changes dramatically, eliminating thousands of color choices and limiting me to only 216 colors. So I can only pick this or this or this, and this is not the range of colors that I want to be able to work with. I am going to Cancel out of this for now, and I am going to return to InDesign. So we've got a few problems that we need to deal with. The RGB sliders and the Color Picker are not quite as intuitive an interface as I would like, and it's not what I am used to from working in something like Photoshop.
And I'm not able to specify hexadecimal color values for myself, or to a developer, when I export files for them to start using to create this site from my mockups. Fortunately, there is a fix. You can extend InDesign's functionality using a script. Sometime ago, David Blatner, a lynda.com author, pointed out on his InDesign Secrets website that this hexadecimal color definition was lacking in InDesign and a scripter rose to the occasion and created that functionality and a few other bells and whistles that really helped make this a much easier process.
I am going to Cancel out of here, and I'm switching to my browser to the in-tools.com website where you can download this script. The script is called Hex Swatches in InDesign. It's free. So I can just click the Download button, and then I'll find that download in my Downloads folder, and it's in this Create Hex Swatch folder. I'll open that up. To install this script, all I need to do is double-click this CreateHexSwatch.mxp file.
This opens the Adobe Extension Manager. I'm given a License Agreement, which I'll Accept and the script is installed, and it tells me in order for the changes to take effect, you must close and then restart InDesign. I'll click OK. You can see that this has been installed properly for InDesign, it shows up in the list here and tells you who the author of the script is. I'll quit out of the Extension Manager, switch back to InDesign, quit--I don't need to Save my changes--and then I'll just Restart InDesign.
Now this script was created to be compatible with CS3, 4, and 5, but I have been running it in CS6, and it works exactly the way it did in the older versions. So let me start over with a New Web Intended document that is 1024x768--and I'll click OK--and now when I go to the Swatches panel, I have a new option, New Hex Swatch. This allows me to specify a hexadecimal value, soon as I tab out of the field, it shows me what that color looks like and puts in all the RGB values.
It also gives me the option to use the Current Photoshop Foreground Color. If I have a file open in Photoshop at the time this dialog opens, its Foreground Color can just be picked up and added in here. So this is great for creating a palette out of an existing image. I'll switch over to Photoshop for a moment, and I'll pick a specific color from this painting just by sampling it with the Eye Dropper tool. That places it here as the Foreground Color. I'll go back to InDesign, and I'll click Current Photoshop Foreground Color, and there's that color available to me now in InDesign with its hexadecimal value defined.
I can click Add to add this to my Color Swatches, and you can see that it's added with its hexadecimal value name. If I wanted to modify this swatch, I can just click it and open up the Mac OS Color Picker. On a Windows system, it would open the Windows default color picker. And here I can actually change the color, redefine it altogether, and then when I close the Color Picker, I get the new Hexadecimal Value and a New Color, and I can add that as well, either by hitting Add, if I wanted to add it and then continue adding colors or just by clicking OK to add it and exit the dialog.
So here are two new colors that are RGB, added to my Swatches panel and named according to their Hexadecimal Values. Now the only thing you need to be a little cautious of is changing these once you've defined them. Because they are named according to their hexadecimal values, if I double-click, and I start playing around with these sliders that changes their RGB values, which changes their Hexadecimal Values, but the Swatch Name will not change. If you make a change like this to your Swatch, be sure to check the Name With Color Value check box, so at least the Swatch Name will stay current according to the RGB values that make it up.
I'm not actually going to do that. So I am going to click Cancel out of here. Of course, there's nothing wrong with using InDesign's built-in RGB sliders to create colors, if that works for you. I've just found personally that I work better in a more web-friendly color picking environment that's closer to what I'm accustomed to and comfortable with in Photoshop, and this Create Hex Swatch script adds that functionality that keeps me more productive in the long run.
- Understanding web concepts such as pages, pixels, and the box model
- Working within web colors and grids
- Working with type and type styles
- Designing a nav bar with tables
- Setting up a template with headers, footers, and modular content
- Experimenting with liquid and alternate layouts
- Adding interactive content such as links and video
- Exporting flat PNG and JPEG comps
- Exporting HTML and CSS content