Тень в графике: создание эффекта объема для текста и элементов интерфейса. Узнайте, как использовать тень в дизайне и компьютерной графике для лучшей видимости.
Сравнивайте с английским: нажмите на абзац — оригинал откроется в окне. Кнопка EN под абзацем показывает его прямо в тексте.
Содержание
Введение
Визуальный эффект, состоящий из элемента изображения, который выглядит как тень объекта.
Visual effect consisting of a drawing element which looks like the shadow of an object
В графическом дизайне и компьютерной графике тень отсечки (drop shadow) — это визуальный эффект, состоящий из элемента изображения, который выглядит как тень объекта, создавая впечатление, что объект приподнят над расположенными за ним элементами. Тень отсечки часто используется для элементов графического пользовательского интерфейса, таких как окна или меню, а также для простого текста. Текстовая метка для значков на рабочем столе во многих средах имеет тень отсечки, поскольку этот эффект эффективно отличает текст от любого цветного фона, на котором он может находиться. Простой способ нарисовать тень отсечки для прямоугольного объекта — нарисовать серую или черную область под ним со смещением. В общем случае, тень отсечки — это копия объекта в черном или сером цвете, нарисованная в немного другом положении. Реалистичность можно повысить:
In graphic design and computer graphics, a drop shadow is a visual effect consisting of a drawing element which looks like the shadow of an object, giving the impression that the object is raised above the objects behind it. The drop shadow is often used for elements of a graphical user interface such as windows or menus, and for simple text. The text label for icons on desktops in many desktop environments has a drop shadow, as this effect effectively distinguishes the text from any colored background it may be in front of. A simple way of drawing a drop shadow of a rectangular object is to draw a gray or black area underneath and offset from the object. In general, a drop shadow is a copy in black or gray of the object, drawn in a slightly different position. Realism may be increased by:
Затемнением цветов пикселей в области тени, а не просто окрашиванием их в серый цвет. Это можно сделать, используя альфа-смешивание тени с областью, на которую она падает. Смягчением краев тени. Это можно сделать, добавив гауссовское размытие к альфа-каналу тени перед смешиванием. Внутренние тени отсечки — это тип, который рисует тени внутри элемента. Это позволяет элементу интерфейса выглядеть так, будто он углублен в интерфейс.
Darkening the colors of the pixels where the shadow casts instead of making them gray. This can be done with alpha blending the shadow with the area it is cast on. Softening the edges of the shadow. This can be done by adding Gaussian blur to the shadow's alpha channel before blending. Inset drop shadows are a type which draws the shadows inside the element. This allows the interface element to appear as if it is sunken into the interface.
Редактирование фотографий
В процессе редактирования фотографий или постобработки фотосъемки под моделью или продуктом на изображении может быть добавлена тень. Она используется для создания контраста между фоном и объектом съемки. Для добавления тени ретушеры используют графические редакторы, такие как Adobe Photoshop. Тени часто применяются в качестве визуального эффекта в электронной коммерции, чтобы улучшить представление изображений товаров и придать изображению глубину.
In photo editing or photography post production, a drop shadow may be added right beneath a model or product in the image. It is used to create contrast between the background and the subject. To add a drop shadow, retouchers use graphic editing tools like Adobe Photoshop. Drop shadows are often used as a visual effect in e commerce. This is done to improve the presentation of product images and create depth in the image.
Использование
Обычно, оконные менеджеры, поддерживающие композитинг, позволяют использовать эффекты отбрасывания тени, в то время как оконные менеджеры, не поддерживающие композитинг, — нет. В некоторых операционных системах, таких как macOS, отбрасывание тени используется для визуального разделения активных и неактивных окон. Веб-сайты могут использовать эффекты отбрасывания тени с помощью CSS-свойств `box-shadow`, `text-shadow` и `filter`. Первые два используются для элементов и текста соответственно, а фильтр `drop-shadow` применяется не только к содержимому элемента, но и позволяет поддерживать элементы сложной формы или прозрачные изображения.
Generally, window managers which are capable of compositing allow drop shadow effects, whereas incapable window managers do not. In some operating systems like macOS, drop shadow is used to differentiate between active and inactive windows. Websites are able to use drop shadow effects through the CSS properties box shadow, text shadow, and filter. The first two are used for elements and text respectively, while the drop shadow filter additionally to the element's content, letting it support oddly shaped elements or transparent images.