Help with Photohsop!

[alimoe]

I want to create templates using photoshop!
And i want to edit them with macromedia dreamweaver!...
I want to create headers, banners, footers, main body etc......

navigation bar! please help!

[Thomas Winckler]

Hi there,

Not quit sure why you want to create templates in PHOTOSHOP

I don't think you can edit them in DREAMWEAVER.

Here is what the help file says.

You can save a template in PSD format for use with other Adobe products, such as Adobe Graphics Server (available only in English) and Adobe GoLive. For example, a GoLive user can place a PSD template in a page layout, bind its variables to a database using dynamic links, and then use Graphics Server to generate iterations of the artwork. Likewise, a developer working with Graphics Server can bind the variables in the PSD file directly to a database or another data source.

For more information on using PSD templates to create data-driven graphics, see Adobe GoLive Help and the Adobe Graphics Server Developer Guide.

[macneato]

Hi Alimoe,

Firstly... regarding Thomas' reply. Don't even head that direction, Golive has been discontinued (and thanks heavens).

Now let me address your question.

There are basically two ways of going about it.

The first (easier method of the two but costly) - Get a freelance, tons of them out there or buy an application that does it for you (but wait!!! this never REALLY comes out right)

Two - Learn HTML & CSS... and you will doing it for yourself in no time.

[electroskan.com]

If you create a template in photoshop and want it to convert to an HTML/CSS site then you need to do something called slicing. Alternatively you can also lift images/slices from photoshop. Let me tell you how it is done.

1. Save the photoshop file. Click the Imageready button at the bottom of the tools palette in photoshop to fire up the design in Adobe Imageready (Hope you have Adobe Imageready installed)

2. Once the design has been opened up in Imageready use the 'slicing tool' You can find that in the tools palette. Find it out yourself.

2. Once you have clicked on the slice tool start slicing the design just like you would slice a cake in a way that you separate out things like buttons, a header, footer and anything that you want to remain separate.

3. Next is the most crucial step. You can save the sliced design as a file which will also give you the HTML file ie you are saving it as a web page itself and this is the easiest way but not always the best.

4. If you are familiar with HTML/CSS I suggest that you code the design on yourself using Dreamweaver or whatever is your choice.

Personally I believe that PS is just for mock-ups and to show the clients how the site is going to look like. If you want it to behave the way you like then I tell you there is nothing like hand-coding.

Anyways, All the best to you. Try googling for more results.

[Reliable]

...and if you are using PS CS3 you don't have to export to imageready. The functionality is included. Just look on your tools palette for the slicing tool and slice to your liking. Once it is sliced go to File-->Save for Web and Devices. I recommend you also optimize and appropriately name your slices. For instances, don't leave the slice containing your home button with the default name Image 001: rename it "Home". As you are optimizing you'll want to save spaces of solid color as background color and not an image. Use your discretion when choosing what type of file to save your picture slices in.

Once you've completed the Optimization step you can click the drop down menu to save the file as HTML and images. Save it in a place that wil be easy to locate when you go to create a new site in Dreamweaver.

It is better to have knowledge of HTML and CSS when you're doing this. You will surely want to tweak Photoshop's interpretation of your site. If you don't know HTML and CSS, do what I did when I started out: Google away!

Once you have your template the way you want it in Dreamweaver go to File--> Save as Template and you're all set. The nice thing about templates, as you may already know, is that when you make an edit to one page you make an edit to all pages regardless of the number of pages. You r links will update automatically on all your pages. If your client needs a change you don't have to go through one by one. Such a time saver.

All the best to you. Hope you found this informative.