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 http://www.****************/uploads/45ad4619a5.jpg button under 'Web'.
In Photoshop it is the http://www.****************/uploads/2e8ebd68c8.jpg button.
3.) Drag the mouse and make sort of 'Areas'. In photoshop these areas will be shown as boxes with a blue outline: http://www.****************/uploads/11cab94c0b.jpg.
In Fireworks they will be a transparent green colour with a red outline: http://www.****************/uploads/7a4d8b2886.jpg. 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.
http://www.****************/uploads/371b5418f8.jpg
You will get a big box up like this one:
http://www.****************/uploads/b5bcc7a2c8.jpg
in this area:
http://www.****************/uploads/278e24122f.jpg
Change where it says 'Gif' to PNG24 and UNtick Transparency.
It should now look something like this:
http://www.****************/uploads/afdc78c490.jpg
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: http://www.****************/uploads/55e1b4a4fd.jpg
Now go down to 'Dreamweaver' and click 'Export HTML':
http://www.****************/uploads/7ef41ecc12.jpg
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.
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 http://www.****************/uploads/45ad4619a5.jpg button under 'Web'.
In Photoshop it is the http://www.****************/uploads/2e8ebd68c8.jpg button.
3.) Drag the mouse and make sort of 'Areas'. In photoshop these areas will be shown as boxes with a blue outline: http://www.****************/uploads/11cab94c0b.jpg.
In Fireworks they will be a transparent green colour with a red outline: http://www.****************/uploads/7a4d8b2886.jpg. 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.
http://www.****************/uploads/371b5418f8.jpg
You will get a big box up like this one:
http://www.****************/uploads/b5bcc7a2c8.jpg
in this area:
http://www.****************/uploads/278e24122f.jpg
Change where it says 'Gif' to PNG24 and UNtick Transparency.
It should now look something like this:
http://www.****************/uploads/afdc78c490.jpg
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: http://www.****************/uploads/55e1b4a4fd.jpg
Now go down to 'Dreamweaver' and click 'Export HTML':
http://www.****************/uploads/7ef41ecc12.jpg
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.