Learning Creative Web Design The Easy Way.

Configure Photoshop panels by loading web safe colors into the swatches panel, choosing append or replace, and customize the info panel with RGB and CMYK readouts for web design.

Explore using the color panel in Photoshop to adjust foreground and background colors, switch color models, explore hex and web safe ramps, and load web styles for design effects.

Save customized Photoshop workspaces by naming, saving panel layouts and optional keyboard shortcuts, then switch between layouts like Jeff's Web layout, photography, and motion to streamline web design.

Create a web layout file in Photoshop, setting 960 by 2000 pixels, RGB color, 72 dpi, and saving as a Photoshop document while establishing layout guides.

Begin the wireframing process in Photoshop by creating a skeleton layout using vector rectangles as shape layers to establish main layout containers; then size and position with free transform.

Learn to build a header, navigation menu, slideshow area, and three center boxes using vector rectangles, with emphasis on naming layers, alignment, and precise sizing.

Learn to select, align, and precisely size vector objects in a Photoshop wireframe using auto select with the move tool, multi-layer selection, and transform controls.

Learn to precisely size and scale vector objects in photoshop by entering exact pixel width and height, using show transform controls or free transform, and aligning center boxes.

Learn to precisely size vector wireframe components using the free transform tool to set header 960x140, navigation 960x40, and slideshow 940x325, then position them on the canvas.

Position objects precisely in a wireframe using x and y coordinates with a top-left reference point, then set exact values for header, menu, slideshow, and center boxes.

master adding wireframe objects with free transform by setting x, y, width, height; name layers for calendar, photo gallery, Facebook fan page feed, and Twitter feed.

Organize your Photoshop layers by reversing order to match your layout, create and name layer groups, and use the group shortcut to tidy headers, the slide show, and social feeds.

Finish preparing a wireframe for review by duplicating text labels and applying a reusable wireframe layer style to the header, navigation, and center box group.

Prepare and dress up your wireframe by applying font choices, colors, and photography in Photoshop, after cleaning labels and removing layer styles to finalize the design phase.

Choose fonts that express emotion for karate school site, using up to three: a main artistic font for headers, a subfont for navigation, and Verdana or Aeriel for body text.

Learn to choose colors that convey emotion and professionalism, using blue for confidence and green for calm, and master Illustrator's color guide to build cohesive palettes.

Create and save a custom color palette in Photoshop by entering CMY values, adding swatches, and using the color picker or eyedropper to apply colors.

Learn to refine a logo in Illustrator by editing group components, resizing text, and applying a subtle drop shadow, then transfer it to Photoshop as a vector smart object.

Explore vector smart objects between Photoshop and Illustrator; scale without quality loss, and edit in Illustrator with instant updates back to Photoshop.

Create the main navigation by applying a black color overlay and white Garamond Premier Pro text, using a vertical pipe as a separator, and align with guides.

Position the center box headings with a horizontal guide and rulers to align the top edges, then paste remaining headings as smart objects from Illustrator into Photoshop.

Create three white rectangles as center picture boxes, duplicate them into the center boxes, and organize their layers, then crop the canvas for a neat final file.

Insert placeholder text using lorem ipsum into text boxes in Photoshop, format color and size, and organize layers by grouping center and picture boxes into subgroups.

Learn to build a social feed section by editing a Facebook UI face pile, integrate a photo gallery grid, and drop the editable Photoshop assets into a web layout.

Insert the Twitter feed into your web layout by dragging the Twitter profile feed jpeg onto the design, align it to the left, and rename the layer to Twitter UI.

Finish the footer by applying a black color overlay via layer effects, duplicating main menu into the footer, then position and scale it, and consider adding contact or copyright info.

Learn how to add a texture to the header in Photoshop using clipping groups, blending modes, and opacity to create a cohesive web layout.

Master layer-based slicing in Photoshop to convert a layout into precise slices for Dreamweaver, using auto slices and center boxes to streamline design and client satisfaction.

