Kreative Flow Designs
Thanks for visiting Kreative Flow. You'll recieve the best tutorials, resources and graphic information here.

Do register if you are a guest for exclusive content only for members!


[Photoshop] Slicing and Saving Your Web Design

View previous topic View next topic Go down

[Photoshop] Slicing and Saving Your Web Design

Post by AxiuM1485 on Fri 08 May 2009, 8:34 am

Slicing and Saving Your Web Design

This tutorial is written for beginners and is just a simple tutorial on how to use the slicing tool to cut your Web Design and save it in .html.

Note: Some of the screen shots are cut off by the fourm, but it's not necessary to see the full image. I've added a link to the images so if they are cut off you can click them to bring up the full view.

Step One

Open your finished Web Design. Here I will just be using a screenshot of this fourm's portal page. As you can see there is not much to it but just the main buttons at top and one box for your contents.




Step Two

Now what you want to do is press [ CTRL+R ] to make your rulers visible if its not already. You can change the measurement of the ruler by right clicking on the ruler and choosing the measurement that you want.

After you get the ruler working you need to section off everything that you want to cut out. For example your buttons should all be their own image. The banner should be its own image. All the content boxes should be their own images as well as all the headers for every content boxes.

In order to section everything off and to make slicing more accurate we will need to make guides. To put guides on your web design just left click the horizontal or vertical ruler ( depending on if you want a horizontal guide or vertical guide ) and drag it to where you want it. After everything is done it should look something like this depending on how you want to section everything off.




Step Three

After all the guides are set, go ahead and pick your slicing tool. If you don't know where it is here's a screen shot of where to look.



Its the fifth tool from the top. I'm using CS4. If you see the crop tool, you'll have to right click the crop tool and hold your mouse there till more tools pop-up then pick your slice tool.

Since everything has guides all you need to do is take the slice tool and draw use it as a Rectagular Marquee and just select everythign you want to be cut out one by one. The slice tool should snap to the guides making it a precise cut. Granted your guides are lined up precisely the way you wanted it. Here's what I got after this step.



NOTE: The numbers one the top left of every square is the slice number. So when you save the file for the web, Photoshop will automatically name every slice with its slice number so it'll be easier to reference and add your contents to the .html file.

Step Four

After everything is sliced up and you like how it looks. Go to File>Save For Web and Devices. Here's a screen shot if you're not sure how to get there.



Now you'll be greeted with a screen like this:



I'm not going to go into detail what every option is. I myself am not sure what all the options do but all that you really need to know is what's highlighted in orange. You can select the type of image format you want to save your sliced up images as. After that you can click on the "Preview" button to see if everything looks ok in your web browser. After that click "Save" if your happy.

You should then see your typical save screen:



Find where you want to save it. I'd recommend making a new folder called "WEB SITE NAME" so it'll be more organized.

You will want to change the "Save as type:" to "HTML and Images". Click "Save" and photoshop will automatically create an "Image" folder and store all the sliced images in there and will create a .html file and save it in the root folder for you.

There you have it simple and easy. All you have to do now is open up the .html file in Notebook or a html editor of your choice and add your contents. Happy designing.

AxiuM1485
Top Poster
Top Poster

Number of posts : 769
Flow Points : 1524
Reputation : 17
Warnings :
0 / 1000 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Adil on Fri 08 May 2009, 9:53 am

Awesome Tutorial! Smile I'll make this a sticky in the webdesign section too Smile Too many slices though.

Note: When web-designing make the slices as few and as effecient you can, it helps trust me.

Nice one!

_________________
Three R's. Read all forum rules. Respect all members, Report all problems!



avatar
Adil
Founder
Founder

Number of posts : 2488
Flow Points : 3875
Reputation : 43
Warnings :
0 / 1000 / 100

Mood :

View user profile http://www.kreativeflow.net

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by tommo on Fri 08 May 2009, 11:04 am

thanks for the interesting tuturial
avatar
tommo
Adv. Member
Adv. Member

Number of posts : 260
Flow Points : 155
Reputation : 9
Warnings :
25 / 10025 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by AxiuM1485 on Fri 08 May 2009, 1:28 pm

Adil wrote:Awesome Tutorial! Smile I'll make this a sticky in the webdesign section too Smile Too many slices though.

Note: When web-designing make the slices as few and as effecient you can, it helps trust me.

Nice one!

lol I haven't made a website in ages. I remeber when I first started to design I made a few. But I was never really good with coding etc. Just thought i'd share how to do the slicing in Photoshop since I know how to. This way member would have a basic idea of how to use the slicing tool. Smile

AxiuM1485
Top Poster
Top Poster

Number of posts : 769
Flow Points : 1524
Reputation : 17
Warnings :
0 / 1000 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Keitho on Wed 13 May 2009, 4:45 am

Thanks for this tutorial! Its really cool and helpful! thanks !

Keitho
Banned

Number of posts : 254
Flow Points : 519
Reputation : 4
Warnings :
0 / 1000 / 100

Mood :

View user profile http://www.keiths-webpage.comuv.com

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by erione on Wed 13 May 2009, 7:35 am

Great tut. Finally, coding is now my only problem.

_________________
| Universal.Rules |
A motto never lives up to it's principle when your not guided enough in life.
Yet, a simple smile is destructive enough to change ones view.



avatar
erione
Global Moderator
Global Moderator

Number of posts : 1285
Flow Points : 2110
Reputation : 21
Warnings :
0 / 1000 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Keitho on Wed 13 May 2009, 7:58 am

Same with me, but if i learn that too, il soon post my own tutorial Very Happy

Keitho
Banned

Number of posts : 254
Flow Points : 519
Reputation : 4
Warnings :
0 / 1000 / 100

Mood :

View user profile http://www.keiths-webpage.comuv.com

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Xx Navek xX on Wed 20 May 2009, 11:16 am

wow... looks very good tbh... shame i didnt realy get much of that and still dont know how to do it... thanks though Smile

Xx Navek xX
New Member
New Member

Number of posts : 1
Flow Points : 2
Reputation : 0
Warnings :
0 / 1000 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Adil on Wed 20 May 2009, 11:22 am

Hopefully Ill do a nice tutorial on coding in dreamweaver Wink

_________________
Three R's. Read all forum rules. Respect all members, Report all problems!



avatar
Adil
Founder
Founder

Number of posts : 2488
Flow Points : 3875
Reputation : 43
Warnings :
0 / 1000 / 100

Mood :

View user profile http://www.kreativeflow.net

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by AxiuM1485 on Thu 21 May 2009, 9:09 am

Xx Navek xX wrote:wow... looks very good tbh... shame i didnt realy get much of that and still dont know how to do it... thanks though Smile

Sorry you didn't get much of it Sad But, if you have any questions feel free to ask Smile.

AxiuM1485
Top Poster
Top Poster

Number of posts : 769
Flow Points : 1524
Reputation : 17
Warnings :
0 / 1000 / 100

Mood :

View user profile

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by finnianm on Thu 21 May 2009, 9:11 am

Good tut +rep!

_________________
Lead Designer-VIP Resource Manager-Member Resource Manager
PORTFOLIO TEMPORARILLY DOWN
I crit Small Pieces, Large Pieces, and focus in abstracts. I do not crit Photography, or animation.

From Imastarfish!
Battles: 3W 0L
avatar
finnianm
Graphics Leader
Graphics Leader

Number of posts : 1334
Flow Points : 2765
Reputation : 78
Warnings :
0 / 1000 / 100

Mood :

View user profile http://www.finnianm.com

Back to top Go down

Re: [Photoshop] Slicing and Saving Your Web Design

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum