This is a MUST-have list for any CSS enthusiasts.
You’ve designed your site but you’re having a little trouble turning your design PSD into a coded layout. Here I’ve listed 20+ Best Tutorials to convert Psd to Html/CSS.These tutorial should help you learn how to find the best way to code it.
- The Design Lab: PSD Conversion
- From PSD to HTML, Building a Set of Website Designs Step by Step
- Coding: Design Lab TV Styled Layout
- PSD to CSS/HTML in Easy Steps – Part 1
- Slice and Dice that PSD
- Converting a Photoshop Mockup: Part Two, Episode One
- Build a Sleek Portfolio Site from Scratch
- Portfolio Layout – Learn To Code It
- Converting a Design From PSD to HTML
- How to Convert a PSD to XHTML
- How to Convert PSd to Html
- Creating a CSS Layout from scratch
- PSD > HTML/CSS
- Encoding a Photoshop Mockup into XHTML & CSS
- CSS Template Tutorial
- Portfolio Layout 4: The Code
- Tutorial Coding a Layout
- Converting a Photoshop Mockup
- Killer site – From Illustrator to Xhtm to Drubal
- From PSD to HTML
- Coding a Car Sales Layout
Damn! I’ve been practicing creating fluid designs for ages and I didn’t even write any article on that. Well whatever, because Kayla Knight from smashingmagazine.com has written an excellent well-thought article on using fluid designs.
Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.
If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.
Btw, I recommend you to check out “the original” article that gave birth to this topic: http://www.alistapart.com/articles/fluidgrids
This is the second installment for the article How to Create a Clean Web 2.0 Style Web Design in Photoshop. A bit of CAUTION: It is huge! I mean very long but somehow really interesting and exciting (hey, anything about the new web is exciting right?). So get some Starbucks or better yet, Coke/Pepsi and read the whole article without blinking!
This is exactly what I was looking for this afternoon. I don’t usually make any mockup in Photoshop but saw many advanced designers gain success by producing mockups. You definitely should give this a try.
This article is highly recommended if you often create mockups in Photoshop and then “try” to slice it into a nice, standard compliant XHTML page:
Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.
In case you missed it, the first part of this tutorial, Create a Clean Modern Website Design in Photoshop went through the stages of producing the visual concept of the Pixel juice website.
A very informative article about the CSS Reset design practice which resets the default margins/paddings that a browser applies to elements. Web Browsers most of the time applied a bit of styling to certain elements even if you are not using any stylesheets at all. You can see it in action when you create a <a> element. Most of the browsers render it as a blue, underlined text. But by resetting this behavior, you can view what a certain element would look like with no style applied to it at all.