Web Design Forums

poetofzwan · 13-12-2006, 07:59

Hey everyone,

I am fairly competent with Photoshop and I have started to make some web designs using Photoshop.

However, I am not sure of the best way of making theses into a website. I have used imageready and sliced and exported the files to html, however, this process doesnt seem too fantastic.

Is there a better way to convert a .psd design into a html file.

Michael

Btw im new!

loydall · 13-12-2006, 08:22

Personally I wouldn't design a page in photoshop and then transfer that to HTML - I generally build the HTML structure first, see what elements I'm going to need then design those in PS of fireworks. Your html needs to work cross browser/screen resolution so you should be thinking about you html first then let the designed elemts fall into that...

I'm sure folks will disagree with me on that though as I imagine some probably always design from photoshop first but, if you're working on a big site, it's better to sort your structure out first...

John Good · 13-12-2006, 09:11

move image ready to the trash. unless you have to do stupid animated gifs ?

pgo · 13-12-2006, 11:35

If you want to make websites, you have to learn XHTML and CSS. Slicing/exporting/ImageReady is the easiest and one of the worst ways to make a website. Might as well just be using Flash.

www.htmldog.com

Eventually, you'll want to use Photoshop, of course, but what I do is just cut out the smallest pieces I'll need.

d*d · 13-12-2006, 12:46

I'm a freak and I design my web visuals in illustrator (it being a layout programme and all, photoshop is great for image manipulation but Illustrator wins hands down when laying things out), then slice up the bits I need and do any further editing of them in Photoshop

moceanz24 · 13-12-2006, 16:57

I'm with d*d on this one. Illustrator is the best way to lay things out. You can resize things easily without losing clarity, and you can move things around without having to figure out what layer they are on first. Once I get what I want, I get the pieces I need by creating a crop area around them and saving them as png or whatever format fits the job. I just wish I was better at coming up with ideas to draw in Illustrator.

dtrenz · 13-12-2006, 17:00

illustrator might as well be written in sanskrit.

i can't wrap my head around that shit.

swiecki · 13-12-2006, 17:42

hey i'm writing a tutorial ***for coding a website using sliced images as backgrounds etc*** on this at http://www.swieckiblog.com/ it should be up in a few days. its hard to get the hang of but you have to slice your image properly. Also keep in mind when you're designing the site that it's easiest to code a head, navi, body, footer format.

All you need is photoshop.

Do not use illustrator. Do not use flash. You dont need image ready. Photoshop comes with built in slicing tools. look for my tutorial soon.

dtrenz · 13-12-2006, 18:04

you're teaching people how to create a website purely out of sliced images?!?!

i hope there is a special place in hell for your kind.

if you made a website without any hand coding, you did it wrong.

swiecki · 13-12-2006, 18:12

Quote:

Originally Posted by dtrenz

you're teaching people how to create a website purely out of sliced images?!?!

i hope there is a special place in hell for your kind.

if you made a website without any hand coding, you did it wrong.

jesus christ no.

Thats not what I'm doing at all!

I use photoshop to slice for example the header background, then use CSS to make it a background for my header text. I am not some crazy weird web weirdo who has no clue how to code a website.

dtrenz · 13-12-2006, 18:18

sorry, i guess i misunderstood when you said "all you need is photoshop"

haha... nevermind then.

forbes · 14-12-2006, 09:37

i use photoshop to design a layout, save a copy as a jpg to show clients and when they like something i just drag graphic elements onto a new doc and 'save for web'...

i learnt how to slice stuff up with imageready but its far too much hassle than its worth.

still everyone has their own ways and preferences, its just up to you to find yours...

John Good · 14-12-2006, 09:53

Illustrator is just great... for print !

it's consuming too much ressources just for web graphics. For the web, I use Fireworks wich I think is a kind of "illustrator light".

Fire works offers many interesting things that you can't find in photoshop, you can think you manipulate vector shapes, with even a mini pathfinder, but it's all pixels.
As it uses the pixel as a basic unit, you never happen to have some image width of 24,3557 px. you have 24 or 25. Just what you need.
I like also the shades, and filters, and color managing, etc.

In fact, I'd really love that soft, if only it could export a PDF...

I've never used fireworks for exporting of cutting images, I save my png as is and edit it un photoshop that is much more efficient for export (better images, less weight).

13-12-2006, 07:59	#1 (permalink)
poetofzwan Registered User Join Date: Dec 2006 Posts: 1	.PSD designs? Hey everyone, I am fairly competent with Photoshop and I have started to make some web designs using Photoshop. However, I am not sure of the best way of making theses into a website. I have used imageready and sliced and exported the files to html, however, this process doesnt seem too fantastic. Is there a better way to convert a .psd design into a html file. Michael Btw im new!

