Web Design Forum: Convert PhotoShop file to xhtml - Web Design Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Convert PhotoShop file to xhtml

#1 User is offline   skippers 

  • Forum Newcomer
  • Pip
  • View blog
  • Group: Members
  • Posts: 56
  • Joined: 17-January 08
  • Gender:Male
  • Location:UK
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 17 January 2008 - 12:01 PM

Hi

Once I've designed my web page layout in PhotoShop, what is then the best way to slice this up and convert into xhtml? I will be using Dreamweaver.

Cheers
0

#2 User is offline   BlueDreamer 

  • Web Guru
  • View blog
  • Group: Moderators
  • Posts: 4,697
  • Joined: 23-October 07
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 17 January 2008 - 05:02 PM

Personally I simply cut out each image element to size, optimse, and save. Then I just insert image tags/css into the site.
/Add HTML or code editors to our big list of editors
/Know of a shopping cart? Add it to our Complete list of shopping carts
/Help keep WDF a nice place - please use the Report button to tell us about spam or scam!
/Expressioneengine Pro Network member
/Links are advertising not optimising!
0

#3 User is offline   keithics 

  • Dedicated Member
  • PipPip
  • View blog
  • View gallery
  • Group: Members
  • Posts: 118
  • Joined: 17-January 08
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Designer

Post icon  Posted 17 January 2008 - 11:43 PM

just export the slices and handcode them..
0

#4 User is offline   skippers 

  • Forum Newcomer
  • Pip
  • View blog
  • Group: Members
  • Posts: 56
  • Joined: 17-January 08
  • Gender:Male
  • Location:UK
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 18 January 2008 - 02:39 PM

The part that I might struggle with is when a background image needs to grow and shrink for an elasticated page.
0

#5 User is offline   kola 

  • Dedicated Member
  • PipPip
  • View blog
  • Group: Members
  • Posts: 155
  • Joined: 11-January 08
  • Location:(The Original) 'Washington' in the UK
  • Interests:Smooth not Spiky
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 21 January 2008 - 01:17 PM

Have you ever heard of fireworks mate? It is far far better for web graphics. Photoshop is designed for print.
0

#6 User is offline   skippers 

  • Forum Newcomer
  • Pip
  • View blog
  • Group: Members
  • Posts: 56
  • Joined: 17-January 08
  • Gender:Male
  • Location:UK
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 22 January 2008 - 04:05 PM

View Postkola, on Jan 21 2008, 13:17, said:

Have you ever heard of fireworks mate? It is far far better for web graphics. Photoshop is designed for print.


I have indeed. Unfortunately my work doesn't have it.
0

#7 User is offline   Boyles Web Design 

  • Hi...
  • PipPipPipPipPip
  • View blog
  • Group: Members
  • Posts: 1,498
  • Joined: 29-August 07
  • Location:Indiana, USA
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 January 2008 - 04:12 PM

I use photoshop, and it works fine for me.
0

#8 User is offline   Dizi 

  • Queen of the Spammers
  • PipPipPipPipPipPip
  • View blog
  • View gallery
  • Group: Members
  • Posts: 5,218
  • Joined: 13-August 07
  • Gender:Female
  • Location:Newcastle, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 January 2008 - 04:50 PM

View Postkola, on Jan 21 2008, 13:17, said:

Have you ever heard of fireworks mate? It is far far better for web graphics. Photoshop is designed for print.



It really depends on what you are used to, there is nothing right or wrong about using photoshop, same goes for fireworks or even using a free bit of software like gimp.

There really is no right or wrong way to go about it.
0

#9 User is offline   keithics 

  • Dedicated Member
  • PipPip
  • View blog
  • View gallery
  • Group: Members
  • Posts: 118
  • Joined: 17-January 08
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Designer

Post icon  Posted 22 January 2008 - 08:35 PM

View PostBoyles Web Design, on Jan 22 2008, 16:12, said:

I use photoshop, and it works fine for me.


i agree, it's not with the tools.. it's with the person who is using it.

can be any text editor like dreaweaver or notepad++ (free).
0

#10 User is offline   BlueDreamer 

  • Web Guru
  • View blog
  • Group: Moderators
  • Posts: 4,697
  • Joined: 23-October 07
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 January 2008 - 09:23 PM

View Postskippers, on Jan 18 2008, 14:39, said:

The part that I might struggle with is when a background image needs to grow and shrink for an elasticated page.


Make the background image the same width as your anticipated page width. If you're using 100% width you really need to cater for screen sizes up to 1600px wide to be on the safe side, so, unless your background image tiles, it will need to be 1600px wide.
/Add HTML or code editors to our big list of editors
/Know of a shopping cart? Add it to our Complete list of shopping carts
/Help keep WDF a nice place - please use the Report button to tell us about spam or scam!
/Expressioneengine Pro Network member
/Links are advertising not optimising!
0

#11 User is offline   Boyles Web Design 

  • Hi...
  • PipPipPipPipPip
  • View blog
  • Group: Members
  • Posts: 1,498
  • Joined: 29-August 07
  • Location:Indiana, USA
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 22 January 2008 - 09:38 PM

You may not want to do that though because it will make page load time really big. Unless you optimize really good.
0

#12 User is offline   kola 

  • Dedicated Member
  • PipPip
  • View blog
  • Group: Members
  • Posts: 155
  • Joined: 11-January 08
  • Location:(The Original) 'Washington' in the UK
  • Interests:Smooth not Spiky
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 22 January 2008 - 10:27 PM

Quote

It really depends on what you are used to, there is nothing right or wrong about using photoshop, same goes for fireworks or even using a free bit of software like gimp.

There really is no right or wrong way to go about it.


But were talking about different software applications made by the same firm, adobe. Why would they make it all the same?

Email Adobe and they will tell you, FW is for web graphics and PS is for print. Sure you can use PS for web to great effect but it doesn't optimize as good as FW at all. FW doesn't manipulate Jpegs anywhere near as good as PS either. And we haven't even mentioned Adobe Illustrator which is great for Vector graphics to print.

I do agree it depends on the user. I mean a superb PS user will get better results for web than a rubbish FW user.
0

#13 User is offline   Rask 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 65
  • Joined: 21-January 08
  • Location:Hämeenlinna, Finland
  • Interests:Web design (visual, code and content), music, arts, gaming and computing.
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 23 January 2008 - 05:23 AM

I use Photoshop, then edit the bits and pieces one by one for the optimal result. Might sound a bit tedious and frustrating, but then I get more power over each element. :)

Not the one and only correct answer, just my way of getting things done.
No blog yet.
No portfolio yet.
Working on it? Yes. As always.
0

#14 User is offline   skippers 

  • Forum Newcomer
  • Pip
  • View blog
  • Group: Members
  • Posts: 56
  • Joined: 17-January 08
  • Gender:Male
  • Location:UK
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 23 January 2008 - 09:34 AM

Does anyone know of a really good online tutorial for doing this?
0

#15 User is offline   AndyRoid 

  • Dedicated Member
  • PipPip
  • View blog
  • Group: Members
  • Posts: 100
  • Joined: 07-August 07
  • Location:Laindon
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 07 February 2008 - 02:20 PM

you tried tutorialized or just googled it mate your likely to get something for it !

Just for my 2 cents:

I use Fireworks, Photoshop and Illustrator it really depends on my need at the time, Illustrator if its a logo I want to resize thats format is EPS or AI, Photoshop for editing right down to the pixel by pixel part and sometimes Fireworks but very rarely cos I'm so used to it but to each their own I guess.

One mans treasure and all that
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users