Page 1 of 2

Websites with Photoshop

PostPosted: Sat Jul 25, 2009 9:39 pm
by Imoddedu
Alright so I've made this "template" I guess in photoshop. I've heard that you can slice it up somehow to make it into some HTML code or something along that line. Does anybody know how to do that?
Image

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 9:44 pm
by KILLA-COW
Dreamweaver, i'm sure there's ways you can procure this program if you are short on money....

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 9:52 pm
by Surfa
What has Dreamweaver got to do with it.


Basically you need to use the slice tool to outline all the different parts you want to be separate images then you can do a file save for the web and choose html and images.
Image


Edit: This is not recommend though as it creates messy code and sometimes it can be easier to slice them up then write the code yourself.

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 10:07 pm
by Imoddedu
Ok thanks. Do I need to slice the gradients on the left and right and all that?

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 10:10 pm
by Surfa
Well you could but I wouldn't because I would make it the background image.

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 10:20 pm
by BlekksPoncho
Wow don't. Learn HTML and CSS, photoshopped sliced websites are disgusting and also I would change the design a bit, the links are a bit eurgh.

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 10:26 pm
by Ennui
You can slice it just to get the images you need and then code them in manually, professional web designers slice their stuff in PS all the time, they just don't use pre-generated code...

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 10:35 pm
by Imoddedu
Yea, I wasn't planning on just slicing it. I know HTML & CSS so I'm good. :)

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 11:03 pm
by Imoddedu
How do I slice those buttons? They are sideways and the box doesn't fit them. :(

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 11:15 pm
by KILLA-COW
Becuase dreamweaver does it all for you you smartarse?

Re: Websites with Photoshop

PostPosted: Sat Jul 25, 2009 11:25 pm
by Surfa
KILLA-COW wrote:Becuase dreamweaver does it all for you you smartarse?


Really, oh damn I must have missed the big button that makes a site from image.

But seriously if dreamweaver does do it all for you then visual studio does all the coding for you.

Re: Websites with Photoshop

PostPosted: Sun Jul 26, 2009 9:54 pm
by abathor
Fuck Dreamweaver, learn how a website is actually constructed, including valid XHTML and CSS, then write it and add in the images yourself via image tags and css background properties. Your diagonal links are probably not going to work very well, I'd suggest making them horizontal. Not everything on your webpage needs to be an image you know, especially if search engine optimization and accessibility are a goal, which I'm guessing you aren't so bothered about.

Re: Websites with Photoshop

PostPosted: Sun Jul 26, 2009 10:43 pm
by mky
^^^

Dreamweaver ftl.

Re: Websites with Photoshop

PostPosted: Sun Jul 26, 2009 11:13 pm
by abathor
mky wrote:^^^

Dreamweaver ftl.


All you need to make a website is Photoshop and notepad++, and a copy of various web-browsers to check it works.

If all the graphics have been supplied and your html and css is up to scratch then technically you could make one in MS notepad.

Re: Websites with Photoshop

PostPosted: Tue Oct 27, 2009 1:02 am
by Dr. Delta
Surfa wrote:What has Dreamweaver got to do with it.


Basically you need to use the slice tool to outline all the different parts you want to be separate images then you can do a file save for the web and choose html and images.
Image


Edit: This is not recommend though as it creates messy code and sometimes it can be easier to slice them up then write the code yourself.


This just makes tables with background images. Not (really) usable for decent websites.