Learning Creative Web Design The Easy Way.

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.

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.

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.

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.

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.

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.

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.

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.

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.