Slicing (interface design)

Last updated

In fields employing interface design skills, slicing is the process of dividing a single 2D user interface composition layout (comp) into multiple image files (digital assets) of the graphical user interface (GUI) for one or more electronic pages. It is typically part of the client side development process of creating a web page and/or web site, but is also used in the user interface design process of software development and game development.

Contents

The process involves partitioning a comp in either a single layer [image file format] or the multi-layer native file format of the graphic art software used for partitioning. Once partitioned, one would save them as separate image files, typically in GIF, JPEG or PNG format in either a batch process or one at a time. Multi-layered image files may include multiple versions or states of the same image, often used for animations or widgets.

Practical usage

Slicing is used in many cases where a graphic design layout must be implemented as interactive media content. Therefore, this is a very important skill set typically possessed by "front end" developers; that is interactive media developers who specialize in user interface development.

Slices may be produced and used in several different ways. Before tableless web design, sliced images were held together precisely with html tables. Modern interactive page layout includes extensive use of Cascading Style Sheets (CSS) and semantic markup. Tables may be used for compatibility with rarer older web browsers that are incapable of processing modern tableless coding accurately.

Slicing is exclusively used for bitmap images. Vector images are usually processed by media-playing plugin applications and contained within native multimedia file formats such as X3D, SWF, SVG or PDF files.

Benefits

Slicing reduces work loads and computer data storage space requirements to needing only the part of a dynamic image that changes instead of the whole image. If the slice is on a transparent multi-layered image, it can be reused in multiple parts of an image without changing the background.

On the web, slicing breaks up one large image into many smaller ones, which reduces "page weight" or load time considerably[ citation needed ]. Advanced methods of slicing can be used to further compress the amount of data needed to download to the user's computer in order for the web page to display correctly. Techniques such as repeating background images mean that one small image can be downloaded from the web server only once and then be instructed (via a CSS) to repeat by the markup language, shifting the work load from the web server onto the client's computer. Certain performance issues can be raised, however they are typically negligible compared with today's technology and trends of web design shifting towards rich media websites that typically require high bandwidth connectivity and recent computing hardware.

In offline electronic media, individually sliced sections of a 2D image can be used to decrease the local computer processing requirements to change a section of that image.

Tools

Quite a few industry standard programs offer the abilities to automatically slice a layout directly into tables using built in functions. These are outlined below:

Recent versions of these programs have improved ability to convert artwork directly into CSS, albeit an unorthodox method since the algorithms rely heavily on absolute positioning (for example), which can render (display) inconsistently across modern web browsers.

Alternatives

Slicing is mainly used for 2D computer graphics with single-layered interfaces. Multi-layered interfaces may use slices, but may also use vector graphics (including 3D models) with the drawback of added (most often unnoticeable) rendering time and with the advantage of more options and flexibility in altering the appearance of the individual image. These alternate individual images are commonly referred to as sprites.

See also

Related Research Articles

Graphic design Process of visual communication

Graphic design is the process of visual communication and problem-solving through the use of typography, photography, iconography and illustration. The field is considered a subset of visual communication and communication design, but sometimes the term "graphic design" is used synonymously. Graphic designers create and combine symbols, images and text to form visual representations of ideas and messages.

Adobe Photoshop Raster graphics editing software

Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for Windows and macOS. It was originally created in 1988 by Thomas and John Knoll. Since then, the software has become the industry standard not only in raster graphics editing, but in digital art as a whole. The software's name has thus become a generic trademark, leading to its usage as a verb although Adobe discourages such use. Photoshop can edit and compose raster images in multiple layers and supports masks, alpha compositing and several color models including RGB, CMYK, CIELAB, spot color, and duotone. Photoshop uses its own PSD and PSB file formats to support these features. In addition to raster graphics, Photoshop has limited abilities to edit or render text and vector graphics, as well as 3D graphics and video. Its feature set can be expanded by plug-ins; programs developed and distributed independently of Photoshop that run inside it and offer new or enhanced features.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating markup then they are also expected to be up to date with web accessibility guidelines.

Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online content. Desktop publishing software can generate layouts and produce typographic-quality text and images comparable to traditional typography and printing. Desktop publishing is also the main reference for digital typography. This technology allows individuals, businesses, and other organizations to self-publish a wide variety of content, from menus to magazines to books, without the expense of commercial printing.

