Photoshop Website Design – Slicing

14 04 2011

http://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
Video Rating: 4 / 5

Advertisements

Actions

Information

20 responses

14 04 2011
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.

14 04 2011
DannyDjelep

Omg so helpfull!!! thank you very much dude u are awesome! could u put something like previous and next video buttons on youtube so we can easily follow you and not searching them (i know im a little bit lazy :P)

14 04 2011
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}.

14 04 2011
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

14 04 2011
vv14

The video stops loading at 3:48 😦

14 04 2011
mugflub

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

14 04 2011
madhamster

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

14 04 2011
FIRMESTREETWEAR

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

14 04 2011
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.

14 04 2011
TechTutorials2010

how do u go back after the crop tool

14 04 2011
nlRobertnl

i’m having trouble with the size of the webpage if i open it on Internet explorer then the right size of the page is white like 25% of it how can i fix this even 1024 x 768 itsn’t big enough it could be the size of mij screen but i doubt that cause on my laptop its the same please help me…

14 04 2011
josephamantey

@pfltuts Thanks a million.

14 04 2011
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.

14 04 2011
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

14 04 2011
RueLeonheart

Why wont you use the slice tool instead?

14 04 2011
sumner246

Hold down shift and click on each one.

14 04 2011
BrennMonster

good tut

14 04 2011
khuram855

ok thanks

14 04 2011
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)

14 04 2011
khuram855

how do you select the text while saving




%d bloggers like this: