Tutorial Details
- Tutorial Topic: PSD > HTML Conversion
- Languages Used: HTML / CSS / jQuery
- Estimated Time: 3 hours
- Create a Sleek, Corporate Web Design (HD Video Series: Day 2)
- Create a Sleek, Corporate Web Design (HD Video Series: Day 1)
- Create a Sleek, Corporate Web Design (HD Video Series: Day 3)
- Create a Sleek, Corporate Web Design (HD Video Series: Day 4)
In this video series, we’re going to walk you through how to create a sleek, professional web design for a corporate website. This is part 3 of a 4 part series – we’ll also be finishing the support pages and coding the entire thing in HTML/CSS!
About this Tutorial Series
Adi Purdila is going to walk us through an entire project – from design to coding – all here on Webdesigntuts this week! In Day 1, he showed us how to set the basic framework for the design as well as how to actually lay out the homepage. In Day 2, he showed us how to create the various support pages (contact, gallery, etc.). In Day 3 (today), he’ll be showing us how to convert the entire Photoshop design to a fully working HTML/CSS site. We also have a Day 4 scheduled for additional coding, so keep an eye out for that tomorrow!
Just to give you a general roadmap for the coding, here’s the basic outline of what we’ll be doing over these final 2 days:
- Day 3, Part1: Creating the markup for the homepage
- Day 3, Part2: Slicing the PSD and writing the CSS file (i divided this into Hour1 and Hour2)
- Day 3, Part3: (cont.) Slicing the PSD and writing the CSS file (I divided this into Hour1 and Hour2)
- Day 4, Part1: Slider installation, customization and some very basic jQuery functions
- Day 4, Part2: Creating and styling the secondary pages (Services, Gallery and Contact) + browser checking
Also, I’d like to share some links for some of the resources I’ll be using today:
- Slider plugin: http://www.gmarwaha.com/jquery/jcarousellite/
- Cufon: http://cufon.shoqolate.com/generate/
- CSS Browser Selector (for making styles for different browsers in the same CSS file): http://rafael.adm.br/css_browser_selector/
- Reset CSS: http://meyerweb.com/eric/tools/css/reset/
Let’s get started!
Day Three: PSD to HTML Conversion
In this next series of videos, Adi is going to walk through the conversion process from PSD to HTML/CSS. Be sure to flip over to HD viewing if you have the bandwidth!
Day Three: Part 1
Day Three: Part 2
Day Three: Part 3
About the Author
“Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.
If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.” – Adi
){kind=link}
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Adi Purdila
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
There is such an incredible improvement in audio quality that it’s almost unbelievable. It sounds like you moved into a recording studio with a condenser mike. Great!
Actually that’s a good thing because on my fairly good wide-screen monitor (zoomed as close as it would work) none of the characters were readable. It was a blurry line with the cursor zooming around. You’re gonna have to zoom in on your end for the recording because it doesn’t work on our end.
Correct that and you’ll have a great method of recording screencasts. [Also, good use of the pause button]
Thanks
Thanks DJ,
I’m glad the recording is improved, I was kinda nervous about it :)
About the readability, that’s gonna be something worth looking into in my next screencasts, i might lower my screen res and record at 720p instead of full HD, I think people with lower res displays will find that a bit better.
Let me know what you guys think, i’m open to suggestions :)
hello adi,
I’m fairly new to webdesign and find the tutorials really informative.
I just do not know why you use div.centerContainer instead of a wrapper for all?
or can you use both?
Btw, make sure you watch it in HD, it makes a huge difference. Maybe that’s why you couldn’t read the code very well.
This whole series has been absolutely fantastic… quality video and tutoring.
Its things like this, tuts+, that makes you the best, not to mention all the contributor.
I am forever grateful. :)
This is an Incridable tutorial. Clear and the HD is wonderfull. Thanks for the wonderfull tutorail.
Keep up the good work
I was waiting for this :)
After I done with day 2 I’ll start day 3.
Fantastic tuts. Thanks.
Sorry for spam but I can’t edit my posts.
I want to use this layout for karate website because my teacher want to create website for our club I he need my help. But I will make some changes.
Hello
Is there a link to download the video like last time on blip.tv
Thanks and nice job
Again great :)
Please could anyone point me to the following part? because the last one is only 15mins long and i dont see any other parts below, neither on a home page of webdesign tuts :/
Thanks Richard, I just reuploaded it – should be the full 1 hour and 10 minutes now.
Ok thanks it works now :) And btw is there going to be day 4?
Yep – Day 4 is up on the homepage now – check it out here.
Fantastic tutorials :)))) quite competent with photoshop, HTML and CSS however still learning more and more valuable tricks and techniques with these tutorials :)
Looking forward to more
Thanks
Amazing tutorial, everything is very good explained. I have only one issue. Why do you save every image as png-24, even if it ain’t got any transparency? With the photo-like images – jpg would be better (smaller size), and with such elements like the navigation bg, using png-8 would also save some space. This is very small offence, but I like, when everything is perfect ;) Anyway, respect for the very well explained tut again, and keep up the good work!
I agree with you Tomek but the images were relatively small in size and making them JPEG wouldn’t have made such a big difference.
I’ll definitely focus more on the image optimization in the future tutorials since it’s an important part of the development process. Thanks for pointing that out :)
Adi
Great tutorial.
I’ve learned a lot from this series.
I learn more from screen cast, so
this is very helpful for me.
Thank you Adi for this amazing
work.
What a great tutorial. keep up the good work.
Bytheway Adi where did you get the Code Snippets from that were you using in this tutorail.
Please replay
Most of them come by default with the snippets app: http://www.snippetsapp.com/ and I custom made two of them (the CSS comment one and the reset.css one).
If you’re not using a mac you can get that starting HTML with the doctype from W3 directly: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Hope this helps :)
Thanks for the replay and for the help. Keep up the good work.
Thanksssss
Great Tutorial, but why you didn’t use the tag in the subscribe form instead of the anchor?
How you will submit the form in this way?
I believe you can submit the form with jQuery. So, when that link is clicked, you can do some AJAX work behind it.
Or, you can simply style:
input[type="submit"] the same way as the .redButton, it will need some additional tweaking in IE, but it will work the same way.
The forms i did weren’t meant to be functional so I chose the option with a link instead of submit :)
OK, thanks for the explanation :)
i cannot read the codes in the screencast, it looks so small…
What can i do to read clearly?
i had a screen resolution of 1024*768..
Thanks for the big Mammoth tut Adi Purdila and webdesigntuts.. u guys really rocking….
I’d suggest you watch it in HD for better quality :)
Perfect tutorial. I have learned so many cool tricks. You just continue with them: o)
I have a question. Why are you writing div#ClientListContainer in CSS? Why “div” in front of class or ID?
I use that so I know to which tag that class or ID applies to. You can write #clientListContainer as well, it works, but if I write div#clientListContainer, when I look over the code later I know that the element with that ID is a div so it’s helpful.
I’m a premium member and would like to download this video, how come they’re not offered in the dashboard?
again why is this not offered as a download for premium users? I don’t have the time to sit and do this, so would prefer to download the screencast and be able to go to it whenever I want…someone pls answer.
Hi mxl,
As far as I know, Webdesign Tuts+ doesn’t offer premium content yet, it’s all free. If you want the vids tho, you can go to the blip.tv page and download them from there.
http://webdesigntuts.blip.tv/file/5037463/
That’s the first file, you can browse for the other episodes as well. For download, go to the sidebar, “Files and Links” and right click on the format you want, Save As… and you’ll be able to get the episodes that you want:)
I hope this helps,
Adi
please how i can watch this in hd – is there any way to make it work in low res please help me
and thank you you save me and very very good work
Adi,
A quick question,please correct me if im wrong.You paused the video on 44mins to figure out a problem you were having while styling the a.redButton, what happened there? I saw you trying to set the height for the element but you were not successful,is it because is an inline element and you can’t specify a width or height for inline elements? You solved by giving it some padding,do u think u could have solved it by giving the element a “display:block” ? I dont what the result would have been but was just wondering.I thought you were going to explain what caused the problem and some justification to you solution.
Hi manraj,
I think “display: block” could have solved it, but display: block usually takes 100% width, so I probably thought that wouldn’t work because I was trying to float that element to to the right, so I went for a padding instead which made the button bigger or smaller depending on the image inside.
Thanks for pointing it out tho, I’ll definitely work on the bugs on the actual videos next time, no pauses, so you guys can see how you debug something like this :)
why dont u use flash cs5 to make everything active?
Hey I was wondering is there a easier way to code everything, say for example slice everything up in ps and code it in fl? Im sure alot of people like me are lost with the css and html coding
Hey tuan,
I’m not that good with Flash, so I don’t know how you can get the same result from Flash than by using HTML/CSS.
Plus, there are so many drawbacks with using Flash (Apple doesn’t support it, the user might not have it installed, it’s not indexed by search engines, etc). In fact, most of the big companies that have interactive Flash websites also have an HTML/CSS website for those that don’t have Flash installed or they’re browsing from an Apple device.
Besides, if you’re looking for more “posh” websites, you can always use CSS3 effects to give it an edge, to make it more interesting. Sure, it’s not gonna be the same as Flash effects, but it’s pretty close :)
Adi
I watch a tutorial video by Paul Trany where he creates a website in photoshop and then he slice up the parts and import it into flash cs5 and he codes everything in there with action script which seemed alot easier and all you have to know is action script and not html or css. If you like the link to the vid im talking about just reply to this. Thanks
That sounds interesting, hit me with the link :)
Adi, you have literally taught me so much it’s crazy. Your code organization is the best I have seen.
Thank you soooooo much for these videos, they have helped me a huge amount. Keep them coming and I’ll keep watching.
btw, if you accept teaching people, by giving assignments and checking them over and explain what I possibly did wrong, you have a paying customer right here. :)
I’d love for you to teach me your knowledge.
Let me know
Thanks,
Jon
The previous design tutorials helped me a lot (I fully completed them), now I want to pass to the coding part but it’s not comfortable to always switch from coding software to browser so is there any way to download the video so I can watch it on a player? Thanks indeed for an answer.
Hey Adi!
First of all I want to say what a very nice tutorial this is to follow. I like the way you organize your scripts and build this scripts up from scratch so I can follow it very easily.
Is there a possibility I can add you to MSN or something so I can ask you stuff in the future? Also I would like to have your snippets. (I’m a windows user so I have to use another program for this)
Also I would like to point something out: About the Cufon usage, you said that if you use Cufon the hyperlinks won’t show an underline while hovered. I found out that this is not the case in Mozilla FireFox. I’m using FF and I have an underline on my hyperlinks while using Cufon. So it’s Google Chrome which isn’t showing it.
Again, great thanks, and hope to see more of your work!
Greets, Ron.
Hey Adi,
This series is epic. You’ve literally walked me through from being useless at this, to nearly pro.
Just one thing, Day 3 Part 3, the coding for the Client List box – I have noticed that when you preview it in the browser, and zoom out, the box kinda messes up, do you get the same?
Hope you know what I mean,
Thanks
Hi Adi!
I have a questions:
writing this is CSS:
* { margin:0; padding:0; }
Why this isn’t enought to reset the style?
Hi,
your tutorials are so great. I am learning so much things with it. For me this is best way to learn. I read lots of books and tutorials but this video tutorials are for me the best way to learn.
I can just say thanks a bunch :). Great :).
I have one question: what i need to download video from this site http://webdesigntuts.blip.tv/file/5037463/
I`ve tried but i don`t have save as part? Do i need something for this,to be a member or something like that?
Thanks a lot and keep up with great work :)
“Day Three: Part 1 – Day Three: Part 3″ -same video :(
Great !!
A lot of work !! .. very Nice :)
hello,
I’m fairly new to webdesign and find the tutorials really informative.
I just do not know why you use div.centerContainer instead of a wrapper for all?
or can you use both?
Hi Adi, great tutorial! I tried to recreate this but I cannot get the menu background to appear on my page, but the other images will. Could somebody help me with this? Keep up the great work and thanks to others in advance!
super pa
somehow…I got stuck at 2nd video.
background for header is not displaying.. directories and everything was right.
what could it be?
background for topcontainer showed only in Dreamweaver preview..
It does not work in Safari or Coda..
should I give up..:(
It’s a great tutorial! Thanks a lot!
Hey Sensei, does cufon affect SEO?
Thank you so much!!
Thank you for the tutorial. unfortunately, the page does not do the FLOAT RIGHT properly, and everything is displayed to the left – which is a BIG problem. I checked the css code and the index.html numerous times, but unable to get any idea to that.
I think there is some confusion in .
Adi, or anyone who knows the solution – guidance in this is very much appreciated.
Could you please share original PSD file for the reference?
nice work Thanks.
good tutorial, but can’t see what your are coding/ typing.
Hi!
I must thank you for your effort to explain och show your techniques. It’s hard work to make a video like that and have so few errors in it.
Thank you again for a great tutorial, nice to see your techniques!
//Felipe
WordPress next???:) :PPP
//Felipe
complete tut…awesome.. but in Demo, whenever we minimize or scale the half of the webpage(from right side), there is problem occurred…after scale the webpage as above, just scroll to right side,which is not actually on screen…top header background,menu bar, bottom copyright info line was not touch to right side border of webpage…its cut where page can’t be seen…How can we fix it??? sorry for my poor English!!
Hi…
Love your tutorial…and thanks for making my day worth it…really love to learn how to design web on photoshop and transfer it into CSS…thumbs up!!