Extensive PSD to HTML tutorial - some great ideas in here!
Monday, 9 August 2010
From PSD to HTML, Building a Set of Website Designs Step by Step | Nettuts
From PSD to HTML, Building a Set of Website Designs Step by Step | Nettuts
Build Kick-Ass Practical CSS3 Buttons | Nettuts
Build Kick-Ass Practical CSS3 Buttons | Nettuts
A cool tutorial to build a pretty decent looking button entirely from CSS. It is really great to learn how to use CSS for things other than styling a webpage!
Wednesday, 4 August 2010
HTML, XHTML, and CSS All-in-one Desk Reference For Dummies: Amazon.co.uk: Andy Harris, Chris McCulloh: Books
HTML, XHTML, and CSS All-in-one Desk Reference For Dummies: Amazon.co.uk: Andy Harris, Chris McCulloh: Books
Not bought this book yet, but I do intend to! Reviews seem good, price seems fair and the quality and quantity both seem decent too! If anyone gets this book let me know how it is!
Introduction to CSS
W3 schools have tutorials for all the major web programming languages. If , again like me, you are new to this then after checking out HTML, you are now going to want to check out CSS.
Again there are a few chapters to this guide - but after completion you are going to find other tutorials etc. much easier to complete - you may even be able to produce something worthy of praise!
You can write CSS as you would HTML, in pretty much any text editor, I again used Espresso, but also by the MacRabbit team is CSSEdit, which will enable you to produce CSS style sheets with ease! (It does however come with a bit of a learning curve to use the application itself - but nothing which isn't doable!) Check out Macrabbit here.
If nothing here seems to be making sense, then make sure you head over to the w3schools.com site. They introduce every new concept and will walk you through how to use them. When you are feeling proficient you can always check out the other tutorials here! Good luck!
Again there are a few chapters to this guide - but after completion you are going to find other tutorials etc. much easier to complete - you may even be able to produce something worthy of praise!
You can write CSS as you would HTML, in pretty much any text editor, I again used Espresso, but also by the MacRabbit team is CSSEdit, which will enable you to produce CSS style sheets with ease! (It does however come with a bit of a learning curve to use the application itself - but nothing which isn't doable!) Check out Macrabbit here.
If nothing here seems to be making sense, then make sure you head over to the w3schools.com site. They introduce every new concept and will walk you through how to use them. When you are feeling proficient you can always check out the other tutorials here! Good luck!
Introduction to HTML
Anyone, completely new to HTML, like I was, should go through the W3 school website. The cover how to use the most common of HTML tags and correct syntax etc.
Going through the entire tutorial, means almost 30 chapters which may take a day or two, however this isn't that long in the grand scheme of things!
To maximise your learning experience don't just read through the chapters, actually take part - use their 'Try it yourself' sections to edit HTML within the browser and see results there and then. It may also be beneficial to go through these chapters using your own text editor (theirs is the equivalent of using notepad). I use Espresso, and by coding even these simple chapters with espresso it helped me to learn short cuts and functions that really sped up my workflow.
If you have never even heard of HTML before now, then w3 is the place to begin. Don't let that put you off however if you have some experience under your belt, as there are plenty of reference resources available too, which will aid you.
After completing these chapters you will find other HTML guides and tutorials so much easier to follow!
Build a Sleek Portfolio Site from Scratch | Nettuts - PSD to HTML
After playing around on photoshop for a while, I came across the psdtuts+ half of this tutorial - I thought the site looked really good and so I built it (see my version here) I then became interested in actually making it into a site - thus my mission to learn web design began!
Unfortunately the nettuts+ half of this tutorial wasn't as user friendly as I would have hoped - but now returning to it after learning some basic web programming (less than a week!) Im hoping to actually get somewhere with it this time!
I've posted this link anyway to give you the challenge of trying it out! If you struggle, then go away - brush up on CSS especially, come back and try again!
Remember this is the nettuts+ half, I believe you can just download the .psd file and go from there, but I'd definitely recommend having a go at the psdtuts+ half to really get a feel for making a website from scratch! Good luck!
BaseKit (Beta) Convert your psd into a website!
As someone new to the whole web development game, I can safely say that this site looks awesome! The steepest learning curve for me so far has been learning to convert .PSD to HTML (Which is why I am currently learning CSS and HTML etc.) however, this site does that for you! Granted, converting a .PSD to CSS & HTML manually is going to provide a lot more control over the end result, but this site comes so very close!
Simply split your .psd design into a header, footer, main etc (full instructions on the website are given) and you can edit your .psd into a site (e.g. add content, text, change styles etc.) right in your web browser - you can then publish your site immediately!
Head over and have a look now!
Photoshop to HTML | Rockable Press
This is Jeffery Way's book, 'from Photoshop to HTML' reasonably priced at $29 and a discount is apparently available if you sign up to the Rockable mailing list - This is an e-book, which is definitely a bonus, as it means you get access to source codes and tutorial videos. As of yet I haven't read it, but intend to purchase it soon - based on his previous work and the sample pages available for download, this seems a definite purchase for those of us new to the whole psd to html scene!
Converting a Design From PSD to HTML | Nettuts
Almost a year later, but this is another great tutorial for converting your PSD delight into something renderable in the browser!
Slice and Dice that PSD | Nettuts
One of Jefferey Way's initial PSD to HTML tutorials, with a basic understanding of CSS and HTML, these tutorials are suprising easy to follow and a great place to build on. See the next few links additional tutorials and a book!
Subscribe to:
Posts (Atom)