SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Addict
    Join Date
    Sep 2000
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I just created the front page of my website in Photoshop, now im ready to cut up the images so they can be inserted into tables. I've learned that Slicing in ImageReady is a strong way to do this.

    Does anyone have advice about this process, or recommendations for Slicing?

    Thanks

  2. #2
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just crop out the pieces in photoshop. I make each a new image, check the height and width of each, and make my table. It takes me all of 5 minutes.

    Chris

  3. #3
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This thread has been moved to a more appropriate forum.
    Wayne Luke
    ------------


  4. #4
    SitePoint Wizard big_al's Avatar
    Join Date
    May 2000
    Location
    Victoria, Australia
    Posts
    1,661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok if you have photoshop it comes with a neat little program called ImageReady, it slices and dices, but wait theres still more!!!....hehehe

    It also allows for rollovers, and alittle bit of animating
    and did i mention that it was a great little optimizer and to top it all of it integrates seamlessly with photoshop

    Gees I sound like a salesman....hehehe


    hope Ihave been of some help.

  5. #5
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have ImageReady, I would definatley reccomend using the slice function to automatically create tables. It write a clean code and also has the option to 'update HTML' if you make changes.

    The trick is: after the code is written you need to decide which images can be replaced with backgrounds of the cell property. Don't forget to put a single space so Netscape doesn't realign it.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  6. #6
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok if you have photoshop it comes with a neat little program called ImageReady
    I've got Photoshop 5.0 and I've never heard of this. Is it in 5.5?

    Chris

  7. #7
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by aspen
    Ok if you have photoshop it comes with a neat little program called ImageReady
    I've got Photoshop 5.0 and I've never heard of this. Is it in 5.5?

    Chris
    ImageReady is included with Photoshop 5.5 and as a separate package.
    Wayne Luke
    ------------


  8. #8
    SitePoint Member
    Join Date
    Mar 2000
    Location
    NY, USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now with PhotoShop 6.0 you can do slicing right inside Photoshop, with the need to work with Image Ready...
    Get PhotoShop 6.0 Now!!!

  9. #9
    will code HTML for food Michel V's Avatar
    Join Date
    Sep 2000
    Location
    Corsica
    Posts
    552
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Images as background of cells ?
    It's not supported in 3.0 browsers, as far as i know (which is not far at all, just the corner of the street)...

    Ain't there a way to put IMG tags into TD ? Yesterday that made a blank line between TDs in my netscape, and today when i switched the computer on and tested again, on the same page, on the same netscape, blank lines disappeared... isn't that weird ?
    [blogger: zengun] [blogware contributor: wordpress]

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2000
    Location
    Toronto
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by westmich

    The trick is: after the code is written you need to decide which images can be replaced with backgrounds of the cell property. Don't forget to put a single space so Netscape doesn't realign it.
    Can someone elaborate on this more clearly or direct me to a site that does. I would love to learn how to do this.

    Thanks

    BQ

  11. #11
    SitePoint Member
    Join Date
    Oct 2000
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want to mess with the manual "slicing and dicing" process, check out Photowebber. It opens layered Photoshop files and creates web graphics and HTML for a finished web page all in one step.

    You can choose between style sheet and table layout. If you choose style sheets, each Photoshop layer becomes a DHTML layer.

    If you choose tables, PhotoWebber uses the information in the Photoshop file about the size and location of each layer to automatically create the table cells for you.

    You can check it out and download a free trial version at http://www.photowebber.com


  12. #12
    I'm baaaaaaaaaaaaack! Fluffykins's Avatar
    Join Date
    Aug 2000
    Location
    Manchester, UK
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kinda veering off track a bit but:

    Have you ever designed an entire page layout in a graphics package (Fireworks 3 in my case)?

    For example my work in progress at: http://www.steptacular.karoo.net/poplicious/index2.htm.

    The who page layout was created in Fireworks as an image (anyone who wants the original PNG is welcome to it) and exported as a series of slices, then in the larger two cells (one for the body and one for menu) I deleted the image slice and used that same image as the cell background, so you could type over it and it'll replicate and extend the table as the contents went furher down.

    Has anyone else used this technique to build a page? What do you think of it? I'm after writing a tutorial on it, maybe even to submit to Sitepoint (and guarantee myself fame and glory ) so could do with some other examples of it's use.

    Cheers.

    Ady
    v-technologies - Freelance Goodness.

  13. #13
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tend to do a mockup in Illustrator of the basic shapes and layout, then I import it into Photoshop to apply any effects.

    I think that this method works for me but it is not one I recommend for anyone who has not got extensive experience with HTML. The reason being is that I used to work for a multimedia company who used this method. The graphic designers used to mock up like this and then pass the Photoshop files over to me. However, as they did not understand the limitaitons of the WEB they used to get really angry when their design did not look the same in the web page as it did in Photoshop. The design a web page in a graphics pakcage, you need to understand what will and will not work when it is transposed onto the WEB, otherwise you end up with a web page that is made up of one huge image and takes an eternity to download.

  14. #14
    SitePoint Member
    Join Date
    Oct 2000
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We have many customers who are doing just that - designing entire sites in Photoshop (or Paintshop Pro or other program that can save in Photoshop format).

    If anyone is interested in looking at the Photoshop source files and finished sites, we have links to a few samples at http://www.photowebber.com/samplepage.html.

    Both or our sites -- http://www.medialab.com and http://www.photowebber.com -- were also designed entirely in Photoshop. The pages were built in PhotoWebber and the additional content material that could not be created in Photoshop (the forms and large text pages) was added in Dreamweaver.

  15. #15
    SitePoint Enthusiast Andysan's Avatar
    Join Date
    Jul 2000
    Location
    pudsey - leeds - westy-england
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use photshp when designing web sites, but you need to take into account certain things dont work well,gradients ect, you should really get fireworks if your serious about web design using photoshop, i layer my documents including rollovers ect in new layers, when youtake this into fireworks you can do your slice rollovers ect in one document and export with an hmtl page all ready. fireworks is top because you specifi different export setting for the same document ie jpegs for pic gif, for other ie txt graphics. it also seems better at compresing images.

    Andysan
    Andysan :-)
    "do not despise the snake for having no horns for who is to say it will not become a wise dragon"

  16. #16
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems like it would be a good practice in a team environment. The graphic designers could design the visual layout. The designers then send the Photoshop file to the Web developers to be sliced and optimized.

    IMHO, you need a programmer/developer to tweak the code. Simply using the 'save as HTML' and then exporting to the Web is less then effective. Many slices could be used as background images or replaced background colors.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  17. #17
    SitePoint Member
    Join Date
    Oct 2000
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not to harp, but PhotoWebber automatically converts solid rectangular areas to "Color Areas" - either table cell or DHTML layer background colors, depending on the type of HTML you've chosen.

    And if there the bottom most layer is called "Background" and is a solid color, PhotoWebber converts this automatically to the page background color. In both of these cases, if the color is not "web safe", a prompt pops up allowing you to change it to the closest web safe color.

    PhotoWebber was created to address all of the concerns that I see being voiced here.


  18. #18
    SitePoint Wizard westmich's Avatar
    Join Date
    Mar 2000
    Location
    Muskegon, MI
    Posts
    2,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Druchunas
    Not to harp, but PhotoWebber automatically converts solid rectangular areas to "Color Areas" - either table cell or DHTML layer background colors, depending on the type of HTML you've chosen.

    And if there the bottom most layer is called "Background" and is a solid color, PhotoWebber converts this automatically to the page background color. In both of these cases, if the color is not "web safe", a prompt pops up allowing you to change it to the closest web safe color.

    PhotoWebber was created to address all of the concerns that I see being voiced here.

    This all may be true although I'm not familiar with PhotoWebber. However, one thing I've learned as my programming skills have developed is not to completely trust ANY program that automatically write HTML code. You will still need to tweak code, add comments, and make any other appropriate changes.
    Westmich
    Smart Web Solutions for Smart Clients
    http://www.mindscapecreative.com

  19. #19
    SitePoint Addict
    Join Date
    Feb 2000
    Location
    District of Columbia
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I design the layout in Photoshop, but then always cut out nesessary parts, optimize image, and write my HTML by hand.

    To answer the original question: the easiest way to slice in photoshop is to use guides. Drag the guides to places where you want to cut, then choose rectangular marquee tool, select the first piece (guides let you select it very accurately), then go edit>select merged, or press ctrl+shift+c, then go file -> new (or ctrl+n), photoshop automatically selects the size for you, then go edit ->paste (or ctrl+v). Save the file and you are done )

  20. #20
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Photoshop is one of the most useful tools any web designer can have. I do all of my initial layouts in Photoshop using this template

    Website Template

    It is a PC Photoshop 5.0 document (although Mac users should be able to use it, as well as 4.0 version) with layers for a browser at 640x480 and a browser at 800x600. It also has two text layers. One for the "Title" of the page and one for the "URL" of the page.

    Simply open it,unzip it and go File>Save As that way you don't mess up the original version.

    Hope that helps you all....
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  21. #21
    SitePoint Member
    Join Date
    Oct 2000
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [/B][/QUOTE]
    This all may be true although I'm not familiar with PhotoWebber. However, one thing I've learned as my programming skills have developed is not to completely trust ANY program that automatically write HTML code. You will still need to tweak code, add comments, and make any other appropriate changes. [/B][/QUOTE]

    I agree, there is no one application that meets every designer/developer's needs.

    PhotoWebber code is designed to be "human readable" and is very clean. Aside from a small amount of JavaScript for rollover buttons, everything is completely standard HTML. So it's easy for advanced users like yourself to modify. Users less concerned with the "guts" will find that their pages display properly in both Netscape and IE without a lot of time spend on manual process.

    As an aside, 10 years ago I was tweaking PostScript code. Today any designer would be nuts to do that. I expect to see the same trend in HTML.


  22. #22
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All:

    For what it's worth, the HTML and Javascript code that Photoshop creates for you is very clean. I haven't used it much, but I have seen is really good..
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  23. #23
    I'm baaaaaaaaaaaaack! Fluffykins's Avatar
    Join Date
    Aug 2000
    Location
    Manchester, UK
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found Fireworks' code to be clean too.

    Photoshop is an ace package that I really should get to grips with one day but Fireworks is for me.

    It's easy enough to edit if you know your way round HTML. The only annoying thing about Fireworks is those comments and guidelines for copying the table it sticks everywhere

    Ady
    v-technologies - Freelance Goodness.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •