Tutorial Details
- Difficulty: Intermediate
- Programs: Adobe Photoshop + HTML Editor
- Estimated Time: 90 minutes
Final Product What You'll Be Creating
It’s day two of the Basics Design tutorial! Having just finished the design session of this series, today we’ll be continuing on with the PSD slicing and markup. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you’re a seasoned veteran or a new designer, we hope you enjoy the walkthrough!
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! Here’s the outline of what we’ll be going over in each day:
- Day 1. Homepage and blog single page PSD files
- Day 2. Homepage PSD slicing and markup
- Day 3. Styling the homepage and blog single page
- Day 4. Let’s create some more pages: gallery, contact, full width
- Day 5. Finishing touches: installing and customizing SlideDeck and some JavaScript work
A note on the downloadable files for today: the full HTML will be available for download in the next session of this series (Day 3), so today is going to be working from the same PSD files that we created in Day 1.
Now on to Day 2, the slicing and markup session!
Day Two: PSD Slicing and HTML Markup
We’ve recorded these videos in full HD resolution, so be sure to turn on the full screen HD version if you’re able to! This video includes the full slicing and markup session, recorded at 720p with full audio commentary throughout.
Video 3: Slicing the PSD and HTML Markup – 720p
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
Thanks for the wonderful tutorial. I learned some neat tricks and shortcuts I can use now.
Jessie, why on the main page when you hover over the arrows / switches near the gallery cursor don’t turns into a Pointer?
Шикарный Никнэйм)))
you are the best – really you make it so easy for me – hope the best for you ..
thank you and thank you again ….
awesome man
@Adi I have not watched the videos yet,but from reading the comments you have received Im sure I would not be disappointed. Thank u ever so much for posting detailed tutorials like this and that also in video format.
Will you be showing how to convert this into a WordPress theme ?Im sure Im not the only looking forward for this. It would be great if you could find time to post that as well.
You are the best mate :)
U have learned me to design a clean blog.
I really hope ur making a video how to make this design to wordpress :)
Thanks.
Hey can download the these right now?^^
I like it rly . It looks great =) I want use it NOW :D
Can you show me where i can download the wordpress theme?
Hello Adi,
Very nice work. I enjoy watching the video. You are making it very easy to follow. I also hope you will show us how to take this to wordpress
Thanks very much
Hey guys and the answer is YES, i will be making a WP video later on!
Thanks for the kind words everyone :)
Thank you for these wonderful tutorials! They have really been a big help for me with learning web development.
I have a question thou with regard to how you use ( or will use ) the h1 tags. I have read a few articles around the web that say you should only use one h1 per page but since you are going to be using the h1 in the slider section I am assuming you will be using more than one. I am a little confused on what is the proper way to use this tag, or is it really just up to the preference of the developer?
You are correct in what you’re saying Jason, people indeed recommend using a single H1 tag on the page for the most important element (a blog post title for instance or even the logo).
I’d recommend using it for the logo since you can add lots of text inside that and it’s very good for SEO (add text, give it a text-indent: -99999 to push it off the page and use the normal image for the logo). In the case of Basics, yes, I used it in the slider and I’ll keep it like this for now until I get some answers myself.
If you haven’t yet, you can read this cool article by Joost de Valk: http://yoast.com/blog-headings-structure/
Hi, thanks for your time and wonderful tutorials, I would like to ask you something about your TextExpander config.
I downloaded the most recent version and also the HTML group, however I can’t replicate your nested instructions. I checked the documentation but I didn’t find any related to nested instructions, can you please advice on how to config this tool to be able to nest instructions as you do, for example:
div#topheader>a[href=index.html]
Hi David,
The stuff you’re referring to is ZenCoding, not Text Expander.
http://code.google.com/p/zen-coding/
Just download the plugin for your code editor and go wild with it :D
Thank you very much for the clarification!.
I love the design
So far so good for me.
My first mark up done (:
waiting for the css (:
Well done.
I keep refreshing for Day 3!!!!! lol
JUST LOVE these TUTS! Cant wait to the next. Are you going to use some neet CSS3 styles?
Hello Adi Purdila,
First of all, I’d like to thank you for posting this tutorial.
I’m new to coding, in september I’m starting my schooling of Digital Media Design. I hope I’m learning alot during this schooling not only about designing / sketching but also coding.. But I’m never to sure about the education today.
So I’m teaching it myself by following these guides.
(Still have to watch day 3, really looking forward:P)
I’m new to CODA, so my question is:
What shortcuts do you use to make it more comfortable using -> During the use of CODA?
And what do you think of using Adobe Dreamweaver? (have that program)
And do you have tips in creating a perfect workingspace for in Photoshop?
I know it’s something you have to get used to yourself, but a (somekind of) guideline is always usefull in finding the perfect workspace for your own use.
Thanks,
friendly greetings,
Josco Decker
(email: decker.josco@gmail.com)
Hey Josco,
About shortcuts… you probably mean the div#sliderContainer>p.content right? If that’s the case, I’m using Zen Coding for that, it allows you to write shorthand code and then expand it. I also use TextExpander for pieces of code that I use in many places (starter HTML, dummy text, jQuery call, etc).
I’m not sure about DW, I used it very little and I didn’t like it (probably because I was using the visual editor and didn’t have control on the code structure). I usually just prefer to start from scratch in a simple editor, that way I know what I wrote there :)
About the workspace… as you said, that’s really up to you, but what I found works best for me is something like this: http://twitpic.com/4z4r28
I also have a huge screen so there’s room for that, but if you’re using a lower res you might wanna hide a few panels. I think the 2 most important panels to have are Layers and Info, that allows me to do pretty much anything without great effort.
Hope this is useful :)
Adi
Hi Adi,
Thank you!
I hope you don’t mind if more questions would come from me, in my eyes you know ALOT about coding etc. :)
Josco
thank you, a very nice tutorial for a somewhat complex web project, beautifully styled.
just one question: what did you use to insert the medium lorem ipsum?
thanks
Very very cool.. Thank you. I learned new tricks today. This inspires me a lot.. Thank you.
Thank You again for the wonderful tutorial..
I love your patience with the project. Thank you for going through every step in detail. Some tutorials prefer to skip steps assuming that you know whats to come next but thats not always the case. I have learned so much with just this one tutorial. Please do more.
Thank you very much, this is awesome
anyway to download the video?
You can grab all Webdesigntuts+ videos by visiting our iTunes listing :)
How do you do it. When you use the Marquee Tool Why is there with the Guides.
some times its a pain within the ass to read what website owners wrote but this website is real user genial ! .
VERY VERY hepful, useful design and coding!! Thanks adi…