Explore how exported photoshop slices become individual graphics and html, viewable in a browser, and how to tailor the layout with CSSA before moving to dreamweaver.

Customize the Dreamweaver interface by decluttering panels and docking the files panel and CSSA styles for a streamlined workflow. Save the workspace and define your site to begin designing.

Define a site in Dreamweaver by pointing to your web project's root directory and specifying the local site folder, so Dreamweaver can manage files through the files panel.

Remove white space objects in the Dreamweaver layout and recreate Photoshop spacing with CSS, deleting spacer graphics and divs to streamline the stylesheet and layout.

Center the layout by renaming the id selector to master, applying margins to auto-center the master div, and removing absolute positioning. Preview in live view to approximate browser rendering.

Preview your Dreamweaver work in a real browser with the preview in browser tool, customize browsers in preferences, and switch to Chrome, Firefox, Opera, or Safari.

Remove absolute positioning from the header, delete left and top values, and ensure the header sits inside the master div, then preview changes in design view and a browser.

Learn how to streamline the main navigation by consolidating multiple divs and id selectors into a single div, refactoring HTML and CSS to create a cleaner, more efficient menu.

Rebuild and align the main navigation menu by adding a main-menu div, defining a 960px width, and applying a reusable menu-item class to float images left, eliminating gaps and wrapping.

Remove absolute positioning from layout objects and rely on floating for a modern layout, deleting left and top values from the slide show and other id selectors, then refine spacing.

Set left margins to ten pixels to establish a consistent 10-pixel gap across slideshow, center boxes, news, calendar, and galleries using margin versus padding in Dreamweaver and CSS.

Add left margin spacing in Dreamweaver to separate center box 2, center box 3, and the Facebook and Twitter feeds, using a 12px margin-left.

Learn to manage horizontal spacing using margins and floats in Dreamweaver, applying 10 pixels top margins to current news, calendar, social feeds, and footer. Emphasize CSS-based layouts over absolute positioning.

Format the overall page by switching the background to white, adding left and right 1px light gray borders, and converting inline body styles into a dedicated CSS rule.

Insert the site logo into the Dreamweaver header by creating a nested div with id logo and applying an absolute, left-floating CSS rule to overlap the navigation.

Apply the center box background image to all three boxes via CSS in Dreamweaver, then adjust the margin top to 30 pixels and preview in design view and the browser.

Show how to insert center box header text using nested divs and inline CSS with absolute positioning and negative top margin, then replicate for all three center boxes.

Center box headings with left margins, insert a 280x125 white picture frame with a 55px top margin across all boxes, adjust middle frame to 12–13px left, insert graphics from Photoshop.

Transform inline css into reusable class rules, replacing repetitive styling in three nested divs and center boxes, and organize styles in an internal stylesheet for cleaner, scalable design.

Learn to create a scrolling news box by embedding another page with an iframe, loading News.com content, and configuring width, height, and frameborder to style the box.

Adjust the I-frame height to 398 pixels and apply a border on all four sides in light gray via CSS; save, refresh, and prepare the placeholder for a Flash slideshow.

Edit flash content in Photoshop by using the library panel, edit with Adobe Photoshop CS5, crop and resize to 940 by 325, and let Flash auto update.

Learn to build a simple slideshow in Flash by converting photos to graphic symbols, setting frames and keyframes, applying alpha fades, and creating classic tweens for transitions.

Demonstrates building remaining slide transitions by adding new layers, placing photos as graphic symbols, and applying alpha fades and classic tweens across the timeline for a multi-photo slideshow.

Adjust the slideshow playback speed by changing frames per second and per-transition frame counts, test the movie, and fine-tune transitions using the timeline to balance speed and display duration.

Insert the self-running SWF slideshow into Dreamweaver by removing the placeholder, using insert > media > SWF, and assigning accessibility attributes. Save dependent files and test in a browser.