Photoshop CC: The Missing Manual, 2nd Edition

Creating Web Page Mockups and Image Maps

As you’ve learned throughout this book, Photoshop is an amazingly powerful image editor, which means it’s great for designing web pages. In fact, Photoshop has a tool that’ll let you slice your design into web-friendly pieces that, when clicked, lead to whatever web address you link them to. Photoshop churns out the proper code that you can then paste into your own web page using your favorite HTML editor.

But does all that mean you should use Photoshop to build a website? Heck, no! Remember how back in Chapter 14 you learned that, even though Photoshop has a powerful text tool, you shouldn’t use it to write a book? The same principle applies here. While you could use it to build real web pages, you shouldn’t; you’re much better off using a program designed for the job, like Adobe Muse (which can import individual layers from a PSD), Adobe Edge, or Dreamweaver. That said, Photoshop’s Slice tool comes in really handy in the following situations:

• Building a website prototype. If you’ve designed a website for a client in Photoshop and want to give him an idea of how the site will look and behave, you can use the Slice tool to get that done fast. If you slice up your design and assign different hyperlinks to navigation bars, you can give the client a good sense of how the navigation in the final website will feel.

  Tip

  For an even more realistic mockup, create the website’s text using Photoshop’s “make it look exactly like it will in popular web browsers” ...