Slicing (web design)
Encyclopedia
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 asset
s) of the graphical user interface
(GUI) for one or more electronic page
s. 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
.
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 animation
s or widgets
.
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 browser
s that are incapable of processing modern tableless coding accurately.
Slicing is exclusively used for bitmap image
s. 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.
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. 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. Such 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 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.
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.
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
.
Things To Remember, While Coding A Website, To Make It Search Engine Friendly
2D computer graphics
2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models and by techniques specific to them...
user interface
User interface
The user interface, in the industrial design field of human–machine interaction, is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the...
composition
Composition (visual arts)
In the visual arts – in particular painting, graphic design, photography and sculpture – composition is the placement or arrangement of visual elements or ingredients in a work of art or a photograph, as distinct from the subject of a work...
layout
Page layout
Page layout is the part of graphic design that deals in the arrangement and style treatment of elements on a page.- History and development :...
(comp
Comprehensive layout
In graphic design and advertising, a comprehensive layout or comprehensive, usually shortened to comp, is the page layout of a proposed design as initially presented by the designer to a client, showing the relative positions of text and illustrations before the specific content of those elements...
) into multiple image files (digital asset
Digital asset
A digital asset is any item of text or media that has been formatted into a binary source that includes the right to use it. A digital file without the right to use it is not an asset. Digital assets are categorised in three major groups which may be defined as textual content , images and...
s) of the graphical user interface
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
(GUI) for one or more electronic page
Electronic page
An electronic page is a term to encompass the grouping of content between basic breaking points in presentations or documents that originate or remain as visual electronic documents. This is a software file and recording format term in contrast to electronic paper, a hardware display technology...
s. 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
User interface design
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction...
process of software development
Software development
Software development is the development of a software product...
and game development
Game development
Game development is the software development process by which a video game is developed. Development is undertaken by a game developer, which may range from a single person to a large business. Mainstream games are normally funded by a publisher and take several years to develop. Indie games can...
.
The process involves partitioning a comp in either a single layer image file format or the multi-layer native file format
File format
A file format is a particular way that information is encoded for storage in a computer file.Since a disk drive, or indeed any computer storage, can store only bits, the computer must have some way of converting information to 0s and 1s and vice-versa. There are different kinds of formats for...
of the graphic art software used for partitioning. Once partitioned, one would save them as separate image files, typically in GIF
GIF
The Graphics Interchange Format is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability....
, JPEG
JPEG
In computing, JPEG . The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality....
or PNG format in either a batch process
Batch processing
Batch processing is execution of a series of programs on a computer without manual intervention.Batch jobs are set up so they can be run to completion without manual intervention, so all input data is preselected through scripts or command-line parameters...
or one at a time. Multi-layered image files may include multiple versions or states of the same image, often used for animation
Animation
Animation is the rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement. The effect is an optical illusion of motion due to the phenomenon of persistence of vision, and can be created and demonstrated in several ways...
s or widgets
Widget (computing)
In computer programming, a widget is an element of a graphical user interface that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given...
.
Practical Usage
Slicing is used in many cases where a graphic designGraphic design
Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...
layout must be implemented as interactive media
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, graphics, animation, video, audio, etc.-Terminology:...
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 browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s that are incapable of processing modern tableless coding accurately.
Slicing is exclusively used for bitmap image
Raster graphics
In computer graphics, a raster graphics image, or bitmap, is a data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium...
s. Vector images
Vector graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
are usually processed by media-playing plugin applications and contained within native multimedia
Multimedia
Multimedia is media and content that uses a combination of different content forms. The term can be used as a noun or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which use only rudimentary computer display such as text-only, or...
file formats such as X3D
X3D
X3D is the ISO standard XML-based file format for representing 3D computer graphics, the successor to the Virtual Reality Modeling Language . X3D features extensions to VRML X3D is the ISO standard XML-based file format for representing 3D computer graphics, the successor to the Virtual Reality...
, SWF
SWF
SWF is an Adobe Flash file format used for multimedia, vector graphics and ActionScript. Originating with FutureWave Software, then transferred to Macromedia, and then coming under the control of Adobe, SWF files can contain animations or applets of varying degrees of interactivity and function.,...
, 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 transparentTransparency (graphic)
Transparency is possible in a number of graphics file formats. The term transparency is used in various ways by different people, but at its simplest there is "full transparency" i.e. something that is completely invisible. Of course, only part of a graphic should be fully transparent, or there...
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. 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. Such techniques such as repeating background images mean that one small image can be downloaded from the web server
Web server
Web server can refer to either the hardware or the software that helps to deliver content that can be accessed through the Internet....
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 with today's technology and trends of web design shifting towards rich media websites that typically require high bandwidth
Bandwidth (computing)
In computer networking and computer science, bandwidth, network bandwidth, data bandwidth, or digital bandwidth is a measure of available or consumed data communication resources expressed in bits/second or multiples of it .Note that in textbooks on wireless communications, modem data transmission,...
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 ImageReadyAdobe ImageReadyAdobe ImageReady is a bitmap graphics editor that was shipped with Adobe Photoshop by Adobe Systems for almost ten years. ImageReady is written in the C++ programming language...
(Discontinued after CS2, functionality from ImageReady ported into CS3) - Adobe PhotoshopAdobe PhotoshopAdobe Photoshop is a graphics editing program developed and published by Adobe Systems Incorporated.Adobe's 2003 "Creative Suite" rebranding led to Adobe Photoshop 8's renaming to Adobe Photoshop CS. Thus, Adobe Photoshop CS5 is the 12th major release of Adobe Photoshop...
- Macromedia FireworksMacromedia FireworksAdobe Fireworks is a bitmap and vector graphics editor. It was originally developed using parts of xRes by Macromedia, which Adobe acquired in 2005, and aimed at web designers for rapidly creating website prototypes and application interfaces...
(Available in CS3) - 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 graphics2D computer graphics
2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models and by techniques specific to them...
with single-layered interfaces. Multi-layered interfaces may use slices, but may also use vector graphics
Vector graphics
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics...
(including 3D models) with the drawback of added (most often unnoticeable) rendering
Rendering (computer graphics)
Rendering is the process of generating an image from a model , by means of computer programs. A scene file contains objects in a strictly defined language or data structure; it would contain geometry, viewpoint, texture, lighting, and shading information as a description of the virtual scene...
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
Sprite (computer graphics)
In computer graphics, a sprite is a two-dimensional image or animation that is integrated into a larger scene...
.
See also
- Web developmentWeb developmentWeb development is a broad term for the work involved in developing a web site for the Internet or an intranet . This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development...
- Software developmentSoftware developmentSoftware development is the development of a software product...
- Separation of presentation and contentSeparation of presentation and contentSeparation of presentation and content is a common idiom, a design philosophy, and a methodology applied in the context of various publishing technology disciplines, including information retrieval, template processing, web design, web development, word processing, desktop publishing,...
- Image editingImage editingImage editing encompasses the processes of altering images, whether they be digital photographs, traditional analog photographs, or illustrations. Traditional analog image editing is known as photo retouching, using tools such as an airbrush to modify photographs, or editing illustrations with any...
- Graphic image development
External links
alistapart.com article on CSS Sprites compared to slicesThings To Remember, While Coding A Website, To Make It Search Engine Friendly