How To Design a Website using Adobe Fireworks

[loncify]

Shocked! ! Fast Web Design School Web site: css.nn.cx 

[evajoseph100]

in this video showed how to designed a website using adobe frame works.

[zacksutt]

Nice!

[roytheey]

Really cool you helped me so much thanks a lot I have inspiration now.

[MrGilas042985]

what software did you used in your recoding your tutorial?

[anedominguez]

wich resolution?

[gaggz]

Great step by step guide... thank you.

Can I ask here did you get vibrant image? Its exactly what I need for my own webpage...

[serviwebserviweb]

Thank you very much

[MrSaverioGentile]

what if u dont know container's height ? I mean the div having that cryons as background.. if theres lot of contents background image would repeat itself and in that case it wouldnt look good anymore

[vinny111]

Can u give me some advice on how to get in to the Graphic Design Industry, i have been to college , i studied at level 1 but my teacher said i was at level 3, also i did another intense course,i am 28 years old and i would love to get in to Graphic Design,i have been mainly using Photoshop editing photos airbrushing etc ,i do not have a Uni degree, could u give me some advice on how i can get a job in the graphic design industry, i live in London, please let me know thank u.

[elitepanzor]

great job! I just began using fireworks, and this is a great simple design tutorial.

Also, i have to say the design is clean, simple, and looks nice.

[jevonwilliamsjr]

I'm a noob, at fireworks. How do you create those boxes?

[banshi68]

How do you make the browser preview centre align? Mine is to the left.

[ParfiTV]

where can I get fireworks free for mac?

[TheStillpond]

Problem-- when adding the background image, he quickly puts it in without explaining how to do it.

He forgets to explain things at various points. This is much like a cell phone that cuts in and out when you are trying to talk to somebody. Always remember to explain consistently.

[killahdudexxx]

When you are creating your first website, what is absolutely necessary is to have a good webhost. I have used hostclose . com for a year now, and I am very satisfied with them.

[slovan]

How do you do the layers?

[shappy901]

@slovan did you find out how to do the layers? really need to find out how for my website

[stevekreeger]

good video - very helpful - definitely should zoom back out a lot more - can't always see what you're doing

[creativeinkinvites]

Great! thanks so much...very helpful



[soulgoodmusictube]

very cool tutorial

[gamzer]

Tut tut tut tut tut

[westnepal]

hi, can i make a new theme for my wordpress blog, with the help of adobe photoshop, can u pls suggest me, thanks

[airandfingers]

I think this video has a misleading title. I'm looking for a guide to using Fireworks to create websites; this video is mostly about a complex template you like to use for the front page of a website. You use Fireworks to make it, but what you do really isn't Fireworks-specific, and you don't really explain exactly how to do anything in Fireworks.

Cool website design, but this video isn't what I'm looking for.

[ohigan]

It isn't misleading if you are familiar with Fireworks as well as the difference between Web Design and Web Development. To design a website is to create what the user sees. To develop a website is to add/create its functionality. Fireworks can be used to design a website. You need vids for programs like Dreamweaver. You still need a design program to create the custom look/graphics, or find templates/graphics online as DW only provides the most basic design functions... i.e. fonts,color fills

[careerkiller777]

Im a beginner... how did u made those layers for heaer,billboard etc...kindly

[Lichanjones]

Wow didnt know Fireworks could do this? My teacher was lazy and just said "oh its nothing special about it, lets just make a star and move on" 8(

[Tec9DreamTeam]

how to you make the links clickable? is this program used for the ascetic side of the website, or are u able to create the whole website via Fireworks? I currently have Rapidweaver for design and publishing, but an interested in getting Fireworks as it seems much more indepth and easier to use

[kapil24111990]

u r slow as a snail

[MarlyManning]

Nicely done and very helpful! Many thanks!

[Vans12193]

Dude thanks for the Work files!

It's awesome, like your tutorial!

[konne11]

This guide is just awesome, you just make everything that felt so hard very easy! Thank you very much you've made me earn alot of cash! TY

[Andaluz14]

which dimension do you use for the background and also what width and height do you use for your documents to make the website layout? 1100px? Thanks in advance. :-)

[roskar]

Nice tut, but the zoom feature is really annoying

[Hlemguard]

how to export it?

[genesisfan72]

Thanks for the great video - very, very helpful to us budding designers!

[9100armour]

thanks very much I am inspired.

thank you

[mangoprojects]

Thanks for the tutorial and the work file. The work file helps with your teaching. Thank you.

[samueljh3]

I learned a lot from this tut. Thank you very much. I made a nice five page website. I exported the pages individually from Fw to Dw. But when I make a change in Dw to any of the pages, it keeps changing the content to whatever page I save last. So if I edit my "about" page, all the content on the "index" page then becomes just like the "about" page. Does anyone know what I'm doing wrong? The same thing happened with a website I built in photoshop. Yes, I'm a newbie.

[samueljh3]

I learned a lot from this tut. Thank you very much. I made a nice five page website. I exported the pages individually from Fw to Dw. But when I make a change in Dw to any of the pages, it keeps changing the content to whatever page I save last. So if I edit my "about" page, all the content on the "index" page then becomes just like the "about" page. Does anyone know what I'm doing wrong? The same thing happened with a website I built in photoshop.

[samueljh3]

I learned a lot from this tut. Thank you very much. I made a nice five page website. I exported the pages individually from Fw to Dw. But when I make a change in Dw to any of the pages, it keeps changing the content to whatever page I save last. So if I edit my "about" page, my "index" page then becomes my just like my "about" page. Does anyone know what I'm doing wrong?

[amaz1ngenius]

what is a better laptop to use for web design school course a mac or pc?

[magicfreek]

hey were do you get all your amazing photos? and were do you keep them

[janmed6982]

thank you!!! your video helps alot!!!!hope more videos from you coming out on youtube!!

[dtntnt]

Nice vid man, ive got a question:

1. What is the difference between adobe dreamweaver indesign and fireworks ?

[ShzzLxHD]

well done dude.

[awesomeperson857]

dont you think that that drop shadow is a bit dodgy??

[songatonga]

How do you add Tables and Text (not image text)..couse u did that in the video without explaining..thanks

[josephinedwyer]

Nice design :) Good idea. Thanks.

[MarkSKristensen]

if you have vegas you can make your videos HD

[TheMichaelandSamShow]

How do you get your website online, Ive designed it and every thing, is coding involved because I cannot do it!?

[ghostreconn]

this guy knows his stuff. i am a designer.. keep up the good work

[TheEzzential1]

in general nice video tutorial, but it is really hard to follow your steps without knowing which tool you grab. Anyways, kepp up the good work.

[goldtooth11]

Video tutorials on all cs5 programmes are brilliant, keep up the good work

[Coxey82]

hey ive got a couple of questions

how do you make the icons

and how do you put that on the web

[jbplaya]

I have Fireworks CS5 on Mac. How do you add all those icons on the top? All I have is Original, Preview, 2-up and 4-up.

[mlwebco]

@jbplaya I recently switched to a Mac and started playing with CS5, I'm not sure if they have the same UI and icons at the top. For now, if you do a right-click, you can do most of those things, arrange to top, flip, etc.

[neveraskme2]

Please turn off the zoom feature on your cam. Can't really see what you're doning...

[mlwebco]

@neveraskme2 good call, will take that into account in other tutorials. Thanks!

[neveraskme2]

please turn the zoom feature on your cam off. Can't really see what you're doing

[neveraskme2]

Could you please turn the zoom feature on you cam OFF..I can't see what you're doing...

[Doritji]

Probably a stupid question, but how do you save them as html files or whatever, so that they're ready to be put in my ftp programme?

[Tutorialviewer]

Is there something that Fireworks can and illustrator or photoshop cant?

[overtext]

thanks for the vid really informative

[pecatyree]

wat video studio editor do you use and can your

website actually be published

[mlwebco]

@pecatyree I use Camtasia studio to edit my videos. Not sure about the last question, but no I can't publish the website from the Fireworks program that I use. You still have to ftp the files over.

[pecatyree]

@mlwebco ok

[magicfreek]

@mlwebco how do you flip the file over?

[ourhandymanservices]

umm umm umm err err eerm. You offer good advise but most annoying to listen using these "words" and most annoying duplication of words and tutting sounds. Hope this helps.

[whytimjenkins]

so is fireworks like a photoshop for web design? i'm a bit confused about where it could fit in to my work flow. i currently design in photoshop and slice it up/crop it to create my elements, then code it in dreamweaver.

Seems like fireworks would cut out a few steps.

[mlwebco]

