by Eric Hoffman
This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.
Elegant and Simple Blog Web Layout Tutorial Series
This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.
* Part 1: Make an Elegant and Simple Blog Web Layout Using Photoshop
* Part 2: PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout
Final Result
Click on the final result preview below to see a live demo. Since we are using some CSS3, this demo might not look exactly the same in all browsers.
View Demo
Create the Basic Files
1 The first thing we’ll do is set up the files and folders. Create a new folder in your computer and name it letterpress. This will be our working directory.
2 Create 2 folders inside the letterpress folder and name them images and styles.
3 Open up your favorite HTML/CSS editor (such as Dreamweaver or Notepad++) and create an HTML document. Name it index.html or some other preferred file name. Save this HTML document inside the letterpress folder.
4 Create a stylesheet document and name it style.css (or any other name you want). Save this file inside the styles folder.
Basic HTML
5 The code below goes in index.html. The code represents common HTML markup.
Letterpress
Slice the Bookmark from the PSD
6 Now open up Photoshop and open the PSD we created together from Part 1 of this tutorial series.
7 Hide all except all Photoshop layers except these layers:
* Datebg and shadow
* Headerdivider
* Navbarbg
* Logo
* Sidebar
* Sidebar divider
* Background
* Widgetbg
* Footerbg
* Image
* imagebg
by Eric Hoffman

This is Part 2 of tutorial series. The first part dealt with creating a web design mockup of an elegant and simple blog web design. You should do Part 1 before attempting this tutorial so that you to gain the most benefit.
Elegant and Simple Blog Web Layout Tutorial Series
This tutorial is the second part of a two-part tutorial series. This part (Part 2) will show you how to create an HTML/CSS web template for the PSD design created in Part 1.
Final Result
Click on the final result preview below to see a live demo. Since we are using some CSS3, this demo might not look exactly the same in all browsers.
View Demo Continuar leyendo «PSD/HTML Conversion: Elegant and Simple CSS3 Web Layout»
-34.552356
-58.443076
Me gusta esto:
Me gusta Cargando...
Debe estar conectado para enviar un comentario.