Photoshop to HTML/CSS
Author: Anthony Kolber
This tutorial will show you how to take a website design from Photoshop or Illustrator, slice it up and rebuild it using HTML and
- positioning
- selectors
CSS classes- translating a grid based design
- photoshop slices
- specificality
- hiding elements
- blocks
- floats
- margins
- text styling
and more...
You can download the Illustrator and Photoshop files to work along with this tutorial. You can also download the finished HTML/CSS source files.
Launch Part 1 (Illustrator to Photoshop)
Launch Part 2 (Slicing and rebuilding in CSS)
Launch Part 3 (Adding background images)
Launch Part 4 (Finishing off the email)
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-09-15: rajat said:Part 1 was excellent, but part 2 didn't opened. help me
2008-09-16: Bill Trikojus said:
It is a large file so I think you just need to wait. I will have another look tomorrow.
2008-09-17: Bill Trikojus said:
I just tested it again and it worked fine. Loaded in a couple of seconds from within the Swinburne network.
Please post a comment if anyone is having issues, even after waiting for a significant amount of time for the file to load.
2008-09-23: rajat said:
the container is not appearing
div#container tag is not working.
2008-09-26: Bill Trikojus said:
so are you saying that the video is loading now but there is a problem with the code that it outlines? Please explain the problem clearly and include the browsers you have tried.
2009-04-08: sylvia laurent said:
part 2 is is loading but in the middle of the video it stops playing.
2009-04-09: Bill Trikojus said:
fine for me. Might be your internet connection.
2009-04-18: Ash Downes said:
I have waited 15 minutes and tried on 3 different computers and its still not loading??
2009-04-18: Ash Downes said:
its has no loaded but after 6 minutes its stopped and wont continue?? anyone know whats going on?
2009-04-18: Bill Trikojus said:
did you mean "now loaded"?
I suggest you try downloading the flv to your computer and running that.
http://www.swinburne.edu.au/design/tutorials/web/psd-to-html-and-css/psd-to-html-and-css-part-1.flv
File is called part 1 but it is actually part 2
2009-10-02: Deborah Johnson said:
I can't download the videos either. It's not my bandwidth. I've also tried downloading the .flv file but nothing happened... Shame because it looks good.
2009-10-03: Bill Trikojus said:
Have you tried multiple browsers?
2009-10-03: Deborah Johnson said:
It works in my version of Explorer.
Thanks v. much.
Post a comment
Garbage posts and SPAM will be deleted.