Створюємо веб-дизайн на тему коміксів, Photoshop, HTML+CSS (Частина 1)

1

Від автора: на цей раз я підготував цікавий підручник для будь-якого рівня знань. Тут, у частині 1, ми створимо дуже оригінальну модель дизайну для фанатів коміксів. Ми «з нуля» зробимо розмітку блогу, а щоб все виглядало приголомшливо, скористаємося декількома прийомами з Photoshop. Потім, в частині 2, ми дізнаємося, як розділити його на шари, закодувати і підготувати для конвертації в блозі по темі CMS. Ви готові?

Деталі підручника

Програма: Adobe Photoshop

Версія: CS5 (можна будь-яку)

Складність: Середня

Приблизний час виконання: 3 години

веб дизайн комикс

скачать исходники

Перед початком

Давайте почнемо! Для швидкості викладу я опущу пояснення основ (зразок того, як створити шар-маску або відредагувати обробники або векторну фігуру). Вам потрібно мати поняття про Шарах, Направляючих, Векторні маски й шар-маски, Кистях, інструмент Перо, і вміти працювати з друкарською розміткою тексту (Символи та Параграфи).

Активи цього підручника:

Фігури «сонячні промені»

«Коміксові» шрифти з Font Squirrel (Komika Title і Komika Text)

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

Заголовок з логотипом, пошукової смугою та посилання на соціальні мережі, крім основної навігаційної колонки.

Банер з представленими постами – зверніть увагу, як текст поста розміщений поверх зображення у «словесному міхурі» (talk bubble) для підкреслення «коміксової» стилю.

Область контенту зі списком посад розташовується в двох колонках і містить асоційовану картинку, а текст також представлений у «словесному міхурі».

Нижній колонтитул зі списком категорій блогу, архівом, популярними постами і останніми коментарями, а також інформацією про копірайт.

веб дизайн

Крок 1: Встановлюємо документ

Відкрийте Photoshop, скачайте шаблон photoshop’у 12 колонок з 960 Grid System або створіть новий документ в 960px і намалюйте кілька Направляючих/Guides на лівому та правому краях.

Збільшити робочу область, щоб подивитися, як вона виглядає при більш високому дозволі, а також збільшіть висоту. Я встановлюю розміри документа на 1420px ширини та висоти 1200 px. Нарешті перейдіть на Шар/Layer > Новий шар-заливка/New Fill Layer > Щільний колір/Solid Color…) і встановіть чорний (#000000) тло полотна.

веб дизайн

Крок 2: Фон заголовка

Накресліть горизонтальну Лінійку/Guide приблизно в 450px від верхнього краю, ми буде використовувати її в якості Застосувавши інструмент Прямокутник/Rectangle, накресліть широкий прямокутник, скориставшись в якості переднього тла цим кольором (#AA0001). Потім застосуйте до прямокутника чорно-білу Шар-маску з градієнтом/Gradient Layer Mask для того, щоб приховати його нижню частину.

Підказка: ніколи не користуйтеся Шаром з градієнтом/Gradient Layer для фонів, тому що при збільшенні висоти полотна (звичайна практика в веб-дизайні) фон викривляється.

фон заголовка

Крок 3: Додаємо візерунок фону

Відкрийте з ресурсів Паперовий візерунок/Paper Texture, Скопіюйте/Copy і Paste/Paste його над шаром з червоним градієнтом. Масштабуйте його для того, щоб вмістити в межі моделі і змініть Режим накладання/Blending Mode шару на Лінійний випалювання/Linear Burn. Ми розкладемо його на шари як велике фонове зображення, але для більш високого дозволу нам потрібно зробити майстерне поєднання краю паперу з чорним фоном, для цього за допомогою інструменту Затемнення/Burn затемніть області, близько розташовані до лівого і правого країв паперової текстури. Можете використовувати велику м’яку Кисть/Brush (0% Твердість/Hardness).

Правильно організуйте шари – покладіть обидва шару (Папір/Paper і Прямокутник/Rectangle) в папку під назвою «Header Bg» (заголовок).

узор фона

Крок 4: Сонячні промені

Продовжимо робити модель дизайну в стилі коміксів, давайте додамо кілька смуг сонячного світла для створення драматичного фону логотипу.

Відкрийте форми «Sunburst» (сонячні промені) з активів. В інструменті Довільна форма/Custom Shape виберіть свою улюблену форму для сонячних променів і намалюйте їх поверх шару з червоним градієнтом. Помістіть форму ближче до лівого краю шаблону в 960 пікселів (щоб бачити кордону, покажіть направляючі). Застосуйте до шару «Sunburst» Шар-маску з радіальним градієнтом/Radial Gradient Layer Mask (білу в центрі і чорну по краях). Змініть Непрозорість шару/Layer Opacity на 50%. На вибір: використовуючи неоднорідну Кисть/Brush, помалюйте чорним кольором поверх Шару-маски/Layer Mask для створення злиття сонячного світла і фону.

солнечные лучи

Крок 5: Півтон/Halftone

Для посилення ефекту «комиксовости» стилю додамо по фону заголовка кілька плям з Півтонами/Halftone. Створіть новий шар поверх «Sunburst» і відтворіть там кілька чорних і білих Хмар/Clouds (Фільтр/Filter > Відтворити/Render > Clouds/Clouds). Потім перейдіть у Фільтр/Filter > Оформлення/Pixelate > Кольоровий півтон/Color Halftone. Змініть Режим накладання/Blending Mode шару «Halftone» (півтон) на Множення/Multiply і додайте в нього Шар-маску/Layer Mask > Приховати все/Hide All. Потім, використовуючи велику і м’яку Кисть/Brush (колір: білий, Непрозорість/Opacity і …Заливка/Flow на 75%), намалюйте кілька областей шару-маски так, щоб зробити видимими тільки саму невелику частину шаблону півтонів.

полутон

Крок 6: Заголовок

Зараз фон заголовка у вас вже готовий, так що давайте додамо логотип. Спочатку намалюйте референтну напрямну приблизно в 180 px під верхньою межею, логотип не повинен перебувати під нею. Скористайтеся шрифтом «Komika Title» з активів, напишіть заголовок сайту («Comicastic»), розмір шрифту/Font Size: 68pt, колір фону переднього плану: #FFB401. Потім додайте ще текстових елементів, на зразок знаків оклику або слоганів білого кольору (розмір шрифту 16pt).

Потім за допомогою інструмента » Вільне трансформування/Free Transform поверніть текст на кілька градусів вліво, щоб він виглядав менш офіційно. Спробуйте в результаті отримати щось, схоже на зображення внизу, але пам’ятайте про те, що не можна розміщувати елементи нижче напрямної лінії. В кінці помістіть всі ці шари в папку з назвою «Logo» (логотип).

заголовок

Крок 7: Стилі шару з логотипом

Додайте через Стиль шару/Layer Style > …Накладення градієнта/Gradient Overlay (#EA9403 – #FFC501) Обведення/Stroke (розмір:1px, …Внутрішня/Inside, #FCB600) і …Тінь/Drop Shadow (чорний, 50% Непрозорість/Opacity, Відстань/Distance і Розмір/Size: 2px) до шару логотипу «logo». Скористайтеся таким же стилем для слогана, але змініть кольори Накладення градієнта/Gradient Overlay на #EDEDED — #FFFFFF, а обведення – на білий (#FFFFFF). Якщо ви помістили в логотип знак оклику, можете спробувати перетворити його у фігуру (Шар/Layer > Текст/Type > Конвертувати фігуру/Convert to shape) і трохи спотворити, як показано в самому низу зображення.

слой логотип

Банер популярних постів

Крок 8: Фон

Скористайтеся інструментом Заокруглений прямокутник/Rounded Rectangle (радіус 5px), щоб намалювати широкий прямокутник через весь банер нижче логотипу, як показано на зображенні внизу, висоту прямокутника виберіть самі, я встановив свою на 250px. Потім застосуйте Накладення градієнта/Gradient Overlay (кольори: #DA7E00 – #F0AD00, кут-90°) і Обведення/Stroke (колір: #F2AA00, розмір: 1px, місцезнаходження: всередині). Додайте до нього Стилі шару/Layer Styles.

фон

Крок 9: Змінюємо верхній банер

Застосуйте інструмент Прямої вибір/Direct Selection (A) до свого нового прямокутника із закругленими кутами, візьміть точки верхнього лівого кута і посуньте їх вправо (для акуратного пересування можна використовувати курсори). Потім посуньте праві нижні точки на кілька пікселів вліво.

верхний баннер

Крок 10: Додаємо контейнер для ковзної картинки

Тепер, використовуючи інструмент Прямокутник/Rectangle, намалюйте сірий прямокутник всередині жовтого банера (приблизно 630px на 250px), можна залишити нижню частину сірого прямокутника в декількох точках від низу жовтого банера для створення ефекту out-of-bounds (за межами). Додайте Обведення/Stroke (розмір: 1px, місцезнаходження: всередині, колір: #FFFFFF) і Тінь/Drop Shadow (колір: #000000, непрозорість:50%, відстань: 0px, Розсіювання/Spread: 0px, розмір: 5px) і спробуйте розмістити прямокутник, як показано на зображенні внизу. Нарешті, покладіть обидва шару (сірий і жовтий прямокутники) в папку з назвою «Top Banner» (верхній банер).

контейнер

Крок 11: Основна навігація

Використовуючи сімейство шрифтів «Komika Text», впишіть навігацію сторінки праворуч угорі верхнього банера, встановіть розмір шрифту на 18px і колір: #FFFFFF. Покладіть її в папку під назвою «Pages Navigation» (навігація сторінок), переконайтеся, що ця папка знаходиться за «Top Banner» (верхнім банером). Потім за допомогою інструменту Заокруглений прямокутник/Rounded Rectangle (радіус: 3px, колір: #EFA800), намалюйте прямокутник прямо за першим словом навігації, назвіть шар «Selected Tab» (обрана закладка). Далі за допомогою інструменту Прямої вибір/Direct Selection (A) посуньте точки внизу ліворуч, як показано на зображенні внизу. Далі застосуйте до шару «Selected Tab» Накладення градієнта/Gradient Overlay (кольори: #F0A900 – #FEBF00, кут-90°). Якщо хочете, можете додати до тексту навігації дуже легку Тінь/Drop Shadow (колір: #000000, непрозорість: 25%).

навигация

Крок 12: Додаємо зображення банерів

Щоб показати справжній приклад, вставте в банер будь-яке зображення. Якщо зображення більше прямокутника, можна використовувати Обтравочную маску/Clipping Mask, для цього вставити зображення поверх сірого прямокутника, потім Опції/Option / Alt – Клацання між двох шарів, таким чином ви обмежите зображення прямокутником, і обрізка не знадобиться.

изображения баннеров

Крок 13: Управління банером

Виберіть інструмент Довільна фігура/Custom Shape і виберіть одну з стрілок, намалюйте пару штук – одну поряд з іншого, обидві вказують вліво. Потім Застосуйте/Apply до обох Накладення градієнта/Gradient Overlay (#6D0004 – #980000) і Обведення/Stroke (розмір: 1px, місцезнаходження: всередині, колір: #B20002). Покладіть обидва покажчика в папку з назвою «Prev» (попередній) і, притримуючи Command/Ctrl використовуючи Керування вільним трансформированием/Free Transform Controls, трохи згинайте стрілки. Потім скопіюйте папку та перейменувати її в «Next» (наступний), перемістити вправо від банера і перейдіть в Правка/Edit > Трансформування/Transform > Відобразити по горизонталі/Flip Horizontal, щоб змінити його напрямок. Нарешті, помістіть обидві папки «Next» і «Prev» в нову папку з назвою «Controls» (елементи управління).

Управление баннером

Крок 14: Ефект при проведенні мишею

Тепер дублюйте папки «Next» і «Prev» і застосуйте до стрільцям інший стиль шару для створення ефекту при проведенні над ними мишею. Я копіюю Стиль шару/Layer Style з знаку оклику заголовка.

Эффект при проведении мышью

Крок 15: Деталі півтонів

Таким же чином, як в Кроці 5, створіть Шар півтонів/Halftone Layer над жовтим банером. Вибравши шар «Halftone» (півтон), натисніть Command/Ctrl – клацання над жовтим банером, потім Command/Ctrl+Shift+I для запобігання вибору, потім видаліть виходить за межі. Змініть Режим накладання/Blending Mode шару «Halftone» на Накладення/Overlay і Непрозорість/Opacity на 25%. Нарешті, додайте маску шару/Layer Mask > Приховати все/Hide All і з допомогою великої м’якої білої кисті помалюйте над кількома областями шару-маски для того, щоб зробити видимими лише деякі частини шаблону.

Детали полутонов

Крок 16: «Словесний міхур» популярної статті

Тепер пора додати область вмісту популярного посту. Для цього за допомогою інструменту Довільна фігура/Custom Shape пошукайте «словесні бульбашки» з закругленими кутами (Rounded Cornered) і Прямокутний «словесний міхур»/Rectangular talking bubble. Намалюйте їх поверх банера «Featured Image» (основне зображення) і додайте справа, як показано внизу. До проектування будь-яких з цих властивостей вам потрібно провести невелике дослідження на тему, чи можливо досягти цього ефекту, навіть якщо ви не знаєте, як кодувати, то можете пошукати існуючі бібліотеки Ajax (JQuery / MooTools) і подивитися, що вже зроблено і працює, а потім адаптувати свою модель до існуючої бібліотеці.

Потім, використавши інструмент Прямої вибір/Direct Selection (A), трохи трансформуйте форму міхура. Нарешті, застосування Тінь/Drop Shadow (колір: #000000, непрозорість: 25%, відстань: 5px, Розсіювання/Spread: 0px, Size: 10px).

Словесный пузырь

Крок 17: Текст популярного поста

Пора додати до популярного посаді заголовок і анотацію. Для заголовка використовуйте «Komika Title», 18pt. #680001. Для тексту скористайтеся Komika Text Tight», розмір: 16pt, колір: #1B1B1B. Помістіть шари тексту прямо в центрі, як показано на зображенні внизу.

Текст популярного поста

Крок 18: Блок для коментарів і мета-тегів поста

Теперьсделайте інший міхур, на цей раз меншого розміру, використовуйте в якості фону переднього плану цей колір: #9C0001 і визначте стиль шару Обведення/Stroke (колір: #D00000, розмір: 1px, розташування: всередині), як показано на зображенні внизу, потім додайте кількість коментарів з допомогою шрифту «Komika Title», колір: #FFFFFF і розмір: 24pt. І слово «Comments» (коментарі) шрифтом «Komika Title», розмір: 12pt, колір: #FFB301.

Нарешті, додайте маленький мета-текст під анотацією поста шрифтом «Tahoma», розмір: 10pt, колір: #1B1B1B. Якщо для вставки мета-тексту недостатньо місця, можна використовувати інструмент Прямої вибір/Direct Selection для збільшення висоти блоку зі «словесним бульбашкою» популярного посту.

Підказка: ніколи не трансформуйте елемент Векторний закруглений кут/Vector Rounded Corner за допомогою інструмента » Вільне трансформування/Free Transform з photoshop’у, так ви исказите кут, вибирайте точки, які потрібно змістити, за допомогою інструменту Прямої вибір/Direct Selection, а потім посуньте їх.

Блок для комментариев и мета-тэгов поста

Крок 19: Фон заголовка популярного поста

Скопіюйте фон міхура популярного посту, приховайте тінь, змінити колір заливки на жовтий (#FFC001) і Растрируйте/Rasterize його. Потім за допомогою інструменту Вибір прямокутної області/Rectangular Marquee Selection, виберіть весь жовтий міхур під рядком заголовка, потім Видаліть/Delete зазначене. Далі при вибраному шарі «Bubble Title заголовок міхура) додайте лінію рамки, натисніть Command/Ctrl над векторної маскою «Bubble Background» (фон міхура). Потім перейдіть в Правка/Edit > Модифікація/Modify > Contract і встановіть значення на 1px. Нарешті, натисніть Command/Ctrl+Shift+I для інверсії вибору і видаліть його.

Настав час встановити всі пов’язані з верхнім банером елементи, розкладені по папках, і, якщо хочете, додати більше деталей. Я пририсовываю жовту лінію між анотацією посту і мета-текстом.

Фон заголовка

Основний вміст

Крок 20: Фон вмісту

Тепер давайте займемося фоном основного вмісту: створіть папку з назвою «Page Content» (вміст сторінки) і намалюйте білий (#FFFFFF) Прямокутник із закругленими кутами/Rounded Rectangle Corner (радіус: 5 px) висотою в кілька пікселів (якщо початковий розмір полотна стає до цього часу занадто маленьким, можна збільшити його розмір, тільки переконайтеся, що його верхня межа знаходиться на місці).

Фон контента

Крок 21: Зображення для поста

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

Намалюйте два квадрата (шириною приблизно в 3 колонки) і помістіть їх, як на зображенні внизу. Виконайте те ж, що Крок 12 – додайте кілька зображень над квадратами, використовуючи їх як Відсічні маски/Clipping Masks. Нарешті, виберіть квадрат і визначте йому стиль шару Обведення/Stroke (колір: #FFB801, розмір: 1px, місцезнаходження: всередині).

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

Изображение для поста

Крок 22: Додаємо заголовки і категорії посад

Намалюйте два широких прямокутника, один жовтий (#F2AA00) і другий нижче – білий з жовтою рамкою (#FFB401). Над жовтою смугою напишіть заголовок поста за допомогою «Komika Title», колір: #670003, розмір: 18pt. А на білій смузі напишіть назви категорій з допомогою «Komika Text Tight» розмір: 13pt, кольори: #212121 для посилань і #670003 положення, коли миша прибрана.

заголовки и категории постов

Крок 23: Анотація мета-текст поста

Знову намалюйте над картинкою і жовтою смугою «словесний міхур», зробіть заливку кольором: #333333 з обведенням в 1px (колір: #6969690, а також застосувати Тінь/Drop shadow, як ми робили до того на банері. Потім додайте зразок тексту анотації з допомогою «Komika Text Tight» розмір: 14pt, колір: #FFFFFF, приклад мета-тексту за допомогою «Tahoma» 10pt колір #979797, а якщо хочете, і лінію між обома текстами (#4B4B4B).

мета-текст поста

Крок 24: Закінчуємо основний вміст

Щоб закінчити цей розділ, додайте «міхур» з коментарями, повторюючи в основному процес з Кроку 18. Потім розкладіть все по папках; я називаю папку з постом «A post». Потім продублюйте її (Command/Ctrl+Перетягування/Drag) і додайте праворуч. Повторіть те ж саме з двома або трьома рядками посту, як показано внизу на зображенні. Збільшіть висоту білого фону настільки, щоб він підходив до всього посту всередині.

основное содержимое

Крок 25: Кут сторінки з контентом

Щоб підсилити враження «комиксовости», ми додаємо простий «загин» сторінки білого фону внизу праворуч.

Спочатку намалюйте чорний Трикутник/Triangle в нижньому правому куті (можна використовувати інструмент Перо/Pen), потім продублюйте його і посуньте трикутник, зробивши його «відбиттям» чорного, можна залити цю копію будь-яких відрізняється кольором. Далі згинайте другий трикутник, зробивши його трохи хвилястим. Потім застосуйте до деформованого трикутника Накладення градієнта/Gradient Overlay з допомогою красивої суміші квітів: (#9C0001 – #FE0000 – #9C0001) і змініть кут згідно з кутом загину, в даному випадку – 108 градусів. Далі за допомогою М’якої кисті/Soft Brush (чорний, непрозорість і заливка на 50%) намалюйте кілька тіней в новому шарі за деформованим трикутником. Якщо хочете, додайте до деформованого трикутника кілька точок для заокруглення кінчика, як показано в самому низу наведеного зображення. Нарешті, складіть всі пов’язані з загином шари в папку з назвою «Page Curl» (загин сторінки). Тримайте її під рукою, тому що пізніше ми будемо нею користуватися.

Угол страницы с контентом

Крок 26: Фон нижнього колонтитула

Ми майже закінчили, спочатку створюємо папку з назвою «Footer» (нижній колонтитул) і переконаємося, що вона знаходиться під папкою «Page Content» (вміст сторінки), всередині неї малюємо червоний (#9C0001) коло, потім застосовуємо гаусівських розподілу розмиття/Gaussian Blur радіусом щонайменше 65px. Потім трансформуємо отриманий розмитий коло так, щоб він підходив до обмежуючим напрямних.

Фон нижнего колонтитула

Крок 27: Фоновий сонячне світло

Тепер з допомогою інструменту Довільна фігура/Custom Shape виберіть одну з фігур сонячного світла і намалюйте її в середині чорною, потім знизьте непрозорість до 50%. Потім додайте шаблон півтонів над червоним мерехтливим колом, приховайте його з допомогою шару-маски, а покажіть тільки деякі його частини. Нарешті, знизьте непрозорість червоного кола до 50%.

Фоновый солнечный свет

Крок 28: Фон вмісту нижнього колонтитула

Ми додамо в нижній колонтитул звичайні елементи блогу, такі як категорії і архів.

Тепер зробимо фон для елементів нижнього колонтитула, намалюйте Заокруглений прямокутник/Rounded Rectangle (радіус: 5px) колір:#1A1A1A шириною приблизно в 3 колонки і встановіть його Заливки/Fill на 50%. Можете створити ще копії, щоб він підійшов до 4 блоків нижнього колонтитула.

Фон содержимого нижнего колонтитула

Крок 29: Фон вмісту нижнього колонтитула — загин

Виберіть перший прямокутник (тут вже можна видалити інші). Потім продублюйте папку «Page Curl» (загин сторінки) і помістіть її всередині папки «Footer», змінити її так, щоб вона підходила до нижнього правого кута прямокутника, потім змініть колір градієнта на інші відтінки сірого. Нарешті, додайте шар прямокутника до стилю Обведення/Stroke (1px, всередині, #242424).

Фон содержимого нижнего колонтитула

Крок 30: Категорії

Тепер додайте назву розділу, в даному випадку це «Категорії», «Categori», за допомогою «Komika Title», розмір: 14px колір: #F2AA00. Використовуйте напрямні для того, щоб визначити відправну лінію заголовка зробіть їх щонайменше у 20 px нижче закінчення фону сторінки з вмістом. Потім додайте кілька рядків як зразки категорій, використовуючи «Komika Text Tight», розмір: 16px, колір: #FFFFFF, і червоний (#EC000A) в якості кольору для ефекту проведення мишею. Як додаткову характеристику ефекту проведення мишею додайте маленьку жовту (#FFB301) стрілку з допомогою інструменту Довільна фігура/Custom Shape. Складіть всі шари в папку з назвою «Footer Element» (нижній колонтитул).

Категории

Крок 31: Дублюємо розділ нижнього колонтитула

Продублюйте папку «Footer element» і посуньте її вправо, змініть на цей раз слова «Архів» («Archives»).

Потім знову продублюйте папку, але на цей раз збільште напівпрозорий фон і зробіть його в два рази ширше, вгорі напишіть назви для «Popular Posts» (популярні пости), «Latest Posts» (останні пости) і «Recent Comments» (останні коментарі), для першого застосуйте жовтий колір, а для двох інших – сірий. Як ви здогадалися, це та ж функціональність, що і у панелі з закладками. Потім додайте маленький жовтий трикутник, щоб відзначати вибрану закладку.

колонтитул

Крок 32: Вміст панелі з закладками

Так як цей розділ складатиметься переважно з списків посад, давайте додамо їх, в основному це комбінація шрифтів «Komika Title» і «Komika Text Tight» різних кольорів (див. скріншот нижче). Перший рядок стане зразком обраного (проведенням мишею) пункту, тут за текстом додайте чорний (#000000) прямокутник із закругленими кутами й шар-маску Горизонтальний градієнт/Horizontal Gradient (чорно-білий).

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

Содержимое панели с закладками

Крок 33: Пошукове поле

Настав час додати кілька укладають штрихів. Давайте почнемо з області пошуку. Створіть папку з назвою «Search Bar» (пошукове поле) поверх створіть Заокруглений прямокутник/Rounded Rectangle (радіус: 3px, колір: #000000 з ефектом Обведення/Stroke розміром в 1px, розташування: всередині, колір: #7C0000) в якості поля для введення і маленький прямокутник для кнопки пошуку; скопіюйте Стиль шару/Layer Style обраного пункту основної навігації та вставте його в кнопку пошуку. Для отримання цієї кнопки білим кольором напишіть поверх неї слово «Go!» (пошук) і застосувати ту ж Тінь/Drop Shadow, що в тексті основної навігації (повторне використання стилів шарів економить багато часу). У полі введення напишіть слово «Looking for something»(шукаю чого-небудь), застосувавши «Komika Text Tight» колір: #F9A600.

Потім за всіма верствами всередині «Search Bar» (пошукового поля) додайте Прямокутник/Rectangle, залийте його темно-червоним кольором #380001 (заливка: 50%) і застосуйте Обведення/Stroke, взявши цей колір: #890101. Конвертуйте всі в Смарт-об’єкт/Smart Object і застосуйте до нього Шар-маску/Layer Mask > Приховати все/Hide All, закінчите маску відбитим чорно-білим градієнтом для створення ефекту, показаного внизу на зображенні.

Поисковое поле

Крок 34: Іконки соціальних мереж

Повторіть процес створення фону пошукового поля, але на це раз використовуйте поле меншої висоти і з дещо зміненим кольором Обведення/Stroke (#860001). Потім напишіть «Follow us» (слідуйте за нами) з допомогою «Komika title» та вставте усі потрібні вам іконки, можна використовувати міні-іконки з активів. Не забудьте розкласти шари по папках.

Иконки социальных сетей

Крок 35: Навігація нижнього колонтитула і інформація про копірайті

Для закінчення роботи на сьогодні давайте додамо навігацію нижнього колонтитула. Визначте межі розділу з допомогою білої лінії, прихованої під маскою відбитого чорно-білого градієнта. Напишіть посилання навігації шрифтом Arial, розмір 10px, колір: #515151 і виберіть ефект проведення мишею жовтим кольором: #F2AA00. Потім додайте текст копірайту, вирівнявши його праворуч.

Навигация нижнего колонтитула

Крок 36: От і все!

В кінці двічі перевірте, що всі верстви знаходяться у відповідних папках.

слои