• Categories

  • Pages

  • Tags

  • Archives

  • Meta

  • Slice and Export a Website Layout + HTML: Photoshop Tutorial!

    Posted by admin on November 6th, 2009 and filed under web page templates | 25 Comments »

    Check this video out at Hi-Res here: http://www.tutvid.com/tutorials/photoshop/tutorials/slicingALayout.php

    Welcome to this video tutorial! We will learn how to take a Photoshop created web page layout template and slice it into individual pieces and then export it with an HTML file. We will cover user slices, layer based slices, auto slices, naming slices, assigning links to slices, alternate text for slices, creating multiple slices at one time, previewing our file in a web browser, saving individual slices as gifs or jpgs from the same document, and exporting a fully functional HTML file to go along with all of it. Please enjoy and don’t forget to check out the site http://www.tutvid.com

    Duration : 0:21:4


    Technorati Tags: , , , , , , , , , , , , , ,

    25 Responses

    1. Vannius6 Says:

      ey man thx for this …
      ey man thx for this upload you saved a school project of mine. You get an epic thumb up with a fat wink dude.

    2. y2kglamorpuss14 Says:

      briiliant video …
      briiliant video tutorial! thanks :)

    3. babes0098 Says:

      what confuses me is …
      what confuses me is… i can design my own layout outline simple as drawing it in adobephotoshop and slicing it after, but after that, i dont know what to do anymore, adding tables where i can jot down texts, formats,colors, dont know how to use them right. *sigh*

    4. Tomahome77 Says:

      thanks man :D
      thanks man :D

    5. Remiss63 Says:

      Is there a table vs …
      Is there a table vs. div issue in Photoshop?

    6. binnsyboy123 Says:

      ThankYou so much …
      ThankYou so much for all of your Tutorials, every one of them has taught me something even things than what im particularly looking for. You are the best tut maker on youtube. Please keep it up!

    7. synbin24 Says:

      ill prob be buying …
      ill prob be buying a subscription soon, you are the best tut instructor ive come accross

    8. wainanaz Says:

      very helpful. thanks
      very helpful. thanks

    9. paneerchamp Says:

      very helpful, will …
      very helpful, will defo try this out!
      Question:
      What if I am making a site that has”
      1. a login
      2. search function
      how would i incorporate that and code it?

      thanks!

    10. Dorvalla1912 Says:

      Thank you for this …
      Thank you for this tutorial, it helped me allot

    11. LordMordrag Says:

      thanks, that was …
      thanks, that was the best tutorial that i have seen about slicing and exporting the photoshop images to web, and very well explained too :) keep up the good work… :) )

    12. AndreBlackScribe Says:

      He uses the table …
      He uses the table to optimize speed but if you´r not a experienced html programmer I recommend that when you save the page (after u have done the slices) to save for web and devises (File > Save for Web & Devices…). This will automatically create a web page that uses divisions (div) instead of tables .

    13. phoenixheffa Says:

      oh god. my head is …
      oh god. my head is gonna explode, i HATE exporting and naming shit.

    14. selecto16 Says:

      The main problem …
      The main problem with this method is that photshop creates HTML tables for the purpose of the design, which is today completely out of date.

      Anyone using this tut should change the HML from TABLES to DIVs

    15. Zorlok77 Says:

      I have same problem
      I have same problem

    16. Shoryuken12345 Says:

      This was great but …
      This was great but when i try to make a table in the content box for content it moves some of my slices :( !

      Any help?

    17. stockman01 Says:

      very good tutorial, …
      very good tutorial, thanks!

    18. tolga1975 Says:

      Thanks:)….
      Thanks:)….

    19. Mindsore Says:

      Thank you very much …
      Thank you very much, this is exactly what I have been looking for.

    20. nuclearboomb Says:

      Try to find on …
      Try to find on youtube

      ” HOW to MAKE/FREE WEBSITE ”

      Very easy and simple

    21. SashaM Says:

      thank you so much. …
      thank you so much. this was a huge help.

    22. funnyboy0706 Says:

      Thanks man…. I …
      Thanks man…. I learnt a lot from you……

    23. FlixFilm Says:

      Is it not possible …
      Is it not possible to just convert to DIV after using the modify/convert/tables to AP Divs. Was having problems lining up in FireFox but after I converted it worked fine…….or is that a cheat

    24. JordanWadeDotNet Says:

      Well here’s the …
      Well here’s the problem with that – tables may not be exactly for design, but, they are a of a lot easier to use than DIV. I personally don’t use tables, but I have messed around with them. They are good if you know how to use them. Some people can pull it off. I do agree with you though. They are more for organizing than they are for designing.

    25. bjarkeml Says:

      Don’t use tables – …
      Don’t use tables – it’s not for design! Use DIV!

    Leave a Comment

    Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

    radiowerbung pirmasens wow enchanting guide spyware blockers WoW Warlock Guide laptop computers colour laser printer Violin Tutorial laser printer