Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1

    [TIP] PSD's and HTML

    Well, if you like to make an entire site in Photoshop, export to Image Ready and slice it, you plain and simply don't know what you're doing.

    PSD should be PSD's in all cases. You make a seperate PSD for your Menu buttons, a seperate PSD for your header image, or background flash and so on.

    I'm not saying there is a right and wrong way to do things, but please, DO NOT BE SO DAMNED LAZY.

    Lazy designers, or "developers" as they wish to be knwon as simply slice the PSD export the html and images and delete un necessary images replacing the image with a table that height and width. WHY?

    When designing a site, you're supposed to enjoy making them, making a site for "extra $$" is just not right. If you have a love for it, and enjoy seeing your work in action, you might as well do a good job about it.

    -- My Suggestions --
    Design seperate PSD's, this allows the end user recieving the source files ease of editing, the developer ease of editing and a cleaner job is done.

    Build your site in HTML not in PSD. Maybe even draw out your site and figure out how you're going to make it work, which bits will be seperate PSD's and so on.

    Last, but most importantly LEARN HTML and basic CSS.

    Basic CSS (In my terms) - Formatting of text, links, custom text styles, forms formatting.

    I am anti - slicing PSD. ProjectModules Design gets numerous requests to slice PSD's, we do do them, but it's very annoying because an incompetent designer doesn't know HTML. Become a website developer, not "designer". Remember, designing is the design, not implementing it, you're going to go a lot further if you can make a site, not just a PSD.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  2. #2
    Join Date
    Mar 2004
    Posts
    1,468
    There is absolutly nothing wrong with creating a whole page in photoshop, i do it all the time.
    And i dont rasterize anything so its just as easy to edit as your little individual things.

    Also, sometimes its almost impossible not to do things in photoshop, like what if you wanted a line to go from the bottom and twirl throughout the page or something like that. There are sometimes when you need too.

    If your organized and use sets, theres nothing wrong with it. If i need to, i go back and add css.

  3. #3
    That's what I'm getting at, it can be done seperately and definately easier for editing on the end users end.

    I didn't say there was a right and wrong way, for example; there's my way, and your way.

    I believe that creating seperate PSD's is far more professional, easier to use / edit and requires more skill than making a template and slicing it, when a lot of end users don't know how to slice.

    Would you know rather have a site be self explanatory rather than complex that you have to keep asking someone to explain it over and over?

    I am looking at things from the end users point of view.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  4. #4
    Hmmm... not sure whether to be defensive or not - hehe.

    Here's what I do...


    1- Fully design the site in PS.

    2- Slice and export the IMAGES (not the HTML).

    3- Layout the HTML in Dreamweaver and insert images.

    4- Back at the PSD I crop to the various sections I need to edit and save as seperate PSD's. For example, I will crop to my nav bar and save as nav.psd - then create the rollovers and export the images.

    I do my own html work and styles (css). The HTML ImageReady exports is no good and I would recommend against using it as well. And I think this is what you are talking about primarily - people simply exporting the images and html can calling it complete. Would this be a correct assumption?
    Something witty here...

  5. #5
    Planewalker, you seem to be inbetween us both, and seems a fairly complicated way of doing things, although I can understand if you have curvy lines and such why you would do this.

    And I think this is what you are talking about primarily - people simply exporting the images and html can calling it complete. Would this be a correct assumption?
    Yep
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  6. #6
    Sometimes I don't need to do step 4 as I will have my rollover effects already set on a layer. So I export all the images, then turn on a rollover layer and export them. Generally, I only do step 4 if I am undecided about how to handle a rollover set and plan on doing it later, or if I think the header or another portion of the site will change in the near future.

    It's not complicated at all (for me)
    Something witty here...

  7. #7
    I personally usually make menu buttons the same, except for say the beginning and end ones, so I create the "Frame Work" for these and name the layers.

    I then add 'Link Text' and 'Over State Link Text' layers, usually just duplicted and the colour changed on either the text / and or the background.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  8. #8
    Ahh, I see.

    Mine are always different - sometimes text color change, but most of the time it's some graphical/appearance change.
    Something witty here...

  9. #9
    Join Date
    Apr 2003
    Location
    United Kingdom
    Posts
    21
    I have only one thing to say:

    Don't be such a Nazi. People have their own way of doing things. Don't try and be so totalitarian. This isn't a tip, more a 'do this my way'.
    *bump* There goes another host.

  10. #10
    Join Date
    Mar 2002
    Posts
    704
    Personally, I create the entire design as one PSD at first. Then I crop each section myself, creating separate PSDs for things such as menus, and save them as images to use in the actual website. I create all html & css by hand and slice all the images separately to make sure they are optimized.

    Designers have different ways of going about their business. As long as the end result is that the code is clean and the design is easy for the client to edit, its good.

    What really bugs me is all those TM templates people are buying; the code and sliced images are absolutely terrible. There are too many "designers" who will do the bare minimum just to make a few extra bucks.

  11. #11
    Join Date
    Mar 2002
    Posts
    704
    Just to add to what I was saying, I was just looking through the template requests forum and found a handful of people offering to slice a PSD for under $5...

  12. #12
    I have only one thing to say:

    Don't be such a Nazi. People have their own way of doing things. Don't try and be so totalitarian. This isn't a tip, more a 'do this my way'.
    This is me being Nazi ...
    Floyd
    Newbie

    Registered: Apr 2003
    Posts: 20
    Status: Offline
    Your WHT Rank says enough I already said "there's my way, and your way", this IS a tip, read it properly.

    PixelAxis, I have no problem with the way you and PlaneWalker do it, but like you said yourself, and I stated in my first post, simply exporting the HTML and Images, deleting the spacers and text areas is pure laziness and you're going about it in the completely wrong manner.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  13. #13
    I agree with you 4 Degrees. If you only know Photoshop you're not a designer; you're not even close.

    If Photoshop didn't have the slicing options it does, the world would be a better place. It'd eliminate the vast number of people offering shoddy work to those who know no better and force people really interested in design to actually spend time learning, before deciding to start doing 'templates' for a few dollars.

    Personally I design layouts as one .PSD and once it's done start from a blank XHTML & CSS file. More often than not there really isn't much need to export more than a few images with the save for web function. Although I can see your point (to an extent) about multiple .PSDs, I think a well organised (Clearly labeled layer sets, with colours if need be) .PSD can be extremely easy for an end user to make adjustments to.

  14. #14
    Thank you!!

    Yep, different .PSD's, labelled layers (sometimes with label layers) and so on. I find it easier on the end user doing it this why, why settle for "shoddy" work, when you can have it done to be made easy on you.

    Unless a client requests a specific way for us to work, that's how it will be done
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  15. #15
    Join Date
    May 2002
    Location
    Mtl, Quebec
    Posts
    97
    Originally posted by Vaya
    If Photoshop didn't have the slicing options it does, the world would be a better place.
    Ha! No, the slice tool is extremely useful, if you do it properly...I use the slice tool just because I don't want to have to crop each image I want, that would be way longer for nothing more. I mean if you have a nav with each button different, why crop each button? Just use the slice tool...

    BUT, I never, never use the code PS output, I always remake my own.

    Originally posted by Vaya
    Personally I design layouts as one .PSD and once it's done start from a blank XHTML & CSS file. More often than not there really isn't much need to export more than a few images with the save for web function.
    I agree with that part, and just to add a bit, XHMTL and CSS is the best way to go, you can a really well organized and easy to edit HTML, and all what's about the design, in the css file, so the client can edit the page way more easily.

    And also, if you properly name your layers, put each part of the website in it's Layer Set, I don't see the difference between this and multiple PSDs. A well-organized PSD can be as good as multiple PSDs...

  16. #16
    that would be way longer for nothing more
    Please, before making comments like this venture into different ways of making. If you're (which I assume you haven't been) the end user of a website development, you will find it's easier to edit one image not the entire one.

    Your menu theory I also disagree with (I can't say wrong). Lets say you have 50 links, all image based, with rollovers, would it be easier to edit a 'menu button .PSD' or to edit the whole layout and save, on top of making sure your code is correct and links to the right place.
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  17. #17
    Join Date
    May 2002
    Location
    Mtl, Quebec
    Posts
    97
    Originally posted by 4 Degrees
    Please, before making comments like this venture into different ways of making. If you're (which I assume you haven't been) the end user of a website development, you will find it's easier to edit one image not the entire one.

    Your menu theory I also disagree with (I can't say wrong). Lets say you have 50 links, all image based, with rollovers, would it be easier to edit a 'menu button .PSD' or to edit the whole layout and save, on top of making sure your code is correct and links to the right place.
    I already tried both, and stood with the way I stated...

    Mmmm, all you change are the images right? Well, AFAIK, if you change the images, the code won't change...

    Why would you edit the whole layout just to change the nav items?

  18. #18
    Using one PSD you would edit it then have to export all the images, something not a lot of people know how to do.

    Editing in Adobe and simply exporting / saving it over the old image is a lot more user freindly, ease of use gets you a long way
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  19. #19
    Join Date
    May 2002
    Location
    Mtl, Quebec
    Posts
    97
    Originally posted by 4 Degrees
    Using one PSD you would edit it then have to export all the images, something not a lot of people know how to do.

    Editing in Adobe and simply exporting / saving it over the old image is a lot more user freindly, ease of use gets you a long way

    Save for Web exports all the images. And you can tell PS not to overwrite old images simply by unchecking checkboxes.

  20. #20
    To much work for the end client. To change one word they spend say 5 minutes in a complex PSD environment, if they're slow and unsure of what they're doing it will take longer.

    Editing one PSD, they edit the one word and save as .. file name
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  21. #21
    Join Date
    May 2002
    Location
    Mtl, Quebec
    Posts
    97
    Originally posted by 4 Degrees
    To much work for the end client. To change one word they spend say 5 minutes in a complex PSD environment, if they're slow and unsure of what they're doing it will take longer.

    Editing one PSD, they edit the one word and save as .. file name

    I still don't get it, it's the same amount of work...And if you organize your PSD, it won't be complex at all.

    Anyway, no need to continue like that, you have your way, I have mine, I just wanted to give mine too and tell why.

  22. #22
    Join Date
    Apr 2003
    Location
    United Kingdom
    Posts
    21
    If you're a designer then the End User should never have to touch the HTML, never mind the Layered Image File.
    *bump* There goes another host.

  23. #23
    Originally posted by Floyd
    If you're a designer then the End User should never have to touch the HTML, never mind the Layered Image File.
    I think you mean developer

    Image ready is harder for the end user to use than photoshop itself. If you just think about it a second, you may understand ...
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

  24. #24
    hrrmm...

    I would have to agree with 4degrees. This is a matter of time for the enduser. Why would I want to edit and export all images in a .PSD, if I only change 1 button out of 50? Personally, I like to create the PSD, then export all layers individually using GIMP. Therefore both the PSD and individual layers will be available. This way I can easily edit sites using XHTML and CSS, or tables. This makes editing easier for myself, and clients (especially those not too-familiar with photoshop)
    IM: tweak1870

  25. #25
    I think it's a matter of preferred style. I prefer making it easier on the end user
    ServeYourSite
    Web hosting done right
    ██ Shared, Reseller and Dedicated web hosting
    An Easy Web Presence Company

Page 1 of 2 12 LastLast

Posting Permissions

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