If you have not finished part 1 yet, go do it now!
Instructions:
1. After you have saved your PSD in Photoshop, exit out and open in Image Ready (yes there are shortcuts, feel free to use them if you know them). Now pull out your slice tool, and right click anywhere in the document. Click divide slice, and divide it into 3 vertical slices, the slices should be just inside the stroke on the white layer:
2. Now on the innermost slice, right click again, and divide it into 4 parts; the banner, the navigation bar, the content area, and the copyright bar (4 horizontal slices):
3. Now click on the slice containing all white. Divide this slice into 3 vertical slices giving a little space between borders:
4. Click on the inner most slice again, and divide it into 3 horizontal slices giving space between header and footer:
5. This step may be a bit different for everyone depending on how many links they have, but hopefully you understand how slicing works now. Click the slice containing you navigation menu, and divide it into the number of links you have +1. Space it so each link has its own slice:
6. This really is enough as far as design goes, but in my opinion, rollovers can add a lot to a website (a rollover makes an image or something change when your cursor scrolls over something). Go into your slice tab, and right click one of your link slices. Click add rollover state:
7. A new layer will appear under it and branch out to the right, this is the state that slice takes when you "roll over" it. Add an outer glow to the links layer in your layers menu. It should change the appearance of your rollover slice, and not your normal slice.
8. Continue to do this to the rest of your link slices until all of them have rollover states with outerglows. Once you are done, your site is ready to be saved. Save your site in a new folder somewhere, and name it "techlayout".


More Tutorials:



