From Photoshop to Dreamweaver

Hi everyone, This is another one of my tutorials, Just for AK pro.

Firstly, you will need the website you are going to slice and make into a HTML template. I made a stupidly easy one, just as an example. This tutorial is GREAT with the extreme templates :)

image 1

Ok now we have designed our website... Now we need to transfer this into ImageReady. You can use the shortcut on the tools bar or use the shortcut, Shift + Control + M - or just load the PSD in imageready.

image 2

Ok now we should be in imageready with our new website. To start making the website, we need to slice our template. So grab the slicing tool and just mark out what buttons (EACH ON THEIR OWN) and etc we are going to want in different images. Remember to make the content box another slice.

image 3

Roll-over not needed, optional

Now, move over to your Slices tab/window (Web Content). This one just shows which bits you have sliced. First up we will make one of our buttons a ROLL OVER!

This process is simple. Right click on the layer you want to rollover, right click and do ' Add Roll over state. '

image 4

After You have made a rollover state, Click on the ' Over ' state - then All you need to do is change whatever you want it to rollover to. for example, If i wanted the yellow dot to turn blue, I'd click Over - then find which layer that dot is on, Recolour it to blue, then thats it.

Do this for all layers you want rollovers on.

image 5

If you skipped rollover buttons, continue here

Ok, now you have your new website pretty much done. All the rollovers are done and your slices are complete. Now, how are we going to make it a website? Simple.

image 6

Open the .html File in DreamWeaver or your faveourite HTML editor.

Thank you for you time.


Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > HTMLCSS > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction