Головна » Photoshop » Дизайн інтерфейсу Web 2.0 у Photoshop

    Дизайн інтерфейсу 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%.

    Підручник закінчиться тут. Як ви збираєтеся використовувати цей дизайн повністю залежить від вас. Дещо змінюючи розмір і кольори, можна використовувати його як веб-заголовки або кнопки. Ось приклад.

    Заголовок веб-сайту

    Кнопки веб-сайту

    Завантажити навчальний посібник