Удобен за потребителя интерфейс, добре начертана графика, правилното подреждане на елементи на страницата - половината от успеха на сайта с посетителя. Бутоните за рисуване за уебсайт са малка, но важна част от работата по онлайн проект.
Инструкции
Етап 1
Опитайте да нарисувате кръгъл бутон. Методът, даден по-долу, също е универсален за създаване на лога и аватари. Рисуването не е трудно, въпреки броя на действията, които трябва да извършите.
Стъпка 2
Отворете Adobe Photoshop. Създайте нов документ, като натиснете комбинацията "Ctrl + N". Параметри на изображението 300 * 300, разделителна способност 72 ppi. Фонът по подразбиране и цветният режим са съответно бял и RGB.
Стъпка 3
Най-добре е да рисувате с вектори, така че когато бутонът е намален, качеството му да не се влошава. Изберете овалния инструмент, задръжте Shift и нарисувайте кръг от центъра.
Стъпка 4
Сега приложете някои ефекти към получения кръг. Отидете в менюто "Слоеве" - "Стил на слоя" - "Опции за смесване". Тук ще трябва да приложите градиент.
Стъпка 5
След това тук поставете отметка в квадратчето до „Embossing“, за да придадете на бутона необходимата издутина, и задайте следните параметри: стил - контурно щамповане, метод - мек разрез, дълбочина - 220%, размер - 1 пиксел, омекотяване - 5 пиксела, ъгъл - 135о без глобално осветление, височина - 32, режим на осветяване - нормален с 30% непрозрачност, режим на сянка - умножаване с 25% непрозрачност
Стъпка 6
За да придадете още по-голям обем, тук в параметрите за смесване поставете отметка в квадратчето „Сянка“и задайте следните параметри: режим на смесване - умножение, прозрачност - 40%, ъгъл - 125o при използване на глобално осветление, отместване - 5 пиксела, размер - 20 пиксела.
Стъпка 7
Резултатът от извършените действия ще бъде такова изображение, както е показано на фигурата.
Стъпка 8
Сега създайте нов слой, изберете отново „Овал“и нарисувайте кръг с по-малък радиус от първата фигура. Отворете „Опции за смесване“, поставете отметка в квадратчето до „Вътрешна сянка“и задайте параметрите: Режим на смесване - Мека светлина, Ъгъл - 125o, Отместване - 0px, Свиване - 45%, Размер - 21px.
Стъпка 9
След това, тук в опциите за смесване, поставете отметка на „Градиентно наслагване“и създайте градиент с параметрите, както е на снимката. Щракнете върху OK
Стъпка 10
След това задайте Blending Style на Radial, Scale на 124%
Стъпка 11
Сега поставете отметка в квадратчето „Stroke“и задайте следните параметри: размер - 5 пиксела, позиция - отвън, режим на смесване - нормален, непрозрачност - 100%, тип ход - градиент.
Стъпка 12
В резултат на тези действия трябва да получите нещо, което по-скоро прилича на бутон. Можете да отворите отново опциите за смесване и да експериментирате с тях.
Стъпка 13
Сега трябва да добавим бутоните за подчертаване, така че бутонът да придобие текстура на стъкло. За да направите това, създайте нов слой отново, изберете инструмента за овална селекция, създайте овал над бутона и го запълнете с бяло с помощта на инструмента за запълване. Задръжте Ctrl, щракнете върху слоя с цветния кръг, обърнете селекцията ("Избор" - "Обръщане"). Сега натиснете Delete. Овалът трябва да бъде подрязан по периметъра на кръга.
Стъпка 14
В панела "Слоеве" променете опцията "Нормално" на "Мека светлина", след това щракнете върху иконата на векторна маска и изберете инструмента за запълване - градиент. Попълнете светлината отдолу нагоре. Бутонът е почти готов.
Стъпка 15
Можете да добавите надпис към бутона. Можете също така да приложите ефекти на смесване към него, като вътрешен, външен блясък, градиент и т.н. Не се страхувайте да експериментирате, колкото повече въображение използвате в работата си, толкова по-бързо ще овладеете както самия редактор, така и уеб дизайна.
