is_реклам:

пошук, категорії та ін. показати ▼

Проста і сучасна панель навігації

Проста і сучасна панель навігації
автор опубліковано


У цьому уроці буде показано як спроектувати просту і сучасну панель навігації у вигляді акордеон-меню для використання в якості віджету-контенту веб-дизайну, або у мобільній версії веб-сайту. Ми використовуватимемо класичні інструменти і підходи у Photoshop. Метою є показати деякі дивовижні методи для створення елементів веб-дизайну. Стилізацію кольорів даної навігації легко змінити, що дозволяє неважко підігнати стиль під дизайн свого сайту.

Якщо Ви маєте якість питання щодо цього уроку, пишіть їх у коментарях.

Результат роботи

Клікнувши на кожному зображенні в пості, Ви можете переглянути його у збільшеному вигляді

Ресурси для уроку

Крок 1

Почніть зі створення нового документу в Photoshop: цій дії відповідає комбінація клавіш Ctrl + N. Створіть документ 800px на 600px по з білим фоном

Крок 2

Для зручнішого вирівнювання ми повинні встановити кілька направляючих ліній. Використовуючи діалогове вікно Нова направляюча (Перегляд -> Нова направляюча), ви зможете розмістити направляючі на полотні ідеально, з точністю до пікселя

Встановіть 4 вертикальні направляючі на таких позиціях:

  • 250px
  • 300px
  • 360px
  • 550px

Встановіть 2 горизонтальні направляючі на таких позиціях:

  • 100px
  • 510px

Крок 3

Цей крок є швидше вибірковим, все залежить від дизайну майбутнього сайту. Встановимо фон для нашої роботи, щоб зробити її більш цікавою. Ви можете використовувати інший фон (або не використовувати його взагалі) і дизайн буде виглядати теж гарно. Конкретна текстура тут використана лише для прикладу, при розробці реального проекту, потрібно враховувати дизайн сайту. Ви можете вибрати інший фон, просто використовуйте подібні методи, щоб обробити його і отримати схожий ефект.

Завантажте та відкрийте Текстуру деревини. Помістіть зображення в робочий документ.

Потрібно буде змінити розмір фонової текстури. Натисніть Ctrl + T (гарячі клавіші, що дублюють вибір пункту меню Редагування -> Вільна Трансформація). На панелі параметрів (вгорі), ви можете змінити розмір зображення, встановивши H (висоті) і W (ширині) значення 32%.

Фонове зображення, що використане в якості прикладу має кольори натурального дерева, але зробимо його чорно-білим. Для зменшення насиченості виконаємо пункт меню Зображення -> Корекція -> Зменшити кольори (або Shift + Ctrl + U)

Користуючись простим трюком, додамо чорного кольору до текстури. Створіть новий шар (Shift + Ctrl + N) над шаром з дерев'яною текстурою. Назвіть його "Чорний", це допоможе організувати роботу і швидше орієнтуватися в документі. Встановіть основний колір чорним (#000000). Виберіть пункт меню Редагування -> Виконати заливку або скористайтесь "гарячими" клавішами Shift + F5. Переконайтеся, що у діалоговому вікні Заливка параметром «Використовувати» (у вигляді випадаючого компонента) встановлений Основний колір, після чого натисніть кнопку ОК, щоб залити шар.

Зменшіть непрозорість шару приблизно до 20%, щоб дерев'яна текстура стала більш видимою
accordeon_menu_3.2

Крок 4

Створіть новий шар над шаром "Чорний" і задайте йому ім’я "Основа".

Переконайтеся, що основним кольором є чорний (#000000). Виберіть інструмент Заокруглений прямокутник (клавіша U). На панелі параметрів (вгорі), встановіть опцію Шар-фігура (вона вибрана за замовчуванням) і радіус 5px. Намалюйте прямокутник із закругленими кутами, використовуючи ліві і праві вертикальні направляючі, а також горизонтальні направляючі, щоб намалювати фігуру з максимальною точністю

Крок 5

Тепер встановимо стиль базової форми для основи нашого акордеон-меню за допомогою діалогового вікна Стиль шару.

Активуйте шар "Основа" на палітрі шарів, виберіть пункт меню Шар -> Стилі шарів -> Змішування для виклику діалогового вікна. Інший спосіб: двічі клікнути на шарі "Основа" в плаваючій палітрі Шари.

Надамо цьому шару такі ефекти: Внутрішня тінь, Зовнішнє світіння і Обводка. Параметри для кожного з цих ефектів наведені нижче.

Внутрішня тінь
У діалоговому вікні виберіть білий колір (#ffffff); за замовчуванням — колір чорний. Слід також зазначити, треба встановити режим змішування Нормальний, оскільки за замовчуванням — режим Множення.

Зовнішнє світіння
Встановіть чорний колір (#000000). За замовчуванням — колір світіння жовтий

Обводка
Тут також потрібно встановити чорний колір (#000000)

Після того, як встановили усі налаштування стилю шару, натисніть кнопку ОК, щоб застосувати зміни до шару "Основа". Після цього зменшіть непрозорість шару до 80%

Крок 6

Всі пункти меню зробимо у вигляді кнопкок, натиснувши на які користувач зможе відобразити контент, пов'язаний з пеним пунктом. Створимо 7 кнопок, першу зробимо трохи меншою за висотою і вкажемо на ній своє ім'я або назву сайту.

Створимо нову групу шарів для цих кнопок, це потрібно для кращої організації шарів в документі. Виконайте команду Шар -> Новий -> Набір шарів (або натисніть іконку у вигляді папки в нижній частині панелі "Шари"). За замовчуванням цей набір називається "Набір 1", але у веб-дизайні дуже важливо максимально структурувати свій документ. Наприклад, якщо інші будуть працювати з вашим мокапом, вони швидко зорієнтуються і знайдуть усе необхідне. Тому змініть ім'я групи на "Кнопки".

Далі, утримуючи клавішу Ctrl, натисніть на рядок шару "Основа" в палітрі шарів, щоб автоматично виділити його.

Потім створіть новий шар всередині набору "Кнопки" під назвою "Автор".

Виберіть інструмент Прямокутне виділення (йому відповідає клавіша M). Утримуючи Alt, перетягніть мишку до нижньої частини виділення, це має підігнати виділену область до форми нашої першої кнопки

Після цього, заповніть виділену область чорним кольором (#000000)

Для поточного шару використайте наступні параметри накладання градієнту


Після цього, зменшіть прозорість шару "Автор", до 15%

Тепер створимо інші кнопки, почнемо з кнопки "Про нас". Створіть новий шар (Shift + Ctrl + N) під шаром "Автор" і назвіть його "Про нас".

Як і раніше, переконайтеся, що основним кольором є чорним (#000000) і виділіть область навколо вмісту шару "Основа", утримуючи Ctrl й натиснувши на рядку шару "Основа". Далі, виберіть інструмент Прямокутне виділення (M), утримуйте Alt і знищіть із поточного виділення верхню і нижню ділянки

Заповніть виділену область основним кольором (чорним), використовуючи зручну комбінацію клавіш Alt + Backspace

Після цього, застосуйте такий самий стиль, що використовувався для шару "Автор". Просто клацніть правою кнопкою миші на стрічці шару "Автор" у палітрі шарів і виберіть пункт контекстного меню Скопіювати стиль шару, натисніть на стрічці шару "Про нас", щоб зробити його активним? клікніть правою кнопкою миші на ньому і виберіть команду Вставити стиль шару

Створіть більше кнопок, копіюючи шар «Про нас» кілька разів. Назвіть шари кнопок наступним чином: "Веб-дизайн", "Програмування", "Графічний дизайн", "Портфоліо" і "Зворотній зв'язок". Звичайно, залежно від того, що саме передбачається на сайті, ви, можливо, захочете назвати ці кнопки інакше

Крок 7

Мінімізуємо набір "Кнопки", натиснувши на маленький трикутник поруч з ім'ям групи в палітрі шарів. Цей засіб робить палітру шарів зручною для робити.

Створіть новий набір шарів з назвою "Текст" над групою "Кнопки". У цьому набору будуть всі текстові шари.

Встановіть основний колір білим (#ffffff) та виберіть інструмент Горизонтальний текст (йому відповідає клавіша T).

Вгорі на панелі параметрів виберіть шрифт Tahoma (жирний) з розміром 6.4pt і чіткий метод згладжування.

В центрі кнопки "Автор" напишіть своє ім'я або назву сайту

Після цього виконайте пункт меню Шар -> Стиль шару -> Параметри накладання, щоб відкрити діалогове вікно Стиль шару. Використаємо для текстового шару наступні опції:
Тінь

Внутрішня тінь

Накладання градієнта

Ось такий вигляд зараз має текст

Для інших кнопок достатньо продублювати цей текстовий шар (Ctrl + J) і змінити сам текст. Вирівняйте всі низви кнопок до третьої вертикальної направляючої зліва

Крок 8

Завантажте набір іконок Free iphone toolbar icons і розпакуйте його. Для дизайну у прикладі використані такі мініатюри:

  • Іконка _user.png
  • Іконка _smile_face.png
  • Іконка _pencil.png
  • Іконка _blog.png
  • Іконка _favorities.png
  • Іконка _post.png


Вставте ці PNG-файли в нову групу шарів з назвою "Іконки". Вирівняйте їх по другій вертикальній направляючій зліва.

Переконайтеся, що ви не забули задати шарам з іконками відповідні назви "Про нас", "Веб-дизайн", "Програмування"...

Ось і все! Ми зробили це!

Підсумок

Вітаємо — ви створили просте і сучасне аккордеон-меню! Ми використовували текстуру деревини, оброблену і оформлену для того, щоб створити темний і чіткий фон для нашої панелі навігації. В уроці використані класичні інструменти та методи для малювання і стилізації елементів дизайну. Сподіваюся, ви зрозуміли всі кроки і дії в цьому уроці, а якщо ні — пишіть в коментарях і ми допоможемо вирішити ваші питання. Також цікаво почути вашу думку про цей урок і побачити результати.

Автор уроку Tomas Laurinavicius. Переклад Ірини Овчиннікової.

схоже за тегами

Залишити коментар:

Яндекс цитирования UA TOP Bloggers