Как сделать дизайн сайта в GIMP?

26 Май
как сделать дизайн сайта в gimp

Доброго времени суток, уважаемые друзья! Возвращаемся на GimpArt.Org после долгого майского отсутствия-застоя. Сегодня у меня в гостях Алексей Климанов, который приготовил для Вас очень интересный урок по созданию дизайна в графическом редакторе GIMP. Больше не буду задерживать ваше внимание, передаю слово Алексею:

Здравствуйте, дорогие друзья!

Меня зовут Алексей. На протяжении нескольких лет я занимаюсь разработкой сайтов. С моими уроками по веб-разработке вы можете ознакомиться на сайте webdesign-master.ru

Сегодня вы научитесь создавать дизайн сайта в 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 (нижняя граница):

Дизайн сайта в GIMP. Изображение 1.1

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

Дизайн сайта в GIMP. Изображение 2.1

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

Дизайн сайта в GIMP. Изображение 3.1

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

Шапка сайта

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

Дизайн сайта в GIMP. Изображение 4.1

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

Дизайн сайта в GIMP. Изображение 4.2

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

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

Дизайн сайта в GIMP. Изображение 5.1

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

Дизайн сайта в GIMP. Изображение 6.1

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

Дизайн сайта в GIMP. Изображение 7.1

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

Баннер сайта

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

Дизайн сайта в GIMP. Изображение 8.1

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

Дизайн сайта в GIMP. Изображение 9.1

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

Дизайн сайта в GIMP. Изображение 10.1

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

Дизайн сайта в GIMP. Изображение 10.2

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

Дизайн сайта в GIMP. Изображение 10.3

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

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

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

Дизайн сайта в GIMP. Изображение 11.1

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

Дизайн сайта в GIMP. Изображение 12.1

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

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

Дизайн сайта в GIMP. Изображение 13.1

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

Дизайн сайта в GIMP. Изображение 13.2

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

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

Дизайн сайта в GIMP. Изображение 14.1

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

Дизайн сайта в GIMP. Изображение 15.1

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

Дизайн сайта в GIMP. Изображение 16.1

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

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

Дизайн сайта в GIMP. Изображение 17.1

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

Дизайн сайта в GIMP. Изображение 17.2

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

Дизайн сайта в GIMP. Изображение 18.1

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

Дизайн сайта в GIMP. Изображение 18.2

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

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

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

Дизайн сайта в GIMP. Изображение 19.1

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

Дизайн сайта в GIMP. Изображение 20.1

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

Дизайн сайта в GIMP. Изображение 20.2

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

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

Дизайн сайта в GIMP. Изображение 22.1

Как видим, клякса некрасиво наезжает на светлую часть сайта, выделим ее в этом месте до футера и удалим выделенное. После установим непрозрачность кляксы 20%. Результат манипуляций над кляксой в подвале:

Дизайн сайта в GIMP. Изображение 22.2

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

Дизайн сайта в GIMP. Изображение 23.1

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

Дизайн сайта в GIMP. Изображение 23.2

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

Дизайн сайта в GIMP. Изображение 23.3

На этом у меня все, надеюсь мой урок был полезен для вас :-).

Лично от меня, огромное спасибо Алексею за предоставленный урок по созданию дизайна сайта.  Хочу пожелать ему творческих успехов и развития его интернет-проекта. Очень надеюсь, что Алексей и в будущем сможет порадовать всех читателей и подписчиков моего блога новыми уроками по созданию дизайна сайта в редакторе GIMP.

На этом все. Удачи вам и до новых встреч на GimpArt.Org.

C уважением, Антон Лапшин и Алексей Климанов.

P.S. Архив с полноразмерными скриншотами из урока вы можете скачать по следующей ссылке.

Пожалуйста, оцените эту статью, нажав на звездочки ниже:


Очень плохоПлохоСреднеХорошоОтлично (5 голосов, оценка: 3,20 из 5)
Загрузка...

P.S. Хотите получать АНОНСЫ НОВЫХ УРОКОВ к себе НА E-MAIL? Тогда подписывайтесь на обновления блога. Буду рад видеть вас среди своих читателей.


Кроме этого, можно нажать красивые социальные кнопочки ниже, чтобы поделиться информацией о блоге GimpArt.Org со своими друзьями в социальных сетях.

Тем самым вы мотивируете меня на создание новых уроков и поддерживаете мой проект в дальнейшем развитии. Спасибо Вам Большое!

Также рекомендую ознакомиться со следующей информацией, возможно, она вас заинтересует.

Видео курс азбука GIMP скачать

Комментариев к статье: 9;

  1. rym

    Как все это потом сохранять и использовать? В смысле, это же все должно работать — ссылки, поля форм и тд. Или это рекомендация по созданию просто дизайна, на который смотришь и делаешь также с помощью разметки?

    • Макс

      Хе… дизайн это дизайн, а не шаблон свертанный html.
      чтобы ссылки работали и т.п. нужно графический дизайн сверстать!
      вот.

  2. allemiko

    Привет, перехожу с фотошопа на гимп, можно узнать — есть ли в программе поддержка psd?, в каком формате сохранять проект?, что бы потом без проблем его открыть и дальше работать.

  3. Людмила

    Меня очень интересует Gimp, рада, что нашла Ваш сайт

  4. Э

    Собственно вопрос в том, как сохранить? в ранних версиях вроде был пункт Сохранить в Веб — а теперь как?

  5. Алексей

    А марафон кроссвордов будет?

  6. Максим

    Чтобы сделать и создать дизайн сайта самому и бесплатно, вам достаточно просто создать свой сайт на бесплатном движке. Подбирайте тот движок, на котором вам будет легче и проще. Большинство сайтов, создаются именно на движках, в основном это WordPress, который отлично себя зарекомендовал на рынке. После того как вы придумали дизайн в голове или на листе, скачивайте движок и заливайте его на свой сервер или хостинг. Источник: http://seogrom.ru/kak-sdelat-dizajn-sajta/

  7. Ольга

    очень интересно-наблюдать пошагово создание шедевров.Сколько времени у Вас ушло на создания этой статьи:столько вставленных фото?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *