May
21
2012

Beginner Web Design Ep. 9: Photoshop to CSS

In this episode, we take a very simple Photoshop design, and convert it to pure CSS. It’s not a full website, but it shows you how simple it is to go from a photo-editing software straight to code.

Above the Fold: Understanding the Principles of Successful Web Site Design


Above the Fold is a book about the fundamentals of effective graphic communication set in the context of Web design. Unlike other books that focus on the intersection of design and technology, Above the Fold explores the relationship between the stakeholders of a Web project– the designer, the user and the client — and how this continuous cycle affects the decisions made by successful Web designers. Above the Fold is not technical manual or a how-to book, nor is it about timely trends; it’s about the timeless fundamentals of layout, usability and measurement that lead to a successful digital product. 

17 Comments+ Add Comment

  • this is friken awesome dude!
    

  • Help,
    i can’t center the content ( like 17:41 )
    pls help me,
    Thanks

  • thank you so much :))

  • Try setting margin: 0; on your body.

  • Hey,
    Tnx for your tutorial! It is very usefull! Im following it an taking the same steps you tell me to do. I still came across problem tho. At 08.52 you said “border-top: XX px solid color” When i do this, my border doesn’t show on top, it is about 10 px down from the top. Do you know whay that happens?

  • OMG! You are so good! :)))

  • thx alot

  • Tnx allot helped me started with this stuff

  • johnn

  • thanks
    

  • There should be a software that automatically turns photoshop text and image layouts in html and css, guesssing when it should be color and/or when it should be pure image. Current technology is capable of that. They can even track a whole video on youtube by reading its pixels, for christ sake. Now… Doing this whole thing manually is just ridiculous… I, for example, keep having problems deleting the slices that will become css, because the spaces kinda shrink right after. Its a big MESS.

  • It’s called “Loremify”

  • what was that app that you had on your dashboard?

  • Episode 8 contains background-image.

  • wow, excellent video! May I ask how old are you and where you learn’t all of this? 🙂

  • ahhhhh john your vids are amazing you deserve way more subs

  • First haha