Як намалювати скляну прозору кнопку для сайту Paint.NET - уроки малювання в Paint.Net

загрузка...

Цей урок присвячений відповіді на питання, як зробити скляну прозору кнопку для сайту, використовуючи Paint.NET. Для малювання скляною прозорою кнопки будемо використовувати тільки стандартні можливості і стандартні ефекти Paint.NET. Додаткові ефекти до Paint.NET у цьому уроці нам не знадобляться.

Етап 1. Малюємо фон кнопки

Для початку створимо в Paint.NET нове зображення. Ми використовували розміри зображення 250 на 50 пікселів. І заповнимо фоновий шар зображення за допомогою інструменту "заливка" вибраним кольором. Колір для створення кнопки можна вибрати будь-який, який підходить по стилю для вашого сайту. Ми вибрали колір 007F0E - колір закоханої жаби. Тепер за допомогою інструмента виділення області прямокутної форми Paint.NET виділимо область розміром приблизно третина зображення кнопки знизу і заповнимо його іншим кольором, отриманими з основного вибраного кольору установкою параметра яскравість на 100. Розташування зазначеного параметра у палітрі кольорів Paint.NET приведено на малюнку нижче.

Тепер, скасувавши виділення, застосуємо до зображення стандартний ефект Paint.NET "гаусівських розподілу розмиття" з радіусом розмиття 10. Ефект "гаусівських розподілу розмиття" є стандартним ефектом Paint.NET і доступний з меню "Ефекти" - "Розмиття" - "гаусівських розподілу розмиття...". Отриманий результат можна побачити на малюнку вище.

Етап 2. Створимо ефект світлового відблиску

Додамо для зображення новий прозорий шар. На цьому шарі виділимо область праворуч, що дорівнює приблизно двом третинам зображення і заповнимо її за допомогою інструмента "заливка білим кольором. Тепер, скасувавши виділення, використовуємо для шару з білим прямокутником знову ефект Paint.NET "гаусівських розподілу розмиття". Радіус розмиття в цей раз зробимо більше, наприклад, 100.

Тепер створимо новий шар вище всіх існуючих, на якому за допомогою інструменту "лінія або крива" намалюємо криву лінію, приблизно так, як показано на малюнку зліва. Колір лінії не має значення, ми вибрали червоний колір для наочності. Дана лінія потрібна нам для швидкого виділення області, яка знаходиться під нею. Вибрати цю область тепер легко за допомогою інструмента "чарівна паличка".

Після того як ділянка буде виділена, потрібно перейти на шар з колишнім білим прямокутником і видалити те, що потрапляє в область виділення. Зробити це можна за допомогою клавіші Del. Тепер видимість шару з червоною лінією можна вимкнути його або просто видалити.

Тепер має сенс зробити краю відблиску плавними. Для цього використовуємо стандартний ефект Paint.NET "у русі" і застосуємо його до шару з колишнім білим прямокутником. Ефект доступний в меню "Ефекти" - "Розмиття" - "В русі...". Цей ефект має два параметри - "кут", значення цього параметра ми встановили 0, і "відстань", який ми встановили 20.

Тепер треба дещо "стиснути" білий відблиск. Для цього виділимо всі зображення на шарі з білим і за допомогою інструменту переміщення виділеної області Paint.NET змінимо розмір, що б вийшло приблизно так, як на другому знизу прикладі на малюнку вище. Останній приклад на цьому малюнку отримано зменшенням прозорості цього шару до 150.

Етап 3. Краї кнопки

Тепер трохи скруглим краю кнопки. Для цього створимо новий службовий шар вище всіх існуючих, на якому за допомогою інструменту "прямокутник із закругленими кутами" намалюємо контур, як на малюнку зліва. Колір лінії знову не має значення. Даний контур потрібен нам знову для швидкого виділення області, яка знаходиться поза нього. Вибирати область будемо знову за допомогою інструмента "чарівна паличка". Після виділення області поза контуру необхідно видалити її вміст із шарів з зеленим тлом і шару з білим. Причому для створення більшого ефекту скляній кнопки ми видалили з зеленого фону все, що потрапило в область поза контуру, не включаючи сам контур. А з білого шару видалили все, що потрапило в область поза контуру включаючи і сам контур. Після видалення областей шар з контуром можна відключити або видалити.

Аналогічну технологію, описану в цьому уроці, можна знайти англійською мовою тут.

Повернутися до розділу уроки Paint.NET на цьому сайті.

загрузка...
Намалюй разом з нами таке
Додавання коментаря

Ім'я:*
Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлера
Введіть код: *
загрузка...