В Інтернеті є дуже багато підручників і посібників, які навчать вас, як ефективно використовувати дизайн Web 2.0. Хоча більшість цих посібників корисні, водночас вони вбивають оригінальність веб-дизайну. Наприклад, більшість «довідників» кажуть вам, що Web 2.0 — це глянсовий бейдж, смугастий фон і жирні шрифти. Результат? Є незліченні сотні дизайнів із значками, смугами та жирними великими літерами… і вони нічим не відрізняються один від одного. Неважливо, який дизайн ви створюєте: веб 2.0, веб 1.0 чи веб 75.0, усе зводиться до того, щоб бути оригінальним і таким, що запам’ятовується.

Однак, якщо ви не можете знайти щось особливо оригінальне, що символізує ваш дизайн, «безпечніше» слідувати сучасним тенденціям веб-дизайну. Ось дуже невеликий фрагмент макета веб-дизайну та те, як перетворити звичайний макет на макет Web 2.0.

Ось що ми мали…

14.png

І ось що ми збираємося зробити…

13.png

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

Почніть із прямокутної форми із заокругленими кутами та малювання… прямокутника.

1.jpg

банер

Перше, що нам потрібно зробити, це надати нашому прямокутнику трохи глибини та життя. Дотримуючись принципів веб-дизайну 2.0, тільки тіні, контури та світлові градієнти дадуть нам цей ефект. Тож перейдіть до стилів шару та нанесіть м’яку тінь. Ми використовували #96aed6 Для цієї мети.

2.png

Щоб надати фігурі трохи глибини (щоб вона не виглядала плоским об’єктом), додайте м’яку внутрішню тінь більш темного тону (ми використовували #304f82 )

3.png

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

4.png