Tutorial9 Community Forum
Not signed in (Sign In)
Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Graphic Design Support: Tut Req: Turning a Jpg Layout Into an Actuall Website

Bottom of Page

1 to 5 of 5

  1. Benita Jul 21st 2008
     Report Post
    Hey all, first of all let me say im a big fan of this communtiy since the earlier days of cobra.
    id like to request a tut regarding what i decribed in the Title.
    This is what i got:
    http://img360.imageshack.us/img360/3131/ezpastecopytj5.jpg
    id like to get a tut on how to take it (or any other layout) and turn it into a website (i have acces to DW if needed)
    Let me start and say i have a very basic knowledge of HTML and mostly none in any othe programming language.
    And if u could offer any tips regarding the layout it will be most welcome.
    BTW: English is not my native language so im sorry for any spelling or grammer mistakes...
  2. stacye Jul 21st 2008
     Report Post
    It's a little detailed to go into, but I can get you in the right direction if you want to play around with it.

    In Photoshop (I think as early as PS7), there is a button at the bottom of the Tools bar that is called Edit In Image Ready. If you can't find the button, then open your PSD file in Image Ready.

    Grab the Slice Tool, and start cutting it up (Click & Drag). Draw boxes around anywhere content is going to be. Draw boxes around the top buttons, and in the main area where content is gonna go. You can create hovers via the Web Content menu (Click on the slice you want to make hoverable, and then click the Create RollOver state icon [looks like the new layer icon in PS]).

    A tip: Cut a big square for the main area of your page. When you save your Image Ready File (Click FILE > SAVE OPTIMIZED AS), edit it in DW. Make a note of the color of your main area. Delete that big image in DW, and set the TD background as the color you had it in PS.

    That's all I have for now.. If I have enough time I'll make a more detailed tutorial for you. In the mean time, check out the How To section of ImageReady.

    Happy slicing :)
  3. Benita Jul 21st 2008
     Report Post
    Thx allot, ill go at it as soon as i find the time!.

    Looking fw for ur tut and thx again for the reply and espacially how fast u posted it!
  4. stacye Jul 21st 2008
     Report Post
    I was able to find a thorough video tutorial for this. It's a 3 part tutorial to get your site up and running.

    Part 1
    Part 2
    Part 3
  5. MikeWilson Jul 21st 2008
     Report Post
    There is actually a really great and comprehensive guide brought to you by the owner of Pixel2life.com

    Dan took a lot of time with this tutorial and I suggest it to fully understand this workflow.

    http://www.slicingguide.com/

1 to 5 of 5