Slicing (web design)

Slicing (web design)

In web development, slicing is the process of dividing a single web page user interface composition layout (web page comp) into multiple image files (digital assets) of the graphical user interface (GUI) for one or more web 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.

The process involves partitioning a web 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 a web site. Therefore, this is a very important skill set typically possessed by "front end" developers; that is web 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 web 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 use 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.


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.


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 ImageReady (Discontinued after CS2, functionality from ImageReady ported into CS3)
* Adobe Photoshop
* Macromedia Fireworks (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.

ee also

* Web development
* Software development
* Separation of presentation and content
* Image editing
* Graphic image development

Wikimedia Foundation. 2010.

Игры ⚽ Нужно решить контрольную?

Look at other dictionaries:

  • Tableless web design — Cascading Style Sheets CSS Animations Dynamic CSS Comparison of layout engines Comparison of stylesheet languages Internet Explorer box model bug CSS Zen Garden The Zen of CSS Design CSSTidy Style sheet Tableless web design Holy Grail (web… …   Wikipedia

  • Slicing — may refer to: * Slicing, the mechanical process, see Cutting * Slicing (web design), a web design technique * Program slicing, a set of software engineering methods * Object slicing, an object oriented programming technique * Array slicing, an… …   Wikipedia

  • Page layout — is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page. Beginning from early illuminated pages in hand copied books of the Middle Ages and proceeding down to intricate modern magazine and… …   Wikipedia

  • Image editing — For the uses, cultural impact, and ethical concerns of image editing, see Photo manipulation. For the process of culling and archiving images, see Digital asset management. A colorized version of originally black and white photo, colorized using… …   Wikipedia

  • CorelDRAW — X5 under Windows 7 Developer(s) Corel Stable release X5 / February 23, 2010; 20 months ago ( …   Wikipedia

  • Badminton — infobox sport name = Badminton imagesize = 200px caption = The Danish badminton player Peter Gade union = Badminton World Federation nickname = first = 18th century registered = clubs = contact = No team = Single or doubles mgender = category =… …   Wikipedia

  • Jason Voorhees — is a fictional character from the Friday the 13th series of slasher films. He first appeared in Friday the 13th (1980), as the son of camp cook turned murderer Mrs. Voorhees, portrayed by Ari Lehman. Created in combination by Victor Miller, Ron… …   Wikipedia

  • West Liberty Foods — Infobox Company company name = West Liberty Foods, L.L.C. company company type = Private company foundation = West Liberty, Iowa (1996) location = West Liberty, Iowa key people = Ed Garrett, President and CEO industry = Meat Packing products =… …   Wikipedia

  • Missouri University of Science and Technology — Motto Salus Populi (Latin, The Welfare of the People) Established 1870 …   Wikipedia

  • RNA interference — (RNAi) is a mechanism that inhibits gene expression at the stage of translation or by hindering the transcription of specific genes. RNAi targets include RNA from viruses and transposons (significant for some forms of innate immune response), and …   Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”