В этом уроке мы подробно разберемся с тем, как создать дизайнерское оформление сайта с помощью GIMP.

Работая в сфере веб-дизайна, я практически всегда пользовался функционалом Adobe Photoshop. Было это на протяжении восьми лет. Можно было и дальше работать с этим замечательным продуктом. Однако я решил несколько расширить свои навыки и умения.

Мне безумно нравятся возможности использования Linux-based ОС. Именно Linux был моей первой операционной системой, когда я только начинал серьезно заниматься веб-программированием и разработкой сайтов. Однако это программное обеспечение было практически несовместимо с бесплатными приложениями для создания сайтов и их образов. Я был вынужден отказаться от Linux.

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

По факту, редактор представляет собой простой инструмент, который может стать «волшебным» в руках умелого мастера. Талантливый художник может создавать гениальные творения даже с помощью Paint. Однако веб-дизайнерам не придется мучиться с примитивными графическими редакторами, пока есть GIMP.

В этом уроке нам понадобится четыре простых профилированных приложения:

  • Ubuntu 14.04;
  • Gimp 2.8.10;
  • Gcolor;
  • Сетки 960gs.

Следует помнить о том, что каждый новый элемент нам придется рисовать на отдельном файле. Начнем?

 

Заголовок сайта

1. Запускаем работу GIMP, чтобы открыть сетки 960gs, и формируем новый слой. Вверху нужно было нарисовать вытянутый прямоугольник по ширине макета. Высота – ровно 140 пикселей. Для заливки воспользуемся градиентом. Цвет нижней кромки #111111 и #555555 для верхней.

 

2. Займемся горизонтальной направляющей верхней линии,  чтобы присвоить ей значение в 60 пунктов. Теперь можно применить вставку логотипа. Желательно сделать это с заранее сохраненным изображением в формате png. Логотип нужно будет применить к новому слою четко между правой и левой крайней направляющей в сетке.

 

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

3. Формируем поле поиска.

Необходимо нарисовать небольшой прямоугольник с овальными краями между девятым столбиком в сетке и правой направляющей, расположенной сбоку на краю. Применим к нему заливку цветом #444445. По высоте такой прямоугольник должен занимать 26 пикселей, а радиус его закругления будет около 3 пикселей. Также стоит воспользоваться фильтром Inner Shadow, как на картинке ниже:

 

Займемся установкой плагина  Script-Fu Layer Effects.

В итоге мы получим новый слой с тенью. Именно этот слой будет находиться над зоной поиска. Зафиксируем выделение этого слоя, а затем применим функцию «Выделения», затем «Уменьшить». Это позволит уменьшить размеры выделенной зоны приблизительно на единицу. Применим комбинацию команд «Выделение-Инвертировать». Кромка зоны для поиска по ширине занимает только 1 пиксель. Именно его мы и зальем новым цветом #626467.

 

Запись в этом поле должна выглядеть так «Искать по сайту…». Присвоим тексту шрифт Arial, двенадцатый размер, курсив и цвет #858787.

 

Поместим в нужное место на рабочем поле иконку поиска и применим к ней заливку #626467. Уменьшить рамку стоит до тех пор, пока она не будет смотреться на общем фоне максимально гармонично.

 

4. Слева от графы поиска, как раз между колонками стоит расписать разделы главного меню. В примере используется шрифт PT Sans Narrow Condensed, шестнадцатый размер и код цвета #a6a6a6. Первому разделу присвоим значение цвета #e3e3e3, которое нужно будет подчеркнуть. Разбиваем пункты меню на отдельные графы с помощью пробелов.

 

5. Теперь можно сформировать еще два рабочих прямоугольника на одном и том же слое. Они должны совпадать с шириной рабочей зоны сетки. Высота каждого прямоугольника не превысит и одного пикселя. Разместить такие геометрические объекты следует друг над другом приблизительно по центру шапки. К верхнему прямоугольнику будет присвоен цвет #252728, а к нижнему — #4a4b4b.

 

