: GUI for web design? I have a friend who has like 250 hyperlinked flowcharts. He wants to put them into a web app. The thing is, it needs to be simple HTML. There are some websites

@Jamie315

It seems to me like photoshop would do just what you want. ( Depending on how far he would have to go with it of course... )

In photoshop you can take the Slice tool and 'draw' boxes around the areas you want to use. Not just the ones you want to use as links, but all the areas/images you want to be shown in the document later on.



This is done in PS cs5 and I'm not sure if there are any major differences in the web saving options in lower versions.



1. Slice it, Slice it real good.

So here I have selected 4 different areas with the slice tool ( The ones with blue boxes. Other areas are just extra filling, ignore those. Focuse on the areas that you need. )

Yes, there is an empty slice there, I'll get to that later on.





2. Linking - Slice options

You can then use the Slice Select tool ( you can also change slice tool into slice select tool temporarily by pressing Ctrl )

Double clicking your sliced areas will open up Slice options.

You might want to check out which ones are the ones you want to fill in, but you really need to only use the url box to set url. ( hovering over the areas will show tooltips and a bit more info about what they do )

Note that Name is automatically (as default) used as class name (in this case)



Now, about that empty slice.. In the slice options there's Slice type:, if you change that to No image You can insed text inside that area. ( Bad thing about this feature is that if you're not going to edit a single thing in the produced html file you pretty much need to guess the text size/amount because it is not shown until you save it later. )



3. Producing html - Save for web

Saving should happen with the Save for web feature.

from the top menu: File > Save for web & devices ( Ctrl+Shift+Alt+S )

Here comes the important part


There's the Slice Select tool again, wile pressing shift use that to
select all the slices that you want to use. ( The ones marked with
blue colors. ) Once you've succesfully selected a slice, the outline
of it will turn brown.

When you've succesfully selected everything you need press [Save]


These two things are very important for you to select

Format: HTML and Images.

Slices: Selected slices.


Click the middle one and select Other


Under Select: there's a drop down menu which will have different
settings, the important things in in this instance are HTML and
Slices

The following images show the things you should at least select.





After everything is set, you can save it by pressing the [Save...]
button and then naming it.
Then you can find it in the middle from the list and save away.
( I named mine SaveUI )






Heres the produced html: photoshopmesta.net/1/webby/
The code it produces isn't as neat as it could be if written manually, but it should do.

Vote Up Vote Down

@Murray976

I don't get the question really. Sounds like your'e looking for flowchart web apps. Which has little to do with design and is more about project management. There are apps, like Pencil, out there for wire framing, but they aren't based on a web interface. Why the need for a web intercase? And I suspect, this would take some custom programming.

Perhaps you're simply looking for something like Mockingbird A google search for web-based wireframing will result in several options.

Vote Up Vote Down