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 7 of 7
  1. #1
    Junior Member Kaldia's Avatar
    Join Date
    Jan 2011
    Posts
    7
    Member #
    26488
    Liked
    1 times
    Hi all,

    So I'm working on my first actual freelance web design job. Thankfully, I only have to do the design part of it, and not the web development - which is great because I am not particularly amazing at building.

    However, because I am not very good at building sites, it leaves me with the issue of not knowing the best way of splicing certain aspects of the site for a web developer to use.

    The site design I have so far is here:




    So, while I understand to an elementary degree how to splice a page up...I have the following questions:

    1)How should I splice the shadows for the web developer?

    2) Should I splice the content areas and send those for them to get the dimensions?

    3) For the search bar and login and register areas...is there any particular way to splice those? Or will the developer have to rebuild them.

    4) Should I be sending the hexadecimal values of the text to them?


    As you can see I'm completely new to this....(I work in print design) I just dont want to seem like an idiot when I send the final files to them.

    Thank You!
    -K

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    I think I can answer all of your questions with the same answers.

    First of all, as someone who takes graphics from graphics designers and converts them to websites in some cases, I'd suggest not slicing it at all. I'd rather create my own code from scratch than inherit someone else's, especially when it's the first website that person has created (no offense, but if it's your first website, you're not going to have coding experience yet, and that usually causes problems).

    By the way, it's called "slicing", not "splicing". I know I sound anal, but I'm also trying to help you avoid seeming like an idiot as well...better to make that mistake here rather than with the client themselves, right? You're not an idiot, by the way...at least you were smart enough to ask for help rather than get in over your head. Most people never learn that lesson.

    Now, if your developer insists on you slicing it, here are some guidelines that should work.

    If it's graphic, slice it.
    If it's text or something simple like a border, don't slice it.

    Basically, all you want to supply are the slices of the images like the logo and the picture of the seniors along with the original JPG as a reference point. Let the developer take it from there. A good developer should run with the ball without any further help required.

    The only problem with that scenario is that the developer's work can't be seen, so the designer gets all the glory when it's all said and done. But that's why you're smart enough to be on the designer side of the fence, and I'm stupid enough to be on the developer side.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member Kaldia's Avatar
    Join Date
    Jan 2011
    Posts
    7
    Member #
    26488
    Liked
    1 times
    Thanks TheGame!

    Haha no you are not being anal at ALL. Funny thing is I knew it was slicing..at what point my brain decided to refer to it as splicing is beyond me. Thank you for correcting that (some photoshop pro I am...)

    I do know basic CSS and coding. Do you think it would be helpful to the developer to be sent wireframe coding with all the div borders / text colors set up?

    Thank you again for going out of your way to answer my questions. Its always exciting jumping into something new...but not so exciting being caught doing something dumb by a client ( I dont think theres anything worse..)

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    No problem!

    It depends on the developer. Personally, I'd say just give me the PSD unsliced and let me figure it out. But that's me.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    When slicing, try to subdivide the design in your mind into CSS properties (e.g. border: solid 1px blue, repeatable backgrounds, and solid images. Think of how things should be layered on top of each other, and then begin laying out your HTML (prior to actually slicing) as you think it would accommodate the design. Your HTML should look something like this (associated CSS styles are in braces):

    HTML Code:
    <div class="wrapper"> {margin: 0 auto; width: 960px; background: url('body-bg.png') repeat-x;} - body
        <div class="header"> {width: 960px; height: 150px; background: url('header-bg.png') repeat-x; border: solid 1px blue;} - header.png is a 1px wide slice of the bg of the header
            <div class="logo"> {float:left; width: 200px;}
                <img src="logo.png" alt="" />
            </div>
            <div class="controls"> {float: right;}
                <div class="login">
                    <!-- login form -->
                </div>
                <div  class="menu">
                    <!-- menu -->
                </div>
            </div>
            <div class="clear"> </div> {clear: both;}
        </div>
        <div class="body">
            <div class="left"> {float: left; width: 200px;}
                <div class="block"> {width: 200px; border: solid 1px blue; box-shadow: 10px 10px blue; }
                    <div class="block-header"> {background: url('box-header-bg.png') repeat-x; padding: 4px;}
                        <h3>Box Title</h3>
                    </div>
                    <div class="block-body"> {background: url('box-body-bg.png') repeat-x; padding: 10px;}
                        <p>Box content here</p>
                    </div>
                </div>
                <div class="block"> {width: 200px; border: solid 1px blue; box-shadow: 10px 10px blue; }
                    <div class="block-header"> {background: url('box-header-bg.png') repeat-x; padding: 4px;}
                        <h3>Box Title</h3>
                    </div>
                    <div class="block-body"> {background: url('box-body-bg.png') repeat-x; padding: 10px;}
                        <p>Box content here</p>
                    </div>
                </div>
            </div>
            <div class="main"> {float: right; width: 750px}
                <div class="page"> {width: 750px; border: solid 1px blue; box-shadow: 10px 10px blue; }
                    <~-- Content here -->
                </div>
            </div>
        </div>
        <div class="footer"> {background: url('footer-bg.png') repeat-x; padding: 5px; text-align: right;}
        </div>
    </div>
    Looks like everything can be accomplished with 1px wide images of the BGs + CSS effects.

    Try it out and see what you can come up with!

  7. #6
    Junior Member deanographics's Avatar
    Join Date
    Feb 2011
    Posts
    26
    Member #
    26637
    yeah in this instance don;t even cut I would hate to have to recut someone else's work because they "thought" thats how I would use it. You could always talk with the dev and see what he says as well.

  8. #7
    Member Shirley Lund's Avatar
    Join Date
    Jul 2011
    Location
    Kalamazoo, mi
    Posts
    39
    Member #
    28517
    Liked
    5 times
    I prefer having designers send me the individual elements they designed along with their final concept. Having a site that is 100% image (even if it is in 100 pieces) is not good for search engine indexing...IMHO. You need to have good text on the page. I did a "sliced" site once like this for a client and then in 4 months when they wanted a change made to a small section of the page ... it was a nightmare trying to get everything sized correctly to fit and not look out-of-place:cry:

    I agree a logo or any large single graphic item should be sliced to keep within the recommended 24k size guideline.
    Shirley Lund
    www.LundandLund.net
    Next Door Service Around the World


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
  •  

Search tags for this page

how to splice a photoshop website design

,

splicing websites photoshop

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:37 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com