1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Photoshop mock-ups

Discussion in 'CIW Certifications' started by IThurts, Feb 21, 2008.

  1. IThurts

    IThurts Kilobyte Poster

    284
    2
    32
    Hi again everyone,

    Just a quick question please;

    Due to the invaluable help from you guys here i understand that photoshop can create mock-ups of websites. You then take this mock-up, cut up the images and reference the images using the relevant div tags in notepad/DW etc.

    What my question is, when you say "create the mock-up", what am i referring to here? the nav bars?logos?buttons?

    For example if i created some buttons, how would i insert a link ONTO the button image in ie; notepad etc? Using some form of "positioning" for the link?

    My main question is when you say a site "mock-up", what does/can this include? A list would be great if you guys can....:)

    Thanks again,
    Thanks.
     
    Certifications: BTEC national Diploma Computer Studies
    WIP: See Sig
  2. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    Unless im missing something entirely, thats not what creating a mock-up is at all. Creating a mock-up is where you use photoshop to draw an image of how the site/GUI will look, so that you can show it to clients/management, etc. All you are doing in photoshop is drawing a representation of the finished article. You cant then take this image and turn it into a webpage. You have to actually go and create it in whatever web design system you are using.

    Thats like taking a sheet of A4, drawing how you intend the site to look, then trying to assign code to the buttons on the piece of paper. It just doesnt work like that.
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  3. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    Ahhh wait. I see what I think you mean here, just having read your previous thread.

    I dont think they meant that you could just use the image and attach code to portions of the image (although thinking about it, it is possible to do that, just not very nice in my view). What they meant is that you can crop the image for the button into a separate image file, and attach that file to the button in code when designing the site.
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  4. Cockles

    Cockles Megabyte Poster

    664
    24
    74
    Hi mate

    It's been about 4 years since I have done this and my memory is very hazy, but it can be done (did it as part of my degree)

    Basically, you can create the entire backdrop of a webpage in PhotoShop, including buttons etc. You then use a slice tool where you can basically isolate each element of the page (i.e. buttons or anything with interactivity, areas that are purely visual etc) and segment the page accordingly. You can then export this into something like Dream Weaver and it arrives with the page segmented, so you can add links etc. It's bascially a way of creating the artwork then exporting it oven-ready

    There are many more people here who would know a lot better than I do, but I do know it CAN be done

    Cheers
     
    Certifications: None
    WIP: Trying to find my car keys
  5. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    fair enough, just ignore me then.
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  6. Cockles

    Cockles Megabyte Poster

    664
    24
    74
    Sorry mate, in the time it took me to begin writing that and submitting it, you had put your posts up, just read that back and it looks like I'm being rude. Sorry
     
    Certifications: None
    WIP: Trying to find my car keys
  7. Fergal1982

    Fergal1982 Petabyte Poster

    4,196
    171
    211
    No problems. I didnt take it that way. Graphic design on webpages isnt something im particularly into, so my knowledge on it is fairly limited.
     
    Certifications: ITIL Foundation; MCTS: Visual Studio Team Foundation Server 2010, Administration
    WIP: None at present
  8. IThurts

    IThurts Kilobyte Poster

    284
    2
    32

    Thanks buddy, fergal- you confused me (and panicked me) a little there:blink, but i knew it could be done. I was after exactly what Cockles explained, so thanks cockles. So really its the whole backdrop, ie; everything excluding content. And you then using the slice tool you can "slice" (:dry) each segment and assign it into the relevant DIV tags?

    When creating this backdrop/mock-up, i guess i could create the whole Nav bar design, and reference it in my style sheet with a div id of say "navbar".....sorry just me thinking out loud.:oops:
     
    Certifications: BTEC national Diploma Computer Studies
    WIP: See Sig
  9. ThomasMc

    ThomasMc Gigabyte Poster

    1,507
    49
    111
    both post are sort of correct but the program is called Image ready which come with Photoshop, goto File->Transfare to Image Ready and then select you slicing tool, after thats done export image and html, Now when you check the source html you will notice image ready loves using table :( . [Slicing Tutorials]
     
    Certifications: MCDST|FtOCC
    WIP: MCSA(70-270|70-290|70-291)

Share This Page

Loading...