Дизайн інтерфейсу Web 2.0 у Photoshop
Розуміння підручника нижче розуміння його техніки, з нею ви можете намалювати деякі графічний інтерфейс користувача для веб-сайту. Бокова навігація, кнопки, заголовки, наприклад. Всі стилі Web 2.0.
Запустіть нове полотно; будь-якого розміру. Щось більше, ніж 450x300px було б добре. Виберіть Закруглені прямокутні інструменти і намалюйте прямокутну велику, як показано на зображенні вище.
Двічі клацніть на шарі закругленого прямокутника, щоб запустити Параметри накладання. Змініть параметри для наступних стилів.
Тінь
Непрозорість: 31% Відстань: 1px Спред: 0% Розмір: 5px
Скоси і рельєф
Глибина: 100% Розмір: 0px Пом'якшення: 0px
Градієнтне накладання
Двічі клацніть Gradiant і встановіть наступні точки зупинки. Розташування: 0%, # 1378cd Розташування: 100% # 4da5f0
Інсульт
Розмір: 5px Позиція: Всередині Колір: # 54abf6
Давайте вставимо текст, лозунг, URL або щось інше. Мати його середній і вирівняти вправо, тому логотип може перебувати на лівій стороні пізніше. Давайте впишемо текст. Я використовую Lucida Sans Unicode; 55pt; гладкий; -120 для відстеження символів (міжряддя). Двічі клацніть на текстовому шарі та встановіть наступне Параметри накладання.
Накладання градієнта
Двічі клацніть Gradiant і встановіть наступні точки зупинки. Розташування: 0%, # 9ec7eb Розташування: 100% ecf6ff
Потім потрібно вставити логотип у ліву частину тексту. Я буду використовувати округлений прямокутник з радіусом 5px, щоб представити логотип. Ось це Варіант змішування налаштування для округлої прямокутної форми.
Внутрішня тінь
Непрозорість: 45% Відстань: 0px Розмір: 43px;
Скоси і рельєф
Глибина: 100% Розмір: 0px Пом'якшується: 0px Режим непрозорості: 50% ShadowMode Opacity: 100%
Градієнтне накладання
Двічі клацніть Gradiant і встановіть наступні точки зупинки. Розташування: 0% # 0e2f4a Розташування: 47% # 001a31 Розташування: 48% # 002545 Розташування: 100% # 0f4b7f
Інсульт
Розмір: 5px Двічі клацніть Gradiant і встановіть наступні точки зупинки. Розташування: 0% # 1468af Розташування: 100% # 50abf8
Дайте йому трохи глянсового ефекту. Утримуйте CTRL і клацніть лівою кнопкою миші на прямокутному прямокутнику Мініатюра шару. Коли вибрано весь округлий прямокутник, змінено на Прямокутний інструмент Marquee, тримати ALT і витягує другу половину вибраної області; так само, як на зображенні вище.
Створіть новий шар; Перетягніть його так, щоб він сидів на всіх шарах; заповнити обрану частину білим [#ffffff]; змінити непрозорість на 15%.
Підручник закінчиться тут. Як ви збираєтеся використовувати цей дизайн повністю залежить від вас. Дещо змінюючи розмір і кольори, можна використовувати його як веб-заголовки або кнопки. Ось приклад.
Заголовок веб-сайту
Кнопки веб-сайту
