25个有用的PSD转CSS/XHTML基础教程

现在你已经掌握熟练地设计PSD平面作品,但也许你在PSD转CSS/XHTML文件上还有些麻烦,那就好好研究以下25个有用的PSD转CSS/XHTML教程,学好这些教程,你就是高手了!

Build a Sleek Portfolio Site from Scratch


In this tutorial you are going to learn how to take PSD file and build it with some nice clean HTML and CSS.

Build a Sleek Portfolio

Encoding a Photoshop Mockup into XHTML & CSS


In this tutorial you will learn how to concept and implementing Photoshop into an actual webpage constructed in xhtml and css.

Photoshop

How to Convert a PSD to XHTML


In this tutorial you will learn how to convert a PSD into perfect XHTML/CSS by the screenshot.

Convert a PSD to XHTML

How to Code a Clean Portfolio Design


In this tutorial, it show you how to code the HTML/CSS of the page with photosho step by step.

Clean Portfolio Design

How to Code a Grunge Web Design from Scratch


In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.

Scratch

Coding a Clean & Illustrative Web Design from Scratch


In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.

Clean & Illustrative Web Design

How to Create a Dark and Sleek Web Design from Photoshop


In this web development tutorial, you will learn, step-by-step, how to create a beautiful dark and sleek web layout using standards-based HTML and CSS. Along the way, you will witness how to use CSS Sprites and CSS Text Image Replacement.

Dark and Sleek Web Design

Coding a Clean Web 2.0 Style Web Design from Photoshop


In this web development tutorial, you’ll learn how to build a web page template from a Photoshop using HTML/CSS and the jQuery library.

Clean Web 2.0 Style Web Design

Converting a Design From PSD to HTML


sc_completeWebsite

Slice and Dice that PSD


In this video tutorial, you will learn how to slice up a PSD, dicing it for the web, and serving it on a warm hot plate.

theHTML

The Design Lab: PSD Conversion


In this tutorial you will learn how to code your design lab layout. First make sure you have your PSD ready made in photoshop.

PSD Conversion

Converting a Photoshop Mockup (part 1 of 3)


In this first-ever video podcast, it start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website.

conversion process

From 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 convert it into a fully CSS based html page. All the code, templates and files are available for you to play with, and encourage you to download and play with what is provided.

From PSD to CSSHTML in Easy Steps

From PSD to HTML, Building a Set of Website Designs Step by Step


In this tutorial, it is going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

From PSD to HTML

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. All the tutorials, the source files are available for download.

3

#12: Converting a Photoshop Mockup: Part Two, Episode One


Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup it will be using in this version tutorial is a mini-version of the current version of CSS-Tricks itself!

Episode One

Portfolio Layout #10: Learn To Code It


In this tutorial it explain the steps to take in slicing and coding the layout.

step3

Creating a CSS Layout from scratch


This tutorial assumes you have a basic knowledge of how to use CSS, but only have a very basic understanding of how it works. If you have NEVER used CSS before, you will want to start with the w3schools introduction to CSS. This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.

Creating a CSS Layout from scratch

PSD > HTML/CSS


step30

Portfolio Layout 4: The Code


Hello there, in this tutorial it will show you the code behind portfolio layout.

step16

Coding a layout


This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.

26

Create a Killer Band Site in Drupal – Part 3 – XHTML


In this tutorial, it is going to take some graphics and move on to coding the XHTML and Cascading Style Sheets.

Killer Band Site in Drupal

From PSD to HTML


In this tutorial you will learn how to slice up your design and then use CSS and HTML to turn it into a powerful web interface.

From PSD to HTML

Coding Your 1st PSD Tutorial


In this tutorial, it shows how to load a car sales layout into photoshop.

car photoshop

Converting a PSD to XHTML/CSS


In this tutorial we are going to create a XHTML/CSS webiste by slicing a PSD. It is simple but so great.

PSD to XHTMLCSS

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2010.03.22

    Windows 7 硬盘全新安装教程

    MSDN Windows 7 专业版 | W…

  2. 没有图片

    2010.12.02

    WordPress 3.0.2 中文版发布

    昨天刚刚从博客联盟得知WordPress 3…

  3. 没有图片

    2013.10.25

    本博为大前端主题D8提供技术支持及二次开发服务

    自大前端主题D8发布以来,受到了广大博主朋友…

  4. 没有图片

    2012.06.25

    Discuz!x2防CC攻击设置详细教程

    在config_global.php文件中有…

  5. 没有图片

    2009.07.06

    AddThisChina (分享家:收藏&分享按钮) 不错的WordPress 书签插件

    很早就从网上找Wordpress中文版的书签…

  6. 没有图片

    2012.04.17

    不需要插件和修改代码,轻松搞定wordpress地址中category

    WordPress访问的时候,地址里会有ca…

评论

  1. airmax90 2010.11.18 9:30上午

    有中文的吗

  2. Nike Air Max 2010.11.16 4:47下午

    楼主,做什么搞英文的哦,,看起来好费劲额。。

  3. 博客之家 2010.11.13 11:58上午

    学会不难,学精太难了

  4. Firm 2010.11.09 4:52下午

    哦,英文版的来着

  5. 博客之家 2010.11.08 7:55下午

    很漂亮,以后自己用得着

  6. 陶瓷刀 2010.11.07 2:14上午

    太深了,看不懂的……

  7. 山人网络 2010.11.06 2:57上午

    哈哈,很喜欢你的网站。可否交换友情链接?山人网络 http://www.shanr.net

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!