Notice: Undefined index: ORIG_PATH_INFO.
1   IN FILE   "/home/webdevinfo/public_html/include/Url.class.php"   ON LINE   61
2   IN FILE   "/home/webdevinfo/public_html/include/ConfigPublic.inc.php"   ON LINE   13
3   IN FILE   "/home/webdevinfo/public_html/article.php"   ON LINE   3

There's More Than One Way to Skin a Site....
Home Login Registration Authors Contact Us About Us Subscribe
Want to receive new articles via e-mail? Click here!
: Home  :: Web Programming  :: HTML
There's More Than One Way to Skin a Site....
by Webdevinfo - Webmaster
Views: 514
Votes: none
Rating: 0.00
Synopsis:
Here's a very basic introduction on how to export a Photoshop file as an HTML page. As the title suggests, this is not the definitive way of doing it. In fact, the example I've used is probably not the best layout, but it will help me to demonstrate a couple of tricks of the trade that you might not think of trying.
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Page:  1 | 2 |  Next >  Last
The Article

Here's a very basic introduction on how to export a Photoshop file as an HTML page. As the title suggests, this is not the definitive way of doing it. In fact, the example I've used is probably not the best layout, but it will help me to demonstrate a couple of tricks of the trade that you might not think of trying.

These are the steps that I will be discussing:

  • Designing the Layout
  • Preparing to Slice
  • Slicing (3 Ways)
  • What to do with Those Slices
  • Optimizing Images
  • HTML Formatting

Designing the Layout

If you don't already have your mockup designed, it sometimes helps to sketch it out on paper first to determine where to put all of your main elements - like your navigation menu, blocks of content, form elements, etc.  Make sure that if your entry page is different than other pages, that you also sketch these out with some sort of reference to show how the user will navigate through them. This is known as flowcharting and will definitely help with those big, complicated sites that have many different uses.

Start with a new PSD file. I often design at a width of 600 (by a height of 480) to account for the 20-40 pixel discrepancy that you get from the scrollbar.  I know more people use a higher monitor resolution, but you should always keep those on older systems in mind.  They also happen to get the angriest when things don't display properly.  Otherwise, you can do 800x600 or 1024x768 but I wouldn't go much higher. If you get good at this, you can design your layout to be scalable across multiple resolutions.

As an example, here is a recent mockup that I never used, with some modifications.



Preparing to Slice

When designing your site, block out all of your main page elements and measure them with your guides and rulers turned on.  It's not totally necessary to do so; but if you're a control freak like me, you want to know how big to make things and exactly where to put them.  You will be using guides to slice your design, anyway; so it's a good idea to measure while you're building it. Remember to take into account sizes for ads and those large banners, if you're using them.  The form elements and text can be added as placeholders; although that you can use the text and convert it to HTML, which I will show later.

If you haven't merged your layers by now this would be the time to do so - unless you want to do rollovers, in which case, keep the layers for creating rollover states.  It's really only necessary to merge if you have used any layer effects like drop shadows and bevelling to avoid any distortion when cropping.  Another way to do it would be to rasterize these layers in your layer window options. So if you have your PSD mockup looking absolutely the way you want it, go to Layer » Merge Visible.  This way, if your rollover layers are hidden, they will still be preserved and only the visible layers are flattened.

Slicing & What to do with Those Slices

Slicing (Three Ways)

The slicing process is different for everyone.  Some people prefer Fireworks; but for this tutorial, I'm sticking with Photoshop and Image Ready. Fireworks performs similarly to Image Ready and is pretty easy to learn. One of the simplest ways to slice that I've heard was, while in Photoshop, select and copy the area marked out in guides to be exported, and paste into a new file (Ctrl N), go to File » Save for Web (Alt+Shft+Ctrl+S).  And then do your optimizing in the subsequent dialogue. Again, your PSD will need to be flat to copy all layers.

Otherwise, you can crop the slice, File » Save for Web then optimize; then File » Revert back to the full sized mockup. And continue on until you are done exporting your graphics.

Still, if you want to save yourself a lot of time and you have a version of Photoshop that includes Image Ready, then you can optimize your graphics in the mockup and export the whole page using Image Ready. 

To switch from Photoshop to Image Ready, click this icon  at the bottom of your tool bar and when the program has loaded with your file, go to Slices » Create Slices from Guides.


What to do with Those Slices

At this point you will find there are slices in the places where you don't need graphics.  To select them, use this slice select tool  from the tool bar and, in the Slice window, change Type to "No Image" where you would otherwise have text or nested tables. Then you can enter the text or HTML for this area, otherwise an external image (in HTML) or even a server-side include.

Now, if you want a more ambitious layout with complex tables, you may have to combine slices to achieve this.  But if you're new at this, try not to be too ambitious or you'll be pulling your hair out-and I speak from experience. To combine slices, hold Shift and click on the slices, and then go to Slices » Combine Slices.  In the Slice window under Image, you can name your images, choose a background for transparency, and assign a URL and target. If you're using the slice for a rollover, it must have a name. Otherwise, Image Ready does it for you; and names each slice based on the PSD filename.

Incidentally, for rollovers, you click on the Rollover tab, then this icon  at the bottom, to create a new frame for your rollover. Here's basically what the rollover states mean:

Normal: The first is the image, as it would normally appear.
Over: The mouse cursor is over the button and the image changes in some way.
Down: The mouse button is being pushed down.
Click: Mouse button is clicked and a related event is called (opens new page, etc.)
Out: This is usually the same as "normal" -the mouseover has not occurred, or mouse has left the active area.
Up: Usually the same as "Over," only after mouse button is clicked and the cursor is still over the active area.

You don't need all of these but you must have a minimum of 2 to make your rollover work. A lot of designers would prefer to use their own code; in which case, this is still a quick way to optimize and export those rollover graphics.

Page:  1 | 2 |  Next >  Last
Rate this article  Print this article  Email this article  View this article in PDF  Discuss this article
Similar/related articles:
Advanced Search
Site Search:


FirstWebHosting
Top Ten Hosts as picked by our editors - with reviews and interviews.
The Host Planet
Web hosting reviews and ratings. Learn how to spot a great host.
Hosts2002
The first and greatest hosting directory with the consumer in mind.
Hostcue.com
Hosting directory for the masses with special offers Check us out!
WebDevForums
Web developers or all levels discuss the details of design and ecommerce.
Needscripts.com
Free scripts and applications for web developers.