6. Теперь нам нужно создать еще один новый слой, выше слоя, содержащего полоски меню. Именно её мы рисовали в самом начале. На новом слое необходимо будет изобразить овал. По вертикали он будет занимать лишь половину шапки сайта, а по ширине – всю имеющуюся рабочую область. Половинка овала должна храниться над верхней границей документа. Стоит использовать заливку еще одним новым цветом — #6E9FAE:

 

После этого устраняем выделение и размываем овал через применение Гауссово размывания.

 

Теперь можно воспользоваться шумом, а также задать рабочему слою непрозрачность в размере 30 процентов.

 

7. Теперь между полоской, состоящей из двух цветов, можно дописать дополнительные пункты. Шрифт будет совпадать с главным меню. Размер – четырнадцатый, а цвет с кодом #6d7070. Первому же пункту лучше присвоить гамму с кодом #d7d7d7.

 

Ниже текстового слоя придется сформировать еще один небольшой прямоугольник с закруглением, радиус около 3 пикселей. Заливка должна быть выполнена белым цветом с применением фильтра Inner Shadow. Именно так выглядит путь к нему: Script-Fu > Layer Effects > Inner Shadow. Следует выставить параметры, как на рисунке ниже:

 

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

 

8. Доведем до ума шапку нашего сайта, сделав её верхнюю часть слегка глянцевой. Для этого необходимо сформировать еще один слой над первым слоем. Рисуем прямоугольник по всей ширине файла. Ограничительной линией по высоте должна стать разделительная полоска. В итоге, стоит сделать белоснежную заливку, которой будет присвоена непрозрачность в двадцать процентов.

 

Баннер сайта

9. Конечно же, вы можете оставить всю страницу полностью белой, но с точки зрения дизайна это не только не эстетично, но и совсем непрактично. Именно поэтому мы займемся изготовлением нового слоя с заливкой в цветовом коде #070707.

Мы сформировали темный слой, над которым нужно поместить текстуру фона. Обычно такой файлик именуется skin.jpg.

Теперь можно перейти к уменьшению ширины текстуры сайта до 1390 пикселей. В этом нам поможет команда «Масштаб». Теперь текстура должна размещаться по центру.

Очень важно соблюсти пропорции картинки. Именно поэтому нужно зажать клавишу Shift.

 

Готовую текстуру необходимо обязательно подогнать строго под заголовок сайта. Выберем команду «Ластик» с широкой мягкой кистью. Она поможет вам удалить лишние штрихи с левой, правой и нижней стороны.

 

Теперь нужно присвоить верхнему слою показатель непрозрачности в размере 70 процентов.

После этого можно нарисовать прямоугольную область, предназначенную для отображения главного контента. По ширине он будет занимать всю рабочую область в сетке, а по высоте – от шапки до упора. Применим заливку #070707. Также стоит подумать о тени. Для этого комбинация клавиш Фильтры > Свет и тень > Drop Shadow. Радиус должен насчитывать 50 пикселей, а параметр непрозрачности – 100 процентов.

 

10. Новый слой необходимо дополнить изображением hall.jpg. Мы обрежем его с нижней стороны и сократим размеры по ширине рабочей сетки. Пропорции обязательно должны быть сохранены. Это же изображение нужно будет поместить по центру макета под заголовком.

 

Снова необходимо использование фильтра Inner Shadow. Воспользуемся параметрами, как на картинке ниже:

 

Формируем тень рядом с верхней частью меню. Для этого работаем под слоем, содержащим фоновый градиент менюшки. Сделаем еще один слой, а также разрисуем прямоугольную зону по всей ширине файла. Новый прямоугольник будет слегка выходить за пределы меню. Нужно сделать заливку черного цвета и отработать размывку через Гауссово размывание.

 

По желанию вы также можете сделать декоративную линию в нижней части шапки. По высоте она занимает всего 1 пиксель по ширине файла. Цвет заливки #1d1e1e.

 

