Basic Layout Coding using Fireworks or Photoshop CS 2

**Recursion** · 01-07-2006, 01:08 PM

I know Properclone did one but it didnt include Photoshop also his images are gone and this one may be a bit more detailed.

1.) Load up your layout in one of the Programs.

2.) You will now need to slice the layout using the 'slice tool'. In Fireworks it is the [img]http://www.****************/uploads/45ad4619a5.jpg[/img] button under 'Web'.
In Photoshop it is the [img]http://www.****************/uploads/2e8ebd68c8.jpg[/img] button.

3.) Drag the mouse and make sort of 'Areas'. In photoshop these areas will be shown as boxes with a blue outline: [img]http://www.****************/uploads/11cab94c0b.jpg[/img].

In Fireworks they will be a transparent green colour with a red outline: [img]http://www.****************/uploads/7a4d8b2886.jpg[/img]. I suggest doing sices for the banner, content titles, footer, navigation and any other 'Areas' like stats you might have.

4.)
PHOTOSHOP
In photoshop goto File> Save for Web.

[img]http://www.****************/uploads/371b5418f8.jpg[/img]

You will get a big box up like this one:
[img]http://www.****************/uploads/b5bcc7a2c8.jpg[/img]

in this area:
[img]http://www.****************/uploads/278e24122f.jpg[/img]

Change where it says 'Gif' to PNG24 and UNtick Transparency.
It should now look something like this:
[img]http://www.****************/uploads/afdc78c490.jpg[/img]

Now click the save button. Select where you're saving it to and under 'Save As Type' put HTML and Images.

Now Click Save - You're Done! Just edit it by adding content now.

FIREWORKS

In Fireworks click this button: [img]http://www.****************/uploads/55e1b4a4fd.jpg[/img]

Now go down to 'Dreamweaver' and click 'Export HTML':
[img]http://www.****************/uploads/7ef41ecc12.jpg[/img]

Now choose where you want to save the layout. Now under Export put HTML and Images. then click Save! - You're Done!

Hope this was Usefull

- It was my first Tutorial and so may not be very good.

This is not the best way to code layouts but its how i used to do it before i knew how to code properley

Photoshop also codes better than Fireworks !!

By the way MODs/Admins, THAT IS NOT MY SCHOOL ANYMORE!

Thread moved from Web Design by Luke♥. [Forum Moderator] Please post in the right section next time.

~~MattUH~~ · 01-07-2006, 01:10 PM

could of used a better layout as an example.

**Recursion** · 01-07-2006, 01:12 PM

supose so lol. Its just the first one i clicked on because it was on my desktop. Also I find Photoshop does better coding than fireworks but both dont do it properley.