We are going to take a quick look at all of the applications in the Creative Suite 3 Web Premium that we are going to be using. The Web Premium Suite has inherited four applications from Studio 8, namely Dreamweaver, Flash, Fireworks, and Contribute and the Web Premium adds Adobe Photoshop, Illustrator, Bridge, Acrobat Professional, and Adobe Device Central CS3 which is a brand new application that lets you create and preview assets for mobile devices.
So that is a lot of applications in one package and certainly everything that a web designer needs to create some really rich and engaging websites. We will start with Illustrator and for our project; we are going to be starting off in Illustrator by creating a logo for our website based on a scan that we have been given by the customer. We are going to take this logo and we are going to incorporate it into our Photoshop Design. We are also going to bring this into Flash and if you struggle a bit in bringing Illustrator files into Flash, CS3 totally takes care of that by providing you a very efficient way of taking assets across these applications.
Illustrator CS3 also introduces a brand new feature called Live Color which lets you create and edit color groups, experiment with color harmonies as well as reassign or reduce colors in your artwork. There is also an integration with a brand new Adobe community that's called Kuler which allows designers to share color groups or themes. So again, we are going to be using Illustrator to take this scanned artwork and convert it into a logo for our site. So we are going to take this logo and we are going to bring it into Photoshop for our website layout. So we will switch over to Photoshop and this is our completed layout and Photoshop really doesn't need an introduction because it has been an essential part of a web designer's toolkit for a long time.
With CS3 you have got better integration between Photoshop and Dreamweaver so you are going to have a much more streamlined workflow going from a Photoshop website mock-up to an HTML web page. Photoshop CS3 also adds a ton of new features, but if you are an interactive designer, what's really going to get you is the Photoshop to Flash workflow. We are going to use Photoshop to build out a complete website mock-up, we are going to incorporate our logo design and then we are also going to be using Photoshop when we are building a Flash based slide show.
So we are going to take our website layout and isolate the navigation bar and we are going to bring it into Fireworks. So we will tab back to Bridge and in our website, we will just open up the navigation file and if we double click on it, Bridge will launch the associated application which is Fireworks in this case. We are going to take the flat bitmap image of the navigation bar and we are going to slice it up and we are going to add some CSS based pop-up menus. We are going to take what we have done in Photoshop and take what we have done in Fireworks and we are going to bring that into Dreamweaver.
So Adobe Dreamweaver CS3 is the industry standard tool for building websites and web applications and it has replaced Adobe GoLive as the web development tool of choice in the creative suites. So Dreamweaver CS3 add some really great features like better support for visual CSS authoring, we have got some starter pages which we are going to use. We have got an online companion site called the CSS Advisor that we are going to take a look at. There is better integration with Photoshop like I mentioned so you can copy and paste images from Photoshop directly into Dreamweaver. There is better integration with Bridge and there is also integration with Device Central, so we can preview our content on a mobile device emulator.
In addition to the Homepage layout that we have here, we are also going to create a secondary level of layout and we are going to create a template based on that layout and we are going to be using that template extensively when we switch over to Contribute. Because accessibility to this website from a hand-held device is important to us, we are going to use Adobe Device Central CS3 to preview our content. So we will switch over to Device Central and you can see that this is what our site is going to look like on the mobile device. We can use the emulator to interact with the phone and we can see exactly how our features are going to show up and how the rest of our site text is going to appear.
So let's switch back to Dreamweaver. That's what the main features area we are going to be using a Flash animation. So, we are going to build that in Flash. We are also going to build an interactive video player in Flash as well as the slide show. So we will switch over to Flash and you can see that we have got our interactive slide show open which we are going to build using our image files and a Flash template. We are also going to build our Flash messaging area and we are going to use our Photoshop layout file. I think one thing that you are really going to get a kick out of is how easy it is to import Photoshop files.
The Photoshop files retain their layer hierarchy in the timeline as well as the library. You can bring in layers as bitmaps or symbols, you can bring in layers as layers or you can bring them in as Flash keyframes. You can merge Photoshop layers together as they are being brought into Flash and the color remain consistent. So that workflow is really, really streamlined. We are also going to be building an interactive video player in Flash and to do that, we are going to take the QuickTime movies that we have in our assets folder and we are going to convert them into Flash video files.
So we are going to be spending some time looking at the Flash video encoder which allows you to take these QuickTime movies or other types of video assets and batch encode them to Flash. So we will talk about the different settings that you can change to get the best video quality at the smallest file size. Lastly, one of the customer requirements that we had is to be able to make content updates to the site themselves which is found by us because I think we would rather be designing sites rather than copying and pasting web copy.
So we will use Adobe Contribute CS3 and Dreamweaver templates to enable that. Now let's launch Contribute. So Contribute has launched in the background so we will just Alt+Tab to it and in Contribute, we are going to setup a web-site connection to our web-site. We are going to take a look at how you would administer Contribute website and we are also going to take a look at how a user would interact and edit web pages using Contribute. The great thing about Contribute is its simple workflow. We simply browse to our page that we want to edit, we click on the Connect button to connect to the site, we simply press the Edit Page button to open up this page in a wizzywig Editor and we can begin adding content. And a great thing about using Dreamweaver templates is that we can specify editable regions that can only be edited.
So we can't edit the header, we can't edit the sidebar, we can only edit the Page Title and we can only edit the page text. Once I am ready to publish this, I can publish this, I can send it for review or I can save it for later. So we are obviously going to be pretty busy building out our project files using all of these great applications. I think if you are a web designer, an interactive designer or a web developer, you are really going to collect all the integration points between these applications. So let's get started.
