Quick Tip

The Eyedropper Tool in Photoshop is a quick and easy way to obtain the Hex Code for a color. With the Eyedropper Tool selected, right-click the desired color in the image. Choose Copy Color's Hex Code from the short-cut menu. The code is placed on the clipboard. Switch to a text editor or a Web site application such as Dreamweaver and then paste the code! Watch the fourth video about colors to learn more.

Tips, Tricks & Tutorials

PHOTOSHOP WEB PAGE MOCK UP

Nine videos, that total less than three hours, are all it can take for you to learn how to create a Photoshop Web page mock up and create, optimize and save Web graphics. Links to the nine videos below demonstrate the required skills. Links to the PDF files below outline key concepts and provide step-by-step directions. It is suggested that the PDF files are printed in advanced and used for note taking while watching the videos.

Scroll to the bottom of this page to find bonus materials that will teach you how to use the Pen tool to "knock out" the background around objects and how to display high-resolution photos on the Web.

  1. Introduction (CC available)
    Video: 8m:38s
    PDF file
    This is an introduction to the series of instructional videos below that teach you how to create a Photoshop Web page mock up and web graphics.See the completed Photopshop Web page mock up and an outline of the learning goals that show you how to create it.

  2. Determine the size of Web page mock up (CC available)
    Video: 8m:10s
    PDF file
    The Web page should match the screen resolution of what you think the majority of the audience will have. Learn how to determine the height and width of your Web page.

  3. Learn how to precisely layout elements (CC available)
    Video: 10m:42s
    PDF file
    Here is where we actually begin the work by creating a file from scratch and setting up "magnetic" guides to layout elements with precision.

  4. Web safe colors and Kuler color themes (CC available)
    Video: 16m:43s
    PDF file
    What are Web safe colors and are they relevant today? What is a hex code and where can you find it? Learn how to access, customize and download a professional color theme.

  5. Blocks of text (CC available)
    Video: 5m:37s
    PDF file
    Adding text blocks in the mock up will help you visualize and plan the Web page. Learn how to create lines of text and blocks of text that wrap like a word processor.

  6. Background graphics (CC available)
    Video: 27m:17s
    PDF file
    Design considerations, image optimization, and how to use Photoshop to create and preview vertical and horizontal repeating backgrounds in a browser. See an example of CSS to control how the background repeats across the screen and hex code to control the background color to create a seamless background. *

  7. Navigation buttons (CC available)
    Video: 26m:5s
    PDF file
    Learn two methods to create navigation buttons: (1) Smart Objects to save time and maintain consistancy and (2) Rollovers created with Layer Styles and Layer Comps. Learn how to take advantage of premade styles for navigation buttons and how to create a style from scratch. Also use the Type tool to add text to the navigation buttons and alignment options to align text with precision.

  8. Icons (CC available)
    Video: 12m:33s
    PDF file
    Icons may be created for navigation buttons, logos, or to break up blocks of text in the Web page. Take advantage of Photoshop's premade icons and learn how to create a custom icon with your favorite photo. Use the this provided Photoshop file to follow along in the video.

  9. Slicing (CC available)
    Video: 30m:34s
    PDF file
    Divide the Web page mock up into slices so that each image on the Layers panel can be saved as an individual file and placed on a Web site. Also, learn how to optimize the slices with the most appropriate file format and options. *

    Transparency: while optimizing slices in this video, you also learn how to make some pixels in an image transparent. Although a mock up with several images are optimized in this instructional video, the same techniques are used for any individual image file. For an image to contain transparent pixels, it must be a GIF or PNG format (JPEG does not support transparency). Use the sliders in the video and jump to 17m 25s to see how to make some pixels transparent. See Clipping Paths below for another method to create transparent areas in an image.

*Throughout the video series I mention that Photoshop cannot generate CSS to control the presentation of your Web page mock up for when it is translated into CSS/HTML to be viewed in a Web browser. Well, Photoshop can generate CSS -- kind of. In the Web & Devices dialog box, click the Optimize Menu located in the upper right. Next, click Edit Output Settings. In the Output Settings dialog box, choose Slices from the second drop down menu and then click the Generate CSS option. In the Referenced drop-down menu, you can choose By ID, Inline or By Class. For the mock up, I choose ID. Photoshop laid out the entire site in a table and the table was given an ID. Not really using CSS. By Class did generate embedded CSS, but with limited, mediocre results and the background was not able to repeat. I would not want to layout the entire site with Inline as you really want to separate presentation from structure to meet today's expected standards. Bottom line, it's still better to translate your Web page mock up into CSS/HTML using a Web application like Dreamweaver or a plain text editor like NotePad. Use Photoshop only to plan the site, create and optimize the graphics.

Bonus materials to learn Photoshop skills related to Web sites: