Slicing a layout
You've probably read the first part of this tutorial. Now that you have your design, you will have to save it and slice it, right?
You will have to show the rulers. Go to [ View > Rulers ] (Ctrl + R)
Take the move tool (V) 
click on the top ruler and drag the guide to your layout. In the screenshot, the guide is the red line. It's red there, but it can be blue, green or whatever in your Photoshop, depending on your configuration. Well, repeat this step and divide your layout. (See the second screenshot)
Here is a little explanation for the numbers:
- 01 to 06: layout images.
- 07: this is where your contents will be.
- 08: this is your menu
- 09 to 12: layout images.
- 13 to 16: this is the background, in fact, I will merge all these into one picture.
You may have noticed it, I haven't numbered some cells at the right. It's because I will merge them.
Well, now, take the slice tool (K) 
and click on "slices from guides".
You will have to edit those slices. Take the Slice select tool 
. You will have to delete the following slices: #17, #18, #19, #20. (See second screenshot animation.) Then, click on slice #16 and enlarge it. (See third screenshot.)
Okay, it's ready to be saved. Go to [ File > Save for Web ] (Alt + Shift + Ctrl + S). A window will pop up. Select the entire layout.
Put those settings...(click the screenshot to enlarge).
Click on the blue arrow 
and select Edit Output Settings. Another window will pop up. There's a drop down menu and it's written "HTML", I will skip this, click on it and select "Saving Files". If you know how to use it, feel free to set it up yourself but I advise you to do it like that:
Then, press OK and in the previous window, press SAVE. A window will pop up, choose the directory where you want to save your files and press SAVE.
Ookaay! Now, check in your directory, the files should be there! ;) You can delete the HTML page generated by Photoshop. Here is what your folder should look like:
Unfortunately, it's not over, that's the problem when we use patterns... We have to "fix" some graphics. Open 08.jpg. Take the move tool (V) again and make guides. Take the slice tool (K) and click on "slices from guides".
Return to [ File > Save for Web ] (Alt + Shift + Ctrl + S). Do the same thing as before, but in the Saving Files settings, put the same values as the screenshot.
Save it in your images directory. You should now have a.jpg, b.jpg, ... i.jpg! You can delete 08.jpg or keep it.
Now, open 16.jpg. It's the background, it will repeat, if you want it to show up correctly, take the selection tool (M) 
and select a part as below.
Go to [ Image > Crop ] and save (Ctrl + S).
Open 04.jpg, take the selection tool (M) and select it like me. Go to [ Image > Crop ] Go to [ File > Save as ] (Shift + Ctrl + S) and save it as 05.jpg, replace the current one.
Open 14.jpg, take the selection tool (M) and select it like me. Go to [ Image > Crop ] Go to [ File > Save as ] (Shift + Ctrl + S) and save it as 15.jpg, replace the current one.
God, it's finally over! :D Now, you can read the next part about coding! :)
(attn) I have removed that next part because it's really out of date, sorry!
Related Posts
Sponsors
Leave a Comment
Works? Doesn't work? Other tips? Please leave a comment! :)