RSS
 

Скелет и оболочка интерфейса

26 Сен

В этом уроке показана техника, которую я использовал для левой и правой ручки моего front interface FxZone. Эта техника позволяет создать одну форму из двух разных образцов, где для каждого использован свой эффект слоя.

tutorials_ifx07_hdr

Web-дизайн. Создание интерфейса в фотошоп

tutorials_ifx07_img02 num01Вначале вам предстоит создать основной или первоначальный образец [Original Pattern]. Создав такой образец, загрузите выделение щёлкнув (нажимая Ctrl) на имени этого слоя. Растяните это выделение с помощью команды Select>Modify>Expand на 2 px.

Создайте новый слой и залейте выделение временным цветом, например белым. Этот второй слой будет служить оболочкой интерфейса.
tutorials_ifx07_img03 num02Примените свои эффекты для двух образцов. Помните, что первоначальный образец будет служить скелетом интерфейса и только часть его будет видна. Я использовал aqua effect для скелета (fig. 02a) и 3D bevel effect (fig. 02b) для оболочки. Удостоверьтесь в том, что слой оболочки расположен выше слоя скелета.
tutorials_ifx07_img04 num03Затем мы удаляем некоторые участки нашей оболочки интерфейса, раскрывая слой расположенный ниже. Выберите инструмент elliptical marquee tool и располагая его в местах, показанных на рисунке слева последовательно нажимайте клавишу delete.[Если требуется добавить окружность, начните перетаскивать инструмент выделения и нажмите клавишу Shift, а нажав одновременно клавишу пробела во время перетаскивания вы переместите выделение].
tutorials_ifx07_img05 num04Затем мы применим эффект ломтика (фаски) на краях удалённых частей оболочки интерфейса. Используйте инструмент elliptical marquee tool, чтобы выделить одну из кромок оболочки, как показано на рисунке слева (fig. 04a). Убедитесь, что вы захватили выделением маленькую часть края.

Скопируйте содержимое внутри выделения и вставьте на новый слой. Загрузите выделение на новом слое с кромкой щёлкнув (нажимая Ctrl) на имени этого слоя и примените вертикальный, линейный градиент (fig. 04b). Цвета для градиента будут соответственно светлее и темнее основного цвета оболочки интерфейса. Я применил чёрно-белый градиент, поскольку основной цвет оболочки тёмно-серый.

После этого вернитесь к слою с оболочкой (fig. 04c) и повторите этот процесс для других кромок оболочки интерфейса.
tutorials_ifx07_img01 num05Дважды щёлкните на имени слоя оболочки, чтобы отобразить диалоговое окно Layer Style, после чего выберите эффект Stroke [Обводка] и установите чёрный цвет — 1 pixel, для выполнения обводки оболочки. Выберите drop shadow [тень] и примените этот эффект для завершения урока.
Источник: fxzone.eyeball-design.com
 
Комментариев нет

Опубликовано в рубрике Уроки Photoshop

 

Прокомментировать