Zoomable User Interface

July 4, 2009 by kekeljevic

The most effective ZUI is done for Prezi presentation system.

Screenshot

Prezi is based on changing two camera possition: wide and narrow. This system is proven in movies, when at first is shown scene in wide perspective and after that focus is on detail with narrow perspective. On this way, spectator has global image and sense of relationship between elements, but also and good perception of important detail.

When user switching between details, camera at first zoom out to wide perspective and then zoom in to new detail. On this way, user recall his memory about relationship between elements. If elements are well organized this is great way for fast learning and good understanding of interface. Some studies proven this claim.

Prezi presented great substitute for dropdown menus with its tools menu. Menu is simple, with few elements which has different size scaled depending on hierarhial importance. Command categories are presented with bigger blue circles and command buttons are presented with smaller white buttons. At first menu is shown whole. After clicking on command categories or a command, camera zooms on clicked area.

zui menu

Read more about graphic design >>

Get design resources >>

*** PUBLISHING GUIDELINES ***
Permission is granted to publish this article electronically in free-only publications,
like a website or ezine (print requires individual permission) as long as the resource
box is included without any modifications. All links must be active. A courtesy copy
is requested on publication (email admirorns@yahoo.com)

Author Name:Igor Kekeljevic
Contact Email Address:admirorns@yahoo.com
Author Web Site: www.admiror-design-studio.com

About Phatch

May 4, 2009 by kekeljevic

phatch1

Phatch is a simple to use cross-platform graphical Photo Batch Processor and Exif Renamer with a nice graphical user interface. Phatch handles all popular image formats and can duplicate (sub)folder hierarchies. Phatch can batch resize, rotate, apply shadows, perspective, rounded corners, … and do much more actions in minutes instead of hours or days if you do it manually.

It’s made in 2008. by Stani Michiels. This is well tested and very useful software. Phatch is available for Windows, Mac OS and Linux.

Overview
Actions: resize, rotate, invert, flip, watermark, shadow, rounded corners and much more!
Drag & drop of actions
Enable & disable actions
Can copy folder hierarchies
Python shell
Error logging
File history
Console (can run on servers without gui)
Desktop droplets
Image Inspector (exif & iptc)
Cross-platform (Linux, Windows & Mac)
python-api

Phatch supports the same file formats as PIL…
Read & write:
‘bmp’, ‘dib’, ‘gif’, ‘jpe’, ‘jpeg’, ‘jpg’, ‘im’, ‘msp’, ‘pcx’, ‘png’, ‘pbm’, ‘pgm’, ‘ppm’, ‘tif’, ‘tiff’, ‘xbm’
Read only:
‘cur’, ‘dcx’, ‘fli’, ‘flc’, ‘fpx’,  ’gbr’, ‘gd’, ‘ico’, ‘imt’, ‘mic’, ‘mcidas’, ‘pcd’, ‘psd’, ‘bw’, ‘rgb’, ‘cmyk’, ’sun’, ‘tga’, ‘xpm’
Write only:
‘eps’, ‘ps’, ‘pdf’

Phatch supports these color modes:
Monochrome (1-bit pixels, black and white)
Grayscale (8-bit pixels, black and white)
RGB (3×8-bit pixels, true colour)
RGBA (4×8-bit pixels, RGB with transparency mask)
CMYK (4×8-bit pixels, colour separation)
P (8-bit pixels, mapped using a colour palette)
YCbCr (3×8-bit pixels, colour video format)
I (32-bit integer pixels)
F (32-bit floating point pixels)

Official Phatch web site

Read more about graphic design >>

Get design resources >>

*** PUBLISHING GUIDELINES ***
Permission is granted to publish this article electronically in free-only publications,
like a website or ezine (print requires individual permission) as long as the resource
box is included without any modifications. All links must be active. A courtesy copy
is requested on publication (email admirorns@yahoo.com)Author Name:Igor Kekeljevic
Contact Email Address:admirorns@yahoo.com
Author Web Site: www.admiror-design-studio.com

About Inkscape

May 4, 2009 by kekeljevic

inscape-logo

Inkscape is a free and open source vector graphics editor application. Its stated goal is to become a powerful graphics tool while being fully compliant with the XML, SVG, and CSS standards.

Inkscape began in 2003 as a code fork of the Sodipodi project. The fork was led by a team of four former Sodipodi developers (Ted Gould, Bryce Harrington, Nathan Hurst, and MenTaLguY) who identified differences over project objectives, openness to third-party contributions, and technical disagreements as their reasons for forking. With Inkscape, they said they would focus development on implementing the complete SVG standard, whereas Sodipodi development emphasized creating a general-purpose vector graphics editor, possibly at the expense of SVG.

