Evaluation Notes - Creating Web Images
read user scenario for these notes
Contents
- 1 introduction
- 2 Guides
- 3 Create your own palette
- 4 Active/inactive layer
- 5 Color picker
- 6 Palettes
- 7 Selection
- 8 Object drawing
- 9 Tools for glossy/shadows/textured effects
- 10 Feather selection
- 11 Gradient tool
- 12 styling uniformly
- 13 export
- 14 cutting mask
- 15 Refining palette
- 16 Move tool
- 17 Text
- 18 There are too many options docked in
- 19 Heads up displays
- 20 SVG
- 21 Align layers
- 22 Move tool: alignment
- 23 Plug-ins
- 24 Web Plug-in - Image Map
- 25 Virtual layer folders
- 26 Saving and Exporting elements
- 27 Cutting mask
- 28 Names & versions
- 29 File format
- 30 Aligning elements
- 31 Saving
- 32 Save as PNG
- 33 Save AS
- 34 Export for web format
- 35 Save AS JPG
- 36 Jpg/gif/png
- 37 Preview for saving
introduction
These raw notes are provided as our documentation and for your insight and entertainment. They are not meant to start a flame war. Wait for our complete analysis before reacting.
task: creating bitmap elements for web pages, also using photographic material.
Guides
- Guides should show relative distance to the nearest neighbour (guide or canvas edge) when dragging. We also noticed that there is a second absolute position form the bottom-right corner, that is useful;
- Making 4 guides from selection is a good tool, but it has to be more consistent. Right now it seems some guides are included into selection, some not
- Snap to guides: useful.
- Idea: diagonal guides. Could revolutionise the look of web pages. Guides would have a kind of round checkbox, then user could click to rotate them, and even type some values in.
Create your own palette
We found it really useful to be able to type color name typical in CSS/HTML and to see the value, however this trick is not easy to discover.
Active/inactive layer
We are concerned by the fact that there are often mistakes caused by independence of what you see, and what is an active layer. Is painting on invisible layer a good idea? It would be useful if after clicking on invisible layer in the stack, it would become visible.
Color picker
Maybe instead of picking a color on a layer, it would chose color of merged layers in default mode. (Usability test?)
Palettes
- Palette visible in FG/BG color dialog like Visibone will have different function than My Palette.
- User should be able to set rows/columns in My palette.
- Palettes would need to be named to be stored at the disk, but after adding new color to it, user wouldn’t need to save it again.
- It should be possible to display two palettes at the same time, one under another. For picking colors and seeing dropdown list of all palettes user would use the palette in FG/BG color dialog. It would be possible to drag colors from FG/BG color palette to user palette.
- Default palettes. Some of them are good: visibone, tango icon, webcolor. Most other palettes are just read-only ones without a universal meaning. These need to be replaced by more useful ones. This has to be furthered discussed.
- Sharing palettes should be possible.
Selection
We should provide 1px row/column selection.
Object drawing
- We need object drawing.
- There should be one tool for all objects, filling object with FG color, like a selections user could arrange it. User could set size, color, transparency, and then commit the shape.
- As soon as you draw your shape (filed at the beginning with FG color), when you release the mouse, it’s floating selection, so you ca use i.e. move tool, to adjust it.
- with to this tool, creating round rectangles would be more direct.
- Basic shapes What basic shapes should there be? not too many. Ovals, rectangle (also with round corners ), triangle (maybe with 90 degrees corner). If user would like to manipulate it more, he would have to create a selection and change it into path…
- We have two variants: making color area ad creating selection around it, or making selection and filling it.
Tools for glossy/shadows/textured effects
- When adding outlines to selection, the overall size should stays the same.
- We need to apply effects consistently for different objects but also in original and natural way for graphic designers. So user would be able to do that in a free way (his way) but also repeat the same shadows just by one drag.
- Obviously there are requirements for tool that would help creating shadows/outlines/relieves etc. But would it be better to have a bunch of filters, or rather single filters that would be easy to combine?
- For people who want to create their own style, autoshrink selections and other facilitators would have to be be available.
Feather selection
- The way that feathering selection works at the moment, would require from a web designer to use afterwards shrink option, to fit within objects dimensions. (link …)
Gradient tool
Gradient tool should primarily show the angle, not the coordinates. Angle could be set also in toolbox. Once user sets the angle, it would be possible to have the same angle for the whole project.
styling uniformly
Support applying certain styling uniformly. It should be possible to drag operations to apply them to objects with similar parameters.
export
There should be some kind of sample merge, for exporting i.e. buttons with piece of web page background.
cutting mask
Idea: Cutting Mask, that would be set by dragging, it would also give the names, and give the flexibility of choosing: only from active layer or sample merge layers.
Refining palette
Adding new colors, and changing the palette will be easy when implementing the new pallets concept, user will be able to change colors with color picker or by dragging it from the FG/BG.
Move tool
We see the problem that it is not obvious to know what is active/going to be moved.
Text
- We need to have discussion about linking a few text boxes for modification (color, position) and not loosing the control over the text.
- Idea: text layer, within which you have text boxes. Text boxes are transparent and contain just the text. There would be a need to set the stacking order of the text boxes, because they could overlap each other. Although text default to share the same layer, it should also be possible to create consecutive separate text layers, because some users would want to have quick possibility to switch some layers/text objects on and off.
- Applying color effects on text should be easier.
There are too many options docked in
- We need to make assessment what shall be permanently displayed.
- What tools will be on a heads-up display, and where would we place that?
- Afterwards there is going to be more place for the view of a whole picture.
- Things will need to be smaller, we need to think about placing GEGL history, layer, FG/BG color together with user palette, then there is space on the left side: toolbox and tool options.
Heads up displays
- Heads up display is going to overlap the image. But user will have also possibility to set the dialogs old way and dock them.
- It should be possible to hide heads up displays after pressing a key.
SVG
It would be possible to have few elements based on SVG, that would overlap on one layer in a similar way like the text boxes.
Align layers
- This dialog doesn’t really make it easy to do what we want. Maybe it could be done in an easier way.
Move tool: alignment
Idea: Move tool could show desired top/bottom/edges aligned. In the dialog you would have an option show alignment.
Plug-ins
All the plug-ins could be in heads-up displays. The preview will be at the whole img. If a filter takes time, there could be smaller preview in heads up display. A simple look-through 'glass' where you see the effect on the main window underneath.
Web Plug-in - Image Map
- enables to add links to the selected areas on an image, but that does not fit user scenarios
- do not help in choosing right file format, or setting url
Virtual layer folders
- Idea:There could be virtual folders, that would group physical layers, in aim to allow easier comparing, or switching on/off visibility. But that has to be done in a very easy way.
- Physical folders can be arranged in a vertical way, going top to bottom. But to the right there would be stack of text boxes and stack of SVG on a single layer.
- The virtual folders could be at the top and would be arranged from top to right. And you could just drag in and out the layers for creating virtual folders. Or instead of dragging user could just click OK to create virtual layer folder from visible layer. Two options might be available-new layer group, or new group from visible layer.
Saving and Exporting elements
- It should be possible to export parts in optimized web format
- Two Save for web possibilities:
- save parts by cutting out and saving
- “I want this saved/exported, in this quality…”
- When exporting user needs to have possibility to say if you wants to have transparency, transparency merged with other layer, or with BG. This would have to be set for each and every element. That’s why cutting mask would have few controls, apart of just few rectangular itself.
Cutting mask
Cutting mask- global concept, it would allow user to cut one or many elements at the same time. Their names would be generated on their own (to some extend).
Names & versions
- Should we overwrite the files, or generate a new version folder and cut out the names of versions?
- When saving another versions, user needs to have another folder with the same names for elements.
- All elements would go into a different folder.
File format
User should be able to compare JPG, GIF, PNG to chose the format.
Aligning elements
User will have possibility to chose between guides, align layers plug-in, and the moved tool containing alignment options.
Saving
- It should be possible to save: photos for web, elements for web.
- Save as GIF, export it. There is just one option for saving parameters
- Save for web would have a a subset.
- In the image menu we need a subset of Indexed Image Modes that will keep GIMP optimized palette and web optimized palette. Maybe it should have option for dithering?
Save as PNG
- When saving we could explain more the difference between merging (keeps the transparency) and flattening. We observed this problem during workplace observations.
- Time issues. (compressing/downloading?)
- Is compression really so useful here? Is it still used for this format? This simply has to be the smallest thing that works for web. Some options like Save the value transparent pieces will be obvious to set.
- No thumbnails, compressed to the highest rate, also interlacing would be sth we need to chose.
- The promise that the file will be not changed is not working. After exporting you don’t work on the gimp file, but on PNG and instead of few layers there is just one.
- Because GIMP has the most options when you work on gimp file not on PNG, this process need to export elements.
- Layers should not be lost when exporting.
Save AS
Save As means working on a new file.
Export for web format
Means to put ‘this’ on a disk and work in a old format.
We need to sort out the differences between Save As, Save a Copy, and probable arrange it in a good dialog.
Save AS JPG
- We need to rearrange few things, however it is good that Optimize option is checked.
- The smallest file that is possible is the goal nr one.
- Bug: In Windows preview check-box makes GIMP collapse.
- Smoothing option is relevant and works well. No save thumbnail. Previewing the dithering options is necessary.
- Bug (?): In Windows File size is always unknown.
Jpg/gif/png
User should just chose Export for Web and compare the file formats. GIMP would already predict the file algorithm, and the sizes of PNG, GIF…
Preview for saving
Preview should be 100%. User should be able to see quite big area, but there would be 100% default, that he could change by zooming. If the preview would be in a main window, it should not have rulers, menu. Size of the window should be an example of how big the preview window should be.
GIMP could even be more clever and suggest PNG, if that’s the best option, unless it recognize a photo.
back to evaluation notes overview
next notes: Creating Macros & Scripts