11. Обустроим заголовок для нашего баннера — цвет белый, шрифт PT Sans Narrow Condensed, 26 пикселей. Ниже следует обустроить выделение прямоугольной зоны с овальными элементами. Их радиус – 8 пикселей. Далее применим к прямоугольнику черную заливку, а также присвоим значение 45 процентов признаку непрозрачности. Добавим тень.

 

12. В нижней части изображения следует изобразить обычный прямоугольник, 85 пикселей по высоте. Делаем черную заливку и присваиваем значение 70 процентов признаку непрозрачности. Текстовое описание должно помещаться в первые семь колонок рабочей сетки. Свободная зона отведена под графические объекты.

 

13. Теперь сделаем картинки фоном для финальных пяти колонок. Пример размещения указан на изображении ниже:

 

Также стоит избавиться от белоснежных элементов и применить затемнение к нижней части. В этом вам поможет функция «Кисть». Цвет – черный, признак непрозрачности – 30 процентов.

 

14. Делаем еще один рабочий слой по всей ширине файла. Он должен размещаться под рабочим слоем, содержащим изображение зала. Новый слой украсим рисунком овала. Он будет занимать рабочую ширину сетки, а его высота составит 60 пикселей. Заливка цветом #6E9FAE. Вспомним порядок действий из шестого пункта, чтобы выполнить размывку и зададим 10 процентов непрозрачности слою. Результат, как на картинке:

 

15. Сделаем еще один прямоугольник по всей ширине. Его высота – всего 4 пикселя. Ему самое место над слоем из предыдущего пункта. Обязательно нужно проследить за тем, чтобы новый прямоугольник не занимал территорию колонок. Заливка цветом #13191d.

 

16. Дополняем дизайн сайта еще двумя полосами в один пиксель с правой и левой стороны – с их помощью будет обозначена основная зона сайта, где будет предоставлен контент. Между снимком с изображением зала и низом сайта.

 

Создаем подвал (footer) сайта

Основная работа уже завершена, теперь осталось только доработать детали футера сайта.
17. Сформируем сразу несколько рабочих слоев. Новая группа предназначена для размещения еще одной прямоугольной области. Её ширина – 270, а высота всего 140 пикселей. Углы обычно слегка закруглены (радиус – 4 пикселя). Обеспечим заливку в виде градиентного перехода по вертикали от #0D0D0D до #3A3A3A.

 

Сократим размеры выделенной зоны еще на 1 пиксель, займемся инвертированием и заливкой границы #676765. Должно получиться так, чтобы верх границы закрасился, а низ остался бесцветным.

 

18. Делаем еще один слой с изображением под названием kolonki-2.png. Доводим размеры до нужных параметров.

 

19. Остается задать наименование для баннера с цветовой заливкой кода #c1c1c1. При этом цвет модели обязательно нужно закрасить #ffffff. Для заголовка подойдет PT Sans Narrow Condensed. Двадцатый шрифт для первого слова и двадцать шестой для наименования модели.

 

Вернемся к одиннадцатому пункту, чтобы установить тень.

20. Никогда не нужно забывать о теневом эффекте. Для этого снова займемся созданием нового рабочего слоя. Прорисовка тени выполняется с помощью кисточки черного цвета. Параметр непрозрачности установим на 25 процентов.

 

21. Создадим текстовое описание для баннера, а затем трижды продублируем группу слоев, которые имеют непосредственное отношение к баннеру. Они будут располагаться на одинаковом расстоянии друг от друга. По тексту зададим такие параметры: Arial, тринадцатый размер и код цвета #a0a0a0.

 

Когда баннерные группы слоев будут продублированы, картинка немного преобразится:

 

Стоит отметить, что усиленное затемнение было специально применено к двум финальным баннерам. Так отображается тот факт, что именно первый пункт избран в качестве текущего. Это задается через игру с параметром непрозрачности.

Подведем итоги:

  • Всё дело в деталях. Не ленитесь уделять особое внимание мелочам. Это позволит вам допустить минимум оплошностей и ошибок.
  • Не ограничивайте себя стандартами инструментария. Всегда по максимуму реализуйте задуманное.
  • И снова не забывайте о деталях!

Результат наших стараний выглядит следующим образом: