Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

PSD > Dreamweaver > Website - How??

M

Magrathea

macrumors regular
Original poster
Aug 21, 2008
201
0
I've been give a mockup of a website as a series of PSD (CS4) files - one PSF file for each page. Various element of the site are contained in layers in the PSD files. I've never used Dreamweaver before (I'm a Drupal guy :)) so was wondering how I go about creating an HTML site out of the PSD layers using Dreamweaver?

This is how I think it should work, correct me if I'm wrong and if there is an easier way.

1) Export all the layers as PNG (JPGs for the photos) I tried a script that is built into Photoshop to do this (File > Scripts > Export Layers to Files) but it didn't appear to work.

2) Once I have all the elements in PNG / JPG form I drag them into some type of template in Dreamweaver. I need to create this first before I drag in the elements ?? Should this template just be a table or should I use the more modern DIV tag method?

Any comments or hints would be appreciated. This a one off site that will be up for 6 months hence the design in Dreamweaver. The Graphics are done and don't need to change.

Regards
Mag
 
Best hint is don't!
Really dinny do this is creates a mess of a site that is inaccessible, spaghetti coded, and slow to load.

A better solution its to look at each component of your mockup and think about what needs to be a image, what can be easily recreated with HTML and CSS, and how if anything can be simplified.

The next stage is to optimise each of the images you have to use then write some clean and efficient HTML styled up with CSS.

If your using gradients you can recreate these for modern browsers using CSS and just have a version of your site with image gradients for deprecated browsers.
 
I know but ...

BabyjenniferLB, I hear you but this is a rush, low paid job that will only be viewed by 60 people max, perhaps on an intranet. So if I were to do it my "incorrect" way, what's the easiest way ??
 
Fireworks ....

Ok, so how do I use Fireworks to do this? Sorry but I'm totally new to this WYSIWYG stuff. This is a quick and dirty site. Any help appreciated.
 
Fireworks Rocks

Never opened Fireworks in my life but now I have a fully sliced layout in Dreamweaver. A big girly kiss to the person who suggested Fireworks !!!!:)

Sure, it's using tables as apposed to fancy DIVs and CSS but for this project I think it'll work.

Thanks All
Mag
 
Just in case you get this again in the future, photoshop also has the slice tool and you can save slices for web too. Just another possibility ;)
 
Magrathea said:
<snip>
Sure, it's using tables as apposed to fancy DIVs and CSS but for this project I think it'll work.
<snip>
Click to expand...

Just so you know, as said above: Photoshop can also slice & export AND export as divs and CSS instead of tables. I believe Fireworks can do this too. But the div and CSS options may be software version dependant.

/Doug
 
Another option is Flash Catalyst, which creates a fairly sophisticated interactive application from a layered Photoshop or Illustrator file without having to write code or create slices.
ie: you import the layered PSD or AI files into Flash Catalyst; the layers and overall layout are preserved, and you have only to setup the button behaviors, scrollbars, navigation between pages, etc... in an easy to use GUI.
It's all point and click WYSIWYG, and no coding at all.

Basically, Flash Catalyst creates a Flex application with custom components from your imported artwork.
http://www.adobe.com/products/flashcatalyst/
 
snickelfritz said:
Another option is Flash Catalyst, which creates a fairly sophisticated interactive application from a layered Photoshop or Illustrator file without having to write code or create slices.
ie: you import the layered PSD or AI files into Flash Catalyst; the layers and overall layout are preserved, and you have only to setup the button behaviors, scrollbars, navigation between pages, etc... in an easy to use GUI.
It's all point and click WYSIWYG, and no coding at all.

Basically, Flash Catalyst creates a Flex application with custom components from your imported artwork.
http://www.adobe.com/products/flashcatalyst/
Click to expand...

I watched the demo vid and this really piqued my interest!

Do you have any firsthand experience with Catalyst? I have been meaning to give it a go, but I am scared the results will not be worth my time.
 
I work in Flash Pro and write my own code.

Flash Catalyst is geared more toward beginners and (especially) designers.
For example, the designer can design a website layout in Photoshop, Illustrator or Fireworks, import it into FC and create a functioning prototype that is handed off to a web developer as a reference.
There are a lot of tutorial videos at Adobe TV on Flash Catalyst.
From what I've seen, the results are actually fairly astonishing, considering that no coding is required.
 
Your job is going to be easier by far if you inspect each portion of your psd, and lay it out manually using divs. (use the select tool, copy merged, and create a new document and save is how I do it). If you export for web via fireworks or photoshop, it will use tables/ill defined divs and will break if you add anything to it.
 
snickelfritz said:
I work in Flash Pro and write my own code.

Flash Catalyst is geared more toward beginners and (especially) designers.
For example, the designer can design a website layout in Photoshop, Illustrator or Fireworks, import it into FC and create a functioning prototype that is handed off to a web developer as a reference.
There are a lot of tutorial videos at Adobe TV on Flash Catalyst.
From what I've seen, the results are actually fairly astonishing, considering that no coding is required.
Click to expand...
Definitely agreed. I haven't used Flash Catalyst myself, but I have had a look at it and it's definitely an intersting program, and I would like to give making some stuff in it at some point.

jaikob said:
Your job is going to be easier by far if you inspect each portion of your psd, and lay it out manually using divs. (use the select tool, copy merged, and create a new document and save is how I do it). If you export for web via fireworks or photoshop, it will use tables/ill defined divs and will break if you add anything to it.
Click to expand...
Agreed. There's really no point in trying to export the slices or whatever you end up using from the PSD. I used to do that, and quite honestly, it makes a complete mess. Instead, as Jaikob suggested, just make the design in DreamWeaver with CSS DIVs, and add images in as needed, even if it requires adding in additional DIVs.

I'm not someone who designs websites in Photoshop, but even if you are designing in Photoshop, it's best that once you create the design, that you then recreate it seperately in DreamWeaver if you want the best possible code.

Of course, if you really are that badly rushed, you could give slices and the save for web export a go, but I really can't recommend it.
 
I've tried using export to Dreamweaver from InDesign, to format a restaurant menu for a website;
The paragraph style names and the name of the folder they are grouped in are concatenated as the CSS class names.
You still have to write the styles, although the structure is setup for you.

Here's the default HTML output from a selected story.
(paragraph styles are grouped in the folder: "dinner")
Code looks pretty clean.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>An_menus_11x14</title>
		<style type="text/css" media="screen"><!--
			p.dinner-black-subheader {}
			p.dinner-dinner-item {}
			p.dinner-description {}
			p.dinner-description-list {}
		--></style>
	</head>
	<body>
		<div id="an-menus-11x14">
			<div class="story">
				<p class="dinner-black-subheader">Appetizers</p>
				<p class="dinner-dinner-item">Soft Shell Crab Spring Roll $9.50</p>
				<p class="dinner-description">Soft shell crab, crabstick, asparagus and Korean chives wrapped in a spring roll sheet and deep fried.<br />Served with spicy-sweet miso sauce and yuzu vinaigrette.</p>
				<p class="dinner-dinner-item">Cherry Blossom Shrimp $8.50</p>
				<p class="dinner-description">Lightly fried “potato cracker” battered shrimp ball with sweet and creamy sauce.</p>
				<p class="dinner-dinner-item">Beef Jalapeño Poppers $7.50</p>
				<p class="dinner-description">Halved Jalapeno, panko battered with minced beef, scallions and cream cheese, flash-fried and served with sweet cream, chili and ginger soy sauces.</p>
				<p class="dinner-dinner-item">Calamari Sea Salt $9.50</p>
				<p class="dinner-description">Filets of calamari lightly breaded with asian seasoning and pan-seared. Served with a spicy asian aioli.</p>
				<p class="dinner-dinner-item">Volcano Sauté $7.50</p>
				<p class="dinner-description">Enoki, shiitake and button mushrooms sautéed with bacon and shishito peppers.</p>
				<p class="dinner-dinner-item">Green Tea Soba Noodle Salad 0.00</p>
				<p class="dinner-dinner-item">Asian Chicken Wings 0.00</p>
				<p class="dinner-dinner-item">Chicken Yaki-tori 0.00</p>
				<p class="dinner-dinner-item">Beef Yaki-tori 0.00</p>
				<p class="dinner-dinner-item">Lettuce Wraps $10.00</p>
				<p class="dinner-description">Wok-seared marinated chicken, mushrooms, garlic and water chestnuts. Served with a special sauce.</p>
				<p class="dinner-dinner-item">Gyoza $5.50</p>
				<p class="dinner-description">Pan-seared beef and chicken dumplings.</p>
				<p class="dinner-dinner-item">Tempura</p>
				<p class="dinner-description">Lightly battered and flash-fried.<br />Served with a warm tempura sauce.</p>
				<p class="dinner-description-list">Shrimp $9.00</p>
				<p class="dinner-description-list">Chicken $7.50</p>
				<p class="dinner-description-list">Vegetable $6.50</p>
				<p class="dinner-dinner-item">Edamame $4.00</p>
				<p class="dinner-description">Boiled soybeans served warm with sea salt.</p>
				<p class="dinner-dinner-item">Egg Roll $4.00</p>
				<p class="dinner-description">Filled with pork, cabbage, carrots and water chestnuts.<br />Served with sweet sauce.</p>
				<p class="dinner-dinner-item">Eggplant $8.50</p>
				<p class="dinner-description">Eggplant “fish trap” stuffed with shrimp ball, flash-fried and drizzled with plum wine sauce.</p>
			</div>
		</div>
	</body>
</html>
Personally, for a controlled intranet site of moderate size, I would use Flash Catalyst; it's faster and simpler than screwing around with complex HTML / CSS / JS.
The results are going to be a lot better as well, since you have simple WYSIWYG control over the layout, fonts, page transitions, etc...
 
Site Done

Ok, so the site is done. Not going to win any awards for load times; I cut it up in to 3 part only but she looks pretty and I even used old school image maps (bring on the 90s!) Fireworks made a nice style sheet with Div tags and I create a custom DIV tag for the text area.

In future I'll try to export all the element out of the PSD file but I wasn't able to get the export script to work, anyone know why.

Now if I could just figure out how to do this for Drupal :)
 
Magrathea said:
Now if I could just figure out how to do this for Drupal :)
Click to expand...
If you're intending on making a Drupal template, it's probably a good idea to just take apart an existing Drupal template and learn from that. Of course, if you're planning on making a Drupal template you'll probably want to work on actually coding the site from scratch with CSS and DIVs, instead of trying to export directly from Photoshop. Seriously, it's not good practice to try and make the entire site directly in Photoshop.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back