І ось що ми отримали…

5.png

Однак це не дасть нам достатньої глибини. Ми хочемо зробити цей прямокутник ще більш помітним вигнутим, оскільки він не рівномірно торкається поверхні, але додавання більше тіні за допомогою стилів шару або посилення тіні не дасть бажаного ефекту. Використовуй це горизонтальний роздільник пропонує dezinpolio.com і додайте його до середини вашої фігури, щоб вона «зникала» до кутів, як показано нижче:

6.png

Пам’ятаєте, ми згадували жирні літери? Веб 2.0 добре використовує шрифти, бажано дуже легкі для читання, трохи мультяшні та жирні. Нам було важко вибрати відповідний шрифт, і ми вирішили вибрати «Cooper Std».

7.png

Ми робимо, щоб додати дуже м'яку тінь (# 5674a7) і світловий градієнт від білого вгорі (#ffffff) до світло-блакитного (#cdd9de) ...

8.png

9.png

банер

Це дасть нам дуже милий дитячий дизайн.

10.png

Web 2.0 також має хорошу пропорцію, і в той час як дизайни особливо асиметричні, інші, так би мовити, нав’язливо симетричні. Я віддаю перевагу другому типу, так як для створення потрібно менше оригінальності і смаку, потрібно лише почуття міри. Скажімо, ми додамо кілька кнопок у нижній і бічний кут нашого дизайну…

11.png

Це добре виглядає?

12.png

Ні, це не так, тому що вкладки виглядають надто хаотично, тому ми переконаємося, що лінія лівої бічної вкладки «зустрічається» з лінією нижньої вкладки, ось так…

131.png

Тепер це виглядає пропорційно.

crystal_clear_app_ark2.png

банер

Якщо вам цікаво, чому ми пропустили крок, стилі шарів для вкладок майже ідентичні тим, які ми використовували для основного прямокутника, і те саме стосується шрифту та стилів шарів «вкладок». Для навчання ви можете завантажити файл PSD і проаналізувати процес. Пам’ятайте, що всі ці напіввидимі градієнти та контури розміром 1 піксель часто відрізняють чудовий веб-дизайн від майстерних спроб дизайну. Удачі!

завантажити файл psd