The basic types of objects in Inkscape are:

  • Paths—made with the Pencil tool, which allows freehand drawing of paths; the Pen tool, which allows the user to create a Bezier spline node-by-node; the Calligraphy tool, which can be used to draw freehand calligraphic or brush-like strokes, or the Paint Bucket tool, which fills bounded areas of the image. The Calligraphy tool optionally can use pressure and tilt readings from graphic tablets. The Paint Bucket tool works optically rather than geometrically and can assist image tracing.
  • Rectangles—created using the Rectangle tool. Corners of rectangles can be rounded.
  • Ellipses—created using the Ellipse tool. Ellipses can be transformed into arcs and circle segments.
  • Stars/polygons—created using the Polygon tool. Multi-pointed stars can be used to emulate spirographs.
  • Text—created with the Text tool. Texts can use any of the system fonts, and can be easily converted to paths. Both regular and flowed text is supported. All text objects can be arbitrarily transformed. Text can be manually kerned and flowed along a path.

Object manipulation

Every object in the drawing can be subjected to arbitrary affine transformations – moving, rotating, scaling and skewing. Transformation parameters can be also specified numerically via the Transform dialog. Transformations can snap to angles, grids, guidelines and nodes of other objects. Grids, guides and snapping properties are defined on a per-document basis. As an alternative to snapping, an Align and Distribute dialog is provided, which can perform common alignment tasks on selected objects – e.g. line them up in a specified direction, space them equally, scatter them at random and remove overlaps between objects.

Objects can be arbitrarily grouped together. Groups of objects behave in many respects like “atomic” objects – for instance, they can be cloned or assigned a paint. Objects making up a group can be edited without having to ungroup it first, via an Enter Group command – the group can then be edited like a temporary layer. Z-order of objects can be managed either using layers, or by manually moving the object up and down in the Z stack. Layers can be locked or hidden, preventing modifying and accidental selection.

A special tool, Create Tiled Clones, is provided to create symmetrical or grid-like drawings using various plane symmetries.

Objects can be copied and pasted using a clipboard. However, as of version 0.46, Inkscape uses an internal variable rather than the system clipboard, which limits copy and paste operations to one application instance. Objects can be copied between documents by opening them from the File menu in an already opened window, rather than by opening a second file from the operating system’s shell.

Link to official Inkscape site

Read more about graphic design >>

Get design resources >>

*** PUBLISHING GUIDELINES ***Permission is granted to publish this article electronically in free-only publications, like a website or ezine (print requires individual permission) as long as the resource box is included without any modifications. All links must be active. A courtesy copy is requested on publication (email admirorns@yahoo.com)

Author Name:Igor Kekeljevic
Contact Email Address:admirorns@yahoo.com
Author Web Site: www.admiror-design-studio.com

About GIMP

May 4, 2009 by kekeljevic

gimp

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

GIMP originally stood for General Image Manipulation Program. Its creators, Spencer Kimball and Peter Mattis, began developing GIMP as a semester-long project at the University of California, Berkeley in 1995. The name was changed to the GNU Image Manipulation Program in 1997, after Kimball and Mattis had graduated, when it became an official part of the GNU Project.

gui-design-lucky-line-poker-4-copy

Feature Overview

  • Customizable Interface
  • Photo Enhancement
  • Digital Retouching
  • Table Hardware Support
  • Large File Formats Support

GIMP can also be used to create basic animated images in GIF format. It is often used as a replacement for Adobe Photoshop, the most widely used bitmap editor in the commercial printing and graphics industries; however, it is not designed to be a Photoshop clone.

The greatest problem of GIMP is luck of native CMYK support, but since 2008. this software is using GEGL system, which make possible use of high definition images and CMYK images. Implementation of CMYK is expected in close future.

Useful links:

    Read more about graphic design >>

    Get design resources >>

    *** PUBLISHING GUIDELINES ***
    Permission is granted to publish this article electronically in free-only publications,
    like a website or ezine (print requires individual permission) as long as the resource
    box is included without any modifications. All links must be active. A courtesy copy
    is requested on publication (email admirorns@yahoo.com)Author Name:Igor Kekeljevic
    Contact Email Address:admirorns@yahoo.com
    Author Web Site: www.admiror-design-studio.com

    About Blender

    May 4, 2009 by kekeljevic

    blender_logo

    Blender is the free open source 3D content creation suite, available for all major operating systems under the GNU General Public License.

    Blender was developed in 1998. as an in-house application by the Dutch animation studio NeoGeo and Not a Number Technologies (NaN). It was primarily authored by Ton Roosendaal. Since 2002. is Free Software and it is being actively developed under the supervision of the Blender Foundation.

    b8f4b2b938

    Derek Watts “Sign of the Juggernaught” – detail

    Among its capabilities are:

    • Support for a variety of geometric primitives, including polygon meshes, fast subdivision surface modeling, Bezier curves, NURBS surfaces, metaballs, digital sculpting, and outline fonts.
    • Versatile internal rendering capabilities and integration with YafRay, a Free Software ray tracer.
    • Keyframed animation tools including inverse kinematics, armature (skeletal), hook, curve and lattice-based deformations, shape keys (morphing), non-linear animation, constraints, vertex weighting, soft body dynamics including mesh collision detection, LBM fluid dynamics, Bullet rigid body dynamics, particle based hair, and a particle system with collision detection.
    • Modifiers to apply non-destructive effects.
    • Python scripting for tool creation and prototyping, game logic, importing and exporting from other formats such as OBJ, FBX, DXF, COLLADA, task automation and custom tools.
    • Basic non-linear video/audio editing and compositing capabilities.
    • Game Blender, a sub-project, offers interactivity features such as collision detection, dynamics engine, and programmable logic. It also allows the creation of stand-alone, real-time applications ranging from architectural visualization to video game construction.
    • A fully integrated node based compositor within the rendering pipeline

    Most users learn Blender through community tutorials and discussion forums on the internet such as Blender Artists (previously known as elYsiun); however, another learning method is to download and inspect ready-made Blender models, available from resource sites such as the Official Blender Model Repository.

    Numerous other sites, for example Blenderart Magazine—a free, downloadable magazine with each issue handling a particular area in 3D development—and Blendernation, provide information on everything surrounding Blender, showcase new techniques and features, and provide tutorials and other guides.

    Read more about graphic design >>

    Get design resources >>

    *** PUBLISHING GUIDELINES ***
    Permission is granted to publish this article electronically in free-only publications,
    like a website or ezine (print requires individual permission) as long as the resource
    box is included without any modifications. All links must be active. A courtesy copy
    is requested on publication (email admirorns@yahoo.com)Author Name:Igor Kekeljevic
    Contact Email Address:admirorns@yahoo.com
    Author Web Site: www.admiror-design-studio.com

    About GUI design

    May 4, 2009 by kekeljevic

    What is GUI design?

    Abbreviation GUI stem from English words “Graphic User Interface” and marks the user environment. GUI consists of buttons, icons, windows, menus… The user, indirectly, by using GUI sets a command to the computer and through GUI he/she receives a certain response (result) from the computer.

    The term GUI design is usually associated with a narrow and untrue picture which reduces it to icon “drawing” and window “colouring”. This job includes a lot more than just pure knowledge of graphic programmes and “aesthetic sense”.

    First of all, the designer has to understand the mental model of the end user, his/her previous experience, habits and expectations. The aim is to create a design which will be pleasant to use not to designer nor to the ordering party, but exclusively to the end user, and that puts him/her into the position which requires non-conformism, objectivity and analytics. When designing, one also has to have in mind the user’s motor skills and psychophysical limitations. E. g. older users are not accustomed to simultaneously performing multiple tasks, they are less skilled with the mouse, their eye sight is poorer.

    The designer is expected to know the appearance of all standard components of UI as well as to know their procedures and opportunities, to know how to programme and the ways of implementing graphics into programmes, to know the used APIs and their capabilities, to know I/O devices, their way of working, advantages and flaws.

    Only as a finishing touch there comes the thing called window “colouring”. The final programme design itself is a considerably more complex task than people tend to see it. Like in other professional and mature design works, UI design is not done uncontrolled. Designer uses his/her knowledge on perceptive processes, artistic elements and principles of composing, he/she plans and constructs the UI in order to make the understanding and using of the programme as easy as possible, using visual communication with the end user.

    Why invest into GUI design?

    Good GUI design has, as a consequence, dramatic results in time spent on doing the work and reducing the number of errors. Surveys of different researchers indicate that, as a result of programme design in improvement, the average saving of time and error reduction is around 25%, although in the extreme cases it goes even up to 130%.

    In 2006, Nielsen wrote in his report to IBM that optimization of programmes used by them lead to a saving of 72 minutes a month per employee. In this way the company saved $194 million on annual basis.

    Good design leads to saving when staff training is concerned as well. There is a lower need for instructors, it is necessary to organize significantly training sessions, and the employees get used to the new programme dramatically faster.

    In 2001 IBM set a postulate of cost-efficiency of investing into programme development. For every $10 of good-quality investment into programmes enhancement, $100 turn up as a profit.

    Read more about graphic design >>

    Get design resources >>

    *** PUBLISHING GUIDELINES ***
    Permission is granted to publish this article electronically in free-only publications,
    like a website or ezine (print requires individual permission) as long as the resource
    box is included without any modifications. All links must be active. A courtesy copy
    is requested on publication (email admirorns@yahoo.com)

    Author Name:Igor Kekeljevic
    Contact Email Address:admirorns@yahoo.com
    Author Web Site: www.admiror-design-studio.com