Стиль графики Web 2.0

3:45 пп | Искусство Автор: kampolWaMpIr


Web 2.0 сама по себе является технологией разработки в web. Но если в технологию вносятся какие-то изменения, значит и в то, как будет представляться пользователям (потребителям) эта технология, тоже нужно внести какие-то изменения. Года три назад в моде были красочные сайты, с кучей всяких картинок, даже тех, которые ну вообще не по теме. Но сейчас всё изменилось.

В этом уроке я расскажу о некоторых фишках оформления сайта в стиле Web 2.0. Вообще я сначала хотел написать этот урок для одного сайта по гимпу, но почему-то передумал.

Элементы Web 2.0

1. Градиент. Его можно заливать каким угодно способом. Хоть по вертикали, хоть по горизонтали, хоть радиально. Всё зависит от фантазии, и от того, какой лучше будет смотреться в том или ином месте.
2. Плавность линий. Никаких острых углов. Если они есть, то стоит их закруглить. Даже небольшое закругление может придать сайту объёма. Но с этим тоже не нужно увлекаться.
3. Очень острые углы остались у так называемых стикеров, или наклеек. Которые сделаны так, как будто приклеены. Чаще всего они имеют форму многогранной звёздочки. О её создании я тоже расскажу.
4. Тени. Они придают объём сайту, и он не кажется плоским. Но с тенями тоже не нужно сильно увлекаться. Потому что если сайт в белых тонах, то из-за теней он может стать «грязным».
5. Прозрачность. Очень красиво смотрятся полупрозрачные элементы, по другому ещё их называют стеклянными. Примеры: Aero стиль оформления в Windows 7, или оформление моего сайта. Примечание: У полупрозрачных элементов практически не бывает тени.
6. Блики и игра света. О бликах рассказывать нет смысла, это нужно показывать. Игра света – это создание виртуальных источников света, и тут уже учитываются тени, способ заливки градиентом и т.д. Если не соблюсти правильность потоков света, то на сайте получится каша, и глаз уже не будет радоваться. Пример неправильного использования: Источник света наверху. Вы заливаете элемент градиентом например из белого в серый, серый при этом вы сделали наверху. Логично же получается что более светлая часть должна быть наверху, потому что когда вы идёте по улице летом то у вас греет голову, а не пятки. Это всё учитывать тоже нужно.

Выполняем.

Запускаем гимп и для каждого пункта будем создавать отдельный слой. Размеры и другие параметры я буду указывать отдельно.

Градиент.

Создаём слой. Размер примерно 200х200. Нажимаем по иконке градиента и проводим линию снизу вверх.

Получаем вот такую картинку:

В современном оформление используются в основном такие сочетания: белый-чёрный, серый-белый, серый-чёрный. Очень редко используются другие цвета, в основном для выделения чего-то важного, например кнопок сохранить и т.п.
Теперь рассмотрим другие варианты заливки. Для начала посмотрите на панель настроек инструмента Градиент:

Режим трогать не будем.
Непрозрачность надеюсь и так понятно.
Градиент – это сочетание цветов, которыми будете заливать. Каждый можете рассмотреть сами а так же скачать дополнительные.
Смещение – указывает на сколько нужно сместить основной цвет в сторону фонового. Экспериментируйте.
Форма – тут представлены различные варианты, какими можно залить фон. Их мы рассмотрим далее.
Повтор – сам не знаю к чему он, т.к. не пользуюсь.
Форма заливки.
Чаще всего используются: Линейная, Радиальная, Очертания(редко).
Вертикальную линейную заливку я уже показал, так же делается горизонтальная:

Радиальная (заливается от центра к краям):

Закругление углов.

Самый простой способ сделать элемент с закруглёнными углами – это выделением.
Создадим новый слой произвольного размера, цвет фона- прозрачный. Берём инструмент прямоугольное выделение и рисуем произвольный прямоугольник:

теперь идём в настройки инструмента Прямоугольное выделение

Тут ставим галочку напротив Закруглить углы и перемещая ползунок изменяем степень закруглённости углов нашего выделения. Для наглядности я залил его градиентом:

Многогранная звёздочка.

В принципе её можно нарисовать кисточкой, но её название я не помню, а найти проблематично. Её создание и способ оформления зависит от фантазии.

Тени.

Создание теней – процесс сам по себе очень трудоёмкий. Самый простой способ – это использование стандартного плагина. Создадим новую картинку. Я использовал предыдущую, только залил её полностью, а не градиентом. Идём в Фильтры(верхняя панель основного окна)=> Свет и тень=> Отбрасываемая тень… Если вы хотите что бы тень была вокруг объекта, то Смещение по X и по Y ставите равное 0, радиус размывания по вкусу в пикселях. Непрозрачность – понятно что такое. Лучше поставить 100% и редактировать её после создания тени. Если эффект тени для вас кажется слабым, то можно продублировать слой с тенью который называется Drop Shadow. Вот что у меня получилось со смещением 0 радиусом=25, непрозрачности 100% и двух слоях с тенью, т.е. я сделал одну копию слоя.

Если не делать копию слоя, то эффект получается более натуральным, и опять же можно регулировать непрозрачность слоёв для получения нужного результата.

Прозрачные элементы.

Это, на мой взгляд, самое простое. Создаётся любой элемент, в оформление в основном используются прямоугольники с закруглёнными углами. И во вспомогательной панели изменяется непрозрачность этого слоя на нужную величину. Тут пример я даже показывать не буду. Самое главное сохранять нужно в формате .png и у слоя во время создания должен быть прозрачный фон, иначе эффекта прозрачности просто напросто не будет.

Блики и игра света.

Для создания бликов есть куча плагинов, они находятся в Фильтры=>Свет и тень. Но ими тоже увлекаться не нужно. Игра света – это тот же самый градиент. Учитывать нужно и то, что я описывал в начале статьи. Вот пример использования плагина Отблеск:

Для коррекции света можно скачать дополнительные плагины.
Ну на этом думаю всё. Если есть вопросы – спрашивайте, с радостью отвечу. :)

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: +3 (from 3 votes)
Стиль графики Web 2.0, 10.0 out of 10 based on 2 ratings

No related posts.