In fields employing interface design skills, slicing is the process of dividing a single 2D

user interface In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine f ...

composition Composition or Compositions may refer to: Arts and literature *Composition (dance), practice and teaching of choreography *Composition (language), in literature and rhetoric, producing a work in spoken tradition and written discourse, to include v ...

layout Layout may refer to: * Page layout, the arrangement of visual elements on a page ** Comprehensive layout (comp), a proposed page layout presented by a designer to their client * Layout (computing), the process of calculating the position of obje ...

(

comp Comp, COMP or Comps may refer to: Places In England: * Comp, Kent In France: * Comps, Drôme * Comps, Gard * Comps, Gironde * Comps-la-Grand-Ville * Comps-sur-Artuby Arts, entertainment, and media ;Music *Accompaniment, especially in jazz ...

) into multiple image files (

digital asset A digital asset is anything that exists only in digital form and comes with a distinct usage right. Data that do not possess that right are not considered assets. ''Digital assets'' include but are not exclusive to: digital documents, audible ...

s) of the

graphical user interface The GUI ( "UI" by itself is still usually pronounced . or ), graphical user interface, is a form of user interface that allows users to interact with electronic devices through graphical icons and audio indicator such as primary notation, inste ...

(GUI) for one or more

electronic page Pagination, also known as paging, is the process of dividing a document into discrete pages, either electronic pages or printed pages. In reference to books produced without a computer, pagination can mean the consecutive page numbering to indi ...

s. It is typically part of the

client side Client-side refers to operations that are performed by the client in a client–server relationship in a computer network. General concepts Typically, a client is a computer application, such as a web browser, that runs on a user's local compute ...

development process of creating a web page and/or

web site A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and Wikipe ...

, but is also used in the

user interface design User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the ...

process of

software development Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and bug fixing involved in creating and maintaining applications, frameworks, or other software components. Software development invol ...

and

game development Video game development (or gamedev) is the software development, process of developing a video game. The effort is undertaken by a video game developer, developer, ranging from a single person to an international team dispersed across the globe. ...

. The process involves partitioning a comp in either a single layer mage file formator the multi-layer native

file format A file format is a standard way that information is encoded for storage in a computer file. It specifies how bits are used to encode information in a digital storage medium. File formats may be either proprietary or free. Some file formats ...

of the

graphic art software Graphic art softwareBob Gordon, Maggie Gordon ''The Complete Guide to Digital Graphic Design '', 15 March 2002 pp:44 is a subclass of application software used for graphic design, multimedia development, stylized image development, technical il ...

used for partitioning. Once partitioned, one would save them as separate image files, typically in

GIF The Graphics Interchange Format (GIF; or , see pronunciation) is a bitmap image format that was developed by a team at the online services provider CompuServe led by American computer scientist Steve Wilhite and released on 15 June 1987. ...

JPEG JPEG ( ) is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and imag ...

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

animation Animation is a method by which image, still figures are manipulated to appear as Motion picture, moving images. In traditional animation, images are drawn or painted by hand on transparent cel, celluloid sheets to be photographed and exhibited ...

s or widgets.

Practical usage

Slicing is used in many cases where a

graphic design Graphic design is a profession, academic discipline and applied art whose activity consists in projecting visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdiscipli ...

layout must be implemented as

interactive media Interactive media normally refers to products and services on digital computer-based systems which respond to the user's actions by presenting content such as text, moving image, animation, video and audio. Since its early conception, various fo ...

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 table An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 1993 ...

s. Modern interactive page layout includes extensive use of

Cascading Style Sheet Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technol ...

s (CSS) and

semantic markup Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers a ...

. Tables may be used for compatibility with rarer older

web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...

s that are incapable of processing modern tableless coding accurately. Slicing is exclusively used for

bitmap image In computing, a bitmap is a mapping from some domain (for example, a range of integers) to bits. It is also called a bit array or bitmap index. As a noun, the term "bitmap" is very often used to refer to a particular bitmapping application: th ...

Vector images Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...

