| Page (1) of 2 - 02/09/07 |
 email article |
 print
page |
|
So you are a designer who lives and breathes Photoshop, you don't know HTML coding nor do you don't want to, but you need to help clients create an eye-popping website. Then this tutorial is just for you:
 |
| Instead of websites that look like Word documents, create anything you can visualize,and then hand off the consistent design to others with no worries at all. |
Part 1: will cover creating a website design using Photoshop slices. You'll learn here to use Photoshop Slices to pump out a web site in an instant (well, more like an hour).
Part 2: Creating Consistent Pages with Templates will cover the use of Macromedia Dreamweaver in conjunction with your Photoshop Slices to build Dreamweaver Page Templates that ensure consistency across your website.
Part 3: Handing over your Design to Content Contributors Using Adobe Contribute will show you how to setup Contribute 4 to allow contributors to fill your new pages with content, without worry about the design or navigation becoming hosed by people who know less about Dreamweaver then you do.
Part 1. Designing with Slices
While this technique is not new, revolutionary, nor in favor at the moment, it is one way that anyone with a visual orientation will appreciate. Many web folks are now designing websites using other methods, but few of those will appeal to anyone who thinks in pictures instead of code. So come on along, where seeing is believing and designing a website in your favorite graphics tool can be a blast. To follow along, please download the tutorial files (tutorial_sample_files_from_phoenixstudios.zip)
Step 1. Create or find a suitable graphic that will represent your home page design using Photoshop. One recommended size is 775x575 pixels (we will later make this fill and center within an 800x600 browser window nicely). The downside to a fixed-size design is that it may not be viewable on an iPod, but the the beauty of this technique is that whatever you can visualize in Photoshop, you can turn into a web page that most folks can view.
Step 2. Turn on "Extras" in Photoshop: >>View>Extras and >>View>Show>All. This will allow you to see guides and slices while you work, as well as provide a nice layout grid. Use Snap to align things up - but I bet you already knew that!
Step 3. For starters, drag four guides out that will represent the left, right, top, and bottom border areas. The portion left in the middle will later be blank in Dreamweaver, and that's where your HTML content will go. If you would like a border around your page layout, you would drag out 4 more guides around the edges for the border width needed.
Step 4. Click the Slice tool from the toolbar and then on the option bar select "Slices from Guides."
 |
| The Slice Tools in Photoshop: you may have never noticed these nifty features! |
Step 5. Use the "Save for Web" feature to save the HTML and the images to a new directory within your website's directory of folders. Call the file template.html or something you will remember after opening up Dreamweaver. Then save this Photoshop file for later use in Part 2 of this tutorial, and for any future slice changes.
Note: Don't save to the root folder of an existing website, if you already have one, as Photoshop automatically creates a new directory called "images" and we don't want anything overwritten!
 |
| The Save for Web Dialog like you have never seen. |
Step 6. To use the slices and HTML in Dreamweaver, just open the template.html file that Photoshop baked for you. Center your design by selecting the main table generated by Photoshop and click the Align=Center property. Now your design will be centered and fit in any 800x600 or larger browser window. Use the Page Property dialog to fill in the areas not filled by your design (backgrounds, font and link colors, etc.) or create a .css style sheet and attach that to the file.
Note: The Page Properties click is found by selecting outside the main table; and looking on the Properties Panel, or by clicking on any cell in a table.
 |
| The "elusive" Page Properties (Document Type) dialog box. This box is used to set up the appearence of your web pages, but places the code inside the document. A preferred method is to use a .css style sheet file, and then link that to this soon-to-be template. See Dreamweaver help for info on doing that. |
Step 7. Delete the center image and use that cell for your content. In this case, I deleted the image in the cell, but then used that same image from Photoshop as the content cell background in the Dreamweaver table - a slick way to make the design hang together.
The top center image is a good candidate to use as an image map for your site navigation, or use the left center slice - you choose! While creating imagemaps is a bit beyond the scope of this tut, here is the quick and dirty on that procedure:
A. Select the image you want to map as navigation and use the Properties palette in Dreamweaver to draw rectangles, circles, whatever, around the image area that will in essence be your button link. The Buttons in this case are apples with labels - but you are creative - they could be anything you have drawn in Photoshop.
B. Link the areas to page names that you anticipate needing for your site. (I know, you have not created them yet, but no matter, just type them in). In part 2 of this tutorial we will use a template to generate pages to match the names you typed here.
 |
| The output from Photoshop assembled in Dreamweaver. |
Well, that about bakes it for using slices to design a page. Use your Photoshop file to experiment in adjusting your slices to suit your needs. To regenerate the slices and replace them, just make your changes in Photoshop and do Step 5 (Save for web). Replace the new images with the old, and there you have it: a graphical based web-page without any fuss.
Note: When saving slices out of Photoshop, you can save JUST the slice images, and not the html page, now that you have set up things in Dreamweaver. This comes in handy if you need to tweak your design. For major changes (i.e. you add or move a slice) you will have to repeat steps 6 & 7 in Dreamweaver (or save to a different HTML file and cut and paste in Dreamweaver CODE view- yuck).
To see how you can now take your graphical page and create an entire site using consistent navigation, move on to the template tutorial!
Related Keywords:web design, Photoshop Slices , Dreamweaver Page Templates
Related Sites: Audio Video Producer , Corporate Media News , Digital Media Designer , Oceania , PhotoShop , Digital Producer
Related Newsletter: DMN Newsletter , Pixels Newsletter , Digital Media Net , DMNForums , Tutorial Finder
Vegas Pro 10 Available Now
The Epson Stylus® Pro 3880 and 4900 Designer Editions were created to specifically meet the unique needs of graphic designers.
