PhotoshopForce.com
PhotoshopForce.com home tutorials forums downloads contact-us PhotoshopForce.com
PhotoshopForce.com
Textured Chain Tutorial Complete PC Layout Glossy Content Box Colorful Classy Text Fresh Tutorials:
Last Update: 2.14.2007
Online: 25 Users
Adverts
Advetise on Photoshopforce.com For only $50 per month!
PhotoshopForce.com
PhotoshopForce.com Tutorials Web Layouts Spanable Content Box (Slicing & Coding) i

Spanable Content Box (Slicing & Coding) i

Introduction to Techniques - spanable Content Box (Slicing & Coding) i

In this tutorial l will cover one technique for creating a 100% spanable content box. This is the first stage in understanding how to create an entire web template or layout that is fluid (ie spanable width/height). This will be part one of a multi-stage tutorial that l hope to continue to refine and distribute to designers looking to get into web development. This tutorial will assume you have a basic understanding of basic HTML and have a concept of design already in use. Now if you are already an accomplished slicer and coder you will want to wait until future issues of this multi-stage tutorial are made available, as this will cover the basic techniques for the new comers. There are literally 1,000's of ways to slice and code a layout. However, whichever way you choose, your main focus must be to keep the file size as low as possible, use as few images as possible to save on bandwidth, and load time.

In this tutorial we will be working with a basic content box, that l feel will work nicely for this example:


If you would like to work along with me on this tutorial using the same content box, please see the download pack for a working PSD, as well as a sliced and coded version of our final result. Otherwise create you own content box and follow along.
Download File Download Spanable Content Box (Slicing & Coding) i Source Package

Go To Page: [ 1 2 ]

Page 1 of 2


Step # 1
The trick to slicing a layout no matter how complex or how simple is to break it up into parts, or stages. For instance this content box has three "parts" that we will work on one at a time.
Those three parts are:

  • The Top/Header Area

  • The Center/Content Area

  • The Bottom/Footer Area








  • Step # 2
    So first we'll go ahead and slice these three portions of the content box out and work on them progressively one at a time. You can use photoshop's built in slicing tool, or any third party slicing software. My personal preference is Jasc's slicing tool - as it is very easy to use, save and manipulate down to the pixel. But this is all a matter of personal preference. For some information on using the slicing tool that is packaged with photoshop please see the following links:

    http://slicingguide.com/
    http://www.maxed-virtuals.com/tutorials.php?id=37
    http://megatuts.com/slicing_layouts/step-1.html





    Step # 3
    So after my first slice, here are the three pieces l have:
    Top:


    Center:


    Bottom:


    Remember you'll want to zoom in as close as you can to the image while slicing it, to ensure that you get the best possible slice.




    Step # 4
    So now we're going to work on each of our three pieces one at a time. And there's no reason to make things confusing, so we'll start with the top piece.

    Our header/Top piece is going to have 3 total images used. Two corner's (right and left) and the central piece which will be our section that can span 100% width wise.

    So here l've zoomed in and sliced out these three portions of our header/top piece:


    Now before we begin to code this portion of our content box, there is one more technique we will apply. We are going to create what is known as a "sliver" or "pixel stretch", with the middle of our header piece. What you will want to do is select a 1 pixel wide selection of the central piece that can be stretched out to any width we want, and not lose it's look.




    So here are the three pieces we'll be working with:



    Go To Page: [ 1 2 ]
    Page 1 of 2
    Tutorial Index


    Download File Download Spanable Content Box (Slicing & Coding) i Source Package



    Author: Webmaster
    Website: http://www.photoshoptower.com
    Discuss this tutorial on the PhotoshopForce.com Forums
    Affiliates:
    SENKOURYU.NET Best Photoshop 6.0 - 7.0 - CS - CS2 Tutorials - Max Tutorials LooseMoose52 
Photoshop Guides - quality, hand-picked Adobe Photoshop tutorials added daily. PhotoshopTower.com
    All Affiliates / Your Link Here
    HOME   |   TUTORIALS   |   FORUMS   |   DOWNLOADS   |   CONTACT US
    © 2007 - 2008 www.PhotoshopForce.com Duplication/Redistribution prohibited. Map
    Top of Page