From Photoshop to Dreamweaver

In this tutorial you will learn how to slice a layout that we made earlier in adobe photoshop, and export it to a HTML file. I In this tutorial you will learn how to slice a layout that we made earlier in

adobe photoshop, and export it to a HTML file. I repeat, you won’t learn how to make a layout in photoshop, you will only

learn how to slice.

1. Open up layout that you will slice. I’ll use a “Modern web layout” tutorial.

For this tutorial we will need just the basic outfit of tutorial here’s how’s mine look.

2. Now, pick up a Slice Tool (K) from toolbox and let’s go!

3. We will select first are that we will slice. This will be our header text.

Select it with slice tool. Just like that you’re using marquee tool. Press left mouse button and pull.

Look the picture.

Why we sliced this text? We sliced it so that we can use it as a link later.

Now. Our next slice will be our first navigation button.

Ok? You get it so far?

Now, slice all your navigation buttons. And a GO search button.

You’re probably wondering why we left out search field.

We didn’t now we will slice him.

Make a slice like on picture below.

4. Ok. Our header and navigation are sliced. Let’s proceed onto box slicing.

In the content boxes on our site we have to make a place for some text, content.

Make a slice like me.

This way, you can slice all content boxes.

Hope that you managed to get here.

Now I assume that you got the basics of slicing so slice the content box titles

and this will be all of our slicing.

Ok. It’s time to pull this layout into a html file.

Go to - File -> Save for web

Again, click Save button.

Hit Save once again and voila. You got a HTML file!

Congratulations, you’ve sliced your first layout.

In our next part of this tutorial I will explain you how to prepare it for publishing.

Soon to come…

Learning on the net is a time efficient way to continue your education. You can earn your bachelor degree in less time than most traditional schools. Discover all the secrets of stylish design with an online graphic design degree. Just pick the online college you want to attend!

(http://www.tutorials007.com)