И вот что мы получили…

5.png

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

6.png

Помните, мы упомянули жирные буквы? В Web 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 файл