Photoshop To HTML?

erifdekciw

erifdekciw

New member
May 3, 2008
2,146
51
0
I'm not every good with HTML and all the advanced stuff. I know enough to do almost anything, but one part that always prevents me from creating my own websites is going from photoshop to html and editing the page.

I know how to slice and export and all that, but when it comes to editing the site I try and use the html that photoshop creates which is basically a big table with images in it. I try and delete the slices where i need the content to go and before you know it i preview the site and its all a scrambled mess. Obviously the table route is not the way to go.

I want to go the div route, but how do i incorporate all the small sliced up images with div tags? I can understand how to do it with big slices like the header slice and everything else, but if you look at this design and see all the slices around the input boxes, how would i do that?

xPEag.jpg


the background of the input area is a shader design so I can't just create a div area and make it a simple background color.

can anyone help me with a solution to get around this?
 


I've used a lot of margins and padding coding in the past and i always thought it was very sloppy. I know with margins you can basically put anything anywhere, But lets say you use margins to move something to a certain spot. Is there a chance it will look different in each browser?

also if i use margins do i have to do it each time for the mini images that make up the whole image? like for example in that screen shot theres about 10 images just for the input area. do i have to create margin coding for each mini image?
 
Ideally that entire section should have one solid background, and you'd simply place the elements on top of it and position them using margins/padding. Familiarize yourself with the idea of floated/block elements and how they react with interact with each other.

Slicing in Photoshop definitely gives the user the wrong idea about how the page will be constructed. It works a lot more like a layered Photoshop file does than simply a grid of images. You have elements placed in hierarchies and you use attributes like width, height, margin, padding, line-height and relative positioning to move them around and make them look the way you want it to.

Have AIM or Skype? :)
 
  • Like
Reactions: erifdekciw
Make 1px wide slices and use the css repeat for a start. Ideally you want to have the minimum size image files as possible. Also use the hex color codes for any areas of solid color. Your image above could be coded solely with css.

Basically how I do it (haven't sliced a psd in over a year though) is create the design in photoshop. I then create the html/css template using just rough hex color codes as backgrounds. Then when I'm happy that the layout in a browser matches what is made in photoshop I swapout the background color for the background spliced images and set repeats as necessary.

TBH its a real PITA and depending on how you value your time can often be cheaper to just outsource the whole process.

WRT the page looking different in different browsers just use a css reset file. The meyer one is quite good better yet use a css framework, I played around with the 1140 grid system and found it simple and refreshing to doing it all by hand.
 
  • Like
Reactions: erifdekciw
Ah i think i get it. Basically the slices should basically just be a background canvas and then basically put everything on top of it with coding margins and what not. I think thats what you guys are saying. Makes sense and I can do that now that I understand the process.
 
I did it! was pretty simple once i grasped the idea. This just made my confidence in html and designing that much better. No more outsourcing because this stuff is pretty easy to do. thanks guys +rep
 
You must log in or register to reply here.
Top Bottom
Back