Tutorial Details
- Program: Adobe Photoshop
- Version: CS5+
- Estimated Time: 3 hours
Final Product What You'll Be Creating
In this series, Adi Purdila is going to walk us through how to design and code a great magazine/blog website theme in a step by step tutorial. There are going to be 5 days total in this video, which will give us plenty of time to go into each step in a great level of detail. Today, we’ll be going over the intro to the project as well as the entire design phase. Let’s get started!
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
Alright, let’s kick off the series with Day 1, the design session!
Day One: Designing the Basics Template
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! The first video includes the introduction and outline for the entire series, as well as a bonus high speed video of the entire tutorial with no audio (so anyone who just wants to watch can turn on some music and follow along at 340% speed)!
Video 1: Introduction to the Basics Design (Plus a High Speed version of the Tutorial with No Audio) – 1080p
Video 2: Designing the Basics Template – 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
awesome site! really well done. I’ve been very impressed by the level of tutorials coming out of this blog, but what else should I expect from Envato. This has taken over PSDtuts as my favorite tut website.
Thanks!
Nice clean and minimal website which I really like. Seems like this will be transformed into a WordPress template? That will really make this tutorial even more awesome.
@Terence Thanks, glad you like it :D
@Niels Yes, it will be transformed into a WP theme and I’ll also make a separate tutorial for that later on.
First of all, a nice and clean design. I like it.
Secondly, a wordpress tutorial for this will be awesome. I don’t think tutsplus has many PSD to WordPress tutorials. Would be a great addition.
Very nice Adi! you are my best teachers in webdesign :)
Adi Purdila, say, please, what program you use to create WireFrames?
pen and papers i guess…
You Captain Obvious!
I usually use pen and paper, yeah, but for this bit, so you guys can see it as well, I used Balsamiq Mockups, great app!
I think, we all use pen and paper…
Audio goes off right after the introduction part in both ff4 and chrome. What could be the problem? :(
The audio just goes off for the “high speed” tutorial and it’s intentional so that anyone who wants can follow along with the music in the background. The entirety of the audio commentary will be coming out through the rest of the video series :)
Haha ;) Thank you!
thank you>>
great tutorial
i will use it in my work
the source link its broken! i wanna see the PSD :(
It’s working on my test computers Jose… can you double check that it’s not downloading for me? Thanks!
Very good i know its a blog theme but its given me an idea how to use the jquery accordian and make it look good
Adi is back with another tutorial :) Ive not watched yet but am looking forward to it!
any chance showing how-to make it into a wordpress theme ?
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
So the video with the audio tutorial is coming out right?
@nott Yes, I will make a separate tutorial for that later on.
A note about the audio on the first video:
The 1st video is just an intro video, with 4 min of commentary (with audio) and the rest with a high speed video that covers the wireframing part and the initial Photoshop treatment (this has no audio, no point in commenting a very high speed video).
The rest of the tutorials will be the normal, video and audio tuts :)
Thanks! :)
Nice tutorial, looking forward for day 2 :)
This is OUTSTANDING! I’ve never seen the actual full process of someone creating a full site AND teaching it for FREE! Man you are so awesome and i love u so much right now xD
I thank you from the heart man :P Respect!
Hehe, thanks Rensa, I’m glad you found it useful :)
Thank you for this tutorial, Adi. Thank you, webdesign tuts+, for publishing it. I really enjoy all these site-builds video lectures, and I’m looking forward to more of them. And yeah, wordpress conversion would be awesome too. :)
By the way, I must say that I like the low resolution that you used, it seems much sharper and more clean to me with HD enabled.
Uau, love this theme. the animation and mouse over effects are nice. I will follow all the series.
Nice Adi. I like the fact you can hide the masthead. Very clean/organized too. Good stuff.
I’d love to see a UI web app design tutorial from you in the future. :)
I am a newb to this site, and have fallen in love with it. I have also recently fallen for web development in general.
When I follow tutorials I always try to add my own bits, as it helps me to learn the techniques.
The question I have is, if I were to follow this tutorial, am I free to use the design, although slightly modified for my own purposes on the web?
Any help is appreciated.
If you don’t resell it as your own, sure, you can use it :)
If you wait a bit longer tho, it’s gonna be released as a WP theme on ThemeForest, so you’ll get the whole deal with a license and everything then :D
Thanks Adi! For some reason it won’t let me reply directly to your reply.
I don’t use WordPress, and am I doing this to learn the webdevelopment process, I just thought if I could build something similar for my own purposes, and not re-sell it I would like to host it online. But I wanted to run this past you before doing so and getting into trouble. My version, of course, would not be an exact match.
This is Awesome!!!!.
I just canceled my membership on Think Vitamin….whatever webdesign.tutsplus is the best!!!!
and all it comes FREE!!!
Nice work, but…
THIS FALLS SHORT OF BEING PRACTICAL WITHOUT INTEGRATION INTO A CMS.
C’mon guys! What’s with the tease once again?! This is just more of the same. Design, code, but no implementation. Wtf?
Day 6: Preflight for WordPress
Day 7: WordPress Integration
Day 8: WordPress best practices, etc.
Heya BecomingRobot – I believe Adi is actually releasing this as a full WP theme on ThemeForest when he’s all done… whether or not he releases a tutorial on how to actually code the WordPress theme is going to be up to him. :)
Hi BecomingRobot,
Brandon is right, I will be releasing this as a WP theme soon and I will be making a tutorial for that. And I don’t make tutorials to tease people, I actually wanna help them learn some stuff here ;)
Thanks!
Well Brandon and Adi, please forgive my haste. I REALLY look forward to this (or a series) which starts from pen/paper wireframe, through PSD and HTML/CSS, and into WP. It sounds like its coming, so that’s great news.
Thanks for your efforts.
I am loving this design! I will certainly be using it for inspiration :)
Amazing Tutorial!!!! Excellent methods, pace and approach!
Sources are available for free :DD thanks a lot :)
Nice tutorial – well done! I love clean and modern designs. Thank’s for sharing.
Its Downloading again! :D nice tutorial
i agree with BecomingRobot, why not create a wp-integration tutorial about the theme? it’s a good idea :P
Cool!
3 hours on this?
There is 3 hours of video :) the actual work is probably closer to 1 hour.
Easy Adi, I haven’t completed your previous tutorial :) . You are doing wonderful job. I have learned a lot from your videos. I am .Net web developer. Now I am able do something in front end after I watched your tutorial. Grt Job
Good Work!
How do you make those pink guide lines appear when you move elements in photoshop? Looks incredible efficient.
Oh, I found it: View -> Show -> Smart Guides
Glad to see a great designer from Romania, I enjoy your work and hope to see more.
Mersi Vlad :)
Thanks Adi Purdila !!
I wait for the next episode
Thank you so much for this!
It’s a really exciting experience to look a fellow designer over the shoulder, discovering a different workflow. And even including the little flaws is an honest and very good way to teach working with this massive tool called Photoshop (btw. there is a much easier way to move layers from one folder to another than dragging it across your entire layers panel ;).
You have a great way of explaining – plus you made me smile quite a lot :)
Already learned so much and looking forward to completing the next steps!
You are wonderful. I learned about 8 new tools/fonts/apps/etc.
Thank you
Very helpful! And easy to follow! I am very thankful.
Awesome tutorial.
Hi Adi, can you tell me how to make Photoshop display the line/guides that come on when you drag a layer. I tried every setting on my PS CS4, and couldn’t get it to work.
Thanks.
In CS5 it’s View>Show>Smart Guides. Not sure if it’s the same in CS4, but the lines you’re referring to are called Smart Guides.
Cheers!
Awesame Tutorial and love this very much … since I m still basic ..
hey, so when do we find out how to make this a word press ? other wise there is not real point?
Great work!
One question… When you create the widths (and heights) of elements are your values (pixel widths etc) just arbitrary? Or do you have them set (in your notes or in mind)? I really enjoyed watching the way you work… very educational :)
Thanks!
I can get these to play but no video just audio. FF3 – any body else have this problem?
Hi Adi,
In the video you use lorempixum to generate a placeholder image. My question – Can these be used on commercial projects?
From what I have read, it seems one still needs to contact the author for permission. Am I understanding this correctly?
Again great! Loved this tutorial and going to watch next parts right away, thanks Adi, and please dont stop making tuts :)
thank you for the lesson is best . Merci beaucoup pour cette leson
شكرا لك على هذا الدرس الرائع
god bless you Adi … keep going with god’s care … it’s really Awesome work
the fact is WebDesignTuts is beter ever.
Hey Adi
I absolutely loved your corpora web site tuts. You are so clear and detailed. While I was watching that series I could have sworn that I saw another by you where you created a website design, then applied it with wordpress underpinnings to utilize the CMS aspect of WP. But I cant find it again!! Help.
Cheers Gerry
Hello Adi Purdila,
I have one question.
What was the website that u used as color generator?
Thanks!
Greetings,
Josco
I think you are looking for kuler.
here: http://kuler.adobe.com/
Not sure about cs4 but cs5 has addon for kuler. Just search and find color template. I dont know if you can download them, so i just take screen sh0t and then pick colors in PS.
BS
That thing he keeps doing where he makes a rectangular selection, opens a stock image, and the selects just that size of it (and a 3×3 grid overlays it): how? I’ve never seen that before, but it goes by so fast I can’t tell what’s going on.
Really amazing tutorial! My skills on Photoshop will grow up after see this tutorial. Really thank you!
Just awesome. Im trying this right now.
Thanks
Hey Ardi, Thank you so much for the tutorials this has definitely given me a huge jump start in building websites. any more tutorials we can look forward to? you have been quiet for a while :)
Panic not Rodney, Adi has some things in the pipeline – stay tooned :)
@ yates Really good news… Can’t wait. :)
Just curious, which social icon set is being used for the footer?
i hate reading text to learn…. this video helped me… thankyou!
Hey where you do the layout before go to ps?
like great and i usually use fireworks but this tool look
more friendly and easy.
thanks in advance
Is it possible to download the video. It would be greatly appreciated.
I’m sorry.
What software you use in a video?
I find it very convenient.
Can you tell me the name of this software
How can i see this video in my FireFox 8.0.1.
This tutorial is pure gold.
Thank you very much. Loved your design.
Hey, great tutorial!! i love it.
can you please tell me how you enabled these grid lines in photoshop? not the blue ones, but those purple ones
how we can download these tutorial from blip
you can download the webdesigntuts+ podcast on itunes for free!!!