Доброго времени суток, уважаемые друзья! Возвращаемся на GimpArt.Org после долгого майского отсутствия-застоя. Сегодня у меня в гостях Алексей Климанов, который приготовил для Вас очень интересный урок по созданию дизайна в графическом редакторе GIMP. Больше не буду задерживать ваше внимание, передаю слово Алексею:
Здравствуйте, дорогие друзья!
Меня зовут Алексей. На протяжении нескольких лет я занимаюсь разработкой сайтов. С моими уроками по веб-разработке вы можете ознакомиться на сайте webdesign-master.ru
Сегодня вы научитесь создавать дизайн сайта в GIMP на примере дизайна фан-сайта мультфильма Big Buck Bunny — широко известного мультфильма, который был создан исключительно с использованием свободного ПО, такого, как 3D редактор Blender, GIMP и других Open Source приложений.
В результате урока мы нарисуем вот такой светлый и позитивный дизайн сайта:
Для начала скачаем ZIP архив с необходимыми файлами с Яндекс.Диска.
В архиве вы найдете все необходимые для создания дизайна сайта в GIMP картинки, шрифт Helios, который понадобится нам для заголовков и меню, а также, готовый макет для GIMP в формате XCF (файл source.xcf), который был нарисован мной.
Приступим
Фон сайта (Background)
1. Откроем файл 960_grid_12_col.xcf, разлинованный в системе сеток 960gs. Создадим новый слой во всю площадь макета и зальем его цветом #F9F7E7. Создадим еще один слой и нарисуем на нем прямоугольное выделение во всю ширину документа и высотой 800 пикселей. Зальем выделение градиентом цветами от #c0e1df (верхняя граница градиента) до #F9F7E7 (нижняя граница):
2. Применим к градиентному фону шум (Фильтры > Шум > Шум RGB) со следующими параметрами:
3. Теперь вставим в документ кляксу (файл klyaksa.jpg), инструментом «Выделение смежных областей» (волшебная палочка) выделим белый фон и удалим его. Поместим кляксу в верхнюю правую часть макета и применим параметры цвета (Цвет > Тон-Насыщенность):
854
Сделаем кляксу непрозрачной (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. Снова вставим кляксу, поместим ее в правую часть футера и установим следующие параметры цвета (Цвет > Тон-Насыщенность):
Как видим, клякса некрасиво наезжает на светлую часть сайта, выделим ее в этом месте до футера и удалим выделенное. После установим непрозрачность кляксы 20%. Результат манипуляций над кляксой в подвале:
23. В середине 3-й колонки сделаем вертикальное выделение шириной в 1 пиксель, высотой 260 пикселей. Зальем его цветом #423E39. Рядом, на этом же слое создадим таке же выделение и зальем его на этот раз цветом #66675E.
Сотрем края получившейся разделительной линии вверху и внизу мягкой резинкой достаточно большого диаметра.
Последним действием продублируем данную линию 2 раза и расположим между остальными категориями подвала, согласно сетке.
На этом у меня все, надеюсь мой урок был полезен для вас :-).
Лично от меня, огромное спасибо Алексею за предоставленный урок по созданию дизайна сайта. Хочу пожелать ему творческих успехов и развития его интернет-проекта. Очень надеюсь, что Алексей и в будущем сможет порадовать всех читателей и подписчиков моего блога новыми уроками по созданию дизайна сайта в редакторе GIMP.
На этом все. Удачи вам и до новых встреч на GimpArt.Org.
C уважением, Антон Лапшин и Алексей Климанов.
P.S. Архив с полноразмерными скриншотами из урока вы можете скачать по следующей ссылке.
Как все это потом сохранять и использовать? В смысле, это же все должно работать — ссылки, поля форм и тд. Или это рекомендация по созданию просто дизайна, на который смотришь и делаешь также с помощью разметки?
Хе… дизайн это дизайн, а не шаблон свертанный html.
чтобы ссылки работали и т.п. нужно графический дизайн сверстать!
вот.
Привет, перехожу с фотошопа на гимп, можно узнать — есть ли в программе поддержка psd?, в каком формате сохранять проект?, что бы потом без проблем его открыть и дальше работать.
Меня очень интересует Gimp, рада, что нашла Ваш сайт
Собственно вопрос в том, как сохранить? в ранних версиях вроде был пункт Сохранить в Веб — а теперь как?
А марафон кроссвордов будет?
Извените за вопрос а GIMP лучше фотошопа?
мои работы http://sv.corporationdp.net/
Чтобы сделать и создать дизайн сайта самому и бесплатно, вам достаточно просто создать свой сайт на бесплатном движке. Подбирайте тот движок, на котором вам будет легче и проще. Большинство сайтов, создаются именно на движках, в основном это WordPress, который отлично себя зарекомендовал на рынке. После того как вы придумали дизайн в голове или на листе, скачивайте движок и заливайте его на свой сервер или хостинг. Источник: http://seogrom.ru/kak-sdelat-dizajn-sajta/
очень интересно-наблюдать пошагово создание шедевров.Сколько времени у Вас ушло на создания этой статьи:столько вставленных фото?
Я просто в шоке. Оказывается даже на бесплатных программах можно делать красивые дизайны для сайта. Буду изучать Ваш блог. А то я задумал самостоятельно нарисовать дизайн для своего блога http://www.seok.com.ua. Хочется сделать что-то современное именно самому. Ну а если не получится придется обращаться к профессионалам.