Photoshop Website Design - Slicing

www.pixelfolife.com

This is the last time we will see our template in Photoshop.
In this tutorial we will be slicing up the template so we can begin coding it and turn it into a webpage.

You can see the complete series here:
http://www.pixelforlife.com/website-design-tutorial/

Category:

Howto & Style

Tags:

• photoshop
• tutorial
• pixelforlife
• pfltuts
• website
• design
• game
• site
• call
• of
• duty
• world
• at
• war
• how
• to
• slice
• template

[TechTutorials2010]

how do u go back after the crop tool

[pfltuts]

@TechTutorials2010 Edit > Step back, or you can use the keyboard shortcut: Ctrl+Shift+Z

It's like a super undo, allowing you to step back quite a few times.

[josephamantey]

Really need help with getting the background color sample. I'm using cs4 and it's different. It does not give you the value of the color selected. What should I do? I want to write the value in notepad++. Please help

[pfltuts]

@josephamantey What you can do is this: Save your template as a .jpg and then open that .jpg in Photoshop.. Take your color sample from that image.

[khuram855]

how do you select the text while saving

[pfltuts]

You don't want to slice the text, other than on the navigation bar.

The text you will add when you start coding the website. (see the next tutorials)

[ixingangelo]

hey man i would like to thank you for sharing your talent it really helps a lot and a lot! your my saviour! :P thx a million times

[clayg80]

You are a very creative person. Very knowledgeable at PS, too

[Alucardgo]

m8 ty a lot for your videos they are very helpful at least for me. i have 1 question though. Why do you slice the navigation bar separate and the buttons ? I have seen other videos on youtube where they slice the navigation bar buttons together with the bar.

[MultiSwingLow]

If you want to see some really cool web design stuff,|Wanna see some really awesome web design stuff?} go to ww w. inter kiwi webdevelopers . co m. Some pretty cool stuff site}.

[orion9k]

There is an easier way to slice the design into lots of pieces and let photoshop save all the sliced images to work with in ex. dreamweaver

[vv14]

The video stops loading at 3:48 :(

[mugflub]

You're a master. That would have taken me six days. Thank you so much for the awesome tutorial.

[madhamster]

Header is great, but i think you've spoiled the body a bit with green gradients all the way...

[FIRMESTREETWEAR]

ITS A GOOD TUT ITS JUST THST YOU FORGOT TO MAKE THE MOST IMPORTANT AND DIFFICULT PAGE...''CONTACT US'' PAGE