Posted on Thursday, 7th February 2008 by tutorials007
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!
Posted in Archive | Comments (16)
February 11th, 2008 at 6:18 pm
Greate! Hope to see next part soon, tháts what i need to know…
February 19th, 2008 at 1:47 pm
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 :]
February 20th, 2008 at 2:43 am
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.
March 4th, 2008 at 1:13 am
Great tutorial. Has the publishing tutorial been made yet?
March 9th, 2008 at 2:24 pm
Great Tutorial, please publish the next part so I can get my website done. Thanks
March 14th, 2008 at 3:16 pm
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!
March 31st, 2008 at 10:26 pm
Thanks!
It really helped, though I need the next part the most..
Is it already made or still in Progress?
Please submit it then
April 2nd, 2008 at 6:21 am
Thanks a lot buddy. Hope to see the next part soon.
April 6th, 2008 at 4:03 am
yea, it’s good and all, but what about for Paint Shop Pro? Is it the same principle?
June 12th, 2008 at 10:01 pm
Thanks! But pix a to small!
July 18th, 2008 at 6:52 pm
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
July 18th, 2008 at 6:57 pm
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
August 4th, 2008 at 3:44 am
Hi,
Nice tutorial on slicing, I am gonna learn it from it.
Where is the next part?
September 16th, 2008 at 4:20 pm
Great tutorial thanks =)
November 22nd, 2008 at 8:22 pm
Hi,
Thank you very much for this. It was soo easy and exiting. When are we going to get the next tutorial. Best wishes
January 11th, 2009 at 1:13 am
[...] http://www.tutorials007.com/from-photoshop-to-dreamweaver/ [...]