1. The Design Lab: PSD Conversion
Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop.
Download CSS Download PSD
2. From PSD to HTML, Building a Set of Website Designs Step by Step
Today I'm going to take you through my entire procedure of getting from Photoshop to completed HTML. We're going to build out a set of 4 PSD mockups of a website that ultimately will become a WordPress theme. It's a huge tutorial, so if you're going to follow through to the end, make sure you have a few hours to extra!
Source File
3. Coding: Design Lab TV Styled Layout
in this tutorial you will learn how to code the Design Lab TV Styled layout into xhtml and css. If you have any questions about this tutorial are sure to ask in the explanation. Also, bear in mind with all the tutorials, the source files are obtainable for download.
4. PSD to CSS/HTML in Easy Steps - Part 1
This is the first in our 4 part series on how to take a PSD file and change it into a fully CSS based html page. These are the first in a series of tutorials in which we construct a completely working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we give confidence you to download and play with what is provided. The design template is licenced under the creative commons licence.
5. Slice and Dice that PSD
In today's video tutorial, we'll be slicing up a PSD, dicing it for the web, and helping it on a temperate hot plate. Our design sports a neat "Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.
Source File
6. Converting a Photoshop Mockup: Part Two, Episode One
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let's do it again! Every website is dissimilar will necessitate different conversion techniques so there will be abundance to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!
Download Files
7. Build a Sleek Portfolio Site from Scratch
There's nothing like building an whole site to show you a good impression of how a CSS layout should work. Over at PSDTUTS we've got a tutorial where you design up a sleek, high end web design. In this tutorial we're going to take that PSD file and construct it with some nice spotless HTML and CSS.
Source File
8. Portfolio Layout - Learn To Code It
Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il give details the steps to take in slicing and coding the layout. Before attempting this tutorial i highly propose you create the layout before hand and have it ready
Source File
9. Converting a Design From PSD to HTML
Several weeks ago, I showed you how to take a PSD design and convert it into HTML and CSS. Given the fame of that exacting tutorial, I've decided to create a second series. However, I'm not much of a designer. Instead, I asked Collis if he would permit me to use the design that he used for a recent tutorial for Web Design Week.
10. How to Convert a PSD to XHTML
I continue to be astonished by how well Collis's "Build a Sleek Portfolio Site From Scratch" tutorial continues to execute. It's been months, yet it still posts strong numbers every week. Bearing in mind that fact, I decided to create a screencast that shows you precisely how to convert a PSD into perfect XHTML/CSS.
Source File
11. Creating a CSS Layout from scratch
Note: To follow this section, you'll need to install the IE standalone versions. These are unconfirmed hacks of old IE versions that you can install along side your present IE version.
Let's start the hacks at the current problem child, IE5.
Load up your IE5 browser. There are 2 things that I notice instantly that are wrong. The first is that the page isn't centered in the browser like it should be, and the second is that the footer has a strange alignment issue.
The alignment issue is well known, so we'll tackle that one first.
IE 5 and 5.5 do not recognize the margin: auto; css property like they should. To get around this we need to use the text-align: center; property on the body which will center the container div.
12. PSD > HTML/CSS
Download PSD
13. Encoding a Photoshop Mockup into XHTML & CSS
Continuing from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we'll now look at taking the concept and implementing it into an actual webpage constructed in xhtml and css. By exporting the imagery from Photoshop and coding up the page we'll produce a working example of the overall blog design.
14. Css Template Tutorial
welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in Photoshop and coding it in dreamweaver. You can also access instance code at a variety of stages through the tutorial if you have any problems.
15. Portfolio Layout 4: The Code
in this tutorial il show you the code behind my portfolio layout #4. You can also download the CSS template for free.
Download CSS Download PSD
16. Tutorial Coding a Layout
So, you've designed your next site but you're having a little difficulty turning your lovely PSD into a coded layout. This tutorial should help you learn how to examine either a new template, or even your existing layout to find the best way to code it.
17. Converting a Photoshop Mockup
In this first-ever video podcast, I start the conversion procedure of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is attractive rough here folks, I'm sure these will get more focused with time.
Download Photoshop File
Download Website Files
18. Killer site - From Illustrator to Xhtm to Drubal
This tutorial is another particular series written guest author Sean Hodge from aiburn.com and Association Cube. He is an specialist in Drupal, which I am totally not familiar with. He intrigued me when he told me that the preponderance of the bands on Sony's record label are powered by Drupal. Drupal is basically an open source CMS, and I was concerned in learning more about it. So that's why he's writing this tutorial for us. You can learn along with me!
Read the introduction - What's Drupal and why?
Read Part 1 - Design it Illustrator
Read Part 2 - Slicing it Illustrator
Read Part 4 - Theming in Drupal
Read Part 5 -Drupal Admin
19. From PSD to HTML
In this tutorial I'm going to show you how to take the design created for my Fundamentals of Interface Design tutorial and turn that into a usable web interface.
20. Coding a Car Sales Layout
Load my car sales layout into photoshop (if you haven't got the layout already made, go here to make it). Once opened in photoshop we will need to assess what were going to need. The layout im using is pretty easy and most of it can be done in css.
No comments:
Post a Comment