Tutorial Details
- Program: Adobe Photoshop
- Version: CS5+
- Estimated Time: 3 hours
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


Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 1: Design) | Shadowtek | Hosting and Design Solutions
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing | Webdesigntuts+
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | Shadowtek | Hosting and Design Solutions
Pingback: My Stream » Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup)
Pingback: Create a layout : c0ding.ro
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding) | Webdesigntuts+
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Shadowtek | Hosting and Design Solutions
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | 87studios.net
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | 87studios.net
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Geboo
Pingback: 82 Resources to learn Web Design, Bulgarite.ca.
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Zoomfly
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | Skippad
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Camixo
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | Jetcat
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | Zoomfly
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding) | Webdesigntuts+
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Shadowtek | Hosting and Design Solutions
Pingback: My Stream » Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2)
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Jetcat
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Tagtype
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding) | Webdesigntuts+
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding) | Webdesigntuts+
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | All of Cyber
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | All of Cyber
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Bubbleworks
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Shadowtek | Hosting and Design Solutions
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Zoombug
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Jetcat
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | All of Cyber
Pingback: My Stream » Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts)
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Tutorial,Download,Tips & Trick
Pingback: Blog- & Magazin-Theme erstellen. PSD zu HTML konvertieren | Designers-Inn
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 1: Design) | Bubbleworks
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Zoodoo
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Jetcat
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup) | Camixo
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Zoomfly
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Tagtype
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Skippad
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1) | Tagtype
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Geboo
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | Camixo
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2) | 87studios.net
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) :- Tutorial | Gadget | Game | Tips & Trick | Download | Free. | 1001 Trick And Article
Pingback: Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts) | Zoodoo
Pingback: 33個很棒的Photoshop設計網頁教學 « 我是派
Pingback: Rob Turner » Blog Archive 33 Fresh Photoshop Tutorials for Creating Web Layouts
Pingback: “Brush” up on your Photoshop: 20 Blog Design Tutorials & .PSDs | Customize WordPress Blog
Pingback: Photoshop Tutorials for Creating Web Layouts | Burhan Ahmed
Pingback: Photoshop VIP ☞ Webデザインを極める、すごいレイアウト用チュートリアル44個まとめ
Pingback: 40 Fresh Photoshop Tutorials For Creating Awesome Websites | 1step web design: Best for developer and designer