Create a Sleek, Corporate Web Design (HD Video Series: Day 1)
Tutorial Details
- Program: Adobe Photoshop
- Version: CS5+
- Estimated Time: 2 hours
Final Product What You'll Be Creating
- 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 1 of a 4 part series – we’ll also be finishing the support pages and coding the entire thing in HTML/CSS!
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in April of 2011.
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’ll show us how to set the basic framework for the design as well as how to actually lay out the homepage. In Day 2, he’ll show us how to create the various support pages (contact, gallery, etc.). In Day 3, he’ll be showing us how to convert the entire Photoshop design to a fully working HTML/CSS site.
Let’s get started!
Day One: Creating the Homepage Design
In this first series of videos (about 2 hours total), Adi is going to walk through the homepage design in Photoshop. Be sure to flip over to HD viewing if you have the bandwidth!
Day One: Part 1
Day One: Part 2
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
Nice and clean design…great job! I’ll definitely be following along to this series.
That’s awesome, thanks :)
Superb, very professional and cool looking design, i like it! will be learning & enjoying the series.
Thanks!
Superb, definitely will be following along with this series.
Yes this will come in handy thank you very much for the tutorial.. This is a great looking design
Nice Tutorial, i learn some extra (photoshop things) :P
And in the end of the video are available the III & IV part of the series ….
Very nice. This looks like a great tutorial.
Thanks!
Good Job Adi the final result looks great and simple!
can’t wait to see part convert template HTML/CSS
Thanks :)
I hope you’ll find that even more useful since a lot of people have been looking for coding tuts.
complete leak of technique!…thnx.
Very nice!
Any chance for a download version of those videos?
My laptop tends to overheat when dealing with high quality flash videos.
I believe that you can download them from the Files section of the actual Blip page for the videos – http://webdesigntuts.blip.tv/file/5007965/ Check out the right sidebar for the .mp4′s ;)
Thanks for the tip!
I’m downloading the videos right now :)
If you use firefox there is a great addon called “Download Helper”, you can download ( and convert if you like ) any video on the net you come across.
I’m a Chrome user, but this extension seems really practical. I’m gonna keep a copy around incase I really need to download some video that won’t play in the browser. Thank you!
Really great job with this! Can`t wait for it to be complete.
One thing I wanna ask tho. I would like to watch them also while being offline.
Could webdesigntuts make a podcast like the one nettuts has? It would be really helpful.
What skill level is this tutorial aimed at? It usually tells you in the intro but can’t see it for some reason.
I’m new to Photoshop but will give it a try anyway. It looks great!
Intermediate ;) I’ll mark it for ya.
Thanks Brandon for getting back to me. Was hoping you were going to say beginner, he he, ahhhhhh I’m still going to do it! Thanks again.
Could you give me a alternative url for the videos because blip tv doesn’t work in my country. :(
Thanks for sharing some useful technique’s!
Really enjoyed the clips
Great tutorial.
Easy to follow.
I am definitely looking forward to the rest of the tutorials in this series.
Good Job, Sir. Keep up the great work.
Regards,
Gary
Great Tut
Thank you for sharing this tutorial. I will definitely be following this series.
Hey, would be cool if you also make a tutorial on how converting the whole design to wordpress. Looking forward to it. Thanks!
WOW amazing tutorial! Thanks
Really great tutorial.. I love this specially because its in HD video….
Thanks Adi Purdila and tutsplus…
Wow.. great job bro! clean and professional design ^^
anyway, are u Indonesian?
Hehe, thanks for the kind words. And no, not indonesian :D
Perfect tutorial. Very amazing. Look forward to the HTML/CSS. I learned some cool things from this.
Wow amazing tut! Very detailed. I’m really looking forward to see the coded version:)
What was the name of the icon set you used or can you give me a link? Thanks and keep on doing tuts!
Social Icons: http://www.wpzoom.com/wpzoom/500-free-icons-wpzoom-social-networking-icon-set/
Misc Icons: http://www.tutorial9.net/downloads/nixus-icon-pack-60-beautiful-premium-icons-free/
Have fun with em :D
Ok thank you very much!
Thank you for the inspiration chap
Dude ur video tutorial goes into detail about almost every aspect of the webdesign process.Thanks a lot for posting this. Is this your first post or have you posted similar tutorials elsewhere? If you have, could u pls send me the link bcos I will definitely check them out.
This is my first tutorial, but I’ll definitely be making more of them since people seem to like them :)
Can I just say you guys are awesome? These tuts are heaven sent! I just wanna say thank you from Manila and may you be blessed with all this help you’re providing.
Great tutorial, I love seeing the process of photoshop things. I am more of a developer that wants to get into design a bit and actually seeing how things are created is worth much more to me than just screenshots and text. I will be looking forward to seeing more tuts like this in the future, great work!
Thanks Darren,
I know video tuts are so much better than text+image, I always learn better when I see things moving in a video rather than just reading a bunch of text. Kudos to those who make written tutorials tho, it’s a painful job to take screenshots of every step, then write a bunch of text to explain what’s happening there.
Great! Very professional :)
Please make another tutorial on how to code this into HTML + CSS, that would be awsome, thanks again :)
This is best tutorial about creating layouts (and firs i watch on this site).
I am waiting for coding tutorial. :)
Great work ;)
This tutorial is AWESOME!!!!
I’ve learned some little tricks I didn’t know in Photoshop, and the layout is so both professional and styilish :)
Thanks a lot, great job ;)
This is the best tutorial i ever watched in the net… :) I can’t stop watching it all the time.. thx guys waiting for the coding part see you soon..
My iPad would just LOVE to see your videos… Do you have them in a format that is viewable by iOS 4.0+ ?
Oops. Looks like it’s a browser issue. Never imagined saying THAT on the iPad. I’m using the Mercury browser. Safari looks like it will display the videos just fine. Thanks for the good work and education!
I finally managed to find some time for this tutorial, and after watching it, I must say it’s Brilliant :) Thank you !
HI’
Where did you get the aler font.
I have Arial, I am using CS5
You’re an amazing designer Adi! Keep up the good work!
Thank :)
Thanks Alin, top tutorial. Your design skills are excellent and you explain everything in great depth – simplified! Thank you.
Really helped me start my website designs. I’ve always struggled on how to start, but this really does help! I’ve even made a window layout in my photoshop exactly like yours! Thank you very much!
Great work.. wondering its free… having one problem.. at part 1 at 24:13 time .. when i drag social icons they didn’t combine.. all three comes on their separate windows…. how it come in combined… im using photoshop cs2..thanks in advance…
Thanks for this very detailed and professional tutorial, I have learned heaps and cant wait for the conclusion part creating the fun stuff HTML and CSS. Thank you once again for your time and this tutorial :)
Great design and tut, can’t wait to see the rest of your tut! Keep up the good work!
Cheers
Very nice series on designing and laying out a website. Though only issue is the player is a bit frustrating to use. pause, forward and back don’t seem to work. :(
Very good indeed. Thanks Adi! Keep ‘em comin’ :)
Awesome tut, looking forward to following the next steps in the series!
Hi.. Great work .. i enjoyed this tutorials very much .. thank you so much sir… :)
but let me ask you si : it takes me alot of time more than you work .. about 3 hours or more.. is it normal or what? :(
Hey – brilliant tutorial. I have just discovered tutsplus – excellent.
Thanks.
Besides the irritating fact that he almost smashes his enter button every time he clicks it, it’s actually a Very nice Tutorial, teaches real slick techniques on layout design!
Thank you
Hey! I really, really love you design and tutorial. Hope to you can do more tutorials like this.
Looking forward to Slicing and Coding. :)
Amazing! Really really amazing!
Thanks to make this!
I am new @ web design, currently I work with CGI (3D, animations). This series of tutorials is pure awesome. Gives you insight in pipeline and refining the design for “slicing”. Thanks a lot Adi.
Awesome tutorial, I find it really useful, since I’m more of a coder who doesn’t know her way around Photoshop. I like that you explain in detail every step of the process. I usually spend my time in the nettutsplus area, but I will definitely check the designtuts from now on.
PS: am vazut reclama in romana cand ai deschis browserul in primul filmulet, si nu mi-a venit sa cred ca esti roman (fiind atat de profesionist and such) :) o sa iti urmaresc in continuare tutorialele.
Hi Adi,
Can you help me please? I’m slowly learning photoshop again (using CS5.1, PC), gotten to the point of creating gridlines, however in Day 1, Part 1 @ 11.37mins in, I follow your steps, to find my transparent new document does not have the white grid lines which you see on yours at 11.37mins, before you’ve even done anything with the new document.
I’ve googled for help but still can’t figure out how to do this.
Could you help at all, please?
Thanks a lot.
Charlotte
Hi Adi,
Figured out how to create grid lines from here: http://www.bluesfear.com/tutorials/Grid.htm
I found it a little clearer going from there.
WOoW
wonderful tutorial .. I really like it..!
thanks .. and keep it up :)
Thank you Adi. I really enjoyed this tutorial.
Thanks a lot ! I am going to see the rests of it. Thanks again.
this is the best tutorial that i ever seen before
thanks very mutch
realy thank you
Great tutorial, but are you still doing day 1 and 2?
I absolutely LOVE these kinds of tutorials! It is wonderful to be able to get “into the mind” of a designer and to learn tips, tricks, and techniques along the way. I can’t think of a better way to learn! Imagine reading about all of these steps in a book… No thanks. (Of course, having a printed reference would be nice, I just prefer to see things “in action”).
niceness!
Very nice tutorial! In depth and detailed. Thanks Adi for making this excellent web design tutorial, will be watching all the videos hopefully when I get the time.
for a moment i thougth that it was the flowing part of the awesome series of audi paurdila
thank you adi i hope to see you in new tutorials
Glad to see that this is a free tut! Thanks guys! You are literary the wind beneath my webdesigning wings!
I just poo’d my pants… Literary!
HAHA Rob. I understand though! Great set of vidsss! x
Hai Mr Author.
Thanks a lot for this tricky and a little confusing tutorial.
I watched three times for fully understanding this video.
I am intermediate level designer and coder.
Thankzzzzz a lot.
Great site man, and tutorial was very well explained, we want more!!!
the site i created based on your template:
http://www.southgateinvestments.com
minor change to the slider / banner
Thanks soo much! There are so many tutorials across the internet that profess to teach you how to design websites with Photoshop. Although I just started day one, by far, it is the best I’ve ever seen. Usually, I’d sit down and watch a tutorial and within 5 mins or less I’m easily driven away by boredom. You are spot, and I even find my self getting a little creative during the video using the same skill on my on PSD design. Awesome! Thanks! On to Day 2!
neat n professional … good job mate ;-)
Thats was really a great tutorial ! thanks a lot !
Hey! I really likethis, thats the first tutorial where i see working on a beautiful site! I mean not like showing tips on /red, gree, blue/ colors site. But i saw something you do, and i wonder why ^^ Why after you copy a text, you paste it on one line, and then keep pressing enter until it lays good on the guide lines, instead of drawing a box, and just paste the text in it. It make it more precise, and more faster. Just wonder, if this si your way to do it, or there is some reason. Thanks, and keep the great work!!!
I began learning photoshop month ago, but it wasnt hard for me to do this tutorial. I mean the first step,design in photoshop :) And what is wonderful the result is great. I’m waiting for your new tutorials!
Thanks for these great files and tuts. Missing “Aller” font, though, in the PSD files. Just needed to tell
Thanks for tutorial :)) slow and easy to understand.
note: please make code font size bit bigger next time :)
Really helped me out a lot this video tutorial and have a better understanding on CSS. Please upload more video tutorials simular to this Adi :)
hey adibeautiful tutorial. can u plz upload more desigen and tequnique videos…?
Hi Adi,
It’s really great job. And I appreciate you for sharing all of them.
Can we make the same design in Fireworks CS5 design programme. What do want to say about this?
Thanks.
Kemal
can uplz up load some more tequnique about webdesigen plz i am waiting for your next video