13-12-2006, 09:11	#3 (permalink)
John Good + Join Date: May 2005 Location: Tropical Networks Posts: 1,605	move image ready to the trash. unless you have to do stupid animated gifs ? __________________ Fonts are like cologne: A bad choice speaks louder than a good one. Justin Feinstein

13-12-2006, 17:42	#8 (permalink)
swiecki Registered User Join Date: Oct 2006 Posts: 80	hey i'm writing a tutorial *for coding a website using sliced images as backgrounds etc* on this at http://www.swieckiblog.com/ it should be up in a few days. its hard to get the hang of but you have to slice your image properly. Also keep in mind when you're designing the site that it's easiest to code a head, navi, body, footer format. All you need is photoshop. Do not use illustrator. Do not use flash. You dont need image ready. Photoshop comes with built in slicing tools. look for my tutorial soon. Last edited by swiecki : 13-12-2006 at 18:16.

14-12-2006, 09:53	#13 (permalink)
John Good + Join Date: May 2005 Location: Tropical Networks Posts: 1,605	Illustrator is just great... for print ! it's consuming too much ressources just for web graphics. For the web, I use Fireworks wich I think is a kind of "illustrator light". Fire works offers many interesting things that you can't find in photoshop, you can think you manipulate vector shapes, with even a mini pathfinder, but it's all pixels. As it uses the pixel as a basic unit, you never happen to have some image width of 24,3557 px. you have 24 or 25. Just what you need. I like also the shades, and filters, and color managing, etc. In fact, I'd really love that soft, if only it could export a PDF... I've never used fireworks for exporting of cutting images, I save my png as is and edit it un photoshop that is much more efficient for export (better images, less weight). __________________ Fonts are like cologne: A bad choice speaks louder than a good one. Justin Feinstein

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

13-12-2006, 08:22	#2 (permalink)
loydall Registered User Join Date: Nov 2006 Posts: 34	Personally I wouldn't design a page in photoshop and then transfer that to HTML - I generally build the HTML structure first, see what elements I'm going to need then design those in PS of fireworks. Your html needs to work cross browser/screen resolution so you should be thinking about you html first then let the designed elemts fall into that... I'm sure folks will disagree with me on that though as I imagine some probably always design from photoshop first but, if you're working on a big site, it's better to sort your structure out first...

13-12-2006, 11:35	#4 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	If you want to make websites, you have to learn XHTML and CSS. Slicing/exporting/ImageReady is the easiest and one of the worst ways to make a website. Might as well just be using Flash. www.htmldog.com Eventually, you'll want to use Photoshop, of course, but what I do is just cut out the smallest pieces I'll need.

13-12-2006, 12:46	#5 (permalink)
d*d Moderator Join Date: Oct 2004 Location: Bristol Posts: 3,400	I'm a freak and I design my web visuals in illustrator (it being a layout programme and all, photoshop is great for image manipulation but Illustrator wins hands down when laying things out), then slice up the bits I need and do any further editing of them in Photoshop

13-12-2006, 16:57	#6 (permalink)
moceanz24 jiveabillion Join Date: Jun 2006 Location: Huntington, WV USA Posts: 175	I'm with d*d on this one. Illustrator is the best way to lay things out. You can resize things easily without losing clarity, and you can move things around without having to figure out what layer they are on first. Once I get what I want, I get the pieces I need by creating a crop area around them and saving them as png or whatever format fits the job. I just wish I was better at coming up with ideas to draw in Illustrator.

13-12-2006, 17:00	#7 (permalink)
dtrenz blam blam Join Date: Aug 2006 Location: ann arbor, mi usa Posts: 528	illustrator might as well be written in sanskrit. i can't wrap my head around that shit.

13-12-2006, 18:04	#9 (permalink)
dtrenz blam blam Join Date: Aug 2006 Location: ann arbor, mi usa Posts: 528	you're teaching people how to create a website purely out of sliced images?!?! i hope there is a special place in hell for your kind. if you made a website without any hand coding, you did it wrong.

13-12-2006, 18:18	#11 (permalink)
dtrenz blam blam Join Date: Aug 2006 Location: ann arbor, mi usa Posts: 528	sorry, i guess i misunderstood when you said "all you need is photoshop" haha... nevermind then.

14-12-2006, 09:37	#12 (permalink)
forbes Senior Member Join Date: Aug 2006 Location: Belfast Posts: 824	i use photoshop to design a layout, save a copy as a jpg to show clients and when they like something i just drag graphic elements onto a new doc and 'save for web'... i learnt how to slice stuff up with imageready but its far too much hassle than its worth. still everyone has their own ways and preferences, its just up to you to find yours...

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)