Adobe Illustrator Vector graphics editor

Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Inc. Originally designed for the Apple Macintosh, development of Adobe Illustrator began in 1985. Along with Creative Cloud, Illustrator CC was released. The latest version, Illustrator CC 2020, was released on October 24, 2019 and is the 24th generation in the product line. Adobe Illustrator was reviewed as the best vector graphics editing program in 2018 by PC Magazine.

Adobe Fireworks bitmap and vector graphics editor

Adobe Fireworks is a discontinued bitmap and vector graphics editor, which Adobe acquired in 2005. Fireworks is made for web designers for rapidly creating website prototypes and application interfaces. Its features include slices, which are segments of an image that are converted to HTML elements, and the ability to add hotspots, which are segments of an image that are converted to hyperlinks. It is designed to integrate with other Adobe products such as Adobe Dreamweaver and Adobe Flash. It was available as either a standalone product or bundled with Adobe Creative Suite. Older versions were bundled with Macromedia Studio.

Graphic arts processes and techniques for making images that depend upon line and not color to render the design

A category of fine art, graphic art covers a broad range of visual artistic expression, typically two-dimensional, i.e. produced on a flat surface. The term usually refers to the arts that rely more on line or tone than on colour, especially drawing and the various forms of engraving; it is sometimes understood to refer specifically to printmaking processes, such as line engraving, aquatint, drypoint, etching, mezzotint, monotype, lithography, and screen printing. Graphic art further includes calligraphy, photography, painting, typography, computer graphics, and bindery. It also encompasses drawn plans and layouts for interior and architectural designs.

IrfanView Image viewer

IrfanView is an image viewer, editor, organiser and converter program for Microsoft Windows. It can also play video and audio files, and has some image creation and painting capabilities. IrfanView is free for non-commercial use; commercial use requires paid registration. It is noted for its small size, speed, ease of use, and ability to handle a wide variety of graphic file formats. It was first released in 1996.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

Graphic designer person who assembles images, typography or motion graphics to create a piece of design

A graphic designer is a professional within the graphic design and graphic arts industry who assembles together images, typography, or motion graphics to create a piece of design. A graphic designer creates the graphics primarily for published, printed or electronic media, such as brochures (sometimes) and advertising. They are also sometimes responsible for typesetting, illustration, user interfaces, and web design. A core responsibility of the designer's job is to present information in a way that is both accessible and memorable.

A number of vector graphics editors exist for various platforms. Potential users of these editors will make a comparison of vector graphics editors based on factors such as the availability for the user's platform, the software license, the feature set, the merits of the user interface (UI) and the focus of the program. Some programs are more suitable for artistic work while others are better for technical drawings. Another important factor is the application's support of various vector and bitmap image formats for import and export.

Page layout Part of graphic design that deals in the arrangement of visual elements on a page

Page layout is the part of graphic design that deals in the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.

The following tables compare general and technical information for a number of HTML editors.

Tableless web design is a web design method that avoids the use of HTML tables, for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.

Graphic art software

Graphic art software is a subclass of application software used for graphic design, multimedia development, stylized image development, technical illustration, general image editing, or simply to access graphic files. Art software uses either raster or vector graphic reading and editing methods to create, edit, and view art.

Helicon Filter proprietary commercial and shareware photo editing software program

Helicon Filter, also referred to as Helicon, Filter, or as HF, was a proprietary commercial and shareware photo editing software program for Microsoft Windows, similar to such programs as Adobe Photoshop and GIMP, developed and published by Helicon Soft Ltd. Unlike these other programs, Helicon Filter is designed primarily to edit and improve existing photos and not for graphics creation. Helicon Filter's interface also differs from other programs in that compact toolbars and menus containing editing tools are replaced with labeled "filter" tabs, each tab containing labeled edit options specific to a single aspect of the picture. Although some editors used to Photoshop-style programs may initially find this layout unfamiliar and unlike the standard toolbar layout, beginners and those who don't recognize the standard icons generally find this very helpful for getting through the editing process.

Vision Mobile Browser mobile Browser

Vision was a mobile browser developed by Novarra Inc. that ran on Java Platform, Micro Edition. It was first released in 2002, and the final release was in 2009.

Chasys Draw IES is a suite of applications including a layer-based raster graphics editor with animation, vista-style icon support and super-resolution via image stacking, a multi-threaded image file converter and a fast image viewer. The whole suite is Vista UAC aware and is designed to take advantage of multi-core processors.

Responsive web design Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. Recent work also considers the viewer proximity as part of the viewing context as an extension for RWD. Content, design and performance are necessary across all devices to ensure usability and satisfaction.

The following outline is provided as an overview of and topical guide to web design and web development, two very related fields: