Slicing (interface design) GudangMovies21 Rebahinxxi LK21

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

    Adobe Photoshop
    Sketch
    Adobe Fireworks (Previously published by Macromedia)
    Adobe ImageReady (Discontinued after CS2, functionality from ImageReady ported into Photoshop since CS3)
    GIMP
    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 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


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


    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

Kata Kunci Pencarian:

slicing interface design
Slicing | PDF | Information Technology | Computing

Slicing | PDF | Information Technology | Computing

Program Slicing and its Applications

Program Slicing and its Applications

PPT - Interface Design: Slicing PowerPoint Presentation, free download ...

PPT - Interface Design: Slicing PowerPoint Presentation, free download ...

Slicing (interface design)

Slicing (interface design)

GitHub - YasaKafi/slicing_ui

GitHub - YasaKafi/slicing_ui

Big changes through small steps - Design histories

Big changes through small steps - Design histories

Intermediate Lesson 14 - Customised slicing techniques - learnbylayers

Intermediate Lesson 14 - Customised slicing techniques - learnbylayers

Slicing UI Session Jobify | Figma

Slicing UI Session Jobify | Figma

Slicer 3 Interface Design Design a new interface

Slicer 3 Interface Design Design a new interface

Slicing interface to slice the .STL file | Download Scientific Diagram

Slicing interface to slice the .STL file | Download Scientific Diagram

Slicing interface to slice the .STL file | Download Scientific Diagram

Slicing interface to slice the .STL file | Download Scientific Diagram

3D Visualization and slicing interface. Users can visualize imaging ...

3D Visualization and slicing interface. Users can visualize imaging ...