are usually processed by media-playing plugin applications and contained within native

multimedia Multimedia is a form of communication that uses a combination of different content forms such as text, audio, images, animations, or video into a single interactive presentation, in contrast to tradition ...

file formats such as

X3D X3D is a royalty-free ISO/IEC standard for declaratively representing 3D computer graphics. File format support includes XML, ClassicVRML, Compressed Binary Encoding (CBE) and a draft JSON encoding. X3D became the successor to the Virtual Re ...

, SWF, SVG or

PDF Portable Document Format (PDF), standardized as ISO 32000, is a file format developed by Adobe in 1992 to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems. ...

files.

Benefits

Slicing reduces work loads and

computer data storage Computer data storage is a technology consisting of computer components and Data storage, recording media that are used to retain digital data (computing), data. It is a core function and fundamental component of computers. The central pro ...

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 Transparency, transparence or transparent most often refer to: * Transparency (optics), the physical property of allowing the transmission of light through a material They may also refer to: Literal uses * Transparency (photography), a still, ...

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 In computer systems a loader is the part of an operating system that is responsible for loading programs and libraries. It is one of the essential stages in the process of starting a program, as it places programs into memory and prepares them ...

considerably. Advanced methods of slicing can be used to further compress the amount of data needed to

download In computer networks, download means to ''receive'' data from a remote system, typically a server such as a web server, an FTP server, an email server, or other similar system. This contrasts with uploading, where data is ''sent to'' a remote s ...

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 A web server is computer software and underlying hardware that accepts requests via HTTP (the network protocol created to distribute web content) or its secure variant HTTPS. A user agent, commonly a web browser or web crawler, initiate ...

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 Interactive media normally refers to products and services on digital computer-based systems which respond to the user's actions by presenting content such as text, moving image, animation, video and audio. Since its early conception, various f ...

websites that typically require high

bandwidth Bandwidth commonly refers to: * Bandwidth (signal processing) or ''analog bandwidth'', ''frequency bandwidth'', or ''radio bandwidth'', a measure of the width of a frequency range * Bandwidth (computing), the rate of data transfer, bit rate or thr ...

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: *

Adobe Photoshop Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for Microsoft Windows, Windows and macOS. It was originally created in 1988 by Thomas Knoll, Thomas and John Knoll. Since then, the software has become the indu ...

* Sketch *

Adobe Fireworks Adobe Fireworks (formerly Macromedia Fireworks) was a bitmap and vector graphics editor, which Adobe acquired in 2005. Fireworks was made for web designers for rapidly creating website prototypes and application interfaces. Its features included ...

(Previously published by

Macromedia Macromedia, Inc., was an American graphics, multimedia, and web development software company (1992–2005) headquartered in San Francisco, California, that made products such as Flash and Dreamweaver. It was purchased by its rival Adobe Systems ...

) * Adobe ImageReady (Discontinued after CS2, functionality from ImageReady ported into Photoshop since CS3) *

GIMP GIMP ( ; GNU Image Manipulation Program) is a free and open-source raster graphics editor used for image manipulation (retouching) and image editing, free-form drawing, transcoding between different image file formats, and more specialized task ...

* Jasc Paint Shop Pro 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 2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models (such as 2D geometric models, text, and digital images) and by techniques specific to them. It may refer to the branch of computer ...

with single-layered interfaces. Multi-layered interfaces may use slices, but may also use

vector graphics Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display a ...

(including

3D model In 3D computer graphics, 3D modeling is the process of developing a mathematical coordinate-based representation of any surface of an object (inanimate or living) in three dimensions via specialized software by manipulating edges, vertices, an ...

s) 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.

External links

alistapart.com article on CSS Sprites compared to slices

Things To Remember, While Coding A Website, To Make It Search Engine Friendly

Slicing tool for HTML + CSS email

Tool for putting sliced images together to HTML and CSS
{{DEFAULTSORT:Slicing (Web Design) Web design User interfaces Graphic design

Practical usage

Benefits

Tools

Alternatives

See also

External links