@whytimjenkins Fireworks is just like Photoshop. Think of it as a lighter version. It doesn't have all the PS bells and whistles but it has pretty much everything you need for creating solid web graphics and exporting to jpegs, etc. I use it just as you described. Create mock-ups, then slice and code with dreamweaver or any text editor of choice.

[dare30045yt]

i like this template you created, it's very clean.

[ApplePanda94]

I've favorited so i can use this when i can be bothered to make my portfolio look good! My current one has just been done in photoshop and iweb, so it's kinda basic... Plus my dreamweaver cs4 glitches so none of the buttons have images! =S

[girlfridayproject]

Thank you for taking the time to develop. A suggestion - it would be helpful to talk through some of the tools you are using during the design process for those who are at the front end of the learning curve. That said, this is a great video with a clean, streamlined design approach.

[GeoAl09]

what are the dimensions of the white space? is it the same as inside a web browser like firefox or IE?

[mlwebco]

@GeoAl09 The dimensions for this site I believe was like 900px in width. I use anywhere from 800px to 960px, it's really up to you. And yes, it should be the same inside all browsers.

[GeoAl09]

amazing video!

[mlwebco]

@GeoAl09 thanks, glad you liked it.

[metalcross666]

Nice Video dude :)

[danger4x]

Nice Work, Well I only make Advance Tutorials of FireWorks CS4.

[BrianHoard]

Great job. This is the first time I've seen someone design a page completely within FW.  Nice workflow!

[mlwebco]

Thanks Brian!

[akumazilla]

Sorry....how did you make the rectangles in the beginning? Which tool should I use?

[mlwebco]

I just used the rectangle tool in the tool bar section. It's the tool normally on the left side tool bar in the "vector" section. It's where you can draw rectangles, circles, etc.

[vvoy]

thank you ,you are awsome !!!!

[mlwebco]

Thanks, glad you like the tutorial.

[pakt40]

Standard sites are 1024 x 768 and I heard you say you use a width of 960 but do you did not specify a height? what was the height and is their a particular reason why you use 960?

[mlwebco]

The 960px in width became the standard "safe" size a while back that worked best within the 1024px resolution without scrolling. You want to stay around 960px because scroll bar add extra pixels on different browsers. So 960px is safe. But no reason it couldn't be 970 or 980 :) ... also for height you should make sure your important info stay above 550ish to stay above the fold to be seen without scrolling but the page can be long itself. Just the impoant stuff aove 550px. ;)

[kreativedevelopments]

@pakt40 you dont need a height, cause it expands in the browser with content

[pakt40]

@kreativedevelopments Thanks for the info but actually I did need to specify a height they way I was building my site. For height I placed height:100% in the CSS and that corrected my error. Not placing it in their created havoc with my styling.

[kreativedevelopments]

@pakt40 Yeah if you set it to 100% it auto expands with content. I've designed a site but it looks like crap.. im not a good designer :(

[camelwide888]

so why when i highlight the site it appears as a whole big jpg image? and it also saves that image in my images folder, how can I make it look like a site and not like a static photo?

[mlwebco]

Check out my other video on how I take this mock up to html, /watch?v=OM0d-8gUaxQ this might help somewhat in answering your qusetion.

[marianosa]

please explain that to download quality photos of the site istocphotos have to pay

[webguruindia]

This was really nice.Thanks!

[Brandlax]

What size did you use?

[mlwebco]

I used 900 width, not sure if that was your question. Also, I have the file available for anyone to download. Just click on the (more info) link in the description area, there you will see the link to download and play around with.

[vicmcd]

really good and easy to listen to thanks :) Sub'd!

[waze86]

Ok I will try that and let you know thanks, This happens when i add text in the content area and it just white not transparent.

[waze86]

Hey dude, I done a design in fireworks cs4 and i have sliced it up... But The content page is transparent but when i export it via CSS and Images it ain't transparent any ideas?

[mlwebco]

If you're exporting and you notice that the images aren't exporting as transparent, you need to make sure that you're exporting as PNG rather than JPEG or GIF. Just make sure to select PNG in the optimized box. Also, before you export, make sure to preview first, this will show you if you're doing it correctly.

[mlwebco]

Next to my profile photo, just click the blue "more info" link to display the the link.

[mlwebco]

If interested, I have a link to the work file used in this tutorial in the description area. You can download the PNG and PSD file. Enjoy!

[zil0484]

nice. really helpfull