Почта Об авторе Поиск Почта

Пообщаемся?
Ответь на вопрос
Как учителя должны обращаться к учащимся
Всего ответов: 524

Создание дизайна сайта в GIMP 

Сегодня мы научимся создавать дизайн сайта в GIMP на примере дизайна фан-сайта мультфильма Big Buck Bunny — широко известного мультфильма, который был создан исключительно с использованием свободного ПО, такого, как 3D редактор Blender, GIMP и других Open Source приложений.

В результате урока мы нарисуем вот такой светлый и позитивный дизайн сайта:

Создание дизайна сайта в GIMP

Для начала скачаем ZIP архив с необходимыми файлами с Яндекс.Диска.

В архиве вы найдете все необходимые для создания дизайна сайта в GIMP картинки, шрифт Helios, который понадобится нам для заголовков и меню, а также, готовый макет для GIMP в формате XCF (файл source.xcf), который был нарисован мной.

Фон сайта (Background)

1. Откроем файл 960_grid_12_col.xcf, разлинованный в системе сеток 960gs. Создадим новый слой во всю площадь макета и зальем его цветом #F9F7E7. Создадим еще один слой и нарисуем на нем прямоугольное выделение во всю ширину документа и высотой 800 пикселей. Зальем выделение градиентом цветами от #c0e1df (верхняя граница градиента) до #F9F7E7 (нижняя граница):

Фон сайта (Background)

2. Применим к градиентному фону шум (Фильтры > Шум > Шум RGB) со следующими параметрами:

Фильтры - Шум

3. Теперь вставим в документ кляксу (файл klyaksa.jpg), инструментом "Выделение смежных областей" (волшебная палочка) выделим белый фон и удалим его. Поместим кляксу в верхнюю правую часть макета и применим параметры цвета (Цвет > Тон-Насыщенность):

Выделение смежных областей

Сделаем кляксу непрозрачной (15% непрозрачности). Фон сайта готов, приступим к шапке.

Шапка сайта

4. Вставим в макет логотип (файл logo.jpg), волшебной палочкой удалим белый фон и поместим его в первые 3 колонки системы сеток в верхней части документа:

Вставим в макет логотип

Повысим резкость логотипа на 30 (Фильтры > Улучшение > Повысить резкость).

Повысим резкость логотипа

Установите в систему шрифт из архива (Helios.otf). Перезапустите GIMP, предварительно сохранив текущий результат.

5. Нарисуем поиск. Справа, напротив логотипа нарисуйте на новом слое прямоугольное выделение шириной в 3 с половиной колонки со скругленными углами (радиус закругления 20), высотой 32 пиксела. Залейте вы деление цветом #FFFFFF. Затем, не снимая выделение, уменьшите его на 1 пиксел (Выделение > Уменьшить) и залейте снова цветом #F3F3F3.

Нарисуем поиск

6. Кнопка поиска "OK". Создайте новый слой и нарисуйте на нем круглое выделение, размером как на картинке. Залейте его цветом #72685d, уменьшите на 1 пиксел, залейте еще раз цветом #FFFFFF, затем еще раз уменьшите на 1 пиксел и снова залейте #72685d. Напишите на кнопке нашим шрифтом "Helios" слово "OK" (Размер текста 20 пикселей, буквы в верхнем регистре). В результате получится такая кнопочка:

Создайте новый слой и нарисуйте на нем круглое выделение

7. Напишите пункты меню. Шрифт Helios, размер 20 пикселов, цвет #72685d. Отбейте пункты друг от друга 6-ю пробелами, напечатав между ними вертикальный слеш:

пункты меню

Второе слово в меню сделайте подчеркнутым, для того, чтобы показать выделение пункта при наведении мышкой.

Баннер сайта

8. Сделайте выделение со скругленными углами (радиус закругления 5 пикселов) по ширине сетки, высотой 400 пикселов. Создайте новый слой и залейте его цветом #8BA9AB, уменьшите выделение на 1 пиксел и залейте остальную часть белым цветом (#FFFFFF). Сделайте непрозрачность прямоугольника 35%.

Баннер сайта

9. Вставьте картинку bbb-splash.jpg и уменьшите ее таким образом, чтобы она оказалась в центра данного прямоугольника. Сверху и снизу можно удалить лишнее прямоугольным выделением:

Вставьте картинку

10. Тень под баннером. Нарисуем на новом слое круглое выделение, высотой 40 пикселов, шириной в 10 колонок сетки, посередине. Зальем его черным цветом:

Тень под баннером

Снимем выделение и размоем слой фильтром "Гауссово размывание", радиусом 30:

Гауссово размывание

Удалим лишнее (чтобы тень не наезжала на баннер) и сделаем непрозрачность слоя с тенью 30%.

сделаем непрозрачность слоя

С баннером покончено.

Основные разделы сайта

11. Напишем заголовок разделов под баннером. Шрифт Helios, размер 35 пикселов, цвет шрифта #72685d. Написание в верхнем регистре (с зажатой Shift).

заголовок разделов

12. Создадим новую группу слоев и создадим в ней новый слой, на котором нарисуем выделение с закругленными углами (радиус закругления 5), шириной в 4 колонки сетки, высотой 140 пикселей. По примеру баннера, что рисовали выше, зальем выделение цветом #8BA9AB, уменьшите выделение на 1 пиксел и зальем остальную часть белым цветом (#FFFFFF). Сделаем непрозрачность слоя 35%. Точно также как для баннера, под новым прямоугольником сделаем тень круглым выделением в той-же группе слоев и размоем ее гауссовым размыванием (радиус размывания 15/15):

Создадим новую группу слоев

Вставим картинку (bunny.jpg) и подгоним под размер прямоугольника, как показано на картинке. Лишнее обрежем.

13. Ниже напишем заголовок пункта:

заголовок пункта

Подзаголовок "О КРОЛИКЕ" будет выглядеть следующим образом:

Подзаголовок

14. Под текстом, на новом слое сделаем выделение высотой 3 пиксела, шириной в 4 колонки и зальем цветом #72685d. Закругление можно убрать.

Далее напишем текст раздела:

текст раздела

15. Напишем "ПОДРОБНЕЕ" ниже текста раздела. Размер шрифта 20, цвет #fe7e01, написание в верхнем регистре. Рядом создадим круглое выделение на новом слое, радиусом 28 пикселов. Зальем его цветом #C4C4C2. Не снимая выделения, уменьшим его на 1 пиксель и снова зальем цветом #F9F7E7 (вспоминаем кнопку поиска). После всех потуг с уменьшением, уменьшим выделение еще на 1 пиксель и, наконец, зальем оставшуюся часть выделения градиентом цветами от #FE7E01 (нижний цвет градиента) до #FFA955 (верхний цвет градиента).

зальем оставшуюся часть выделения градиентом

16. Вставим в макет стрелку (изображение arrow-right.png), выделим волшебной палочкой контур стрелки и зальем белым цветом. После чего, уменьшим стрелку и поместим в наш кружок:

Вставим в макет стрелку

Сделаем непрозрачность слоя со стрелкой 80%.

17. Помните, мы создавали группу для элементов разделов? Это не просто так. Теперь выберите эту группу на панели слоев и создайте ее копию. Переместите (с зажатой Shift) копию в следующую четверку колонок. Потом еще раз:

выберите эту группу на панели слоев и создайте ее копию

Замените у всех элементов текст и картинки, согласно изображению. Дополнительные картинки находятся в архиве.

Замените у всех элементов текст и картинки

18. Прежде, чем приступить к подвалу (футеру) сайта, доработаем верхний баннер. Сделайте круглое выделение, радиусом 150 пикселей, залейте его белым цветом, затем уменьшите выделение на 10 пикселов и удалите содержимое. После этого уменьшите выделение еще на 10 пикселов и снова залейте белым цветом. Поместите получившееся изображение в центр баннера.

доработаем верхний баннер

Снова откройте стрелку (файл arrow-right.png) и выделением отрежте хвостик. Поместите ее в центр кружка.

Поместите ее в центр кружка

Установите непрозрачность стрелки и кружка 35%.

Подвал (футер) сайта

19. Нарисуйте прямоугольное выделение во всю ширину макета, высотой от самого низа до разделов, залейте выделение на новом слое цветом #515046 и примените фильт "Шум RGB".

Подвал (футер) сайта

20. Напишите заголовки в подвале, с разбиением по 3 колонки. Можно провести горизонтальную направляющую, чтобы заголовки были на одном уровне.

Напишите заголовки в подвале

Ниже напишем пункты с нижним подчеркиванием. Шрифт Arial, размер 14 пикселей, цвет #b7b2ac.

напишем пункты

21. Создадим группу слоев и поместим в нее заголовок и пункты. Продублируем также, как группу с элементами выше и напишем уникальный текст для каждого раздела подвала, как на макете в начале урока (ФАЙЛЫ, АРХИВЫ, КАТЕГОРИИ, ПОСЛЕДНИЕ ЗАПИСИ).

22. Снова вставим кляксу, поместим ее в правую часть футера и установим следующие параметры цвета (Цвет > Тон-Насыщенность):

Тон-Насыщенность

23. В середине 3-й колонки сделаем вертикальное выделение шириной в 1 пиксель, высотой 260 пикселей. Зальем его цветом #423E39. Рядом, на этом же слое создадим таке же выделение и зальем его на этот раз цветом #66675E.

вертикальное выделение

Сотрем края получившейся разделительной линии вверху и внизу мягкой резинкой достаточно большого диаметра.

Сотрем края

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

продублируем линию

Источник: http://webdesign-master.ru/blog/web-design/527.html



Поиск
Новости RSS

Полезные ссылки:

Cайт лицея г. Кирово-Чепецка

Электронный дневник

Помощь при Интернет угрозах

ФИПИ

Общероссийский рейтинг школьных сайтов

Дистанционное обучение Фоксфорд

Конструктор сайтов - uCoz
Обратная связь

Контактные данные:
Фирюлина Надежда Витальевна

e-mail: firyulinanv@yandex.ru, firyulinanv@mail.ru

МБОУ "Лицей", г. Кирово-Чепецк,
Кировская обл. Сайт Лицея
Схема проезда на Яндекс Картах

24.10.2017   10:52

Победитель конкурса - Лучший сайт педагога 2017
Информация о сайте
© 2011-2017
Использование материалов данного
сайта только с указанием ссылки
на источник.


На связи: 3
Зашли в гости: 3
Пользователей: 0


Для добавления необходима авторизация