Photoshop to HTML

[Flexus]

Yes I know this isn't a photoshop site, but you people are so helpful and the forum category does say random.

So my question is if anyone could give me a site that will teach me how to properly incorporate photoshop to HTML.

[senocular]

it depends what kind of html you're talking about ;)

basically that is done in ImageReady. Use photoshop for the imagery and some set up, then switch it over to imageready and refine the slices and rollovers etc and save optimized. Tah-dah! insta-HTML made just for you!
:)

[SureShot]

Listen to Sen - he knows what he's talking about :)

I can back him up - Image ready is a gift from the gods when you want to get a quick HTML page up...

[reverendflash]

...or use Fireworks to start with, and never have to change programs...

it's also simpler to use...

JMO

Revhttp://www.aulman.com/rev.gif

[SureShot]

hahaha - darn you and your fireworks Rev, you are trying to currup us all untill we follow you into the dark and seedy underworld that is Macromedia Fireworks arent you? ARENT YOU!!!

Acutally I really want to learn that prgram - in fact I think I might do one tutorial a night.... starting....now!

Can you do a lot of the same things in Fireworks as you can in Photoshop, like bevels and picture manipulation and shadows and so forth?

[senocular]

Originally posted by SureShot
Can you do a lot of the same things in Fireworks as you can in Photoshop, like bevels and picture manipulation and shadows and so forth?

yeah, its a little better in fireworks too because each filter effect is treated like a layer effect in Photoshop so you can turn it on or off easily. Filters alone in photoshop cant do this, just the layer effects like photoshops own bevel and outline, glow, texture-fill etc.

[Daveman]

I tried FWMX after being refered by Rev and what he says is true. Once you work out where everything is hidden this is by far a superior (s/p) program to Photoshop and PSP..

[reverendflash]

yes, the tools are in total diff places and such, so it is a bit of a pain to get used to, but I think it does things in a much simpler fashion...

Tuknuk:

I'm surprised at you... Don't you know that Adobe is the dark Empire, and Macromedia is the White Knight? Just ask MM...

:beam:

Revhttp://www.aulman.com/rev.gif

[SureShot]

Hey rev - I just had some "spare time" here at work and compleated the first tute in the fireworks program. I really like how some things are done in here - nicely laid out and very intuitive. I am about to get to work on the basic web layout one - wish me luck :)

[reverendflash]

Tuknuk:

I've not met anyone yet who has given FW a chance (in regards to production work), that hasn't said that for the most part, FW is the prog they use, and PS is for that "extra creative" gig that comes along once in a while...

oh, and good luck...

Revhttp://www.aulman.com/rev.gif

[Guig0]

rev is right. even tho PS is a much more powerfull tool, FW is more easy and intuitive, and way faster when it comes down to just making images for web.

i use it as my weapon of choice in webdesign ;)

[Flexus]

Thanks for the help guys.

[SureShot]

Rev - I have just finished the web tutorials and I think this program is amazing. I am so mad at myself for not trying to learn it earlier - I could have saved myself so many headaches... wow. This is not to say I will not be using photoshop anytime soon because even though I am really loving fireworks I still think I can do layouts and such faster in photoshop but now by using all 3 products the speed of all my tasks will increase like crazy, espeically as I get better with FW's.

The menus and roll overs and library things are amazing - very clever and very useful.

[SureShot]

Oh look - I have my first question :)

I am wanting to centre my newley created page but BUT when I do the Java Script menu will not work. Any ideas on how to go about doing this if it's even possible. The reason for it is - I think MOST, not all, but most pages look better centered in the middle of the page instead of being stuck in the upper left corner.

Anyone here with some FW experience willing to help me out? Thanks :)

[reverendflash]

post your .png zipped, maybe one of us can figure it out... (your saved .png should have all of your HTML, etc. info as well)...

Revhttp://www.aulman.com/rev.gif

[SureShot]

Right click and save as from the link below.

I have included the .htm page, image folder and JS file it created after exporting it as well as the .png file with the original information inside. Just make sure to extract it instead of grabbing files out of the zip one at a time.

Thanks Rev and anyone else that thinks they can help! :)



http://www.sureshotgraphics.com/fireworks.zip

[reverendflash]

Tuknuk:

all you had to do was align the table to the center. I also added another table to make it easier to read the content...

Revhttp://www.aulman.com/rev.gif

[pinx]

i don't mind fireworks but i looooove photoshop. it's my first and favorite program.

[SureShot]

Rev - but now if you look at the file - the mouseover menu does not work anymore. If you look at the original and mouse over "world wide airports" you will see a pop up menu. But when I tested yours - and my own, the menu will not work anymore. It seems there is aproblem with the java script when the location is moved.

I tried to copy the enitre table and js and then delete it, create a new table that was 100% x 100% and make the positioning of that table the center and then paste the old table and js into it and everything seemed to work fine, until I tested it and the pop up menu would not work anymore.

You see what I mean?

[SureShot]

Well I figured out how to get the whole thing centered horizantally by just inputing a couple of simple html tags at the begining and ending of the main table. I have yet to figure out how to have it centered both vert and horiz - if you can figure that out, please let me know :)

[reverendflash]

make your table 100% both vert and Horiz... then center that...

oh, and I didn't see any popup nav on the file you sent me...

Revhttp://www.aulman.com/rev.gif

[senocular]

its in the worldwide airports button. I just used a <center> tag before the table and it works fine on this end :-\

[SureShot]

yah sen, that's what I used to. But I want to center it both horiz and vert sort of like a flash animation. Do you know what I mean? So that no matter what rez you are using to view it - it's in the center of your page top and middle

[reverendflash]

Tuknuk:

that is why I added the 2nd table... make it 100% tall, then align it vertically...

Revhttp://www.aulman.com/rev.gif

[senocular]

ooo I missed that whole "vert" word lol

[reverendflash]

so did Tuknuk I think...

;)

Revhttp://www.aulman.com/rev.gif

[SureShot]

hey rev - no man, I tried to add a table but after I did that - the menu wouldnt work. It messed up the Java Script dude. Trust me, I know what your talking about... it's how I usually do it - but it doesnt seem to work with the Java Script - I mean everything center's perfectly but the menu wont work anymore.

[reverendflash]

lostinbeta is the JavaScript guru here...

I didn't even look at the Js file... It shouldn't have anything to do with the extra table...

Revhttp://www.aulman.com/rev.gif

[SureShot]

yah that's what I thought to Rev, everything else worked just fine... it's just the pop up menu that wouldnt.

I tell ya rev - this is a great program. Thanks very much for turning me onto it dude...

[senocular]

...still works for me :-\

[SureShot]

centered horiz and vert sen?

[senocular]

yeep

[SureShot]

look at you - showing off :)

so what did you do? just what rev said...?

[senocular]

ummm.... yeah pretty much.