From Photoshop to Dreamweaver

Posted on 07. Feb, 2008 by tutorials007 in Archive, Photoshop Tutorials

slicing250x100.gif

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.


[ad#ga]
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.

slicing_1.gif

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.

slicing_2.gif

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.

slicing_3.gif

Ok? You get it so far?
Now, slice all your navigation buttons. And a GO search button.

slicing_4.gif

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.

slicing_5.gif

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.

slicing_6.gif

This way, you can slice all content boxes.

slicing_72.gif
[ad#ga]
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.

slicing_8.gif

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.

18 Responses to “From Photoshop to Dreamweaver”

  1. Jelmer

    11. Feb, 2008

    Greate! Hope to see next part soon, tháts what i need to know…

  2. iNFECTED

    19. Feb, 2008

    Very useful for first-timers.
    The hard part is however, how to fill the stuff without the site breaking the tables.

    Looking forward to your next part :]

  3. Jan

    20. Feb, 2008

    Hey Tutorial007, are you going to set it up in tables? or divs? because if you use div’s you do not really need all your slices…

    Basic but good tutorial every future web developer should read.

  4. Josh

    04. Mar, 2008

    Great tutorial. Has the publishing tutorial been made yet?

  5. Peter

    09. Mar, 2008

    Great Tutorial, please publish the next part so I can get my website done. Thanks

  6. misterbremer

    14. Mar, 2008

    I have been looking for something exactly like this! I know how to photoshop, but don’t know how to convert my design to the web. Please publish the next tutorial soon!
    Thanks a lot!

  7. Shinora

    31. Mar, 2008

    Thanks!
    It really helped, though I need the next part the most..
    Is it already made or still in Progress?

    Please submit it then :)

  8. Kith

    02. Apr, 2008

    Thanks a lot buddy. Hope to see the next part soon.

  9. Smally

    06. Apr, 2008

    yea, it’s good and all, but what about for Paint Shop Pro? Is it the same principle?

  10. BilderKing

    12. Jun, 2008

    Thanks! But pix a to small!

  11. pLc'

    18. Jul, 2008

    uhmm,, when I sliced it all and saved as a html.. but when I open it the quality even when I set it to 100, even then it’s very pixelerate not smooth or something.. please help me <sorry for my bad english, I’m dutch

  12. Erwin

    18. Jul, 2008

    hello, this tut. is really nice. but i got stucked at the quality of when I saved it to html, because when i saved it to html with 100 quality and im opening it then it is all very pixelerate. Please help me Greetz erwin

  13. Rock Khan

    04. Aug, 2008

    Hi,

    Nice tutorial on slicing, I am gonna learn it from it.

    Where is the next part?

  14. Sid

    16. Sep, 2008

    Great tutorial thanks =)

  15. bernadette

    22. Nov, 2008

    Hi,

    Thank you very much for this. It was soo easy and exiting. When are we going to get the next tutorial. Best wishes

  16. Photoshop Image Slicing « Graeme Wicksted Development

    11. Jan, 2009

    [...] http://www.tutorials007.com/from-photoshop-to-dreamweaver/ [...]

  17. Balino

    15. Jul, 2009

    Howdy, cheers for this great tutorial. The tutorial helped me improving my skills badly. It’s ever awesome to get some newly inspiration and I hope to find more of such articles here the next time because no one will ever stop learning new stuff. Go ahead

  18. sphere

    18. Aug, 2009

    I did not know that I could use such resourcesone these sites until I read your post.

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes