Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

    Using Adobe Creative Suite To Build Websites

    Subscriber Reviews • Browse Similar Topics

    Overview

    In this software training course by InfiniteSkills, you will learn how to utilize the tools available to you in the Adobe Creative Suite to create a beautiful and functional website. Whether you are using the original Adobe Creative Suite, or the latest version, the techniques taught in this video tutorial are applicable in all the versions. You start off in Adobe Photoshop, exploring the wireframe process of building a website. The next step is the review process, using Adobe Acrobat. After the review process, you will learn to apply design to the wireframe in Photoshop and Illustrator. Continuing on in this video based training course, you move to working with the design in Dreamweaver. You will create the meat of the website within Dreamweaver, using the tools available in this software. Next, you explore the creation of a slideshow, using Adobe Flash, and publish that slideshow into you website within Dreamweaver. Finally, you will finish up the website, preparing it to be published to the world wide web! By the completion of this training course, you will be familiar with how the various Adobe Creative Suite programs work together to help you create a website, from wireframe to publishing. Extensive working files are included in this computer software tutorial to allow you to work with the author in learning the software.

    Subscriber Reviews

    Average Rating: 3.5384615384615383 out of 5 rating Based on 13 Ratings

    "Excellent head start on web design" - by Ashish Desai on 22-JUL-2012
    Reviewer Rating: 1 star rating2 star rating3 star rating4 star rating5 star rating
    The whole video series is so well constructed. Step by step creation of website from scratch makes it so easy to understand. The overview of the basics of Photoshop and the layout of panels apt for design was amazing. Anyone who needs a headstart on web design must go through this video series. The amount of time given to each section is precisely what one needs to do great hands on while learning from video.
    Report as Inappropriate

    Table of Contents

    Chapter/Selection

    Time

    01. Introduction

    Welcome

    Play Video

    00:01:20

    Viewing The Completed Site

    Preview

    00:01:56

    The Workflow Process

    Preview

    00:03:15

    02. Setting Up Photoshop For Web Layout

    Setting Photoshop's Preferences

    Preview

    00:03:37

    Arranging The Workspace

    Preview

    00:06:41

    Setting Panel Options - Part 1

    Preview

    00:05:00

    Setting Panel Options - Part 2

    Preview

    00:05:18

    Customizing Menus And Keyboard Shortcuts

    Preview

    00:07:39

    Saving Photoshop's Workspace

    Preview

    00:03:20

    03. Laying The Foundation With Wireframing

    Creating The Layout File

    Preview

    00:05:32

    Setting The Layout Guides

    Preview

    00:06:20

    Using The Layout Grid

    Preview

    00:02:48

    Beginning The Wireframing Process

    Preview

    00:05:38

    Continuing The Wireframe

    Preview

    00:04:15

    Selecting Positioning And Aligning Vector Objects

    Preview

    00:06:38

    Precisely Sizing Vector Objects

    Preview

    00:05:15

    Additional Object Sizing

    Preview

    00:03:16

    Precisely Positioning Objects

    Preview

    00:06:52

    Creating Additional Wireframe Objects - Part 1

    Preview

    00:04:10

    Creating Additional Wireframe Objects - Part 2

    Preview

    00:05:46

    Adding The Footer And Final Adjustments

    Preview

    00:04:51

    Organizing The Layers Panel

    Preview

    00:07:02

    Preparing The Wireframe For Review - Part 1

    Preview

    00:07:11

    Preparing The Wireframe For Review - Part 2

    Play Video

    00:07:09

    Exporting The Wireframe For Review

    Preview

    00:05:52

    04. Reviewing In Acrobat

    Preparing The PDF For Sharing

    Preview

    00:09:07

    Adding Sticky Note Comments

    Preview

    00:08:26

    Working With The Comments Pane

    Preview

    00:04:28

    Summarizing Comments

    Preview

    00:04:19

    05. Applying Design To The Wireframe

    Preparing The Wireframe For Design

    Preview

    00:05:24

    Choosing Fonts

    Preview

    00:06:55

    Choosing Colours

    Preview

    00:06:33

    Saving Colours In Photoshop

    Preview

    00:06:15

    Setting The Header's Background Colour

    Preview

    00:04:01

    Building The Logo - Part 1

    Play Video

    00:07:11

    Building The Logo - Part 2

    Preview

    00:05:20

    Using Smart Objects Between Photoshop And Illustrator

    Preview

    00:04:27

    Building The Menu

    Preview

    00:07:03

    Applying A Gradient Overlay

    Play Video

    00:06:42

    Inserting Center Box Headings - Part 1

    Preview

    00:07:10

    Inserting Center Box Headings - Part 2

    Preview

    00:04:17

    Creating The Center Picture Boxes

    Preview

    00:04:28

    Adding Placeholder Text

    Preview

    00:04:44

    Building The News Container - Part 1

    Preview

    00:07:06

    Building The News Container - Part 2

    Preview

    00:03:55

    Creating The Calendar

    Preview

    00:03:21

    Finding And Editing A FaceBook UI

    Preview

    00:07:24

    Adding The FaceBook Facepile

    Preview

    00:02:34

    Inserting A Twitter Profile Feed

    Preview

    00:02:28

    Finishing Up The Footer

    Preview

    00:03:04

    06. Adding Photographs And Textures To The Layout

    Adding A Texture Into The Header

    Preview

    00:06:54

    Inserting A Photo For The Slideshow

    Preview

    00:04:46

    Inserting Center Box Photography

    Preview

    00:07:18

    Finalizing The Design Stage

    Preview

    00:02:46

    07. Converting The Photoshop Layout To HTML

    Getting Started With Slicing

    Preview

    00:05:46

    Creating Additional Layer-Based Slices

    Preview

    00:06:41

    Subdividing Slices

    Preview

    00:05:05

    Naming Slices

    Preview

    00:06:29

    Preparing The Layout For Exporting

    Play Video

    00:06:56

    Setting Export Options

    Preview

    00:05:33

    Viewing The Exported Results

    Preview

    00:03:21

    08. Moving The Layout Into Dreamweaver

    Customizing The Dreamweaver Interface

    Preview

    00:04:06

    Defining The Site In Dreamweaver

    Preview

    00:04:02

    Opening And Touring Photoshop's HTML File

    Play Video

    00:07:46

    Removing The Whitespace Objects

    Preview

    00:04:38

    Cleaning Up The Style Sheet

    Preview

    00:05:15

    Centering The Layout

    Preview

    00:06:25

    Previewing Your Work In A Browser

    Preview

    00:03:46

    Positioning The Header

    Play Video

    00:02:35

    Positioning The Main Menu - Part 1

    Play Video

    00:06:34

    Positioning The Main Menu - Part 2

    Preview

    00:06:19

    Removing Positioning From Layout Objects

    Preview

    00:05:15

    Floating Layout Objects

    Preview

    00:04:44

    Setting Vertical Spacing - Part 1

    Preview

    00:05:54

    Setting Vertical Spacing - Part 2

    Play Video

    00:02:40

    Setting Horizontal Spacing

    Preview

    00:04:41

    Formatting The Overall Page

    Play Video

    00:07:06

    09. Streamlining The Layout In Dreamweaver

    Extracting The Logo From The Photoshop Layout

    Preview

    00:05:40

    Inserting The Logo Into Dreamweaver

    Preview

    00:04:41

    Extracting The Center Box Background

    Play Video

    00:04:51

    Setting Center Box Backgrounds

    Preview

    00:05:15

    Inserting Center Box Header Text

    Preview

    00:06:21

    Creating The Center Box Picture Frames

    Preview

    00:04:50

    Extracting And Inserting The Center Box Photos

    Play Video

    00:05:21

    Converting Inline CSS To Class Rules

    Play Video

    00:06:00

    Formatting Center Box Text

    Preview

    00:04:37

    Exporting Internal CSS To An External Syle Sheet

    Preview

    00:07:14

    Using Iframes To Build A Scrolling Box

    Play Video

    00:06:19

    Finishing Up The Scroll Box

    Preview

    00:02:55

    10. Building A Self-Running Slideshow In Flash

    Getting Started In Flash

    Preview

    00:04:53

    Editing Flash Content In Photoshop

    Preview

    00:04:23

    Inserting Additional Graphics Into Flash

    Play Video

    00:03:52

    Building The First Slideshow Transition

    Play Video

    00:06:27

    Building The Remaining Slide Transitions

    Preview

    00:04:40

    Adjusting Slideshow Playback Speed

    Preview

    00:05:58

    Publishing The Flash Slideshow

    Preview

    00:02:33

    Inserting The Slideshow Into Dreamweaver

    Preview

    00:02:11

    11. Adding Social Feeds & Finishing Touches

    Adding FaceBook And Twitter Feeds

    Preview

    00:04:45

    Building A Photo Gallery - Part 1

    Preview

    00:06:49

    Building A Photo Gallery - Part 2

    Preview

    00:04:40

    Uploading Your Completed Work

    Play Video

    00:05:06

    Wrapping Up

    Preview

    00:02:30

    Extras

    The publisher has provided additional content related to this title.


    Description
    Content

    Exercise file

    • Working_Files.zip