Using Adobe Creative Suite To Build Websites

Using Adobe Creative Suite To Build Websites

Released March 2012
Publisher(s): Infinite Skills
ISBN: 9781926873930

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

In this software training course by expert author and developer Geoff Blake, 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 your 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.

Table of contents

  1. Introduction
    1. Welcome 00:01:21
    2. Viewing The Completed Site 00:01:57
    3. The Workflow Process 00:03:16
  2. Setting Up Photoshop For Web Layout
    1. Setting Photoshop's Preferences 00:03:38
    2. Arranging The Workspace 00:06:42
    3. Setting Panel Options - Part 1 00:05:00
    4. Setting Panel Options - Part 2 00:05:19
    5. Customizing Menus And Keyboard Shortcuts 00:07:39
    6. Saving Photoshop's Workspace 00:03:20
  3. Laying The Foundation With Wireframing
    1. Creating The Layout File 00:05:33
    2. Setting The Layout Guides 00:06:21
    3. Using The Layout Grid 00:02:48
    4. Beginning The Wireframing Process 00:05:39
    5. Continuing The Wireframe 00:04:15
    6. Selecting Positioning And Aligning Vector Objects 00:06:39
    7. Precisely Sizing Vector Objects 00:05:16
    8. Additional Object Sizing 00:03:17
    9. Precisely Positioning Objects 00:06:52
    10. Creating Additional Wireframe Objects - Part 1 00:04:10
    11. Creating Additional Wireframe Objects - Part 2 00:05:47
    12. Adding The Footer And Final Adjustments 00:04:51
    13. Organizing The Layers Panel 00:07:03
    14. Preparing The Wireframe For Review - Part 1 00:07:11
    15. Preparing The Wireframe For Review - Part 2 00:07:10
    16. Exporting The Wireframe For Review 00:05:52
  4. Reviewing In Acrobat
    1. Preparing The PDF For Sharing 00:09:07
    2. Adding Sticky Note Comments 00:08:27
    3. Working With The Comments Pane 00:04:29
    4. Summarizing Comments 00:04:19
  5. Applying Design To The Wireframe
    1. Preparing The Wireframe For Design 00:05:25
    2. Choosing Fonts 00:06:55
    3. Choosing Colours 00:06:33
    4. Saving Colours In Photoshop 00:06:16
    5. Setting The Header's Background Colour 00:04:02
    6. Building The Logo - Part 1 00:07:12
    7. Building The Logo - Part 2 00:05:20
    8. Using Smart Objects Between Photoshop And Illustrator 00:04:27
    9. Building The Menu 00:07:04
    10. Applying A Gradient Overlay 00:06:42
    11. Inserting Center Box Headings - Part 1 00:07:10
    12. Inserting Center Box Headings - Part 2 00:04:17
    13. Creating The Center Picture Boxes 00:04:28
    14. Adding Placeholder Text 00:04:44
    15. Building The News Container - Part 1 00:07:06
    16. Building The News Container - Part 2 00:03:56
    17. Creating The Calendar 00:03:22
    18. Finding And Editing A FaceBook UI 00:07:25
    19. Adding The FaceBook Facepile 00:02:35
    20. Inserting A Twitter Profile Feed 00:02:29
    21. Finishing Up The Footer 00:03:04
  6. Adding Photographs And Textures To The Layout
    1. Adding A Texture Into The Header 00:06:54
    2. Inserting A Photo For The Slideshow 00:04:46
    3. Inserting Center Box Photography 00:07:19
    4. Finalizing The Design Stage 00:02:47
  7. Converting The Photoshop Layout To HTML
    1. Getting Started With Slicing 00:05:46
    2. Creating Additional Layer-Based Slices 00:06:42
    3. Subdividing Slices 00:05:05
    4. Naming Slices 00:06:30
    5. Preparing The Layout For Exporting 00:06:56
    6. Setting Export Options 00:05:34
    7. Viewing The Exported Results 00:03:21
  8. Moving The Layout Into Dreamweaver
    1. Customizing The Dreamweaver Interface 00:04:06
    2. Defining The Site In Dreamweaver 00:04:02
    3. Opening And Touring Photoshop's HTML File 00:07:46
    4. Removing The Whitespace Objects 00:04:38
    5. Cleaning Up The Style Sheet 00:05:15
    6. Centering The Layout 00:06:25
    7. Previewing Your Work In A Browser 00:03:46
    8. Positioning The Header 00:02:35
    9. Positioning The Main Menu - Part 1 00:06:34
    10. Positioning The Main Menu - Part 2 00:06:20
    11. Removing Positioning From Layout Objects 00:05:15
    12. Floating Layout Objects 00:04:45
    13. Setting Vertical Spacing - Part 1 00:05:55
    14. Setting Vertical Spacing - Part 2 00:02:41
    15. Setting Horizontal Spacing 00:04:41
    16. Formatting The Overall Page 00:07:07
  9. Streamlining The Layout In Dreamweaver
    1. Extracting The Logo From The Photoshop Layout 00:05:40
    2. Inserting The Logo Into Dreamweaver 00:04:41
    3. Extracting The Center Box Background 00:04:51
    4. Setting Center Box Backgrounds 00:05:15
    5. Inserting Center Box Header Text 00:06:21
    6. Creating The Center Box Picture Frames 00:04:51
    7. Extracting And Inserting The Center Box Photos 00:05:21
    8. Converting Inline CSS To Class Rules 00:06:01
    9. Formatting Center Box Text 00:04:37
    10. Exporting Internal CSS To An External Syle Sheet 00:07:14
    11. Using Iframes To Build A Scrolling Box 00:06:20
    12. Finishing Up The Scroll Box 00:02:56
  10. Building A Self-Running Slideshow In Flash
    1. Getting Started In Flash 00:04:54
    2. Editing Flash Content In Photoshop 00:04:23
    3. Inserting Additional Graphics Into Flash 00:03:53
    4. Building The First Slideshow Transition 00:06:28
    5. Building The Remaining Slide Transitions 00:04:41
    6. Adjusting Slideshow Playback Speed 00:05:58
    7. Publishing The Flash Slideshow 00:02:34
    8. Inserting The Slideshow Into Dreamweaver 00:02:12
  11. Adding Social Feeds & Finishing Touches
    1. Adding FaceBook And Twitter Feeds 00:04:45
    2. Building A Photo Gallery - Part 1 00:06:50
    3. Building A Photo Gallery - Part 2 00:04:40
    4. Uploading Your Completed Work 00:05:06
    5. Wrapping Up 00:02:31

Product information

  • Title: Using Adobe Creative Suite To Build Websites
  • Author(s):
  • Release date: March 2012
  • Publisher(s): Infinite Skills
  • ISBN: 9781926873930