PDA

View Full Version : New to designer but very experienced



Stevespaw
January 7th, 2008, 08:57 AM
I have been designing very high end remotes for a while now. ($100,000 installs). I fell into this software by accident looking for a lighter weight client than the full tablet PC's we use now. I an very pumped about this application and have purchased it for testing. BUT, when I started to get into the designer I have hit a huge snag in our workflow.

We have a large library of High res PNG icons in 2 versions, (on-off). When I started I was impressed with the look and the tools, BUT I COULD NOT RESIZE THE BUTTONS !!!.

My question - How do you folks design for this? We need to design multiple resolution remotes in both landscape and portrait modes and cannot start from scratch just because we need a different resolution.

Do you use other tools for layout and import them? (We use photoshop, flash, and after effects everyday.) Photoshop can export all layers (as TGA's and they seem to error in NR Designer) but the size is full screen per layer which will not work as buttons. How About Flash as a designer-how would that work?

Please tell me that RESIZE is on the way in the next release. :-).
But if not please help out a NOOB with what looks like a great product.

Steve

Rob H
January 7th, 2008, 10:26 AM
Resizing bitmap graphics is always a bit tricky. My personal preference would be to use Illustrator (or a similar vector program) for the original graphics and then export them at an appropriate size - or it would be if I could get my head around Illustrator that is! So I just use Photoshop and design the graphics for the appropriate resolution. If you're careful you can resize them down in Photoshop, but this usually requires a bit of tweaking afterwards.

NetRemote designer does offer limited resizing, but that works on the whole CCF - e.g. if you design at a high resolution then you can change the resolution of the CCF and you are given the option to resize the graphics.

Stevespaw
January 7th, 2008, 10:38 AM
Man, that is what i don't get, from a designer point of view. How could you ever know what size you need ahead of time. A graphic designer would laugh and run away. You cannot get proper page size, and a balanced look and feel until you get all of the buttons you need on the screen at the same time. Can you imagine what web pages would look like if designers could not resize graphics in Dreamweaver, Frontpage, etc. ?

That is an Idea ??? Could I use Dreamweaver, or even Frontpage as a design tool?

Rob H
January 7th, 2008, 11:17 AM
I've not tried using Dreamweaver but it might work. For that matter you could just use Photoshop to do the layout and then slice the graphics. Alternatively you could use Layer comps and a custom script to save the graphics - I have a modified version of the standard Photoshop "Layer Comps to Files" that I use to export PNG graphics

NetRemote Designer is more intended as a way of getting the interface to do something rather than as a graphics tool although adding bitmap resizing might be possible in a future version (I have a few ideas about how best to do this).

Stevespaw
January 7th, 2008, 11:50 AM
In Photoshop CS3 "Layers to file" for me ends up with Images the same size as the main Comp not just the image (button) size. Also I do not have png as an output option.

The designer we use - Vantage Controls Touchpoint Designer - is a great tool for their products. I have Sizing handles on Buttons just like all other programs. I think it is a standard .NET type of tool.

I have found what I think will be an OK work around for us now.
Word 2007 saving as an HTML document with "allow PNG" turned on in the web options.

:cool:

jwilson56
January 7th, 2008, 12:14 PM
I use Photoshop to design all my graphics and layers to keep them all independant yet viewable to do the layout. I keep the buttons a certain size so as they are pressable with a finger on a touch screen. I then export for web on all the objects as png files and then import them into NRD.

Not that hard really.

John

Stevespaw
January 7th, 2008, 12:39 PM
Wow, still seems like a lot of work. You go to every layer and "export to web" ?

It looks like all of your buttons are just variations of the same button. That works for your layout, but all of our buttons are different and we already have a library of them. They are just large and high res to let us multi-purpose them.

( Just give me a size handle in NRD and we would be rockin ! )

:-)

TonyNo
January 7th, 2008, 12:59 PM
Resizing bitmaps in the app that uses them (i.e. NRD, Vantage Controls Touchpoint Designer, Dreamweaver) is only a good idea if that app resamples/resizes them at "compile time".

I'd hate to see the file size of one of your panels if you use a lot of large controls and no resampling! ;)

I design all of my graphics in a vector drawing program. Once I have the layout determined, I export the correctly-sized PNG's.

Rob H
January 7th, 2008, 01:37 PM
Here's my simplified and modified script for saving Layer comps to PNG files.

There are a couple of other differences between this and the standard Layer comps to files script :-

1) only supports PNG files
2) remembers the last folder you saved images to
3) overwrites any existing images

The only real limitation is that it doesn't currently trim off excess transparency, although I may add that in a later version. I'll probably have to force images to a certain size quantum since otherwise you'll end up with two differently sized images for the up and down states of a button which would lead to the smaller image being automatically scaled up by NetRemote at run-time.

Perhaps I could do something clever with the names of the layer comps - e.g. if you name them as 'xxx up' and 'xxx down' or 'xxx pressed' then it could ensure that all the xxx images were forced to be the same size.

Maybe that should be left to someone else as I'm considering moving to using Xara Extreme as my graphics creator.

Stevespaw
January 7th, 2008, 04:41 PM
Resizing bitmaps in the app that uses them (i.e. NRD, Vantage Controls Touchpoint Designer, Dreamweaver) is only a good idea if that app resamples/resizes them at "compile time".

I'd hate to see the file size of one of your panels if you use a lot of large controls and no resampling! ;)

I design all of my graphics in a vector drawing program. Once I have the layout determined, I export the correctly-sized PNG's.


Yes these programs resample.
Even Word 2007 resamples which is why I am iterested in using it.

Steve

Stevespaw
January 7th, 2008, 04:53 PM
Here's my simplified and modified script for saving Layer comps to PNG files.

There are a couple of other differences between this and the standard Layer comps to files script :-

1) only supports PNG files
2) remembers the last folder you saved images to
3) overwrites any existing images

The only real limitation is that it doesn't currently trim off excess transparency, although I may add that in a later version. I'll probably have to force images to a certain size quantum since otherwise you'll end up with two differently sized images for the up and down states of a button which would lead to the smaller image being automatically scaled up by NetRemote at run-time.

Perhaps I could do something clever with the names of the layer comps - e.g. if you name them as 'xxx up' and 'xxx down' or 'xxx pressed' then it could ensure that all the xxx images were forced to be the same size.

Maybe that should be left to someone else as I'm considering moving to using Xara Extreme as my graphics creator.


I didn't get your script.

Also I see now that NRD ignores tranperency for the "Button Action" so the excess would not matter which would be fine then.

I bring my on and off state icons into PS at the same time and link the 2 layers as I design so they should stay the same size in the final layout.

Now, next issue, is there some way to "sync" NRD with the Modified files if you go back and adjust in your graphics editor. It looks as if once they are brought into the library they are disconnected from the original files. Is this correct? Bummer.

Steve

Steve

Rob H
January 7th, 2008, 09:00 PM
Sorry about the script - I forgot the file extension limitations - I'll zip it up

Unfortunately that is correct, once you've added a file NRD forgets the filename and original location I'm afraid. You can export all the graphics from a CCF to a folder - change one of them and import them back again, but it's not ideal. There's also the "Replace image with file" option in the image picker, but again, not exactly ideal.

Stevespaw
January 8th, 2008, 08:07 AM
Thanks Rob,

As I was working with NRD this morning I realized that I CAN Size buttons in NRD. The ability is there !!!!

I assumed I could not because size was grayed out in the properties.

But as I was working I saw that I could type in a new H & W in the lower right main window. BAM. OK, now why can't I just get a size handle on the button itself?? We can get by with this for now but at least we are not doing work twice

Thanks everyone for your help. I did find that using word as a layout tool was MUCH faster than Photoshop for resizing materials. (I love the web and PNG :-) ).


I will now launch a campaign to ask for handles on buttons.

Thanks again, I am sure that i will have more questions as we more forward. ( this LUA stuff is new. Where do we start? )

Steve :)

Rob H
January 8th, 2008, 09:15 AM
The best reference for Lua (not LUA :) ) is the book Programming in Lua by Roberto Ierusalimschy - the version for Lua 5 (ie the one used by NetRemote and Girder) is available online - http://www.lua.org/pil/

You'll also want to refer to http://www.lua.org/manual/5.0/ and the NetRemote help file (which you can access from Designer)

If you need any help with Lua, just ask.

dotScott
January 16th, 2008, 08:29 AM
I did a similar script for Fireworks if anyone is interested. This script will allow you to export all visible elements of a Fireworks PNG file to individual PNG files. This is very useful for composing your mockups in Fireworks and simply select the menu command to export them for your skin. The elements will be Cropped and sized to it bounding box alpha channel is preserved if you've named your elements or groups, the element's name is used as the filename Only visible elements are exported, hidden and web layers are skipped

Installation:
Copy and paste the code below to Notepad or other text editor
Click File > Save As..
Enter a descriptive name such as Export all Elements to PNG.jsf
It's important to note the .jsf extension, you can name the file anything you like but the extension must be .jsf Navigate to the Configuration\Commands folder under Fireworks installation folder, usually C:\Program Files\Macromedia\Fireworks 8\
Create a new folder under Commands named Export
Save the file to the newly created Export FolderYour path should look like this:
C:\Program Files\Macromedia\Fireworks 8\Configuration\Commands\Export\Export Elements to PNG.jsf

To Use the Command
You will now have a new command group available Menu > Commands > Export. There is a menu entry with the same name as the filename you entered earlier, Export Elements to PNG Select this new command to start the export of your layout. A dialog box will appear. Select the destination folder for your individually exported files to be saved. In the filename field enter a name that will be used as the filename prefix for any element that you did not name in the layers. An example would be SkinPart . Any unnamed elements will be saved as SkinPart 1.png, SkinPart2.png, etc. Click Save
That's it! Now each piece of your layout is ready to be used as buttons or layout elements in NetRemote.

function exportAllElementsToPNG(){
var dom = fw.getDocumentDOM();
var filepath = fw.browseForFileURL("save");
if (filepath == null) return false;
var defaultname = Files.getFilename(filepath);
filepath = Files.getDirectory(filepath);
var elems = new Array().concat(fw.selection);
dom.selectNone();

dom.setDocumentCanvasColor("#ffffff00");
var sXO = dom.exportOptions;
var oldcrop = sXO.crop;
sXO.crop = true;
sXO.ditherMode="none";
sXO.ditherPercent=100;
sXO.exportFormat="PNG";
sXO.colorMode = "32 bit";
sXO.optimized = true;
sXO.paletteTransparencyType="rgba";

var f = dom.currentFrameNum;
var n = dom.layers.length;
var i, j, m, elem;

var visArr = new Array();

for (i=0; i<n; i++){
if (dom.layers[i].layerType == "web" || dom.layers[i].frames[f].visible == false) continue;
m = dom.layers[i].frames[f].elements.length;
for (j=0; j<m; j++){
elem = dom.layers[i].frames[f].elements[j];
if (elem.visible) {
elem.visible = false;
visArr.push(elem);
}else{
visArr["_"+i+"_"+j] = true;
}
}
}

var rect, name, filename, counter = 1;
for (i=0; i<n; i++){
if (dom.layers[i].layerType == "web" || dom.layers[i].frames[f].visible == false) continue;
m = dom.layers[i].frames[f].elements.length;
for (j=0; j<m; j++){
if (visArr["_"+i+"_"+j]) continue;
elem = dom.layers[i].frames[f].elements[j];
rect = elem.pixelRect;
elem.visible = true;
name = elem.name;
if (name == null) name = defaultname + counter++;
filename = filepath + "/" + name + ".png";
sXO.cropLeft = rect.left;
sXO.cropRight = rect.right;
sXO.cropTop = rect.top;
sXO.cropBottom = rect.bottom;
fw.exportDocumentAs(dom, filename, sXO);
elem.visible = false;
}
}

i = visArr.length;
while (i--) visArr[i].visible = true;

sXO.crop = oldcrop;
dom.lastExportDirectory = filepath;
fw.selection = elems;
return true;
}
exportAllElementsToPNG();

vitello
January 22nd, 2008, 12:54 AM
Steve,

Concerning resizing buttons in NetRemoteDesigner. I tried your suggestion to do a resize using
a new H & W in the lower right hand corner. That resizes the button in NetRemoteDesigner,
but the resizing is not really applied to the button. When I did a save and checked the resized
button in the NetRemote client on my PC I found that the button was the original size. I went
back to NRD and checked the button size by clicking of the button and it showed the original
size even though visually it looks like it was resized.

So it looks like changing the H & W shows you what the resized button would look like,
but doesn't really do a resize.

Peter

dotScott
January 24th, 2008, 06:56 AM
Steve,

Concerning resizing buttons in NetRemoteDesigner. I tried your suggestion to do a resize using
a new H & W in the lower right hand corner. That resizes the button in NetRemoteDesigner,
but the resizing is not really applied to the button. When I did a save and checked the resized
button in the NetRemote client on my PC I found that the button was the original size. I went
back to NRD and checked the button size by clicking of the button and it showed the original
size even though visually it looks like it was resized.

So it looks like changing the H & W shows you what the resized button would look like,
but doesn't really do a resize.

Peter

IMHO, I think that until vector formats are supported, modification of the button size should be done in your graphics application. Scaling of raster graphics is a bad practice to get into and leads to unprofessional looking GUIs. The only place where I could see stretching a bitmap would be in a repeating pattern bitmaps such as a gradient background to possibly reduce file size.

Stevespaw
February 20th, 2008, 09:25 PM
Scaling of PNG's is the right way to do this. Basically create your graphics larger that you will ever need them and they will always be "professional". Absolutely bad practice to scale them up. We have a library of large Buttons with 2 states (in and out). Many of them are semi-transparent 3D renders.

Steve

Rob H
February 21st, 2008, 03:58 AM
Since this thread started I've dropped the use of Photoshop completely in favour of Xara Xtreme which is a vector drawing application - but is much easier to get to grips with than say Illustrator, it's also considerably cheaper.

liofr
March 15th, 2008, 07:07 PM
the best way with that netremote as a real gui designer find in many IDE software like visual studio or flash (http://www.adobe.com/devnet/flash/articles/google_search_print.html)frontpage (http://www.kimberry.com/pw/report.html) or other design remote (http://www.chipmunkav.com/images/remotedesigner.jpg) or eclipse (http://www.eclipsezone.com/eclipse/forums/m92174919.html).


this thread is very interesting and when post the same question in a post nobody point me to this "old post" or speak about tool .
does the designer could access to image rendering in netremote in once . Mean if image are accessible from filesystem , designer could without change the name of images change the size of image so netremote device could easely adapt to different window size if user start from a vector project where all object are export to raster of predefine size ( 320x240 15 pouce ... ). xara (http://www.xaraxtreme.org/) could do that ?

Rob H
March 15th, 2008, 07:22 PM
I hesitate to ask, but what is wrong with NetRemote Designer as you see it?

Holding up Visual Studio as a shining example does not really work as far as I'm concerned - although it has improved in VS2005 it's still a very, very poor tool for GUI design.

liofr
March 16th, 2008, 09:16 AM
1- yes i think that when people come from the visual studio IDE using a tool that don't look like Visual studio or other IDE that use component paradigm is strange. when edit html page in VS 2003 i have all the component in a window that i can place and resize without go to html tag code . Then because know tag name tag , name attribute and value i can custom html code edit html source. it not the case of netremote . This point is not important because the way i see microsoft software. answer to the second chapter could interest most new netremote user.

2-i expect someone give me example about how they achieve to design same custom ccf that could be render to fullfill pda and pc screen when netremote use raster image !!

3-Don't think the way to design gui is very very poor using Visual Studio(VS) compare netremote designer( speak the way to achieve the same result using mouse , accessible compnent ) . And the next VS ll let designer ( not programmer) using vector paradigm with xaml and wpf so resize vector could be achieve more easely speedly than drawing static raster. people who is interesting about gui interface could search and find very good discussion in mediaportal website .
http://blog.phanfare.com/2005/10/gui-development-on-the-mac-vs-the-pc/

3- does netremote accept vector image file that can be resize with
constraint ( resize window resize all the component inside this window keep usebality , look ) ?
think no but the support of flash engine and swf is a solution if designer have
a macromedia flash licence IDE.ll test it for control one light and lle give feed back . My personnal opinion is that edit vector technology that let us go to text code ( svg , xaml) is more simple than vector ( flash) technology that don't let us do that easely . yes no it is possible (http://www.flash-creations.com/notes/dynamic_drawingapi.php) but import export from flash are very limited . adobe is the best binary format but no static text access code for design gui . this ll change with XFL (http://drawlogic.com/2008/03/09/moock-mentions-xfl-for-open-flash/)
with still many questions (http://www.tekool.net/blog/2008/03/10/xfl-the-best-new-feature-from-diesel/)

gui is what the end user see . see iphone amazing speed but functionnalities are poor so SDK (http://www.tuaw.com/2007/10/17/apple-we-plan-to-have-an-iphone-sdk-in-developers-hands-in-fe/) arise .
now i prefer that all kind of glue beetween promixis sofware and amazing number of device/protocol are supported ( support the most functionnalities ).
google and apple make a good work about design and how people interact with object ( designer) and how to achieve that (programmer) with very good documentation for the first .