Photoshop mock-ups

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

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.

 

Oh man! Ad-blocking software has been detected! :'(

This website is run by the community, for the community... and it needs advertisements in order to keep running. Blocking our ads means your killing our stats!
Please disable your ad-block, or become a premium member to hide all advertisements and this notice.

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.

 

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.

 

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

 

fair enough, just ignore me then.

 

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

 

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.

 

Thanks buddy, fergal- you confused me (and panicked me) a little there, 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" () 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.

 

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]