Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    May 2012
    Posts
    21
    Member #
    31833
    I use Photoshop to cut up slices and then bring it into Dreamweaver. Whenever I make changes to the page layout, in addition to the images, Photoshop creates an html page that has <!-- Save for Web Slices (index.psd) --> that lets me easily copy\paste the code between this comment and paste it into my real index page in Dreamweaver without messing up all the other meta tags and data I have saved there.

    Problem is that now I want to start creating DIVS in my html to seperate the navigation, content, footer etc... but now what do I do if I make changes to the photoshop layout and save it out again? The new generated html page of Photoshop won't have my divs. What is the workflow for creating and making constant changes to a photoshop file and then bringing in just the changes to my original index page?

    Thanks!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The answer isn't one you're going to want to hear:

    Don't do it that way.

    The Photoshop part, I mean. If you've got the sense to use divs to separate sections of your site (which you clearly do), you're halfway down the right path anyway. It's a small leap to just start hand coding all of it. You'll find, in the end it's much easier to work with and maintain as well.
    Fireproofgfx likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    Technically all you have to do is when you go to save the sliced template again change the FORMAT to image only, which will not produce the html code that comes along with saving. Then overwrite all of the images.

    With that said though Ronald is totally correct. Move away from Slices. I started out by making sliced website sites and they always had issues, they are truly no good and I even made a tutorial explaining how to go about slicing a template for the web, because at the time I couldn't find any. But it is not the way to go.

    The right technique would be to design a template in Photoshop and then be selective about the parts you cut out/slice or select like the Banner or a sliver of the background and then use divs and style with CSS. Don't slice a whole website.

    If you need help changing directions, I learned a lot from this video series.

  5. #4
    Junior Member
    Join Date
    May 2012
    Posts
    21
    Member #
    31833
    Thank for both of your replies. Ronald, what I was going to do is, after I was happy with the layout, Dreamweaver has an option to convert tables to divs and it works pretty well. But yes, I'm going the div way.

    Fireproofgfx, thanks for the tips. So when you selectively cut up an image, does your image pieces end up in various shapes like a tetris game? If so, that seems like a simple way to control the images. If not, then maybe I didn't understand you.

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You shouldn't have an entire page that is made of images. Solid colors should be done using CSS, gradiated colors can be done using CSS. Text should be done using actual text with web fonts as much as possible. Only graphics ever need to be images.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    by selective I mean using your Marquee Rectangle Tool and then select the Banner, I usually crop and then save as banner, and then undo to undo the crop.

  8. #7
    Junior Member
    Join Date
    May 2012
    Posts
    21
    Member #
    31833
    I've attached an image of the index page I'm working on. It's a little complicated to crop just the banner, since the design I'm making doesn't have a distinguished difference between the top, nav, body and footer, so I'm not sure if I should slice pieces with alpha channels (PNG) and have the BG a whole page JPG or just slice the page in big chunks horizontally. Take a look at the photo. It's all layers in Photoshop and I'm using Adobe Fireworks to export images from it. How would YOU slice this up so that there are no borders on all sides of all browsers?
    Attached Images Attached Images

  9. #8
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    Cool vivid design, I like it. Here is what I would do.
    - Logo (YS over to the Yellow Sparkle text) - save as logo.png so it can be transparent
    - Banner - save as banner.jpg - jpg so it is optimized for a faster website.
    - Background (orange) save as mainbg.jpg make sure it's not to big of a file size.
    - Footer Background (Dark Gray) save as footerBG.jpg. You might be able to grab a 5x40pxl sliver that will repeat and give you the same background for less file size rather than saving the whole background.
    - Lemon - You can add this later during coding.
    - Save you icons and other small images individually

    The menu text and all text for that matter would be done when you code the site.

  10. #9
    Junior Member
    Join Date
    May 2012
    Posts
    21
    Member #
    31833
    Thanks. I'm setting up that way.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com